/* ===========================================================================
 * Dark-theme bridge for light Tailwind utilities.
 *
 * Large parts of this app were written against a white page — bg-white cards,
 * text-gray-900 headings, bg-gray-50 rows — and were later moved under the dark
 * AzizaAI shell without their colours being revisited. The result is the defect
 * this file exists to kill: a white block in a dark page, usually with white or
 * near-white text on it, i.e. content that is simply invisible. The AI Recruiter
 * page, the voice-agent screens, the wallet pages and several partials all do
 * it; auditing them one class at a time is a long job, and every one of them is
 * broken in exactly the same way.
 *
 * So the light utilities are remapped onto the theme tokens while the dark
 * theme is active. Every declaration is !important because this project builds
 * Tailwind with `important: true` (see tailwind.config.js) — the utilities being
 * corrected are themselves !important, so nothing weaker than this can win.
 * templates/base.html carries the same idea for the pages that extend it; this
 * file covers the ones that extend base_aziza.html directly, and adds the light
 * gradients neither of them handled.
 *
 * Scope and guards:
 *   - `html:not([data-theme="light"])` — the light theme is left completely
 *     alone, since there these utilities are correct.
 *   - `#aziza-main` — page content only. Receipts, print views and anything
 *     rendered outside the shell keep their own palette.
 *
 * This is a bridge, not a destination: a template rewritten against the tokens
 * simply stops matching these selectors. Delete the rule once nothing needs it.
 * ======================================================================== */

html:not([data-theme="light"]) #aziza-main .bg-white:not(.bg-opacity-0) {
    background-color: rgb(var(--aziza-card)) !important;
}

html:not([data-theme="light"]) #aziza-main .bg-gray-50,
html:not([data-theme="light"]) #aziza-main .bg-gray-100,
html:not([data-theme="light"]) #aziza-main .bg-slate-50,
html:not([data-theme="light"]) #aziza-main .bg-slate-100 {
    background-color: var(--aziza-tint) !important;
}

html:not([data-theme="light"]) #aziza-main .bg-gray-200,
html:not([data-theme="light"]) #aziza-main .bg-slate-200 {
    background-color: var(--aziza-tint-2) !important;
}

/* Text. The 900/800 weights are headings, 700/600 body, 500/400 meta — the same
   three roles the tokens already name. */
html:not([data-theme="light"]) #aziza-main .text-black,
html:not([data-theme="light"]) #aziza-main .text-gray-900,
html:not([data-theme="light"]) #aziza-main .text-gray-800,
html:not([data-theme="light"]) #aziza-main .text-slate-900,
html:not([data-theme="light"]) #aziza-main .text-slate-800 {
    color: rgb(var(--aziza-text)) !important;
}

html:not([data-theme="light"]) #aziza-main .text-gray-700,
html:not([data-theme="light"]) #aziza-main .text-gray-600,
html:not([data-theme="light"]) #aziza-main .text-slate-700,
html:not([data-theme="light"]) #aziza-main .text-slate-600 {
    color: rgb(var(--aziza-muted)) !important;
}

html:not([data-theme="light"]) #aziza-main .text-gray-500,
html:not([data-theme="light"]) #aziza-main .text-gray-400,
html:not([data-theme="light"]) #aziza-main .text-slate-500,
html:not([data-theme="light"]) #aziza-main .text-slate-400 {
    color: rgb(var(--aziza-dim)) !important;
}

/* Hairlines drawn for a white page disappear on a dark one. */
html:not([data-theme="light"]) #aziza-main .border-gray-100,
html:not([data-theme="light"]) #aziza-main .border-gray-200,
html:not([data-theme="light"]) #aziza-main .border-gray-300,
html:not([data-theme="light"]) #aziza-main .border-slate-100,
html:not([data-theme="light"]) #aziza-main .border-slate-200,
html:not([data-theme="light"]) #aziza-main .border-slate-300 {
    border-color: rgb(var(--aziza-line)) !important;
}

/* Divide utilities draw the same hairline between siblings. */
html:not([data-theme="light"]) #aziza-main .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html:not([data-theme="light"]) #aziza-main .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--aziza-line)) !important;
}

/* Form controls carrying the same light utilities: keep the field readable and
   its placeholder distinguishable from real input. */
html:not([data-theme="light"]) #aziza-main input.bg-white,
html:not([data-theme="light"]) #aziza-main select.bg-white,
html:not([data-theme="light"]) #aziza-main textarea.bg-white {
    background-color: rgb(var(--aziza-bg)) !important;
    color: rgb(var(--aziza-text)) !important;
}

html:not([data-theme="light"]) #aziza-main input.bg-white::placeholder,
html:not([data-theme="light"]) #aziza-main textarea.bg-white::placeholder {
    color: rgb(var(--aziza-dim)) !important;
}

/* Hover states that lighten a surface on a white page darken nothing on a dark
   one — they flash white instead. */
html:not([data-theme="light"]) #aziza-main .hover\:bg-gray-50:hover,
html:not([data-theme="light"]) #aziza-main .hover\:bg-gray-100:hover,
html:not([data-theme="light"]) #aziza-main .hover\:bg-white:hover {
    background-color: var(--aziza-tint) !important;
}

/* Light gradient panels.
 *
 * `bg-gradient-to-br from-indigo-50 to-purple-50` is the same defect as
 * bg-white, one step less obvious: a near-white panel whose heading (usually
 * text-gray-900, remapped above to light text) becomes invisible on it. Matched
 * with ~= so the token has to be exactly `from-indigo-50` — a plain *= would
 * also catch `from-indigo-500`, which is a saturated gradient that reads
 * perfectly well and must be left alone. */
html:not([data-theme="light"]) #aziza-main [class~="from-white"],
html:not([data-theme="light"]) #aziza-main [class~="to-white"],
html:not([data-theme="light"]) #aziza-main [class~="from-slate-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-gray-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-gray-100"],
html:not([data-theme="light"]) #aziza-main [class~="from-blue-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-indigo-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-purple-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-pink-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-green-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-emerald-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-orange-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-amber-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-yellow-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-red-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-rose-50"],
html:not([data-theme="light"]) #aziza-main [class~="from-cyan-50"] {
    background-image: none !important;
    background-color: rgb(var(--aziza-card)) !important;
}