/* ═══════════════════════════════════════════
   DARKPORT.HELM — Main Stylesheet
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Light Theme (default) ──────────────────────────── */
:root,
:root[data-theme="light"] {
  --sidebar-bg:    #0a0f1a;
  --sidebar-w:     256px;
  --sidebar-w-col: 52px;
  --bg:            #f1f5f9;
  --card-bg:       #ffffff;
  --border:        #e2e8f0;
  --text:          #1e293b;
  --text-muted:    #64748b;
  --text-light:    #94a3b8;
  --topbar-bg:     #ffffff;
  --topbar-border: #e2e8f0;
  --input-bg:      #ffffff;
  --input-border:  #cbd5e1;
  --hover-bg:      #f8fafc;
  --blue:          #2563eb;
  --blue-light:    #3b82f6;
  --blue-faint:    #eff6ff;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:     0 4px 12px rgba(0,0,0,.10);
  --risk-e:        #dc2626; --risk-e-bg: #fef2f2;
  --risk-h:        #d97706; --risk-h-bg: #fffbeb;
  --risk-m:        #ca8a04; --risk-m-bg: #fefce8;
  --risk-l:        #16a34a; --risk-l-bg: #f0fdf4;
  --status-active:    #16a34a; --status-active-bg:    #f0fdf4;
  --status-spare:     #2563eb; --status-spare-bg:     #eff6ff;
  --status-inactive:  #64748b; --status-inactive-bg:  #f8fafc;
  --status-transit:   #d97706; --status-transit-bg:   #fffbeb;
  --badge-draft:      #64748b; --badge-draft-bg:      #f1f5f9;
  --badge-submitted:  #16a34a; --badge-submitted-bg:  #f0fdf4;
  --badge-cancelled:  #dc2626; --badge-cancelled-bg:  #fef2f2;
  --ot:               #9333ea; --ot-bg:               #fdf4ff;
  --badge-it-bg:   var(--blue-faint);
}

/* ── Dark Theme ──────────────────────────────────────── */
:root[data-theme="dark"] {
  --sidebar-bg:    #020817;
  --bg:            #0f172a;
  --card-bg:       #1e293b;
  --border:        #334155;
  --text:          #e2e8f0;
  --text-muted:    #94a3b8;
  --text-light:    #64748b;
  --topbar-bg:     #1e293b;
  --topbar-border: #334155;
  --input-bg:      #0f172a;
  --input-border:  #475569;
  --hover-bg:      #243040;
  --blue:          #3b82f6;
  --blue-light:    #60a5fa;
  --blue-faint:    #172554;
  --badge-it-bg:   #243352;
  --risk-e:        #f87171; --risk-e-bg: #2d1515;
  --risk-h:        #fbbf24; --risk-h-bg: #2d2008;
  --risk-m:        #facc15; --risk-m-bg: #2d2800;
  --risk-l:        #4ade80; --risk-l-bg: #0f2d1a;
  --status-active:    #4ade80; --status-active-bg:    #0f2d1a;
  --status-spare:     #60a5fa; --status-spare-bg:     #1a2d4a;
  --status-inactive:  #94a3b8; --status-inactive-bg:  #1e293b;
  --status-transit:   #fbbf24; --status-transit-bg:   #2d2008;
  --badge-draft:      #94a3b8; --badge-draft-bg:      #1e293b;
  --badge-submitted:  #4ade80; --badge-submitted-bg:  #0f2d1a;
  --badge-cancelled:  #f87171; --badge-cancelled-bg:  #2d1515;
  --ot:               #c084fc; --ot-bg:               #2e1a47;
  --badge-it-bg:   #1e2d45;
}

/* ── Slate Theme — steel blue sidebar, dark neutral bg ───── */
:root[data-theme="slate"] {
  --sidebar-bg:    #1e2d45;
  --bg:            #0f172a;
  --card-bg:       #1e293b;
  --border:        #334155;
  --text:          #f0f4f8;
  --text-muted:    #94a3b8;
  --text-light:    #64748b;
  --topbar-bg:     #1e293b;
  --topbar-border: #334155;
  --input-bg:      #0f172a;
  --input-border:  #475569;
  --hover-bg:      #243040;
  --blue:          #22d3ee;
  --blue-light:    #67e8f9;
  --blue-faint:    #0e3d4d;
  --badge-it-bg:   #1e3a5f;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:     0 4px 12px rgba(0,0,0,.4);
  --risk-e:        #f87171; --risk-e-bg: #2d1515;
  --risk-h:        #fbbf24; --risk-h-bg: #2d2008;
  --risk-m:        #facc15; --risk-m-bg: #2d2800;
  --risk-l:        #4ade80; --risk-l-bg: #0f2d1a;
  --status-active:    #4ade80; --status-active-bg:    #0f2d1a;
  --status-spare:     #22d3ee; --status-spare-bg:     #0e3d4d;
  --status-inactive:  #94a3b8; --status-inactive-bg:  #1e293b;
  --status-transit:   #fbbf24; --status-transit-bg:   #2d2008;
  --badge-draft:      #94a3b8; --badge-draft-bg:      #1e293b;
  --badge-submitted:  #4ade80; --badge-submitted-bg:  #0f2d1a;
  --badge-cancelled:  #f87171; --badge-cancelled-bg:  #2d1515;
  --ot:               #c084fc; --ot-bg:               #2e1a47;
}

/* ── Arctic Theme — deep ice-blue sidebar, dark navy bg ──── */
:root[data-theme="arctic"] {
  --sidebar-bg:    #0e2a3a;
  --bg:            #0f172a;
  --card-bg:       #1e293b;
  --border:        #334155;
  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
  --text-light:    #64748b;
  --topbar-bg:     #1e293b;
  --topbar-border: #334155;
  --input-bg:      #0f172a;
  --input-border:  #475569;
  --hover-bg:      #243040;
  --blue:          #7dd3fc;
  --blue-light:    #bae6fd;
  --blue-faint:    #0c2d45;
  --badge-it-bg:   #0e3a52;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:     0 4px 12px rgba(0,0,0,.4);
  --risk-e:        #f87171; --risk-e-bg: #2d1515;
  --risk-h:        #fbbf24; --risk-h-bg: #2d2008;
  --risk-m:        #facc15; --risk-m-bg: #2d2800;
  --risk-l:        #4ade80; --risk-l-bg: #0f2d1a;
  --status-active:    #4ade80; --status-active-bg:    #0f2d1a;
  --status-spare:     #7dd3fc; --status-spare-bg:     #0c2d45;
  --status-inactive:  #94a3b8; --status-inactive-bg:  #1e293b;
  --status-transit:   #fbbf24; --status-transit-bg:   #2d2008;
  --badge-draft:      #94a3b8; --badge-draft-bg:      #1e293b;
  --badge-submitted:  #4ade80; --badge-submitted-bg:  #0f2d1a;
  --badge-cancelled:  #f87171; --badge-cancelled-bg:  #2d1515;
  --ot:               #c084fc; --ot-bg:               #2e1a47;
}

