/* ══════════════════════════════════════════════════════════════════════════
   APB STEELWORKS  ·  Shared Design System
   Engineering Blueprint × Brushed Stainless × Goodwin Gray
   ──────────────────────────────────────────────────────────────────────────
   Link this LAST in each page <head> (after the page's inline <style>) so it
   re-skins the shared component vocabulary without touching page logic:
     <link rel="stylesheet" href="apb-theme.css">
   ────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── 1 · TOKEN OVERRIDES ──────────────────────────────────────────────────
   Every component reads these via var(), so recoloring here cascades platform-wide. */
:root{
  /* Goodwin / whisper gray field — Nate's fleet color */
  --field:#D4D7D2;
  --bg:#D4D7D2;
  /* brushed-steel surfaces */
  --panel:#F6F7F5;
  --panel-2:#E9EBE7;
  --steel-hi:#FFFFFF;
  --steel-lo:#E4E6E2;
  --steel-edge:#C1C5BF;

  /* charcoal ink */
  --ink:#161A1C;
  --ink-2:#3C4449;
  --ink-3:#6B7479;

  /* hairline technical rules */
  --line:#BCC0BA;
  --line-2:#CDD1CB;

  /* blueprint ink accent */
  --accent:#0E6E8C;
  --accent-2:#0A5066;
  --accent-soft:#DFEDF1;
  --blueprint:#0E6E8C;
  --cyan:#19A6C0;

  /* industrial semantics */
  --green:#0F7A52;--green-soft:#DEF0E7;
  --amber:#A86A12;--amber-soft:#F6EAD6;
  --orange:#B5531C;--orange-soft:#F8E6D8;
  --red:#B23129;--red-soft:#F6E0DD;
  --purple:#5C4A8F;--purple-soft:#E9E5F3;
  --teal:#0A6E78;--teal-soft:#DCEFF0;
  --gray-soft:#E3E5E1;

  --mono:"JetBrains Mono",ui-monospace,"DM Mono",monospace;

  --shadow-sm:0 1px 2px rgba(20,25,28,.10);
  --shadow:0 10px 30px -16px rgba(20,25,28,.40);
  --shadow-lg:0 26px 60px -22px rgba(20,25,28,.55);

  /* brushed-steel material recipes */
  --steel-face:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0) 38%),linear-gradient(162deg,#FAFBF9,#EAECE8);
  --steel-bevel:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.20),0 1px 2px rgba(20,25,28,.10),0 14px 30px -22px rgba(20,25,28,.45);
}

/* ── 2 · FIELD + BLUEPRINT GRID ───────────────────────────────────────────
   The whisper-gray field carries a faint drafting grid, like paper on a table. */
body{
  background:
    linear-gradient(rgba(20,40,55,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,40,55,.025) 1px,transparent 1px),
    linear-gradient(rgba(20,40,55,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,40,55,.045) 1px,transparent 1px),
    var(--field) !important;
  background-size:24px 24px,24px 24px,120px 120px,120px 120px !important;
  background-position:-1px -1px,-1px -1px,-1px -1px,-1px -1px !important;
}

/* ── 3 · BRUSHED-STAINLESS TOPBAR ─────────────────────────────────────────── */
.topbar{
  background:linear-gradient(180deg,#F4F5F3,#E5E7E3) !important;
  border-bottom:1px solid var(--steel-edge) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.4),0 6px 16px -12px rgba(20,25,28,.5) !important;
  backdrop-filter:saturate(140%) blur(8px);
  position:relative;
}
/* brushed-metal micro-grain */
.topbar::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.topbar .navbtn,.topbar .srv-badge,.sp-btn{
  background:var(--steel-face) !important;border-color:var(--steel-edge) !important;
  box-shadow:var(--steel-bevel);
}
.topbar .t span,.ttitle{letter-spacing:.04em}

/* ── APB logo: bigger + subtle electric animation (transparent logo, 2026-06-30) ── */
.topbar img,.topbar .logo{height:46px !important;width:auto !important;transition:transform .25s ease}
.topbar img:hover,.topbar .logo:hover{transform:scale(1.06)}
@media (prefers-reduced-motion: no-preference){
  .topbar img,.topbar .logo{animation:apbLogoPulse 6.5s ease-in-out infinite}
  @keyframes apbLogoPulse{
    0%,100%{filter:drop-shadow(0 0 0 rgba(30,130,230,0))}
    48%{filter:drop-shadow(0 0 6px rgba(30,130,230,.42))}
    52%{filter:drop-shadow(0 0 9px rgba(40,150,255,.6))}
  }
}

