/*
    Der Office-Bereich — die Verwaltung hinter einem Laden.

    ══ WOHER DAS AUSSEHEN KOMMT ══════════════════════════════════════════════
    Basis ist TAMBERN, nicht yRoute. Diese Datei erfindet keine Farben: sie
    liest die Marken-Tokens aus tambern.css (--t-*) und benutzt sie. Wird die
    Marke nicht geladen (ein anderer Wirt, etwa Cartavo), greifen die
    Rückfallwerte hinter jedem var() und die Seiten sehen trotzdem aufgeräumt
    aus, nur neutral.

    ══ WARUM ES TROTZDEM NICHT WIE DER LADEN AUSSIEHT ════════════════════════
    Man soll die Marke wiedererkennen und im selben Blick wissen, dass man
    hinter der Theke steht. Vier Mittel, alle aus dem Bestand der Marke:

      1. FLÄCHE — der Laden steht auf Papier (--t-papier), die Verwaltung auf
         dem tieferen Pergament (--t-flaeche-tief). Dieselbe Familie, sichtbar
         Werkbank statt Auslage.
      2. SCHRIFT — der Laden führt Überschriften in der Serifenschrift
         (--t-titel). Hier steht ALLES in der Textschrift (--t-text). Das ist
         das deutlichste Signal und kostet nichts: ein Werkzeug schreibt
         nicht plakatiert.
      3. DICHTE — kleinere Stufen, engere Abstände, Zeilen wie in einem
         Journal. Der Laden darf luftig sein, eine Bestellliste nicht.
      4. FARBE MIT MASS — --t-kraft nur auf der einen bestätigenden Handlung.
         Zustände nehmen die semantischen Farben der Marke: --t-hinweis für
         „wartet", --t-s1 für „erledigt", --t-siegel für „nein".

    ══ ZAHLEN ════════════════════════════════════════════════════════════════
    Beträge laufen mit tabular-nums. In einer Liste von Bestellungen müssen
    Kommastellen untereinander stehen, sonst liest man sie nicht, sondern
    entziffert sie.
*/

