/*
 * Rosmerta Admin — dark theme.
 *
 * The admin UI is built with CDN Tailwind + hardcoded light-mode utility classes on ~100 pages
 * (5,900+ usages), so we do NOT retrofit `dark:` variants everywhere. Instead this single sheet
 * remaps the finite set of light utilities actually in use, scoped under `html.dark`. Tailwind's
 * runtime utilities have specificity (0,1,0); `html.dark .bg-white` is (0,2,0) and wins regardless
 * of source order. This recolours every CLASS-based element at once — including markup injected by
 * the inline <script> helpers (toasts, modals, search, drawers) — with zero page edits.
 *
 * Raw inline-hex surfaces (challan-order.js, a couple of pages, Chart.js canvases) cannot be reached
 * by class rules; those read the CSS variables defined here (--surface, --text, …) directly.
 */

:root {
    /* Light (defaults — mirror the current look so :root vars are safe to reference anywhere) */
    --surface: #FFFFFF;        /* cards / bg-white            */
    --surface-2: #F9FAFB;      /* subtle panels / bg-gray-50  */
    --surface-3: #F3F4F6;      /* hover / bg-gray-100         */
    --app-bg: #F9FAFB;         /* body                        */
    --text-strong: #111827;    /* text-gray-900               */
    --text: #1F2937;           /* text-gray-800/700           */
    --muted: #6B7280;          /* text-gray-500/600           */
    --muted-2: #9CA3AF;        /* text-gray-400               */
    --border: #E5E7EB;         /* border-gray-200             */
    --border-strong: #D1D5DB;  /* border-gray-300             */

    /* Status tints (bg / text / border) */
    --tint-green-bg: #ECFDF5;  --tint-green-text: #15803D;  --tint-green-border: #BBF7D0;
    --tint-red-bg: #FEF2F2;    --tint-red-text: #B91C1C;    --tint-red-border: #FECACA;
    --tint-amber-bg: #FFFBEB;  --tint-amber-text: #B45309;  --tint-amber-border: #FDE68A;
    --tint-blue-bg: #EFF6FF;   --tint-blue-text: #1D4ED8;
    --tint-purple-bg: #FAF5FF; --tint-purple-text: #7E22CE;
    --link: #1A3A8F;           /* action links (challan cards) */
}

html.dark {
    color-scheme: dark;
    --surface: #1E293B;        /* slate-800  */
    --surface-2: #172033;      /* between 800/900 */
    --surface-3: #334155;      /* slate-700  */
    --app-bg: #0F172A;         /* slate-900  */
    --text-strong: #F1F5F9;    /* slate-100  */
    --text: #E2E8F0;           /* slate-200  */
    --muted: #94A3B8;          /* slate-400  */
    --muted-2: #94A3B8;
    --border: #334155;         /* slate-700  */
    --border-strong: #475569;  /* slate-600  */

    --tint-green-bg: #06281F;  --tint-green-text: #4ADE80;  --tint-green-border: #14432F;
    --tint-red-bg: #3B1219;    --tint-red-text: #F87171;    --tint-red-border: #4C1D24;
    --tint-amber-bg: #362715;  --tint-amber-text: #FBBF24;  --tint-amber-border: #4A3A1A;
    --tint-blue-bg: #10233F;   --tint-blue-text: #60A5FA;
    --tint-purple-bg: #2A1846; --tint-purple-text: #C084FC;
    --link: #93A7E8;
}

/* ============================================================================
 * Dark overrides. Everything below applies ONLY under html.dark.
 * ==========================================================================*/

/* Base surfaces --------------------------------------------------------- */
html.dark body { background-color: var(--app-bg); color: var(--text); }

