/*
 * Phase 120 — Theme Engine Bridge (mastersoftware) — HARMONIZED REWRITE
 * ----------------------------------------------------------------------
 * Three-layer design (replaces the earlier blanket !important surface
 * remapping that broke the public site's premium gradients, glow blobs and
 * contact cards):
 *
 *   1. GLOBAL ACCENT LAYER  — buttons, badges, links, icons, focus rings,
 *      gradient stops and glow tints everywhere adopt --theme-primary /
 *      --theme-primary-hover, with hero gradients tinted from a dark slate
 *      base into the active theme's deep hue (--theme-gradient-dark →
 *      --theme-primary-deep).
 *   2. PANEL LAYER          — scoped to [data-ui="admin"] and
 *      [data-ui="customer"]: Clean Pure White surfaces (#ffffff), borders
 *      #e2e8f0 (border-slate-200 look), dark slate text (#0f172a /
 *      #334155), brand-colored active nav indicators, legible inputs.
 *   3. WEBSITE LAYER        — scoped to [data-ui="website"]: the ORIGINAL
 *      dark premium design is preserved untouched (hero gradients, glass
 *      cards, glow blobs) with explicit guarantees only: white text on
 *      dark/gradient sections, dark slate text on white/light cards.
 *
 * SAFETY: default theme stays pure-white (#ffffff sidebar, #e2e8f0
 * borders, #0f172a text, #2563eb accents) — a fresh git push to
 * production always renders Clean White panels. Every var() carries a
 * literal fallback so text can never disappear even if variables vanish.
 *
 * !important is used ONLY where the Tailwind CDN injects utilities after
 * this file (runtime) — never to break original backgrounds/gradients of
 * the public website, which are deliberately left unscoped.
 */

/* ── Derived theme aliases (referenced by gradient/glow rules below) ────
   Deep & gradient-dark come per-theme from ThemeService::styleTag() /
   AJAX switch; these aliases recompute automatically when --color-primary
   changes inline, so a live theme switch retints gradients instantly. */
