/* ── Dashboard: Sensor Overview ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  --db-bg:          #ffffff;
  --db-surface:     #f6fdf8;
  --db-border:      rgba(25,135,84,.15);
  --db-border-hi:   rgba(25,135,84,.3);
  --db-text:        #1a2e1a;
  --db-muted:       #6b9e78;
  --db-cyan:        #198754;
  --db-cyan-dim:    rgba(25,135,84,.08);
  --db-green:       #198754;
  --db-green-dim:   rgba(25,135,84,.08);
  --db-orange:      #92671a;
  --db-orange-dim:  rgba(146,103,26,.1);
  --db-red:         #b91c1c;
  --db-red-dim:     rgba(185,28,28,.08);
  --db-mono:        'Inter', system-ui, monospace;
  --db-sans:        'Inter', system-ui, sans-serif;
}

/* ── Wrapper ── */
.db-wrap {
  font-family: var(--db-sans);
  background: linear-gradient(135deg, rgba(25,135,84,.06), rgba(25,135,84,.02));
  border: 1px solid rgba(25,135,84,.2);
  border-left: 3px solid #198754;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  color: var(--db-text);
}

/* ── Header bar ── */
.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--db-border);
  background: transparent;
}
.db-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #198754;
  animation: db-pulse 2s ease-in-out infinite;
}
.db-pulse.db-pulse--offline { background: var(--db-red); animation: none; }
@keyframes db-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}
.db-header-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #198754;
}
.db-header-right {
  font-size: 11px;
  color: #aaa;
}

/* ── Stat row ── */
.db-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--db-border);
}
.db-stat {
  padding: 14px 18px;
  border-right: 1px solid var(--db-border);
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.db-stat:last-child { border-right: none; }
.db-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s;
}
.db-stat:hover::before { opacity: 1; }
.db-stat--cyan::before  { background: rgba(25,135,84,.06); }
.db-stat--green::before { background: rgba(25,135,84,.06); }
.db-stat--ok::before    { background: rgba(25,135,84,.06); }

