/* Main dashboard: KPI strip, graph toolbar, collapsible sidebar sections.
 * Loads after 20_components and before 30_responsive, so the breakpoints
 * there still win. Selectors key off <label> + :has(input:checked) rather
 * than Dash's internal option classes, which changed between Dash 3 and 4. */

/* ---- sidebar: view picker + collapsible sections ---- */
#sidebar { padding: var(--space-3); }
.side-view { padding: var(--space-1) var(--space-1) var(--space-3); }
.side-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--sidebar-ink-muted);
}
.side-view .side-title { display: block; margin-bottom: var(--space-2); }

.side-sec { border-top: 1px solid var(--sidebar-border); }
.side-sec > summary {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  cursor: pointer; list-style: none; user-select: none;
}
.side-sec > summary::-webkit-details-marker { display: none; }
.side-sec > summary::before {
  content: "▸"; font-size: 10px; color: var(--sidebar-ink-muted);
  transition: transform 120ms ease; display: inline-block; width: 10px;
}
.side-sec[open] > summary::before { transform: rotate(90deg); }
.side-sec > summary:hover .side-title { color: var(--sidebar-ink); }
.side-meta, .side-link {
  margin-left: auto; font-size: 11.5px; color: var(--sidebar-ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.side-link { text-decoration: none; border-bottom: 1px dotted currentColor; }
.side-link:hover { color: var(--sidebar-ink); }
.side-body { padding: 0 var(--space-1) var(--space-3); }
.side-body > :first-child label:first-child { margin-top: 0; }

/* ---- center column ---- */
#main { gap: var(--space-2); }

/* KPI strip */
#kpi-strip {
  flex: none;
  display: grid;
  /* one row always: the tiles shrink rather than wrap, so the graph keeps
     its height on a laptop screen */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
#kpi-strip:empty { display: none; }
.kpi {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.kpi-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-500);
}
.kpi-value {
  font-size: clamp(14px, 1.15vw, 20px); font-weight: 650; color: var(--ink-900);
  font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.kpi-sub {
  font-size: 11.5px; color: var(--ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi.stale { background: #FBF6EA; border-color: #E8D9AE; }
.kpi.stale .kpi-value { color: var(--ink-500); }
.kpi.stale .kpi-sub { color: #8F6B1F; }

/* graph toolbar: range · custom dates · live ······ panel chips */
#graph-toolbar {
  flex: none;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--surface-muted);
}
.tb-spacer { flex: 1 1 0; }

/* segmented control (range) */
.seg-ctl {
  display: inline-flex; flex-wrap: wrap;
  background: var(--surface-muted); border-radius: var(--radius-sm); padding: 2px;
}
.seg-ctl label {
  margin: 0 !important; padding: 4px 10px; border-radius: 5px;
  font-size: 12.5px; color: var(--ink-700); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.seg-ctl input { position: absolute; opacity: 0; pointer-events: none; width: 0; }
.seg-ctl label:hover { color: var(--ink-900); }
.seg-ctl label:has(input:checked) {
  background: var(--surface-panel); color: var(--ink-900); font-weight: 600;
  box-shadow: 0 1px 2px rgba(31, 38, 27, 0.14);
}

/* chips (graph panels) */
.chip-ctl { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.chip-ctl label {
  margin: 0 !important; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border-default); background: var(--surface-panel);
  font-size: 12px; color: var(--ink-500); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.chip-ctl input { position: absolute; opacity: 0; pointer-events: none; width: 0; }
.chip-ctl label:has(input:checked) {
  background: var(--brand-100); border-color: var(--brand-400); color: var(--brand-700);
}

/* "live" toggle. #graph-toolbar scope: 20_components colours #follow-live
   labels white for the dark sidebar, which made "live" invisible here. */
#graph-toolbar .toggle label,
.toggle label {
  margin: 0 !important; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-700); cursor: pointer;
}
.toggle input { accent-color: var(--brand-500); }
#graph-toolbar .toggle label:has(input:checked),
.toggle label:has(input:checked) { color: var(--success); font-weight: 600; }

/* custom range now lives on the light toolbar, not the dark sidebar */
#graph-toolbar #custom-range-wrap {
  margin: 0; display: inline-flex; align-items: center; gap: var(--space-2);
}
#graph-toolbar #custom-range-wrap[style*="none"] { display: none !important; }
#graph-toolbar .DateRangePickerInput {
  border: 1px solid var(--border-default) !important; width: auto !important;
}
#graph-toolbar .hint { margin: 0; }

/* ---- full-viewport dashboard ----
 * #layout fills exactly the window under the top bar; nothing scrolls the
 * page. Each column scrolls on its own if it must: the sensor list, the
 * frame panel. The graph takes whatever height KPIs + toolbar leave. */
#layout {
  height: calc(100vh - var(--topbar-height));
  height: calc(100dvh - var(--topbar-height));
  min-height: 0;
  align-items: stretch;
  padding: var(--space-3);
  gap: var(--space-3);
}
#leftcol {
  width: var(--sidebar-width);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 0;
}
#leftcol #sidebar {
  position: static;
  width: auto;
  max-height: none;
  flex: 1 1 auto;
  min-height: 120px;           /* the still never squeezes the list to nothing */
  overflow-y: auto;
}
#main { height: auto; min-height: 0; }
#framepanel { min-height: 0; overflow-y: auto; }

