/**
 * idf-tage-raster v0.1.0 - Kalender-Raster, ein Kaestchen je Tag
 *
 * Gegenstueck zu idf-tage-raster.js. Alle Groessen und Farben aus den
 * Tokens. Wie bar-chart ohne eigenen Rahmen und Hintergrund: das Raster
 * sitzt in einer Karte des Moduls.
 *
 * Aufbau: CSS-Grid mit grid-auto-flow: column. Spalte 1 sind die
 * Wochentage, jede weitere Spalte eine Woche mit sieben Tagen und der
 * KW-Nummer darunter. Das JS schreibt die Kaestchen nur in der richtigen
 * Reihenfolge, die Anordnung macht das Grid.
 */

.idf-tageraster {
  --idf-tageraster-wochen: 12;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.idf-tageraster-gitter {
  display: grid;
  grid-template-columns: auto repeat(var(--idf-tageraster-wochen), minmax(0, 1fr));
  grid-template-rows: repeat(7, auto) auto;
  grid-auto-flow: column;
  gap: var(--space-1);
  align-items: center;
  justify-items: center;
}

.idf-tageraster-tag,
.idf-tageraster-kw {
  font-size: var(--font-xs);
  line-height: var(--leading-tight);
  color: var(--ink-75);
  white-space: nowrap;
}

.idf-tageraster-tag {
  justify-self: end;
  padding-right: var(--space-1);
}

.idf-tageraster-kw {
  padding-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.idf-tageraster-kw.is-laufend {
  font-weight: var(--weight-bold);
  color: var(--ink);
}

/* Ein Kaestchen je Tag: quadratisch, hoechstens 22 px, damit zwoelf Wochen
   in einer schmalen Karte stehen und in einer breiten nicht zu Fliesen
   werden. */
.idf-tageraster-zelle {
  display: block;
  width: 100%;
  max-width: 22px;
  aspect-ratio: 1;
  box-sizing: border-box;
  border-radius: var(--radius-xs);
  background: var(--ink-4);
  box-shadow: inset 0 0 0 1px var(--ink-10);
}

/* Eine Farbe, hell nach dunkel: eine Menge, kein Zustand. */
.idf-tageraster-zelle.is-stufe-1 { background: var(--accent-25); box-shadow: none; }
.idf-tageraster-zelle.is-stufe-2 { background: var(--accent-50); box-shadow: none; }
.idf-tageraster-zelle.is-stufe-3 { background: var(--accent-75); box-shadow: none; }
.idf-tageraster-zelle.is-stufe-4 { background: var(--accent);    box-shadow: none; }

/* Heute bekommt einen Rand in IDF Schwarz: der eine Tag, an dem sich das
   Kaestchen noch aendert. */
.idf-tageraster-zelle.is-heute {
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* Tage nach heute: gestrichelt, ohne Flaeche. Sie gehoeren zur laufenden
   Woche, haben aber noch keinen Wert. */
.idf-tageraster-zelle.is-zukunft {
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--ink-15);
}

.idf-tageraster-legende {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-xs);
  color: var(--ink-75);
}

.idf-tageraster-legende .idf-tageraster-zelle {
  width: 12px;
  max-width: 12px;
}

.idf-tageraster-legende span:first-child { margin-right: var(--space-1); }
.idf-tageraster-legende span:last-child  { margin-left: var(--space-1); }