:root {
  --indigo-50:  #EEF0FF;
  --indigo-100: #DDE0FB;
  --indigo-300: #A5A8F0;
  --indigo-500: #6366F1;
  --indigo-600: #5B5FE3;
  --indigo-700: #4F46E5;
  --indigo-900: #1E1B4B;
  --ink-900:    #0F172A;
  --ink-700:    #334155;
  --ink-500:    #64748B;
  --ink-400:    #94A3B8;
  --ink-200:    #E2E8F0;
  --ink-100:    #F1F5F9;
  --ink-50:     #F8FAFC;
  --green-500:  #22C55E;
  --red-500:    #EF4444;
  --amber-500:  #F59E0B;
  --bg:         #F5F6FB;
  --card-bg:    #FFFFFF;
  --shadow:     0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
  --radius:     14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink-900);
  background: var(--bg);
}
a { color: inherit; text-decoration: none; }
.muted { color: var(--ink-500); }

/* =========================== Topbar =========================== */
.topbar {
  background: #1F2A52;
  background: linear-gradient(180deg, #1F2A52 0%, #232E5E 100%);
  color: #FFF;
}
.topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 14px 24px;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: #FFF;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: radial-gradient(circle at 30% 30%, var(--indigo-300), var(--indigo-600));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);
}
.brand-mark.large { width: 36px; height: 36px; }
.topnav {
  display: flex; gap: 6px; flex: 1;
}
.topnav a {
  padding: 8px 14px; border-radius: 8px; color: rgba(255,255,255,.7);
  font-weight: 500; transition: background .15s, color .15s;
}
.topnav a:hover { background: rgba(255,255,255,.06); color: #FFF; }
.topnav a.active { background: var(--indigo-500); color: #FFF; }
.topnav a.muted { color: rgba(255,255,255,.45); }

.user-pill {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.08);
  padding: 6px 8px 6px 8px;
  border-radius: 999px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--indigo-500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; color: #FFF;
}
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 11px; color: rgba(255,255,255,.55); }
.logout-btn {
  background: transparent; color: rgba(255,255,255,.6); border: 0;
  font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.logout-btn:hover { color: #FFF; background: rgba(255,255,255,.1); }

/* =========================== Page =========================== */
.page {
  max-width: 1400px; margin: 0 auto;
  padding: 28px 24px 60px;
}
.page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 24px;
}
.page-header h1 { margin: 0 0 4px; font-size: 24px; }
.page-header p { margin: 0; }

.crumbs { display: flex; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--indigo-600); }
.crumbs .current { color: var(--ink-700); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
  50%     { box-shadow: 0 0 0 8px rgba(34, 197, 94, .05); }
}

/* =========================== Device list =========================== */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.device-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 18px 18px 14px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
  display: block;
}
.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.device-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-500); margin-bottom: 10px;
}
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-200);
}
.status-dot.online  { background: var(--green-500); }
.status-dot.offline { background: var(--ink-400); }
.device-type {
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
}
.device-name { font-size: 15px; font-weight: 600; word-break: break-all; }
.device-label { font-size: 12px; margin-top: 2px; word-break: break-all; }
.device-card-foot { font-size: 12px; margin-top: 14px; }
.empty { padding: 40px; text-align: center; color: var(--ink-500); }

