/* Listen: /buchungen, Heute zu beachten, /manager, Einkauf
   Teil 6 von 6 der Betriebsansicht. Bis zum
   06.09.2026 stand das alles in laserdance-betrieb.css (2.519
   Zeilen). Der Schnitt hat KEINE Regel geaendert: die Bloecke
   stehen in derselben Folge wie vorher, und die sechs Dateien
   werden in der Reihenfolge geladen, in der ihre Regeln vorher
   in der einen Datei standen (laserdance-betrieb.css).
   Wer hier etwas aendert: docs/DESIGN.md lesen, danach
   python tools\css-referenz.py nachher. */
/* ---- Buchungsverwaltung (/buchungen) ---- */
.ld .bsuche { margin: 18px 0 14px }
.ld .bsuche input[type=search] {
    width: 100%; max-width: 560px; background: var(--field); border: 1px solid var(--line);
    color: var(--text); font-family: var(--font); font-size: var(--fs-14); padding: 12px 15px
}
.ld .bsuche input[type=search]:focus { outline: none; border-color: var(--acc) }
/* Der Satz sagt dem Tresen, dass das Feld auf den Scanner wartet. Klein und
   grau: er richtet sich an den, der ihn zum ersten Mal liest. */
.ld .bsuche .bhint { margin-top: 6px; font-size: var(--fs-12); color: var(--muted2) }
.ld .bfilter { display: flex; gap: 10px 26px; flex-wrap: wrap; align-items: center; margin-top: 12px }
.ld .bfilter .grp { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center }
.ld .bfilter .glbl {
    font-size: var(--fs-10); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted2); margin-right: 3px
}
.ld .bfilter .chip.zuruecksetzen { color: var(--cyan); border-color: rgba(2, 255, 255, .3) }
.ld .btreffer { margin: 14px 0 8px; font-size: var(--fs-12); color: var(--muted); font-weight: 600 }
.ld .btab th.srt { cursor: pointer; user-select: none; white-space: nowrap }
.ld .btab th.srt:hover { color: var(--cyan) }
.ld .bfilter .chip {
    border: 1px solid var(--line); background: transparent; color: var(--muted);
    font-family: var(--font); font-weight: 700; font-size: var(--fs-12); padding: 5px 11px; cursor: pointer
}
.ld .bfilter .chip:hover { border-color: var(--acc); color: var(--text) }
.ld .bfilter .chip.on { background: var(--acc); border-color: var(--acc); color: #fff }

.ld .btabwrap { border: 1px solid var(--line); background: var(--p1); overflow-x: auto }
.ld .btab { width: 100%; border-collapse: collapse; font-size: var(--fs-13) }
.ld .btab th {
    text-align: left; font-size: var(--fs-11); letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--line)
}
.ld .btab td { padding: 10px 12px; border-bottom: 1px solid var(--dim) }
.ld .btab tbody tr { cursor: pointer }
.ld .btab tbody tr:hover { background: rgba(200, 27, 255, .09) }
/* Die Zeile, deren Buchung gerade in der Spalte steht (Schritt 7). */
.ld .btab tbody tr.on { background: rgba(200, 27, 255, .16); box-shadow: inset 3px 0 0 var(--acc) }
.ld .btab tbody tr:last-child td { border-bottom: 0 }
.ld .btab .r { text-align: right }
.ld .btab .nm { font-weight: 700 }
.ld .btab .mut { color: var(--muted); font-size: var(--fs-12) }
.ld .btab tr.storn td { color: var(--muted2); text-decoration: line-through }
.ld .btab tr.storn td .stpill { text-decoration: none }
.ld .mono { font-family: ui-monospace, Consolas, monospace }
.ld .stpill { font-size: var(--fs-11); font-weight: 700; padding: 3px 9px; border: 1px solid currentColor; white-space: nowrap }
.ld .stpill.paid { color: var(--lime) }
.ld .stpill.pending_payment { color: var(--ampel-gelb) }
/* storniert ist keine Gefahr, sondern vorbei: grau, die Zeile durchgestrichen (Stufe 0.13) */
.ld .stpill.cancelled { color: var(--muted2) }