/* ── Darkport Theme — deepest midnight navy, glowing blue glass, website aesthetic ── */
:root[data-theme="darkport"] {
  --sidebar-bg:    #00040e;
  --bg:            #020b1a;
  --card-bg:       #071428;
  --border:        rgba(96, 165, 250, 0.14);
  --text:          #e8f0fe;
  --text-muted:    #94afd8;
  --text-light:    #4a6a9a;
  --topbar-bg:     #040f22;
  --topbar-border: rgba(96, 165, 250, 0.12);
  --input-bg:      #040f22;
  --input-border:  rgba(96, 165, 250, 0.22);
  --hover-bg:      #0c1e38;
  --blue:          #60a5fa;
  --blue-light:    #93c5fd;
  --blue-faint:    rgba(37, 99, 235, 0.14);
  --blue-pale:     rgba(37, 99, 235, 0.10);
  --badge-it-bg:   rgba(37, 99, 235, 0.18);
  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 3px rgba(0,0,0,.6), 0 0 20px rgba(59,130,246,.06);
  --shadow-md:     0 4px 24px rgba(0,0,0,.7), 0 0 40px rgba(59,130,246,.08);
  --risk-e:        #f87171; --risk-e-bg: #2d1515;
  --risk-h:        #fbbf24; --risk-h-bg: #2d2008;
  --risk-m:        #facc15; --risk-m-bg: #2d2800;
  --risk-l:        #4ade80; --risk-l-bg: #0f2d1a;
  --status-active:    #4ade80; --status-active-bg:    #0f2d1a;
  --status-spare:     #60a5fa; --status-spare-bg:     #0c2440;
  --status-inactive:  #94afd8; --status-inactive-bg:  #071428;
  --status-transit:   #fbbf24; --status-transit-bg:   #2d2008;
  --badge-draft:      #94afd8; --badge-draft-bg:      #071428;
  --badge-submitted:  #4ade80; --badge-submitted-bg:  #0f2d1a;
  --badge-cancelled:  #f87171; --badge-cancelled-bg:  #2d1515;
  --ot:               #c084fc; --ot-bg:               #2e1a47;
}

/* Darkport theme — subtle grid on body */
:root[data-theme="darkport"] body {
  background-image:
    linear-gradient(rgba(96,165,250,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,.022) 1px, transparent 1px);
  background-size: 72px 72px;
  background-color: #020b1a;
}

/* Darkport theme — sidebar deep midnight */
:root[data-theme="darkport"] .sidebar {
  background: linear-gradient(180deg, #00040e 0%, #010818 100%);
  border-right: 1px solid rgba(96,165,250,.10);
}

/* Darkport theme — topbar solid dark */
:root[data-theme="darkport"] .topbar {
  background: #040f22;
  border-bottom-color: rgba(96,165,250,.12);
}

/* Darkport theme — cards with glow border */
:root[data-theme="darkport"] .card {
  border-color: rgba(96, 165, 250, 0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(147,197,253,.03), 0 0 20px rgba(59,130,246,.05);
}
:root[data-theme="darkport"] .card:hover {
  border-color: rgba(96, 165, 250, 0.26);
  box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(147,197,253,.05), 0 0 36px rgba(59,130,246,.09);
}

/* Darkport theme — table thead matches page bg */
:root[data-theme="darkport"] thead th {
  background: #020b1a;
  border-bottom-color: rgba(96,165,250,.12);
}

/* Darkport theme — table rows */
:root[data-theme="darkport"] tbody tr {
  background: #071428;
  border-bottom-color: rgba(96,165,250,.08);
}
:root[data-theme="darkport"] tbody tr:hover {
  background: #0c1e38;
}

/* Darkport theme — nav active glow */
:root[data-theme="darkport"] .nav-link.active {
  color: #93c5fd;
  text-shadow: 0 0 16px rgba(147,197,253,.45);
}
:root[data-theme="darkport"] .nav-link.active::before {
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96,165,250,.7);
}

/* ════════════════════════════════════════════
   DARKPORT THEME — GLOWING NAV SYSTEM
   ════════════════════════════════════════════ */

/* Nav items — hover */
:root[data-theme="darkport"] .nav-item:hover {
  background: rgba(96,165,250,.08);
  color: #bfdbfe;
}

/* Nav items — active (selected page) */
:root[data-theme="darkport"] .nav-item.active {
  background: linear-gradient(90deg, rgba(37,99,235,.30) 0%, rgba(37,99,235,.12) 100%);
  color: #93c5fd;
  box-shadow: inset 3px 0 0 #3b82f6, 0 0 16px rgba(59,130,246,.12);
  text-shadow: 0 0 12px rgba(147,197,253,.4);
  font-weight: 500;
}
:root[data-theme="darkport"] .nav-item.active svg {
  color: #60a5fa;
  filter: drop-shadow(0 0 4px rgba(96,165,250,.6));
}

/* Sub-items inside nav-group — active */
:root[data-theme="darkport"] .nav-group-inner .nav-item.active {
  background: linear-gradient(90deg, rgba(37,99,235,.25) 0%, rgba(37,99,235,.08) 100%);
  color: #93c5fd;
  box-shadow: inset 2px 0 0 #3b82f6, 0 0 12px rgba(59,130,246,.08);
  text-shadow: 0 0 10px rgba(147,197,253,.35);
}
:root[data-theme="darkport"] .nav-group-inner .nav-item.active svg {
  opacity: 1;
  color: #60a5fa;
  filter: drop-shadow(0 0 3px rgba(96,165,250,.5));
}

/* Nav group left rail — blue glow */
:root[data-theme="darkport"] .nav-group-inner {
  border-left: 1px solid rgba(96,165,250,.18);
}

/* Nav dividers — blue tint */
:root[data-theme="darkport"] .nav-divider {
  background: rgba(96,165,250,.10);
}

/* Section toggles — hover */
:root[data-theme="darkport"] .nav-section-toggle:hover {
  background: rgba(96,165,250,.08);
  color: #bfdbfe;
}

/* Section toggles — open (expanded) */
:root[data-theme="darkport"] .nav-section-toggle.open {
  color: #e8f0fe;
}

/* Section toggles — active */
:root[data-theme="darkport"] .nav-section-toggle.active {
  background: linear-gradient(90deg, rgba(37,99,235,.28) 0%, rgba(37,99,235,.10) 100%);
  color: #93c5fd;
  box-shadow: inset 3px 0 0 #3b82f6;
}

/* Per-section icon glow on open/active — match each section's color */
:root[data-theme="darkport"] #section-organisation .nav-section-toggle.open .nav-section-icon,
:root[data-theme="darkport"] #section-organisation .nav-section-toggle.active .nav-section-icon {
  filter: drop-shadow(0 0 5px rgba(251,191,36,.7));
}
:root[data-theme="darkport"] #section-assets .nav-section-toggle.open .nav-section-icon,
:root[data-theme="darkport"] #section-assets .nav-section-toggle.active .nav-section-icon {
  filter: drop-shadow(0 0 5px rgba(196,181,253,.7));
}
:root[data-theme="darkport"] #section-cyber .nav-section-toggle.open .nav-section-icon,
:root[data-theme="darkport"] #section-cyber .nav-section-toggle.active .nav-section-icon {
  filter: drop-shadow(0 0 5px rgba(110,231,183,.7));
}
:root[data-theme="darkport"] #section-ict .nav-section-toggle.open .nav-section-icon,
:root[data-theme="darkport"] #section-ict .nav-section-toggle.active .nav-section-icon {
  filter: drop-shadow(0 0 5px rgba(125,211,252,.7));
}
:root[data-theme="darkport"] #section-automations .nav-section-toggle.open .nav-section-icon,
:root[data-theme="darkport"] #section-automations .nav-section-toggle.active .nav-section-icon {
  filter: drop-shadow(0 0 5px rgba(253,186,116,.7));
}
:root[data-theme="darkport"] #section-tasks .nav-section-toggle.open .nav-section-icon,
:root[data-theme="darkport"] #section-tasks .nav-section-toggle.active .nav-section-icon {
  filter: drop-shadow(0 0 5px rgba(249,168,212,.7));
}

