/* arbeitsablaeufe — see kronenwerk.css for the tokens these rules read.
 *
 * Four surfaces live here: the board, "my work", the operational board, and the two
 * settings screens for stages and approvals. Nothing in this file is a new idea about
 * how the product looks — it reuses the system's tokens, its radii and its type scale,
 * and adds only the shapes the system has no primitive for: a column of cards, and a
 * grid of small blocks.
 */

/* --------------------------------------------------------------------- tokens
 *
 * Three values this feature invents, declared on a bare :root so they have a value
 * before any theme has an opinion — which is the rule OberflaecheTokenTest enforces and
 * the reason a colour defined only inside a dark block silently does nothing.
 */
:root {
  --tafel-spalte-breite: 17rem;
  --tafel-spalte-hoehe: 60vh;
  --arbeit-spaet-linie: var(--negativ-linie);
}

/* ---------------------------------------------------------------------- Tafel */

.tafel {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  /* Die Tafel scrollt in SICH und nicht die Seite. Eine Seite, die waagerecht
     scrollt, nimmt jede andere Spalte mit -- und auf einem Tablet in der Halle
     verliert man dabei die Navigation. */
  overflow-x: auto;
  padding-bottom: .5rem;
}

.tafel-spalte {
  flex: 0 0 var(--tafel-spalte-breite);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tafel-spaltenkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--linie);
}

.tafel-spaltenname {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0;
  color: var(--tinte);
}

.tafel-zahl {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--tinte-3);
}

.tafel-karten {
  list-style: none;
  margin: 0;
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: var(--tafel-spalte-hoehe);
  overflow-y: auto;
}

.tafel-karte {
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  background: var(--flaeche-hoch);
  padding: .55rem .65rem;
}

.tafel-karte.ist-spaet {
  border-color: var(--arbeit-spaet-linie);
  background: var(--negativ-tief);
}

.tafel-karte-kopf {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}

.tafel-nummer { text-decoration: none; }

.tafel-termin { color: var(--tinte-3); }

.tafel-karte.ist-spaet .tafel-termin { color: var(--negativ); font-weight: 600; }

.tafel-titel {
  margin: .25rem 0 0;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--tinte);
}

.tafel-kunde {
  margin: .15rem 0 0;
  font-size: .8125rem;
  color: var(--tinte-2);
}

.tafel-fuss {
  margin: .35rem 0 0;
  font-size: .75rem;
}

.tafel-person { color: var(--tinte-2); }

/* »Niemand« ist die Zeile, die eine Entscheidung verlangt, und sie darf nicht wie
   ein Name aussehen. */
.tafel-niemand { color: var(--tinte-4); font-style: italic; }

.tafel-schalter {
  display: flex;
  gap: .35rem;
  margin-top: .5rem;
}

.tafel-schalter select { flex: 1 1 auto; min-width: 0; font-size: .8125rem; }

.tafel-leer,
.betrieb-leer {
  margin: 0;
  padding: .75rem;
  color: var(--tinte-3);
  font-size: .8125rem;
}

.tafel-hinweis {
  margin: 0 0 .75rem;
  color: var(--negativ);
  font-size: .8125rem;
}

.arbeitsfilter select { min-width: 10rem; }

/* Eine überfällige Zeile in einer Tabelle: die Farbe trägt die Aussage, der Rahmen
   trägt sie mit, damit sie ohne Farbwahrnehmung ebenfalls ankommt. */
.datentabelle tr.ist-spaet td { background: var(--negativ-tief); }

/* ------------------------------------------------------------------ Aufwertung */

.aufwertung {
  max-width: 34rem;
  margin: 3rem auto;
  text-align: center;
}

.aufwertung-titel {
  margin: 0 0 .5rem;
  font-size: 1.375rem;
}

.aufwertung-satz {
  margin: 0 0 1.25rem;
  color: var(--tinte-2);
  line-height: 1.55;
}

.aufwertung-plan {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: 0 0 1rem;
}

/* --------------------------------------------------------------------- Stufen */

/* Eine Stufenzeile trägt ihren Namen, ihre Knöpfe und ihr Formular untereinander. */
.stufenzeile { display: block; }

.stufenzeile-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .4rem;
}

.stufenzeile-form input[type="text"] { min-width: 12rem; }

/* Stillgelegt heisst: noch da, nicht mehr wählbar. Blasser und nicht versteckt --
   die Vorgänge, die darin stehen, stehen weiterhin darin. */
.stufe-ruhend .setzeile-name { color: var(--tinte-3); }

/* ------------------------------------------------------------------ Freigaben */

.freigabeliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.freigabezeile {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  padding: .75rem .9rem;
}

.freigabe-kopf {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.freigabe-betrag { margin-left: auto; font-weight: 600; }

.freigabe-wer {
  margin: .3rem 0 0;
  font-size: .8125rem;
  color: var(--tinte-2);
}

.freigabe-selbst {
  margin: .4rem 0 0;
  font-size: .8125rem;
  color: var(--tinte-3);
}

.freigabe-form {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .6rem;
}

.freigabe-grund { flex: 1 1 16rem; min-width: 0; }

.freigabeblock { margin-bottom: .75rem; }

.regelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.regelzeile input[type="text"] { width: 8rem; }

.rollenwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-sm);
  padding: .35rem .6rem;
  margin: 0;
}

.rollenwahl legend {
  font-size: .75rem;
  color: var(--tinte-3);
  padding: 0 .25rem;
}

.regelblock .setzblock-mehr { display: inline-flex; gap: .35rem; }

/* --------------------------------------------------------------- Betriebstafel */

.betrieb-zahlen { margin-bottom: 1rem; }

.betrieb-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.betrieb-block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  min-width: 0;
}

.betrieb-block-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--linie);
}

.betrieb-block-kopf h2 {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
}

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

.betrieb-zeile {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .45rem .85rem;
  border-bottom: 1px solid var(--linie);
  font-size: .8125rem;
}

.betrieb-zeile:last-child { border-bottom: 0; }

.betrieb-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinte);
}

.betrieb-person { color: var(--tinte-2); }

.betrieb-termin { color: var(--tinte-3); }

.betrieb-zahl { font-weight: 600; color: var(--tinte); }

/* Der Verlauf steht unter dem Gitter und über die ganze Breite: er ist Prosa und
   keine Kennzahl, und in einer 18-rem-Spalte bräche jeder Satz dreimal um. */
.betrieb-verlauf { margin-top: 1rem; }

.betrieb-verlauf .zeitstrahl-liste { padding: .5rem .85rem; }

@media (max-width: 40rem) {
  .tafel-spalte { flex-basis: 82vw; }
  .freigabe-betrag { margin-left: 0; }
}