/* Hide Nova UNREGISTERED badge (links to nova.laravel.com/licenses) */
a[href*="nova.laravel.com/licenses"] {
    display: none !important;
}

/* Consistent logo sizing for login and sidebar */
.brand-logo {
    max-width: 180px !important;
    height: auto !important;
    width: 180px !important;
}

.login-logo img,
.sidebar-logo img,
.brand-logo img {
    max-width: 180px !important;
    height: auto !important;
    width: 180px !important;
    object-fit: contain;
}

/* Login page specific */
.min-h-screen .brand-logo,
.auth-container .brand-logo {
    max-width: 200px !important;
    width: 200px !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

/* Sidebar navigation logo */
.sidebar .brand-logo,
.nav-logo img {
    max-width: 160px !important;
    width: 160px !important;
    padding: 0.5rem !important;
}

/* Hide 'Create & Add Another' button */
button[dusk="create-and-add-another-button"] {
    display: none !important;
}

/* ══════════════════════════════════════════════════
   MOI Forensic Lab — Professional Light Mode
   Palette: Clean White + Navy (#1e3a5f) accent
   ══════════════════════════════════════════════════ */

/* ─────────────────────────────────
   LIGHT: Global Font Family & Base
   ───────────────────────────────── */
:root:not(.dark) body,
:root:not(.dark) input,
:root:not(.dark) textarea,
:root:not(.dark) select,
:root:not(.dark) button,
:root:not(.dark) label,
:root:not(.dark) th,
:root:not(.dark) td,
:root:not(.dark) a {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ─────────────────────────────────
   LIGHT: CSS Variable Overrides
   ───────────────────────────────── */
:root:not(.dark) {
    --colors-primary-50:  30, 58, 95;
    --colors-primary-100: 30, 58, 95;
    --colors-primary-200: 30, 58, 95;
    --colors-primary-300: 37, 99, 163;
    --colors-primary-400: 37, 99, 163;
    --colors-primary-500: 30, 58, 95;
    --colors-primary-600: 22, 44, 72;
    --colors-primary-700: 15, 30, 50;
    --colors-primary-800: 10, 20, 35;
    --colors-primary-900: 5, 10, 20;
    color-scheme: light;
}

/* Force light color-scheme on ALL form inputs in light mode */
:root:not(.dark) .form-input,
:root:not(.dark) input[type="search"],
:root:not(.dark) select,
:root:not(.dark) input,
:root:not(.dark) textarea {
    color-scheme: light !important;
}

/* Native <select> element — force light dropdown on Windows */
:root:not(.dark) select.form-input,
:root:not(.dark) select.form-control {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    color-scheme: light !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

:root:not(.dark) select.form-input option,
:root:not(.dark) select.form-control option,
:root:not(.dark) select option {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    padding: 8px 12px !important;
}

:root:not(.dark) select.form-input option:hover,
:root:not(.dark) select.form-control option:hover,
:root:not(.dark) select option:hover,
:root:not(.dark) select option:checked {
    background-color: #e8eef5 !important;
    color: #1e3a5f !important;
}

/* ─────────────────────────────────
   LIGHT: Background Overrides
   ───────────────────────────────── */
:root:not(.dark) body {
    background: linear-gradient(135deg, #eef2f7 0%, #e8edf4 50%, #f0f2f5 100%) !important;
    background-attachment: fixed !important;
}

:root:not(.dark) .bg-white {
    background-color: #ffffff !important;
}

:root:not(.dark) .bg-gray-100 {
    background-color: #f0f2f5 !important;
}

:root:not(.dark) .bg-gray-50 {
    background-color: #f8f9fb !important;
}

/* ─────────────────────────────────
   LIGHT: Primary Color → Navy (#1e3a5f)
   ───────────────────────────────── */
:root:not(.dark) .bg-primary-500 {
    background-color: #1e3a5f !important;
    color: #fff !important;
}

:root:not(.dark) .bg-primary-600 {
    background-color: #162c48 !important;
}

:root:not(.dark) .bg-primary-400 {
    background-color: #2563a3 !important;
}

:root:not(.dark) .bg-primary-50 {
    background-color: rgba(30,58,95,0.05) !important;
}

:root:not(.dark) .bg-primary-100 {
    background-color: rgba(30,58,95,0.10) !important;
}

:root:not(.dark) .text-primary-400 { color: #2563a3 !important; }
:root:not(.dark) .text-primary-500 { color: #1e3a5f !important; }
:root:not(.dark) .text-primary-600 { color: #162c48 !important; }

:root:not(.dark) .border-primary-200 { border-color: rgba(30,58,95,0.20) !important; }
:root:not(.dark) .border-primary-300 { border-color: rgba(30,58,95,0.30) !important; }
:root:not(.dark) .border-primary-500 { border-color: #1e3a5f !important; }

:root:not(.dark) .ring-primary-200 { --tw-ring-color: rgba(30,58,95,0.20) !important; }
:root:not(.dark) .ring-primary-300 { --tw-ring-color: rgba(30,58,95,0.30) !important; }

/* Checkbox / Radio */
:root:not(.dark) input[type="checkbox"]:checked,
:root:not(.dark) input[type="radio"]:checked {
    background-color: #1e3a5f !important;
    border-color: #1e3a5f !important;
}

/* Focus ring */
:root:not(.dark) [class*="ring-primary"],
:root:not(.dark) [class*="focus\\:ring"] {
    --tw-ring-color: rgba(30,58,95,0.25) !important;
}

/* ─────────────────────────────────
   LIGHT: Navbar — 3D Glass
   ───────────────────────────────── */
:root:not(.dark) header {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(30,58,95,0.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 4px 20px rgba(0,0,0,0.04),
        0 1px 3px rgba(0,0,0,0.03) !important;
}

:root:not(.dark) header a[aria-label] {
    color: #1e3a5f !important;
}

/* ─────────────────────────────────
   LIGHT: Sidebar — 3D Glass
   ───────────────────────────────── */
:root:not(.dark) .lg\:absolute.left-0 {
    background: rgba(255,255,255,0.6) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border-right: 1px solid rgba(30,58,95,0.06) !important;
    box-shadow: 1px 0 20px rgba(0,0,0,0.03) !important;
    bottom: 0 !important;
    overflow-y: auto !important;
}

:root:not(.dark) .sidebar-menu {
    padding: 0 6px !important;
}

/* Section titles */
:root:not(.dark) .sidebar-menu h4,
:root:not(.dark) .sidebar-menu h3,
:root:not(.dark) .sidebar-menu [class*="tracking-wide"][class*="uppercase"] {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    padding: 20px 14px 8px !important;
}

/* Menu items */
:root:not(.dark) .sidebar-menu a,
:root:not(.dark) .sidebar-menu [data-active-link] {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    margin: 2px 0 !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    border: 1px solid transparent !important;
}

:root:not(.dark) .sidebar-menu a:hover,
:root:not(.dark) .sidebar-menu [data-active-link]:hover {
    color: #1e3a5f !important;
    background: rgba(30,58,95,0.06) !important;
    border-color: rgba(30,58,95,0.08) !important;
    box-shadow: 0 2px 8px rgba(30,58,95,0.06) !important;
    transform: translateX(2px) !important;
}

/* Active item — 3D raised */
:root:not(.dark) .sidebar-menu a[data-active-link="true"],
:root:not(.dark) .sidebar-menu a.router-link-active,
:root:not(.dark) .sidebar-menu [data-active-link="true"] {
    color: #fff !important;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563a3 100%) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(30,58,95,0.15) !important;
    box-shadow:
        0 4px 12px rgba(30,58,95,0.20),
        0 1px 3px rgba(0,0,0,0.08),
        0 1px 0 rgba(255,255,255,0.15) inset !important;
    transform: translateX(2px) !important;
    padding-left: 14px !important;
    border-left: 3px solid transparent !important;
}

/* ─────────────────────────────────
   LIGHT: Tables
   ───────────────────────────────── */
:root:not(.dark) th {
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    background-color: #f8f9fb !important;
    border-bottom: 2px solid rgba(30,58,95,0.12) !important;
}

:root:not(.dark) td {
    color: #1f2937 !important;
    font-size: 13.5px !important;
}

:root:not(.dark) tbody tr:hover {
    background-color: rgba(30,58,95,0.03) !important;
}

:root:not(.dark) td a.no-underline,
:root:not(.dark) td a[class*="text-primary"] {
    color: #1e3a5f !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────
   LIGHT: Form Labels
   ───────────────────────────────── */
:root:not(.dark) label {
    color: #374151 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

/* ─────────────────────────────────
   LIGHT: Form Inputs
   ───────────────────────────────── */
:root:not(.dark) input[type="text"],
:root:not(.dark) input[type="email"],
:root:not(.dark) input[type="password"],
:root:not(.dark) input[type="number"],
:root:not(.dark) input[type="url"],
:root:not(.dark) input[type="tel"],
:root:not(.dark) input[type="date"],
:root:not(.dark) input[type="datetime-local"],
:root:not(.dark) textarea,
:root:not(.dark) select {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
}

:root:not(.dark) input:focus,
:root:not(.dark) textarea:focus,
:root:not(.dark) select:focus {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 2px rgba(30,58,95,0.12) !important;
    outline: none !important;
}

:root:not(.dark) input::placeholder,
:root:not(.dark) textarea::placeholder {
    color: #9ca3af !important;
}

:root:not(.dark) .help-text,
:root:not(.dark) [class*="help-text"] {
    color: #6b7280 !important;
    font-size: 12.5px !important;
}

/* ─────────────────────────────────
   LIGHT: SELECT / DROPDOWN — Fix dark text in light mode
   ───────────────────────────────── */
:root:not(.dark) [dusk$="-select"] span,
:root:not(.dark) [dusk$="-search-input"],
:root:not(.dark) [role="combobox"],
:root:not(.dark) [role="combobox"] span,
:root:not(.dark) [role="combobox"] input,
:root:not(.dark) .multiselect__single,
:root:not(.dark) .multiselect__input {
    color: #1f2937 !important;
    background-color: transparent !important;
}

:root:not(.dark) .form-input-bordered span,
:root:not(.dark) .form-input-bordered input[role="combobox"] {
    color: #1f2937 !important;
}

:root:not(.dark) div[class*="form-input"] span:not(.badge):not([class*="text-red"]):not([class*="text-green"]):not([class*="text-yellow"]):not([class*="text-blue"]) {
    color: #1f2937 !important;
}

/* Dropdown list panel (Headless UI Listbox/Combobox options) */
:root:not(.dark) [role="listbox"],
:root:not(.dark) ul[role="listbox"],
:root:not(.dark) [role="listbox"] li,
:root:not(.dark) [role="option"],
:root:not(.dark) .multiselect__content-wrapper,
:root:not(.dark) .multiselect__element {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

:root:not(.dark) [role="option"][aria-selected="true"],
:root:not(.dark) [role="option"]:hover,
:root:not(.dark) [role="option"][data-headlessui-state~="active"],
:root:not(.dark) .multiselect__option--highlight {
    background-color: #e8eef5 !important;
    color: #1e3a5f !important;
}

:root:not(.dark) [role="option"][aria-selected="true"]::after,
:root:not(.dark) .multiselect__option--selected {
    color: #1e3a5f !important;
    font-weight: 600 !important;
}

/* Nova dropdown popover containers */
:root:not(.dark) div[class*="absolute"][class*="bg-white"],
:root:not(.dark) div[class*="dropdown"],
:root:not(.dark) div[style*="z-index"] ul {
    background-color: #ffffff !important;
    border: 1px solid #e2e6ea !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    border-radius: 8px !important;
}

/* ─────────────────────────────────
   LIGHT: Trix Editor
   ───────────────────────────────── */
:root:not(.dark) trix-editor {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    font-size: 14px !important;
}

:root:not(.dark) trix-toolbar {
    background-color: #f8f9fb !important;
    border-color: #e2e6ea !important;
}

:root:not(.dark) trix-toolbar .trix-button {
    background-color: transparent !important;
    color: #4b5563 !important;
    border-color: #e5e7eb !important;
}

:root:not(.dark) trix-toolbar .trix-button:hover {
    background-color: #e8eef5 !important;
    color: #1e3a5f !important;
}

:root:not(.dark) trix-toolbar .trix-button.trix-active {
    background-color: rgba(30,58,95,0.10) !important;
    color: #1e3a5f !important;
}

/* ─────────────────────────────────
   LIGHT: Cards & Panels — 3D Glass
   ───────────────────────────────── */
:root:not(.dark) [class*="card"],
:root:not(.dark) .bg-white {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.04),
        0 1px 0 rgba(255,255,255,0.9) inset !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,0.85) !important;
}

/* ─────────────────────────────────
   LIGHT: Buttons
   ───────────────────────────────── */
:root:not(.dark) .bg-primary-500,
:root:not(.dark) button[type="submit"].bg-primary-500 {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease !important;
}

:root:not(.dark) .bg-primary-500:hover,
:root:not(.dark) button[type="submit"].bg-primary-500:hover {
    background-color: #162c48 !important;
    box-shadow: 0 2px 8px rgba(30,58,95,0.2) !important;
}

/* ─────────────────────────────────
   LIGHT: Metric Cards
   ───────────────────────────────── */
:root:not(.dark) .text-4xl,
:root:not(.dark) .text-3xl {
    color: #1f2937 !important;
}

/* ─────────────────────────────────
   LIGHT: Heading overrides
   ───────────────────────────────── */
:root:not(.dark) h1 { color: #111827 !important; font-size: 24px !important; font-weight: 700 !important; }
:root:not(.dark) h2 { color: #1f2937 !important; }
:root:not(.dark) h3 { color: #374151 !important; }

/* ─────────────────────────────────
   LIGHT: Scrollbar
   ───────────────────────────────── */
:root:not(.dark) ::-webkit-scrollbar { width: 6px; height: 6px; }
:root:not(.dark) ::-webkit-scrollbar-track { background: #f0f2f5; }
:root:not(.dark) ::-webkit-scrollbar-thumb { background: #c4c9d1; border-radius: 3px; }
:root:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─────────────────────────────────
   LIGHT: Login Page
   ───────────────────────────────── */
:root:not(.dark) .min-h-screen {
    background-color: #f0f2f5 !important;
}

:root:not(.dark) .min-h-screen .bg-white {
    background-color: #ffffff !important;
    border: 1px solid #e2e6ea !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
}

:root:not(.dark) .min-h-screen button[type="submit"] {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
}

:root:not(.dark) .min-h-screen button[type="submit"]:hover {
    background-color: #162c48 !important;
}

/* ─────────────────────────────────
   LIGHT: Dynamic Panel Variables (gas/ink/consumable sections)
   Used by gas-items.js via var(--panel-*)
   ───────────────────────────────── */
:root:not(.dark) {
    --panel-bg: #ffffff;
    --panel-bg-inner: #f8f9fb;
    --panel-border: #d1d5db;
    --panel-text: #1f2937;
    --panel-text-muted: #6b7280;
    --panel-text-dim: #9ca3af;
    --panel-heading: #1e3a5f;
    --panel-accent: #1e3a5f;
    --panel-accent-hover: #162c48;
    --panel-highlight: #1e3a5f;
    --panel-input-bg: #ffffff;
    --panel-input-border: #d1d5db;
    --panel-input-text: #1f2937;
}

.dark {
    --panel-bg: #18181b;
    --panel-bg-inner: #111113;
    --panel-border: #27272a;
    --panel-text: #e4e4e7;
    --panel-text-muted: #a1a1aa;
    --panel-text-dim: #71717a;
    --panel-heading: #e4e4e7;
    --panel-accent: #f59e0b;
    --panel-accent-hover: #d97706;
    --panel-highlight: #fbbf24;
    --panel-input-bg: #18181b;
    --panel-input-border: #27272a;
    --panel-input-text: #e4e4e7;
}

/* ─── Dark Mode Font ─── */
.dark body,
.dark input,
.dark textarea,
.dark select,
.dark button,
.dark label,
.dark th,
.dark td,
.dark a {
    font-family: 'Cairo', 'Tajawal', 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ══════════════════════════════════════════════════
   MOI Forensic Lab — Dark Rebranding v3 (Clean)
   Palette: True Black + Gold (#f59e0b) accent
   Strategy: Override CSS variables + Tailwind classes
   ══════════════════════════════════════════════════ */

/* ─────────────────────────────────
   0. CSS VARIABLE OVERRIDES (affects ALL Nova Vue components)
   Nova uses rgba(var(--colors-gray-*)) everywhere
   ───────────────────────────────── */
.dark {
    --colors-gray-50:  244, 244, 245;
    --colors-gray-100: 228, 228, 231;
    --colors-gray-200: 161, 161, 170;
    --colors-gray-300: 113, 113, 122;
    --colors-gray-400: 82, 82, 91;
    --colors-gray-500: 63, 63, 70;
    --colors-gray-600: 39, 39, 42;
    --colors-gray-700: 26, 26, 30;
    --colors-gray-800: 17, 17, 19;
    --colors-gray-900: 9, 9, 11;
    --colors-gray-950: 5, 5, 7;

    --colors-primary-50:  245, 158, 11;
    --colors-primary-100: 245, 158, 11;
    --colors-primary-200: 245, 158, 11;
    --colors-primary-300: 251, 191, 36;
    --colors-primary-400: 251, 191, 36;
    --colors-primary-500: 245, 158, 11;
    --colors-primary-600: 217, 119, 6;
    --colors-primary-700: 180, 83, 9;
    --colors-primary-800: 146, 64, 14;
    --colors-primary-900: 120, 53, 15;
}

/* ─────────────────────────────────
   1. NOVA DARK GRAY → TRUE BLACK
   Override Tailwind dark:bg-gray-* classes
   ───────────────────────────────── */
.dark .dark\:bg-gray-900  { background-color: #09090b !important; }
.dark .dark\:bg-gray-800  { background-color: #111113 !important; }
.dark .dark\:bg-gray-700  { background-color: #1a1a1e !important; }
.dark .dark\:bg-gray-600  { background-color: #27272a !important; }
.dark .dark\:bg-gray-500  { background-color: #3f3f46 !important; }
.dark .dark\:bg-gray-400  { background-color: #52525b !important; }
.dark .bg-gray-900        { background-color: #09090b !important; }
.dark .bg-gray-100        { background-color: #09090b !important; }
.dark .bg-white           { background-color: #111113 !important; }

/* Dark text overrides */
.dark .dark\:text-gray-400 { color: #a1a1aa !important; }
.dark .dark\:text-gray-500 { color: #71717a !important; }
.dark .dark\:text-gray-300 { color: #d4d4d8 !important; }
.dark .text-gray-500       { color: #a1a1aa !important; }

/* Dark border overrides */
.dark .dark\:border-gray-700 { border-color: rgba(255,255,255,0.08) !important; }
.dark .dark\:border-gray-600 { border-color: rgba(255,255,255,0.12) !important; }

/* ─────────────────────────────────
   2. PRIMARY COLOR → GOLD (#f59e0b)
   ───────────────────────────────── */
.dark .bg-primary-50  { background-color: rgba(245,158,11,0.06) !important; }
.dark .bg-primary-100 { background-color: rgba(245,158,11,0.12) !important; }
.dark .bg-primary-200 { background-color: rgba(245,158,11,0.18) !important; }
.dark .bg-primary-300 { background-color: rgba(245,158,11,0.30) !important; }
.dark .bg-primary-400 { background-color: rgba(245,158,11,0.60) !important; }
.dark .bg-primary-500 { background-color: #f59e0b !important; color: #000 !important; }
.dark .bg-primary-600 { background-color: #d97706 !important; }

.dark .text-primary-400 { color: #fbbf24 !important; }
.dark .text-primary-500 { color: #f59e0b !important; }
.dark .text-primary-600 { color: #d97706 !important; }

.dark .border-primary-200 { border-color: rgba(245,158,11,0.22) !important; }
.dark .border-primary-300 { border-color: rgba(245,158,11,0.30) !important; }
.dark .border-primary-500 { border-color: #f59e0b !important; }

.dark .ring-primary-200 { --tw-ring-color: rgba(245,158,11,0.22) !important; }
.dark .ring-primary-300 { --tw-ring-color: rgba(245,158,11,0.35) !important; }

/* Checkbox / Radio */
.dark input[type="checkbox"]:checked,
.dark input[type="radio"]:checked {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
}

/* Focus ring */
.dark [class*="ring-primary"],
.dark [class*="focus\:ring"] {
    --tw-ring-color: rgba(245,158,11,0.35) !important;
}

/* ─────────────────────────────────
   3. NAVBAR — Dark 3D Glass
   ───────────────────────────────── */
.dark header {
    background: rgba(9,9,11,0.80) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 4px 24px rgba(0,0,0,0.40),
        0 1px 3px rgba(0,0,0,0.25) !important;
}

/* ─────────────────────────────────
   3b. SIDEBAR — Dark 3D Glass
   ───────────────────────────────── */
.dark .lg\:absolute.left-0 {
    background: rgba(9,9,11,0.70) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 1px 0 24px rgba(0,0,0,0.25) !important;
    bottom: 0 !important;
    overflow-y: auto !important;
}

.dark .sidebar-menu {
    padding: 0 6px !important;
}

/* Section titles */
.dark .sidebar-menu h4,
.dark .sidebar-menu h3,
.dark .sidebar-menu [class*="tracking-wide"][class*="uppercase"] {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #52525b !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    padding: 20px 14px 8px !important;
}

/* Menu items */
.dark .sidebar-menu a,
.dark .sidebar-menu [data-active-link] {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #a1a1aa !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    margin: 2px 0 !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    border: 1px solid transparent !important;
}

.dark .sidebar-menu a:hover,
.dark .sidebar-menu [data-active-link]:hover {
    color: #f4f4f5 !important;
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.06) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    transform: translateX(2px) !important;
}

/* Active item — 3D raised gold */
.dark .sidebar-menu a[data-active-link="true"],
.dark .sidebar-menu a.router-link-active,
.dark .sidebar-menu [data-active-link="true"] {
    color: #000 !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    font-weight: 600 !important;
    border: 1px solid rgba(251,191,36,0.20) !important;
    box-shadow:
        0 4px 16px rgba(245,158,11,0.25),
        0 1px 3px rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,0.20) inset !important;
    transform: translateX(2px) !important;
    padding-left: 14px !important;
    border-left: 3px solid transparent !important;
}

/* ─────────────────────────────────
   4. TABLES — Clearer headers, bigger font
   ───────────────────────────────── */
.dark th {
    color: #d4d4d8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    border-bottom: 2px solid rgba(245,158,11,0.12) !important;
}

.dark td {
    color: #e4e4e7 !important;
    font-size: 13.5px !important;
}

.dark tbody tr:hover {
    background-color: rgba(245,158,11,0.03) !important;
}

/* ID column links → gold */
.dark td a.no-underline,
.dark td a[class*="text-primary"] {
    color: #f59e0b !important;
    font-weight: 700 !important;
}

/* ─────────────────────────────────
   5. INPUTS — Color overrides only
   ───────────────────────────────── */
.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,0.15) !important;
    outline: none !important;
}

/* ─────────────────────────────────
   6. METRIC CARDS — Numbers visible
   ───────────────────────────────── */
.dark .text-4xl,
.dark .text-3xl {
    color: #f4f4f5 !important;
    -webkit-text-fill-color: #f4f4f5 !important;
}

/* ─────────────────────────────────
   7. SCROLLBAR
   ───────────────────────────────── */
.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
.dark ::-webkit-scrollbar-track { background: #09090b; }
.dark ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb:hover { background: #3f3f46; }

/* ─────────────────────────────────
   8. LOGIN PAGE — Dark + Gold
   ───────────────────────────────── */

/* Login page background */
.dark .min-h-screen {
    background-color: #09090b !important;
}

/* Login card container */
.dark .min-h-screen .bg-white,
.dark .min-h-screen .dark\:bg-gray-800 {
    background-color: #111113 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}

/* Login heading / brand text */
.dark .min-h-screen h2,
.dark .min-h-screen h1 {
    color: #f4f4f5 !important;
}

/* Login input fields */
.dark .min-h-screen input[type="email"],
.dark .min-h-screen input[type="password"],
.dark .min-h-screen input[type="text"] {
    background-color: #18181b !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #f4f4f5 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

.dark .min-h-screen input:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15) !important;
}

/* Login labels */
.dark .min-h-screen label {
    color: #a1a1aa !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Login button */
.dark .min-h-screen .bg-primary-500,
.dark .min-h-screen button[type="submit"] {
    background-color: #f59e0b !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    border: none !important;
    transition: background-color 0.2s ease !important;
}

.dark .min-h-screen .bg-primary-500:hover,
.dark .min-h-screen button[type="submit"]:hover {
    background-color: #d97706 !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.2) !important;
}

/* Login links (forgot password etc) */
.dark .min-h-screen a {
    color: #f59e0b !important;
}

.dark .min-h-screen a:hover {
    color: #fbbf24 !important;
}

/* Login "Remember me" checkbox label */
.dark .min-h-screen .text-gray-600,
.dark .min-h-screen .dark\:text-gray-400 {
    color: #a1a1aa !important;
}

/* ─────────────────────────────────
   9. FORMS / CREATE PAGE — Dark + Gold
   ───────────────────────────────── */

/* Form field labels */
.dark label {
    color: #a1a1aa !important;
}

/* All form inputs in dark mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="url"],
.dark input[type="tel"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select {
    background-color: #18181b !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #f4f4f5 !important;
}

/* Nova form panels */
.dark .dark\:bg-gray-800 input,
.dark .dark\:bg-gray-800 textarea,
.dark .dark\:bg-gray-800 select {
    background-color: #0f0f11 !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #f4f4f5 !important;
}

/* Placeholder text */
.dark input::placeholder,
.dark textarea::placeholder {
    color: #52525b !important;
}

/* Nova help text under fields */
.dark .help-text,
.dark [class*="help-text"] {
    color: #71717a !important;
}

/* Form section headings */
.dark .heading,
.dark [class*="form-heading"] {
    color: #f4f4f5 !important;
}

/* ─────────────────────────────────
   10. TRIX EDITOR (Rich Text / Description)
   ───────────────────────────────── */
.dark trix-editor {
    background-color: #18181b !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #f4f4f5 !important;
}

.dark trix-toolbar {
    background-color: #111113 !important;
    border-color: rgba(255,255,255,0.08) !important;
}

.dark trix-toolbar .trix-button {
    background-color: transparent !important;
    color: #a1a1aa !important;
    border-color: rgba(255,255,255,0.06) !important;
}

.dark trix-toolbar .trix-button:hover {
    background-color: rgba(255,255,255,0.06) !important;
    color: #f4f4f5 !important;
}

.dark trix-toolbar .trix-button.trix-active {
    background-color: rgba(245,158,11,0.12) !important;
    color: #f59e0b !important;
}

.dark trix-toolbar .trix-button-group {
    border-color: rgba(255,255,255,0.08) !important;
}

/* Nova's Trix wrapper */
.dark [class*="trix-content"],
.dark .trix-content {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

/* ─────────────────────────────────
   11. SELECT / DROPDOWN — Selected value text white
   Nova 4 searchable Select uses Headless UI Combobox
   ───────────────────────────────── */

/* Selected value text in all Select/Combobox fields */
.dark [dusk$="-select"] span,
.dark [dusk$="-search-input"],
.dark [role="combobox"],
.dark [role="combobox"] span,
.dark [role="combobox"] input,
.dark .multiselect__single,
.dark .multiselect__input {
    color: #f4f4f5 !important;
}

/* Nova form-input-bordered containers (Select wraps in this) */
.dark .form-input-bordered span,
.dark .form-input-bordered input[role="combobox"] {
    color: #f4f4f5 !important;
}

/* Catch-all: any span/text inside dark select-like inputs */
.dark div[class*="form-input"] span:not(.badge):not([class*="text-red"]):not([class*="text-green"]):not([class*="text-yellow"]):not([class*="text-blue"]) {
    color: #f4f4f5 !important;
}

/* ─────────────────────────────────
   12. SELECT DROPDOWN OPTIONS — Dark mode listbox fix
   Fix options appearing with wrong background in dark mode
   ───────────────────────────────── */
.dark [role="listbox"],
.dark ul[role="listbox"],
.dark [role="listbox"] li,
.dark [role="option"],
.dark .multiselect__content-wrapper,
.dark .multiselect__element {
    background-color: #18181b !important;
    color: #f4f4f5 !important;
}

.dark [role="option"][aria-selected="true"],
.dark [role="option"]:hover,
.dark [role="option"][data-headlessui-state~="active"],
.dark .multiselect__option--highlight {
    background-color: rgba(245,158,11,0.12) !important;
    color: #fbbf24 !important;
}

.dark [role="option"][aria-selected="true"] {
    font-weight: 600 !important;
}

/* Dropdown popover containers in dark mode */
.dark div[class*="absolute"] ul[role="listbox"],
.dark div[style*="z-index"] ul {
    background-color: #18181b !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
    border-radius: 8px !important;
}

/* ─────────────────────────────────
   13. ACTIONS — Hide disabled actions in dropdowns
   Nova disables actions that can't run; we hide them entirely
   ───────────────────────────────── */
button[data-action-id][disabled],
button[data-action-id]:disabled {
    display: none !important;
}

/* ══════════════════════════════════════════════════
   14. DASHBOARD METRIC CARDS — Clean Professional
   ══════════════════════════════════════════════════ */

/* ─── Grid ─── */
[dusk^="dashboard-"] .grid.md\:grid-cols-12 {
    gap: 14px !important;
}

/* ─── Dashboard heading ─── */
:root:not(.dark) [dusk^="dashboard-"] h1 { font-size: 24px !important; font-weight: 800 !important; color: #0f172a !important; }
.dark [dusk^="dashboard-"] h1 { font-size: 24px !important; font-weight: 800 !important; color: #f4f4f5 !important; }

/* ─── SHARED: Bigger content inside cards ─── */

/* More padding */
[dusk^="dashboard-"] .grid .px-6.py-4 {
    padding: 22px 24px 20px !important;
}

/* Title row: more space below */
[dusk^="dashboard-"] .grid .px-6.py-4 > .h-6 {
    height: auto !important;
    margin-bottom: 16px !important;
}

/* Icon: 56px with bigger SVG */
[dusk^="dashboard-"] .grid .h-14.w-14 {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 14px !important;
}
[dusk^="dashboard-"] .grid .h-14.w-14 svg {
    width: 26px !important;
    height: 26px !important;
}

/* ════════════════════════════════
   LIGHT MODE
   ════════════════════════════════ */

/* Card container */
:root:not(.dark) [dusk^="dashboard-"] .grid > [class*="col-span"] > .relative.overflow-hidden {
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(30,58,95,0.04) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
    border-bottom: 3px solid #1e3a5f !important;
}
:root:not(.dark) [dusk^="dashboard-"] .grid > [class*="col-span"] > .relative.overflow-hidden:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 12px 28px rgba(30,58,95,0.10) !important;
    transform: translateY(-3px) !important;
}

/* Title */
:root:not(.dark) [dusk^="dashboard-"] .grid h3.text-sm,
:root:not(.dark) [dusk^="dashboard-"] .grid h3.font-bold {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
}

/* Value */
:root:not(.dark) [dusk^="dashboard-"] .grid .text-4xl {
    color: #0f172a !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Icon */
:root:not(.dark) [dusk^="dashboard-"] .grid .bg-primary-500 {
    background: linear-gradient(135deg, #1e3a5f, #2563a3) !important;
    box-shadow: 0 4px 12px rgba(30,58,95,0.25) !important;
}

/* Row accent colors: 1st row blue, 2nd row green, 3rd row amber */
:root:not(.dark) [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+5):nth-child(-n+8) > .relative.overflow-hidden {
    border-bottom-color: #059669 !important;
}
:root:not(.dark) [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+5):nth-child(-n+8) .bg-primary-500 {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 4px 12px rgba(5,150,105,0.25) !important;
}
:root:not(.dark) [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+9):nth-child(-n+12) > .relative.overflow-hidden {
    border-bottom-color: #d97706 !important;
}
:root:not(.dark) [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+9):nth-child(-n+12) .bg-primary-500 {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    box-shadow: 0 4px 12px rgba(217,119,6,0.25) !important;
}

/* ════════════════════════════════
   DARK MODE
   ════════════════════════════════ */

/* Card container */
.dark [dusk^="dashboard-"] .grid > [class*="col-span"] > .relative.overflow-hidden {
    background: #111113 !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 6px 16px rgba(0,0,0,0.15) !important;
    transition: all 0.25s ease !important;
    overflow: hidden !important;
    border-bottom: 3px solid #f59e0b !important;
}
.dark [dusk^="dashboard-"] .grid > [class*="col-span"] > .relative.overflow-hidden:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.3) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(245,158,11,0.8) !important;
}

/* Title */
.dark [dusk^="dashboard-"] .grid h3.text-sm,
.dark [dusk^="dashboard-"] .grid h3.font-bold {
    color: #a1a1aa !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
}

/* Value */
.dark [dusk^="dashboard-"] .grid .text-4xl {
    color: #f4f4f5 !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}

/* Icon */
.dark [dusk^="dashboard-"] .grid .bg-primary-500 {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 4px 12px rgba(245,158,11,0.25) !important;
}

/* Dark row accents */
.dark [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+5):nth-child(-n+8) > .relative.overflow-hidden {
    border-bottom-color: #10b981 !important;
}
.dark [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+5):nth-child(-n+8) .bg-primary-500 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 4px 12px rgba(16,185,129,0.25) !important;
}
.dark [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+9):nth-child(-n+12) > .relative.overflow-hidden {
    border-bottom-color: #ef4444 !important;
}
.dark [dusk^="dashboard-"] .grid > [class*="col-span"]:nth-child(n+9):nth-child(-n+12) .bg-primary-500 {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 4px 12px rgba(239,68,68,0.25) !important;
}

/* ─── Show More Button ─── */
#dashboard-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 28px;
    border: 2px dashed var(--panel-border) !important;
    border-radius: 14px;
    background: transparent;
    color: var(--panel-text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 10px;
}
#dashboard-show-more-btn:hover {
    color: var(--panel-accent);
    border-color: var(--panel-accent) !important;
    transform: translateY(-1px);
}
#dashboard-show-more-btn .arrow {
    font-size: 11px;
    transition: transform 0.3s ease;
}