/* ==============================================================================
   IncidentHub - Light Neutral Professional Theme
   Clean, modern, crisp law enforcement & public safety incident analytics
============================================================================== */

:root,
[data-theme="light"] {
    /* Light Neutral Palette (Default) */
    --bg-page: #f8fafc;
    --bg-surface: #ffffff;
    --bg-subtle: #f1f5f9;
    --bg-input: #ffffff;
    --bg-hover: #f8fafc;

    /* Hairline & Border Colors */
    --border-subtle: #f1f5f9;
    --border-color: #e2e8f0;
    --border-focus: #93c5fd;

    /* Typography Colors */
    --text-main: #0f172a;
    --text-muted: #475569;
    --text-subtle: #64748b;
    --text-faint: #94a3b8;

    /* Brand Accents */
    --brand-primary: #2563eb;
    --brand-hover: #1d4ed8;
    --brand-light: #eff6ff;
    --brand-focus-ring: rgba(37, 99, 235, 0.18);

    /* Status Badges */
    --badge-blue-bg: #eff6ff;
    --badge-blue-text: #1d4ed8;
    --badge-emerald-bg: #ecfdf5;
    --badge-emerald-text: #047857;
    --badge-amber-bg: #fffbeb;
    --badge-amber-text: #b45309;
    --badge-rose-bg: #fff1f2;
    --badge-rose-text: #be123c;
    --badge-neutral-bg: #f1f5f9;
    --badge-neutral-text: #475569;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);

    /* Border Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;

    /* Transitions */
    --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --card-border-width: 1px;
    --bar-fill-types: #2563eb;
    --bar-fill-divs: #10b981;
}

[data-theme="dark"] {
    /* Midnight Dark Palette */
    --bg-page: #0a0e17;
    --bg-surface: #111827;
    --bg-subtle: #1e293b;
    --bg-input: #172033;
    --bg-hover: #1e293b;

    --border-subtle: #1e293b;
    --border-color: #2e3d54;
    --border-focus: #60a5fa;

    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --text-subtle: #94a3b8;
    --text-faint: #64748b;

    --brand-primary: #3b82f6;
    --brand-hover: #60a5fa;
    --brand-light: rgba(59, 130, 246, 0.15);
    --brand-focus-ring: rgba(59, 130, 246, 0.28);

    --badge-blue-bg: rgba(59, 130, 246, 0.2);
    --badge-blue-text: #93c5fd;
    --badge-emerald-bg: rgba(16, 185, 129, 0.2);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(245, 158, 11, 0.2);
    --badge-amber-text: #fcd34d;
    --badge-rose-bg: rgba(244, 63, 94, 0.2);
    --badge-rose-text: #fda4af;
    --badge-neutral-bg: #1e293b;
    --badge-neutral-text: #cbd5e1;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 25px 30px -5px rgba(0, 0, 0, 0.8), 0 10px 12px -6px rgba(0, 0, 0, 0.7);

    --card-border-width: 1px;
    --bar-fill-types: #3b82f6;
    --bar-fill-divs: #10b981;
}

[data-theme="cream"] {
    /* Cream & Modern Refined Outline Palette */
    --bg-page: #fbf7ee;
    --bg-surface: #fffef9;
    --bg-subtle: #f3ecdd;
    --bg-input: #ffffff;
    --bg-hover: #f5eedf;

    --border-subtle: #ebdcc7;
    --border-color: #27272a;
    --border-focus: #09090b;

    --text-main: #09090b;
    --text-muted: #27272a;
    --text-subtle: #52525b;
    --text-faint: #71717a;

    --brand-primary: #18181b;
    --brand-hover: #27272a;
    --brand-light: #f3ecdd;
    --brand-focus-ring: rgba(24, 24, 27, 0.15);

    --badge-blue-bg: #e4eefe;
    --badge-blue-text: #0f172a;
    --badge-emerald-bg: #dcfce7;
    --badge-emerald-text: #14532d;
    --badge-amber-bg: #fef3c7;
    --badge-amber-text: #78350f;
    --badge-rose-bg: #fee2e2;
    --badge-rose-text: #7f1d1d;
    --badge-neutral-bg: #f3ecdd;
    --badge-neutral-text: #18181b;

    --shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(24, 24, 27, 0.07), 0 2px 4px -2px rgba(24, 24, 27, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(24, 24, 27, 0.09), 0 4px 6px -4px rgba(24, 24, 27, 0.04);
    --shadow-modal: 0 20px 25px -5px rgba(24, 24, 27, 0.12), 0 8px 10px -6px rgba(24, 24, 27, 0.05);

    --card-border-width: 0.6px;
    --bar-fill-types: #1e3a8a;
    --bar-fill-divs: #ea580c;
}

[data-theme="cyberpunk"] {
    /* Cyberpunk Neon Palette */
    --bg-page: #080711;
    --bg-surface: #100e24;
    --bg-subtle: #191636;
    --bg-input: #15132d;
    --bg-hover: #211c47;

    --border-subtle: #241f4f;
    --border-color: #06b6d4;
    --border-focus: #ec4899;

    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --text-subtle: #a5b4fc;
    --text-faint: #6366f1;

    --brand-primary: #06b6d4;
    --brand-hover: #22d3ee;
    --brand-light: rgba(6, 182, 212, 0.18);
    --brand-focus-ring: rgba(6, 182, 212, 0.35);

    --badge-blue-bg: rgba(6, 182, 212, 0.25);
    --badge-blue-text: #67e8f9;
    --badge-emerald-bg: rgba(16, 185, 129, 0.25);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(245, 158, 11, 0.25);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(236, 72, 153, 0.25);
    --badge-rose-text: #f472b6;
    --badge-neutral-bg: #1c183d;
    --badge-neutral-text: #c7d2fe;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 14px rgba(6, 182, 212, 0.15), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(6, 182, 212, 0.22), 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 20px 40px rgba(6, 182, 212, 0.28), 0 10px 20px rgba(0, 0, 0, 0.8);

    --card-border-width: 1.5px;
    --bar-fill-types: #00f5ff;
    --bar-fill-divs: #ff007f;
}

[data-theme="tactical"] {
    /* Emerald Tactical Palette */
    --bg-page: #061812;
    --bg-surface: #0b261e;
    --bg-subtle: #11382c;
    --bg-input: #0e3025;
    --bg-hover: #164738;

    --border-subtle: #143e31;
    --border-color: #1e634e;
    --border-focus: #34d399;

    --text-main: #ecfdf5;
    --text-muted: #a7f3d0;
    --text-subtle: #6ee7b7;
    --text-faint: #34d399;

    --brand-primary: #10b981;
    --brand-hover: #34d399;
    --brand-light: rgba(16, 185, 129, 0.18);
    --brand-focus-ring: rgba(16, 185, 129, 0.35);

    --badge-blue-bg: rgba(14, 165, 233, 0.2);
    --badge-blue-text: #7dd3fc;
    --badge-emerald-bg: rgba(16, 185, 129, 0.25);
    --badge-emerald-text: #a7f3d0;
    --badge-amber-bg: rgba(245, 158, 11, 0.2);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(244, 63, 94, 0.2);
    --badge-rose-text: #fda4af;
    --badge-neutral-bg: #143a2e;
    --badge-neutral-text: #a7f3d0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 20px 30px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #f97316;
    --bar-fill-divs: #eab308;
}

[data-theme="nordic"] {
    /* Nordic Frost Palette */
    --bg-page: #f0f6fc;
    --bg-surface: #ffffff;
    --bg-subtle: #e2eaf4;
    --bg-input: #ffffff;
    --bg-hover: #f1f7fd;

    --border-subtle: #e2eaf4;
    --border-color: #bae6fd;
    --border-focus: #0284c7;

    --text-main: #0c4a6e;
    --text-muted: #1e3a5f;
    --text-subtle: #475569;
    --text-faint: #94a3b8;

    --brand-primary: #0284c7;
    --brand-hover: #0369a1;
    --brand-light: #e0f2fe;
    --brand-focus-ring: rgba(2, 132, 199, 0.22);

    --badge-blue-bg: #e0f2fe;
    --badge-blue-text: #0284c7;
    --badge-emerald-bg: #e6fffa;
    --badge-emerald-text: #0d9488;
    --badge-amber-bg: #fffbeb;
    --badge-amber-text: #b45309;
    --badge-rose-bg: #fff1f2;
    --badge-rose-text: #be123c;
    --badge-neutral-bg: #e2eaf4;
    --badge-neutral-text: #1e3a5f;

    --shadow-sm: 0 1px 3px rgba(12, 74, 110, 0.06);
    --shadow-md: 0 4px 8px -1px rgba(12, 74, 110, 0.08);
    --shadow-lg: 0 12px 20px -3px rgba(12, 74, 110, 0.1);
    --shadow-modal: 0 20px 25px -5px rgba(12, 74, 110, 0.15);

    --card-border-width: 1.2px;
    --bar-fill-types: #0284c7;
    --bar-fill-divs: #f43f5e;
}

[data-theme="crimson"] {
    /* Crimson Protocol Palette */
    --bg-page: #0f070b;
    --bg-surface: #1c0d16;
    --bg-subtle: #291421;
    --bg-input: #21101b;
    --bg-hover: #33192a;

    --border-subtle: #33192a;
    --border-color: #4c0519;
    --border-focus: #f43f5e;

    --text-main: #fff1f2;
    --text-muted: #fecdd3;
    --text-subtle: #fda4af;
    --text-faint: #fb7185;

    --brand-primary: #e11d48;
    --brand-hover: #f43f5e;
    --brand-light: rgba(225, 29, 72, 0.18);
    --brand-focus-ring: rgba(225, 29, 72, 0.35);

    --badge-blue-bg: rgba(59, 130, 246, 0.2);
    --badge-blue-text: #93c5fd;
    --badge-emerald-bg: rgba(16, 185, 129, 0.2);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(245, 158, 11, 0.2);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(225, 29, 72, 0.25);
    --badge-rose-text: #fecdd3;
    --badge-neutral-bg: #291421;
    --badge-neutral-text: #fecdd3;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(225, 29, 72, 0.2);
    --shadow-modal: 0 25px 35px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #fbbf24;
    --bar-fill-divs: #06b6d4;
}

[data-theme="amber"] {
    /* Sunset Amber Palette */
    --bg-page: #140d07;
    --bg-surface: #22140a;
    --bg-subtle: #311c0f;
    --bg-input: #29180d;
    --bg-hover: #3d2313;

    --border-subtle: #311c0f;
    --border-color: #572a08;
    --border-focus: #fbbf24;

    --text-main: #fef3c7;
    --text-muted: #fde68a;
    --text-subtle: #fcd34d;
    --text-faint: #d97706;

    --brand-primary: #f59e0b;
    --brand-hover: #fbbf24;
    --brand-light: rgba(245, 158, 11, 0.18);
    --brand-focus-ring: rgba(245, 158, 11, 0.35);

    --badge-blue-bg: rgba(59, 130, 246, 0.2);
    --badge-blue-text: #93c5fd;
    --badge-emerald-bg: rgba(16, 185, 129, 0.2);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(245, 158, 11, 0.25);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(244, 63, 94, 0.2);
    --badge-rose-text: #fda4af;
    --badge-neutral-bg: #311c0f;
    --badge-neutral-text: #fde68a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(245, 158, 11, 0.18);
    --shadow-modal: 0 25px 35px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #f59e0b;
    --bar-fill-divs: #06b6d4;
}

[data-theme="amethyst"] {
    /* Royal Amethyst Palette */
    --bg-page: #0a0515;
    --bg-surface: #140a28;
    --bg-subtle: #1f0f3d;
    --bg-input: #1a0d33;
    --bg-hover: #291452;

    --border-subtle: #241147;
    --border-color: #3b0764;
    --border-focus: #c084fc;

    --text-main: #faf5ff;
    --text-muted: #e9d5ff;
    --text-subtle: #c084fc;
    --text-faint: #9333ea;

    --brand-primary: #8b5cf6;
    --brand-hover: #a855f7;
    --brand-light: rgba(139, 92, 246, 0.18);
    --brand-focus-ring: rgba(139, 92, 246, 0.35);

    --badge-blue-bg: rgba(59, 130, 246, 0.2);
    --badge-blue-text: #93c5fd;
    --badge-emerald-bg: rgba(16, 185, 129, 0.2);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(245, 158, 11, 0.2);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(236, 72, 153, 0.2);
    --badge-rose-text: #f472b6;
    --badge-neutral-bg: #1f0f3d;
    --badge-neutral-text: #e9d5ff;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(139, 92, 246, 0.22);
    --shadow-modal: 0 25px 35px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #c084fc;
    --bar-fill-divs: #4ade80;
}

[data-theme="monolith"] {
    /* High-Contrast Monolith Brutalist Palette */
    --bg-page: #000000;
    --bg-surface: #0a0a0a;
    --bg-subtle: #171717;
    --bg-input: #0a0a0a;
    --bg-hover: #262626;

    --border-subtle: #404040;
    --border-color: #ffffff;
    --border-focus: #ffffff;

    --text-main: #ffffff;
    --text-muted: #e5e5e5;
    --text-subtle: #a3a3a3;
    --text-faint: #737373;

    --brand-primary: #ffffff;
    --brand-hover: #e5e5e5;
    --brand-light: rgba(255, 255, 255, 0.15);
    --brand-focus-ring: rgba(255, 255, 255, 0.4);

    --badge-blue-bg: #171717;
    --badge-blue-text: #ffffff;
    --badge-emerald-bg: #171717;
    --badge-emerald-text: #ffffff;
    --badge-amber-bg: #171717;
    --badge-amber-text: #ffffff;
    --badge-rose-bg: #171717;
    --badge-rose-text: #ffffff;
    --badge-neutral-bg: #171717;
    --badge-neutral-text: #ffffff;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-modal: 0 0 0 2px #ffffff;

    --card-border-width: 2px;
    --bar-fill-types: #f59e0b;
    --bar-fill-divs: #00f5ff;
}

[data-theme="oceanic"] {
    /* Oceanic Abyss Palette */
    --bg-page: #03141a;
    --bg-surface: #07212b;
    --bg-subtle: #0d2f3c;
    --bg-input: #092632;
    --bg-hover: #123d4e;

    --border-subtle: #0f3747;
    --border-color: #155e75;
    --border-focus: #38bdf8;

    --text-main: #f0fdfa;
    --text-muted: #ccfbf1;
    --text-subtle: #5eead4;
    --text-faint: #2dd4bf;

    --brand-primary: #0ea5e9;
    --brand-hover: #38bdf8;
    --brand-light: rgba(14, 165, 233, 0.18);
    --brand-focus-ring: rgba(14, 165, 233, 0.35);

    --badge-blue-bg: rgba(14, 165, 233, 0.25);
    --badge-blue-text: #7dd3fc;
    --badge-emerald-bg: rgba(20, 184, 166, 0.25);
    --badge-emerald-text: #5eead4;
    --badge-amber-bg: rgba(245, 158, 11, 0.2);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(244, 63, 94, 0.2);
    --badge-rose-text: #fda4af;
    --badge-neutral-bg: #0d2f3c;
    --badge-neutral-text: #ccfbf1;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(14, 165, 233, 0.2);
    --shadow-modal: 0 25px 35px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #38bdf8;
    --bar-fill-divs: #fb923c;
}

[data-theme="sepia"] {
    /* Vintage Sepia Blotter Palette */
    --bg-page: #f5efe1;
    --bg-surface: #fcf9f2;
    --bg-subtle: #ede2cd;
    --bg-input: #ffffff;
    --bg-hover: #ebdcc3;

    --border-subtle: #e0d0b8;
    --border-color: #8c6f4e;
    --border-focus: #5c4028;

    --text-main: #382314;
    --text-muted: #573a25;
    --text-subtle: #785338;
    --text-faint: #9c7553;

    --brand-primary: #8c6f4e;
    --brand-hover: #5c4028;
    --brand-light: #ede2cd;
    --brand-focus-ring: rgba(140, 111, 78, 0.25);

    --badge-blue-bg: #e2eaf4;
    --badge-blue-text: #1e3a5f;
    --badge-emerald-bg: #e1efe6;
    --badge-emerald-text: #235c3b;
    --badge-amber-bg: #f8edd8;
    --badge-amber-text: #78350f;
    --badge-rose-bg: #fae8e8;
    --badge-rose-text: #8c2626;
    --badge-neutral-bg: #ede2cd;
    --badge-neutral-text: #573a25;

    --shadow-sm: 0 1px 3px rgba(56, 35, 20, 0.08);
    --shadow-md: 0 4px 8px -1px rgba(56, 35, 20, 0.1);
    --shadow-lg: 0 10px 18px -3px rgba(56, 35, 20, 0.12);
    --shadow-modal: 0 20px 25px -5px rgba(56, 35, 20, 0.18);

    --card-border-width: 1.5px;
    --bar-fill-types: #854d0e;
    --bar-fill-divs: #15803d;
}

[data-theme="synthwave"] {
    /* 13. Synthwave 80s Sunset Neon */
    --bg-page: #120726;
    --bg-surface: #1e0f3d;
    --bg-subtle: #2d1458;
    --bg-input: #1a0b36;
    --bg-hover: #3b1a72;

    --border-subtle: #3b1a72;
    --border-color: #ff2a85;
    --border-focus: #fcee0a;

    --text-main: #fdf4ff;
    --text-muted: #e879f9;
    --text-subtle: #c084fc;
    --text-faint: #9333ea;

    --brand-primary: #ff2a85;
    --brand-hover: #ff5eaa;
    --brand-light: rgba(255, 42, 133, 0.2);
    --brand-focus-ring: rgba(255, 42, 133, 0.38);

    --badge-blue-bg: rgba(0, 240, 255, 0.22);
    --badge-blue-text: #38bdf8;
    --badge-emerald-bg: rgba(34, 197, 94, 0.22);
    --badge-emerald-text: #4ade80;
    --badge-amber-bg: rgba(254, 240, 138, 0.25);
    --badge-amber-text: #fef08a;
    --badge-rose-bg: rgba(255, 42, 133, 0.25);
    --badge-rose-text: #f472b6;
    --badge-neutral-bg: #2d1458;
    --badge-neutral-text: #e879f9;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 16px rgba(255, 42, 133, 0.2), 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 26px rgba(255, 42, 133, 0.28), 0 4px 10px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 20px 45px rgba(255, 42, 133, 0.35), 0 10px 22px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #ff2a85;
    --bar-fill-divs: #00e5ff;
}

[data-theme="matrix"] {
    /* 14. Matrix Phosphor Green Terminal */
    --bg-page: #020603;
    --bg-surface: #061109;
    --bg-subtle: #0d2213;
    --bg-input: #040c06;
    --bg-hover: #12301c;

    --border-subtle: #12381e;
    --border-color: #00ff66;
    --border-focus: #39ff14;

    --text-main: #bbf7d0;
    --text-muted: #86efac;
    --text-subtle: #4ade80;
    --text-faint: #22c55e;

    --brand-primary: #00ff66;
    --brand-hover: #39ff14;
    --brand-light: rgba(0, 255, 102, 0.16);
    --brand-focus-ring: rgba(0, 255, 102, 0.35);

    --badge-blue-bg: rgba(56, 189, 248, 0.2);
    --badge-blue-text: #7dd3fc;
    --badge-emerald-bg: rgba(0, 255, 102, 0.22);
    --badge-emerald-text: #86efac;
    --badge-amber-bg: rgba(234, 179, 8, 0.2);
    --badge-amber-text: #fde047;
    --badge-rose-bg: rgba(239, 68, 68, 0.2);
    --badge-rose-text: #fca5a5;
    --badge-neutral-bg: #0d2616;
    --badge-neutral-text: #86efac;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.7);
    --shadow-md: 0 4px 14px rgba(0, 255, 102, 0.15), 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(0, 255, 102, 0.22), 0 4px 10px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 20px 40px rgba(0, 255, 102, 0.28), 0 10px 20px rgba(0, 0, 0, 0.9);

    --card-border-width: 1.5px;
    --bar-fill-types: #00ff66;
    --bar-fill-divs: #ffb000;
}

[data-theme="dracula"] {
    /* 15. Dracula Vampire Dark */
    --bg-page: #21222c;
    --bg-surface: #282a36;
    --bg-subtle: #343746;
    --bg-input: #1f2029;
    --bg-hover: #44475a;

    --border-subtle: #3e4254;
    --border-color: #6272a4;
    --border-focus: #bd93f9;

    --text-main: #f8f8f2;
    --text-muted: #e2e8f0;
    --text-subtle: #bd93f9;
    --text-faint: #6272a4;

    --brand-primary: #bd93f9;
    --brand-hover: #d6b8ff;
    --brand-light: rgba(189, 147, 249, 0.18);
    --brand-focus-ring: rgba(189, 147, 249, 0.35);

    --badge-blue-bg: rgba(139, 233, 253, 0.2);
    --badge-blue-text: #8be9fd;
    --badge-emerald-bg: rgba(80, 250, 123, 0.2);
    --badge-emerald-text: #50fa7b;
    --badge-amber-bg: rgba(241, 250, 140, 0.2);
    --badge-amber-text: #f1fa8c;
    --badge-rose-bg: rgba(255, 121, 198, 0.2);
    --badge-rose-text: #ff79c6;
    --badge-neutral-bg: #44475a;
    --badge-neutral-text: #f8f8f2;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 22px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 24px 34px rgba(0, 0, 0, 0.8);

    --card-border-width: 1px;
    --bar-fill-types: #bd93f9;
    --bar-fill-divs: #ff79c6;
}

[data-theme="tokyo-night"] {
    /* 16. Tokyo Night Metropolis */
    --bg-page: #16161e;
    --bg-surface: #1a1b26;
    --bg-subtle: #24283b;
    --bg-input: #13141c;
    --bg-hover: #2f354f;

    --border-subtle: #2f354f;
    --border-color: #3b4261;
    --border-focus: #7aa2f7;

    --text-main: #c0caf5;
    --text-muted: #a9b1d6;
    --text-subtle: #7aa2f7;
    --text-faint: #565f89;

    --brand-primary: #7aa2f7;
    --brand-hover: #89b4fa;
    --brand-light: rgba(122, 162, 247, 0.18);
    --brand-focus-ring: rgba(122, 162, 247, 0.35);

    --badge-blue-bg: rgba(122, 162, 247, 0.22);
    --badge-blue-text: #7aa2f7;
    --badge-emerald-bg: rgba(158, 206, 106, 0.22);
    --badge-emerald-text: #9ece6a;
    --badge-amber-bg: rgba(224, 175, 104, 0.22);
    --badge-amber-text: #e0af68;
    --badge-rose-bg: rgba(247, 118, 142, 0.22);
    --badge-rose-text: #f7768e;
    --badge-neutral-bg: #24283b;
    --badge-neutral-text: #c0caf5;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.65);
    --shadow-modal: 0 25px 35px rgba(0, 0, 0, 0.85);

    --card-border-width: 1px;
    --bar-fill-types: #7aa2f7;
    --bar-fill-divs: #f7768e;
}

[data-theme="solarized-light"] {
    /* 17. Solarized Research Light */
    --bg-page: #fdf6e3;
    --bg-surface: #eee8d5;
    --bg-subtle: #e4dcbe;
    --bg-input: #fdf6e3;
    --bg-hover: #e0d7b5;

    --border-subtle: #d3cbb7;
    --border-color: #b7ab95;
    --border-focus: #268bd2;

    --text-main: #073642;
    --text-muted: #586e75;
    --text-subtle: #657b83;
    --text-faint: #93a1a1;

    --brand-primary: #268bd2;
    --brand-hover: #1e70a8;
    --brand-light: rgba(38, 139, 210, 0.15);
    --brand-focus-ring: rgba(38, 139, 210, 0.28);

    --badge-blue-bg: rgba(38, 139, 210, 0.18);
    --badge-blue-text: #268bd2;
    --badge-emerald-bg: rgba(133, 153, 0, 0.18);
    --badge-emerald-text: #718200;
    --badge-amber-bg: rgba(181, 137, 0, 0.18);
    --badge-amber-text: #967100;
    --badge-rose-bg: rgba(220, 50, 47, 0.18);
    --badge-rose-text: #cb4b16;
    --badge-neutral-bg: #dcd3bd;
    --badge-neutral-text: #586e75;

    --shadow-sm: 0 1px 2px rgba(7, 54, 66, 0.08);
    --shadow-md: 0 4px 6px rgba(7, 54, 66, 0.08);
    --shadow-lg: 0 10px 15px rgba(7, 54, 66, 0.1);
    --shadow-modal: 0 20px 25px rgba(7, 54, 66, 0.15);

    --card-border-width: 1px;
    --bar-fill-types: #268bd2;
    --bar-fill-divs: #d33682;
}

[data-theme="solarized-dark"] {
    /* 18. Solarized Midnight Dark */
    --bg-page: #00212b;
    --bg-surface: #002b36;
    --bg-subtle: #073642;
    --bg-input: #001f28;
    --bg-hover: #0b4352;

    --border-subtle: #0e4857;
    --border-color: #195869;
    --border-focus: #2aa198;

    --text-main: #fdf6e3;
    --text-muted: #93a1a1;
    --text-subtle: #839496;
    --text-faint: #586e75;

    --brand-primary: #2aa198;
    --brand-hover: #35c4b8;
    --brand-light: rgba(42, 161, 152, 0.18);
    --brand-focus-ring: rgba(42, 161, 152, 0.35);

    --badge-blue-bg: rgba(38, 139, 210, 0.22);
    --badge-blue-text: #268bd2;
    --badge-emerald-bg: rgba(42, 161, 152, 0.22);
    --badge-emerald-text: #2aa198;
    --badge-amber-bg: rgba(181, 137, 0, 0.25);
    --badge-amber-text: #b58900;
    --badge-rose-bg: rgba(220, 50, 47, 0.22);
    --badge-rose-text: #dc322f;
    --badge-neutral-bg: #073642;
    --badge-neutral-text: #93a1a1;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 22px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 25px 35px rgba(0, 0, 0, 0.85);

    --card-border-width: 1px;
    --bar-fill-types: #2aa198;
    --bar-fill-divs: #cb4b16;
}

[data-theme="rose-gold"] {
    /* 19. Rose Quartz & Copper Luxury */
    --bg-page: #181216;
    --bg-surface: #241a22;
    --bg-subtle: #332530;
    --bg-input: #1c141a;
    --bg-hover: #42303e;

    --border-subtle: #3d2b3a;
    --border-color: #f472b6;
    --border-focus: #fb923c;

    --text-main: #fdf2f8;
    --text-muted: #fbcfe8;
    --text-subtle: #f472b6;
    --text-faint: #9d5d85;

    --brand-primary: #f472b6;
    --brand-hover: #f687c3;
    --brand-light: rgba(244, 114, 182, 0.18);
    --brand-focus-ring: rgba(244, 114, 182, 0.35);

    --badge-blue-bg: rgba(192, 132, 252, 0.2);
    --badge-blue-text: #e879f9;
    --badge-emerald-bg: rgba(52, 211, 153, 0.2);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(251, 146, 60, 0.2);
    --badge-amber-text: #fdba74;
    --badge-rose-bg: rgba(244, 114, 182, 0.25);
    --badge-rose-text: #fbcfe8;
    --badge-neutral-bg: #332530;
    --badge-neutral-text: #fbcfe8;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(244, 114, 182, 0.14), 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(244, 114, 182, 0.2), 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-modal: 0 20px 40px rgba(244, 114, 182, 0.28), 0 10px 20px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #f472b6;
    --bar-fill-divs: #fbbf24;
}

[data-theme="hazard"] {
    /* 20. Biohazard Industrial Alert */
    --bg-page: #101113;
    --bg-surface: #181a1e;
    --bg-subtle: #23272d;
    --bg-input: #14161a;
    --bg-hover: #30353d;

    --border-subtle: #2f343d;
    --border-color: #eab308;
    --border-focus: #facc15;

    --text-main: #fef08a;
    --text-muted: #fef9c3;
    --text-subtle: #facc15;
    --text-faint: #ca8a04;

    --brand-primary: #eab308;
    --brand-hover: #facc15;
    --brand-light: rgba(234, 179, 8, 0.18);
    --brand-focus-ring: rgba(234, 179, 8, 0.35);

    --badge-blue-bg: rgba(56, 189, 248, 0.2);
    --badge-blue-text: #7dd3fc;
    --badge-emerald-bg: rgba(34, 197, 94, 0.2);
    --badge-emerald-text: #86efac;
    --badge-amber-bg: rgba(234, 179, 8, 0.25);
    --badge-amber-text: #fef08a;
    --badge-rose-bg: rgba(239, 68, 68, 0.25);
    --badge-rose-text: #fca5a5;
    --badge-neutral-bg: #23272d;
    --badge-neutral-text: #fef9c3;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 4px 14px rgba(234, 179, 8, 0.15), 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(234, 179, 8, 0.22), 0 4px 10px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 20px 40px rgba(234, 179, 8, 0.28), 0 10px 20px rgba(0, 0, 0, 0.9);

    --card-border-width: 2px;
    --bar-fill-types: #facc15;
    --bar-fill-divs: #f97316;
}

[data-theme="forest"] {
    /* 21. Deep Forest Moss */
    --bg-page: #09150e;
    --bg-surface: #0f2419;
    --bg-subtle: #173626;
    --bg-input: #0b1c13;
    --bg-hover: #204934;

    --border-subtle: #1c422f;
    --border-color: #2e6b4d;
    --border-focus: #84cc16;

    --text-main: #f0fdf4;
    --text-muted: #bbf7d0;
    --text-subtle: #86efac;
    --text-faint: #4ade80;

    --brand-primary: #84cc16;
    --brand-hover: #a3e635;
    --brand-light: rgba(132, 204, 22, 0.18);
    --brand-focus-ring: rgba(132, 204, 22, 0.35);

    --badge-blue-bg: rgba(56, 189, 248, 0.2);
    --badge-blue-text: #7dd3fc;
    --badge-emerald-bg: rgba(132, 204, 22, 0.25);
    --badge-emerald-text: #bef264;
    --badge-amber-bg: rgba(234, 179, 8, 0.2);
    --badge-amber-text: #fde047;
    --badge-rose-bg: rgba(239, 68, 68, 0.2);
    --badge-rose-text: #fca5a5;
    --badge-neutral-bg: #173626;
    --badge-neutral-text: #bbf7d0;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 20px 30px rgba(0, 0, 0, 0.85);

    --card-border-width: 1.5px;
    --bar-fill-types: #84cc16;
    --bar-fill-divs: #f59e0b;
}

[data-theme="glacier"] {
    /* 22. Glacier Sub-Zero Cyan */
    --bg-page: #05101a;
    --bg-surface: #0a1b2c;
    --bg-subtle: #102942;
    --bg-input: #081624;
    --bg-hover: #163759;

    --border-subtle: #173b60;
    --border-color: #38bdf8;
    --border-focus: #7dd3fc;

    --text-main: #f0f9ff;
    --text-muted: #bae6fd;
    --text-subtle: #7dd3fc;
    --text-faint: #38bdf8;

    --brand-primary: #38bdf8;
    --brand-hover: #7dd3fc;
    --brand-light: rgba(56, 189, 248, 0.18);
    --brand-focus-ring: rgba(56, 189, 248, 0.35);

    --badge-blue-bg: rgba(56, 189, 248, 0.25);
    --badge-blue-text: #bae6fd;
    --badge-emerald-bg: rgba(52, 211, 153, 0.2);
    --badge-emerald-text: #6ee7b7;
    --badge-amber-bg: rgba(251, 191, 36, 0.2);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(244, 114, 182, 0.2);
    --badge-rose-text: #fbcfe8;
    --badge-neutral-bg: #102942;
    --badge-neutral-text: #bae6fd;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 4px 14px rgba(56, 189, 248, 0.15), 0 2px 6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(56, 189, 248, 0.22), 0 4px 10px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 20px 40px rgba(56, 189, 248, 0.28), 0 10px 20px rgba(0, 0, 0, 0.9);

    --card-border-width: 1.5px;
    --bar-fill-types: #38bdf8;
    --bar-fill-divs: #fb7185;
}

[data-theme="espresso"] {
    /* 23. Espresso Dark Roast & Caramel */
    --bg-page: #15100e;
    --bg-surface: #201916;
    --bg-subtle: #2e2420;
    --bg-input: #191310;
    --bg-hover: #3d302b;

    --border-subtle: #3a2e29;
    --border-color: #785a49;
    --border-focus: #d97706;

    --text-main: #fef3c7;
    --text-muted: #fde68a;
    --text-subtle: #fbbf24;
    --text-faint: #d97706;

    --brand-primary: #d97706;
    --brand-hover: #f59e0b;
    --brand-light: rgba(217, 119, 6, 0.18);
    --brand-focus-ring: rgba(217, 119, 6, 0.35);

    --badge-blue-bg: rgba(56, 189, 248, 0.2);
    --badge-blue-text: #7dd3fc;
    --badge-emerald-bg: rgba(34, 197, 94, 0.2);
    --badge-emerald-text: #86efac;
    --badge-amber-bg: rgba(217, 119, 6, 0.25);
    --badge-amber-text: #fde68a;
    --badge-rose-bg: rgba(239, 68, 68, 0.2);
    --badge-rose-text: #fca5a5;
    --badge-neutral-bg: #2e2420;
    --badge-neutral-text: #fde68a;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 22px rgba(0, 0, 0, 0.7);
    --shadow-modal: 0 24px 34px rgba(0, 0, 0, 0.85);

    --card-border-width: 1px;
    --bar-fill-types: #f59e0b;
    --bar-fill-divs: #34d399;
}

[data-theme="bubblegum"] {
    /* 24. Bubblegum Pastel Pop */
    --bg-page: #fdf2f8;
    --bg-surface: #ffffff;
    --bg-subtle: #fce7f3;
    --bg-input: #ffffff;
    --bg-hover: #fbcfe8;

    --border-subtle: #fce7f3;
    --border-color: #f472b6;
    --border-focus: #06b6d4;

    --text-main: #831843;
    --text-muted: #9d174d;
    --text-subtle: #be185d;
    --text-faint: #db2777;

    --brand-primary: #ec4899;
    --brand-hover: #db2777;
    --brand-light: #fce7f3;
    --brand-focus-ring: rgba(236, 72, 153, 0.25);

    --badge-blue-bg: #e0f2fe;
    --badge-blue-text: #0284c7;
    --badge-emerald-bg: #ecfdf5;
    --badge-emerald-text: #059669;
    --badge-amber-bg: #fffbeb;
    --badge-amber-text: #b45309;
    --badge-rose-bg: #fdf2f8;
    --badge-rose-text: #be185d;
    --badge-neutral-bg: #fce7f3;
    --badge-neutral-text: #9d174d;

    --shadow-sm: 0 1px 3px rgba(131, 24, 67, 0.06);
    --shadow-md: 0 4px 10px rgba(236, 72, 153, 0.1);
    --shadow-lg: 0 10px 20px rgba(236, 72, 153, 0.14);
    --shadow-modal: 0 20px 30px rgba(131, 24, 67, 0.16);

    --card-border-width: 1.5px;
    --bar-fill-types: #ec4899;
    --bar-fill-divs: #8b5cf6;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--bg-subtle);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-subtle);
}

::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-hover);
}