/* ── 4 · HERO — DARK BRUSHED GUNMETAL + BLUEPRINT GRID ────────────────────── */
.hero{
  background:
    linear-gradient(115deg,rgba(255,255,255,.05) 0%,transparent 18% 82%,rgba(255,255,255,.04) 100%),
    repeating-linear-gradient(125deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),
    radial-gradient(680px 520px at 88% 120%,rgba(25,166,192,.20) 0%,transparent 58%),
    linear-gradient(160deg,#2B3034,#181B1E 55%,#22272B) !important;
  border:1px solid #3A4146 !important;
  box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* fine blueprint grid overlay */
.hero::before{
  background-image:
    linear-gradient(rgba(120,200,220,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,220,.07) 1px,transparent 1px) !important;
  background-size:26px 26px !important;
  opacity:1 !important;
}
/* registration crosshair, top-left */
.hero::after{
  content:"" !important;
  position:absolute !important;left:26px !important;top:24px !important;right:auto !important;
  width:18px !important;height:18px !important;border-radius:0 !important;
  background:
    linear-gradient(var(--cyan),var(--cyan)) center/100% 1.5px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) center/1.5px 100% no-repeat !important;
  opacity:.55 !important;
}
.hero .eyebrow{color:#7FBECB !important;letter-spacing:.26em !important}
.hero .eyebrow::before{content:"⊹ ";opacity:.7}
.hero h1{color:#F3F6F6 !important}
.hero .tagline{color:#A9B6BA !important}
.hero-kpis,.hero-kpis.field-kpis,.field-kpis{border-top:1px solid rgba(255,255,255,.10) !important}
.hk,.fk{border-right:1px solid rgba(255,255,255,.10) !important}
.hk b,.fk b,.hk .hk-n{font-family:var(--mono) !important;color:#EAF4F5 !important;font-weight:600 !important}
.hk span,.fk span,.hk .hk-lbl{color:#6E94A0 !important;letter-spacing:.16em !important}

/* mono readouts inside hero stay cyan-tinted */
.hk .hk-n.green{color:#37C892 !important}
.hk .hk-n.amber{color:#E8B25A !important}
.hk .hk-n.red{color:#F2877F !important}

/* ── 5 · MACHINED-STEEL PANELS (tiles / cards / table cards) ───────────────── */
.tile,.pcard,.table-card,.filter-card,.card,.panel{
  background:var(--steel-face) !important;
  border:1px solid var(--steel-edge) !important;
  box-shadow:var(--steel-bevel) !important;
}
/* registration tick — top-right corner of every tile */
.tile{overflow:hidden}
.tile::after{
  content:"";position:absolute;top:10px;right:10px;width:9px;height:9px;z-index:0;pointer-events:none;
  background:
    linear-gradient(var(--steel-edge),var(--steel-edge)) center/100% 1px no-repeat,
    linear-gradient(var(--steel-edge),var(--steel-edge)) center/1px 100% no-repeat;
  opacity:.7;
}
.tile:hover{border-color:var(--accent) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 4px rgba(20,25,28,.12),0 18px 38px -18px rgba(14,110,140,.45) !important}
.tile .ic,.pcard .pa{
  background:linear-gradient(165deg,#FDFDFC,#E7E9E5) !important;
  border:1px solid var(--steel-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,25,28,.12);
  color:var(--accent-2) !important;
}
/* colored top rules become blueprint-ink hairlines with a mono feel */
.tile.blue,.tile.purple,.tile.teal,.tile.amber,.tile.green{border-top-width:2px !important}

/* ── 6 · SECTION LABELS → DRAFTING CALLOUTS ───────────────────────────────── */
.sec{font-family:var(--mono) !important;letter-spacing:.18em !important;color:var(--ink-2) !important}
.sec::before{content:"//";color:var(--accent);margin-right:2px;font-weight:600}
.sec .ln{background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px) !important;height:1px}

/* ── 7 · BUTTONS ──────────────────────────────────────────────────────────── */
.ha.prim,.add-btn,.btn-prim{
  background:linear-gradient(180deg,#147F9E,#0C5E76) !important;
  border:1px solid #0A4F63 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px -8px rgba(14,110,140,.7) !important;
  color:#F2FBFC !important;animation:none !important;
}
.ha.prim:hover,.add-btn:hover,.btn-prim:hover{background:linear-gradient(180deg,#16607a,#0a4f63) !important;transform:translateY(-1px)}
.ha.ghost{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.16) !important;color:#CDD9DC !important}
.ha.ghost:hover{background:rgba(255,255,255,.13) !important;color:#fff !important}

/* ── 8 · CHIPS / TOGGLES ──────────────────────────────────────────────────── */
.chip{background:var(--steel-face) !important;border:1px solid var(--steel-edge) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.chip.active{background:linear-gradient(180deg,#147F9E,#0C5E76) !important;border-color:#0A4F63 !important;color:#fff !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.view-toggle{background:var(--panel-2) !important;border:1px solid var(--steel-edge) !important;box-shadow:inset 0 1px 2px rgba(20,25,28,.10)}
.view-btn.active{background:linear-gradient(180deg,#147F9E,#0C5E76) !important;border-color:#0A4F63 !important}

/* ── 9 · TABLES ───────────────────────────────────────────────────────────── */
.cert-table th,table thead th{
  background:linear-gradient(180deg,#EEF0EC,#E2E4E0) !important;
  border-bottom:2px solid var(--steel-edge) !important;
  font-family:var(--mono) !important;letter-spacing:.10em !important;color:var(--ink-2) !important;
}
.cert-table td{border-bottom:1px solid var(--line-2) !important}
.cert-table tr.data-row:hover td{background:rgba(14,110,140,.04) !important}

/* tabular figures everywhere numbers live */
.hk b,.fk b,.hk .hk-n,.d-active,.d-soon30,.d-soon60,.d-expired,.now{font-variant-numeric:tabular-nums}

/* ── 10 · BADGES / PILLS → engraved metal chips ───────────────────────────── */
.auth-badge,.status-pill,.ptag,.tbadge,.srv-badge{font-family:var(--mono) !important;letter-spacing:.04em}

/* ── 11 · MONO DETAILING ──────────────────────────────────────────────────── */
.now{color:var(--ink-3) !important}
.result-count{font-family:var(--mono)}

/* subtle scrollbar to match instrument feel */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--panel-2)}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#B9BDB7,#9FA49E);border:2px solid var(--panel-2);border-radius:6px}
*::-webkit-scrollbar-thumb:hover{background:#8C918B}
