/**
 * @file web/src/global.css
 * @description Global CSS with design tokens, base reset, background effects, and shared styles.
 * 📖 Contains all CSS custom properties (--color-*, --font-*, --radius-*, etc.),
 * light theme overrides, reset rules, background grid/glow effects,
 * app-content layout, view visibility, scrollbar, and responsive breakpoints.
 */

/* ─── CSS Custom Properties (Design Tokens) ─── */
:root {
  --color-brand:        #c0f20c;
  --color-bg:           #050505;
  --color-bg-elevated:  #090a09;
  --color-bg-card:      #080908;
  --color-bg-hover:     #121512;
  --color-bg-active:    #181d18;
  --color-surface:      #0d100d;
  --color-border:       #161a16;
  --color-border-hover: #2e3b2e;

  --color-text:         #ffffff;
  --color-text-muted:   #8fa08f;
  --color-text-dim:     #455245;

  --color-accent:       #c0f20c;
  --color-accent-hover: #d2ff2b;
  --color-accent-glow:  rgba(192, 242, 12, 0.15);
  --color-accent-dim:   rgba(192, 242, 12, 0.08);

  --color-danger:       #ff4444;
  --color-danger-dim:   rgba(255, 68, 68, 0.1);
  --color-warning:      #ffaa00;
  --color-warning-dim:  rgba(255, 170, 0, 0.1);
  --color-success:      #00ff88;
  --color-success-dim:  rgba(0, 255, 136, 0.1);
  --color-info:         #06b6d4;
  --color-info-dim:     rgba(6, 182, 212, 0.1);

  --tier-splus:  #ffd700;
  --tier-s:      #ff8c00;
  --tier-aplus:  #00c8ff;
  --tier-a:      #3ddc84;
  --tier-aminus: #7ecf7e;
  --tier-bplus:  #a8a8c8;
  --tier-b:      #808098;
  --tier-c:      #606078;

  --verdict-perfect:    #00ff88;
  --verdict-normal:     #76b900;
  --verdict-slow:       #ffaa00;
  --verdict-spiky:      #ff6600;
  --verdict-veryslow:   #ff4444;
  --verdict-overloaded: #ff2222;
  --verdict-unstable:   #cc0000;
  --verdict-notactive:  #555570;
  --verdict-pending:    #444460;

  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --header-h: 60px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;

  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --shadow-glow: none;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-medium: 250ms var(--ease-out);
  --transition-slow: 400ms var(--ease-out);
}

