/**
 * css/aemtli.css — Ämtliplan
 *
 * Gehört zu js/aemtli.js. Masse, Farben und Ecken kommen aus css/system.css
 * (--nv-s*, --nv-r-*, --nv-t-*, --k-*). Hier stehen keine eigenen Zahlen —
 * ein System, in dem jede Datei ihre eigenen 13 px erfindet, ist keins.
 *
 * ══ DIE EINE GESTALTUNGS-ENTSCHEIDUNG ═══════════════════════════════════
 * Erledigt wird BLASSER, nicht durchgestrichen und nicht weggeräumt. Wer
 * erledigte Zeilen ausblendet, nimmt der Liste ihre Ordnung — die gleichen
 * Ämtli stehen dann jeden Tag woanders. Blasser heisst: sie sind noch da,
 * aber sie ziehen den Blick nicht.
 *
 * Rot bekommt ausschliesslich „überfällig". Was heute noch offen ist, bleibt
 * neutral — sonst steht die Liste jeden Morgen komplett rot da, und eine
 * Warnung, die immer leuchtet, ist keine.
 *
 * VERLINKUNGEN: js/aemtli.js, api/aemtli.php, css/system.css,
 * docs/DEVLOG.md 2026-08-02.
 */

/* ══ SEITE ═════════════════════════════════════════════════════════════ */
/* Breite begrenzen. Ohne das steht am Bildschirm der Titel ganz links und die
   Minutenzahl ganz rechts — dazwischen 90 cm Nichts, und das Auge muss den
   Weg jedes Mal zurücklegen. Auf dem Telefon ändert die Regel nichts.
   Unten Platz für die Tab-Leiste, sonst liegt die letzte Zeile darunter. */
.ae-seite {
  max-width: 820px;
  margin-inline: auto;
  padding-bottom: 96px;
}

/* ══ KOPF ══════════════════════════════════════════════════════════════ */
.ae-kopf { padding: var(--nv-s4); }

.ae-kopf-zahlen {
  display: flex;
  gap: var(--nv-s5);
  margin-top: var(--nv-s3);
}
.ae-kopf-zahl { display: flex; flex-direction: column; gap: 2px; }
.ae-kopf-wert {
  font-size: var(--nv-t-kopf);
  font-weight: 700;
  color: var(--k-text);
  line-height: 1;
}
.ae-kopf-lbl {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
}
.ae-kopf-zahl.ist-warn .ae-kopf-wert { color: var(--nv-red, #EF4444); }

.ae-hinweis {
  margin-top: var(--nv-s3);
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
}

/* ══ ABSCHNITTE ════════════════════════════════════════════════════════ */
.ae-abschnitt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nv-s2);
  font-size: var(--k-fs-caption);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--k-text3);
  padding: var(--nv-s5) 0 var(--nv-s2);
}
.ae-abschnitt-zahl { letter-spacing: 0; font-weight: 600; }