.office-page {
    /* Tokens der Marke einsammeln, mit Rückfall. Ab hier nur noch --o-*, damit
       ein Wirt ohne tambern.css genau eine Stelle überschreiben muss.

       DREI STUFEN, und die mittlere ist am 18.09.2026 dazugekommen:

         1. --t-*   die Marke Tambern, wenn tambern.css geladen ist.
         2. --yr-*  die Tokens des WIRTS (themes.css, [data-theme] auf <html>).
         3. der harte Wert — ein helles Pergament.

       WARUM DIE MITTLERE FEHLTE UND WAS DAS ANRICHTETE: auf yroute.de ist
       tambern.css nicht geladen, also griff sofort Stufe 3. Die Seite bekam
       damit fast schwarze Tinte (#241c12) — und der Wirt malt unter einem
       dunklen Theme einen fast schwarzen Grund. Dunkel auf dunkel: die
       Überschrift „Zahlungsarten der Plattform" war da und nicht zu lesen.

       Der Grund wird hier ABSICHTLICH NICHT gesetzt. Der Wirt malt ihn, und
       eine helle Fläche mitten in einem dunklen Aufbau wäre eine Antwort auf
       eine Frage, die niemand gestellt hat. Es geht nur darum, dass die
       Schrift dem folgt, worauf sie liegt. */
    --o-flaeche: var(--t-flaeche, var(--yr-surface, #fffdf8));
    --o-linie: var(--t-linie, var(--yr-border, #e7dcc8));
    --o-linie-stark: var(--t-linie-stark, var(--yr-border, #cfbe9e));
    --o-tinte: var(--t-tinte, var(--yr-text, #241c12));
    --o-tinte-soft: var(--t-tinte-soft, var(--yr-text-muted, #5c4f3e));
    --o-tinte-fein: var(--t-tinte-fein, var(--yr-text-light, #6e6152));
    --o-kraft: var(--t-kraft-stark, var(--yr-primary, #94612e));
    --o-kraft-hover: var(--t-kraft-hover, var(--yr-primary-hover, #7c5124));
    --o-kraft-tint: var(--t-kraft-tint, var(--yr-primary-light, #f3e7d3));
    --o-hinweis: var(--t-hinweis, var(--yr-warning, #8a5f1b));
    --o-gut: var(--t-s1, var(--yr-success, #2f4a1f));
    --o-stop: var(--t-siegel-tief, var(--yr-danger, #8e2c17));
    --o-schrift: var(--t-text, "Segoe UI", system-ui, -apple-system, sans-serif);
    --o-radius: var(--t-r, 6px);
    --o-radius-klein: var(--t-r-klein, 3px);

    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
    font-family: var(--o-schrift);
    color: var(--o-tinte);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.office-head {
    /* Die Kraftlinie oben ist der Verwaltungs-Vermerk: schmal, in der
       Markenfarbe, und sie gehört zur Seite statt zur Navigation — so wirkt sie
       auch in einem Wirt, dessen Kopfzeile ich nicht kenne. */
    border-top: 3px solid var(--o-kraft);
    padding-top: 0.875rem;
    margin-bottom: 1.5rem;
}

.office-title {
    /* Textschrift, nicht Serife — siehe Punkt 2 oben. */
    font-family: var(--o-schrift);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

.office-subtitle {
    font-family: var(--o-schrift);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--o-tinte);
}

.office-meta {
    font-size: 0.8125rem;
    color: var(--o-tinte-fein);
    margin: 0;
}

.office-meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: var(--o-kraft-tint);
    border-radius: var(--o-radius-klein);
    padding: 0.05em 0.35em;
}

/* ── Brotkrumen ────────────────────────────────────────────────────────── */

.office-crumbs {
    font-size: 0.8125rem;
    color: var(--o-tinte-fein);
    margin-bottom: 1rem;
}

.office-crumbs a {
    color: var(--o-kraft);
    text-decoration: none;
}

.office-crumbs a:hover { text-decoration: underline; }

.office-crumbs-here {
    color: var(--o-tinte-soft);
    font-variant-numeric: tabular-nums;
}

.office-crumbs-here::before {
    content: " › ";
    color: var(--o-linie-stark);
}

/* ── Blöcke ────────────────────────────────────────────────────────────── */

.office-block {
    background: var(--o-flaeche);
    border: 1px solid var(--o-linie);
    border-radius: var(--o-radius);
    padding: 1rem 1.125rem;
    margin-bottom: 1rem;
}

/* ── Hinweise ──────────────────────────────────────────────────────────── */

.office-note {
    border: 1px solid var(--o-linie);
    border-left-width: 4px;
    border-radius: var(--o-radius);
    background: var(--o-flaeche);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}

.office-note p { margin: 0 0 0.375rem; }
.office-note p:last-child { margin-bottom: 0; }

.office-note--deny { border-left-color: var(--o-stop); }
.office-note--wait { border-left-color: var(--o-hinweis); }
.office-note--ok   { border-left-color: var(--o-gut); }

.office-empty {
    border: 1px dashed var(--o-linie-stark);
    border-radius: var(--o-radius);
    padding: 2rem 1rem;
    text-align: center;
    color: var(--o-tinte-fein);
}

.office-empty p { margin: 0; }

/* ── Marken (Zustandskürzel) ───────────────────────────────────────────── */

.office-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: var(--t-r-pill, 999px);
    border: 1px solid var(--o-linie-stark);
    color: var(--o-tinte-soft);
}

.office-badge--wait {
    border-color: var(--o-hinweis);
    color: var(--o-hinweis);
}

/* ── Bestellliste ──────────────────────────────────────────────────────── */

.office-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--o-linie);
    border-radius: var(--o-radius);
    background: var(--o-flaeche);
    overflow: hidden;
}

.office-list > li + li { border-top: 1px solid var(--o-linie); }

.office-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
}

.office-row:hover { background: var(--o-kraft-tint); }

.office-row:focus-visible {
    outline: 2px solid var(--o-kraft);
    outline-offset: -2px;
}

/* Wartet auf Geld: der Grund, warum man diese Liste überhaupt öffnet. */
.office-row--wait { box-shadow: inset 3px 0 0 var(--o-hinweis); }

.office-row-main { min-width: 0; }

.office-row-title {
    display: block;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.office-row-state {
    font-size: 0.8125rem;
    color: var(--o-tinte-fein);
    text-align: right;
}

.office-row-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Schmal: Betrag und Zustand rutschen unter den Titel, statt zu quetschen. */
@media (max-width: 34rem) {
    .office-row {
        grid-template-columns: 1fr auto;
        gap: 0.25rem 0.75rem;
    }
    .office-row-main { grid-column: 1 / -1; }
    .office-row-state { text-align: left; }
}

/* ── Anschrift ─────────────────────────────────────────────────────────── */

.office-address {
    margin: 0;
    line-height: 1.55;
}

/* ── Positionen und Summen ─────────────────────────────────────────────── */

.office-lines {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
}

.office-lines > li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--o-linie);
}

.office-line-name { min-width: 0; }

.office-line-amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.office-sums {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 1rem;
    margin: 0;
}

.office-sums dt { color: var(--o-tinte-fein); font-size: 0.875rem; }

.office-sums dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.office-sums-total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--o-tinte);
    border-top: 1px solid var(--o-linie-stark);
    padding-top: 0.375rem;
    margin-top: 0.125rem;
}

/* ── Formular ──────────────────────────────────────────────────────────── */

.office-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.office-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--o-tinte-soft);
}

.office-field input,
.office-field select {
    font: inherit;
    font-size: 0.9375rem;
    color: var(--o-tinte);
    background: var(--t-papier, var(--yr-body-bg, #fdfaf4));
    border: 1px solid var(--t-feldrand, #a68952);
    border-radius: var(--o-radius);
    padding: 0.5rem 0.625rem;
}

.office-field input:focus-visible,
.office-field select:focus-visible {
    outline: 2px solid var(--o-kraft);
    outline-offset: 1px;
    border-color: var(--o-kraft);
}

.office-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.office-check input { accent-color: var(--o-kraft); }

.office-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* Im Hinweiskasten steht das Feld über dem Knopf, nicht daneben — dort ist
   weniger Breite und das Feld trägt eine Beschriftung. */
.office-note .office-actions .office-field { flex: 1 1 18rem; }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */

.office-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: var(--o-radius);
    border: 1.5px solid var(--o-linie-stark);
    background: var(--o-flaeche);
    color: var(--o-tinte);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.16s var(--t-ease, ease), border-color 0.16s var(--t-ease, ease);
}

.office-btn:hover {
    background: var(--o-kraft-tint);
    border-color: var(--o-kraft);
}

.office-btn:focus-visible {
    outline: 2px solid var(--o-kraft);
    outline-offset: 2px;
}

.office-btn--primary {
    background: var(--o-kraft);
    border-color: transparent;
    color: var(--t-papier, #fdfaf4);
}

.office-btn--primary:hover {
    background: var(--o-kraft-hover);
    border-color: transparent;
}

.office-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Seiten-Eigenheiten ────────────────────────────────────────────────── */

/* Die drei Seiten haben verschiedene Aufgaben und dürfen verschieden breit
   sein — die Modifikatoren sind dafür da und nicht als Dekoration. */

/* Liste: eine Tabelle. Darf die volle Breite nehmen, damit Kunde, Zustand und
   Betrag nebeneinander Platz haben, statt umzubrechen. */
.office-orders { max-width: 64rem; }

/* Einzelne Bestellung: ein Belegdokument. Schmaler, weil Anschrift und
   Positionen in Lesebreite besser zu erfassen sind als über die ganze Fläche
   gezogen. */
.office-order { max-width: 46rem; }

/* Die Zahlungsarten-Seite trägt zwei Quellen in einer Ansicht (Zahlart und
   Bankverbindung) und braucht deshalb mehr Luft zwischen den Blöcken als eine
   Liste. */
.office-payments { max-width: 46rem; }
.office-payments .office-block + .office-block { margin-top: 1.25rem; }