:root {
  color-scheme: light;
  --surface-1:      #ffffff;
  --page:           #f9f9f7;
  /* text and numbers: always black on white */
  --text-primary:   #000000;
  --text-secondary: #000000;
  --text-muted:     #000000;
  /* grey for non-text marks (timeline month ticks) and pending Verlauf entries */
  --mark-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --series-1:       #96B0D5;
  --status-good:    #0ca30c;
  --status-good-text: #006300;

  /* CI/CD brand colors */
  --brand-charcoal: #2C2F36;
  --brand-blue:      #96B0D5;
  --brand-taupe:     #A19582;
  --brand-sage:      #778C77;

  /* CI ink for thin UI marks (timeline, controls): Schiefer on light */
  --ink:             #2C2F36;
  /* timeline text: solid, full opacity for readability */
  --tl-text:         #000000;

  /* Map colour levels, low to high (see LEVELS in app.js).
     PLACEHOLDER colours until the final palette is decided. */
  --level-0: #A19582; /* Offen */
  --level-1: #F2D16B; /* abgesteckt */
  --level-2: #F0A04B; /* gebohrt */
  --level-3: #E0664F; /* bereit Vormontage */
  --level-4: #B15BC8; /* Sekundär montiert */
  --level-5: #2BB3A6; /* verkabelt */
  --level-6: #0ca30c; /* produktiv */
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --mark-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);
    --series-1:       #96B0D5;
    --status-good:    #0ca30c;
    --status-good-text: #0ca30c;
    --ink:              #F4F4F5;
    --tl-text:          #ffffff;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top bar: logo at the far left, project name in the exact centre, and the page
   subtitle centred in the space between the two. The equal 1fr side columns keep
   the middle column centred on the bar. */
.topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  /* the dark area is 56px high, like the main navigation bar on zendra.ch (3.5rem);
     the 3px line below comes on top */
  min-height: calc(56px + 3px);
  padding: 0 20px;
  background: var(--brand-charcoal);
  border-bottom: 3px solid var(--brand-sage);
}
.topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.topbar-logo { display: block; height: 22px; width: auto; flex: 0 0 auto; }
.topbar-sub {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 20px; /* T1 */
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar h1 {
  font-size: 20px; /* T1 */
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  color: #fff;
}

.topbar-controls {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  /* narrow: logo + subtitle on the left, project name on the right, source below */
  .topbar { grid-template-columns: 1fr auto; row-gap: 4px; padding: 8px 16px; }
  .topbar-sub { text-align: left; font-size: 16px; }
  .topbar h1 { font-size: 16px; }
  .topbar-controls { grid-column: 1 / -1; justify-self: start; }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}
.field span { font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 10px; }
.field select, .field input {
  font: inherit;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--baseline);
  background: var(--surface-1);
  color: var(--text-primary);
  min-width: 200px;
  accent-color: var(--brand-sage);
}
/* Datenstand + Quelle, right-aligned in the top bar (T3, white on Schiefer) */
.source-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-size: 12px;
  line-height: 1.3;
  color: #ffffff;
  white-space: nowrap;
  cursor: help;
}
.source-stand { font-weight: 600; font-variant-numeric: tabular-nums; }
/* T4 label size and weight, but in normal case ("Quelle: ZENDRA") */
.source-origin { font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: 1px; }
@media (max-width: 700px) {
  .source-info { align-items: flex-start; }
}

.field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.field-checkbox span { font-size: 12px; text-transform: none; font-weight: 500; }
.field-checkbox input { min-width: 0; width: 15px; height: 15px; }

/* ---- table number layer (labels.js) ---- */
/* the canvas with row ranges and table numbers; hidden during the zoom animation and
   faded in once redrawn */
.table-label-canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.table-label-canvas.is-hidden { opacity: 0; transition: none; }
/* sector pills (overview zoom): T3, white box, square; a click zooms to the sector */
/* the marker's own box has no size and takes no clicks: only the visible pill (which
   is shifted to its centre and away from neighbours) is clickable */
