/*
  StepZero neon-dark theme polish to echo the reference UI:
  - Dark slate background with neon-green accents
  - Subtle glows on interactive elements
  - Compact tables and headings tuned for report density
*/

/* Accent variables */
:root {
  --sz-accent: #39ff14;        /* neon green */
  --sz-accent-soft: #32d912;   /* slightly dimmer */
  --sz-danger: #ff2d2d;        /* fireball red */
}

/* Dark scheme defaults (Material slate) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0f1216;  /* page bg */
  --md-primary-fg-color: #0b0d10;  /* header/nav base */
  --md-accent-fg-color: var(--sz-accent);
  --md-typeset-color: #d7d9df;
  --md-code-bg-color: #0a0c0f;
}

/* Header and tabs: darker, with a thin divider */
.md-header, .md-tabs {
  background: var(--md-primary-fg-color);
  box-shadow: none;
  border-bottom: 1px solid #1a1e24;
}

/* Link color + subtle glow on hover */
.md-typeset a {
  color: var(--sz-accent);
}
.md-typeset a:hover {
  text-shadow: 0 0 6px color-mix(in srgb, var(--sz-accent) 60%, transparent);
}

/* Search field styling */
.md-search__form {
  background: #151a20;
  border: 1px solid #222831;
  box-shadow: inset 0 0 0 1px #0b0d10;
}
.md-search__input::placeholder { color: #9aa3af; }
.md-search__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sz-accent) 40%, transparent);
}

/* Theme toggle / switches: neon ring vibe */
.md-toggle[data-md-toggle="palette"] + .md-header__option .md-icon {
  color: var(--sz-accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sz-accent) 55%, transparent));
}

/* Headings: compact and readable */
.md-typeset h1 { margin-bottom: 0.6rem; letter-spacing: 0.2px; }
.md-typeset h2 { margin-top: 1.2rem; border-left: 4px solid var(--sz-accent-soft); padding-left: 0.5rem; }

/* Tables: compact with sticky header */
.md-typeset table { display: block; overflow-x: auto; white-space: nowrap; }
.md-typeset table thead th { position: sticky; top: 0; background: var(--md-default-bg-color); }
.md-typeset table th, .md-typeset table td { padding: 0.38rem 0.56rem; }

/* Chips (can be used in future inline HTML): .chip, .chip--danger */
.chip { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; background: #1a1f26; color: #e5fbe1; border: 1px solid color-mix(in srgb, var(--sz-accent) 30%, #1a1f26); box-shadow: 0 0 0 1px #0b0d10 inset; }
.chip--danger { background: #2a1111; color: #fff; border-color: color-mix(in srgb, var(--sz-danger) 45%, #2a1111); }

/* Footnotes, small text */
.md-typeset small { color: #a7adb7; }

/* Tighten list spacing slightly */
.md-typeset ul { margin-top: 0.2rem; }

/* --- Dashboard hero --- */
.hero { display: flex; align-items: center; gap: 0.9rem; padding: 0.6rem 0.2rem 0.2rem; }
.hero__logo { height: 40px; width: auto; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sz-accent) 40%, transparent)); }
.hero__title { font-size: 1.1rem; font-weight: 700; color: var(--sz-accent); letter-spacing: 0.3px; }

