/* =============================================================================
   EmKater WWS — Auftragsmaske (Werkstatt, Tennis, Reklamation)

   Die Maske wird am Tresen im Gespraech mit dem Kunden ausgefuellt, oft am
   Tablet. Vorher stand alles gleichrangig untereinander: Kundenkarte,
   Auftragsdaten, Statusleiste, Radausfuehrung, Fahrradgrafik, AW-Suche,
   Trefferliste, Scanfeld, Positionen, Ausbuchen, Benachrichtigen — gemessen
   3.511 px bei 1280x800 und 4.350 px bei 768x1024. Vier bis fuenf
   Bildschirmlaengen fuer einen Vorgang, der in einem Gespraech erledigt wird.

   Diese Datei aendert nur die Anordnung, nichts an den Bausteinen:
     - Gliederung nach Arbeitsablauf in aufklappbare Abschnitte (<details>,
       ohne JavaScript brauchbar; der Server entscheidet, was offen startet)
     - Kopfdaten als einzeiliger Steckbrief statt als Karte
     - Arbeitswerte einspaltig: Suche, Radausfuehrung als Faltblock, Bereiche
       als Knopfleiste, darunter die Liste ueber die volle Breite
     - Speichern, Drucken, Abschliessen in einer klebenden Leiste unten

   Zweiter Durchgang: der Arbeitswerteteil war auf 1.040 px gewachsen, ohne
   dass ein einziger Treffer darinstand — die linke Spalte mit Fahrradgrafik
   und Radausfuehrung stand immer da. Er startet jetzt zugeklappt und benutzt
   dieselben Bausteine wie /werkstatt/aw (aw.css: .aw-gruppen, .aw-radbild,
   table.aw-liste). Was hier stand, um dieselben Dinge ein zweites Mal zu
   beschreiben, ist entfallen.

   Regeln fuer diese Datei — wie in formular.css und layout.css:
     - keine eigenen Farbwerte, ausschliesslich die Merkmale aus app.css,
       damit Hell- und Dunkelthema ohne Zutun mitlaufen
     - kein Nachbau vorhandener Bausteine: .karte, .feld, .btn, .suchleiste,
       .tabellenrahmen, .aktionen-klebrig, .typwahl und .radgrafik bleiben,
       wie sie sind — hier steht nur, wie sie zueinander stehen
     - jeder Abschnitt ist ohne JavaScript zu oeffnen und zu schliessen
   ============================================================================= */

/* --- Steckbrief: Kunde, Rad, Termin in einer Zeile ------------------------- *

   Ersetzt die Karte „Kunde" (gemessen 167 px) durch eine Zeile, die zusaetzlich
   Radausfuehrung, Termin und Auftragssumme zeigt. Was man beim Blick auf den
   Auftrag zuerst wissen will, steht damit ueber der Kante, ohne zu scrollen.  */

.steckbrief {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: 9px 14px;
  margin-bottom: 12px;
}

.steckbrief .punkt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.35;
}
.steckbrief .punkt-titel {
  font-size: 11px;
  font-weight: 600;
  color: var(--schrift-hell);
  letter-spacing: .02em;
}
.steckbrief .punkt-wert { font-size: 13.5px; color: var(--schrift); }
.steckbrief .punkt-wert strong { font-weight: 700; }

/* Die Summe steht rechts und traegt die groesste Ziffer der Zeile. */
.steckbrief .punkt-summe { margin-left: auto; text-align: right; }
.steckbrief .punkt-summe .punkt-wert {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- Faltabschnitte laengs des Arbeitsablaufs ------------------------------ *

   Kunde und Rad → Auftrag → Arbeitswerte → Material → Abschluss. Jeder
   Abschnitt traegt im zugeklappten Zustand eine Kurzfassung seines Inhalts,
   damit Zuklappen nichts verbirgt, was man zur Entscheidung braucht.          */

details.faltabschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  margin-bottom: 10px;
}

details.faltabschnitt > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  border-radius: var(--radius-gross);
}
details.faltabschnitt > summary::-webkit-details-marker { display: none; }
details.faltabschnitt > summary:hover { background: var(--flaeche-hover); }
details.faltabschnitt > summary:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: -2px;
}