.sector-pill { background: none; border: none; width: 0 !important; height: 0 !important; pointer-events: none !important; }
.sector-pill .sector-pill-btn { pointer-events: auto; }
.sector-pill-btn {
  transform: translate(-50%, -50%);
  padding: 8px 10px;
  font: inherit;
  text-align: left;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  cursor: pointer;
}
.sector-pill-btn:hover { border-color: var(--ink); }
.sector-pill-btn:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 2px; }
/* sector content, the same in the pill and in the docked sector card */
.sector-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 168px;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}
/* title (T2) with the table-number range (T3) on the right */
.sector-info .sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.sector-info .sp-title { font-size: 14px; font-weight: 600; }
.sector-info .sp-range,
.sector-info .sp-st b { font-variant-numeric: tabular-nums; }
.sector-info .sp-count { margin-bottom: 2px; }
/* the largest statuses: swatch, name, share on the right; the highlighted one bold */
.sector-info .sp-st { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 6px; }
.sector-info .sp-st i { width: 10px; height: 10px; }
.sector-info .sp-st b { font-weight: 600; }
.sector-info .sp-st.is-active { font-weight: 600; }
/* a highlighted status that isn't among the largest: an extra line, set slightly apart */
.sector-info .sp-st.is-extra { margin-top: 5px; }
.sector-info .sp-bar {
  display: flex;
  height: 4px;
  margin-top: 4px;
  background: var(--gridline);
}
.sector-info .sp-bar span { height: 100%; }

/* ---- sector focus (sector-focus.js) ---- */
/* the clicked pill, docked at the top left of the map; it glides here from the pill */
.sector-card {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1001;
  padding: 4px 10px 10px;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 150ms ease;
}
.sector-card.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s 150ms;
}
/* ‹ › neighbouring sector, × back to the overview */
.sc-nav { display: flex; gap: 4px; margin: 0 -6px 4px; }
.sc-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  color: var(--text-primary);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.sc-btn:hover { border-color: var(--ink); }
.sc-btn:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 1px; }
.sc-close { margin-left: auto; }
/* the lines from the card to the sector's parts: white with a dark halo, like the
   table numbers */
.sector-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow: visible;
  pointer-events: none;
  opacity: 0.7;
}
/* the outline around the focused sector, as transparent as the lines (as a whole, so
   the halo doesn't show through the white line) */
.leaflet-sectorOutline-pane { opacity: 0.7; }
.sector-link path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sector-link .sl-halo { stroke: rgba(0, 0, 0, 0.35); stroke-width: 5; }
.sector-link .sl-line { stroke: #fff; stroke-width: 2; }
@media (max-width: 600px) {
  .sector-card { left: 8px; right: 8px; top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sector-card { transition: none; }
}

/* Grid: timeline top-left, map below it across the full width, and the right panel
   floating over the map's right edge, only as tall as its content. */
.layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 352px; /* right panel width (also PANEL_W in app.js) */
  grid-template-rows: auto 1fr;
}
.map-pane { display: contents; }
.timeline { grid-column: 1; grid-row: 1; }
.map-wrap { grid-column: 1 / 3; grid-row: 2; }
.right-col {
  /* holds the right panel, floating over the map's right edge; the panel is only as
     tall as its content and scrolls once it would outgrow the window */
  grid-column: 2; grid-row: 1 / 3; z-index: 1000;
  align-self: stretch; min-height: 0;
  display: flex; flex-direction: column;
  pointer-events: none; /* the empty space below the panel lets clicks reach the map */
}
.right-col > * { pointer-events: auto; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: auto 60vh auto; overflow-y: auto; } /* stays window-high and scrolls */
  /* ".layout >" so these win over the base rules further down */
  .layout > .map-pane > .map-wrap { grid-column: 1; grid-row: 2; }
  .layout > .right-col { grid-column: 1; grid-row: 3; align-self: stretch; max-height: none; min-height: auto; }
  .layout > .right-col > .side-pane { flex: none; overflow: visible; border-left: none; }
}

