/* Browser-App — Stil der Upload-Oberflaeche, des Dashboards und der
   Dokumentverwaltung.

   Quellschicht ist das Gruene-AT-Design-System v2.0 (--gat-*-/--gat-web-*-
   Token, per CDN geladen). Diese Datei ergaenzt nur App-spezifische
   Adapter-Aliase (--app-*) und die Basisstile, die das DS bewusst nicht
   mitliefert.

   Aufbau:
     1. App-Adapter-Token (:root)
     2. Basis- / Element-Stile
     3. Layout & Container
     4. App-spezifische Komponenten (.app-panel-fs-btn, .mark-*,
        .boot-banner, .dashboard-leer)
     5. Bedienelemente & app-spezifische Flaechen (Dropzone,
        Dokumentverwaltung, Fortschritt, Tabellen, Sankey-Leiste) */


/* ===========================================================================
   1. DESIGN-TOKEN
   ===========================================================================
   Die Web-Token-Schicht (--gat-web-*) liefert das org-weite DS v2.0 ueber
   das CDN-Stylesheet (design-system.css). Die App fuegt nur eine duenne
   Adapter-Schicht hinzu: semantische --app-*-Aliase, die aelterer App-Code
   mehrfach nutzt. --hair/--soft sind reine Flaechen-/Textaliase;
   --akzent-primaer/--risiko benennen Status-Rollen (Fortschritt, Sankey).
   Einmalig genutzte Aliase wurden auf die --gat-web-*-Token inline aufgeloest. */
:root {
  --app-hair: var(--gat-web-hairline);
  --app-soft: var(--gat-web-text-soft);
  --app-akzent-primaer: var(--gat-web-green-deep);
  --app-risiko: var(--gat-web-chart-5);
}


/* ===========================================================================
   2. BASIS- / ELEMENT-STILE
   ===========================================================================
   Das Gruene-AT-DS ist ein reines Token-/Komponenten-Stylesheet ohne Reset
   und ohne Element-Basisstile. Die folgenden Selektoren versorgen body,
   Ueberschriften, Tabellen und Formularfelder direkt aus den Tokens. */
body {
  font-family: var(--gat-font-copy);
  color: var(--gat-web-text);
  /* Ruhiger, leicht gruenstichiger Grundton statt hartem Weiss. */
  background: var(--gat-web-bg);
  line-height: var(--gat-leading-copy);
  margin: 0;
  font-size: var(--gat-text-copy);
}

/* Ueberschriften-Typografie: Barlow Semi Condensed ist von Natur aus schmal —
   Gewicht 900 macht es zusaetzlich laut. Ruhigere Skala laut
   docs/web-design-system.md: h1 -> 800, h2 -> 700, h3 -> 700 (kleiner).
   Farbe --gat-web-text statt schwarz. Vertikaler Rhythmus: h2 beginnt einen
   Abschnitt (grosser Oberabstand), h3 sitzt eng an seinem Inhalt. */
h1, h2, h3 {
  font-family: var(--gat-font-headline);
  /* Bewusst nicht --gat-leading-headline (0.9) — zu eng fuer mehrzeilige
     Dashboard-Ueberschriften. */
  line-height: 1.18;
  color: var(--gat-web-text);
}
h1 {
  font-size: var(--gat-text-h1);
  font-weight: 800;
}
h2 {
  font-size: var(--gat-text-h2);
  font-weight: 700;
  /* Abschnittstitel — beginnt einen neuen Block, grosser Oberabstand. */
  margin: var(--gat-space-6) 0 var(--gat-space-3);
}
h3 {
  /* Panel-/Diagrammtitel — kleiner als zuvor (zwischen h3 und subline),
     eng an den Inhalt gebunden, den er betitelt. */
  font-size: var(--gat-text-subline);
  font-weight: 700;
  margin: var(--gat-space-5) 0 var(--gat-space-2);
}
/* Erste Ueberschrift in einem Tab-Panel braucht keinen Extra-Oberabstand —
   die Steuerleiste darueber liefert ihn bereits. */
.tab-panel > .gat-section-head:first-child h2,
.tab-panel > h2:first-child {
  margin-top: var(--gat-space-3);
}
/* h2 als erstes Element eines Containers (Dokument-Sektion) titelt direkt
   seinen Inhalt — kein Abschnittsabstand. Panel-Koepfe regeln ihren
   eigenen Abstand selbst. */
.doc-manager-body section > h2:first-child {
  margin-top: 0;
}

table { border-collapse: collapse; }
input, select { font-family: var(--gat-font-copy); }
[hidden] { display: none !important; }


/* ===========================================================================
   3. LAYOUT & CONTAINER
   =========================================================================== */

