/**
 * idf-time-grid v0.3.0 - Wochen-Raster in Zeit-Slots
 *
 * Gegenstueck zu idf-time-grid.js. Farben, Abstaende und Schriftgroessen
 * kommen aus den Tokens; das Raster hat bewusst keinen eigenen Rahmen und
 * keinen eigenen Hintergrund, damit es in eine Modal-Spalte oder auf eine
 * Seite passt, ohne dort als Fremdkoerper zu sitzen (wie beim bar-chart).
 *
 * Achsen: eine Zeile je Wochentag, waagerecht laeuft die Zeit. Sieben
 * Zeilen passen in jedes Modal; die frueheren zweiunddreissig Slot-Zeilen
 * waren hoeher als der Modal-Body und liessen sich nie ganz sehen.
 *
 * Schriftgroessen folgen dem Muster der uebrigen Modal-Tabellen
 * (.ak-token-head / .ak-token-row): Kopf und Beschriftung --font-xs2,
 * Werte --font-md. Kein --font-xs: das ist die Groesse der Versal-Koepfe
 * einer Listen-Seite und hier eine Nummer zu klein.
 *
 * Farben (eine Bedeutung je Farbe, in beiden Formen gleich):
 *   geplant   --accent   Blau, Info/Plan. Nicht --confirm: ein Dienstplan
 *                        ist keine Erfolgsmeldung.
 *   abwesend  --red      Alarm-Rot, aufgehellt. Bewusst nicht --primary
 *                        (Brand-Rot und Alarm-Rot sind zwei Farben) und
 *                        EINE Farbe fuer jede Art von Abwesenheit: „Krank"
 *                        anders zu faerben als „Urlaub" machte aus einer
 *                        Zeile, die Kollegen nur als „abwesend" sehen
 *                        duerfen, ein Signal quer durch den Raum.
 *   ist       --confirm  „da", derselbe Ton wie „seit 08:12" in der
 *                        Uebersicht. Ein Streifen am unteren Rand des
 *                        Slots, damit Plan und Wirklichkeit im selben
 *                        Kaestchen lesbar bleiben: oben was sein sollte,
 *                        unten was war.
 *   feiertag  Schraffur  wie das Wochenende: an diesem Tag zaehlt das
 *                        Muster nicht, also tritt es zurueck.
 *
 * Zwei Formen: das volle Raster (Editor, Zeilen je Wochentag) und der
 * kompakte Wochen-Streifen (`.is-kompakt`, sieben Tages-Zellen in einer
 * Zeile) fuer Listen, in denen viele Menschen untereinander stehen.
 */

.idf-timegrid {
  --idf-timegrid-tagspalte: 44px;
  --idf-timegrid-zellhoehe: 26px;
  --idf-timegrid-slots: 32;
  /* Unter dieser Slot-Breite wird eine Halbstunde unklickbar; das Raster
     scrollt dann in seinem eigenen Kasten, statt die Seite zu sprengen. */
  --idf-timegrid-slot-min: 14px;
  /* Hoehe des Ist-Streifens am unteren Slot-Rand. */
  --idf-timegrid-ist: 9px;
  /* Abwesend: das Alarm-Rot aufgehellt, damit ein ganzer Tag als Balken
     lesbar ist, ohne die Zeile zu fluten. Ein Token-Zwischenwert per
     color-mix (SHARED-REORG §7.12), kein neues Hex. */
  --idf-timegrid-abwesend: color-mix(in srgb, var(--red) 55%, var(--white));
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  user-select: none;
  overflow-x: auto;
}

/* Kopfzeile und Tageszeilen teilen sich dieselbe Spurteilung, sonst
   stehen die Stunden-Beschriftungen neben ihren Zellen. */
.idf-timegrid-row {
  display: grid;
  grid-template-columns:
    var(--idf-timegrid-tagspalte)
    repeat(var(--idf-timegrid-slots), minmax(var(--idf-timegrid-slot-min), 1fr));
  align-items: stretch;
  min-width: min-content;
}

.idf-timegrid-head {
  padding-bottom: var(--space-1);
}

/* Stunden-Beschriftung: sitzt linksbuendig ueber ihrem Stundenblock, also
   genau ueber der Linie, an der die Stunde beginnt. */
.idf-timegrid-stunde {
  font-size: var(--font-xs2);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
  padding-left: 2px;
  border-left: 1px solid var(--line);
  line-height: var(--leading-tight);
}

.idf-timegrid-head .idf-timegrid-tag {
  border: 0;
}

