/* ══════════════════════════════════════════════════
   v2 DATEPICKER — Eigenbau statt Flatpickr, damit Styling/Verhalten
   vollstaendig in unserer Hand liegen. Kein Vorbild im Prototyp (der nutzt
   ein natives <input type="date">); Optik im selben Token-Vokabular wie der
   Rest von v2 (Karte, Pill-Radius, Akzentfarbe).
   ══════════════════════════════════════════════════ */
.v2-datepicker { position: relative; display: inline-block; }
.v2-datepicker-display { cursor: pointer; }

.v2-datepicker-popover {
  /* `fixed` und am <body>, nicht `absolute` im Feld: die Werkzeugleiste sitzt
     in einer `.card` mit `overflow: hidden`, die den Kalender sonst an ihrer
     Unterkante abschneidet. Ort und Ausrichtung setzt der Controller
     (`_platzieren`), weil sie vom Platz im Fenster abhaengen. */
  position: fixed; top: 0; left: 0;
  /* Ueber dem Dialog: derselbe Grund wie bei der Auswahlliste — am <body>
     und damit ausserhalb des Stapels seines Feldes (Token --ms-z-detached). */
  z-index: var(--ms-z-detached);
  /* 288px ist die Breite von myOFFICEs Auswaehler (`.mo-dp`) und ergibt bei
     sieben Spalten plus 12px Polsterung Tagesfelder von 36px — gross genug,
     um sie sicher zu treffen. Eine Zahl und kein Token: es ist das Mass DIESES
     Bauteils, nicht ein Abstand aus der Skala. */
  width: 288px;
  background: var(--ms-bg-primary);
  border: 1px solid var(--ms-border-light);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-card-shadow-hover);
  padding: var(--ms-space-3);
}
.v2-datepicker-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ms-space-3);
}
.v2-datepicker-title {
  font-size: var(--ms-text-small); font-weight: var(--ms-weight-bold);
  /* Der Titel nimmt den Platz zwischen den Knopfgruppen und bricht nicht:
     „September 2026" ist der laengste Fall. Ohne `flex: 1` teilte
     `space-between` den Raum zwischen DREI Kindern auf und die Gruppen
     rutschten in die naechste Zeile, sobald vier Knoepfe darin stehen. */
  flex: 1 1 auto; text-align: center; white-space: nowrap;
}
/* Knopfgruppe im Kopf: Jahr und Monat als Paar, links und rechts des Titels.
   Aufbau wie in myOFFICE (`.mo-dp__navs`) — Doppelpfeil aussen, einfacher
   Pfeil innen, damit die Sprungweite von aussen nach innen abnimmt. */
.v2-datepicker-navs { display: flex; align-items: center; gap: var(--ms-space-1); flex: none; }
.v2-datepicker-nav {
  padding: var(--ms-space-1); border-radius: var(--ms-radius-sm);
  border: none; background: none; cursor: pointer;
  line-height: 1; color: var(--ms-text-tertiary);
  display: flex; align-items: center; justify-content: center;
}
.v2-datepicker-nav:hover { background: var(--ms-bg-secondary); color: var(--ms-text-primary); }
.v2-datepicker-weekdays,
.v2-datepicker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--ms-space-05); }
.v2-datepicker-weekdays span {
  text-align: center; font-size: var(--ms-text-caption); font-weight: var(--ms-weight-semibold);
  color: var(--ms-text-secondary); padding-bottom: var(--ms-space-1);
}
.v2-datepicker-day {
  aspect-ratio: 1; width: 100%; border: none; background: none; cursor: pointer;
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-small); color: var(--ms-text-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ms-transition-fast), color var(--ms-transition-fast);
}
.v2-datepicker-day:hover:not(.is-disabled) { background: rgba(var(--ms-accent-rgb),0.08); }
/* HEUTE ist ein Ring und keine Farbe. Vorher trug der Tag den Akzent als
   Schriftfarbe — daneben ist der GEWAEHLTE Tag eine Akzentflaeche, und beide
   Aussagen sahen dadurch verwandt aus, obwohl sie Verschiedenes bedeuten.
   Der Ring markiert die Lage, die Flaeche die Wahl (wie `.mo-dp__day`). */
