/* FreightOS — designed light theme.
   Activated by body.light (toggle in Settings, persisted in localStorage "freightos-theme").
   The app's components are styled dark-first with literal Tailwind classes; this sheet
   remaps each dark class to a light equivalent. !important is safe — the Tailwind CDN
   emits no !important rules.

   To regenerate the class inventory after adding new components, run in js/:
   grep -ohE "(hover:|focus:|placeholder-)?(bg|text|border|ring)-(slate|white|black)[0-9a-zA-Z/.-]*" *.js | sort -u
   grep -ohE "(hover:)?text-(blue|emerald|red|amber|cyan|violet|orange)-[0-9/]+" *.js | sort -u
   and add a body.light override for any class not covered below. */

/* ---------- base ---------- */
body.light{background:#eef2f7}
body.light ::-webkit-scrollbar-thumb{background:#c3cedd}
body.light select option{background:#ffffff;color:#0f172a}
body.light input[type=date]::-webkit-calendar-picker-indicator{filter:none}

/* ---------- surfaces ---------- */
body.light .bg-slate-950{background-color:#e8edf4!important}
body.light .bg-slate-900{background-color:#ffffff!important}
body.light .bg-slate-900\/60{background-color:#f8fafc!important}
body.light .bg-slate-900\/70{background-color:#f8fafc!important}
body.light .bg-slate-800{background-color:#ffffff!important}
body.light .bg-slate-800\/50{background-color:#ffffff!important}
body.light .bg-slate-800\/60{background-color:#ffffff!important;box-shadow:0 1px 3px rgba(15,23,42,.06)}
body.light .bg-slate-800\/80{background-color:#f8fafc!important}
body.light .bg-slate-800\/40{background-color:#f1f5f9!important}
body.light .bg-slate-800\/30{background-color:#f1f5f9!important}
body.light .bg-slate-700{background-color:#e2e8f0!important}
body.light .bg-slate-700\/60{background-color:#e2e8f0!important}
body.light .bg-slate-700\/20{background-color:rgba(148,163,184,.16)!important}
body.light .bg-slate-700\/10{background-color:rgba(148,163,184,.10)!important}
body.light .bg-slate-600{background-color:#cbd5e1!important}
body.light .bg-slate-600\/30{background-color:rgba(148,163,184,.25)!important}
body.light .bg-slate-600\/40{background-color:rgba(148,163,184,.30)!important}
body.light .hover\:bg-slate-800:hover{background-color:#e8edf4!important}
body.light .hover\:bg-slate-700:hover{background-color:#dbe3ec!important}
body.light .hover\:bg-slate-600:hover{background-color:#b9c5d4!important}
body.light .hover\:bg-slate-700\/10:hover{background-color:rgba(148,163,184,.12)!important}
body.light .hover\:bg-slate-700\/20:hover{background-color:rgba(148,163,184,.20)!important}
/* modal scrims stay dark so white dialogs pop */
body.light .bg-black\/65{background-color:rgba(15,23,42,.40)!important}
body.light .bg-black\/70{background-color:rgba(15,23,42,.45)!important}
body.light .bg-black\/85{background-color:rgba(15,23,42,.55)!important}
body.light .bg-red-950\/60{background-color:#fef2f2!important}
body.light .bg-blue-600\/20{background-color:rgba(37,99,235,.12)!important}
body.light .bg-violet-600\/20{background-color:rgba(109,40,217,.12)!important}

/* ---------- text ---------- */
body.light .text-white{color:#0f172a!important}
body.light .hover\:text-white:hover{color:#0f172a!important}
body.light .text-slate-200{color:#1e293b!important}
body.light .hover\:text-slate-200:hover{color:#1e293b!important}
body.light .text-slate-300{color:#334155!important}
body.light .text-slate-400{color:#475569!important}
body.light .text-slate-500{color:#64748b!important}
body.light .text-slate-600{color:#94a3b8!important}
body.light .placeholder-slate-500::placeholder{color:#94a3b8!important}
body.light .placeholder-slate-600::placeholder{color:#a8b6c8!important}

/* labels on solid colored buttons must stay white (re-override after .text-white) */
body.light .bg-blue-600.text-white,
body.light .bg-emerald-600.text-white,
body.light .bg-cyan-600.text-white,
body.light .bg-red-600.text-white,
body.light .bg-blue-600 .text-white,
body.light .from-blue-500.text-white{color:#ffffff!important}

/* ---------- borders ---------- */
body.light .border-slate-500\/60{border-color:#94a3b8!important}
body.light .border-slate-600{border-color:#c3cedd!important}
body.light .border-slate-600\/60{border-color:rgba(195,206,221,.85)!important}
body.light .border-slate-600\/40{border-color:rgba(195,206,221,.65)!important}
body.light .focus\:border-slate-600:focus{border-color:#94a3b8!important}
body.light .border-slate-700{border-color:#dbe3ec!important}
body.light .border-slate-700\/60{border-color:rgba(203,213,225,.9)!important}
body.light .border-slate-700\/50{border-color:rgba(203,213,225,.8)!important}
body.light .border-slate-700\/40{border-color:rgba(203,213,225,.7)!important}
body.light .border-slate-700\/30{border-color:rgba(203,213,225,.55)!important}
body.light .border-slate-700\/20{border-color:rgba(203,213,225,.45)!important}
body.light .border-slate-700\/15{border-color:rgba(203,213,225,.35)!important}
body.light .border-slate-800{border-color:#e2e8f0!important}
body.light .hover\:border-slate-500\/60:hover{border-color:#94a3b8!important}

/* ---------- accent text (darkened for white backgrounds) ---------- */
body.light .text-blue-400{color:#1d4ed8!important}
body.light .text-blue-300{color:#1e40af!important}
body.light .text-blue-200{color:#1e3a8a!important}
body.light .text-blue-500{color:#1d4ed8!important}
body.light .hover\:text-blue-400:hover{color:#1d4ed8!important}
body.light .hover\:text-blue-300:hover{color:#1e3a8a!important}
body.light .text-cyan-300{color:#0e7490!important}
body.light .text-cyan-400{color:#0e7490!important}
body.light .hover\:text-cyan-200:hover{color:#155e75!important}
body.light .text-emerald-400{color:#047857!important}
body.light .text-emerald-300{color:#059669!important}
body.light .text-emerald-300\/80{color:rgba(4,120,87,.85)!important}
body.light .hover\:text-emerald-300:hover{color:#065f46!important}
body.light .text-red-400{color:#b91c1c!important}
body.light .text-red-300{color:#dc2626!important}
body.light .text-red-200{color:#dc2626!important}
body.light .hover\:text-red-400:hover{color:#991b1b!important}
body.light .hover\:text-red-300:hover{color:#991b1b!important}
body.light .text-amber-400{color:#b45309!important}
body.light .text-amber-300{color:#d97706!important}
body.light .text-amber-400\/80{color:rgba(180,83,9,.85)!important}
body.light .hover\:text-amber-300:hover{color:#92400e!important}
body.light .text-violet-400{color:#6d28d9!important}
body.light .text-violet-300{color:#7c3aed!important}
body.light .text-orange-400{color:#c2410c!important}