.idf-timegrid-tag {
  display: flex;
  align-items: center;
  padding-right: var(--space-2);
  font-size: var(--font-xs2);
  font-weight: var(--weight-semi);
  color: var(--mid);
}

.idf-timegrid-body {
  border-top: 1px solid var(--line);
  /* Nur das Zellenfeld schluckt Touch-Gesten, damit die Seite daneben
     weiter scrollbar bleibt. Im Lesemodus wird nicht gemalt, dort darf
     der Finger auch ueber dem Raster scrollen. */
  touch-action: none;
}

.idf-timegrid.is-readonly .idf-timegrid-body {
  touch-action: auto;
}

.idf-timegrid-cell {
  height: var(--idf-timegrid-zellhoehe);
  border-right: 1px solid var(--shade-04);
  border-bottom: 1px solid var(--line);
  background: var(--wash-grey);
  transition: background var(--motion-fast) var(--ease-default);
}

/* Die volle Stunde bekommt die kraeftigere Linie - ohne sie zaehlt man
   Halbstunden ab, um die Uhrzeit einer Zelle zu erraten. */
.idf-timegrid-cell.is-stunde {
  border-left: 1px solid var(--line);
}

.idf-timegrid-cell.is-geplant {
  background: var(--accent);
}

/* ---------------- Overlays ------------------------------------------ */
/* Reihenfolge = Rangfolge: ein Feiertag nimmt das Muster zurueck, eine
   Abwesenheit gewinnt ueber beides. Der Ist-Streifen liegt als Inset-
   Schatten unten im Slot und laesst die Grundfarbe darueber stehen. */

.idf-timegrid-cell.is-feiertag.is-geplant {
  background: color-mix(in srgb, var(--accent) 35%, var(--white));
}

.idf-timegrid-cell.is-abwesend,
.idf-timegrid-cell.is-abwesend.is-geplant {
  background: var(--idf-timegrid-abwesend);
}

.idf-timegrid-cell.is-ist {
  box-shadow: inset 0 calc(var(--idf-timegrid-ist) * -1) 0 0 var(--confirm);
}

.idf-timegrid:not(.is-readonly) .idf-timegrid-cell {
  cursor: pointer;
}

.idf-timegrid:not(.is-readonly) .idf-timegrid-cell:hover {
  background: var(--tint-accent);
}

.idf-timegrid:not(.is-readonly) .idf-timegrid-cell.is-geplant:hover {
  /* Der geplante Slot ist bereits voll gesaettigt - der Hover muss hier
     abdunkeln statt aufzuhellen, sonst gibt es keinen sichtbaren Sprung. */
  filter: brightness(0.88);
}

.idf-timegrid-cell:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: var(--shadow-focus);
}

.idf-timegrid-fuss {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--space-2);
}

/* `summe: false`: aus dem Bild, nicht aus dem Accessibility-Tree. Der Fuss
   traegt ein aria-live und ist damit die einzige Rueckmeldung, die ein
   Screenreader nach einem Malzug bekommt - `display: none` oder `hidden`
   naehme sie mit. Deshalb die uebliche Technik: 1 px, weggeschnitten,
   nicht umbrechend. */
