/* ==== Fleet Tracker Theme (Bootstrap 5, CSP-safe) ==== */

/* LIGHT THEME TOKENS */
:root,
:root[data-bs-theme="light"] {
  --bs-primary: #2457FF;           /* vivid blue */
  --bs-primary-rgb: 36, 87, 255;
  --bs-secondary: #6366f1;         /* indigo */
  --bs-success: #16a34a;           /* green-600 */
  --bs-info:    #0ea5e9;           /* sky-500 */
  --bs-warning: #f59e0b;           /* amber-500 */
  --bs-danger:  #dc2626;           /* red-600 */

  --surface-0:   #ffffff;
  --surface-1:   #f8fafc;          /* slate-50 */
  --surface-2:   #eef2ff;          /* indigo-50 */
  --ink-0:       #0f172a;          /* slate-900 */
  --ink-1:       #1f2937;          /* slate-800 */
  --muted-ink:   #64748b;          /* slate-500 */

  --bs-body-bg: var(--surface-1);
  --bs-body-color: var(--ink-1);
  --bs-border-color: #e5e7eb;
  --bs-secondary-bg: #f3f4f6;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #1e3ae6;

  --btn-shadow: 0 2px 6px rgba(36,87,255,.15);
  --focus-ring: 0 0 0 .2rem rgba(36,87,255,.35);
}

/* DARK THEME TOKENS */
:root[data-bs-theme="dark"] {
  --bs-body-bg: #0b1020;
  --bs-body-color: #e5e7eb;
  --bs-border-color: #1f2937;
  --bs-secondary-bg: #12182a;

  --surface-0: #0b1020;
  --surface-1: #0f162d;
  --surface-2: #152045;
  --ink-0:     #f3f4f6;
  --ink-1:     #e5e7eb;
  --muted-ink: #9ca3af;

  --bs-link-color: #8fa3ff;
  --bs-link-hover-color: #b9c4ff;
  --btn-shadow: 0 2px 6px rgba(0,0,0,.25);
  --focus-ring: 0 0 0 .2rem rgba(143,163,255,.35);
}

/* ===== Layout basics ===== */
html, body {
  height: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
.navbar {
  background: var(--surface-0) !important;
}
.content-wrapper {
  padding: 1rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 992px) {
  .content-wrapper { padding: 1.5rem; }
}

/* ===== Cards ===== */
.card {
  border: 0;
  border-radius: .9rem;
  background: var(--surface-0);
  box-shadow: 0 6px 20px rgba(2,8,20,.05);
}
.card-header {
  border-bottom: 1px solid var(--bs-border-color);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
}
.table thead {
  background: var(--surface-2);
}

/* ===== Buttons ===== */
.btn {
  font-weight: 600;
  letter-spacing: .02em;
}
.btn-primary {
  color: #fff;
  box-shadow: var(--btn-shadow);
  border: 0;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
  border-width: 2px;
}
a.btn, button.btn { transform: translateZ(0); }
a.btn:hover, button.btn:hover { filter: brightness(1.02); }

/* ===== Forms ===== */
.form-label {
  font-weight: 600;
  color: var(--muted-ink);
}
.form-control, .form-select {
  border-width: 2px;
  border-color: var(--bs-border-color);
  background-color: var(--surface-0);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: var(--focus-ring);
}
.input-group-text {
  border-width: 2px;
  background: var(--surface-2);
  color: var(--ink-1);
}

/* ===== Alerts ===== */
.alert {
  border: 0;
  box-shadow: 0 4px 14px rgba(2,8,20,.08);
}

/* ===== Tables ===== */
.table-hover tbody tr:hover {
  background: rgba(36,87,255,.06);
}
.table td, .table th {
  vertical-align: middle;
}

/* ===== Badges ===== */
.badge.bg-primary {
  box-shadow: 0 2px 6px rgba(36,87,255,.3);
}

/* ===== Utilities ===== */
.text-secondary { color: var(--muted-ink) !important; }
.shadow-soft { box-shadow: 0 8px 24px rgba(2,8,20,.06) !important; }
.input-date-sm { width: 150px; }
.col-actions-sm { width: 100px; }
.col-actions-md { width: 120px; }
.col-actions-lg { width: 140px; }
.text-upper { text-transform: uppercase; }

/* Column widths (non-action columns) */
.col-w-40  { width: 40px; }
.col-w-50  { width: 50px; }
.col-w-60  { width: 60px; }
.col-w-80  { width: 80px; }
.col-w-100 { width: 100px; }
.col-w-120 { width: 120px; }
.col-w-140 { width: 140px; }
.col-w-160 { width: 160px; }
.col-w-180 { width: 180px; }
.col-w-200 { width: 200px; }
.col-w-250 { width: 250px; }
.col-w-35p { width: 35%; }
.col-w-40p { width: 40%; }
.kb-bulk-requeue-col { width: 1%; white-space: nowrap; }

/* Scroll containers */
.scroll-200 { max-height: 200px; overflow-y: auto; }
.scroll-300 { max-height: 300px; overflow-y: auto; }
.scroll-400 { max-height: 400px; overflow-y: auto; }
.scroll-500 { max-height: 500px; overflow-y: auto; }
.scroll-600 { max-height: 600px; overflow-y: auto; }

/* Font sizes */
.text-xs       { font-size: 0.6rem; }
.text-sm-table { font-size: 0.85rem; }
.icon-4x       { font-size: 4rem; }

/* Max-width constraints */
.max-w-100 { max-width: 100px; }
.max-w-200 { max-width: 200px; }
.max-w-300 { max-width: 300px; }
.max-w-320 { max-width: 320px; }
.max-w-400 { max-width: 400px; }
.text-truncate-200 { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Miscellaneous */
.ws-pre-wrap      { white-space: pre-wrap; }
.progress-thin    { height: 6px; }
.cursor-pointer   { cursor: pointer; }
.status-dot       { font-size: 0.5rem; }

/* ---- THEME SMOKE TEST ---- */
:root,
[data-bs-theme="light"] {
  --bs-body-bg: #f7fafc;        /* very light gray-blue */
  --bs-body-color: #0f172a;     /* slate-900 */
  --bs-border-color: #cbd5e1;   /* blue-gray */
  --bs-primary: #2563eb;        /* vivid blue */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #1d4ed8;
  --bs-btn-border-radius: .5rem;
}
[data-bs-theme="dark"] {
  --bs-body-bg: #0b1220;
  --bs-body-color: #e2e8f0;
  --bs-border-color: #334155;
  --bs-primary: #60a5fa;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #93c5fd;
}

/* make buttons/alerts obviously different */
.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); }
.alert-info  { --bs-alert-bg: #e0f2fe; --bs-alert-border-color: #7dd3fc; --bs-alert-color: #0c4a6e; }

/* === Soft Mint theme overrides (append at END of app.css) === */

/* Light */
:root,
:root[data-bs-theme="light"] {
  /* Palette: soft teal + gray-blues */
  --bs-primary: #14b8a6;                /* teal-500 */
  --bs-primary-rgb: 20, 184, 166;
  --bs-secondary: #64748b;              /* slate-500 */
  --bs-success: #22c55e;                /* green-500 */
  --bs-info:    #38bdf8;                /* sky-400 */
  --bs-warning: #f59e0b;                /* amber-500 */
  --bs-danger:  #ef4444;                /* red-500 */

  /* Softer surfaces & ink */
  --surface-0: #ffffff;
  --surface-1: #f7fafc;                 /* very light */
  --surface-2: #edf6f5;                 /* mint tint */
  --bs-body-bg: var(--surface-1);
  --bs-body-color: #1f2937;
  --bs-border-color: #e6e9ee;
  --bs-secondary-bg: #f1f5f9;

  /* Links */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #0ea5a1;

  /* Component feel */
  --btn-shadow: 0 4px 14px rgba(20,184,166,.15);
  --focus-ring: 0 0 0 .18rem rgba(20,184,166,.35);

  /* Global radius a touch rounder */
  --radius: .85rem;
}

/* Dark */
:root[data-bs-theme="dark"] {
  --bs-body-bg: #0e1622;                /* deep blue-gray */
  --bs-body-color: #e5e7eb;
  --bs-border-color: #1f2a37;
  --bs-secondary-bg: #131c2a;

  --surface-0: #0e1622;
  --surface-1: #111b2a;
  --surface-2: #0f2a28;                 /* teal-tinted */
  --ink-0:     #f3f4f6;
  --ink-1:     #e5e7eb;
  --muted-ink: #9ca3af;
  --bs-link-color: #7cdcd2;
  --bs-link-hover-color: #9fe7df;

  --btn-shadow: 0 4px 14px rgba(0,0,0,.25);
  --focus-ring: 0 0 0 .18rem rgba(124,220,210,.35);
}

/* Softer layout accents */
.navbar { background: var(--surface-0) !important; }
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(2,8,20,.06);
}
.card-header {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-0));
  color: inherit;
  border-bottom: 1px solid var(--bs-border-color);
}
.table thead { background: var(--surface-2); }
[data-bs-theme="dark"] .table thead { background: var(--surface-2); }

