/* ══════════════════════════════════════════════════════════════════
   Cadence Dashboard — Light Theme
   Served from /public/ to completely bypass Turbopack's CSS cache.
   Applied when .light class is set (dash-theme cookie = 'light').
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
   ───────────────────────────────────────────────── */
.light {
  color-scheme: light;

  /* shadcn/ui sidebar tokens */
  --sidebar:                    #e9ebf2;
  --sidebar-foreground:         rgba(15, 17, 24, 0.78);
  --sidebar-primary:            #1e3a5f;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent:             rgba(15, 17, 24, 0.04);
  --sidebar-accent-foreground:  rgba(15, 17, 24, 0.9);
  --sidebar-border:             rgba(15, 17, 24, 0.07);
  --sidebar-ring:               rgba(30, 58, 95, 0.25);

  /* shadcn base tokens */
  --background:           #eef0f5;
  --foreground:           rgba(15, 17, 24, 0.9);
  --card:                 #ffffff;
  --card-foreground:      rgba(15, 17, 24, 0.9);
  --popover:              #ffffff;
  --popover-foreground:   rgba(15, 17, 24, 0.9);
  --primary:              #1e3a5f;
  --primary-foreground:   #ffffff;
  --secondary:            #e4e6ef;
  --secondary-foreground: rgba(15, 17, 24, 0.8);
  --muted:                #eaecf3;
  --muted-foreground:     rgba(15, 17, 24, 0.45);
  --accent:               rgba(15, 17, 24, 0.04);
  --accent-foreground:    rgba(15, 17, 24, 0.9);
  --destructive:          #dc2626;
  --border:               rgba(15, 17, 24, 0.15);
  --input:                rgba(15, 17, 24, 0.15);
  --ring:                 rgba(30, 58, 95, 0.30);

  /* Dash design system tokens */
  --color-dash-bg:       #eef0f5;
  --color-dash-surface:  #ffffff;
  --color-dash-surface2: #eaecf3;
  --color-dash-border:   rgba(15, 17, 24, 0.15);
}

/* ─────────────────────────────────────────────────
   2. LAYOUT BACKGROUNDS + SHADOWS
   ───────────────────────────────────────────────── */

