/* ============================================================================
   Loxodon Admin — admin.css   ·   PGX "Meridian" design language
   ----------------------------------------------------------------------------
   Drop-in replacement for  loxodon-batch/admin/static/admin.css

   Re-skins the existing FastAPI/Starlette + Jinja2 admin (currently Pico CSS)
   onto the PGX Meridian system WITHOUT touching any template. It styles the
   semantic elements and the exact Pico utility classes the templates already
   use, so it can fully REPLACE Pico — link only this file from base.html.

   Loxodon keeps its own product identity (the "Loxodon" wordmark in the rail
   and the login logo); Meridian supplies the colour, type, spacing and
   component language.

   Classes / hooks covered (from the templates):
     layout    main.container, nav>ul>li, a[aria-current=page], strong (brand)
     feedback  .flash / .flash-error|info|success|warning
     data      table/thead/tbody/th/td, code, pre, pre.report-body, #token-block
     forms     form, label, input[text|email|password|file|checkbox], button,
               button.secondary[.outline], button.contrast[.outline],
               a[role=button], details/summary
     status    .severity-ok|info|low|warning|medium|high|critical
     special   .login-logo, .danger-zone, .danger-form, header, section
   ----------------------------------------------------------------------------
   PRODUCTION: host the Satoshi web fonts in static/ and point the @font-face
   url()s at them (the PGX site already ships Satoshi-Variable.woff2). If you
   prefer not to add fonts, delete the @font-face blocks — the stack falls back
   to the system sans cleanly.
   ============================================================================ */

/* ---- Fonts (point at your served static paths) ---------------------------- */
@font-face{font-family:'Satoshi';src:url('/static/fonts/Satoshi-Variable.woff2') format('woff2'),url('/static/fonts/Satoshi-Variable.woff') format('woff');font-weight:300 900;font-style:normal;font-display:swap;}
/* Real italic face — the admin uses <em> throughout (empty states, notices),
   so this renders true Satoshi italics instead of a browser-synthesised
   oblique. woff2 primary, woff fallback, same 300–900 variable range. */
@font-face{font-family:'Satoshi';src:url('/static/fonts/Satoshi-VariableItalic.woff2') format('woff2'),url('/static/fonts/Satoshi-VariableItalic.woff') format('woff');font-weight:300 900;font-style:italic;font-display:swap;}

/* ---- Tokens (Meridian) ---------------------------------------------------- */
:root{
  --ink:#16202E; --midnight:#0E2440;
  --blue:#1B73E8; --blue-hover:#1561C2; --blue-tint:#8FBEF6;
  --blue-wash:#F4F7FC; --blue-line:#D6E4FB;
  --g0:#FFFFFF; --g25:#FBFBFC; --g50:#F5F6F8; --g100:#ECEEF1; --g200:#E2E5E9;
  --g300:#CBD0D7; --g400:#AAB2BD; --g500:#8A929E; --g600:#5F6B7A; --g700:#3A4350;
  --success:#1E874B; --success-bg:#E9F5EE;
  --warning:#B25E00; --warning-bg:#FBF0E2;
  --danger:#C53A2E;  --danger-bg:#FBECEA;

  --radius:6px; --radius-sm:3px;
  --border:1px solid var(--g200);
  --ring:0 0 0 3px rgba(27,115,232,.30);
  --shadow-sm:0 1px 2px rgba(22,32,46,.06);
  --shadow:0 1px 3px rgba(22,32,46,.10),0 1px 2px rgba(22,32,46,.06);
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---- Base ----------------------------------------------------------------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--g25); color:var(--g700);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); letter-spacing:-.01em; line-height:1.2; margin:0 0 .5em;}
h1{font-size:30px;font-weight:700;letter-spacing:-.02em;}
h2{font-size:23px;font-weight:700;}
h3{font-size:18px;font-weight:700;margin-top:1.8em;}
h4{font-size:15px;font-weight:700;}
p{margin:0 0 1em;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-hover);text-decoration:underline;}
small{font-size:12.5px;color:var(--g500);}
hr{border:none;border-top:var(--border);margin:1.5em 0;}
code{font-family:var(--mono);font-size:.88em;background:var(--g100);border-radius:var(--radius-sm);padding:1px 6px;color:var(--ink);}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-sm);}

/* ---- App container -------------------------------------------------------- */
main.container{
  max-width:1080px; margin:0 auto; padding:0 24px 64px;
}