/* Pfeil wie in der Hauptnavigation — gleiche Geste, gleiches Zeichen. */
details.faltabschnitt > summary::after {
  content: "";
  align-self: center;
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-left: 4px;
  border-right: 1.8px solid var(--schrift-hell);
  border-bottom: 1.8px solid var(--schrift-hell);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
details.faltabschnitt[open] > summary::after { transform: rotate(45deg); }

.fa-nummer {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 21px; height: 21px;
  align-self: center;
  border-radius: 50%;
  background: var(--flaeche-alt);
  border: 1px solid var(--linie-stark);
  color: var(--schrift-hell);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
details.faltabschnitt[open] > summary .fa-nummer {
  background: var(--gruen);
  border-color: var(--gruen-dunkel);
  color: var(--auf-gruen);
}

.fa-titel { font-size: 15px; font-weight: 700; flex: 0 0 auto; }

/* Kurzfassung: was im zugeklappten Abschnitt steht. Bricht auf schmalen
   Geraeten in die naechste Zeile, statt den Titel zu quetschen. */
.fa-kurz {
  flex: 1 1 12ch;
  min-width: 0;
  color: var(--schrift-hell);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fa-kurz strong { color: var(--schrift); font-weight: 600; }

/* Warnzeichen, wenn im Abschnitt etwas offen ist (z. B. Positionen, die noch
   nicht ausgebucht sind). Nicht nur Farbe — das Zeichen traegt die Aussage. */
.fa-marke {
  flex: 0 0 auto;
  align-self: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gelb);
  color: var(--auf-gelb);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.fa-marke-ruhig { background: var(--flaeche-alt); color: var(--schrift-hell); border: 1px solid var(--linie); }

.fa-koerper {
  padding: 0 14px 14px;
  border-top: 1px solid var(--linie-hell);
  padding-top: 12px;
}

/* --- Fehlerhafte Abschnitte oeffnen sich selbst ---------------------------- *

   app.js setzt bei ungueltiger Eingabe aria-invalid am Feld; serverseitige
   Fehler stehen als .fehler im Feld. Liegt so etwas in einem zugeklappten
   Abschnitt, waere die Meldung unsichtbar und das Absenden bliebe ohne
   erkennbare Wirkung. `::details-content` macht den Inhalt sichtbar, ohne
   dass JavaScript noetig ist.

   Browser ohne ::details-content ignorieren die Regel - fuer sie traegt die
   Kopfzeile zusaetzlich eine rote Marke, damit wenigstens erkennbar ist,
   welcher Abschnitt zu oeffnen ist.                                          */

details.faltabschnitt:has([aria-invalid="true"])::details-content,
details.faltabschnitt:has(.feld > .fehler)::details-content,
details.faltblock:has([aria-invalid="true"])::details-content,
details.faltblock:has(.feld > .fehler)::details-content {
  content-visibility: visible;
}

details.faltabschnitt:has([aria-invalid="true"]) > summary::before,
details.faltabschnitt:has(.feld > .fehler) > summary::before,
details.faltblock:has([aria-invalid="true"]) > summary::before,
details.faltblock:has(.feld > .fehler) > summary::before {
  content: "Bitte prüfen";
  order: 8;
  align-self: center;
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--rot);
  color: var(--auf-rot);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
details.faltabschnitt:has([aria-invalid="true"]) > summary::after,
details.faltabschnitt:has(.feld > .fehler) > summary::after { margin-left: 8px; }

/* Karten innerhalb eines Abschnitts sind bereits eingerahmt — der doppelte
   Rahmen bringt nichts, die Flaeche soll sich nur leicht absetzen. */
.fa-koerper > .karte:last-child,
.fa-koerper > form.karte:last-child { margin-bottom: 0; }

/* --- Dichteres Feldraster -------------------------------------------------- *

   .feldgruppe rechnet mit 210 px je Spalte. Belegnummer, Datum, Uhrzeit und
   Betrag brauchen weniger; bei 210 px blieb rechts Luft und die Maske wuchs
   in die Laenge. 158 px ergeben auf dem Tablet vier statt drei Spalten.       */

.feldraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 9px 14px;
  align-items: start;
}
.feldraster .feld-breit { grid-column: 1 / -1; }

/* Felder, die nur wenige Zeichen fassen, duerfen schmaler bleiben. */
.feldraster .feld-schmal { max-width: 190px; }

/* Die Auftragsbeschreibung ist das Kernstueck des Gespraechs am Tresen und
   bleibt sichtbar — nur nicht so hoch wie ein halber Bildschirm. */
.feldraster .feld textarea { min-height: 54px; }

/* Ankreuzfelder stehen in der Zeile, nicht als eigener Block darueber. */
.feld-schalter { justify-content: flex-end; }
.feld-schalter label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--schrift);
  min-height: 34px;
}
.feld-schalter input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; }

/* --- Arbeitswerte: alles untereinander, nichts nebeneinander --------------- *

   Frueher standen Radausfuehrung und Fahrradgrafik als linke Spalte neben der
   Trefferliste. Das kostete den Abschnitt gemessen 1.040 px, auch wenn gar
   kein Treffer darinstand — die linke Spalte war immer da. Beides ist jetzt
   eine Zeile: die Radausfuehrung ein Faltblock mit dem geltenden Wert im
   Kopf, das Schaubild der letzte Knopf der Bereichsleiste (aw.css). Uebrig
   bleibt eine Spalte, und die gehoert der Liste.

   Die Bausteine der Bereichsleiste und der fuenfspaltigen Liste kommen aus
   aw.css — dieselben wie auf /werkstatt/aw. Die Auftragsmaske bindet die
   Datei mit ein, statt sie hier nachzubauen.                                 */

