/* Crictier X — Platform Overview redesign
   Forest green sidebar + cream canvas + warm coral accents */

@import url("design-system/colors_and_type.css");

:root {
  /* === Crictier X palette (light app, forest+coral remix) === */
  --cx-bg:            #f6f3ec;   /* cream canvas */
  --cx-surface:       #ffffff;
  --cx-surface-2:     #faf7ee;
  --cx-surface-3:     #f0ebde;
  --cx-border:        #e6e0cf;
  --cx-border-strong: #d4cdb5;
  --cx-divider:       #ece6d4;

  --cx-fg:            #0d1f1c;
  --cx-fg-2:          #2c4540;
  --cx-fg-3:          #6b7f7a;
  --cx-fg-muted:      #8a9692;

  /* Forest navy-green for sidebar */
  --cx-forest-deep:   #0d2e26;
  --cx-forest:        #11362d;
  --cx-forest-mid:    #1a4438;
  --cx-forest-rim:    rgba(255, 255, 255, 0.08);
  --cx-forest-fg:     #dfe9e3;
  --cx-forest-fg-2:   #b3c4be;
  --cx-forest-fg-3:   #7e928c;

  /* Green accent — #1b5d39 based */
  --cx-coral-50:      #edf7f1;
  --cx-coral-100:     #d0ecd9;
  --cx-coral-200:     #a1d9b3;
  --cx-coral-300:     #70d49a;
  --cx-coral-400:     #3cb874;   /* bright accent — contrast against #1b5d39 */
  --cx-coral-500:     #1b5d39;   /* primary */
  --cx-coral-600:     #154d30;
  --cx-coral-700:     #0e3d24;

  /* Supporting greens (matching #1b5d39 palette) */
  --cx-emerald-50:    #edf7f1;
  --cx-emerald-100:   #d0ecd9;
  --cx-emerald-200:   #a1d9b3;
  --cx-emerald-400:   #3cb874;
  --cx-emerald-500:   #1b5d39;
  --cx-emerald-600:   #154d30;
  --cx-emerald-700:   #0e3d24;

  /* Neutrals + semantic */
  --cx-amber:         #f59e0b;
  --cx-amber-soft:    #fef3c7;
  --cx-blue:          #3b82f6;
  --cx-blue-soft:     #dbeafe;
  --cx-violet:        #8b5cf6;
  --cx-violet-soft:   #ede9fe;

  --cx-shadow-sm:  0 1px 2px rgba(11, 29, 26, 0.04), 0 1px 1px rgba(11, 29, 26, 0.03);
  --cx-shadow-md:  0 4px 14px rgba(11, 29, 26, 0.06), 0 2px 4px rgba(11, 29, 26, 0.04);
  --cx-shadow-lg:  0 12px 32px rgba(11, 29, 26, 0.10);
  --cx-shadow-xl:  0 20px 40px rgba(11, 29, 26, 0.12);
  --cx-shadow-coral: 0 10px 24px rgba(27, 93, 57, 0.22);

  --cx-radius-xs:  6px;
  --cx-radius-sm:  10px;
  --cx-radius-md:  14px;
  --cx-radius-lg:  20px;
  --cx-radius-xl:  28px;

  --cx-font: "Oxanium", "Rajdhani", ui-sans-serif, system-ui, sans-serif;

  /* Sidebar widths */
  --cx-sb-comfy:   276px;
  --cx-sb-wider:   320px;
  --cx-sb-icons:    72px;

  /* === Responsive page rhythm ===
     Pages use a centered max-width on monitors so wide screens don't go cavernous.
     Section padding scales with viewport using clamp() so phones, laptops, and 4K
     monitors all get appropriate breathing room. */
  --cx-page-max:   1800px;       /* content stops growing past this on big monitors */
  --cx-pad-x:      clamp(20px, 3vw, 56px);   /* horizontal section padding */
  --cx-pad-y:      clamp(20px, 2.4vw, 40px);   /* vertical section padding */
  --cx-pad-y-lg:   clamp(28px, 3.2vw, 52px);   /* hero / large sections */
  --cx-gap:        clamp(14px, 1.4vw, 22px);   /* card gap */
}

/* Page container — sits inside <main>, centers content on wide monitors */
.cx-page {
  max-width: var(--cx-page-max);
  margin-inline: auto;
  width: 100%;
}