::-webkit-scrollbar-corner {
    background: var(--bg-subtle);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* ==============================================================================
   Top Navigation Header
============================================================================== */
.app-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-sm);
    width: 100%;
}

.header-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.brand-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
    filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.25));
}

.brand-group:hover .brand-logo-img {
    transform: scale(1.06);
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.38));
}

.brand-icon {
    width: 34px;
    height: 34px;
    background: var(--brand-light);
    color: var(--brand-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: 0.64rem;
    color: var(--text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 1.2vw, 16px);
    background: var(--bg-subtle);
    padding: 4px clamp(8px, 1vw, 14px);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-color);
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0 clamp(6px, 1vw, 14px);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-center:hover {
    border-color: var(--brand-primary);
    background: var(--bg-hover, var(--bg-surface));
}

.active-db-info-group {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.8vw, 12px);
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

.active-badge {
    font-size: clamp(0.6rem, 0.55rem + 0.15vw, 0.68rem);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-primary);
    background: var(--brand-light);
    padding: 3px clamp(6px, 0.6vw, 9px);
    border-radius: 4px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.active-db-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    letter-spacing: -0.01em;
}

#btn-switch-db {
    padding: 4px clamp(6px, 0.7vw, 10px);
    font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
    height: 28px;
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-sm, 6px);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(4px, 0.5vw, 8px);
    margin-left: 0;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.header-actions .btn {
    padding: 6px clamp(6px, 0.7vw, 10px);
    font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
    height: 32px;
    gap: 6px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.header-actions .btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.btn-text-mobile {
    display: none;
}

.btn-text-full {
    display: inline;
}

@media (max-width: 1200px) {
    .header-actions .btn-text-full {
        display: none;
    }

    .header-actions .btn-text-mobile {
        display: inline;
    }

    #btn-switch-db .btn-text-full {
        display: none;
    }

    #btn-switch-db .btn-text-mobile {
        display: inline;
    }
}

@media (max-width: 768px) {
    .brand-subtitle {
        display: none;
    }

    .header-center {
        margin: 0 6px;
        padding: 4px 8px;
    }
}

@media (max-width: 600px) {
    .header-actions .btn-text-mobile {
        display: none;
    }

    .header-actions .header-version-pill {
        display: none;
    }

    .header-actions .btn {
        padding: 6px 8px;
    }

    .active-badge {
        display: none;
    }
}

.header-version-pill {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-subtle);
}

/* ==============================================================================
   Common Button Styles
============================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    outline: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
}

.btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}

.btn-outline {
    background: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--border-color);
}

.btn-outline:hover {
    background: var(--bg-subtle);
    border-color: #cbd5e1;
}

.btn-subtle {
    background: var(--bg-subtle);
    color: var(--text-muted);
    border-color: transparent;
}

.btn-subtle:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 0.75rem;
}

.btn-icon-round {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.btn-icon-round:hover {
    background: var(--bg-subtle);
    color: var(--text-main);
}

/* Return to Portal Button with Decal */
.btn-back-portal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.86rem;
    background: var(--bg-surface);
    border: var(--card-border-width, 1px) solid var(--border-color);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    cursor: pointer;
}

.btn-back-portal:hover {
    background: var(--bg-subtle);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    transform: translateX(-2px);
}

.return-arrow-decal {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.btn-back-portal:hover .return-arrow-decal {
    transform: translateX(-3px);
    background: var(--brand-primary);
    color: #ffffff;
}

.btn-back-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

/* ==============================================================================
   Main Content Layout
============================================================================== */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

.view-section {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================================================================
   VIEW 1: Database Launch Portal
============================================================================== */
.portal-hero {
    text-align: center;
    max-width: 680px;
    margin: 20px auto 44px;
}

.portal-logo-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 22px;
}

.portal-hero-logo {
    width: 220px;
    max-width: 90%;
    height: auto;
    max-height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.22));
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
}

.portal-hero-logo:hover {
    transform: translateY(-4px) scale(1.05);
    filter: drop-shadow(0 14px 32px rgba(37, 99, 235, 0.35));
}

[data-theme="dark"] .portal-hero-logo {
    filter: drop-shadow(0 0 1.2px rgba(255, 255, 255, 0.85)) drop-shadow(0 8px 30px rgba(56, 189, 248, 0.35));
}

[data-theme="cream"] .portal-hero-logo {
    filter: drop-shadow(0 6px 20px rgba(24, 24, 27, 0.16));
}

.portal-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--brand-light);
    color: var(--brand-primary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: var(--radius-full);
    margin-bottom: 12px;
}

.portal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.portal-description {
    font-size: 1rem;
    color: var(--text-subtle);
    line-height: 1.6;
}

/* ==============================================================================
   Redesigned Portal Database Grid Header (Clean, Modern & Properly Formatted)
   ============================================================================== */
.db-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-surface, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    border-radius: var(--radius-xl, 14px);
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: var(--transition, all 0.25s cubic-bezier(0.16, 1, 0.3, 1));
}

.db-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.section-heading-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-heading-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--brand-primary, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}

.section-heading h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin: 0;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.section-heading-pills {
    display: flex;
    align-items: center;
    gap: 8px;
}

.db-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-subtle, rgba(241, 245, 249, 0.8));
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.9));
    color: var(--text-muted, #64748b);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.local-db-quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.db-header-right {
    display: flex;
    align-items: center;
}

.db-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.db-header-view-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-subtle, rgba(248, 250, 252, 0.8));
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    border-radius: 9999px;
}

.db-header-action-buttons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==============================================================================
   Categorized Dashboard Sections (Published vs Local Dashboards)
   ============================================================================== */
.portal-categories-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.portal-category-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--border-subtle, rgba(226, 232, 240, 0.6));
}

.category-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon.published-icon {
    background: rgba(37, 99, 235, 0.12);
    color: var(--brand-primary, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.category-icon.local-icon {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.18);
}

.category-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-title-text h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin: 0;
    letter-spacing: -0.01em;
}

.category-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    line-height: 1.2;
}

.category-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: var(--bg-subtle, rgba(241, 245, 249, 0.8));
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.9));
    color: var(--text-muted, #64748b);
    border-radius: 9999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Local Dashboard Empty State Card */
.local-empty-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1.5px dashed rgba(99, 102, 241, 0.35);
    border-radius: var(--radius-lg, 12px);
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    transition: var(--transition);
}

.local-empty-card:hover {
    border-color: #6366f1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.07) 0%, rgba(99, 102, 241, 0.12) 100%);
}

.local-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.local-empty-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    margin: 0 0 4px 0;
}

.local-empty-content p {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    max-width: 440px;
    margin: 0;
    line-height: 1.45;
}

.local-empty-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}

.db-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.db-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
}

.db-card:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.db-card:active {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.db-card:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.db-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.db-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-card-title-group h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.db-card-filename {
    font-size: 0.78rem;
    color: var(--text-faint);
    font-family: monospace;
}

.db-card-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 20px;
}

.db-stat-item {
    display: flex;
    flex-direction: column;
}

.db-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
}

.db-stat-lbl {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--text-subtle);
    font-weight: 500;
}

.db-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.db-update-time {
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* Upload Action Card */
.upload-action-card {
    background: var(--bg-surface);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    min-height: 240px;
    box-shadow: var(--shadow-sm);
}

.upload-action-card:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.upload-action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.upload-action-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.upload-action-card p {
    font-size: 0.8rem;
    color: var(--text-subtle);
    max-width: 220px;
}

/* ==============================================================================
   VIEW 2: Dashboard View
============================================================================== */
.dash-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.dash-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-title-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.dash-title-display-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dash-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
    margin: 0;
    transition: color 0.18s ease;
}

.btn-edit-dash-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-subtle);
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}

.dash-title-display-wrap:hover .btn-edit-dash-title,
.btn-edit-dash-title:hover {
    opacity: 1;
    color: var(--primary-color, #3b82f6);
    background: var(--primary-light, rgba(59, 130, 246, 0.12));
    border-color: var(--primary-alpha, rgba(59, 130, 246, 0.25));
    transform: translateY(-1px);
}

.dash-title-edit-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
    animation: fadeIn 0.2s ease-out;
}

.input-dash-title-edit {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-input, var(--bg-surface));
    border: 1.5px solid var(--primary-color, #3b82f6);
    border-radius: var(--radius-sm, 6px);
    padding: 4px 12px;
    min-width: 280px;
    max-width: 480px;
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(59, 130, 246, 0.2));
    transition: all 0.18s ease;
}

.input-dash-title-edit:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 4px var(--primary-alpha, rgba(59, 130, 246, 0.3));
}

.dash-title-edit-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dash-title-edit-actions .btn-xs {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    border-radius: var(--radius-sm, 6px);
}

.dash-subtitle {
    font-size: 0.88rem;
    color: var(--text-subtle);
}

/* Overview Metrics Strip */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.metric-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-subtle);
}

.metric-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-blue {
    background: var(--badge-blue-bg, #eff6ff);
    color: var(--badge-blue-text, #2563eb);
}

.icon-emerald {
    background: var(--badge-emerald-bg, #ecfdf5);
    color: var(--badge-emerald-text, #059669);
}

.icon-amber {
    background: var(--badge-amber-bg, #fffbeb);
    color: var(--badge-amber-text, #d97706);
}

.icon-indigo {
    background: var(--brand-light, #e0e7ff);
    color: var(--brand-primary, #4f46e5);
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 4px;
    line-height: 1.2;
}

.metric-value-sm {
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-meta {
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* Charts / Distribution Row */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .charts-row {
        grid-template-columns: 1fr;
    }
}

.chart-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.chart-card-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

.chart-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-weight: 500;
}

.distribution-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--bg-subtle);
}

.distribution-bars::-webkit-scrollbar {
    width: 6px;
}

.distribution-bars::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
}

.distribution-bars::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: var(--radius-full);
}

.distribution-bars::-webkit-scrollbar-thumb:hover {
    background: var(--brand-hover);
}

.chart-card-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.chart-card-footer label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-subtle);
}

.bar-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.bar-label {
    font-weight: 500;
    color: var(--text-main);
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-count {
    font-weight: 600;
    color: var(--text-muted);
}

.bar-track {
    height: 7px;
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--bar-fill-types, var(--brand-primary));
    border-radius: var(--radius-full);
    transition: width 0.4s ease-out;
}

.bar-fill-emerald {
    background: var(--bar-fill-divs, #10b981) !important;
}

/* ==============================================================================
   Search & Filter Window
============================================================================== */
.search-window-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
}

.search-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.search-window-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
}

.search-window-title h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

.search-window-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.general-search-row {
    margin-bottom: 18px;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-faint);
    pointer-events: none;
}

.input-with-icon input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    font-size: 0.92rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-main);
    transition: var(--transition);
    outline: none;
}

.input-with-icon input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-focus-ring);
}

/* Date Range Filter Box */
.date-filter-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.date-filter-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-main);
}

.date-column-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-column-select-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.date-presets-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset-pill {
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-muted);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.preset-pill:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

.preset-pill.active {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
}

.custom-date-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

@media (max-width: 768px) {
    .custom-date-inputs {
        margin-left: 0;
        width: 100%;
    }
}

.date-field {
    display: flex;
    align-items: center;
    gap: 6px;
}

.date-field label {
    font-size: 0.78rem;
    color: var(--text-subtle);
    font-weight: 500;
}

.date-field input[type="date"] {
    padding: 5px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-main);
    outline: none;
}

/* Stackable Grid of Filters */
.stackable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

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

.form-group label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.form-group input,
.form-group select {
    padding: 9px 12px;
    font-size: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-main);
    outline: none;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-focus-ring);
}

/* ==============================================================================
   Results Window
============================================================================== */
.results-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.results-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.results-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.results-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

.results-badge {
    padding: 3px 10px;
    background: var(--brand-light);
    color: var(--brand-primary);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
}

.active-filter-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

/* Arrests Column & Chip in Results Table */
.th-arrests,
.td-arrests {
    width: 145px !important;
    min-width: 140px !important;
    text-align: center !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.arrest-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    box-sizing: border-box;
    transition: var(--transition);
}

.arrest-chip-has-arrests {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    font-weight: 700 !important;
}

.results-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-update-dataset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    border: 1px solid var(--brand-primary);
    background: var(--brand-light);
    cursor: pointer;
    transition: var(--transition);
}

.btn-update-dataset:hover:not(:disabled) {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 0 12px var(--brand-focus-ring);
}

.btn-update-dataset:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-update-dataset .update-icon.spinning {
    animation: spin 1s linear infinite;
}

.results-limit-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.results-limit-control label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-subtle);
}

.select-sm {
    padding: 6px 12px;
    font-size: 0.82rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    outline: none;
    cursor: pointer;
}

.select-sm:focus {
    border-color: var(--brand-primary);
}

/* Data Table */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 640px;
    position: relative;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.85rem;
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-subtle);
    padding: 13px 18px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    box-shadow: 0 1px 0 var(--border-color);
}

.th-sortable {
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.th-sortable:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

.sort-indicator {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.8rem;
    color: var(--text-faint);
    transition: color 0.15s ease;
}

.th-sortable:hover .sort-indicator {
    color: var(--brand-primary);
}

.th-sortable.sorted-asc,
.th-sortable.sorted-desc {
    color: var(--brand-primary);
    background: var(--brand-light);
}

.th-sortable.sorted-asc .sort-indicator,
.th-sortable.sorted-desc .sort-indicator {
    color: var(--brand-primary);
    font-weight: 700;
}

.data-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-main);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background-color 0.15s ease;
}

.data-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.table-id-badge {
    font-family: monospace;
    font-weight: 700;
    color: var(--brand-primary);
    background: var(--brand-light);
    padding: 2px 6px;
    border-radius: 4px;
}

.type-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--badge-blue-bg);
    color: var(--badge-blue-text);
    white-space: nowrap;
}

.table-summary-cell {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

/* Empty State */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-full);
    background: var(--bg-subtle);
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.empty-state h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 0.88rem;
    color: var(--text-subtle);
    max-width: 400px;
    margin: 0 auto 18px;
}

/* ==============================================================================
   Modals
============================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.modal-card {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-modal);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-card-lg {
    max-width: 720px;
}

@keyframes scaleUp {
    from {
        transform: scale(0.96);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: var(--card-border-width, 1px) solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-badge-blue {
    background: var(--badge-blue-bg, #eff6ff);
    color: var(--badge-blue-text, #2563eb);
}

.modal-title-group h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.modal-title-group p {
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.btn-close-modal {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px;
    transition: var(--transition);
}

.btn-close-modal:hover {
    color: var(--text-main);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--bg-subtle);
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: var(--radius-full);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--brand-hover);
}

.modal-footer {
    padding: 16px 24px;
    border-top: var(--card-border-width, 1px) solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: var(--bg-subtle);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Upload Dropzone */
.format-chips-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chip-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-subtle);
}

.format-chip {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: monospace;
    font-weight: 600;
    color: var(--text-muted);
}

.dropzone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-subtle);
    transition: var(--transition);
}

.dropzone:hover,
.dropzone.drag-over {
    border-color: var(--brand-primary);
    background: var(--brand-light);
}

.dropzone-icon {
    color: var(--brand-primary);
    margin-bottom: 8px;
}

.dropzone p {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
}

.dropzone-hint {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-top: 4px;
}

.selected-file-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.btn-remove-file {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-faint);
    cursor: pointer;
}