/* Hikvision still, pinned under the sensor list */
#hikpanel {
  flex: none;
  padding: var(--space-2);
  border-top: 0;
  gap: var(--space-2);
}
#hik-bar { flex-wrap: wrap; row-gap: 0; padding: 0 var(--space-1); }
#hik-bar .hint { font-size: 11.5px; }
#hik-link { display: block; line-height: 0; cursor: zoom-in; }
#hik-img {
  width: 100%;
  max-height: 34vh;
  object-fit: cover;           /* fill the card; full frame is a click away */
  background: var(--surface-muted);
}

/* legend strip above the graph (built by update_graph) */
#graph-legend {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 2px var(--space-3);
  max-height: 50px; overflow-y: auto;     /* three rows, then scroll */
  font-size: 11.5px; line-height: 16px; color: var(--ink-700);
  padding: 0 var(--space-1);
}
#graph-legend:empty { display: none; }
.lg-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-swatch { width: 18px; height: 0; border-top: 2.5px solid; flex: none; }
.lg-dash { border-top-style: dashed; }
.lg-dot { border-top-style: dotted; }

/* the sidebar scrolls now; keep its scrollbar on the dark palette */
#leftcol #sidebar { scrollbar-width: thin; scrollbar-color: var(--sidebar-border) transparent; }

/* ---- top bar must fit the window: never wrap labels under their icons,
       tighten progressively instead ---- */
#topbar { grid-template-columns: var(--sidebar-width) minmax(0, 1fr) auto; }
.topbar-nav { min-width: 0; overflow: hidden; }
.nav-item { white-space: nowrap; }
@media (max-width: 1700px) {
  #live-info { display: none; }          /* trigger status; also on Trigger page */
}
@media (max-width: 1500px) {
  .nav-item { padding: 0 10px; font-size: 13px; }
  .topbar-nav { gap: 2px; }
  .topbar-actions { gap: var(--space-2); }
  .panel-size-label { display: none; }
}
.nav-item { gap: 6px; }
/* narrow: inactive pages show only their icon (full name in the tooltip) */
@media (max-width: 1800px) {
  .nav-item:not(.active) .nav-lbl { display: none; }
  .nav-item { padding: 0 10px; }
  .nav-ico { font-size: 16px; }
}
@media (max-width: 1250px) {
  #user-info { display: none; }
}

/* segmentation page: follow-live sits on the light page there, not in the
   dark sidebar that 20_components colours its label for */
#seg-controls #follow-live label { color: var(--ink-900); }

/* ---- segmentation sub-tabs (Leaves | Canopy) ---- */
.sub-tabs { display: flex; gap: 4px; flex: none; }
.sub-tab {
  padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-700); text-decoration: none;
  border: 1px solid var(--border-default); background: var(--surface-panel);
}
.sub-tab:hover { background: var(--surface-subtle); }
.sub-tab.active {
  background: var(--brand-100); border-color: var(--brand-400);
  color: var(--brand-700); font-weight: 600;
}

/* ---- canopy (pipe-exclusion) page: image left, controls right ---- */
#cn-wrap {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3);
  height: calc(100vh - var(--topbar-height));
  height: calc(100dvh - var(--topbar-height));
}
#cn-body { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--space-3); }
#cn-main {
  flex: 1 1 auto; min-width: 0;
  background: var(--surface-panel); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: var(--space-2); overflow: hidden;
}
#cn-main .dash-graph { height: 100%; }
#cn-side {
  width: 420px; flex: none; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
}
#cn-side .card { display: flex; flex-direction: column; gap: var(--space-2); }
.cn-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cn-h { font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.07em; color: var(--ink-500); }
.cn-row .cn-h { margin-right: auto; }
.cn-btn {
  height: 30px; padding: 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: var(--surface-panel);
  color: var(--ink-900); cursor: pointer; font-size: 12.5px;
}
.cn-btn:hover { background: var(--surface-subtle); }
#cn-side .btn-primary { height: 30px; padding: 0 12px; }
.cn-ctl { margin-top: 2px; }
.cn-lblrow { display: flex; align-items: baseline; gap: var(--space-2); }
.cn-lbl { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.cn-lblrow .hint { margin: 0; font-size: 11.5px; }
.cn-table { width: 100%; border-collapse: collapse; font-size: 12.5px;
            font-variant-numeric: tabular-nums; }
.cn-table th { text-align: right; font-size: 10.5px; color: var(--ink-500);
               font-weight: 600; padding: 2px 4px; }
.cn-table td { text-align: right; padding: 3px 4px; border-top: 1px solid var(--surface-muted); }
.cn-table td:first-child, .cn-table th:first-child { text-align: left; }
.cn-table tr.cn-best td { font-weight: 650; color: var(--brand-700); }
.cn-table tr.cn-dim td { color: var(--ink-500); }
#cn-side .chip-ctl label { font-size: 11.5px; padding: 2px 8px; }

@media (max-width: 1050px) {
  #cn-body { flex-direction: column; }
  #cn-main { min-height: 60vh; }
  #cn-side { width: 100%; overflow: visible; }
  #cn-wrap { height: auto; }
}