/*
 * HAFA Controlling – Anwendungs-Layout und Komponenten
 * Umsetzung des Entwurfs aus dem Design-Brief; alle Werte stammen aus tokens.css.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--background);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-strong);
}

h1 {
    font-size: var(--font-size-xl);
}

h2 {
    font-size: var(--font-size-lg);
}

h3 {
    font-size: var(--font-size-md);
}

a {
    color: var(--brand-primary);
    text-decoration: none;
}

a:hover {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

button,
input,
select {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

/*
 * Zahlen rechtsbündig mit gleicher Ziffernbreite.
 *
 * Die Auswahl nennt die Tabelle ausdrücklich mit: Die allgemeine Regel für
 * Tabellenzellen weiter unten ist sonst spezifischer und würde die Ausrichtung
 * wieder auf linksbündig ziehen.
 */
.num,
table.data th.num,
table.data td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/*
 * Beträge dürfen nie mitten in der Zahl umbrechen – die Spaltenüberschriften
 * dagegen schon. Sonst bestimmt eine lange Überschrift wie "Vorjahr kumuliert"
 * die Spaltenbreite und die Tabelle wird breiter als der Bildschirm.
 */
table.data td.num {
    white-space: nowrap;
}

/* Zahlenspalten brauchen weniger Luft als Textspalten. */
table.data th.num,
table.data td.num {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}

/* Erklärtexte dürfen die Tabelle nicht dominieren. */
table.data td.explain {
    max-width: 300px;
}

.mono {
    font-family: var(--font-mono);
}

/* ---------- Application Shell ---------- */

.app {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    padding: var(--space-5) 18px var(--space-3);
}

.sidebar__logo {
    height: 24px;
    width: auto;
    display: block;
}

.sidebar__section-label {
    padding: 0 var(--space-5) var(--space-3);
    font-size: var(--font-size-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-1) var(--space-3);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 11px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.sidebar__link:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
    text-decoration: none;
}

.sidebar__link--active {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--brand-primary);
}

.sidebar__icon {
    display: flex;
    width: 18px;
    justify-content: center;
    flex: 0 0 auto;
}

.sidebar__footer {
    margin-top: auto;
    padding: var(--space-4) 18px 18px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.status-box {
    background: var(--surface-muted);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 10px 11px;
}

.status-box__label {
    font-size: var(--font-size-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.status-box__value {
    margin-top: 3px;
    font-weight: 500;
    color: var(--text-primary);
}

.status-box__meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.user-chip__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 600;
    flex: 0 0 auto;
}

.user-chip__name {
    font-weight: 500;
    line-height: 1.2;
}

.user-chip__role {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.topbar {
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    /* Seitlicher Abstand kommt aus der gemeinsamen Spur weiter unten */
    padding-block: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.topbar__subtitle {
    margin-top: 2px;
    font-size: var(--font-size-base);
    color: var(--text-muted);
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar__status {
    text-align: right;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.45;
}

.topbar__status strong {
    color: var(--text-primary);
    font-weight: 500;
}

/*
 * Der seitliche Innenabstand des Inhalts steht als eigene Groesse, weil zwei
 * Dinge ihn kennen muessen: der Inhalt selbst und die Filterleisten, die ihn
 * mit einem negativen Rand aufheben, um ueber die volle Breite zu laufen.
 * Fest verdrahtet (-32px) lief die Leiste bei 1024px um 16px aus dem Fenster,
 * weil die Medienabfrage den Abstand dort auf 16px senkt.
 */
:root {
    --content-pad: var(--space-7);
}

/*
 * Gemeinsame Spur fuer Kopfzeile, Filterleiste, Inhalt und Fusszeile
 * (V2 Abschnitt 15).
 *
 * Vorher war nur der Inhalt auf 1560px begrenzt - und zwar linksbuendig,
 * waehrend Kopf- und Fusszeile ueber die volle Breite liefen. Gemessen blieben
 * bei 2560px 758px rechts leer, und Seitentitel und erste Kachel standen nicht
 * untereinander.
 *
 * Die Hintergruende der Baender sollen weiterhin ueber die ganze Breite
 * reichen - eine Kopfzeile, die mittig aufhoert, sieht abgeschnitten aus.
 * Begrenzt wird deshalb nicht das Band, sondern sein Innenabstand: Er waechst
 * um genau die Haelfte des Ueberschusses, sodass der Inhalt aller Baender auf
 * derselben Linie beginnt und endet.
 */
.topbar,
.filterbar,
.app-footer {
    padding-inline: max(
        var(--content-pad),
        calc((100% - var(--content-max-width)) / 2 + var(--content-pad))
    );
}

.content {
    flex: 1 0 auto;
    padding: var(--space-6) var(--content-pad) var(--space-7);
    max-width: var(--content-max-width);
    width: 100%;
    /* Zentriert, statt den freien Platz rechts liegen zu lassen */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Dauerhafter Hinweis, dass BWA-Werte vorläufig sind (PRD 39.1). */
.app-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding-block: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-faint);
}

/* ---------- Filterleiste ---------- */

.filterbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding-block: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

/*
 * Filterleiste innerhalb des Inhalts: Der negative Rand hebt genau den
 * Innenabstand auf, damit die Leiste wie im Seitenkopf ueber die volle Breite
 * laeuft - und zwar in jeder Fenstergroesse, weil beide dieselbe Groesse lesen.
 */
.filterbar--flush {
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--content-pad)) 0;
}

.filterbar__group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.filterbar__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Erklaert, warum eine Auswahl gerade nicht wirkt. */
.filterbar__note {
    font-size: var(--font-size-sm);
    color: var(--text-faint);
    font-style: italic;
}

/* Eine unwirksame Auswahl muss auch unwirksam aussehen. */
.select:disabled {
    background: var(--surface-muted);
    color: var(--text-faint);
    border-color: var(--border);
    cursor: not-allowed;
}

.select {
    font-size: var(--font-size-base);
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
}

.segmented {
    display: flex;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 2px;
    gap: 2px;
}

.segmented__option {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border: none;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
}

.segmented__option:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.segmented__option--active {
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 20, 24, 0.08);
}

/* Kopfbereich einer Unterseite: Status links, Aktionen rechts.
   Der Seitentitel steht in der Topbar und wird hier nicht wiederholt. */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.action-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ---------- Karten ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.card__header {
    padding: var(--space-4) 18px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-strong);
}

