/* ==========================================================================
   Shiftly – Grundgestaltung
   Mobile zuerst. Desktop ist dieselbe Ansicht mit mehr Rand.

   Farbwelt: Ein Kiosk bei Nacht ist eine beleuchtete Box an dunkler Strasse.
   Dunkler Schiefergrund, Bernstein als Akzent wie die Leuchtreklame.
   Betraege in Tabellenziffern, damit Spalten untereinander vergleichbar sind.
   ========================================================================== */

:root {
  /* Nur dunkles Design, sonst rendert der Browser Kalender-/Uhr-Icons in
     Datums- und Zeitfeldern schwarz auf schwarz. */
  color-scheme: dark;

  /* Grund */
  --ground:        #0F1620;
  --surface:       #18222E;
  --surface-lift:  #22303F;
  --line:          #2E3E50;

  /* Schrift */
  --text:          #E8EDF2;
  --text-muted:    #8FA2B4;
  --text-faint:    #5D7286;
  /* Maximaler Kontrast, hell auf dunklem Grund. Im hellen Theme (noch nicht
     gebaut) muss diese Variable auf einen dunklen Wert kippen, sonst wird
     der Artikelpreis im Autocomplete dort unsichtbar. */
  --text-strong:   #FFFFFF;

  /* Akzente */
  --amber:         #F0A93B;
  --amber-dim:     #8A6224;
  --credit:        #5FBF8F;
  --debit:         #E4736A;

  /* Mass */
  --gap:           1rem;
  --radius:        10px;
  --tap:           2.75rem;      /* 44px Mindestgroesse fuer Tippziele */

  --font-ui:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num:      ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Bottom-Nav: eigene Variablen, unter Einstellungen pflegbar (siehe
     base.html.twig). Vorgaben hier greifen nur, falls dieser Ueberschreib-
     Block aus irgendeinem Grund fehlt. */
  --page-max-width:        704px;
  --nav-width-pct-mobile:  90;
  --nav-width-pct-desktop: 30;
  --nav-icon-max-h-mobile: 30px;
  --nav-icon-max-h-desktop: 22px;
  --nav-icon-color:        var(--text-muted);
  --nav-icon-color-active: var(--ground);
  --nav-bg:                transparent;
  --nav-bg-active:         var(--amber);
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--amber); }
a.btn, .bottom-nav__item, .side-panel__nav a { text-decoration: none; }
a:hover { filter: brightness(1.15); }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Knopf, der wie ein Textlink aussieht - fuer Aktionen ohne Navigationsziel
   (z. B. Checkboxen einer Liste per JS umschalten), wo <a href> falsch waere. */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--amber);
  cursor: pointer;
}
.link-btn:hover { filter: brightness(1.15); }
.link-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Reines Icon als Link, z.B. Bearbeiten-Stift in einer Tabellenzeile. */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--text-muted);
  flex: none;
}
.icon-link svg { width: 16px; height: 16px; }
.icon-link:hover { color: var(--amber); filter: none; }

/* Status-Haken/-Kreuz in einer Tabellenzelle, z.B. "abgerechnet". */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.status-icon svg { width: 16px; height: 16px; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--ground);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Zahlen immer gleich breit, damit Betraege untereinander stehen */
.num, td.num, .amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.amount--credit { color: var(--credit); }
.amount--debit  { color: var(--debit); }
.amount--lg     { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   Schichtband: das Wiedererkennungselement. Zeigt die drei Slots des Tages,
   der gerade laufende leuchtet. Am Wochenende faellt die Mitte weg, dann
   sind es zwei.
   -------------------------------------------------------------------------- */

.shift-band {
  display: flex;
  gap: 2px;
  padding: env(safe-area-inset-top) 0 0;
  margin: 0;
  list-style: none;
  background: var(--ground);
}

.shift-band__slot {
  flex: 1;
  padding: 0.375rem 0.5rem 0.4375rem;
  border-top: 3px solid var(--line);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 160ms ease, border-color 160ms ease;
}

.shift-band__slot--active {
  border-top-color: var(--amber);
  color: var(--amber);
}

.shift-band__time {
  display: block;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.shift-band__slot--active .shift-band__time { color: var(--text); }

/* --------------------------------------------------------------------------
   Kopf und Rumpf
   -------------------------------------------------------------------------- */

/* Drei Spalten (Rand/Icon/Rand) statt space-between, damit ein langer
   Anzeigename das mittige Icon nicht ueberdeckt - er bricht stattdessen in
   seiner eigenen Spalte mit Auslassungspunkten ab. */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.topbar__side { display: flex; align-items: center; min-width: 0; }
.topbar__side--end { justify-content: flex-end; }

.topbar__brand {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}

.topbar__brand span { color: var(--amber); }

.topbar__profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
}

.topbar__profile strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__avatar {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-lift);
  color: var(--amber);
  font-size: 0.8125rem;
  font-weight: 600;
}

