/* ============================================================
   G1-TRACKING · Design System v1.0
   Institutional theme (light + dark) built on Bootstrap 5.3.
   Loaded AFTER Bootstrap; overrides --bs-* tokens + adds the
   sidebar/topbar shell, status language, KPIs, and component polish.
   ============================================================ */

:root{
  /* brand */
  --g1-primary:#105899; --g1-primary-hover:#0D4A80; --g1-primary-050:#E8F0F7;
  --g1-success:#176B45; --g1-success-050:#E6F2EC;
  --g1-warning:#B26A00; --g1-warning-050:#F7EFE1;
  --g1-danger:#A52A22;  --g1-danger-050:#F6E7E6;
  --g1-nosignal:#64748B;--g1-nosignal-050:#EEF1F4;
  --g1-info:#105B99;    --g1-info-050:#E7F0F7;
  /* neutrals */
  --g1-bg:#F1F4F7; --g1-surface:#FFFFFF; --g1-surface-2:#F7F9FB; --g1-inset:#EEF2F6;
  --g1-ink:#14212D; --g1-ink-2:#4B5A68; --g1-ink-3:#7B8896;
  --g1-border:#DDE3EA; --g1-border-2:#EAEEF2;
  /* sidebar */
  --g1-sidebar:#0F2438; --g1-sidebar-ink:#AEBECE; --g1-sidebar-ink-2:#6E8194;
  --g1-sidebar-active:#105899; --g1-sidebar-hover:rgba(255,255,255,.06);
  /* focus + elevation */
  --g1-focus:#F2C200;
  --g1-sh-sm:0 1px 2px rgba(16,24,40,.05);
  --g1-sh-md:0 2px 6px rgba(16,24,40,.08);
  --g1-sh-lg:0 6px 18px rgba(16,24,40,.10);
  /* radius */
  --g1-r-sm:4px; --g1-r:6px; --g1-r-lg:8px;
  --g1-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* map Bootstrap tokens onto the brand */
  --bs-primary:#105899; --bs-primary-rgb:16,88,153;
  --bs-body-bg:#F1F4F7; --bs-body-color:#14212D;
  --bs-border-color:#DDE3EA; --bs-secondary-bg:#F7F9FB;
  --bs-body-font-family:var(--g1-sans);
  --bs-border-radius:6px; --bs-border-radius-sm:4px; --bs-border-radius-lg:8px;
  --bs-link-color:#105899; --bs-link-color-rgb:16,88,153; --bs-link-hover-color:#0D4A80;
}

[data-bs-theme="dark"]{
  --g1-primary:#4B93D6; --g1-primary-hover:#6BA6E0; --g1-primary-050:rgba(75,147,214,.14);
  --g1-success:#3FB878; --g1-success-050:rgba(63,184,120,.14);
  --g1-warning:#E0A44A; --g1-warning-050:rgba(224,164,74,.14);
  --g1-danger:#E86A5F;  --g1-danger-050:rgba(232,106,95,.14);
  --g1-nosignal:#8595A4;--g1-nosignal-050:rgba(133,149,164,.14);
  --g1-info:#4B93D6;    --g1-info-050:rgba(75,147,214,.14);
  --g1-bg:#0B1017; --g1-surface:#141C25; --g1-surface-2:#0F171F; --g1-inset:#10181F;
  --g1-ink:#E7EDF3; --g1-ink-2:#A2B1BF; --g1-ink-3:#6E7E8C;
  --g1-border:#25313D; --g1-border-2:#1B2530;
  --g1-sidebar:#0A121B; --g1-sidebar-ink:#9FB1C2; --g1-sidebar-ink-2:#66788A;
  --g1-sidebar-active:#2C6DA8; --g1-sidebar-hover:rgba(255,255,255,.05);
  --g1-sh-sm:0 1px 2px rgba(0,0,0,.4); --g1-sh-md:0 2px 6px rgba(0,0,0,.5); --g1-sh-lg:0 6px 18px rgba(0,0,0,.55);

  --bs-primary:#4B93D6; --bs-primary-rgb:75,147,214;
  --bs-body-bg:#0B1017; --bs-body-color:#E7EDF3;
  --bs-border-color:#25313D; --bs-secondary-bg:#0F171F;
  --bs-link-color:#6BA6E0; --bs-link-hover-color:#8FBEE9;
  --bs-emphasis-color:#E7EDF3;
}