.card__body {
    padding: 18px;
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-strong);
}

.section-title::before {
    content: '';
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--brand-primary);
}

/* ---------- KPI-Kacheln ---------- */

/*
 * Kachelraster.
 *
 * Die Mindestbreite ist keine Geschmacksfrage, sondern gemessen: Eine
 * Vergleichszeile lautet "Vorjahr  2.767.586,82 €  +113,05 % ↑" und muss auf
 * eine Zeile passen. Darunter rutscht die Abweichung unter den Betrag und die
 * Kachel wird schwer lesbar. Gemessen bricht die grosse Kachel bis 270px, die
 * kleine bis 256px; die Werte hier halten Abstand dazu. Lieber eine Kachel
 * weniger je Zeile als ein Umbruch innerhalb der Kachel.
 */
/*
 * Vier Kacheln je Reihe (V2 Abschnitt 66).
 *
 * Vorher entschied eine Mindestbreite von 296 px, wie viele Kacheln in eine
 * Reihe passen. Bei 1500 px Fensterbreite - einer verbreiteten Laptopbreite -
 * reichte der Platz fuer vier Kacheln knapp nicht: Gemessen blieben nach
 * Seitenleiste und Innenabstaenden 1202 px, gebraucht wurden 1244 px. Die
 * Reihe brach auf 3 + 1 um, und die Jahreshochrechnung stand allein in einer
 * eigenen Zeile.
 *
 * Darum eine feste Zahl je Stufe statt einer Mindestbreite: vier, zwei, eine.
 * Zwei gleich grosse Haelften lesen sich besser als drei plus eine
 * Einzelkachel.
 */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 1440px) {
    .kpi-grid,
    .kpi-grid--secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Auf schmalen Fenstern geht Lesbarkeit vor Kachelanzahl: eine je Zeile. */
@media (max-width: 720px) {
    .kpi-grid,
    .kpi-grid--secondary {
        grid-template-columns: 1fr;
    }
}

.kpi {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 18px 14px;
    box-shadow: var(--shadow-card);
    /*
     * Bewusst kein overflow: hidden. Es war hier, damit der Akzentbalken nicht
     * aus der gerundeten Ecke ragt - schnitt aber die Formelerklaerung ab,
     * sobald sie ueber den Kachelrand hinausreichte. Der Balken bekommt seine
     * Rundung jetzt selbst, siehe .kpi__accent.
     */
}

/* Waehrend die Erklaerung offen ist, liegt die Kachel ueber ihren Nachbarn */
.kpi:has(.kpi__tooltip:not([hidden])) {
    z-index: 40;
}

.kpi:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
}