.topbar__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin: -0.5rem;
  color: var(--text);
  cursor: pointer;
}

.topbar__menu-btn svg { width: 22px; height: 22px; }

.main {
  flex: 1;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--gap);
  padding-bottom: calc(var(--tap) + 2.5rem);
}

.footer {
  padding: 1rem 1rem calc(var(--tap) + 1.5rem);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   Karten und Text
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: var(--gap) 0;
}

.card__title {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Screenshot-Knopf einer Box (T-87): nimmt vollen Boxinhalt auf, auch
   ueberlaufende, per .table-wrap horizontal gescrollte Tabellen - nicht nur
   den sichtbaren Ausschnitt. */
.card__shot {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
}
.card__shot svg { width: 26px; height: 26px; }
.card__shot:hover { color: var(--amber); }
.card__shot:disabled { opacity: 0.5; cursor: default; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
h2 { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
p  { margin: 0 0 0.75rem; }
.lead { color: var(--text-muted); }
.small { font-size: 0.8125rem; }

/* --------------------------------------------------------------------------
   Formulare. Tippziele mindestens 44px, Schrift mindestens 16px, sonst
   zoomt Safari beim Hineintippen.
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1rem; }

.field__label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.field__input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 0.875rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  appearance: none;
}

.field__input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
  border-color: var(--amber-dim);
}

.search-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

/* Bewusst kein Overlay (position: absolute): eine Liste, die ueber dem
   Rest der Seite schwebt, verdeckt dabei auch den "Suchen"-Knopf direkt
   darunter - ein Klick dorthin trifft dann unbemerkt einen Vorschlag
   statt des Knopfs. Im normalen Fluss schiebt die Liste den Rest der
   Seite stattdessen einfach nach unten. */
.suggest-list {
  max-height: 40vh;
  overflow-y: auto;
  margin: 0.5rem 0 1rem;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface-lift);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.suggest-list[hidden] { display: none; }

.suggest-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
}

.suggest-list__item:hover,
.suggest-list__item:focus-visible {
  background: var(--surface);
  outline: none;
}

.suggest-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suggest-list__price {
  flex: none;
  font-size: 0.8125rem;
  color: var(--text-strong);
}

.search-row .field__input { flex: 1; }

.check {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--tap);
  cursor: pointer;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--amber);
  flex: none;
}

/* Checkboxen mit kurzem Label (z.B. Jahre im Jahresvergleich) nebeneinander
   statt jede in eigener Zeile - .check ist selbst ein Flex-Container und
   damit ein Blockelement, ohne Grid-Eltern also automatisch eine Spalte. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.25rem 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ground);
  background: var(--amber);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  cursor: pointer;
  /* Knoepfe sind auch als <a> ausgezeichnet. Ohne diese beiden Zeilen erben
     sie Farbe und Unterstreichung der Links und sehen aus wie Text. */
  text-decoration: none;
  color: var(--ground);
}

.btn:hover { filter: brightness(1.07); text-decoration: none; }
/* Ohne :not() gewinnt diese Regel gegen .btn--quiet:hover per Spezifitaet
   (gleich viele Klassen, aber ein Element mehr) und macht dessen Text auf
   dem dunklen Grund unlesbar. */
a.btn:hover:not(.btn--quiet) { color: var(--ground); }

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

.btn--quiet {
  color: var(--text-muted);
  background: transparent;
  border-color: var(--line);
  font-weight: 500;
}

.btn--quiet:hover { color: var(--text); border-color: var(--text-faint); }

.btn--icon {
  width: var(--tap);
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0;
  flex: none;
  overflow: hidden;
}

