/* Dashboard — Steuerleiste, Tableiste, Tabellen, Drill-down und
   Mehrjahres-Overlay.

   dashboard.css laedt vor app.css und kann daher nicht auf dessen
   --app-*-Aliase zugreifen. Es liest direkt die --gat-web-*-Token (mit
   Fallback-Literalen, falls app.css noch nicht da ist).

   Funktionsklassen (.tab-btn/.tab-panel/.is-active, .switch-btn, .dtable,
   .mj-*, .doc-status) sind Vertrag mit dashboard.js, index.html und den
   Tests — Namen bleiben unveraendert.

   Aufbau:
     1. Lokale Token
     2. Layout (Steuerleiste, Raster)
     3. Tableiste & Dokument-Umschalter
     4. Tabellen & Filter
     5. Drill-down (Breadcrumbs, Liste)
     6. Mehrjahres-Vergleich (Aktionen & Overlay) */


/* === 1. LOKALE TOKEN ====================================================== */
:root {
  /* --hair spiegelt --gat-web-hairline; gleicher Wert als Fallback, falls
     die DS-CSS noch nicht geladen ist. */
  --hair: var(--gat-web-hairline, #e1e4db);
}


/* === 2. LAYOUT ============================================================ */

/* Fliesstext-Bloecke bleiben gut lesbar, statt ueber die ganze Breite zu
   laufen. Die Breitenbegrenzung von .page selbst liegt in app.css. */
.lead, .tab-panel > p, .callout { max-width: 70rem; }

/* Sticky Steuerleiste — sitzt auf der weissen Kartenflaeche, durch
   Haarlinie vom Inhalt getrennt. */
.dash-controls { position: sticky; top: 0; z-index: 20;
  background: var(--gat-web-bg, #f3f5f0); padding: .6rem 0 .3rem;
  border-bottom: 1px solid var(--hair); margin-bottom: 1.2rem; }

/* Zweispaltiges Diagramm-Raster — faellt unter 48rem auf eine Spalte. */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 48rem) { .dash-grid { grid-template-columns: 1fr; } }


/* === 3. TABLEISTE & DOKUMENT-UMSCHALTER =================================== */

/* DS v2.0 liefert .gat-tab/.gat-tabbar und .gat-switcher/.gat-switch-btn
   mit identischer Optik (gruene Unterkante, Inset-Schatten beim aktiven
   Reiter, gefuelltes Segment, gemeinsame Fokus-Optik). Die Doppel-Klassen
   am Element (class="tab-btn gat-tab", class="switch-btn gat-switch-btn")
   binden Funktionsklasse und DS-Stil zusammen — die fruehere lokale
   visuelle Schicht hier ist entfallen.

   Die Funktionsklasse .tab-panel bleibt erhalten, weil dashboard.js
   genau dieser Klasse das is-active-Toggle setzt. Ohne lokale Regel
   griffe .tab-panel.is-active gar nicht (DS hat nur .gat-tab-panel). */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: tab-panel-ein .18s ease-out; }
@keyframes tab-panel-ein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Innenraum-Layout fuer das Dokument-Umschalter-Wrapper-Element. */
.switcher #switcher-buttons { display: inline-flex; flex-wrap: wrap;
  gap: .3rem; }


/* === 4. TABELLEN & FILTER ================================================= */

/* --- Tabellen — DS v2.2 -.gat-table-Familie -----------------------------
   DS v2.2 liefert .gat-table (mit --zebra/--compact/--dense/--sticky-col)
   und .gat-table-scroll. Markup traegt jetzt class="dtable gat-table ..." —
   die Funktionsklasse .dtable bleibt nur als Anker fuer die unten folgenden
   App-spezifischen Detail-Regeln (Body-Zellen-Numerik, Pick-Spalte,
   Sortier-Pfeil-Span, .table-scroll-Hoehencap).

   Body-Numerik: dashboard.js emittiert <td class="num"> fuer die Suchtabelle
   (dashboard.js ist nicht aenderbar, dort kann keine __num-Klasse hinzu),
   daher hier eine kleine Bruecke, die das DS-Default `text-align: right;
   font-variant-numeric: tabular-nums; white-space: nowrap;` auf
   `.dtable td.num` legt — identisch zum DS-`.gat-table__num`. */