/* Zentrierter, breiter Inhalts-Container: nutzt auf grossen Schirmen
   (4K) wirklich die Bildschirmbreite wie ein Dashboard, behaelt auf
   Ultra-Wide aber etwas Rand. Iteration 1 hatte ihn auf 1200px verengt —
   auf einem 4K-Monitor ein schmaler Streifen. Die Lesebreite des
   Fliesstextes wird separat pro Komponente gedeckelt (~70rem), nicht
   ueber den Container. Die breite 15-Spalten-Suchtabelle scrollt intern
   ueber .table-scroll und braucht den Container nicht zu sprengen.
   --gat-web-page-max liefert das DS v2.0 (CDN-Stylesheet). */
.page {
  max-width: var(--gat-web-page-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Fliesstext-Spalten auf eine angenehme Leseweite begrenzen — unabhaengig
   von der jetzt breiten .page; sonst liefen Saetze ueber 2000px. */
.app-intro,
.lead {
  max-width: 70rem;
}

/* Vorspann-Absatz unter dem Header. */
.app-intro {
  color: var(--app-soft);
  font-size: var(--gat-text-subline);
  line-height: var(--gat-leading-copy);
  margin: var(--gat-space-4) 0;
}

/* --- Hero — Auftakt der Seite ---------------------------------------------
   DS v2.0 liefert .gat-hero/.gat-hero__title/.gat-hero__intro. Lokal nur
   noch die App-eigene .lead-Klasse (Fliesstext-Vorspann unter h2). */
.lead {
  font-size: var(--gat-text-subline);
  line-height: var(--gat-leading-copy);
}

/* Seitenfuss — dezente Grundzeile. */
.footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gat-space-3);
  justify-content: space-between;
  margin-top: var(--gat-space-6);
  padding-top: var(--gat-space-3);
  border-top: 1px solid var(--app-hair);
  color: var(--app-soft);
  font-size: var(--gat-text-small);
}


/* ===========================================================================
   4. KOMPONENTEN
   =========================================================================== */

/* --- Markenleiste -----------------------------------------------------------
   DS v2.0 liefert .gat-header und alle Sub-Elemente (.gat-header__brand/
   __logo/__wordmark/__nav/__nav-list/__nav-current) mit gleicher Optik
   (weisse Flaeche, gruene Unterkante, prominentes Die-Gruenen-Logo, gruene
   Navigationslinks). Keine lokale Brandbar-Schicht mehr noetig. */

/* --- .gat-metric-card-Raster -----------------------------------------------
   Kennzahlen-Karten: weisse Flaeche, Haarlinie, weicher Schatten, farbiger
   3px-Akzentbalken oben, grosse tabular-nums-Zahl, kleines
   Grossbuchstaben-Label. Responsives 4-spaltiges Raster -> 2 -> 1. */
.stats {
  margin: var(--gat-space-4) 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gat-space-3);
}
/* Einspaltige Variante fuer einzelne Kennzahlen (z. B. Schuldendienst-Karte
   im Schulden-Tab) — eine Karte oben, volle Breite auf Tablet/Smartphone. */
.stats--einspalt {
  grid-template-columns: minmax(0, 22rem);
}
/* Lagebild-Raster: 4 Spalten (Desktop) -> 2 (Tablet) -> 1 (Smartphone).
   Breakpoints aus dem Design-System (48rem/36rem). */
@media (max-width: 48rem) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 36rem) {
  .stats { grid-template-columns: 1fr; }
}
/* DS v2.0 liefert .gat-metric-card mit allen Modifiern
   (--ertrag/--aufwand/--netto/--hero) und Sub-Elementen __num/__label.
   Markup nutzt jetzt .gat-metric-card__num/__label, daher entfaellt
   die lokale Stilebene fuer Karten und Beschriftungen. */

/* .stat-delta — App-spezifisches Lagebild-Detail (Vorjahres-/Soll-Ist-Delta
   in Prozent). Gruen wenn der Wert positiv waechst, clay wenn er sinkt
   (semantisch konsistent mit der Diagramm-Palette). Kein DS-Pendant. */
.stat-delta {
  font-size: 0.86rem;
  color: var(--gat-web-text-soft);
  font-variant-numeric: tabular-nums;
  margin-top: 0.18rem;
}
.stat-delta.is-up   { color: var(--gat-web-chart-1); }
.stat-delta.is-down { color: var(--gat-web-clay-text); }
/* .stat-pk — Pro-Kopf-Zeile. App-spezifisch — kein DS-Pendant. */
.stat-pk {
  font-size: 0.85rem;
  color: var(--gat-web-text-soft);
  font-variant-numeric: tabular-nums;
  margin-top: 0.18rem;
}