.btn--icon svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Meldungen. Fehler erklaeren, was passiert ist und was zu tun ist.
   -------------------------------------------------------------------------- */

.notice {
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 0.875rem;
  margin-bottom: var(--gap);
}

.notice--error {
  border-color: var(--debit);
  background: rgba(228, 115, 106, 0.1);
  color: var(--debit);
}

.notice--info {
  border-color: var(--amber-dim);
  background: rgba(240, 169, 59, 0.08);
  color: var(--amber);
}

.notice--dismissible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.notice--dismissible .icon-link { color: currentColor; }

/* --------------------------------------------------------------------------
   Anmeldeseite
   -------------------------------------------------------------------------- */

.login {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  padding: var(--gap);
}

.login__mark {
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  margin: 0 0 0.25rem;
}

.login__mark span { color: var(--amber); }

.login__sub {
  color: var(--text-faint);
  font-size: 0.875rem;
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   Rechteliste im Dashboard
   -------------------------------------------------------------------------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 1rem; margin: 0; }
.kv dt { color: var(--text-muted); font-size: 0.875rem; }
.kv dd { margin: 0; font-size: 0.875rem; }

@media (min-width: 45rem) {
  body { font-size: 1.0625rem; }
  .main { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   alpha08: Navigation

   Kein Menü, das umbricht oder scrollt. Die vier haeufigsten Wege stehen als
   schwebende Leiste unten (Daumenreichweite), alles andere liegt hinter dem
   Menu-Knopf oben rechts in einem Panel, das von rechts hereinschiebt.
   Rein in CSS geloest (versteckte Checkbox + Label), kein JavaScript noetig.
   -------------------------------------------------------------------------- */

.nav-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Leistenbreite als Anteil an der Inhaltsbreite (min. aus Bildschirm- und
   Seiten-Hoechstbreite), damit ein Prozentwert unter Einstellungen auf
   Mobil und Desktop dasselbe bedeutet wie bei .main. Fuer x % einer
   Breite min(a, b) gilt: min(x % von a, x % von b). */
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 0.125rem;
  padding: 0.375rem;
  width: min(
    calc(var(--nav-width-pct-desktop) * 1vw),
    calc(var(--page-max-width) * var(--nav-width-pct-desktop) / 100)
  );
  background: var(--surface-lift);
  border: 1px solid var(--line);
  border-radius: 999px;
  z-index: 20;
}

.bottom-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: var(--tap);
  border-radius: 999px;
  color: var(--nav-icon-color);
  background: var(--nav-bg);
  cursor: pointer;
}

.bottom-nav__item svg { width: var(--nav-icon-max-h-desktop); height: var(--nav-icon-max-h-desktop); }

/* Auf schmalen Bildschirmen (Mobile) ein eigener Breitenanteil und eine
   eigene Icon-Obergrenze - die Tippziele wachsen mit dem Geraet mit, aber
   mit fester Obergrenze, damit sie auf breiteren Handys nicht
   ueberdimensioniert wirken. */
@media (max-width: 44.99rem) {
  .bottom-nav {
    width: min(
      calc(var(--nav-width-pct-mobile) * 1vw),
      calc(var(--page-max-width) * var(--nav-width-pct-mobile) / 100)
    );
  }
  .bottom-nav__item svg {
    width: clamp(24px, 7vw, var(--nav-icon-max-h-mobile));
    height: clamp(24px, 7vw, var(--nav-icon-max-h-mobile));
    max-height: var(--nav-icon-max-h-mobile);
  }
}

.bottom-nav__item--active {
  background: var(--nav-bg-active);
  color: var(--nav-icon-color-active);
}

.side-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 25;
}

.side-panel {
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  max-height: calc(100vh - 1.5rem - env(safe-area-inset-top));
  width: min(80vw, 20rem);
  padding: 1rem;
  /* --surface bei 70% Deckkraft, als rgba statt color-mix() der Einfachheit halber */
  background: rgba(24, 34, 46, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transform: translateX(calc(100% + 1rem));
  transition: transform 200ms ease;
  z-index: 30;
  overflow-y: auto;
}

.nav-toggle-input:checked ~ .side-panel__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.nav-toggle-input:checked ~ .side-panel {
  transform: translateX(0);
}

.side-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin-left: auto;
  color: var(--text-muted);
  cursor: pointer;
}