/* Buttons: less "shouty", clearer affordance */
.btn {
  font-weight: 500;                       /* down from 600 */
  letter-spacing: 0;
  border-radius: .6rem;
}
.btn-primary {
  --bs-btn-color: #07323a;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #10a196;
  --bs-btn-hover-border-color: #10a196;
  --bs-btn-active-bg: #0b7f76;
  --bs-btn-active-border-color: #0b7f76;
  box-shadow: var(--btn-shadow);
}
.btn-outline-primary {
  --bs-btn-color: #0f766e;
  --bs-btn-border-color: rgba(20,184,166,.55);
  --bs-btn-hover-bg: rgba(20,184,166,.12);
  --bs-btn-hover-color: #0f766e;
  --bs-btn-hover-border-color: rgba(20,184,166,.8);
}

/* Optional "soft" button variant for stat tiles etc. */
.btn-soft-primary {
  color: #0f766e;
  background: rgba(20,184,166,.12);
  border: 1px solid rgba(20,184,166,.18);
}
.btn-soft-primary:hover { background: rgba(20,184,166,.18); }

/* Inputs: calmer borders, vivid focus */
.form-control, .form-select {
  border-width: 1.5px;
  border-color: var(--bs-border-color);
  background: var(--surface-0);
  border-radius: .6rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: var(--focus-ring);
}

/* Alerts: minty info tone */
.alert-info  {
  --bs-alert-bg: #e7f7f6;
  --bs-alert-border-color: #b6ece6;
  --bs-alert-color: #0f5f59;
  border-radius: .7rem;
}

/* Badges/pills */
.badge.bg-primary { background: rgba(20,184,166,.18) !important; color: #0f766e; }

/* === Visual tuning: solid buttons + colored navbar === */

/* Navbar: use primary background + white text */
.navbar {
  background: var(--bs-primary) !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn,
.navbar .bi {
  color: #fff !important;
}
.navbar .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,.6);
  --bs-btn-hover-bg: rgba(255,255,255,.15);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255,255,255,.8);
}

/* Default primary button = solid */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: shade-color(var(--bs-primary), 15%);
  --bs-btn-hover-border-color: shade-color(var(--bs-primary), 15%);
  --bs-btn-active-bg: shade-color(var(--bs-primary), 25%);
  --bs-btn-active-border-color: shade-color(var(--bs-primary), 25%);
}

/* Secondary button: softer filled gray */
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6b7280; /* slate-500 */
  --bs-btn-border-color: #6b7280;
  --bs-btn-hover-bg: #4b5563; /* slate-600 */
  --bs-btn-hover-border-color: #4b5563;
}