.kpi--small {
    border-radius: var(--radius-md);
    padding: 14px 15px;
}

/* Farbiger Akzentbalken links: Bewertung der Kennzahl in ihrer Fachrichtung */
.kpi__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--neutral);
    /* Folgt der Rundung der Kachel, damit er nicht ueber die Ecke hinaussteht */
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.kpi__accent--good {
    background: var(--success);
}

.kpi__accent--watch {
    background: var(--warning);
}

.kpi__accent--bad {
    background: var(--danger);
}

.kpi__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.kpi__label {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    line-height: 1.35;
}

.kpi--small .kpi__label {
    font-size: 12.5px;
}

.kpi__info {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text-faint);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    flex: 0 0 auto;
    padding: 0;
}

.kpi__info:hover {
    border-color: var(--border-hover);
    color: var(--text-muted);
}

/*
 * Untertitel einer Kachel: nennt die Rechengrundlage, wo der Wert allein
 * missverstaendlich waere - etwa bei der Jahreshochrechnung. Bewusst klein und
 * zurueckhaltend; die Zahl bleibt die Hauptsache.
 */
.kpi__subtitle {
    margin-top: 2px;
    font-size: var(--font-size-xs);
    color: var(--text-faint);
    line-height: 1.3;
}

.kpi__value {
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--font-size-kpi);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--text-strong);
}

.kpi--small .kpi__value {
    margin-top: 6px;
    font-size: var(--font-size-kpi-sm);
}

.kpi__subtitle + .kpi__value {
    margin-top: var(--space-1);
}

.kpi__rows {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.kpi__row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px var(--space-2);
    font-size: var(--font-size-base);
}

.kpi--small .kpi__row {
    font-size: var(--font-size-sm);
}

/* Planspalten der Kennzahlen-Tabelle treten optisch hervor (Abschnitt 49). */
table.data td.kpi-plan {
    color: var(--text-primary);
}

/*
 * Der Planvergleich ist die Steuerungsaussage und steht deshalb optisch vor
 * dem Vorjahr (V2 Abschnitt 45) - nicht durch Farbe, sondern durch Gewicht.
 */
.kpi__row--primary .kpi__row-label,
.kpi__row--primary .kpi__row-base {
    color: var(--text-primary);
    font-weight: 500;
}

.kpi__row-label {
    color: var(--text-faint);
    min-width: 60px;
    flex: 0 0 auto;
}

.kpi--small .kpi__row-label {
    min-width: 48px;
}

/* Betrag und Abweichung dürfen nicht mitten in der Zahl umbrechen. */
.kpi__row-base,
.kpi__row .delta {
    white-space: nowrap;
}

.kpi__row-base {
    color: var(--text-secondary);
}

.kpi__spark {
    width: 100%;
    height: 30px;
    margin-top: var(--space-3);
    display: block;
    overflow: visible;
}

/* Formelerklärung, eingeblendet über das Info-Zeichen */
.kpi__tooltip {
    position: absolute;
    top: 42px;
    right: 14px;
    z-index: 30;
    width: 252px;
    background: var(--overlay-bg);
    color: var(--overlay-text);
    border-radius: var(--radius-md);
    padding: var(--space-3) 13px;
    box-shadow: var(--shadow-overlay);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.kpi__tooltip[hidden] {
    display: none;
}

.kpi__tooltip-title {
    font-weight: 500;
    color: var(--text-inverse);
    margin-bottom: 5px;
}

.kpi__tooltip-formula {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: #c6cbcf;
    background: var(--overlay-code-bg);
    border-radius: var(--radius-xs);
    padding: 6px 7px;
    margin-bottom: 6px;
}

.kpi__tooltip-note {
    color: var(--overlay-muted);
}

/* ---------- Abweichungen ---------- */

.delta {
    font-weight: 500;
}

.delta--good {
    color: var(--success);
}

.delta--bad {
    color: var(--danger);
}

.delta--neutral {
    color: var(--text-muted);
}

/* ---------- Statusanzeigen ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.7;
    border: 1px solid transparent;
    /*
     * Ein Abzeichen bricht nie um. "mit Hinweisen" rutschte in der engen
     * Pruefungsspalte auf zwei Zeilen, wodurch die Pillenform auf 43px
     * auseinandergezogen wurde und zerrissen aussah. Lieber wird die Spalte
     * breiter - die Tabelle darf notfalls waagerecht rollen.
     */
    white-space: nowrap;
}