/* ─── Light Theme ─── */
[data-theme="light"] {
  --color-bg:           #ffffff;
  --color-bg-elevated:  #ffffff;
  --color-bg-card:      #ffffff;
  --color-bg-hover:     #fafafa;
  --color-bg-active:    #f0f0f0;
  --color-surface:      #fafafa;
  --color-border:       #eaeaea;
  --color-border-hover: #d5d5d5;
  --color-text:         #000000;
  --color-text-muted:   #666666;
  --color-text-dim:     #999999;
  --color-accent:       #000000;
  --color-accent-hover: #333333;
  --color-accent-glow:  rgba(0, 0, 0, 0.05);
  --color-accent-dim:   rgba(0, 0, 0, 0.02);

  /* 📖 Bright neon colors that look great on black become unreadable on white.
     📖 We swap them for darker, AA-contrast equivalents in light mode. The
     📖 hex values are picked to stay visually similar to the dark variant
     📖 (still "green" / "cyan" / "gold") while passing WCAG AA on #fff. */
  --color-success:      #008f4d;     /* was #00ff88 (neon) */
  --color-warning:      #b86b00;     /* was #ffaa00 (neon amber) */
  --color-danger:       #c8143a;     /* was #ff4444 (neon red) */
  --color-info:         #0e7490;     /* was #06b6d4 (neon cyan) */
  --color-danger-dim:   rgba(200, 20, 58, 0.08);
  --color-warning-dim:  rgba(184, 107, 0, 0.08);
  --color-success-dim:  rgba(0, 143, 77, 0.08);
  --color-info-dim:     rgba(14, 116, 144, 0.08);

  /* 📖 Tier + verdict palette: shift toward darker, more saturated variants
     📖 so badges stay legible on white. The original "neon" feel is dropped
     📖 in favor of "saturated-but-deep" colors that pass contrast. */
  --tier-splus:  #b08800;     /* was #ffd700 (gold) */
  --tier-s:      #c45a00;     /* was #ff8c00 (dark orange) */
  --tier-aplus:  #0073a8;     /* was #00c8ff (neon cyan) */
  --tier-a:      #1f7a3e;     /* was #3ddc84 (mid green) */
  --tier-aminus: #2f7a2f;     /* was #7ecf7e (light green) */
  --tier-bplus:  #5a5a8a;     /* was #a8a8c8 (lavender) */
  --tier-b:      #555566;     /* was #808098 (gray-blue) */
  --tier-c:      #6a6a7a;     /* was #606078 (slate) */

  --verdict-perfect:    #008f4d;     /* was #00ff88 */
  --verdict-normal:     #4a7a00;     /* was #76b900 */
  --verdict-slow:       #b86b00;     /* was #ffaa00 */
  --verdict-spiky:      #c45000;     /* was #ff6600 */
  --verdict-veryslow:   #c8143a;     /* was #ff4444 */
  --verdict-overloaded: #b8101f;     /* was #ff2222 */
  --verdict-unstable:   #990000;     /* was #cc0000 */
  --verdict-notactive:  #6a6a7a;     /* was #555570 */
  --verdict-pending:    #6a6a8a;     /* was #444460 */

  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* 📖 M5: Global :focus-visible outline for keyboard navigation (a11y).
   📖 Only shows for keyboard users, not mouse clicks. Uses the accent color
   📖 with a subtle glow ring so focus is always visible but not jarring. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 📖 Remove default browser :focus ring — we only want :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* 📖 Inputs keep their own focus styling via component CSS, but keyboard
   📖 users still see the global ring as a fallback safety net. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }
code { font-family: var(--font-mono); font-size: 14px; background: var(--color-surface); padding: 2px 6px; border-radius: 4px; }

/* ─── Background Effects ─── */
[data-theme="light"] .app-shell {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}
[data-theme="light"] .app-shell::before {
  background: radial-gradient(circle, rgba(0, 143, 77, 0.03) 0%, transparent 70%);
}

/* ─── App Layout ─── */
.app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
  /* background grid effect */
  background-image: 
    linear-gradient(rgba(192, 242, 12, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 242, 12, 0.012) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: center top;
}

.app-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(192, 242, 12, 0.03) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.app-content {
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 📖 Dashboard-only: bound the main box to the viewport height (minus the
   📖 global header) so the model table scrolls INTERNALLY inside .scrollInner
   📖 instead of growing the whole page. That internal scroll is what lets the
   📖 green <thead> header be position:sticky and stay pinned while you scroll
   📖 190+ model rows. Scoped to the dashboard only (main.dashboardView has
   📖 higher specificity than the shared .view rule, so flex:none + the capped
   📖 height reliably win). Settings / Analytics / Playground keep their layout. */
main.dashboardView {
  flex: none;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 0;
  overflow: hidden;
}

.update-warning-banner {
  position: sticky;
  top: var(--header-h, 60px);
  z-index: 90;
  padding: 10px 18px;
  background: var(--color-danger);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }
::-webkit-scrollbar-corner { background: var(--color-bg); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  /* 📖 No sidebar to collapse on small viewports — the header itself collapses
     📖 (see Header.module.css). The model table keeps its 100% width. */
}

/* ─── Full-page horizontal/vertical scroll layout ─── */
.app-content {
  flex: 1;
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
}

.view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}