.btn-remove-file:hover {
    color: #ef4444;
}

.input-with-suffix {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    overflow: hidden;
}

.input-with-suffix input {
    border: none;
    outline: none;
    flex: 1;
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--text-main);
}

.input-suffix {
    padding: 9px 12px;
    background: var(--bg-subtle);
    color: var(--text-subtle);
    font-size: 0.85rem;
    font-family: monospace;
    border-left: 1px solid var(--border-color);
}

.field-hint {
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-top: 4px;
}

.required {
    color: #ef4444;
}

/* Optimize Columns Checkbox Card */
.form-checkbox-card {
    margin-top: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: var(--transition);
    cursor: pointer;
}

.form-checkbox-card:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
}

.checkbox-label-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label-wrapper input[type="checkbox"] {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.checkbox-text {
    display: flex;
    flex-direction: column;
}

.checkbox-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.checkbox-badge {
    font-size: 0.68rem;
    padding: 1px 6px;
    background: var(--badge-blue-bg);
    color: var(--badge-blue-text);
    border-radius: var(--radius-full);
    font-weight: 600;
    text-transform: uppercase;
}

.checkbox-desc {
    font-size: 0.76rem;
    color: var(--text-subtle);
    margin-top: 2px;
    line-height: 1.35;
}

.alert-box {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    margin-top: 14px;
}

.alert-error {
    background: var(--badge-rose-bg);
    color: var(--badge-rose-text);
    border: 1px solid #fecdd3;
}

.alert-success {
    background: var(--badge-emerald-bg);
    color: var(--badge-emerald-text);
    border: 1px solid #a7f3d0;
}

/* Incident Detail Metadata */
.incident-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px 20px;
    padding: 18px 20px;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.meta-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.meta-item-wide {
    grid-column: 1 / -1;
}

.meta-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}

.meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.narrative-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.narrative-header {
    padding: 10px 16px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.narrative-header h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.narrative-content {
    padding: 16px;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
    background: var(--bg-surface);
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--bg-subtle);
    transition: background-color 0.25s ease, color 0.25s ease;
}

.narrative-content::-webkit-scrollbar {
    width: 6px;
}

.narrative-content::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
}

.narrative-content::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: var(--radius-full);
}

.narrative-content::-webkit-scrollbar-thumb:hover {
    background: var(--brand-hover);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 200;
}

.toast {
    padding: 12px 18px;
    background: var(--text-main);
    color: #ffffff;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-success {
    background: #059669;
}

.toast-error {
    background: #dc2626;
}

.toast-info {
    background: var(--brand-primary);
    color: #ffffff;
}

@keyframes slideIn {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.spin,
.spinning {
    animation: spin 0.85s linear infinite !important;
    display: inline-block;
}

.loading-state {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-subtle);
}

/* ==============================================================================
   Theme Selection Modal & Options
============================================================================== */
.modal-card-theme {
    max-width: 920px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.modal-body-theme,
.modal-card-theme .modal-body {
    padding: 16px 20px 14px;
    overflow: hidden !important;
    /* Ensure theme modal body never has its own scrollbar/slider */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.icon-badge-purple {
    background: #f3e8ff;
    color: #7e22ce;
}

[data-theme="dark"] .icon-badge-purple {
    background: rgba(126, 34, 206, 0.25);
    color: #d8b4fe;
}

[data-theme="cream"] .icon-badge-purple {
    background: #f3ecdd;
    color: #18181b;
}

/* Theme Modal Specific Footer & Status */
.modal-card-theme .modal-footer,
.modal-footer-theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: var(--bg-subtle) !important;
    border-top: var(--card-border-width, 1px) solid var(--border-color) !important;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.theme-footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-subtle);
    user-select: none;
}

.theme-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 8px var(--brand-primary);
    display: inline-block;
    flex-shrink: 0;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.theme-status-text {
    color: var(--text-main);
    font-weight: 600;
}

@media (max-width: 600px) {

    .modal-card-theme .modal-footer,
    .modal-footer-theme {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }

    .modal-footer-theme .theme-footer-status {
        justify-content: center;
    }

    .modal-footer-theme #btn-confirm-theme {
        width: 100%;
    }
}

/* Two-column Scrollable Theme Grid - The ONLY slider in the theme selection window */
.theme-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(90vh - 170px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    padding: 6px 10px 8px 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-primary) var(--bg-subtle);
}

.theme-options-grid::-webkit-scrollbar {
    width: 6px;
}

.theme-options-grid::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
}

.theme-options-grid::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-full);
}

.theme-options-grid::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

@media (max-width: 680px) {
    .theme-options-grid {
        grid-template-columns: 1fr;
        max-height: calc(90vh - 160px);
    }
}

.theme-option-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: var(--card-border-width, 1.5px) solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    user-select: none;
}