/* Remove outlines unless explicitly used */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
  border-width: 1px;
  font-weight: 500;
}

/* === Navbar: primary background with white text === */
.navbar {
  background: var(--bs-primary) !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .btn,
.navbar .bi {
  color: #fff !important;
}

/* === Buttons: enforce filled style === */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1e40af;       /* darker shade of primary */
  --bs-btn-hover-border-color: #1e40af;
  --bs-btn-active-bg: #1e3a8a;
  --bs-btn-active-border-color: #1e3a8a;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6b7280;   /* slate-500 */
  --bs-btn-border-color: #6b7280;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4b5563;
  --bs-btn-hover-border-color: #4b5563;
  --bs-btn-active-bg: #374151;
  --bs-btn-active-border-color: #374151;
  --bs-btn-disabled-bg: #6b7280;
  --bs-btn-disabled-border-color: #6b7280;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
}

/* Make outline variants look like filled on hover */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover {
  color: #fff !important;
}

/* ================================
   SOLID BUTTONS (even for bare .btn)
   ================================ */

/* Make plain .btn render as a primary filled button */
.btn:not(.btn-link) {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #1e40af;          /* tweak these if your primary differs */
  --bs-btn-hover-border-color: #1e40af;
  --bs-btn-active-bg: #1e3a8a;
  --bs-btn-active-border-color: #1e3a8a;
}

/* Also force *outline* variants to behave filled (since you don't want outlines) */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-btn-border-color);
  --bs-btn-hover-bg: var(--bs-btn-border-color);
  --bs-btn-hover-color: #fff;
}