.map-wrap { position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #ddd; }

.legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 500;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.legend-item { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.swatch { width: 14px; height: 0; border-top: 2px solid; display: inline-block; }
.swatch-done { border-color: var(--status-good); }
.swatch-open { border-color: var(--brand-taupe); }

.brand-badge {
  position: absolute;
  bottom: 30px;
  right: 10px;
  z-index: 500;
  /* fixed white regardless of light/dark mode: the logo artwork is black-on-transparent
     and needs a light backing to stay visible in both themes */
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 6px 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}
.brand-badge:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.brand-badge img { height: 33px; width: auto; display: block; }
/* hidden for now (markup kept) */
.brand-badge { display: none; }

/* Zoom control (bottom left): square and flat, per CI */
.leaflet-bar { border: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.leaflet-bar a,
.leaflet-bar a:first-child,
.leaflet-bar a:last-child { border-radius: 0; color: var(--brand-charcoal); }

/* Background switch (basemap.js): its button sits to the right of the zoom buttons,
   bottom-aligned with them, and looks like one of them */
.leaflet-bottom.leaflet-left { display: flex; align-items: flex-end; }
.basemap-control { order: 1; } /* Leaflet inserts it before the zoom control */
.basemap-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--brand-charcoal);
  background: #fff;
  border: none;
  cursor: pointer;
}
.leaflet-touch .basemap-button { width: 30px; height: 30px; }
.basemap-button:hover { background: #f4f4f4; }
.basemap-button:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 1px; }
.basemap-control.is-open .basemap-button { color: #fff; background: var(--brand-charcoal); }

/* the menu opens upwards, left-aligned with the button; styled like the sector card */
.basemap-menu {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  min-width: 210px;
  padding: 8px 0 6px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; /* Leaflet sets its own */
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.basemap-control.is-open .basemap-menu { display: block; }
/* T4 */
.basemap-title {
  padding: 0 12px 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.basemap-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 6px 12px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
.basemap-item:hover { background: var(--gridline); }
.basemap-item:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: -2px; }
/* square selection mark, filled for the shown layer */
.basemap-mark {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 1px solid var(--ink);
}
.basemap-item[aria-pressed="true"] .basemap-mark { background: var(--ink); }
.basemap-text { display: flex; flex-direction: column; gap: 1px; }
.basemap-name { font-size: 14px; font-weight: 600; line-height: 18px; } /* T2 */
.basemap-note { font-size: 12px; line-height: 1.3; }                    /* T3 */

/* ---- timeline (as-of date) ---- */
/* 56px white + 1px line, the same height as the top bar's dark area. The timeline
   object (handle, axis and tick labels) is centred as a whole in those 56px. */
.timeline {
  --tl-pad: 9px; /* space above the slider; the axis sits 10px below it */
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  height: 57px;
  padding: 0 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  color: var(--tl-text);
}
/* T2; its 20px line box is centred on the axis line */
.tl-end {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  color: var(--tl-text);
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  white-space: nowrap;
  margin-top: var(--tl-pad);
}
.tl-end:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-end:focus-visible,
.tl-track input:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 2px; }

/* handle top (axis - 7px) to tick-label bottom (axis + 26px) is centred in the 56px:
   9px space above the 20px slider, the labels below */
.tl-track { flex: 1 1 auto; position: relative; min-width: 0; padding-top: var(--tl-pad); height: 56px; }
/* Range input: 2px hairline track, the elapsed part in ink, a square thumb */
/* --pct-data / --data are set by app.js (trackStop): ink up to the handle, light grey up
   to the newest data, dashed grey after it (no new information there) */
.tl-track input {
  --pct-data: 100%;
  --data: 100%;
  --tl-track-bg:
    linear-gradient(to right, var(--ink) 0 var(--pct-data), var(--baseline) var(--pct-data) var(--data), transparent var(--data)),
    repeating-linear-gradient(to right, var(--mark-muted) 0 3px, transparent 3px 6px);
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.tl-track input::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--tl-track-bg);
}
.tl-track input::-moz-range-track { height: 2px; background: var(--tl-track-bg); }
.tl-track input::-moz-range-progress { background: transparent; }
.tl-track input::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: content-box; /* 10px + 2px border each side = 14px */
  width: 10px;
  height: 10px;
  margin-top: -6px;
  background: var(--ink);
  border: 2px solid var(--surface-1);
  border-radius: 0;
}
.tl-track input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: var(--ink);
  border: 2px solid var(--surface-1);
  border-radius: 0;
}

/* Month ticks sit under the track; inset by half the thumb so they line up with it */
.tl-ticks { position: absolute; left: 7px; right: 7px; top: calc(var(--tl-pad) + 12px); height: 26px; pointer-events: none; }
.tl-tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--mark-muted); }
.tl-tick-year { height: 7px; background: var(--tl-text); }
.tl-tick-label {
  position: absolute;
  /* months and years share one 16px line box, so both sit on the same centre line */
  top: 8px;
  left: 0;
  transform: translateX(-50%);
  font-size: 12px; /* T3 */
  line-height: 16px;
  color: var(--tl-text);
  white-space: nowrap;
}
.tl-tick-year .tl-tick-label { font-size: 14px; font-weight: 600; } /* T2 */
@media (max-width: 700px) {
  .timeline { gap: 12px; padding: 0 16px; }
  .tl-end { display: none; }
  .tl-tick:not(.tl-tick-year) .tl-tick-label { display: none; }
}

