/* WOTCE - Work Order Triage and Classification Engine */
/* Aligned with Ventia / Panorama SRA visual language */

:root {
    --ventia-navy: #1a2332;
    --ventia-blue: #2563eb;
    --ventia-blue-light: #3b82f6;
    --ventia-blue-pale: #eff6ff;
    --ventia-green: #059669;
    --ventia-green-light: #d1fae5;
    --ventia-orange: #ea580c;
    --ventia-orange-light: #fff7ed;
    --ventia-red: #dc2626;
    --ventia-red-light: #fef2f2;
    --ventia-surface: #ffffff;        /* card/menu surface - flips per theme */
    --ventia-surface-alt: #f9fafb;    /* subtle inset surface */
    --ventia-gray-50: #f9fafb;
    --ventia-gray-100: #f3f4f6;
    --ventia-gray-200: #e5e7eb;
    --ventia-gray-300: #d1d5db;
    --ventia-gray-400: #9ca3af;
    --ventia-gray-500: #6b7280;
    --ventia-gray-600: #4b5563;
    --ventia-gray-700: #374151;
    --ventia-gray-800: #1f2937;
    --ventia-gray-900: #111827;
    --border-radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* ===== SOFT THEME ===== */
[data-theme="soft"] {
    --ventia-surface: #ffffff;
    --ventia-surface-alt: #f0f4f8;
    --ventia-gray-50: #f0f4f8;
    --ventia-gray-100: #e2e8f0;
    --ventia-gray-200: #cbd5e1;
    --ventia-gray-300: #94a3b8;
    --ventia-gray-400: #64748b;
    --ventia-gray-500: #475569;
    --ventia-gray-600: #334155;
    --ventia-gray-700: #1e293b;
    --ventia-gray-800: #0f172a;
    --ventia-blue-pale: #e0f2fe;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    --ventia-surface: #252b3a;      /* matches the established dark card colour */
    --ventia-surface-alt: #1e2330;
    --ventia-gray-50: #1e2330;
    --ventia-gray-100: #252b3a;
    --ventia-gray-200: #2d3548;
    --ventia-gray-300: #3b4560;
    --ventia-gray-400: #8492a6;
    --ventia-gray-500: #a0aec0;
    --ventia-gray-600: #cbd5e1;
    --ventia-gray-700: #e2e8f0;
    --ventia-gray-800: #f1f5f9;
    --ventia-gray-900: #f8fafc;
    --ventia-blue-pale: #1e293b;
    --ventia-green-light: #064e3b;
    --ventia-orange-light: #431407;
    --ventia-red-light: #450a0a;
}
[data-theme="dark"] body { color: #e2e8f0; }
/* Impersonation banner - must stay amber + dark text in EVERY theme.
   Inline styles on the banner element get overridden by user-CSS or
   browser dark-mode extensions (Dark Reader, etc.). !important + an
   explicit color-scheme:light hint locks the banner to its high-
   visibility colours regardless of theme. */
#impersonation-banner {
    background: #f59e0b !important;
    color: #1a1a2e !important;
    color-scheme: light;
}
#impersonation-banner button { color-scheme: light; }
#impersonation-banner span { color: #1a1a2e !important; }
[data-theme="dark"] #impersonation-banner,
[data-theme="dark"] #impersonation-banner span {
    background: #f59e0b !important;
    color: #1a1a2e !important;
}
/* Inspection Tracking page (.it-*) - hardcoded `background: white` and
   bare-text colours weren't reachable by themed gray vars. Override the
   surfaces explicitly so cards, table, filter bar and modal read
   correctly in dark mode. */
[data-theme="dark"] .it-stat,
[data-theme="dark"] .it-filters,
[data-theme="dark"] .it-table,
[data-theme="dark"] .it-card,
[data-theme="dark"] .it-pill { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .it-stat-val { color: #f1f5f9; }
[data-theme="dark"] .it-stat-label,
[data-theme="dark"] .it-filters label,
[data-theme="dark"] .it-pill { color: #a0aec0; }
[data-theme="dark"] .it-pill.active { background: #475569; color: #f1f5f9; border-color: #475569; }
[data-theme="dark"] .it-pill:hover:not(.active) { background: #1e2330; color: #cbd5e1; }
[data-theme="dark"] .it-filters select,
[data-theme="dark"] .it-filters input { background: #1e2330; color: #e2e8f0; border-color: #2d3548; }
[data-theme="dark"] .it-table th { background: #1e2330; color: #a0aec0; border-bottom-color: #2d3548; }
[data-theme="dark"] .it-table th:hover { background: #2d3548; color: #f1f5f9; }
[data-theme="dark"] .it-table td { color: #cbd5e1; border-bottom-color: #2d3548; }
[data-theme="dark"] .it-table tr:hover td { background: #1e2330; }
[data-theme="dark"] .it-empty { color: #64748b; }
/* Schedule modal - also hardcoded white surface */
[data-theme="dark"] #it-schedule-modal > div { background: #252b3a !important; }
[data-theme="dark"] #it-schedule-modal h3 { color: #f1f5f9; }
[data-theme="dark"] #it-schedule-modal label { color: #a0aec0 !important; }
[data-theme="dark"] #it-schedule-modal input,
[data-theme="dark"] #it-schedule-modal select,
[data-theme="dark"] #it-schedule-modal textarea { background: #1e2330 !important; color: #e2e8f0 !important; border-color: #2d3548 !important; }
[data-theme="dark"] #it-schedule-modal button { background: #1e2330; color: #e2e8f0; border-color: #2d3548; }
[data-theme="dark"] #it-schedule-modal #it-sched-submit { background: #2563eb !important; color: white !important; border-color: #2563eb !important; }
[data-theme="dark"] #it-sched-fac-results,
[data-theme="dark"] #it-sched-insp-results { background: #1e2330 !important; border-color: #2d3548 !important; color: #e2e8f0; }
[data-theme="dark"] #it-sched-fac-selected { background: #064e3b !important; border-color: #047857 !important; }
/* Config page (.cfg-*, .config-*, .sq-*, .question-tree-card etc.) - heavy
   inline-style use with `background: white` / `#f8fafc` / `#fff` that don't
   re-theme via CSS vars. Override the surfaces broadly so the whole page
   reads correctly in dark mode rather than chasing every inline rule. */
[data-theme="dark"] .cfg-sidebar { background: #1e2330 !important; border-color: #2d3548 !important; }
[data-theme="dark"] .cfg-sidebar h3,
[data-theme="dark"] .cfg-sidebar h4 { color: #f1f5f9 !important; }
[data-theme="dark"] .cfg-sidebar [style*="background: white"],
[data-theme="dark"] .cfg-sidebar [style*="background:white"] { background: #1e2330 !important; }
[data-theme="dark"] .config-table-item { color: #cbd5e1; }
[data-theme="dark"] .config-table-item:hover { background: #2d3548; }
[data-theme="dark"] .config-table-item.active { background: #1e3a8a; border-color: #3b82f6; color: #f1f5f9; }
[data-theme="dark"] .config-table { background: #252b3a; }
[data-theme="dark"] .config-table th { background: #1e2330; color: #a0aec0; border-bottom-color: #2d3548; }
[data-theme="dark"] .config-table td { color: #cbd5e1; border-bottom-color: #2d3548; }
[data-theme="dark"] .config-table tr:hover td { background: #2d3548; }
[data-theme="dark"] .question-tree-card { background: #252b3a !important; border-color: #2d3548 !important; }
[data-theme="dark"] .answer-chip { background: #1e2330 !important; color: #cbd5e1 !important; border-color: #2d3548 !important; }
[data-theme="dark"] .sq-disc-panel { background: #1e2330 !important; border-color: #2d3548 !important; }
[data-theme="dark"] .sq-filter-pill { background: #252b3a !important; color: #a0aec0 !important; border-color: #2d3548 !important; }
[data-theme="dark"] .sq-filter-pill.active { background: #2563eb !important; color: white !important; border-color: #2563eb !important; }
/* Generic catch-all for inline white panels inside the config main area -
   modals, body cards, banners. Targets the *visible* config containers
   without affecting site-wide modals from other pages. */
[data-theme="dark"] #config-main-area [style*="background: white"],
[data-theme="dark"] #config-main-area [style*="background:white"],
[data-theme="dark"] #config-main-area [style*="background: #fff"],
[data-theme="dark"] #config-main-area [style*="background:#fff"],
[data-theme="dark"] #config-main-area [style*="background: #f8fafc"],
[data-theme="dark"] #config-main-area [style*="background:#f8fafc"] { background: #252b3a !important; color: #e2e8f0 !important; }
[data-theme="dark"] #config-main-area input,
[data-theme="dark"] #config-main-area select,
[data-theme="dark"] #config-main-area textarea { background: #1e2330 !important; color: #e2e8f0 !important; border-color: #2d3548 !important; }
[data-theme="dark"] #config-main-area input::placeholder,
[data-theme="dark"] #config-main-area textarea::placeholder { color: #64748b !important; }
[data-theme="dark"] #config-main-area h1,
[data-theme="dark"] #config-main-area h2,
[data-theme="dark"] #config-main-area h3,
[data-theme="dark"] #config-main-area h4,
[data-theme="dark"] #config-main-area h5 { color: #f1f5f9; }
[data-theme="dark"] #config-main-area label,
[data-theme="dark"] #config-main-area p,
[data-theme="dark"] #config-main-area span,
[data-theme="dark"] #config-main-area div,
[data-theme="dark"] #config-main-area td,
[data-theme="dark"] #config-main-area li { color: #cbd5e1; }
[data-theme="dark"] #config-main-area code { background: #1e2330; color: #fbbf24; }
/* Bulk-add-users modal we just shipped */
[data-theme="dark"] #bulk-add-users-modal > div { background: #252b3a !important; }
[data-theme="dark"] #bulk-add-users-modal h3 { color: #f1f5f9 !important; }
[data-theme="dark"] #bulk-add-users-modal textarea,
[data-theme="dark"] #bulk-add-users-modal input { background: #1e2330 !important; color: #e2e8f0 !important; border-color: #2d3548 !important; }
[data-theme="dark"] #bulk-add-users-modal table th { background: #1e2330 !important; color: #a0aec0 !important; }
[data-theme="dark"] #bulk-add-users-modal table td { color: #cbd5e1 !important; border-bottom-color: #2d3548 !important; }
[data-theme="dark"] .tab-bar { background: #1a2332; border-bottom-color: #2d3548; }
[data-theme="dark"] .tab-bar a { color: #8492a6; }
[data-theme="dark"] .tab-bar a:hover { color: #cbd5e1; }
[data-theme="dark"] .tab-bar a.active { color: #60a5fa; border-bottom-color: #60a5fa; }
[data-theme="dark"] .nav-group-label { color: #8492a6; }
[data-theme="dark"] .nav-dropdown { background: #1e2330; border-color: #2d3548; }
[data-theme="dark"] .nav-dropdown a { color: #a0aec0; }
[data-theme="dark"] .nav-dropdown a:hover { background: #252b3a; color: #f1f5f9; }
[data-theme="dark"] .form-section, [data-theme="dark"] .si-card,
[data-theme="dark"] .inspect-card, [data-theme="dark"] .kb-cat-card,
[data-theme="dark"] .kb-article-card, [data-theme="dark"] .ka-page,
[data-theme="dark"] .sv-table { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .sv-table th { background: #1e2330; color: #a0aec0; }
[data-theme="dark"] .sv-table td { border-bottom-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    background: #1e2330; color: #e2e8f0; border-color: #3b4560; }
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #64748b; }
[data-theme="dark"] .landing { color: #e2e8f0; }
[data-theme="dark"] .landing h1 { color: #f1f5f9; }

/* Dark theme: site inspection */
[data-theme="dark"] .si-sidebar { background: #1a2332; border-color: #2d3548; }
[data-theme="dark"] .si-sidebar-header { background: #1e2330; border-color: #2d3548; }
[data-theme="dark"] .si-fac-selected { background: #1e3a2e; border-color: #065f46; }
[data-theme="dark"] .si-fac-search { background: #1e2330; color: #e2e8f0; border-color: #3b4560; }
[data-theme="dark"] .si-node { border-bottom-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .si-node:hover { background: #252b3a; }
[data-theme="dark"] .si-node.selected { background: #1e3048; border-left-color: #3b82f6; }
[data-theme="dark"] .si-detail { background: #1e2330; }
[data-theme="dark"] .si-detail-header { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .si-detail-title { color: #f1f5f9; }
[data-theme="dark"] .si-detail-subtitle { color: #8492a6; }
[data-theme="dark"] .si-tabs { border-color: #2d3548; background: #1e2330; }
[data-theme="dark"] .si-tab { color: #8492a6; }
[data-theme="dark"] .si-tab.active { color: #60a5fa; border-bottom-color: #60a5fa; }
/* Site inspect - breadcrumb strip above the tab bar was left with `background: white` */
[data-theme="dark"] .si-breadcrumb { background: #252b3a; border-bottom-color: #2d3548; color: #a0aec0; }
[data-theme="dark"] .si-breadcrumb .bc-sep { color: #4b5563; }
[data-theme="dark"] .si-card { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .si-char-table th { background: #1e2330; color: #a0aec0; }
[data-theme="dark"] .si-char-table td { border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .si-wo-row { border-color: #2d3548; }
[data-theme="dark"] .si-wo-row:hover { background: #252b3a; }
[data-theme="dark"] .si-wo-detail-panel { background: #1e2433 !important; border-color: #2d3548 !important; }
[data-theme="dark"] .si-wo-detail-panel table tr[style*="background"] { background: #252b3a !important; }
[data-theme="dark"] .si-wo-detail-panel table tr { border-color: #2d3548 !important; }
[data-theme="dark"] .si-tree-filter input { background: #1e2330; color: #e2e8f0; border-color: #3b4560; }
[data-theme="dark"] .si-filter-pill { background: #252b3a; color: #8492a6; border-color: #3b4560; }
[data-theme="dark"] .si-top-bar { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .si-detail-empty { color: #64748b; }

/* Dark theme: config page */
[data-theme="dark"] .config-table-item { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .config-table-item:hover { background: #2d3548; }
[data-theme="dark"] .config-table-item.active { background: #1e3048; border-left-color: #3b82f6; }

/* Dark theme: knowledge base */
[data-theme="dark"] .ka-page { color: #cbd5e1; }
[data-theme="dark"] .ka-title { color: #f1f5f9; }
[data-theme="dark"] .ka-content { color: #cbd5e1; }
[data-theme="dark"] .ka-content h2, [data-theme="dark"] .ka-content h3 { color: #e2e8f0; border-color: #3b4560; }
[data-theme="dark"] .ka-content code { background: #2d3548; color: #93c5fd; }
[data-theme="dark"] .ka-content pre { background: #1e2330; }
[data-theme="dark"] .ka-content th { background: #1e2330; color: #a0aec0; }
[data-theme="dark"] .ka-content td { border-color: #2d3548; }
[data-theme="dark"] .ka-helpful { background: #252b3a; }
[data-theme="dark"] .kb-page { color: #cbd5e1; }

/* Dark theme: surveys */
[data-theme="dark"] .sv-stat { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .sv-stat-label { color: #8492a6; }
[data-theme="dark"] .sv-modal-content { background: #1e2330; color: #cbd5e1; }
[data-theme="dark"] .sv-q { border-color: #2d3548; }
[data-theme="dark"] .sv-q-opt { border-color: #3b4560; color: #a0aec0; }
[data-theme="dark"] .sv-outcome-section { background: #252b3a; }

/* Dark theme: general overrides for white backgrounds */
[data-theme="dark"] .form-section { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #f1f5f9; }
[data-theme="dark"] .subtitle { color: #8492a6; }
[data-theme="dark"] button { color: inherit; }
[data-theme="dark"] a { color: #60a5fa; }

/* Dark theme: dropdowns and modals */
[data-theme="dark"] #contract-dropdown, [data-theme="dark"] #user-dropdown { background: #1e2330; border-color: #2d3548; }
[data-theme="dark"] #contract-dropdown div:hover, [data-theme="dark"] #user-dropdown a:hover { background: #252b3a !important; }

/* Dark theme: BROAD overrides for inline styles in templates */
/* These use !important to override inline style="background: white" etc. */
[data-theme="dark"] .form-section,
[data-theme="dark"] .demo-section,
[data-theme="dark"] .scenario-bar,
[data-theme="dark"] .pill-group,
[data-theme="dark"] .scanner-section,
[data-theme="dark"] .drop-zone,
[data-theme="dark"] .result-card,
[data-theme="dark"] .sla-card,
[data-theme="dark"] .alert-card,
[data-theme="dark"] .tracking-card,
[data-theme="dark"] .equipment-result,
[data-theme="dark"] .photo-section,
[data-theme="dark"] .question-card,
[data-theme="dark"] .classification-card { background: #252b3a !important; border-color: #2d3548 !important; color: #cbd5e1 !important; }

/* Dark theme: all divs with explicit white/light backgrounds */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#f"],
[data-theme="dark"] div[style*="background: #f"] { background: #252b3a !important; }

[data-theme="dark"] div[style*="border: 1px solid #"],
[data-theme="dark"] div[style*="border:1px solid #"],
[data-theme="dark"] div[style*="border: 1px solid var"] { border-color: #2d3548 !important; }

/* Dark theme: form elements everywhere */
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="url"],
[data-theme="dark"] select, [data-theme="dark"] textarea {
    background: #1e2330 !important; color: #e2e8f0 !important; border-color: #3b4560 !important; }

/* Dark theme: buttons with white/light backgrounds */
[data-theme="dark"] button[style*="background:white"],
[data-theme="dark"] button[style*="background: white"] { background: #252b3a !important; color: #cbd5e1 !important; }

/* Dark theme: pale-accent button surfaces (Verify / Modify / Checklist /
   Report / Corrective Action etc.). Templates ship them with pale pastels
   like #f0fdf4, #eff6ff, #fef2f2, #fef3c7, #ecfdf5 which are almost white
   on a dark background - sits behind other buttons. Map each accent family
   to a dimmed, tonally-consistent dark bg with a slightly lighter border
   so the button silhouette is still visible. Text keeps its accent colour
   (which is already mid-saturation and readable on dark). */
[data-theme="dark"] button[style*="background:#f0fdf4"],
[data-theme="dark"] button[style*="background: #f0fdf4"],
[data-theme="dark"] button[style*="background:#ecfdf5"],
[data-theme="dark"] button[style*="background: #ecfdf5"],
[data-theme="dark"] button[style*="background:#dcfce7"],
[data-theme="dark"] button[style*="background: #dcfce7"] { background: #0f2e1e !important; border-color: #166534 !important; color: #86efac !important; }
[data-theme="dark"] button[style*="background:#eff6ff"],
[data-theme="dark"] button[style*="background: #eff6ff"],
[data-theme="dark"] button[style*="background:#dbeafe"],
[data-theme="dark"] button[style*="background: #dbeafe"] { background: #11203b !important; border-color: #1e40af !important; color: #93c5fd !important; }
[data-theme="dark"] button[style*="background:#fef2f2"],
[data-theme="dark"] button[style*="background: #fef2f2"],
[data-theme="dark"] button[style*="background:#fee2e2"],
[data-theme="dark"] button[style*="background: #fee2e2"] { background: #2b0d0d !important; border-color: #991b1b !important; color: #fca5a5 !important; }
[data-theme="dark"] button[style*="background:#fef3c7"],
[data-theme="dark"] button[style*="background: #fef3c7"],
[data-theme="dark"] button[style*="background:#fffbeb"],
[data-theme="dark"] button[style*="background: #fffbeb"] { background: #2d1f05 !important; border-color: #a16207 !important; color: #fcd34d !important; }

/* Banners using the same pale palettes (verify bundle, scheduled banner etc). */
[data-theme="dark"] #si-verify-bundle-banner { background: #0f2e1e !important; border-bottom-color: #166534 !important; color: #86efac !important; }
[data-theme="dark"] #si-verify-bundle-banner strong { color: #86efac !important; }
[data-theme="dark"] #si-verify-bundle-count { color: #0f2e1e !important; background: #86efac !important; }

/* Dark theme: pills, badges, chips */
[data-theme="dark"] .pill-option, [data-theme="dark"] .demo-pill,
[data-theme="dark"] .scenario-pill { background: #252b3a !important; border-color: #3b4560 !important; color: #a0aec0 !important; }
[data-theme="dark"] .pill-option.active, [data-theme="dark"] .demo-pill.active { color: white !important; }

/* Dark theme: SRA page specific */
[data-theme="dark"] .sra-form, [data-theme="dark"] .sra-container { color: #cbd5e1; }
[data-theme="dark"] label { color: #a0aec0; }
[data-theme="dark"] .field-label { color: #a0aec0 !important; }
[data-theme="dark"] .help-text { color: #64748b !important; }

/* Dark theme: cards with box-shadow */
[data-theme="dark"] [style*="box-shadow"] { box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }

/* Dark theme: tables everywhere */
[data-theme="dark"] table { border-color: #2d3548; }
[data-theme="dark"] th { background: #1e2330 !important; color: #a0aec0 !important; border-color: #2d3548 !important; }
[data-theme="dark"] td { border-color: #2d3548 !important; color: #cbd5e1; }
[data-theme="dark"] tr:hover td { background: #252b3a; }

/* Dark theme: ALL light-colored inline backgrounds → dark */
[data-theme="dark"] div[style*="background: #f"],
[data-theme="dark"] div[style*="background:#f"],
[data-theme="dark"] div[style*="background: #e"],
[data-theme="dark"] div[style*="background:#e"],
[data-theme="dark"] section[style*="background: #f"],
[data-theme="dark"] section[style*="background:#f"],
[data-theme="dark"] span[style*="background: #f"],
[data-theme="dark"] span[style*="background:#f"],
[data-theme="dark"] span[style*="background: #e"],
[data-theme="dark"] span[style*="background:#e"],
[data-theme="dark"] span[style*="background: #d"],
[data-theme="dark"] span[style*="background:#d"] { background: #252b3a !important; }

/* Dark theme: colored text that's too dark for dark bg */
[data-theme="dark"] [style*="color: var(--ventia-gray-800)"],
[data-theme="dark"] [style*="color:var(--ventia-gray-800)"],
[data-theme="dark"] [style*="color: var(--ventia-gray-700)"],
[data-theme="dark"] [style*="color:var(--ventia-gray-700)"] { color: #e2e8f0 !important; }
[data-theme="dark"] [style*="color: var(--ventia-gray-600)"],
[data-theme="dark"] [style*="color:var(--ventia-gray-600)"],
[data-theme="dark"] [style*="color: var(--ventia-gray-500)"],
[data-theme="dark"] [style*="color:var(--ventia-gray-500)"] { color: #a0aec0 !important; }
[data-theme="dark"] [style*="color: var(--ventia-gray-400)"],
[data-theme="dark"] [style*="color:var(--ventia-gray-400)"] { color: #8492a6 !important; }

/* Dark theme: links in content */
[data-theme="dark"] .ka-breadcrumb a, [data-theme="dark"] .si-breadcrumb a { color: #60a5fa !important; }

/* Dark theme: borders */
[data-theme="dark"] [style*="border-bottom: 1px solid"],
[data-theme="dark"] [style*="border-top: 1px solid"],
[data-theme="dark"] [style*="border: 1px solid var(--ventia-gray"] { border-color: #2d3548 !important; }

/* Dark theme: landing / home page */
[data-theme="dark"] .landing h1 { color: #f1f5f9 !important; }
[data-theme="dark"] .landing .subtitle { color: #8492a6 !important; }
[data-theme="dark"] .landing .form-section { background: #252b3a !important; }

/* Dark theme: catch lowercase `white` and common hex whites used inline */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"] { background: #252b3a !important; }

/* Dark theme: facility-management tabs, section titles and content text */
[data-theme="dark"] #fm-tabbar { border-bottom-color: #2d3548 !important; }
[data-theme="dark"] .fm-tab { color: #8492a6 !important; }
[data-theme="dark"] .fm-tab.active,
[data-theme="dark"] .fm-tab[style*="color:#1a2332"],
[data-theme="dark"] .fm-tab[style*="color: #1a2332"] { color: #e2e8f0 !important; }
[data-theme="dark"] #fm-tab-sap-export h2,
[data-theme="dark"] #fm-tab-pod-mgmt h2,
[data-theme="dark"] #fm-tab-sap-export h3,
[data-theme="dark"] #fm-tab-pod-mgmt h3 { color: #f1f5f9 !important; }

/* Pod Management + SAP Export tables rendered dynamically use inline styles; ensure they flip in dark mode. */
[data-theme="dark"] #pod-mgmt-list table,
[data-theme="dark"] #sd-preview-table table,
[data-theme="dark"] #sd-diff-result table { background: #252b3a !important; color: #cbd5e1 !important; }
[data-theme="dark"] #pod-mgmt-list thead,
[data-theme="dark"] #sd-preview-table thead,
[data-theme="dark"] #sd-diff-result thead,
[data-theme="dark"] #pod-mgmt-list th,
[data-theme="dark"] #sd-preview-table th,
[data-theme="dark"] #sd-diff-result th { background: #1e2330 !important; color: #a0aec0 !important; border-color: #2d3548 !important; }
[data-theme="dark"] #pod-mgmt-list td,
[data-theme="dark"] #sd-preview-table td,
[data-theme="dark"] #sd-diff-result td { color: #cbd5e1 !important; border-color: #2d3548 !important; }
[data-theme="dark"] #pod-mgmt-list tr,
[data-theme="dark"] #sd-preview-table tr,
[data-theme="dark"] #sd-diff-result tr { border-color: #2d3548 !important; }

/* Hardcoded inline text colors used widely in dynamic tables */
[data-theme="dark"] [style*="color:#1a2332"],
[data-theme="dark"] [style*="color: #1a2332"],
[data-theme="dark"] [style*="color:#1e40af"],
[data-theme="dark"] [style*="color: #1e40af"] { color: #e2e8f0 !important; }
[data-theme="dark"] [style*="color:#6b7280"],
[data-theme="dark"] [style*="color: #6b7280"],
[data-theme="dark"] [style*="color:#9ca3af"],
[data-theme="dark"] [style*="color: #9ca3af"] { color: #a0aec0 !important; }
[data-theme="dark"] [style*="color:#4b5563"],
[data-theme="dark"] [style*="color: #4b5563"] { color: #cbd5e1 !important; }
/* Clickable pod name in Pod Management keeps a bright colour on dark backgrounds */
[data-theme="dark"] #pod-mgmt-list a[style*="color:#2563eb"],
[data-theme="dark"] #pod-mgmt-list a[style*="color: #2563eb"] { color: #60a5fa !important; }

/* Dark theme: scrollbar */
[data-theme="dark"] ::-webkit-scrollbar { background: #1e2330; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3b4560; border-radius: 4px; }

/* Dark theme: classification & IRIS */
[data-theme="dark"] .classification-panel,
[data-theme="dark"] .iris-queue,
[data-theme="dark"] .footer-bar { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .btn-outline { background: #252b3a; border-color: #3b4560; color: #a0aec0; }
[data-theme="dark"] .btn-outline:hover { background: #2d3548; color: #e2e8f0; }
[data-theme="dark"] .stat-card,
[data-theme="dark"] .view-card { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .demo-btn { background: #252b3a; border-color: #3b4560; color: #a0aec0; }

/* Dark theme: conversation / chat UI */
[data-theme="dark"] .conv-bubble.bot { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .conv-mode-btn { background: #252b3a; border-color: #3b4560; color: #a0aec0; }
[data-theme="dark"] .conv-mode-btn.active { background: #1e3048; border-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .conv-input-area { background: #1e2330; border-color: #3b4560; }
[data-theme="dark"] .conv-option-pill { background: #252b3a; border-color: #3b4560; color: #a0aec0; }
[data-theme="dark"] .conv-option-pill:hover { background: #2d3548; color: #e2e8f0; }

/* Dark theme: response & escalation panels */
[data-theme="dark"] .response-panel { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .escalation-brief { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }

/* Dark theme: SLA & tracking */
[data-theme="dark"] .sla-summary-bar { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .sla-summary-badge { color: #cbd5e1; }
[data-theme="dark"] .tracking-step-circle { background: #252b3a; border-color: #3b4560; }

/* Dark theme: VSM / Value Stream */
[data-theme="dark"] .vsm-widget,
[data-theme="dark"] .vsm-metric-card,
[data-theme="dark"] .vsm-sparkline-card { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }
[data-theme="dark"] .vsm-flow-container { background: #1e2330; border-color: #2d3548; }
[data-theme="dark"] .vsm-stage-box { background: #252b3a; border-color: #2d3548; color: #cbd5e1; }

/* Dark theme: extraction & confidence badges */
[data-theme="dark"] .extraction-confidence { background: #252b3a; border-color: #3b4560; }

/* Dark theme: photo edit menu & GPS inline */
[data-theme="dark"] .si-photo-menu { background: #252b3a; border-color: #2d3548; }
[data-theme="dark"] .si-photo-menu-item { color: #a0aec0; }
[data-theme="dark"] .si-photo-menu-item:hover { background: #2d3548; color: #e2e8f0; }
[data-theme="dark"] .si-photo-edit-btn { background: rgba(37,43,58,0.92); border-color: #3b4560; color: #a0aec0; }
[data-theme="dark"] .si-photo-edit-btn:hover { background: #3b82f6; color: white; border-color: #3b82f6; }

/* Dark theme: toggle knob */
[data-theme="dark"] .toggle .knob { background: #e2e8f0; }

/* Theme toggle */
.theme-toggle { display: flex; gap: 2px; background: rgba(255,255,255,0.1); border-radius: 14px; padding: 2px; }
.theme-toggle button { width: 26px; height: 26px; border: none; border-radius: 12px; cursor: pointer;
    background: transparent; font-size: 14px; line-height: 1; transition: background 0.15s; display: flex; align-items: center; justify-content: center; }
.theme-toggle button:hover { background: rgba(255,255,255,0.15); }
.theme-toggle button.active { background: rgba(255,255,255,0.25); }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--ventia-gray-50);
    color: var(--ventia-gray-800);
    font-size: 14px;
    line-height: 1.5;
}

/* ===== TOP NAV ===== */
.top-nav {
    background: var(--ventia-navy);
    color: white;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-nav .logo {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-nav .logo .v-mark {
    width: 32px;
    height: 32px;
    background: var(--ventia-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
}

.top-nav .nav-title {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
    margin-left: 8px;
}

/* Non-prod environment badge - sits next to the WOTCE wordmark so an
   engineer can never confuse dev / staging with prod by accident.
   Amber pulse keeps it visible even on the dark nav bar. */
.wotce-env-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #f59e0b;
    color: #1f2937 !important;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35);
    animation: wotce-env-pulse 2s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes wotce-env-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(245,158,11,0.35); }
    50%      { box-shadow: 0 0 0 5px rgba(245,158,11,0.55); }
}

.top-nav .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Mobile hamburger button - hidden on desktop */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
}

.top-nav .nav-right .contract-badge {
    background: rgba(255,255,255,0.15);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.top-nav .nav-right .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ventia-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
}

/* ===== TAB BAR ===== */
.tab-bar {
    background: white;
    border-bottom: 1px solid var(--ventia-gray-200);
    padding: 0 24px;
    display: flex;
    gap: 0;
    position: sticky;
    top: 52px;
    z-index: 99;
}

.tab-bar a {
    text-decoration: none;
    color: var(--ventia-gray-500);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
}

.tab-bar a:hover {
    color: var(--ventia-gray-700);
}

.tab-bar a.active {
    color: var(--ventia-blue);
    border-bottom-color: var(--ventia-blue);
}

/* Admin dropdown nav groups */
.nav-group {
    position: relative;
}
.nav-group-label {
    color: var(--ventia-gray-500);
    font-size: 13px;
    font-weight: 500;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    user-select: none;
}
.nav-group-label:hover {
    color: var(--ventia-gray-700);
}
.nav-group.has-active > .nav-group-label {
    color: var(--ventia-blue);
    border-bottom-color: var(--ventia-blue);
}
.nav-group-label .nav-arrow {
    font-size: 8px;
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.nav-group:hover .nav-arrow,
.nav-group.open .nav-arrow {
    opacity: 1;
}
.nav-group.open .nav-arrow {
    transform: rotate(180deg);
}
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid var(--ventia-gray-200);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 200px;
    z-index: 200;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    padding: 4px 0;
}
.nav-group.open .nav-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* A pointer device opens the dropdown on hover, so the heading itself can be
   a link to the group's landing page (14 Sep 2026). */
@media (hover: hover) {
    .nav-group:hover .nav-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
a.nav-group-label { text-decoration: none; }
.nav-badge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .6px; padding: 1px 6px; border-radius: 8px;
             background: #fef3c7; color: #92400e; vertical-align: 1px; margin-left: 2px; }
[data-theme="dark"] .nav-badge { background: #3b2f0b; color: #fcd34d; }
a.nav-group-label:visited { color: var(--ventia-gray-500); }
.nav-group.has-active > a.nav-group-label { color: var(--ventia-blue); }
.nav-group-label .nav-arrow { padding: 6px 4px; margin: -6px -4px -6px 0; }
.nav-dropdown a {
    display: block;
    padding: 8px 16px;
    color: var(--ventia-gray-600);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.1s, color 0.1s;
    border-bottom: none !important;
}
.nav-dropdown a:hover {
    background: var(--ventia-blue-pale, #f0f7ff);
    color: var(--ventia-blue);
}
.nav-dropdown a.active {
    color: var(--ventia-blue);
    background: var(--ventia-blue-pale, #f0f7ff);
    font-weight: 600;
    border-bottom: none !important;
}
.nav-dropdown .nav-sep {
    height: 1px;
    background: var(--ventia-gray-100);
    margin: 4px 12px;
}
.nav-dropdown .nav-subhead {
    padding: 7px 16px 3px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ventia-gray-400);
    border-top: 1px solid var(--ventia-gray-100);
    margin-top: 3px;
    cursor: default;
}
.nav-dropdown .nav-subhead:first-child {
    border-top: none;
    margin-top: 0;
}
[data-theme="dark"] .nav-dropdown .nav-subhead { color: #64748b; border-top-color: #252b3a; }

/* ===== FORM SECTIONS (SRA style) ===== */
.form-section {
    background: white;
    border: 1px solid var(--ventia-gray-200);
    border-radius: var(--border-radius);
    margin: 16px 24px;
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
}

.form-section h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ventia-gray-900);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ventia-gray-100);
}

.form-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
}

.form-row label {
    width: 200px;
    min-width: 200px;
    text-align: right;
    padding-right: 16px;
    padding-top: 8px;
    font-size: 13px;
    color: var(--ventia-gray-600);
}

.form-row label .required {
    color: var(--ventia-red);
    font-weight: 700;
    margin-left: 2px;
}

.form-row .field {
    flex: 1;
}

input[type="text"],
textarea,
select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ventia-gray-300);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ventia-gray-800);
    background: white;
    transition: border-color 0.15s;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ventia-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input[type="text"]::placeholder,
textarea::placeholder {
    color: var(--ventia-gray-400);
}

textarea {
    resize: vertical;
    min-height: 80px;
}

.char-count {
    font-size: 11px;
    color: var(--ventia-gray-400);
    text-align: right;
    margin-top: 2px;
}

/* ===== ASSET TYPE PICKER ===== */
.asset-picker {
    position: relative;
}

.asset-picker-trigger {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ventia-gray-300);
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ventia-gray-400);
}

.asset-picker-trigger.selected {
    color: var(--ventia-gray-800);
}

.asset-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--ventia-gray-300);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    max-height: 400px;
    overflow-y: auto;
}

.asset-picker-dropdown.open {
    display: block;
}

.asset-picker-search {
    padding: 12px;
    border-bottom: 1px solid var(--ventia-gray-200);
    position: sticky;
    top: 0;
    background: white;
}

.asset-picker-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ventia-gray-300);
    border-radius: 4px;
}

.asset-picker-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--ventia-gray-100);
}

.asset-picker-item:hover {
    background: var(--ventia-blue-pale);
}

.asset-picker-item .asset-name {
    font-weight: 500;
    color: var(--ventia-gray-800);
}

.asset-picker-item .asset-category {
    font-size: 12px;
    color: var(--ventia-blue);
    margin-top: 1px;
}

/* ===== CLASSIFICATION PANEL ===== */
.classification-panel {
    background: white;
    border: 2px solid var(--ventia-blue);
    border-radius: var(--border-radius);
    margin: 16px 24px;
    overflow: hidden;
}

.classification-panel .panel-header {
    background: var(--ventia-blue);
    color: white;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.classification-panel .panel-header h3 {
    font-size: 14px;
    font-weight: 600;
}

.classification-panel .panel-header .ai-badge {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.classification-panel .panel-body {
    padding: 20px;
}

.classification-result {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.classification-card {
    background: var(--ventia-gray-50);
    border: 1px solid var(--ventia-gray-200);
    border-radius: var(--border-radius);
    padding: 14px;
}

.classification-card .card-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ventia-gray-500);
    margin-bottom: 4px;
}

.classification-card .card-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--ventia-gray-900);
}

.classification-card .card-detail {
    font-size: 12px;
    color: var(--ventia-gray-500);
    margin-top: 2px;
}

/* Confidence bar */
.confidence-bar-container {
    margin-top: 8px;
}

.confidence-bar {
    height: 6px;
    background: var(--ventia-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.confidence-bar .fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}

.confidence-bar .fill.high { background: var(--ventia-green); }
.confidence-bar .fill.medium { background: var(--ventia-orange); }
.confidence-bar .fill.low { background: var(--ventia-red); }

.confidence-label {
    font-size: 11px;
    font-weight: 500;
    margin-top: 3px;
    display: flex;
    justify-content: space-between;
}

/* Classification path indicator */
.path-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.path-indicator.equipment {
    background: var(--ventia-green-light);
    color: var(--ventia-green);
}

.path-indicator.text {
    background: var(--ventia-blue-pale);
    color: var(--ventia-blue);
}

.path-indicator.llm {
    background: #f3e8ff;
    color: #7c3aed;
}

/* Dynamic prompts */
.dynamic-prompts {
    border-top: 1px solid var(--ventia-gray-200);
    padding-top: 16px;
    margin-top: 16px;
}

.dynamic-prompts h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--ventia-gray-700);
    margin-bottom: 10px;
}

.prompt-item {
    background: var(--ventia-orange-light);
    border: 1px solid #fed7aa;
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.prompt-item .prompt-icon {
    color: var(--ventia-orange);
    font-size: 16px;
    margin-top: 1px;
}

.prompt-item .prompt-text {
    font-size: 13px;
    color: var(--ventia-gray-700);
}

.prompt-item .prompt-reason {
    font-size: 11px;
    color: var(--ventia-gray-500);
    margin-top: 2px;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-primary {
    background: var(--ventia-blue);
    color: white;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-success {
    background: var(--ventia-green);
    color: white;
}

.btn-success:hover {
    background: #047857;
}

.btn-danger {
    background: var(--ventia-red);
    color: white;
}

.btn-outline {
    background: white;
    color: var(--ventia-gray-600);
    border: 1px solid var(--ventia-gray-300);
}

.btn-outline:hover {
    background: var(--ventia-gray-50);
    border-color: var(--ventia-gray-400);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

.btn-group {
    display: flex;
    gap: 8px;
}

/* ===== FOOTER BAR ===== */
.footer-bar {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid var(--ventia-gray-200);
    padding: 10px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}

/* ===== IRIS VIEW ===== */
.iris-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: calc(100vh - 52px);
}

.iris-queue {
    background: white;
    border-right: 1px solid var(--ventia-gray-200);
    overflow-y: auto;
}

.iris-queue-header {
    padding: 16px;
    border-bottom: 1px solid var(--ventia-gray-200);
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.iris-queue-header h3 {
    font-size: 14px;
    font-weight: 600;
}

.iris-queue-header .queue-count {
    font-size: 12px;
    color: var(--ventia-gray-500);
}

.queue-item {
    padding: 6px 12px;
    border-bottom: 1px solid var(--ventia-gray-100);
    cursor: pointer;
    transition: background 0.1s;
}

.queue-item:hover {
    background: var(--ventia-gray-50);
}

.queue-item.active {
    background: var(--ventia-blue-pale);
    border-left: 3px solid var(--ventia-blue);
}

.queue-item .order-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--ventia-blue);
}

.queue-item .order-summary {
    font-size: 11px;
    font-weight: 500;
    color: var(--ventia-gray-800);
    margin-top: 1px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.queue-item .order-meta {
    font-size: 10px;
    color: var(--ventia-gray-500);
    margin-top: 2px;
    display: flex;
    gap: 8px;
}

.queue-item .status-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
}

.status-badge.pending { background: #fef3c7; color: #92400e; }
.status-badge.accepted { background: var(--ventia-green-light); color: var(--ventia-green); }
.status-badge.override { background: var(--ventia-blue-pale); color: var(--ventia-blue); }
.status-badge.escalated { background: var(--ventia-red-light); color: var(--ventia-red); }

.iris-detail {
    overflow-y: auto;
    padding: 24px;
}

.iris-detail .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--ventia-gray-400);
    font-size: 14px;
}

.iris-detail .empty-state .icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* ===== PRIORITY BADGES ===== */
.priority-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

.priority-badge.P1 { background: var(--ventia-red); color: white; }
.priority-badge.P2 { background: var(--ventia-orange); color: white; }
.priority-badge.P3 { background: #2563eb; color: white; }
.priority-badge.P4 { background: var(--ventia-gray-400); color: white; }

/* ===== REASONING PANEL ===== */
.reasoning-panel {
    background: var(--ventia-gray-50);
    border: 1px solid var(--ventia-gray-200);
    border-radius: var(--border-radius);
    padding: 14px;
    margin-top: 16px;
    font-size: 12px;
    color: var(--ventia-gray-600);
}

.reasoning-panel .reasoning-title {
    font-weight: 600;
    color: var(--ventia-gray-700);
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reasoning-panel .path-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: white;
    border: 1px solid var(--ventia-gray-200);
}

.reasoning-panel .path-row .path-name {
    font-weight: 600;
    min-width: 80px;
}

/* ===== OVERRIDE FORM ===== */
.override-form {
    background: var(--ventia-blue-pale);
    border: 1px solid #bfdbfe;
    border-radius: var(--border-radius);
    padding: 16px;
    margin-top: 16px;
}

.override-form h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.override-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.override-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.override-form .form-group label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ventia-gray-600);
}

/* ===== DEMO PANEL ===== */
.demo-panel {
    background: #f3e8ff;
    border: 1px solid #c4b5fd;
    border-radius: var(--border-radius);
    margin: 16px 24px;
    padding: 14px 20px;
}

.demo-panel h4 {
    font-size: 13px;
    font-weight: 600;
    color: #5b21b6;
    margin-bottom: 10px;
}

.demo-btn {
    background: white;
    border: 1px solid #c4b5fd;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    margin-right: 6px;
    margin-bottom: 6px;
    transition: all 0.15s;
}

.demo-btn:hover {
    background: #ede9fe;
    border-color: #7c3aed;
}

/* ===== TOGGLE ===== */
.toggle-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle {
    width: 40px;
    height: 22px;
    background: var(--ventia-gray-300);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle.active {
    background: var(--ventia-blue);
}

.toggle .knob {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: var(--shadow-sm);
}

.toggle.active .knob {
    left: 20px;
}

.toggle-label {
    font-size: 12px;
    color: var(--ventia-gray-600);
    font-weight: 500;
}

/* ===== DASHBOARD ===== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 16px 24px;
}

.stat-card {
    background: white;
    border: 1px solid var(--ventia-gray-200);
    border-radius: var(--border-radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ventia-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--ventia-gray-900);
    margin-top: 4px;
}

.stat-card .stat-detail {
    font-size: 12px;
    color: var(--ventia-gray-500);
    margin-top: 4px;
}

/* ===== LOADING ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--ventia-gray-300);
    border-top-color: var(--ventia-blue);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.classifying-indicator {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--ventia-blue-pale);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ventia-blue);
    font-weight: 500;
}

.classifying-indicator.active {
    display: flex;
}

/* ===== INDEX PAGE ===== */
.landing {
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
}

.landing h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--ventia-gray-900);
    margin-bottom: 8px;
}

.landing .subtitle {
    font-size: 16px;
    color: var(--ventia-gray-500);
    margin-bottom: 40px;
}

.landing .view-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    text-align: left;
}

.view-card {
    background: white;
    border: 1px solid var(--ventia-gray-200);
    border-radius: 8px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.view-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--ventia-blue);
    transform: translateY(-2px);
}

.view-card .card-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.view-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.view-card p {
    font-size: 13px;
    color: var(--ventia-gray-500);
    line-height: 1.5;
}

.view-card .card-tag {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.view-card .card-tag.customer { background: var(--ventia-green-light); color: var(--ventia-green); }
.view-card .card-tag.internal { background: var(--ventia-blue-pale); color: var(--ventia-blue); }
.view-card .card-tag.analytics { background: #f3e8ff; color: #7c3aed; }

/* ===== SRA Classification Source Badges ===== */
.cls-source-badge.ai-src { background: #dbeafe; color: #2563eb; }
.cls-source-badge.equip-src { background: #d1fae5; color: #047857; }
.cls-source-badge.customer-ovr { background: #fef3c7; color: #92400e; }
.cls-source-badge.notset-src { background: #f3f4f6; color: #9ca3af; }

.card-edit-hint {
    opacity: 0;
    transition: opacity 0.15s;
}
.classification-card:hover .card-edit-hint {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .iris-layout {
        grid-template-columns: 1fr;
    }
    .classification-result {
        grid-template-columns: 1fr;
    }
    .landing .view-cards {
        grid-template-columns: 1fr;
    }
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* iPad / tablet nav (769-1200px): the full desktop nav-right is too wide
   for iPad widths, where the <=768 hamburger doesn't yet take over - so the
   header bunches up (worst on DEV, where the env badge adds width). Tighten
   the spacing and drop the non-essential text: the page title and the user
   name/role. Both remain reachable (title in the tab context; name in the
   avatar dropdown). */
@media (min-width: 769px) and (max-width: 1200px) {
    .top-nav { padding: 0 14px; }
    .top-nav .nav-right { gap: 10px; }
    .top-nav .nav-title { display: none; }
    .top-nav .nav-right .nav-user-meta { display: none; }
    .wotce-env-badge { margin-left: 4px; padding: 2px 6px; letter-spacing: 0.4px; }
}

/* C-08: Mobile breakpoint */
@media (max-width: 768px) {
    /* Mobile top nav - hamburger menu */
    .top-nav { padding: 0 12px; }
    .top-nav .logo span:not(.nav-title) { font-size: 15px; }
    .top-nav .nav-title { display: none; }
    .mobile-menu-btn { display: block; }
    .top-nav .nav-right {
        display: none;
        position: fixed;
        top: 52px;
        right: 0;
        width: 260px;
        max-height: calc(100vh - 52px);
        overflow-y: auto;
        background: var(--ventia-navy);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 0;
        box-shadow: -4px 4px 16px rgba(0,0,0,0.3);
        border-radius: 0 0 0 8px;
        z-index: 999;
    }
    .top-nav .nav-right.open { display: flex; }
    .top-nav .nav-right > * {
        padding: 10px 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .top-nav .nav-right button {
        width: 100%;
        text-align: left;
        border-radius: 0 !important;
    }
    .top-nav .nav-right .contract-badge {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .top-nav .nav-right .user-menu {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 12px 16px !important;
        gap: 10px;
        align-items: center;
    }
    .top-nav .nav-right .user-menu > div:first-child {
        flex: 1;
        min-width: 0;
    }
    .top-nav .nav-right .user-menu .user-avatar {
        flex-shrink: 0;
    }
    .top-nav .nav-right .user-menu #user-dropdown {
        position: static !important;
        display: none;
        flex-basis: 100% !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        background: rgba(255,255,255,0.05) !important;
        margin-top: 8px;
    }
    .top-nav .nav-right .user-menu #user-dropdown[style*="display: block"] { display: block !important; }
    /* Invert the dropdown panel text colours so they're legible on the dark nav. */
    .top-nav .nav-right .user-menu #user-dropdown a { color: rgba(255,255,255,0.85) !important; }
    .top-nav .nav-right .user-menu #user-dropdown > div:first-child { border-bottom-color: rgba(255,255,255,0.12) !important; }
    .top-nav .nav-right .user-menu #user-dropdown > div:first-child > div:first-child { color: white !important; }
    .top-nav .nav-right .user-menu #user-dropdown > div:first-child > div:not(:first-child) { color: rgba(255,255,255,0.65) !important; }
    /* Tab bar on mobile - horizontally scrollable so items don't clip.
       Dropdowns are allowed to overflow the bar (position:fixed below). */
    .tab-bar {
        padding: 0 8px;
        overflow-x: auto;
        overflow-y: visible;
        flex-wrap: nowrap;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;  /* firefox - hide scrollbar, not scroll */
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-bar a, .tab-bar .nav-link, .tab-bar .nav-group-label {
        padding: 8px 10px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .nav-group { position: static; }  /* dropdowns position relative to viewport on mobile */
    .nav-group-label { padding: 8px 10px; font-size: 11px; }
    /* Dropdowns on mobile - fixed full-width from the left edge so they
       don't get clipped by the scrolling tab bar. top: 88px sits directly
       under the top-nav (52px) + tab-bar (~36px). */
    .nav-dropdown {
        position: fixed !important;
        top: 88px !important;
        left: 8px !important;
        right: 8px !important;
        margin-top: 0 !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 160px) !important;
        overflow-y: auto !important;
        background: white !important;
        border: 1px solid var(--ventia-gray-200) !important;
        border-radius: 8px !important;
        box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important;
        /* Must beat Leaflet's control/popup z-indexes (up to 800) and any
           sticky tab bars. Stays below full-screen modals (>=9999). */
        z-index: 9500 !important;
        padding: 0 !important;
        display: none !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    .nav-group.open .nav-dropdown,
    .nav-dropdown.portal-open {
        display: block !important;
        padding: 4px 0 !important;
    }
    .nav-dropdown a { padding: 10px 16px !important; font-size: 12px !important; color: var(--ventia-gray-600) !important; white-space: normal !important; }

    /* Prevent horizontal scroll on mobile */
    html { overflow-x: hidden; max-width: 100%; }
    body { overflow-x: hidden; max-width: 100vw; }
    /* Hide the recent submissions sidebar toggle on mobile */
    #recent-submissions-toggle { display: none !important; }
    #recent-submissions-sidebar { display: none !important; }

    /* Stepper bar - sticky and prominent on mobile */
    .stepper-bar {
        position: sticky !important;
        top: 88px !important;  /* below top-nav (52px) + tab-bar (~36px) */
        z-index: 97 !important;
        background: white !important;
        padding: 8px 12px !important;
        border-bottom: 2px solid var(--ventia-green) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    .step-label { font-size: 9px !important; }
    .step-circle { width: 28px !important; height: 28px !important; font-size: 12px !important; }

    /* Stepper nav buttons - fixed at bottom on mobile so always visible */
    .stepper-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        z-index: 100 !important;
        padding: 12px 16px !important;
        border-top: 2px solid var(--ventia-green) !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1) !important;
        margin: 0 !important;
    }
    .stepper-nav { flex-wrap: wrap !important; gap: 8px !important; }
    .stepper-nav .btn { padding: 10px 16px !important; font-size: 13px !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    /* Pad bottom so fixed nav doesn't cover content */
    body.stepper-active { padding-bottom: 70px !important; }

    /* Force all grids to single column on mobile */
    .form-section [style*="grid-template-columns: 1fr 1fr"],
    .form-section [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Prevent any element from overflowing viewport */
    .form-section, .sra-step, .form-row, .field, textarea, input, select, table, pre, code {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    textarea, input[type="text"], input[type="search"] { width: 100% !important; box-sizing: border-box !important; }

    /* Equipment table - card layout on mobile */
    .equip-thead { display: none; }
    #equipment-picker { overflow-x: hidden !important; }
    #equipment-picker colgroup { display: none; }
    #equipment-picker table { width: 100% !important; table-layout: fixed !important; }

    .form-section {
        margin: 8px 10px;
        padding: 14px 12px;
    }
    .form-row {
        flex-direction: column;
    }
    .form-row label {
        width: 100%;
        min-width: unset;
        text-align: left;
        padding-right: 0;
        padding-top: 0;
        margin-bottom: 4px;
    }
    .form-row .field {
        width: 100%;
    }
    .classification-panel {
        margin: 8px 10px;
    }
    .classification-result {
        grid-template-columns: 1fr;
    }
    .classification-card {
        padding: 10px;
    }
    .demo-panel {
        margin: 8px 10px;
        padding: 10px 12px;
    }
    #non-costed-alert,
    #oos-alert {
        margin: 0 10px;
    }
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .landing .view-cards {
        grid-template-columns: 1fr;
    }
    .nav-tabs {
        flex-wrap: wrap;
        gap: 2px;
    }
    .nav-tabs a {
        font-size: 11px;
        padding: 8px 10px;
    }
    .reasoning-panel {
        margin: 8px 10px;
    }
    .iris-layout {
        grid-template-columns: 1fr;
    }
}

/* ===== IRIS QUEUE HEADER ===== */
.queue-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.queue-header-controls {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}
.queue-filter-btn {
    font-size: 11px;
}
.queue-filter-select {
    font-size: 11px;
    padding: 4px 8px;
    flex: 1;
}
.iris-qf-btn {
    padding: 2px 8px;
    border: 1px solid var(--ventia-gray-200);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    background: white;
    color: var(--ventia-gray-500);
    transition: all 0.12s;
}
.iris-qf-btn:hover { border-color: var(--ventia-blue); color: var(--ventia-blue); }
.iris-qf-btn.active { background: var(--ventia-blue); color: white; border-color: var(--ventia-blue); }
.iris-qf-pri.active[data-qf-pri="P1"] { background: #dc2626; border-color: #dc2626; color: white; }
.iris-qf-pri.active[data-qf-pri="P2"] { background: #f59e0b; border-color: #f59e0b; color: white; }
.iris-qf-pri.active[data-qf-pri="P3"] { background: #2563eb; border-color: #2563eb; color: white; }
.iris-qf-pri.active[data-qf-pri="P4"] { background: #6b7280; border-color: #6b7280; color: white; }

/* ===== IRIS LEFT PANEL DETAILS ===== */
.iris-mono-id {
    font-family: monospace;
    font-size: 11px;
}
.iris-scribble {
    font-size: 12px;
    width: 100%;
}

/* ===== IRIS EMPTY STATE ICON ===== */
.iris-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* ===== IRIS RIGHT PANEL ===== */
.iris-alerts-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}
.iris-alerts-content {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ventia-gray-400);
}
.iris-alert-msg {
    font-size: 11px;
}
.iris-alert-msg.warning {
    color: var(--ventia-orange);
}
.iris-alert-msg.info {
    color: var(--ventia-blue);
}
.iris-no-alerts {
    color: var(--ventia-gray-400);
}
.iris-no-data {
    font-size: 12px;
    color: var(--ventia-gray-400);
    padding: 8px 0;
}

/* ===== SCRIPT HEADER ===== */
.script-header-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ventia-gray-900);
}
.script-header-meta {
    font-size: 12px;
    color: var(--ventia-gray-500);
}
.script-header-status {
    font-size: 12px;
    padding: 4px 12px;
}

/* ===== SCRIPT BUBBLE CONTENT ===== */
.bubble-title {
    font-weight: 600;
    margin-bottom: 4px;
}
.bubble-detail {
    font-size: 12px;
    opacity: 0.85;
}

/* ===== CLASSIFICATION REVIEW HEADER BADGE ===== */
.cls-header-badge {
    margin-left: auto;
    font-size: 11px;
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 12px;
}
.cls-header-hint {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.8;
}
.cls-header-clear {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.8;
    cursor: pointer;
}

/* ===== SECTION BORDER COLOR MODIFIERS ===== */
.cls-review-section.warning {
    border-color: #f59e0b;
}
.cls-review-section.equip-assigned {
    border-color: #bbf7d0;
}
.cls-review-section.location {
    border-color: #c4b5fd;
}
.cls-review-section.location-warning {
    border-color: #f59e0b;
}
.cls-review-section.override {
    border-color: var(--ventia-orange);
}
.cls-review-section.dispatch {
    border-color: #059669;
}
.cls-review-section.staged {
    border-color: #2563eb;
    border-width: 2px;
}

/* ===== HEADER BACKGROUND COLOR MODIFIERS ===== */
.cls-review-header.warning {
    background: #f59e0b;
}
.cls-review-header.equip-assigned {
    background: var(--ventia-green);
}
.cls-review-header.location {
    background: #7c3aed;
}
.cls-review-header.override {
    background: var(--ventia-orange);
}
.cls-review-header.dispatch {
    background: #059669;
}
.cls-review-header.staged {
    background: #2563eb;
}
.cls-review-header.paths {
    background: var(--ventia-gray-600);
}
.cls-review-header.paths-multi {
    background: var(--ventia-gray-700);
}
.cls-review-body.compact {
    padding: 14px;
}
.cls-review-body.tight {
    padding: 12px;
}

/* ===== EQUIPMENT SEARCH BOX ===== */
.equip-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.equip-search-input {
    flex: 1;
    font-size: 12px;
    padding: 8px 12px;
    border: 1px solid var(--ventia-gray-300);
    border-radius: 4px;
}
.equip-search-btn {
    white-space: nowrap;
}
.equip-refresh-btn {
    background: #059669;
    color: white;
    white-space: nowrap;
}

/* ===== EQUIPMENT SUGGESTION LABELS ===== */
.equip-suggest-label {
    font-size: 11px;
    font-weight: 600;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.equip-search-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ventia-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.equip-no-results {
    font-size: 12px;
    color: var(--ventia-gray-500);
}
.equip-no-results-padded {
    font-size: 12px;
    color: var(--ventia-gray-500);
    padding: 8px 0;
}

/* ===== EQUIPMENT ROW ===== */
.equip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 2px;
    border: 1px solid var(--ventia-gray-100);
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}
.equip-row:hover {
    border-color: #059669;
    background: #f0fdf4;
}
.equip-row-number {
    font-family: monospace;
    font-size: 10px;
    color: var(--ventia-gray-400);
    min-width: 70px;
}
.equip-row-desc {
    font-weight: 500;
    flex: 1;
}
.equip-row-tds {
    font-size: 10px;
    color: var(--ventia-blue);
    font-weight: 600;
}
.equip-row-score {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}
.equip-score-bar {
    width: 36px;
    height: 6px;
    background: var(--ventia-gray-100);
    border-radius: 3px;
    overflow: hidden;
}
.equip-score-fill {
    height: 100%;
    border-radius: 3px;
}
.equip-score-value {
    font-size: 9px;
    color: var(--ventia-gray-400);
}
.equip-select-badge {
    font-size: 10px;
    color: var(--ventia-green);
    font-weight: 700;
    background: #d1fae5;
    padding: 2px 8px;
    border-radius: 3px;
}

/* ===== PROXIMITY BADGES ===== */
.prox-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}
.prox-badge.room {
    background: #dcfce7;
    color: #166534;
}
.prox-badge.level {
    background: #dbeafe;
    color: #1e40af;
}
.prox-badge.building {
    background: #fef3c7;
    color: #92400e;
}

/* ===== LOCATION HINT ROWS ===== */
.loc-hint-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 4px;
    background: #faf5ff;
    border-radius: 4px;
    font-size: 12px;
}
.loc-hint-type {
    font-weight: 600;
    color: #7c3aed;
    text-transform: uppercase;
    font-size: 10px;
    min-width: 60px;
}
.loc-hint-text {
    font-weight: 600;
    color: var(--ventia-gray-800);
}
.loc-hint-chip {
    font-size: 11px;
    background: #ede9fe;
    color: #5b21b6;
    padding: 3px 10px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.loc-hint-chip:hover {
    border-color: #7c3aed;
    background: #ddd6fe;
}
.loc-hint-chip-class {
    font-size: 9px;
    opacity: 0.7;
}
.loc-hint-chip-select {
    font-size: 9px;
    color: #059669;
    font-weight: 700;
    margin-left: 4px;
}
.loc-hint-no-match {
    font-size: 11px;
    color: var(--ventia-gray-400);
}
.loc-no-location-banner {
    font-size: 12px;
    color: #92400e;
    background: #fef3c7;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.loc-no-location-desc {
    font-size: 12px;
    color: var(--ventia-gray-600);
    margin-bottom: 10px;
}

/* ===== LOCATION BROWSER ===== */
.loc-browser-section {
    margin-top: 12px;
    border-top: 1px solid var(--ventia-gray-200);
    padding-top: 12px;
}
.loc-browser-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.loc-browser-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ventia-gray-500);
    text-transform: uppercase;
}
.loc-browse-btn {
    font-size: 10px;
}

/* ===== LOCATION TREE ITEMS ===== */
.loc-tree-container {
    border: 1px solid var(--ventia-gray-200);
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}
.loc-tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
}
.loc-tree-item:hover {
    background: #faf5ff;
}
.loc-tree-icon {
    font-size: 12px;
}
.loc-tree-name {
    flex: 1;
}
.loc-tree-name.parent {
    font-weight: 600;
}
.loc-tree-floc {
    font-size: 9px;
    color: var(--ventia-gray-400);
    font-family: monospace;
}
.loc-tree-class {
    font-size: 9px;
    color: var(--ventia-gray-400);
}
.loc-tree-select {
    font-size: 9px;
    color: #059669;
    font-weight: 700;
}
.loc-tree-wrapper {
    font-size: 12px;
    margin-top: 8px;
}
.loc-tree-loading {
    color: var(--ventia-gray-400);
    padding: 8px;
}
.loc-tree-error {
    color: #dc2626;
    padding: 8px;
}

/* ===== STAGED ASSIGNMENT PANEL ===== */
.staged-equip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    margin-bottom: 8px;
}
.staged-loc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #faf5ff;
    border: 1px solid #c4b5fd;
    border-radius: 6px;
    margin-bottom: 8px;
}
.staged-row-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 70px;
}
.staged-row-label.equip {
    color: #059669;
}
.staged-row-label.loc {
    color: #7c3aed;
}
.staged-row-mono {
    font-family: monospace;
    font-size: 10px;
    color: var(--ventia-gray-400);
}
.staged-row-desc {
    font-weight: 600;
    flex: 1;
}
.staged-row-tds {
    font-size: 10px;
    color: var(--ventia-blue);
}
.staged-auto-derived {
    font-size: 9px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 3px;
}
.staged-remove {
    cursor: pointer;
    font-size: 12px;
    color: var(--ventia-gray-400);
}
.staged-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}
.staged-confirm-btn {
    background: #059669;
    color: white;
    font-weight: 600;
    padding: 6px 20px;
}

/* ===== PATH COMPARISON ===== */
.path-row-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: white;
    border: 1px solid var(--ventia-gray-200);
}
.path-row-disc {
    font-weight: 600;
    min-width: 80px;
}
.path-row-reasoning {
    flex: 1;
    font-size: 11px;
}
.path-row-conf {
    font-weight: 600;
}
.path-winner-note {
    margin-top: 8px;
    font-style: italic;
    color: var(--ventia-gray-500);
}
.path-winner-note.compact {
    font-size: 11px;
    margin-top: 10px;
}

/* ===== PATH COMPARISON GRID ===== */
.path-grid {
    display: grid;
    gap: 8px;
    align-items: center;
}
.path-grid.header-row {
    margin-bottom: 10px;
}
.path-grid.data-row {
    margin-bottom: 4px;
}
.path-grid.reasoning-row {
    margin-top: 8px;
    align-items: start;
}
.path-grid.actions-row {
    margin-top: 10px;
}
.path-grid-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--ventia-gray-500);
    text-transform: uppercase;
}
.path-col-header {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}
.path-col-conf {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
}
.path-winner-badge {
    font-size: 9px;
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}
.path-grid-cell {
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
}
.path-grid-cell.current {
    /* border-color and background set dynamically via modifier */
}
.path-grid-cell-sp {
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    font-size: 11px;
    background: white;
}
.path-grid-reasoning {
    font-size: 11px;
    color: var(--ventia-gray-600);
    padding: 6px;
    background: var(--ventia-gray-50);
    border-radius: 4px;
    line-height: 1.5;
}
.path-grid-use-btn {
    font-size: 11px;
    width: 100%;
}

/* ===== LLM COMPARISON PROMPT ===== */
.llm-prompt-box {
    margin-top: 12px;
    padding: 12px;
    background: #f3e8ff;
    border: 1px solid #c4b5fd;
    border-radius: 6px;
}
.llm-prompt-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.llm-prompt-text {
    flex: 1;
}
.llm-prompt-title {
    font-size: 12px;
    font-weight: 600;
    color: #7c3aed;
}
.llm-prompt-desc {
    font-size: 11px;
    color: var(--ventia-gray-500);
    margin-top: 2px;
}
.llm-run-btn {
    background: #7c3aed;
    color: white;
    white-space: nowrap;
}

/* ===== TRIAGE ACTION BUTTONS ===== */
.triage-reopen-btn {
    border-color: #7c3aed;
    color: #7c3aed;
}
.triage-status-label {
    font-size: 12px;
    color: var(--ventia-gray-500);
    display: flex;
    align-items: center;
}

/* ===== OVERRIDE FORM ===== */
.override-heading {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
}
.override-reason-group {
    margin-top: 10px;
}
.override-reason-textarea {
    margin-top: 3px;
}
.override-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.override-detail-reason {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ventia-gray-500);
    font-style: italic;
}

/* ===== FLOW HISTORY ===== */
.flow-history-section {
    margin-top: 24px;
}
.flow-history-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ventia-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.flow-step-content {
    flex: 1;
}
.flow-dispatch-btn {
    font-size: 11px;
}

/* ===== DISPATCH PAYLOAD ===== */
.dispatch-payload-hidden {
    display: none;
    margin-top: 16px;
}
.dispatch-payload-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.dispatch-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--ventia-gray-500);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.dispatch-section-item {
    font-size: 11px;
    padding: 4px 8px;
    background: var(--ventia-gray-50);
    border-radius: 3px;
    margin-bottom: 2px;
}
.dispatch-partner-role {
    font-weight: 600;
    min-width: 60px;
    display: inline-block;
}
.dispatch-section-list {
    margin-top: 12px;
}
.dispatch-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

/* ===== PAYLOAD FIELD ROWS ===== */
.payload-field-row {
    display: flex;
    font-size: 11px;
    padding: 2px 0;
    border-bottom: 1px solid var(--ventia-gray-50);
}
.payload-field-key {
    color: var(--ventia-gray-400);
    min-width: 140px;
    font-family: monospace;
    font-size: 10px;
}
.payload-field-value {
    font-weight: 500;
    color: var(--ventia-gray-800);
}
.payload-field-value.empty {
    font-weight: 400;
    color: var(--ventia-gray-300);
}

/* ===== QUEUE ITEM HEADER ===== */
.queue-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ===== INLINE SEARCH CONTAINER ===== */
.equip-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== PDF/PRINT STYLES ===== */
.pdf-header { display: none; }
.pdf-export-btn { position: fixed; bottom: 20px; right: 20px; z-index: 100; padding: 8px 16px; background: var(--ventia-blue); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md); }
.pdf-export-btn:hover { opacity: 0.85; }
.no-print { }

@media print {
    .pdf-header { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 2px solid var(--ventia-navy); margin-bottom: 20px; }
    .pdf-header img { width: 48px; height: 48px; }
    .pdf-header-text { flex: 1; }
    .pdf-header-title { font-size: 20px; font-weight: 700; color: var(--ventia-navy); margin: 0; }
    .pdf-header-subtitle { font-size: 13px; color: var(--ventia-gray-500); margin: 2px 0 0; }
    .pdf-header-date { font-size: 11px; color: var(--ventia-gray-400); }
    .no-print, .top-nav, .tab-bar, .pdf-export-btn { display: none !important; }
    body { background: white; }
}

/* ===== F2: SLA COUNTDOWN COLORS ===== */
.sla-green { color: #059669; font-weight: 600; }
.sla-amber { color: #d97706; font-weight: 600; }
.sla-red { color: #dc2626; font-weight: 700; }
.sla-breached { color: #dc2626; font-weight: 700; background: #fef2f2; padding: 1px 6px; border-radius: 3px; animation: sla-pulse 2s infinite; }
@keyframes sla-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.sla-summary-bar { display: flex; gap: 10px; padding: 6px 10px; background: white; border: 1px solid var(--ventia-gray-200); border-radius: 6px; margin-bottom: 6px; font-size: 11px; align-items: center; flex-wrap: wrap; }
.sla-summary-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.sla-summary-badge.green { background: #d1fae5; color: #059669; }
.sla-summary-badge.amber { background: #fef3c7; color: #d97706; }
.sla-summary-badge.red { background: #fef2f2; color: #dc2626; }

.queue-sla-countdown { font-size: 9px; margin-top: 2px; }
.queue-quick-accept { background: #059669; color: white; border: none; border-radius: 3px; padding: 2px 6px; font-size: 9px; cursor: pointer; }
.queue-quick-accept:hover { background: #047857; }

/* ===== F5: SUGGESTED RESPONSE PANEL ===== */
.response-panel { background: white; border: 1px solid var(--ventia-gray-200); border-radius: 8px; padding: 12px; margin-top: 10px; }
.response-panel textarea { width: 100%; min-height: 100px; border: 1px solid var(--ventia-gray-200); border-radius: 6px; padding: 8px; font-size: 12px; font-family: inherit; resize: vertical; }
.response-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; margin-bottom: 6px; }
.response-type-badge.standard { background: #dbeafe; color: #2563eb; }
.response-type-badge.oos { background: #f3f4f6; color: #6b7280; }
.response-type-badge.p1_emergency { background: #fef2f2; color: #dc2626; }
.response-type-badge.warranty { background: #ede9fe; color: #7c3aed; }
.response-type-badge.dlp { background: #fef3c7; color: #d97706; }
.response-type-badge.dispatched { background: #d1fae5; color: #059669; }
.copy-response-btn { background: var(--ventia-blue); color: white; border: none; border-radius: 4px; padding: 4px 12px; font-size: 11px; cursor: pointer; font-weight: 600; }
.copy-response-btn:hover { opacity: 0.85; }

/* ===== F6: ESCALATION BRIEF ===== */
.escalation-brief { background: white; border: 1px solid var(--ventia-gray-200); border-radius: 8px; padding: 16px; max-height: 70vh; overflow-y: auto; }
.escalation-brief h3 { font-size: 14px; color: var(--ventia-navy); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--ventia-gray-200); }
.escalation-brief h3:first-child { margin-top: 0; }
.escalation-brief .brief-section { margin-bottom: 10px; }
.escalation-brief .brief-field { display: flex; gap: 8px; font-size: 12px; padding: 2px 0; }
.escalation-brief .brief-label { font-weight: 600; color: var(--ventia-gray-600); min-width: 120px; }

/* ===== F7: TRACKING TIMELINE ===== */
.tracking-stepper { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 0; position: relative; }
.tracking-stepper::before { content: ''; position: absolute; top: 20px; left: 0; right: 0; height: 3px; background: var(--ventia-gray-200); z-index: 0; }
.tracking-step { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1; }
.tracking-step-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border: 3px solid var(--ventia-gray-200); background: white; color: var(--ventia-gray-400); }
.tracking-step.completed .tracking-step-circle { background: #059669; border-color: #059669; color: white; }
.tracking-step.active .tracking-step-circle { background: #2563eb; border-color: #2563eb; color: white; animation: step-pulse 2s infinite; }
@keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); } 50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }
.tracking-step-label { font-size: 11px; font-weight: 600; margin-top: 8px; color: var(--ventia-gray-500); text-align: center; }
.tracking-step.completed .tracking-step-label { color: #059669; }
.tracking-step.active .tracking-step-label { color: #2563eb; }
.tracking-step-time { font-size: 9px; color: var(--ventia-gray-400); margin-top: 2px; text-align: center; }

.sla-progress-bar { width: 100%; height: 24px; background: var(--ventia-gray-100); border-radius: 12px; overflow: hidden; position: relative; }
.sla-progress-fill { height: 100%; border-radius: 12px; transition: width 0.5s ease; }
.sla-progress-fill.green { background: linear-gradient(90deg, #059669, #34d399); }
.sla-progress-fill.amber { background: linear-gradient(90deg, #d97706, #fbbf24); }
.sla-progress-fill.red { background: linear-gradient(90deg, #dc2626, #f87171); }
.sla-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 11px; font-weight: 600; color: var(--ventia-gray-700); }

/* ===== F8: CONVERSATIONAL SRA ===== */
.conv-mode-toggle { display: inline-flex; border: 1px solid var(--ventia-gray-200); border-radius: 6px; overflow: hidden; }
.conv-mode-btn { padding: 6px 14px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; background: white; color: var(--ventia-gray-500); }
.conv-mode-btn.active { background: var(--ventia-blue); color: white; }

.conv-chat-container { display: flex; flex-direction: column; height: 500px; border: 1px solid var(--ventia-gray-200); border-radius: 8px; background: var(--ventia-gray-50); overflow: hidden; }
.conv-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.conv-bubble { max-width: 80%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.4; }
.conv-bubble.bot { background: white; border: 1px solid var(--ventia-gray-200); align-self: flex-start; border-bottom-left-radius: 4px; }
.conv-bubble.user { background: var(--ventia-blue); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.conv-input-area { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--ventia-gray-200); background: white; }
.conv-input { flex: 1; padding: 8px 12px; border: 1px solid var(--ventia-gray-200); border-radius: 20px; font-size: 13px; outline: none; }
.conv-input:focus { border-color: var(--ventia-blue); }
.conv-send-btn { background: var(--ventia-blue); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; font-size: 14px; }
.conv-options { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.conv-option-pill { padding: 4px 12px; border: 1px solid var(--ventia-blue); color: var(--ventia-blue); border-radius: 16px; font-size: 11px; cursor: pointer; background: white; }
.conv-option-pill:hover { background: var(--ventia-blue-pale); }

/* ===== F3: CALL NOTES EXTRACTION ===== */
.extraction-results { background: var(--ventia-gray-50); border: 1px solid var(--ventia-gray-200); border-radius: 6px; padding: 10px; margin-top: 8px; }
.extraction-field { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.extraction-field .field-label { font-weight: 600; color: var(--ventia-gray-600); min-width: 100px; }
.extraction-field .field-value { flex: 1; }
.extraction-confidence { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
.extraction-confidence.high { background: #d1fae5; color: #059669; }
.extraction-confidence.medium { background: #fef3c7; color: #d97706; }
.extraction-confidence.low { background: #fef2f2; color: #dc2626; }
.apply-field-btn { background: var(--ventia-green); color: white; border: none; border-radius: 3px; padding: 2px 8px; font-size: 10px; cursor: pointer; }
.apply-field-btn:hover { opacity: 0.85; }

/* ===== LLM LOADING SPINNER ===== */
.llm-spinner {
    width: 18px; height: 18px;
    border: 3px solid var(--ventia-gray-200);
    border-top-color: var(--ventia-blue);
    border-radius: 50%;
    animation: llm-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes llm-spin { to { transform: rotate(360deg); } }
#llm-loading-text { transition: opacity 0.15s ease; }

/* ===== VALUE STREAM MAPPING ===== */

/* Dashboard widget */
.vsm-widget { background: white; border: 1px solid var(--ventia-gray-200); border-radius: var(--border-radius); margin: 0 24px 8px; padding: 16px 20px; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow 0.2s; }
.vsm-widget:hover { box-shadow: var(--shadow-md); }
.vsm-widget-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vsm-widget-title h3 { font-size: 13px; font-weight: 700; color: var(--ventia-navy); margin: 0; }
.vsm-widget-title .vsm-link { font-size: 11px; color: var(--ventia-blue); text-decoration: none; font-weight: 600; }
.vsm-widget-flow { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 4px 0; }
.vsm-widget-stage { display: flex; flex-direction: column; align-items: center; min-width: 100px; flex: 1; position: relative; }
.vsm-widget-stage-box { width: 100%; padding: 8px 6px; border-radius: 6px; text-align: center; border: 2px solid var(--ventia-gray-200); background: white; transition: all 0.3s; }
.vsm-widget-stage-box.green { border-color: #059669; background: #ecfdf5; }
.vsm-widget-stage-box.amber { border-color: #d97706; background: #fffbeb; }
.vsm-widget-stage-box.red { border-color: #dc2626; background: #fef2f2; }
.vsm-widget-stage-box.bottleneck { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,0.2); }
.vsm-widget-stage-name { font-size: 10px; font-weight: 600; color: var(--ventia-gray-700); white-space: nowrap; }
.vsm-widget-stage-count { font-size: 18px; font-weight: 700; color: var(--ventia-gray-900); line-height: 1.2; }
.vsm-widget-stage-time { font-size: 9px; color: var(--ventia-gray-500); }
.vsm-widget-arrow { font-size: 16px; color: var(--ventia-gray-300); flex-shrink: 0; margin: 0 2px; padding-top: 8px; }
.vsm-widget-arrow .arrow-rate { font-size: 8px; display: block; color: var(--ventia-gray-400); text-align: center; white-space: nowrap; }

/* Full VSM page */
.vsm-page { padding: 16px 24px; }
.vsm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.vsm-header h1 { font-size: 20px; font-weight: 700; color: var(--ventia-navy); margin: 0; }
.vsm-header .vsm-subtitle { font-size: 12px; color: var(--ventia-gray-500); margin-top: 2px; }

/* Process flow diagram */
.vsm-flow-container { background: white; border: 1px solid var(--ventia-gray-200); border-radius: var(--border-radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-sm); overflow-x: auto; }
.vsm-flow { display: flex; align-items: flex-start; gap: 0; min-width: 900px; padding: 10px 0; }
.vsm-stage { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 90px; position: relative; }
.vsm-stage-box { width: 100%; max-width: 130px; border: 2px solid var(--ventia-gray-200); border-radius: 8px; padding: 12px 8px; text-align: center; background: white; cursor: pointer; transition: all 0.2s; position: relative; }
.vsm-stage-box:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.vsm-stage-box.green { border-color: #059669; }
.vsm-stage-box.amber { border-color: #d97706; }
.vsm-stage-box.red { border-color: #dc2626; }
.vsm-stage-box.bottleneck { border-color: #dc2626; background: #fef2f2; box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }
.vsm-stage-box.bottleneck::after { content: 'BOTTLENECK'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #dc2626; color: white; font-size: 8px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.5px; }
.vsm-stage-icon { margin-bottom: 4px; color: var(--ventia-navy); display: inline-flex; align-items: center; justify-content: center; }
.vsm-stage-icon svg { width: 22px; height: 22px; }
.vsm-stage-box.green .vsm-stage-icon { color: #059669; }
.vsm-stage-box.amber .vsm-stage-icon { color: #d97706; }
.vsm-stage-box.red .vsm-stage-icon, .vsm-stage-box.bottleneck .vsm-stage-icon { color: #dc2626; }
.vsm-stage-name { font-size: 11px; font-weight: 700; color: var(--ventia-gray-800); margin-bottom: 6px; }
.vsm-stage-metrics { display: flex; flex-direction: column; gap: 3px; }
.vsm-stage-metric { font-size: 9px; color: var(--ventia-gray-500); display: flex; justify-content: space-between; gap: 4px; }
.vsm-stage-metric .metric-val { font-weight: 700; color: var(--ventia-gray-800); }
.vsm-stage-wip { font-size: 22px; font-weight: 800; color: var(--ventia-gray-900); margin: 4px 0; }

/* Arrows between stages */
.vsm-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; padding-top: 20px; }
.vsm-arrow-line { width: 30px; height: 2px; background: var(--ventia-gray-300); position: relative; }
.vsm-arrow-line::after { content: ''; position: absolute; right: -4px; top: -4px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--ventia-gray-300); }
.vsm-arrow-label { font-size: 8px; color: var(--ventia-gray-400); text-align: center; margin-top: 2px; line-height: 1.2; white-space: nowrap; }

/* Metrics panel */
.vsm-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.vsm-metric-card { background: white; border: 1px solid var(--ventia-gray-200); border-radius: var(--border-radius); padding: 16px; box-shadow: var(--shadow-sm); }
.vsm-metric-card h4 { font-size: 11px; font-weight: 600; color: var(--ventia-gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 6px; }
.vsm-metric-card .metric-big { font-size: 28px; font-weight: 700; color: var(--ventia-gray-900); }
.vsm-metric-card .metric-sub { font-size: 11px; color: var(--ventia-gray-400); margin-top: 2px; }
.vsm-metric-card .metric-bar { height: 6px; background: var(--ventia-gray-100); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.vsm-metric-card .metric-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.vsm-metric-card .metric-bar-fill.green { background: #059669; }
.vsm-metric-card .metric-bar-fill.amber { background: #d97706; }
.vsm-metric-card .metric-bar-fill.red { background: #dc2626; }

/* Value-add ratio bar */
.vsm-ratio-bar { display: flex; height: 24px; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.vsm-ratio-bar .process-time { background: #059669; }
.vsm-ratio-bar .wait-time { background: var(--ventia-gray-200); }
.vsm-ratio-legend { display: flex; gap: 12px; margin-top: 6px; font-size: 10px; color: var(--ventia-gray-500); }
.vsm-ratio-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* Sparklines */
.vsm-sparkline-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.vsm-sparkline-card { background: white; border: 1px solid var(--ventia-gray-200); border-radius: var(--border-radius); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.vsm-sparkline-card h4 { font-size: 11px; font-weight: 600; color: var(--ventia-gray-500); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px; }
.vsm-sparkline-card .spark-value { font-size: 20px; font-weight: 700; color: var(--ventia-gray-900); }
.vsm-sparkline-card .spark-change { font-size: 10px; font-weight: 600; margin-left: 6px; }
.vsm-sparkline-card .spark-change.up { color: #dc2626; }
.vsm-sparkline-card .spark-change.down { color: #059669; }
.vsm-sparkline-card .spark-change.neutral { color: var(--ventia-gray-400); }
.vsm-sparkline-card svg { display: block; margin-top: 8px; }

/* Drill-down panel */
.vsm-drill-panel { background: white; border: 1px solid var(--ventia-gray-200); border-radius: var(--border-radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm); display: none; }
.vsm-drill-panel.visible { display: block; }
.vsm-drill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vsm-drill-header h3 { font-size: 14px; font-weight: 700; color: var(--ventia-navy); margin: 0; }
.vsm-drill-close { background: none; border: none; font-size: 18px; color: var(--ventia-gray-400); cursor: pointer; }
.vsm-drill-filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.vsm-drill-filters select { padding: 4px 8px; border: 1px solid var(--ventia-gray-200); border-radius: 4px; font-size: 11px; background: white; }
.vsm-drill-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vsm-drill-table th { text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 600; color: var(--ventia-gray-500); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--ventia-gray-200); }
.vsm-drill-table td { padding: 6px 8px; border-bottom: 1px solid var(--ventia-gray-100); color: var(--ventia-gray-700); }
.vsm-drill-table tr:hover td { background: var(--ventia-gray-50); }

/* Order timeline mini */
.vsm-order-timeline { display: flex; gap: 4px; align-items: center; }
.vsm-order-timeline .tl-dot { width: 8px; height: 8px; border-radius: 50%; }
.vsm-order-timeline .tl-dot.done { background: #059669; }
.vsm-order-timeline .tl-dot.active { background: #2563eb; animation: step-pulse 2s infinite; }
.vsm-order-timeline .tl-dot.pending { background: var(--ventia-gray-200); }
.vsm-order-timeline .tl-line { width: 12px; height: 2px; background: var(--ventia-gray-200); }
.vsm-order-timeline .tl-line.done { background: #059669; }

/* Histogram */
.vsm-histogram { display: flex; align-items: flex-end; gap: 2px; height: 60px; margin-top: 8px; }
.vsm-histogram-bar { flex: 1; background: var(--ventia-blue); border-radius: 2px 2px 0 0; min-width: 4px; transition: height 0.3s; position: relative; }
.vsm-histogram-bar:hover { opacity: 0.8; }
.vsm-histogram-bar:hover::after { content: attr(data-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ventia-gray-800); color: white; font-size: 9px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.vsm-histogram-axis { display: flex; justify-content: space-between; font-size: 8px; color: var(--ventia-gray-400); margin-top: 2px; }

/* Extended data section */
.vsm-extended { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--border-radius); padding: 16px; margin-bottom: 16px; }
.vsm-extended h3 { font-size: 13px; font-weight: 700; color: #166534; margin: 0 0 8px; }
.vsm-extended .ext-unavailable { color: var(--ventia-gray-400); font-size: 12px; font-style: italic; }

/* Responsive */
@media (max-width: 1024px) {
    .vsm-metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .vsm-sparkline-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .vsm-metrics-grid { grid-template-columns: 1fr; }
    .vsm-widget-flow { overflow-x: auto; }
    .hide-mobile { display: none !important; }
    .label-full { display: none !important; }
    .label-short { display: inline !important; }
    /* Maintenance summary cards: 4-col grid is cramped on phones - break to 2x2 */
    #si-maint-summary { grid-template-columns: 1fr 1fr !important; }
    /* Maintenance filter bar: let the filter chips wrap cleanly under the title */
    .si-maint-bar { flex-direction: column; align-items: stretch !important; }
    .si-maint-bar .si-maint-filters { justify-content: flex-start; }
    .si-maint-bar .si-maint-sep { display: none; }
    /* Maintenance rows: on mobile stack the long fields instead of sharing a
       single flex row - otherwise date/desc/status/order/flag all compete
       for space and "ScheduledCompleted12345" runs together. */
    .si-maint-row { flex-wrap: wrap !important; row-gap: 3px !important; column-gap: 6px !important; }
    .si-maint-row > * { min-width: 0 !important; }
    .si-maint-row .si-maint-date { flex-shrink: 0; font-size: 10px !important; }
    .si-maint-row .si-maint-desc { flex-basis: calc(100% - 20px) !important; order: -1 !important; margin-left: 14px !important; }
    .si-maint-row .si-maint-freq { flex-shrink: 0; }
    .si-maint-row .si-maint-status { font-size: 10px !important; margin-left: 2px; }
    .si-maint-row .si-maint-order { font-size: 10px !important; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Responsive button labels: pair <span class="label-full"> with
   <span class="label-short"> in a button. Full renders on desktop, short
   renders on mobile - keeps the narrow tap target readable without clipping. */
.label-short { display: none; }

/* Icon-and-label buttons: icon + text on wide desktops, icon-only as soon as
   the layout starts bunching (≤1200px - well before the mobile breakpoint at
   768px). Teaching users the icon mapping happens on the first full-width
   render. */
.btn-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.btn-icon + .btn-label { margin-left: 6px; }
@media (max-width: 1200px) {
    .label-full { display: none !important; }
    .label-short { display: inline !important; }
    .btn-label { display: none !important; }
    .btn-icon + .btn-label { margin-left: 0 !important; }
    /* Give icon-only buttons a square-ish tap target */
    .si-detail-actions button,
    #si-inspection-actions button {
        min-width: 36px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* iPad band (tablet, not phone): icon-only buttons keep their labels
   hidden but the icons render larger so it's clearer what they are.
   Phones (<=768px) stay on the compact 12px icons. */
@media (min-width: 768px) and (max-width: 1200px) {
    .si-detail-actions button .btn-icon,
    #si-inspection-actions button .btn-icon,
    .si-top-bar button .btn-icon {
        width: 16px;
        height: 16px;
    }
    .si-detail-actions button,
    #si-inspection-actions button {
        min-width: 42px;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* VAIA Walk Mode entry: a field tool, so it only surfaces on touch-sized
   viewports (iPad / phone) and keeps its LABEL there - it must be
   unmistakable next to the icon-only buttons. Hidden on desktop where
   the walk surface isn't relevant. JS still gates it on an active
   session via inline display. */
@media (min-width: 1201px) {
    #si-walk-btn, #si-global-walk-btn { display: none !important; }
}
@media (max-width: 1200px) {
    #si-walk-btn .btn-label, #si-global-walk-btn .btn-label {
        display: inline !important;
        margin-left: 6px !important;
    }
    #si-walk-btn, #si-global-walk-btn {
        padding: 7px 13px !important;
        font-size: 11.5px !important;
        border-radius: 7px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
    }
    #si-walk-btn .btn-icon, #si-global-walk-btn .btn-icon { width: 14px; height: 14px; }
}

/* ===================================================================
   LTSDP dark / soft theme overrides
   ===================================================================
   The LTSDP templates use a lot of hardcoded `background: white` and
   light grays inline / in <style> blocks rather than reading the
   themed `--ventia-*` tokens (legacy from when LTSDP was light-only).
   Rather than rewrite hundreds of inline styles, this block remaps
   the main surfaces, text, and borders for dark + soft themes.
   Same precedent as the .it-* (Inspection Tracking) block above.
   Covers: slicer bar dropdowns, tabs, tiles, KPI cards, BC cards,
   recs queue rows, Forward Plan charts/tables, intent banners,
   modals, dropdowns, code/monospace spans.
   ====================================================================*/

/* ── Main surfaces ───────────────────────────────────────────────── */
[data-theme="dark"] .ltp-tile,
[data-theme="dark"] .fp-tile,
[data-theme="dark"] .fp-kpi,
[data-theme="dark"] .ltp-bc-card,
[data-theme="dark"] .ltp-bc-cards,
[data-theme="dark"] .ltp-bc-existing,
[data-theme="dark"] .ltp-bc-existing-row,
[data-theme="dark"] .ltp-bc-suggestion,
[data-theme="dark"] .ltp-bc-detail-section,
[data-theme="dark"] .ltp-recs-row,
[data-theme="dark"] .ltp-bc-rec-table,
[data-theme="dark"] .ltp-combo-pop {
    background: #1e2330 !important;
    border-color: #2d3548 !important;
    color: #e2e8f0;
}

/* ── Slicer dropdowns + scope selectors ──────────────────────────── */
[data-theme="dark"] .ltp-combo-btn,
[data-theme="dark"] .ltp-combo,
[data-theme="dark"] .ltp-bc-form input,
[data-theme="dark"] .ltp-bc-form select,
[data-theme="dark"] .ltp-bc-form textarea,
[data-theme="dark"] .ltp-rec-filters input,
[data-theme="dark"] .ltp-rec-filters select,
[data-theme="dark"] .ltp-del-pill {
    background: #252b3a;
    color: #e2e8f0;
    border-color: #2d3548;
}
[data-theme="dark"] .ltp-combo-pop {
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

/* ── Forward Plan KPI cards ──────────────────────────────────────── */
[data-theme="dark"] .fp-kpi-label,
[data-theme="dark"] .fp-kpi-sub {
    color: #94a3b8;
}
[data-theme="dark"] .fp-kpi-value {
    color: #f1f5f9;
}
[data-theme="dark"] .fp-kpi.fp-flag {
    background: #431407 !important;
    border-color: #7c2d12 !important;
}
[data-theme="dark"] .fp-banner {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}
[data-theme="dark"] .fp-banner a { color: #60a5fa; }

/* ── Forward Plan tables (top-10, heatmap) ───────────────────────── */
[data-theme="dark"] .fp-top-table th,
[data-theme="dark"] .fp-top-table td {
    background: transparent;
    color: #cbd5e1;
    border-color: #2d3548 !important;
}
[data-theme="dark"] .fp-top-table thead th {
    background: #252b3a !important;
    color: #a0aec0 !important;
}
[data-theme="dark"] .fp-heat-cell {
    color: #f1f5f9;
}
[data-theme="dark"] .fp-pill {
    background: #252b3a !important;
    border-color: #3b4560 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .fp-pill.active {
    background: #1e3a5f !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
}

/* ── Recs queue + BC tables ──────────────────────────────────────── */
[data-theme="dark"] .ltp-bc-rec-table th,
[data-theme="dark"] .ltp-bc-rec-table td,
[data-theme="dark"] table.ltp-recs-table th,
[data-theme="dark"] table.ltp-recs-table td {
    background: transparent;
    color: #cbd5e1;
    border-color: #2d3548 !important;
}
[data-theme="dark"] .ltp-bc-rec-table thead th,
[data-theme="dark"] table.ltp-recs-table thead th {
    background: #252b3a !important;
    color: #a0aec0 !important;
}

/* ── BC card kind/status chips (keep pill colour but soften bg) ──── */
[data-theme="dark"] .ltp-bc-chip,
[data-theme="dark"] .ltp-bc-pill,
[data-theme="dark"] .ltp-dim-pill {
    background: #2d3548 !important;
    color: #cbd5e1 !important;
}

/* ── BC modal overlay ─────────────────────────────────────────────── */
[data-theme="dark"] .ltp-bc-modal { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .ltp-bc-modal .ltp-bc-card * {
    color: inherit;
}
[data-theme="dark"] .ltp-bc-foot {
    border-top-color: #2d3548 !important;
    background: #1e2330 !important;
}

/* ── Tabs + nav strip ────────────────────────────────────────────── */
[data-theme="dark"] .ltp-tabs {
    border-bottom-color: #2d3548;
}
[data-theme="dark"] .ltp-tabs a {
    color: #94a3b8;
}
[data-theme="dark"] .ltp-tabs a:hover {
    color: #e2e8f0;
}
[data-theme="dark"] .ltp-tabs a.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
}

/* ── Coming-soon / empty states ──────────────────────────────────── */
[data-theme="dark"] .ltp-coming-soon,
[data-theme="dark"] .ltp-tile em {
    color: #64748b;
}

/* ── Kinds reference table (the expandable details block) ────────── */
[data-theme="dark"] details.ltp-tile summary {
    color: #e2e8f0;
}
[data-theme="dark"] details.ltp-tile table th {
    background: #252b3a !important;
    color: #94a3b8 !important;
    border-bottom-color: #2d3548 !important;
}
[data-theme="dark"] details.ltp-tile table td {
    color: #cbd5e1;
    border-bottom-color: #2d3548 !important;
}

/* ── Inline monospace / code (rationale equipment IDs etc) ───────── */
[data-theme="dark"] code,
[data-theme="dark"] .ltp-tile span[style*="monospace"] {
    color: #cbd5e1 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
[data-theme="dark"] .ltp-bc-new-btn,
[data-theme="dark"] .ltp-rec-new-btn,
[data-theme="dark"] .ltp-rec-run-btn,
[data-theme="dark"] .ltp-automation-btn {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #3b82f6;
}

/* ── Sub-headings + hint text inside tiles ──────────────────────── */
[data-theme="dark"] .ltp-tile h3,
[data-theme="dark"] .ltp-tile h4,
[data-theme="dark"] .fp-tile h3,
[data-theme="dark"] .fp-tile h4 {
    color: #f1f5f9;
}
[data-theme="dark"] .ltp-tile-sub,
[data-theme="dark"] .ltp-tile small,
[data-theme="dark"] .fp-tile small {
    color: #94a3b8;
}

/* ── Soft theme: slightly tinted card backgrounds ────────────────── */
[data-theme="soft"] .ltp-tile,
[data-theme="soft"] .fp-tile,
[data-theme="soft"] .fp-kpi,
[data-theme="soft"] .ltp-bc-card {
    background: #f7fafc;
    border-color: #cbd5e1;
}
[data-theme="soft"] .ltp-tile h3,
[data-theme="soft"] .fp-tile h3 {
    color: #0f172a;
}


/* ── Searchable select ────────────────────────────────────────────────
   Moved here from templates/ltsdp.html when the combo box became shared.
   Class names kept as .ltp-combo* so the existing markup and the dozens of
   ltsdp call sites did not all have to change at once. */
    .ltp-combo { position: relative; }
    .ltp-combo-btn { padding: 5px 10px; font-size: 12px; font-weight: 600;
                     border: 1px solid var(--ventia-gray-300); border-radius: 5px;
                     background: white; color: var(--ventia-gray-800); cursor: pointer;
                     text-align: left; display: flex; align-items: center; gap: 6px;
                     min-width: 180px; max-width: 320px; height: 28px; box-sizing: border-box; }
    .ltp-combo-btn:hover { border-color: var(--ventia-blue); }
    .ltp-combo-btn.has-value { background: #eff6ff; border-color: #93c5fd; color: var(--ventia-blue); }
    .ltp-combo-btn .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ltp-combo-btn .caret { color: var(--ventia-gray-400); margin-left: auto; font-size: 9px; }
    .ltp-combo-pop { position: absolute; z-index: 9000; top: calc(100% + 4px); left: 0;
                     background: white; border: 1px solid var(--ventia-gray-300);
                     border-radius: 6px; box-shadow: 0 6px 18px rgba(15,23,42,0.16);
                     min-width: 280px; max-width: 420px; padding: 6px;
                     display: none; }
    .ltp-combo-pop.is-open { display: block; }
    .ltp-combo-pop input.search { width: 100%; padding: 6px 10px; font-size: 12px;
                                  border: 1px solid var(--ventia-gray-300); border-radius: 4px;
                                  box-sizing: border-box; }
    .ltp-combo-pop .opts { max-height: 280px; overflow-y: auto; margin-top: 4px; }
    .ltp-combo-pop .opt { padding: 6px 9px; font-size: 12px; cursor: pointer;
                          border-radius: 4px; line-height: 1.35;
                          display: flex; gap: 6px; align-items: baseline; }
    .ltp-combo-pop .opt:hover, .ltp-combo-pop .opt.kbd-focus { background: #eff6ff; }
    .ltp-combo-pop .opt.selected { background: var(--ventia-blue); color: white; font-weight: 700; }
    .ltp-combo-pop .opt .sub { font-size: 10px; color: var(--ventia-gray-500); font-family: ui-monospace, monospace; }
    .ltp-combo-pop .opt.selected .sub { color: rgba(255,255,255,0.85); }
    .ltp-combo-pop .empty { padding: 14px; text-align: center; font-size: 11.5px; color: var(--ventia-gray-400); }
    .ltp-combo-hidden { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* asset register: SAP equipment status (Binal, APRA-18947) */
.ar-st { white-space: nowrap; font-size: 12px; }
.ar-st-off { color: #b91c1c; font-weight: 700; }