/* Brand palette (Settings > Branding). These are the defaults; base.html
   overrides them when a company sets its own colour. Space-separated RGB
   so Tailwind can add opacity: rgb(var(--brand-500) / .5). */
:root {
    --brand-50: 239 246 255; 
    --brand-100: 219 234 254; 
    --brand-200: 191 219 254; 
    --brand-300: 147 197 253; 
    --brand-400: 96 165 250; 
    --brand-500: 59 130 246; 
    --brand-600: 37 99 235; 
    --brand-700: 29 78 216; 
    --brand-800: 30 64 175; 
    --brand-900: 30 58 138;
    --brand-950: 12 26 110;
}

:root {
    --vulnaris-primary: rgb(var(--brand-500));    /* Modern blue */
    --vulnaris-secondary: rgb(var(--brand-400));  /* Lighter blue */
    --vulnaris-light: rgb(var(--brand-100));      /* Very light blue */
    --vulnaris-dark: rgb(var(--brand-800));       /* Dark blue */
    --vulnaris-accent: rgb(var(--brand-50));     /* Subtle blue accent */
    --vulnaris-success: #10B981;    /* Green for success states */
    --vulnaris-warning: #F59E0B;    /* Amber for warnings */
    --vulnaris-danger: #EF4444;     /* Red for danger/critical */
    --vulnaris-info: #6366F1;       /* Indigo for info */
    --vulnaris-gray: #6B7280;       /* Neutral gray */
}

.bg-vulnaris-primary {
    background-color: var(--vulnaris-primary);
}

.bg-vulnaris-secondary {
    background-color: var(--vulnaris-secondary);
}

.bg-vulnaris-light {
    background-color: var(--vulnaris-light);
}

.bg-vulnaris-dark {
    background-color: var(--vulnaris-dark);
}

.bg-vulnaris-accent {
    background-color: var(--vulnaris-accent);
}

.bg-vulnaris-success {
    background-color: var(--vulnaris-success);
}

.bg-vulnaris-warning {
    background-color: var(--vulnaris-warning);
}

.bg-vulnaris-danger {
    background-color: var(--vulnaris-danger);
}

.bg-vulnaris-info {
    background-color: var(--vulnaris-info);
}

.bg-vulnaris-gray {
    background-color: var(--vulnaris-gray);
}

.text-vulnaris-primary {
    color: var(--vulnaris-primary);
}

.text-vulnaris-dark {
    color: var(--vulnaris-dark);
}

.text-vulnaris-success {
    color: var(--vulnaris-success);
}

.text-vulnaris-warning {
    color: var(--vulnaris-warning);
}

.text-vulnaris-danger {
    color: var(--vulnaris-danger);
}

.text-vulnaris-info {
    color: var(--vulnaris-info);
}

.text-vulnaris-light {
    color: var(--vulnaris-light);
}

.text-vulnaris-gray {
    color: var(--vulnaris-gray);
}

.border-vulnaris-primary {
    border-color: var(--vulnaris-primary);
}

.hover\:bg-vulnaris-dark:hover {
    background-color: var(--vulnaris-dark);
}

.file-upload-container {
    position: relative;
    overflow: hidden;
    border: 2px dashed var(--vulnaris-primary);
    transition: all 0.3s ease;
    border-radius: 1rem;
    background-color: var(--vulnaris-accent);
}

.file-upload-container:hover {
    border-color: var(--vulnaris-secondary);
    background-color: var(--vulnaris-light);
    box-shadow: 0 10px 15px -3px rgb(var(--brand-500) / 0.1);
}

.stats-card {
    transition: all 0.3s ease;
    border: 1px solid var(--vulnaris-light);
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--vulnaris-primary);
}

.geometric-pattern {
    background: linear-gradient(135deg, var(--vulnaris-primary) 0%, var(--vulnaris-dark) 100%);
    position: relative;
    overflow: hidden;
}

.hero-gradient {
    background-image: linear-gradient(135deg, rgb(var(--brand-800)), rgb(var(--brand-600)), rgb(var(--brand-500)));
    background-size: 200% 200%;
    animation: heroGradientShift 12s ease infinite;
}