/* Die Suchleiste steht ueber allem und bleibt beim Rollen der langen
   Trefferliste an Ort und Stelle. */
.aw-suchleiste { margin-bottom: 10px; }

/* Der Umschalter „auch nicht passende" ist ein Ankreuzfeld und braucht nicht
   die 170 px, die .suchleiste jedem Feld gibt. */
.aw-suchleiste .feld-schalter { min-width: auto; justify-content: flex-end; }
.aw-suchleiste .aktionen { margin-top: 0; }

/* Trefferliste nicht ueber den halben Bildschirm — der Rest der Maske soll
   erreichbar bleiben. --listenhoehe wird von formular.css ausgewertet. */
.aw-treffer { --listenhoehe: 46vh; margin-top: 10px; }

/* Die Bereichsleiste traegt in der Auftragsmaske keinen eigenen Abstand nach
   unten; den setzt der Tabellenrahmen darunter. */
.fa-koerper > .aw-gruppen { margin-bottom: 0; }


/* Menge und „übernehmen" in einer Zelle - eine Handbewegung, kein Sprung ueber
   eine Spaltengrenze. */
.aw-aktion { white-space: nowrap; }
td.aw-aktion form { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
td.aw-aktion .e-menge { width: 58px; }

/* Die Spalte mit der Schaltflaeche bleibt am rechten Rand stehen, wenn die
   Liste seitlich rollt — sonst waere die einzige Aktion der Liste unsichtbar.
   Gegenstueck zu .erste-spalte-fest aus formular.css.                        */
table.liste.aktionsspalte-fest thead th.aw-aktion {
  position: sticky; right: 0; z-index: 4; background: var(--tabellenkopf);
}
table.liste.aktionsspalte-fest tbody td.aw-aktion {
  position: sticky; right: 0; z-index: 1; background: var(--flaeche);
  box-shadow: inset 1px 0 0 var(--linie);
}
table.liste.aktionsspalte-fest tbody tr:nth-child(even) > td.aw-aktion { background: var(--zebra); }
table.liste.aktionsspalte-fest tbody tr:hover > td.aw-aktion,
table.liste.aktionsspalte-fest tbody tr:focus-within > td.aw-aktion { background: var(--flaeche-hover); }

/* --- Kleiner Faltblock innerhalb eines Abschnitts -------------------------- *
   Fuer „Radausfuehrung", „Bereich am Rad waehlen" und „weitere Angaben".      */

details.faltblock {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche-alt);
  margin-bottom: 10px;
}
details.faltblock:last-child { margin-bottom: 0; }

details.faltblock > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--schrift);
  border-radius: var(--radius);
}
details.faltblock > summary::-webkit-details-marker { display: none; }
details.faltblock > summary:hover { background: var(--flaeche-hover); }
details.faltblock > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
details.faltblock > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-left: 4px;
  border-right: 1.6px solid var(--schrift-hell);
  border-bottom: 1.6px solid var(--schrift-hell);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
details.faltblock[open] > summary::after { transform: rotate(45deg); }

