/* ============================================================
   Service Desk Wallboard — admin & auth UI
   Shares the wallboard brand palette (navy / blue, Saira).
   ============================================================ */
:root{
  --bg-0:#04060C; --bg-1:#070C16; --bg-2:#0A111F; --bg-3:#0E1626;
  --brand:#2C77B0; --brand-deep:#1F6297; --brand-bright:#4FA6E6; --navy:#001B3D;
  --ink:#EAF1FA; --ink-dim:#93A6BE; --ink-faint:#5C7188;
  --good:#28D08A; --warn:#FFB638; --bad:#FF5366; --gold:#FFC53D;
  --stroke:rgba(255,255,255,.09);
  --card:rgba(255,255,255,.028); --card-hi:rgba(255,255,255,.05);
  --radius:14px;
  --f:'Saira',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  --f-cond:'Saira Semi Condensed','Saira Condensed',var(--f);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:var(--f);color:var(--ink);font-size:15px;line-height:1.5;
  background:
    radial-gradient(1200px 700px at 50% -16%, rgba(44,119,176,.16), transparent 60%),
    linear-gradient(180deg,#04060C 0%, #070C16 60%, #05080F 100%);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--brand-bright);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:700;letter-spacing:.01em;line-height:1.15}
h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}

/* ---- layout ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px 26px;border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(10,17,31,.9),rgba(7,12,22,.7));
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.topbar .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px}
.topbar .brand .dot{width:11px;height:11px;border-radius:50%;background:var(--brand-bright);
  box-shadow:0 0 12px var(--brand-bright)}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav a{color:var(--ink-dim);padding:8px 14px;border-radius:10px;font-weight:500;font-size:14px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.05);text-decoration:none}
.nav a.active{color:#fff;background:rgba(79,166,230,.16);box-shadow:inset 0 0 0 1px rgba(79,166,230,.4)}
.layout{max-width:1240px;margin:0 auto;padding:28px 26px 80px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.page-head .sub{color:var(--ink-dim);font-size:14px;margin-top:4px;max-width:70ch}

/* ---- cards / grid ---- */
.card{background:linear-gradient(180deg,var(--card-hi),var(--card));
  border:1px solid var(--stroke);border-radius:var(--radius);padding:22px 24px;
  box-shadow:0 18px 44px -30px #000}
.card + .card{margin-top:18px}
.card h2,.card h3{margin-bottom:4px}
.card .hint{color:var(--ink-faint);font-size:13px;margin-bottom:14px}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---- forms ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--ink-dim);font-weight:600;
  letter-spacing:.02em;margin-bottom:7px;text-transform:none}
.field .help{font-size:12.5px;color:var(--ink-faint);margin-top:6px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],select,textarea{
  width:100%;padding:11px 13px;border-radius:10px;font:inherit;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid var(--stroke);outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--brand-bright);
  box-shadow:0 0 0 3px rgba(79,166,230,.18)}
textarea{min-height:96px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:13px}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),
  linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > *{flex:1;min-width:180px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-weight:600;
  padding:11px 18px;border-radius:11px;border:1px solid transparent;transition:.15s;font-size:14px}
.btn-primary{background:linear-gradient(180deg,var(--brand-bright),var(--brand-deep));color:#fff;
  box-shadow:0 10px 24px -12px rgba(79,166,230,.7)}
.btn-primary:hover{filter:brightness(1.07);text-decoration:none}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--stroke)}
.btn-ghost:hover{background:rgba(255,255,255,.1);text-decoration:none}
.btn-danger{background:rgba(255,83,102,.14);color:#FF8A98;border-color:rgba(255,83,102,.4)}
.btn-danger:hover{background:rgba(255,83,102,.22);text-decoration:none}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- tables ---- */
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--stroke)}
table.data th{color:var(--ink-dim);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
table.data tr:hover td{background:rgba(255,255,255,.02)}
table.data td .muted{color:var(--ink-faint);font-size:13px}

/* ---- badges / alerts ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:.04em}
.badge .d{width:7px;height:7px;border-radius:50%}
.badge.good{color:var(--good);background:rgba(40,208,138,.14)}
.badge.good .d{background:var(--good)}
.badge.warn{color:var(--warn);background:rgba(255,182,56,.14)}
.badge.warn .d{background:var(--warn)}
.badge.bad{color:var(--bad);background:rgba(255,83,102,.14)}
.badge.bad .d{background:var(--bad)}
.badge.idle{color:var(--ink-dim);background:rgba(255,255,255,.06)}
.badge.idle .d{background:var(--ink-dim)}
.alert{padding:13px 16px;border-radius:11px;font-size:14px;margin-bottom:18px;border:1px solid}
.alert-success{background:rgba(40,208,138,.1);border-color:rgba(40,208,138,.4);color:#7CE8BE}
.alert-error{background:rgba(255,83,102,.1);border-color:rgba(255,83,102,.4);color:#FF9AA6}
.alert-info{background:rgba(79,166,230,.1);border-color:rgba(79,166,230,.4);color:#A7D4F5}

/* ---- auth ---- */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:100%;max-width:400px}
.auth-card .logo{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:22px;
  font-weight:800;font-size:20px;letter-spacing:.01em}
.auth-card .logo .dot{width:13px;height:13px;border-radius:50%;background:var(--brand-bright);box-shadow:0 0 14px var(--brand-bright)}
.auth-card .eyebrow{text-align:center;color:var(--brand-bright);font-family:var(--f-cond);
  font-weight:600;letter-spacing:.32em;text-transform:uppercase;font-size:12px;margin-bottom:18px}

.mono-block{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:rgba(0,0,0,.35);
  border:1px solid var(--stroke);border-radius:10px;padding:12px 14px;color:var(--ink-dim);
  white-space:pre-wrap;word-break:break-all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px}
.kv dt{color:var(--ink-dim)}
.kv dd{color:var(--ink);text-align:right;word-break:break-word}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.empty{padding:40px;text-align:center;color:var(--ink-faint);border:1px dashed var(--stroke);border-radius:12px}

/* report breakdown bars */
.lb-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--stroke);font-size:14px}
.lb-row:last-child{border-bottom:none}
.lb-bar{flex:1;height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}

/* ============================================================
   Responsive — the admin chrome is desktop-first; below ~960px
   the topbar nav no longer fits on one row, so restack it and
   let the nav scroll horizontally instead of ballooning.
   ============================================================ */
@media (max-width:960px){
  .topbar{flex-wrap:wrap;padding:12px 16px;gap:10px 14px}
  .topbar .brand{font-size:16px}
  /* brand + sign-out share the top row; nav drops to a full-width
     horizontally-scrollable strip below them. */
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:4px;
    padding-bottom:2px;scrollbar-width:none;-ms-overflow-style:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;white-space:nowrap}
  .layout{padding:22px 16px 64px}
  .page-head{flex-direction:column;align-items:stretch;gap:14px}
  .page-head .toolbar{flex-wrap:wrap}
  /* two-column splits stack into one full-width column, and any table
     still wider than its card scrolls inside it instead of widening
     the whole page. */
  .grid.cols-2{grid-template-columns:1fr}
  .card table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:560px){
  h1{font-size:22px}
  .signout-email{display:none}
  .card{padding:18px 16px}
}