/* --- .gat-panel — App-spezifische Erweiterungen -------------------------
   DS v2.0 liefert .gat-panel mit allen Sub-Elementen (__head/__head-row/
   __body/__body--table/__note) und :fullscreen-Defaults. Hier nur die
   App-spezifischen Ergaenzungen: 2-Spalten-Raster-Anpassung, Sankey-Bar-
   Position im Panel-Kopf, und der Vollbild-Knopf (App-eigen, kein
   DS-Pendant). */

/* Panels in der 2-spaltigen .dash-grid fuellen ihre Rasterzelle ganz aus. */
.dash-grid > .gat-panel {
  margin: 0;
  height: 100%;
}
/* Die Sankey-Drill-down-Leiste sitzt im Panel-Kopf direkt unter dem Titel. */
.gat-panel__head .sankey-bar {
  margin: var(--gat-space-2) 0 0;
}

/* --- Panel-Aktionsknoepfe (Vollbild, Modal, PNG-Export) ------------------
   App-eigene Sekundaerknoepfe im Panel-Kopf — DS hat kein Pendant fuer
   diese sehr ruhige, beigefarbene Mini-Knopf-Optik. `.app-panel-fs-btn`
   ist der Native-Fullscreen-Knopf, `.app-panel-act-btn` die allgemeinere
   Klasse fuer die zusaetzlichen Knoepfe (Modal-Vollbild + PNG-Export);
   beide teilen sich Form und Verhalten. Die Reihe `.app-panel-actions`
   bundelt sie rechts vom Titel. */
.app-panel-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--gat-space-1);
  flex: none;
}
.app-panel-fs-btn,
.app-panel-act-btn {
  flex: none;
  font: inherit;
  font-family: var(--gat-font-headline);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--gat-web-hairline);
  background: var(--gat-web-surface);
  color: var(--gat-web-green-deep);
  border-radius: var(--gat-web-radius-control);
  padding: 0.28rem 0.7rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s,
    box-shadow 0.15s;
}
.app-panel-fs-btn:hover,
.app-panel-act-btn:hover {
  background: var(--gat-web-green-tint);
  border-color: var(--gat-web-green-deep);
}
.app-panel-fs-btn:focus-visible,
.app-panel-act-btn:focus-visible {
  outline: 2px solid var(--gat-web-green-deep);
  outline-offset: 2px;
  box-shadow: var(--gat-web-focus-ring);
}

/* --- Drill-Zurueck-Knopf (Treemap + Pie auf dem Ausgaben-Tab) ------------
   Im Gegensatz zu den ruhigen Vollbild-/Modal-/PNG-Knoepfen ist der
   „Zurueck"-Knopf eine Aktion mit klarem Effekt (Drill-Ebene wechseln) —
   etwas kraeftiger gezeichnet, damit er beim Drill sichtbar wird. */
.app-drill-back-btn {
  background: var(--gat-web-green-tint);
  border-color: var(--gat-web-green-deep);
  font-weight: 700;
}
.app-drill-back-btn:hover {
  background: var(--gat-web-green-deep);
  color: var(--gat-web-surface);
}

/* --- Diagramm-Vollbild-Modal — App-spezifische Layout-Erweiterungen ------
   Das DS-`.gat-modal` ist breit angelegt (max-width: min(64rem, 94vw)),
   aber fuer ein eingehaengtes Diagramm wollen wir den vollen Viewport
   nutzen — das ist der ganze Zweck der Vollbild-Aktion. Hoehe und Breite
   werden hier auf den Viewport gedeckelt, Body und Diagramm-Container
   teilen sich den Restraum als Flex-Spalte. */
/* Geschlossen: das DS-`.gat-modal { display: none }`-Default greift weiter
   — der Dialog ist unsichtbar. Nur im offenen Zustand wird die App-Layout-
   Geometrie angewendet (`display: flex` ueberschreibt den DS-Default). */
.app-chart-modal[open] {
  max-width: min(96rem, 98vw);
  width: 98vw;
  max-height: 96vh;
  height: 96vh;
  display: flex;
  flex-direction: column;
}
.app-chart-modal > .gat-modal__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--gat-space-2);
}
.app-chart-modal > .gat-modal__head .gat-modal__title {
  flex: 1 1 auto;
  margin: 0;
}
.app-chart-modal__head-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--gat-space-1);
  margin: 0;
}
.app-chart-modal__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* DS-Default deckelt das Body auf 70vh — hier nicht erwuenscht, der
     Diagramm-Container muss die gesamte Restflaeche bekommen. */
  max-height: none;
  overflow: auto;
}
/* Diagramm-Container im Modal: fuellt die verbleibende Hoehe, die feste
   Inline-Hoehe von dashboard.js wird ueberschrieben. ECharts wird beim
   Oeffnen und Schliessen per resize() neu vermessen (siehe app.js). */
.app-chart-modal__body .dash-chart {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}
/* Sankey-Drill-down-Brotkrumen behalten im Modal die Position direkt unter
   dem Titel. */
