/* ============================================================
   NanoBatt — Professional Engineering UI
   EBZ NanoPower · Navy + Electric Blue
   ============================================================ */

body {
  font-family: 'Segoe UI', Arial, sans-serif !important;
  background: #F0F4FA !important;
  color: #1A2340 !important;
  font-size: 13px !important;
}

.navbar {
  background: #0B1F4B !important;
  border: none !important;
  border-bottom: 3px solid #1E6FD9 !important;
  min-height: 62px !important;
  padding: 0 20px !important;
}

.navbar-brand { padding: 8px 16px 8px 0 !important; height: auto !important; }

.nb-word-nano { font-size: 24px !important; font-weight: 700 !important; color: #FFFFFF !important; letter-spacing: -0.5px !important; }
.nb-word-batt { font-size: 24px !important; font-weight: 700 !important; color: #3B9EFF !important; letter-spacing: -0.5px !important; }
.nb-subtitle  { font-size: 10px !important; color: #85B7EB !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; display: block !important; margin-top: 1px !important; }

.navbar-nav > li > a {
  color: #B8CDE8 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 20px 18px !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.15s !important;
  line-height: 22px !important;
}
.navbar-nav > li > a:hover { color: #FFFFFF !important; background: rgba(30,111,217,0.15) !important; }
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus {
  color: #FFFFFF !important;
  background: transparent !important;
  border-bottom: 3px solid #3B9EFF !important;
}

.tab-content > .tab-pane { padding: 24px !important; }

.nb-card {
  background: #FFFFFF !important;
  border: 1px solid #D8E4F0 !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  margin-bottom: 16px !important;
}

.nb-card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #0B1F4B !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #E6F1FB !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.nb-metric {
  background: #F0F6FF !important;
  border: 1px solid #D0E4F8 !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  text-align: center !important;
}
.nb-metric-label { font-size: 10px !important; color: #5F7A9E !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; margin-bottom: 6px !important; font-weight: 600 !important; }
.nb-metric-value { font-size: 24px !important; font-weight: 700 !important; color: #0B1F4B !important; line-height: 1 !important; }
.nb-metric-unit  { font-size: 12px !important; color: #5F7A9E !important; }

.nb-badge { display: inline-block !important; padding: 3px 10px !important; border-radius: 12px !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; }
.nb-badge-pass { background: #E1F5EE !important; color: #085041 !important; }
.nb-badge-fail { background: #FAECE7 !important; color: #712B13 !important; }
.nb-badge-warn { background: #FFF8E6 !important; color: #7A4F00 !important; }
.nb-badge-info { background: #E6F1FB !important; color: #0C447C !important; }

.btn, .btn-default {
  background: #1E6FD9 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  transition: background 0.15s !important;
}
.btn:hover, .btn-default:hover { background: #1659B8 !important; color: #FFFFFF !important; }

.well {
  background: #FFFFFF !important;
  border: 1px solid #D8E4F0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 18px !important;
}

.form-control {
  border: 1.5px solid #C8D8EC !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  color: #1A2340 !important;
  padding: 7px 11px !important;
  height: 36px !important;
  background: #FAFCFF !important;
  transition: border-color 0.15s !important;
}
.form-control:focus { border-color: #1E6FD9 !important; box-shadow: 0 0 0 3px rgba(30,111,217,0.12) !important; outline: none !important; }

label { font-size: 12px !important; font-weight: 600 !important; color: #3A4F6E !important; margin-bottom: 5px !important; }

.irs-line   { background: #D8E4F0 !important; border-radius: 4px !important; }
.irs-bar    { background: #1E6FD9 !important; border-top: none !important; border-bottom: none !important; }
.irs-bar-edge { background: #1E6FD9 !important; border: none !important; }
.irs-single { background: #0B1F4B !important; font-size: 11px !important; border-radius: 5px !important; }
.irs-handle > i:first-child { background: #1E6FD9 !important; border: 2px solid #FFFFFF !important; }
.irs-min, .irs-max { color: #5F7A9E !important; font-size: 11px !important; background: transparent !important; }

.btn-file { background: #0B1F4B !important; color: #FFFFFF !important; border-radius: 7px 0 0 7px !important; font-size: 12px !important; font-weight: 600 !important; padding: 7px 14px !important; }

table.dataTable thead th, table.dataTable thead td {
  background: #0B1F4B !important;
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 10px 12px !important;
}
table.dataTable tbody tr { background: #FFFFFF !important; }
table.dataTable tbody tr:nth-child(even) { background: #F4F8FF !important; }
table.dataTable tbody tr:hover { background: #E6F1FB !important; }
table.dataTable tbody td { font-size: 12px !important; padding: 8px 12px !important; border-top: 1px solid #EDF2FA !important; color: #1A2340 !important; }
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { font-size: 12px !important; color: #5F7A9E !important; }

.nb-plot-wrap {
  background: #FFFFFF !important;
  border: 1px solid #D8E4F0 !important;
  border-radius: 10px !important;
  padding: 16px !important;
}

.nb-section-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #1E6FD9 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin: 14px 0 8px 0 !important;
}

.nb-step-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  margin-bottom: 4px !important;
  background: #F8FAFF !important;
  border: 1px solid #EDF2FA !important;
  font-size: 13px !important;
}
.nb-step-dot  { width: 10px !important; height: 10px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.nb-step-done   { background: #1EBA6F !important; }
.nb-step-active { background: #1E6FD9 !important; }
.nb-step-todo   { background: #C8D8EC !important; }

.nav-pills > li > a {
  color: #3A4F6E !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  background: transparent !important;
  border: 1px solid #D8E4F0 !important;
  margin-right: 4px !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover { background: #1E6FD9 !important; color: #FFFFFF !important; border-color: #1E6FD9 !important; }
.nav-pills > li > a:hover { background: #E6F1FB !important; color: #0B1F4B !important; }

hr { border: none !important; border-top: 1px solid #E6EEF8 !important; margin: 14px 0 !important; }

.shiny-notification { border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; }
.shiny-notification-message { background: #0B1F4B !important; color: #FFFFFF !important; border-left: 4px solid #1E6FD9 !important; }

.progress-bar { background: #1E6FD9 !important; }

pre { background: #F0F4FA !important; border: 1px solid #D8E4F0 !important; border-radius: 7px !important; font-size: 12px !important; color: #1A2340 !important; padding: 12px 14px !important; }

.selectize-input { border: 1.5px solid #C8D8EC !important; border-radius: 7px !important; font-size: 13px !important; background: #FAFCFF !important; min-height: 36px !important; }
.selectize-input.focus { border-color: #1E6FD9 !important; box-shadow: 0 0 0 3px rgba(30,111,217,0.12) !important; }
.selectize-dropdown { border: 1px solid #D8E4F0 !important; border-radius: 7px !important; font-size: 13px !important; }

.checkbox label { font-size: 13px !important; font-weight: 400 !important; color: #1A2340 !important; }
input[type="checkbox"] { accent-color: #1E6FD9 !important; }


/* ============================================================
   NanoBatt UI v2 — ISO pulse sequence + full-profile ECM
   ============================================================ */
.nb-hero { display:flex; justify-content:space-between; align-items:center; gap:24px; background:linear-gradient(120deg,#0B1F4B 0%,#123A78 60%,#1E6FD9 100%); color:#fff; border-radius:12px; padding:22px 26px; margin-bottom:18px; box-shadow:0 10px 28px rgba(11,31,75,.12); }
.nb-hero-copy { max-width:58%; }
.nb-hero h3 { color:#fff !important; font-size:20px !important; font-weight:700 !important; margin:3px 0 7px !important; }
.nb-hero p { color:#D8E8FA !important; font-size:12px !important; line-height:1.55 !important; margin:0 !important; }
.nb-eyebrow { color:#70BEFF !important; font-size:9px !important; font-weight:800 !important; letter-spacing:1.6px !important; }
.nb-protocol-flow { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.nb-protocol-stage { min-width:92px; display:flex; align-items:center; gap:9px; padding:10px 11px; border:1px solid rgba(255,255,255,.18); border-radius:9px; background:rgba(255,255,255,.09); }
.nb-protocol-stage div { display:flex; flex-direction:column; line-height:1.2; }
.nb-protocol-stage b { color:#fff; font-size:11px; }
.nb-protocol-stage span:not(.nb-stage-code) { color:#BFD8F2; font-size:10px; margin-top:2px; }
.nb-stage-code { width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#0B1F4B; background:#fff; }
.nb-stage-arrow { color:#76BFFF; font-size:17px; font-weight:700; }
.nb-model-equation { font-family:Consolas,monospace; font-size:14px; white-space:nowrap; padding:14px 16px; border:1px solid rgba(255,255,255,.2); border-radius:9px; background:rgba(255,255,255,.08); }
.nb-help { font-size:11px !important; color:#5F7A9E !important; line-height:1.5 !important; margin:4px 0 10px !important; }
.nb-details { border:1px solid #D8E4F0; border-radius:8px; margin-top:12px; background:#F8FBFF; }
.nb-details summary { cursor:pointer; padding:10px 12px; font-size:11px; font-weight:700; color:#0B1F4B; }
.nb-details-body { padding:2px 12px 12px; border-top:1px solid #E6EEF8; }
.nb-info-panel,.nb-warning-panel { border-radius:10px; padding:14px 16px; margin-bottom:16px; font-size:11px; line-height:1.5; }
.nb-info-panel { background:#EAF4FF; border:1px solid #C8DFF6; color:#294C73; }
.nb-warning-panel { background:#FFF8E6; border:1px solid #F2D79B; color:#694A09; }
.nb-info-title { font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; margin-bottom:4px; }
.nb-info-panel p,.nb-warning-panel p { margin:0; }
.nb-contract-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.nb-contract-item { display:flex; flex-direction:column; gap:4px; background:#F5F9FF; border:1px solid #DCE8F5; border-radius:8px; padding:14px; }
.nb-contract-item b { color:#0B1F4B; font-size:12px; }
.nb-contract-item span { color:#5F7A9E; font-size:11px; line-height:1.45; }
.nb-metric-compact { padding:11px 8px !important; }
.nb-metric-compact .nb-metric-value { font-size:18px !important; }
.nb-card-subtitle { margin-top:4px !important; padding-bottom:7px !important; }
.nb-interpretation-list { display:flex; flex-direction:column; gap:10px; }
.nb-interpretation-list > div { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:#F5F9FF; border:1px solid #DCE8F5; border-radius:7px; }
.nb-interpretation-list b { color:#0B1F4B; font-size:11px; }
.nb-interpretation-list span { color:#5F7A9E; font-size:11px; line-height:1.4; }
.btn-nb-dark { background:#0B1F4B !important; }
.btn-nb-dark:hover { background:#071632 !important; }
.btn-nb-secondary { background:#E6EEF8 !important; color:#294C73 !important; border:1px solid #C8D8EC !important; }
.btn-nb-secondary:hover { background:#D8E4F0 !important; color:#0B1F4B !important; }
@media (max-width:1100px) { .nb-hero { align-items:flex-start; flex-direction:column; } .nb-hero-copy { max-width:100%; } .nb-protocol-flow { flex-wrap:wrap; } .nb-model-equation { white-space:normal; } }


/* NanoBatt UI v2.1 — full pulse-block verification and print view */
.nb-protocol-assumptions { margin:10px 0 2px; padding:11px 12px; border:1px solid #D8E4F0; border-radius:8px; background:#F8FBFF; }
.nb-assumption-title { color:#0B1F4B; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; margin-bottom:7px; }
.nb-assumption-row { display:grid; grid-template-columns:74px repeat(4,minmax(0,1fr)); gap:6px; align-items:center; padding:5px 0; border-bottom:1px solid #E6EEF8; }
.nb-assumption-row:last-of-type { border-bottom:none; }
.nb-assumption-row b { color:#0B1F4B; font-size:10px; }
.nb-assumption-row span { color:#46617F; font-size:9px; line-height:1.25; }
.nb-protocol-assumptions p { color:#5F7A9E; font-size:10px; line-height:1.45; margin:7px 0 0; }
.nb-frame-strip { display:grid; grid-template-columns:18fr 42fr 22fr 18fr; gap:5px; margin:2px 0 10px; }
.nb-frame-chip { display:block; padding:7px 8px; border-radius:6px; font-size:10px; font-weight:700; text-align:center; border:1px solid transparent; }
.nb-frame-a { background:#E6F1FB; border-color:#B9D6F2; color:#0C447C; }
.nb-frame-b { background:#EEF4FF; border-color:#CBDDF7; color:#274F87; }
.nb-frame-r { background:#E9F7F1; border-color:#BFE5D5; color:#176347; }
.nb-frame-c { background:#FFF2E9; border-color:#F3CFB5; color:#8A4218; }

@media (max-width:1200px) {
  .nb-assumption-row { grid-template-columns:74px repeat(2,minmax(0,1fr)); }
  .nb-frame-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media print {
  body * { visibility:hidden !important; }
  .nb-print-block, .nb-print-block * { visibility:visible !important; }
  .nb-print-block { position:absolute !important; left:0 !important; top:0 !important; width:100% !important; background:#fff !important; }
  .nb-no-print, .nb-no-print * { display:none !important; visibility:hidden !important; }
  .navbar, .nav, .tab-content > .tab-pane:not(.active) { display:none !important; }
  .nb-card, .nb-plot-wrap { break-inside:avoid; box-shadow:none !important; }
}

/* NanoBatt UI v2.6 — clear dynamic-resistance validation */
.nb-inline-note {
  margin: 6px 0 10px;
  padding: 8px 10px;
  border-left: 3px solid #1E6FD9;
  border-radius: 0 6px 6px 0;
  background: #F3F8FE;
  color: #46617F;
  font-size: 10px;
  line-height: 1.45;
}
.nb-dcir-explainer { margin-top: 10px; margin-bottom: 12px; }
.nb-validation-summary {
  height: 100%;
  padding: 16px;
  border: 1px solid #D8E4F0;
  border-radius: 10px;
  background: #FBFDFF;
}
.nb-summary-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #E6EEF8;
}
.nb-summary-metric span { color: #5F7A9E; font-size: 11px; }
.nb-summary-metric b { color: #0B1F4B; font-size: 15px; white-space: nowrap; }
.nb-summary-rule {
  margin-top: 11px;
  padding: 10px 11px;
  border-radius: 7px;
  background: #EEF5FD;
  color: #46617F;
  font-size: 10px;
  line-height: 1.5;
}
.nb-summary-rule b { display: block; margin-bottom: 3px; color: #0B1F4B; font-size: 10px; }
.nb-summary-secondary { background: #FFF8E6; color: #694A09; }
.nb-dcir-table-card { margin-top: 14px !important; padding: 14px !important; }
@media (max-width: 991px) {
  .nb-validation-summary { margin-top: 12px; }
}

/* NanoBatt UI v2.8 — spacious technical plots and explicit units */
.nb-plot-wrap {
  padding: 18px 18px 12px !important;
  overflow: visible !important;
}
.nb-plot-wrap .plotly,
.nb-plot-wrap .html-widget {
  width: 100% !important;
}
#ecm_parameter_review_tabs > .nav,
#dcir_review_tabs > .nav {
  margin-bottom: 10px;
}
.nb-dcir-table-card .dataTables_wrapper,
#ecm_parameter_review_tabs .dataTables_wrapper {
  margin-top: 8px;
}
@media (max-width: 1200px) {
  .nb-plot-wrap { padding: 14px 12px 10px !important; }
}