/* --- Latest draw row --- */
.draw-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; }
.draw-row__meta { color: #c5cad3; }
.balls { display: flex; align-items: center; gap: 0.4rem; }

.ball {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #f4f6f9; color: #0a0c0f; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px #d6dbe3 inset;
}
.ball--fb {
  background: var(--sz-danger);
  color: #fff; box-shadow: 0 2px 10px rgba(255,45,45,0.35), 0 0 0 1px #ffb3b3 inset;
}

/* Badges (Midday/Evening) use the chip base */
.chip { font-weight: 600; }
.chip--green { background: #1a2a1a; color: #d8ffd8; border-color: color-mix(in srgb, var(--sz-accent) 40%, #1a2a1a); }
.chip--gray { background: #1c2128; color: #d0d4db; border-color: #2a3038; }

/* --- Card wrapper for tables --- */
.card { border-radius: 10px; padding: 0.6rem 0.8rem; background: #0f1216; border: 1px solid #1a1e24; }
.card--raised { box-shadow: 0 0 0 2px #12161c, 0 8px 24px rgba(0,0,0,0.35); }

/* --- Ball table tweaks --- */
.tbl.tbl--balls { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl.tbl--balls th, .tbl.tbl--balls td { padding: 0.45rem 0.55rem; border-bottom: 1px solid #1a1e24; }
.tbl.tbl--balls tbody tr:last-child td { border-bottom: none; }
.tbl.tbl--balls .balls { gap: 0.35rem; }

/* Draw cell with tiny logo */
.draw { display: inline-flex; align-items: center; gap: 0.4rem; }
.draw-logo { width: 16px; height: 16px; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sz-accent) 40%, transparent)); border-radius: 50%; }

/* --- Cards & tables --- */
.card { background: #0f1216; border: 1px solid #1a1e24; border-radius: 10px; padding: 0.6rem 0.8rem; }
.card--raised { box-shadow: 0 0 0 2px #12161c, 0 10px 22px rgba(0,0,0,0.45); }
.tbl--balls { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.tbl--balls thead th { font-weight: 700; color: #cfd4dc; }
.tbl--balls td { vertical-align: middle; padding: 0.35rem 0.5rem; }
.tbl--balls .balls { display: flex; gap: 0.45rem; align-items: center; }

/* Hero at the top of the dashboard */
.hero { display: flex; align-items: center; gap: 0.8rem; background: #0c0f13; border: 1px solid #1a1e24; padding: 0.6rem 0.8rem; border-radius: 12px; margin-bottom: 0.8rem; }
.hero__logo { height: 44px; width: auto; filter: drop-shadow(0 1px 1px #000); }
.hero__title { font-weight: 700; letter-spacing: 0.3px; color: #e7fbe4; }

/* Visual latest draw row */
.draw-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.8rem; border: 1px solid #1a1e24; background: #0c0f13; border-radius: 12px; }
.draw-row__meta { font-size: 0.95rem; color: #cdd3db; }
.balls { display: flex; gap: 0.5rem; align-items: center; }
.ball { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #0b1220; font-weight: 700; box-shadow: 0 0 0 1px #c9d2dc, 0 2px 8px rgba(0,0,0,0.25) inset; }
.ball--fb { background: var(--sz-danger); color: #fff; box-shadow: 0 0 0 1px #ff8a8a, 0 2px 8px rgba(0,0,0,0.25) inset; }

/* --- Additional chip variants for accents --- */
.chip--cyan { background: #11242a; color: #c9f7ff; border-color: #1e4954; }
.chip--magenta { background: #261229; color: #ffd6ff; border-color: #4a2750; }
.chip--purple { background: #1b1526; color: #eadbff; border-color: #3a2c5a; }
.chip--amber { background: #2a1f11; color: #ffe6b3; border-color: #5a411e; }

/* --- Hero logo radar sweep (runs once for ~5s, then fades) --- */
.hero__logo-wrap { position: relative; display: inline-block; width: 44px; height: 44px; }
.hero__logo-wrap .hero__logo { height: 44px; width: 44px; object-fit: contain; display: block; }
.hero__logo-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  /* Conic wedge to simulate sweep; masked to ring */
  background: conic-gradient(from 0deg,
    color-mix(in srgb, var(--sz-accent) 65%, transparent) 0deg,
    color-mix(in srgb, var(--sz-accent) 40%, transparent) 18deg,
    transparent 70deg);
  -webkit-mask: radial-gradient(circle 60% at 50% 50%, transparent 55%, #000 56%);
  mask: radial-gradient(circle 60% at 50% 50%, transparent 55%, #000 56%);
  transform-origin: 50% 50%;
  animation: radar-sweep 5s linear 1 forwards;
}
@keyframes radar-sweep {
  0% { transform: rotate(0deg); opacity: 0.85; }
  80% { opacity: 0.35; }
  100% { transform: rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo-wrap::after { animation: none; opacity: 0 !important; }
}

/* --- Chroma grid with center halo --- */
.chroma-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0.8rem 0 1rem; }
.chroma-grid__halo { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sz-accent) 22%, transparent), transparent 60%);
  filter: blur(16px) saturate(120%); opacity: 0.4; }
.chroma-card { position: relative; overflow: hidden; }
.chroma-card__title { font-weight: 700; color: #dfe7ef; margin-bottom: 0.35rem; font-size: 0.95rem; }
.chroma-card__title .icon { width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; color: var(--sz-accent); }
.chroma-card__body { font-size: 0.92rem; }
.chroma-list { list-style: none; padding: 0; margin: 0; }
.chroma-list li { margin: 0.25rem 0; }
.chroma-list a { color: var(--sz-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.chroma-list a:hover { text-decoration: underline; text-shadow: 0 0 6px color-mix(in srgb, var(--sz-accent) 55%, transparent); }
.chroma-list .icon { width: 14px; height: 14px; color: var(--sz-accent); flex: 0 0 auto; }
.icon.icon--sm { width: 14px; height: 14px; }
.sparkline { color: var(--sz-accent); }
.chroma-sparkline { margin-bottom: 0.4rem; }

/* Micro KPI chips row inside cards */
.chroma-metrics { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin-bottom: 0.4rem; }

/* Subtle hover for cards */
.chroma-card { transition: border-color 120ms ease, box-shadow 180ms ease; }
.chroma-card:hover { border-color: color-mix(in srgb, var(--sz-accent) 25%, #1a1e24); box-shadow: 0 0 0 2px #151a21, 0 12px 26px rgba(0,0,0,0.5); }

@media (max-width: 768px) {
  .chroma-grid { grid-template-columns: 1fr; }
  .hero__logo-wrap, .hero__logo-wrap .hero__logo { height: 40px; width: 40px; }
}

/* --- Chroma tabs (page header quick nav) --- */
.chroma-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.8rem; }
.chroma-tab { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; border: 1px solid #1a1e24; border-radius: 9999px; background: #0c0f13; color: #dfe7ef; text-decoration: none; font-weight: 600; box-shadow: 0 1px 0 #0b0d10 inset; }
.chroma-tab:hover { border-color: color-mix(in srgb, var(--sz-accent) 35%, #1a1e24); text-shadow: 0 0 6px color-mix(in srgb, var(--sz-accent) 45%, transparent); }
.chroma-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sz-accent) 40%, transparent); }
.chroma-tab .icon { width: 16px; height: 16px; color: var(--sz-accent); }
.icon.icon--tab { width: 16px; height: 16px; }
.chroma-tab--active { border-color: color-mix(in srgb, var(--sz-accent) 45%, #1a1e24); background: #0f141a; box-shadow: 0 0 0 1px #12161c, 0 0 12px color-mix(in srgb, var(--sz-accent) 20%, transparent); }