.side-pane {
  /* only as tall as its content; scrolls if the content outgrows the window */
  flex: 0 1 auto;
  min-height: 0;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0 16px 16px; /* top: the Stand section has its own fixed height */
  overflow-y: auto;
  scroll-padding-top: 57px; /* scrolling something into view keeps it clear of the pinned Stand box */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* No frame; the 7px inset lines the text up with the status squares below
   (.bar-row: 6px padding + 1px border). */
.stat-tile {
  padding: 4px 7px 0;
}
.stat-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.stat-value {
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.15;
}
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.stat-sub strong { color: var(--text-primary); font-weight: 700; }

/* T2 */
.chart-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; padding: 0 7px; color: var(--text-primary); }
/* T1: the as-of date from the timeline, at the top of the panel */
/* Stand section: 56px + 1px line, the same as the timeline, so both lines continue into
   each other; the line spans the full panel width (hence the -16px margins) */
.panel-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  height: 57px;
  margin: 0 -16px;
  padding: 0 23px; /* 16px panel padding + the 7px content inset */
  border-bottom: 1px solid var(--border);
  font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--text-primary);
  /* pinned to the panel's top: when the panel scrolls (long content, or selecting a
     table scrolls Tisch-Details into view), the content passes underneath and the box
     stays as high as the timeline next to it */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
}
@media (max-width: 860px) {
  /* phone: the panel sits below the map and scrolls with the page */
  .layout > .right-col .panel-date { position: static; }
}
.panel-date output { font-variant-numeric: tabular-nums; }
/* "Daten bis …": T3, under the date, only when the chosen date is after the newest data */
.pd-note { font-size: 12px; font-weight: 400; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pd-note:empty { display: none; }
/* the three stat lines are hidden for now (markup and logic kept) */
.stat-tile { display: none; }
/* the line above the status list is the Stand section's bottom line */

.bar-chart { display: flex; flex-direction: column; gap: 6px; }
.bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.bar-row:hover { background: var(--gridline); }
.bar-row:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 2px; }
.bar-row.active {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 10%, transparent);
}
/* Row head grid: status name | values. The values column starts near the middle of
   the row: Aktuell left-aligned there, Total right-aligned at the row's edge. */
.bar-row-head,
.bar-cols-head {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  align-items: baseline;
  font-size: 12px;
  color: var(--text-secondary);
}
.bar-row-head .level-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row-head .n,
.bar-cols-head .n { display: flex; gap: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-tot { margin-left: auto; } /* Total always sits at the right edge */
.n-cell { color: var(--text-secondary); }
.n-cell strong { color: var(--text-primary); font-weight: 600; }
/* produktiv stands apart from the other statuses */
.bar-row-top { margin-bottom: 10px; }
/* "Tische total" description row above Produktiv: same inset and value column as the rows */
.bar-total-row { padding: 0 7px 2px; }
.total-label { margin-right: 8px; } /* label sits directly left of the number */
/* Offen stands apart at the bottom, with the same gap */
.bar-row-bottom { margin-top: 10px; }
/* column header between produktiv and the other rows; padding matches .bar-row */
.bar-cols-head {
  padding: 0 7px;
  margin: 0 0 -6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* AKTUELL / TOTAL: icon + label form one hover box */
.col-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  cursor: help;
}
/* the negative margin above would otherwise cancel the auto margin that keeps Total at
   the right edge (.n-tot) */
.col-info.n-tot { margin-left: auto; }
.col-info:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 0; }
.info-icon { width: 11px; height: 11px; flex: 0 0 auto; }

/* the info box: floats to the left of the panel; only a short opacity fade, no movement */
.col-info-pop {
  position: fixed;
  z-index: 1100;
  width: 240px;
  padding: 10px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}
.col-info-pop.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 150ms ease, visibility 0s;
}
.col-info-title { display: block; font-weight: 600; margin-bottom: 2px; }
#colInfoText { white-space: pre-line; } /* a line break (\n) in an info text starts a new line */
@media (prefers-reduced-motion: reduce) {
  .col-info-pop, .col-info-pop.is-visible { transition: none; }
}

