/*
    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. */
    --o-flaeche: var(--t-flaeche, #fffdf8);
    --o-linie: var(--t-linie, #e7dcc8);
    --o-linie-stark: var(--t-linie-stark, #cfbe9e);
    --o-tinte: var(--t-tinte, #241c12);
    --o-tinte-soft: var(--t-tinte-soft, #5c4f3e);
    --o-tinte-fein: var(--t-tinte-fein, #6e6152);
    --o-kraft: var(--t-kraft-stark, #94612e);
    --o-kraft-hover: var(--t-kraft-hover, #7c5124);
    --o-kraft-tint: var(--t-kraft-tint, #f3e7d3);
    --o-hinweis: var(--t-hinweis, #8a5f1b);
    --o-gut: var(--t-s1, #2f4a1f);
    --o-stop: var(--t-siegel-tief, #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, #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; }