/* ---------- base ---------- */
*{scrollbar-width:thin}
body{background:var(--g1-bg);color:var(--g1-ink);font-family:var(--g1-sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--g1-sans);color:var(--g1-ink);font-weight:600;letter-spacing:-.01em}
.g1-display1{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.01em}
.g1-display2{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.01em}
.g1-h1{font-size:20px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.g1-h3{font-size:14px;line-height:20px;font-weight:600}
.g1-label{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--g1-ink-3)}
.mono,.tnum{font-variant-numeric:tabular-nums}
a{text-decoration:none}
:focus-visible{outline:3px solid var(--g1-focus);outline-offset:2px;border-radius:2px}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;font-size:20px;line-height:1;vertical-align:middle}

/* ---------- app shell ---------- */
.g1-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.g1-app.collapsed{grid-template-columns:72px 1fr}
@media (max-width:860px){.g1-app{grid-template-columns:1fr}.g1-sidebar{position:fixed;z-index:1040;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s}.g1-app.mobileopen .g1-sidebar{transform:none}}

.g1-sidebar{background:var(--g1-sidebar);color:var(--g1-sidebar-ink);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.g1-brand{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);min-height:60px}
.g1-brand .m{width:34px;height:34px;border-radius:7px;background:var(--g1-sidebar-active);display:grid;place-items:center;flex:none;color:#fff}
.g1-brand b{color:#fff;font-size:15px;font-weight:650;letter-spacing:-.01em;display:block;line-height:1.1}
.g1-brand span{color:var(--g1-sidebar-ink-2);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.g1-app.collapsed .g1-brand b,.g1-app.collapsed .g1-brand span,.g1-app.collapsed .g1-navsec,.g1-app.collapsed .g1-nav a span{display:none}
.g1-navsec{padding:16px 16px 6px;color:var(--g1-sidebar-ink-2);font-size:10px;letter-spacing:.11em;text-transform:uppercase}
.g1-nav{padding:2px 10px;display:flex;flex-direction:column;gap:2px}
.g1-nav a{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:var(--g1-r);color:var(--g1-sidebar-ink);font-size:14px;white-space:nowrap}
.g1-nav a .material-symbols-outlined{font-size:20px;flex:none;opacity:.9}
.g1-nav a:hover{background:var(--g1-sidebar-hover);color:#fff}
.g1-nav a.active{background:var(--g1-sidebar-active);color:#fff;font-weight:500}
.g1-nav a .g1-navbadge{margin-left:auto;background:var(--g1-danger);color:#fff;font-size:11px;font-weight:600;min-width:20px;text-align:center;padding:1px 6px;border-radius:100px}
.g1-sidebar .g1-side-foot{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.g1-collapsebtn{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;color:var(--g1-sidebar-ink-2);padding:9px 11px;border-radius:var(--g1-r);cursor:pointer;font-size:13px}
.g1-collapsebtn:hover{background:var(--g1-sidebar-hover);color:#fff}

/* ---------- topbar ---------- */
.g1-main{display:flex;flex-direction:column;min-width:0}
.g1-topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--g1-surface);border-bottom:1px solid var(--g1-border);position:sticky;top:0;z-index:1030;min-height:60px}
.g1-topbar .g1-ptitle{font-size:16px;font-weight:600;margin:0}
.g1-topbar .g1-crumb{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--g1-ink-3)}
.g1-menubtn{background:none;border:0;color:var(--g1-ink-2);cursor:pointer;padding:4px;display:none}
@media (max-width:860px){.g1-menubtn{display:inline-flex}}
.g1-spacer{margin-left:auto}
.g1-clock{font-variant-numeric:tabular-nums;font-size:13px;color:var(--g1-ink-2)}
.g1-iconbtn{width:36px;height:36px;border:1px solid var(--g1-border);background:var(--g1-surface);color:var(--g1-ink-2);border-radius:var(--g1-r);cursor:pointer;display:inline-grid;place-items:center;position:relative}
.g1-iconbtn:hover{border-color:var(--g1-ink-3);color:var(--g1-ink)}
.g1-iconbtn .g1-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--g1-danger);border:2px solid var(--g1-surface)}
.g1-lang{display:inline-flex;border:1px solid var(--g1-border);border-radius:var(--g1-r);overflow:hidden}
.g1-lang a{padding:7px 11px;font-size:12px;font-weight:600;color:var(--g1-ink-2);letter-spacing:.02em}
.g1-lang a.on{background:var(--g1-primary);color:#fff}
.g1-user{display:flex;align-items:center;gap:9px}
.g1-user .g1-av{width:34px;height:34px;border-radius:50%;background:var(--g1-primary-050);color:var(--g1-primary);display:grid;place-items:center;font-weight:650;font-size:13px}
.g1-user .g1-who b{font-size:13px;font-weight:600;display:block;line-height:1.2}
.g1-user .g1-who span{font-size:11px;color:var(--g1-ink-3)}
@media (max-width:600px){.g1-user .g1-who,.g1-clock{display:none}}

.g1-content{padding:22px;flex:1}
.g1-pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.g1-pagehead h1{font-size:22px;margin:0}
.g1-pagehead .lead{color:var(--g1-ink-2);font-size:13px;margin-top:3px}

/* ---------- cards / panels ---------- */
.card{background:var(--g1-surface);border:1px solid var(--g1-border);border-radius:var(--g1-r-lg);box-shadow:var(--g1-sh-sm)}
.card-header{background:transparent;border-bottom:1px solid var(--g1-border-2);font-weight:600;padding:14px 18px}
.g1-panel{background:var(--g1-surface);border:1px solid var(--g1-border);border-radius:var(--g1-r-lg);box-shadow:var(--g1-sh-sm)}
.g1-panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--g1-border-2)}
.g1-panel-head h2{font-size:14px;font-weight:600;margin:0}

/* ---------- KPI ---------- */
.g1-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.g1-kpi{background:var(--g1-surface);border:1px solid var(--g1-border);border-radius:var(--g1-r-lg);padding:16px 18px;box-shadow:var(--g1-sh-sm);position:relative;overflow:hidden}
.g1-kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--g1-primary)}
.g1-kpi.ok::before{background:var(--g1-success)}.g1-kpi.warn::before{background:var(--g1-warning)}.g1-kpi.crit::before{background:var(--g1-danger)}.g1-kpi.idle::before{background:var(--g1-nosignal)}
.g1-kpi .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--g1-ink-3)}
.g1-kpi .n{font-size:30px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1;margin-top:8px}
.g1-kpi .d{font-size:12px;color:var(--g1-ink-2);margin-top:7px}

