/* Operator console styling — Entral brand (teal on warm charcoal).
   Extracted from the validated mockup at ../fleet-manager-ui_mockup/. */
:root{
  --sb-bg:#1c1920;
  --sb-bg-soft:#2a2530;
  --sb-fg:#9b94a3;
  --sb-fg-hi:#f0edf2;
  --accent:#159c9a;
  --accent-bright:#1abebb;
  --accent-strong:#0f7e7c;
  --ok:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --idle:#94a3b8;
  --bs-primary:#159c9a;
  --bs-primary-rgb:21,156,154;
}
.btn-primary{--bs-btn-bg:#159c9a;--bs-btn-border-color:#159c9a;--bs-btn-hover-bg:#0f7e7c;
  --bs-btn-hover-border-color:#0f7e7c;--bs-btn-active-bg:#0f7e7c;--bs-btn-active-border-color:#0f7e7c;
  --bs-btn-disabled-bg:#159c9a;--bs-btn-disabled-border-color:#159c9a;}
.btn-outline-primary{--bs-btn-color:#0f7e7c;--bs-btn-border-color:#159c9a;--bs-btn-hover-bg:#159c9a;
  --bs-btn-hover-border-color:#159c9a;--bs-btn-active-bg:#0f7e7c;}
.text-bg-primary,.badge.text-bg-primary{background-color:#159c9a!important;}
.text-primary{color:#159c9a!important;}
.nav-pills{--bs-nav-pills-link-active-bg:#159c9a;}
.form-check-input:checked{background-color:#159c9a;border-color:#159c9a;}
body{background:#f4f6fa;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}

/* ---- layout ---- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:248px;flex:0 0 248px;background:var(--sb-bg);color:var(--sb-fg);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.sidebar .brand{padding:20px 20px 16px;display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;}
.sidebar .brand .logo{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1abebb,#0f7e7c);font-size:1.2rem;color:#fff;
}
.sidebar .brand b{font-size:1.02rem;letter-spacing:.2px;}
.sidebar .brand small{display:block;color:var(--sb-fg);font-size:.7rem;font-weight:500;}
.nav-section{padding:6px 14px;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#5b6776;margin-top:10px;}
.sidebar .nav-link{
  color:var(--sb-fg);border-radius:8px;margin:2px 10px;padding:9px 12px;
  display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:500;cursor:pointer;
}
.sidebar .nav-link i{font-size:1.05rem;width:20px;text-align:center;}
.sidebar .nav-link:hover{background:var(--sb-bg-soft);color:var(--sb-fg-hi);}
.sidebar .nav-link.active{background:linear-gradient(90deg,rgba(26,190,187,.24),rgba(26,190,187,.05));color:#fff;}
.sidebar .nav-link .badge{margin-left:auto;}
.sidebar .foot{margin-top:auto;padding:14px 18px;border-top:1px solid #222b36;font-size:.78rem;}

.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.topbar{
  background:#fff;border-bottom:1px solid #e6e9f0;padding:12px 26px;
  display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:500;
}
.topbar .search{max-width:360px;flex:1;}
.content{padding:24px 26px 60px;flex:1;}

/* ---- cards ---- */
.card{border:1px solid #e8ebf1;border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.card-title-sm{font-size:.95rem;font-weight:600;margin:0;}
.stat-card .icon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:1.3rem;}
.stat-card .num{font-size:1.9rem;font-weight:700;line-height:1;}
.stat-card .lbl{color:#6b7585;font-size:.82rem;}

/* ---- status dots / badges ---- */
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.dot.online{background:var(--ok);box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.dot.offline{background:var(--idle);}
.dot.updating{background:var(--warn);box-shadow:0 0 0 3px rgba(245,158,11,.18);animation:pulse 1.4s infinite;}
.dot.error{background:var(--bad);box-shadow:0 0 0 3px rgba(239,68,68,.18);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.badge-soft{font-weight:600;border-radius:7px;padding:.32em .6em;}
.badge-soft.online{background:#dcfce7;color:#15803d;}
.badge-soft.offline{background:#eef1f5;color:#64748b;}
.badge-soft.updating{background:#fef3c7;color:#b45309;}
.badge-soft.error{background:#fee2e2;color:#b91c1c;}
.badge-ver{background:#e6f6f5;color:#0f6e6c;font-weight:600;border-radius:7px;}
.badge-grp{background:#f1f5f9;color:#475569;font-weight:600;border-radius:7px;}
.imei-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:#475569;}
.copybox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;background:#0b0f17;color:#cbd5e1;
  border-radius:8px;padding:.5rem .75rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}

/* ---- login ---- */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--sb-bg);}
.login-card{width:360px;max-width:92vw;}
.login-logo{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1abebb,#0f7e7c);font-size:1.5rem;color:#fff;}

/* ---- dropdowns inside scrollable tables ---- */
.table-responsive:has(.dropdown-menu.show){overflow:visible;}

/* htmx: subtle fade while a swap is in flight */
.htmx-request.htmx-indicator,.htmx-request .htmx-indicator{opacity:1;}
.htmx-indicator{opacity:0;transition:opacity .2s;}
tr.htmx-swapping{opacity:.4;}