/* Dashboard icon glow */
:root[data-theme="darkport"] #layout .nav-fixed-top .nav-item > svg {
  filter: drop-shadow(0 0 4px rgba(96,165,250,.5));
}
:root[data-theme="darkport"] #layout .nav-fixed-top .nav-item.active > svg {
  filter: drop-shadow(0 0 7px rgba(96,165,250,.8));
}

/* Darkport theme — page title subtle glow */
:root[data-theme="darkport"] .page-title {
  color: #e8f0fe;
  text-shadow: 0 0 30px rgba(96,165,250,.18);
}

/* Darkport theme — login logo */
:root[data-theme="darkport"] .login-logo img:not(.custom-logo) {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(147,197,253,.35));
}

/* ════════════════════════════════════════════
   DARKPORT THEME — WEBSITE-STYLE BUTTONS
   Primary  = solid blue gradient (website .btn-primary)
   Secondary = ghost glass border  (website .btn-ghost)
   Danger   = solid red gradient
   Success  = solid green gradient
   Warning  = solid amber gradient
   ════════════════════════════════════════════ */
:root[data-theme="darkport"] .btn {
  transition: all .22s ease;
  border-radius: 9px;
}

/* Primary — solid blue gradient */
:root[data-theme="darkport"] .btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
:root[data-theme="darkport"] .btn-primary:hover {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 8px 36px rgba(59,130,246,.55), inset 0 1px 0 rgba(255,255,255,.15);
  color: #fff;
  border-color: transparent;
}

/* Secondary — ghost glass */
:root[data-theme="darkport"] .btn-secondary {
  background: rgba(6, 18, 42, 0.65);
  color: #93c5fd;
  border-color: rgba(96,165,250,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
:root[data-theme="darkport"] .btn-secondary:hover {
  background: rgba(59,130,246,.12);
  border-color: rgba(147,197,253,.50);
  color: #bfdbfe;
  transform: translateY(-1px);
}

/* Danger — solid red gradient */
:root[data-theme="darkport"] .btn-danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(220,38,38,.4), inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-theme="darkport"] .btn-danger:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(239,68,68,.5), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
}

/* Success — solid green gradient */
:root[data-theme="darkport"] .btn-success {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(22,163,74,.4), inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-theme="darkport"] .btn-success:hover {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(34,197,94,.5), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
}

/* Warning — solid amber gradient */
:root[data-theme="darkport"] .btn-warning {
  background: linear-gradient(135deg, #d97706, #b45309);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(217,119,6,.4), inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-theme="darkport"] .btn-warning:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
}

/* Teal — solid cyan gradient (+ RA button) */
:root[data-theme="darkport"] .btn-teal {
  background: linear-gradient(135deg, #0e7490, #0c6478);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(14,116,144,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-theme="darkport"] .btn-teal:hover {
  background: linear-gradient(135deg, #06b6d4, #0e7490);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(6,182,212,.5), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
}

/* Navy — solid indigo gradient (PDF/export buttons) */
:root[data-theme="darkport"] .btn-navy {
  background: linear-gradient(135deg, #3730a3, #1e1b6b);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(55,48,163,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
:root[data-theme="darkport"] .btn-navy:hover {
  background: linear-gradient(135deg, #4f46e5, #3730a3);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(79,70,229,.5), inset 0 1px 0 rgba(255,255,255,.12);
  color: #fff;
  border-color: transparent;
}

/* Bulk action bar — override hardcoded light inline styles */
:root[data-theme="darkport"] #bulkBar {
  background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(29,78,216,.10)) !important;
  border: 1px solid rgba(96,165,250,.30) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 24px rgba(59,130,246,.08), inset 0 1px 0 rgba(147,197,253,.06) !important;
  color: #e8f0fe !important;
}
:root[data-theme="darkport"] #bulkBar span,
:root[data-theme="darkport"] #bulkBar label,
:root[data-theme="darkport"] #bulkBar strong {
  color: #93c5fd !important;
}

/* Bulk confirm modal — override hardcoded white card */
:root[data-theme="darkport"] #bulkModal > div {
  background: #071428 !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 40px rgba(59,130,246,.10) !important;
}
:root[data-theme="darkport"] #modalTitle {
  color: #e8f0fe !important;
}
:root[data-theme="darkport"] #modalBody {
  color: #94afd8 !important;
}

/* ── Comment editor & markdown toolbar ── */
:root[data-theme="darkport"] .md-toolbar {
  background: #040f22 !important;
  border-color: rgba(96,165,250,.20) !important;
}
:root[data-theme="darkport"] .md-toolbar button {
  color: #94afd8 !important;
  background: none !important;
  border-color: transparent !important;
}
:root[data-theme="darkport"] .md-toolbar button:hover {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(96,165,250,.25) !important;
  color: #e8f0fe !important;
}
:root[data-theme="darkport"] .md-toolbar .md-sep {
  background: rgba(96,165,250,.15) !important;
}
:root[data-theme="darkport"] #comment-editor {
  background: #020b1a !important;
  color: #e8f0fe !important;
  border-color: rgba(96,165,250,.20) !important;
  border-top-color: rgba(96,165,250,.20) !important;
}
:root[data-theme="darkport"] #comment-editor:focus {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 2px rgba(96,165,250,.20) !important;
}
/* Inline edit textarea (per-comment, uses dynamic IDs so target by attribute) */
:root[data-theme="darkport"] textarea[id^="edit-ta-"] {
  background: #020b1a !important;
  color: #e8f0fe !important;
  border-color: rgba(96,165,250,.20) !important;
}
/* Markdown rendered body */
:root[data-theme="darkport"] .markdown-body {
  color: var(--text) !important;
}
:root[data-theme="darkport"] .markdown-body code,
:root[data-theme="darkport"] .markdown-body pre {
  background: rgba(96,165,250,.07) !important;
  color: #93c5fd !important;
}
:root[data-theme="darkport"] .markdown-body blockquote {
  border-left-color: rgba(96,165,250,.30) !important;
  color: #94afd8 !important;
}
:root[data-theme="darkport"] .markdown-body hr {
  border-top-color: rgba(96,165,250,.15) !important;
}