.fb-kurz {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  color: var(--schrift-hell);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fb-kurz strong { color: var(--schrift); font-weight: 600; }

.fb-koerper { padding: 0 11px 11px; }

/* Die Radausfuehrung ist eine Auswahl aus neun Kacheln. In voller Groesse
   brauchte sie 292 px (Tablet 441 px). Dichter gesetzt reicht die Haelfte —
   die Erklaerungen bleiben, nur enger. */
.faltblock .typwahl { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 6px; }
.faltblock .typwahl label { padding: 6px 9px; }
.faltblock .typwahl .typ-hinweis { font-size: 11px; }

/* Die Fahrradgrafik soll nicht ueber die Breite ihres Behaelters hinaus-
   wachsen — sie steht sowohl im Faltblock als auch am Knopf „am Rad". */
.faltblock .radgrafik { margin: 0 auto; }
.faltblock .radlegende { margin-bottom: 0; }

/* --- Positionsliste kompakt ------------------------------------------------ *

   Kopfzeile und Summenzeile stehen bereits (formular.css). Hier nur engere
   Zeilen: eine Position ist eine Zeile, kein Absatz.                          */

.positionsliste { --listenhoehe: 50vh; }
.positionsliste table.liste th,
.positionsliste table.liste td { padding: 3px 8px; }
.positionsliste table.liste td.breit { min-width: 190px; }
.positionsliste table.liste td input { padding: 2px 5px; }

/* „Leistung" und „nicht ausgebucht" waren zwei eigene Spalten, die in fast
   jeder Zeile dasselbe Wort wiederholten. Sie stehen jetzt als kleine Marke
   an der Bezeichnung — laut genug, um beim Ueberfliegen aufzufallen, leise
   genug, um den Artikelnamen nicht zu verdecken. */
.positionsliste table.liste td.breit .st-arbeit,
.positionsliste table.liste td.breit .st-offen { font-size: 11px; }
.positionsliste table.liste td.breit .st-arbeit { margin-right: 4px; }
.positionsliste table.liste td.breit .st-offen { margin-left: 6px; }

/* Feste Breiten fuer die Eingaben in der Zeile — vorher standen sie als
   style-Attribut im Template. */
.positionsliste .e-aw    { width: 66px; }
.positionsliste .e-menge { width: 68px; }
.positionsliste .e-vk    { width: 80px; }

/* Der Arbeitswert einer Leistung laesst sich in der Zeile nachtragen. Das ist
   kein Randfall, sondern der Regelfall — die Verbandsliste nennt Richtwerte.
   Deshalb sichtbar als Eingabe ausgewiesen, nicht als Text getarnt. */
.positionsliste .e-aw { border-color: var(--linie-stark); }

/* --- Klebende Leiste am unteren Rand --------------------------------------- *

   Nutzt .aktionen-klebrig aus formular.css. Zwei Ergaenzungen:
     - die Summe steht in der Leiste, damit sie beim Bearbeiten der Positionen
       immer im Bild ist
     - formular.css stellt .aktionen-klebrig unter 820 px auf `static`. Genau
       dort — auf dem Tablet — wird die Leiste am dringendsten gebraucht.
       Sie bleibt deshalb ab 600 px klebend; darunter (Telefon) nicht, weil
       sie dann zu viel vom Bild nimmt.                                        */

.auftragsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.auftragsleiste .leisten-summe {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  margin-right: 4px;
}
.auftragsleiste .leisten-summe .ls-titel { font-size: 11px; font-weight: 600; color: var(--schrift-hell); }
.auftragsleiste .leisten-summe .ls-wert {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--schrift);
}

/* Trennt die Pflichttasten links von den Abschlusstasten rechts. */
.auftragsleiste .leisten-luecke { margin-left: auto; }

/* „Nicht gespeichert" auch an der Leiste — app.js setzt .hat-aenderung am
   Formular, das Merkmal ist damit schon da und wird hier nur ein zweites Mal
   ausgewertet. Ohne diesen Hinweis koennte die Leiste vergessen lassen, dass
   in einem zugeklappten Abschnitt noch etwas offen ist. */
body:has(form.hat-aenderung) .auftragsleiste::before {
  content: "Nicht gespeichert";
  align-self: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--gelb);
  color: var(--auf-gelb);
  font-size: 11.5px;
  font-weight: 700;
}

@media (min-width: 600px) and (max-width: 820px) {
  .aktionen-klebrig.auftragsleiste {
    position: sticky;
    box-shadow: var(--schatten-hoch);
  }
}

/* --- Tablet und Theke ------------------------------------------------------ */

@media (max-width: 820px) {
  .steckbrief { gap: 4px 16px; padding: 8px 11px; }
  .steckbrief .punkt-summe { margin-left: 0; text-align: left; }
  details.faltabschnitt > summary { padding: 11px 12px; }
  .fa-koerper { padding: 12px 11px 12px; }
  .fa-kurz { flex-basis: 100%; white-space: normal; }
}

/* Fingerbedienung: die Kopfzeile eines Abschnitts ist die haeufigste
   Bedienflaeche der Maske und muss sicher zu treffen sein. */
@media (pointer: coarse) {
  details.faltabschnitt > summary { padding-top: 13px; padding-bottom: 13px; }
  details.faltblock > summary { padding-top: 10px; padding-bottom: 10px; }
}

/* --- Druck ----------------------------------------------------------------- *
   Fuer den Kundenbeleg gibt es eine eigene Ansicht (/druck). Druckt jemand
   trotzdem die Maske, sollen zugeklappte Abschnitte nicht fehlen.             */

@media print {
  /* Ein zugeklapptes <details> laesst sich nicht ueber `display` am Kind
     aufdecken - der Inhalt haengt an einem Bereich mit
     `content-visibility: hidden`. Nur ::details-content greift. */
  details.faltabschnitt::details-content,
  details.faltblock::details-content { content-visibility: visible; }
  details.faltabschnitt > summary::after,
  details.faltblock > summary::after { display: none; }
  .auftragsleiste { display: none !important; }
  .positionsliste, .aw-treffer { --listenhoehe: none; }
  table.liste.aktionsspalte-fest thead th.aw-aktion,
  table.liste.aktionsspalte-fest tbody td.aw-aktion { position: static; }
}