/* ============================================================
   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; }

/* ============================================================
   Period picker (WEB-HIS-03 / WEB-DSH-03) + chart lightbox (WEB-HIS-04)
   ============================================================ */
.period-picker{ display:flex; gap:6px; flex-wrap:wrap; }
.period-picker .chip{ cursor:pointer; text-decoration:none; }
.period-picker input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.period-picker label:has(input:checked){ --t-bg:var(--os-indigo); --t-fg:#fff; --t-dot:#fff; }
.period-picker label:has(input:not(:checked)){ --t-bg:var(--os-neutral-100); --t-fg:var(--os-neutral-700); --t-dot:var(--os-neutral-500); }

.chart-zoomable{ cursor:zoom-in; }
.chart-modal{ width:min(960px,94vw); position:relative; padding:22px 26px; }
.chart-close{ position:absolute; top:10px; right:14px; font-size:24px; line-height:1;
              background:none; border:none; cursor:pointer; color:var(--fg-subtle); }
.chart-close:hover{ color:var(--os-navy); }
.chart-pt{ fill:transparent; }
.chart-pt:hover{ fill:currentColor; }
.chart-tooltip{ position:fixed; z-index:70; pointer-events:none; background:var(--os-navy);
                color:#fff; font-size:12px; font-weight:600; padding:5px 9px; border-radius:8px;
                white-space:nowrap; box-shadow:var(--shadow-modal); }

/* custom od–do range form inside the period picker (WEB-HIS-03) */
.period-custom{ display:flex; gap:6px; align-items:center; }
.period-custom input[type="date"]{ font-family:inherit; font-size:12px; padding:4px 8px;
  border:1px solid var(--os-neutral-300); border-radius:8px; color:var(--os-navy-950); background:#fff; }
.period-custom button{ font-family:inherit; border:none; }

/* previous-period comparison legend (WEB-HIS-05) */
.chart-legend{ display:flex; gap:18px; align-items:center; font-size:12px;
               color:var(--fg-subtle); margin-top:10px; }
.chart-legend .lg-line{ width:22px; height:0; border-top:2.5px solid currentColor;
                        display:inline-block; vertical-align:middle; margin-right:6px; }
.chart-legend .lg-line.dashed{ border-top-style:dashed; opacity:.5; }
.chart-pt-prev{ opacity:.55; }

/* Guided tour (WEB-UX-01): spotlight cutout + step tooltip. z-index above the
   modal(50)/toast(60)/chart-tooltip(70) stack. */
#bct-tour{ position:fixed; inset:0; z-index:80; pointer-events:none; }
#bct-tour-spot{ position:fixed; border-radius:12px; pointer-events:none;
                box-shadow:0 0 0 9999px rgba(13,9,50,.55);
                outline:2px solid var(--os-teal); outline-offset:2px;
                transition:top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
#bct-tour-tip{ position:fixed; z-index:81; width:min(340px, calc(100vw - 32px));
               background:#fff; border-radius:14px; box-shadow:var(--shadow-modal);
               padding:16px 18px 14px; pointer-events:auto; animation:bctup .18s ease; }
#bct-tour-tip-title{ font-size:14.5px; font-weight:700; color:var(--os-navy);
                     margin:0 22px 6px 0; }
#bct-tour-tip-body{ font-size:12.5px; color:var(--fg-muted); line-height:1.55; }
.tour-tip-foot{ display:flex; align-items:center; justify-content:space-between;
                gap:10px; margin-top:14px; }
#bct-tour-close{ position:absolute; top:8px; right:10px; background:none; border:none;
                 font-size:18px; line-height:1; color:var(--fg-subtle); cursor:pointer; }
.tour-section-btn{ display:block; width:100%; text-align:left; background:var(--os-neutral-50);
                   border:1px solid var(--os-neutral-200); border-radius:10px;
                   padding:10px 13px; cursor:pointer; font-family:inherit; }
.tour-section-btn:hover{ border-color:var(--os-indigo); }
.tour-section-btn .ts-label{ font-size:13px; font-weight:600; color:var(--os-navy); }
.tour-section-btn .ts-desc{ font-size:11.5px; color:var(--fg-subtle); margin-top:2px; }

/* Collapsible sidebar (icons-only). `sb-min` on <html> is restored from
   localStorage before first paint (inline script in base.html head). */
#sidebar-toggle{ margin:0 12px 8px; background:none; border:none; cursor:pointer;
                 font-family:inherit; flex:none; }
#sidebar-toggle .sb-chevron{ transition:transform .2s ease; }
.sidebar{ transition:width .2s ease; }
html.sb-min .sidebar{ width:64px; }
html.sb-min .sidebar-head{ padding:22px 0 18px; justify-content:center; }
html.sb-min .sidebar-head-text{ display:none; }
html.sb-min .nav-group{ display:none; }
html.sb-min .nav-group.mt{ display:block; font-size:0; padding:8px 14px 0;
                           border-top:1px solid rgba(255,255,255,.08); }
html.sb-min .nav-item{ font-size:0; gap:0; justify-content:center; padding:11px 0; }
html.sb-min .nav-item svg{ margin:0; }
html.sb-min .nav-badge{ position:absolute; top:4px; right:8px; }
html.sb-min .sidebar-foot{ display:none; }
html.sb-min #sidebar-toggle{ margin:0 6px 8px; }
html.sb-min #sidebar-toggle .sb-chevron{ transform:rotate(180deg); }