/* Purple — solid violet gradient (+Task inline-styled buttons) */
:root[data-theme="darkport"] .btn[style*="139,92,246"],
:root[data-theme="darkport"] .btn[style*="7c3aed"] {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 20px rgba(124,58,237,.45), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
:root[data-theme="darkport"] .btn[style*="139,92,246"]:hover,
:root[data-theme="darkport"] .btn[style*="7c3aed"]:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(139,92,246,.55), inset 0 1px 0 rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ── Dusk Theme — aubergine sidebar, dark navy bg ─────────── */
:root[data-theme="dusk"] {
  --sidebar-bg:    #2d1f3d;
  --bg:            #0f172a;
  --card-bg:       #1e293b;
  --border:        #334155;
  --text:          #f1f5f9;
  --text-muted:    #94a3b8;
  --text-light:    #64748b;
  --topbar-bg:     #1e293b;
  --topbar-border: #334155;
  --input-bg:      #0f172a;
  --input-border:  #475569;
  --hover-bg:      #243040;
  --blue:          #f472b6;
  --blue-light:    #f9a8d4;
  --blue-faint:    #4a1032;
  --badge-it-bg:   #3d1a35;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md:     0 4px 12px rgba(0,0,0,.4);
  --risk-e:        #f87171; --risk-e-bg: #2d1515;
  --risk-h:        #fbbf24; --risk-h-bg: #2d2008;
  --risk-m:        #facc15; --risk-m-bg: #2d2800;
  --risk-l:        #4ade80; --risk-l-bg: #0f2d1a;
  --status-active:    #4ade80; --status-active-bg:    #0f2d1a;
  --status-spare:     #f472b6; --status-spare-bg:     #4a1032;
  --status-inactive:  #94a3b8; --status-inactive-bg:  #1e293b;
  --status-transit:   #fbbf24; --status-transit-bg:   #2d2008;
  --badge-draft:      #94a3b8; --badge-draft-bg:      #1e293b;
  --badge-submitted:  #4ade80; --badge-submitted-bg:  #0f2d1a;
  --badge-cancelled:  #f87171; --badge-cancelled-bg:  #2d1515;
  --ot:               #c084fc; --ot-bg:               #2e1a47;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  transition: background .2s, color .2s;
}

/* ── Layout ──────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  overflow: hidden;
  transition: width .22s ease;
}
.sidebar.collapsed { width: var(--sidebar-w-col); }

/* Hide all text labels */
.sidebar.collapsed .nav-label,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-section-label { display: none; }

/* Hide brand logo when collapsed — toggle takes its place */
.sidebar.collapsed .brand-link { display: none; }

/* Toggle button: centered, always visible */
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 16px 0 14px; }
.sidebar.collapsed .sidebar-toggle { margin: 0 auto; }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Nav padding when collapsed */
.sidebar.collapsed .nav { padding: 4px 4px 8px; }

/* Top-level nav items */
.sidebar.collapsed .nav-item { justify-content: center; padding: 9px 0; }
.sidebar.collapsed .nav-item svg { margin: 0; }

/* Section toggles: icon only */
.sidebar.collapsed .nav-section { padding-top: 0; }

/* Footer */
.sidebar.collapsed .sidebar-footer { padding: 8px 0 14px; }
.sidebar.collapsed .sidebar-footer .nav-item { padding: 9px 0; }

/* Sidebar header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
}
.brand-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
/* Custom uploaded logos — no colour filter, sized to fit the nav */
.brand-logo-custom {
  max-height: 36px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-text { display: flex; align-items: baseline; gap: 1px; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.3px; }
.brand-sub  { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.45); }
.sidebar-toggle {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: rgba(255,255,255,.35); flex-shrink: 0; border-radius: 5px;
  transition: color .15s, background .15s;
  display: flex; align-items: center;
}
.sidebar-toggle:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); }
.sidebar-toggle svg { width: 16px; height: 16px; transition: transform .22s ease; }

/* Nav */
.nav-fixed-top { padding: 8px 10px 0; flex-shrink: 0; }
.sidebar.collapsed .nav-fixed-top { padding: 8px 4px 0; }
.nav { flex: 1; padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.nav::-webkit-scrollbar { width: 3px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
[data-theme="light"] .nav::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); }
[data-theme="light"] .nav::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }
.nav-section { display: flex; flex-direction: column; gap: 1px; padding-top: 0; }
.nav-section-label {
  font-size: 10px; font-weight: 600; color: rgba(255,255,255,.3);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 10px 8px 4px; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px;
  border-radius: 7px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 13px; font-weight: 450;
  transition: background .12s, color .12s;
  white-space: nowrap; overflow: hidden;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.nav-item.active { background: rgba(59,130,246,.18); color: #60a5fa; }

.sidebar-footer {
  padding: 8px 10px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.admin-link { color: rgba(255,255,255,.3) !important; }
.admin-link:hover { color: rgba(255,255,255,.6) !important; }

/* ── Main content ────────────────────────────────────── */
.content {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .22s ease;
}
.content.sidebar-collapsed { margin-left: var(--sidebar-w-col); }

/* ── Topbar ──────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  height: 58px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  position: sticky; top: 0; z-index: 100;
  transition: background .2s, border-color .2s;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.page-title { font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; }

/* Icon button (theme toggle) */
.icon-btn {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px; cursor: pointer;
  color: var(--text-muted); display: flex; align-items: center;
  transition: border-color .15s, color .15s, background .15s;
}
.icon-btn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-faint); }
.icon-btn svg { width: 16px; height: 16px; }

/* Theme icon visibility */
:root[data-theme="light"] .icon-moon { display: block; }
:root[data-theme="light"] .icon-sun  { display: none; }
:root[data-theme="dark"]  .icon-sun  { display: block; }
:root[data-theme="dark"]  .icon-moon { display: none; }

/* User menu */
.user-menu { position: relative; }
.user-menu-button {
  display: flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--text); transition: border-color .15s, background .15s;
}
.user-menu-button:hover { border-color: var(--blue); background: var(--blue-faint); }
.chevron { font-size: 10px; color: var(--text-muted); }
.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  min-width: 180px; z-index: 500; overflow: hidden;
}
.user-dropdown.open { display: block; }
.user-dropdown-link {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px;
  color: var(--text); text-decoration: none;
  transition: background .12s;
}
.user-dropdown-link:hover { background: var(--hover-bg); }
.user-dropdown-profile {
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.logout-button {
  width: 100%; text-align: left; padding: 9px 14px; font-size: 13px;
  background: none; border: none;
  color: #ef4444; cursor: pointer; transition: background .12s;
}
.logout-button:hover { background: #fef2f2; }

/* ── Profile Page ─────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.profile-link-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: 13px;
  transition: background .12s; margin-bottom: 4px;
}
.profile-link-row:hover { background: var(--hover-bg); }
.profile-link-row svg { flex-shrink: 0; color: var(--text-muted); }
.profile-link-row-label { flex: 1; font-weight: 500; }
.profile-link-row-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.profile-link-row-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--blue-faint); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
}

/* Theme picker (profile page variant) */
.theme-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.profile-theme-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.profile-theme-item:hover { border-color: var(--blue); background: var(--blue-faint); }
.profile-theme-item.active {
  border-color: var(--blue);
  background: var(--blue-faint);
  box-shadow: 0 0 0 2px var(--blue), inset 0 0 0 1px rgba(255,255,255,.04);
  position: relative;
}
.profile-theme-item.active::after {
  content: '✓';
  position: absolute; top: 6px; right: 8px;
  font-size: 10px; font-weight: 700;
  color: var(--blue);
  line-height: 1;
}
.profile-theme-swatch {
  display: flex; gap: 3px; flex-shrink: 0;
}
.profile-theme-swatch span {
  width: 10px; height: 20px; border-radius: 3px;
}
.profile-theme-name { font-size: 12px; font-weight: 600; color: var(--text); }
.profile-theme-desc { font-size: 10px; color: var(--text-muted); }

/* Nav toggles */
.nav-toggle-list { display: flex; flex-direction: column; gap: 6px; }
.nav-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); transition: border-color .15s;
}
.nav-toggle-row:hover { border-color: var(--blue-light); }
.nav-toggle-left { display: flex; align-items: center; gap: 10px; }
.nav-toggle-left svg { color: var(--text-muted); flex-shrink: 0; }
.nav-toggle-label { font-size: 13px; font-weight: 500; color: var(--text); }