.dtable td.num { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* Sortierbare Spaltenkoepfe — dashboard.js liest th.sortable und pflegt
   einen .arrow-Span mit ▲/▼ als Sortier-Indikator. Die DS-`.gat-table__sortable`
   Optik (passiver Chevron via ::after) wuerde mit diesem aktiven Indikator
   doppeln; daher tragen die Spaltenkoepfe bewusst nur die Funktionsklasse
   .sortable und der Cursor/Hover bleibt lokal. Fokus-Offset negativ, damit
   der Ring buendig in der sticky Kopfzeile sichtbar bleibt (Optik aus app.css). */
.sortable { cursor: pointer; user-select: none; --gat-web-focus-offset: -2px; }
.sortable:hover { color: var(--gat-web-green-deep, #2c6e40); }
.sortable .arrow { color: var(--gat-web-text-mute, #6b6f63); font-size: .75rem; }

/* Pick-Spalte — schmale Mehrjahres-Auswahl-Checkbox. dashboard.js emittiert
   <td class="pick"> fuer Body-Zellen; bleibt App-spezifisch. */
th.pick, td.pick { width: 2rem; text-align: center; }
td.pick input, th.pick input { cursor: pointer; }

/* --- Filterleiste & Suche — einheitliche Feldoptik ----------------------- */
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  margin: .6rem 0 .8rem; }
.filterbar label { font-size: .74rem; color: var(--gat-web-text-soft, #5e6358);
  display: flex; flex-direction: column; gap: .18rem; }
.filterbar input, .filterbar select { font: inherit; font-size: .84rem;
  padding: .34rem .5rem; border: 1px solid var(--hair);
  background: var(--gat-web-surface, #fff); color: var(--gat-web-text, #23271f);
  border-radius: var(--gat-web-radius-control, 6px);
  transition: border-color .15s, box-shadow .15s; }
.filterbar input:hover, .filterbar select:hover {
  border-color: color-mix(in srgb, var(--gat-web-green, #4a8a52) 45%, var(--hair)); }
/* Tastatur-Fokus (Kontur + Rahmenfarbe + Ring) liefert der gemeinsame
   Block in app.css. */
.filterbar input.search { min-width: 16rem; }
.filterbar input.betrag { width: 7rem; }

.result-meta { font-size: .86rem; color: var(--gat-web-text-soft, #5e6358);
  margin: .3rem 0 .5rem; }
.result-meta strong { color: var(--gat-web-text, #23271f); }

/* Die breite 15-Spalten-Suchtabelle bekommt eine Mindestbreite, damit ihre
   Spalten lesbar bleiben statt zusammenzustauchen. Reicht der Platz nicht,
   scrollt der DS-`.gat-table-scroll`-Wrapper horizontal — die Seite selbst
   bleibt schmal. Lokal nur noch der Hoehencap, damit lange Treffermengen
   intern scrollen statt die Seite zu sprengen (DS deckt overflow-x, border,
   border-radius ab). */
.table-scroll { max-height: 70vh; overflow: auto; }
.table-scroll .dtable { min-width: 56rem; }
.table-hint { font-size: .8rem; color: var(--gat-web-text-soft, #5e6358); margin-top: .4rem; }


/* === 5. DRILL-DOWN ======================================================== */

/* Breadcrumb-Pfad — Knoepfe mit Fokusring. */
.crumbs { font-size: .85rem; margin: .5rem 0; }
.crumbs button { font: inherit; font-size: .85rem; cursor: pointer;
  background: none; border: none; color: var(--gat-web-green-deep, #2c6e40);
  text-decoration: underline; padding: 0; }
.crumbs button:disabled { color: var(--gat-web-text-soft, #5e6358);
  text-decoration: none; cursor: default; }
/* Fokus-Optik aus app.css; nur der Radius haelt den Ring abgerundet. */
.crumbs button:focus-visible { border-radius: 2px; }
.crumbs .sep { color: var(--gat-web-text-mute, #6b6f63); margin: 0 .3rem; }

/* Drill-down-Liste — klickbare Zeilen mit sanftem Hover. */
.drill-list { list-style: none; padding: 0; margin: .3rem 0 0; }
.drill-row { display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem .55rem; border-bottom: 1px solid var(--hair); }
/* Im .web-panel sitzt die Liste am Koerper-Ende — keine baumelnde Linie. */
.drill-list .drill-row:last-child { border-bottom: none; }
/* Klickbare Drill-Zeilen — sanfter Hover, etwas kraeftigerer Active-Zustand
   als klare Rueckmeldung beim Aufklappen der naechsten Ebene. */
.drill-row.is-clickable { cursor: pointer;
  transition: background .12s; }
.drill-row.is-clickable:hover { background: color-mix(in srgb, var(--gat-web-green, #4a8a52) 8%, transparent); }
.drill-row.is-clickable:active { background: color-mix(in srgb, var(--gat-web-green, #4a8a52) 15%, transparent); }
.drill-row .label { flex: 1; }
.drill-row .label .code { color: var(--gat-web-text-mute, #6b6f63); font-size: .8rem;
  margin-right: .4rem; font-variant-numeric: tabular-nums; }
.drill-row .betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.drill-row .chev { color: var(--gat-web-text-mute, #6b6f63); margin-left: .5rem; }
.drill-row .mj-drill { font: inherit; font-size: .76rem; cursor: pointer;
  padding: .12rem .5rem; border: 1px solid var(--hair);
  background: var(--gat-web-surface, #fff); color: var(--gat-web-green-deep, #2c6e40);
  border-radius: var(--gat-web-radius-control, 6px);
  margin-left: .5rem; white-space: nowrap;
  transition: background .15s, border-color .15s; }
.drill-row .mj-drill:hover { border-color: var(--gat-web-green, #4a8a52);
  background: var(--gat-web-green-tint, #e7efe3); }
/* Fokus-Optik (Kontur + Ring) liefert der gemeinsame Block in app.css. */


/* === 6. MEHRJAHRES-VERGLEICH ============================================== */

/* --- Aktionsleiste & Buttons ----------------------------------------------
   Sekundaerbuttons als Umriss auf heller Flaeche, Primaerbutton gruen
   gefuellt; einheitliche Radien und sichtbarer Tastatur-Fokus. */
.mj-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .6rem 0 .4rem; }
.mj-btn { font: inherit; font-size: .82rem; cursor: pointer;
  padding: .3rem .8rem; border: 1px solid var(--hair);
  background: var(--gat-web-surface, #fff); color: var(--gat-web-text, #23271f);
  border-radius: var(--gat-web-radius-control, 6px); line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s; }
.mj-btn:hover { border-color: var(--gat-web-green, #4a8a52);
  background: var(--gat-web-green-tint, #e7efe3); }
.mj-btn.is-primary { background: var(--gat-web-green-deep, #2c6e40);
  border-color: var(--gat-web-green-deep, #2c6e40);
  color: var(--gat-color-weiss, #fff); font-weight: 600; }
.mj-btn.is-primary:hover { background: var(--gat-web-green-deep, #2c6e40);
  color: var(--gat-color-weiss, #fff); }
/* Fokus-Optik (Kontur + Ring) liefert der gemeinsame Block in app.css. */
.mj-btn:disabled { opacity: .5; cursor: default; }
.mj-btn:disabled:hover { background: var(--gat-web-surface, #fff);
  border-color: var(--hair); }
.mj-btn.is-primary:disabled,
.mj-btn.is-primary:disabled:hover {
  background: color-mix(in srgb, var(--gat-web-green-deep, #2c6e40) 45%, white);
  border-color: color-mix(in srgb, var(--gat-web-green-deep, #2c6e40) 45%, white);
  color: var(--gat-color-weiss, #fff); }
.mj-count { font-size: .8rem; color: var(--gat-web-text-soft, #5e6358); }

/* --- Overlay — Dialog auf Komponentensprache ------------------------------
   Ruhig abgedunkelter Hintergrund, Dialog als Karte mit Kartenradius und
   weichem Schatten; Schliessen-Knopf mit sichtbarem Fokus. */
.mj-overlay { position: fixed; inset: 0; z-index: 60; display: none;
  background: color-mix(in srgb, var(--gat-web-text, #23271f) 52%, transparent); }
.mj-overlay.is-open { display: flex; align-items: center;
  justify-content: center; }
.mj-dialog { background: var(--gat-web-surface, #fff); border: 1px solid var(--hair);
  border-radius: var(--gat-web-radius-card, 10px); width: min(880px, 94vw);
  max-height: 92vh; overflow: auto; padding: 1.1rem 1.3rem 1.3rem;
  box-shadow: 0 16px 48px rgba(31,38,28,.22); }
.mj-dialog-head { display: flex; justify-content: space-between;
  align-items: baseline; gap: 1rem; }
.mj-dialog-head h3 { margin: 0; }
.mj-close { font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer;
  background: none; border: 1px solid transparent;
  border-radius: var(--gat-web-radius-control, 6px);
  color: var(--gat-web-text-soft, #5e6358); padding: .1rem .35rem;
  transition: background .15s, color .15s; }
.mj-close:hover { color: var(--gat-web-text, #23271f);
  background: var(--gat-web-surface-sunk, #f7f9f4); }
/* Fokus-Optik (Kontur + Ring) liefert der gemeinsame Block in app.css. */
.mj-sub { font-size: .85rem; color: var(--gat-web-text-soft, #5e6358);
  margin: .3rem 0 .2rem; }
.mj-chart { height: 420px; margin-top: .4rem;
  border: 1px solid var(--hair); border-radius: var(--gat-web-radius-card, 10px);
  background: var(--gat-web-surface, #fff); padding: 6px; }
.mj-empty { font-size: .85rem; color: var(--gat-web-text-soft, #5e6358); margin: .5rem 0; }