/* Heute zu beachten: Spezialanfragen in jeder Ansicht sichtbar */
.ld .beachten b {
    display: block; font-size: var(--fs-11); letter-spacing: .06em; text-transform: uppercase;
    color: var(--acc); margin-bottom: 6px
}
.ld .beachten button {
    display: flex; gap: 8px; width: 100%; text-align: left; background: none;
    border: 0; border-left: 2px solid var(--acc); padding: 4px 0 4px 8px;
    margin-bottom: 4px; cursor: pointer; font-family: var(--font)
}
.ld .beachten button:hover { background: rgba(200, 27, 255, .08) }
.ld .beachten .z { flex: 0 0 auto; font-size: var(--fs-11); font-weight: 800; color: var(--acc) }
.ld .beachten .t {
    font-size: var(--fs-11); color: var(--text); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap
}
.ld .mast2 .beachtknopf { border-color: var(--acc); color: var(--acc-hell) }
.ld .mast2 .beachtknopf.on { background: rgba(200, 27, 255, .2); color: #fff }

/* "Heute zu beachten" als eigene Spalte, die man ein- und ausblendet */
.ld .opswrap:has(.beachtspalte) { --beachtb: 260px }
.ld .beachtspalte {
    grid-column: 3; position: sticky; top: calc(var(--kopf, 110px) + 10px);
    max-height: calc(100vh - var(--kopf, 110px) - 22px);
    overflow-y: auto; background: var(--p1); border: 1px solid var(--acc); padding: 11px 12px
}
.ld .beachtspalte .bsk {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px
}
.ld .beachtspalte .bsk b {
    font: 700 var(--fs-11) var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--acc)
}
.ld .beachtspalte .bsk button {
    background: none; border: 0; color: var(--muted); font-size: var(--fs-18); line-height: 1; cursor: pointer
}
.ld .beachtspalte .bsk button:hover { color: #fff }
.ld .beachtspalte .bse {
    display: flex; gap: 8px; width: 100%; text-align: left; background: none; border: 0;
    border-left: 2px solid var(--acc); padding: 6px 0 6px 9px; margin-bottom: 5px;
    cursor: pointer; font-family: var(--font)
}
.ld .beachtspalte .bse:hover { background: rgba(200, 27, 255, .08) }
.ld .beachtspalte .bse .z { flex: 0 0 auto; font-size: var(--fs-11); font-weight: 800; color: var(--acc) }
.ld .beachtspalte .bse .t { font-size: var(--fs-12); color: var(--text); line-height: 1.35 }
@media (max-width: 1100px) {
    .ld .opswrap:has(.beachtspalte) { grid-template-columns: 1fr }
    .ld .beachtspalte { grid-column: 1; position: static; max-height: none }
}

/* ---- Buchungsliste auf dem Handy: aus jeder Zeile wird eine Karte ---- */@media (max-width: 700px) {
    /* Acht Spalten (Nr, Termin, Name, Produkt, Pers., Betrag, Status, Weg)
       brauchen rund 570 Pixel. Auf 390 ragten Betrag und Status rechts aus
       dem Bild, ohne dass etwas darauf hinwies - gerade die zwei Angaben,
       wegen derer man die Liste aufmacht. Statt waagrecht zu schieben wird
       jede Zeile zu einer Karte, in der alles steht.
       Die Anordnung laeuft ueber nth-child, damit das Markup unveraendert
       bleibt und die Tabelle am Schreibtisch eine Tabelle bleibt. */
    .ld .btab, .ld .btab tbody, .ld .btab tr, .ld .btab td { display: block }
    .ld .btab thead { display: none }

    .ld .btab tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "nr     name    betrag"
            "termin produkt pers"
            "status status  weg";
        gap: 2px 9px;
        align-items: baseline;
        padding: 11px 12px;
        border-bottom: 1px solid var(--dim)
    }
    .ld .btab td { border: 0; padding: 0; white-space: normal }

    .ld .btab td:nth-child(1) { grid-area: nr;      font-size: var(--fs-11); color: var(--muted) }
    .ld .btab td:nth-child(2) { grid-area: termin;  font-size: var(--fs-12); color: var(--muted) }
    .ld .btab td:nth-child(3) { grid-area: name;    font-size: var(--fs-15); font-weight: 800 }
    .ld .btab td:nth-child(4) { grid-area: produkt; font-size: var(--fs-12); color: var(--muted) }
    .ld .btab td:nth-child(5) { grid-area: pers;    font-size: var(--fs-12); text-align: right; color: var(--muted) }
    .ld .btab td:nth-child(5)::after { content: " Pers." }
    .ld .btab td:nth-child(6) { grid-area: betrag;  font-size: var(--fs-15); font-weight: 800; text-align: right }
    .ld .btab td:nth-child(7) { grid-area: status;  padding-top: 3px }
    .ld .btab td:nth-child(8) { grid-area: weg;     font-size: var(--fs-11); text-align: right; color: var(--muted) }

    /* Die Buchungstabelle wird am Handy zu Karten, das Protokoll bleibt
       eine Tabelle - die muss in sich scrollen koennen. */
    .ld .btabwrap { overflow-x: visible }
}