.theme-option-card:hover {
    border-color: var(--brand-primary);
    background: var(--bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.theme-option-card.active {
    border-color: var(--brand-primary);
    background: var(--brand-light);
    box-shadow: 0 0 0 2px var(--brand-focus-ring);
}

.theme-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}

.theme-preview-palette {
    display: flex;
    gap: 4px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.14);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.preview-swatch {
    width: 14px;
    height: 24px;
    border-radius: 3px;
    display: inline-block;
}

/* ==============================================================================
   12 Theme Preview Palette Swatches
============================================================================== */
/* 1. Light Neutral */
.theme-preview-light {
    background: #f8fafc;
}

.theme-preview-light .swatch-bg {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
}

.theme-preview-light .swatch-surface {
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.theme-preview-light .swatch-accent {
    background: #2563eb;
}

/* 2. Midnight Dark */
.theme-preview-dark {
    background: #0a0e17;
}

.theme-preview-dark .swatch-bg {
    background: #0a0e17;
    border: 1px solid #1f2937;
}

.theme-preview-dark .swatch-surface {
    background: #111827;
    border: 1px solid #334155;
}

.theme-preview-dark .swatch-accent {
    background: #3b82f6;
}

/* 3. Cream & Modern Outline */
.theme-preview-cream {
    background: #fbf7ee;
}

.theme-preview-cream .swatch-bg {
    background: #fbf7ee;
    border: 0.6px solid #27272a;
}

.theme-preview-cream .swatch-surface {
    background: #fffef9;
    border: 0.6px solid #27272a;
}

.theme-preview-cream .swatch-accent {
    background: #18181b;
}

/* 4. Cyberpunk Neon */
.theme-preview-cyberpunk {
    background: #080711;
    border-color: #06b6d4;
}

.theme-preview-cyberpunk .swatch-bg {
    background: #080711;
    border: 1px solid #191636;
}

.theme-preview-cyberpunk .swatch-surface {
    background: #100e24;
    border: 1px solid #06b6d4;
}

.theme-preview-cyberpunk .swatch-accent {
    background: #ec4899;
    box-shadow: 0 0 4px #ec4899;
}

/* 5. Emerald Tactical */
.theme-preview-tactical {
    background: #061812;
    border-color: #1e634e;
}

.theme-preview-tactical .swatch-bg {
    background: #061812;
    border: 1px solid #11382c;
}

.theme-preview-tactical .swatch-surface {
    background: #0b261e;
    border: 1px solid #1e634e;
}

.theme-preview-tactical .swatch-accent {
    background: #10b981;
}

/* 6. Nordic Frost */
.theme-preview-nordic {
    background: #f0f6fc;
    border-color: #bae6fd;
}

.theme-preview-nordic .swatch-bg {
    background: #f0f6fc;
    border: 1px solid #bae6fd;
}

.theme-preview-nordic .swatch-surface {
    background: #ffffff;
    border: 1px solid #bae6fd;
}

.theme-preview-nordic .swatch-accent {
    background: #0284c7;
}

/* 7. Crimson Protocol */
.theme-preview-crimson {
    background: #0f070b;
    border-color: #4c0519;
}

.theme-preview-crimson .swatch-bg {
    background: #0f070b;
    border: 1px solid #291421;
}

.theme-preview-crimson .swatch-surface {
    background: #1c0d16;
    border: 1px solid #4c0519;
}

.theme-preview-crimson .swatch-accent {
    background: #e11d48;
}

/* 8. Sunset Amber */
.theme-preview-amber {
    background: #140d07;
    border-color: #572a08;
}

.theme-preview-amber .swatch-bg {
    background: #140d07;
    border: 1px solid #311c0f;
}

.theme-preview-amber .swatch-surface {
    background: #22140a;
    border: 1px solid #572a08;
}

.theme-preview-amber .swatch-accent {
    background: #f59e0b;
}

/* 9. Royal Amethyst */
.theme-preview-amethyst {
    background: #0a0515;
    border-color: #3b0764;
}

.theme-preview-amethyst .swatch-bg {
    background: #0a0515;
    border: 1px solid #1f0f3d;
}

.theme-preview-amethyst .swatch-surface {
    background: #140a28;
    border: 1px solid #3b0764;
}

.theme-preview-amethyst .swatch-accent {
    background: #8b5cf6;
}

/* 10. High-Contrast Monolith */
.theme-preview-monolith {
    background: #000000;
    border-color: #ffffff;
}

.theme-preview-monolith .swatch-bg {
    background: #000000;
    border: 1px solid #404040;
}

.theme-preview-monolith .swatch-surface {
    background: #0a0a0a;
    border: 1px solid #ffffff;
}

.theme-preview-monolith .swatch-accent {
    background: #ffffff;
}

/* 11. Oceanic Abyss */
.theme-preview-oceanic {
    background: #03141a;
    border-color: #155e75;
}

.theme-preview-oceanic .swatch-bg {
    background: #03141a;
    border: 1px solid #0f3747;
}

.theme-preview-oceanic .swatch-surface {
    background: #07212b;
    border: 1px solid #155e75;
}

.theme-preview-oceanic .swatch-accent {
    background: #0ea5e9;
}

/* 12. Vintage Sepia Blotter */
.theme-preview-sepia {
    background: #f5efe1;
    border-color: #8c6f4e;
}

.theme-preview-sepia .swatch-bg {
    background: #f5efe1;
    border: 1px solid #e0d0b8;
}

.theme-preview-sepia .swatch-surface {
    background: #fcf9f2;
    border: 1px solid #8c6f4e;
}

.theme-preview-sepia .swatch-accent {
    background: #8c6f4e;
}

/* 13. Synthwave 80s */
.theme-preview-synthwave {
    background: #120726;
    border-color: #ff2a85;
}

.theme-preview-synthwave .swatch-bg {
    background: #120726;
    border: 1px solid #3b1a72;
}

.theme-preview-synthwave .swatch-surface {
    background: #1e0f3d;
    border: 1px solid #ff2a85;
}

.theme-preview-synthwave .swatch-accent {
    background: #ff2a85;
    box-shadow: 0 0 5px #ff2a85;
}

/* 14. Matrix Terminal */
.theme-preview-matrix {
    background: #020603;
    border-color: #00ff66;
}

.theme-preview-matrix .swatch-bg {
    background: #020603;
    border: 1px solid #12381e;
}

.theme-preview-matrix .swatch-surface {
    background: #061109;
    border: 1px solid #00ff66;
}

.theme-preview-matrix .swatch-accent {
    background: #00ff66;
    box-shadow: 0 0 5px #00ff66;
}

/* 15. Dracula Vampire */
.theme-preview-dracula {
    background: #21222c;
    border-color: #6272a4;
}

.theme-preview-dracula .swatch-bg {
    background: #21222c;
    border: 1px solid #3e4254;
}

.theme-preview-dracula .swatch-surface {
    background: #282a36;
    border: 1px solid #bd93f9;
}

.theme-preview-dracula .swatch-accent {
    background: #bd93f9;
}

/* 16. Tokyo Night */
.theme-preview-tokyo-night {
    background: #16161e;
    border-color: #3b4261;
}

.theme-preview-tokyo-night .swatch-bg {
    background: #16161e;
    border: 1px solid #2f354f;
}

.theme-preview-tokyo-night .swatch-surface {
    background: #1a1b26;
    border: 1px solid #7aa2f7;
}

.theme-preview-tokyo-night .swatch-accent {
    background: #7aa2f7;
}

/* 17. Solarized Light */
.theme-preview-solarized-light {
    background: #fdf6e3;
    border-color: #b7ab95;
}

.theme-preview-solarized-light .swatch-bg {
    background: #fdf6e3;
    border: 1px solid #d3cbb7;
}

.theme-preview-solarized-light .swatch-surface {
    background: #eee8d5;
    border: 1px solid #b7ab95;
}

.theme-preview-solarized-light .swatch-accent {
    background: #268bd2;
}

/* 18. Solarized Dark */
.theme-preview-solarized-dark {
    background: #00212b;
    border-color: #195869;
}

.theme-preview-solarized-dark .swatch-bg {
    background: #00212b;
    border: 1px solid #0e4857;
}

.theme-preview-solarized-dark .swatch-surface {
    background: #002b36;
    border: 1px solid #2aa198;
}

.theme-preview-solarized-dark .swatch-accent {
    background: #2aa198;
}

/* 19. Rose Quartz & Copper */
.theme-preview-rose-gold {
    background: #181216;
    border-color: #f472b6;
}

.theme-preview-rose-gold .swatch-bg {
    background: #181216;
    border: 1px solid #3d2b3a;
}

.theme-preview-rose-gold .swatch-surface {
    background: #241a22;
    border: 1px solid #f472b6;
}

.theme-preview-rose-gold .swatch-accent {
    background: #f472b6;
}

/* 20. Biohazard Alert */
.theme-preview-hazard {
    background: #101113;
    border-color: #eab308;
}

.theme-preview-hazard .swatch-bg {
    background: #101113;
    border: 1px solid #2f343d;
}

.theme-preview-hazard .swatch-surface {
    background: #181a1e;
    border: 1px solid #eab308;
}

.theme-preview-hazard .swatch-accent {
    background: #eab308;
    box-shadow: 0 0 4px #eab308;
}

/* 21. Deep Forest */
.theme-preview-forest {
    background: #09150e;
    border-color: #2e6b4d;
}

.theme-preview-forest .swatch-bg {
    background: #09150e;
    border: 1px solid #1c422f;
}

.theme-preview-forest .swatch-surface {
    background: #0f2419;
    border: 1px solid #2e6b4d;
}

.theme-preview-forest .swatch-accent {
    background: #84cc16;
}

/* 22. Glacier Sub-Zero */
.theme-preview-glacier {
    background: #05101a;
    border-color: #38bdf8;
}

.theme-preview-glacier .swatch-bg {
    background: #05101a;
    border: 1px solid #173b60;
}

.theme-preview-glacier .swatch-surface {
    background: #0a1b2c;
    border: 1px solid #38bdf8;
}

.theme-preview-glacier .swatch-accent {
    background: #38bdf8;
    box-shadow: 0 0 5px #38bdf8;
}

/* 23. Espresso Roast */
.theme-preview-espresso {
    background: #15100e;
    border-color: #785a49;
}

.theme-preview-espresso .swatch-bg {
    background: #15100e;
    border: 1px solid #3a2e29;
}

.theme-preview-espresso .swatch-surface {
    background: #201916;
    border: 1px solid #d97706;
}

.theme-preview-espresso .swatch-accent {
    background: #d97706;
}

/* 24. Bubblegum Pop */
.theme-preview-bubblegum {
    background: #fdf2f8;
    border-color: #f472b6;
}

.theme-preview-bubblegum .swatch-bg {
    background: #fdf2f8;
    border: 1px solid #fce7f3;
}

.theme-preview-bubblegum .swatch-surface {
    background: #ffffff;
    border: 1px solid #f472b6;
}

.theme-preview-bubblegum .swatch-accent {
    background: #ec4899;
}

/* Theme Check Indicator */
.theme-check-icon {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--border-color);
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    transition: var(--transition);
}

.theme-option-card.active .theme-check-icon {
    background: var(--brand-primary);
    color: #ffffff;
}

[data-theme="monolith"] .theme-option-card.active .theme-check-icon {
    background: #ffffff;
    color: #000000;
}

[data-theme="cream"] .theme-option-card.active .theme-check-icon {
    background: #18181b;
    color: #fffef9;
}

/* Theme Card Information & Tags */
.theme-card-info {
    flex: 1;
    min-width: 0;
}

.theme-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.theme-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-tag-pill {
    display: inline-block;
    padding: 2px 7px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.tag-light {
    background: #eff6ff;
    color: #1d4ed8;
}

.tag-dark {
    background: #1e293b;
    color: #93c5fd;
}

.tag-minimal {
    background: #f3ecdd;
    color: #18181b;
    border: 0.6px solid #27272a;
}

.tag-neon {
    background: rgba(6, 182, 212, 0.2);
    color: #06b6d4;
    border: 1px solid rgba(6, 182, 212, 0.4);
}

.tag-tactical {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.tag-arctic {
    background: #e0f2fe;
    color: #0284c7;
}

.tag-crimson {
    background: rgba(225, 29, 72, 0.2);
    color: #fb7185;
}

.tag-amber {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.tag-purple {
    background: rgba(139, 92, 246, 0.2);
    color: #c084fc;
}

.tag-brutalist {
    background: #ffffff;
    color: #000000;
    font-weight: 800;
}

.tag-teal {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

.tag-sepia {
    background: #ede2cd;
    color: #5c4028;
    border: 1px solid #8c6f4e;
}

.tag-synthwave {
    background: rgba(255, 42, 133, 0.2);
    color: #ff2a85;
    border: 1px solid rgba(255, 42, 133, 0.4);
}

.tag-matrix {
    background: rgba(0, 255, 102, 0.18);
    color: #00ff66;
    border: 1px solid rgba(0, 255, 102, 0.4);
    font-family: 'JetBrains Mono', monospace, sans-serif;
}

.tag-dracula {
    background: rgba(189, 147, 249, 0.2);
    color: #bd93f9;
    border: 1px solid rgba(189, 147, 249, 0.4);
}

.tag-tokyo {
    background: rgba(122, 162, 247, 0.2);
    color: #7aa2f7;
    border: 1px solid rgba(122, 162, 247, 0.4);
}

.tag-solar-light {
    background: #e4dcbe;
    color: #073642;
    border: 1px solid #b7ab95;
}

.tag-solar-dark {
    background: #073642;
    color: #2aa198;
    border: 1px solid #195869;
}

.tag-rose {
    background: rgba(244, 114, 182, 0.2);
    color: #f472b6;
    border: 1px solid rgba(244, 114, 182, 0.4);
}

.tag-hazard {
    background: rgba(234, 179, 8, 0.22);
    color: #facc15;
    border: 1px solid #eab308;
    font-weight: 800;
}

.tag-forest {
    background: rgba(132, 204, 22, 0.2);
    color: #a3e635;
    border: 1px solid rgba(132, 204, 22, 0.4);
}

.tag-glacier {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.4);
}

.tag-espresso {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
    border: 1px solid #785a49;
}

.tag-bubblegum {
    background: #fce7f3;
    color: #be185d;
    border: 1px solid #f472b6;
}

.theme-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* ==============================================================================
   Custom Overrides: Cream & Modern Refined Outline Theme
============================================================================== */
[data-theme="cream"] .app-header {
    border-bottom: 0.6px solid var(--border-color);
}

[data-theme="cream"] .metric-card,
[data-theme="cream"] .chart-card,
[data-theme="cream"] .search-window-card,
[data-theme="cream"] .results-card,
[data-theme="cream"] .map-card,
[data-theme="cream"] .db-card,
[data-theme="cream"] .upload-action-card,
[data-theme="cream"] .modal-card,
[data-theme="cream"] .narrative-section,
[data-theme="cream"] .form-checkbox-card,
[data-theme="cream"] .theme-option-card {
    border: 0.6px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="cream"] input,
[data-theme="cream"] select,
[data-theme="cream"] textarea,
[data-theme="cream"] .date-filter-box,
[data-theme="cream"] .header-center,
[data-theme="cream"] .preset-pill,
[data-theme="cream"] .results-summary-strip,
[data-theme="cream"] .map-stat-badge,
[data-theme="cream"] .search-window-header {
    border-width: 0.6px;
}

[data-theme="cream"] .metric-card:hover,
[data-theme="cream"] .db-card:hover,
[data-theme="cream"] .upload-action-card:hover {
    box-shadow: var(--shadow-md);
}

[data-theme="cream"] .btn-outline {
    border: 0.6px solid var(--border-color);
    background: #fffef9;
    color: var(--text-main);
    box-shadow: none;
}

[data-theme="cream"] .btn-outline:hover {
    background: var(--bg-hover);
    color: #000000;
    border-color: #000000;
}

[data-theme="cream"] .btn-primary {
    background: #18181b;
    color: #fffef9;
    border: 0.6px solid #18181b;
    box-shadow: var(--shadow-sm);
}

[data-theme="cream"] .btn-primary:hover {
    background: #27272a;
    border-color: #000000;
}

[data-theme="cream"] .data-table th {
    border-bottom: 0.6px solid var(--border-color);
    background: #f3ecdd;
    color: #18181b;
}

[data-theme="cream"] .data-table td {
    border-bottom: 0.6px solid #ebdcc7;
}

[data-theme="cream"] .data-table tbody tr:hover {
    background-color: #f5eedf;
}

[data-theme="cream"] .table-id-badge {
    background: #18181b;
    color: #fffef9;
}

[data-theme="cream"] .type-pill {
    background: #27272a;
    color: #fffef9;
}

[data-theme="cream"] .return-arrow-decal {
    border: 0.6px solid var(--border-color);
    background: #f3ecdd;
    color: #18181b;
}

[data-theme="cream"] .btn-back-portal:hover .return-arrow-decal {
    background: #18181b;
    color: #fffef9;
    border-color: #18181b;
}

/* ==============================================================================
   Custom Overrides: Midnight Dark Theme
============================================================================== */
[data-theme="dark"] .modal-header,
[data-theme="dark"] .narrative-header {
    background: #172033;
    border-color: #2e3d54;
}

[data-theme="dark"] .dropzone {
    background: #172033;
    border-color: #334155;
}

[data-theme="dark"] .dropzone:hover,
[data-theme="dark"] .dropzone.drag-over {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

[data-theme="dark"] .data-table th {
    background: #172033;
    border-bottom-color: #2e3d54;
    color: #cbd5e1;
}

[data-theme="dark"] .data-table tbody tr:hover {
    background-color: #1e293b;
}

[data-theme="dark"] .return-arrow-decal {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .btn-back-portal:hover .return-arrow-decal {
    background: #3b82f6;
    color: #ffffff;
}

/* ==============================================================================
   Custom Overrides: Synthwave 80s Neon
============================================================================== */
[data-theme="synthwave"] .metric-card,
[data-theme="synthwave"] .chart-card,
[data-theme="synthwave"] .search-window-card,
[data-theme="synthwave"] .results-card,
[data-theme="synthwave"] .map-card,
[data-theme="synthwave"] .db-card,
[data-theme="synthwave"] .upload-action-card,
[data-theme="synthwave"] .modal-card {
    border-color: rgba(255, 42, 133, 0.5);
    box-shadow: 0 4px 18px rgba(255, 42, 133, 0.12), 0 0 0 1px rgba(255, 42, 133, 0.2);
}

[data-theme="synthwave"] .metric-card:hover,
[data-theme="synthwave"] .db-card:hover {
    border-color: #ff2a85;
    box-shadow: 0 6px 24px rgba(255, 42, 133, 0.3), 0 0 12px rgba(255, 42, 133, 0.4);
}

[data-theme="synthwave"] .btn-primary {
    background: linear-gradient(135deg, #ff2a85 0%, #a855f7 100%);
    border-color: #ff2a85;
    box-shadow: 0 0 14px rgba(255, 42, 133, 0.4);
    color: #ffffff;
}

[data-theme="synthwave"] .return-arrow-decal {
    border: 1px solid #ff2a85;
    background: rgba(255, 42, 133, 0.18);
    color: #ff2a85;
    box-shadow: 0 0 8px rgba(255, 42, 133, 0.3);
}

/* ==============================================================================
   Custom Overrides: Matrix Terminal
============================================================================== */
[data-theme="matrix"] .metric-card,
[data-theme="matrix"] .chart-card,
[data-theme="matrix"] .search-window-card,
[data-theme="matrix"] .results-card,
[data-theme="matrix"] .map-card,
[data-theme="matrix"] .db-card,
[data-theme="matrix"] .upload-action-card,
[data-theme="matrix"] .modal-card {
    border-color: rgba(0, 255, 102, 0.4);
    box-shadow: 0 4px 14px rgba(0, 255, 102, 0.08), 0 0 6px rgba(0, 255, 102, 0.12);
}

[data-theme="matrix"] .metric-card:hover,
[data-theme="matrix"] .db-card:hover {
    border-color: #00ff66;
    box-shadow: 0 6px 20px rgba(0, 255, 102, 0.25), 0 0 10px rgba(0, 255, 102, 0.35);
}

[data-theme="matrix"] .btn-primary {
    background: #00ff66;
    color: #020603;
    font-weight: 800;
    border-color: #00ff66;
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.4);
}

[data-theme="matrix"] .btn-primary:hover {
    background: #39ff14;
    box-shadow: 0 0 18px rgba(0, 255, 102, 0.6);
}

[data-theme="matrix"] .table-id-badge {
    background: #00ff66;
    color: #020603;
    font-family: 'JetBrains Mono', monospace, sans-serif;
    font-weight: 800;
}

[data-theme="matrix"] .return-arrow-decal {
    border: 1px solid #00ff66;
    background: rgba(0, 255, 102, 0.15);
    color: #00ff66;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.3);
}

/* ==============================================================================
   Custom Overrides: Biohazard Industrial
============================================================================== */
[data-theme="hazard"] .metric-card,
[data-theme="hazard"] .chart-card,
[data-theme="hazard"] .search-window-card,
[data-theme="hazard"] .results-card,
[data-theme="hazard"] .map-card,
[data-theme="hazard"] .db-card,
[data-theme="hazard"] .upload-action-card,
[data-theme="hazard"] .modal-card {
    border: 2px solid #ca8a04;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

[data-theme="hazard"] .metric-card:hover,
[data-theme="hazard"] .db-card:hover {
    border-color: #facc15;
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.25);
}

[data-theme="hazard"] .btn-primary {
    background: #eab308;
    color: #101113;
    font-weight: 800;
    border: 2px solid #ca8a04;
}

[data-theme="hazard"] .return-arrow-decal {
    border: 2px solid #eab308;
    background: rgba(234, 179, 8, 0.18);
    color: #facc15;
}

/* ==============================================================================
   Custom Overrides: Rose Quartz Luxury
============================================================================== */
[data-theme="rose-gold"] .metric-card,
[data-theme="rose-gold"] .chart-card,
[data-theme="rose-gold"] .search-window-card,
[data-theme="rose-gold"] .results-card,
[data-theme="rose-gold"] .map-card,
[data-theme="rose-gold"] .db-card,
[data-theme="rose-gold"] .upload-action-card,
[data-theme="rose-gold"] .modal-card {
    border: 1.5px solid rgba(244, 114, 182, 0.4);
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.1);
}

[data-theme="rose-gold"] .metric-card:hover,
[data-theme="rose-gold"] .db-card:hover {
    border-color: #f472b6;
    box-shadow: 0 6px 20px rgba(244, 114, 182, 0.25);
}

[data-theme="rose-gold"] .btn-primary {
    background: linear-gradient(135deg, #f472b6 0%, #fb923c 100%);
    border-color: #f472b6;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(244, 114, 182, 0.35);
}

[data-theme="rose-gold"] .return-arrow-decal {
    border: 1px solid #f472b6;
    background: rgba(244, 114, 182, 0.15);
    color: #f472b6;
}

/* ==============================================================================
   Custom Overrides: Glacier Sub-Zero
============================================================================== */
[data-theme="glacier"] .metric-card,
[data-theme="glacier"] .chart-card,
[data-theme="glacier"] .search-window-card,
[data-theme="glacier"] .results-card,
[data-theme="glacier"] .map-card,
[data-theme="glacier"] .db-card,
[data-theme="glacier"] .upload-action-card,
[data-theme="glacier"] .modal-card {
    border: 1.5px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.12);
}

[data-theme="glacier"] .metric-card:hover,
[data-theme="glacier"] .db-card:hover {
    border-color: #38bdf8;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.3), 0 0 10px rgba(56, 189, 248, 0.25);
}

[data-theme="glacier"] .btn-primary {
    background: #38bdf8;
    color: #05101a;
    font-weight: 700;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

[data-theme="glacier"] .return-arrow-decal {
    border: 1px solid #38bdf8;
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
}

/* ==============================================================================
   MAP CARD: Interactive ArcGIS Geospatial Map
============================================================================== */
.map-card {
    background: var(--bg-surface);
    border: var(--card-border-width, 1px) solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: 24px;
    margin-bottom: 36px;
    overflow: visible;
    position: relative;
    transition: var(--transition);
}

.map-card-header {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}

.map-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.map-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.map-header-title h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.map-header-title p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.map-header-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 100;
}

.map-stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-main);
}

.map-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.map-basemap-select-wrap,
.map-tool-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Custom Compact Basemap Dropdown */
.map-basemap-picker-wrap {
    position: relative;
    z-index: 102;
}

.custom-basemap-dropdown {
    position: relative;
    display: inline-block;
    z-index: 105;
}

.btn-basemap-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 8px 0 5px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.btn-basemap-trigger:hover,
.btn-basemap-trigger.active {
    border-color: var(--primary);
    background: var(--bg-subtle);
}

.btn-basemap-trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.basemap-trigger-swatch {
    width: 22px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.basemap-trigger-label {
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.basemap-trigger-arrow {
    flex-shrink: 0;
    opacity: 0.65;
    transition: transform 0.2s ease;
}

.btn-basemap-trigger.active .basemap-trigger-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu Container */
.basemap-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 250px;
    max-height: 310px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 4px 10px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.basemap-dropdown-menu::-webkit-scrollbar {
    width: 5px;
}

.basemap-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.basemap-category-header {
    padding: 6px 8px 3px 8px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    margin-top: 4px;
}

.basemap-category-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 3px;
}

.basemap-option-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s ease;
    user-select: none;
}

.basemap-option-item:hover {
    background: var(--bg-subtle);
}

.basemap-option-item.selected {
    background: rgba(37, 99, 235, 0.12);
}

.basemap-option-swatch {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.basemap-option-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.basemap-option-name {
    font-size: 0.77rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.basemap-option-item.selected .basemap-option-name {
    color: var(--primary);
    font-weight: 700;
}

.basemap-option-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
    opacity: 0.85;
}

.basemap-option-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.basemap-option-item.selected .basemap-option-check {
    opacity: 1;
}

/* Basemap Swatch Classes (Visual Previews) */
.bm-topo {
    background: linear-gradient(135deg, #b8d8a2 0%, #e2dcba 50%, #8ec07c 100%);
    background-image: repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 3px, rgba(100, 135, 70, 0.35) 4px, transparent 5px);
}

.bm-streets {
    background: #ece8e1;
    background-image:
        linear-gradient(#f8f6f0 2px, transparent 2px),
        linear-gradient(90deg, #f8f6f0 2px, transparent 2px),
        linear-gradient(45deg, transparent 40%, #e0a96d 40%, #e0a96d 48%, transparent 48%);
    background-size: 8px 8px, 8px 8px, 100% 100%;
}

.bm-nav {
    background: #dfe6ed;
    background-image:
        linear-gradient(45deg, transparent 38%, #ff8c00 38%, #ff8c00 48%, transparent 48%),
        linear-gradient(-45deg, transparent 38%, #0077cc 38%, #0077cc 48%, transparent 48%);
}

.bm-relief {
    background: linear-gradient(135deg, #ded6c5 0%, #b8ab94 50%, #ded6c5 100%);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.12) 25%, transparent 25%);
}

.bm-gray {
    background: #e6e8eb;
    background-image: linear-gradient(90deg, #d3d7dc 1px, transparent 1px), linear-gradient(#d3d7dc 1px, transparent 1px);
    background-size: 6px 6px;
}

.bm-osm {
    background: #aad3df;
    background-image:
        linear-gradient(135deg, #cbe0a2 0%, #cbe0a2 55%, transparent 55%),
        linear-gradient(45deg, transparent 40%, #f9a825 40%, #f9a825 50%, transparent 50%);
}

.bm-usgs-topo {
    background: linear-gradient(135deg, #d6e2cf 0%, #eadfc9 50%, #c1d6b8 100%);
    background-image:
        repeating-radial-gradient(circle at 30% 30%, transparent 0, transparent 3px, rgba(160, 110, 60, 0.3) 4px, transparent 5px),
        linear-gradient(45deg, transparent 44%, #b94a48 44%, #b94a48 48%, transparent 48%);
}

.bm-usgs-imagery {
    background: radial-gradient(circle at 30% 40%, #1d4023 0%, #0f2415 60%), linear-gradient(135deg, #1d4023 0%, #1a3c5a 100%);
    background-image:
        repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 3px, rgba(255, 255, 255, 0.35) 4px, transparent 5px),
        linear-gradient(45deg, transparent 40%, #ff8c00 40%, #ff8c00 46%, transparent 46%);
}

.bm-usgs-relief {
    background: linear-gradient(135deg, #cdc3b2 0%, #9e917d 50%, #6e6454 100%);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%);
}

.bm-usgs-hydro {
    background: #eef4f8;
    background-image:
        linear-gradient(45deg, transparent 40%, #0099cc 40%, #0099cc 46%, transparent 46%),
        linear-gradient(-45deg, transparent 40%, #33b5e5 40%, #33b5e5 46%, transparent 46%);
}

.bm-darkgray {
    background: #232528;
    background-image: linear-gradient(90deg, #373a3f 1px, transparent 1px), linear-gradient(#373a3f 1px, transparent 1px);
    background-size: 6px 6px;
}

.bm-night {
    background: #0d131f;
    background-image:
        linear-gradient(45deg, transparent 38%, #00e5ff 38%, #00e5ff 46%, transparent 46%),
        linear-gradient(-45deg, transparent 38%, #1f4068 38%, #1f4068 48%, transparent 48%);
}

.bm-satellite {
    background: radial-gradient(circle at 30% 40%, #1d4023 0%, #0f2415 60%), linear-gradient(135deg, #1d4023 0%, #1a3c5a 100%);
}

.bm-hybrid {
    background: radial-gradient(circle at 30% 40%, #1d4023 0%, #0f2415 60%), linear-gradient(135deg, #1d4023 0%, #1a3c5a 100%);
    background-image:
        linear-gradient(45deg, transparent 40%, #ffffff 40%, #ffffff 46%, transparent 46%),
        linear-gradient(-45deg, transparent 40%, #fef08a 40%, #fef08a 46%, transparent 46%);
}

.bm-terrain {
    background: linear-gradient(135deg, #d8cbab 0%, #9c8a60 50%, #6e8452 100%);
}

.bm-oceans {
    background: linear-gradient(180deg, #48cae4 0%, #0077b6 40%, #03045e 100%);
    background-image: repeating-radial-gradient(circle at 50% 0%, transparent 0, transparent 3px, rgba(255, 255, 255, 0.25) 4px, transparent 5px);
}


.map-container-wrap {
    position: relative;
    width: 100%;
    height: 520px;
    min-height: 320px;
    max-height: 1800px;
    background: var(--bg-subtle);
    overflow: hidden;
}

.map-color-picker-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.map-color-input {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: transparent;
    outline: none;
    vertical-align: middle;
}

.map-color-input::-webkit-color-swatch-wrapper {
    padding: 1px;
}

.map-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.map-size-input-group {
    display: inline-flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1px 6px 1px 4px;
    height: 30px;
    box-sizing: border-box;
}

.map-size-input-group:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-focus-ring);
}

.map-px-input {
    width: 44px;
    padding: 0 2px;
    border: none !important;
    background: transparent !important;
    color: var(--text-main) !important;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: right;
    outline: none;
    box-shadow: none !important;
}

.map-px-input::-webkit-inner-spin-button,
.map-px-input::-webkit-outer-spin-button {
    opacity: 0.7;
}

.map-px-unit {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-subtle);
    user-select: none;
    margin-left: 2px;
}

/* Draggable Corner Extender */
.map-corner-extender {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: var(--bg-surface);
    border-top-left-radius: var(--radius-md);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    box-shadow: -2px -2px 8px rgba(0, 0, 0, 0.12);
    cursor: ns-resize;
    user-select: none;
    touch-action: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    opacity: 0.88;
}

.map-corner-extender:hover,
.map-corner-extender.active-dragging {
    opacity: 1;
    background: var(--brand-light);
    border-color: var(--brand-primary);
    box-shadow: -3px -3px 12px var(--brand-focus-ring);
}

.extender-tooltip {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

.map-corner-extender:hover .extender-tooltip,
.map-corner-extender.active-dragging .extender-tooltip {
    color: var(--brand-primary);
}

.extender-grip {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
    pointer-events: none;
}

.map-corner-extender:hover .extender-grip,
.map-corner-extender.active-dragging .extender-grip {
    color: var(--brand-primary);
}

.map-container-wrap {
    position: relative;
    overflow: hidden !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    z-index: 1;
}

.arcgis-map-container,
#arcgis-map-view {
    width: 100%;
    height: 100%;
    min-height: 520px;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    overflow: hidden !important;
}

#arcgis-map-view:focus,
#arcgis-map-view:focus-visible,
#arcgis-map-view:focus-within,
#arcgis-map-view .esri-view,
#arcgis-map-view .esri-view:focus,
#arcgis-map-view .esri-view:focus-visible,
#arcgis-map-view .esri-view-root,
#arcgis-map-view .esri-view-root:focus,
#arcgis-map-view .esri-view-surface,
#arcgis-map-view .esri-view-surface:focus,
#arcgis-map-view .esri-view-surface:focus-visible,
#arcgis-map-view .esri-view-surface--touch-none,
#arcgis-map-view .esri-view-surface--touch-none:focus,
#arcgis-map-view canvas,
#arcgis-map-view canvas:focus,
#arcgis-map-view canvas:focus-visible,
.esri-view:focus,
.esri-view-surface:focus,
.esri-view-surface:focus-visible {
    outline: none !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    border: none !important;
}

#arcgis-map-view .esri-view,
#arcgis-map-view .esri-view-root,
#arcgis-map-view .esri-view-surface {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
}

.map-loading-overlay,
.map-empty-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    z-index: 10;
    text-align: center;
    backdrop-filter: blur(2px);
}

.map-loading-overlay p,
.map-empty-overlay p {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-main);
}

.map-empty-overlay svg {
    color: var(--text-faint);
}

/* ==============================================================================
   ArcGIS Popup Styles Adaptation (Adaptive across ALL 24 Themes)
============================================================================== */
/* ==============================================================================
   ArcGIS Popup & Widget Styles Adaptation (Adaptive across ALL 24 Themes)
============================================================================== */
.esri-popup,
.esri-popup--shadow {
    background: transparent !important;
    box-shadow: none !important;
}

.esri-popup__main-container {
    border-radius: 12px !important;
    box-shadow: var(--shadow-modal) !important;
    overflow: hidden !important;
    font-family: inherit !important;
    border: var(--card-border-width, 1.5px) solid var(--border-color) !important;
    background: var(--bg-surface) !important;
    width: 510px !important;
    max-width: min(95vw, 530px) !important;
    max-height: 480px !important;
}

.esri-popup__header,
.esri-popup__header-container,
.esri-popup__footer,
.esri-popup__actions,
.esri-popup__action,
.esri-popup__navigation {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.esri-popup__body {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    margin: 0 !important;
}

.esri-popup__content {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 12px !important;
}

/* Arrow pointer matching popup background and theme border */
.esri-popup__pointer {
    background: transparent !important;
}

.esri-popup__pointer-direction {
    background: var(--bg-surface) !important;
    box-shadow: 0 0 0 1px var(--border-color) !important;
}

/* Close & action buttons inside ESRI popup */
.esri-popup__button,
.esri-popup__icon {
    color: var(--text-muted) !important;
    background: transparent !important;
}

.esri-popup__button:hover,
.esri-popup__icon:hover {
    color: var(--brand-primary) !important;
    background: var(--bg-hover) !important;
}

.esri-popup calcite-flow,
.esri-popup calcite-flow-item,
.esri-popup calcite-panel,
.esri-popup calcite-action-bar,
.esri-popup calcite-action,
.esri-features,
.esri-features__content,
.esri-features__content-feature,
.esri-features__container,
.esri-features__content-container,
div.esri-features__container.esri-features__content-container,
.esri-feature,
.esri-feature__content-node,
.esri-feature__main-container,
.esri-feature__size-container,
div.map-popup-frame.map-dataviewer {
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    --calcite-ui-foreground-1: var(--bg-surface) !important;
    --calcite-ui-foreground-2: var(--bg-subtle) !important;
    --calcite-ui-foreground-3: var(--bg-hover) !important;
    --calcite-ui-background: var(--bg-surface) !important;
    --calcite-ui-border-1: var(--border-color) !important;
    --calcite-ui-border-2: var(--border-subtle) !important;
    --calcite-ui-border-3: var(--border-color) !important;
    border: none !important;
    box-shadow: none !important;
}

div.esri-features__container.esri-features__content-container,
.esri-features__container.esri-features__content-container {
    padding: 6px 8px !important;
    background: var(--bg-surface) !important;
    background-color: var(--bg-surface) !important;
    margin: 0 !important;
}

.esri-view,
.esri-view .esri-popup {
    --calcite-ui-foreground-1: var(--bg-surface) !important;
    --calcite-ui-foreground-2: var(--bg-subtle) !important;
    --calcite-ui-foreground-3: var(--bg-hover) !important;
    --calcite-ui-text-1: var(--text-main) !important;
    --calcite-ui-text-2: var(--text-muted) !important;
    --calcite-ui-text-3: var(--text-subtle) !important;
    --calcite-ui-border-1: var(--border-color) !important;
    --calcite-ui-border-2: var(--border-subtle) !important;
    --calcite-ui-brand: var(--brand-primary) !important;
    --calcite-ui-brand-hover: var(--brand-hover) !important;
}

.esri-widget,
.esri-menu,
.esri-widget--button,
.esri-zoom .esri-widget--button {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

.esri-widget--button {
    border-radius: var(--radius-sm, 6px) !important;
    border: 1px solid var(--border-color) !important;
    transition: var(--transition) !important;
}

.esri-widget--button:hover,
.esri-zoom .esri-widget--button:hover {
    background: var(--bg-hover) !important;
    color: var(--brand-primary) !important;
}

.esri-attribution {
    background: var(--bg-surface) !important;
    color: var(--text-subtle) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.esri-attribution a {
    color: var(--text-muted) !important;
}

/* ==============================================================================
   Compact Dataviewer (ArcGIS Map Feature Popup)
============================================================================== */
.map-popup-frame {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.81rem;
    width: 100%;
    line-height: 1.35;
    background: var(--bg-surface);
    color: var(--text-main);
    border-radius: 10px;
    box-sizing: border-box;
}

/* Multi-Incident Location Header & Pager */
.map-dv-multi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: var(--brand-light, rgba(37, 99, 235, 0.1));
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.map-dv-multi-title-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 170px;
}

.map-dv-multi-badge {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--brand-primary, #2563eb);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 4px;
}

.map-dv-multi-loc {
    font-size: 0.70rem;
    color: var(--text-muted, #64748b);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 230px;
}

.map-dv-multi-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.map-dv-pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: 4px;
    padding: 2px 4px;
}

.map-dv-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid var(--border-subtle, #e2e8f0);
    background: var(--bg-subtle, #f8fafc);
    color: var(--text-main, #0f172a);
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.map-dv-pager-btn:hover:not(:disabled) {
    background: var(--brand-primary, #2563eb);
    color: #ffffff;
    border-color: var(--brand-primary, #2563eb);
}

.map-dv-pager-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.map-dv-pager-info {
    font-size: 0.70rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    padding: 0 4px;
    white-space: nowrap;
}

.map-dv-btn-toggle-list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.70rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-main, #0f172a);
    cursor: pointer;
    transition: all 0.15s ease;
    height: 24px;
}

.map-dv-btn-toggle-list:hover {
    border-color: var(--brand-primary, #2563eb);
    color: var(--brand-primary, #2563eb);
    background: #eff6ff;
}

/* Multi-Incident List View */
.map-dv-incidents-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}

.map-dv-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.map-dv-list-item:hover,
.map-dv-list-item.active {
    background: var(--bg-hover, #eff6ff);
    border-color: var(--brand-primary, #2563eb);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}

.map-dv-list-item-main {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.map-dv-list-type {
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-dv-list-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Dataviewer Header & Compact Action Bar */
.map-dv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.map-dv-header-left {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.map-dv-badge-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.map-dv-type {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.map-dv-arrest-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    white-space: nowrap;
    flex-shrink: 0;
}

.map-dv-date {
    font-size: 0.70rem;
    color: var(--text-subtle);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact Integrated Action Bar (Zoom, Details, Close) */
.map-dv-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.esri-popup .map-dv-btn,
.map-popup-frame .map-dv-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    white-space: nowrap !important;
    height: 23px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 1px solid var(--border-color) !important;
}

.esri-popup .map-dv-btn svg,
.map-popup-frame .map-dv-btn svg {
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.esri-popup .map-dv-btn-action,
.map-popup-frame .map-dv-btn-action {
    padding: 0 8px !important;
    background: var(--bg-subtle) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.esri-popup .map-dv-btn-action:hover,
.map-popup-frame .map-dv-btn-action:hover {
    background: var(--bg-hover) !important;
    color: var(--brand-primary) !important;
    border-color: var(--border-focus, var(--brand-primary)) !important;
}

.esri-popup .map-dv-btn-details,
.map-popup-frame .map-dv-btn-details {
    background: var(--brand-light, rgba(37, 99, 235, 0.12)) !important;
    color: var(--brand-primary, #2563eb) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

.esri-popup .map-dv-btn-details:hover,
.map-popup-frame .map-dv-btn-details:hover {
    background: var(--brand-primary, #2563eb) !important;
    color: #ffffff !important;
    border-color: var(--brand-primary, #2563eb) !important;
}

.esri-popup .map-dv-btn-icon,
.map-popup-frame .map-dv-btn-icon {
    width: 23px !important;
    padding: 0 !important;
}

.esri-popup .map-dv-btn-close,
.map-popup-frame .map-dv-btn-close {
    background: transparent !important;
    color: var(--text-subtle) !important;
    border: 1px solid transparent !important;
}

.esri-popup .map-dv-btn-close:hover,
.map-popup-frame .map-dv-btn-close:hover {
    background: var(--bg-hover) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Horizontal Key Metrics Strip (With Flexible Description) */
.map-dv-strip {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 5px 8px;
    background: var(--bg-subtle);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.map-dv-cell {
    display: flex;
    flex-direction: column;
    padding: 1px 3px;
    min-width: 0;
}

.map-dv-cell-zone {
    flex: 0 1 85px;
    max-width: 100px;
}

.map-dv-cell-loc {
    flex: 2 1 145px;
}

.map-dv-cell-desc {
    flex: 2 1 145px;
}

.map-dv-cell-arr {
    flex: 0 0 50px;
    text-align: center;
}

.map-dv-label {
    font-size: 0.61rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-subtle);
    letter-spacing: 0.03em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-dv-val {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.25;
}

.map-dv-cell-loc .map-dv-val,
.map-dv-cell-desc .map-dv-val {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.map-dv-cell-zone .map-dv-val,
.map-dv-cell-arr .map-dv-val {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-dv-val-loc {
    color: var(--brand-primary);
}

.map-dv-val-alert {
    color: #ef4444;
    font-weight: 700;
}

/* Narrative Reader Box */
.map-dv-narrative {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-surface);
    overflow: hidden;
}

.map-dv-narrative-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.map-dv-narrative-title {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-subtle);
    letter-spacing: 0.04em;
}

.map-dv-narrative-status {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--bg-surface);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
}

.map-dv-status-empty {
    color: var(--text-subtle);
}

.map-dv-narrative-content {
    padding: 6px 9px !important;
    font-size: 0.74rem !important;
    color: var(--text-muted) !important;
    line-height: 1.36 !important;
    max-height: 80px !important;
    overflow-y: auto !important;
    word-break: break-word !important;
    white-space: normal !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--brand-primary) var(--bg-subtle) !important;
}

.map-dv-narrative-content::-webkit-scrollbar {
    width: 4px;
}

.map-dv-narrative-content::-webkit-scrollbar-track {
    background: var(--bg-subtle);
    border-radius: var(--radius-full);
}

.map-dv-narrative-content::-webkit-scrollbar-thumb {
    background: var(--brand-primary);
    border-radius: var(--radius-full);
}

.map-dv-narrative-content::-webkit-scrollbar-thumb:hover {
    background: var(--brand-hover);
}

/* Theme overrides for Map */
[data-theme="dark"] .map-card-header {
    background: #172033;
    border-color: #2e3d54;
}

[data-theme="dark"] .map-icon-badge {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}

[data-theme="dark"] .map-loading-overlay,
[data-theme="dark"] .map-empty-overlay {
    background: rgba(10, 14, 23, 0.9);
    color: #cbd5e1;
}

[data-theme="dark"] .esri-popup__main-container {
    border-color: #2e3d54 !important;
    background: #111827 !important;
}

[data-theme="dark"] .esri-popup calcite-flow,
[data-theme="dark"] .esri-popup calcite-flow-item,
[data-theme="dark"] .esri-popup calcite-panel,
[data-theme="dark"] .esri-popup calcite-action-bar,
[data-theme="dark"] .esri-popup calcite-action,
[data-theme="dark"] .esri-features,
[data-theme="dark"] .esri-features__content,
[data-theme="dark"] .esri-features__content-feature,
[data-theme="dark"] .esri-features__container,
[data-theme="dark"] .esri-features__content-container,
[data-theme="dark"] div.esri-features__container.esri-features__content-container,
[data-theme="dark"] .esri-feature,
[data-theme="dark"] .esri-feature__content-node,
[data-theme="dark"] div.map-popup-frame.map-dataviewer {
    background: #111827 !important;
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    --calcite-ui-foreground-1: #111827 !important;
    --calcite-ui-foreground-2: #1e293b !important;
    --calcite-ui-foreground-3: #2e3d54 !important;
    box-shadow: none !important;
    border: none !important;
}

[data-theme="dark"] .esri-popup__body,
[data-theme="dark"] .esri-popup__content,
[data-theme="dark"] .map-popup-frame {
    background: #111827 !important;
    color: #f3f4f6 !important;
}

[data-theme="dark"] .map-dv-strip {
    background: #1e293b !important;
    border-color: #2e3d54 !important;
}

[data-theme="dark"] .map-dv-narrative {
    background: #0f172a !important;
    border-color: #2e3d54 !important;
}

[data-theme="dark"] .map-dv-narrative-bar {
    background: #1e293b !important;
    border-color: #2e3d54 !important;
}

[data-theme="dark"] .map-dv-btn-details {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
}

[data-theme="dark"] .map-dv-btn-details:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

[data-theme="cream"] .map-icon-badge {
    background: #f3ecdd;
    color: #18181b;
}

[data-theme="cream"] .esri-popup__main-container {
    border: 0.6px solid #18181b !important;
    background: #fffef9 !important;
}

[data-theme="cream"] .map-popup-inspect-btn {
    background: #18181b;
    color: #fffef9;
    border: 0.6px solid #18181b;
}

[data-theme="cream"] .map-popup-inspect-btn:hover {
    background: #27272a;
}

/* Theme-specific ESRI Popup Accents */
[data-theme="cyberpunk"] .esri-popup__main-container {
    border: 1.5px solid #06b6d4 !important;
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.4) !important;
}

[data-theme="cyberpunk"] .map-popup-inspect-btn {
    background: linear-gradient(135deg, #06b6d4, #ec4899);
    border: none;
}

[data-theme="synthwave"] .esri-popup__main-container {
    border: 1.5px solid #ff2a85 !important;
    box-shadow: 0 0 24px rgba(255, 42, 133, 0.45) !important;
}

[data-theme="synthwave"] .map-popup-inspect-btn {
    background: linear-gradient(135deg, #ff2a85, #a855f7);
    border: none;
}

[data-theme="matrix"] .esri-popup__main-container {
    border: 1.5px solid #00ff66 !important;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35) !important;
}

[data-theme="matrix"] .map-popup-inspect-btn {
    background: #00ff66;
    color: #020603;
    font-weight: 800;
    border: none;
}

[data-theme="hazard"] .esri-popup__main-container {
    border: 2px solid #eab308 !important;
    box-shadow: 0 8px 24px rgba(234, 179, 8, 0.25) !important;
}

[data-theme="hazard"] .map-popup-inspect-btn {
    background: #eab308;
    color: #101113;
    font-weight: 800;
    border: none;
}

[data-theme="glacier"] .esri-popup__main-container {
    border: 1.5px solid #38bdf8 !important;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.35) !important;
}

[data-theme="glacier"] .map-popup-inspect-btn {
    background: #38bdf8;
    color: #05101a;
    font-weight: 700;
    border: none;
}

[data-theme="monolith"] .esri-popup__main-container {
    border: 2px solid #ffffff !important;
}

[data-theme="monolith"] .map-popup-inspect-btn {
    background: #ffffff;
    color: #000000;
    font-weight: 800;
    border: none;
}

[data-theme="dracula"] .esri-popup__main-container {
    border: 1.5px solid #bd93f9 !important;
}

[data-theme="dracula"] .map-popup-inspect-btn {
    background: #bd93f9;
    color: #21222c;
    font-weight: 700;
    border: none;
}

[data-theme="rose-gold"] .esri-popup__main-container {
    border: 1.5px solid #f472b6 !important;
}

[data-theme="rose-gold"] .map-popup-inspect-btn {
    background: linear-gradient(135deg, #f472b6, #fb923c);
    color: #ffffff;
    border: none;
}

/* ==============================================================================
   Custom Overrides: Cyberpunk Neon
============================================================================== */
[data-theme="cyberpunk"] .app-header {
    border-bottom: 1.5px solid #06b6d4;
    box-shadow: 0 4px 20px rgba(6, 182, 212, 0.18);
}

[data-theme="cyberpunk"] .metric-card,
[data-theme="cyberpunk"] .chart-card,
[data-theme="cyberpunk"] .search-window-card,
[data-theme="cyberpunk"] .results-card,
[data-theme="cyberpunk"] .map-card,
[data-theme="cyberpunk"] .db-card,
[data-theme="cyberpunk"] .upload-action-card,
[data-theme="cyberpunk"] .modal-card {
    border: 1.5px solid #06b6d4;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.12);
}

[data-theme="cyberpunk"] .metric-card:hover,
[data-theme="cyberpunk"] .db-card:hover,
[data-theme="cyberpunk"] .upload-action-card:hover {
    border-color: #ec4899;
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.28);
}

[data-theme="cyberpunk"] .btn-primary {
    background: linear-gradient(135deg, #06b6d4 0%, #ec4899 100%);
    color: #ffffff;
    font-weight: 700;
    border: none;
    box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
}

[data-theme="cyberpunk"] .btn-primary:hover {
    box-shadow: 0 0 24px rgba(236, 72, 153, 0.6);
    transform: translateY(-2px);
}

[data-theme="cyberpunk"] .btn-outline {
    border: 1.5px solid #06b6d4;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.08);
}

[data-theme="cyberpunk"] .btn-outline:hover {
    border-color: #ec4899;
    color: #ec4899;
    background: rgba(236, 72, 153, 0.12);
}

[data-theme="cyberpunk"] .data-table th {
    background: #191636;
    color: #06b6d4;
    border-bottom: 1.5px solid #06b6d4;
}

[data-theme="cyberpunk"] .table-id-badge {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
    border: 1px solid #06b6d4;
}

[data-theme="cyberpunk"] .type-pill {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border: 1px solid #ec4899;
}

/* ==============================================================================
   Custom Overrides: Emerald Tactical
============================================================================== */
[data-theme="tactical"] .app-header {
    border-bottom: 1.5px solid #1e634e;
}

[data-theme="tactical"] .metric-card,
[data-theme="tactical"] .chart-card,
[data-theme="tactical"] .search-window-card,
[data-theme="tactical"] .results-card,
[data-theme="tactical"] .map-card,
[data-theme="tactical"] .db-card,
[data-theme="tactical"] .upload-action-card,
[data-theme="tactical"] .modal-card {
    border: 1.5px solid #1e634e;
}

[data-theme="tactical"] .metric-card:hover,
[data-theme="tactical"] .db-card:hover {
    border-color: #10b981;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.2);
}

[data-theme="tactical"] .btn-primary {
    background: #10b981;
    color: #061812;
    font-weight: 700;
    border: 1px solid #34d399;
}

[data-theme="tactical"] .btn-primary:hover {
    background: #34d399;
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.4);
}

[data-theme="tactical"] .table-id-badge {
    background: #11382c;
    color: #a7f3d0;
    border: 1px solid #1e634e;
}

[data-theme="tactical"] .data-table th {
    background: #11382c;
    color: #ecfdf5;
    border-bottom: 1.5px solid #1e634e;
}

/* ==============================================================================
   Custom Overrides: Nordic Frost
============================================================================== */
[data-theme="nordic"] .app-header {
    border-bottom: 1.2px solid #bae6fd;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

[data-theme="nordic"] .metric-card,
[data-theme="nordic"] .chart-card,
[data-theme="nordic"] .search-window-card,
[data-theme="nordic"] .results-card,
[data-theme="nordic"] .map-card,
[data-theme="nordic"] .db-card,
[data-theme="nordic"] .upload-action-card,
[data-theme="nordic"] .modal-card {
    border: 1.2px solid #bae6fd;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.06);
}

[data-theme="nordic"] .btn-primary {
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25);
}

[data-theme="nordic"] .data-table th {
    background: #e2eaf4;
    color: #0c4a6e;
    border-bottom: 1.2px solid #bae6fd;
}

/* ==============================================================================
   Custom Overrides: Crimson Protocol
============================================================================== */
[data-theme="crimson"] .app-header {
    border-bottom: 1.5px solid #4c0519;
}

[data-theme="crimson"] .metric-card,
[data-theme="crimson"] .chart-card,
[data-theme="crimson"] .search-window-card,
[data-theme="crimson"] .results-card,
[data-theme="crimson"] .map-card,
[data-theme="crimson"] .db-card,
[data-theme="crimson"] .upload-action-card,
[data-theme="crimson"] .modal-card {
    border: 1.5px solid #4c0519;
}

[data-theme="crimson"] .metric-card:hover,
[data-theme="crimson"] .db-card:hover {
    border-color: #e11d48;
    box-shadow: 0 4px 20px rgba(225, 29, 72, 0.25);
}

[data-theme="crimson"] .btn-primary {
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: #ffffff;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4);
}

[data-theme="crimson"] .data-table th {
    background: #291421;
    color: #fff1f2;
    border-bottom: 1.5px solid #4c0519;
}

/* ==============================================================================
   Custom Overrides: Sunset Amber
============================================================================== */
[data-theme="amber"] .app-header {
    border-bottom: 1.5px solid #572a08;
}

[data-theme="amber"] .metric-card,
[data-theme="amber"] .chart-card,
[data-theme="amber"] .search-window-card,
[data-theme="amber"] .results-card,
[data-theme="amber"] .map-card,
[data-theme="amber"] .db-card,
[data-theme="amber"] .upload-action-card,
[data-theme="amber"] .modal-card {
    border: 1.5px solid #572a08;
}

[data-theme="amber"] .metric-card:hover,
[data-theme="amber"] .db-card:hover {
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
}

[data-theme="amber"] .btn-primary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #140d07;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}

[data-theme="amber"] .data-table th {
    background: #311c0f;
    color: #fef3c7;
    border-bottom: 1.5px solid #572a08;
}

/* ==============================================================================
   Custom Overrides: Royal Amethyst
============================================================================== */
[data-theme="amethyst"] .app-header {
    border-bottom: 1.5px solid #3b0764;
}

[data-theme="amethyst"] .metric-card,
[data-theme="amethyst"] .chart-card,
[data-theme="amethyst"] .search-window-card,
[data-theme="amethyst"] .results-card,
[data-theme="amethyst"] .map-card,
[data-theme="amethyst"] .db-card,
[data-theme="amethyst"] .upload-action-card,
[data-theme="amethyst"] .modal-card {
    border: 1.5px solid #3b0764;
}

[data-theme="amethyst"] .metric-card:hover,
[data-theme="amethyst"] .db-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.28);
}

[data-theme="amethyst"] .btn-primary {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #ffffff;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
}

[data-theme="amethyst"] .data-table th {
    background: #1f0f3d;
    color: #faf5ff;
    border-bottom: 1.5px solid #3b0764;
}

/* ==============================================================================
   Custom Overrides: High-Contrast Monolith (Brutalist)
============================================================================== */
[data-theme="monolith"] * {
    border-radius: 0px !important;
}

[data-theme="monolith"] .app-header {
    border-bottom: 2px solid #ffffff;
}

[data-theme="monolith"] .metric-card,
[data-theme="monolith"] .chart-card,
[data-theme="monolith"] .search-window-card,
[data-theme="monolith"] .results-card,
[data-theme="monolith"] .map-card,
[data-theme="monolith"] .db-card,
[data-theme="monolith"] .upload-action-card,
[data-theme="monolith"] .modal-card,
[data-theme="monolith"] .theme-option-card {
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

[data-theme="monolith"] input,
[data-theme="monolith"] select,
[data-theme="monolith"] textarea,
[data-theme="monolith"] .date-filter-box,
[data-theme="monolith"] .preset-pill,
[data-theme="monolith"] .results-summary-strip {
    border: 2px solid #ffffff !important;
}

[data-theme="monolith"] .btn-primary {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border: 2px solid #ffffff !important;
}

[data-theme="monolith"] .btn-primary:hover {
    background: #cccccc !important;
}

[data-theme="monolith"] .btn-outline {
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    background: #000000 !important;
}

[data-theme="monolith"] .btn-outline:hover {
    background: #ffffff !important;
    color: #000000 !important;
}

[data-theme="monolith"] .data-table th {
    background: #171717;
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
}

[data-theme="monolith"] .data-table td {
    border-bottom: 1px solid #404040;
}

/* ==============================================================================
   Custom Overrides: Oceanic Abyss
============================================================================== */
[data-theme="oceanic"] .app-header {
    border-bottom: 1.5px solid #155e75;
}

[data-theme="oceanic"] .metric-card,
[data-theme="oceanic"] .chart-card,
[data-theme="oceanic"] .search-window-card,
[data-theme="oceanic"] .results-card,
[data-theme="oceanic"] .map-card,
[data-theme="oceanic"] .db-card,
[data-theme="oceanic"] .upload-action-card,
[data-theme="oceanic"] .modal-card {
    border: 1.5px solid #155e75;
}

[data-theme="oceanic"] .metric-card:hover,
[data-theme="oceanic"] .db-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.25);
}

[data-theme="oceanic"] .btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: #ffffff;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.35);
}

[data-theme="oceanic"] .data-table th {
    background: #0d2f3c;
    color: #f0fdfa;
    border-bottom: 1.5px solid #155e75;
}

/* ==============================================================================
   Custom Overrides: Vintage Sepia Blotter
============================================================================== */
[data-theme="sepia"] .app-header {
    border-bottom: 1.5px solid #8c6f4e;
    background: #f5efe1;
}

[data-theme="sepia"] .metric-card,
[data-theme="sepia"] .chart-card,
[data-theme="sepia"] .search-window-card,
[data-theme="sepia"] .results-card,
[data-theme="sepia"] .map-card,
[data-theme="sepia"] .db-card,
[data-theme="sepia"] .upload-action-card,
[data-theme="sepia"] .modal-card,
[data-theme="sepia"] .theme-option-card {
    border: 1.5px solid #8c6f4e;
    box-shadow: 0 2px 6px rgba(56, 35, 20, 0.08);
}

[data-theme="sepia"] input,
[data-theme="sepia"] select,
[data-theme="sepia"] textarea,
[data-theme="sepia"] .date-filter-box,
[data-theme="sepia"] .preset-pill,
[data-theme="sepia"] .results-summary-strip {
    border: 1.5px solid #8c6f4e;
    background: #fcf9f2;
}

[data-theme="sepia"] .btn-primary {
    background: #8c6f4e;
    color: #fcf9f2;
    font-weight: 700;
    border: 1.5px solid #5c4028;
    box-shadow: 0 2px 8px rgba(56, 35, 20, 0.15);
}

[data-theme="sepia"] .btn-primary:hover {
    background: #5c4028;
}

[data-theme="sepia"] .btn-outline {
    border: 1.5px solid #8c6f4e;
    color: #382314;
    background: #fcf9f2;
}

[data-theme="sepia"] .btn-outline:hover {
    background: #ede2cd;
    color: #1a0f07;
}

[data-theme="sepia"] .data-table th {
    background: #ede2cd;
    color: #382314;
    border-bottom: 1.5px solid #8c6f4e;
}

[data-theme="sepia"] .data-table td {
    border-bottom: 1px solid #e0d0b8;
}

[data-theme="sepia"] .table-id-badge {
    background: #8c6f4e;
    color: #fcf9f2;
}

[data-theme="sepia"] .type-pill {
    background: #ede2cd;
    color: #382314;
    border: 1px solid #8c6f4e;
}

/* ==============================================================================
   Map Mode Toggle (Points vs Heat Map) & Tool States
============================================================================== */
.map-mode-toggle-group {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 2px;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}

.btn-map-mode {
    background: transparent;
    border: none;
    outline: none;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.btn-map-mode:hover {
    color: var(--text-main);
}

.btn-map-mode.active {
    background: var(--brand-primary);
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.map-tool-points-only,
.map-tool-heatmap-only {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s ease;
}

/* ==============================================================================
   Stackable Dropdown Filters (Chips & Tag Container)
============================================================================== */
.form-group-stackable {
    position: relative;
}

.stacked-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    min-height: 0;
}

.stacked-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--brand-primary);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 600;
    animation: fadeIn 0.15s ease-out;
}

.stacked-chip .chip-remove {
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.stacked-chip .chip-remove:hover {
    color: #ef4444;
}

/* Modal "MAP" Action Buttons */
.btn-incident-map {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-incident-map:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

/* ==============================================================================
   Header Version Pill & Updates Modal
============================================================================== */
.header-version-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    padding: 1px 6px;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.15);
    color: var(--color-primary);
    border: 1px solid rgba(37, 99, 235, 0.3);
    margin-left: 5px;
    line-height: 1.3;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
}

[data-theme="dark"] .header-version-pill,
[data-theme="cyberpunk"] .header-version-pill,
[data-theme="matrix"] .header-version-pill {
    background: rgba(37, 99, 235, 0.25);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.4);
}

.modal-card-updates {
    max-width: 840px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}

.icon-badge-cyan {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
}

[data-theme="dark"] .icon-badge-cyan,
[data-theme="cyberpunk"] .icon-badge-cyan,
[data-theme="matrix"] .icon-badge-cyan {
    background: rgba(6, 182, 212, 0.25);
    color: #22d3ee;
}

.modal-body-updates {
    padding: 20px 24px;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
}

/* Latest Version Hero Card */
.update-latest-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: var(--shadow-sm);
}

.update-version-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.update-badge-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.update-version-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    letter-spacing: 0.02em;
}

.update-version-tag.tag-latest {
    background: var(--brand-primary);
    border-color: var(--brand-hover);
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 2px 6px var(--brand-focus-ring);
}

.update-status-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    line-height: 1.4;
}

.pill-latest {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

[data-theme="dark"] .pill-latest,
[data-theme="cyberpunk"] .pill-latest {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.25);
}

.pill-active {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .pill-active,
[data-theme="cyberpunk"] .pill-active {
    color: #34d399;
    background: rgba(16, 185, 129, 0.25);
}

.update-version-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.4;
    font-family: var(--font-heading, sans-serif);
}

.update-latest-body {
    padding: 6px 0 0 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.update-latest-body ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.update-latest-body li {
    color: var(--text-muted);
}

.update-latest-body li strong {
    color: var(--text-main);
    font-weight: 600;
}

.update-latest-body li code {
    font-size: 11.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.update-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 12px;
}

.update-highlight-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.update-highlight-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.update-bullet-icon {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}

.update-highlight-header h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.update-highlight-item p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted);
}

.update-highlight-item p strong {
    color: var(--text-main);
}

.update-highlight-item p code {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
}

/* History Divider */
.update-history-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0;
}

.history-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.history-divider-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle);
}

/* Previous Version Accordions */
.update-accordions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.update-accordion {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.update-accordion[open] {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.update-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-subtle);
    transition: background 0.15s ease;
    list-style: none;
}

.update-accordion-summary::-webkit-details-marker {
    display: none;
}

.update-accordion-summary:hover {
    background: var(--bg-surface);
}

.summary-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.accordion-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--text-muted);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
    flex-shrink: 0;
}

.update-accordion[open] .accordion-arrow {
    transform: rotate(90deg);
    color: var(--color-primary);
}

.accordion-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accordion-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 9999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-subtle);
    flex-shrink: 0;
    margin-left: 8px;
}

.update-accordion-body {
    padding: 14px 20px 16px 44px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    font-size: 12.5px;
    color: var(--text-muted);
    line-height: 1.6;
    animation: fadeIn 0.15s ease-out;
}

.update-accordion-body ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.update-accordion-body li {
    color: var(--text-muted);
}

.update-accordion-body li strong {
    color: var(--text-main);
}

.update-accordion-body li code {
    font-size: 11px;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
}

/* Updates Modal Footer */
.modal-footer-updates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--bg-subtle) !important;
    border-top: 1px solid var(--border-color);
}

.updates-footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.updates-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.btn-delete-db {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-faint, #64748b);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    opacity: 0.65;
    flex-shrink: 0;
}

.btn-delete-db:hover {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
    opacity: 1;
    transform: scale(1.08);
}

/* ==============================================================================
   Comprehensive Mobile & Touchscreen Responsiveness Engine (<= 768px & <= 480px)
   Ensures seamless viewing and interaction across smartphones & tablets
============================================================================== */

/* Responsive Button Text Helpers */
.btn-text-mobile {
    display: none;
}

.btn-text-full {
    display: inline;
}

@media (max-width: 1400px) {
    .btn-text-full {
        display: none !important;
    }

    .btn-text-mobile {
        display: inline !important;
    }

    .header-center {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
    }

    .active-db-name {
        max-width: none;
        flex: 1 1 auto;
    }
}

@media (max-width: 1100px) {
    .brand-subtitle {
        display: none !important;
    }

    .header-version-pill {
        display: none !important;
    }

    .header-actions {
        gap: 4px;
    }

    .header-actions .btn {
        padding: 5px 8px;
        font-size: 0.76rem;
    }

    .header-center {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        padding: 3px 10px;
        gap: 8px;
    }

    .active-db-name {
        max-width: none;
        font-size: 13px;
    }

    .active-badge {
        font-size: 0.62rem;
        padding: 2px 6px;
    }
}

@media (max-width: 880px) {
    .header-actions .btn .btn-text-mobile {
        display: none !important;
    }

    .header-actions .btn {
        padding: 6px;
        width: 32px;
        height: 32px;
        justify-content: center;
    }
}

@media (max-width: 768px) {

    /* Header & Navigation */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .header-container {
        height: auto;
        min-height: 54px;
        padding: 6px 12px;
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .brand-group {
        gap: 8px;
    }

    .brand-logo-img {
        width: 28px;
        height: 28px;
    }

    .brand-title {
        font-size: 1rem;
    }

    .brand-subtitle {
        display: none !important;
    }

    .header-actions {
        gap: 4px;
        margin-left: auto;
    }

    .header-actions .btn {
        padding: 5px 8px;
        font-size: 0.74rem;
        height: 30px;
    }

    .header-actions .btn svg {
        width: 14px;
        height: 14px;
    }

    .header-version-pill {
        display: none !important;
    }

    .header-center {
        order: 3;
        width: 100%;
        margin-top: 2px;
        padding: 4px 10px;
        justify-content: space-between;
        font-size: 0.78rem;
        max-width: 100%;
    }

    .active-badge {
        font-size: 0.64rem;
    }

    .active-db-name {
        font-size: 13px;
        max-width: calc(100vw - 180px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #btn-switch-db {
        padding: 3px 8px;
        font-size: 0.72rem;
    }

    /* Main Content Layout */
    .main-content {
        padding: 18px 12px 48px;
    }

    /* Database Launch Portal */
    .portal-hero {
        margin: 10px auto 24px;
        padding: 0 6px;
    }

    .portal-title {
        font-size: 1.6rem;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .portal-description {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .db-grid-header {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 14px;
        padding-bottom: 8px;
    }

    .section-heading h2 {
        font-size: 1.1rem;
    }

    .db-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 14px;
    }

    /* Dashboard Header & Metrics Strip */
    .dash-header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
    }

    .dash-header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .dash-title {
        font-size: 1.35rem;
        line-height: 1.25;
        word-break: break-word;
    }

    .dash-subtitle {
        font-size: 0.8rem;
    }

    .dash-header-tools {
        display: flex;
        gap: 8px;
        width: 100%;
        justify-content: flex-end;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .metric-card {
        padding: 12px 14px;
    }

    .metric-header {
        margin-bottom: 6px;
    }

    .metric-label {
        font-size: 0.72rem;
    }

    .metric-value {
        font-size: 1.35rem;
    }

    .metric-value-sm {
        font-size: 1.05rem;
    }

    .metric-meta {
        font-size: 0.7rem;
    }

    .charts-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 16px;
    }

    .chart-card {
        padding: 14px;
    }

    .distribution-bars {
        max-height: 260px;
    }

    /* Search & Filter Controls */
    .filter-card {
        padding: 14px;
        margin-bottom: 16px;
    }

    .date-filter-box {
        padding: 10px 12px;
        gap: 10px;
        margin-bottom: 14px;
    }

    .date-presets-group {
        gap: 4px;
    }

    .preset-pill {
        padding: 4px 9px;
        font-size: 0.72rem;
    }

    .custom-date-inputs {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        margin-left: 0;
    }

    .date-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .date-field input[type="date"] {
        flex: 1;
        max-width: 180px;
        font-size: 0.78rem;
        padding: 5px 8px;
    }

    .stackable-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Interactive Map Card */
    .map-card {
        margin-bottom: 16px;
    }

    .map-card-header {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .map-header-tools {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    .map-container-wrap {
        height: 360px;
        min-height: 260px;
    }

    /* ESRI Map Popup on Mobile */
    .esri-popup__main-container {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 72vh !important;
        left: 10px !important;
        right: 10px !important;
    }

    .map-popup-frame {
        font-size: 0.75rem;
        padding: 2px;
    }

    .map-dv-detail-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* Results Window & Data Table */
    .results-card-header {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .results-counter {
        gap: 8px;
    }

    .results-header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 8px;
        flex-wrap: wrap;
    }

    .btn-update-dataset {
        padding: 5px 10px;
        font-size: 0.76rem;
    }

    .results-limit-control {
        margin-left: auto;
    }

    .select-sm {
        padding: 4px 8px;
        font-size: 0.76rem;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .data-table th,
    .data-table td {
        padding: 9px 10px;
        font-size: 0.78rem;
    }

    /* Modals Responsive Rules */
    .modal-backdrop {
        padding: 10px;
    }

    .modal-card {
        max-height: 94vh;
        width: 100%;
        border-radius: 12px;
    }

    .modal-header {
        padding: 14px 16px;
    }

    .modal-body {
        padding: 14px 16px;
        max-height: calc(94vh - 120px);
        overflow-y: auto;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* CSPD Disclaimer Modal */
    .modal-footer-cspd {
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: 10px;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    }

    .modal-footer-cspd .btn {
        flex: 1;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

    /* Delete DB Modal */
    #delete-db-form .modal-footer {
        display: flex;
        gap: 10px;
        justify-content: stretch;
    }

    #delete-db-form .modal-footer .btn {
        flex: 1;
        min-height: 40px;
    }

    /* Updates Modal */
    .modal-card-updates {
        max-width: 100%;
        width: 100%;
    }

    .modal-header-updates {
        padding: 14px 16px;
    }

    .update-accordion-header {
        padding: 10px 14px;
    }

    .update-accordion-body {
        padding: 10px 14px 12px 28px;
    }
}

/* Extra Small Screens (<= 480px, e.g. iPhone SE, iPhone Mini, Galaxy S series) */
@media (max-width: 480px) {
    .brand-subtitle {
        display: none !important;
    }

    .brand-title {
        font-size: 0.98rem;
    }

    .header-actions .btn {
        padding: 5px 7px;
        font-size: 0.72rem;
        gap: 3px;
    }

    .portal-title {
        font-size: 1.38rem;
    }

    .db-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .db-card {
        padding: 14px 12px;
    }

    .db-card-title {
        font-size: 1.0rem;
    }

    .db-card-stats {
        gap: 6px;
        flex-wrap: wrap;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .metric-card {
        padding: 10px;
    }

    .metric-icon {
        width: 28px;
        height: 28px;
    }

    .metric-value {
        font-size: 1.2rem;
    }

    .metric-value-sm {
        font-size: 0.92rem;
    }

    .results-counter {
        width: 100%;
        justify-content: space-between;
    }

    .results-header-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .results-header-actions .btn-update-dataset,
    .results-header-actions .results-limit-control {
        width: 100%;
        justify-content: center;
    }

    .results-limit-control select {
        flex: 1;
    }
}

/* ==============================================================================
   Add Data Ingestion Hub: Modality Tabs, URL Inspector, Scope Controls & Terms
============================================================================== */
.modal-card-lg {
    max-width: 680px;
}

.add-data-tab-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px 0 24px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
}

.add-data-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px 6px 0 0;
}

.add-data-tab-btn:hover {
    color: var(--text-main);
    background: var(--bg-subtle);
}

.add-data-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--bg-subtle);
}

.add-data-tab-btn svg {
    flex-shrink: 0;
}

.add-data-panel {
    display: flex;
    flex-direction: column;
}

.url-input-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.input-prefix {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.input-with-prefix input {
    padding-left: 36px;
    width: 100%;
}

.url-scope-box {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-top: 14px;
}

.scope-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.scope-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-primary);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 6px #10b981;
}

.scope-records-badge {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    background: var(--bg-card);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.scope-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    background: var(--bg-card);
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.scope-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scope-meta-lbl {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}

.scope-meta-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
}

.scope-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.scope-control-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.scope-control-item label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.url-date-inputs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--bg-card);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.form-group-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-group-inline label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.url-columns-section {
    background: var(--bg-card);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.url-columns-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.btn-subtle-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.btn-subtle-link:hover {
    opacity: 0.8;
}

.url-columns-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 140px;
    overflow-y: auto;
    padding-right: 4px;
}

.url-col-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.url-col-chip:hover {
    border-color: var(--color-primary);
}

.url-col-chip input[type="checkbox"] {
    margin: 0;
    width: 13px;
    height: 13px;
    cursor: pointer;
}

.url-col-chip.active {
    background: rgba(37, 99, 235, 0.08);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 640px) {

    .scope-meta-grid,
    .scope-controls-grid {
        grid-template-columns: 1fr;
    }

    .url-input-action-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.btn-edit-scraper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    cursor: pointer;
    transition: var(--transition);
}

.btn-edit-scraper:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--brand-light);
}

.btn-edit-db-scraper {
    background: transparent;
    border: none;
    color: var(--text-faint, #64748b);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    opacity: 0.65;
    flex-shrink: 0;
    margin-right: 2px;
}

.btn-edit-db-scraper:hover {
    background: rgba(37, 99, 235, 0.14);
    color: var(--brand-primary, #2563eb);
    opacity: 1;
    transform: scale(1.08);
}

/* Grayed out disabled state for Add Custom Data / Generate Scraper until terms agreed */
#btn-submit-url-scrape:disabled,
.btn-submit-url-scrape:disabled {
    background: var(--border-color, #cbd5e1) !important;
    color: var(--text-faint, #64748b) !important;
    border-color: var(--border-color, #cbd5e1) !important;
    cursor: not-allowed !important;
    opacity: 0.45 !important;
    pointer-events: none !important;
    box-shadow: none !important;
    filter: grayscale(80%) !important;
}

/* ==============================================================================
   Map Mapping / Geospatial Column Configuration Modal
   ============================================================================== */
.map-mapping-mode-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

@media (max-width: 680px) {
    .map-mapping-mode-selector {
        grid-template-columns: 1fr;
    }
}

.map-mapping-mode-card {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-surface, #ffffff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.map-mapping-mode-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.map-mapping-mode-card:hover {
    border-color: var(--primary-color, #3b82f6);
    background: var(--bg-hover, rgba(59, 130, 246, 0.04));
    transform: translateY(-2px);
}

.map-mapping-mode-card.active,
.map-mapping-mode-card:has(input[type="radio"]:checked) {
    border-color: var(--primary-color, #3b82f6);
    background: var(--primary-light, rgba(59, 130, 246, 0.08));
    box-shadow: 0 0 0 1px var(--primary-color, #3b82f6);
}

.mode-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main, #0f172a);
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.map-mapping-mode-card.active .mode-card-header,
.map-mapping-mode-card:has(input[type="radio"]:checked) .mode-card-header {
    color: var(--primary-color, #3b82f6);
}

.mode-card-content p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-subtle, #64748b);
    line-height: 1.35;
}

.mapping-fields-section {
    background: var(--bg-card-subtle, rgba(241, 245, 249, 0.5));
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: 18px;
    margin-bottom: 12px;
    animation: fadeIn 0.2s ease-out;
}

.mapping-fields-section .form-group {
    margin-bottom: 14px;
}

.mapping-fields-section .form-group:last-child {
    margin-bottom: 0;
}

.mapping-fields-section label {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    margin-bottom: 6px;
}

.select-mapping-dropdown {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--border-color, #cbd5e1);
    background: var(--bg-surface, #ffffff);
    color: var(--text-main, #0f172a);
    font-size: 0.88rem;
    outline: none;
    transition: border-color 0.18s ease;
}

.select-mapping-dropdown:focus {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px var(--primary-alpha, rgba(59, 130, 246, 0.2));
}

.col-sample-preview {
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 20px;
}

.col-sample-tag {
    display: inline-block;
    padding: 1px 6px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 4px;
    color: var(--text-subtle, #475569);
    font-family: monospace;
    font-size: 0.74rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-alert-box {
    padding: 12px 16px;
    background: var(--primary-light, rgba(59, 130, 246, 0.08));
    border-left: 3px solid var(--primary-color, #3b82f6);
    border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
    font-size: 0.85rem;
    color: var(--text-main, #1e293b);
    line-height: 1.45;
}

.info-alert-box p {
    margin: 0;
}

.btn-xs {
    padding: 3px 8px;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
}

/* ==============================================================================
   Unified Analytics Window & Custom Visual Builder Enhanced Controls
============================================================================== */
.analytics-window-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-md);
    margin-bottom: 24px;
    overflow: hidden;
    transition: var(--transition, all 0.2s ease);
}

.analytics-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
    background: var(--bg-surface, #ffffff);
}

.analytics-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-header-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.analytics-header-title svg {
    color: var(--brand-primary, #3b82f6);
}

.analytics-nav-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.analytics-tab-btn {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-subtle, #f8fafc);
    color: var(--text-muted, #64748b);
    padding: 6px 14px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition, all 0.18s ease);
}

.analytics-tab-btn:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-main, #0f172a);
}

.analytics-tab-btn.active {
    background: var(--brand-primary, #3b82f6);
    color: #ffffff;
    border-color: var(--brand-primary, #3b82f6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Visuals Date Range Toolbar */
.analytics-date-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 20px;
    background: var(--bg-subtle, #f8fafc);
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}

.analytics-date-header-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.analytics-date-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.analytics-preset-pills {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.visual-date-pill {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #ffffff);
    color: var(--text-muted, #64748b);
    padding: 3px 9px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.visual-date-pill:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-main, #0f172a);
}

.visual-date-pill.active {
    background: var(--brand-primary, #3b82f6);
    color: #ffffff;
    border-color: var(--brand-primary, #3b82f6);
}

.analytics-custom-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.vdate-input-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
}

.vdate-input-wrap label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-subtle, #64748b);
}

.vdate-input {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    padding: 3px 6px;
    font-size: 0.76rem;
    background: var(--bg-surface, #ffffff);
    color: var(--text-main, #0f172a);
    outline: none;
}

.analytics-tab-panel {
    display: none;
    padding: 16px 20px;
}

.analytics-tab-panel.active {
    display: block;
}

/* Preset Chart Toolbar & Formats */
.preset-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 10px);
}

.preset-format-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.preset-format-group label {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.preset-format-pills {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.preset-format-pill {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #ffffff);
    color: var(--text-muted, #64748b);
    padding: 3px 8px;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-format-pill:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-main, #0f172a);
}

.preset-format-pill.active {
    background: var(--brand-primary, #3b82f6);
    color: #ffffff;
    border-color: var(--brand-primary, #3b82f6);
}

.preset-options-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.toggle-option-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--brand-primary, #3b82f6);
}

/* Custom Builder Toolbar */
.custom-builder-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 10px);
}

.builder-control-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.builder-control-group label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

.chart-stage-wrapper {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    padding: 16px;
}

.chart-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.chart-stage-meta h4 {
    margin: 0 0 2px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.chart-subtitle {
    font-size: 0.75rem;
    color: var(--text-subtle, #64748b);
}

.chart-canvas-container {
    position: relative;
    width: 100%;
    height: 380px;
}

/* ==============================================================================
   1. KPI Delta Pill Styling
   ============================================================================== */
.metric-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.metric-delta-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.25);
    line-height: 1.2;
}

.metric-delta-pill.delta-up {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.metric-delta-pill.delta-down {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.25);
}

/* ==============================================================================
   2. Smart Natural Language Search Row
   ============================================================================== */
.natural-search-row {
    margin-bottom: 12px;
}

.nl-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg-surface, #ffffff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    padding: 4px 6px 4px 12px;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.nl-input-wrap:focus-within {
    border-color: var(--color-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.nl-icon {
    color: var(--color-primary, #2563eb);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nl-input-wrap input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.88rem;
    color: var(--text-main, #0f172a);
    outline: none;
    padding: 6px 0;
}

.nl-input-wrap input::placeholder {
    color: var(--text-muted, #94a3b8);
    font-style: italic;
}

/* ==============================================================================
   3. Spatial Geo-Fencing Tools
   ============================================================================== */
.map-spatial-tools-group {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    padding: 2px;
    gap: 2px;
}

.btn-spatial-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-subtle, #64748b);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-spatial-tool:hover {
    color: var(--text-main, #0f172a);
    background: var(--bg-hover, #f1f5f9);
}

.btn-spatial-tool.active {
    background: var(--color-primary, #2563eb);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.btn-spatial-clear {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.btn-spatial-clear:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}

/* ==============================================================================
   4. Time-Lapse Temporal Playback Bar
   ============================================================================== */
.map-timelapse-bar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 50px;
    z-index: 25;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.timelapse-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-timelapse-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary, #2563eb);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.btn-timelapse-play:hover {
    transform: scale(1.06);
    background: #1d4ed8;
}

.btn-timelapse-step,
.btn-timelapse-reset {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #ffffff;
    border-radius: 6px;
    padding: 4px 7px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-timelapse-step:hover,
.btn-timelapse-reset:hover {
    background: rgba(255, 255, 255, 0.25);
}

.timelapse-slider-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
}

.timelapse-range {
    width: 100%;
    height: 5px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    outline: none;
    cursor: pointer;
    accent-color: var(--color-primary, #38bdf8);
}

.timelapse-date-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #38bdf8;
    white-space: nowrap;
}

.timelapse-settings {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
}

.timelapse-settings select {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.72rem;
    outline: none;
}

.timelapse-settings select option {
    background: #0f172a;
    color: #ffffff;
}

/* ==============================================================================
   5. Repeat Locations & Hotspots Panel
   ============================================================================== */
.hotspots-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hotspots-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hotspots-header h4 {
    margin: 0 0 2px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.hotspots-grid-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
}

@media (max-width: 900px) {
    .hotspots-grid-layout {
        grid-template-columns: 1fr;
    }
}

.hotspots-chart-card,
.hotspots-table-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    padding: 14px;
}

.hotspots-table-wrap {
    max-height: 400px;
    overflow-y: auto;
}

.hotspots-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.hotspots-table th {
    position: sticky;
    top: 0;
    background: var(--bg-surface-secondary, #f8fafc);
    color: var(--text-subtle, #64748b);
    font-weight: 700;
    font-size: 0.75rem;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--border-color, #e2e8f0);
    text-align: left;
    z-index: 2;
}

.hotspots-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-main, #0f172a);
}

.hotspots-table tr:hover td {
    background: var(--bg-hover, #f1f5f9);
    cursor: pointer;
}

.hotspots-rank-num {
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    font-size: 0.78rem;
}

.hotspots-count-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary, #2563eb);
    font-weight: 700;
    font-size: 0.78rem;
    text-align: right;
}

/* ==============================================================================
   6. Export Dropdown Menu
   ============================================================================== */
.export-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.export-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    z-index: 100;
    overflow: hidden;
    padding: 4px 0;
}

.export-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: var(--text-main, #0f172a);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.export-menu-item:hover {
    background: var(--bg-hover, #f1f5f9);
    color: var(--color-primary, #2563eb);
}

.export-item-icon {
    font-size: 1rem;
}

/* ==============================================================================
   7. Executive Intelligence Briefing Modal & Print Styling
   ============================================================================== */
#executive-briefing-modal .modal-card,
#executive-briefing-modal .modal-dialog-briefing {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

#executive-briefing-modal .modal-header-briefing,
#executive-briefing-modal .modal-footer-briefing {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

#executive-briefing-modal .modal-body-briefing {
    background: var(--bg-page) !important;
    color: var(--text-main) !important;
}

#executive-briefing-modal .briefing-print-header,
#executive-briefing-modal .briefing-executive-summary-card,
#executive-briefing-modal .briefing-kpi-card,
#executive-briefing-modal .briefing-table-card,
#executive-briefing-modal .briefing-map-box,
#executive-briefing-modal .briefing-chart-box {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

#executive-briefing-modal #briefing-modal-title,
#executive-briefing-modal .briefing-doc-title,
#executive-briefing-modal .briefing-kpi-val,
#executive-briefing-modal .briefing-section-header h4,
#executive-briefing-modal .briefing-box-header h5 {
    color: var(--text-main) !important;
}

#executive-briefing-modal .briefing-meta-val,
#executive-briefing-modal .briefing-executive-summary-card,
#executive-briefing-modal .briefing-data-table td {
    color: var(--text-main) !important;
}

#executive-briefing-modal .briefing-meta-label,
#executive-briefing-modal .briefing-kpi-label,
#executive-briefing-modal .briefing-data-table th,
#executive-briefing-modal #briefing-modal-subtitle,
#executive-briefing-modal .briefing-doc-subtitle {
    color: var(--text-muted) !important;
}

#executive-briefing-modal .briefing-data-table th {
    background: var(--bg-subtle) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}

#executive-briefing-modal .briefing-data-table td {
    border-bottom: 1px solid var(--border-color) !important;
}

#executive-briefing-modal .briefing-section-num {
    background: var(--brand-primary) !important;
    color: #ffffff !important;
}

#executive-briefing-modal .briefing-bar-fill {
    background: var(--brand-primary) !important;
}

#executive-briefing-modal .briefing-bar-fill-divs {
    background: var(--brand-hover, #10b981) !important;
}

#executive-briefing-modal .briefing-case-pill {
    background: var(--brand-light) !important;
    border-color: var(--border-focus) !important;
    color: var(--brand-primary) !important;
}

/* Briefing Column Selector Toolbar */
.briefing-col-select-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-xs);
}

.briefing-col-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.briefing-col-select-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
}

.briefing-col-select-actions {
    display: flex;
    gap: 6px;
}

.btn-briefing-col-tool {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-briefing-col-tool:hover {
    background: var(--bg-surface);
    color: var(--text-main);
    border-color: var(--border-focus);
}

.briefing-col-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.briefing-col-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.briefing-col-chip:hover {
    border-color: var(--border-focus);
    background: var(--brand-light);
}

.briefing-col-chip input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--brand-primary);
    margin: 0;
}

.briefing-col-chip.active {
    background: var(--brand-light);
    border-color: var(--border-focus);
    color: var(--brand-primary);
    font-weight: 600;
}

.modal-dialog-briefing {
    max-width: 1040px;
    width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    position: relative;
    z-index: 101;
    animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header-briefing {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
}

.modal-header-briefing .modal-title-group,
.modal-title-group {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.briefing-brand-icon {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    object-fit: contain !important;
    border-radius: var(--radius-sm);
    flex-shrink: 0 !important;
    display: block;
}

.modal-footer-briefing {
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--bg-surface);
}

.modal-body-briefing {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(92vh - 140px);
    background: var(--bg-base);
}

/* Classification Banner */
.briefing-doc-banner {
    background: #0f172a;
    color: #94a3b8;
    text-align: center;
    padding: 5px 12px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Document Print Header */
.briefing-print-header {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.briefing-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.briefing-seal-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.briefing-seal-emblem {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.briefing-seal-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.briefing-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.briefing-edit-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px dashed rgba(37, 99, 235, 0.35);
    border-radius: 4px;
    color: var(--brand-primary, #2563eb);
    font-size: 0.72rem;
    font-weight: 600;
    user-select: none;
    flex-shrink: 0;
}

.briefing-doc-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    margin-bottom: 2px;
    text-transform: uppercase;
    display: inline-block;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background 0.15s ease;
}

.briefing-doc-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.briefing-doc-subtitle {
    font-size: 0.82rem;
    color: var(--text-subtle);
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    transition: background 0.15s ease;
}

/* Generic Contenteditable Hover and Focus states inside Briefing Report */
.modal-body-briefing [contenteditable="true"] {
    outline: none;
    cursor: text;
    border-radius: 4px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.modal-body-briefing [contenteditable="true"]:hover {
    background: rgba(37, 99, 235, 0.06);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}

.modal-body-briefing [contenteditable="true"]:focus {
    background: var(--bg-surface, #ffffff);
    box-shadow: 0 0 0 2px var(--brand-primary, #2563eb);
}

.briefing-doc-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 999px;
    color: var(--brand-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.badge-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

/* Metadata Grid */
.briefing-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 800px) {
    .briefing-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.briefing-meta-item {
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.briefing-meta-label {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.briefing-meta-val {
    color: var(--text-main);
    font-weight: 600;
}

/* Briefing Sections */
.briefing-section {
    margin-bottom: 22px;
}

.briefing-section.briefing-section-hidden {
    display: none !important;
}

.briefing-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.briefing-sec-hdr-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--text-subtle, #64748b);
    cursor: pointer;
    user-select: none;
    padding: 3px 9px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.briefing-sec-hdr-toggle:hover {
    border-color: var(--brand-primary, #2563eb);
    color: var(--brand-primary, #2563eb);
    background: #eff6ff;
}

.briefing-sec-hdr-toggle input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--brand-primary, #2563eb);
    margin: 0;
}

.briefing-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    border-radius: 4px;
}

.briefing-section-header h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.briefing-section-tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-subtle);
    background: var(--bg-subtle);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

/* Section 1: Executive Narrative Card */
.briefing-executive-summary-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-main);
}

.briefing-executive-summary-card p {
    margin: 0 0 10px 0;
}

.briefing-executive-summary-card p:last-child {
    margin-bottom: 0;
}

.briefing-highlights-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.briefing-highlights-list li {
    color: var(--text-main);
}

/* Section 2: KPI Grid (6-Card) */
.briefing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

@media (max-width: 1000px) {
    .briefing-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .briefing-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.briefing-kpi-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.briefing-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.briefing-kpi-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
    word-break: break-word;
}

.briefing-kpi-sub {
    font-size: 0.72rem;
    color: var(--text-subtle);
    margin-top: 4px;
    font-weight: 500;
}


.btn-update-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-surface, #ffffff);
    color: var(--brand-primary, #2563eb);
    border: 1px solid var(--border-color, #cbd5e1);
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-update-all:hover:not(:disabled) {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
}

.btn-update-all:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-update-all.updating svg {
    animation: spin 1s linear infinite;
}

/* Section 3: Visual Analytics Grid */
.briefing-visual-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 750px) {
    .briefing-visual-row {
        grid-template-columns: 1fr;
    }
}

.briefing-map-box,
.briefing-chart-box,
.briefing-visual-box,
.briefing-table-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    page-break-inside: avoid;
}

.briefing-no-graphics {
    grid-column: 1 / -1;
    text-align: center;
    padding: 32px 16px;
    color: var(--text-subtle, #64748b);
    background: var(--bg-subtle, #f8fafc);
    border: 1px dashed var(--border-color, #cbd5e1);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}

.briefing-box-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.briefing-box-header h5 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
}

.briefing-box-sub {
    font-size: 0.72rem;
    color: var(--text-subtle);
    font-weight: 500;
}

.briefing-img-wrap {
    width: 100%;
    min-height: 200px;
    height: auto;
    border-radius: var(--radius-sm);
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    overflow: visible;
}

.briefing-img-wrap img {
    width: 100%;
    height: auto;
    max-height: 380px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    display: block;
}

/* Section 4: Tables Grid */
.briefing-tables-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 750px) {
    .briefing-tables-row {
        grid-template-columns: 1fr;
    }
}

.briefing-table-wrap {
    overflow-x: auto;
    width: 100%;
}

.briefing-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    text-align: left;
}

.briefing-data-table th {
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-color);
}

.briefing-data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-main);
    vertical-align: middle;
}

.briefing-data-table tbody tr:last-child td {
    border-bottom: none;
}

.briefing-data-table tbody tr:hover {
    background: var(--bg-subtle);
}

.briefing-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
}

.briefing-bar-container {
    width: 100%;
    height: 6px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.briefing-bar-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 3px;
}

.briefing-bar-fill-divs {
    background: var(--brand-secondary, #10b981);
}

/* Incidents Ledger Table */
.briefing-incidents-table th {
    padding: 10px 12px;
}

.briefing-incidents-table td {
    padding: 9px 12px;
}

.briefing-case-pill {
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-primary);
    background: rgba(37, 99, 235, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

/* Section 6: Attestation Card */
.briefing-attestation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-top: 24px;
}

.briefing-attestation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 600px) {
    .briefing-attestation-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.briefing-sig-line {
    border-bottom: 1px solid var(--text-muted);
    height: 36px;
    margin-bottom: 6px;
}

.briefing-sig-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

.briefing-sig-sub {
    font-size: 0.72rem;
    color: var(--text-subtle);
    margin-top: 2px;
}

.briefing-disclaimer {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: justify;
}

/* ==============================================================================
   8. Print & Export PDF Styling Rules
   ============================================================================== */
@page {
    margin: 12mm 14mm;
    size: portrait;
}

@media print {

    /* Hide all other app DOM elements */
    body {
        background: #ffffff !important;
        color: #0f172a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body * {
        visibility: hidden;
    }

    #executive-briefing-modal,
    #executive-briefing-modal * {
        visibility: visible;
    }

    #executive-briefing-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #ffffff !important;
        color: #0f172a !important;
        padding: 0;
        margin: 0;
        display: block !important;
        box-shadow: none !important;
    }

    .modal-backdrop,
    .modal-header,
    .modal-header-actions,
    .modal-footer,
    .modal-footer-briefing,
    .btn-close-modal {
        display: none !important;
    }

    .modal-dialog-briefing {
        box-shadow: none !important;
        border: none !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        background: #ffffff !important;
        color: #0f172a !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .modal-body-briefing {
        padding: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    .briefing-doc-banner {
        background: #0f172a !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .briefing-print-header,
    .briefing-executive-summary-card,
    .briefing-kpi-card,
    .briefing-map-box,
    .briefing-chart-box,
    .briefing-table-card,
    .briefing-attestation-card {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .modal-body-briefing [contenteditable="true"] {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        border: none !important;
    }

    .briefing-section {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .briefing-page-break-before {
        page-break-before: auto !important;
        break-before: auto !important;
    }

    .briefing-doc-title,
    .briefing-kpi-val,
    .briefing-section-header h4,
    .briefing-box-header h5,
    .briefing-sig-label {
        color: #0f172a !important;
    }

    .briefing-meta-val,
    .briefing-executive-summary-card,
    .briefing-data-table td {
        color: #1e293b !important;
    }

    .briefing-meta-label,
    .briefing-kpi-label,
    .briefing-data-table th,
    .briefing-sig-sub,
    .briefing-disclaimer {
        color: #64748b !important;
    }

    .briefing-data-table th {
        background: #f1f5f9 !important;
        border-bottom-color: #cbd5e1 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .briefing-data-table td {
        border-bottom-color: #e2e8f0 !important;
    }

    .briefing-bar-container {
        background: #e2e8f0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .briefing-bar-fill {
        background: #2563eb !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .briefing-section-num {
        background: #1e3a8a !important;
        color: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .briefing-case-pill {
        color: #1d4ed8 !important;
        background: #eff6ff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .briefing-img-wrap {
        border-color: #cbd5e1 !important;
        background: #f8fafc !important;
    }
}

/* ==============================================================================
   9. Help Center & User Guide Modal Styles
   ============================================================================== */
.header-help-pill {
    background: var(--brand-light) !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--brand-focus-ring) !important;
    font-weight: 700;
}

.modal-dialog-help {
    max-width: 960px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    position: relative;
    z-index: 101;
    animation: scaleUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-header-help {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--bg-surface) 100%);
}

.help-header-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--brand-light);
    border: 1px solid var(--brand-focus-ring);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-search-section {
    padding: 16px 24px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.help-search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-subtle);
    pointer-events: none;
}

.help-search-box input {
    width: 100%;
    padding: 11px 40px 11px 42px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.95rem;
    outline: none;
    transition: var(--transition);
}

.help-search-box input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-focus-ring);
}

.help-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px;
    border-radius: 4px;
}

.help-search-clear:hover {
    color: var(--text-main);
}

.help-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-cat-pill {
    padding: 5px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.help-cat-pill:hover {
    background: var(--brand-light);
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.help-cat-pill.active {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
    box-shadow: 0 2px 8px var(--brand-focus-ring);
}

.help-search-meta {
    font-size: 0.78rem;
    color: var(--text-subtle);
    display: flex;
    justify-content: flex-end;
}

.modal-body-help {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-page);
}

.help-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    transition: var(--transition);
}

.help-card:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-md);
}

.help-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.help-card-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    padding-top: 2px;
}

.help-card-title-wrap {
    flex: 1;
}

.help-card-title-wrap h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.help-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.help-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--brand-light);
    color: var(--brand-primary);
    border: 1px solid var(--brand-focus-ring);
}

.help-card-body {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.help-card-body p {
    margin: 0 0 10px 0;
}

.help-card-body h5 {
    margin: 12px 0 6px 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.help-step-list {
    margin: 0 0 12px 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-step-list li {
    line-height: 1.5;
}

.help-step-list li strong {
    color: var(--text-main);
}

.help-tip-box {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--brand-light);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.84rem;
    color: var(--text-main);
}

.help-shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.84rem;
}

.help-shortcuts-table th,
.help-shortcuts-table td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    text-align: left;
    color: var(--text-main);
}

.help-shortcuts-table th {
    background: var(--bg-subtle);
    font-weight: 600;
    color: var(--text-muted);
}

.help-shortcuts-table kbd {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    font-family: monospace;
    font-size: 0.78rem;
    padding: 2px 6px;
    color: var(--brand-primary);
    font-weight: 600;
}

.help-empty-state {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

.help-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.help-empty-state h4 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    color: var(--text-main);
}

.help-empty-state p {
    color: var(--text-subtle);
    font-size: 0.88rem;
    max-width: 480px;
    margin: 0 auto 16px auto;
}

.modal-footer-help {
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
}

.help-footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-subtle);
}

.help-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

@media (max-width: 768px) {
    .modal-dialog-help {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .help-search-section {
        padding: 12px 16px;
    }

    .modal-body-help {
        padding: 14px 16px;
    }

    .help-category-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .help-cat-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   Executive Intelligence Briefing Modal & Report Styles
   ========================================================================== */
#executive-briefing-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.executive-briefing-dialog {
    width: 100%;
    max-width: 1050px;
    height: 92vh;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.executive-briefing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-surface, #ffffff);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
}

.executive-briefing-header .briefing-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.briefing-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--brand-primary, #2563eb);
    font-size: 18px;
}

.executive-briefing-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.briefing-subtitle {
    font-size: 0.8rem;
    color: var(--text-subtle, #64748b);
}

.executive-briefing-header .briefing-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.executive-briefing-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: var(--bg-body, #f8fafc);
}

.briefing-report-container {
    max-width: 960px;
    margin: 0 auto;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.briefing-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
    margin-bottom: 24px;
    gap: 20px;
}

.briefing-seal-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.briefing-seal-icon {
    font-size: 36px;
    color: var(--brand-primary, #2563eb);
    line-height: 1;
}

.briefing-banner h2 {
    margin: 0 0 4px 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-main, #0f172a);
}

.briefing-jurisdiction-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-primary, #2563eb);
}

.briefing-meta-block {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.briefing-meta-row {
    font-size: 0.8rem;
    color: var(--text-subtle, #64748b);
}

.briefing-meta-row strong {
    color: var(--text-main, #0f172a);
}

.briefing-section {
    margin-bottom: 28px;
    page-break-inside: avoid;
}

.briefing-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main, #0f172a);
    margin: 0 0 14px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.briefing-section-title i {
    color: var(--brand-primary, #2563eb);
}

.briefing-section-tag {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-subtle, #64748b);
}

.briefing-narrative-card {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-left: 4px solid var(--brand-primary, #2563eb);
    border-radius: 6px;
    padding: 14px 18px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main, #1e293b);
}

.briefing-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.briefing-kpi-cell {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
}

.briefing-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-subtle, #64748b);
    margin-bottom: 4px;
}

.briefing-kpi-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main, #0f172a);
    line-height: 1.2;
}

.briefing-kpi-sub {
    font-size: 0.75rem;
    color: var(--text-muted, #94a3b8);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.briefing-visuals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.briefing-visual-card {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 12px;
}

.briefing-visual-card h5 {
    margin: 0 0 8px 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.briefing-visual-card h5 span {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--text-subtle, #64748b);
}

.briefing-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.briefing-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.briefing-tables-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.briefing-table-wrap {
    background: var(--bg-subtle, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    padding: 12px;
}

.briefing-table-wrap h5 {
    margin: 0 0 8px 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.briefing-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.briefing-data-table th,
.briefing-data-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.briefing-data-table th {
    font-weight: 700;
    color: var(--text-subtle, #64748b);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.briefing-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
}

.briefing-bar-container {
    width: 100%;
    height: 6px;
    background: var(--bg-surface, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.briefing-bar-fill {
    height: 100%;
    background: var(--brand-primary, #2563eb);
    border-radius: 3px;
}

.briefing-case-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-color, #cbd5e1);
    font-family: monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary, #2563eb);
}

.briefing-report-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin-top: 24px;
    font-size: 0.75rem;
    color: var(--text-subtle, #64748b);
}

.briefing-disclaimer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.executive-briefing-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: var(--bg-surface, #ffffff);
    border-top: 1px solid var(--border-color, #e2e8f0);
    flex-shrink: 0;
}

.briefing-footer-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-subtle, #64748b);
}

.briefing-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media print {
    body * {
        visibility: hidden;
    }

    #executive-briefing-modal,
    #executive-briefing-modal * {
        visibility: visible;
    }

    #executive-briefing-modal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .executive-briefing-dialog {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .executive-briefing-header,
    .executive-briefing-footer,
    .briefing-header-actions,
    .modal-header-actions,
    .modal-footer-briefing,
    .btn-icon-close,
    .btn-close-modal,
    .no-print,
    .briefing-col-select-panel,
    #briefing-graphics-select-panel,
    #briefing-col-select-panel,
    .briefing-section-tag,
    .btn-briefing-col-tool,
    .briefing-col-chips,
    .briefing-edit-indicator {
        display: none !important;
    }

    .executive-briefing-body,
    .modal-body-briefing {
        padding: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
    }

    .briefing-report-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    .briefing-section {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .briefing-visual-box {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        padding: 12px !important;
    }

    .briefing-img-wrap {
        border: none !important;
        background: transparent !important;
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .briefing-img-wrap img {
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        display: block !important;
    }

    [contenteditable="true"] {
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

/* ==============================================================================
   Portal Header Auto-Refresh Switch Styling
   ============================================================================== */
.auto-refresh-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 5px 12px;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-card-subtle, rgba(241, 245, 249, 0.7));
    border: 1px solid var(--border-color, #e2e8f0);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.auto-refresh-toggle-wrap:hover {
    background: var(--bg-hover, rgba(59, 130, 246, 0.08));
    border-color: var(--primary-color, #3b82f6);
}

.auto-refresh-toggle-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.auto-refresh-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
    background: var(--border-color, #cbd5e1);
    border-radius: 20px;
    transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.auto-refresh-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auto-refresh-toggle-wrap input[type="checkbox"]:checked+.auto-refresh-switch {
    background: var(--primary-color, #3b82f6);
}

.auto-refresh-toggle-wrap input[type="checkbox"]:checked+.auto-refresh-switch::after {
    transform: translateX(14px);
}

.auto-refresh-label-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #475569);
    transition: color 0.2s ease;
}

.auto-refresh-toggle-wrap:hover .auto-refresh-label-text,
.auto-refresh-toggle-wrap:has(input[type="checkbox"]:checked) .auto-refresh-label-text {
    color: var(--text-main, #0f172a);
}

/* ==============================================================================
   Portal Header Sort Dropdown Styling
   ============================================================================== */
.portal-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 10px;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-card-subtle, rgba(241, 245, 249, 0.7));
    border: 1px solid var(--border-color, #e2e8f0);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-sort-wrap:hover,
.portal-sort-wrap:focus-within {
    background: var(--bg-hover, rgba(59, 130, 246, 0.08));
    border-color: var(--primary-color, #3b82f6);
}

.portal-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #475569);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}

.portal-sort-label svg {
    color: var(--primary-color, #3b82f6);
    flex-shrink: 0;
}

.portal-sort-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-main, #0f172a);
    cursor: pointer;
    padding: 2px 18px 2px 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 10px 10px;
    transition: color 0.2s ease;
}

.portal-sort-select option {
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #0f172a);
    font-weight: 500;
}

.portal-sort-wrap:hover .portal-sort-label,
.portal-sort-wrap:focus-within .portal-sort-label {
    color: var(--text-main, #0f172a);
}

/* ==============================================================================
   COMPREHENSIVE MOBILE DEVICE OPTIMIZATIONS & TOUCH COMPATIBILITY (<= 768px & <= 480px)
   ============================================================================== */

@media (max-width: 768px) {

    /* 1. Global Touch & Viewport Polish */
    html,
    body {
        overflow-x: hidden;
        width: 100vw;
        max-width: 100vw;
        -webkit-text-size-adjust: 100%;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* iOS Auto-Zoom Prevention on Form Inputs */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Minimum touch target heights */
    button,
    .btn,
    .preset-pill,
    .add-data-tab-btn,
    .btn-close-modal {
        min-height: 40px;
    }

    /* Smooth Momentum Inertia Scrolling */
    .main-content,
    .table-responsive,
    .distribution-bars,
    .modal-body,
    .executive-briefing-body,
    .modal-body-help,
    .help-category-pills,
    .url-columns-chips-container {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* 2. Top Navigation Header */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--bg-card);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border-color);
        padding-top: max(env(safe-area-inset-top), 0px);
    }

    .header-container {
        min-height: 52px;
        padding: 6px 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 8px;
    }

    .brand-group {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: var(--radius-sm, 6px);
        flex-shrink: 0;
    }

    .brand-logo-img {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }

    .brand-title {
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .brand-subtitle {
        display: none !important;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
    }

    .header-actions .btn {
        padding: 6px 10px;
        font-size: 0.78rem;
        border-radius: var(--radius-sm, 6px);
        height: 36px;
    }

    .header-actions .btn svg {
        width: 15px;
        height: 15px;
    }

    .header-version-pill {
        display: none !important;
    }

    /* Active Dataset Switcher Bar on Mobile */
    .header-center {
        order: 3;
        width: 100%;
        margin: 2px 0 0 0;
        padding: 6px 12px;
        border-radius: var(--radius-sm, 6px);
        background: var(--bg-subtle, rgba(241, 245, 249, 0.8));
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .active-db-info-group {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1 1 auto;
    }

    .active-badge {
        font-size: 0.65rem;
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    .active-db-name {
        font-size: 0.88rem;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1 1 auto;
        min-width: 0;
    }

    #btn-switch-db {
        padding: 4px 10px;
        font-size: 0.76rem;
        font-weight: 600;
        height: 30px;
        min-height: 30px;
        flex-shrink: 0;
    }

    /* 3. Main Content Container */
    .main-content {
        padding: 14px 12px max(env(safe-area-inset-bottom), 36px);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 4. Database Launch Portal View */
    .portal-hero {
        margin: 6px auto 18px;
        padding: 0 4px;
        text-align: center;
    }

    .portal-title {
        font-size: 1.55rem;
        line-height: 1.25;
        margin-bottom: 6px;
        font-weight: 800;
    }

    .portal-description {
        font-size: 0.88rem;
        line-height: 1.45;
        color: var(--text-subtle);
    }

    .portal-controls-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 16px;
    }

    .portal-search-wrap {
        width: 100%;
    }

    .portal-search-wrap input {
        width: 100%;
        height: 42px;
        font-size: 16px !important;
    }

    .db-grid-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 16px;
    }

    .db-header-left,
    .db-header-right {
        width: 100%;
    }

    .section-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }

    .section-heading h2 {
        font-size: 1.15rem;
        font-weight: 700;
    }

    .db-header-controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .db-header-view-group {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
        padding: 4px 6px;
    }

    .db-header-action-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 8px;
    }

    .db-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .db-card {
        padding: 16px 14px;
        border-radius: var(--radius-md, 10px);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .db-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .db-card-title {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        word-break: break-word;
    }

    .db-card-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .db-card-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
    }

    .db-card-actions .btn-open-db {
        flex: 1 1 auto;
        height: 42px;
        font-size: 0.88rem;
        font-weight: 700;
    }

    .db-card-actions .btn-edit-db-scraper,
    .db-card-actions .btn-delete-db {
        width: 42px;
        height: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: var(--radius-sm, 6px);
    }

    /* 5. Dashboard Header Bar & Subheader Tools */
    .dash-header-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .dash-header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }

    .dash-title-display-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .dash-title {
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1.25;
        word-break: break-word;
    }

    .dash-title-edit-form {
        width: 100%;
        flex-direction: column;
        gap: 8px;
    }

    .input-dash-title-edit {
        width: 100%;
        font-size: 16px !important;
        height: 40px;
    }

    .dash-title-edit-actions {
        display: flex;
        gap: 8px;
        width: 100%;
    }

    .dash-title-edit-actions .btn {
        flex: 1;
        height: 38px;
    }

    .dash-header-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        align-items: center;
    }

    .dash-header-tools .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 130px;
        height: 40px;
        padding: 8px 12px;
        font-size: 0.8rem;
        font-weight: 600;
        justify-content: center;
    }

    .dash-header-tools #btn-open-briefing {
        flex: 1 1 100%;
        height: 44px;
        font-size: 0.9rem;
        font-weight: 700;
        order: -1;
    }

    /* 6. Date Scope Filter Box */
    .date-filter-box {
        padding: 12px;
        margin-bottom: 16px;
        border-radius: var(--radius-md, 10px);
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .date-filter-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .date-presets-group {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .date-presets-group::-webkit-scrollbar {
        display: none;
    }

    .preset-pill {
        padding: 6px 12px;
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
        min-height: 34px;
    }

    .custom-date-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        margin-left: 0;
    }

    .date-field {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        width: 100%;
    }

    .date-field label {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-subtle);
    }

    .date-field input[type="date"] {
        width: 100%;
        max-width: 100%;
        height: 38px;
        padding: 6px 8px;
        font-size: 16px !important;
        border-radius: var(--radius-sm, 6px);
        box-sizing: border-box;
    }

    /* 7. Stackable Filter Controls */
    .filter-card {
        padding: 14px;
        margin-bottom: 16px;
        border-radius: var(--radius-md, 10px);
    }

    .stackable-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-group select {
        height: 42px;
        font-size: 16px !important;
        padding: 8px 12px;
        border-radius: var(--radius-sm, 6px);
    }

    /* 8. KPI Metrics Row */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .metric-card {
        padding: 14px 12px;
        border-radius: var(--radius-md, 10px);
    }

    .metric-label {
        font-size: 0.72rem;
        font-weight: 700;
    }

    .metric-value {
        font-size: 1.4rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .metric-value-sm {
        font-size: 1.05rem;
    }

    /* 9. Charts & Visualizations Row */
    .charts-row {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 16px;
    }

    .chart-card {
        padding: 14px 12px;
        border-radius: var(--radius-md, 10px);
    }

    .chart-container-wrap {
        height: 260px;
        max-height: 260px;
        width: 100%;
        position: relative;
    }

    .distribution-bars {
        max-height: 280px;
    }

    /* 10. Interactive Map Card */
    .map-card {
        margin-bottom: 16px;
        border-radius: var(--radius-md, 10px);
        overflow: hidden;
    }

    .map-card-header {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .map-header-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .map-header-tools .btn {
        flex: 1 1 auto;
        min-height: 36px;
        font-size: 0.76rem;
    }

    .map-container-wrap {
        height: 380px;
        min-height: 320px;
        width: 100%;
        touch-action: pan-x pan-y pinch-zoom;
    }

    /* Mobile Bottom-Sheet Popup for ESRI Map */
    .esri-popup__main-container {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 65vh !important;
        left: 8px !important;
        right: 8px !important;
        bottom: 8px !important;
        border-radius: 12px !important;
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.25) !important;
    }

    /* 11. Data Results Table Card */
    .results-card-header {
        padding: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .results-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        justify-content: space-between;
    }

    .results-header-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-height: 38px;
        font-size: 0.78rem;
    }

    .results-limit-control {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .results-limit-control select {
        flex: 1;
        height: 38px;
        font-size: 16px !important;
    }

    .table-responsive {
        max-height: 60vh;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 600px;
    }

    .data-table th {
        position: sticky;
        top: 0;
        background: var(--bg-card);
        z-index: 2;
        padding: 10px 8px;
        font-size: 0.75rem;
    }

    .data-table td {
        padding: 10px 8px;
        font-size: 0.78rem;
    }

    .pagination-bar {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 12px;
    }

    .pagination-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        justify-content: space-between;
    }

    .pagination-nav .btn {
        flex: 1;
        height: 40px;
    }

    /* 12. Modal Dialogs Full Responsiveness on Mobile */
    .modal-backdrop {
        padding: 8px;
        align-items: flex-end;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 94vh !important;
        height: auto;
        border-radius: 14px 14px 0 0 !important;
        margin: 0 !important;
    }

    .modal-header {
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modal-header h3 {
        font-size: 1.1rem;
        font-weight: 700;
    }

    .btn-close-modal {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .modal-body {
        padding: 14px 16px;
        max-height: calc(94vh - 140px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 12px 16px max(env(safe-area-inset-bottom), 12px);
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .modal-footer .btn {
        width: 100%;
        height: 44px;
        font-size: 0.9rem;
        font-weight: 700;
        justify-content: center;
    }

    /* Add Data Modal Specific Mobile Styles */
    .add-data-tab-strip {
        padding: 8px 12px 0;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .add-data-tab-btn {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.82rem;
    }

    .url-input-action-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .url-input-action-row .btn {
        width: 100%;
        height: 42px;
    }

    .url-scope-box {
        padding: 12px;
    }

    .url-columns-chips-container {
        max-height: 200px;
        overflow-y: auto;
        padding: 4px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .url-col-chip {
        padding: 6px 10px;
        font-size: 0.78rem;
    }

    /* Executive Briefing Modal on Mobile */
    .executive-briefing-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    .executive-briefing-header {
        padding: 12px 14px;
    }

    .executive-briefing-header h3 {
        font-size: 1.05rem;
    }

    .executive-briefing-body {
        padding: 12px 10px;
    }

    .briefing-report-container {
        padding: 16px 12px;
        border-radius: var(--radius-sm, 6px);
    }

    .briefing-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .briefing-banner-left {
        width: 100%;
    }

    .briefing-banner-title {
        font-size: 1.25rem;
        line-height: 1.3;
    }

    .briefing-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .briefing-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .briefing-kpi-val {
        font-size: 1.25rem;
    }

    .briefing-visual-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Theme Modal Grid on Mobile */
    .theme-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .theme-card {
        padding: 10px 8px;
        min-height: 60px;
    }
}

/* ==============================================================================
   EXTRA-SMALL PHONES (<= 480px, e.g. iPhone SE, Mini, Galaxy S series)
   ============================================================================== */
@media (max-width: 480px) {
    .brand-title {
        font-size: 0.95rem;
    }

    .header-actions .btn {
        padding: 6px;
        min-width: 34px;
        height: 34px;
    }

    .metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .metric-value {
        font-size: 1.22rem;
    }

    .dash-title {
        font-size: 1.25rem;
    }

    .custom-date-inputs {
        grid-template-columns: 1fr;
    }

    .theme-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   COMMUNITY COMMENTS & MESSAGE BOARD STYLES
   ========================================================================== */

.comments-page-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: fadeIn 0.3s ease-out;
}

.comments-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

/* Contact Interest Callout Banner */
.contact-interest-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--bg-surface) 100%);
    border: 1.5px solid var(--border-focus);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px var(--brand-light);
    flex-wrap: wrap;
}

.contact-banner-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 280px;
}

.contact-banner-badge {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border-focus);
}

.contact-banner-text h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 3px 0;
}

.contact-banner-text p {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.btn-contact-interest-cta {
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    box-shadow: 0 2px 8px var(--brand-focus-ring);
}

@media (max-width: 768px) {
    .contact-interest-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-contact-interest-cta {
        width: 100%;
    }
}

.comments-header-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 280px;
}

.comments-title-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comments-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.comments-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.02em;
}

.comments-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 9999px;
    background: var(--brand-light);
    color: var(--brand-primary);
    border: 1px solid var(--border-focus);
}

.comments-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.comments-header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.admin-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 4px 10px;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.comments-stacked-layout {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Comment Composer (Compact, Theme-Matched & Sleek) */
.comment-composer-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.composer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.composer-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.composer-title-group h3 {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 2px 0;
}

.composer-title-group p {
    font-size: 0.76rem;
    color: var(--text-muted);
    margin: 0;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.composer-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}

.comment-form .input-field,
.comment-form .select-field {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit;
    height: 38px !important;
    padding: 6px 12px !important;
    font-size: 0.85rem !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    outline: none !important;
}

.comment-form .input-field:focus,
.comment-form .select-field:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-focus-ring) !important;
}

.comment-form .textarea-field {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-family: inherit;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    padding: 10px 12px !important;
    min-height: 110px !important;
    max-height: 240px !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    outline: none !important;
    resize: vertical;
}

.comment-form .textarea-field:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-focus-ring) !important;
}

.comment-form .textarea-field::placeholder,
.comment-form .input-field::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.visibility-segmented-control-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .visibility-segmented-control-compact {
        grid-template-columns: 1fr;
    }
}

.visibility-option-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    background: var(--bg-surface);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.visibility-option-compact input[type="radio"] {
    margin: 0;
    accent-color: var(--brand-primary);
    flex-shrink: 0;
}

.visibility-option-compact.active {
    border-color: var(--brand-primary);
    background: var(--brand-light);
}

.vis-opt-compact-body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.vis-opt-compact-body svg {
    color: var(--brand-primary);
    flex-shrink: 0;
}

.vis-opt-compact-body strong {
    display: block;
    font-size: 0.82rem;
    color: var(--text-main);
}

.vis-opt-compact-body span {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.author-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.author-toggle-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-surface);
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.author-toggle-pill input[type="radio"] {
    display: none;
}

.author-toggle-pill.active {
    border-color: var(--brand-primary);
    background: var(--brand-light);
    color: var(--brand-primary);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 680px) {

    .form-row-2,
    .form-row-3 {
        grid-template-columns: 1fr;
    }
}

.char-count-wrap {
    display: flex;
    justify-content: flex-end;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.composer-submit-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.composer-privacy-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    flex: 1;
    min-width: 240px;
    box-sizing: border-box;
}

.composer-privacy-note svg {
    color: var(--brand-primary);
    flex-shrink: 0;
}

.btn-submit-composer {
    flex-shrink: 0;
    min-width: 150px;
    height: 38px;
}

/* Comments Feed Card (Expanded Length) */
.comment-feed-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 650px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.feed-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-subtle);
    flex-wrap: wrap;
}

.feed-header-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feed-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.feed-tab:hover {
    color: var(--text-main);
    background: var(--bg-surface);
}

.feed-tab.active {
    color: var(--text-main);
    background: var(--bg-surface);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xs);
}

.feed-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.feed-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feed-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    height: 32px;
}

.feed-search-wrap svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.feed-search-wrap input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 0.82rem;
    width: 140px;
}

.comments-list-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

/* Individual Comment Card */
.comment-item-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.15s ease;
    position: relative;
}

.comment-item-card:hover {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-sm);
}

.comment-item-card.comment-is-pinned {
    border-color: rgba(245, 158, 11, 0.5);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, var(--bg-primary) 100%);
}

.comment-item-card.comment-is-private {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-primary) 100%);
}

.comment-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.comment-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-hover) 100%);
    flex-shrink: 0;
    text-transform: uppercase;
}

.comment-author-avatar.avatar-anon {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.comment-author-avatar.avatar-admin {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

.comment-author-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.comment-author-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
}

.comment-author-meta {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.comment-badges-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.comment-cat-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.comment-pinned-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-privacy-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-comment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-comment-action:hover {
    background: var(--bg-tertiary);
    color: var(--text-main);
}

.btn-comment-action.btn-edit-comment:hover {
    background: var(--brand-light);
    color: var(--brand-primary);
    border-color: var(--border-focus);
}

.btn-comment-action.btn-delete-comment:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-comment-action.btn-pin-comment.pinned {
    color: #d97706;
}

.comment-item-subject {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.comment-item-body-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comment-item-body {
    font-size: 0.88rem;
    color: var(--text-main);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-edited-tag {
    align-self: flex-end;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--text-muted);
    user-select: none;
    opacity: 0.75;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.comment-inline-edit-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.comment-inline-edit-subject {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    outline: none !important;
}

.comment-inline-edit-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 70px !important;
    padding: 8px 10px !important;
    font-size: 0.86rem !important;
    line-height: 1.45 !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    font-family: inherit !important;
    resize: vertical !important;
    outline: none !important;
}

.comment-inline-edit-textarea:focus,
.comment-inline-edit-subject:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 2px var(--brand-focus-ring) !important;
}

.comment-inline-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.comment-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    gap: 12px;
}

.comment-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* ==============================================================================
   MESSAGE BOARD & COMMENTS MOBILE RESPONSIVE OPTIMIZATIONS
   ============================================================================== */
.comment-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .comments-page-container {
        padding: 16px 12px 48px;
        gap: 16px;
    }

    .comments-header-bar {
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .comments-header-info {
        min-width: 0;
        width: 100%;
        gap: 12px;
    }

    .comments-title {
        font-size: 1.25rem;
    }

    .comments-header-tools {
        width: 100%;
        justify-content: flex-end;
    }

    .feed-header-bar {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .feed-header-tabs {
        width: 100%;
        display: flex;
        gap: 6px;
    }

    .feed-tab {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .feed-filter-bar {
        width: 100%;
        display: flex;
        gap: 8px;
    }

    .feed-search-wrap {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    .feed-search-wrap input {
        width: 100%;
    }

    #filter-comment-cat {
        min-width: 110px;
    }
}

@media (max-width: 640px) {
    .comments-page-container {
        padding: 12px 10px 40px;
        gap: 14px;
    }

    .comments-title {
        font-size: 1.15rem;
    }

    .comments-badge {
        font-size: 0.68rem;
    }

    .comments-subtitle {
        font-size: 0.8rem;
    }

    .btn-back-portal .btn-back-label {
        font-size: 0.8rem;
    }

    .contact-interest-banner {
        padding: 14px 16px;
        gap: 14px;
    }

    .contact-banner-info {
        min-width: 0;
        width: 100%;
        gap: 12px;
    }

    .contact-banner-badge {
        width: 38px;
        height: 38px;
    }

    .contact-banner-text h3 {
        font-size: 0.98rem;
    }

    .contact-banner-text p {
        font-size: 0.82rem;
    }

    .btn-contact-interest-cta {
        width: 100%;
        justify-content: center;
    }

    .comment-composer-card {
        padding: 14px 14px;
        border-radius: var(--radius-md);
    }

    .composer-header {
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 8px;
    }

    .composer-icon {
        width: 28px;
        height: 28px;
    }

    .composer-title-group h3 {
        font-size: 0.92rem;
    }

    .composer-title-group p {
        font-size: 0.74rem;
    }

    .visibility-segmented-control-compact {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .author-toggle-group {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .composer-submit-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .composer-privacy-note {
        min-width: 0;
        width: 100%;
    }

    .btn-submit-composer {
        width: 100%;
        justify-content: center;
    }

    .comment-feed-card {
        border-radius: var(--radius-md);
        min-height: auto;
    }

    .comments-list-container {
        padding: 12px 10px;
        gap: 10px;
    }

    .comment-item-card {
        padding: 12px 12px;
        gap: 8px;
    }

    .comment-item-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .comment-author-info {
        gap: 8px;
    }

    .comment-author-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .comment-author-name {
        font-size: 0.88rem;
    }

    .comment-header-right {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }

    .comment-item-subject {
        font-size: 0.92rem;
    }

    .comment-item-body {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .btn-comment-action {
        width: 32px;
        height: 32px;
    }
}

/* ==============================================================================
   ADMIN WEB INTERFACE (/admin & /admininterface)
   ============================================================================== */

.admin-page-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

/* 1. Admin Authentication Gateway (Full Web Page Sized Prompt) */
.admin-auth-fullscreen-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 30px 16px 60px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.admin-auth-card-hero {
    width: 100%;
    max-width: 520px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 44px 36px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.admin-auth-card-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-hover), var(--border-focus));
}

.admin-auth-ambient-glow {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--brand-light) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.admin-shield-icon-lg {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--brand-light) 0%, var(--bg-surface) 100%);
    border: 1.5px solid var(--border-focus);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    box-shadow: 0 12px 30px var(--brand-focus-ring), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.admin-shield-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 28px;
    border: 1.5px solid var(--border-focus);
    animation: pulseShieldRing 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none;
}

@keyframes pulseShieldRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.85;
    }
}

.admin-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 14px;
    border-radius: 9999px;
    background: var(--brand-light);
    border: 1px solid var(--border-focus);
    color: var(--brand-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.pulse-dot-indigo {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-primary);
    box-shadow: 0 0 8px var(--brand-primary);
    animation: pulseDot 2s infinite;
}

.admin-auth-header h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

.admin-auth-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 28px;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

.admin-login-form {
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.admin-form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text-main);
    margin-bottom: 6px;
}

.admin-form-label .required-indicator {
    color: #ef4444;
    font-weight: 700;
}

.admin-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.admin-input-wrap .input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 2;
}

.admin-input-wrap .admin-pw-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 42px !important;
    padding-right: 44px !important;
    font-size: 0.98rem !important;
    height: 48px !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    outline: none !important;
    transition: all 0.2s ease;
}

.admin-input-wrap .admin-pw-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-focus-ring) !important;
}

.btn-toggle-pw-visibility {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    z-index: 2;
}

.btn-toggle-pw-visibility:hover {
    color: var(--text-main);
}

.admin-auth-error-msg {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--radius-md);
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: left;
}

.admin-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.btn-admin-auth-submit {
    height: 48px;
    font-size: 0.95rem;
    font-weight: 700;
    justify-content: center;
    background: linear-gradient(135deg, var(--brand-hover) 0%, var(--brand-primary) 100%);
    box-shadow: 0 4px 15px var(--brand-focus-ring);
    border: none;
    border-radius: var(--radius-md);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-admin-auth-submit:hover {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-hover) 100%);
    box-shadow: 0 6px 20px var(--brand-focus-ring);
    transform: translateY(-1px);
}

.btn-admin-back-portal {
    height: 40px;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: var(--radius-md);
}

.admin-auth-footer-note {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.admin-auth-footer-note code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--brand-primary);
}

/* 2. Admin Console Dashboard Layout */
.admin-console-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.admin-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary);
    background: var(--brand-light);
    border: 1px solid var(--border-focus);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 6px;
}

.admin-console-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0;
}

.admin-console-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 4px 0 0;
}

.admin-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-session-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #10b981;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.btn-danger-subtle {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-weight: 600;
}

.btn-danger-subtle:hover {
    background: #ef4444;
    color: #ffffff;
}

/* Key Metrics Grid */
.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.admin-metric-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}

.metric-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.metric-icon-wrap.icon-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.metric-icon-wrap.icon-green {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.metric-icon-wrap.icon-purple {
    background: var(--brand-light);
    color: var(--brand-primary);
}

.metric-icon-wrap.icon-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.metric-data {
    display: flex;
    flex-direction: column;
}

.metric-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

.metric-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 3px;
}

/* Admin Card Container */
.admin-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.admin-card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-card-icon.icon-future {
    background: var(--brand-light);
    color: var(--brand-primary);
}

.admin-card-title-group h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.admin-card-title-group p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* Moderation Filter Toolbar */
.admin-mod-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.admin-scope-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tertiary);
    padding: 3px;
    border-radius: var(--radius-sm);
}

.admin-scope-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.admin-scope-tab.active {
    background: var(--bg-surface);
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.scope-count {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.admin-scope-tab.active .scope-count {
    background: var(--brand-light);
    color: var(--brand-primary);
}

.admin-mod-filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
    min-width: 240px;
}

.admin-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 320px;
    width: 100%;
}

.admin-search-input-wrap svg {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

.admin-search-input-wrap input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 6px 12px 6px 30px !important;
    font-size: 0.82rem !important;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    outline: none;
}

.admin-search-input-wrap input:focus {
    border-color: var(--brand-primary);
}

/* Moderation List & Cards */
.admin-moderation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-mod-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-mod-item:hover {
    border-color: var(--border-focus);
    box-shadow: var(--shadow-sm);
}

.admin-mod-item.is-pinned {
    border-left: 4px solid #d97706;
}

.admin-mod-item.is-private {
    border-left: 4px solid var(--brand-primary);
    background: var(--brand-light);
}

.admin-mod-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-mod-author-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-mod-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.admin-mod-avatar.avatar-anon {
    background: #64748b;
}

.admin-mod-avatar.avatar-private {
    background: var(--brand-primary);
}

.admin-mod-author-meta h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-mod-author-meta span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.admin-mod-actions-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-admin-del {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-admin-del:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

.btn-admin-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-admin-pin.pinned {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.btn-admin-pin:hover {
    color: var(--text-main);
}

.admin-mod-subject {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.admin-mod-content {
    font-size: 0.88rem;
    color: var(--text-main);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-subtle);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

/* Future Admin Modules Grid */
.admin-future-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.future-module-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.future-mod-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
}

.future-module-card h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 4px 0 0;
}

.future-module-card p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}

.future-module-card code {
    background: var(--bg-tertiary);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.74rem;
    color: var(--brand-primary);
}

.future-mod-tag {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    margin-top: 6px;
}

/* ==============================================================================
   WELCOME POPUP MODAL STYLES
   ============================================================================== */
.welcome-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: welcomeFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.welcome-modal-card {
    max-width: 480px;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    position: relative;
    animation: welcomeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Close button — top-right corner */
.welcome-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-faint);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 1;
}

.welcome-modal-close:hover {
    background: var(--bg-subtle);
    color: var(--text-main);
}

/* Body — centred, single padding zone */
.welcome-modal-body {
    padding: 36px 32px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Icon */
.welcome-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--brand-light);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* Title */
.welcome-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

/* Unified body text */
.welcome-modal-content-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
}

.welcome-modal-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0;
}

/* Comments hyperlink */
.welcome-comments-link {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.welcome-comments-link:hover {
    color: var(--brand-hover);
}

/* Action buttons — stacked full-width */
.welcome-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 18px;
}

.welcome-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 20px;
    border-radius: 10px;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    line-height: 1.3;
}

