/* MySchool — «Hausaufgabe festlegen» im Fenster «Kontrolle · …», Spalte «Frist», Arbeitsgänge.   [NEUE-VERSION] Auftrag 134, Fenster HU
 * Eigene Datei (Präfix .hp-); das Panel selbst steht in css/kontrolle-panel.css. Tippflächen 48 px (--tippflaeche).
 * Farbe ist nie allein: jede Ampel trägt Wort und Zeichen (js/hausaufgaben-plan.js). */

/* ---- Menü «Drucken ▾» im Kopf: die Liste schwebt unter dem Knopf, der Kopf wird nicht höher ---- */
.kontrolle-dialog__druck { position: relative; display: inline-flex; }
.kontrolle-dialog__druckmenue { min-height: var(--tippflaeche, 48px); font-size: 0.95rem; white-space: nowrap; }
.kontrolle-dialog__druckliste {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; min-width: 14rem; padding: 6px;
  background: #fff; border: 1px solid #d6d6de; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.kontrolle-dialog__druckliste[hidden] { display: none; }
.kontrolle-dialog__druckliste .kontrolle-dialog__drucken { width: 100%; text-align: left; }

/* ---- Reiter-Zeile unter dem Kopf ---- */
.hp-reiter { display: flex; gap: 0; padding: 0 1rem; border-bottom: 1px solid #e3e3e8; flex: 0 0 auto; }
.hp-reiter__knopf {
  min-height: var(--tippflaeche, 48px); padding: 0 1rem; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  background: transparent; font-size: 0.95rem; cursor: pointer; color: #444;
}
.hp-reiter__knopf--aktiv { border-bottom-color: #1565c0; color: #0d47a1; font-weight: 600; }
.hp-reiter__knopf:focus-visible { outline: 3px solid #1565c0; outline-offset: -3px; }

/* ---- Maske: Fachzeile oben, Liste scrollt, Fussleiste bleibt stehen ---- */
.hp-maske { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0.5rem 1rem 0; }
.hp-maske[hidden] { display: none; }
.kontrolle-dialog__koerper[hidden] { display: none; }
.hp-maske__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-bottom: 0.4rem; }
.hp-maske__fach { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.hp-maske__fachwahl, .hp-maske__datum, .hp-frist-filter { min-height: var(--tippflaeche, 48px); font-size: 0.95rem; }
.hp-maske__klasse { color: #555; }
.hp-maske__untertitel { margin: 0.4rem 0 0.2rem; font-size: 0.95rem; }
.hp-maske__schon { border: 1px solid #e3e3e8; border-radius: 10px; padding: 0.25rem 0.75rem; margin-bottom: 0.5rem; background: #fafafc; }
.hp-maske__schonzeile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--tippflaeche, 48px); }
.hp-maske__zurueck { min-height: var(--tippflaeche, 48px); font-size: 0.9rem; }
.hp-maske__liste { display: flex; flex-direction: column; }
.hp-maske__gruppe { margin: 0.6rem 0 0.2rem; padding-bottom: 0.2rem; border-bottom: 1px solid #c9c9d3; font-weight: 600; font-size: 0.9rem; color: #333; }
.hp-maske__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: var(--tippflaeche, 48px); border-bottom: 1px solid #ececf0; }
.hp-maske__wahl { display: inline-flex; align-items: center; gap: 0.5rem; flex: 1 1 12rem; min-height: var(--tippflaeche, 48px); cursor: pointer; }
.hp-maske__haken, .hp-maske__optionhaken { width: 24px; height: 24px; margin: 12px; flex: 0 0 auto; }
.hp-maske__n { color: #555; font-size: 0.9rem; white-space: nowrap; min-width: 6.5rem; font-variant-numeric: tabular-nums; }
.hp-maske__datum:disabled { opacity: 0.45; }
.hp-maske__manuell { font-size: 0.8rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: #e3f2fd; color: #0d47a1; }
.hp-maske__auge { flex: 1 0 100%; font-size: 0.85rem; color: #8a3b00; padding-left: 48px; }
.hp-maske__leer, .hp-maske__hinweis { margin: 0.5rem 0; color: #444; }
.hp-maske__vorschau { margin: 0.6rem 0 0.2rem; font-weight: 500; }
.hp-maske__optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; margin-top: 0.25rem; }
.hp-maske__option { display: inline-flex; align-items: center; min-height: var(--tippflaeche, 48px); cursor: pointer; }
.hp-maske__sofort { flex: 1 0 100%; margin: 0; font-size: 0.85rem; color: #555; }
.hp-maske__fuss {
  position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 0.75rem;
  margin-top: auto; padding: 0.6rem 0 0.75rem; background: #fff; border-top: 1px solid #e3e3e8;
}
.hp-maske__abbrechen, .hp-maske__eintragen { min-height: var(--tippflaeche, 48px); font-size: 0.95rem; }
.hp-band { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.5rem 0 0; padding: 0.4rem 0.75rem; border-radius: 10px; }
.hp-band[hidden] { display: none; }
.hp-band--ok { background: #e8f5e9; color: #1b5e20; }
.hp-band--warn { background: #fff3e0; color: #8a3b00; }
.hp-band--info { background: #e3f2fd; color: #0d47a1; }
.hp-band__nochmals { min-height: var(--tippflaeche, 48px); }

/* ---- Spalte «Frist» (Reiter «Fortschritt») ---- */
.hp-frist-filter { margin: 0.25rem 0 0.5rem; max-width: 100%; }
.kontrolle-tabelle__frist { min-width: 10rem; }
.hp-frist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.4rem; padding: 0.15rem 0.55rem; border-radius: 10px; border: 1px solid transparent; font-size: 0.9rem; }
.hp-frist__zahl, .hp-frist__wo { flex: 1 0 100%; font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.hp-frist__wo { color: #555; }
.hp-frist--gruen { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.hp-frist--orange { background: #fff3e0; color: #8a3b00; border-color: #ffb74d; }
.hp-frist--rot { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }
.hp-frist--grau, .hp-frist--vor { background: #f1f1f4; color: #444; border-color: #d6d6de; }
.hp-frist--leer { background: transparent; border: none; color: #888; }
.hp-stapel { display: flex; height: 8px; margin: 2px 0 4px; border-radius: 4px; overflow: hidden; background: #e6e6ec; min-width: 6rem; }
.hp-stapel__teil { display: block; height: 100%; }
.hp-stapel__teil--gruen { background: #2e7d32; }
.hp-stapel__teil--orange { background: #ef6c00; }
.hp-stapel__teil--rot { background: #c62828; }
.hp-stapel__teil--grau { background: #9e9ea8; }

/* ---- Arbeitsgänge in «Zuletzt aktiv» ---- */
.hp-gaenge { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.hp-gang { font-size: 0.8rem; color: #444; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-gang--mehr { color: #777; }

@media (max-width: 900px) {
  .hp-maske { padding: 0.4rem 0.5rem 0; }
  .hp-reiter { padding: 0 0.5rem; }
  .hp-maske__auge { padding-left: 0; }
}