/*
 * JCB360 Light Theme Override — v4 (final)
 * Fixes: correct attribute selectors, all opacity variants, gradient overrides.
 */

/* ═══════════════════════════════════════════════════════════════════
   1. CSS Variable Remapping
   ═══════════════════════════════════════════════════════════════════ */
:root, :host {
  --color-slate-950: #f8fafc;
  --color-slate-900: #f1f5f9;
  --color-slate-850: #e8f5e9;
  --color-slate-800: #ffffff;
  --color-slate-750: #d1fae5;
  --color-slate-700: #cbd5e1;
  --color-slate-600: #64748b;
  --color-black:     #f0fdf4;
  --color-zinc-800:  #e2e8f0;
  --color-white:     #ffffff;
  --color-gray-800:  #e2e8f0;
}

/* ═══════════════════════════════════════════════════════════════════
   2. Base
   ═══════════════════════════════════════════════════════════════════ */
html { background-color: #edfaf2 !important; }
body { background-color: #edfaf2 !important; color: #0f2318 !important; }
#root { background-color: #edfaf2 !important; min-height: 100vh; }

/* ═══════════════════════════════════════════════════════════════════
   3. Dark Background Overrides — ALL opacity variants
   NOTE: In [class*="..."] selectors, no escaping needed inside quotes.
   ═══════════════════════════════════════════════════════════════════ */

/* bg-[#0f172a] and all /XX variants */
[class*="bg-[#0f172a]"] { background-color: #f0fdf4 !important; }

/* bg-[#1e293b] and all /XX variants */
[class*="bg-[#1e293b]"] { background-color: #ffffff !important; }

/* bg-slate-900 and all /XX variants */
[class*="bg-slate-900"] { background-color: #f0fdf4 !important; }

/* bg-slate-800 and all /XX variants */
[class*="bg-slate-800"] { background-color: #ffffff !important; }

/* Hover variants */
[class*="hover:bg-[#0f172a]"]:hover { background-color: #dcfce7 !important; }
[class*="hover:bg-[#1e293b]"]:hover { background-color: #dcfce7 !important; }
[class*="hover:bg-slate-800"]:hover { background-color: #dcfce7 !important; }
[class*="hover:bg-slate-900"]:hover { background-color: #f0fdf4 !important; }

/* ═══════════════════════════════════════════════════════════════════
   4. Gradient Backgrounds — Override dark from/to stops
   ═══════════════════════════════════════════════════════════════════ */
/* All gradient elements that use dark stops */
[class*="from-zinc-8"],
[class*="from-slate-8"],
[class*="from-slate-9"],
[class*="from-gray-8"] {
  --tw-gradient-from: #f0fdf4 !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position),
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
}
[class*="to-zinc-8"],
[class*="to-slate-8"],
[class*="to-slate-9"],
[class*="to-slate-6"],
[class*="to-gray-8"] {
  --tw-gradient-to: #dcfce7 !important;
}

/* Catch all gradient-to-r/tr that use dark theme */
.bg-gradient-to-r,
.bg-gradient-to-tr {
  /* If no light from/to classes — reset to none to avoid dark gradient */
  background-image: none !important;
  background-color: #ffffff !important;
}
/* But restore gradient for actual colored elements (non-dark) */
[class*="from-emerald"],
[class*="from-blue"],
[class*="from-indigo"],
[class*="from-rose"],
[class*="from-amber"],
[class*="from-cyan"],
[class*="from-purple"],
[class*="from-orange"],
[class*="from-sky"],
[class*="from-teal"] {
  background-image: linear-gradient(var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. Inline Style Overrides (React sets these directly)
   ═══════════════════════════════════════════════════════════════════ */
[style*="background-color: rgb(15, 23, 42)"],
[style*="background-color: #0f172a"],
[style*="background: rgb(15, 23, 42)"],
[style*="background: #0f172a"]           { background-color: #f0fdf4 !important; background: #f0fdf4 !important; }

[style*="background-color: rgb(30, 41, 59)"],
[style*="background-color: #1e293b"],
[style*="background: rgb(30, 41, 59)"],
[style*="background: #1e293b"]           { background-color: #ffffff !important; background: #ffffff !important; }

[style*="background-color: rgb(12, 18, 34)"],
[style*="background-color: rgb(10, 15, 30)"],
[style*="background-color: rgb(17, 24, 39)"],
[style*="background-color: rgb(15, 20, 40)"] { background-color: #f0fdf4 !important; background: #f0fdf4 !important; }

/* ═══════════════════════════════════════════════════════════════════
   6. Layout — Sidebar + Main Content Wrappers
   ═══════════════════════════════════════════════════════════════════ */
#root > div            { background-color: #edfaf2 !important; }
#root > div > div      { background-color: #edfaf2 !important; }

/* Sidebar */
#root > div > div:first-child,
#root > div > aside {
  background-color: #f0fdf4 !important;
  border-right: 1px solid #bbf7d0 !important;
}

/* Main Content Area */
#root > div > div:last-child,
#root > div > main { background-color: #edfaf2 !important; }

/* ═══════════════════════════════════════════════════════════════════
   7. ★ CARDS — Gradient bg + Shadow
   ═══════════════════════════════════════════════════════════════════ */
/* All white cards */
.bg-white {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
  box-shadow: 0 2px 12px rgba(22,163,74,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
  border: 1px solid #d1fae5 !important;
}

/* Cards that were dark (now forced light via section 3) — enhance them */
[class*="bg-slate-800"],
[class*="bg-slate-900"],
[class*="bg-[#0f172a]"],
[class*="bg-[#1e293b]"] {
  background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%) !important;
  box-shadow: 0 2px 12px rgba(22,163,74,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
  border: 1px solid #d1fae5 !important;
  color: #0f2318 !important;
}

/* Ensure card children text is dark */
[class*="bg-slate-800"] *,
[class*="bg-slate-900"] *,
[class*="bg-[#0f172a]"] *,
[class*="bg-[#1e293b]"] * { color: inherit; }

/* Panel/Section wrappers that are big containers */
.min-h-screen { background-color: #edfaf2 !important; }

/* ═══════════════════════════════════════════════════════════════════
   8. ★ TEXT — Full Visibility Fix
   ═══════════════════════════════════════════════════════════════════ */
/* Slate (was light on dark bg — now make dark on light bg) */
.text-slate-100 { color: #0f2318 !important; }
.text-slate-200 { color: #1a3326 !important; }
.text-slate-300 { color: #1e4d35 !important; }
.text-slate-400 { color: #374151 !important; }
.text-slate-500 { color: #4b5563 !important; }
.text-slate-600 { color: #374151 !important; }
.text-white     { color: #0f2318 !important; }

/* Cyan — readable dark version */
.text-cyan-300, .text-cyan-400, .text-cyan-500, .text-cyan-700 { color: #0e7490 !important; }

/* Sky */
.text-sky-300, .text-sky-400, .text-sky-500 { color: #0369a1 !important; }

/* Teal */
.text-teal-300, .text-teal-400, .text-teal-500, .text-teal-600 { color: #0f766e !important; }

/* Blue */
.text-blue-300, .text-blue-400, .text-blue-500 { color: #1d4ed8 !important; }

/* Indigo */
.text-indigo-300, .text-indigo-400, .text-indigo-500 { color: #4338ca !important; }

/* Purple */
.text-purple-300, .text-purple-400, .text-purple-500 { color: #7c3aed !important; }

/* Amber / Orange */
.text-amber-300, .text-amber-400 { color: #b45309 !important; }
.text-amber-500                   { color: #92400e !important; }
.text-orange-400, .text-orange-500 { color: #c2410c !important; }
.text-yellow-300, .text-yellow-500 { color: #854d0e !important; }

/* Rose / Red */
.text-rose-300, .text-rose-400 { color: #be123c !important; }
.text-rose-500                  { color: #9f1239 !important; }

/* Emerald / Green */
.text-emerald-300, .text-emerald-400 { color: #059669 !important; }
.text-emerald-500                     { color: #047857 !important; }
.text-emerald-600                     { color: #065f46 !important; }

/* Gray */
.text-gray-100, .text-gray-200 { color: #111827 !important; }
.text-gray-300                  { color: #1f2937 !important; }
.text-gray-400                  { color: #374151 !important; }
.text-gray-500                  { color: #4b5563 !important; }

/* Hover */
[class*="hover:text-slate-1"]:hover,
[class*="hover:text-white"]:hover     { color: #15803d !important; }
[class*="hover:text-cyan"]:hover,
[class*="hover:text-sky"]:hover       { color: #0e7490 !important; }

/* BUT: keep white text on colored button/badge backgrounds */
.bg-emerald-400 .text-white,
.bg-emerald-500 .text-white,
.bg-emerald-600 .text-white,
.bg-blue-500 .text-white,
.bg-blue-600 .text-white,
.bg-emerald-400,
.bg-emerald-500,
.bg-emerald-600,
.bg-blue-500,
.bg-blue-600,
.bg-indigo-500,
.bg-indigo-600,
.bg-rose-500,
.bg-rose-600,
.bg-amber-500 { color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════════
   9. Borders — Light Green
   ═══════════════════════════════════════════════════════════════════ */
[class*="border-[#334155]"]  { border-color: #bbf7d0 !important; }
[class*="border-slate-800"]  { border-color: #bbf7d0 !important; }
[class*="border-slate-700"]  { border-color: #a7f3d0 !important; }
[class*="border-slate-750"]  { border-color: #d1fae5 !important; }
[class*="border-slate-600"]  { border-color: #6ee7b7 !important; }

:where([class*="divide-slate-8"] > :not(:last-child)) { border-color: #bbf7d0 !important; }
:where([class*="divide-[#33"] > :not(:last-child))    { border-color: #bbf7d0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   10. ★ BUTTONS — Vivid Green
   ═══════════════════════════════════════════════════════════════════ */
/* Blue → Green */
.bg-blue-500, .bg-blue-600,
.bg-indigo-500, .bg-indigo-600 {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  border-color: #15803d !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.30) !important;
}
[class*="hover:bg-blue-"]:hover,
[class*="hover:bg-indigo-"]:hover {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
  color: #ffffff !important;
}

/* Emerald — enhanced */
.bg-emerald-400 {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.30) !important;
}
.bg-emerald-500 {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.30) !important;
}
.bg-emerald-600 {
  background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(22,163,74,0.25) !important;
}

/* Teal → Green */
.bg-teal-600 {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
}

/* Active nav — green */
[class*="bg-emerald"][class*="text-white"],
[class*="bg-green"] {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11. Nav / Sidebar Text
   ═══════════════════════════════════════════════════════════════════ */
nav a, nav button,
aside a, aside button { color: #1a3326 !important; }
nav a:hover, nav button:hover,
aside a:hover, aside button:hover {
  color: #15803d !important;
  background-color: #dcfce7 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   12. Inputs / Forms
   ═══════════════════════════════════════════════════════════════════ */
input, textarea, select {
  background-color: #ffffff !important;
  border-color: #bbf7d0 !important;
  color: #0f2318 !important;
}
input::placeholder, textarea::placeholder { color: #9ca3af !important; }
input:focus, textarea:focus, select:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   13. Dropdowns / Modals
   ═══════════════════════════════════════════════════════════════════ */
[role="listbox"],
[role="menu"],
[class*="dropdown"],
[class*="popover"] {
  background-color: #ffffff !important;
  border-color: #bbf7d0 !important;
  box-shadow: 0 8px 32px rgba(22,163,74,0.12) !important;
}

.fixed.inset-0 { background-color: rgba(0,0,0,0.35) !important; }

[role="dialog"] > div,
.fixed.inset-0 > div {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border-color: #bbf7d0 !important;
  box-shadow: 0 20px 60px rgba(22,163,74,0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   14. ★ TABLES
   ═══════════════════════════════════════════════════════════════════ */
table { background-color: #ffffff !important; color: #0f2318 !important; }
thead {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}
th {
  color: #166534 !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}
td { color: #1a3326 !important; }
tr { border-bottom-color: #d1fae5 !important; }
tbody tr:hover { background-color: #f0fdf4 !important; }

/* ═══════════════════════════════════════════════════════════════════
   15. Badge backgrounds with /10 opacity — fix text color
   ═══════════════════════════════════════════════════════════════════ */
[class*="bg-emerald"][class*="/10"] { color: #065f46 !important; }
[class*="bg-blue"][class*="/10"]    { color: #1e40af !important; }
[class*="bg-rose"][class*="/10"]    { color: #9f1239 !important; }
[class*="bg-amber"][class*="/10"]   { color: #78350f !important; }
[class*="bg-purple"][class*="/10"]  { color: #5b21b6 !important; }
[class*="bg-cyan"][class*="/10"]    { color: #0e7490 !important; }
[class*="bg-orange"][class*="/10"]  { color: #9a3412 !important; }
[class*="bg-sky"][class*="/10"]     { color: #075985 !important; }
[class*="bg-teal"][class*="/10"]    { color: #0f766e !important; }

/* ═══════════════════════════════════════════════════════════════════
   16. Scrollbars
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: #f0fdf4; }
::-webkit-scrollbar-thumb   { background: #86efac; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #16a34a; }
.scrollbar-thumb-slate-800  { scrollbar-color: #86efac #f0fdf4 !important; }

/* ═══════════════════════════════════════════════════════════════════
   17. Focus Rings
   ═══════════════════════════════════════════════════════════════════ */
*:focus-visible {
  outline-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   18. Smooth Transitions
   ═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}