.bar-track {
  height: 10px;
  background: var(--gridline);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--series-1);
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.25s ease;
}
.bar-row.active .bar-fill { background: var(--status-good); }

/* Level view: the right panel is the map legend */
.level-name { display: inline-flex; align-items: center; gap: 6px; }
.level-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
  vertical-align: -1px;
}
.table-info dd .level-swatch { margin-right: 5px; }
.bar-track { position: relative; }
.bar-fill { position: relative; }
.bar-fill-cum { position: absolute; left: 0; top: 0; opacity: 0.35; }

/* In the level view the done/open legend and the status dropdown are hidden
   (markup and logic kept for the binary view). */
body[data-map-mode="levels"] .legend,
body[data-map-mode="levels"] .field-status { display: none; }
/* Collapsible sections in the right panel: Tisch-Details on its own, then the foot
   (Informationen, Einstellungen). Headings and content use the panel's 7px inset, so
   they line up with the date and the status squares. */
.panel-foot { margin-top: 8px; } /* + the panel's 16px gap = 24px below the status list */
.settings {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 12px;
}
.settings summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 4px 7px;
  font-size: 14px; /* T2 */
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.settings summary::-webkit-details-marker { display: none; }
.settings summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.settings[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.settings summary:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 2px; }
.settings-body { display: flex; flex-direction: column; gap: 8px; padding: 8px 7px 12px; }
.ti-hint { margin: 0; line-height: 1.5; color: var(--text-secondary); }
/* the "Tisch-Nr. anzeigen" switch at the bottom of Tisch-Details, set off by a hairline */
.ti-option { padding-top: 8px; border-top: 1px solid var(--border); }
.ti-option + .ti-option { padding-top: 0; border-top: none; } /* a second switch directly below */
.ti-hint.hidden { display: none; }
.settings + .settings { margin-top: 2px; }
.about p { margin: 0; line-height: 1.5; color: var(--text-primary); }
.about strong { font-weight: 600; } /* T3 bold */
.about-note-title { display: block; font-size: 12px; margin-bottom: 2px; } /* T3 bold */
.about-note {
  margin-top: 4px !important;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px; /* T3 */
  color: var(--text-secondary) !important;
}
/* Switch row: label left, switch right; the knob slides left (off) to right (on).
   Square like the rest of the CI (timeline handle, zoom buttons). */
.opt-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--text-primary);
  min-height: 24px;
}
.opt-switch input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 18px;
  margin: 0;
  background: var(--baseline);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.opt-switch input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  transition: transform 0.2s ease;
}
.opt-switch input:checked { background: var(--ink); }
.opt-switch input:checked::before { transform: translateX(16px); background: var(--surface-1); }
.opt-switch input:focus-visible { outline: 2px solid var(--brand-taupe); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .opt-switch input, .opt-switch input::before { transition: none; }
}

.table-info {
  position: relative;
  font-size: 12px;
}
.table-info.hidden { display: none; }
.table-info h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 10px; } /* T3 bold */
.ti-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; }
.table-info h4 { margin: 8px 0 3px; font-size: 12px; font-weight: 600; color: var(--text-primary); } /* T3 bold */
.table-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.table-info dt { color: var(--text-muted); }
.table-info dd { margin: 0; font-variant-numeric: tabular-nums; }
.table-info ul { margin: 0; padding-left: 18px; }
.table-info li { margin: 0; line-height: 1.45; }
.table-info li.done { color: var(--status-good-text); }
.table-info li.pending { color: var(--mark-muted); }

.leaflet-popup-content { font-size: 12px; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-charcoal);
}
.gate.hidden { display: none; }
.gate-box {
  width: 280px;
  background: var(--surface-1);
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  text-align: center;
}
.gate-box h2 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
.gate-box p { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); }
.gate-box input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--baseline);
  background: var(--page);
  color: var(--text-primary);
  margin-bottom: 10px;
}
.gate-box button {
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 10px;
  border-radius: 6px;
  border: none;
  background: var(--brand-blue);
  color: #0b0b0b;
  cursor: pointer;
}
.gate-box button:disabled { opacity: 0.6; cursor: default; }
.gate-error { min-height: 16px; margin-top: 8px; font-size: 12px; color: #e34948; }