/* =========================== Detail panels =========================== */
.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
.panel {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  padding: 14px 18px; border-bottom: 1px solid var(--ink-100);
}
.panel-head h2 {
  margin: 0; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--indigo-700);
}
.panel-body {
  padding: 14px 18px 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
}
.metric { padding: 4px 0; }
.metric-label { font-size: 11px; color: var(--ink-500); margin-bottom: 4px; }
.metric-value {
  display: flex; align-items: baseline; gap: 4px; line-height: 1;
}
.metric-number {
  font-size: 22px; font-weight: 600; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.metric-unit { font-size: 12px; color: var(--ink-500); font-weight: 500; }
.metric-ts { font-size: 10px; margin-top: 4px; }
.metric-number.flash { animation: flash .8s ease; }
@keyframes flash {
  0%   { background: var(--indigo-100); }
  100% { background: transparent; }
}

.gps-map {
  grid-column: 1 / -1;
  height: 220px; border-radius: 10px;
  background: var(--ink-100);
  margin-top: 6px;
}

/* =========================== Login =========================== */
body.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 600px at 80% 10%, rgba(99,102,241,.15), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(99,102,241,.10), transparent 60%),
    var(--bg);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--card-bg);
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 30px 60px rgba(15,23,42,.10);
}
.login-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; margin-bottom: 24px;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p  { margin: 0 0 24px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; }
.login-card label span { font-size: 12px; color: var(--ink-500); }
.login-card input {
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--ink-200); background: var(--ink-50);
  font: inherit; color: var(--ink-900);
}
.login-card input:focus {
  outline: 2px solid var(--indigo-300); outline-offset: 1px;
  border-color: var(--indigo-500); background: #FFF;
}
.primary {
  margin-top: 6px;
  background: var(--indigo-600); color: #FFF; font-weight: 600;
  padding: 11px 14px; border: 0; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.primary:hover { background: var(--indigo-700); }
.alert {
  background: #FEF2F2; color: #B91C1C; border-radius: 8px;
  padding: 10px 12px; font-size: 13px;
}

/* =========================== Fleet shell (combined list + detail) =========================== */
body.page-fleet .page { max-width: none; padding: 0; }
.fleet-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 320px;
  height: calc(100vh - 64px);
  overflow: hidden;
}
@media (max-width: 1180px) {
  .fleet-shell { grid-template-columns: 340px minmax(0, 1fr); }
  .fleet-alerts-sidebar { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--ink-100); }
}
@media (max-width: 900px) {
  .fleet-shell { grid-template-columns: 1fr; }
}
.fleet-sidebar {
  background: #FFFFFF;
  border-right: 1px solid var(--ink-100);
  display: flex; flex-direction: column;
  min-height: 0;
}
.sidebar-head {
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 0;
  background: #FFFFFF;
  z-index: 2;
}
.sidebar-title {
  margin: 0 0 12px; font-size: 16px;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-title .badge {
  background: var(--indigo-50); color: var(--indigo-700);
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 600;
}
.sidebar-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: var(--ink-50);
  font: inherit; color: var(--ink-900);
}
.sidebar-search:focus {
  outline: 2px solid var(--indigo-300); outline-offset: 1px;
  border-color: var(--indigo-500); background: #FFF;
}
.status-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--ink-100); color: var(--ink-700);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chip .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400);
}
.chip-ok    .dot { background: var(--green-500); }
.chip-warn  .dot { background: var(--amber-500); }
.chip-stale .dot { background: #94A3B8; }
.chip-down  .dot { background: var(--red-500); }
.chip:hover { background: var(--ink-200); }
.chip.active {
  background: var(--indigo-50);
  border-color: var(--indigo-500);
  color: var(--indigo-700);
}

.device-list {
  list-style: none; margin: 0; padding: 6px 8px 12px;
  overflow-y: auto; flex: 1;
}
.device-row {
  display: grid;
  grid-template-columns: 14px 1fr 12px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.device-row:hover { background: var(--ink-100); }
.device-row.selected {
  background: var(--indigo-50);
  box-shadow: inset 3px 0 0 var(--indigo-600);
}
.device-row .status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-400);
  box-shadow: 0 0 0 3px transparent;
}
.status-dot.status-ok    { background: var(--green-500); box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.status-dot.status-warn  { background: var(--amber-500); box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.status-dot.status-stale { background: #94A3B8; }
.status-dot.status-down  { background: var(--red-500); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.device-row .row-name { font-size: 13px; font-weight: 600; word-break: break-all; }
.device-row .row-meta { font-size: 11px; margin-top: 2px; }
.device-row .row-chev { color: var(--ink-400); font-size: 16px; }

/* Filter state — hide rows that don't match the active chip / search. */
.device-list[data-active-status="ok"]    .device-row:not([data-status="ok"]),
.device-list[data-active-status="warn"]  .device-row:not([data-status="warn"]),
.device-list[data-active-status="stale"] .device-row:not([data-status="stale"]),
.device-list[data-active-status="down"]  .device-row:not([data-status="down"]) { display: none; }
.device-row.hide-search { display: none; }

/* =========================== Detail pane =========================== */
.fleet-detail {
  padding: 22px 28px 60px;
  overflow-y: auto;
  background: var(--bg);
  min-width: 0;
}
.detail-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 20px;
}
.detail-id {
  font-size: 11px; color: var(--indigo-700); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.detail-name { margin: 4px 0 4px; font-size: 22px; }
.detail-sub  { font-size: 12px; }
.detail-actions { display: flex; align-items: center; gap: 12px; }
.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(34,197,94,.1); color: #15803D;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.live-pill .live-dot { width: 8px; height: 8px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 600;
  font-size: 13px; cursor: pointer; border: 1px solid transparent;
  text-decoration: none;
}
.btn-secondary {
  background: #FFFFFF; color: var(--indigo-700);
  border-color: var(--ink-200);
}
.btn-secondary:hover {
  background: var(--indigo-50); border-color: var(--indigo-500);
}

/* KPI strip on detail pane */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
@media (max-width: 1100px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .kpi-strip { grid-template-columns: 1fr; } }

.kpi-tile {
  position: relative;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.kpi-tile-head { display: flex; align-items: center; gap: 8px; }
.kpi-tile-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.kpi-tile-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-tile-value {
  display: flex; align-items: baseline; gap: 6px;
  line-height: 1;
}
.kpi-tile-number {
  font-size: 26px; font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.kpi-tile-unit { font-size: 12px; font-weight: 600; opacity: .85; }
.kpi-tile-sub { font-size: 11px; }
.kpi-tile-number.flash { animation: flash .8s ease; }

/* Tinted themes — soft pastel surface, accent text for icon + label + sub */
.kpi-tile-solar    { background: #FEF3C7; border-color: #FDE68A; color: #92400E; }
.kpi-tile-load     { background: #EDE9FE; border-color: #DDD6FE; color: #5B21B6; }
.kpi-tile-ok       { background: #ECFDF5; border-color: #BBF7D0; color: #047857; }
.kpi-tile-warn     { background: #FEF3C7; border-color: #FDE68A; color: #8A5A06; }
.kpi-tile-danger   { background: #FEE2E2; border-color: #FECACA; color: #B91C1C; }
.kpi-tile-thermal  { background: #DBEAFE; border-color: #BFDBFE; color: #1E40AF; }
.kpi-tile-neutral  { background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-700); }

.kpi-tile .kpi-tile-sub.muted { color: inherit; opacity: .75; }

/* Alarm-tile severity dots */
.kpi-alarms-breakdown { display: flex; align-items: center; gap: 10px; font-size: 11px; flex-wrap: wrap; }
.kpi-sev { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink-900); }
.kpi-sev .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.kpi-sev-critical      .dot { background: #EF4444; }
.kpi-sev-major         .dot { background: #F59E0B; }
.kpi-sev-minor         .dot { background: #EAB308; }
.kpi-sev-warning       .dot { background: #3B82F6; }
.kpi-sev-indeterminate .dot { background: #94A3B8; }

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1180px) {
  .detail-grid { grid-template-columns: 1fr; }
  .kpi-strip   { grid-template-columns: repeat(2, 1fr); }
}

/* =========================== Alerts feed (sidebar on detail + history) =========================== */
.alerts-feed, .alerts-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: sticky; top: 16px;
}
.alerts-head, .card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-100);
}
.alerts-head h2, .card-head h2 {
  margin: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--indigo-700);
}
.alerts-head .badge, .card-head .badge {
  background: var(--ink-100); color: var(--ink-700);
  font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600;
}
.alerts-list {
  list-style: none; margin: 0; padding: 6px;
  max-height: 480px; overflow-y: auto;
}
.alert {
  background: transparent !important;
  color: var(--ink-900) !important;
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  transition: background .12s, opacity .25s;
}
.alert:hover { background: var(--ink-100) !important; }
.alert.is-cleared { opacity: .45; }
.alert-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-400);
  margin-top: 5px;
}
.alert-critical .alert-dot { background: var(--red-500);   box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.alert-warning  .alert-dot { background: var(--amber-500); box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.alert-major    .alert-dot { background: var(--red-500);   box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.alert-minor    .alert-dot { background: var(--amber-500); }
.alert-type {
  font-weight: 600;
}
.alert-meta { font-size: 11px; margin-top: 2px; }
.alert-sev {
  text-transform: uppercase; font-weight: 600; letter-spacing: .03em;
}
.alerts-empty {
  padding: 14px 16px; text-align: center; font-size: 13px;
}
.alert.is-new { animation: alertSlideIn .35s ease; }
@keyframes alertSlideIn {
  0%   { background: var(--indigo-50) !important; transform: translateX(-8px); opacity: 0; }
  100% { background: transparent !important; transform: translateX(0); opacity: 1; }
}

/* =========================== History page =========================== */
body.page-history .page { max-width: 1400px; padding: 28px 24px 60px; }
.history-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 22px;
}
.crumb-back {
  display: inline-block; font-size: 12px; color: var(--ink-500); margin-bottom: 6px;
}
.crumb-back:hover { color: var(--indigo-600); }
.history-name { margin: 0 0 4px; font-size: 26px; }
.history-sub  { font-size: 13px; margin: 0; }
.history-status { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.status-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.status-badge.status-ok    { background: rgba(34,197,94,.12); color: #15803D; }
.status-badge.status-warn  { background: rgba(245,158,11,.15); color: #B45309; }
.status-badge.status-stale { background: rgba(148,163,184,.2); color: #475569; }
.status-badge.status-down  { background: rgba(239,68,68,.12); color: #B91C1C; }

.range-toggle {
  display: inline-flex; background: #FFF; border: 1px solid var(--ink-200);
  border-radius: 10px; padding: 2px; box-shadow: var(--shadow);
}
.range-btn {
  border: 0; background: transparent; color: var(--ink-500); font-weight: 600;
  font: inherit; font-size: 12px; padding: 7px 16px; border-radius: 8px; cursor: pointer;
}
.range-btn:hover { color: var(--ink-900); }
.range-btn.active {
  background: var(--indigo-600); color: #FFF;
}

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.kpi-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px 16px 6px;
  box-shadow: var(--shadow);
  position: relative;
}
.kpi-card header {
  display: flex; justify-content: space-between; align-items: center;
}
.kpi-card-title {
  font-size: 12px; color: var(--ink-500); font-weight: 600;
}
.kpi-card-pill {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.pill-ok   { background: rgba(34,197,94,.12);  color: #15803D; }
.pill-warn { background: rgba(245,158,11,.15); color: #B45309; }
.pill-down { background: rgba(239,68,68,.12);  color: #B91C1C; }
.kpi-card-value {
  display: flex; align-items: baseline; gap: 4px; margin-top: 8px;
}
.kpi-card-number {
  font-size: 30px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-900);
}
.kpi-card-number.flash { animation: flash .8s ease; }
.kpi-card-unit { font-size: 13px; color: var(--ink-500); font-weight: 500; }
.kpi-spark {
  display: block; width: 100% !important; height: 42px !important;
  margin-top: 8px;
}

.history-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 1180px) {
  .history-main { grid-template-columns: 1fr; }
  .kpi-cards    { grid-template-columns: repeat(2, 1fr); }
}

.chart-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 12px;
}
.chart-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.chart-head h2 { margin: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--indigo-700); }
.chart-head-range { font-size: 11px; font-weight: 500; margin-left: 4px;
  text-transform: none; letter-spacing: 0; color: var(--ink-500); }
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-700);
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg-swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-canvas-wrap { position: relative; height: 380px; }
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.history-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1180px) {
  .history-bottom { grid-template-columns: 1fr; }
}
.cells-card, .energy-card, .location-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cells-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 16px;
}
.cell {
  text-align: center; padding: 10px 6px;
  background: var(--ink-50); border-radius: 10px;
}
.cell-v {
  font-size: 18px; font-weight: 700; color: var(--ink-900); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cell-l { font-size: 10px; color: var(--ink-500); margin-top: 4px; font-weight: 600; }
.energy-rows { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.energy-row { display: flex; justify-content: space-between; align-items: baseline; }
.energy-label { font-size: 12px; }
.energy-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.energy-value em { font-style: normal; font-size: 12px; color: var(--ink-500); font-weight: 500; }
.location-map { height: 180px; }

/* ===== Per-category drill-down + single-chart popout ===== */

/* Make panel headers a flex row so the drill link sits to the right. */
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.panel-drill {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--indigo-700); padding: 4px 8px; border-radius: 6px;
  background: transparent; transition: background .15s;
}
.panel-drill:hover { background: var(--indigo-50); color: var(--indigo-700); }

/* History page Power chart + category chart cards: legend + popout to the right. */
.chart-head-right {
  display: flex; align-items: center; gap: 12px;
}
.chart-popout {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px;
  font-size: 14px; color: var(--ink-500);
  background: transparent; transition: background .15s, color .15s;
}
.chart-popout:hover { background: var(--indigo-50); color: var(--indigo-700); }

/* ----- Category page ----- */
.page-category .page { max-width: 1400px; margin: 0 auto; padding: 24px; }

.category-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 20px;
}
.category-name {
  margin: 8px 0 0; font-size: 22px; font-weight: 700; color: var(--ink-900);
}
.category-name .muted { font-weight: 500; }
.category-sub { margin: 4px 0 0; font-size: 13px; }
.category-actions { display: flex; gap: 12px; align-items: center; }
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(540px, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .category-grid { grid-template-columns: 1fr; }
  .category-header { flex-direction: column; align-items: stretch; }
}
/* Slightly shorter chart on the category grid so multiple fit per viewport. */
.page-category .chart-canvas-wrap { height: 300px; }

/* ----- Single-chart popout page -----
 * Lock the page to the viewport so the canvas always shows its x-axis.
 * Body becomes a flex column; main fills the remaining viewport; canvas
 * needs `min-height: 0` so flex: 1 can actually shrink it (default
 * `min-height: auto` would otherwise let it overflow). */
body.page-chart {
  height: 100vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.page-chart main.page {
  flex: 1; min-height: 0;
  max-width: none; width: 100%; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.chart-page {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px 24px 18px;
  gap: 10px;
  background: var(--card-bg);
}
.chart-page-head {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.chart-page-title {
  margin: 6px 0 0; font-size: 22px; font-weight: 700; color: var(--ink-900);
}
.chart-page-sub { margin: 4px 0 0; font-size: 13px; }
.chart-page-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.chart-page-legend {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-700);
  padding: 0 4px;
}
.chart-page-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-page-legend .lg-swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-page-canvas {
  flex: 1 1 auto; min-height: 0; position: relative;
}
.chart-page-canvas canvas { width: 100% !important; height: 100% !important; }
.fullscreen-toggle { font-size: 16px; padding: 6px 10px; }

/* ----- Series picker popover ----- */
.series-picker-wrap { position: relative; }
.series-picker {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  width: 480px; max-width: calc(100vw - 24px); max-height: 70vh;
  background: var(--card-bg); border: 1px solid var(--indigo-100);
  border-radius: 10px; box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
  display: flex; flex-direction: column;
}
/* Restore the [hidden] semantics. `display: flex` above (and the same default
 * applies to dialog/details elements) outranks the user-agent
 * `[hidden] { display: none }` rule because of equal specificity, so the
 * picker would render even when the JS set picker.hidden = true. */
.series-picker[hidden] { display: none; }
.series-picker-search {
  padding: 10px; border-bottom: 1px solid var(--ink-100);
  position: sticky; top: 0; background: var(--card-bg);
}
.series-picker-search input {
  width: 100%; padding: 8px 10px; border-radius: 6px;
  border: 1px solid var(--ink-200); background: var(--ink-50);
  font: inherit; color: var(--ink-900);
}
.series-picker-body { overflow-y: auto; padding: 6px 12px; flex: 1; min-height: 0; }
.series-group { padding: 8px 0; }
.series-group + .series-group { border-top: 1px solid var(--ink-100); }
.series-group-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-500); margin-bottom: 6px;
}
.series-item {
  display: grid; grid-template-columns: 18px 1fr auto;
  align-items: center; gap: 10px; padding: 6px 6px;
  border-radius: 6px; font-size: 13px; cursor: pointer;
}
.series-item:hover { background: var(--indigo-50); }
.series-item input { margin: 0; accent-color: var(--indigo-600); }
.series-item-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.series-item-label {
  color: var(--ink-900); font-weight: 500; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.series-item-sub {
  font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.series-item-unit { font-size: 11px; white-space: nowrap; }
.series-picker-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px; border-top: 1px solid var(--ink-100);
}
.series-picker-foot .primary { padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; border: 0; }
.series-picker-foot .btn-secondary { padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }

/* Multi-unit chart stack (popout only). JS picks single / dual / stacked. */
.chart-stack {
  display: flex; flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.chart-stack > .chart-stack-row {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
}
.chart-stack > .chart-stack-row > canvas {
  width: 100% !important;
  height: 100% !important;
}
.chart-mode-chip {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--indigo-50);
  color: var(--indigo-700);
  font-size: 12px; font-weight: 500;
  vertical-align: middle;
}
.chart-mode-chip-block {
  background: #FEF3C7;   /* amber-100 */
  color:      #92400E;   /* amber-900 */
}

/* Block (fixed-window) picker — sits next to the range toggle. */
.block-picker-wrap { position: relative; display: inline-block; }
.block-toggle.active {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FDE68A;
}
.block-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 280px;
  padding: 12px;
  background: var(--bg, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.block-picker[hidden] { display: none; }
.block-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted, #6B7280);
}
.block-field input[type="datetime-local"] {
  padding: 6px 8px;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  font-size: 13px;
}
.block-picker-hint {
  font-size: 11px;
  margin-top: -2px;
}
.block-picker-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* =========================== Fleet alerts sidebar (right side of Home) =========================== */
.fleet-alerts-sidebar {
  background: #FFFFFF;
  border-left: 1px solid var(--ink-100);
  display: flex; flex-direction: column;
  min-height: 0;
}
.fleet-alerts-sidebar .sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sidebar-link {
  font-size: 12px;
  color: var(--indigo-700);
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-link:hover { text-decoration: underline; }
.fleet-alerts-list {
  list-style: none; margin: 0; padding: 8px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.fleet-alerts-list .alert { background: transparent !important; }
.fleet-alerts-list .alert:hover { background: var(--ink-100) !important; }
.alert-cleared { opacity: .55; }
.alert-device {
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-700);
}

/* Make the whole alert row a clickable anchor without breaking its grid layout. */
.alert-link {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  gap: 10px;
  color: inherit; text-decoration: none;
}
/* Fallback for browsers without grid-template-columns: subgrid. */
@supports not (grid-template-columns: subgrid) {
  .alert-link {
    display: grid;
    grid-template-columns: 10px 1fr;
    align-items: flex-start;
  }
}
/* On the standalone Alerts page, rows use 5 columns instead of the sidebar's 2. */
.alerts-table .alert.alert-row { grid-template-columns: 110px minmax(140px, 1.4fr) minmax(140px, 1.2fr) 110px 140px; }
.alerts-table .alert-link      { grid-template-columns: 110px minmax(140px, 1.4fr) minmax(140px, 1.2fr) 110px 140px; }

/* =========================== Devices page (standalone list) =========================== */
body.page-devices .page,
body.page-alerts  .page { max-width: 1200px; padding: 24px 24px 48px; margin: 0 auto; }
.devices-page-head, .alerts-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.devices-page-head h1, .alerts-page-head h1 {
  margin: 0; font-size: 22px;
  display: flex; align-items: center; gap: 10px;
}
.devices-page-head h1 .badge, .alerts-page-head h1 .badge {
  background: var(--indigo-50); color: var(--indigo-700);
  font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 600;
}
.devices-page-controls {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; justify-content: flex-end;
}
.devices-page-controls .sidebar-search { width: 240px; }

.device-table {
  list-style: none; margin: 0; padding: 0;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.device-table-head,
.device-table-link {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) minmax(120px, 1fr) 110px 130px;
  align-items: center;
  gap: 12px;
}
.device-table-head {
  padding: 10px 14px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-500);
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-100);
}
/* Row is a single-child container; its <a> child carries the column grid. */
.device-table-row { display: block; border-bottom: 1px solid var(--ink-100); }
.device-table-row:last-child { border-bottom: none; }
.device-table-link {
  padding: 12px 14px;
  color: inherit; text-decoration: none;
}
.device-table-link:hover { background: var(--ink-100); }
.device-table .cell.name { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.device-table .cell.type { font-size: 13px; color: var(--ink-700); }
.device-table .cell.label { font-size: 13px; }
.device-table .cell.last { font-size: 12px; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.device-table-row.hide-search { display: none; }
.device-table[data-active-status="ok"]    .device-table-row:not([data-status="ok"]),
.device-table[data-active-status="warn"]  .device-table-row:not([data-status="warn"]),
.device-table[data-active-status="stale"] .device-table-row:not([data-status="stale"]),
.device-table[data-active-status="down"]  .device-table-row:not([data-status="down"]) { display: none; }

/* =========================== Alerts page (standalone table) =========================== */
.alerts-page-head .toggle-group {
  display: inline-flex; gap: 6px;
}
.alerts-page-head .toggle-group .chip {
  text-decoration: none;
  cursor: pointer;
}
.alerts-table {
  list-style: none; margin: 0; padding: 0;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.alerts-table-head {
  display: grid;
  grid-template-columns: 110px minmax(140px, 1.4fr) minmax(140px, 1.2fr) 110px 140px;
  gap: 12px;
  padding: 10px 14px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-500);
  background: var(--ink-50);
  border-bottom: 1px solid var(--ink-100);
}
.alerts-table .alert.alert-row {
  border-bottom: 1px solid var(--ink-100);
  padding: 0;
  border-radius: 0;
  margin: 0;
}
.alerts-table .alert.alert-row:last-child { border-bottom: none; }
.alerts-table .alert.alert-row .alert-link { padding: 12px 14px; }
.alerts-table .alert.alert-row .alert-link:hover { background: var(--ink-100); }
.alerts-table .cell.sev { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; font-size: 12px; }
.alerts-table .cell.type    { font-weight: 600; }
.alerts-table .cell.device  { color: var(--ink-700); }
.alerts-table .cell.started { font-size: 12px; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.alerts-table .cell.state   { font-size: 12px; text-transform: uppercase; color: var(--ink-500); letter-spacing: .04em; }

/* The .panels container had an unused alongside-aside; the helper class is just
 * a hook for any future override. The base `.panels` rule (grid + gap: 16px) is
 * what produces the spacing between Battery / Solar Panel / Grid cards. */
.panels-fullwidth { width: 100%; }

/* =========================== Alarm 4-state pill =========================== */
/* Lifecycle state — see https://thingsboard.io/docs/user-guide/alarms/#alarm-states */
.state-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.state-active_unack   { background: #fde7e9; color: #a01024; border-color: #f3b7bf; }
.state-active_ack     { background: #fef0d6; color: #8a5a06; border-color: #f6d291; }
.state-cleared_unack  { background: #e2eefc; color: #1f4f99; border-color: #b6d3f3; }
.state-cleared_ack    { background: #e8efe9; color: #3f6249; border-color: #c2d4c8; }

/* =========================== Alerts pager =========================== */
.alerts-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin: 16px 0 0;
  font-size: 13px;
}
.alerts-pager .pager-link {
  text-decoration: none; color: var(--indigo-700);
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--ink-100);
}
.alerts-pager .pager-link:hover { background: var(--ink-100); }
.alerts-pager .pager-link.disabled { color: var(--ink-500); border-color: var(--ink-100); cursor: default; }
.alerts-pager .pager-info { color: var(--ink-700); font-variant-numeric: tabular-nums; }

/* =========================== Home (Fleet Map) page =========================== */
.home-page { padding: 16px 24px; }
.home-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.home-head h1 { margin: 0; font-size: 20px; font-weight: 700; color: var(--ink-900); }
.home-updated { font-size: 12px; }

.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 900px) { .home-tiles { grid-template-columns: 1fr; } }

.fleet-tile { padding: 12px 16px; }
.fleet-tile-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.fleet-tile-head .kpi-card-title {
  font-size: 11px;
  color: var(--ink-500);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fleet-tile-number {
  font-size: 22px; font-weight: 700; color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.fleet-tile-body {
  display: flex; align-items: center; gap: 16px;
}
/* Fixed square box keeps the canvas from being stretched by flex.
   Chart.js then renders at 1:1 inside it. */
.fleet-tile-chart-wrap {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  position: relative;
}
.fleet-tile-chart {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.fleet-tile-legend {
  list-style: none; margin: 0; padding: 0;
  font-size: 12px; color: var(--ink-700);
  display: flex; flex-direction: column; gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.fleet-tile-legend li {
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.fleet-tile-legend.fleet-tile-legend-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
.fleet-tile-legend b {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-weight: 700;
}
.fleet-tile-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 8px;
}
.dot-ok            { background: #22C55E; }
.dot-warn          { background: #F59E0B; }
.dot-stale         { background: #94A3B8; }
.dot-down          { background: #EF4444; }
.dot-critical      { background: #EF4444; }
.dot-major         { background: #F59E0B; }
.dot-minor         { background: #EAB308; }
.dot-warning       { background: #3B82F6; }
.dot-indeterminate { background: #94A3B8; }

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } }

/* Map and alerts cards share the same row height. Both use a flex column so
   the map and the alerts list fill the available space identically. Sized to
   fit the viewport: topbar + page header + KPI row ≈ 320px, the rest goes here. */
.home-map-card,
.home-alerts {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 42vh;
  min-height: 320px;
  max-height: 460px;
}
.home-map-card { padding: 8px; position: relative; }
#fleet-map {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border-radius: calc(var(--radius) - 4px);
  background: var(--ink-100);
}
.home-map-foot { margin: 8px 4px 2px; font-size: 12px; flex: 0 0 auto; }

.home-alerts { padding: 14px 16px; }
.home-alerts .sidebar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 10px;
  flex: 0 0 auto;
}
.home-alerts .sidebar-title { margin: 0; font-size: 14px; color: var(--ink-700); }
.home-alerts .sidebar-link { font-size: 12px; color: var(--indigo-700); text-decoration: none; }
.home-alerts .sidebar-link:hover { text-decoration: underline; }
.home-alerts .fleet-alerts-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0; padding: 0;
}

/* ---- Fleet monitoring table (full-width, below the map + alerts row) ---- */
.fleet-table-card {
  margin-top: 14px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.fleet-table-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.fleet-table-title { margin: 0; font-size: 14px; color: var(--ink-700); }
.fleet-table-search {
  font: inherit; font-size: 13px; padding: 6px 10px; min-width: 220px;
  border: 1px solid var(--ink-100); border-radius: 8px;
  background: #fff; color: var(--ink-900);
}
.fleet-table-wrap { overflow: auto; max-height: clamp(300px, 48vh, 560px); }
.fleet-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px; white-space: nowrap;
}
.fleet-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card-bg);   /* opaque so rows scroll under the header */
}
.fleet-table th {
  text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-500); font-weight: 600; padding: 8px 10px;
  border-bottom: 1px solid var(--ink-100);
}
.fleet-table th.col-name, .fleet-table td.col-name { text-align: left; }
/* sortable headers */
.fleet-table th.is-sortable { cursor: pointer; user-select: none; }
.fleet-table th.is-sortable:hover { color: var(--ink-700); }
.fleet-table th.is-sortable::after { content: "↕"; opacity: .3; margin-left: 4px; font-size: 10px; }
.fleet-table th[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; }
.fleet-table th[aria-sort="descending"]::after { content: "↓"; opacity: 1; }
.fleet-table th[aria-sort] { color: var(--ink-900); }
.fleet-table td {
  padding: 9px 10px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--ink-900);
  border-bottom: 1px solid var(--ink-100);
}
.fleet-table tbody tr:hover { background: var(--ink-50, #F8FAFC); }
.fleet-table-name { font-weight: 600; color: var(--ink-900); text-decoration: none; }
.fleet-table-name:hover { text-decoration: underline; }
.fleet-table-type { display: block; font-size: 11px; color: var(--ink-500); font-weight: 400; }
.fleet-table-empty { padding: 16px 4px; }

/* battery bar */
.batt-cell { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.batt-bar {
  width: 64px; height: 8px; border-radius: 4px;
  background: var(--ink-100); overflow: hidden; flex: 0 0 64px;
}
.batt-bar-fill { display: block; height: 100%; border-radius: 4px; }
.batt-bar-fill.is-high { background: #22C55E; }
.batt-bar-fill.is-mid  { background: #F59E0B; }
.batt-bar-fill.is-low  { background: #EF4444; }

/* status */
.fleet-table .status-cell { display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize; }
.fleet-table .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---- In-map device summary panel (Leaflet control, top-right, collapsible) ---- */
.map-summary {
  width: 290px;
  max-width: calc(100vw - 40px);
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .18);
  overflow: hidden;
  font: inherit;
}
.map-summary-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ink-100);
  background: #FFFFFF;
}
.map-summary-toggle {
  border: 0; background: transparent; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; color: var(--ink-700);
}
.map-summary-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-700); flex: 1 1 auto;
}
.map-summary-body { padding: 8px; }
.map-summary .summary-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
}
.map-summary.is-collapsed .map-summary-body { display: none; }
@media (max-width: 700px) { .map-summary { width: 240px; } }

.summary-clear {
  font-size: 11px; font-weight: 600;
  color: var(--indigo-700); background: transparent; border: 0; cursor: pointer;
  padding: 2px 6px; border-radius: 6px;
}
.summary-clear:hover { background: var(--ink-100); }
.is-hidden { display: none !important; }
.summary-empty { padding: 12px 4px; font-size: 12px; }

.summary-card {
  border: 1px solid var(--ink-100);
  border-left: 3px solid var(--ink-200);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card-bg);
  transition: border-color .15s ease, background .15s ease;
}
.summary-card:hover { background: #FAFBFC; }
.summary-card.status-ok    { border-left-color: #22C55E; }
.summary-card.status-warn  { border-left-color: #F59E0B; }
.summary-card.status-stale { border-left-color: #94A3B8; }
.summary-card.status-down  { border-left-color: #EF4444; }

.summary-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.summary-card-id   { display: flex; align-items: center; gap: 6px; min-width: 0; }
.summary-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.summary-card-name { font-size: 13px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-card-meta { font-size: 11px; flex: 0 0 auto; }

.summary-card-sev { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; }
.summary-card-sev-clear { color: #16A34A; font-weight: 600; }
.summary-sev { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink-700); }
.summary-sev .dot { width: 8px; height: 8px; border-radius: 50%; }
.summary-sev-critical      .dot { background: #EF4444; }
.summary-sev-major         .dot { background: #F59E0B; }
.summary-sev-minor         .dot { background: #EAB308; }
.summary-sev-warning       .dot { background: #3B82F6; }
.summary-sev-indeterminate .dot { background: #94A3B8; }

.summary-card-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.summary-card-link { color: var(--indigo-700); font-weight: 600; text-decoration: none; }
.summary-card-link:hover { text-decoration: underline; }

/* =========================== Map pins =========================== */
.pin-wrap { background: transparent; border: 0; }
.pin {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  box-sizing: content-box;
}
.pin-ok            { background: #22C55E; }
.pin-indeterminate { background: #94A3B8; }
.pin-warning       { background: #3B82F6; }
.pin-minor         { background: #EAB308; }
.pin-major         { background: #F59E0B; }
.pin-critical      { background: #EF4444; animation: pin-pulse 1.2s ease-in-out infinite; }
@keyframes pin-pulse {
  0%   { transform: scale(1);    box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 0 rgba(239,68,68,.55); }
  70%  { transform: scale(1.15); box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 8px rgba(239,68,68,0); }
  100% { transform: scale(1);    box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 0 rgba(239,68,68,0); }
}
@media (prefers-reduced-motion: reduce) { .pin-critical { animation: none; } }

.pin-tooltip {
  background: var(--card-bg) !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--ink-100) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow) !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
}
.pin-tooltip::before { display: none !important; }
.pin-popup-title { font-weight: 700; color: var(--ink-900); margin-bottom: 2px; }
.pin-popup-meta { font-size: 11px; margin-bottom: 6px; }
.pin-popup-row { display: flex; justify-content: space-between; gap: 12px; line-height: 1.6; }
.pin-popup-row b { font-weight: 600; }
.pin-popup-row .status-ok    { color: #22C55E; }
.pin-popup-row .status-warn  { color: #F59E0B; }
.pin-popup-row .status-stale { color: #94A3B8; }
.pin-popup-row .status-down  { color: #EF4444; }
.pin-popup-row .sev-critical      { color: #EF4444; }
.pin-popup-row .sev-major         { color: #F59E0B; }
.pin-popup-row .sev-minor         { color: #EAB308; }
.pin-popup-row .sev-warning       { color: #3B82F6; }
.pin-popup-row .sev-indeterminate { color: #94A3B8; }
.pin-popup-row .sev-ok            { color: #22C55E; }

/* =========================== Dashboard: power-flow diagram =========================== */
.flow-diagram {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin: 14px 0;
}
.flow-row {
  display: grid;
  grid-template-columns:
    minmax(90px, 1fr) 28px
    minmax(90px, 1fr) 28px
    minmax(90px, 1fr) 28px
    minmax(90px, 1fr) 28px
    minmax(90px, 1fr);
  align-items: center;
  gap: 6px;
}
.flow-grid-aux {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 14px;
}
.flow-grid-aux > .flow-arrow-vert {
  grid-column: 2;
}
.flow-grid-aux > .flow-node {
  grid-column: 2;
}

.flow-node {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.flow-node-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}
.flow-node-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-500);
}
.flow-node-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.flow-node-value b { font-weight: 700; }

.flow-node-battery { background: #ECFDF5; border-color: #BBF7D0; }
.flow-node-solar   { background: #FEF3C7; border-color: #FDE68A; }
.flow-node-grid    { background: #DBEAFE; border-color: #BFDBFE; }
.flow-node-load    { background: #EDE9FE; border-color: #DDD6FE; }

/* Arrow: horizontal connector with a chevron tip and an animated dot. */
.flow-arrow {
  position: relative;
  height: 4px;
  background: var(--ink-100);
  border-radius: 2px;
  overflow: hidden;
}
.flow-arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: 50%;
  width: 0; height: 0;
  border-left: 6px solid var(--ink-200);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-50%);
}
.flow-arrow.flow-flowing {
  background: linear-gradient(90deg, #FDE68A 0%, #F59E0B 100%);
}
.flow-arrow.flow-flowing::after { border-left-color: #F59E0B; }
.flow-arrow.flow-flowing::before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 8px; height: 8px;
  background: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px #F59E0B;
  animation: flow-dot 1.6s linear infinite;
}
@keyframes flow-dot { from { left: 0%; } to { left: 100%; } }

.flow-arrow-vert {
  width: 4px;
  height: 28px;
  background: var(--ink-100);
  border-radius: 2px;
  margin: 0 auto;
  position: relative;
}
.flow-arrow-vert::after {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  width: 0; height: 0;
  border-bottom: 6px solid var(--ink-200);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transform: translateX(-50%);
}
.flow-arrow-vert.flow-flowing { background: linear-gradient(180deg, #F59E0B 0%, #FDE68A 100%); }
.flow-arrow-vert.flow-flowing::after { border-bottom-color: #F59E0B; }

@media (prefers-reduced-motion: reduce) { .flow-arrow.flow-flowing::before { animation: none; left: 50%; } }
@media (max-width: 860px) {
  .flow-row { grid-template-columns: 1fr; }
  .flow-row .flow-arrow { display: none; }
}

/* =========================== Dashboard: 4-card viz grid =========================== */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
@media (max-width: 1200px) { .viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .viz-grid { grid-template-columns: 1fr; } }

.viz-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.viz-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.viz-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.viz-status-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.viz-status-ok       { background: #ECFDF5; color: #047857; border-color: #BBF7D0; }
.viz-status-warn     { background: #FEF3C7; color: #8A5A06; border-color: #FDE68A; }
.viz-status-danger   { background: #FEE2E2; color: #B91C1C; border-color: #FECACA; }
.viz-status-neutral  { background: var(--ink-100); color: var(--ink-500); }

/* Gauge ---- SVG arc + center value */
.viz-gauge {
  width: 100%;
  display: flex;
  justify-content: center;
}
.viz-gauge .gauge-svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}
.gauge-bg { stroke: var(--ink-100); stroke-width: 12; stroke-linecap: round; }
.gauge-fg { stroke-width: 12; stroke-linecap: round; transition: stroke .3s ease; }
.gauge-fg.gauge-ok       { stroke: #22C55E; }
.gauge-fg.gauge-warn     { stroke: #F59E0B; }
.gauge-fg.gauge-danger   { stroke: #EF4444; }
.gauge-fg.gauge-neutral  { stroke: var(--indigo-500); }
.gauge-value {
  font: 700 26px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--ink-900);
}
.gauge-unit {
  font: 600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: var(--ink-500);
  letter-spacing: .04em;
}

/* Secondary stat tiles below the gauge */
.viz-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 6px;
}
.viz-stat {
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 6px 8px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.viz-stat-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.viz-stat-unit {
  font-size: 10px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.viz-stat-ok      .viz-stat-value { color: #047857; }
.viz-stat-warn    .viz-stat-value { color: #8A5A06; }
.viz-stat-danger  .viz-stat-value { color: #B91C1C; }

/* =========================== Dashboard: collapsible detail panels =========================== */
.detail-collapse {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 14px;
  overflow: hidden;
}
.detail-collapse > .detail-collapse-summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.detail-collapse > .detail-collapse-summary::-webkit-details-marker { display: none; }
.detail-collapse-chevron {
  display: inline-block;
  transition: transform .2s ease;
  color: var(--ink-500);
  font-size: 12px;
}
.detail-collapse[open] .detail-collapse-chevron { transform: rotate(90deg); }
.detail-collapse-title {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 14px;
}
.detail-collapse-meta {
  font-size: 12px;
}
.detail-collapse > .panels {
  padding: 0 18px 18px;
}
.detail-collapse > .detail-collapse-summary:hover {
  background: var(--ink-50);
}

/* =========================== Critical-alert row highlight =========================== */
.alert.alert-critical {
  background: #FEE2E2;
  border-left: 3px solid #EF4444;
  padding-left: 9px;
}
.alert.alert-critical .alert-type   { color: #7F1D1D; font-weight: 700; }
.alert.alert-critical .alert-meta   { color: #991B1B; }
.alert.alert-critical .alert-sev    { color: #B91C1C; font-weight: 700; }
.alert.alert-critical:hover         { background: #FECACA; }
.alert.alert-critical.alert-cleared { opacity: .55; }

/* =========================== Dashboard analytics charts =========================== */
.dash-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 14px;
}
.dash-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) { .dash-charts-row { grid-template-columns: 1fr; } }

.dash-chart-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-chart-head {
  display: flex; align-items: center; justify-content: space-between;
}
.dash-chart-title {
  margin: 0;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-700);
}
.dash-chart-canvas-wrap {
  position: relative;
  height: 220px;
}
.dash-chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.range-chips {
  display: inline-flex; gap: 4px;
  background: var(--ink-100);
  border-radius: 8px;
  padding: 2px;
}
.range-chips button {
  background: transparent; border: 0;
  padding: 4px 10px; border-radius: 6px;
  font: 600 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink-500); cursor: pointer;
}
.range-chips button.active {
  background: var(--card-bg);
  color: var(--ink-900);
  box-shadow: 0 1px 2px rgba(15,23,42,.12);
}