.app-chart-modal__body .sankey-bar {
  margin: 0 0 var(--gat-space-2);
}

/* --- Diagramm-Panel im Vollbild — App-spezifische Layout-Erweiterungen ---
   DS deckt .gat-panel:fullscreen-Basis ab (weisse Flaeche, kein Rahmen).
   Hier nur die App-eigenen Layout-Anpassungen: Flex-Spalte fuer Kopf/Body,
   .dash-chart fuellt verbleibende Hoehe, .drill-list scrollt. */
.gat-panel:fullscreen {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.gat-panel:fullscreen > .gat-panel__head {
  flex: none;
}
.gat-panel:fullscreen > .gat-panel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Diagramm-Container fuellt im Vollbild die verbleibende Hoehe statt der
   festen Inline-Hoehe; ECharts passt sich ueber den resize-Event an. */
.gat-panel:fullscreen .dash-chart {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
}
/* Im Vollbild aktive Bloecke (Drill-down-Liste) duerfen wachsen/scrollen. */
.gat-panel:fullscreen .drill-list {
  flex: 1 1 auto;
  overflow: auto;
}
/* Reiner Diagramm-Container — kein eigener Rahmen, Hintergrund oder
   Schatten. Behaelt id und Inline-Hoehe fuer die Dashboard-JS. */
.dash-chart {
  margin: 0;
}

/* --- Section-Head und Callout -----------------------------------------------
   DS v2.0 liefert .gat-section-head und .gat-callout direkt. Keine lokale
   Schicht mehr noetig. */

/* --- Inline-Hervorhebungen ------------------------------------------------
   Das DS kennt nur einen Highlight-Stil (gelb). Die dreifache Semantik der
   App (positiv / neutral / Risiko) wird daher lokal auf DS-Markenfarben
   nachgebaut — dezente farbige Unterstreichung mit hellem Tint. */
.mark-positiv,
.mark-neutral,
.mark-risiko {
  padding: 0.05em 0.15em;
  border-radius: var(--gat-radius-sm);
  font-weight: 600;
}
.mark-positiv {
  background: color-mix(in srgb, var(--gat-web-green-deep) 14%, white);
  border-bottom: 2px solid var(--gat-web-green-deep);
}
.mark-neutral {
  background: color-mix(in srgb, var(--gat-web-green) 16%, white);
  border-bottom: 2px solid var(--gat-web-green);
}
.mark-risiko {
  background: color-mix(in srgb, var(--gat-web-chart-5) 14%, white);
  border-bottom: 2px solid var(--gat-web-chart-5);
}

/* --- Boot-Fehlerbanner / Empty-State --------------------------------------
   Frueher Inline-<style> in index.html; hierher verschoben und auf Tokens
   umgestellt. */
.boot-banner {
  background: var(--gat-color-magenta);
  color: var(--gat-color-weiss);
  padding: var(--gat-space-2) var(--gat-space-3);
  font-family: var(--gat-font-copy);
  font-size: 0.95rem;
  line-height: 1.5;
}
.boot-banner strong {
  color: var(--gat-color-weiss);
}
/* Empty-State unter der Dokumentverwaltung: ruhiger, bewusst gesetzter
   Hinweis statt eines lose schwebenden Absatzes. */
.dashboard-leer {
  margin: var(--gat-space-4) 0 var(--gat-space-5);
  padding: var(--gat-space-4);
  border: 1px dashed var(--gat-web-hairline);
  border-radius: var(--gat-web-radius-card);
  background: var(--gat-web-surface-sunk);
  color: var(--gat-web-text-soft);
  text-align: center;
}
.dashboard-leer p {
  margin: 0;
  max-width: 44rem;
  margin-inline: auto;
}


/* ===========================================================================
   5. BEDIENELEMENTE & APP-SPEZIFISCHE FLAECHEN
   =========================================================================== */

/* --- Buttons --------------------------------------------------------------
   Das DS faerbt .gat-btn--primary/--secondary mit der vollgesaettigten
   Markenfarbe. Hier auf die entsaettigte --gat-web-*-Palette gebracht, mit
   einheitlichem Radius und sichtbarem Fokusring. Die DS-Klassen bleiben am
   Element; nur die Optik wird ueberschrieben. */
.gat-btn {
  border-radius: var(--gat-web-radius-control);
  transition: background 0.15s, border-color 0.15s, color 0.15s,
    box-shadow 0.15s, transform 0.1s;
}
/* Active-Zustand: der Button wird beim Klick kurz minimal eingedrueckt —
   klare, zurueckhaltende Rueckmeldung auf wirklich klickbaren Elementen. */
.gat-btn:not(:disabled):active {
  transform: translateY(1px);
}
/* Primaer — gedaempfte gruene Flaeche, weisse Schrift. */
.gat-btn--primary {
  background: var(--gat-web-green-deep);
  border-color: var(--gat-web-green-deep);
  color: var(--gat-color-weiss);
}
.gat-btn--primary:hover {
  filter: none;
  background: color-mix(in srgb, var(--gat-web-green-deep) 85%, black);
  border-color: color-mix(in srgb, var(--gat-web-green-deep) 85%, black);
}
/* Sekundaer — Umriss auf heller Flaeche, gruene Schrift. */
.gat-btn--secondary {
  background: var(--gat-web-surface);
  border-color: var(--gat-web-green-deep);
  color: var(--gat-web-green-deep);
}
.gat-btn--secondary:hover {
  background: var(--gat-web-green-tint);
  color: var(--gat-web-green-deep);
}
.gat-btn:disabled,
.doc-clear-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Diagramm-Farbpalette (Dashboard-Leiste) -----------------------------
   Steuerung fuer die Chart-Palette. Bewusst in der Applikation (oben in der
   Dashboard-Leiste, rechts neben dem Dokument-Umschalter), nicht im Header —
   der Header bleibt reine CI/Navigation. */
.dash-controls__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}
.dash-palette {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  color: var(--gat-web-green-deep);
  margin-left: auto;
}
.dash-palette__label {
  font-family: var(--gat-font-headline);
  font-size: 0.95rem;
  font-weight: 600;
}
.dash-palette__select {
  font: inherit;
  font-family: var(--gat-font-headline);
  font-size: 0.95rem;
  padding: 0.18rem 0.45rem;
  background: var(--gat-web-surface);
  color: var(--gat-web-text);
  border: 1px solid var(--gat-web-hairline);
  border-radius: var(--gat-web-radius-control);
  cursor: pointer;
}

