/* MultiSensor AI dashboard — dark theme matching the existing Looker report.
   Palette sourced from ../design-system equivalents. */
:root {
  --canvas: #272727;
  --band: #3c3c3c;
  --card: #43596b;
  --card-hi: #4d6478;
  --steel: #517a9a;
  --text: #d9d9d9;
  --text-2: #c7cbce;
  --muted: #8a949c;
  --green: #4caf50;
  --blue: #2196f3;
  --line: #ffffff14;
  --accent: var(--steel);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: Roboto, "Open Sans", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header.topbar {
  background: var(--band);
  padding: 18px 28px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.brand h1 { font-size: 22px; font-weight: 500; margin: 0; }
.brand .sub { font-size: 12px; color: var(--muted); }
.brand .updated { margin-left: auto; font-size: 11px; color: var(--muted); }

nav.tabs { display: flex; gap: 2px; margin-top: 14px; }
nav.tabs button {
  background: transparent;
  color: var(--text-2);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .2px;
}
nav.tabs button:hover { color: #fff; }
nav.tabs button.active { color: #fff; border-bottom-color: var(--accent); }

main { padding: 24px 28px 60px; max-width: 1280px; margin: 0 auto; }
.page-title { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 2px; }
.page-title h2 { font-size: 30px; font-weight: 500; margin: 0; }
.page-title .range { font-size: 12px; color: var(--muted); margin-left: auto; }
.accent-stripe { height: 6px; border-radius: 2px; background: var(--accent); margin: 10px 0 22px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi {
  background: var(--card);
  padding: 18px 20px;
  border-radius: 4px;
}
.kpi .label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: .6px; }
.kpi .value { font-size: 30px; font-weight: 500; color: #fff; margin: 6px 0 2px; line-height: 1.1; }
.kpi .meta { font-size: 12px; color: var(--text-2); }
.kpi .meta .zero { color: var(--muted); }

.panel {
  background: #2f2f2f;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.panel h3 { font-size: 16px; font-weight: 500; margin: 0 0 14px; color: #fff; }
.panel .chart-wrap { position: relative; height: 280px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
td { color: var(--text); }
td.zero, .zero { color: var(--muted); }
tr:hover td { background: #ffffff08; }
.pill { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: #ffffff14; color: var(--text-2); }
.pill.enabled { background: #4caf5022; color: #9fd9a4; }
.pill.paused { background: #ffffff10; color: var(--muted); }

.bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 12px; font-size: 13px; }
.bar-track { background: #ffffff10; border-radius: 4px; height: 22px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-val { text-align: right; color: var(--text-2); }

.connect {
  background: var(--card);
  border: 1px dashed #ffffff33;
  border-radius: 6px;
  padding: 34px 28px;
  text-align: center;
}
.connect .dot { font-size: 30px; }
.connect h3 { margin: 8px 0 6px; color: #fff; font-weight: 500; }
.connect p { color: var(--text-2); font-size: 13px; max-width: 560px; margin: 0 auto; line-height: 1.5; }

.note { font-size: 12px; color: var(--muted); margin-top: -8px; margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) {
  .kpis, .grid-2 { grid-template-columns: 1fr; }
}