/* Beachtspalte in der Vollbild-Uebersicht: schwebt rechts oben, statt das
   Zeitband zu verdraengen */
.ld .beachtspalte.ov {
    position: fixed; right: 12px; top: calc(var(--kopf, 110px) + 10px);
    width: min(320px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto;
    z-index: 30; background: var(--p1); border: 1px solid var(--acc);
    box-shadow: 0 14px 40px rgba(0,0,0,.5)
}
.ld .wtag {
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    border: 1px solid var(--line); padding: 6px 10px; font: 700 var(--fs-12) var(--font);
    color: var(--muted); user-select: none
}
.ld .wtag.on { border-color: var(--acc); color: #fff; background: rgba(200,27,255,.14) }
.ld .wtag input { width: auto; accent-color: var(--acc); margin: 0 }

/* ---- Nachtschicht P1 ---- */

/* Beachten als echte Spalte rechts: eingeblendet nimmt sie Platz, der Plan
   schrumpft; ausgeblendet gehoert ihm die Breite. Traeger ist die alte
   :has-Regel mit grid-column 3 - die zweite, schwebende Variante ist weg. */
/* In der Vollbild-Uebersicht traegt Flex die Hoehe - das Grid brach die
   Kette und die Zeitleiste rutschte zusammengedrueckt nach unten. */
.ld .wrap.ovfull .opswrap:has(.beachtspalte) { display: flex; gap: 12px }
.ld .wrap.ovfull .opswrap:has(.beachtspalte) > .opsmain { flex: 1 1 auto; min-width: 0 }
.ld .wrap.ovfull .beachtspalte { flex: 0 0 280px; order: 2; grid-column: auto; position: static; max-height: none; margin: 10px 14px 10px 0 }
@media (max-width: 1100px) {
    /* Wenig Breite: Spalte quer ueber die volle Breite statt seitlich */
    .ld .opswrap:has(.beachtspalte) { --beachtb: ; }
    .ld .beachtspalte { grid-column: 1 / -1; position: static; max-height: 260px }
    .ld .wrap.ovfull .opswrap:has(.beachtspalte) { grid-template-columns: 1fr }
    .ld .wrap.ovfull .beachtspalte { grid-column: auto }
}

/* Uebersicht mit Spalte UND Beachten (Inventar 19.09., Stufe 0.11): das Flex-
   Raster gab der Spalte keine Basis, sie schrumpfte auf 197 px in die Mitte,
   die Zeilenkoepfe lagen ueber der Beachten-Liste. Reihenfolge und Breiten
   ausdruecklich: Spalte links, Plan, Beachten rechts. */
@media (min-width: 861px) and (max-width: 1439px) {
    .ld .wrap.ovfull .opswrap:has(.beachtspalte) > .spalte { flex: 0 0 var(--spalte-b); order: 0 }
    .ld .wrap.ovfull .opswrap:has(.beachtspalte) > .opsmain { order: 1 }
    /* Das Dock haengt rechts (betrieb-spalte.css) und lag ueber der Liste. */
    .ld:has(.wrap.ovfull .beachtspalte) .dock { right: calc(280px + 22px) }
}
/* Tablet quer (853x391): der Plan oben, Beachten als Liste darunter, nie nebeneinander. */
@media (max-width: 860px) {
    .ld .wrap.ovfull .opswrap:has(.beachtspalte) { flex-direction: column }
    .ld .wrap.ovfull .beachtspalte { flex: 0 0 auto; order: 2; margin: 10px 0 0; max-height: 220px }
}

/* Beachten-Spalte: ausdruecklich in Zeile 1. Ohne das setzte das Grid-
   Auto-Placement Kalender und Plan in Zeile ZWEI (die Spalte stand als
   erstes Kind explizit in Spalte 3, der Cursor lief weiter) - oben blieb
   eine grosse schwarze Flaeche. */
.ld .opswrap .beachtspalte { grid-row: 1; grid-column: 3 }
@media (min-width: 1500px) {
    .ld .pg:has(.staffchip) .wrap:not(.ovfull) .opswrap:has(.beachtspalte) { --beachtb: 300px }
}

/* ============================================================
   Manager-Planungstool (/manager) - docs/PLAN-MANAGER-TOOL.md
   ============================================================ */
.ld .mgr-laedt, .ld .mgr-leer { color: var(--muted); padding: 14px 2px; font-size: var(--fs-14) }
.ld .mgr-wnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px }
.ld .mgr-wnav .go { margin-left: auto }

/* --- Ueberblick: Fristen/Handlungen als klare Zeilenliste --- */
.ld .mgr-hs { display: flex; flex-direction: column; gap: 8px }
.ld .mgr-hs .hzeile {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
    color: var(--text); background: var(--field); border: 1px solid var(--line);
    border-left-width: 4px; padding: 12px 14px; min-height: 52px;
}
.ld .mgr-hs .hzeile:hover { border-color: var(--acc) }
.ld .mgr-hs .hicon { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--muted) }
.ld .mgr-hs .hzeile.dringend { box-shadow: inset 0 0 0 1px var(--red); border-left-color: var(--red) }
.ld .mgr-hs .hzeile.dringend .hicon { background: var(--red) }
.ld .mgr-hs .htext { flex: 1; min-width: 0; font-size: var(--fs-14); line-height: 1.35 }
.ld .mgr-hs .hfrist {
    flex: 0 0 auto; font: 800 var(--fs-13) var(--font); color: var(--text);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ld .mgr-hs .hzeile.dringend .hfrist { color: var(--red) }

/* --- Einkauf: einspaltig, grosse Tap-Ziele, abhakbar --- */
.ld .einkauf-hinweis { color: var(--muted); font-size: var(--fs-12); line-height: 1.45; margin: 0 0 12px }
.ld .einkauf-liste { display: flex; flex-direction: column; gap: 2px; max-width: 640px }
.ld .einkauf-liste .ekat {
    font: 700 var(--fs-11) var(--font); letter-spacing: .08em; text-transform: uppercase;
    color: var(--acc); padding: 14px 0 5px; position: sticky; top: 0; background: var(--p1);
}
.ld .einkauf-item {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 12px 12px; border: 1px solid var(--line); background: var(--field);
    min-height: 54px;
}
.ld .einkauf-item input[type=checkbox] { inline-size: 24px; block-size: 24px; flex: 0 0 auto }
.ld .einkauf-item .emenge {
    flex: 0 0 auto; min-width: 64px; font: 800 var(--fs-16) var(--font);
    font-variant-numeric: tabular-nums; color: var(--text);
}
.ld .einkauf-item .ename { flex: 1; min-width: 0; font-weight: 600 }
.ld .einkauf-item .efrist {
    flex: 0 0 auto; text-align: right; font-size: var(--fs-12); color: var(--muted); line-height: 1.25;
}
.ld .einkauf-item .efrist small { display: block; font-size: var(--fs-10); opacity: .8 }
/* "wer ›": die Spalte zeigt, welche Partys den Posten bestellt haben (Schritt 7c). */
.ld .einkauf-item .ewer {
    background: none; border: 0; padding: 2px 4px; color: var(--cyan); font: 700 var(--fs-12) var(--font);
    cursor: pointer; white-space: nowrap
}
.ld .einkauf-item .ewer:hover, .ld .einkauf-item .ewer.on { text-decoration: underline }
.ld .einkauf-item.done { opacity: .5 }
.ld .einkauf-item.done .ename, .ld .einkauf-item.done .emenge { text-decoration: line-through }

/* --- Woche: senkrechte Agenda (iPad-Hochformat), Raster ab breit --- */
.ld .mgr-woche { display: flex; flex-direction: column; gap: 8px }
.ld .mgr-woche .wtag {
    display: block; text-decoration: none; color: var(--text);
    background: var(--field); border: 1px solid var(--line); border-left-width: 4px;
    padding: 12px 14px;
}
.ld .mgr-woche .wtag:hover { border-color: var(--acc) }
.ld .mgr-woche .wtag.heute { border-left-color: var(--cyan) }
.ld .mgr-woche .wtag.zu { opacity: .55 }
.ld .mgr-woche .wkopf { display: flex; align-items: baseline; gap: 10px }
.ld .mgr-woche .wkopf b { font-size: var(--fs-15) }
.ld .mgr-woche .wdat { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums }
.ld .mgr-woche .wtag-flag {
    margin-left: auto; font: 700 var(--fs-10) var(--font); letter-spacing: .04em;
    text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line);
}
.ld .mgr-woche .wtag-flag.feier { color: var(--ampel-gelb); border-color: rgba(255,214,0,.4) }
.ld .mgr-woche .wtag-flag.sonder { color: var(--acc); border-color: rgba(200,27,255,.4) }
.ld .mgr-woche .wleer { color: var(--muted); font-size: var(--fs-13); margin-top: 6px }
.ld .mgr-woche .wzahlen { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px }
.ld .mgr-woche .wz { font-size: var(--fs-13); color: var(--muted) }
.ld .mgr-woche .wz b { color: var(--text); font: 800 var(--fs-16) var(--font); font-variant-numeric: tabular-nums }
.ld .mgr-woche .wz.wumsatz { margin-left: auto; color: var(--text); font-weight: 800 }
.ld .mgr-woche .wdetail { margin-top: 5px; font-size: var(--fs-12); color: var(--muted2, var(--muted)) }
.ld .mgr-woche .wwarn { margin-top: 7px; display: flex; align-items: center; gap: 7px; font-size: var(--fs-12); color: var(--ampel-gelb) }
.ld .mgr-woche .wwarn .wdot { width: 8px; height: 8px; border-radius: 50%; background: var(--ampel-gelb) }
.ld .mgr-summe {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-13); color: var(--muted);
}
.ld .mgr-summe b { color: var(--text); font-weight: 800 }