/* --- Support-Mailto in der Brandbar ---------------------------------------
   Optik (.gat-header__support/-icon/-label) kommt jetzt zentral aus dem
   Design-System — keine lokale Kopie mehr. Nur die gemeinsame Fokus-Optik
   unten ergaenzt den DS-Hoverzustand um Kontur + Ring. */

/* --- Einheitlicher Tastatur-Fokus -----------------------------------------
   Jedes interaktive Element traegt denselben sichtbaren Fokus: eine
   2px-Kontur in --gat-web-green-deep plus den weichen --gat-web-focus-ring. Der
   Ring hebt den Fokus auch dort ab, wo die Kontur knapp am Rand sitzt.
   --gat-web-focus-offset haelt den Abstand konsistent; Elemente, die an einer
   Kante sitzen (Reiter, sortierbare Spaltenkoepfe), setzen ihn lokal auf
   einen negativen Wert, der Ring bleibt aussen sichtbar. */
.gat-btn:focus-visible,
.gat-header__support:focus-visible,
.dropzone-btn:focus-visible,
.doc-remove:focus-visible,
.doc-clear-btn:focus-visible,
.doc-manager-summary:focus-visible,
.tab-btn:focus-visible,
.switch-btn:focus-visible,
.mj-btn:focus-visible,
.mj-close:focus-visible,
.sankey-reset:focus-visible,
.crumbs button:focus-visible,
.drill-row .mj-drill:focus-visible,
.sortable:focus-visible,
.filterbar input:focus-visible,
.filterbar select:focus-visible,
.dtable .pick input:focus-visible,
input.search:focus-visible {
  outline: 2px solid var(--gat-web-green-deep);
  outline-offset: var(--gat-web-focus-offset, 2px);
  box-shadow: var(--gat-web-focus-ring);
}
/* Felder mit eigenem Rahmen: der Fokus ersetzt zusaetzlich die Rahmenfarbe,
   damit Kontur, Rahmen und Ring eine ruhige Einheit bilden. */
.filterbar input:focus-visible,
.filterbar select:focus-visible,
input.search:focus-visible {
  border-color: var(--gat-web-green-deep);
}
/* Marken-Link im Header: DS v2.0 liefert .gat-header__brand:focus-visible
   im globalen Fokus-Block — keine lokale Ergaenzung mehr noetig. */

/* BETA-Stoerer im Header — DS-Klasse `.gat-stoerer--magenta` liefert die
   schief gestellte Magenta-Optik, hier nur klein gehalten und etwas nach
   oben versetzt, damit es als kleine Markierung neben dem Wordmark sitzt.
   Auf sehr schmalen Viewports darf der Stoerer ausblenden, damit das
   Wordmark nicht umbricht. */
.app-beta-marker {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  margin-left: 0.5rem;
  transform: translateY(-0.35rem) rotate(-6deg);
  /* Stoerer sitzt visuell ueber den Buchstaben — kein vertikaler Platzbedarf
     im Linien-Layout des Brand-Links. */
  line-height: 1;
  align-self: center;
}
@media (max-width: 420px) {
  .app-beta-marker { display: none; }
}