.badge--ok {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}

.badge--warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}

.badge--error {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.badge--info,
.badge--neutral {
    background: var(--neutral-soft);
    border-color: var(--border);
    color: var(--neutral);
}

.badge--brand {
    background: var(--brand-primary-soft);
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
}

.notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: var(--font-size-base);
}

.notice--success {
    border-color: var(--success-border);
    background: var(--success-soft);
    color: var(--success);
}

.notice--warning {
    border-color: var(--warning-border);
    background: var(--warning-soft);
    color: var(--warning);
}

.notice--error {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

.notice--empty {
    flex-direction: column;
    gap: var(--space-2);
}

.notice__title {
    font-weight: 600;
}

.notice a {
    white-space: nowrap;
}

/* ---------- Management-Highlights ---------- */

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

/*
 * Kompakte Hinweiskarten (V2 Abschnitt 14).
 *
 * Ziel des Abschnitts ist, dass Haupt- und Sekundaerkennzahlen, die Hinweise
 * und der Anfang des ersten Diagramms ohne tiefes Scrollen sichtbar sind. Die
 * Karten trugen vorher den vollstaendigen Begruendungstext - gemessen bis 402
 * Zeichen, was sie auf 323 Pixel Hoehe brachte. Jetzt steht hier die
 * Kernaussage in einem Satz; Einordnung und Nebenrechnung stehen im
 * Analysebereich, der ohnehin einen Klick entfernt verlinkt ist.
 */
.highlight {
    background: var(--surface-tint);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.highlight__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.highlight__category {
    font-size: var(--font-size-sm);
    color: var(--text-faint);
}

.highlight__title {
    font-weight: 600;
    color: var(--text-strong);
}

.highlight__text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

/* Der Weg zur ausfuehrlichen Fassung sitzt am Fuss der Karte */
.highlight > a {
    margin-top: auto;
    padding-top: var(--space-1);
    font-size: var(--font-size-sm);
}

/* ---------- Diagramme ---------- */

/*
 * Diagrammgitter nach V2 Abschnitt 66.
 *
 * Sechs Spalten, weil die Vorgabe zwei verschiedene Aufteilungen verlangt:
 * Umsatz zwei Drittel neben Rohertrag ein Drittel (4 + 2), darunter je zur
 * Haelfte (3 + 3). Mit `auto-fit` ging das nicht - dort entschied allein die
 * Mindestbreite, und bei voller Breite standen drei gleich grosse Diagramme
 * nebeneinander statt der gewichteten Aufteilung.
 */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-5);
}

.chart-cell--two-thirds {
    grid-column: span 4;
}

.chart-cell--third {
    grid-column: span 2;
}

.chart-cell--half {
    grid-column: span 3;
}

/*
 * Ein halbes Diagramm, das als letztes allein in seiner Reihe steht, nimmt die
 * ganze Breite. Das betrifft derzeit den Lagerverlauf: Die Ergebnisbruecke,
 * die neben ihm stehen soll, kommt erst noch. Sobald sie da ist, ist der
 * Lagerverlauf nicht mehr das letzte Element und faellt von selbst auf die
 * halbe Breite zurueck - die Regel korrigiert sich also selbst.
 */
.chart-cell--half:last-child:nth-child(odd) {
    grid-column: span 6;
}

.chart-box {
    position: relative;
    height: 260px;
}

.chart-box--tall {
    height: 320px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.chart-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-legend__swatch {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: var(--chart-actual);
}

.chart-legend__swatch--prior {
    background: var(--chart-prior-year);
}

.chart-legend__swatch--plan {
    background: var(--chart-plan);
}

/* ---------- Tabellen ---------- */

.table-wrap {
    overflow-x: auto;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);
}