@media (min-width: 1000px) {
    /* minmax(0,1fr) statt 1fr: sonst wird jede Spalte so breit wie ihr
       laengster Text und die Woche haengt rechts ueber den Rand. */
    .ld .mgr-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px }
    .ld .mgr-woche .wtag { display: flex; flex-direction: column }
    .ld .mgr-woche .wz.wumsatz { margin-left: 0 }
    .ld .mgr-woche .wzahlen { flex-direction: column; gap: 4px }
}

/* --- Druck: nur die Einkaufsliste, leere Kaestchen --- */
@media print {
    body * { visibility: hidden }
    .ld .einkauf-liste, .ld .einkauf-liste * { visibility: visible }
    .ld .einkauf-liste { position: absolute; left: 0; top: 0; max-width: 100% }
    .ld .einkauf-item { break-inside: avoid; border-color: #999 }
    .ld .einkauf-item input[type=checkbox] { -webkit-appearance: none; appearance: none; border: 2px solid #333; background: #fff }
    .ld .einkauf-item .ename, .ld .einkauf-item .emenge { color: #000 }
    .ld .einkauf-item .efrist { color: #333 }
}

/* Zeitraum "geschlossen": Wochentag-Wiederholung (Ticket 2026-08-23) */
.ld .zrwtage { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px }

/* Manager: Testbuchungs-Werkzeug */
.ld .mgr-testrow { display: flex; gap: 9px; flex-wrap: wrap; align-items: center }
.ld .mgr-testrow select { flex: 0 0 auto; width: auto; min-width: 150px }
.ld .mgr-testrow input[type=email] { flex: 1 1 240px }
.ld .mgr-testerg {
    margin-top: 12px; padding: 11px 14px; background: rgba(2, 255, 255, .07);
    border-left: 3px solid var(--cyan); font-size: var(--fs-13);
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.ld .mgr-testerg a { color: var(--cyan); font-weight: 700 }
.ld .mast2 .ur.beachtknopf {
    height: 32px; align-self: center; border: 1px solid rgba(200, 27, 255, .5); border-radius: var(--r-chip);
    padding: 0 10px; color: var(--acc-hell); font: 700 var(--fs-12) var(--font); margin-right: 8px; white-space: nowrap
}
.ld .mast2 .ur.beachtknopf::after, .ld .mast2 .ur.beachtknopf:hover::after { display: none }
.ld .mast2 .ur.beachtknopf.on { background: rgba(200, 27, 255, .18); color: #fff }