/* ---------- status language (signature) ---------- */
.g1-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;white-space:nowrap}
.g1-status .d{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--_w)}
.g1-status.is-normal,.g1-status.is-resolved{color:var(--g1-success);--_w:var(--g1-success-050)} .g1-status.is-normal .d,.g1-status.is-resolved .d{background:var(--g1-success)}
.g1-status.is-warning{color:var(--g1-warning);--_w:var(--g1-warning-050)} .g1-status.is-warning .d{background:var(--g1-warning)}
.g1-status.is-critical{color:var(--g1-danger);--_w:var(--g1-danger-050)} .g1-status.is-critical .d{background:var(--g1-danger)}
.g1-status.is-nosignal,.g1-status.is-unknown{color:var(--g1-nosignal);--_w:var(--g1-nosignal-050)} .g1-status.is-nosignal .d,.g1-status.is-unknown .d{background:var(--g1-nosignal)}
.g1-status.is-info{color:var(--g1-info);--_w:var(--g1-info-050)} .g1-status.is-info .d{background:var(--g1-info)}
.g1-status.is-critical .d{animation:g1pulse 1.8s ease-in-out infinite}
@keyframes g1pulse{0%,100%{box-shadow:0 0 0 0 var(--g1-danger-050)}50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.g1-status.is-critical .d{animation:none}}
/* pill variant for badges */
.g1-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:100px}
.g1-badge.is-normal,.g1-badge.is-resolved{background:var(--g1-success-050);color:var(--g1-success)}
.g1-badge.is-warning{background:var(--g1-warning-050);color:var(--g1-warning)}
.g1-badge.is-critical{background:var(--g1-danger-050);color:var(--g1-danger)}
.g1-badge.is-nosignal,.g1-badge.is-unknown{background:var(--g1-nosignal-050);color:var(--g1-nosignal)}
.g1-badge.is-info{background:var(--g1-info-050);color:var(--g1-info)}

