/* ===========================================================================
 * Ruhe im Kalender.
 *
 * Der Monatskalender hat nie einen Gestaltungsdurchgang bekommen - er ist
 * ueber Monate gewachsen. Am lautesten war das Pluszeichen: 42 gefuellte
 * orange Kreise, einer in jeder Zelle, fuer eine Nebenhandlung.
 *
 * Diese Datei haelt das, was sich nicht inline sagen laesst: Zustaende.
 * Alles andere steht im EJS, weil es dort schon steht.
 * ======================================================================== */

/* Das Pluszeichen ruht, bis man es braucht. Es verschwindet nicht - wer
   es sucht, findet es; wer es nicht sucht, wird nicht angesprungen. */
.kalender-monat .tag-plus {
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.kalender-monat .tag-plus:hover,
.kalender-monat .tag-plus:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--contrast-text);
}

/* Die ganze Zelle hebt das Plus hervor, nicht nur das Plus selbst - sonst
   muesste man die 20 Pixel genau treffen, bevor man sieht, dass da etwas ist. */
.kalender-monat .kal-zelle:hover .tag-plus {
  border-color: var(--accent);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .kalender-monat .tag-plus { transition: none; }
}

/* Auf schmalen Geraeten ist das Plus ohnehin nicht zu treffen, und der
   Fingerdruck auf die Zelle fuehrt an denselben Ort. */
@media (max-width: 640px) {
  .kalender-monat .tag-plus { display: none; }
}

/* ---------------------------------------------------------------------------
 * Die Auskunftsspalte neben dem Kalender.
 *
 * Erst wenn etwas darin steht, bekommt die Buehne zwei Spalten - sonst
 * waere es nur verschenkte Breite. Darum haengt alles an .hat-spalte, das
 * kalender-spalte.js setzt.
 * ------------------------------------------------------------------------ */

.kal-buehne { min-width: 0; }

@media (min-width: 1020px) {
  .kal-buehne.hat-spalte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
  }
}

/* Unter 1020px steht die Spalte ueber dem Raster: Wer ist da, wie viele Tage
   sind uebrig - das ist die Frage, mit der man den Kalender aufmacht. */
@media (max-width: 1019px) {
  .kal-buehne.hat-spalte #kal-spalte { order: -1; margin-bottom: 12px; }
  .kal-buehne.hat-spalte { display: flex; flex-direction: column; }
}

#kal-spalte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kal-karte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px 14px;
  box-shadow: var(--shadow-sm);
}

.kal-karte > h2 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 10px;
}

.kal-karte-inhalt { font-size: 0.86rem; line-height: 1.45; }

/* --- Ferien ------------------------------------------------------------- */

