/**
 * idf-calendar v0.1.0 - Kalender-Raster (Monat und Woche) mit Tages-Balken
 *
 * Aufbau: eine Wochenzeile ist EIN CSS-Grid mit sieben Spalten. Zeile 1 trägt
 * die Tages-Köpfe, die Zeilen darunter die Balken-Lanes. Die Tages-Zellen
 * liegen als Hintergrund über alle Zeilen (`grid-row: 1 / -1`), die Balken
 * darüber. Dadurch braucht kein Balken eine gerechnete Pixel-Position: er
 * steht per `grid-column: <start> / span <n>` genau über seinen Tagen.
 *
 * Farben und Maße ausschließlich aus idf-tokens.css.
 */

.idf-cal {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Kopf: Blättern, Titel, Ansicht                                      */
/* ------------------------------------------------------------------ */
.idf-cal-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.idf-cal-titel {
  flex: 1 1 auto;
  text-align: center;
  font-size: var(--font-lg);
  font-weight: var(--weight-semi);
  color: var(--ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Raster                                                              */
/* ------------------------------------------------------------------ */
/* KEIN `overflow: hidden`, obwohl die Rundung danach verlangt: ein Tooltip
   ist ein `::after` an seinem Host, und ein clippendes Raster schneidet ihn
   ab. Genau das war zu sehen, ein kurz aufblitzender Streifen (Joerg,
   24.08.2026). Die Ecken tragen deshalb die Kinder, siehe unten. Dieselbe
   Loesung wie im Listen-Grid, das seine Zellen auf `overflow: visible`
   stellt, sobald ein Tooltip darin haengt. */
.idf-cal-raster {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
}

/* Die Ecken der Aussenkanten: oben traegt sie der Wochentag-Kopf (Monat) oder
   die erste Wochenzeile (Woche), unten immer die letzte Wochenzeile. */
.idf-cal-raster > :first-child,
.idf-cal-raster > :first-child .idf-cal-tag:first-child {
  border-top-left-radius: var(--radius-md);
}

.idf-cal-raster > :first-child,
.idf-cal-raster > :first-child .idf-cal-tag:nth-child(7) {
  border-top-right-radius: var(--radius-md);
}

.idf-cal-woche:last-child .idf-cal-tag:first-child {
  border-bottom-left-radius: var(--radius-md);
}

.idf-cal-woche:last-child .idf-cal-tag:nth-child(7) {
  border-bottom-right-radius: var(--radius-md);
}

.idf-cal-woche:last-child .idf-cal-tag {
  border-bottom: 0;
}

.idf-cal-wochentage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.idf-cal-wochentag {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}

.idf-cal-wochentag.is-wochenende {
  color: var(--soft);
}

/* Die Zeilen (`grid-template-rows`) setzt der Baustein je Woche inline: sie
   hängen an der Zahl der Balken-Spuren, und die Tages-Zelle braucht ein
   EXPLIZITES Raster, sonst deckt ihr `grid-row: 1 / -1` nur die Kopfzeile ab. */
.idf-cal-woche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.idf-cal.is-monat .idf-cal-woche {
  min-height: 132px;
}

.idf-cal.is-woche .idf-cal-woche {
  min-height: 320px;
}

/* Hintergrund-Zelle eines Tages: liegt unter allem und gibt der Spalte ihre
   Trennlinie. Die letzte Spalte bekommt keine rechte Linie, den Rand macht
   das Raster selbst. */
.idf-cal-tag {
  grid-row: 1 / -1;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 100%;
}

.idf-cal-tag:nth-child(7) {
  border-right: 0;
}

.idf-cal-tag.is-wochenende { background: var(--bg); }
.idf-cal-tag.is-feiertag   { background: var(--wash-yellow); }
.idf-cal-tag.is-fremd      { background: var(--neutral-bg); }
.idf-cal-tag.is-heute      { background: var(--tint-accent-soft); }

/* Tages-Kopf: Datum, in der Wochenansicht zusätzlich die Tageslast. */
.idf-cal-tagkopf {
  grid-row: 1;
  position: relative;
  z-index: 1;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--font-sm);
  color: var(--mid);
  min-width: 0;
}

.idf-cal-tagkopf.is-fremd { color: var(--soft); }

.idf-cal-tagzahl {
  font-size: var(--font-base);
  font-weight: var(--weight-semi);
  color: var(--ink);
}

.idf-cal-tagkopf.is-fremd .idf-cal-tagzahl { color: var(--soft); }

.idf-cal-tagkopf.is-heute .idf-cal-tagzahl {
  color: var(--accent);
}

.idf-cal-tagname {
  font-size: var(--font-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
}

.idf-cal-tagnote {
  margin-top: 2px;
  font-size: var(--font-sm);
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tageslast: wie viel geplante Zeit auf diesem Tag liegt, gemessen am
   Tages-Soll. Der Balken ist bewusst schmal - er ist eine Nebenauskunft
   neben dem Datum, keine zweite Überschrift. */
.idf-cal-last {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.idf-cal-last-balken {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}

.idf-cal-last-balken::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--idf-cal-last-anteil, 0%);
  background: var(--accent);
  border-radius: inherit;
}

.idf-cal-last.is-voll .idf-cal-last-balken::before {
  background: var(--red);
}

.idf-cal-last-text {
  flex: 0 0 auto;
  font-size: var(--font-sm);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

.idf-cal-last.is-voll .idf-cal-last-text {
  color: var(--red);
  font-weight: var(--weight-semi);
}

/* ------------------------------------------------------------------ */
/* Balken                                                              */
/* ------------------------------------------------------------------ */
.idf-cal-bar {
  position: relative;
  z-index: 1;
  margin: 1px var(--space-1) 2px;
  padding: var(--space-1) var(--space-2);
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Inhalt liest man, also Standard-Schrift wie in einer Listenzelle
     (CLAUDE.md, Harte Verbote Nr. 11). Eine Ansicht, die kleiner setzt als
     die Liste daneben, ist nicht kompakt, sondern schlechter lesbar. */
  font-size: var(--font-base);
  line-height: var(--leading-tight);
  color: var(--ink);
  /* Eine Flaeche nimmt `--wash-*`, keine `--tint-*`: die Tint-Familie ist
     fuer Pillen und Badges gemacht, und eine Staerke, die auf 20 px richtig
     aussieht, wird ueber vier Tagesspalten zur Wand. Der Balken ist eine
     Flaeche. */
  background: var(--wash-grey);
  border-radius: 0;
  cursor: pointer;
  /* Ein Doppelklick auf Text markiert das Wort. `list-view/row-open` bricht
     bei einer bestehenden Auswahl ab (wer markiert, wollte nicht oeffnen) -
     ohne diese Zeile liesse sich ein Balken also NIE per Doppelklick
     oeffnen. Dieselbe Regel traegt jede Listenzeile. */
  user-select: none;
  -webkit-user-select: none;
  /* Nicht clippen: der Tooltip haengt als `::after` am Balken und waere sonst
     in ihm gefangen. Den Text kuerzt das Titel-Element selbst. */
  overflow: visible;
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-default);
}

/* Hover als Abdunkeln des jeweiligen Grundes, nicht als eigene Farbe: der
   Balken kann getoent sein (Kategorie-Farbe des Konsumenten), und ein fester
   Hover-Wert waere darauf mal ein Sprung und mal keiner. */
.idf-cal-bar:hover {
  background: color-mix(in srgb, var(--wash-grey) 92%, var(--ink));
  /* Der Tooltip steht ueber dem Balken und ragt damit in die Zeile darueber.
     Die kommt im DOM frueher und laege sonst darueber - der Tooltip waere
     halb verdeckt. */
  z-index: 3;
}

/* Ein Balken, der in dieser Woche anfängt bzw. aufhört, bekommt an dieser
   Seite die Rundung. Läuft er weiter, bleibt die Kante gerade - daran sieht
   man in der Monatsansicht, dass es in der nächsten Zeile weitergeht. */
.idf-cal-bar.is-anfang {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.idf-cal-bar.is-ende {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.idf-cal-bar:not(.is-anfang) { margin-left: 0; }
.idf-cal-bar:not(.is-ende)   { margin-right: 0; }

.idf-cal-bar-titel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idf-cal-bar-meta {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--font-base);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

.idf-cal-mehr {
  z-index: 1;
  margin: 1px var(--space-1) var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--font-sm);
  color: var(--mid);
  align-self: start;
}

/* ------------------------------------------------------------------ */
/* Schmal und Touch                                                    */
/* ------------------------------------------------------------------ */
html[data-input-mode="touch"] .idf-cal-bar {
  min-height: 40px;
}

@media (max-width: 900px) {
  .idf-cal-raster {
    overflow-x: auto;
  }

  .idf-cal-wochentage,
  .idf-cal-woche {
    min-width: 760px;
  }

  .idf-cal-titel {
    order: -1;
    flex-basis: 100%;
    text-align: left;
  }
}