/* ---- Top-bar navigation --------------------------------------------------- */
nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:0 -24px 32px; padding:0 24px; height:60px;
  background:var(--g0); border-bottom:var(--border);
  position:sticky; top:0; z-index:20;
}
nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
nav li{display:flex;align-items:center;}
nav ul:first-child strong{
  font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.01em; padding-right:8px;
}
nav a{
  color:var(--g700); font-size:14px; font-weight:500;
  padding:8px 12px; border-radius:var(--radius-sm); text-decoration:none;
  border-bottom:2px solid transparent;
}
nav a:hover{background:var(--g50);color:var(--ink);text-decoration:none;}
nav a[aria-current="page"]{color:var(--blue);font-weight:600;}
nav form{margin:0;}

/* ---- Flash messages ------------------------------------------------------- */
.flash{
  border:var(--border); border-radius:var(--radius); padding:12px 15px;
  margin:0 0 20px; font-size:14px; line-height:1.5;
}
.flash-info{background:var(--blue-wash);border-color:var(--blue-line);color:var(--ink);}
.flash-success{background:var(--success-bg);border-color:#BFE3CD;color:var(--ink);}
.flash-warning{background:var(--warning-bg);border-color:#F0D8B5;color:var(--ink);}
.flash-error{background:var(--danger-bg);border-color:#F0C8C3;color:var(--ink);}

/* ---- Tables --------------------------------------------------------------- */
table{
  width:100%; border-collapse:collapse; margin:0 0 24px;
  background:var(--g0); border:var(--border); border-radius:var(--radius);
  overflow:hidden; font-size:14px;
}
thead th{
  text-align:left; padding:11px 14px; background:var(--g25);
  border-bottom:var(--border);
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--g500);
  white-space:nowrap;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--g100);color:var(--g700);vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--g25);}
td code{font-size:12.5px;}

/* ---- Forms ---------------------------------------------------------------- */
form{margin:0 0 24px;}
label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 16px;}
label input,label select,label textarea{margin-top:6px;font-weight:400;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=file],select,textarea{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  width:100%; max-width:440px; padding:9px 12px;
  background:var(--g0); border:1px solid var(--g300); border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:var(--g400);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring);}
input[type=checkbox],input[type=radio]{accent-color:var(--blue);width:17px;height:17px;max-width:none;width:17px;vertical-align:-3px;margin-right:6px;}
label:has(input[type=checkbox]){display:flex;align-items:center;font-weight:500;}

/* ---- Buttons -------------------------------------------------------------- */
button,a[role="button"],input[type=submit]{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--sans); font-size:14px; font-weight:600; line-height:1;
  padding:10px 16px; border-radius:var(--radius); border:1px solid transparent;
  background:var(--blue); color:#fff; cursor:pointer; text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