/* Toggle switch */
.toggle-switch {
  position: relative; width: 36px; height: 20px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; border-radius: 20px;
  background: var(--border); cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

.profile-user-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue-faint); border: 2px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--blue);
  flex-shrink: 0;
}
.profile-user-info { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.profile-user-name { font-size: 18px; font-weight: 700; color: var(--text); }
.profile-user-role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Page body ───────────────────────────────────────── */
.page-body { padding: 24px 28px; flex: 1; }

/* ── Messages ────────────────────────────────────────── */
.messages { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.message {
  padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px;
  border-left: 3px solid;
}
.message.success, .message.messages-success {
  background: var(--risk-l-bg); color: var(--risk-l); border-color: var(--risk-l);
}
.message.error, .message.messages-error {
  background: var(--risk-e-bg); color: var(--risk-e); border-color: var(--risk-e);
}
.message.warning, .message.messages-warning {
  background: var(--risk-h-bg); color: var(--risk-h); border-color: var(--risk-h);
}
.message.info, .message.messages-info {
  background: var(--blue-faint); color: var(--blue); border-color: var(--blue);
}

/* ── Card ────────────────────────────────────────────── */
.card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
  transition: background .2s, border-color .2s;
  margin-bottom: 20px;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.card-title { font-size: 14px; font-weight: 600; color: var(--text); }

/* ── Page header ─────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.page-header h2 { font-size: 18px; font-weight: 700; color: var(--text); }
.page-header p  { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* ── Button alpha tokens: light default, auto-boost on dark themes ── */
:root,
:root[data-theme="light"] {
  --btn-p-bg:   rgba(59,130,246,.11);   --btn-p-bd:   rgba(59,130,246,.26);
  --btn-p-hbg:  rgba(59,130,246,.20);   --btn-p-hbd:  rgba(59,130,246,.46);
  --btn-p-c:    #2563eb;                --btn-p-hc:   #1d4ed8;

  --btn-s-bg:   rgba(100,116,139,.09);  --btn-s-bd:   rgba(100,116,139,.22);
  --btn-s-hbg:  rgba(59,130,246,.11);   --btn-s-hbd:  rgba(59,130,246,.30);
  --btn-s-c:    var(--text);            --btn-s-hc:   #2563eb;

  --btn-d-bg:   rgba(239,68,68,.11);    --btn-d-bd:   rgba(239,68,68,.26);
  --btn-d-hbg:  rgba(239,68,68,.20);    --btn-d-hbd:  rgba(239,68,68,.46);
  --btn-d-c:    #dc2626;                --btn-d-hc:   #b91c1c;

  --btn-ok-bg:  rgba(34,197,94,.11);    --btn-ok-bd:  rgba(34,197,94,.26);
  --btn-ok-hbg: rgba(34,197,94,.20);    --btn-ok-hbd: rgba(34,197,94,.46);
  --btn-ok-c:   #16a34a;                --btn-ok-hc:  #15803d;

  --btn-w-bg:   rgba(245,158,11,.11);   --btn-w-bd:   rgba(245,158,11,.26);
  --btn-w-hbg:  rgba(245,158,11,.20);   --btn-w-hbd:  rgba(245,158,11,.46);
  --btn-w-c:    #d97706;                --btn-w-hc:   #b45309;

  --btn-t-bg:   rgba(14,116,144,.11);   --btn-t-bd:   rgba(14,116,144,.26);
  --btn-t-hbg:  rgba(14,116,144,.20);   --btn-t-hbd:  rgba(14,116,144,.46);
  --btn-t-c:    #0e7490;                --btn-t-hc:   #0c6478;

  --btn-n-bg:   rgba(30,58,138,.11);    --btn-n-bd:   rgba(30,58,138,.26);
  --btn-n-hbg:  rgba(30,58,138,.20);    --btn-n-hbd:  rgba(30,58,138,.46);
  --btn-n-c:    #1e3a8a;                --btn-n-hc:   #1e40af;
}

/* Dark themes — higher opacity so buttons read clearly on dark surfaces */
:root[data-theme="dark"],
:root[data-theme="slate"],
:root[data-theme="arctic"],
:root[data-theme="dusk"],
:root[data-theme="darkport"] {
  --btn-p-bg:   rgba(59,130,246,.20);   --btn-p-bd:   rgba(59,130,246,.50);
  --btn-p-hbg:  rgba(59,130,246,.32);   --btn-p-hbd:  rgba(59,130,246,.72);
  --btn-p-c:    #93c5fd;                --btn-p-hc:   #bfdbfe;

  --btn-s-bg:   rgba(148,163,184,.14);  --btn-s-bd:   rgba(148,163,184,.35);
  --btn-s-hbg:  rgba(59,130,246,.20);   --btn-s-hbd:  rgba(59,130,246,.50);
  --btn-s-c:    var(--text);            --btn-s-hc:   #93c5fd;

  --btn-d-bg:   rgba(239,68,68,.20);    --btn-d-bd:   rgba(239,68,68,.50);
  --btn-d-hbg:  rgba(239,68,68,.32);    --btn-d-hbd:  rgba(239,68,68,.72);
  --btn-d-c:    #fca5a5;                --btn-d-hc:   #fecaca;

  --btn-ok-bg:  rgba(34,197,94,.18);    --btn-ok-bd:  rgba(34,197,94,.45);
  --btn-ok-hbg: rgba(34,197,94,.30);    --btn-ok-hbd: rgba(34,197,94,.68);
  --btn-ok-c:   #86efac;                --btn-ok-hc:  #bbf7d0;

  --btn-w-bg:   rgba(245,158,11,.18);   --btn-w-bd:   rgba(245,158,11,.45);
  --btn-w-hbg:  rgba(245,158,11,.30);   --btn-w-hbd:  rgba(245,158,11,.68);
  --btn-w-c:    #fcd34d;                --btn-w-hc:   #fde68a;

  --btn-t-bg:   rgba(14,116,144,.20);   --btn-t-bd:   rgba(14,116,144,.50);
  --btn-t-hbg:  rgba(14,116,144,.32);   --btn-t-hbd:  rgba(14,116,144,.72);
  --btn-t-c:    #67e8f9;                --btn-t-hc:   #a5f3fc;

  --btn-n-bg:   rgba(30,58,138,.22);    --btn-n-bd:   rgba(30,58,138,.52);
  --btn-n-hbg:  rgba(30,58,138,.36);    --btn-n-hbd:  rgba(30,58,138,.74);
  --btn-n-c:    #93c5fd;                --btn-n-hc:   #bfdbfe;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: all .18s ease; white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn svg { width: 15px; height: 15px; }

.btn-primary   { background: var(--btn-p-bg);  color: var(--btn-p-c);  border-color: var(--btn-p-bd);  }
.btn-primary:hover { background: var(--btn-p-hbg); color: var(--btn-p-hc); border-color: var(--btn-p-hbd); }

.btn-secondary { background: var(--btn-s-bg);  color: var(--btn-s-c);  border-color: var(--btn-s-bd);  }
.btn-secondary:hover { background: var(--btn-s-hbg); color: var(--btn-s-hc); border-color: var(--btn-s-hbd); }

.btn-danger    { background: var(--btn-d-bg);  color: var(--btn-d-c);  border-color: var(--btn-d-bd);  }
.btn-danger:hover  { background: var(--btn-d-hbg); color: var(--btn-d-hc); border-color: var(--btn-d-hbd); }

.btn-success   { background: var(--btn-ok-bg); color: var(--btn-ok-c); border-color: var(--btn-ok-bd); }
.btn-success:hover { background: var(--btn-ok-hbg); color: var(--btn-ok-hc); border-color: var(--btn-ok-hbd); }

.btn-warning   { background: var(--btn-w-bg);  color: var(--btn-w-c);  border-color: var(--btn-w-bd);  }
.btn-warning:hover { background: var(--btn-w-hbg); color: var(--btn-w-hc); border-color: var(--btn-w-hbd); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Table ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--bg); padding: 10px 14px;
  text-align: left; font-weight: 600; color: var(--text-muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background .1s; background: var(--card-bg); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--hover-bg); }
tbody td { padding: 11px 14px; color: var(--text); vertical-align: middle; }
.td-actions { display: flex; gap: 6px; }

/* ── Forms ───────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.form-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.form-group label .required { color: #ef4444; margin-left: 2px; }
.form-control {
  background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 13px; color: var(--text); width: 100%;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.form-control:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.form-control::placeholder { color: var(--text-light); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 72px; }
.form-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.form-check-input {
  width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); flex-shrink: 0;
}
.form-help { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.form-error { font-size: 11px; color: #ef4444; margin-top: 3px; }
.form-section { margin-bottom: 24px; }
.form-section-title {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.errorlist { list-style: none; color: #ef4444; font-size: 12px; margin-top: 4px; }

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.badge-active    { background: var(--status-active-bg);   color: var(--status-active); }
.badge-spare     { background: var(--status-spare-bg);    color: var(--status-spare); }
.badge-inactive  { background: var(--status-inactive-bg); color: var(--status-inactive); }
.badge-in_transit{ background: var(--status-transit-bg);  color: var(--status-transit); }
.badge-extreme, .badge-E { background: var(--risk-e-bg); color: var(--risk-e); }
.badge-high,    .badge-H { background: var(--risk-h-bg); color: var(--risk-h); }
.badge-medium,  .badge-M { background: var(--risk-m-bg); color: var(--risk-m); }
.badge-low,     .badge-L { background: var(--risk-l-bg); color: var(--risk-l); }
.badge-Critical { background: var(--risk-e-bg); color: var(--risk-e); }
.badge-High     { background: var(--risk-h-bg); color: var(--risk-h); }
.badge-Medium   { background: var(--risk-m-bg); color: var(--risk-m); }
.badge-Low      { background: var(--risk-l-bg); color: var(--risk-l); }
.badge-draft     { background: var(--badge-draft-bg);     color: var(--badge-draft); }
.badge-submitted { background: var(--badge-submitted-bg); color: var(--badge-submitted); }
.badge-cancelled { background: var(--badge-cancelled-bg); color: var(--badge-cancelled); }
.badge-IT { background: var(--badge-it-bg); color: var(--blue); }
.badge-OT { background: var(--ot-bg, #fdf4ff); color: var(--ot, #9333ea); }

/* info-card: replaces hardcoded #f0f9ff info banners */
.info-card { background: var(--blue-faint); border-color: var(--blue-light); }

/* ── Stats grid ──────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.stat-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--text); margin-top: 4px; line-height: 1; }
.stat-sub   { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ── Detail page ─────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }

/* Darkport — more generous spacing between detail panels */
:root[data-theme="darkport"] .detail-grid { gap: 32px; }
:root[data-theme="darkport"] .detail-section { padding: 24px; }
.detail-section-title {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.detail-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-size: 12px; color: var(--text-muted); min-width: 160px; flex-shrink: 0; }
.detail-value { font-size: 13px; color: var(--text); font-weight: 500; }

/* ── Progress bar ────────────────────────────────────── */
.progress { background: var(--border); border-radius: 99px; height: 6px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 99px; background: var(--blue); transition: width .3s; }
.progress-bar.danger { background: #ef4444; }
.progress-bar.success { background: #16a34a; }

/* ── Formset (template fields) ───────────────────────── */
.formset-row {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px;
  position: relative;
}
.formset-row.to-delete { opacity: .4; }
.formset-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.formset-num {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.formset-delete { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.formset-delete:hover { background: var(--risk-e-bg); }
.formset-add {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px dashed var(--border); background: none;
  font-size: 13px; color: var(--text-muted); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.formset-add:hover { border-color: var(--blue); color: var(--blue); }

/* ── Checklist / submission fill ─────────────────────── */
.field-block {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 10px;
}
.field-block label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; display: block; }
.field-block .required-star { color: #ef4444; }
.field-block .help { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.checklist-option { display: flex; gap: 8px; }
.checklist-option label { font-weight: 400 !important; }

/* Operation siblings bar */
.siblings-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 12px 16px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.sibling-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: 12px;
  text-decoration: none; border: 1px solid var(--border);
  color: var(--text-muted); transition: all .12s;
}
.sibling-pill:hover { border-color: var(--blue); color: var(--blue); }
.sibling-pill.current { border-color: var(--blue); background: var(--blue-faint); color: var(--blue); font-weight: 600; }
.sibling-pill.done { border-color: #16a34a; color: #16a34a; background: var(--risk-l-bg); }

/* ── Empty state ─────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state svg { width: 48px; height: 48px; margin: 0 auto 12px; display: block; opacity: .3; }
.empty-state h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p  { font-size: 13px; }

/* ── Tabs ────────────────────────────────────────────── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab-link {
  padding: 9px 18px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  text-decoration: none; border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--blue); border-bottom-color: var(--blue); }

/* ── Security settings ───────────────────────────────── */
.security-card {
  max-width: 540px;
}
.security-status {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); margin-bottom: 16px;
}
.security-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.security-dot.on  { background: #16a34a; box-shadow: 0 0 0 3px #bbf7d0; }
.security-dot.off { background: #94a3b8; }

/* ── Login page ──────────────────────────────────────── */
.login-page {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; background: var(--bg); padding: 24px;
}
.login-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 40px; width: 100%; max-width: 380px;
  box-shadow: var(--shadow-md);
}
.login-logo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.login-logo img { max-height: 64px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.login-logo-name { font-size: 18px; font-weight: 700; color: var(--text); }
.login-logo-sub  { font-size: 12px; color: var(--text-muted); }
.login-card h2   { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 20px; text-align: center; }

/* Login dark/light brand */
:root[data-theme="dark"] .login-logo img:not(.custom-logo) { filter: brightness(0) invert(1); }

/* ── 2FA pages ───────────────────────────────────────── */
.twofa-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.twofa-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 36px; max-width: 400px; width: 100%; text-align: center; }
.twofa-card h2 { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.twofa-card p  { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.qr-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.qr-wrap img { border-radius: var(--radius-sm); border: 4px solid #fff; }

/* ── Confirm delete ──────────────────────────────────── */
.confirm-delete-card { max-width: 480px; margin: 0 auto; text-align: center; }
.confirm-delete-card h2 { color: #ef4444; margin-bottom: 8px; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .form-grid   { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ── Legacy / compat aliases ─────────────────────────────────────────────── */
/* These keep existing templates working with the new CSS system */

.tab-btn {
  padding: 9px 18px; font-size: 13px; font-weight: 500; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

.status-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.status-badge-draft     { background: var(--badge-draft-bg);     color: var(--badge-draft); }
.status-badge-submitted { background: var(--badge-submitted-bg); color: var(--badge-submitted); }
.status-badge-approved  { background: var(--status-active-bg);   color: var(--status-active); }
.status-badge-archived  { background: var(--status-inactive-bg); color: var(--status-inactive); }

.detail-item {
  display: flex; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.detail-item:last-child { border-bottom: none; }

.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb-sep { color: var(--border); }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.mt-1 { margin-top: 4px; }

/* ── Global link colour ──────────────────────────────────────────
   Prevents browser-default blue from bleeding through in dark mode.
   Buttons and nav items override this with their own colour rules.  */
a { color: var(--blue-light); text-decoration: none; }
a:hover { color: var(--blue); text-decoration: underline; }

/* Breadcrumb links keep muted colour */
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); text-decoration: none; }

/* Buttons must never inherit link underline */
.btn, .btn:hover { text-decoration: none; opacity: 1; }

/* Nav items */
.nav-item, .nav-item:hover { text-decoration: none; opacity: 1; }

.btn-xs { padding: 4px 8px; font-size: 11px; }

/* navy-mid fallback for legacy templates */
:root { --navy-mid: #1b3a5c; }

/* ═══════════════════════════════════════════════════════════════
   COMPATIBILITY PATCH — fixes for original templates
   ═══════════════════════════════════════════════════════════════ */

/* form-card — used by company_form, site_form, asset_form etc. */
.form-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* full-width inside form-grid */
.form-grid .full-width,
.form-group.full-width { grid-column: 1 / -1; }

/* help-text (old name) */
.help-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* btn-teal — used in Excel export buttons and RA shortcut */
.btn-teal { background: var(--btn-t-bg); color: var(--btn-t-c); border-color: var(--btn-t-bd); }
.btn-teal:hover { background: var(--btn-t-hbg); color: var(--btn-t-hc); border-color: var(--btn-t-hbd); }

/* filter-bar — asset list / location list filters */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.filter-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* Any raw select or input inside filter-bar / filter-group gets styled */
.filter-bar select,
.filter-bar input[type="text"],
.filter-group select,
.filter-group input[type="text"] {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s;
}
.filter-bar select:focus,
.filter-bar input:focus,
.filter-group select:focus,
.filter-group input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* Global: any bare select / input that missed .form-control */
select:not([class]),
input[type="text"]:not([class]),
input[type="number"]:not([class]),
input[type="email"]:not([class]),
input[type="date"]:not([class]),
input[type="password"]:not([class]),
textarea:not([class]) {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}

/* stat-grid / stat — original dashboard classes */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat .stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stat .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
  line-height: 1;
}

/* dashboard-charts */
.dashboard-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.chart-wrap { position: relative; height: 220px; }

/* detail-grid used in site_detail, assessment_detail etc. */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.detail-grid .detail-item,
.detail-item {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.detail-grid .detail-item:last-child,
.detail-item:last-child { border-bottom: none; }
.detail-grid .full-width { grid-column: 1 / -1; }

/* status_badge_class tag output */
.status-badge-draft     { background: var(--badge-draft-bg);     color: var(--badge-draft); }
.status-badge-submitted { background: var(--badge-submitted-bg); color: var(--badge-submitted); }
.status-badge-approved  { background: var(--status-active-bg);   color: var(--status-active); }
.status-badge-archived  { background: var(--status-inactive-bg); color: var(--status-inactive); }
.status-draft     { background: var(--badge-draft-bg);     color: var(--badge-draft); }

/* text-muted / text-sm utilities */
.text-muted { color: var(--text-muted); }
.text-sm    { font-size: 12px; }

/* Table inside card — remove double padding */
.card .table-wrap { margin: -20px; margin-top: 0; }

/* form-card inputs — catch any widget rendered without explicit .form-control */
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.form-card select,
.form-card textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}

/* assessment_form — field groups */
.field-group {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
}
.field-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  display: block;
  margin-bottom: 5px;
}
.field-group input,
.field-group select,
.field-group textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}

/* section-card used in assessment_form */
.section-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}
.section-card h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* score-display used in assessment */
.score-display {
  background: var(--blue-faint);
  border: 1px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  text-align: center;
  margin-bottom: 16px;
}
.score-display .score-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
}

/* btn-navy — used in PDF export buttons */
.btn-navy { background: var(--btn-n-bg); color: var(--btn-n-c); border-color: var(--btn-n-bd); }
.btn-navy:hover { background: var(--btn-n-hbg); color: var(--btn-n-hc); border-color: var(--btn-n-hbd); }

/* table-wrap when not inside .card — add card styling */
.table-wrap:not(.card .table-wrap) {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.table-wrap > h3 {
  font-size: 13px; font-weight: 600; color: var(--text);
  padding: 14px 16px 0; margin: 0; letter-spacing: .02em;
}

/* empty-state when not inside .card */
.empty-state:not(.card .empty-state) {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   ASSESSMENT FORM — layout, score panel, section headers
   ═══════════════════════════════════════════════════════════════ */

/* Two-column layout: form on left, score panel on right */
.assessment-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .assessment-layout { grid-template-columns: 1fr; }
}

/* Section header inside form-card */
.form-section-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Space between form-cards */
.form-card + .form-card { margin-top: 16px; }
.form-card { margin-bottom: 0; }
.form-card + .flex { margin-top: 16px; }

/* Score panel (right sidebar) */
.score-panel {
  background: var(--sidebar-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  color: #e2e8f0;
  position: sticky;
  top: 16px;
}
.score-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  margin-bottom: 12px;
}
.score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.score-row:last-child { border-bottom: none; }
.score-val {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

/* Score badges inside the panel */
.score-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}
.score-badge.badge-extreme, .score-badge.none { background: var(--badge-draft-bg); color: var(--badge-draft); }
.score-badge.badge-high    { background: var(--risk-h-bg); color: var(--risk-h); }
.score-badge.badge-medium  { background: var(--risk-m-bg); color: var(--risk-m); }
.score-badge.badge-low     { background: var(--risk-l-bg); color: var(--risk-l); }

/* Computed field display */
.computed-display {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-muted);
  min-height: 38px;
}
.computed-display.has-value {
  color: var(--text);
  font-weight: 600;
}

/* Score range label on field */
.score-range {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Scored group — wrapper for scored fields */
.scored-group { position: relative; }

/* ═══════════════════════════════════════════════════════════════
   COLLAPSIBLE NAV SECTIONS
   ═══════════════════════════════════════════════════════════════ */

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 2px 10px;
  flex-shrink: 0;
}

.nav-section-toggle {
  display: flex; align-items: center;
  width: 100%; padding: 5px 10px;
  background: none; border: none; cursor: pointer;
  border-radius: 7px;
  color: rgba(255,255,255,.55);
  font-size: 13px; font-weight: 450;
  transition: background .12s, color .12s;
  white-space: nowrap; overflow: hidden;
  gap: 9px;
}
.nav-section-toggle:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.nav-section-toggle.open { color: rgba(255,255,255,.85); font-weight: 500; }
.nav-section-toggle.active { background: rgba(59,130,246,.18); color: #60a5fa; }
.nav-section-label {
  white-space: nowrap; user-select: none;
  font-size: inherit; font-weight: inherit; color: inherit;
  letter-spacing: normal; text-transform: none;
  flex: 1; text-align: left;
}
.nav-chevron {
  width: 14px; height: 14px; flex-shrink: 0;
  color: rgba(255,255,255,.3);
  transition: transform .2s ease, color .12s;
  margin-left: auto;
}
.nav-section-toggle:hover .nav-chevron { color: rgba(255,255,255,.6); }
.nav-section-toggle.open .nav-chevron { transform: rotate(90deg); }
.nav-section-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Per-section icon colours */
/* Dashboard */
#layout .nav-fixed-top .nav-item > svg { color: #60a5fa; }

/* Organisation - amber */
#section-organisation .nav-section-icon { color: #f59e0b; }
#section-organisation .nav-section-toggle:hover .nav-section-icon,
#section-organisation .nav-section-toggle.open .nav-section-icon { color: #fbbf24; }

/* Asset Inventory - violet */
#section-assets .nav-section-icon { color: #a78bfa; }
#section-assets .nav-section-toggle:hover .nav-section-icon,
#section-assets .nav-section-toggle.open .nav-section-icon { color: #c4b5fd; }

/* Cyber Security Records - emerald */
#section-cyber .nav-section-icon { color: #34d399; }
#section-cyber .nav-section-toggle:hover .nav-section-icon,
#section-cyber .nav-section-toggle.open .nav-section-icon { color: #6ee7b7; }

/* ICT Records - sky */
#section-ict .nav-section-icon { color: #38bdf8; }
#section-ict .nav-section-toggle:hover .nav-section-icon,
#section-ict .nav-section-toggle.open .nav-section-icon { color: #7dd3fc; }

/* Automations - orange */
#section-automations .nav-section-icon { color: #fb923c; }
#section-automations .nav-section-toggle:hover .nav-section-icon,
#section-automations .nav-section-toggle.open .nav-section-icon { color: #fdba74; }

/* Task Management - rose */
#section-tasks .nav-section-icon { color: #f472b6; }
#section-tasks .nav-section-toggle:hover .nav-section-icon,
#section-tasks .nav-section-toggle.open .nav-section-icon { color: #f9a8d4; }



.nav-group {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
.nav-group.open { grid-template-rows: 1fr; }
.nav-group-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,.1);
  margin-top: 2px;
  margin-bottom: 2px;
}
.nav-group-inner .nav-item {
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
}
.nav-group-inner .nav-item svg {
  width: 14px;
  height: 14px;
  opacity: .75;
}
.nav-group-inner .nav-item.active {
  color: #60a5fa;
}
.nav-group-inner .nav-item.active svg {
  opacity: 1;
}

.sidebar.collapsed .nav-section-toggle { justify-content: center; padding: 9px 0; gap: 0; }
.sidebar.collapsed .nav-section-label { display: none; }
.sidebar.collapsed .nav-chevron { display: none; }
.sidebar.collapsed .nav-section-icon { margin: 0; }
/* Hide sub-items entirely when collapsed */
.sidebar.collapsed .nav-group { display: none; }
.sidebar.collapsed .nav-divider { margin: 6px 4px; }


/* ═══════════════════════════════════════════════════════════════
   TASK MANAGEMENT
   ═══════════════════════════════════════════════════════════════ */

.task-summary-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.task-stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 20px;
  text-decoration: none; transition: border-color .15s, background .15s;
  min-width: 100px;
}
.task-stat:hover, .task-stat.active {
  border-color: #3b82f6; background: rgba(59,130,246,.07);
}
.task-stat-count { font-size: 22px; font-weight: 700; line-height: 1; }
.task-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

.task-filter-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.filter-input, .filter-select {
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 6px 10px;
  font-size: 13px;
}
.filter-input { width: 200px; }

.task-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.task-badge-cat { background: rgba(148,163,184,.15); color: var(--text-muted); }

.task-detail-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .task-detail-layout { grid-template-columns: 1fr; }
}

.card-section-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.task-meta-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-muted);
}

.task-comment {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--input-bg);
}
.task-comment-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.task-comment-author { font-weight: 600; font-size: 13px; color: var(--text); }
.task-comment-body   { font-size: 13px; color: var(--text); line-height: 1.6; }
.task-comment-body p { margin: 0 0 4px; }

.task-attachment {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.task-attachment:last-of-type { border-bottom: none; }

.task-activity-log { display: flex; flex-direction: column; gap: 12px; }
.task-activity-entry { display: flex; gap: 10px; align-items: flex-start; }
.task-activity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3b82f6; flex-shrink: 0; margin-top: 5px;
}

.text-danger { color: #dc2626 !important; }
.text-link   { color: #60a5fa; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.btn-link {
  background: none; border: none; cursor: pointer;
  padding: 0; font-size: inherit; color: inherit;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   AUTOMATIONS
   ═══════════════════════════════════════════════════════════════ */

.automation-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 7px;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.automation-banner--warn {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.25);
  color: #fcd34d;
}
.automation-banner--info {
  background: rgba(59,130,246,.08);
  border-color: rgba(59,130,246,.2);
  color: #93c5fd;
}

.automation-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.07);
  color: var(--text-muted);
}
.automation-badge--running  { background: rgba(59,130,246,.15);  color: #60a5fa; }
.automation-badge--success  { background: rgba(22,163,74,.15);   color: #4ade80; }
.automation-badge--failed   { background: rgba(220,38,38,.15);   color: #f87171; }
.automation-badge--cancelled{ background: rgba(245,158,11,.15);  color: #fcd34d; }

.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #60a5fa;
  display: inline-block;
  animation: pulse-ring 1.2s ease-in-out infinite;
}
@keyframes pulse-ring {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

.vault-secret-checks {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.vault-secret-checks label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); cursor: pointer;
  font-weight: normal;
}

/* ── Theme Picker ────────────────────────────────────── */
.theme-picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px; color: var(--text);
  transition: background .12s;
  white-space: nowrap;
}
.theme-picker-item:hover { background: var(--hover-bg); }
.theme-picker-item.active { color: var(--blue-light); font-weight: 500; }
.theme-swatch {
  display: flex; gap: 3px; flex-shrink: 0;
}
.theme-swatch span {
  width: 10px; height: 10px; border-radius: 50%;
  display: block;
}
.theme-picker-label { display: flex; flex-direction: column; }
.theme-picker-label small { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.user-dropdown-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-light); padding: 8px 16px 4px;
}

/* ── Help Button ─────────────────────────────────────── */
@keyframes help-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--help-btn-rgb), 0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(var(--help-btn-rgb), 0); }
}
.help-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue-faint);
  border: 1.5px solid var(--blue-light);
  color: var(--blue-light); cursor: pointer;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
  margin-right: 8px;
  --help-btn-rgb: 96, 165, 250;
  animation: help-pulse 2.5s ease-in-out infinite;
}
.help-btn:hover {
  background: var(--blue-light);
  color: var(--bg);
  animation: none;
}
[data-theme="light"] .help-btn {
  --help-btn-rgb: 37, 99, 235;
  background: var(--blue-faint);
  border-color: var(--blue);
  color: var(--blue);
}
[data-theme="light"] .help-btn:hover {
  background: var(--blue);
  color: #fff;
  animation: none;
}