/* Beta-Hinweis-Absatz unter dem Hero-Intro — sanft mit etwas Abstand vom
   Haupttext, ohne in einer "Achtung"-Optik zu schreien. Linkfarbe wird
   vom DS uebernommen, hier nur die Schrift etwas zurueckhaltender. */
.app-beta-hinweis {
  margin-top: 0.7rem;
  font-size: 0.95em;
  color: var(--gat-web-text-soft);
}
.app-beta-hinweis strong {
  color: var(--gat-color-accent);
}

/* --- Einklappbare Dokumentverwaltung ------------------------------------- */
.doc-manager {
  border: 1px solid var(--app-hair);
  border-radius: var(--gat-web-radius-card);
  background: var(--gat-web-surface-sunk);
  margin: 1.4rem 0;
}
.doc-manager-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.95rem;
  user-select: none;
}
/* Den nativen Aufklapp-Pfeil ersetzen — eigener, dem Design System folgend. */
.doc-manager-summary::-webkit-details-marker {
  display: none;
}
.doc-manager-summary::before {
  content: "\25B8"; /* rechts zeigendes Dreieck */
  color: var(--app-soft);
  font-size: 0.85rem;
  transition: transform 0.15s;
}
.doc-manager[open] > .doc-manager-summary::before {
  transform: rotate(90deg);
}
.doc-manager-summary:hover {
  background: color-mix(in srgb, var(--gat-web-green) 8%, transparent);
}
/* Summary sitzt buendig im Karten-Rahmen — Fokus-Offset negativ; Kontur,
   Ring und Radius halten den Fokus innerhalb der Karte sichtbar. Die
   Kontur-/Ring-Optik liefert der gemeinsame Fokus-Block. */
.doc-manager-summary {
  --gat-web-focus-offset: -2px;
}
.doc-manager-summary:focus-visible {
  border-radius: var(--gat-web-radius-card);
}
.doc-manager-title {
  font-weight: 600;
}
.doc-manager-count {
  color: var(--app-soft);
  font-size: 0.85rem;
}
/* Innenraum der Dokumentverwaltung — grosszuegiger, ruhiger Innenabstand,
   damit die Abschnitts-h2 nicht an der Kante kleben. Beide Abschnitte
   (Hinzufuegen / Geladene Dokumente) durch einen klaren Abstand getrennt. */
.doc-manager-body {
  padding: var(--gat-space-3) var(--gat-space-4) var(--gat-space-4);
  border-top: 1px solid var(--app-hair);
}
.doc-manager-body section + section {
  margin-top: var(--gat-space-4);
  padding-top: var(--gat-space-4);
  border-top: 1px solid var(--app-hair);
}

/* --- Drag-&-Drop-Zone ----------------------------------------------------
   DS v2.2 liefert `.gat-dropzone` mit `__icon`/`__label`/`__hint`/
   `__trigger` und den States `.is-dragover`/`.is-error`. Markup im
   #dropzone und das Drag-Handling in `web/js/app.js` (`.is-dragover`-
   Toggle) folgen dem DS-Schema. Lokal verbleibt nur ein Aussenabstand,
   den DS nicht setzt, und die App-eigene Sichtbarkeit des verdeckten
   File-Inputs — sonst keine eigene Dropzone-Stilebene mehr. */
.dropzone {
  margin: 1.2rem 0;
}
.dropzone input[type="file"] {
  display: none;
}

/* --- Fortschrittsliste --------------------------------------------------- */
.progress-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.progress-item {
  border: 1px solid var(--gat-web-hairline);
  border-radius: var(--gat-web-radius-control);
  background: var(--gat-web-surface);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.5rem;
}
.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
}
.progress-name {
  font-weight: 600;
}
.progress-stage {
  color: var(--app-soft);
}
.progress-bar {
  height: 5px;
  background: var(--gat-web-hairline);
  border-radius: 999px;
  margin-top: 0.45rem;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: var(--app-akzent-primaer);
  transition: width 0.2s;
}
.progress-item.is-error .progress-fill {
  background: var(--app-risiko);
}
.progress-item.is-done .progress-fill {
  background: var(--gat-web-green-deep);
}
.progress-error {
  color: var(--gat-web-clay-text);
  font-size: 0.82rem;
  margin: 0.35rem 0 0;
}

/* --- Dokumentliste ------------------------------------------------------- */
/* Auf schmalen Viewports passen die fuenf Spalten nicht nebeneinander; der
   Wrapper scrollt dann horizontal, statt die Seite zu sprengen. */