.side-panel__close svg { width: 20px; height: 20px; }

.side-panel__nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.5rem;
}

.side-panel__nav a {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.9375rem;
}

.side-panel__nav a:hover { background: var(--surface-lift); }

/* Zurueck zur uebergeordneten Seite - Pfeil + Text wie ein natives
   Zurueck-Element, kein Textlink (kein Unterstrich, keine Linkfarbe), damit
   es sich wie ein App-Bedienelement anfuehlt statt wie ein Hyperlink.
   Besonders nach dem Speichern (z.B. Schicht erfasst) landet man sonst
   orientierungslos auf einer neuen Seite. In der Schichterfassung selbst
   (form/confirm) gibt es bewusst keinen .crumb, der Rueckweg laeuft dort
   ueber die eigenen Formular-Buttons. */
.crumb { margin-bottom: 0.25rem; margin-left: -0.4rem; }
.crumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.7rem 0.4rem 0.4rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  text-decoration: none;
}
.crumb a:hover, .crumb a:active { background: var(--surface-lift); color: var(--amber); filter: none; }
.crumb a svg { width: 18px; height: 18px; flex: none; }

/* --------------------------------------------------------------------------
   alpha10: Kamera-Scanner. Vollflaechiges Overlay, per JavaScript erzeugt
   (siehe app.js) - ohne Kamera-Unterstuetzung existiert es nie.
   -------------------------------------------------------------------------- */

.scan-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-overlay__hint {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: calc(2rem + env(safe-area-inset-bottom));
  padding: 0.75rem 1rem;
  background: rgba(24, 34, 46, 0.85);
  color: var(--text);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.9375rem;
}

.scan-overlay__close {
  position: absolute;
  top: calc(0.75rem + env(safe-area-inset-top));
  right: calc(0.75rem + env(safe-area-inset-right));
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 34, 46, 0.85);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Listen ---------------------------------------------------------------- */

.list { list-style: none; padding: 0; margin: 0; }

.list__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.list__row:last-child { border-bottom: 0; }
.list__row--muted .list__title { color: var(--text-muted); }

/* Zeile mit einem eingebetteten Formular (z.B. fehlende Tage: Notiz-Feld +
   Knopf), das auf schmalen Bildschirmen nicht neben den Titel passt. Ohne
   flex-wrap ringt das Formular mit dem Titel um denselben Platz - das
   text-input mit width:100% zieht sich dabei auf eine unbestimmte Breite,
   wodurch der Knopf optisch hinter/unter dem Feld landet. Eigene Zeile fuer
   das Formular macht die Breite eindeutig. */
.list__row--wrap { flex-wrap: wrap; align-items: flex-start; }
.list__row--wrap > form.inline-form { flex: 1 1 100%; }

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.inline-form .field__input {
  flex: 1 1 10rem;
  width: auto;
}

.list__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.list__title { font-weight: 500; }
.list__sub { font-size: 0.75rem; color: var(--text-faint); }

/* Aktions-Knopf am Zeilenende, z.B. "Übernehmen" in der Schichtplanung.
   Ohne diese Regel zieht .btn per Vorgabe auf volle Breite und sprengt die
   Zeile. */
.list__row > form { flex: none; }
.list__row > form .btn { width: auto; padding-left: 1rem; padding-right: 1rem; }

/* Schmale Tabellen, z.B. Umsatz je Schicht. Scrollt seitlich statt die
   Seite zu sprengen, wenn auf schmalen Bildschirmen nicht alles passt. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; white-space: nowrap; }
.table th, .table td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--text-muted); font-weight: 500; }
.table td.num, .table th:not(:first-child) { text-align: right; }
.table th.text-left { text-align: left; }
.table th.text-right { text-align: right; }
.table tr:last-child td { border-bottom: 0; }

.tag {
  flex: none;
  font-size: 0.6875rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 4px;
  background: var(--surface-lift);
  color: var(--text-muted);
  white-space: nowrap;
}

.tag--muted { color: var(--text-faint); }

/* Formulare ------------------------------------------------------------- */

.field__hint {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-faint);
}

textarea.field__input { min-height: 5rem; resize: vertical; }

select.field__input {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 1.125rem center, right 0.875rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
}

