/**
 * Sensor list sidebar. Item markup is generated at runtime by sidebar_ui.js
 * (generateItemHTML) — .row1/.row2/.reading/.emoji/.name/.pin are its fixed
 * output contract. The .emoji glyph is DATA-DRIVEN (server can send any
 * sensor-specific emoji, purple-dot for PurpleAir, bus/pin fallbacks) so it
 * is deliberately not replaced with a fixed SVG set here — instead it gets a
 * proper icon-badge frame so it reads as an intentional icon slot rather
 * than a loose character, regardless of which glyph lands in it.
 */

.sidebarPanel {
  position: absolute;
  top: 68px;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: var(--z-panel);
  width: 310px;
  max-height: calc(100% - 80px);
  background: var(--ink-900);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(0);
  opacity: 1;
  transition: transform var(--ease-standard), opacity var(--ease-standard);
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.sidebarPanel.hidden {
  transform: translateX(-16px);
  opacity: 0;
  pointer-events: none;
}

.sidebarHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.sidebarTitle {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.sidebarClose {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--ink-800);
  color: var(--ink-500);
  font-size: var(--text-md);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease-standard), color var(--ease-standard);
}
.sidebarClose:hover { background: var(--ink-750); color: var(--ink-100); }

.sidebarPanel .tabBar {
  padding: 0 var(--space-4);
  margin: var(--space-3) 0;
  flex-shrink: 0;
}

.sidebarPanel .list {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-2) var(--space-4);
}

.tabBar { display: flex; gap: var(--space-2); }
.tab {
  flex: 1;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--ink-850);
  color: var(--ink-300);
  cursor: pointer;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background var(--ease-standard), border-color var(--ease-standard), color var(--ease-standard);
}
.tab:hover { border-color: var(--hairline-strong); }
.tab.active {
  border-color: var(--accent-live-line);
  background: var(--accent-live-dim);
  color: var(--accent-live);
}
.tab.disabled { opacity: 0.45; }
.tab.mini { flex: 0 0 36px; font-size: var(--text-md); padding: 0; }

.list { display: flex; flex-direction: column; gap: 0; }
.item {
  border-top: 1px solid var(--hairline);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--ease-standard);
}
.item:first-child { border-top: 0; }
.item:hover { background: var(--ink-850); }
.item.selected { background: var(--accent-live-dim); }
.item.ghosted { filter: saturate(0.5) brightness(0.82); }
.item.ghosted .name { color: var(--ink-300); }
.item.ghosted .reading .k { opacity: 0.65; }
.item.ghosted .pin { color: var(--ink-500); }

.row1 { display: flex; align-items: center; gap: var(--space-2); }
.emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--ink-800);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.name {
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  font-size: var(--text-md);
  color: var(--ink-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pin {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--ink-500);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.row2 {
  margin-top: var(--space-1);
  margin-left: 32px;
  font-size: var(--text-xs);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.reading { display: inline-flex; gap: 5px; align-items: baseline; }
.reading .k { opacity: 0.7; color: var(--ink-500); letter-spacing: 0.02em; }
.reading .v { font-weight: var(--weight-bold); }