@keyframes heroGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-overlay {
    backdrop-filter: blur(2px);
}

.feature-chip {
    display: inline-flex;
    align-items: center;
    padding: .375rem .75rem;
    border-radius: 9999px;
    background-color: rgba(255,255,255,.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    font-size: .875rem;
}

.glass-card {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(229,231,235,.6);
    border-radius: 1rem;
}

.cta-shadow {
    box-shadow: 0 10px 20px -10px rgb(var(--brand-500) / .6);
}

.float-slow {
    animation: heroBob 6s ease-in-out infinite;
}

@keyframes heroBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero-illustration { max-width: 520px; margin: 0 auto; }
.gradient-card { position: relative; border-radius: 1rem; background: #fff; border: 1px solid rgba(229,231,235,.7); }
.gradient-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--vulnaris-primary), var(--vulnaris-secondary)); filter: blur(22px); opacity: .16; z-index: 0; }
.gradient-card > * { position: relative; z-index: 1; }
.icon-badge { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgb(var(--brand-600)); color: white; }
.hover-raise { transition: transform .2s ease, box-shadow .2s ease; }
.hover-raise:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,24,39,.12); }
.section-surface { background: linear-gradient(180deg, rgba(241,245,249,.6), rgba(255,255,255,1)); }
.stat-pill { border-radius: .75rem; padding: 1rem; border: 1px solid rgba(229,231,235,.7); background: #fff; }

.dark .gradient-card { background-color: #0F172A; border-color: #1F2937; }
.dark .gradient-card::before { background: linear-gradient(135deg, #0EA5E9, rgb(var(--brand-500))); opacity: .22; filter: blur(16px); }
.dark .icon-badge { background: rgb(var(--brand-500) / .14); color: rgb(var(--brand-100)); }
.dark .section-surface { background: linear-gradient(180deg, rgba(2,6,23,.9), rgba(15,23,42,.85)); }
.dark .stat-pill { background-color: #0F172A; border-color: #1F2937; color: #E5E7EB; }

.geometric-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 20%);
    opacity: 0.6;
}

.dark .geometric-pattern {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
}
.dark .geometric-pattern::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 22%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 22%);
    opacity: 0.35;
}

.nav-link {
    position: relative;
    color: var(--vulnaris-gray);
    transition: color 0.3s ease;
    font-weight: 500;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--vulnaris-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-link:hover {
    color: var(--vulnaris-primary);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

.active-nav {
    color: var(--vulnaris-primary);
}

/* Add modern card styles */
.modern-card {
    background-color: white;
    border-radius: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    overflow: hidden;
}

.modern-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}
/* a dialog that must stay still under the pointer (the lift made "Stay signed in" hard to click) */
.modern-card.idle-warning:hover { transform: none; }

/* Add button styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

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

.btn-primary:hover {
    background-color: var(--vulnaris-dark);
}
.feature-chip { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
nav { transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.stats-card, .modern-card, .file-upload-container { transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
nav.compact-nav .h-16 { height: 3rem; }
nav.compact-nav { box-shadow: 0 8px 24px rgba(0,0,0,.08); backdrop-filter: saturate(140%) blur(6px); }

#mainNav { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
#mainNav.nav-unpinned { transform: translateY(-100%); }
#mainNav.scrolled { backdrop-filter: saturate(140%) blur(6px); }
.dark #mainNav.scrolled { background-color: rgba(15,23,42,.85) !important; }
#mainNav.scrolled { background-color: rgba(255,255,255,.85) !important; }

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--vulnaris-primary);
    color: var(--vulnaris-primary);
}

.btn-outline:hover {
    background-color: var(--vulnaris-primary);
    color: white;
}

/* Add badge styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
}

.badge-success {
    background-color: var(--vulnaris-success);
    color: white;
}

.badge-warning {
    background-color: var(--vulnaris-warning);
    color: white;
}

.badge-danger {
    background-color: var(--vulnaris-danger);
    color: white;
}

.badge-info {
    background-color: var(--vulnaris-info);
    color: white;
}

/* Add animation utilities */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

/* Add font styles */
body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #F8FAFC; /* light mode: off-white so cards stand out */
    color: #111827;
    /* Smooth dark mode transition */
    transition: background-color 220ms ease, color 220ms ease;
}
*, *::before, *::after {
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}
/* Keep interactive transitions snappy - override for elements that need faster feel */
a, button, [role="button"], input, select, textarea { transition: none !important; }
a, button, [role="button"] { transition: background-color 100ms ease, color 100ms ease, border-color 100ms ease, box-shadow 100ms ease, opacity 100ms ease !important; }

/* ── Skeleton shimmer loader ──────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
}
.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; }
.dark .skeleton-row { border-color: #1f2937; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.skeleton-line { height: 12px; border-radius: 6px; }
.skeleton-line-sm { height: 10px; border-radius: 5px; width: 60%; margin-top: 6px; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
}

/* Report typography tuning for consistent sizing */
.stats-card dt { font-size: 0.875rem; color: #374151; }
.stats-card dd { font-size: 2.5rem; font-weight: 700; line-height: 1; }
table.min-w-full th { font-size: 0.75rem; letter-spacing: 0.025em; }
table.min-w-full td { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-3xl { font-size: 1.875rem; }

/* Chart containers for responsive sizing and clear text */


/* Fix duplicate active-nav::after rule */
.active-nav::after {
    transform: scaleX(1);
}

/* Minimal utility fallbacks to ensure icons render even without Tailwind */
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.ml-1 { margin-left: 0.25rem; }
.mb-4 { margin-bottom: 1rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded { border-radius: 0.25rem; }
.nav-link svg, .btn-base svg, .stats-card svg, .geometric-pattern svg, .modern-card svg { stroke: currentColor; }
/* Additional icon sizes */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
/* Common layout helpers used around icons */
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.rounded-full { border-radius: 9999px; }

/* Additional spacing utilities for icons */
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }

/* Ensure logs are visible in sync progress */
#logs {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #374151;
}

#logs div {
  margin-bottom: 0.25rem;
  word-break: break-word;
}
.btn-base{
  display:inline-flex;align-items:center;padding:.5rem .75rem;border-width:1px;border-style:solid;border-radius:.375rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:all .2s ease-in-out;text-decoration:none;cursor:pointer
}
.btn-blue{border-color:rgb(var(--brand-300));color:rgb(var(--brand-700));background-color:rgb(var(--brand-50))}
.btn-blue:hover{background-color:rgb(var(--brand-100))}
.btn-blue:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px rgb(var(--brand-300))}
.btn-green{border-color:#86EFAC;color:#166534;background-color:#F0FDF4}
.btn-green:hover{background-color:#DCFCE7}
.btn-green:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #86EFAC}
.btn-indigo{border-color:#A5B4FC;color:#3730A3;background-color:#EEF2FF}
.btn-indigo:hover{background-color:#E0E7FF}
.btn-indigo:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #A5B4FC}
.btn-red{border-color:#FCA5A5;color:#991B1B;background-color:#FEF2F2}
.btn-red:hover{background-color:#FEE2E2}
.btn-red:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #FCA5A5}
.btn-gray{border-color:#D1D5DB;color:#374151;background-color:#F9FAFB}
.btn-gray:hover{background-color:#F3F4F6}
.btn-gray:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #D1D5DB}
.btn-yellow{border-color:#FDE68A;color:#92400E;background-color:#FFFBEB}
.btn-yellow:hover{background-color:#FEF3C7}
.btn-yellow:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px #FDE68A}
.btn-disabled{opacity:.6;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE — modern palette (html:not(.dark) scope only)
   Dark mode is 100% untouched below.
═══════════════════════════════════════════════════════════════ */

/* Base page */
html:not(.dark) body {
  background-color: #F4F7FF;
  color: #0f172a;
}
html:not(.dark) .bg-gray-50 { background-color: #F4F7FF !important; }
html:not(.dark) .bg-gray-100 { background-color: #edf0fc !important; }

/* ── Navbar: rich royal-blue gradient ─────────────────────────── */
html:not(.dark) #mainNav {
  background: linear-gradient(90deg, rgb(var(--brand-900)) 0%, rgb(var(--brand-700)) 55%, rgb(var(--brand-600)) 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 4px 20px rgb(var(--brand-700) / .22) !important;
}
html:not(.dark) .nav-link                       { color: rgb(var(--brand-200)) !important; }
html:not(.dark) .nav-link:hover,
html:not(.dark) .active-nav                     { color: #ffffff !important; }
html:not(.dark) .nav-link::after                { background-color: #fff; }
html:not(.dark) #mainNav .text-vulnaris-primary      { color: #ffffff !important; }
html:not(.dark) #mainNav .text-vulnaris-dark         { color: rgb(var(--brand-200)) !important; }
html:not(.dark) #mainNav .text-2xl              { color: #ffffff !important; }
html:not(.dark) #mainNav .text-xl               { color: rgb(var(--brand-300)) !important; }
html:not(.dark) #mainNav .text-gray-700,
html:not(.dark) #mainNav .text-gray-600,
html:not(.dark) #mainNav .text-gray-500,
html:not(.dark) #mainNav .text-gray-400         { color: rgb(var(--brand-200)) !important; }
html:not(.dark) #mainNav .text-vulnaris-gray         { color: rgb(var(--brand-300)) !important; }
html:not(.dark) #mainNav svg                    { color: inherit; }

/* Buttons in nav */
html:not(.dark) #themeToggle                    { color: rgb(var(--brand-200)) !important; }
html:not(.dark) #themeToggle:hover              { color: #ffffff !important; }
html:not(.dark) #mobileMenuBtn                  { color: rgb(var(--brand-200)) !important; }
html:not(.dark) #mobileMenuBtn:hover            { background-color: rgba(255,255,255,.15) !important; }

/* Spotlight / Ctrl+K */
html:not(.dark) #spotlightBtn {
  background-color: rgba(255,255,255,.14) !important;
  color:            rgb(var(--brand-200)) !important;
}
html:not(.dark) #spotlightBtn:hover             { background-color: rgba(255,255,255,.22) !important; }

/* Inline nav search bar */
html:not(.dark) #navSearchBar {
  background-color: rgba(255,255,255,.12) !important;
  border:           1px solid rgba(255,255,255,.22) !important;
  color:            rgb(var(--brand-200)) !important;
}
html:not(.dark) #navSearchBar:hover {
  background-color: rgba(255,255,255,.2) !important;
  border-color:     rgba(255,255,255,.35) !important;
  color:            #ffffff !important;
}
html:not(.dark) #navSearchKbd {
  background-color: rgba(255,255,255,.15) !important;
  border:           1px solid rgba(255,255,255,.25) !important;
  color:            rgb(var(--brand-100)) !important;
}
.dark #navSearchBar {
  background-color: rgba(255,255,255,.06);
  border:           1px solid rgba(255,255,255,.1);
  color:            #94a3b8;
}
.dark #navSearchBar:hover {
  background-color: rgba(255,255,255,.1);
  color:            #e2e8f0;
}
.dark #navSearchKbd {
  background-color: rgba(255,255,255,.08);
  border:           1px solid rgba(255,255,255,.15);
  color:            #cbd5e1;
}

/* Notification bell */
html:not(.dark) #notificationButton {
  background-color: rgba(255,255,255,.12) !important;
  color:            rgb(var(--brand-200)) !important;
}
html:not(.dark) #notificationButton:hover       { background-color: rgba(255,255,255,.2) !important; }

/* User avatar ring/pill */
html:not(.dark) #userDropBtn:hover              { background-color: rgba(255,255,255,.15) !important; }
html:not(.dark) #userDropBtn .text-gray-700     { color: rgb(var(--brand-100)) !important; }
html:not(.dark) #userDropBtn .text-gray-400     { color: rgb(var(--brand-300)) !important; }

/* Nav accent stripe — always visible */
html:not(.dark) #navAccent { opacity: 1 !important; }

/* Mobile menu */
html:not(.dark) #mobileMenu {
  background: linear-gradient(180deg,rgb(var(--brand-900)),rgb(var(--brand-800))) !important;
  border-top-color: rgba(255,255,255,.15) !important;
}
html:not(.dark) #mobileMenu a                   { color: rgb(var(--brand-200)) !important; border-color: transparent !important; }
html:not(.dark) #mobileMenu a:hover             { background-color: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgb(var(--brand-400)) !important; }
html:not(.dark) #mobileMenu .text-gray-700      { color: rgb(var(--brand-200)) !important; }
html:not(.dark) #mobileMenu .text-gray-400      { color: rgb(var(--brand-300)) !important; }

/* Stats ribbon */
html:not(.dark) #statsRibbon {
  background-color: #eef2ff !important;
  border-bottom-color: #c7d2fe !important;
}

/* ── Dropdowns (user / admin / nessus) ─────────────────────────── */
html:not(.dark) #adminDropMenu,
html:not(.dark) #userDropMenu,
html:not(.dark) #nessusDropMenu {
  background-color: #ffffff !important;
  box-shadow: 0 8px 30px rgba(12,26,110,.14), 0 2px 8px rgba(12,26,110,.08) !important;
  border: 1px solid #e0e7ff !important;
}
html:not(.dark) #adminDropMenu a,
html:not(.dark) #userDropMenu a,
html:not(.dark) #nessusDropMenu a               { color: rgb(var(--brand-900)) !important; }
html:not(.dark) #adminDropMenu a:hover,
html:not(.dark) #userDropMenu a:hover,
html:not(.dark) #nessusDropMenu a:hover         { background-color: rgb(var(--brand-50)) !important; color: rgb(var(--brand-700)) !important; }
html:not(.dark) #userDropMenu .bg-vulnaris-light,
html:not(.dark) #adminDropMenu .bg-vulnaris-light    { background-color: rgb(var(--brand-50)) !important; }

/* Notification panel */
html:not(.dark) #notificationMenu {
  background-color: #ffffff !important;
  border: 1px solid #e0e7ff !important;
  box-shadow: 0 8px 30px rgba(12,26,110,.12) !important;
}

/* ── Cards & surfaces ──────────────────────────────────────────── */
html:not(.dark) .modern-card {
  background-color: #ffffff;
  border: 1px solid #e0e7ff;
  box-shadow: 0 1px 2px rgba(12,26,110,.04),
              0 4px 16px rgba(12,26,110,.06);
}
html:not(.dark) .modern-card:hover {
  box-shadow: 0 2px 4px rgba(12,26,110,.06),
              0 12px 32px rgba(12,26,110,.10);
}
html:not(.dark) .stats-card {
  background-color: #ffffff;
  border-color: #e0e7ff;
  box-shadow: 0 1px 3px rgba(12,26,110,.05),
              0 4px 12px rgba(12,26,110,.06);
}
html:not(.dark) .stats-card dt               { color: #4b5563; }
html:not(.dark) .glass-card {
  background: rgba(255,255,255,.88);
  border-color: rgba(224,231,255,.8);
  backdrop-filter: blur(12px) saturate(140%);
}
html:not(.dark) .gradient-card               { background:#ffffff; border-color:#e0e7ff; }
html:not(.dark) .stat-pill                   { background:#ffffff; border-color:#e0e7ff; }
html:not(.dark) .section-surface {
  background: linear-gradient(180deg,rgba(238,242,255,.7),rgba(255,255,255,1));
}
html:not(.dark) .file-upload-container {
  background-color: rgb(var(--brand-50));
  border-color: rgb(var(--brand-300));
}
html:not(.dark) .file-upload-container:hover {
  background-color: rgb(var(--brand-100));
  border-color: rgb(var(--brand-500));
}

/* ── Tables ────────────────────────────────────────────────────── */
html:not(.dark) table.data-table thead th {
  background-color: #F4F7FF;
  color: #374151;
}
html:not(.dark) thead.bg-gray-50              { background-color: #F4F7FF !important; }
html:not(.dark) .bg-white                     { background-color: #ffffff !important; }
html:not(.dark) tr:hover                      { background-color: rgb(var(--brand-50)) !important; }

/* ── Footer ────────────────────────────────────────────────────── */
html:not(.dark) footer {
  background-color: #eef2ff !important;
  border-top: 1px solid #c7d2fe !important;
}
html:not(.dark) footer .text-gray-500          { color: #4b5563 !important; }

/* ── Spotlight modal ───────────────────────────────────────────── */
html:not(.dark) #spotlightOverlay > div {
  box-shadow: 0 20px 60px rgba(12,26,110,.18) !important;
  border: 1px solid #e0e7ff !important;
}

/* ── Misc ──────────────────────────────────────────────────────── */
html:not(.dark) #mainNav.scrolled {
  background: linear-gradient(90deg,rgb(var(--brand-950) / .95) 0%,rgb(var(--brand-700) / .95) 55%,rgb(var(--brand-600) / .95) 100%) !important;
  backdrop-filter: saturate(160%) blur(8px);
}

/* ═══════════════════════════════════════════════════════════════ */
.dark body{background-color:#0B1220;color:#E5E7EB}
.dark nav{background-color:#0F172A;box-shadow:none;border-bottom:1px solid #1F2937}
.dark .nav-link{color:#9CA3AF}
.dark .nav-link:hover,.dark .active-nav{color:rgb(var(--brand-100))}
.dark .modern-card{background-color:#0F172A;border-color:#1F2937}
.dark .stats-card{background-color:#0F172A;border-color:#1F2937}
.dark footer{background-color:#0F172A;border-top-color:#1F2937}
.dark .feature-chip{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#E5E7EB}
.dark .hero-gradient{background-image:linear-gradient(135deg,#0F172A,#1E293B,#334155)}
.dark .file-upload-container{background-color:#0B1220;border-color:#1F2937}

.dark .bg-white{background-color:#0F172A !important}
.dark .bg-gray-50{background-color:#0B1220 !important}
.dark .text-gray-900{color:#E5E7EB !important}
.dark .text-gray-800{color:#E5E7EB !important}
.dark .text-gray-700{color:#D1D5DB !important}
.dark .text-gray-600{color:#9CA3AF !important}
.dark .text-gray-500{color:#9CA3AF !important}
.dark .divide-gray-200{border-color:#1F2937 !important}
.dark table.min-w-full{background-color:#0F172A !important}
.dark table.table-auto{background-color:#0F172A !important}
.dark thead{background-color:#0B1220 !important}
.dark thead.bg-gray-50{background-color:#0B1220 !important}
.dark tbody.bg-white{background-color:#0F172A !important}
.dark .odd\:bg-white{background-color:#0F172A !important}
.dark .even\:bg-gray-50{background-color:#0B1220 !important}
.dark tr.hover\:bg-gray-50:hover{background-color:#111827 !important}
.js-plotly-plot{background-color:transparent !important}
.dark .border-gray-200{border-color:#1F2937 !important}
.dark .border-gray-300{border-color:#374151 !important}
.dark table{background-color:#0F172A}
.dark table thead th{background-color:#0F172A;color:#E5E7EB;border-color:#1F2937}
.dark table tbody td{color:#D1D5DB;border-color:#1F2937}
.dark input, .dark select, .dark textarea{background-color:#0B1220;color:#E5E7EB;border-color:#1F2937}
.dark .badge{color:#E5E7EB}

@media print {
  body{background:#ffffff !important;color:#111827 !important}
  body{padding-top:72px !important;padding-bottom:48px !important}
  nav,footer,#mainNav,.btn,.btn-base,.btn-outline{display:none !important}
  .geometric-pattern{background:#ffffff !important}
  .geometric-pattern::before{display:none !important}
  .modern-card,.stats-card{box-shadow:none !important;border-color:#E5E7EB !important;background-color:#ffffff !important}
  table,thead,tbody,tr,th,td{background:#ffffff !important;color:#111827 !important}
  .js-plotly-plot{background-color:#ffffff !important}
  .screen-only{display:none !important}
  .print-only{display:block !important}
  .print-cover{padding:24px;border:1px solid #E5E7EB;border-radius:12px;margin-bottom:16px}
  .print-title{font-size:24px;font-weight:700;color:#111827}
  .print-subtitle{font-size:14px;color:#374151;margin-top:4px}
  .print-summary{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
  .print-summary .chip{border:1px solid #E5E7EB;border-radius:9999px;padding:6px 12px;font-size:12px;color:#111827}
  .print-page-break{page-break-before:always;break-before:page}
  .print-header{position:fixed;top:0;left:0;right:0;background:#ffffff;border-bottom:1px solid #E5E7EB;padding:12px 24px}
  .print-header .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .print-header .title{font-weight:600;color:#111827}
  .print-header .chips{display:flex;gap:8px;flex-wrap:wrap}
  .print-header .chips .chip{border:1px solid #E5E7EB;border-radius:9999px;padding:4px 10px;font-size:12px;color:#111827}
  .print-footer{position:fixed;bottom:0;left:0;right:0;background:#ffffff;border-top:1px solid #E5E7EB;padding:8px 24px;color:#374151;font-size:12px}
  .print-about{margin-top:10px;font-size:13px;color:#374151}
}

/* ── Sticky table headers ──────────────────────────────────────────────
   top: 0, not the menu's height: these tables sit in scroll containers (overflow-x-auto, cards with
   overflow-hidden), where "sticky 64px from the top" is measured from the container, so the header was
   drawn 64px down, over the first row (a one-result list looked empty). */
table.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: #F9FAFB;
}
.dark table.data-table thead th {
  background-color: #0F172A;
}

/* ── Unified severity badges ─────────────────────────────────────────── */
.sev-critical { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
.sev-high     { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#FFEDD5; color:#9A3412; border:1px solid #FED7AA; }
.sev-medium   { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#FEF9C3; color:#854D0E; border:1px solid #FDE047; }
.sev-low      { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#DBEAFE; color:#1E3A8A; border:1px solid #BFDBFE; }
.sev-info     { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:9999px; font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:#F3F4F6; color:#374151; border:1px solid #E5E7EB; }
.dark .sev-critical { background:rgba(220,38,38,.18); color:#FCA5A5; border-color:rgba(220,38,38,.3); }
.dark .sev-high     { background:rgba(234,88,12,.18);  color:#FDBA74; border-color:rgba(234,88,12,.3); }
.dark .sev-medium   { background:rgba(234,179,8,.15);  color:#FDE68A; border-color:rgba(234,179,8,.3); }
.dark .sev-low      { background:rgba(37,99,235,.18);  color:#93C5FD; border-color:rgba(37,99,235,.3); }
.dark .sev-info     { background:rgba(255,255,255,.06); color:#9CA3AF; border-color:rgba(255,255,255,.12); }

/* Dark tints for severity cards to match modern dark style */
.dark .bg-red-50{background-color:rgba(220,38,38,.12) !important}
.dark .bg-orange-50{background-color:rgba(234,88,12,.12) !important}
.dark .bg-yellow-50{background-color:rgba(234,179,8,.12) !important}
.dark .bg-blue-50{background-color:rgb(var(--brand-600) / .12) !important}
.dark .bg-red-100{background-color:rgba(220,38,38,.18) !important}
.dark .bg-orange-100{background-color:rgba(234,88,12,.18) !important}
.dark .bg-yellow-100{background-color:rgba(234,179,8,.18) !important}
.dark .bg-blue-100{background-color:rgb(var(--brand-600) / .18) !important}
.dark .border-red-200{border-color:rgba(220,38,38,.35) !important}
.dark .border-orange-200{border-color:rgba(234,88,12,.35) !important}
.dark .border-yellow-200{border-color:rgba(234,179,8,.35) !important}
.dark .border-blue-200{border-color:rgb(var(--brand-600) / .35) !important}