table.data th,
table.data td {
    padding: 9px var(--space-4);
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    /*
     * Oben ausgerichtet: In Zeilen mit mehrzeiligem Text – etwa der Spalte mit
     * der Berechnung auf der Kennzahlenseite – stünde ein mittig gesetzter
     * Betrag sonst weit entfernt von der Bezeichnung, zu der er gehört.
     */
    vertical-align: top;
}

table.data thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 500;
    background: var(--surface-muted);
    line-height: 1.35;
    box-shadow: inset 0 -1px 0 var(--border);
}

table.data tbody tr:last-child td {
    border-bottom: none;
}

table.data tbody tr:hover td {
    background: var(--surface-tint);
}

.hint {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ---------- Buttons ---------- */

.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    /* Eine Knopfbeschriftung bricht nie um - lieber wird der Knopf breiter. */
    white-space: nowrap;
}

.button:hover {
    background: var(--surface-muted);
    border-color: var(--border-hover);
    text-decoration: none;
}

.button--primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-inverse);
}

.button--primary:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    color: var(--text-inverse);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---------- Upload ---------- */

.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-5);
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    text-align: center;
    cursor: pointer;
}

.dropzone:hover,
.dropzone--active {
    border-color: var(--brand-primary);
    background: var(--brand-primary-soft);
}

.dropzone__headline {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.dropzone__hint {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.file-list {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.file-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.file-list li:last-child {
    border-bottom: none;
}

.steps {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--text-secondary);
}

.steps li + li {
    margin-top: var(--space-2);
}

/* ---------- Detailansichten ---------- */

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--space-5);
}

.detail-list {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 6px var(--space-4);
    margin: 0;
}

.detail-list dt {
    color: var(--text-muted);
}

.detail-list dd {
    margin: 0;
    /* Lange Werte ohne Trennstellen - etwa eine Pruefsumme - duerfen den
       Kasten nicht sprengen, auch nicht mit einer breiteren Ersatzschrift. */
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Pruefsumme: 64 Zeichen, die niemand Zeichen fuer Zeichen liest. Einzeilig
 * mit Auslassung dargestellt, der vollstaendige Wert steht im Titel und bleibt
 * markierbar - Kopieren liefert weiterhin den ganzen Hash.
 */
.detail-list dd.checksum {
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.issue-list li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
}

.issue-list li:last-child {
    border-bottom: none;
}

/* ---------- Minimal-Layout ---------- */

.centered {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-7);
}

.centered__box {
    max-width: 520px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-hover);
    padding: var(--space-8);
}

.centered__status {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--brand-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.centered__headline {
    margin: var(--space-2) 0 var(--space-3);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
    .app {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        overflow-x: auto;
        padding: var(--space-2) var(--space-3);
    }

    .sidebar__brand,
    .sidebar__section-label,
    .sidebar__footer {
        display: none;
    }

    .sidebar__nav {
        flex-direction: row;
    }

    :root {
        --content-pad: var(--space-4);
    }

    /*
     * Kein eigener Innenabstand mehr fuer die Kopfzeile: Sie liest ihn wie
     * Filterleiste, Inhalt und Fusszeile aus der gemeinsamen Spur, und
     * --content-pad ist hier schon gesenkt.
     */

    .chart-grid {
        grid-template-columns: 1fr;
    }

    .chart-cell--two-thirds,
    .chart-cell--third,
    .chart-cell--half,
    .chart-cell--half:last-child:nth-child(odd) {
        grid-column: span 1;
    }
}

/* ---------- BWA-Auswertung ---------- */

/*
 * Lesehierarchie der BWA: Erlös- und Aufwandspositionen normal,
 * Zwischensummen leicht abgesetzt, Ergebniszeilen als Ankerpunkte deutlich
 * hervorgehoben und das vorläufige Ergebnis als Abschluss am stärksten.
 */
.bwa-group--structure td {
    background: var(--surface-muted);
    font-weight: 500;
}

.bwa-group--result td {
    background: var(--surface-muted);
    font-weight: 600;
    color: var(--text-strong);
    border-top: 1px solid var(--border);
}

.bwa-group--final td {
    background: var(--surface-sunken);
    border-top: 2px solid var(--border-strong);
    border-bottom: 2px solid var(--border-strong);
}

.bwa-group--final td:first-child::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border-radius: 2px;
    background: var(--brand-primary);
}

