/* ==========================================================================
   Design Tokens, Theming, and Base
   ==========================================================================
   - :root holds the dark palette; [data-theme="light"] overrides it
   - _head.ejs always sets data-theme before paint: the saved choice, otherwise
     the system preference (prefers-color-scheme)
   - Status colours (--ok, --warn, --danger, --info) are per theme; soft
     backgrounds are derived with color-mix so pages never hard-code colours
   ========================================================================== */

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

  /* Status */
  --ok: #16c784;
  --warn: #f59e0b;
  --danger: #ff6b6b;
  --info: #60a5fa;

  /* Controls */
  --row-hover: color-mix(in srgb, var(--brand), transparent 90%);
  --range-track: #2a3347;
  --range-thumb: #dfe6ff;
  --scroll-thumb: #283142;
  --backdrop: rgba(0,0,0,.55);

  /* 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%);

  /* 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);
}

:root[data-theme="light"]{
  --bg: #f6f7fb;
  --code-text:#1e3a8a;
  --bg-elev:#ffffff;
  --bg-elev-2:#f2f4f8;
  --bg-input:#ffffff;
  --border:#dfe3ea;
  --border-strong:#b8c0ce;
  --text:#0e1116;
  --text-soft:#3b4453;
  --muted:#5d6b7e;
  --brand:#3859ff;
  --on-brand:#ffffff;

  --ok: #047857;
  --warn: #b45309;
  --danger: #c81e1e;
  --info: #1d4ed8;

  --range-track: #d5dbe6;
  --range-thumb: #ffffff;
  --scroll-thumb: #c4cbd8;
  --backdrop: rgba(15,23,42,.45);
  --shadow: 0 6px 18px rgba(15,23,42,.08);

  --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; }

/* The hidden attribute always wins over a class's display value */
[hidden]{ display:none !important; }

/* 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);
}
.topbar-start{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; min-width:0; }
.brand{ font-weight:700; color:var(--text); text-decoration:none; white-space:nowrap; letter-spacing:.01em; }
.brand:hover{ filter:none; color:var(--brand); }
.topnav{ display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; }
.topnav .linkish{
  color:var(--text-soft); text-decoration:none; padding:.3rem .6rem; border-radius:var(--radius-sm); white-space:nowrap;
}
.topnav .linkish:hover{ background:var(--bg-elev-2); color:var(--text); filter:none; }
.topnav .linkish[aria-current="page"]{
  color:var(--brand); font-weight:600; background:color-mix(in srgb, var(--brand), transparent 88%);
}
.sep{ opacity:.55; color:var(--muted); }
.topbar-actions{ display:flex; align-items:center; gap:.6rem; white-space:nowrap; }
.topbar-actions form{ margin:0; }
.topbar-actions .linkish{ color:var(--text-soft); }

/* 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:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--bg-elev-2); }
.card-header h2{ margin:.1rem 0; font-size:1.05rem; }
.card-header h3{ margin:.1rem 0; font-size:1rem; }
/* A card built from header + body sections carries its padding in those sections */
.card:has(> .card-header){ padding:0; overflow:hidden; }
.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; }
a.btn{ display:inline-block; text-decoration:none; color:var(--text); }
a.btn:hover{ filter:none; }

.btn-primary, button.btn-primary{
  background: var(--brand);
  color: var(--on-brand);
  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, .btn-danger, button.btn-danger{
  background:color-mix(in srgb, var(--danger), transparent 90%);
  border-color:color-mix(in srgb, var(--danger), transparent 55%);
  color:var(--danger);
}
button.danger:hover, .btn-danger:hover{ background:color-mix(in srgb, var(--danger), transparent 80%); }
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, button, select, textarea{ font:inherit; }
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:var(--range-track); outline:none; border:0; padding:0;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:16px; height:16px; border-radius:999px; background:var(--range-thumb); border:2px solid var(--brand);
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:999px; background:var(--range-thumb); border:2px solid var(--brand);
}

