/*
 * Dark-mode safety net for text.
 *
 * Many templates colour text with a fixed grey (text-gray-600/700/...) and no dark: variant,
 * which is near-invisible on the dark page background. Rather than patch every template, this
 * lightens those greys in dark mode, except where the text sits on a light surface
 * (white cards, popups, grey rows) or already has its own dark: colour.
 *
 * Dark mode here follows the OS setting (prefers-color-scheme), same as the compiled Tailwind.
 * To opt an element out, give it any dark:text-* class.
 *
 * The :where() wrappers add no specificity, so the "put it back on light surfaces" rules in
 * part 2 always beat the "lighten" rules in part 1.
 */
@media (prefers-color-scheme: dark) {
    /* 1. lighten the greys and the near-black heading colour on the dark page */
    :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900):where(:not([class*="dark:text"], input, select, textarea, button, option, .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400)),
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400)[class*="dark:bg"]:is(.text-gray-400, .text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900):where(:not([class*="dark:text"])) {
        color: #cbd5e1;
    }

    :is(.text-\[\#0D1118\], .text-\[\#182030\]):where(:not([class*="dark:text"], input, select, textarea, button, option, .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400)) {
        color: #E6EDF7;
    }

    /* 2. ...but put the original dark colours back on light surfaces */
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-gray-400:not([class*="dark:text"]) { color: #9ca3af; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-gray-500:not([class*="dark:text"]) { color: #6b7280; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-gray-600:not([class*="dark:text"]) { color: #4b5563; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-gray-700:not([class*="dark:text"]) { color: #374151; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-gray-800:not([class*="dark:text"]) { color: #1f2937; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-gray-900:not([class*="dark:text"]) { color: #111827; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-\[\#0D1118\]:not([class*="dark:text"]) { color: #0D1118; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .text-\[\#182030\]:not([class*="dark:text"]) { color: #182030; }

    /* 3. colours that are dark-on-dark here. In this project's Tailwind palette gray-400 is #3D485B
       (a dark slate), not Tailwind's usual light grey, so "dark:text-gray-400" is nearly invisible on
       the dark page. Lighten it, and put it back on light surfaces. */
    html .dark\:text-gray-400:where(:not(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400)) { color: #919EB0; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-green-50, .bg-red-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) .dark\:text-gray-400 { color: #3D485B; }

    /* 4. page tabs: app.css hard-codes inactive tabs black and active tabs brand magenta */
    html .tab-button[aria-selected="false"] { color: #cbd5e1 !important; }
    html .tab-button[aria-selected="true"],
    html .tab-button[aria-selected="false"]:hover { color: #F08AA8 !important; }

    /* 5. brand magenta (#A01745) text is too dark on the dark page: sidebar section labels and
       DataTables column titles */
    html #sidebar-nav span.uppercase.text-\[\#A01745\] { color: #E8618C; }
    html .dt-column-title { color: #F6A5BC; }
    html .welcome-name { color: #E8618C; }

    /* supplier upload pages: white page title, theme-blue action buttons (same as "Back"), dark file-picker button */
    html .dark\:text-page-title { color: #FFFFFF; }
    /* secondary action ("Get Empty Template"): quiet slate like the Browse button, so the red primary button stands out */
    html button.dark\:bg-action { background-color: #1E2A3A; border: 1px solid #334155; color: #E6EDF7; }
    html button.dark\:bg-action:hover { background-color: #27354B; border-color: #4A5C7A; }
    html span.dark\:bg-browse { background-color: #1E2A3A; color: #E6EDF7; border: 1px solid #334155; }
    html span.dark\:bg-browse:hover { background-color: #27354B; }

    /* tailwind.css sets a near-white scrollbar track (#f1f1f1) and a dark-blue thumb on every element */
    html, html * { scrollbar-color: #4C6FD6 #1B2433; }
    html ::-webkit-scrollbar-track { background: #1B2433; }
    html ::-webkit-scrollbar-thumb { border-color: #1B2433; }

    /* white panels marked "dark:bg-panel*" (supplier price pages) become the same dark cards as the
       other pages. The marker class also stops the rules above treating them as light surfaces. */
    html div.dark\:bg-panel { background-color: #131A26; border: 1px solid #1A202C; }
    html table.dark\:bg-panel { background-color: transparent; }
    html div.dark\:bg-panel hr { border-color: #1E2A3A; }

    /* validation errors (failed Excel rows etc.): dark red tint + red border instead of light pink */
    html .select2-selection.error,
    html div.dark\:bg-panel :is(input, textarea, select).border-red-500,
    html div.dark\:bg-panel :is(input, textarea, select).bg-red-200 {
        background-color: #3B1D27 !important;
        border: 1px solid #EF4444 !important;
        color: #FECACA !important;
    }
    html .select2-selection.error .select2-selection__rendered,
    html .select2-selection.error .select2-selection__placeholder { color: #FECACA !important; }
    html td.bg-red-200 { background-color: #3B1D27; color: #FCA5A5; }
    html div.dark\:bg-panel :is(input:not([type="file"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select:not(.select2-hidden-accessible)):not(.border-red-500, .bg-red-200) {
        background-color: #1B2433;
        color: #E6EDF7;
        border-color: #334155;
    }
    html .dark\:bg-panel-head { background-color: #1E2A3A; }
    html tr.dark\:bg-panel-row { border-color: #1E2A3A; }
    html tr.dark\:bg-panel-row:hover { background-color: #1B2433; }

    /* brand-magenta text sitting directly on the dark page (links, buttons); not inside light cards */
    html .text-\[\#A01745\]:where(:not([class*="dark:text"], [class*="bg-"], :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-slate-50, .bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-yellow-100, .bg-yellow-300, .bg-yellow-400):not([class*="dark:bg"], .bg-transparent) *)) { color: #E8618C; }

    /* white text on bright green (#24D164) is only 2:1 */
    html :is(button, a).bg-green-500 { background-color: #1b9f4c; }

    /* DataTables export buttons: text-gray-700 is a dark slate in this palette */
    html .dt-buttons .dt-button, html .dt-buttons .dt-button span { color: #E6EDF7; }

    /* dark blue headings (text-blue-800/900) vanish on the dark page; keep them dark on light surfaces */
    html :is(.text-blue-800, .text-blue-900):where(:not([class*="dark:text"], .bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-blue-50, .bg-blue-100, .bg-blue-200)) { color: #8DB4FF; }
    :is(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-blue-50, .bg-blue-100, .bg-blue-200, .bg-slate-50):not([class*="dark:bg"], .bg-transparent) :is(.text-blue-800, .text-blue-900):not([class*="dark:text"]) { color: #0F2D97; }
    html .empty-state-text { color: #9AA8BD; }

    /* tables whose body already has a dark variant but whose header row is a fixed light grey */
    html table[class*="dark:bg"] thead tr.bg-gray-100,
    html table[class*="dark:bg"] thead tr.bg-gray-100 th { background-color: #1E2A3A; color: #E6EDF7 !important; }

    /* 6. the shipment filter form: plain inputs/selects are white boxes inside a dark card.
       (Select2 pickers hide their native select, so those already render dark.) */
    html #shipment-filter :is(input[type="text"], select:not(.select2-hidden-accessible)) {
        background-color: #1B2433;
        color: #E6EDF7;
        border-color: #334155;
    }
    html #shipment-filter input::placeholder { color: #7F8CA3; }

    /* 7. shipment tracking form: the native date-time box is a white field inside the dark card */
    html #tracking-form input[type="datetime-local"] {
        background-color: #1B2433;
        color: #E6EDF7;
        border-color: #334155;
        color-scheme: dark;   /* dark calendar popup + light picker icon */
    }
}