/* HeadMan Kasse - Ergaenzungen zur gemeinsamen Oberflaeche (app.css) */

.kacheln { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.1rem; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: .85rem 1rem; }
.kachel .titel { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); }
.kachel .zahl { font-size: 1.55rem; font-weight: 700; line-height: 1.2; margin-top: .15rem; }
.kachel .zusatz { font-size: .85rem; color: var(--leise); }
.kachel.warn { border-color: #f0dcae; background: #fffaf0; }
.kachel.gross .zahl { font-size: 2rem; }

.zahlen { font-variant-numeric: tabular-nums; }
.plus { color: var(--gut); }
.minus { color: var(--fehler); }

.kasse-anzeige { margin: -.3rem 0 .7rem; font-weight: 600; color: var(--haupt-dunkel); }
.kachel.meine { border-color: #b9cff7; }

.ausgleich-satz { font-size: 1.1rem; font-weight: 600; margin: .3rem 0 .8rem; }

/* Art der Buchung als Umschalter */
.segment { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; margin-bottom: .4rem; }
.segment button { border: 0; border-radius: 0; border-right: 1px solid var(--rand); padding: .6rem .3rem; background: #fff; }
.segment button:last-child { border-right: 0; }
.segment button.an { background: var(--haupt); color: #fff; font-weight: 600; }

/* .knopf-label setzt in app.css einen weissen Grund - beim Hauptknopf waere die Schrift dann unsichtbar. */
.knopf-label.haupt-knopf { background: var(--haupt); border-color: var(--haupt); color: #fff; }

.buchen-raster { display: grid; gap: 1rem; grid-template-columns: minmax(260px, 2fr) minmax(300px, 3fr); align-items: start; }
@media (max-width: 860px) { .buchen-raster { grid-template-columns: 1fr; } }

.ablage { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 4.5rem; padding: 1rem;
    border: 2px dashed var(--rand); border-radius: var(--radius); color: var(--leise); }
.ablage.ueber { border-color: var(--haupt); background: #f3f7fe; color: var(--haupt-dunkel); }
@media (hover: none) { .ablage { display: none; } }

.beleg-vorschau { margin-top: .8rem; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; background: #f3f5f8; }
.beleg-vorschau img { display: block; width: 100%; max-height: 520px; object-fit: contain; cursor: zoom-in; }
.beleg-vorschau .pdf-hinweis { padding: 1rem; }

/* Stornierte Buchungen bleiben sichtbar, aber durchgestrichen */
tr.storniert td { color: var(--leise); }
tr.storniert td.betrag { text-decoration: line-through; }
.storno-grund { font-size: .8rem; color: var(--fehler); }

.beleg-fenster { position: fixed; inset: 0; z-index: 80; background: rgba(20, 30, 45, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.beleg-fenster-inhalt { background: #fff; border-radius: var(--radius); padding: 1rem; width: min(1000px, 100%); max-height: 100%; overflow: auto; }
.beleg-fenster img { display: block; max-width: 100%; margin: 0 auto; }
.beleg-fenster iframe { width: 100%; height: 75vh; border: 0; }

.ergebnis-tabelle td:first-child { width: 55%; }
.ergebnis-tabelle tr.summe td { font-weight: 700; border-top: 2px solid var(--text); }

/* Sortierbare Ueberschriften (BoBs Standard, 16.10.2026): ein blasser Doppelpfeil zeigt, dass man klicken kann. */
th.sortierbar { cursor: pointer; user-select: none; }
th.sortierbar .sortpfeil:empty::before { content: '↕'; opacity: .3; }
th.sortierbar[aria-sort="ascending"], th.sortierbar[aria-sort="descending"] { color: #1d2733; }

@media print {
    .kopf, .unterreiter, .nicht-drucken, .versionsleiste, #global-meldung { display: none !important; }
    body { background: #fff; }
    .karte { box-shadow: none; border: 0; }
}