/* Keep explicit variants filled too (belt & suspenders) */
.btn-primary   { --bs-btn-color:#fff; --bs-btn-bg:var(--bs-primary); --bs-btn-border-color:var(--bs-primary); }
.btn-secondary { --bs-btn-color:#fff; --bs-btn-bg:#6b7280; --bs-btn-border-color:#6b7280; }
.btn-success   { --bs-btn-color:#fff; --bs-btn-bg:#16a34a; --bs-btn-border-color:#16a34a; }
.btn-danger    { --bs-btn-color:#fff; --bs-btn-bg:#dc2626; --bs-btn-border-color:#dc2626; }

/* ============================================================================
   SIDEBAR & APP LAYOUT (consolidated)
   ============================================================================ */

/* Layout container */
.app-shell {
  min-height: calc(100vh - 56px);
}

/* Sidebar container */
.app-sidebar {
  width: 260px;
  min-width: 260px;
  background-color: #1f2937 !important; /* slate-800 */
  color: #fff;
  border-right: 0 !important;
}
/* Collapse sidebar wrapper on mobile — offcanvas uses position:fixed so still works */
@media (max-width: 991.98px) {
  .app-sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border: 0 !important;
  }
}

/* Main content area */
.app-main {
  min-width: 0; /* prevent flex overflow with wide tables */
}

/* Mobile sidebar (offcanvas) */
.offcanvas,
.offcanvas .offcanvas-header,
.offcanvas .offcanvas-body {
  background-color: #1f2937 !important;
  color: #ffffff;
}
.offcanvas .btn-close {
  filter: invert(1) grayscale(1);
  opacity: .85;
}

/* Sidebar navigation container */
.sidebar-nav {
  padding: 1rem;
}

/* Section headers (Physical Hierarchy, Catalog, etc.) */
.sidebar-nav .section-toggle {
  cursor: pointer;
  color: #9ca3af !important; /* slate-400 */
}
.sidebar-nav .section-toggle:hover {
  color: #ffffff !important;
  text-decoration: none;
}
.sidebar-nav .section-toggle .chev {
  transition: transform 0.2s;
}
.sidebar-nav .section-toggle[aria-expanded="true"] .chev {
  transform: rotate(90deg);
}

/* Sidebar links */
.sidebar-nav .nav-link {
  color: #e5e7eb; /* slate-200 */
  border-radius: 0;
  padding: 0.5rem 0.75rem;
}
.sidebar-nav .nav-link:hover {
  background-color: #374151; /* slate-700 */
  color: #ffffff;
}
.sidebar-nav .nav-link.active {
  background-color: var(--bs-primary);
  color: #ffffff;
}

/* ============================================================================
   BULK UPLOAD - Progress Indicators
   ============================================================================ */

/* Loading overlay background */
.bulk-upload-overlay {
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* Loading modal box */
.bulk-upload-modal {
    min-width: 300px;
}

/* Large spinner */
.spinner-lg {
    width: 3rem;
    height: 3rem;
}

/* Large icons (2rem) */
.icon-lg {
    font-size: 2rem;
}

/* Scrollable table container */
.table-scroll-container {
    max-height: 400px;
    overflow-y: auto;
}

/* Fixed column widths for preview table */
.col-row-num {
    width: 40px;
}

.col-action {
    width: 80px;
}

/* Tall progress bar */
.progress-tall {
    height: 25px;
}

/* Progress bar width classes (CSP compliant - no inline styles) */
.progress-w-0 { width: 0%; }
.progress-w-1 { width: 1%; }
.progress-w-2 { width: 2%; }
.progress-w-3 { width: 3%; }
.progress-w-4 { width: 4%; }
.progress-w-5 { width: 5%; }
.progress-w-6 { width: 6%; }
.progress-w-7 { width: 7%; }
.progress-w-8 { width: 8%; }
.progress-w-9 { width: 9%; }
.progress-w-10 { width: 10%; }
.progress-w-11 { width: 11%; }
.progress-w-12 { width: 12%; }
.progress-w-13 { width: 13%; }
.progress-w-14 { width: 14%; }
.progress-w-15 { width: 15%; }
.progress-w-16 { width: 16%; }
.progress-w-17 { width: 17%; }
.progress-w-18 { width: 18%; }
.progress-w-19 { width: 19%; }
.progress-w-20 { width: 20%; }
.progress-w-21 { width: 21%; }
.progress-w-22 { width: 22%; }
.progress-w-23 { width: 23%; }
.progress-w-24 { width: 24%; }
.progress-w-25 { width: 25%; }
.progress-w-26 { width: 26%; }
.progress-w-27 { width: 27%; }
.progress-w-28 { width: 28%; }
.progress-w-29 { width: 29%; }
.progress-w-30 { width: 30%; }
.progress-w-31 { width: 31%; }
.progress-w-32 { width: 32%; }
.progress-w-33 { width: 33%; }
.progress-w-34 { width: 34%; }
.progress-w-35 { width: 35%; }
.progress-w-36 { width: 36%; }
.progress-w-37 { width: 37%; }
.progress-w-38 { width: 38%; }
.progress-w-39 { width: 39%; }
.progress-w-40 { width: 40%; }
.progress-w-41 { width: 41%; }
.progress-w-42 { width: 42%; }
.progress-w-43 { width: 43%; }
.progress-w-44 { width: 44%; }
.progress-w-45 { width: 45%; }
.progress-w-46 { width: 46%; }
.progress-w-47 { width: 47%; }
.progress-w-48 { width: 48%; }
.progress-w-49 { width: 49%; }
.progress-w-50 { width: 50%; }
.progress-w-51 { width: 51%; }
.progress-w-52 { width: 52%; }
.progress-w-53 { width: 53%; }
.progress-w-54 { width: 54%; }
.progress-w-55 { width: 55%; }
.progress-w-56 { width: 56%; }
.progress-w-57 { width: 57%; }
.progress-w-58 { width: 58%; }
.progress-w-59 { width: 59%; }
.progress-w-60 { width: 60%; }
.progress-w-61 { width: 61%; }
.progress-w-62 { width: 62%; }
.progress-w-63 { width: 63%; }
.progress-w-64 { width: 64%; }
.progress-w-65 { width: 65%; }
.progress-w-66 { width: 66%; }
.progress-w-67 { width: 67%; }
.progress-w-68 { width: 68%; }
.progress-w-69 { width: 69%; }
.progress-w-70 { width: 70%; }
.progress-w-71 { width: 71%; }
.progress-w-72 { width: 72%; }
.progress-w-73 { width: 73%; }
.progress-w-74 { width: 74%; }
.progress-w-75 { width: 75%; }
.progress-w-76 { width: 76%; }
.progress-w-77 { width: 77%; }
.progress-w-78 { width: 78%; }
.progress-w-79 { width: 79%; }
.progress-w-80 { width: 80%; }
.progress-w-81 { width: 81%; }
.progress-w-82 { width: 82%; }
.progress-w-83 { width: 83%; }
.progress-w-84 { width: 84%; }
.progress-w-85 { width: 85%; }
.progress-w-86 { width: 86%; }
.progress-w-87 { width: 87%; }
.progress-w-88 { width: 88%; }
.progress-w-89 { width: 89%; }
.progress-w-90 { width: 90%; }
.progress-w-91 { width: 91%; }
.progress-w-92 { width: 92%; }
.progress-w-93 { width: 93%; }
.progress-w-94 { width: 94%; }
.progress-w-95 { width: 95%; }
.progress-w-96 { width: 96%; }
.progress-w-97 { width: 97%; }
.progress-w-98 { width: 98%; }
.progress-w-99 { width: 99%; }
.progress-w-100 { width: 100%; }


/* ==== Fleet Counter Update ==== */

.counter-table input[type="number"] {
  width: 80px;
  padding: 2px 4px;
  font-size: 0.85rem;
  text-align: right;
}

.counter-table th {
  white-space: nowrap;
  font-size: 0.75rem;
  text-align: center;
  vertical-align: bottom;
}

.counter-table td {
  white-space: nowrap;
  padding: 4px 6px;
  vertical-align: middle;
}

.counter-table .unit-info {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1;
}

.counter-table thead th.unit-info {
  z-index: 2;
}

.col-unit-name { min-width: 200px; }
.col-plant-name { min-width: 120px; }
.icon-empty-state { font-size: 3rem; }

.changed-cell input {
  background-color: #fff3cd;
  border-color: #ffc107;
}

/* Hierarchy Browser */
.hierarchy-container {
  max-width: 900px;
}

.hierarchy-card {
  position: relative;
}

.hierarchy-connector {
  position: absolute;
  left: 24px;
  bottom: -8px;
  width: 2px;
  height: 16px;
  background: var(--bs-border-color);
}

.hierarchy-connector-up {
  position: absolute;
  left: -16px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--bs-border-color);
}

.center-card .card {
  border-width: 2px;
}

.child-card {
  border-left: 2px solid var(--bs-border-color);
  padding-left: 16px;
}

.detail-panel table {
  font-size: 0.875rem;
}

.detail-panel th {
  width: 40%;
  font-weight: 500;
}

/* ===== Password Validation ===== */
.pw-rule {
  list-style: none;
  padding: .15rem 0;
  transition: color .15s ease;
  color: var(--muted-ink);
}
.pw-rule i {
  width: 1.2em;
  text-align: center;
  margin-right: .35rem;
}
.pw-rule-pass {
  color: var(--bs-success);
}
.pw-rule-fail {
  color: var(--bs-danger);
}
.pw-match-indicator {
  font-size: .875rem;
  margin-top: .35rem;
  display: none;
}
.pw-match-indicator.visible {
  display: block;
}
.pw-match {
  color: var(--bs-success);
}
.pw-mismatch {
  color: var(--bs-danger);
}
.pw-toggle-btn {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-secondary-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
}
.pw-toggle-btn:hover {
  background: var(--bs-border-color);
}

/* ============================================================================
   PLANNING / BUDGET SCROLL
   ============================================================================ */

/* Plant color coding for outage cells and badges */
.plant-color-1  { background-color: #dbeafe; color: #1e3a5f; } /* blue-100 */
.plant-color-2  { background-color: #fce7f3; color: #831843; } /* pink-100 */
.plant-color-3  { background-color: #d1fae5; color: #064e3b; } /* emerald-100 */
.plant-color-4  { background-color: #fef3c7; color: #78350f; } /* amber-100 */
.plant-color-5  { background-color: #ede9fe; color: #4c1d95; } /* violet-100 */
.plant-color-6  { background-color: #ffedd5; color: #7c2d12; } /* orange-100 */
.plant-color-7  { background-color: #cffafe; color: #164e63; } /* cyan-100 */
.plant-color-8  { background-color: #fef9c3; color: #713f12; } /* yellow-100 */
.plant-color-9  { background-color: #f3e8ff; color: #581c87; } /* purple-100 */
.plant-color-10 { background-color: #ecfccb; color: #365314; } /* lime-100 */

/* Planning grid (calendar + budget scroll) */
.planning-grid {
  font-size: 0.8rem;
}
.planning-grid th,
.planning-grid td {
  vertical-align: middle;
}
.planning-fy-col {
  min-width: 70px;
}
.planning-month-col {
  min-width: 100px;
}

/* Outage cell within calendar */
.planning-outage-cell {
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.3;
  border: 1px solid rgba(0,0,0,0.08);
}
.planning-outage-cell:hover {
  opacity: 0.85;
}

/* Override icon (pencil) shown on overridden dates */
.planning-override-icon {
  font-size: 0.6rem;
}

/* Blackout month shading */
.blackout-month {
  background-color: var(--bs-secondary-bg) !important;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(128,128,128,0.08) 4px,
    rgba(128,128,128,0.08) 8px
  );
}

/* Budget scroll grid */
.budget-grid td,
.budget-grid th {
  white-space: nowrap;
  padding: 4px 8px;
}
.planning-budget-label-col {
  min-width: 180px;
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
.planning-budget-col {
  min-width: 120px;
}
.budget-fy-header {
  border-bottom: 2px solid var(--bs-border-color);
}
.budget-type-badge {
  font-size: 0.6rem;
  vertical-align: middle;
  margin-left: 2px;
}

/* ============================================================================
   DARK MODE OVERRIDES — Bootstrap utility classes + specialty components
   Fixes all templates at once without modifying individual .html files.
   ============================================================================ */

/* --- Bootstrap utility class overrides --- */

/* .table-secondary — subsection header rows (statuses, fleet-counters, budget) */
[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: #162230;
  --bs-table-color: var(--ink-1);
  --bs-table-border-color: var(--bs-border-color);
}

/* .bg-body on card headers — blends into page bg in dark mode, needs subtle distinction */
[data-bs-theme="dark"] .card-header.bg-body {
  background-color: var(--surface-1) !important;
}

/* .table-light on <thead> — used on ~83 tables across all list views */
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: var(--surface-2);
  --bs-table-color: var(--ink-1);
  --bs-table-border-color: var(--bs-border-color);
}

/* .alert-light — used on ~24 list page info boxes */
[data-bs-theme="dark"] .alert-light {
  --bs-alert-bg: var(--surface-2);
  --bs-alert-color: var(--ink-1);
  --bs-alert-border-color: var(--bs-border-color);
}

/* .alert-info — helper/about sections on config pages, planning, cascade delete */
[data-bs-theme="dark"] .alert-info {
  --bs-alert-bg: #0c2a3d;
  --bs-alert-color: #93c5fd;
  --bs-alert-border-color: #1e3a5f;
}

/* .alert-warning — hierarchy browser, bulk preview, forecast, MFA */
[data-bs-theme="dark"] .alert-warning {
  --bs-alert-bg: #2a2008;
  --bs-alert-color: #fcd34d;
  --bs-alert-border-color: #78350f;
}

/* .alert-danger — mass delete, cascade delete, debug tools */
[data-bs-theme="dark"] .alert-danger {
  --bs-alert-bg: #2a0a0a;
  --bs-alert-color: #fca5a5;
  --bs-alert-border-color: #7f1d1d;
}

/* .alert-success — swap preview, equipment edit */
[data-bs-theme="dark"] .alert-success {
  --bs-alert-bg: #052e16;
  --bs-alert-color: #86efac;
  --bs-alert-border-color: #14532d;
}

/* .alert-secondary — equipment edit */
[data-bs-theme="dark"] .alert-secondary {
  --bs-alert-bg: var(--surface-1);
  --bs-alert-color: var(--ink-1);
  --bs-alert-border-color: var(--bs-border-color);
}

/* .bg-white — used on audit log cards, bulk upload, etc. */
[data-bs-theme="dark"] .bg-white {
  background-color: var(--surface-0) !important;
}

/* .bg-light — used on card footers, panels, outage details */
[data-bs-theme="dark"] .bg-light {
  background-color: var(--surface-1) !important;
}

/* .badge.bg-light — used on outage/forecast badges */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: var(--surface-2) !important;
}

/* .text-dark — forces black text, unreadable on dark backgrounds */
[data-bs-theme="dark"] .text-dark {
  color: var(--ink-1) !important;
}

/* .text-muted — Bootstrap default may not match our muted-ink */
[data-bs-theme="dark"] .text-muted {
  color: var(--muted-ink) !important;
}

/* .card.bg-light — used for outage info panels */
[data-bs-theme="dark"] .card.bg-light {
  background-color: var(--surface-1) !important;
  border-color: var(--bs-border-color) !important;
}

/* .list-group-item — Bootstrap list groups in modals/panels */
[data-bs-theme="dark"] .list-group-item {
  background-color: var(--surface-0);
  color: var(--ink-1);
  border-color: var(--bs-border-color);
}

/* .modal-content — ensure modals match theme */
[data-bs-theme="dark"] .modal-content {
  background-color: var(--surface-0);
  color: var(--ink-1);
  border-color: var(--bs-border-color);
}

/* .modal-header, .modal-footer — borders should match */
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
  border-color: var(--bs-border-color);
}

/* .dropdown-menu — context menus, filters */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--surface-0);
  border-color: var(--bs-border-color);
  color: var(--ink-1);
}
[data-bs-theme="dark"] .dropdown-item {
  color: var(--ink-1);
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--surface-2);
  color: var(--ink-0);
}

/* .table-hover — row hover should work on dark bg */
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background: rgba(143,163,255,.08);
}

/* .input-group-text — dark mode match */
[data-bs-theme="dark"] .input-group-text {
  background: var(--surface-2);
  color: var(--ink-1);
  border-color: var(--bs-border-color);
}

/* <hr> and .border — ensure dividers are visible */
[data-bs-theme="dark"] hr {
  border-color: var(--bs-border-color);
  opacity: .5;
}

/* .form-check-input — checkbox/radio borders */
[data-bs-theme="dark"] .form-check-input {
  background-color: var(--surface-0);
  border-color: var(--bs-border-color);
}

/* .breadcrumb — if used */
[data-bs-theme="dark"] .breadcrumb {
  --bs-breadcrumb-divider-color: var(--muted-ink);
}
[data-bs-theme="dark"] .breadcrumb-item a {
  color: var(--bs-link-color);
}
[data-bs-theme="dark"] .breadcrumb-item.active {
  color: var(--muted-ink);
}

/* --- Specialty component dark overrides --- */

/* Changed cell highlight (counter update page) */
[data-bs-theme="dark"] .changed-cell input {
  background-color: #423a15;
  border-color: #d4a017;
}

/* AUD-H11 (ui implementation review HIGH): a cell that is BOTH changed and
   invalid must read invalid-red in both themes — without these, the dark
   changed-cell rule's higher specificity leaves the bad cell amber and
   indistinguishable in a table full of edits. */
.changed-cell input.is-invalid {
  border-color: var(--bs-danger);
}
[data-bs-theme="dark"] .changed-cell input.is-invalid {
  border-color: var(--bs-danger);
}

/* Plant color badges — deeper/richer colors for dark mode */
[data-bs-theme="dark"] .plant-color-1  { background-color: #1e3a5f; color: #93c5fd; }
[data-bs-theme="dark"] .plant-color-2  { background-color: #500724; color: #fbcfe8; }
[data-bs-theme="dark"] .plant-color-3  { background-color: #064e3b; color: #6ee7b7; }
[data-bs-theme="dark"] .plant-color-4  { background-color: #78350f; color: #fcd34d; }
[data-bs-theme="dark"] .plant-color-5  { background-color: #4c1d95; color: #c4b5fd; }
[data-bs-theme="dark"] .plant-color-6  { background-color: #7c2d12; color: #fdba74; }
[data-bs-theme="dark"] .plant-color-7  { background-color: #164e63; color: #67e8f9; }
[data-bs-theme="dark"] .plant-color-8  { background-color: #713f12; color: #fde68a; }
[data-bs-theme="dark"] .plant-color-9  { background-color: #581c87; color: #d8b4fe; }
[data-bs-theme="dark"] .plant-color-10 { background-color: #365314; color: #bef264; }

/* Blackout month stripe — increase contrast for dark bg */
[data-bs-theme="dark"] .blackout-month {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(200,200,200,0.06) 4px,
    rgba(200,200,200,0.06) 8px
  );
}

/* Outage cell border — visible on dark background */
[data-bs-theme="dark"] .planning-outage-cell {
  border-color: rgba(255,255,255,0.1);
}

/* Sidebar — slightly different shade from page bg for distinction */
[data-bs-theme="dark"] .app-sidebar {
  background-color: #0a0f1a !important;
  border-right: 1px solid var(--bs-border-color) !important;
}
[data-bs-theme="dark"] .offcanvas,
[data-bs-theme="dark"] .offcanvas .offcanvas-header,
[data-bs-theme="dark"] .offcanvas .offcanvas-body {
  background-color: #0a0f1a !important;
}

/* Sidebar hover — needs to contrast against darker sidebar bg */
[data-bs-theme="dark"] .sidebar-nav .nav-link:hover {
  background-color: #1a2332;
}

/* Bulk upload overlay — lighter overlay so content beneath is dimmed, not invisible */
[data-bs-theme="dark"] .bulk-upload-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
  background-color: var(--surface-0);
  color: var(--bs-link-color);
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--surface-1);
  color: var(--muted-ink);
}

/* Accordion (if used in detail pages) */
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--surface-1);
  color: var(--ink-1);
}
[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--surface-2);
  color: var(--ink-0);
}
[data-bs-theme="dark"] .accordion-body {
  background-color: var(--surface-0);
}

/* Tooltip */
[data-bs-theme="dark"] .tooltip-inner {
  background-color: var(--surface-2);
  color: var(--ink-0);
}

/* Card box-shadow — slightly stronger on dark bg so cards are distinguishable */
[data-bs-theme="dark"] .card {
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* Badge semantic colors — ensure text contrast */
[data-bs-theme="dark"] .badge.bg-warning {
  color: #1a1a1a !important;
}

/* bg-opacity-10 helpers — used on admin home stat tiles */
[data-bs-theme="dark"] .bg-warning.bg-opacity-10 {
  background-color: rgba(245,158,11,0.12) !important;
}
[data-bs-theme="dark"] .bg-info.bg-opacity-10 {
  background-color: rgba(14,165,233,0.12) !important;
}
[data-bs-theme="dark"] .bg-primary.bg-opacity-10 {
  background-color: rgba(20,184,166,0.12) !important;
}
[data-bs-theme="dark"] .bg-success.bg-opacity-10 {
  background-color: rgba(22,163,74,0.12) !important;
}
[data-bs-theme="dark"] .bg-danger.bg-opacity-10 {
  background-color: rgba(220,38,38,0.12) !important;
}

/* ================================================================
   Hours & Starts chart
   ================================================================ */
.chart-wrapper {
  position: relative;
  width: 100%;
}

.chart-wrapper-mini {
  position: relative;
  width: 100%;
  max-height: 200px;
}

.chart-status-badge {
  font-size: 0.75rem;
}

/* Override slider section */
.override-panel .form-range {
  width: 100%;
}

.override-panel .rate-display {
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Legend swatches */
.legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-swatch-teal {
  background-color: #14b8a6;
}

.legend-swatch-amber {
  background-color: #f59e0b;
}

.legend-swatch-teal-outline {
  background-color: transparent;
  border: 2px solid #14b8a6;
  border-radius: 0;
}

.legend-swatch-amber-outline {
  background-color: transparent;
  border: 2px solid #f59e0b;
  border-radius: 0;
}

.legend-line {
  display: inline-block;
  width: 10px;
  height: 2px;
}

.legend-line-threshold {
  background-color: rgba(59,130,246,0.5);
}

/* Dark mode chart adjustments */
[data-bs-theme="dark"] .chart-wrapper canvas,
[data-bs-theme="dark"] .chart-wrapper-mini canvas {
  border-radius: 0.375rem;
}

/* ==== Database Explorer Tree ==== */
.db-tree { list-style: none; padding-left: 0; margin: 0; }
.db-tree ul { list-style: none; padding-left: 1.25rem; margin: 0; }
.db-tree li { position: relative; }

.db-tree-node {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  user-select: none;
  gap: 0.4rem;
  font-size: 0.875rem;
}
.db-tree-node:hover { background: var(--surface-2); }

.db-tree-caret {
  display: inline-flex;
  width: 1rem;
  justify-content: center;
  transition: transform 0.15s ease;
  color: var(--muted-ink);
  flex-shrink: 0;
}
.db-tree-caret.open { transform: rotate(90deg); }
.db-tree-caret.empty { visibility: hidden; }

.db-tree-icon { flex-shrink: 0; color: var(--muted-ink); }
.db-tree-label { flex-grow: 1; }
.db-tree-badge {
  font-size: 0.75rem;
  color: var(--muted-ink);
  flex-shrink: 0;
}

.db-tree-children { display: none; }
.db-tree-children.open { display: block; }

.db-tree-loading {
  padding: 0.25rem 0.5rem 0.25rem 2.5rem;
  font-size: 0.8rem;
  color: var(--muted-ink);
  font-style: italic;
}

/* Column detail rows */
.db-tree-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  font-family: var(--bs-font-monospace);
}
.db-tree-col-header { opacity: 0.6; }
.db-tree-col-name { font-weight: 600; }
.db-tree-col-type { color: var(--muted-ink); }
.db-tree-col-meta { font-size: 0.75rem; min-width: 0; }
.db-tree-col-meta .badge { font-size: 0.65rem; vertical-align: middle; }
.db-tree-fk-badge { white-space: normal; word-break: break-all; text-align: left; }

/* Data preview table */
.db-tree-data-wrap {
  max-height: 400px;
  overflow: auto;
  margin: 0.25rem 0 0.25rem 2.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
}
.db-tree-data-wrap table { font-size: 0.78rem; margin-bottom: 0; }
.db-tree-data-wrap th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.db-tree-data-wrap td { white-space: nowrap; max-width: 250px; overflow: hidden; text-overflow: ellipsis; }

/* Swirl turbine curve preview — validation highlighting (CSP-compliant, no inline styles) */
.curve-error-row     { background: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
.curve-warn-row      { background: var(--bs-warning-bg-subtle) !important; color: var(--bs-warning-text-emphasis) !important; }
.curve-error-alert   { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border-color: var(--bs-danger-border-subtle) !important; }
.curve-error-badge   { background: var(--bs-danger-bg-subtle) !important; color: var(--bs-danger-text-emphasis) !important; }
.curve-scroll-cap    { max-height: 300px; overflow-y: auto; }

/* Document upload — extracted text preview */
.doc-text-preview {
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* T48 Spread Calculator */
.t48-label-col    { min-width: 140px; }
.t48-label-col-lg { min-width: 180px; }
.t48-pos-col      { min-width: 90px; }
.t48-legend-label { width: 60px; }

/* Vibration Diagnostics Tool */
.fft-preview      { max-height: 400px; }
.fault-type-label  { width: 80px; }

/* Bulk Action Bar */
.bulk-action-bar { z-index: 1050; }

/* --- Reference Library --- */
.ref-tree-scroll { max-height: 70vh; overflow-y: auto; }
.ref-analysis-pre { max-height: 400px; overflow: auto; }
.ref-form-narrow { max-width: 700px; }
.ref-form-medium { max-width: 800px; }
.ref-form-wide { max-width: 900px; }

/* Reference Library — rewrite additions */
.ref-text-pre { max-height: 300px; overflow: auto; font-size: 0.8rem; }
.tree-depth-0 { padding-left: 0.75rem; }
.tree-depth-1 { padding-left: 2.25rem; }
.tree-depth-2 { padding-left: 3.75rem; }
.tree-depth-3 { padding-left: 5.25rem; }
.tree-depth-4 { padding-left: 6.75rem; }
.tree-depth-5 { padding-left: 8.25rem; }
.truncate-300 { max-width: 300px; }

/* Document review — embedded PDF viewer */
.pdf-preview-frame { width: 100%; height: 60vh; border: none; }
/* Placeholder shown in the merge page right pane until a candidate is selected.
   Height matches .pdf-preview-frame so the layout does not jump on swap. */
.pdf-preview-placeholder { width: 100%; height: 60vh; }

/* Vision analysis tier badges (Migration 101) */
.bg-ai-text {
    background-color: #c0571b !important; /* Dark orange — 4.6:1 contrast with white */
    color: #fff !important;
}
.bg-ocr-only {
    background-color: #b52d73 !important; /* Dark pink — 4.5:1 contrast with white */
    color: #fff !important;
}

/* Dark mode: brighten slightly for visibility against dark surfaces */
[data-bs-theme="dark"] .bg-ai-text {
    background-color: #d46824 !important;
}
[data-bs-theme="dark"] .bg-ocr-only {
    background-color: #cc3985 !important;
}

/* Help viewer — standalone page (no app sidebar/topbar) for user manual PDFs.
   Designed to fill the entire popup window so the PDF iframe gets max area. */
.help-body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.help-sidebar { width: 280px; min-width: 280px; overflow-y: auto; }
.help-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
}
.help-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: none;
}
.help-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-empty-icon { font-size: 3rem; }
/* Classification badges */
.classification-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
}
.classification-badge-primary {
    background-color: var(--bs-primary);
    color: #fff;
}
.classification-badge-equivalent {
    background-color: #6c757d;
    color: #fff;
    opacity: 0.85;
}
/* Column widths for scheme-detail code table — kept out of the template
   so no inline style= attribute violates strict CSP. */
.classification-code-col { width: 18%; }
.classification-role-col { width: 12%; }
.classification-desc-col { width: 25%; }

/* ============================================================
 * === KB ===
 * Knowledge Base v1.0 — atom cards, category color-coding,
 * synthesis answer panel, source-detail snippet preview.
 * All CSP-clean — no inline style= anywhere in templates.
 * ============================================================ */

.kb-card {
    border-left: 3px solid #dee2e6;
    transition: border-left-color 120ms ease;
}
.kb-card:hover { border-left-color: #0d6efd; }

.kb-atom-meta { line-height: 1.6; }

.kb-category-badge {
    text-transform: uppercase;
    font-size: 0.70rem;
    letter-spacing: 0.04em;
    padding: 0.30em 0.55em;
}

/* Category color-coding — kept consistent with severity:
 * authoritative (spec, acceptance_criteria, procedure) → blue
 * factual / experiential (observation, lesson, solution, reference) → cyan
 * interpretive / risk-flavored (failure_mode, risk) → amber
 * non-authoritative (anecdote) → gray
 */
.kb-cat-spec, .kb-cat-acceptance_criteria, .kb-cat-procedure {
    background-color: #0d6efd; color: #fff;
}
.kb-cat-observation, .kb-cat-lesson, .kb-cat-solution, .kb-cat-reference {
    background-color: #0dcaf0; color: #000;
}
.kb-cat-failure_mode, .kb-cat-risk {
    background-color: #ffc107; color: #000;
}
.kb-cat-anecdote {
    background-color: #6c757d; color: #fff;
}

.kb-measurements code {
    background-color: rgba(13, 110, 253, 0.08);
    padding: 0.05em 0.35em;
    border-radius: 0.2rem;
}

.kb-source-cite {
    border-top: 1px solid #f0f0f0;
    padding-top: 0.45rem;
}

.kb-synthesis-card {
    border-left: 4px solid #0d6efd;
    background-color: #f8f9fc;
}

/* Preserves newlines in the LLM's synthesized answer without using a JS
 * inline .style assignment (which would be flagged by a stricter CSP audit). */
.kb-synthesis-answer { white-space: pre-wrap; }
.kb-synthesis-heading {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.kb-feedback button { margin-right: 0.25rem; }

/* Source-detail raw-snippet preview — bounded so a 200-char snippet
 * doesn't expand the page when wrapped to a single block. */
.kb-raw-snippet {
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===========================================================================
   INSTANCE IDENTITY — which system am I looking at?
   ===========================================================================
   Dev and production genuinely differ (separate database and storage,
   sanitised credentials, require_mfa off on dev). That divergence cannot be
   removed, so it has to be impossible to misread — especially now the dev
   instance is loginable and "nothing works" is no longer the giveaway.

   Everything here is driven by data-instance on <body>, set from a positively
   identified dev instance only (FLEET_INSTANCE_LABEL set AND attached to
   fleet_dev_db). Production has no marker beyond the footer, so a DEV banner
   can never appear there. See apps/shared/core/instance.py for why that
   asymmetry is deliberate.

   No inline styles anywhere — strict CSP (security-standards.md #2), enforced
   by .claude/hooks/check-csp-compliance.py.
   ------------------------------------------------------------------------ */

/* --- Dev banner: full width, above the sticky topbar --------------------- */
.instance-banner {
  background: repeating-linear-gradient(
    45deg, #7b3f00, #7b3f00 12px, #96581b 12px, #96581b 24px);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.2;
  padding: .35rem .75rem;
  text-align: center;
  letter-spacing: .02em;
}

.instance-banner strong { letter-spacing: .06em; }
.instance-banner .bi { margin-right: .35rem; }

/* --- Dev colour treatment ------------------------------------------------
   Amber top border on the topbar plus a tinted brand, so the instance is
   identifiable from a screenshot or a glance at a half-covered window —
   not only from the banner, which scrolls away on long pages. */
body[data-instance="development"] .navbar.sticky-top {
  border-top: 3px solid #b8860b;
  background-color: #fffaf0 !important;
}

body[data-instance="development"] .navbar-brand::after {
  content: "DEV";
  background: #b8860b;
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .1rem .35rem;
  margin-left: .45rem;
  border-radius: .2rem;
  vertical-align: middle;
}

/* --- Footer: every page, both instances ---------------------------------
   Deliberately quiet. Its job is to be checkable, not noticed. */
.instance-footer {
  color: #6c757d;
  font-size: .6875rem;
  padding: .5rem .75rem 1rem;
  text-align: center;
  user-select: none;
}

.instance-footer__sep { margin: 0 .3rem; opacity: .6; }

body[data-instance="development"] .instance-footer__label {
  color: #b8860b;
  font-weight: 600;
}

/* Print: keep the dev marking. A printed dev page handed to someone must not
   be mistakable for a production record. */
@media print {
  .instance-banner { background: none; color: #000; border: 2px solid #000; }
  .instance-footer { color: #000; }
}