/* Primary CTA — solid brand fill */
.welcome-action-primary {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px var(--brand-focus-ring);
}

.welcome-action-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    transform: translateY(-1px);
}

/* Secondary CTA — outlined */
.welcome-action-secondary {
    background: transparent;
    color: var(--brand-primary);
    border-color: var(--border-color);
}

.welcome-action-secondary:hover {
    background: var(--brand-light);
    border-color: var(--brand-primary);
}

/* Ghost — muted outline */
.welcome-action-ghost {
    background: transparent;
    color: var(--text-subtle);
    border-color: var(--border-color);
}

.welcome-action-ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-main);
}

/* "Don't show again" link */
.welcome-dont-show {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.welcome-dont-show:hover {
    color: var(--text-subtle);
}

/* Animations */
@keyframes welcomeFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes welcomeSlideUp {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .welcome-modal-body {
        padding: 32px 20px 24px 20px;
    }

    .welcome-modal-title {
        font-size: 1.3rem;
    }
}

/* ==============================================================================
   Search Local Data Discovery, Demo Toggle, Local Quota & Theme-Adaptive Cards
   ============================================================================== */

/* Local Quota Indicator Pill */
.local-db-quota-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full, 9999px);
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.28);
    transition: var(--transition, all 0.2s ease);
    user-select: none;
}

