/* Zeon Dashboard — Shared UI components.
   Loaded via _head_theme.html on EVERY page, after theme.css (tokens)
   and BEFORE each page's inline <style>, so page-local rules still win
   while pages are being migrated off their local copies.

   This is the single source of truth for base component styling.
   Never redefine these classes in a template — extend with page-scoped
   modifier classes instead. Colors must come from theme.css tokens so
   dark mode works without per-component overrides.

   Class inventory (canonical vocabulary):
     .btn  .btn-primary .btn-secondary .btn-ghost .btn-danger
           .btn-green .btn-amber .btn-sm .btn-xs
     .card .card-head .card-title .card-body
     .page-head
     .chip .chip-success .chip-fail .chip-warn .chip-info .chip-neutral .chip-violet
     .ztable (+ .ztable-wrap)
     .zmodal-overlay .zmodal .zmodal-head .zmodal-body .zmodal-foot .zmodal-close
     .input .select
     .empty-state
     .pg-btn (pager buttons — markup built by static/js/utils/pager.js)
*/

/* ── Typography tokens (families load in _head_theme.html) ─────────── */
:root {
  --font-sans:    'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, Consolas, Menlo, monospace;
  --brand-hover:  #c71325;
  --navy:         #1e293b;
  --navy-hover:   #0f172a;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:8px;font-family:inherit;font-size:.83rem;font-weight:600;cursor:pointer;transition:background .15s,opacity .15s,box-shadow .15s,transform .1s;white-space:nowrap;text-decoration:none;color:var(--text);}
.btn:disabled{opacity:.55;cursor:not-allowed;}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--brand-hover);box-shadow:0 4px 12px rgba(232,25,44,.35);transform:translateY(-1px);}
.btn-secondary{background:var(--navy);color:#fff;}
.btn-secondary:hover:not(:disabled){background:var(--navy-hover);box-shadow:0 4px 12px rgba(15,23,42,.3);transform:translateY(-1px);}
.btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover:not(:disabled){background:var(--surface3);box-shadow:0 2px 8px rgba(0,0,0,.08);transform:translateY(-1px);}
.btn-danger{background:var(--chip-fail-bg);color:var(--status-fail);border:1px solid var(--chip-fail-bg);}
.btn-danger:hover:not(:disabled){filter:brightness(.97);box-shadow:0 2px 8px rgba(220,38,38,.2);transform:translateY(-1px);}
.btn-green{background:var(--chip-success-bg);color:var(--chip-success-fg);border:1px solid var(--chip-success-bg);}
.btn-green:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px);}
.btn-amber{background:var(--chip-warn-bg);color:var(--chip-warn-fg);border:1px solid var(--chip-warn-bg);}
.btn-amber:hover:not(:disabled){filter:brightness(.97);transform:translateY(-1px);}
.btn-sm{padding:5px 11px;font-size:.76rem;}
.btn-xs{padding:3px 8px;font-size:.7rem;}

/* ── Cards ─────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-card);}
.card-head{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-radius:16px 16px 0 0;}
.card-title{font-family:var(--font-display);font-weight:700;font-size:.92rem;}
.card-body{padding:16px 20px;}

/* ── Page header block ─────────────────────────────────────────────── */
.page-head h1{font-family:var(--font-display);font-size:1.2rem;font-weight:700;}
.page-head p{font-size:.8rem;color:var(--text3);margin-top:3px;}

/* ── Chips / status badges ─────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.chip-success{background:var(--chip-success-bg);color:var(--chip-success-fg);}
.chip-fail{background:var(--chip-fail-bg);color:var(--chip-fail-fg);}
.chip-warn{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}
.chip-info{background:var(--chip-info-bg);color:var(--chip-info-fg);}
.chip-neutral{background:var(--chip-neutral-bg);color:var(--chip-neutral-fg);}
.chip-violet{background:var(--chip-violet-bg);color:var(--chip-violet-fg);}

/* ── Tables ────────────────────────────────────────────────────────── */
.ztable-wrap{overflow-x:auto;}
.ztable{width:100%;border-collapse:collapse;font-size:.82rem;}
.ztable thead th{text-align:left;padding:10px 14px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);background:var(--surface2);border-bottom:1px solid var(--border);white-space:nowrap;}
.ztable tbody td{padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;}
.ztable tbody tr:nth-child(even){background:var(--zebra);}
.ztable tbody tr:hover{background:var(--surface3);}

