/* ============================================================
   Owl Sentry Design System — BCT Operator Panel
   Derived from the BCT design handoff (Owl Sentry brand book).
   Colors, type, spacing, radii, shadows + component classes.
   ============================================================ */

/* ---------- Fonts (self-hosted Poppins, weights present in repo) ---------- */
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-Light.ttf')     format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-Regular.ttf')   format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-Medium.ttf')    format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-SemiBold.ttf')  format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-Bold.ttf')      format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/static/fonts/Poppins-Black.ttf')     format('truetype'); font-weight:900; font-display:swap; }

:root {
  /* Brand */
  --os-navy:#1b1464; --os-indigo:#314597; --os-teal:#0acca6; --os-crimson:#ba0647;
  /* Navy scale */
  --os-navy-950:#0d0932; --os-navy-900:#1b1464; --os-navy-800:#231b7a; --os-navy-700:#2b2690;
  --os-navy-600:#314597; --os-navy-500:#4759ae; --os-navy-400:#7a88cc; --os-navy-300:#aab3dd;
  --os-navy-200:#d0d6ee; --os-navy-100:#e8ebf7; --os-navy-50:#f3f5fb;
  /* Teal scale */
  --os-teal-900:#065f4d; --os-teal-700:#0a9c80; --os-teal-500:#0acca6; --os-teal-300:#66e0c9; --os-teal-100:#d1f6ee;
  /* Crimson scale */
  --os-crimson-700:#8a0435; --os-crimson-500:#ba0647; --os-crimson-300:#e8436f; --os-crimson-100:#fbdbe4;
  /* Neutral scale */
  --os-neutral-900:#111214; --os-neutral-800:#2a2b2f; --os-neutral-700:#4a4b51; --os-neutral-600:#6b6c72;
  --os-neutral-500:#878787; --os-neutral-400:#a7a7a7; --os-neutral-300:#c6c7c9; --os-neutral-200:#e2e3e5;
  --os-neutral-100:#f1f2f4; --os-neutral-50:#f8f9fb;
  /* Amber "caution" (NOT in brand system — intermediate monitoring states only) */
  --os-amber-fg:#8A5A00; --os-amber-bg:#FBEBCF; --os-amber-dot:#E0952B; --os-amber-text:#8A5A00;

  /* Semantic */
  --fg:#1b1464; --fg-muted:#4a4b51; --fg-subtle:#878787; --fg-inverse:#fff; --fg-inverse-muted:#c3c8e0;
  --border:var(--os-neutral-200); --app-bg:var(--os-neutral-50);

  --font-sans:'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Shadows */
  --shadow-card:0 1px 2px rgba(13,9,50,.06);
  --shadow-hover:0 12px 28px rgba(13,9,50,.12);
  --shadow-modal:0 24px 56px rgba(13,9,50,.35);
  --shadow-toast:0 16px 32px rgba(13,9,50,.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--font-sans); color:var(--fg); background:var(--app-bg);
      font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }

/* ---------- keyframes ---------- */
@keyframes bctpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bctup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bctring{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.2);opacity:0}}

/* ---------- scrollbar ---------- */
.bct-scroll::-webkit-scrollbar{width:10px;height:10px}
.bct-scroll::-webkit-scrollbar-thumb{background:var(--os-neutral-300);border-radius:8px;border:2px solid var(--os-neutral-50)}
.bct-scroll::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   Tone system — bg / fg / dot  (ok / idle / warn / crit / info)
   Use: <span class="tone-crit"> for text color, .tone-crit-chip for pill bg
   ============================================================ */
.tone-ok   { --t-bg:var(--os-teal-100);    --t-fg:var(--os-teal-900);    --t-dot:var(--os-teal-700); }
.tone-idle { --t-bg:var(--os-neutral-100); --t-fg:var(--os-neutral-700); --t-dot:var(--os-neutral-500); }
.tone-warn { --t-bg:var(--os-amber-bg);    --t-fg:var(--os-amber-fg);    --t-dot:var(--os-amber-dot); }
.tone-crit { --t-bg:var(--os-crimson-100); --t-fg:var(--os-crimson-700); --t-dot:var(--os-crimson); }
.tone-info { --t-bg:var(--os-navy-100);    --t-fg:var(--os-navy);        --t-dot:var(--os-indigo); }

/* pill/badge using the current tone vars */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
       padding:5px 10px; border-radius:999px; background:var(--t-bg); color:var(--t-fg); }