/* Dash token utility classes */
.light .bg-dash-bg       { background-color: #eef0f5 !important; }
.light .bg-dash-surface  { background-color: #ffffff !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 10px rgba(0,0,0,0.05) !important; }
.light .bg-dash-surface2 { background-color: #e8eaf2 !important; }
.light .border-dash-border { border-color: rgba(15, 17, 24, 0.14) !important; }

/* Main content background */
.light .bg-background { background-color: #eef0f5 !important; }

/* Topbar — crisp white strip */
.light header { background-color: #ffffff !important; border-color: rgba(15,17,24,0.08) !important; }

/* Sidebar — distinctly cool-gray */
.light .bg-sidebar { background-color: #e9ebf2 !important; }

/* Hardcoded dark hex backgrounds → light equivalents */
.light .bg-\[\#0f1117\]    { background-color: #eef0f5 !important; }
.light .bg-\[\#161922\]    { background-color: #ffffff !important; }
.light .bg-\[\#0a0c10\]    { background-color: #e9ebf2 !important; }
.light .bg-\[\#080a0e\]    { background-color: #e2e4ec !important; }
.light .bg-\[\#1a1b20\]    { background-color: #f6f7fa !important; }
.light .bg-\[\#1a1c24\]    { background-color: #f6f7fa !important; }
.light .bg-\[\#16181f\]    { background-color: #f6f7fa !important; }
.light .bg-\[\#1e2130\]    { background-color: #eaecf3 !important; }
.light .bg-\[\#0f1117\]\/95 { background-color: rgba(238,240,245,0.97) !important; }
.light .bg-\[\#0f1117\]\/80 { background-color: rgba(238,240,245,0.85) !important; }

/* ─────────────────────────────────────────────────
   3. TINTED BADGE + BUTTON BACKGROUNDS (OKLAB FIX)
   Tailwind v4 compiles bg-{color}/10 via OKLAB which
   renders as saturated blobs on white. Force rgba.
   ───────────────────────────────────────────────── */

/* Navy (replaces gold as primary) */
.light .bg-gold\/10   { background-color: rgba(30,58,95,0.07) !important; }
.light .bg-gold\/15   { background-color: rgba(30,58,95,0.09) !important; }
.light .bg-gold\/20   { background-color: rgba(30,58,95,0.11) !important; }
.light .bg-gold\/30   { background-color: rgba(30,58,95,0.14) !important; }

/* Teal */
.light .bg-teal\/10   { background-color: rgba(45,212,191,0.09) !important; }
.light .bg-teal\/15   { background-color: rgba(45,212,191,0.12) !important; }
.light .bg-teal\/20   { background-color: rgba(45,212,191,0.14) !important; }

/* Orange */
.light .bg-orange-500\/10  { background-color: rgba(249,115,22,0.08)  !important; }
.light .bg-orange-500\/15  { background-color: rgba(249,115,22,0.11)  !important; }
.light .bg-orange-500\/20  { background-color: rgba(249,115,22,0.13)  !important; }

/* Purple */
.light .bg-purple-500\/10  { background-color: rgba(168,85,247,0.08)  !important; }
.light .bg-purple-500\/15  { background-color: rgba(168,85,247,0.11)  !important; }
.light .bg-purple-500\/20  { background-color: rgba(168,85,247,0.13)  !important; }

/* Blue */
.light .bg-blue-500\/10    { background-color: rgba(59,130,246,0.08)  !important; }
.light .bg-blue-500\/15    { background-color: rgba(59,130,246,0.11)  !important; }
.light .bg-blue-500\/20    { background-color: rgba(59,130,246,0.13)  !important; }

/* Emerald */
.light .bg-emerald-500\/10 { background-color: rgba(16,185,129,0.08)  !important; }
.light .bg-emerald-500\/15 { background-color: rgba(16,185,129,0.11)  !important; }
.light .bg-emerald-500\/20 { background-color: rgba(16,185,129,0.13)  !important; }

/* Sky */
.light .bg-sky-500\/10     { background-color: rgba(14,165,233,0.08)  !important; }
.light .bg-sky-500\/15     { background-color: rgba(14,165,233,0.11)  !important; }
.light .bg-sky-500\/20     { background-color: rgba(14,165,233,0.13)  !important; }

/* Red */
.light .bg-red-500\/10     { background-color: rgba(239,68,68,0.08)   !important; }
.light .bg-red-500\/15     { background-color: rgba(239,68,68,0.11)   !important; }
.light .bg-red-500\/20     { background-color: rgba(239,68,68,0.13)   !important; }

/* ─────────────────────────────────────────────────
   4. HOVER BACKGROUNDS
   ───────────────────────────────────────────────── */
.light .hover\:bg-gold\/20:hover         { background-color: rgba(30,58,95,0.11)  !important; }
.light .hover\:bg-gold\/\[0\.06\]:hover  { background-color: rgba(30,58,95,0.06)  !important; }
.light .hover\:bg-teal\/20:hover         { background-color: rgba(45,212,191,0.12)  !important; }
.light .hover\:bg-orange-500\/20:hover   { background-color: rgba(249,115,22,0.12)  !important; }
.light .hover\:bg-purple-500\/20:hover   { background-color: rgba(168,85,247,0.12)  !important; }
.light .hover\:bg-blue-500\/20:hover     { background-color: rgba(59,130,246,0.12)  !important; }
.light .hover\:bg-emerald-500\/20:hover  { background-color: rgba(16,185,129,0.12)  !important; }
.light .hover\:bg-sky-500\/20:hover      { background-color: rgba(14,165,233,0.12)  !important; }

/* ─────────────────────────────────────────────────
   5. WHITE OPACITY SERIES (bg/text/border)
   ───────────────────────────────────────────────── */

/* bg-white/X → near-dark tints on light bg */
.light .bg-white\/5   { background-color: rgba(15,17,24,0.05) !important; }
.light .bg-white\/10  { background-color: rgba(15,17,24,0.10) !important; }
.light .bg-white\/15  { background-color: rgba(15,17,24,0.15) !important; }
.light .bg-white\/20  { background-color: rgba(15,17,24,0.20) !important; }
.light .bg-white\/\[0\.015\] { background-color: rgba(15,17,24,0.015) !important; }
.light .bg-white\/\[0\.02\]  { background-color: rgba(15,17,24,0.02)  !important; }
.light .bg-white\/\[0\.04\]  { background-color: rgba(15,17,24,0.04)  !important; }
.light .bg-white\/\[0\.06\]  { background-color: rgba(15,17,24,0.06)  !important; }
.light .bg-white\/\[0\.08\]  { background-color: rgba(15,17,24,0.08)  !important; }
.light .bg-white\/\[0\.1\]   { background-color: rgba(15,17,24,0.10)  !important; }

/* hover:bg-white/X */
.light .hover\:bg-white\/5:hover            { background-color: rgba(15,17,24,0.05) !important; }
.light .hover\:bg-white\/\[0\.015\]:hover   { background-color: rgba(15,17,24,0.015) !important; }
.light .hover\:bg-white\/\[0\.04\]:hover    { background-color: rgba(15,17,24,0.04) !important; }
.light .hover\:bg-white\/\[0\.06\]:hover    { background-color: rgba(15,17,24,0.06) !important; }
.light .hover\:bg-white\/\[0\.08\]:hover    { background-color: rgba(15,17,24,0.08) !important; }

/* text-white/X → near-dark on light bg
   Low opacity values boosted to maintain ≥3:1 contrast on #eef0f5 */
.light .text-white      { color: rgb(15,17,24)          !important; }
.light .text-white\/10  { color: rgba(15,17,24,0.22)    !important; }
.light .text-white\/15  { color: rgba(15,17,24,0.28)    !important; }
.light .text-white\/20  { color: rgba(15,17,24,0.34)    !important; }
.light .text-white\/25  { color: rgba(15,17,24,0.42)    !important; }
.light .text-white\/30  { color: rgba(15,17,24,0.50)    !important; }
.light .text-white\/35  { color: rgba(15,17,24,0.60)    !important; }
.light .text-white\/40  { color: rgba(15,17,24,0.62)    !important; }
.light .text-white\/45  { color: rgba(15,17,24,0.65)    !important; }
.light .text-white\/50  { color: rgba(15,17,24,0.68)    !important; }
.light .text-white\/55  { color: rgba(15,17,24,0.72)    !important; }
.light .text-white\/60  { color: rgba(15,17,24,0.75)    !important; }
.light .text-white\/65  { color: rgba(15,17,24,0.78)    !important; }
.light .text-white\/70  { color: rgba(15,17,24,0.82)    !important; }
.light .text-white\/75  { color: rgba(15,17,24,0.85)    !important; }
.light .text-white\/80  { color: rgba(15,17,24,0.88)    !important; }
.light .text-white\/85  { color: rgba(15,17,24,0.92)    !important; }
.light .text-white\/90  { color: rgba(15,17,24,0.95)    !important; }

/* hover:text-white/X */
.light .hover\:text-white:hover       { color: rgb(15,17,24)       !important; }
.light .hover\:text-white\/50:hover   { color: rgba(15,17,24,0.70) !important; }
.light .hover\:text-white\/55:hover   { color: rgba(15,17,24,0.74) !important; }
.light .hover\:text-white\/60:hover   { color: rgba(15,17,24,0.78) !important; }
.light .hover\:text-white\/70:hover   { color: rgba(15,17,24,0.86) !important; }
.light .hover\:text-white\/75:hover   { color: rgba(15,17,24,0.88) !important; }
.light .hover\:text-white\/80:hover   { color: rgba(15,17,24,0.90) !important; }

/* border-white/X — all values roughly 2× to stay visible on light bg */
.light .border-white\/5          { border-color: rgba(15,17,24,0.10)  !important; }
.light .border-white\/10         { border-color: rgba(15,17,24,0.16)  !important; }
.light .border-white\/\[0\.04\]  { border-color: rgba(15,17,24,0.10)  !important; }
.light .border-white\/\[0\.06\]  { border-color: rgba(15,17,24,0.12)  !important; }
.light .border-white\/\[0\.08\]  { border-color: rgba(15,17,24,0.14)  !important; }
.light .border-white\/\[0\.1\]   { border-color: rgba(15,17,24,0.16)  !important; }
.light .border-white\/\[0\.12\]  { border-color: rgba(15,17,24,0.18)  !important; }

.light .hover\:border-white\/10:hover { border-color: rgba(15,17,24,0.18) !important; }

/* ─────────────────────────────────────────────────
   6. ACCENT BORDER COLORS (OKLAB FIX)
   ───────────────────────────────────────────────── */
.light .border-gold\/15           { border-color: rgba(30,58,95,0.22) !important; }
.light .border-gold\/25           { border-color: rgba(30,58,95,0.30) !important; }
.light .border-gold\/30           { border-color: rgba(30,58,95,0.36) !important; }
.light .border-teal\/15           { border-color: rgba(45,212,191,0.22)  !important; }
.light .border-teal\/30           { border-color: rgba(45,212,191,0.38)  !important; }
.light .border-orange-500\/15     { border-color: rgba(249,115,22,0.22)  !important; }
.light .border-orange-500\/30     { border-color: rgba(249,115,22,0.35)  !important; }
.light .border-purple-500\/15     { border-color: rgba(168,85,247,0.22)  !important; }
.light .border-purple-500\/30     { border-color: rgba(168,85,247,0.35)  !important; }
.light .border-blue-500\/15       { border-color: rgba(59,130,246,0.22)  !important; }
.light .border-blue-500\/30       { border-color: rgba(59,130,246,0.35)  !important; }
.light .border-emerald-500\/15    { border-color: rgba(16,185,129,0.22)  !important; }
.light .border-emerald-500\/30    { border-color: rgba(16,185,129,0.35)  !important; }
.light .border-sky-500\/15        { border-color: rgba(14,165,233,0.22)  !important; }
.light .border-sky-500\/30        { border-color: rgba(14,165,233,0.35)  !important; }

.light .hover\:border-gold\/25:hover         { border-color: rgba(30,58,95,0.32) !important; }
.light .hover\:border-gold\/30:hover         { border-color: rgba(30,58,95,0.40) !important; }
.light .hover\:border-orange-500\/30:hover   { border-color: rgba(249,115,22,0.35)  !important; }
.light .hover\:border-purple-500\/30:hover   { border-color: rgba(168,85,247,0.35)  !important; }
.light .hover\:border-blue-500\/30:hover     { border-color: rgba(59,130,246,0.35)  !important; }
.light .hover\:border-emerald-500\/30:hover  { border-color: rgba(16,185,129,0.35)  !important; }
.light .hover\:border-sky-500\/30:hover      { border-color: rgba(14,165,233,0.35)  !important; }
.light .hover\:border-teal\/30:hover         { border-color: rgba(45,212,191,0.38)  !important; }

/* ─────────────────────────────────────────────────
   7. ACCENT TEXT COLORS — DARKEN FOR LIGHT BG
   Tailwind 400 shades are too light on white.
   ───────────────────────────────────────────────── */
.light .text-orange-400   { color: #b45309 !important; }  /* orange-700 warmth */
.light .text-purple-400   { color: #7c3aed !important; }  /* purple-700 */
.light .text-blue-400     { color: #1d4ed8 !important; }  /* blue-700 */
.light .text-emerald-400  { color: #047857 !important; }  /* emerald-700 */
.light .text-sky-400      { color: #0369a1 !important; }  /* sky-700 */
.light .text-red-400      { color: #b91c1c !important; }  /* red-700 */
.light .text-red-500      { color: #dc2626 !important; }
.light .text-green-400    { color: #15803d !important; }
.light .text-yellow-400   { color: #a16207 !important; }

/* ─────────────────────────────────────────────────
   8. PLACEHOLDER TEXT
   ───────────────────────────────────────────────── */
.light .placeholder\:text-white\/20::placeholder { color: rgba(15,17,24,0.30) !important; }
.light .placeholder\:text-white\/25::placeholder { color: rgba(15,17,24,0.35) !important; }
.light .placeholder\:text-white\/30::placeholder { color: rgba(15,17,24,0.38) !important; }

/* ─────────────────────────────────────────────────
   9. SEPARATOR & DIVIDER
   ───────────────────────────────────────────────── */
.light [data-orientation="vertical"].bg-border,
.light [data-orientation="horizontal"].bg-border { background-color: rgba(15,17,24,0.08) !important; }

/* ─────────────────────────────────────────────────
   10. SCROLLBAR
   ───────────────────────────────────────────────── */
.light ::-webkit-scrollbar-thumb                        { background: rgba(15,17,24,0.13); }
.light ::-webkit-scrollbar-thumb:hover                  { background: rgba(15,17,24,0.22); }
.light .scrollbar-thin::-webkit-scrollbar-thumb         { background: rgba(15,17,24,0.10) !important; }
.light .scrollbar-thin::-webkit-scrollbar-thumb:hover   { background: rgba(15,17,24,0.18) !important; }

/* ─────────────────────────────────────────────────
   11. SHIMMER & ACTIVITY HOVER
   ───────────────────────────────────────────────── */
.light .dash-shimmer::after {
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(0,0,0,0.015) 45%,
    rgba(0,0,0,0.03)  50%,
    rgba(0,0,0,0.015) 55%,
    transparent 70%
  );
}
.light .dash-activity-item:hover { background-color: rgba(15,17,24,0.025) !important; }

/* ─────────────────────────────────────────────────
   12. QUICK ACTION BADGES (special: URGENT/UPCOMING)
   ───────────────────────────────────────────────── */
.light .bg-red-500\/15    { background-color: rgba(239,68,68,0.10)  !important; }
.light .bg-yellow-500\/15 { background-color: rgba(234,179,8,0.10)  !important; }
.light .text-red-500\/80  { color: rgba(185,28,28,0.90)             !important; }

/* ─────────────────────────────────────────────────
   13. SEARCH INPUT & GLOBAL SEARCH
   ───────────────────────────────────────────────── */
.light input[type="text"],
.light input[type="search"],
.light input[type="email"],
.light textarea,
.light select {
  color: rgba(15,17,24,0.88) !important;
  background-color: #ffffff !important;
  border-color: rgba(15,17,24,0.18) !important;
}
.light input[type="text"]:focus,
.light input[type="search"]:focus,
.light textarea:focus,
.light select:focus {
  border-color: rgba(30,58,95,0.45) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(30,58,95,0.10) !important;
}

/* ─────────────────────────────────────────────────
   14. PRIMARY (NAVY) & TEAL TEXT

   Navy  #1e3a5f on white = 9.1:1 ✓ WCAG AAA  ← primary
   Teal  #2dd4bf on white = 1.8:1 contrast (FAIL)
   Dark teal  #0d7a6e on white = 5.0:1 ✓ WCAG AA

   Gold #c8a45e demoted to secondary accent only.
   Gold text/borders still rendered but in muted form.
   ───────────────────────────────────────────────── */

/* Navy — replaces gold as primary interactive color */
.light .text-gold           { color: #1e3a5f !important; }

/* Navy opacity series */
.light .text-gold\/50       { color: rgba(30,58,95,0.75) !important; }
.light .text-gold\/60       { color: rgba(30,58,95,0.85) !important; }
.light .text-gold\/70       { color: rgba(30,58,95,0.90) !important; }
.light .text-gold\/80       { color: rgba(30,58,95,0.95) !important; }

/* Hover navy text */
.light .hover\:text-gold:hover   { color: #152d4a !important; }

/* Navy borders */
.light .border-gold         { border-color: rgba(30,58,95,0.45) !important; }
.light .border-gold\/20     { border-color: rgba(30,58,95,0.25) !important; }
.light .border-gold\/40     { border-color: rgba(30,58,95,0.45) !important; }

/* Teal text — solid */
.light .text-teal           { color: #0d7a6e !important; }

/* Teal text — opacity series */
.light .text-teal\/50       { color: rgba(13,122,110,0.75) !important; }
.light .text-teal\/60       { color: rgba(13,122,110,0.85) !important; }
.light .text-teal\/70       { color: rgba(13,122,110,0.90) !important; }
.light .text-teal\/80       { color: rgba(13,122,110,0.95) !important; }

/* Hover teal text */
.light .hover\:text-teal:hover   { color: #0a6358 !important; }

/* Teal borders */
.light .border-teal         { border-color: rgba(13,122,110,0.45) !important; }
.light .border-teal\/20     { border-color: rgba(13,122,110,0.30) !important; }
.light .border-teal\/40     { border-color: rgba(13,122,110,0.50) !important; }

/* ─────────────────────────────────────────────────
   15. PRIMARY (NAVY) + TEAL SOLID BACKGROUNDS

   bg-gold → navy bg.
   text-[#0f1117] is the dark text used on gold buttons
   in dark mode. In light mode, navy bg + dark text =
   unreadable. Override to gold so buttons read as
   "navy bg + gold text" — 7:1 contrast ✓ WCAG AA.
   ───────────────────────────────────────────────── */
.light .bg-gold             { background-color: #1e3a5f !important; }
.light .bg-teal             { background-color: #0d7a6e !important; }

/* All primary CTA buttons: dark text → gold text on navy bg */
.light .text-\[\#0f1117\]   { color: #c8a45e !important; }
.light .\!text-\[\#0f1117\] { color: #c8a45e !important; }

/* Hover states for the navy button (bg-gold/90, bg-gold-light) */
.light .hover\:bg-gold\/90:hover    { background-color: #152d4a !important; }
.light .hover\:bg-gold-light:hover  { background-color: #152d4a !important; }
.light .hover\:bg-gold\/90          { } /* class itself non-hover, keep navy */

/* ─────────────────────────────────────────────────
   16. SIDEBAR & NAV SPECIFIC OVERRIDES
   ───────────────────────────────────────────────── */

/* Active sidebar item text — ensure readable */
.light [data-active="true"] .text-white\/90 { color: rgba(15,17,24,0.92) !important; }

/* Sidebar section labels (text-white/25 → darker) */
.light aside .text-white\/25 { color: rgba(15,17,24,0.38) !important; }
.light aside .text-white\/30 { color: rgba(15,17,24,0.42) !important; }

/* ─────────────────────────────────────────────────
   17. CARD BORDERS — reinforce on light bg
   ───────────────────────────────────────────────── */
.light .border-dash-border {
  border-color: rgba(15,17,24,0.14) !important;
}
/* Cards: stronger shadow for depth */
.light .bg-dash-surface {
  background-color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 1px 10px rgba(0,0,0,0.05) !important;
}

/* ─────────────────────────────────────────────────
   18. DASHBOARD ROOT BACKGROUND
   .dash-root itself gets the page bg color.
   ───────────────────────────────────────────────── */
.light { background-color: #eef0f5 !important; }
.light .bg-background { background-color: #eef0f5 !important; }

/* ─────────────────────────────────────────────────
   19. MAIK BUTTON — navy glow replaces gold glow
   The inline shadow class uses rgba(200,164,94,...),
   override via the .maik-btn selector directly.
   ───────────────────────────────────────────────── */
.light .maik-btn[class*="bg-gold"] {
  box-shadow: 0 0 12px rgba(30,58,95,0.18) !important;
}

/* Avatar / user initials badge */
.light .bg-gold\/20.text-gold {
  background-color: rgba(30,58,95,0.10) !important;
}

/* Active sidebar nav item highlight */
.light [data-active="true"] {
  background-color: rgba(30,58,95,0.08) !important;
}

/* ─────────────────────────────────────────────────
   20. MAIK PANEL — specific overrides
   ───────────────────────────────────────────────── */

/* Input area within the panel */
.light .bg-\[\#0f1117\].border.border-white\/\[0\.06\] {
  background-color: #f6f7fa !important;
  border-color: rgba(15,17,24,0.10) !important;
}

/* Panel outer card — subtle border */
.light .bg-\[\#0a0c10\].border.border-white\/\[0\.08\] {
  border-color: rgba(15,17,24,0.12) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* ─────────────────────────────────────────────────
   22. SUMMARY CHIP ICONS — opacity-60 on pastels
   Inline style={{ color }} can't be overridden by
   class selectors. Use filter to darken + remove fade.
   ───────────────────────────────────────────────── */
.light a.group .opacity-60 {
  opacity: 1 !important;
  filter: brightness(0.55) saturate(1.15);
}