/* Generic section padding helper (kept opt-in so we don't break anything) */
.cx-section {
  padding-block: var(--cx-pad-y);
  padding-inline: var(--cx-pad-x);
}
.cx-section--hero { padding-block: var(--cx-pad-y-lg) var(--cx-pad-y); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--cx-font);
  background: var(--cx-bg);
  color: var(--cx-fg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "tnum";
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }

/* Subtle pitch-grass cream texture */
.cx-canvas {
  background:
    radial-gradient(1200px 600px at 100% -10%, #edf7f1 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #eef5ee 0%, transparent 55%),
    var(--cx-bg);
}

/* Eyebrow (UPPERCASE micro label) */
.cx-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cx-emerald-600);
  display: inline-flex; align-items: center; gap: 8px;
}
.cx-eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--cx-emerald-500);
  border-radius: 2px;
}
.cx-eyebrow.is-forest { color: var(--cx-forest); }
.cx-eyebrow.is-forest::before { background: var(--cx-forest); }

/* Cards */
.cx-card {
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-md);
  box-shadow: var(--cx-shadow-sm);
}
.cx-card.is-soft { background: var(--cx-surface-2); }

/* Dotted/grid backgrounds */
.cx-grid-dots {
  background-image: radial-gradient(circle, rgba(13, 46, 38, 0.08) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Numbers — tabular */
.cx-num {
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}

/* Scrollbar tweaks — light surfaces use border-strong cream;
   dark sidebar uses a forest-tinted thumb so it blends with the panel. */
.cx-scroll { scrollbar-width: thin; scrollbar-color: var(--cx-border-strong) transparent; }
.cx-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.cx-scroll::-webkit-scrollbar-thumb {
  background: var(--cx-border-strong);
  border-radius: 9999px;
}
.cx-scroll::-webkit-scrollbar-thumb:hover { background: var(--cx-fg-muted); }
.cx-scroll::-webkit-scrollbar-track { background: transparent; }

/* Sidebar (dark forest panel) — softer thumb that matches the theme */
.cx-sidebar .cx-scroll,
[data-cx-surface="forest"] .cx-scroll {
  scrollbar-color: rgba(220, 245, 230, 0.18) transparent;
}
.cx-sidebar .cx-scroll::-webkit-scrollbar-thumb,
[data-cx-surface="forest"] .cx-scroll::-webkit-scrollbar-thumb {
  background: rgba(220, 245, 230, 0.18);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.cx-sidebar .cx-scroll::-webkit-scrollbar-thumb:hover,
[data-cx-surface="forest"] .cx-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 209, 138, 0.45);
  background-clip: padding-box;
}
.cx-sidebar .cx-scroll::-webkit-scrollbar-track,
[data-cx-surface="forest"] .cx-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* Cream-themed page scrollbar (the one on the right of the viewport) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--cx-border-strong) var(--cx-bg);
}
body::-webkit-scrollbar,
html::-webkit-scrollbar { width: 12px; height: 12px; }
body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track { background: var(--cx-bg); }
body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background: var(--cx-border-strong);
  border-radius: 9999px;
  border: 3px solid var(--cx-bg);
}
body::-webkit-scrollbar-thumb:hover,
html::-webkit-scrollbar-thumb:hover { background: var(--cx-fg-muted); }

html.cx-dark {
  scrollbar-color: var(--cx-border-strong) var(--cx-bg);
}

/* Animations */
@keyframes cx-pulse-coral {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 93, 57, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(27, 93, 57, 0); }
}
@keyframes cx-pulse-emerald {
  0%, 100% { box-shadow: 0 0 0 3px rgba(60,184,116,0.25); }
  50% { box-shadow: 0 0 0 7px rgba(60,184,116,0); }
}

/* Intelligence section — stack on narrow viewports */
@media (max-width: 1100px) {
  .cx-intel-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .cx-cap-card { grid-template-columns: 1fr !important; }
  .cx-cap-card > div:last-child { border-left: 0 !important; border-top: 1px solid var(--cx-border); }
}
@keyframes cx-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cx-fade-in { animation: cx-fade-in 0.5s var(--sv-ease-out) both; }

/* Tooltip-ish hover lift on cards */
.cx-lift { transition: transform 200ms var(--sv-ease-out), box-shadow 200ms var(--sv-ease-out), border-color 200ms; }
.cx-lift:hover { transform: translateY(-2px); box-shadow: var(--cx-shadow-md); border-color: var(--cx-border-strong); }

/* ============================================================
   HERO — responsive, fluid, no dead-space on big monitors
   Two-column grid that collapses to one on smaller screens.
   The right-side stat composition is sized in fr units, so it
   GROWS with the viewport instead of staying a tiny floater.
   ============================================================ */