/* ── Modal (canonical; helper in static/js/utils/ui.js) ───────────── */
.zmodal-overlay{position:fixed;inset:0;background:rgba(10,12,20,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.zmodal{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;}
.zmodal-head{padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.zmodal-head h3{font-family:var(--font-display);font-size:.98rem;font-weight:700;margin:0;}
.zmodal-body{padding:16px 20px;overflow-y:auto;font-size:.85rem;color:var(--text2);}
.zmodal-foot{padding:13px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:var(--surface2);}
.zmodal-close{background:none;border:none;font-size:1.1rem;color:var(--text3);cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1;}
.zmodal-close:hover{background:var(--surface3);color:var(--text);}

/* ── Shared admin navbar (markup: templates/_nav.html) ─────────────── */
/* height:auto + flex-wrap at ALL widths: wrapping is inert while a single
   row fits (min-height keeps the 56px desktop look), but pages with extra
   nav items (billing's KPI pills) or narrow viewports grow a second row
   instead of forcing horizontal page scroll. */
.znav{background:linear-gradient(90deg,#0d1421 0%,#111827 60%,#1a2235 100%);padding:8px 32px;min-height:56px;height:auto;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:4px;box-shadow:0 2px 12px rgba(0,0,0,.18);}
.znav-brand{display:flex;align-items:center;gap:12px;}
.znav-brand img{height:28px;}
.znav-title{color:#fff;font-family:var(--font-display);font-size:.9rem;font-weight:600;}
.znav-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;row-gap:4px;}
.znav-link{color:#8891a8;text-decoration:none;font-size:.8rem;padding:5px 10px;border-radius:5px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:inherit;}
.znav-link:hover{color:#fff;border-color:#374151;}
.znav-link.active{color:#fff;border-color:var(--brand);background:rgba(232,25,44,.15);}
.znav-roleswitch,.znav-signout{display:inline;}
.znav-roleswitch select{background:#1a1d2e;color:#fbbf24;border:1px solid #374151;border-radius:5px;font-family:inherit;font-size:.76rem;padding:4px 8px;cursor:pointer;}
.znav-gearwrap{position:relative;display:inline-block;}
.znav-chev{font-size:.55rem;opacity:.7;margin-left:3px;}
.znav-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:#1a1d2e;border:1px solid #374151;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:10000;display:none;padding:6px;}
.znav-dropdown.open{display:block;}
.znav-dd-title{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;padding:8px 10px 4px;}
.znav-dd-item{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:7px 10px;border:none;background:none;border-radius:6px;color:#cbd5e1;font-family:inherit;font-size:.78rem;text-align:left;text-decoration:none;cursor:pointer;}
.znav-dd-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.znav-dd-themes{display:flex;gap:6px;padding:4px 10px 8px;}
.znav-theme-btn{flex:1;padding:5px 0;border:1px solid #374151;border-radius:6px;background:var(--surface2);color:var(--text2);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;}

/* ── Form controls ─────────────────────────────────────────────────── */
.input,.select{padding:8px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:.84rem;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s;}
.input:focus,.select:focus{border-color:var(--border-strong);}

/* ── Empty state ───────────────────────────────────────────────────── */
.empty-state{padding:36px 20px;text-align:center;color:var(--text3);font-size:.85rem;}

/* ── Mobile (≤760px): product-wide responsive guards ───────────────── */
/* Found by the 2026-07-19 phone/tablet audit (390x844 / 768x1024):     */
/* the navbar's intrinsic width (~767px) forced page-level horizontal    */
/* scroll on every admin page and made the gear menu unreachable, and    */
/* legacy unwrapped <table>s (ftp, billing, tickets, requester portal,   */
/* dashboard modals, permissions matrix) clipped or overflowed pages.    */
@media (max-width: 760px) {
  .znav{padding:8px 12px;}
  .znav-dropdown{max-width:calc(100vw - 24px);}
  /* Every data table becomes its own horizontal scroll container —      */
  /* fixes ALL unwrapped legacy tables in one rule, and works even       */
  /* inside overflow:hidden cards (the table itself scrolls).           */
  table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
}

/* Touch devices: bring small controls up to a usable finger target
   (~36px). pointer:coarse limits this to real touchscreens — desktop
   densities are untouched. Found by the 2026-07-20 mobile audit (dense
   admin tables shipped 24-28px buttons). */
@media (pointer: coarse) {
  .btn-xs,.btn-sm,.icon-btn,.iconbtn,.pg-btn,.zmodal-close,.filter-pill{min-height:36px;min-width:36px;}
  .znav-link{padding:8px 12px;}
  .znav-dd-item{padding:10px 12px;}
}

/* ── Pager (markup from static/js/utils/pager.js) ─────────────────── */
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text1);font-family:inherit;font-size:.78rem;cursor:pointer;transition:all .12s;}
.pg-btn:hover:not(:disabled):not(.active){background:var(--surface3);}
.pg-btn.active{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(232,25,44,.25);}
.pg-btn:disabled{opacity:.4;cursor:not-allowed;}