.idf-timegrid-fuss.is-still {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.idf-timegrid-summe {
  font-size: var(--font-md);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Kompakter Wochen-Streifen -------------------------- */
/* Sieben Tages-Zellen nebeneinander, jede ein flacher Balken aus den
   Slots des Tages. Kein Kopf, kein Fuss, keine Mindestbreite je Slot: der
   Streifen teilt sich die Breite, die seine Spalte hat, und die Slots
   werden dabei so schmal wie noetig - man liest hier Balken, keine
   einzelnen Halbstunden. Zehn solcher Zeilen untereinander ergeben mit
   derselben Achse (Zeitfenster waechst im Streifen nicht) eine Matrix. */

.idf-timegrid.is-kompakt {
  /* Zwei Spuren zu je der Haelfte (Soll oben, Ist unten). Die Variable
     --idf-timegrid-ist steht hier bewusst NICHT mehr: im Streifen gibt es
     keinen aufliegenden Ist-Balken mehr, den sie bemassen koennte. */
  --idf-timegrid-kompakt-hoehe: 14px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  overflow: visible;
}

.idf-timegrid-tagzelle {
  display: grid;
  grid-template-columns: repeat(var(--idf-timegrid-slots), minmax(0, 1fr));
  height: var(--idf-timegrid-kompakt-hoehe);
  min-width: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--wash-grey);
}

/* Wochenende und Feiertag: schraffiert statt getoent. Die Schraffur sagt
   „hier zaehlt kein Soll", ohne eine weitere Farbe zu brauchen; die
   Slots darueber bleiben durchsichtig, damit sie sichtbar bleibt. */
.idf-timegrid-tagzelle.is-wochenende,
.idf-timegrid-tagzelle.is-feiertag {
  background-color: var(--wash-grey);
  background-image: repeating-linear-gradient(
    135deg, var(--shade-08) 0 2px, transparent 2px 6px);
}

/* Die Slots im Streifen: randlos, ohne Uebergang (der Streifen wird als
   Ganzes neu gemalt), leer durchsichtig, damit der Tages-Hintergrund und
   seine Schraffur durchscheinen.

   ZWEI SPUREN uebereinander (Joerg 17.08.2026): obere Haelfte Soll (was
   geplant war bzw. was die Abwesenheit daraus gemacht hat), untere Haelfte
   Ist (was gestempelt wurde). Vorher lag das Gruen als schmaler Balken AUF
   dem blauen Soll und war dort kaum zu sehen - zwei Aussagen auf derselben
   Flaeche, von denen eine die andere verdeckt. Nebeneinander sind sie
   vergleichbar: gleiche Laenge heisst gearbeitet wie geplant, und wo nur
   oben Farbe steht, fehlt die Zeit.

   Umgesetzt als Hintergrund-Verlauf mit harter Kante bei 50 % statt mit
   Pseudo-Elementen: eine Zelle kann beides gleichzeitig sein, und zwei
   Layer in einer `background-image` mischen sich ohne zusaetzliches DOM.
   Die kombinierte Regel steht deshalb NACH den einzelnen. */
.idf-timegrid.is-kompakt .idf-timegrid-cell {
  height: 100%;
  border: 0;
  background: transparent;
  transition: none;
  /* Der generische Ist-Balken (unten liegender inset-Schatten) gilt nur im
     vollen Raster; hier traegt die untere Spur das Ist. */
  box-shadow: none;
}
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-geplant {
  background-image: linear-gradient(to bottom, var(--accent) 0 50%, transparent 50%);
}
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-feiertag.is-geplant {
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--accent) 35%, var(--white)) 0 50%, transparent 50%);
}
/* Abwesend liegt in der SOLL-Spur: eine genehmigte Abwesenheit sagt etwas
   ueber das Soll des Tages, nicht ueber die geleistete Zeit. So bleibt die
   untere Spur frei fuer den Fall „da gewinnt ueber abwesend" (wer trotz
   Urlaub eingestempelt ist, steht mit beidem da). */
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-abwesend,
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-abwesend.is-geplant {
  background-image: linear-gradient(to bottom,
    var(--idf-timegrid-abwesend) 0 50%, transparent 50%);
}
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-ist {
  background-image: linear-gradient(to top, var(--confirm) 0 50%, transparent 50%);
}
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-geplant.is-ist {
  background-image:
    linear-gradient(to bottom, var(--accent) 0 50%, transparent 50%),
    linear-gradient(to top, var(--confirm) 0 50%, transparent 50%);
}
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-feiertag.is-geplant.is-ist {
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 35%, var(--white)) 0 50%, transparent 50%),
    linear-gradient(to top, var(--confirm) 0 50%, transparent 50%);
}
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-abwesend.is-ist,
.idf-timegrid.is-kompakt .idf-timegrid-cell.is-abwesend.is-geplant.is-ist {
  background-image:
    linear-gradient(to bottom, var(--idf-timegrid-abwesend) 0 50%, transparent 50%),
    linear-gradient(to top, var(--confirm) 0 50%, transparent 50%);
}

/* ---------------- Touch --------------------------------------------- */
/* Groesse haengt an der ECHTEN Eingabeart (infrastructure/input-mode),
   nicht an (pointer: coarse) - ein Desktop mit Touchscreen wird sonst
   auf Fingergroesse aufgeblasen, obwohl dort mit der Maus gearbeitet
   wird. Ein Hybrid wechselt live mit. */

html[data-input-mode="touch"] .idf-timegrid {
  --idf-timegrid-tagspalte: 48px;
  --idf-timegrid-zellhoehe: 34px;
  --idf-timegrid-slot-min: 20px;
}

/* Der Streifen ist nicht bedienbar, er wird nur ein wenig hoeher, damit
   der Tooltip-Tipp eine Flaeche findet. */
html[data-input-mode="touch"] .idf-timegrid.is-kompakt {
  --idf-timegrid-kompakt-hoehe: 18px;
}