/* ══ SAMMEL-GRUPPEN ════════════════════════════════════════════════════ */
.ae-gruppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nv-s2);
}
.ae-gruppe {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-s2);
  padding: var(--nv-s2) var(--nv-s4);
  border-radius: var(--nv-r-s);
  border: 1px solid var(--k-border);
  background: var(--k-fill);
  color: var(--k-text);
  font-size: var(--k-fs-body);
  font-weight: 600;
  font-family: var(--k-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ae-gruppe .material-symbols-rounded { font-size: 19px; color: var(--k-brand); }
.ae-gruppe-anz {
  font-size: var(--k-fs-caption);
  font-weight: 700;
  color: var(--k-text3);
}
.ae-gruppe:active { transform: scale(.98); }

/* ══ LISTE ═════════════════════════════════════════════════════════════ */
.ae-liste { padding: 0 var(--nv-s4); }

.ae-zeile {
  display: flex;
  align-items: center;
  gap: var(--nv-s3);
  padding: var(--nv-s2) 0;
  border-bottom: 1px solid var(--k-border);
}
.ae-liste .ae-zeile:last-child { border-bottom: 0; }

.ae-haken {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nv-tap);
  height: var(--nv-tap);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--k-text3);
  -webkit-tap-highlight-color: transparent;
}
.ae-haken .material-symbols-rounded { font-size: 26px; }
.ae-zeile.ist-fertig .ae-haken { color: var(--nv-green, #22C55E); }

.ae-zeile-text { flex: 1; min-width: 0; cursor: pointer; padding: var(--nv-s1) 0; }
.ae-zeile-titel {
  font-size: var(--k-fs-body);
  color: var(--k-text);
  line-height: 1.35;
}
.ae-zeile-unten {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  margin-top: 2px;
}

.ae-min {
  flex: 0 0 auto;
  font-size: var(--k-fs-caption);
  font-weight: 600;
  color: var(--k-text3);
  font-variant-numeric: tabular-nums;
}

/* Erledigt: blasser, nicht weg. Siehe Kopfkommentar. */
.ae-zeile.ist-fertig .ae-zeile-titel { color: var(--k-text3); }

/* Überfällig — das Einzige, was rot wird. */
.ae-zeile.ist-ueberfaellig .ae-zeile-unten { color: var(--nv-red, #EF4444); font-weight: 600; }
.ae-zeile.ist-ueberfaellig .ae-haken { color: var(--nv-red, #EF4444); }

/* Ruhetag: das Ämtli ist heute gar nicht fällig. */
.ae-zeile.ist-ruhend { opacity: .45; }

/* ══ VERLAUF ═══════════════════════════════════════════════════════════ */
.ae-verlauf-quote {
  font-size: var(--k-fs-body);
  color: var(--k-text2, var(--k-text));
  margin-bottom: var(--nv-s3);
}
.ae-verlauf-reihe {
  display: flex;
  align-items: flex-end;
  gap: var(--nv-s1);
  overflow-x: auto;
  scrollbar-width: none;
}
.ae-verlauf-reihe::-webkit-scrollbar { display: none; }
.ae-verlauf-punkt {
  flex: 1 0 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nv-s1);
}
.ae-verlauf-balken {
  width: 100%;
  height: 34px;
  border-radius: var(--nv-r-s);
  background: var(--k-fill);
}
.ae-verlauf-punkt.ist-fertig .ae-verlauf-balken { background: var(--nv-green, #22C55E); }
.ae-verlauf-lbl {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  white-space: nowrap;
}

/* ══ VERWALTEN ═════════════════════════════════════════════════════════ */
.ae-verwalt-zeile {
  display: flex;
  align-items: center;
  gap: var(--nv-s3);
  padding: var(--nv-s2) 0;
  border-bottom: 1px solid var(--k-border);
  cursor: pointer;
}
.ae-verwalt-zeile.ist-aus { opacity: .5; }
.ae-pfeil { color: var(--k-text3); font-size: 20px; }

.ae-form { display: flex; flex-direction: column; gap: var(--nv-s2); }

.ae-form-hinweis {
  font-size: var(--k-fs-caption);
  color: var(--k-text3);
  line-height: 1.45;
  margin: var(--nv-s2) 0;
}
.ae-schalter {
  display: flex;
  align-items: center;
  gap: var(--nv-s2);
  font-size: var(--k-fs-body);
  color: var(--k-text);
  margin-top: var(--nv-s3);
}

.ae-auswahl {
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ae-auswahl-zeile {
  display: flex;
  align-items: center;
  gap: var(--nv-s3);
  padding: var(--nv-s2) 0;
  font-size: var(--k-fs-body);
  color: var(--k-text);
  cursor: pointer;
}

.ae-fuss {
  display: flex;
  gap: var(--nv-s2);
  margin-top: var(--nv-s5);
}
.ae-fuss .nv-btn { flex: 1; }

/* ══ LEER / LADEN ══════════════════════════════════════════════════════ */
.ae-laedt,
.ae-leer {
  padding: var(--nv-s5) 0;
  text-align: center;
  font-size: var(--k-fs-body);
  color: var(--k-text3);
}

.ae-chip-zahl {
  font-weight: 700;
  opacity: .65;
}

/* Die Filterzeile braucht Abstand zu den Sammel-Knöpfen darüber — sonst liest
   sich beides als eine einzige Knopfreihe, und „Täglich" sieht aus wie eine
   weitere Gruppe. */
.ae-filter { margin-top: var(--nv-s4); }