.bwa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.bwa-toggle:hover {
    color: var(--brand-primary);
}

.bwa-toggle__icon {
    display: inline-flex;
    width: 12px;
    justify-content: center;
    color: var(--text-faint);
    transition: transform 0.12s ease;
}

.bwa-toggle--open .bwa-toggle__icon {
    transform: rotate(90deg);
}

.bwa-account td {
    background: var(--surface-tint);
}

.bwa-account td:first-child {
    padding-left: var(--space-7);
}

.bwa-account__number {
    display: inline-block;
    min-width: 42px;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

/* ---------- Anmeldung ---------- */

.login {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.login__logo {
    height: 28px;
    width: auto;
    align-self: flex-start;
}

.login__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.login__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.login__subtitle {
    margin: 0;
    color: var(--text-muted);
}

.login__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field__label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.field__input {
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.field__input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
}

.login__submit {
    justify-content: center;
    padding: 10px 16px;
    font-size: var(--font-size-md);
}

.login__note {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

/* Abmelden in der Seitenleiste */

.sidebar__logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.sidebar__logout:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

/* ---------- Benutzerverwaltung ---------- */

.inline-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.user-form {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.user-form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.user-form .select {
    min-width: 170px;
}

/* --- Lagerbestand ------------------------------------------------------- */

/* Betragsfelder in der Jahrestabelle: rechtsbündig wie die übrigen Zahlen,
   mit Ziffern gleicher Breite, damit die Spalte ruhig bleibt. */
.stock-input {
    width: 100%;
    max-width: 180px;
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.stock-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    border-top: 1px solid var(--border-light);
}

/* Noch nicht erfasste Monate treten zurück, ohne unleserlich zu werden. */
table.data tr.row--muted td {
    color: var(--text-muted);
    background: var(--surface-muted);
}

/* --- Kacheln des Dashboards an- und abschalten ------------------------- */

.tilegroup + .tilegroup {
    border-top: 1px solid var(--border-light);
}

.tilegroup__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-3);
}

.tilegroup__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-2) var(--space-4);
}

/*
 * Schieberegler. Bewusst ein echtes Kontrollkaestchen im Hintergrund statt
 * eines nachgebauten Bedienelements: So funktionieren Tastatur, Vorlesehilfen
 * und das Absenden ohne eine Zeile JavaScript - was die Content-Security-Policy
 * ohnehin verlangen wuerde.
 */
.switch {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.switch:hover {
    background: var(--surface-muted);
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    transition: background 120ms ease, border-color 120ms ease;
}

.switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: transform 120ms ease, background 120ms ease;
}

/* An: gruen, Knopf rechts */
.switch input:checked + .switch__track {
    background: var(--success);
    border-color: var(--success);
}

.switch input:checked + .switch__track .switch__knob {
    background: #fff;
    transform: translateX(14px);
}

.switch input:focus-visible + .switch__track {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-primary-soft);
    border-color: var(--brand-primary);
}

.switch__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.switch__label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.switch__formula {
    font-size: var(--font-size-xs);
    color: var(--text-faint);
}

/* Abgeschaltete Kennzahl tritt zurueck, bleibt aber lesbar */
.switch:not(:has(input:checked)) .switch__label {
    color: var(--text-muted);
}

.switch--locked {
    cursor: default;
}

.switch--locked:hover {
    background: transparent;
}

/*
 * Hochgerechnete Quoten auf der Plan/Ist-Seite.
 *
 * Bewusst keine Tabelle: Die Tabelle darueber fuehrt Euro-Spalten mit der
 * Ueberschrift "Abweichung EUR"; eine Prozentzahl darin waere irrefuehrend.
 */
.forecast-ratios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.forecast-ratio {
    flex: 1 1 220px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.forecast-ratio__label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.forecast-ratio__value {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-strong);
    white-space: nowrap;
}

/* ---------- Klassen anstelle von style-Attributen ---------- */