.v2-datepicker-day.is-today { box-shadow: inset 0 0 0 1px var(--ms-accent); color: var(--ms-accent); }
.v2-datepicker-day.is-selected { background: var(--ms-accent); color: var(--ms-on-accent); font-weight: var(--ms-weight-semibold); }
.v2-datepicker-day.is-selected.is-today { box-shadow: none; color: var(--ms-on-accent); }
/* Durchgestrichen und nicht nur blass: „gesperrt" ist eine Aussage, kein
   schwacher Kontrast. In den Bestellschritten sind ganze Zeitraeume gesperrt,
   und blasse Zahlen liest man dort als „weit weg" statt als „geht nicht". */
.v2-datepicker-day.is-disabled {
  color: var(--ms-text-tertiary); opacity: .4;
  cursor: not-allowed; text-decoration: line-through; pointer-events: none;
}
.v2-datepicker-day.is-outside { pointer-events: none; }

/* BUCHUNGSSTAND IM PRODUKTDETAIL (2026-09-18).
   Zwei Zustaende, kein Rot (Weisung des Betreibers: „das sieht zu dramatisch
   aus"). Gruen heisst „an diesem Tag ist noch mindestens eines frei", Gelb
   „nichts mehr frei" — NICHT „irgendetwas ist reserviert": ein Messestand mit
   vier Stueck, von denen einer gebucht ist, ist zu haben.
   Die Farbe ist der schnelle Blick; die Zahl steht im `title` und traegt die
   Auskunft auch ohne Farbwahrnehmung (WCAG 1.4.1).
   Gezeichnet wird in templates/v2/productAssembly/_calendar.html.twig. */
.v2-datepicker-day.is-frei,
.v2-datepicker-day.is-belegt {
  cursor: default;
  font-weight: var(--ms-weight-semibold);
}
.v2-datepicker-day.is-frei { background: var(--ms-success-muted); color: var(--ms-success-text); }
.v2-datepicker-day.is-belegt { background: var(--ms-warning-muted); color: var(--ms-warning-text); }
/* Kein Schwebezustand: die Zellen sind Anzeige, nicht Bedienung. */
.v2-datepicker-day.is-frei:hover,
.v2-datepicker-day.is-belegt:hover { background: var(--ms-success-muted); }
.v2-datepicker-day.is-belegt:hover { background: var(--ms-warning-muted); }

/* Der Kalender im Detailfenster steht frei, nicht in einem Popover — und er
   steht MITTIG (Weisung des Betreibers, 2026-09-18: „zu sehr an die Seite
   geklebt"). */
.pdetail-calendar { margin: 0 auto var(--ms-space-4); width: fit-content; max-width: 100%; }
/* Die Pfeile stehen ueber den Monaten, links und rechts aussen: geblaettert
   wird um EINEN Monat, angezeigt werden zwei — ein Pfeilpaar je Monat waere
   zweimal dieselbe Handlung. */
.pdetail-calendar-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--ms-space-2);
}
.pdetail-calendar-months { display: flex; gap: var(--ms-space-6); justify-content: center; }
.pdetail-calendar-month { flex: 0 0 auto; width: 264px; }
.pdetail-calendar-month .v2-datepicker-title {
  display: block; margin: 0 0 var(--ms-space-3);
}
/* Auf schmalen Fenstern untereinander: zwei Gitter nebeneinander brauchen
   mehr Platz, als ein Telefon hat. */
@media (max-width: 640px) {
  .pdetail-calendar-months { flex-direction: column; align-items: center; gap: var(--ms-space-5); }
}
.pdetail-calendar-note {
  margin: var(--ms-space-2) 0 0; text-align: center;
  /* --ms-text-secondary und nicht -tertiary: letzteres kommt auf 3,62:1 und
     verfehlt AA fuer Kleinschrift (Designsystem, Regel 8; bin/design-check
     hat es gemeldet). */
  font-size: var(--ms-text-caption); color: var(--ms-text-secondary);
}
.pdetail-calendar-none {
  margin: 0; font-size: var(--ms-text-small); color: var(--ms-text-secondary);
}
.pdetail-calendar-legend {
  display: flex; align-items: center; justify-content: center; gap: var(--ms-space-2);
  margin: var(--ms-space-4) 0 0;
  font-size: var(--ms-text-caption); color: var(--ms-text-secondary);
}
.pdetail-calendar-key {
  width: 12px; height: 12px; border-radius: var(--ms-radius-sm); flex: none;
  margin-inline-start: var(--ms-space-2);
}
.pdetail-calendar-key:first-child { margin-inline-start: 0; }
.pdetail-calendar-key.is-frei { background: var(--ms-success-muted); }
.pdetail-calendar-key.is-belegt { background: var(--ms-warning-muted); }

