/* ==========================================================================
   Design Tokens, Theming, and Base
   ==========================================================================
   - Dark palette is default
   - Use [data-theme="light"|"dark"] to force a theme
   - If no data-theme set, system preference applies
   ========================================================================== */

:root{
  /* Core colors (dark default) */
  --bg: #0e1218;
  --code-text: #cfe1ff;
  --bg-elev: #151922;
  --bg-elev-2: #101521;
  --bg-input: #0f1420;
  --border: #232a3a;
  --text: #e8eaed;
  --text-soft: #cfd3dc;
  --muted: #9aa7bd;
  --brand: #9fb2ff;

  /* Aliases for legacy styles (compat) */
  --panel: var(--bg-elev);
  --line: var(--border);
  --accent: var(--brand);
  --accent-2: color-mix(in srgb, var(--brand), white 25%);
  --danger: #ff5b5b;

  /* Radii, spacing, effects */
  --radius: 12px;
  --radius-sm: 8px;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Explicit light/dark overrides (manual toggle via data-theme) */
:root[data-theme="light"]{
  --bg: #f6f7fb;
  --code-text:#1e3a8a;
  --bg-elev:#ffffff;
  --bg-elev-2:#f2f4f8;
  --bg-input:#ffffff;
  --border:#dfe3ea;
  --text:#0e1116;
  --text-soft:#3b4453;
  --muted:#5d6b7e;
  --brand:#3859ff;

  --panel: var(--bg-elev);
  --line: var(--border);
  --accent: var(--brand);
  --accent-2: color-mix(in srgb, var(--brand), black 25%);
}

/* Auto-theme if no data-theme set */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg: #f6f7fb;
    --code-text:#1e3a8a;
    --bg-elev:#ffffff;
    --bg-elev-2:#f2f4f8;
    --bg-input:#ffffff;
    --border:#dfe3ea;
    --text:#0e1116;
    --text-soft:#3b4453;
    --muted:#5d6b7e;
    --brand:#3859ff;

    --panel: var(--bg-elev);
    --line: var(--border);
    --accent: var(--brand);
    --accent-2: color-mix(in srgb, var(--brand), black 25%);
  }
}

/* Base reset */
*{ box-sizing:border-box; }
html{ height:100%; color-scheme: light dark; }
body{ min-height:100%; margin:0; background:var(--bg); color:var(--text); font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
a:hover{ filter:brightness(1.1); }

/* Content container */
.content{ width:min(1200px, 100%); margin:0 auto; padding: var(--space-4); }

/* Screen reader only */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:static; width:auto; height:auto; padding:.35rem .5rem; background:var(--accent); color:white; border-radius:8px; }

/* Muted text */
.muted{ color:var(--muted); }

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar{
  position:sticky; top:0; z-index:2000;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.5rem 1rem;
  background:var(--bg-elev);
  border-bottom:1px solid var(--line);
}
.topnav{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.sep{ opacity:.55; color:var(--muted); }
.topbar-actions{ display:flex; align-items:center; gap:.6rem; }

/* Linkish buttons/anchors (and the variant used in tables) */
.linkish,
button.linkish{
  background:transparent; border:0; color:var(--accent);
  cursor:pointer; padding:0; font:inherit;
  text-decoration:underline; text-underline-offset:2px;
}
.linkish:hover,
button.linkish:hover{ filter:brightness(1.1); }
.linkish-btn{ background:transparent; border:0; color:var(--accent); cursor:pointer; padding:0; text-decoration:underline; }

/* Focus visible globally */
:where(a, button, input, select, textarea, .linkish, .linkish-btn):focus-visible{
  outline:2px solid var(--accent-2); outline-offset:2px; border-radius:8px;
}

/* High-contrast mode support */
@media (forced-colors: active){
  *{ forced-color-adjust:auto; }
  :where(a, button, input, select, textarea):focus-visible{ outline:2px solid CanvasText; }
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:.9rem;
}
.card-header{ padding:.6rem .9rem; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--panel), white 3%); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-header h3{ margin:.1rem 0; font-size:1rem; }
.card-body{ padding:.75rem .9rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
button, .btn{
  background:var(--bg-elev-2);
  color:var(--text);
  border:1px solid var(--border);
  padding:.45rem .8rem;
  border-radius:var(--radius-sm);
  cursor:pointer;
}
button:hover, .btn:hover{ background: color-mix(in srgb, var(--bg-elev-2), white 7%); }
button:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; }