.kal-saldo + .kal-saldo {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.kal-saldo .wer { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.kal-saldo .wer b { font-weight: 600; font-size: 0.9rem; }
.kal-punkt { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.kal-balken {
  height: 7px;
  border-radius: 4px;
  background: var(--neutral-soft);
  border: 1px solid var(--line);
  display: flex;
  overflow: hidden;
  margin-bottom: 7px;
}
.kal-balken i { display: block; height: 100%; }
.kal-balken .b1 { background: currentColor; }
.kal-balken .b2 { background: currentColor; opacity: 0.38; }

.kal-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
.kal-zahlen dt {
  font-size: 0.64rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 700;
}
.kal-zahlen dd {
  margin: 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.kal-zahlen dd.leer { color: var(--warning); font-weight: 600; }

/* --- Besetzung ---------------------------------------------------------- */

.kal-warnung {
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  border-radius: 0 8px 8px 0;
  padding: 9px 11px;
  font-size: 0.82rem;
}
.kal-warnung + .kal-warnung { margin-top: 8px; }
.kal-warnung b { display: block; font-size: 0.86rem; margin-bottom: 2px; }
.kal-warnung .dazu {
  color: var(--text-soft);
  font-size: 0.78rem;
  display: block;
  margin-top: 3px;
}
.kal-ruhig { font-size: 0.82rem; color: var(--text-soft); }

/* --- Legende ------------------------------------------------------------ */

#kal-karte-legende .kal-karte-inhalt { display: flex; flex-direction: column; gap: 6px; }
#kal-karte-legende .kal-karte-inhalt > div { display: flex; align-items: center; gap: 8px; }
.kal-muster {
  width: 22px;
  height: 13px;
  border-radius: 3px;
  flex: none;
  border: 1px solid var(--line);
}

/* Blass heisst: gibt es, kommt in diesem Monat nur nicht vor.
   Bewusst ein NEUTRALER Fleck und kein abgeschwaechtes Rot - sonst sucht
   man im Kalender nach einem blassen Rot, das es dort nicht gibt. Die
   Tokens gehen im dunklen Modus mit, ein fester Grauwert taete das nicht. */
.kal-blass { color: var(--text-soft); }
.kal-blass .kal-muster { background: var(--neutral-soft); border-color: var(--line); }

/* Der Strich zwischen den Markierungen am Tag und den Gruenden am Eintrag.
   Ein <hr>, damit er nicht als Zeile mitzaehlt. */
hr.kal-trenner {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 7px 0 3px;
}

/* Der Punkt traegt die Farbe, die der Balken vorher hatte - die des
   Mitarbeiters. Der Balken selbst zeigt jetzt den Grund. So stehen beide
   Angaben nebeneinander, statt um denselben Platz zu streiten.
   Der helle Rand haelt ihn auch auf einem dunklen Balken sichtbar. */
.termin-punkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: baseline;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
}

/* Das Klappfach: was nicht dringend ist, liegt einen Klick tief. Ohne das
   waere die Spalte bei dreissig Mitarbeitern laenger als der Kalender. */
.kal-mehr { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
.kal-mehr > summary {
  cursor: pointer; font-size: 0.8rem; color: var(--text-soft);
  list-style: none; padding: 2px 0; user-select: none;
}
.kal-mehr > summary::-webkit-details-marker { display: none; }
.kal-mehr > summary::before { content: '▸ '; }
.kal-mehr[open] > summary::before { content: '▾ '; }
.kal-mehr > summary:hover { color: var(--text); }
.kal-mehr > div { margin-top: 8px; }

/* Knapp oder nicht - die Farbe entscheidet die Stilvorlage, damit sie im
   dunklen Modus mitgeht. Das Skript setzt nur die Klasse. */
.kal-saldo.gut { color: var(--success); }
.kal-saldo.knapp { color: var(--warning); }
.kal-saldo .kal-punkt { background: currentColor; }
.kal-saldo .wer b { color: var(--text); }
.kal-zahlen { color: var(--text); }

/* Das Kuerzel in der Legende sieht aus wie das im Kalender - sonst
   erkennt man nicht wieder, was erklaert wird. Nur die Form steht hier;
   die Farben schreibt das Skript vom echten Zeichen ab. */
.kal-karte .kal-zeichen {
  font-size: 0.6rem; font-weight: 600; flex: none;
  border-radius: 4px; padding: 0 4px; margin-right: 8px;
}

/* ===========================================================================
 * Der Kopfbereich des Kalenders
 *
 * Alles, was man am Kalender bedient, steht in EINER Leiste: die Reiter,
 * das Blaettern, der neue Eintrag. Vorher lag der Knopf oben rechts neben
 * der Ueberschrift und die Reiter eine Zeile tiefer - das Auge musste
 * zweimal hin.
 *
 * Alle Regeln haengen an .kal-kopf. .filter-tabs steht auch auf Projekte
 * und Rechnungen; die duerfen sich nicht mitaendern.
 * ======================================================================== */

.kal-kopf {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.kal-kopf .kal-titel { min-width: 0; margin-bottom: 14px; }

/* Untere Reihe: Reiter links, Steuerung rechts. */
.kal-kopf .kal-leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kal-kopf .kal-steuer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Der Mandantenname. Klein und ueber der Ueberschrift: Er beantwortet die
   Frage "wessen Kalender ist das", ohne die Antwort auf "welcher Monat"
   zu verdraengen. */
.kal-kopf .kal-firma {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.kal-kopf h1 {
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Die Hinweiszeile erscheint NUR, wenn man weggeblaettert hat - siehe die
   Begruendung in der Ansicht. Deshalb darf sie auffallen. */
.kal-kopf .kal-hinweis {
  margin: 7px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-soft);
  max-width: 46ch;
}


/* Zurueck, Heute, Weiter gehoeren zusammen - drei einzeln stehende Knoepfe
   sehen aus wie drei unabhaengige Befehle. */
.kal-kopf .kal-blaettern { display: flex; }
.kal-kopf .kal-blaettern .btn {
  border-radius: 0;
  margin: 0;
  position: relative;
}
.kal-kopf .kal-blaettern .btn + .btn { margin-left: -1px; }
.kal-kopf .kal-blaettern .btn:first-child {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
}
.kal-kopf .kal-blaettern .btn:last-child {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
/* Beim Zeigen nach vorn, sonst verschluckt der Nachbar die Umrandung. */
.kal-kopf .kal-blaettern .btn:hover,
.kal-kopf .kal-blaettern .btn:focus { z-index: 1; }

/* Steht man ohnehin im heutigen Zeitraum, fuehrt "Heute" nirgendwohin.
   Der Knopf bleibt bedienbar - er wird nur leiser, statt zu verschwinden:
   ein Knopf, der mal da ist und mal nicht, laesst einen suchen. */
.kal-kopf .kal-blaettern .kal-hier { color: var(--text-soft); }

/* Der einzige Knopf, der etwas Neues anlegt - und deshalb der einzige
   farbige in dieser Leiste. */
.kal-kopf .kal-neu {
  white-space: nowrap;
  background: var(--accent);
  color: var(--contrast-text);
  border-color: var(--accent);
}
.kal-kopf .kal-neu:hover { background: var(--accent-hover, var(--accent)); color: var(--contrast-text); filter: brightness(0.94); }

/* Auf dem Telefon untereinander: Ueberschrift, dann die Leiste in voller
   Breite. Nebeneinander waere beides zu schmal zum Lesen und zum Treffen. */
@media (max-width: 760px) {
  .kal-kopf { align-items: stretch; }
  .kal-kopf h1 { font-size: 1.6rem; }
  .kal-kopf .kal-leiste { width: 100%; }
  .kal-kopf .kal-steuer { width: 100%; }
  .kal-kopf .kal-blaettern { flex: 1; }
  .kal-kopf .kal-blaettern .btn { flex: 1; text-align: center; }
  .kal-kopf .kal-neu { width: 100%; text-align: center; }
}