.db-stat-icon {
  font-size: 1rem;
  margin-bottom: 6px;
  display: block;
}
.db-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #198754;
  margin-bottom: 5px;
}
.db-stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: #198754;
}
.db-stat--cyan  .db-stat-value { color: #198754; }
.db-stat--green .db-stat-value { color: #198754; }
.db-stat-trend {
  margin-top: 6px;
  font-size: 11px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 4px;
}
.db-trend-up   { color: #198754; }
.db-trend-same { color: #198754; }
.db-trend-down { color: var(--db-red); }

/* ── Two-col body ── */
.db-body {
  display: grid;
  grid-template-columns: 260px 1fr;
}
@media (max-width: 768px) {
  .db-body  { grid-template-columns: 1fr; }
  .db-stats { grid-template-columns: 1fr; }
  .db-stat  { border-right: none; border-bottom: 1px solid var(--db-border); }
}

/* ── Sensor roster (left) ── */
.db-roster {
  border-right: 1px solid var(--db-border);
  padding: 16px;
}
.db-roster-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #198754;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.db-roster-badge {
  background: rgba(25,135,84,.08);
  color: #198754;
  border: 1px solid rgba(25,135,84,.2);
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}
.db-sensor-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  margin-bottom: 3px;
  transition: background .2s;
  border: 1px solid transparent;
}
.db-sensor-item:hover { background: rgba(25,135,84,.04); }
.db-sensor-item--active {
  background: rgba(25,135,84,.06);
  border-color: rgba(25,135,84,.18);
}
.db-sensor-item--unused { opacity: .5; }

.db-sensor-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.db-sensor-item--active .db-sensor-dot {
  background: #198754;
  box-shadow: 0 0 5px rgba(25,135,84,.5);
}
.db-sensor-item--unused .db-sensor-dot { background: #ccc; }

.db-sensor-icon { font-size: .9rem; flex-shrink: 0; }
.db-sensor-name {
  font-size: 12px;
  font-weight: 500;
  flex: 1;
  color: var(--db-text);
}
.db-sensor-item--unused .db-sensor-name { color: #aaa; }
.db-sensor-status {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.db-sensor-item--active .db-sensor-status {
  color: #198754;
  background: rgba(25,135,84,.1);
}
.db-sensor-item--unused .db-sensor-status {
  color: #aaa;
  background: rgba(0,0,0,.05);
}

/* ── Right panel ── */
.db-right { display: flex; flex-direction: column; }

/* ── Readings timeline ── */
.db-timeline {
  padding: 16px 18px;
  border-bottom: 1px solid var(--db-border);
  flex: 1;
}
.db-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #198754;
  margin-bottom: 12px;
}
.db-reading-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(25,135,84,.07);
}
.db-reading-row:last-child { border-bottom: none; }
.db-reading-time {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 36px;
}
.db-reading-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.db-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(25,135,84,.06);
  border: 1px solid rgba(25,135,84,.18);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 12px;
  color: var(--db-text);
  transition: border-color .2s, background .2s;
}
.db-chip:hover {
  border-color: #198754;
  background: rgba(25,135,84,.12);
}
.db-chip-icon { font-size: .8rem; }

/* ── Metrics row ── */
.db-metrics {
  padding: 16px 18px;
  border-top: 1px solid var(--db-border);
}
.db-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 900px) {
  .db-metrics-grid { grid-template-columns: repeat(4, 1fr); }
}
.db-metric-card {
  background: rgba(25,135,84,.04);
  border: 1px solid rgba(25,135,84,.15);
  border-radius: 8px;
  padding: 12px 14px;
  transition: border-color .2s, transform .2s;
}
.db-metric-card:hover {
  border-color: rgba(25,135,84,.35);
  transform: translateY(-1px);
}
.db-metric-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #198754;
  margin-bottom: 2px;
}
.db-metric-sub {
  font-size: 10px;
  color: #aaa;
  margin-bottom: 8px;
}
.db-metric-bar-wrap {
  height: 4px;
  background: rgba(25,135,84,.12);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 7px;
}
.db-metric-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.db-metric-bar--good    { background: #198754; }
.db-metric-bar--warning { background: #92671a; }
.db-metric-bar--bad     { background: #b91c1c; }
.db-metric-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--db-text);
}
.db-metric-value--good    { color: #198754; }
.db-metric-value--warning { color: #92671a; }

/* ── Dark mode ── */
body.dark .db-wrap {
  background: linear-gradient(135deg, rgba(74,222,128,.06), rgba(74,222,128,.02));
  border-color: rgba(74,222,128,.15);
  border-left-color: #4ade80;
}
body.dark .db-header         { border-bottom-color: rgba(74,222,128,.1); }
body.dark .db-header-title,
body.dark .db-stat-label,
body.dark .db-stat-value,
body.dark .db-roster-title,
body.dark .db-section-title,
body.dark .db-metric-label   { color: #4ade80; }
body.dark .db-stat            { border-right-color: rgba(74,222,128,.1); }
body.dark .db-stats           { border-bottom-color: rgba(74,222,128,.1); }
body.dark .db-stat-trend,
body.dark .db-header-right,
body.dark .db-reading-time,
body.dark .db-metric-sub      { color: #4a6e4a; }
body.dark .db-roster-badge {
  background: rgba(74,222,128,.08);
  border-color: rgba(74,222,128,.2);
  color: #4ade80;
}
body.dark .db-sensor-item--active {
  background: rgba(74,222,128,.06);
  border-color: rgba(74,222,128,.18);
}
body.dark .db-sensor-item--active .db-sensor-dot  { background: #4ade80; }
body.dark .db-sensor-item--active .db-sensor-status { color: #4ade80; background: rgba(74,222,128,.1); }
body.dark .db-sensor-name   { color: #d4e8da; }
body.dark .db-border,
body.dark .db-roster        { border-color: rgba(74,222,128,.1); }
body.dark .db-reading-row   { border-bottom-color: rgba(74,222,128,.07); }
body.dark .db-chip {
  background: rgba(74,222,128,.06);
  border-color: rgba(74,222,128,.18);
  color: #d4e8da;
}
body.dark .db-chip:hover {
  border-color: #4ade80;
  background: rgba(74,222,128,.12);
}
body.dark .db-metric-card {
  background: rgba(74,222,128,.04);
  border-color: rgba(74,222,128,.15);
}
body.dark .db-metric-card:hover { border-color: rgba(74,222,128,.35); }
body.dark .db-metric-bar-wrap   { background: rgba(74,222,128,.1); }
body.dark .db-metric-bar--good  { background: #4ade80; }
body.dark .db-metric-value      { color: #d4e8da; }
body.dark .db-metric-value--good { color: #4ade80; }
body.dark .db-trend-up,
body.dark .db-trend-same        { color: #4ade80; }