/* Zeiterfassung – Gestaltung zu zeiten.js.

   Arbeitet ausschliesslich mit den Gestaltungswerten aus styles.css. Keine
   neuen Farben, keine neuen Schriftgroessen: Alles kommt aus var(--...) bzw.
   den Hilfsklassen fs-xs/fs-sm/fs-md/fs-lg. Die Pixelwerte sind solche, die
   dort bereits vorkommen (4/8/12/16/24px, Radien 8/9px und var(--radius)).

   Der Bildschirm "Jetzt" ist fuer eine Hand im Regen gebaut:

   - Der grosse Knopf ist 128px hoch und nimmt die volle Breite. Das ist weit
     mehr als die 44px, die als Mindestgroesse einer Beruehrflaeche gelten –
     mit Handschuhen, Taschenlampe und nassem Glas ist die Mindestgroesse
     genau das, ein Minimum, und kein Mass fuer den Nachtdienst.
   - Er sitzt unter der Uhr, also im unteren Drittel des Bildschirms, wo der
     Daumen einer haltenden Hand hinkommt. Alles Zweitrangige steht darunter
     und ist bewusst kleiner.
   - Beginnen und Beenden sind verschieden gefaerbt UND verschieden
     beschriftet. Zwei Zustaende, die nur die Farbe unterscheidet, sind fuer
     jemanden mit Rot-Gruen-Schwaeche derselbe Knopf.

   Der Bildschirm "Monat" ist eine Leseflaeche am Schreibtisch: ruhige Karten,
   Tabellen mit Ziffern in gleicher Laufweite (tabular-nums), damit Spalten
   untereinander stehen.

   Geladen in index.html nach styles.css. */

/* ------------------------------------------------------------ Grundgeruest */

.zt { max-width: 760px; }

.zt-spuren {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: var(--surface-sunken); border-radius: 9px; padding: 4px;
}
.zt-spur {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 8px 12px; border-radius: 8px;
  font-size: var(--fs-md); font-weight: 600; color: var(--text-secondary);
}
.zt-spur:hover { color: var(--text-primary); }
.zt-spur.an { background: var(--surface-2); color: var(--text-primary); box-shadow: var(--shadow); }
.zt-spur:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ================================================================= JETZT */

