/* ==========================================================================
   assets/css/archiv.css — Layout der Archivansicht (archiv.php).

   Ladereihenfolge (Pflicht):  tokens.css → base.css → archiv.css.
   style.css wird hier NICHT mehr geladen; alles, was das Archiv aus dem
   alten Dashboard-Stylesheet gebraucht hat (Marke, Uhr, Fusszeile), steht
   deshalb hier.

   Regeln dieser Datei:
   - Keine Farbe ausserhalb der Tokens (kein #hex, kein rgba()).
   - `backdrop-filter` nur auf .topbar (kommt aus base.css).
   - Eine Fläche pro Ebene: .arch-view ist ein reiner Layout-Container,
     Karten liegen darin — nie Karte in Karte.
   ========================================================================== */

/* ==========================================================================
   1 · Kopfleiste
   ========================================================================== */
.topbar .brand { display: flex; flex-direction: column; min-width: 0; }
.topbar .brand h1 {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-5); font-weight: 700; line-height: var(--lh-tight);
  white-space: nowrap;
}
.topbar .brand .loc {
  font-size: var(--fs-2); color: var(--txt-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.clock { text-align: right; line-height: var(--lh-tight); }
.clock .time { font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; }
.clock .date { font-size: var(--fs-2); color: var(--txt-2); white-space: nowrap; }

.btn .bic  { font-size: var(--fs-4); line-height: 1; }
.btn .blbl { white-space: nowrap; }

/* Aktueller Zeitraum als Text – die Überschrift der ganzen Ansicht. */
.arch-title {
  min-width: 0; flex: 1 1 220px;
  font-size: var(--fs-4); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-title small { display: block; font-size: var(--fs-2); font-weight: 400; color: var(--txt-3); }

.footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-7);
  font-size: var(--fs-2); color: var(--txt-3);
}
.footer .spacer { flex: 1 1 auto; }

/* ==========================================================================
   2 · Seitenraster
   ========================================================================== */
.arch-shell { display: flex; flex-direction: column; gap: var(--gap); }

/* ==========================================================================
   3 · Bestands-Navigator (44 px, ganze Datenreichweite)
   ========================================================================== */
.arch-bestand {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}
.arch-bestand-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2); color: var(--txt-3);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.arch-bestand-head .spacer { flex: 1 1 auto; }
.arch-bestand-head b { color: var(--txt-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.arch-bestand-bar { position: relative; height: 44px; touch-action: pan-y; cursor: crosshair; }
.arch-bestand-bar svg { display: block; width: 100%; height: 100%; }
.arch-bestand-bar text { user-select: none; }

/* ==========================================================================
   4 · Kopfzeile der Ansicht: Skalenleiste + kontextabhängige Navigation
   Die Skalenleiste lebt hier, nicht in einer eigenen Vollkarte.
   ========================================================================== */
.arch-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
#arch-scale { flex: 0 0 auto; }
.arch-nav { display: flex; flex: 1 1 320px; min-width: 0; }
.arch-nav-block {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  width: 100%;
}
.arch-nav-block .spacer { flex: 1 1 auto; }
.arch-nav-block .lbl {
  font-size: var(--fs-2); color: var(--txt-3);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}

.arch-input {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  color: var(--txt);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
}
.arch-input:hover { background: var(--surface-3); }
select.arch-input { cursor: pointer; }
:root[data-theme="light"] .arch-input { color-scheme: light; }
:root[data-theme="dark"]  .arch-input { color-scheme: dark; }

/* ==========================================================================
   5 · Datenverfügbarkeit — liegt ÜBER der Hauptvisualisierung
   ========================================================================== */
.arch-avail { display: flex; flex-direction: column; gap: var(--sp-1); }
.arch-avail .avail-bar { margin-bottom: 0; height: 10px; }
.arch-note { font-size: var(--fs-2); color: var(--txt-3); }
.arch-note a { text-decoration: underline; }
.arch-note[data-level="warn"] { color: var(--warn); }

/* ==========================================================================
   6 · Kennzahlen
   ========================================================================== */
.arch-kpis .tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.arch-kpis .tile-val { font-size: var(--fs-5); }

/* ==========================================================================
   7 · Haupt- und Nebenbereich
   ========================================================================== */
#arch-main, #arch-sub { display: block; min-width: 0; }
.arch-view, .arch-sub-view { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* Diagrammraster: zwei Spalten, ab Tablet eine */
.arch-charts {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.arch-charts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) {
  .arch-charts, .arch-charts-3 { grid-template-columns: 1fr; }
}

.arch-card-head {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.arch-card-head > h2 { margin: 0; }
.arch-card-head .spacer { flex: 1 1 auto; }

/* Kennzahlenzeile unter jedem Canvas (Textalternative) */
.chart-alt span { white-space: nowrap; }
.chart-alt b { color: var(--txt-3); font-weight: 600; }
.chart-alt:empty { display: none; }

/* ==========================================================================
   8 · Tagesstreifen (Tagesskala) — eigenes Inline-SVG, kein Chart.js
   ========================================================================== */
.arch-band { width: 100%; height: clamp(96px, 13vh, 140px); }
.arch-band svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   9 · Kalender-Heatmap (Monatsskala)
   ========================================================================== */
.heat-wrap { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 560px; }
.heat-head {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
  font-size: var(--fs-1); color: var(--txt-3); text-align: center;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.heatmap button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; line-height: var(--lh-tight);
  border: 1px solid transparent;
}
.heatmap button:hover { border-color: var(--acc); }
.heatmap button .hd { font-size: var(--fs-1); opacity: .8; }
.heatmap button .hv { font-size: var(--fs-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.heatmap button[data-empty="1"] { color: var(--txt-3); }
.heatmap button[aria-current="date"] { border-color: var(--acc); }
.heatmap .pad { visibility: hidden; }

/* Farbskalen-Legende (Heatmap, Klimastreifen, Windrose) */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-1); color: var(--txt-3); }
.legend-item { display: inline-flex; align-items: center; gap: var(--sp-1); }
.legend-swatch {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 3px; border: 1px solid var(--line);
}
.legend-ramp { display: inline-flex; gap: 2px; }

/* ==========================================================================
   10 · Klimastreifen und Windrose (Jahresskala)
   ========================================================================== */
.stripes { --stripes-h: clamp(64px, 9vh, 104px); cursor: pointer; }
.stripes rect:hover { stroke: var(--txt); stroke-width: 1; }

.windrose { width: 100%; max-width: 420px; margin: 0 auto; }
.windrose svg { display: block; width: 100%; height: auto; }
.windrose text { fill: var(--txt-3); font-size: 10px; }

/* Monatskacheln der Jahresskala */
.arch-months {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.arch-months button {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--txt);
  cursor: pointer;
}
.arch-months button:hover { background: var(--surface-3); }
.arch-months .m-k { font-size: var(--fs-2); color: var(--txt-3); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.arch-months .m-v { font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; }
.arch-months .m-s { font-size: var(--fs-1); color: var(--txt-2); }

/* ==========================================================================
   11 · Tabellen (Dieser Tag in anderen Jahren, Serien)
   ========================================================================== */
.arch-table-wrap { overflow-x: auto; }
.arch-table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.arch-table th, .arch-table td {
  padding: var(--sp-2) var(--sp-3);
  text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.arch-table th {
  color: var(--txt-3); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.arch-table th:first-child, .arch-table td:first-child { text-align: left; }
.arch-table tbody tr:hover { background: var(--surface-2); }
.arch-table .lnk { color: var(--acc); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }

/* ==========================================================================
   12 · Export
   ========================================================================== */
.arch-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.arch-export-row .spacer { flex: 1 1 auto; }
/* Granularitäten, die zur Skala nicht passen, bleiben sichtbar aber inaktiv */
.seg-btn[disabled] { opacity: .45; cursor: default; }
.seg-btn[disabled]:hover { background: transparent; color: var(--txt-2); }

/* ==========================================================================
   13 · Kleinteile
   ========================================================================== */
.arch-empty {
  padding: var(--sp-6);
  text-align: center; color: var(--txt-3); font-size: var(--fs-3);
}
.arch-hint { font-size: var(--fs-2); color: var(--txt-3); }
.arch-keys { font-size: var(--fs-1); color: var(--txt-3); }
.arch-keys kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 5px;
  text-align: center; font: inherit;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-xs); color: var(--txt-2);
}

/* Direktbeschriftung der Serienenden (Pflicht neben der Legende) */
.series-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-2); }
.series-legend .sl {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  color: var(--txt-2);
}
.series-legend .sl i {
  width: 18px; height: 3px; border-radius: var(--r-pill);
  background: currentColor; display: inline-block;
}

/* ==========================================================================
   14 · Wetter-Tagebuch (Tagesskala)
   ========================================================================== */
.note-edit { display: flex; flex-direction: column; gap: var(--sp-3); }
.note-text {
  width: 100%; min-height: 84px;
  padding: var(--sp-3);
  line-height: var(--lh);
  font-variant-numeric: normal;
  resize: vertical;
}
.note-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.note-row .spacer { flex: 1 1 auto; }
.note-row .lbl {
  font-size: var(--fs-2); color: var(--txt-3);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.note-tags { flex: 1 1 180px; min-width: 0; }
.note-q     { flex: 1 1 240px; min-width: 0; }

/* Nur-Lese-Abbild der Notiz: auf dem Schirm zeigt das Formular den Text,
   auf Papier diese Fassung (print.css blendet um). */
.note-read { display: none; }
.note-body { white-space: pre-line; line-height: var(--lh); }
.note-tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tag {
  display: inline-block; padding: 1px var(--sp-2);
  font-size: var(--fs-1); color: var(--txt-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

/* Trefferliste der Volltextsuche */
.note-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.note-hit {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: baseline; gap: var(--sp-3);
  width: 100%; min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  text-align: left; cursor: pointer;
  color: var(--txt);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}
.note-hit:hover { background: var(--surface-3); }
.nh-date { font-size: var(--fs-2); color: var(--txt-3); font-variant-numeric: tabular-nums; }
.nh-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-tags { font-size: var(--fs-1); color: var(--txt-3); }

/* Punkt an der Kalenderzelle: „zu diesem Tag steht etwas im Tagebuch" */
.heatmap button { position: relative; }
.note-dot {
  position: absolute; top: 3px; right: 3px;
  width: 6px; height: 6px;
  background: var(--acc);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 1px var(--surface-1);
}
.note-dot-legend { position: static; display: inline-block; }

/* ==========================================================================
   15 · Ereignis-Chronik (Zeitstrahl in Monats- und Jahresskala)
   ========================================================================== */
.timeline { display: flex; flex-direction: column; gap: var(--sp-2); }
.timeline-year { max-height: 62vh; overflow-y: auto; }
.tl-btn {
  display: grid; grid-template-columns: 132px 24px minmax(0, 1fr);
  align-items: start; gap: var(--sp-3);
  width: 100%; min-height: var(--tap);
  padding: var(--sp-2) var(--sp-3);
  text-align: left; cursor: pointer;
  color: var(--txt);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--r-s);
}
.tl-btn:hover { background: var(--surface-3); }
.tl-when { font-size: var(--fs-2); color: var(--txt-3); font-variant-numeric: tabular-nums; }
.tl-mark { display: inline-flex; align-items: center; justify-content: center; color: var(--txt-2); }
.tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-title { font-weight: 700; }
.tl-sub { font-size: var(--fs-2); color: var(--txt-2); }

.tl-item[data-level="info"]   .tl-btn { border-left-color: var(--acc); }
.tl-item[data-level="warn"]   .tl-btn { border-left-color: var(--warn); }
.tl-item[data-level="danger"] .tl-btn { border-left-color: var(--danger); }
.tl-item[data-level="notiz"]  .tl-btn { border-left-color: var(--ok); }
.tl-item[data-level="warn"]   .tl-mark { color: var(--warn); }
.tl-item[data-level="danger"] .tl-mark { color: var(--danger); }
.tl-item[data-level="notiz"]  .tl-mark { color: var(--ok); }

/* ==========================================================================
   16 · Kompakte Schirme
   ========================================================================== */
@media (max-width: 900px) {
  .topbar .clock { display: none; }
  .arch-title { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .btn .blbl { display: none; }
  .arch-bestand-bar { height: 36px; }
  .arch-kpis .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note-hit { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tl-btn { grid-template-columns: 24px minmax(0, 1fr); }
  .tl-when { grid-column: 1 / -1; }
}

/* ==========================================================================
   17 · Druck — Grundlage; die Berichtsfassung steht in print.css
   ========================================================================== */
@media print {
  .arch-bestand, .arch-head, .arch-avail, #arch-export, .footer,
  #arch-offline, .arch-keys { display: none !important; }
  .arch-charts, .arch-charts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arch-view, .arch-sub-view { gap: 8px; }
  .chart-wrap, .chart-wrap-lg { height: 190px; }
}