[data-theme="dark"] .local-db-quota-badge,
[data-theme="cyberpunk"] .local-db-quota-badge,
[data-theme="synthwave"] .local-db-quota-badge,
[data-theme="dracula"] .local-db-quota-badge {
    background: rgba(129, 140, 248, 0.18);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.38);
}

.local-quota-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.btn-search-local {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 34px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    background: linear-gradient(135deg, var(--brand-primary, #2563eb) 0%, #6366f1 100%);
    border: none;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-search-local:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
    filter: brightness(1.08);
}

.btn-update-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 34px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-md, 8px);
    white-space: nowrap;
}

.btn-refresh-dbs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    height: 34px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: var(--radius-md, 8px);
    white-space: nowrap;
}

/* Demo Dashboards Toggle Switch */
.demo-dbs-toggle-wrap,
.auto-refresh-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    user-select: none;
    padding: 0 10px;
    height: 30px;
    border-radius: 9999px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.demo-dbs-toggle-wrap:hover,
.auto-refresh-toggle-wrap:hover {
    border-color: var(--brand-primary, #2563eb);
    color: var(--text-main, #0f172a);
}

.demo-dbs-toggle-wrap input[type="checkbox"],
.auto-refresh-toggle-wrap input[type="checkbox"] {
    display: none;
}

.demo-dbs-switch,
.auto-refresh-switch {
    width: 26px;
    height: 15px;
    background: var(--border-color, #cbd5e1);
    border-radius: 20px;
    position: relative;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.demo-dbs-switch::after,
.auto-refresh-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 11px;
    height: 11px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.demo-dbs-toggle-wrap input[type="checkbox"]:checked + .demo-dbs-switch,
.auto-refresh-toggle-wrap input[type="checkbox"]:checked + .auto-refresh-switch {
    background: var(--brand-primary, #2563eb);
}

.demo-dbs-toggle-wrap input[type="checkbox"]:checked + .demo-dbs-switch::after,
.auto-refresh-toggle-wrap input[type="checkbox"]:checked + .auto-refresh-switch::after {
    transform: translateX(11px);
}

/* Destination Target Grid on Add Data Forms */
.dest-target-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.dest-target-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-md, 10px);
    border: 1.5px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #ffffff);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.dest-target-card:hover {
    border-color: var(--brand-primary, #2563eb);
    background: var(--bg-subtle, #f8fafc);
}

.dest-target-card.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.dest-target-card input[type="radio"] {
    margin-top: 3px;
    accent-color: #6366f1;
}

.dest-card-body {
    flex: 1;
}

.dest-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--text-main, #0f172a);
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.dest-card-body p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
}

.dest-badge-free {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.dest-badge-admin {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

/* ==============================================================================
   Search Local Data Discovery Modal (#modal-search-local)
   ============================================================================== */
.modal-dialog-search-local {
    max-width: 880px !important;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-dialog-search-local.modal-fullscreen {
    max-width: none !important;
    width: 98vw !important;
    max-height: none !important;
    height: 96vh !important;
    border-radius: var(--radius-lg, 12px) !important;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-modal-action {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748b);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-modal-action:hover {
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-main, #0f172a);
}

.catalog-search-section {
    padding: 16px 24px 12px 24px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-surface, #ffffff);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.catalog-search-box {
    display: flex;
    align-items: center;
    position: relative;
    background: var(--bg-input, #ffffff);
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    padding: 4px 6px 4px 14px;
    gap: 10px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.catalog-search-box:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}

.catalog-search-icon {
    color: var(--text-faint, #94a3b8);
    flex-shrink: 0;
}

.catalog-search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: var(--text-main, #0f172a);
    padding: 8px 0;
}

.catalog-search-clear {
    background: none;
    border: none;
    color: var(--text-faint, #94a3b8);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.catalog-search-clear:hover {
    color: var(--text-main, #0f172a);
    background: var(--bg-subtle, #f1f5f9);
}

.btn-catalog-go {
    padding: 8px 18px;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
}

/* Quick Suggestion Chips (Collapsible) */
.catalog-quick-suggestions-collapsible {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-subtle, #f8fafc);
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.catalog-quick-suggestions-collapsible[open] {
    padding-bottom: 10px;
    background: var(--bg-subtle, rgba(248, 250, 252, 0.9));
}

.catalog-suggestions-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    outline: none;
    padding: 2px 0;
}

.catalog-suggestions-summary::-webkit-details-marker {
    display: none;
}

.catalog-suggestions-lbl {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main, #0f172a);
}

.catalog-collapse-chevron {
    transition: transform 0.2s ease;
    color: var(--text-subtle, #64748b);
    flex-shrink: 0;
}

.catalog-quick-suggestions-collapsible[open] .catalog-collapse-chevron {
    transform: rotate(90deg);
}

.catalog-suggestions-count-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #cbd5e1);
    color: var(--text-muted, #64748b);
}

.catalog-suggestions-toggle-hint {
    font-size: 0.72rem;
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

.catalog-suggestion-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color, rgba(203, 213, 225, 0.6));
}

.catalog-sug-chip {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-main, #0f172a);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.catalog-sug-chip:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    transform: translateY(-1px);
}

/* Filter Bar */
.catalog-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.catalog-source-pills {
    display: flex;
    gap: 6px;
}

.catalog-src-pill {
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: all 0.15s ease;
}

.catalog-src-pill.active {
    background: #6366f1;
    border-color: #6366f1;
    color: #ffffff;
    font-weight: 600;
}

.catalog-quota-status {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
}

.catalog-quota-status strong {
    color: #6366f1;
}

/* Catalog Date Filter Controls (Defaults to OFF) */
.catalog-date-filter-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    background: var(--bg-subtle, #f8fafc);
    border: 1px dashed var(--border-color, #cbd5e1);
    border-radius: var(--radius-md, 8px);
    margin-top: 2px;
    flex-wrap: wrap;
}

.catalog-date-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #0f172a);
    cursor: pointer;
    user-select: none;
}

.catalog-date-toggle-wrap input[type="checkbox"] {
    display: none;
}

.catalog-date-switch {
    width: 28px;
    height: 16px;
    background: var(--border-color, #cbd5e1);
    border-radius: 20px;
    position: relative;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.catalog-date-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.catalog-date-toggle-wrap input[type="checkbox"]:checked + .catalog-date-switch {
    background: #6366f1;
}

.catalog-date-toggle-wrap input[type="checkbox"]:checked + .catalog-date-switch::after {
    transform: translateX(12px);
}

.catalog-date-controls-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.catalog-date-mode-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}

.catalog-date-mode-select {
    padding: 3px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-main, #0f172a);
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: all 0.15s ease;
}

.catalog-date-mode-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.catalog-date-inputs-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.catalog-date-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted, #64748b);
    font-weight: 600;
}

.catalog-year-field {
    width: 82px;
    padding: 3px 8px;
    font-size: 0.82rem;
    border: 1px solid var(--border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-surface, #ffffff);
    color: var(--text-main, #0f172a);
    font-family: inherit;
    outline: none;
    transition: all 0.15s ease;
}

.catalog-year-field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.btn-clear-date-filter {
    font-size: 0.72rem;
    padding: 3px 8px;
}

/* Results Grid & Cards */
.modal-body-catalog {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--bg-page, #f8fafc);
}

.catalog-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.catalog-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.catalog-card:hover {
    transform: translateY(-2px);
    border-color: #6366f1;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

.catalog-card-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catalog-card-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.catalog-source-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.catalog-source-badge.badge-socrata {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.catalog-source-badge.badge-arcgis {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    border: 1px solid rgba(14, 165, 233, 0.25);
}

.catalog-source-badge.badge-fbi {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.catalog-metric-tag {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
    white-space: nowrap;
}

.catalog-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    line-height: 1.35;
    margin: 2px 0 0 0;
}

.catalog-card-agency {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalog-card-desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
    margin: 0;
    flex: 1;
}

.catalog-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-subtle, rgba(241, 245, 249, 0.6));
    border: 1px solid var(--border-color, rgba(226, 232, 240, 0.8));
    border-radius: 6px;
    font-size: 0.76rem;
}

.catalog-detail-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.catalog-detail-lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--text-subtle, #94a3b8);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.catalog-detail-val {
    font-weight: 600;
    color: var(--text-main, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.catalog-columns-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.catalog-col-pill {
    font-size: 0.68rem;
    font-family: monospace;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-subtle, #f1f5f9);
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-muted, #64748b);
}

.catalog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #f1f5f9);
}

.catalog-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6366f1;
    text-decoration: none;
    transition: color 0.15s ease;
}

.catalog-direct-link:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.btn-import-catalog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 600;
    border-radius: var(--radius-sm, 6px);
    background: #6366f1;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-import-catalog:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.35);
}

.btn-import-catalog:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Empty & Loading States */
.catalog-empty-state,
.catalog-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted, #64748b);
}

.catalog-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.catalog-empty-state h4 {
    font-size: 1.15rem;
    color: var(--text-main, #0f172a);
    margin: 0 0 6px 0;
}

.catalog-empty-state p {
    font-size: 0.9rem;
    max-width: 480px;
    margin: 0;
    line-height: 1.5;
}

/* ==============================================================================
   Visual Differentiation: Local Database Cards (.db-card.is-local)
   Optimized across all 24 Themes
   ============================================================================== */

.db-card.is-local {
    position: relative;
    border: 1.5px solid rgba(99, 102, 241, 0.4) !important;
    background: linear-gradient(180deg, var(--bg-surface, #ffffff) 0%, rgba(99, 102, 241, 0.04) 100%) !important;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.08) !important;
}

.db-card.is-local:hover {
    border-color: #6366f1 !important;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.18) !important;
    transform: translateY(-3px);
}

.db-card.is-local .db-card-icon {
    background: rgba(99, 102, 241, 0.12) !important;
    color: #6366f1 !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.badge-local-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.14);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
    margin-left: 6px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Dark & Vibrant Theme Optimizations for Local Cards */
[data-theme="dark"] .db-card.is-local,
[data-theme="tactical"] .db-card.is-local,
[data-theme="monolith"] .db-card.is-local {
    background: linear-gradient(180deg, #111827 0%, rgba(99, 102, 241, 0.12) 100%) !important;
    border-color: rgba(129, 140, 248, 0.5) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2) !important;
}

[data-theme="cyberpunk"] .db-card.is-local,
[data-theme="synthwave"] .db-card.is-local {
    background: linear-gradient(180deg, #1a0f2e 0%, rgba(255, 0, 128, 0.15) 100%) !important;
    border-color: #ff0080 !important;
    box-shadow: 0 0 18px rgba(255, 0, 128, 0.3) !important;
}

[data-theme="cyberpunk"] .db-card.is-local .badge-local-tag,
[data-theme="synthwave"] .db-card.is-local .badge-local-tag {
    background: rgba(255, 0, 128, 0.2);
    color: #ff0080;
    border-color: #ff0080;
}

[data-theme="matrix"] .db-card.is-local {
    background: linear-gradient(180deg, #051405 0%, rgba(0, 255, 65, 0.12) 100%) !important;
    border-color: #00ff41 !important;
    box-shadow: 0 0 16px rgba(0, 255, 65, 0.25) !important;
}

[data-theme="matrix"] .db-card.is-local .badge-local-tag {
    background: rgba(0, 255, 65, 0.2);
    color: #00ff41;
    border-color: #00ff41;
}

[data-theme="dracula"] .db-card.is-local,
[data-theme="tokyo-night"] .db-card.is-local,
[data-theme="amethyst"] .db-card.is-local {
    background: linear-gradient(180deg, #1e1f29 0%, rgba(189, 147, 249, 0.15) 100%) !important;
    border-color: #bd93f9 !important;
    box-shadow: 0 0 16px rgba(189, 147, 249, 0.25) !important;
}

[data-theme="dracula"] .db-card.is-local .badge-local-tag,
[data-theme="tokyo-night"] .db-card.is-local .badge-local-tag {
    background: rgba(189, 147, 249, 0.2);
    color: #bd93f9;
    border-color: #bd93f9;
}

[data-theme="cream"] .db-card.is-local,
[data-theme="sepia"] .db-card.is-local {
    background: linear-gradient(180deg, #fdfbf7 0%, rgba(180, 83, 9, 0.08) 100%) !important;
    border-color: #b45309 !important;
}

[data-theme="cream"] .db-card.is-local .badge-local-tag,
[data-theme="sepia"] .db-card.is-local .badge-local-tag {
    background: rgba(180, 83, 9, 0.12);
    color: #b45309;
    border-color: rgba(180, 83, 9, 0.3);
}

/* ==============================================================================
   Portal Categories & Headers (Published vs Local Dashboards)
   ============================================================================== */
.portal-categories-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.portal-category-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid var(--border-color, #e2e8f0);
    flex-wrap: wrap;
}

.category-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon.published-icon {
    background: rgba(37, 99, 235, 0.1);
    color: var(--brand-primary, #2563eb);
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.category-icon.local-icon {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.category-title-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.category-title-text h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-main, #0f172a);
    letter-spacing: -0.01em;
}

.category-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

.category-actions-group,
.category-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.category-count-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 9999px;
    background: var(--bg-subtle, #f1f5f9);
    color: var(--text-muted, #64748b);
    border: 1px solid var(--border-color, #e2e8f0);
}

/* Category header actions styling on mobile */
@media (max-width: 640px) {
    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .category-actions-group,
    .category-badges {
        width: 100%;
        justify-content: space-between;
    }
}