/* 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:var(--row-hover); 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;
}

/* 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, .pill.completed{ color:var(--ok); background:color-mix(in srgb, var(--ok), transparent 88%); border-color:color-mix(in srgb, var(--ok), transparent 55%); }
.pill.bad, .pill.failed{ color:var(--danger); background:color-mix(in srgb, var(--danger), transparent 90%); border-color:color-mix(in srgb, var(--danger), transparent 55%); }
.pill.warn{ color:var(--warn); background:color-mix(in srgb, var(--warn), transparent 88%); border-color:color-mix(in srgb, var(--warn), transparent 50%); }
.pill.info, .pill.updating{ color:var(--info); background:color-mix(in srgb, var(--info), transparent 88%); border-color:color-mix(in srgb, var(--info), transparent 55%); }

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

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

/* ==========================================================================
   Shared page pieces
   ========================================================================== */
.meta{ color:var(--muted); font-size:.9rem; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:.25rem 0 1rem; }
.page-head > div:first-child{ min-width:0; }
.page-title{ margin:0; font-size:1.45rem; line-height:1.25; }
.page-sub{ margin:.2rem 0 0; color:var(--muted); }
.page-actions{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.toolbar{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.kv{ display:grid; grid-template-columns:160px 1fr; gap:.25rem .6rem; margin:.5rem 0; }
.kv .k{ color:var(--muted); }
.empty-state{ color:var(--muted); text-align:center; padding:1.25rem 1rem; border:1px dashed var(--border); border-radius:var(--radius); }
.empty-state strong{ display:block; color:var(--text-soft); margin-bottom:.2rem; }

.alert{ padding:.7rem .8rem; border-radius:10px; margin-bottom:1rem; border:1px solid var(--border); }
.alert.success{ color:var(--ok); background:color-mix(in srgb, var(--ok), transparent 88%); border-color:color-mix(in srgb, var(--ok), transparent 55%); }
.alert.error{ color:var(--danger); background:color-mix(in srgb, var(--danger), transparent 90%); border-color:color-mix(in srgb, var(--danger), transparent 55%); }
.alert.info{ color:var(--info); background:color-mix(in srgb, var(--info), transparent 88%); border-color:color-mix(in srgb, var(--info), transparent 55%); }
.text-ok{ color:var(--ok); } .text-bad{ color:var(--danger); } .text-warn{ color:var(--warn); }

/* Inline result next to a save button: persistent until the next action */
.save-status{ margin-left:.5rem; font-size:.9rem; color:var(--muted); }
.save-status.ok{ color:var(--ok); } .save-status.err{ color:var(--danger); }

/* Danger zone (destructive actions grouped and set apart) */
.danger-zone{ border:1px solid color-mix(in srgb, var(--danger), transparent 60%); border-radius:var(--radius); padding:.75rem .9rem; }
.danger-zone h4{ margin:0 0 .5rem; color:var(--danger); font-size:.95rem; }

/* Toasts (notify() in shared-utils.js) */
.toast-region{ position:fixed; right:1rem; bottom:1rem; z-index:12000; display:flex; flex-direction:column; gap:.5rem; max-width:min(420px, calc(100vw - 2rem)); }
.toast{ background:var(--bg-elev); color:var(--text); border:1px solid var(--border); border-left:4px solid var(--info); border-radius:10px; padding:.6rem .8rem; box-shadow:var(--shadow); }
.toast.ok{ border-left-color:var(--ok); } .toast.error{ border-left-color:var(--danger); } .toast.warn{ border-left-color:var(--warn); }

/* ==========================================================================
   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:900px){
  .brand{ display:none; }
  .topnav .linkish{ padding:.25rem .45rem; }
}
@media (max-width:600px){
  .topbar{ padding:.5rem .75rem; }
  .content{ padding:.75rem; }
}