/* Ersetzt <input type="date">: das Anzeigeformat des nativen Feldes folgt
   immer der Browser-/OS-Locale, nie einer App-Einstellung (getestet). Das
   echte Feld bleibt fuer Name/Wert/min/max/Kalender erhalten -
   initDateFields() in app.js baut das um. Bei deaktiviertem Feld bleibt es
   unsichtbar auf 1px geschrumpft (kein Kalender-Knopf, kein Klickziel
   noetig); sonst liegt es in echter, klickbarer Groesse deckungsgleich
   ueber dem sichtbaren Kalender-Knopf (siehe .date-field__icon-wrap) - ein
   Klick trifft damit immer direkt das echte Element, kein
   Weiterleitungstrick (showPicker()/label/click()) noetig, der auf manchen
   Browsern bei einem derart winzigen Feld wirkungslos blieb. */
.date-field {
  position: relative;
  display: flex;
  gap: 0.5rem;
}

.date-field__text { flex: 1; min-width: 0; }

.date-field__icon-wrap {
  position: relative;
  flex: none;
  width: var(--tap);
  height: var(--tap);
}

.date-field__icon-wrap .date-field__icon { pointer-events: none; }

.date-field__icon-wrap .date-field__native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

/* Chrome/Edge oeffnen den Picker per Mausklick nur, wenn der Klick das
   interne Kalender-Symbol trifft (::-webkit-calendar-picker-indicator) -
   ein Klick in den (hier unsichtbaren) Textsegment-Bereich daneben setzt
   nur den Cursor, ohne den Picker zu oeffnen. Symbol deshalb auf die volle
   Feldgroesse ziehen, damit jeder Klick in der 44x44-Box trifft. */
.date-field__icon-wrap .date-field__native::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.date-field__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  opacity: 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 1rem 0 0;
}

/* In einer Aktionszeile so breit wie noetig, allein stehend ueber die volle
   Breite. Ein Knopf, der als einziger auf dem Bildschirm steht, ist auf dem
   Telefon leichter zu treffen, wenn er die ganze Zeile einnimmt. */
.actions .btn { width: auto; min-width: 8rem; }

.actions form { margin: 0; }

.plain { list-style: none; padding: 0; margin: 0; }
.plain li + li { margin-top: 0.25rem; }

/* Rechte je Rolle -------------------------------------------------------- */