button:hover,a[role="button"]:hover,input[type=submit]:hover{background:var(--blue-hover);color:#fff;text-decoration:none;}
button:focus-visible,a[role="button"]:focus-visible{box-shadow:var(--ring);}
button:disabled{opacity:.45;cursor:not-allowed;}

/* variant: secondary (neutral) */
button.secondary{background:var(--g0);color:var(--ink);border-color:var(--g300);}
button.secondary:hover{background:var(--g50);color:var(--ink);}
/* variant: contrast (ink/dark) — used for Revoke / Delete actions */
button.contrast,a[role="button"].contrast{background:var(--ink);color:#fff;border-color:var(--ink);}
button.contrast:hover{background:var(--midnight);color:#fff;}
/* modifier: outline */
button.outline,a[role="button"].outline{background:transparent;}
button.secondary.outline{color:var(--g700);border-color:var(--g300);}
button.secondary.outline:hover{background:var(--g50);}
button.contrast.outline{color:var(--ink);border-color:var(--g300);background:transparent;}
button.contrast.outline:hover{background:var(--g50);color:var(--ink);}

/* ---- Status / severity badges -------------------------------------------- */
/* The analyzer emits ok|warning|critical (a report's severity) and
   info|warning|critical (a finding's) — see analysis/analyze.py. ok / info /
   warning MUST be styled or they render as bare text (the base Meridian
   bundle shipped a generic low/medium/high scale and missed them). low /
   medium / high are kept for the templates' (severity, 'low') fallback and
   any legacy values. Colours mirror the prior sheet: ok/low green,
   warning/medium amber, high orange, critical red, info azure. */
.severity-ok,.severity-info,.severity-low,.severity-warning,.severity-medium,.severity-high,.severity-critical{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; line-height:1.4;
}
.severity-ok,.severity-low{background:var(--success-bg);color:var(--success);}
.severity-info{background:var(--blue-wash);color:var(--blue);}
.severity-warning,.severity-medium{background:var(--warning-bg);color:var(--warning);}
.severity-high{background:#FBE3D6;color:#9A3B12;}
.severity-critical{background:var(--danger-bg);color:var(--danger);}

/* ---- Code / preformatted -------------------------------------------------- */
pre{
  font-family:var(--mono); font-size:13px; line-height:1.6;
  background:var(--ink); color:#dbe6f5; border-radius:var(--radius);
  padding:16px 18px; overflow:auto; margin:0 0 16px;
}
pre code{background:none;padding:0;color:inherit;font-size:inherit;}
#token-block{border:1px solid var(--blue-line);background:var(--midnight);color:#8FBEF6;word-break:break-all;white-space:pre-wrap;}
pre.report-body{
  background:var(--g0); color:var(--g700); border:var(--border);
  white-space:pre-wrap; word-wrap:break-word; line-height:1.7; font-size:13.5px;
}

/* ---- details / summary ---------------------------------------------------- */
details{border:var(--border);border-radius:var(--radius);background:var(--g0);padding:0 16px;margin:0 0 16px;}
summary{cursor:pointer;font-weight:600;color:var(--ink);padding:12px 0;font-size:14px;}
details[open] summary{border-bottom:var(--border);margin-bottom:12px;}

/* ---- header / section blocks --------------------------------------------- */
header{margin-bottom:20px;}
header p{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--g600);align-items:center;}
section{margin-bottom:32px;}

/* ---- Login ---------------------------------------------------------------- */
/* base.html suppresses the nav pre-login, so the lone <article> centers. */
body:has(.login-logo) main.container{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
}
article{
  background:var(--g0); border:var(--border); border-radius:10px;
  box-shadow:var(--shadow); padding:34px 36px; margin:32px 0;
}
.login-logo{display:block;height:48px;width:auto;margin:0 0 22px;}
article:has(.login-logo){width:100%;max-width:400px;margin:0;}
article .login-logo + h2{margin-top:0;}

/* ---- Danger zone ---------------------------------------------------------- */
.danger-zone{color:var(--danger);border-top:1px solid var(--danger-bg);padding-top:16px;margin-top:48px;}
.danger-form{
  border:1px solid #F0C8C3; background:var(--danger-bg);
  border-radius:var(--radius); padding:20px 22px; max-width:560px;
}
.danger-form p{font-size:13.5px;color:#7a4a44;}
.danger-form button[type=submit],.danger-form button.contrast{background:var(--danger);border-color:var(--danger);color:#fff;}
.danger-form button[type=submit]:hover,.danger-form button.contrast:hover{background:#a82f25;}

/* ---- Misc ----------------------------------------------------------------- */
ul:not(nav ul){padding-left:1.2em;}
li{margin-bottom:4px;}
[hidden]{display:none !important;}

/* ============================================================================
   Loxodon-specific hooks the base Meridian bundle didn't cover.
   The bundle was written assuming a Pico CSS base; the admin actually shipped a
   custom sheet, and a few templates use hooks the bundle's selector list missed.
   These rules keep the re-skin complete (nothing renders unstyled) and stay in
   Meridian's token language.
   ============================================================================ */

/* Failed-analysis block — browser/report.html renders
   <section class="error"> (an <h2>Analysis failed</h2> + a <pre> traceback).
   Mirror .flash-error so a failed report reads as an error at a glance. */
section.error{
  border:1px solid #F0C8C3; border-left:4px solid var(--danger);
  background:var(--danger-bg); border-radius:var(--radius);
  padding:16px 18px; margin:24px 0;
}
section.error h2{color:var(--danger);margin-top:0;}

/* Activation-link block — user_activation_issued.html renders
   <pre id="activation-block"> with a copy button, exactly like #token-block.
   Give it the same midnight/azure treatment for visual consistency. */
#activation-block{
  border:1px solid var(--blue-line); background:var(--midnight); color:#8FBEF6;
  word-break:break-all; white-space:pre-wrap;
}

/* Note: user_detail.html uses <div class="grid">, but the previous sheet never
   defined .grid either, so it has always rendered as a plain block. Left
   unstyled here to preserve existing behaviour — a real two-column layout
   would be a separate, intentional change. */