.doc-table-scroll {
  overflow-x: auto;
  margin: 0.6rem 0 0;
}
.doc-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.doc-table th,
.doc-table td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--gat-web-hairline);
}
.doc-table th {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gat-web-text-soft);
}
.doc-table tbody tr:hover {
  background: color-mix(in srgb, var(--gat-web-green) 7%, transparent);
}
.doc-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.doc-status {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
}
.doc-status.ok {
  color: var(--gat-web-green-deep);
  border-color: color-mix(in srgb, var(--gat-web-green) 45%, var(--gat-web-hairline));
  background: var(--gat-web-green-tint);
}
.doc-status.fehl {
  color: var(--gat-web-clay-text);
  border-color: color-mix(in srgb, var(--gat-web-chart-5) 45%, var(--gat-web-hairline));
  background: color-mix(in srgb, var(--gat-web-chart-5) 12%, white);
}
/* .doc-einwohner-input (Variante A) — Inline-Feld in der Dokumentliste.
   Schmaler Number-Input, eingebettet ins Tabellen-Layout. */
.doc-einwohner-input {
  width: 7em;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--gat-web-hairline);
  border-radius: var(--gat-web-radius-control);
  background: var(--gat-web-surface);
  color: var(--gat-web-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.doc-einwohner-input:focus-visible {
  outline: 2px solid var(--gat-web-green);
  outline-offset: 1px;
}
/* .doc-edit-btn (Variante B) — gleiches Pattern wie .doc-remove, aber
   in ruhiger Sekundaerfarbe (kein destruktiver Ton). */
.doc-edit-btn {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--gat-web-hairline);
  background: var(--gat-web-surface);
  color: var(--gat-web-text-soft);
  border-radius: var(--gat-web-radius-control);
  padding: 0.2rem 0.6rem;
  margin-right: 0.35rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.doc-edit-btn:hover {
  border-color: var(--gat-web-green);
  background: color-mix(in srgb, var(--gat-web-green) 8%, white);
  color: var(--gat-web-green-deep);
}
/* Einwohner-Dialog (Variante B) — natives <dialog>, knapp und ruhig. */
.doc-einwohner-dialog {
  padding: 0;
  border: 0;
  border-radius: var(--gat-web-radius-card);
  box-shadow: var(--gat-web-shadow);
  max-width: 28rem;
}
.doc-einwohner-dialog::backdrop {
  background: rgba(31, 38, 28, 0.4);
}
.doc-einwohner-form {
  padding: var(--gat-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--gat-space-2);
}
.doc-einwohner-form h3 {
  margin: 0;
  font-size: 1.05rem;
}
.doc-einwohner-sub {
  margin: 0;
  color: var(--gat-web-text-soft);
  font-size: 0.85rem;
}
.doc-einwohner-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--gat-web-text-soft);
}
.doc-einwohner-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--gat-web-text-mute);
}
.doc-einwohner-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin: var(--gat-space-2) 0 0;
  padding: 0;
}
/* .doc-remove — kleiner sekundaerer Button, ruhige Risiko-Toenung. */
.doc-remove {
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--gat-web-hairline);
  background: var(--gat-web-surface);
  color: var(--gat-web-clay-text);
  border-radius: var(--gat-web-radius-control);
  padding: 0.2rem 0.6rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.doc-remove:hover {
  border-color: var(--gat-web-chart-5);
  background: color-mix(in srgb, var(--gat-web-chart-5) 10%, white);
}
.doc-empty {
  color: var(--gat-web-text-soft);
  font-style: italic;
}
.doc-clear-zeile {
  margin-top: 0.9rem;
}
/* .doc-clear-btn traegt zusaetzlich .gat-btn--secondary; hier nur die
   Risiko-Toenung statt der gruenen Sekundaerfarbe und die Feingroesse. */
.doc-clear-btn {
  font-size: 0.85rem;
  border-color: var(--gat-web-clay-text);
  color: var(--gat-web-clay-text);
}
.doc-clear-btn:hover {
  background: var(--gat-web-clay-text);
  border-color: var(--gat-web-clay-text);
  color: var(--gat-color-weiss);
}
.persist-note {
  font-size: 0.8rem;
  color: var(--app-soft);
}

/* --- Toast-Meldungen -----------------------------------------------------
   DS v2.2 liefert `.gat-toaster` (Container, fixiert unten-rechts) und
   `.gat-toast` mit semantischen Modifiern `--info`/`--success`/`--warn`/
   `--error` sowie `__body`/`__close`. Markup im #toast-box und der
   `toast()`-Helper in `web/js/app.js` sind auf das DS-Schema umgestellt;
   die App haelt keine eigene Toast-Stilebene mehr. */

/* --- Geldfluss-Sankey: Drill-down-Leiste --------------------------------- */
.sankey-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.1rem 0 0.4rem;
  min-height: 1.5rem;
}
.sankey-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--app-soft);
}
.sankey-hint.is-visible {
  color: var(--app-akzent-primaer);
}
/* .sankey-reset traegt zusaetzlich .gat-btn--secondary; hier nur die
   kleinere Groesse fuer die Panel-Kopf-Leiste. */