/* Uhrzeit als Spalte neben dem Kalender (kombinierte Betriebsart des
   Datumsauswaehlers). Die EIGENSTAENDIGE Uhrzeitauswahl (`v2-timepicker`) ist
   am 2026-09-16 entfallen — die Uhrzeit im Bestellassistenten ist seither ein
   gewoehnliches Auswahlfeld in Halbstundenschritten (Begruendung in
   templates/v2/order/wizard/_time_select.html.twig). */
.v2-datepicker-popover.has-time { width: auto; }
.v2-datepicker-split { display: flex; gap: var(--ms-space-3); align-items: stretch; }
.v2-datepicker-calendar { flex: 0 0 auto; }
.v2-datepicker-times {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--ms-space-2);
  padding-left: var(--ms-space-3);
  border-left: 1px solid var(--ms-border-light);
}
.v2-datepicker-times-head {
  display: flex; align-items: center; gap: var(--ms-space-2);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-medium);
  color: var(--ms-text-secondary);
}
/* Feste Hoehe statt `100%`: die Liste soll neben dem Kalender scrollen und ihn
   nicht in die Laenge ziehen. */
.v2-datepicker-times-list {
  display: flex; flex-direction: column; gap: var(--ms-space-05);
  max-height: 220px; overflow-y: auto;
  padding-right: var(--ms-space-1);
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* aeltere Edge */
}
.v2-datepicker-slot {
  border: none; background: none; cursor: pointer;
  padding: 5px var(--ms-space-3);
  border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-small); color: var(--ms-text-primary);
  text-align: center; white-space: nowrap;
  transition: background var(--ms-transition-fast), color var(--ms-transition-fast);
}
.v2-datepicker-slot:hover { background: rgba(var(--ms-accent-rgb),0.08); }
.v2-datepicker-slot.is-selected {
  background: var(--ms-accent); color: var(--ms-on-accent);
  font-weight: var(--ms-weight-semibold);
}
.v2-datepicker-done {
  border: none; border-radius: var(--ms-radius-pill);
  background: var(--ms-accent); color: var(--ms-on-accent);
  padding: 6px var(--ms-space-4);
  font-size: var(--ms-text-caption); font-weight: var(--ms-weight-medium);
  cursor: pointer;
}
.v2-datepicker-done:hover { background: var(--ms-accent-hover); }

/* Die Zeitliste rollt OHNE sichtbare Leiste — sie steht in einem 220px hohen
   Kasten neben dem Kalender, und eine Systemleiste darin ist breiter als der
   Abstand, den der Kasten hat. */
.v2-datepicker-times-list::-webkit-scrollbar { width: 0; height: 0; }

/* Fusszeile des Kalenders mit dem Sprung zum heutigen Tag. */
/* Fusszeile wie in myOFFICE (`.mo-dp__foot`): zwei Handlungen mit
   unterschiedlichem Gewicht, getrennt durch eine Linie. „Heute" ist die
   haeufige und traegt deshalb den Knopf; „Loeschen" ist die seltene und
   gefaehrlichere und bleibt ein Verweis. Beide am Rand, damit man sie nicht
   verwechselt — mittig nebeneinander sahen sie gleichwertig aus. */
.v2-datepicker-footer {
  margin-top: var(--ms-space-2); padding-top: var(--ms-space-2);
  border-top: 1px solid var(--ms-border-light);
  display: flex; align-items: center; justify-content: space-between;
}
/* „Loeschen" traegt .text-link (base.css) — Farbe, Gewicht, Ruecksetzer und
   Fokusring kommen von dort. Hier bleibt nur die Groesse: im Auswaehler ist
   der Verweis kleiner als im Fliesstext. */
.v2-datepicker-clear { font-size: var(--ms-text-small); }
.v2-datepicker-today:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.v2-datepicker-today {
  border: none; cursor: pointer;
  padding: var(--ms-space-2) var(--ms-space-4); border-radius: var(--ms-radius-sm);
  font-size: var(--ms-text-small); font-weight: var(--ms-weight-semibold);
  background: var(--ms-accent); color: var(--ms-on-accent);
}
.v2-datepicker-today:hover { background: var(--ms-accent-hover); }