.perm-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.perm-group legend {
  padding: 0 0.375rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.perm-group .check span { display: flex; flex-direction: column; gap: 0.125rem; }
.perm-group .small { color: var(--text-faint); font-size: 0.6875rem; }

.check--disabled { opacity: 0.55; cursor: not-allowed; }

/* Einmalige Anzeige des Startpassworts ----------------------------------- */

.password-show {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 1rem;
  margin: 0 0 0.75rem;
  color: var(--amber);
  background: var(--ground);
  border: 1px dashed var(--amber-dim);
  border-radius: var(--radius);
  user-select: all;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   alpha05: Kontrollsumme in der Schichterfassung
   -------------------------------------------------------------------------- */

.sum-line {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  background: var(--surface-lift);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.sum-line strong {
  font-size: 1.25rem;
  color: var(--text);
}

.sum-line .field__hint { margin: 0; }

/* --------------------------------------------------------------------------
   alpha06: Hervorhebung auf der Bestätigungsseite
   -------------------------------------------------------------------------- */

/* Der Gesamtumsatz ist die Zahl, die mit dem Bon verglichen wird. Als
   gewoehnliche Zeile in der Liste ging sie unter. */
.sum-line--strong {
  margin: 1rem 0 0;
  border: 1px solid var(--amber-dim);
}

.sum-line--strong strong {
  font-size: 1.5rem;
  color: var(--amber);
}

/* Erfasst jemand fuer eine andere Person, ist das die wichtigste Angabe der
   Seite und gehoert nicht zwischen Datum und Uhrzeit. */
.confirm-person {
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   alpha07: Artikelauswahl im Einkauf
   -------------------------------------------------------------------------- */

/* Ein Treffer ist ein eigenes kleines Formular: Preis oder Betragsfeld,
   Menge, Knopf. Auf dem Telefon untereinander, damit nichts gequetscht wird. */
.list__row--stack { align-items: stretch; }

.pick {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0.25rem 0;
}

.pick__name { font-weight: 500; }

.pick__price {
  font-size: 1.125rem;
  color: var(--text-muted);
}

.pick__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.pick__qty { width: 5rem; flex: none; }
.pick__actions .btn { width: auto; flex: 1; }
.pick .field { margin-bottom: 0; }

/* Ein Artikel ohne Verkaufspreis faellt bei der Abrechnung durch das
   Rabattraster. Das soll in der Liste auffallen. */
.tag--warn {
  color: var(--amber);
  background: transparent;
  border: 1px solid var(--amber-dim);
}

/* --------------------------------------------------------------------------
   Pinnwand: minimierbar rein in CSS geloest (versteckte Checkbox + Label),
   wie das Menue-Panel. Der Zustand bleibt nur fuer die aktuelle Ansicht,
   kein Speichern ueber Seitenaufrufe hinweg noetig.
   -------------------------------------------------------------------------- */

.pinboard-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pinboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pinboard__head .card__title { margin: 0; }

.pinboard__toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform 160ms ease;
}

.pinboard__toggle svg { width: 18px; height: 18px; }

.pinboard-toggle-input:checked ~ .pinboard .pinboard__toggle { transform: rotate(-90deg); }
.pinboard-toggle-input:checked ~ .pinboard .pinboard__body { display: none; }

.pinboard__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pinboard__form .btn { width: auto; align-self: flex-end; }

.pinboard__post { align-items: flex-start; }
.pinboard__post .list__title { white-space: normal; }
.pinboard__post form { flex: none; }

/* Schichtplanung (T-89) ---------------------------------------------------- */

.schedule-nav, .schedule-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.schedule-nav .btn, .schedule-status .btn { width: auto; }
.schedule-nav__range { font-weight: 600; }
.schedule-status form { flex: none; }

.schedule-roster__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
  border-radius: 999px;
  background: var(--surface-lift);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.chip--roster, .chip[data-drag-entry-id] { cursor: grab; touch-action: none; }
.chip--open { background: transparent; border: 1px dashed var(--text-faint); color: var(--text-faint); }
.chip--own { background: var(--amber); border-color: var(--amber); color: #1a1200; }
.chip--dragging { position: fixed; z-index: 999; pointer-events: none; opacity: 0.9; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }

.chip__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.chip__action svg { width: 12px; height: 12px; }
.chip__action--text { width: auto; font-size: 0.75rem; text-decoration: underline; }

.schedule-cell { min-width: 6.5rem; vertical-align: top; white-space: normal; }
.schedule-cell--na {
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 4px, var(--surface-lift) 4px, var(--surface-lift) 8px);
}
.schedule-cell--drop-target { outline: 2px dashed var(--amber); outline-offset: -2px; }

.schedule-add { margin-top: 0.25rem; }
.schedule-add summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 1px dashed var(--text-faint);
  color: var(--text-faint);
  cursor: pointer;
  list-style: none;
}
.schedule-add summary::-webkit-details-marker { display: none; }
.schedule-add form { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.375rem; }
.schedule-add .btn { width: auto; }

/* Urlaubskalender -------------------------------------------------------- */

.absence-calendar th, .absence-calendar td { padding: 0.25rem; }
.absence-calendar th.num { font-size: 0.6875rem; color: var(--text-faint); font-weight: 400; }
.absence-cell { width: 1.25rem; height: 1.5rem; border-radius: 3px; background: var(--surface-lift); }
.absence-cell--pending { opacity: 0.5; background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 3px, transparent 3px, transparent 6px); }
.absence-cell--year { width: 2.5rem; text-align: center; font-size: 0.75rem; color: var(--text-strong); }

.absence-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; color: var(--text-muted); }
.absence-legend__item { display: inline-flex; align-items: center; gap: 0.375rem; }
.absence-swatch { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 3px; }

/* Seitentitel mit einem Icon-Knopf rechts daneben, z.B. Zahnrad zu den
   Urlaub-Einstellungen. Gleiche ruhige Optik wie .topbar__menu-btn - keine
   Knopf-Fuellfarbe, nur ein 44px-Tippziel. */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.page-header h1 { margin: 0; }
.page-header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  color: var(--text-muted);
}
.page-header__action:hover { color: var(--amber); }
.page-header__action svg { width: 22px; height: 22px; }