.cx-hero {
  position: relative; overflow: hidden;
  padding: var(--cx-pad-y-lg) var(--cx-pad-x) var(--cx-pad-y);
}
.cx-hero__bg {
  position: absolute; top: 0; right: 0; width: 60%; height: 100%;
  opacity: 0.5; pointer-events: none;
}
.cx-hero__inner {
  position: relative;
  display: grid;
  /* Copy 1.4fr, stats 1fr — both grow on big screens, no dead margin */
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
/* Stack hero into one column on laptops/small windows so the trio + title both have room */
@media (max-width: 1440px) {
  .cx-hero__inner { grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
  .cx-hero__title { font-size: clamp(32px, 5vw, 52px); }
  .cx-hero__stats { grid-template-rows: auto; }
}

/* LEFT — copy */
.cx-hero__copy { min-width: 0; }
.cx-hero__title {
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cx-fg);
  margin: 14px 0 16px;
  text-wrap: balance;
}
.cx-hero__title-accent {
  background: linear-gradient(135deg, var(--cx-coral-400), var(--cx-coral-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cx-hero__lede {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--cx-fg-3);
  margin: 0 0 24px;
  max-width: 60ch;
  font-weight: 400;
  text-wrap: pretty;
}
.cx-hero__cta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cx-btn-primary {
  padding: 12px 22px; border-radius: 10px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--cx-coral-400), var(--cx-coral-500));
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--cx-shadow-coral);
  transition: transform 120ms var(--sv-ease-out), box-shadow 200ms;
}
.cx-btn-primary:hover { transform: translateY(-1px); }
.cx-btn-ghost {
  padding: 12px 18px; border-radius: 10px;
  background: var(--cx-elev-1); border: 1px solid var(--cx-border-strong);
  color: var(--cx-fg); font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.cx-hero__refresh {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 9999px;
  background: rgba(27, 93, 57, 0.10);
  border: 1px solid rgba(27, 93, 57, 0.28);
  color: var(--cx-emerald-600);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}
.cx-hero__refresh-dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: var(--cx-coral-400);
  box-shadow: 0 0 0 3px rgba(60, 184, 116, 0.25);
  animation: cx-pulse-coral 2s infinite;
}

/* RIGHT — stat composition (hero card + supporting trio) */
.cx-hero__stats {
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(10px, 1.2vw, 16px);
  width: 100%;
  min-width: 0;
}
.cx-hero__stat-hero {
  position: relative;
  padding: clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 32px);
  border-radius: 20px;
  background: linear-gradient(135deg, var(--cx-forest), var(--cx-forest-mid) 70%, #245748);
  color: #fff;
  box-shadow: 0 18px 40px rgba(13, 31, 28, 0.22), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  isolation: isolate;
}
.cx-hero__stat-hero::after {
  /* subtle pitch-line accent, top-right */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(60,184,116,0.35) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(249,122,74,0.10) 0%, transparent 50%);
  pointer-events: none; z-index: -1;
}
.cx-hero__stat-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(220, 245, 230, 0.85);
}
.cx-hero__stat-pulse {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--cx-coral-400);
  box-shadow: 0 0 0 4px rgba(60, 184, 116, 0.25);
  animation: cx-pulse-coral 2s infinite;
}
.cx-hero__stat-value {
  font-size: clamp(54px, 6.4vw, 92px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin-top: 10px;
  color: #fff;
}
.cx-hero__stat-plus {
  color: var(--cx-coral-400);
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 4px;
}
.cx-hero__stat-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(220, 245, 230, 0.85);
  margin-top: 8px;
}
.cx-hero__spark {
  margin-top: 14px;
  display: flex; align-items: flex-end; gap: 4px;
  height: 38px;
}
.cx-hero__spark > span {
  flex: 1; min-width: 3px; border-radius: 2px;
  transition: height 400ms var(--sv-ease-out);
}

/* Trio — three side-by-side mini cards. They COLLAPSE to two then one
   based on container width, so they always fit, never wrap mid-number. */
