/* ============================================================================
   light-theme-fix.css — AIDC Platform /app LIGHT-THEME legibility patch
   ----------------------------------------------------------------------------
   LOAD ORDER: injected LAST in the CSS chain — AFTER chat.html's inline <style>,
   engine-ux-v1.css, engine-redesign.css AND tablet-theme-fix.css (which remaps
   the base design tokens for html.light-theme). Because this file loads last and
   every rule carries the extra `html.light-theme` scope, these rules win by
   source order + specificity. `!important` is used throughout so we also override
   the inline styles emitted by JS-injected components (account-panel.js,
   knowledge-base.js, kb-picker.js, data-control.js) whose <style> blocks are
   appended to <head> at DOMContentLoaded (i.e. potentially after this file).

   SCOPE: EVERY rule is scoped under `html.light-theme`. This file NEVER touches
   the dark theme. It only fixes surfaces that were built dark-first and remain
   low-contrast or invisible on the light (white / #f8f9fa) backgrounds:
     - hover/active backgrounds hardcoded as rgba(255,255,255,.0x) (vanish on white)
     - accent text hardcoded as dark-tuned hex (#22c55e / #3b82f6 / #8b5cf6) that
       fails WCAG AA on white and is NOT routed through a remapped token
     - a white-on-white input surface (type-to-confirm) with a near-invisible border
     - marginal secondary text on the light grey system-message bubble

   NOTE: engine-redesign.css, upload-merge.js and data-control.js are otherwise
   fully token-based; their tokens (var(--bg2/--border/--text/--muted/--red)) are
   correctly remapped by tablet-theme-fix.css for light, so they are left as-is.
   ========================================================================== */


/* ============================================================================
   1. SYSTEM / WELCOME MESSAGE — secondary text contrast on the grey bubble
   ----------------------------------------------------------------------------
   The welcome bubble (.msg-sys) is remapped to #e9ecef with #495057 text by
   tablet-theme-fix.css. Its inline `color:var(--dim)` hint ("Try the Demo
   Files…") resolves to #525a66, which drops to ~4.2:1 on the grey bubble — just
   under AA. Re-scope --dim a shade darker *within* .msg-sys so any descendant
   using var(--dim) clears 4.5:1, without affecting --dim anywhere else.
   ========================================================================== */
html.light-theme .msg-sys {
  --dim: #3f4652 !important; /* ~6:1 on #e9ecef */
}


/* ============================================================================
   2. KB SIDEBAR (knowledge-base.js .kb-*) + KB PICKER (kb-picker.js .kbp-*)
   ----------------------------------------------------------------------------
   These panels hardcode hover/active feedback as rgba(255,255,255,.02–.06),
   which is completely invisible on the white KB surface. Filenames/meta/
   checkboxes already use remapped tokens (var(--muted)/var(--dim)/accent-color
   var(--blue)) and are legible; only the hover states need a light equivalent.
   ========================================================================== */
html.light-theme .kb-file-row:hover,
html.light-theme .kb-group-header:hover,
html.light-theme .kbp-file-row:hover,
html.light-theme .kbp-group-header:hover {
  background: rgba(0, 0, 0, 0.045) !important;
}

html.light-theme .kb-close-btn:hover,
html.light-theme .kb-clear-btn:hover,
html.light-theme .kbp-close:hover,
html.light-theme .kbp-btn-cancel:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* Search field / folder select sit on the white card — give the faint token
   border a touch more presence so the input edges read on white. */
html.light-theme .kb-search-input,
html.light-theme .kb-select,
html.light-theme .kbp-btn {
  border-color: rgba(0, 0, 0, 0.14) !important;
}


/* ============================================================================
   3. DATA CONTROL — type-to-confirm input (data-control.js .dc-confirm-input)
   ----------------------------------------------------------------------------
   The confirm input sets background:var(--bg2) which is #ffffff in light — i.e.
   a white field on the white .dc-panel, bounded only by rgba(0,0,0,.08). It
   reads as invisible until focused. Give it a distinct fill + a clearly visible
   border so the destructive type-to-confirm affordance is obvious. (Focus still
   turns the border red via the component's own :focus rule.)
   ========================================================================== */
html.light-theme .dc-confirm-input {
  background: #f8f9fa !important;
  border-color: rgba(0, 0, 0, 0.22) !important;
  color: #1a1a2e !important;
}
html.light-theme .dc-confirm-input::placeholder {
  color: #6b7280 !important;
}

/* Danger-zone box: the .05 red wash + faint text read a little weak on white —
   nudge the wash so the destructive region stays visually distinct. */
html.light-theme .dc-nuke {
  background: rgba(200, 21, 10, 0.06) !important;
}


/* ============================================================================
   4. ACCOUNT PANEL — credit usage L2/L3 labels + tier/status/L1 values
   ----------------------------------------------------------------------------
   account-panel.js renders the panel on var(--bg2) (=#ffffff in light) but
   hardcodes accent text as dark-tuned hex, failing WCAG AA on white:
     • "L2 — AI Reasoning"  color:#3b82f6  ≈ 3.7:1  (FAIL, 12px)
     • "L3 — Generation"    color:#8b5cf6  ≈ 3.5:1  (FAIL, 12px)
     • Tier / Status / "Unlimited"  color:#22c55e  ≈ 1.7:1  (SEVERE, ~invisible)
   These spans carry no class, so we match the inline `color:#…` substring and
   remap to the AA-safe light accents. The progress-bar fill divs use
   `background:#…` (not `color:#…`) and are intentionally left saturated.
   ========================================================================== */
html.light-theme #accountPanel [style*="color:#3b82f6"] {
  color: #1d4ed8 !important; /* ~5.6:1 on white */
}
html.light-theme #accountPanel [style*="color:#8b5cf6"] {
  color: #6d28d9 !important; /* ~6.5:1 on white */
}
html.light-theme #accountPanel [style*="color:#22c55e"] {
  color: #047857 !important; /* ~4.8:1 on white — replaces the invisible green */
}