/* ── Help Panel ──────────────────────────────────────── */
.help-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 500;
}
.help-overlay.open { display: block; }

.help-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; max-width: 90vw;
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  z-index: 501;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow: hidden;
}
.help-panel.open { transform: translateX(0); }

.help-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-panel-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.help-panel-title svg { color: var(--blue-light); }
.help-panel-close {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--text-muted); border-radius: 5px;
  display: flex; align-items: center;
  transition: color .12s, background .12s;
}
.help-panel-close:hover { color: var(--text); background: var(--hover-bg); }
.help-panel-close svg { width: 16px; height: 16px; }

.help-panel-body {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 20px;
}

/* Help content building blocks */
.help-section { display: flex; flex-direction: column; gap: 8px; }
.help-section-title {
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blue-light);
}
.help-section p {
  font-size: 13px; color: var(--text-muted); line-height: 1.6; margin: 0;
}
.help-steps { display: flex; flex-direction: column; gap: 10px; }
.help-step {
  display: flex; gap: 12px; align-items: flex-start;
}
.help-step-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-faint); color: var(--blue-light);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.help-step-text {
  font-size: 13px; color: var(--text-muted); line-height: 1.5; padding-top: 2px;
}
.help-step-text strong { color: var(--text); font-weight: 500; }
.help-tip {
  background: var(--hover-bg); border-left: 3px solid var(--blue-light);
  border-radius: 0 6px 6px 0; padding: 10px 12px;
  font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.help-tip strong { color: var(--text); font-weight: 500; }