/*
 * Die Inhaltssicherheitsrichtlinie erlaubt nur Stilangaben aus eigenen
 * Dateien (style-src 'self'). Das gilt auch fuer style-Attribute im Markup:
 * Der Browser verwirft sie, ohne dass die Seite kaputt aussieht - sie sieht
 * nur anders aus als gedacht. Gemessen waren die Verlaufslinien der
 * Kennzahlenseite dadurch 64x15 statt 90x24 Pixel und von Zeile zu Zeile
 * unterschiedlich gross, weil sie ohne Groessenangabe auf den Inhalt der
 * Tabellenzelle schrumpften.
 *
 * Deshalb stehen alle diese Angaben hier als Klassen. Neue Stilangaben
 * gehoeren ebenfalls hierher, nicht ins Markup.
 */

/* Leerzustaende: Titel, Erklaerung und Schaltflaeche untereinander */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

/* Lesbare Zeilenlaenge fuer Erklaerungstexte */
.measure {
    max-width: 640px;
}

.measure--wide {
    max-width: 680px;
}

.measure--full {
    width: 100%;
    max-width: 680px;
}

/* Reihe nebeneinander, etwa zwei Schaltflaechen */
.row {
    display: flex;
    gap: var(--space-2);
}

/* Eingabefeld mit nachgestellter Einheit */
.input-unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Abschnitt innerhalb einer Karte, durch eine Linie abgesetzt */
.card__body--divided,
.card__header--divided {
    border-top: 1px solid var(--border-light);
}

.card__header--divided {
    border-bottom: none;
}

/* Eigenstaendige Karte, die einer anderen folgt */
.card--spaced {
    margin-top: var(--space-6);
}

.hint--flush {
    margin: 0;
}

.hint--spaced {
    margin-top: var(--space-3);
}

.heading--spaced {
    margin-bottom: var(--space-3);
}

/* Verlaufslinie in einer Tabellenzelle: feste Groesse fuer alle Zeilen */
.sparkline {
    width: 90px;
    height: 24px;
    display: block;
    /* Die Linie darf den Rahmen beruehren, ohne abgeschnitten zu werden */
    overflow: visible;
}

/* Feste Spaltenbreiten in Formular-Tabellen */
.col--password {
    width: 150px;
}

.col--password-repeat {
    width: 130px;
}

.col--value {
    width: 140px;
}

.input--threshold {
    width: 84px;
    text-align: right;
}

/* Beschriftungsspalte einer schmalen Kennwert-Tabelle */
.col--label {
    width: 30%;
}

/* ---------- Umschalter im Diagrammkopf ---------- */

/*
 * Der lokale Umschalter Monatlich / Kumuliert (V2 Abschnitt 16). Bewusst klein
 * und im Kopf der Karte: Er stellt nur die Darstellung dieses einen Diagramms
 * um, nicht den Zeitraum der Kennzahlen - das macht weiterhin die Filterleiste.
 */
.chart-head-tools {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.chart-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex: 0 0 auto;
}

.chart-toggle__button {
    border: 0;
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-size-sm);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.chart-toggle__button + .chart-toggle__button {
    border-left: 1px solid var(--border);
}

.chart-toggle__button:hover {
    background: var(--surface-muted);
    color: var(--text-primary);
}

.chart-toggle__button.is-active {
    background: var(--brand-primary-soft);
    color: var(--brand-primary);
    font-weight: 500;
}

/*
 * Die Ergebnisbruecke hat Positionsnamen auf der Achse und braucht deshalb
 * mehr Hoehe als ein Monatsverlauf.
 */
#chart-bridge {
    min-height: 0;
}

.chart-cell--half .chart-box:has(#chart-bridge) {
    height: 300px;
}

/*
 * Treiberliste in den Kostenbloecken (V2 Abschnitt 51).
 *
 * Kompakt, damit die Tabellenzeile nicht in die Hoehe waechst: Kontonummer,
 * Bezeichnung als Link auf das Konto, daneben die Abweichung.
 */
.driver-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-sm);
}

.driver-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    justify-content: space-between;
}

.driver-list a {
    /*
     * Lange Kontobezeichnungen duerfen umbrechen, die Zahl daneben nicht.
     * Ohne `overflow-wrap` setzte das laengste Wort eine Mindestbreite, und
     * die Tabelle brauchte dadurch bei 1024px 999 statt 975 Pixel.
     */
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Begrenzt die Treiberspalte, damit sie die Tabelle nicht aufzieht */
.driver-cell {
    width: 270px;
}

.driver-list .delta {
    white-space: nowrap;
}