.zt-jetzt { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Der Stand: Objekt, Uhr, seit wann ---------- */

.zt-stand {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 16px; text-align: center;
}
/* Die laufende Buchung bekommt einen ruhigen Rand in der Akzentfarbe – ein
   Zustand, kein Alarm. Die Pause hebt sich davon ab, ohne zu warnen: Pause
   machen ist kein Fehler. */
.zt-stand.aktiv { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.zt-stand.pause { border-color: var(--border-strong); background: var(--surface-1); }

.zt-objekt { font-size: var(--fs-lg); font-weight: 600; }
.zt-objekt-ruhig {
  font-size: var(--fs-lg); font-weight: 600; text-align: center;
  padding: 8px 0; color: var(--text-secondary);
}

/* Die laufende Zeit ist die groesste Zahl auf dem Bildschirm – sie ist das,
   wofuer die Ansicht geoeffnet wird. tabular-nums, damit sie beim Weiterzaehlen
   nicht zappelt. */
.zt-uhr {
  font-size: var(--fs-hero); font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1; margin: 8px 0 4px;
}
.zt-stand.pause .zt-uhr { color: var(--text-secondary); }

.zt-seit { margin-top: 4px; }

/* Noch nicht uebertragen: benennen, nicht warnen. Der Eintrag ist gueltig, er
   liegt nur noch auf dem Geraet. */
.zt-wartend {
  margin-top: 8px; color: var(--text-muted);
  border-top: 1px solid var(--border); padding-top: 8px;
}

/* ---------- Der grosse Knopf ---------- */

.zt-knopf {
  width: 100%; min-height: 128px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.01em;
  cursor: pointer; color: var(--text-primary); background: var(--surface-2);
  box-shadow: var(--shadow);
  transition: filter var(--dur-schnell) var(--easing), transform var(--dur-schnell) var(--easing);
}
.zt-knopf:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
/* Eine spuerbare Rueckmeldung beim Druecken: Mit Handschuhen sieht man den
   Farbwechsel eines Knopfes oft nicht, aber die Bewegung schon. */
.zt-knopf:active { transform: scale(.985); }
.zt-knopf[disabled] { opacity: .55; cursor: not-allowed; }

.zt-knopf.beginnen { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.zt-knopf.beginnen:hover { filter: brightness(1.08); }

/* Beenden ist NICHT rot. Rot hiesse "gefaehrlich, lieber nicht" – und
   Ausstempeln ist der normalste Vorgang des Tages. Es ist der ruhige Knopf mit
   kraeftigem Rand: klar unterscheidbar, ohne Drohung. */
.zt-knopf.beenden { border-color: var(--border-strong); border-width: 2px; }
.zt-knopf.beenden:hover { background: var(--surface-sunken); }

/* Die Pause ordnet sich unter: halbe Hoehe, kleinere Schrift. Sie ist wichtig
   (Art. 73 Abs. 1 lit. e ArGV 1 verlangt Lage und Dauer), aber sie ist nicht
   der Grund, warum jemand diesen Bildschirm oeffnet. */
.zt-knopf.zweit { min-height: 64px; font-size: var(--fs-lg); }

.zt-wahl { display: flex; flex-direction: column; gap: 4px; }
.zt-wahl label { font-weight: 600; color: var(--text-secondary); }
.zt-select {
  width: 100%; padding: 12px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-primary); font-size: var(--fs-lg);
}
.zt-select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* Der schmale Nebenweg fuer den Fall, dass die Zeit nicht stimmt. */
.zt-neben { display: flex; justify-content: center; }

/* ---------- Formulare (Nachtrag, Korrektur) ---------- */

.zt-form {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-top: 8px;
}
.zt-form h3 { margin-bottom: 8px; }
.zt-form .field { margin-bottom: 12px; }
.zt-form input, .zt-form textarea {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-primary); font-size: var(--fs-md); font-family: inherit;
}
.zt-form input:focus-visible, .zt-form textarea:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.zt-form-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.zt-meldung { color: var(--text-secondary); margin-bottom: 12px; }

/* ---------- Warteschlange und Fehler ---------- */

.zt-note {
  background: var(--surface-sunken); border-radius: 8px;
  padding: 8px 12px; margin-top: 8px;
  font-size: var(--fs-sm); color: var(--text-secondary);
}
/* Abgelehnt heisst: Der Server hat gelesen und Nein gesagt. Das ist eine
   Antwort, die jemand lesen muss – darum ein deutlicher Rand, aber kein
   Alarmrot: Verloren ist nichts, es liegt alles noch da. */
.zt-note.ab { border-left: 3px solid var(--serious); background: var(--surface-1); }
.zt-note ul { margin: 4px 0 8px 16px; }
.zt-note-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

.zt-fehler {
  border-left: 3px solid var(--critical);
  background: color-mix(in srgb, var(--critical) 8%, transparent);
  color: var(--critical-ink);
  padding: 8px 12px; border-radius: 8px; font-size: var(--fs-md); margin-top: 8px;
}

/* ---------- ArG-Hinweise: benennend, nicht drohend ---------- */

/* Kein Rot, kein Ausrufezeichen, keine Wertung. Ein schmaler Streifen links,
   damit die Hinweise beim Ueberfliegen auffindbar sind, und die Fundstelle
   klein darunter – wer will, liest nach. Diese Hinweise sperren nie etwas;
   entsprechend sehen sie auch nicht aus wie eine Sperre. */
.zt-arg {
  border-left: 3px solid color-mix(in srgb, var(--warning) 60%, transparent);
  background: var(--surface-sunken);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin-top: 8px;
}
.zt-arg-kopf {
  font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.zt-arg-zeile + .zt-arg-zeile { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.zt-arg-zeile > div:first-child { color: var(--text-secondary); }

/* ================================================================= MONAT */

.zt-monat { display: flex; flex-direction: column; gap: 16px; }

.zt-monat-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zt-monat-titel { display: flex; flex-direction: column; min-width: 160px; }
.zt-monat-titel b { font-size: var(--fs-lg); }
/* .grow gibt es in styles.css nur innerhalb von .topbar. Damit dieselbe
   Schreibweise auch hier traegt, wird sie fuer die eigenen Zeilen erklaert –
   kein neuer Klassenname, nur derselbe an einer zweiten Stelle. */
.zt-monat-kopf .grow, .zt-buchung-zeile .grow { flex: 1; }

.zt-zaehler { margin-top: -8px; }

/* ---------- Tag ---------- */

.zt-tag {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.zt-tag-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zt-tag-summe { font-weight: 600; font-variant-numeric: tabular-nums; }

.zt-buchung { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.zt-buchung-zeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.zt-spanne { font-weight: 600; font-variant-numeric: tabular-nums; }
.zt-buchung-objekt { font-size: var(--fs-md); }
.zt-buchung-dauer { font-weight: 600; font-variant-numeric: tabular-nums; }
.zt-buchung-detail { margin-top: 4px; }

.zt-pausen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.zt-pause {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 8px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.zt-buchung-fuss { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.zt-siegel { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---------- Korrektur: beide Angaben nebeneinander ---------- */

/* Die Gestaltung macht sichtbar, was der Grundsatz ist: Es sind ZWEI Angaben,
   nicht eine geaenderte. Darum stehen sie in einem eigenen Kasten
   nebeneinander und nicht als durchgestrichener Wert – ein durchgestrichener
   Wert sieht aus wie etwas Erledigtes, und genau das ist der urspruengliche
   Eintrag nicht. */
.zt-korrektur {
  background: var(--surface-sunken); border-radius: 8px;
  padding: 8px 12px; margin-top: 8px;
}
.zt-korrektur-kopf {
  font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.zt-korrektur-paar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.zt-korrektur-grund { margin-top: 4px; color: var(--text-secondary); }

/* ---------- Bloecke und Tabellen ---------- */

.zt-block h3 { margin-bottom: 8px; }
.zt-block p { margin-top: 8px; }
.zt-block ul { margin: 8px 0 0 16px; color: var(--text-secondary); }

.zt-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.zt-tabelle th, .zt-tabelle td {
  text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border);
}
.zt-tabelle th { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
/* Zahlen rechtsbuendig, die Kopfzeile mit ihnen – sonst steht die Beschriftung
   ueber der falschen Kante. */
.zt-tabelle th:not(:first-child), .zt-tabelle td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}

.zt-grundlage { color: var(--text-secondary); }

/* ------------------------------------------------------------------ Handy */

@media (max-width: 640px) {
  /* Auf dem Handy darf der Knopf mehr Platz nehmen – dort ist er die ganze
     Bedienung, und die Uebersicht liest ohnehin niemand mit einer Hand. */
  .zt-knopf { min-height: 148px; }
  .zt-uhr { font-size: var(--fs-display); }
  .zt-tag { padding: 12px; }
  .zt-monat-kopf .btn { flex: none; }
}

/* Wer die Bewegung abgestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  .zt-knopf { transition: none; }
  .zt-knopf:active { transform: none; }
}