/* ---------- buttons ---------- */
.btn{--bs-btn-border-radius:var(--g1-r);font-weight:550;font-size:13.5px;padding:.44rem .9rem}
.btn-primary{--bs-btn-bg:var(--g1-primary);--bs-btn-border-color:var(--g1-primary);--bs-btn-hover-bg:var(--g1-primary-hover);--bs-btn-hover-border-color:var(--g1-primary-hover);--bs-btn-active-bg:var(--g1-primary-hover);--bs-btn-color:#fff;--bs-btn-hover-color:#fff}
.btn-outline-secondary{--bs-btn-color:var(--g1-ink-2);--bs-btn-border-color:var(--g1-border);--bs-btn-hover-bg:var(--g1-inset);--bs-btn-hover-color:var(--g1-ink);--bs-btn-hover-border-color:var(--g1-ink-3)}
.btn-danger{--bs-btn-bg:var(--g1-danger);--bs-btn-border-color:var(--g1-danger)}
.btn-sm{--bs-btn-padding-y:.3rem;--bs-btn-padding-x:.7rem;font-size:12.5px}

/* ---------- forms ---------- */
.form-control,.form-select{border-radius:var(--g1-r);border-color:var(--g1-border);background:var(--g1-surface);color:var(--g1-ink);font-size:13.5px;padding:.5rem .75rem}
.form-control:focus,.form-select:focus{border-color:var(--g1-primary);box-shadow:0 0 0 3px var(--g1-primary-050)}
.form-label,label{font-size:12.5px;font-weight:600;color:var(--g1-ink-2)}
.form-floating>label{color:var(--g1-ink-3);font-weight:400}

/* ---------- tables ---------- */
.table{--bs-table-bg:transparent;color:var(--g1-ink);font-size:13.5px;margin:0}
.table>thead th{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g1-ink-3);font-weight:600;background:var(--g1-surface-2);border-bottom:1px solid var(--g1-border);padding:11px 16px}
.table>tbody td{padding:12px 16px;border-bottom:1px solid var(--g1-border-2);vertical-align:middle}
.table>tbody tr:hover>*{background:var(--g1-surface-2)}
.g1-id{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--g1-ink-2)}

/* battery bar */
.g1-bat{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--g1-ink-2)}
.g1-bar{width:46px;height:6px;border-radius:3px;background:var(--g1-border);overflow:hidden}
.g1-bar>i{display:block;height:100%;background:var(--g1-success)}
.g1-bar.low>i{background:var(--g1-warning)} .g1-bar.crit>i{background:var(--g1-danger)}

/* ---------- misc Bootstrap polish ---------- */
.dropdown-menu{border-color:var(--g1-border);border-radius:var(--g1-r-lg);box-shadow:var(--g1-sh-lg);background:var(--g1-surface);--bs-dropdown-link-hover-bg:var(--g1-inset)}
.modal-content{border:1px solid var(--g1-border);border-radius:var(--g1-r-lg);background:var(--g1-surface)}
.page-link{color:var(--g1-ink-2);border-color:var(--g1-border);font-size:13px}
.page-item.active .page-link{background:var(--g1-primary);border-color:var(--g1-primary)}
.text-muted{color:var(--g1-ink-3)!important}
hr{border-color:var(--g1-border)}
/* Sneat leftovers used in views, kept harmless/styled */
.avatar img{border-radius:50%}
.badge.bg-label-primary{background:var(--g1-primary-050);color:var(--g1-primary)}
.dataTables_wrapper{padding:6px 4px}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{border:1px solid var(--g1-border);border-radius:var(--g1-r);padding:.35rem .6rem;background:var(--g1-surface);color:var(--g1-ink)}
/* mapbox popup in theme */
.mapboxgl-popup-content{border-radius:var(--g1-r-lg);box-shadow:var(--g1-sh-lg);padding:14px 16px;font-family:var(--g1-sans)}

/* ---------- live map ---------- */
.g1-maplayout{display:grid;grid-template-columns:320px 1fr;gap:16px;height:calc(100vh - 104px)}
@media (max-width:860px){.g1-maplayout{grid-template-columns:1fr;height:auto}.g1-mapcanvas{height:60vh}}
.g1-maplist{background:var(--g1-surface);border:1px solid var(--g1-border);border-radius:var(--g1-r-lg);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--g1-sh-sm)}
.g1-maplist-head{padding:13px 16px;border-bottom:1px solid var(--g1-border-2);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:space-between}
.g1-maplist-items{overflow-y:auto;position:relative;flex:1}
.g1-dev{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--g1-border-2);cursor:pointer}
.g1-dev:hover{background:var(--g1-surface-2)}
.g1-dev.has_alert{background:var(--g1-danger-050)}
.g1-dev .g1-dev-meta{min-width:0}
.g1-dev .g1-dev-meta b{font-size:13px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--g1-ink)}
.g1-dev .g1-dev-meta .g1-id{font-size:11px}
.g1-dev .g1-dev-r{margin-left:auto;text-align:right;flex:none}
.g1-dev-dot{width:11px;height:11px;border-radius:50%;background:var(--g1-nosignal);flex:none;box-shadow:0 0 0 3px var(--g1-nosignal-050);display:inline-block}
.g1-mapcanvas{border:1px solid var(--g1-border);border-radius:var(--g1-r-lg);overflow:hidden;position:relative;min-height:360px}
#map{position:absolute;inset:0;width:100%;height:100%}
.marker svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}