.btn-primary, button.btn-primary{
  background: var(--brand);
  color: #fff;
  border-color: color-mix(in srgb, var(--brand), black 15%);
}
.btn-primary:hover{ filter:brightness(.98); }

.btn-ghost{ background:transparent; border-color:var(--border); }
button.danger{ background:#2a1111; border-color:#4a2626; color:var(--danger); }
button.danger:hover{ background:#3a1515; }
button.tiny{ font-size:.78rem; padding:.18rem .5rem; border-radius:6px; }

/* ==========================================================================
   Forms  (READABLE in both themes + autofill)
   ========================================================================== */
label{ display:block; color:var(--text-soft); }
input, select, textarea{
  width:100%;
  background:var(--bg-input);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.55rem .65rem;
  line-height:1.25;
}
input::placeholder, textarea::placeholder{ color: color-mix(in srgb, var(--text-soft), transparent 20%); }
input[readonly], textarea[readonly]{ opacity:.9; }

/* Autofill (Chromium/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg-input) inset;
  transition: background-color 100000s ease-in-out 0s;
}

/* Checkboxes & radios keep intrinsic size */
input[type="checkbox"], input[type="radio"]{ width:auto; inline-size:auto; }

/* Range sliders */
input[type="range"]{
  width:100%; appearance:none; height:4px; border-radius:999px;
  background:#1a2233; outline:none; border:0;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:16px; height:16px; border-radius:999px; background:#dfe6ff; border:1px solid #8aa0ff;
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:999px; background:#dfe6ff; border:1px solid #8aa0ff;
}

/* Form groups on login page specifically */
.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="search"],
.form input[type="number"],
.form select,
.form textarea{
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .7rem;
}
.form input::placeholder,
.form textarea::placeholder{ color: var(--text-soft); }

/* ==========================================================================
   Tables & Scroll Areas
   ========================================================================== */
table{ width:100%; border-collapse:collapse; }
th, td{ border-bottom:1px solid var(--line); padding:.5rem .6rem; text-align:left; }
thead th{ color:var(--text-soft); font-weight:600; background: var(--bg-elev-2); }
tr.clickable:hover{ background:#182033; cursor:pointer; }

/* .nice table variant with sticky header (used widely) */
table.nice{ width:100%; border-collapse:collapse; }
table.nice th, table.nice td{ border-bottom:1px solid var(--border); padding:.5rem .6rem; text-align:left; }
table.nice thead th{ position:sticky; top:0; z-index:1; background:var(--bg-elev-2); color:var(--text-soft); }

/* Scroll containers with perf hints */
.scroll, .history-scroll{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  /* Performance: render only what’s needed */
  content-visibility:auto;
  contain-intrinsic-size: 600px 400px;
}

/* Code blocks */
code{
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.05rem .3rem;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color:var(--code-text);
}
pre{
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.6rem;
  overflow:auto;
}

/* Pills (shared) */
.pill{
  display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.75rem; border:1px solid var(--border);
}
.pill.ok, .pill.good{ color:#16c784; background: color-mix(in srgb, #16c784, transparent 85%); border-color: color-mix(in srgb, #16c784, black 65%); }
.pill.bad{ color:#ff5b5b; background: color-mix(in srgb, #ff5b5b, transparent 90%); border-color: color-mix(in srgb, #ff5b5b, black 70%); }
.pill.warn{ color:#d97706; background: color-mix(in srgb, #f59e0b, transparent 85%); border-color: color-mix(in srgb, #f59e0b, black 55%); }

/* Helpers */
.spacer{ flex:1 1 auto; }

/* Scrollbars (WebKit/Chromium) */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-thumb{ background:#283142; border-radius:10px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:#323d53; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ==========================================================================
   Motion & Responsive
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media (max-width:600px){
  .topbar{ padding:.5rem .75rem; }
  .content{ padding:.75rem; }
}