html.dark .bg-white { background-color: var(--surface) !important; }
html.dark .bg-gray-50 { background-color: var(--surface-2) !important; }
html.dark .bg-gray-100 { background-color: var(--surface-3) !important; }
html.dark .bg-gray-200 { background-color: #2A3548 !important; }
html.dark .bg-slate-50 { background-color: var(--surface-2) !important; }
html.dark .bg-slate-100 { background-color: var(--surface-3) !important; }

/* Semi-transparent white overlays (e.g. bg-white/95 logo chip) keep readable */
html.dark .bg-white\/95, html.dark .bg-white\/90 { background-color: rgba(226,232,240,0.95) !important; }

/* Text ------------------------------------------------------------------ */
html.dark .text-gray-900 { color: var(--text-strong) !important; }
html.dark .text-gray-800 { color: var(--text) !important; }
html.dark .text-gray-700 { color: var(--text) !important; }
html.dark .text-gray-600 { color: #CBD5E1 !important; }
html.dark .text-gray-500 { color: var(--muted) !important; }
html.dark .text-gray-400 { color: var(--muted-2) !important; }
html.dark .text-gray-300 { color: #CBD5E1 !important; }
html.dark .text-slate-900 { color: var(--text-strong) !important; }
html.dark .text-slate-800, html.dark .text-slate-700 { color: var(--text) !important; }
html.dark .text-slate-600, html.dark .text-slate-500 { color: var(--muted) !important; }
html.dark .text-black { color: var(--text-strong) !important; }

/* Placeholders */
html.dark .placeholder-gray-400::placeholder,
html.dark .placeholder-gray-500::placeholder { color: var(--muted-2) !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--muted-2); }

/* Borders --------------------------------------------------------------- */
html.dark .border { border-color: var(--border); }
html.dark .border-gray-100 { border-color: #263143 !important; }
html.dark .border-gray-200 { border-color: var(--border) !important; }
html.dark .border-gray-300 { border-color: var(--border-strong) !important; }
html.dark .border-slate-200 { border-color: var(--border) !important; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #263143 !important; }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
html.dark .border-t, html.dark .border-b, html.dark .border-l, html.dark .border-r,
html.dark .border-y, html.dark .border-x { border-color: var(--border); }

/* Form controls --------------------------------------------------------- */
html.dark input:not([type=checkbox]):not([type=radio]),
html.dark select, html.dark textarea {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
html.dark input[type=checkbox], html.dark input[type=radio] { accent-color: #6366F1; }

/* Hover / focus states -------------------------------------------------- */
html.dark .hover\:bg-gray-50:hover { background-color: var(--surface-3) !important; }
html.dark .hover\:bg-gray-100:hover { background-color: #2A3548 !important; }
html.dark .hover\:bg-gray-200:hover { background-color: #3A4558 !important; }
html.dark .hover\:bg-white:hover { background-color: var(--surface) !important; }
html.dark .hover\:bg-brand-600:hover { background-color: #2D4080 !important; }
html.dark .hover\:text-gray-700:hover { color: var(--text) !important; }
html.dark .hover\:text-gray-900:hover { color: var(--text-strong) !important; }
html.dark .hover\:border-gray-300:hover { border-color: var(--border-strong) !important; }

/* Status tint backgrounds ---------------------------------------------- */
html.dark .bg-green-50, html.dark .bg-green-100, html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: var(--tint-green-bg) !important; }
html.dark .bg-red-50, html.dark .bg-red-100, html.dark .bg-rose-50 { background-color: var(--tint-red-bg) !important; }
html.dark .bg-amber-50, html.dark .bg-amber-100, html.dark .bg-yellow-50, html.dark .bg-yellow-100, html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: var(--tint-amber-bg) !important; }
html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-sky-50, html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: var(--tint-blue-bg) !important; }
html.dark .bg-purple-50, html.dark .bg-purple-100, html.dark .bg-violet-50 { background-color: var(--tint-purple-bg) !important; }

/* Status tint text ------------------------------------------------------ */
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-emerald-600, html.dark .text-emerald-700 { color: var(--tint-green-text) !important; }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800, html.dark .text-rose-600, html.dark .text-rose-700 { color: var(--tint-red-text) !important; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-yellow-600, html.dark .text-yellow-700, html.dark .text-orange-600, html.dark .text-orange-700 { color: var(--tint-amber-text) !important; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-sky-600, html.dark .text-indigo-600, html.dark .text-indigo-700 { color: var(--tint-blue-text) !important; }
html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-violet-600, html.dark .text-violet-700 { color: var(--tint-purple-text) !important; }

/* Status tint borders (colored chips with borders) */
html.dark .border-green-200 { border-color: #14432F !important; }
html.dark .border-red-200 { border-color: #4C1D24 !important; }
html.dark .border-amber-200, html.dark .border-yellow-200 { border-color: #4A3A1A !important; }
html.dark .border-blue-200, html.dark .border-indigo-200 { border-color: #1E3A5F !important; }
html.dark .border-purple-200 { border-color: #3B2559 !important; }

/* Shadows read weak on dark; deepen them */
html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35) !important; }
html.dark .shadow, html.dark .shadow-md { box-shadow: 0 2px 8px 0 rgba(0,0,0,0.45) !important; }
html.dark .shadow-lg, html.dark .shadow-xl, html.dark .shadow-2xl { box-shadow: 0 10px 30px 0 rgba(0,0,0,0.6) !important; }

/* Dividers/rules on dark */
html.dark hr { border-color: var(--border); }

/* Skeleton/loading shimmer if any uses bg-gray-200 animate-pulse — already covered by bg-gray-200. */

/* Tables ---------------------------------------------------------------- */
html.dark thead.bg-gray-50 th, html.dark .bg-gray-50 th { color: var(--muted); }
html.dark tbody tr:hover { background-color: var(--surface-2); }

/* Brand-tinted subtle backgrounds used for highlights (bg-brand-50/100) */
html.dark .bg-brand-50 { background-color: #1B2540 !important; }
html.dark .bg-brand-100 { background-color: #22305A !important; }
html.dark .text-brand-600, html.dark .text-brand-700 { color: #93A7E8 !important; }

/* Code / pre blocks (API docs) */
html.dark pre, html.dark code { background-color: #0B1220 !important; color: #E2E8F0 !important; border-color: var(--border) !important; }