/* ==========================================================================
   NAVI-DISBURSE - DESIGN SYSTEM & GLOBAL UTILITIES
   Built for Maritime Port Agency, EPDA & Disbursement Accounting
   ========================================================================== */

/* Import Fonts: Plus Jakarta Sans for UI + JetBrains Mono for Financial Figures */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Theme Colors */
    --color-navy-950: #020617;
    --color-navy-900: #0f172a;
    --color-navy-800: #1e293b;
    --color-ocean-600: #0284c7;
    --color-ocean-500: #0ea5e9;
    --color-emerald-600: #059669;
    --color-amber-500: #f59e0b;
    --color-rose-600: #e11d48;
}

body {
    font-family: var(--font-sans);
    color: #1e293b;
    background-color: #f8fafc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Numeric & Financial Monospace Utilities */
.font-mono,
.num-tabular,
.format-currency,
input[type="number"],
.item-epda,
.item-actual,
.item-variance {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* Soft transition on interactive elements */
a, button, input, select, textarea {
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Card Hover Elevation */
.card-hover {
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

/* Modern Input Focus Rings */
.form-input-focus:focus,
input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
    outline: none;
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Table Style Polish */
.modern-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.modern-table thead th {
    background-color: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 14px;
    border-bottom: 1px solid #e2e8f0;
}
.modern-table tbody tr {
    transition: background-color 150ms ease;
}
.modern-table tbody tr:hover {
    background-color: #f8fafc;
}
.modern-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12px;
}

/* Pill Badges */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Category Semantic Badges */
.badge-cat-in {
    background-color: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
}
.badge-cat-out {
    background-color: #ede9fe;
    color: #5b21b6;
    border: 1px solid #ddd6fe;
}
.badge-cat-other {
    background-color: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* Print Stylesheet Overrides */
@media print {
    @page {
        margin: 10mm 12mm;
        size: A4 portrait;
    }
    
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size: 10pt !important;
        line-height: 1.35 !important;
    }

    aside, header, nav, .no-print, button:not(.printable), .modal, #sidebarToggleBtn, #mainSidebar {
        display: none !important;
    }

    .print-container {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    table {
        page-break-inside: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }
}

/* ==========================================================================
   THEME SYSTEM: LIGHT (DEFAULT) & DARK MODE (SCREEN ONLY)
   Keeps formal A4 print sheets (.print-sheet / .print-container / .a4-document-sheet)
   clean white paper both on screen and in print/PDF output.
   ========================================================================== */
@media screen {
    html.theme-dark {
        color-scheme: dark;
        --dm-bg-page: #0b1120;
        --dm-bg-surface: #111827;
        --dm-bg-surface-alt: #162032;
        --dm-bg-muted: #1e293b;
        --dm-bg-muted-strong: #334155;
        --dm-bg-glass: rgba(17, 24, 39, 0.86);
        --dm-bg-input: #0f172a;
        --dm-bg-hover: #1e293b;
        --dm-bg-hover-strong: #2b384e;
        --dm-border: #2b384e;
        --dm-border-strong: #3b4b66;
        --dm-border-subtle: #1e293b;
        --dm-text-900: #f8fafc;
        --dm-text-800: #e2e8f0;
        --dm-text-700: #cbd5e1;
        --dm-text-600: #94a3b8;
        --dm-text-500: #94a3b8;
        --dm-text-400: #94a3b8;

        --dm-bg-amber: rgba(245, 158, 11, 0.14);
        --dm-bg-amber-strong: rgba(245, 158, 11, 0.24);
        --dm-border-amber: rgba(245, 158, 11, 0.35);
        --dm-text-amber: #fbbf24;
        --dm-text-amber-strong: #fde68a;

        --dm-bg-blue: rgba(59, 130, 246, 0.14);
        --dm-bg-blue-strong: rgba(59, 130, 246, 0.24);
        --dm-border-blue: rgba(59, 130, 246, 0.35);
        --dm-text-blue: #60a5fa;
        --dm-text-blue-strong: #93c5fd;

        --dm-bg-cyan: rgba(6, 182, 212, 0.14);
        --dm-bg-cyan-strong: rgba(6, 182, 212, 0.24);
        --dm-border-cyan: rgba(6, 182, 212, 0.35);
        --dm-text-cyan: #22d3ee;
        --dm-text-cyan-strong: #67e8f9;

        --dm-bg-ocean: rgba(14, 165, 233, 0.14);
        --dm-bg-ocean-strong: rgba(14, 165, 233, 0.24);
        --dm-border-ocean: rgba(56, 189, 248, 0.35);
        --dm-text-ocean: #38bdf8;
        --dm-text-ocean-strong: #7dd3fc;

        --dm-bg-emerald: rgba(16, 185, 129, 0.14);
        --dm-bg-emerald-strong: rgba(16, 185, 129, 0.24);
        --dm-border-emerald: rgba(16, 185, 129, 0.35);
        --dm-text-emerald: #34d399;
        --dm-text-emerald-strong: #6ee7b7;

        --dm-bg-indigo: rgba(99, 102, 241, 0.16);
        --dm-bg-indigo-strong: rgba(99, 102, 241, 0.26);
        --dm-border-indigo: rgba(129, 140, 248, 0.35);
        --dm-text-indigo: #818cf8;
        --dm-text-indigo-strong: #a5b4fc;

        --dm-bg-purple: rgba(168, 85, 247, 0.16);
        --dm-bg-purple-strong: rgba(168, 85, 247, 0.26);
        --dm-border-purple: rgba(192, 132, 252, 0.35);
        --dm-text-purple: #c084fc;
        --dm-text-purple-strong: #d8b4fe;

        --dm-bg-rose: rgba(244, 63, 94, 0.14);
        --dm-bg-rose-strong: rgba(244, 63, 94, 0.24);
        --dm-border-rose: rgba(244, 63, 94, 0.35);
        --dm-text-rose: #fb7185;
        --dm-text-rose-strong: #fda4af;
    }

    /* Preserve authentic white paper sheets inside dark screen mode */
    html.theme-dark .print-sheet,
    html.theme-dark .print-container,
    html.theme-dark .a4-document-sheet {
        color-scheme: light;
        --dm-bg-page: #f8fafc;
        --dm-bg-surface: #ffffff;
        --dm-bg-surface-alt: #f8fafc;
        --dm-bg-muted: #f1f5f9;
        --dm-bg-muted-strong: #e2e8f0;
        --dm-bg-glass: rgba(255, 255, 255, 0.9);
        --dm-bg-input: #ffffff;
        --dm-bg-hover: #f8fafc;
        --dm-bg-hover-strong: #f1f5f9;
        --dm-border: #e2e8f0;
        --dm-border-strong: #cbd5e1;
        --dm-border-subtle: #f1f5f9;
        --dm-text-900: #0f172a;
        --dm-text-800: #1e293b;
        --dm-text-700: #334155;
        --dm-text-600: #475569;
        --dm-text-500: #64748b;
        --dm-text-400: #94a3b8;

        --dm-bg-amber: #fffbeb;
        --dm-bg-amber-strong: #fef3c7;
        --dm-border-amber: #fde68a;
        --dm-text-amber: #d97706;
        --dm-text-amber-strong: #92400e;

        --dm-bg-blue: #eff6ff;
        --dm-bg-blue-strong: #dbeafe;
        --dm-border-blue: #bfdbfe;
        --dm-text-blue: #2563eb;
        --dm-text-blue-strong: #1e3a8a;

        --dm-bg-cyan: #ecfeff;
        --dm-bg-cyan-strong: #cffafe;
        --dm-border-cyan: #a5f3fc;
        --dm-text-cyan: #0891b2;
        --dm-text-cyan-strong: #155e75;

        --dm-bg-ocean: #f0f7ff;
        --dm-bg-ocean-strong: #e0effe;
        --dm-border-ocean: #bae0fd;
        --dm-text-ocean: #0284c7;
        --dm-text-ocean-strong: #075985;

        --dm-bg-emerald: #ecfdf5;
        --dm-bg-emerald-strong: #d1fae5;
        --dm-border-emerald: #a7f3d0;
        --dm-text-emerald: #059669;
        --dm-text-emerald-strong: #065f46;

        --dm-bg-indigo: #eef2ff;
        --dm-bg-indigo-strong: #e0e7ff;
        --dm-border-indigo: #c7d2fe;
        --dm-text-indigo: #4f46e5;
        --dm-text-indigo-strong: #3730a3;

        --dm-bg-purple: #faf5ff;
        --dm-bg-purple-strong: #f3e8ff;
        --dm-border-purple: #e9d5ff;
        --dm-text-purple: #9333ea;
        --dm-text-purple-strong: #6b21a8;

        --dm-bg-rose: #fff1f2;
        --dm-bg-rose-strong: #ffe4e6;
        --dm-border-rose: #fecdd3;
        --dm-text-rose: #e11d48;
        --dm-text-rose-strong: #9f1239;
        box-shadow: 0 20px 45px -12px rgba(2, 6, 23, 0.7), 0 0 0 1px rgba(148, 163, 184, 0.25) !important;
    }

    html.theme-dark body {
        background-color: var(--dm-bg-page) !important;
        color: var(--dm-text-800) !important;
    }

    /* Dark scrollbar */
    html.theme-dark ::-webkit-scrollbar-track {
        background: #0f172a;
    }
    html.theme-dark ::-webkit-scrollbar-thumb {
        background: #334155;
    }
    html.theme-dark ::-webkit-scrollbar-thumb:hover {
        background: #475569;
    }

    /* Neutral surface overrides */
    html.theme-dark .bg-white {
        background-color: var(--dm-bg-surface) !important;
    }
    html.theme-dark .bg-white\/80,
    html.theme-dark .bg-white\/70,
    html.theme-dark .bg-white\/60 {
        background-color: var(--dm-bg-glass) !important;
    }
    html.theme-dark .bg-slate-50,
    html.theme-dark .bg-slate-50\/40,
    html.theme-dark .bg-slate-50\/50,
    html.theme-dark .bg-slate-50\/60,
    html.theme-dark .bg-slate-50\/70,
    html.theme-dark .bg-slate-50\/80 {
        background-color: var(--dm-bg-surface-alt) !important;
    }
    html.theme-dark .bg-slate-100,
    html.theme-dark .bg-slate-100\/90 {
        background-color: var(--dm-bg-muted) !important;
    }
    html.theme-dark .bg-slate-200,
    html.theme-dark .bg-slate-200\/70 {
        background-color: var(--dm-bg-muted-strong) !important;
    }

    /* Neutral text overrides */
    html.theme-dark .text-slate-950,
    html.theme-dark .text-slate-900 {
        color: var(--dm-text-900) !important;
    }
    html.theme-dark .text-slate-800 {
        color: var(--dm-text-800) !important;
    }
    html.theme-dark .text-slate-700 {
        color: var(--dm-text-700) !important;
    }
    html.theme-dark .text-slate-600 {
        color: var(--dm-text-600) !important;
    }
    html.theme-dark .text-slate-500 {
        color: var(--dm-text-500) !important;
    }
    html.theme-dark .text-slate-400 {
        color: var(--dm-text-400) !important;
    }

    /* Preserve dark text on bright step pill badges */
    html.theme-dark .bg-amber-400.text-slate-900,
    html.theme-dark .bg-emerald-400.text-slate-900,
    html.theme-dark .bg-cyan-400.text-slate-900 {
        color: #0f172a !important;
    }

    /* Border & divide overrides */
    html.theme-dark .border-slate-50,
    html.theme-dark .border-slate-100 {
        border-color: var(--dm-border-subtle) !important;
    }
    html.theme-dark .border-slate-200,
    html.theme-dark .border-slate-200\/70 {
        border-color: var(--dm-border) !important;
    }
    html.theme-dark .border-slate-300 {
        border-color: var(--dm-border-strong) !important;
    }
    html.theme-dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
    html.theme-dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
        border-color: var(--dm-border) !important;
    }

    /* Neutral hover & focus states */
    html.theme-dark .hover\:bg-white:hover,
    html.theme-dark .focus\:bg-white:focus {
        background-color: var(--dm-bg-surface) !important;
    }
    html.theme-dark .hover\:bg-slate-50:hover,
    html.theme-dark .hover\:bg-slate-50\/80:hover,
    html.theme-dark .hover\:bg-slate-100:hover {
        background-color: var(--dm-bg-hover) !important;
    }
    html.theme-dark .hover\:bg-slate-200:hover {
        background-color: var(--dm-bg-hover-strong) !important;
    }
    html.theme-dark .hover\:text-slate-600:hover,
    html.theme-dark .hover\:text-slate-700:hover,
    html.theme-dark .hover\:text-slate-900:hover {
        color: var(--dm-text-900) !important;
    }

    /* Semantic light surfaces, borders & text */
    html.theme-dark .bg-amber-50,
    html.theme-dark .bg-amber-50\/20,
    html.theme-dark .bg-amber-50\/50,
    html.theme-dark .bg-amber-50\/60,
    html.theme-dark .bg-amber-50\/70,
    html.theme-dark .bg-amber-50\/90 {
        background-color: var(--dm-bg-amber) !important;
    }
    html.theme-dark .bg-amber-100,
    html.theme-dark .bg-amber-200 {
        background-color: var(--dm-bg-amber-strong) !important;
    }
    html.theme-dark .border-amber-100,
    html.theme-dark .border-amber-200,
    html.theme-dark .border-amber-200\/60,
    html.theme-dark .border-amber-200\/70,
    html.theme-dark .border-amber-200\/80,
    html.theme-dark .border-amber-300,
    html.theme-dark .border-amber-300\/80 {
        border-color: var(--dm-border-amber) !important;
    }
    html.theme-dark .text-amber-600 {
        color: var(--dm-text-amber) !important;
    }
    html.theme-dark .text-amber-700,
    html.theme-dark .text-amber-800,
    html.theme-dark .text-amber-900,
    html.theme-dark .text-amber-950 {
        color: var(--dm-text-amber-strong) !important;
    }
    html.theme-dark .hover\:bg-amber-50:hover {
        background-color: var(--dm-bg-amber) !important;
    }

    html.theme-dark .bg-blue-50,
    html.theme-dark .bg-blue-50\/20,
    html.theme-dark .bg-blue-50\/30,
    html.theme-dark .bg-blue-50\/50 {
        background-color: var(--dm-bg-blue) !important;
    }
    html.theme-dark .bg-blue-100 {
        background-color: var(--dm-bg-blue-strong) !important;
    }
    html.theme-dark .border-blue-200,
    html.theme-dark .border-blue-200\/80,
    html.theme-dark .border-blue-300 {
        border-color: var(--dm-border-blue) !important;
    }
    html.theme-dark .text-blue-600 {
        color: var(--dm-text-blue) !important;
    }
    html.theme-dark .text-blue-700,
    html.theme-dark .text-blue-800,
    html.theme-dark .text-blue-900,
    html.theme-dark .text-blue-950,
    html.theme-dark .hover\:text-blue-900:hover {
        color: var(--dm-text-blue-strong) !important;
    }

    html.theme-dark .bg-cyan-50,
    html.theme-dark .bg-cyan-50\/20,
    html.theme-dark .bg-cyan-50\/30,
    html.theme-dark .bg-cyan-50\/50,
    html.theme-dark .bg-cyan-50\/60 {
        background-color: var(--dm-bg-cyan) !important;
    }
    html.theme-dark .bg-cyan-100 {
        background-color: var(--dm-bg-cyan-strong) !important;
    }
    html.theme-dark .border-cyan-100,
    html.theme-dark .border-cyan-200,
    html.theme-dark .border-cyan-300 {
        border-color: var(--dm-border-cyan) !important;
    }
    html.theme-dark .text-cyan-600 {
        color: var(--dm-text-cyan) !important;
    }
    html.theme-dark .text-cyan-700,
    html.theme-dark .text-cyan-800,
    html.theme-dark .text-cyan-900,
    html.theme-dark .text-cyan-950 {
        color: var(--dm-text-cyan-strong) !important;
    }

    html.theme-dark .bg-ocean-50,
    html.theme-dark .bg-sky-50,
    html.theme-dark .bg-sky-50\/50,
    html.theme-dark .bg-sky-50\/60,
    html.theme-dark .bg-sky-50\/70 {
        background-color: var(--dm-bg-ocean) !important;
    }
    html.theme-dark .bg-ocean-100,
    html.theme-dark .bg-sky-100,
    html.theme-dark .bg-sky-200 {
        background-color: var(--dm-bg-ocean-strong) !important;
    }
    html.theme-dark .border-ocean-100,
    html.theme-dark .border-ocean-200,
    html.theme-dark .border-sky-100,
    html.theme-dark .border-sky-200,
    html.theme-dark .border-sky-300 {
        border-color: var(--dm-border-ocean) !important;
    }
    html.theme-dark .text-ocean-600,
    html.theme-dark .text-sky-600,
    html.theme-dark .hover\:text-ocean-600:hover {
        color: var(--dm-text-ocean) !important;
    }
    html.theme-dark .text-ocean-700,
    html.theme-dark .text-ocean-800,
    html.theme-dark .text-sky-700,
    html.theme-dark .text-sky-800,
    html.theme-dark .text-sky-900,
    html.theme-dark .text-sky-950,
    html.theme-dark .hover\:text-ocean-700:hover,
    html.theme-dark .hover\:text-ocean-800:hover {
        color: var(--dm-text-ocean-strong) !important;
    }
    html.theme-dark .hover\:bg-ocean-50:hover,
    html.theme-dark .hover\:bg-ocean-100:hover {
        background-color: var(--dm-bg-ocean-strong) !important;
    }

    html.theme-dark .bg-emerald-50,
    html.theme-dark .bg-emerald-50\/20,
    html.theme-dark .bg-emerald-50\/50,
    html.theme-dark .bg-emerald-50\/60,
    html.theme-dark .bg-emerald-50\/70 {
        background-color: var(--dm-bg-emerald) !important;
    }
    html.theme-dark .bg-emerald-100,
    html.theme-dark .bg-emerald-100\/90,
    html.theme-dark .bg-emerald-200\/90 {
        background-color: var(--dm-bg-emerald-strong) !important;
    }
    html.theme-dark .border-emerald-100,
    html.theme-dark .border-emerald-200,
    html.theme-dark .border-emerald-300 {
        border-color: var(--dm-border-emerald) !important;
    }
    html.theme-dark .text-emerald-600 {
        color: var(--dm-text-emerald) !important;
    }
    html.theme-dark .text-emerald-700,
    html.theme-dark .text-emerald-800,
    html.theme-dark .text-emerald-900,
    html.theme-dark .text-emerald-900\/80,
    html.theme-dark .text-emerald-950,
    html.theme-dark .hover\:text-emerald-800:hover,
    html.theme-dark .hover\:text-emerald-900:hover {
        color: var(--dm-text-emerald-strong) !important;
    }
    html.theme-dark .hover\:bg-emerald-50:hover,
    html.theme-dark .hover\:bg-emerald-100:hover {
        background-color: var(--dm-bg-emerald-strong) !important;
    }

    html.theme-dark .bg-indigo-50,
    html.theme-dark .bg-indigo-50\/40,
    html.theme-dark .bg-indigo-50\/50,
    html.theme-dark .bg-indigo-50\/60,
    html.theme-dark .bg-indigo-50\/70 {
        background-color: var(--dm-bg-indigo) !important;
    }
    html.theme-dark .bg-indigo-100,
    html.theme-dark .bg-indigo-200 {
        background-color: var(--dm-bg-indigo-strong) !important;
    }
    html.theme-dark .border-indigo-100,
    html.theme-dark .border-indigo-200,
    html.theme-dark .border-indigo-300 {
        border-color: var(--dm-border-indigo) !important;
    }
    html.theme-dark .text-indigo-500,
    html.theme-dark .text-indigo-600 {
        color: var(--dm-text-indigo) !important;
    }
    html.theme-dark .text-indigo-700,
    html.theme-dark .text-indigo-800,
    html.theme-dark .text-indigo-900,
    html.theme-dark .text-indigo-950,
    html.theme-dark .hover\:text-indigo-800:hover {
        color: var(--dm-text-indigo-strong) !important;
    }

    html.theme-dark .bg-purple-50,
    html.theme-dark .bg-purple-50\/60,
    html.theme-dark .bg-purple-50\/70 {
        background-color: var(--dm-bg-purple) !important;
    }
    html.theme-dark .bg-purple-100 {
        background-color: var(--dm-bg-purple-strong) !important;
    }
    html.theme-dark .border-purple-200,
    html.theme-dark .border-purple-300 {
        border-color: var(--dm-border-purple) !important;
    }
    html.theme-dark .text-purple-600 {
        color: var(--dm-text-purple) !important;
    }
    html.theme-dark .text-purple-700,
    html.theme-dark .text-purple-800,
    html.theme-dark .text-purple-900 {
        color: var(--dm-text-purple-strong) !important;
    }

    html.theme-dark .bg-rose-50 {
        background-color: var(--dm-bg-rose) !important;
    }
    html.theme-dark .bg-rose-100,
    html.theme-dark .bg-rose-100\/80 {
        background-color: var(--dm-bg-rose-strong) !important;
    }
    html.theme-dark .border-rose-200,
    html.theme-dark .border-rose-300 {
        border-color: var(--dm-border-rose) !important;
    }
    html.theme-dark .text-rose-500,
    html.theme-dark .text-rose-600,
    html.theme-dark .text-red-600 {
        color: var(--dm-text-rose) !important;
    }
    html.theme-dark .text-rose-700,
    html.theme-dark .text-rose-800,
    html.theme-dark .text-rose-900 {
        color: var(--dm-text-rose-strong) !important;
    }
    html.theme-dark .hover\:bg-rose-50:hover {
        background-color: var(--dm-bg-rose) !important;
    }

    /* Pastel gradients in forms/alerts */
    html.theme-dark .from-amber-50.via-slate-50.to-cyan-50 {
        background-image: linear-gradient(to right, rgba(245, 158, 11, 0.14), rgba(30, 41, 59, 0.92), rgba(6, 182, 212, 0.14)) !important;
    }
    html.theme-dark .from-emerald-50.via-teal-50.to-cyan-50 {
        background-image: linear-gradient(to right, rgba(16, 185, 129, 0.14), rgba(20, 184, 166, 0.14), rgba(6, 182, 212, 0.14)) !important;
    }

    /* Form controls, placeholders & modern tables */
    html.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
    html.theme-dark select,
    html.theme-dark textarea {
        background-color: var(--dm-bg-input) !important;
        border-color: var(--dm-border-strong) !important;
        color: var(--dm-text-900) !important;
    }
    html.theme-dark input[readonly] {
        background-color: var(--dm-bg-muted) !important;
        color: var(--dm-text-700) !important;
    }
    html.theme-dark input::placeholder,
    html.theme-dark textarea::placeholder {
        color: #64748b !important;
    }
    html.theme-dark select option {
        background-color: #0f172a;
        color: #f1f5f9;
    }
    html.theme-dark input[type="checkbox"],
    html.theme-dark input[type="radio"] {
        accent-color: #0ea5e9;
    }

    html.theme-dark .modern-table thead th {
        background-color: var(--dm-bg-surface-alt) !important;
        color: var(--dm-text-600) !important;
        border-bottom-color: var(--dm-border) !important;
    }
    html.theme-dark .modern-table tbody tr:hover {
        background-color: var(--dm-bg-hover) !important;
    }
    html.theme-dark .modern-table tbody td {
        border-bottom-color: var(--dm-border-subtle) !important;
    }

    /* Semantic category badges & custom datepicker muted trailing days */
    html.theme-dark .badge-cat-in {
        background-color: var(--dm-bg-ocean) !important;
        color: var(--dm-text-ocean-strong) !important;
        border-color: var(--dm-border-ocean) !important;
    }
    html.theme-dark .badge-cat-out {
        background-color: var(--dm-bg-purple) !important;
        color: var(--dm-text-purple-strong) !important;
        border-color: var(--dm-border-purple) !important;
    }
    html.theme-dark .badge-cat-other {
        background-color: var(--dm-bg-amber) !important;
        color: var(--dm-text-amber-strong) !important;
        border-color: var(--dm-border-amber) !important;
    }
    html.theme-dark #dtpDaysGrid .text-slate-300 {
        color: #475569 !important;
    }
}