:root {
    --theme-primary: var(--color-primary, #2563eb);
    --theme-primary-hover: var(--color-primary-light, #3b82f6);
    --theme-gradient-mid: color-mix(in srgb, var(--theme-gradient-dark, #0b1224) 55%, #33465f);
}

/* ══════════════════════════════════════════════════════════════════════
 * PUBLIC WEBSITE ([data-ui="website"]) — original dark design PRESERVED.
 * No surface/text remapping: hero gradients, glass cards and glow blobs
 * render exactly as authored; only explicit contrast guarantees below.
 * ══════════════════════════════════════════════════════════════════ */
/* Dark/gradient sections: text stays pure white / light slate (req. 3). */
[data-ui="website"] .text-white { color: #ffffff !important; }
[data-ui="website"] .text-slate-300 { color: #cbd5e1 !important; }
/* Light/white sections: text is dark slate so it never blends (req. 3).
   NOTE: parent-level only — children keep their own color classes, so a
   gradient/primary button inside a white card keeps its white text. */
[data-ui="website"] .bg-white,
[data-ui="website"] .bg-slate-50,
[data-ui="website"] .bg-slate-100 { color: var(--color-text, #0f172a); }

/* ══════════════════════════════════════════════════════════════════════
 * ADMIN & CUSTOMER PANELS ([data-ui="admin" | "customer"]) — CLEAN WHITE
 * Sidebars, headers, cards: #ffffff · borders slate-200 · text slate-900
 * (req. 2 — no half-dark/half-light cards possible: every dark surface
 * utility used by the panels resolves to the same white + light border).
 * ══════════════════════════════════════════════════════════════════ */
[data-ui="admin"], [data-ui="customer"] { color-scheme: light; }

[data-ui="admin"] .bg-slate-950, [data-ui="customer"] .bg-slate-950 { background-color: var(--color-app-bg, #f8fafc) !important; }
[data-ui="admin"] .bg-slate-900, [data-ui="customer"] .bg-slate-900,
[data-ui="admin"] .bg-slate-900\/80, [data-ui="customer"] .bg-slate-900\/80,
[data-ui="admin"] .bg-slate-900\/98, [data-ui="customer"] .bg-slate-900\/98,
[data-ui="admin"] .bg-slate-950\/95, [data-ui="customer"] .bg-slate-950\/95 { background-color: var(--color-surface, #ffffff) !important; }
[data-ui="admin"] .bg-slate-800, [data-ui="customer"] .bg-slate-800,
[data-ui="admin"] .bg-slate-800\/50, [data-ui="customer"] .bg-slate-800\/50,
[data-ui="admin"] .hover\:bg-slate-800:hover, [data-ui="customer"] .hover\:bg-slate-800:hover,
[data-ui="admin"] .hover\:bg-slate-900:hover, [data-ui="customer"] .hover\:bg-slate-900:hover,
[data-ui="admin"] .bg-white\/10, [data-ui="customer"] .bg-white\/10 { background-color: var(--color-surface-2, #f1f5f9) !important; }

/* Borders: slate-200 look (#e2e8f0) everywhere in panels. */
[data-ui="admin"] .border-slate-800, [data-ui="customer"] .border-slate-800,
[data-ui="admin"] .border-slate-700, [data-ui="customer"] .border-slate-700,
[data-ui="admin"] .border-slate-800\/50, [data-ui="customer"] .border-slate-800\/50,
[data-ui="admin"] .border-slate-800\/60, [data-ui="customer"] .border-slate-800\/60 { border-color: var(--color-border, #e2e8f0) !important; }
/* Panel text: dark slate on white (req. 3 — light sections → dark text). */
[data-ui="admin"] .text-white, [data-ui="customer"] .text-white { color: var(--color-text, #0f172a) !important; }
[data-ui="admin"] .hover\:text-white:hover, [data-ui="customer"] .hover\:text-white:hover { color: var(--color-text, #0f172a) !important; }
[data-ui="admin"] .text-slate-100, [data-ui="customer"] .text-slate-100,
[data-ui="admin"] .text-slate-200, [data-ui="customer"] .text-slate-200 { color: var(--color-text, #0f172a) !important; }
[data-ui="admin"] .text-slate-300, [data-ui="customer"] .text-slate-300 { color: var(--color-sidebar-text, #334155) !important; }
[data-ui="admin"] .text-slate-400, [data-ui="customer"] .text-slate-400,
[data-ui="admin"] .text-slate-500, [data-ui="customer"] .text-slate-500 { color: var(--color-text-muted, #64748b) !important; }
[data-ui="admin"] .hover\:text-slate-300:hover, [data-ui="customer"] .hover\:text-slate-300:hover { color: var(--color-sidebar-text, #334155) !important; }
/* Headings/labels inherit the surface's dark text (never invisible). */
h1, h2, h3, h4, h5, h6, label, legend, caption, th, dt { color: inherit; }

/* Status/pastel "-400" colors were designed for dark backgrounds — darken
   them for white cards so metric numbers and badges keep AA contrast
   (removes every half-dark/half-light clash in dashboards & tables). */
[data-ui="admin"] .text-emerald-400, [data-ui="customer"] .text-emerald-400 { color: #059669 !important; }
[data-ui="admin"] .text-blue-400, [data-ui="customer"] .text-blue-400 { color: #2563eb !important; }
[data-ui="admin"] .text-cyan-400, [data-ui="customer"] .text-cyan-400 { color: #0891b2 !important; }
[data-ui="admin"] .text-sky-400, [data-ui="customer"] .text-sky-400 { color: #0284c7 !important; }
[data-ui="admin"] .text-amber-400, [data-ui="customer"] .text-amber-400 { color: #b45309 !important; }
[data-ui="admin"] .text-rose-400, [data-ui="customer"] .text-rose-400,
[data-ui="admin"] .text-red-400, [data-ui="customer"] .text-red-400 { color: #e11d48 !important; }
[data-ui="admin"] .text-purple-400, [data-ui="customer"] .text-purple-400 { color: #7c3aed !important; }
[data-ui="admin"] .text-emerald-300, [data-ui="customer"] .text-emerald-300 { color: #047857 !important; }

/* ══════════════════════════════════════════════════════════════════════
 * TASK 1 — WHITE-ON-WHITE / LIGHT-THEME CONTRAST FIX
 * The light "-300"/"-400" utilities were designed for DARK surfaces. On the
 * panels' forced-white cards they blend into the background — indigo-400
 * (#818cf8), amber-300 (#fcd34d), sky-300 (#7dd3fc) are near-invisible on
 * white. Map every light text utility the panels use to a dark, AA-readable
 * equivalent so metric numbers, labels, table cells, badges and helper text
 * are always sharply legible. Scoped to panels only (website untouched).
 * ══════════════════════════════════════════════════════════════════ */
[data-ui="admin"] .text-indigo-300, [data-ui="customer"] .text-indigo-300,
[data-ui="admin"] .text-indigo-400, [data-ui="customer"] .text-indigo-400 { color: #4f46e5 !important; }
[data-ui="admin"] .text-amber-300,  [data-ui="customer"] .text-amber-300  { color: #b45309 !important; }
[data-ui="admin"] .text-blue-300,   [data-ui="customer"] .text-blue-300   { color: #1d4ed8 !important; }
[data-ui="admin"] .text-red-300,    [data-ui="customer"] .text-red-300    { color: #b91c1c !important; }
[data-ui="admin"] .text-rose-300,   [data-ui="customer"] .text-rose-300   { color: #be123c !important; }
[data-ui="admin"] .text-sky-300,    [data-ui="customer"] .text-sky-300    { color: #0369a1 !important; }
[data-ui="admin"] .text-cyan-300,   [data-ui="customer"] .text-cyan-300   { color: #0e7490 !important; }
[data-ui="admin"] .text-purple-300, [data-ui="customer"] .text-purple-300 { color: #6d28d9 !important; }
[data-ui="admin"] .text-violet-300, [data-ui="customer"] .text-violet-300,
[data-ui="admin"] .text-violet-400, [data-ui="customer"] .text-violet-400 { color: #6d28d9 !important; }
[data-ui="admin"] .text-teal-300,   [data-ui="customer"] .text-teal-300,
[data-ui="admin"] .text-teal-400,   [data-ui="customer"] .text-teal-400   { color: #0f766e !important; }
[data-ui="admin"] .text-orange-300, [data-ui="customer"] .text-orange-300,
[data-ui="admin"] .text-orange-400, [data-ui="customer"] .text-orange-400 { color: #c2410c !important; }
[data-ui="admin"] .text-lime-300,   [data-ui="customer"] .text-lime-300,
[data-ui="admin"] .text-lime-400,   [data-ui="customer"] .text-lime-400   { color: #4d7c0f !important; }
[data-ui="admin"] .text-green-300,  [data-ui="customer"] .text-green-300,
[data-ui="admin"] .text-green-400,  [data-ui="customer"] .text-green-400  { color: #15803d !important; }
[data-ui="admin"] .text-fuchsia-300,[data-ui="customer"] .text-fuchsia-300,
[data-ui="admin"] .text-fuchsia-400,[data-ui="customer"] .text-fuchsia-400 { color: #a21caf !important; }
/* Custom brand tint label → the active theme's primary (readable on white). */
[data-ui="admin"] .text-brand-400,  [data-ui="customer"] .text-brand-400  { color: var(--color-primary, #4f46e5) !important; }

/* Opacity-white text (text-white/50…/90) would also vanish on a light card. */
[data-ui="admin"] .text-white\/50, [data-ui="customer"] .text-white\/50,
[data-ui="admin"] .text-white\/60, [data-ui="customer"] .text-white\/60,
[data-ui="admin"] .text-white\/70, [data-ui="customer"] .text-white\/70,
[data-ui="admin"] .text-white\/80, [data-ui="customer"] .text-white\/80,
[data-ui="admin"] .text-white\/90, [data-ui="customer"] .text-white\/90 { color: var(--color-text-muted, #64748b) !important; }

/* ── SOLID / GRADIENT BACKGROUNDS KEEP PURE-WHITE TEXT ──────────────────
 * Pure white survives ONLY on a solid vivid button/badge or a gradient —
 * never on the light card surfaces above. Slate backgrounds are deliberately
 * EXCLUDED (theme-engine forces them light, so white text there would be the
 * exact white-on-white bug this section prevents). Specificity 0,3,0 beats
 * the generic .text-white rule so it applies regardless of stylesheet order.
 * ─────────────────────────────────────────────────────────────────────── */
[data-ui="admin"] [class*="bg-gradient"].text-white,
[data-ui="customer"] [class*="bg-gradient"].text-white,
[data-ui="admin"] :is(.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,.bg-blue-600,.bg-sky-500,.bg-sky-600,.bg-cyan-600,.bg-emerald-500,.bg-emerald-600,.bg-teal-600,.bg-amber-500,.bg-amber-600,.bg-orange-600,.bg-red-500,.bg-red-600,.bg-rose-500,.bg-rose-600,.bg-pink-600,.bg-purple-600,.bg-violet-600,.bg-fuchsia-600,.bg-brand-500,.bg-brand-600,.bg-brand-700).text-white,
[data-ui="customer"] :is(.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,.bg-blue-600,.bg-sky-500,.bg-sky-600,.bg-cyan-600,.bg-emerald-500,.bg-emerald-600,.bg-teal-600,.bg-amber-500,.bg-amber-600,.bg-orange-600,.bg-red-500,.bg-red-600,.bg-rose-500,.bg-rose-600,.bg-pink-600,.bg-purple-600,.bg-violet-600,.bg-fuchsia-600,.bg-brand-500,.bg-brand-600,.bg-brand-700).text-white { color: #ffffff !important; }

/* Sidebar/header ACTIVE indicator uses the selected theme's brand color
   (req. 2): the layouts mark active nav links with bg-slate-800 text-white
   inside <nav>. */
[data-ui="admin"] nav .bg-slate-800.text-white,
[data-ui="customer"] nav .bg-slate-800.text-white {
    background-color: var(--color-sidebar-active-bg, #eff6ff) !important;
    color: var(--color-sidebar-active-text, #2563eb) !important;
    font-weight: 600;
}

/* Panel inputs: white/light field, dark typed text, visible border. */
[data-ui="admin"] input.bg-slate-950, [data-ui="customer"] input.bg-slate-950,
[data-ui="admin"] select.bg-slate-950, [data-ui="customer"] select.bg-slate-950,
[data-ui="admin"] textarea.bg-slate-950, [data-ui="customer"] textarea.bg-slate-950 { background-color: var(--color-app-bg, #f8fafc) !important; color: var(--color-text, #0f172a) !important; }
[data-ui="admin"] input, [data-ui="customer"] input,
[data-ui="admin"] select, [data-ui="customer"] select,
[data-ui="admin"] textarea, [data-ui="customer"] textarea { color: var(--color-text, #0f172a); }
[data-ui="admin"] input::placeholder, [data-ui="customer"] input::placeholder,
[data-ui="admin"] textarea::placeholder, [data-ui="customer"] textarea::placeholder { color: var(--color-text-muted, #64748b); }
/* ══════════════════════════════════════════════════════════════════════
 * GRADIENT STOPS (global) — retain original depth, tint dynamically.
 * Solid brand/indigo stops → the active theme; dark slate/surface bases →
 * the theme-tinted dark base rising into the deep hue (req. 1b).
 * ══════════════════════════════════════════════════════════════════ */
/* Vivid start stops → --theme-primary */
.from-brand-400, .from-brand-500, .from-brand-600,
.from-indigo-500, .from-indigo-600,
.hover\:from-brand-500:hover, .hover\:from-brand-600:hover { --tw-gradient-from: var(--theme-primary, var(--color-primary, #2563eb)) !important; }
/* Lighter end stops → --theme-primary-hover (keeps original light direction) */
.to-brand-400, .to-brand-500, .to-brand-700,
.to-indigo-400, .to-indigo-500, .to-cyan-400,
.hover\:to-brand-400:hover, .hover\:to-brand-500:hover { --tw-gradient-to: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }
/* Mid stops → theme (text gradients & glow ribbons) */
.via-brand-500, .via-purple-400 { --tw-gradient-via: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }

/* Dark base stops → tinted dark base … rising into the theme's deep hue
   (hero keeps its depth; only the hue follows the active theme). */
.from-surface-950, .from-surface-900, .from-slate-950, .from-slate-900 { --tw-gradient-from: var(--theme-gradient-dark, #0b1224) !important; }
.to-surface-950, .to-surface-900, .to-slate-950, .to-slate-900 { --tw-gradient-to: var(--theme-gradient-dark, #0b1224) !important; }
.via-surface-900, .via-slate-900 { --tw-gradient-via: var(--theme-gradient-mid, #33465f) !important; }

/* Alpha (glow) stops keep their TRANSPARENCY — tinted with the theme so
   the hero blur blobs stay soft glows, never solid color patches. */
.from-brand-500\/\[0\.05\] { --tw-gradient-from: color-mix(in srgb, var(--theme-primary, #2563eb) 5%, transparent) !important; }
.from-brand-500\/10, .from-indigo-500\/10 { --tw-gradient-from: color-mix(in srgb, var(--theme-primary, #2563eb) 10%, transparent) !important; }
.from-brand-500\/20, .from-brand-600\/20 { --tw-gradient-from: color-mix(in srgb, var(--theme-primary, #2563eb) 20%, transparent) !important; }
.from-brand-500\/30 { --tw-gradient-from: color-mix(in srgb, var(--theme-primary, #2563eb) 30%, transparent) !important; }
.to-brand-500\/5 { --tw-gradient-to: color-mix(in srgb, var(--theme-primary, #2563eb) 5%, transparent) !important; }
.via-purple-500\/10 { --tw-gradient-via: color-mix(in srgb, var(--theme-primary, #2563eb) 10%, transparent) !important; }
/* Deep brand end-stops → the theme's DEEP hue (req. 1b: gradients run
   from the dark/slate base INTO the active theme's deep color — deep navy
   for corporate-navy, deep emerald for emerald, deep violet for violet). */
.from-indigo-900, .via-indigo-900, .to-indigo-900,
.from-brand-900, .via-brand-900, .to-brand-900 { --tw-gradient-from: var(--theme-primary-deep, var(--color-primary, #2563eb)) !important; --tw-gradient-to: var(--theme-primary-deep, var(--color-primary, #2563eb)) !important; --tw-gradient-via: var(--theme-primary-deep, var(--color-primary, #2563eb)) !important; }
/* Native select popups: readable everywhere. */
select option { background-color: #ffffff !important; color: #0f172a !important; }

/* ══════════════════════════════════════════════════════════════════════
 * GLOW TINTS (global) — brand/indigo/purple glow backgrounds adopt the
 * theme; SEMANTIC status tints (emerald/amber/cyan/rose) are left alone
 * because their meaning (success/pending/info/danger) must survive.
 * ══════════════════════════════════════════════════════════════════ */
.bg-brand-500\/10, .bg-brand-400\/10 { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 12%, transparent) !important; }
.bg-brand-500\/20, .bg-brand-500\/30 { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 22%, transparent) !important; }
.bg-brand-500\/\[0\.05\] { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 6%, transparent) !important; }
.bg-indigo-500\/10, .bg-indigo-500\/20 { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 14%, transparent) !important; }
.bg-purple-500\/10, .bg-purple-500\/20 { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 16%, transparent) !important; }

/* ══════════════════════════════════════════════════════════════════════
 * ACCENTS (global) — buttons, badges, links, icons, focus rings adopt
 * --theme-primary / --theme-primary-hover (req. 1a).
 * ══════════════════════════════════════════════════════════════════ */
.bg-indigo-600, .bg-indigo-500, .bg-indigo-700 { background-color: var(--theme-primary, var(--color-primary, #2563eb)) !important; }
.hover\:bg-indigo-500:hover, .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }
.bg-brand-500, .bg-brand-600, .bg-brand-700 { background-color: var(--theme-primary, var(--color-primary, #2563eb)) !important; color: #ffffff; }
.text-indigo-300, .text-indigo-400, .text-indigo-500, .text-indigo-600 { color: var(--theme-primary, var(--color-primary, #2563eb)) !important; }
.hover\:text-indigo-300:hover, .hover\:text-indigo-400:hover { color: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }
.ring-indigo-500:focus, .ring-indigo-500:focus-within, .focus\:ring-indigo-500:focus { --tw-ring-color: var(--theme-primary, var(--color-primary, #2563eb)) !important; }
.focus\:border-indigo-500:focus, .border-indigo-500\/30, .border-indigo-500\/40, .border-indigo-500\/50 { border-color: var(--theme-primary, var(--color-primary, #2563eb)) !important; }
/* On the dark website the LIGHTER theme tint stays readable (req. 3). */
[data-ui="website"] .text-indigo-300, [data-ui="website"] .text-indigo-400,
[data-ui="website"] .text-indigo-500, [data-ui="website"] .text-indigo-600 { color: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }
/* Public brand palette (guest tailwind config) — light tint on dark site. */
.text-brand-300, .text-brand-400, .text-brand-500, .text-brand-600 { color: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }
.group:hover .group-hover\:text-brand-300, .group:hover .group-hover\:text-brand-400 { color: var(--theme-primary-hover, var(--color-primary-light, #3b82f6)) !important; }
.border-brand-500\/30, .focus\:border-brand-500\/40:focus { border-color: var(--theme-primary, var(--color-primary, #2563eb)) !important; }
/* Chat quick-pills adopt the theme too. */
.bg-indigo-50 { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 8%, #ffffff) !important; }
.hover\:bg-indigo-100:hover { background-color: color-mix(in srgb, var(--theme-primary, #2563eb) 16%, #ffffff) !important; }
.border-indigo-200 { border-color: color-mix(in srgb, var(--theme-primary, #2563eb) 35%, #ffffff) !important; }
.text-indigo-700 { color: var(--theme-primary, var(--color-primary, #2563eb)) !important; }

/* ══════════════════════════════════════════════════════════════════════
 * WHITE-TEXT EXCEPTIONS — kept LAST so equal-specificity battles against
 * the panel text rules resolve to WHITE on colored/gradient/brand
 * surfaces (pure white on .bg-brand buttons per req. 1a/3; exact class
 * tokens so tinted bg-brand-500/10 badges keep their own text color).
 * ══════════════════════════════════════════════════════════════════ */
.bg-indigo-600.text-white, .bg-indigo-500.text-white,
.bg-indigo-700.text-white, .bg-emerald-500.text-white, .bg-emerald-600.text-white,
.bg-rose-500.text-white, .bg-rose-600.text-white, .bg-sky-500.text-white,
.bg-cyan-500.text-white, .bg-amber-500.text-white, .bg-amber-600.text-white,
.bg-red-500.text-white, .bg-orange-500.text-white, .bg-violet-600.text-white,
.bg-blue-600.text-white, [class*="bg-gradient"].text-white,
.bg-indigo-600 .text-white, .bg-indigo-500 .text-white,
.bg-emerald-500 .text-white, .bg-rose-500 .text-white,
[class*="bg-gradient"] .text-white { color: #ffffff !important; }
.bg-brand-500.text-white, .bg-brand-600.text-white, .bg-brand-700.text-white,
.bg-brand-500 .text-white, .bg-brand-600 .text-white, .bg-brand-700 .text-white { color: #ffffff !important; }
.bg-brand-500 *, .bg-brand-600 *, .bg-brand-700 * { color: #ffffff !important; }

/* Scrollbars — subtle light styling for panels; still legible on the dark
   website (theme border color has a light fallback). */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-border, #cbd5e1); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }