/* KassenFlow – Tagesjournal (Anzeige der Belege des Geschäftstags).
   REINE DARSTELLUNG: das Journal ist eine READ-only-Ansicht der aufgezeichneten
   Belege (GET /api/journal). §146 Abs.1 AO verlangt VOLLSTÄNDIGE und GEORDNETE
   Aufzeichnung – die Anzeige zeigt daher ALLE Belege (inkl. Training/Storno/
   Reversal) in Server-Reihenfolge; dieses CSS ändert nur das Layout, nie Inhalt,
   Reihenfolge oder Summen. Theme-aware über die POS-Variablen (--surface etc.).
   Am schmalen Gerät (Sunmi) eine echte Vollbild-Seite statt eines Rand-Modals. */

#journalOverlay { align-items: stretch; justify-content: center; padding: 0; }

.journal-sheet {
  display: flex; flex-direction: column;
  width: 100%; max-width: 100%; height: 100%;
  background: var(--surface, #fff); color: var(--text, #1a1a2e);
  overflow: hidden;
}

.journal-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; background: var(--surface-2, #f4f5f9);
  border-bottom: 1px solid rgba(127, 127, 127, .2);
}
.journal-title { font-size: 18px; font-weight: 800; }
.journal-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.journal-btn {
  border: 1px solid rgba(127, 127, 127, .4); background: transparent; color: inherit;
  border-radius: 8px; padding: 7px 11px; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.journal-x { border: none; background: transparent; color: inherit; font-size: 22px; cursor: pointer; line-height: 1; }

.journal-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  padding: 12px 18px; border-bottom: 1px solid rgba(127, 127, 127, .15);
}
.journal-filters label { display: flex; flex-direction: column; font-size: 12px; gap: 4px; }
.journal-filters select, .journal-filters .journal-reset {
  padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .4);
  background: var(--surface, #fff); color: inherit; font-family: inherit; font-size: 14px;
}
.journal-filters .journal-reset { cursor: pointer; align-self: flex-end; }

/* Tages-Summen prominent als Kachelzeile. */
.journal-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid rgba(127, 127, 127, .15);
  background: var(--surface, #fff);
}
.journal-stat { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.journal-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #667); }
.journal-stat__value { font-size: 18px; font-weight: 800; }
.journal-stat--revenue .journal-stat__value { color: #16a34a; }

.journal-body { flex: 1 1 auto; overflow: auto; padding: 10px 14px 24px; }

/* Belegzeile */
.journal-entry {
  border: 1px solid rgba(127, 127, 127, .22); border-radius: 10px; padding: 10px 12px; margin: 8px 0;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center;
}
.journal-entry__main { min-width: 200px; flex: 1 1 auto; }
.journal-entry__head { font-weight: 600; }
.journal-entry__meta { font-size: 12px; color: var(--muted, #667); margin-top: 2px; }
.journal-entry__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.journal-entry__actions button {
  padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .4);
  background: transparent; color: inherit; cursor: pointer; font-size: 13px; white-space: nowrap;
}
.journal-entry__actions .journal-recall { border-color: #c0392b; color: #c0392b; }

.journal-badge--reversal { color: #8e44ad; font-weight: 700; }
.journal-badge--reversed { color: #c0392b; font-weight: 700; }
.journal-badge--training { color: #a16207; font-weight: 700; }
.journal-badge--active { color: #16a34a; font-weight: 700; }
.journal-tse-pending { color: #e67e22; }

.journal-empty { padding: 40px; text-align: center; color: var(--muted, #888); }

/* Breites Display: zentrierte Karte statt Vollbild. */
@media (min-width: 760px) {
  #journalOverlay { align-items: flex-start; padding: 24px; }
  .journal-sheet {
    max-width: 980px; height: auto; max-height: calc(100vh - 48px);
    border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
  }
}