.sankey-reset {
  flex: none;
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
}


/* ===========================================================================
   6. REDUZIERTE BEWEGUNG
   ===========================================================================
   DS v2.0 liefert den globalen Block (alle transitions/animations auf
   0.01ms). Keine App-eigene Schicht mehr noetig. */

/* --- Diagramm-Builder im Suche-Tab ----------------------------------------
   Konfigurations-Block: Diagrammtyp-, Achsen- und Aggregations-Dropdowns
   plus Render- und Export-Knopf. Sitzt unterhalb der Suchtabelle und
   operiert auf der aktuellen Filtermenge. Der gerenderte Chart bekommt
   eine Aktionsleiste analog zu den anderen Diagramm-Panels. */
.builder-conf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--gat-space-2);
  margin: var(--gat-space-2) 0 var(--gat-space-3);
}
.builder-conf label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--gat-web-text-soft);
}
.builder-conf select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--gat-web-hairline);
  border-radius: var(--gat-web-radius-control);
  background: var(--gat-web-surface);
  color: var(--gat-web-text);
}
.builder-aktionen {
  display: flex;
  gap: var(--gat-space-2);
  flex-wrap: wrap;
  align-items: center;
}
.builder-meta {
  color: var(--gat-web-text-soft);
  font-size: 0.85rem;
  margin: 0;
}
.builder-chart-host {
  margin-top: var(--gat-space-2);
}

/* Sekundaere Gruppierung — nur sichtbar fuer Diagrammtypen, die sie
   brauchen (gestapelte Balken, Treemap, Heatmap). Das [hidden]-Attribut
   am Wrapper-Label schaltet die Sichtbarkeit; CSS hier nur defensiv
   gegen versehentliche Display-Overrides. */
.builder-conf label[hidden] { display: none; }

/* ===========================================================================
   7. DRUCK-STYLESHEET
   ===========================================================================
   DS v2.0 deckt Header/Panel/Metric-Card-Druck-Defaults global ab. Hier
   nur App-spezifische Drucksicht-Anpassungen: Bedienflaechen ausblenden
   (Dropzone, Doc-Manager, MJ-Overlay, Sankey-Bar, Footer), volle
   Seitenbreite, Section-Head-Umbruch, Sankey-Hoehe-Cap. */
@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  /* Bedien- und Verwaltungsflaechen, die im Ausdruck keinen Zweck haben. */
  .doc-manager,
  .dashboard-leer,
  .dash-controls,
  #toast-box,
  .mj-overlay,
  .sankey-bar,
  .mj-actions,
  .footer {
    display: none !important;
  }

  /* Voller Lesebereich statt zentrierter Bildschirmbreite. */
  .page {
    max-width: none;
    padding-inline: 0;
  }

  /* Panels und Tabellenzeilen brechen sauber ueber Seiten um. */
  .gat-section-head {
    break-inside: avoid;
    break-after: avoid;
  }
  table { break-inside: auto; }
  tr,
  .drill-row { break-inside: avoid; }
  thead { display: table-header-group; }
  h1, h2, h3 { break-after: avoid; }

  /* Diagramme behalten ihre Inline-Hoehe, damit ECharts den Canvas
     ausdruckt; nur die sehr hohe Sankey-Flaeche wird etwas gekuerzt. */
  #c_sankey { height: 420px !important; }

  /* Der Inhalt soll voll deckend drucken. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* OH-Finder — Gemeindesuche + Deep-Links zu offenerhaushalt.at */
.oh-finder__intro { margin-bottom: var(--gat-space-3); }
.oh-finder__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gat-space-3);
  align-items: flex-end;
}
.oh-finder__field {
  display: flex;
  flex-direction: column;
  gap: var(--gat-space-1);
}
.oh-finder__field label { font-size: 0.85rem; font-weight: 600; }
.oh-finder__field--search {
  position: relative;
  flex: 1 1 18rem;
  min-width: 14rem;
}
.oh-finder__field--search .gat-input { width: 100%; }
.oh-finder__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--gat-color-weiss);
  border: 1px solid var(--app-hair);
  border-radius: var(--gat-radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.oh-finder__result {
  padding: var(--gat-space-2) var(--gat-space-3);
  cursor: pointer;
}
.oh-finder__result:hover { background: var(--app-soft); }
.oh-finder__nodata { color: var(--app-risiko); font-size: 0.85em; }
.oh-finder__out { margin-top: var(--gat-space-3); }
.oh-finder__chosen { font-weight: 600; margin-bottom: var(--gat-space-2); }
.oh-finder__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gat-space-2);
}