.cx-hero__stat-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}
@container (max-width: 480px) {
  .cx-hero__stat-trio { grid-template-columns: repeat(2, 1fr); }
}
.cx-hero__stats { container-type: inline-size; }
.cx-hero__stat-mini {
  padding: clamp(12px, 1.2vw, 18px);
  border-radius: 14px;
  background: var(--cx-elev-1);
  border: 1px solid var(--cx-border);
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.cx-hero__stat-mini--accent {
  background: linear-gradient(180deg, var(--cx-coral-50), var(--cx-elev-1));
  border-color: var(--cx-coral-200);
}
.cx-hero__stat-mini-value {
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--cx-fg);
}
.cx-hero__stat-mini-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cx-fg-2);
  margin-top: 6px;
}
.cx-hero__stat-mini-sub {
  font-size: 11px; color: var(--cx-fg-3);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dark mode tweaks for hero stat card */
html.cx-dark .cx-hero__stat-hero {
  background: linear-gradient(135deg, #0e2820 0%, #16382e 70%, #1f4a3e 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(78,209,138,0.12);
}
html.cx-dark .cx-hero__stat-mini { background: var(--cx-surface); border-color: var(--cx-border); }
html.cx-dark .cx-hero__stat-mini--accent {
  background: linear-gradient(180deg, rgba(60,184,116,0.10), var(--cx-surface));
  border-color: var(--cx-coral-200);
}

/* ============================================================
   Section padding override — make every existing section fluid.
   The JSX uses inline styles like padding: '48px 48px' — we
   override via attribute selectors so we don't need to touch
   every component file. Vertical padding is preserved, horizontal
   padding becomes the responsive var.
   ============================================================ */
.cx-page > section {
  padding-inline: var(--cx-pad-x) !important;
}

/* Compact density — tighter vertical rhythm */
.cx-page[data-density="compact"] {
  --cx-pad-y: clamp(16px, 1.8vw, 28px);
  --cx-pad-y-lg: clamp(22px, 2.4vw, 36px);
}
.cx-page[data-density="compact"] > section {
  padding-block: var(--cx-pad-y) !important;
}
.cx-page[data-density="compact"] .cx-hero {
  padding-block: var(--cx-pad-y-lg) var(--cx-pad-y) !important;
}
/* Cap inner content so massive monitors don't stretch grids absurdly */
.cx-page > section > * {
  max-width: 100%;
}

/* Make the page footer use the same fluid padding */
.cx-page > footer { padding-inline: var(--cx-pad-x); }

/* Topbar follows the fluid scale too */
.cx-topbar { padding-inline: var(--cx-pad-x) !important; }

/* On wide monitors, give grids more breathing room before they uncomfortably stretch.
   Applies to existing inline-grid sections by detecting their template. */
@media (min-width: 1600px) {
  /* Tournament + format cards already use auto-fit, so they scale fine.
     Just slightly enlarge typography rhythm for hero card on big screens. */
  .cx-hero__inner { gap: 72px; }
}

/* ============================================================
   Dark mode — toggled via .cx-dark on <html>
   Palette: deep cricket-pitch-at-night charcoal+emerald,
   lifted card surfaces, lime/emerald accents amplified.
   ============================================================ */
html.cx-dark {
  /* Surfaces — canvas darker than cards (inverted elevation) */
  --cx-bg:            #07120f;   /* near-black emerald canvas */
  --cx-surface:       #0f211c;   /* card */
  --cx-surface-2:     #0b1a16;   /* recessed panel */
  --cx-surface-3:     #163029;   /* hover/active fill */
  --cx-border:        #1d3a32;
  --cx-border-strong: #2c5448;
  --cx-divider:       #16302a;

  /* Text */
  --cx-fg:            #e9f4ee;
  --cx-fg-2:          #c2d4cd;
  --cx-fg-3:          #8ba299;
  --cx-fg-muted:      #6c8279;

  /* Forest sidebar — slightly lifted from canvas so the rail reads */
  --cx-forest-deep:   #081914;
  --cx-forest:        #0c2820;
  --cx-forest-mid:    #133a30;
  --cx-forest-rim:    rgba(255, 255, 255, 0.06);
  --cx-forest-fg:     #e4f1ea;
  --cx-forest-fg-2:   #b9cdc5;
  --cx-forest-fg-3:   #82978f;

  /* Accents — lift the green so it pops on dark */
  --cx-coral-50:      #0f2a1d;
  --cx-coral-100:     #143b29;
  --cx-coral-200:     #1c5839;
  --cx-coral-300:     #2a7a4f;
  --cx-coral-400:     #4ed18a;   /* primary accent in dark */
  --cx-coral-500:     #34c275;
  --cx-coral-600:     #5fdc99;
  --cx-coral-700:     #88ecb6;

  --cx-emerald-50:    #0f2a1d;
  --cx-emerald-100:   #143b29;
  --cx-emerald-200:   #1c5839;
  --cx-emerald-400:   #4ed18a;
  --cx-emerald-500:   #34c275;
  --cx-emerald-600:   #5fdc99;
  --cx-emerald-700:   #88ecb6;

  /* Soft tints */
  --cx-amber-soft:    #2e2306;
  --cx-blue-soft:     #0e2545;
  --cx-violet-soft:   #1f1640;

  /* Shadows — black, deeper */
  --cx-shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --cx-shadow-md:  0 4px 14px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35);
  --cx-shadow-lg:  0 12px 32px rgba(0,0,0,0.55);
  --cx-shadow-xl:  0 20px 40px rgba(0,0,0,0.6);
  --cx-shadow-coral: 0 10px 24px rgba(78, 209, 138, 0.22);

  /* Surface tokens for replacing inline #fff backgrounds */
  --cx-elev-1:        #0f211c;
  --cx-elev-2:        #11261f;
  --cx-grad-card:     linear-gradient(180deg, #11261f, #0c1d18);
  --cx-grad-card-rev: linear-gradient(180deg, #0c1d18, #11261f);
  --cx-cream-panel:   linear-gradient(180deg, #1a3329 0%, #0f2520 100%);
  --cx-pitch-clay:    linear-gradient(180deg, #5a4a2e 0%, #4a3c22 50%, #5a4a2e 100%);
}
html { color-scheme: dark; }
html:not(.cx-dark) { color-scheme: light; }

/* Light-mode counterparts so JSX can use the same tokens */
:root {
  --cx-elev-1:        #ffffff;
  --cx-elev-2:        #fcfaf2;
  --cx-grad-card:     linear-gradient(180deg, #ffffff, var(--cx-surface-2));
  --cx-grad-card-rev: linear-gradient(180deg, var(--cx-surface-2), #ffffff);
  --cx-cream-panel:   linear-gradient(180deg, #f5f3ec 0%, #ede5cf 100%);
  --cx-pitch-clay:    linear-gradient(180deg, #d9c890 0%, #cdb872 50%, #d9c890 100%);
}

html.cx-dark body { background: var(--cx-bg); color: var(--cx-fg); }
html.cx-dark .cx-canvas {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(78, 209, 138, 0.10) 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(52, 194, 117, 0.06) 0%, transparent 55%),
    var(--cx-bg);
}

/* Translucent topbar — light by default, swap in dark */
.cx-topbar { background: rgba(255, 255, 255, 0.85); }
html.cx-dark .cx-topbar { background: rgba(11, 26, 22, 0.82); border-bottom-color: var(--cx-border); }

/* Round chrome buttons (notif, dark toggle) — neutralize hardcoded #fff fills */
html.cx-dark .cx-topbar button[style*="background: rgb(255, 255, 255)"],
html.cx-dark .cx-topbar button[style*="background:#fff"],
html.cx-dark .cx-topbar button[style*="background: #fff"] {
  background: var(--cx-surface) !important;
  border-color: var(--cx-border) !important;
  color: var(--cx-fg-2) !important;
}
html.cx-dark .cx-topbar button svg { stroke: var(--cx-fg-2); }

/* Sun/moon icon swap */
html.cx-dark .cx-dm-moon { display: none !important; }
html.cx-dark .cx-dm-sun  { display: block !important; }

/* Card lift hover slightly stronger in dark */
html.cx-dark .cx-lift:hover { box-shadow: var(--cx-shadow-lg); border-color: var(--cx-border-strong); }

/* Cards adopt the elev token in dark for proper layering vs canvas */
html.cx-dark .cx-card { background: var(--cx-surface); border-color: var(--cx-border); }
html.cx-dark .cx-card.is-soft { background: var(--cx-surface-2); }

/* Generic catch-all for inline white backgrounds we can't easily refactor.
   Targets divs/buttons whose inline style sets background to plain white. */
html.cx-dark [style*="background: rgb(255, 255, 255)"]:not(img):not(.cx-keep-white),
html.cx-dark [style*="background:#fff"]:not(img):not(.cx-keep-white),
html.cx-dark [style*="background: #fff"]:not(img):not(.cx-keep-white) {
  background: var(--cx-surface) !important;
}

/* Borders that read white-ish on light still need to read in dark */
html.cx-dark .cx-grid-dots {
  background-image: radial-gradient(circle, rgba(78, 209, 138, 0.10) 1px, transparent 1px);
}

/* ============================================================
   Enriched / Non-enriched card hover glow
   - Coral glow on Enriched, red glow on Non-enriched
   - Inline boxShadow on these cards is overridden via !important
     so the hover state can fully take over.
   ============================================================ */
.cx-glow-card {
  position: relative;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 320ms ease,
              border-color 320ms ease;
  will-change: transform, box-shadow;
}
.cx-glow-card::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 0;
}
.cx-glow-card > * { position: relative; z-index: 1; }

.cx-glow-card:hover { transform: translateY(-3px); }

/* Coral (Enriched) */
.cx-glow-coral:hover {
  border-color: var(--cx-coral-400) !important;
  box-shadow:
    0 0 0 1px rgba(249, 122, 74, 0.28),
    0 18px 40px rgba(249, 122, 74, 0.22),
    0 6px 16px rgba(249, 122, 74, 0.12) !important;
}
.cx-glow-coral::before {
  background: radial-gradient(60% 80% at 50% 0%, rgba(249, 122, 74, 0.18), transparent 70%);
}
.cx-glow-coral:hover::before { opacity: 1; }

/* Red (Non-enriched) */
.cx-glow-red:hover {
  border-color: rgba(192, 57, 43, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(192, 57, 43, 0.32),
    0 18px 40px rgba(192, 57, 43, 0.22),
    0 6px 16px rgba(192, 57, 43, 0.14) !important;
}
.cx-glow-red::before {
  background: radial-gradient(60% 80% at 50% 0%, rgba(192, 57, 43, 0.16), transparent 70%);
}
.cx-glow-red:hover::before { opacity: 1; }

/* Stronger glow in dark mode */
html.cx-dark .cx-glow-coral:hover {
  box-shadow:
    0 0 0 1px rgba(249, 122, 74, 0.45),
    0 18px 44px rgba(249, 122, 74, 0.30),
    0 6px 18px rgba(249, 122, 74, 0.18) !important;
}
html.cx-dark .cx-glow-red:hover {
  box-shadow:
    0 0 0 1px rgba(232, 90, 75, 0.50),
    0 18px 44px rgba(232, 90, 75, 0.30),
    0 6px 18px rgba(232, 90, 75, 0.18) !important;
}

/* Reduced motion — keep the glow but skip the lift */
@media (prefers-reduced-motion: reduce) {
  .cx-glow-card { transition: box-shadow 320ms ease, border-color 320ms ease; }
  .cx-glow-card:hover { transform: none; }
}

/* Keep tournament logo tiles BRIGHT in dark mode so logos read.
   Use html.cx-dark .cx-logo-tile.cx-logo-tile (double class) for max specificity
   so this beats the inline-style catch-all higher up the cascade. */
html.cx-dark .cx-logo-tile.cx-logo-tile {
  background: #f7f4e8 !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(78,209,138,0.18),
    0 4px 14px rgba(0,0,0,0.4) !important;
}

/* ============================================================
   Format scoreboard — ODI / T20I / T20 big codes.
   Light: forest. Dark: bright emerald so it doesn't blend with bg.
   ============================================================ */
.cx-format-code { color: var(--cx-forest); }
.cx-format-code.is-hover { color: var(--cx-emerald-500); }
html.cx-dark .cx-format-code { color: var(--cx-emerald-400); }
html.cx-dark .cx-format-code.is-hover { color: var(--cx-emerald-300, #7dd6a3); }

/* ============================================================
   Live Forms card (Intelligence section) — gradient bg.
   Light: subtle warm white. Dark: forest-tinted, not white.
   ============================================================ */
.cx-live-forms-card {
  background: linear-gradient(180deg, #fafdf8 0%, var(--cx-elev-1) 100%);
}
html.cx-dark .cx-live-forms-card {
  background: linear-gradient(180deg, rgba(60,184,116,0.06) 0%, var(--cx-surface) 100%);
}

/* Forest-toned feature bucket (54 zone-based) tile in dark mode */
html.cx-dark .cx-feature-bucket.is-forest {
  background: rgba(78,209,138,0.08) !important;
  border-color: var(--cx-border) !important;
}
html.cx-dark .cx-feature-bucket.is-forest > div {
  /* the fg color is set inline as var(--cx-forest), which goes near-black in dark.
     Override with a brighter accent that still reads on the dark tile. */
  color: var(--cx-emerald-400) !important;
}
html.cx-dark .cx-feature-bucket.is-forest > div:last-child {
  color: var(--cx-fg-3) !important;
}

/* ============================================================
   Tailwind → Crictier X theme bridge
   ------------------------------------------------------------
   Scoped to .cx-canvas main so the sidebar / topbar / pavilion
   pages are not affected. Existing Tailwind utility classes
   on legacy pages get remapped to cx tokens and pick up dark
   mode automatically.

   Opt-out: add class `cx-keep-white` to preserve original color.
   ============================================================ */
.cx-canvas main { background: var(--cx-bg); color: var(--cx-fg); }

/* ---- Backgrounds ------------------------------------------- */
.cx-canvas main .bg-white:not(.cx-keep-white)        { background-color: var(--cx-surface) !important; }
.cx-canvas main .bg-gray-50:not(.cx-keep-white),
.cx-canvas main .bg-slate-50:not(.cx-keep-white),
.cx-canvas main .bg-zinc-50:not(.cx-keep-white),
.cx-canvas main .bg-neutral-50:not(.cx-keep-white)   { background-color: var(--cx-bg) !important; }
.cx-canvas main .bg-gray-100:not(.cx-keep-white),
.cx-canvas main .bg-slate-100:not(.cx-keep-white),
.cx-canvas main .bg-zinc-100:not(.cx-keep-white),
.cx-canvas main .bg-neutral-100:not(.cx-keep-white)  { background-color: var(--cx-surface-2) !important; }
.cx-canvas main .bg-gray-200:not(.cx-keep-white),
.cx-canvas main .bg-slate-200:not(.cx-keep-white)    { background-color: var(--cx-surface-3) !important; }
.cx-canvas main .bg-gray-300:not(.cx-keep-white),
.cx-canvas main .bg-slate-300:not(.cx-keep-white)    { background-color: var(--cx-border-strong) !important; }
.cx-canvas main .bg-gray-400:not(.cx-keep-white),
.cx-canvas main .bg-slate-400:not(.cx-keep-white)    { background-color: var(--cx-fg-muted) !important; }
.cx-canvas main .bg-gray-500:not(.cx-keep-white),
.cx-canvas main .bg-slate-500:not(.cx-keep-white)    { background-color: var(--cx-fg-3) !important; }
.cx-canvas main .bg-gray-600:not(.cx-keep-white),
.cx-canvas main .bg-slate-600:not(.cx-keep-white)    { background-color: var(--cx-fg-2) !important; }
.cx-canvas main .bg-gray-700:not(.cx-keep-white),
.cx-canvas main .bg-slate-700:not(.cx-keep-white)    { background-color: var(--cx-forest-mid) !important; color: var(--cx-forest-fg); }
.cx-canvas main .bg-gray-800:not(.cx-keep-white),
.cx-canvas main .bg-slate-800:not(.cx-keep-white)    { background-color: var(--cx-forest) !important; color: var(--cx-forest-fg); }
.cx-canvas main .bg-gray-900:not(.cx-keep-white),
.cx-canvas main .bg-slate-900:not(.cx-keep-white)    { background-color: var(--cx-forest-deep) !important; color: var(--cx-forest-fg); }

/* Inline white backgrounds (style="background: #fff") in pages */
.cx-canvas main [style*="background: rgb(255, 255, 255)"]:not(img):not(.cx-keep-white),
.cx-canvas main [style*="background:#fff"]:not(img):not(.cx-keep-white),
.cx-canvas main [style*="background: #fff"]:not(img):not(.cx-keep-white),
.cx-canvas main [style*="background-color: #fff"]:not(img):not(.cx-keep-white),
.cx-canvas main [style*="background-color:#fff"]:not(img):not(.cx-keep-white),
.cx-canvas main [style*="background-color: rgb(255, 255, 255)"]:not(img):not(.cx-keep-white) {
  background: var(--cx-surface) !important;
}

/* ---- Text -------------------------------------------------- */
.cx-canvas main .text-gray-900:not(.cx-keep-white),
.cx-canvas main .text-slate-900:not(.cx-keep-white),
.cx-canvas main .text-black:not(.cx-keep-white)      { color: var(--cx-fg) !important; }
.cx-canvas main .text-gray-800:not(.cx-keep-white),
.cx-canvas main .text-slate-800:not(.cx-keep-white)  { color: var(--cx-fg) !important; }
.cx-canvas main .text-gray-700:not(.cx-keep-white),
.cx-canvas main .text-slate-700:not(.cx-keep-white)  { color: var(--cx-fg-2) !important; }
.cx-canvas main .text-gray-600:not(.cx-keep-white),
.cx-canvas main .text-slate-600:not(.cx-keep-white)  { color: var(--cx-fg-2) !important; }
.cx-canvas main .text-gray-500:not(.cx-keep-white),
.cx-canvas main .text-slate-500:not(.cx-keep-white)  { color: var(--cx-fg-3) !important; }
.cx-canvas main .text-gray-400:not(.cx-keep-white),
.cx-canvas main .text-slate-400:not(.cx-keep-white)  { color: var(--cx-fg-muted) !important; }
.cx-canvas main .text-gray-300:not(.cx-keep-white),
.cx-canvas main .text-slate-300:not(.cx-keep-white)  { color: var(--cx-fg-muted) !important; }

/* ---- Borders ----------------------------------------------- */
.cx-canvas main .border-gray-50:not(.cx-keep-white),
.cx-canvas main .border-slate-50:not(.cx-keep-white) { border-color: var(--cx-divider) !important; }
.cx-canvas main .border-gray-100:not(.cx-keep-white),
.cx-canvas main .border-slate-100:not(.cx-keep-white){ border-color: var(--cx-divider) !important; }
.cx-canvas main .border-gray-200:not(.cx-keep-white),
.cx-canvas main .border-slate-200:not(.cx-keep-white){ border-color: var(--cx-border) !important; }
.cx-canvas main .border-gray-300:not(.cx-keep-white),
.cx-canvas main .border-slate-300:not(.cx-keep-white){ border-color: var(--cx-border-strong) !important; }
.cx-canvas main .border-gray-600:not(.cx-keep-white),
.cx-canvas main .border-slate-600:not(.cx-keep-white){ border-color: var(--cx-border-strong) !important; }
.cx-canvas main .border-white:not(.cx-keep-white)    { border-color: var(--cx-surface) !important; }

/* ---- Divides (Tailwind divide-* uses border-color on children) ---- */
.cx-canvas main .divide-gray-100 > * + *,
.cx-canvas main .divide-slate-100 > * + * { border-color: var(--cx-divider) !important; }
.cx-canvas main .divide-gray-200 > * + *,
.cx-canvas main .divide-slate-200 > * + * { border-color: var(--cx-border) !important; }

/* ---- Rings ------------------------------------------------- */
.cx-canvas main .ring-white:not(.cx-keep-white) { --tw-ring-color: var(--cx-surface) !important; }

/* ---- Inputs / form elements ------------------------------- */
.cx-canvas main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.cx-keep-white),
.cx-canvas main textarea:not(.cx-keep-white),
.cx-canvas main select:not(.cx-keep-white) {
  background-color: var(--cx-bg);
  color: var(--cx-fg);
  border-color: var(--cx-border);
}
.cx-canvas main input::placeholder,
.cx-canvas main textarea::placeholder { color: var(--cx-fg-muted); }

/* <option> elements rendered in the native dropdown panel */
.cx-canvas main select option {
  background-color: var(--cx-surface);
  color: var(--cx-fg);
}
html.cx-dark .cx-canvas main select option {
  background-color: var(--cx-surface);
  color: var(--cx-fg);
}

/* ---- Dark-mode strengthening ------------------------------
   Tailwind's `dark:` variants only fire if html.dark is set,
   which ThemeContext does sync — but most pages have no
   dark: classes at all, so we need extra dark overrides for
   any inline whites the rules above didn't catch. */
html.cx-dark .cx-canvas main {
  background: var(--cx-bg);
  color: var(--cx-fg);
}

/* Catch shadow utilities that look harsh on dark */
html.cx-dark .cx-canvas main .shadow,
html.cx-dark .cx-canvas main .shadow-sm,
html.cx-dark .cx-canvas main .shadow-md,
html.cx-dark .cx-canvas main .shadow-lg,
html.cx-dark .cx-canvas main .shadow-xl { box-shadow: var(--cx-shadow-md) !important; }

/* Hover backgrounds */
.cx-canvas main .hover\:bg-gray-50:hover:not(.cx-keep-white),
.cx-canvas main .hover\:bg-slate-50:hover:not(.cx-keep-white),
.cx-canvas main .hover\:bg-gray-100:hover:not(.cx-keep-white),
.cx-canvas main .hover\:bg-slate-100:hover:not(.cx-keep-white) { background-color: var(--cx-surface-3) !important; }
.cx-canvas main .hover\:bg-white:hover:not(.cx-keep-white) { background-color: var(--cx-surface) !important; }

/* SVG strokes/fills referencing currentColor pick up text color
   automatically; no rule needed. Hardcoded fill="white" / "#fff"
   stays intentional (logos, charts). */