.chip .dot, .dot{ width:7px; height:7px; border-radius:50%; background:var(--t-dot); flex:none; }
.badge-sq{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em;
           padding:4px 9px; border-radius:7px; background:var(--t-bg); color:var(--t-fg); }

/* ============================================================
   Buttons (pill variants) — mirror prototype btn() map
   ============================================================ */
.btn{ font-family:inherit; font-weight:600; font-size:13px; padding:9px 16px; border-radius:999px;
      cursor:pointer; border:1px solid transparent; transition:.2s; line-height:1;
      display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.btn:hover{ filter:brightness(1.06); }
.btn-navy   { background:var(--os-navy);    color:#fff;             border-color:var(--os-navy); }
.btn-navy:hover{ filter:none; background:var(--os-navy-800); }
.btn-teal   { background:var(--os-teal);    color:var(--os-navy-950); border-color:var(--os-teal); }
.btn-outline{ background:#fff;              color:var(--os-navy);   border-color:var(--os-navy); }
.btn-ghost  { background:#fff;              color:var(--os-navy);   border-color:var(--os-neutral-300); }
.btn-warn   { background:var(--os-crimson); color:#fff;             border-color:var(--os-crimson); }
.btn-warnghost{ background:#fff; color:var(--os-crimson-700);       border-color:var(--os-crimson-300); }
.btn-disabled,.btn:disabled{ background:var(--os-neutral-100); color:var(--os-neutral-400);
      border-color:var(--os-neutral-200); cursor:not-allowed; filter:none; }
.btn-block{ width:100%; }
.btn-lg{ font-size:15px; padding:13px 22px; }
.btn-sm{ font-size:13px; padding:8px 15px; }

/* ============================================================
   Cards & surfaces
   ============================================================ */
.card{ background:#fff; border:1px solid var(--os-neutral-200); border-radius:16px;
       padding:20px; box-shadow:var(--shadow-card); }
.card-navy{ background:var(--os-navy); border-radius:16px; padding:18px 20px; color:#fff; }
.card-navy-950{ background:var(--os-navy-950); border-radius:16px; padding:24px; color:#fff; }
.kicker{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--os-teal-700); }
.kicker-inv{ color:var(--os-teal-300); }
.section-title{ font-size:16px; font-weight:700; color:var(--os-navy); margin:0; }
.mono{ font-family:var(--font-mono); }
.tnum{ font-variant-numeric:tabular-nums; }
.muted{ color:var(--fg-subtle); }

/* meters */
.meter{ height:7px; border-radius:5px; background:var(--os-neutral-100); overflow:hidden; }
.meter > span{ display:block; height:100%; }
.meter-lg{ height:9px; border-radius:6px; overflow:visible; position:relative; }
.meter-lg > .fill{ display:block; height:100%; border-radius:6px; }
.meter-marker{ position:absolute; top:-3px; bottom:-3px; width:2px; }

/* fill colors by threshold class */
.fill-ok{ background:var(--os-teal-500); }        /* green  ≥50 */
.fill-yellow{ background:#F2C200; }               /* yellow <50 */
.fill-orange{ background:#E0952B; }               /* orange <25 */
.fill-red{ background:var(--os-crimson); }        /* red    <10 */
.fill-warn{ background:var(--os-amber-dot); }     /* legacy (container 75/95) */
.fill-crit{ background:var(--os-crimson); }

/* ============================================================
   App shell
   ============================================================ */
.shell{ display:flex; height:100vh; overflow:hidden; }
.sidebar{ width:250px; flex:none; background:linear-gradient(180deg,#1b1464 0%,#120c47 100%);
          display:flex; flex-direction:column; color:#fff; }
.sidebar-head{ padding:22px 22px 18px; display:flex; align-items:center; gap:11px;
               border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-nav{ flex:1; padding:16px 12px; display:flex; flex-direction:column; gap:3px; }
.nav-group{ font-size:10px; letter-spacing:.18em; text-transform:uppercase;
            color:rgba(255,255,255,.35); font-weight:700; padding:6px 12px 8px; }
.nav-group.mt{ padding-top:16px; }
.nav-item{ position:relative; display:flex; align-items:center; gap:12px; width:100%; text-align:left;
           font-family:inherit; font-size:14px; font-weight:500; padding:11px 14px; border:none;
           border-radius:10px; cursor:pointer; background:transparent; color:var(--fg-inverse-muted);
           text-decoration:none; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{ background:rgba(255,255,255,.10); color:#fff; }
.nav-item.active::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px;
           border-radius:2px; background:var(--os-teal); }
.nav-item.disabled{ color:rgba(255,255,255,.4); cursor:default; }
.nav-badge{ background:var(--os-crimson); color:#fff; font-size:11px; font-weight:700; min-width:20px;
            height:20px; padding:0 6px; border-radius:999px; display:inline-flex; align-items:center;
            justify-content:center; }
.nav-soon{ font-size:9px; letter-spacing:.1em; border:1px solid rgba(255,255,255,.2);
           border-radius:5px; padding:2px 5px; }
.sidebar-foot{ padding:14px 18px; border-top:1px solid rgba(255,255,255,.08); }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ height:66px; flex:none; background:#fff; border-bottom:1px solid var(--os-neutral-200);
         display:flex; align-items:center; padding:0 26px; gap:20px; }
.topbar-title{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--os-navy);
               line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-back{ display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:12px;
              color:var(--fg-subtle); background:none; border:none; cursor:pointer; padding:0;
              margin-bottom:2px; white-space:nowrap; text-decoration:none; }
.topbar-ticker{ flex:none; white-space:nowrap; display:flex; align-items:center; gap:7px; font-size:12px;
                color:var(--fg-subtle); padding:6px 12px; background:var(--os-neutral-50); border-radius:999px; }
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--os-navy); color:#fff;
         display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex:none; }
.view{ flex:1; overflow-y:auto; padding:26px 30px 40px; }

/* ============================================================
   Dashboard
   ============================================================ */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.kpi-num{ font-size:38px; font-weight:800; color:var(--os-navy); line-height:1; margin-top:8px; }
.kpi-sub{ font-size:12.5px; color:var(--fg-subtle); margin-top:5px; }
.fleet-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(390px,1fr)); gap:16px; }
.fleet-card{ cursor:pointer; transition:box-shadow .2s, transform .2s; text-decoration:none; color:inherit; display:block; }
.fleet-card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.metric-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-subtle);
               font-weight:600; margin-bottom:5px; }

/* ============================================================
   Modal + toast
   ============================================================ */
.modal-overlay{ position:fixed; inset:0; background:rgba(13,9,50,.5); display:flex; align-items:center;
                justify-content:center; z-index:50; padding:20px; }
.modal{ width:440px; max-width:100%; background:#fff; border-radius:18px; box-shadow:var(--shadow-modal);
        padding:28px; animation:bctup .18s ease-out; }
.modal-icon{ width:42px; height:42px; border-radius:11px; flex:none; display:flex; align-items:center;
             justify-content:center; background:var(--t-bg); color:var(--t-fg); }
.toast{ position:fixed; right:24px; bottom:24px; z-index:60; display:flex; align-items:flex-start; gap:12px;
        background:#fff; border:1px solid var(--os-neutral-200); border-left:4px solid var(--t-dot);
        border-radius:13px; padding:15px 18px; box-shadow:var(--shadow-toast); min-width:300px;
        max-width:400px; animation:bctup .2s ease-out; }

/* ============================================================
   Alerts / admin tables
   ============================================================ */
.alert-row{ display:flex; gap:14px; align-items:center; background:#fff; border:1px solid var(--os-neutral-200);
            border-left:4px solid var(--t-dot); border-radius:13px; padding:15px 18px;
            box-shadow:0 1px 2px rgba(13,9,50,.05); }
.alert-row.acked{ opacity:.62; }
.tab-bar{ display:flex; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--os-neutral-200); }
.tab{ font-family:inherit; font-size:14px; font-weight:600; padding:11px 18px; background:none; border:none;
      border-bottom:2.5px solid transparent; color:var(--fg-subtle); cursor:pointer; margin-bottom:-1px;
      text-decoration:none; }
.tab.active{ border-bottom-color:var(--os-navy); color:var(--os-navy); }
.data-table{ background:#fff; border:1px solid var(--os-neutral-200); border-radius:16px; overflow:hidden;
             box-shadow:var(--shadow-card); }
.data-head{ background:var(--os-neutral-50); font-size:11px; font-weight:700; letter-spacing:.08em;
            text-transform:uppercase; color:var(--fg-subtle); padding:13px 20px; }
.data-row{ align-items:center; padding:14px 20px; border-top:1px solid var(--os-neutral-100); }

/* form fields */
.field-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
              color:var(--os-navy); margin-bottom:6px; }
.field-input{ width:100%; font-family:inherit; font-size:14px; padding:10px 12px;
              border:1px solid var(--os-neutral-300); border-radius:10px; color:var(--os-navy-950); }
.field-input.mono{ font-family:var(--font-mono); font-size:13px; }