/*
 * com_impftermine – Frontend
 *
 * Ergänzendes CSS zum UIkit des Templates (Pflichtenheft Abschnitt 8 "Gestaltungsrahmen").
 * Alles hier greift ausschliesslich unterhalb von .com-impftermine und ersetzt weder ein
 * UIkit-Grid noch eine UIkit-Komponente. Es werden keine uk-*-Klassen überschrieben.
 *
 * mobile-first, WCAG 2.1 AA: keine Bedeutung allein über Farbe.
 */

/*
 * Joomla rendert Formularfelder über das Core-Layout joomla.form.renderfield mit den
 * eigenen Wrapper-Klassen control-group/control-label/controls. Diese Klassen stammen aus
 * dem Joomla-Core und nicht aus Bootstrap; UIkit kennt sie nicht. Die folgenden Regeln
 * geben ihnen ein Verhalten, das zum UIkit-Formularraster passt.
 */
.com-impftermine .control-group + .control-group {
  margin-top: 0;
}

.com-impftermine .control-label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.875rem;
  font-weight: 600;
}

.com-impftermine .control-label label {
  margin-bottom: 0;
}

.com-impftermine .controls > .uk-input,
.com-impftermine .controls > .uk-select {
  width: 100%;
}

/* Der Kalender-Feldtyp rendert Eingabefeld und Schalter nebeneinander. */
.com-impftermine .controls .field-calendar {
  display: flex;
}

.com-impftermine .controls .field-calendar .uk-input {
  min-width: 0;
}

/* Termine sollen nie mitten im Datum umbrechen. */
.com-impftermine time {
  white-space: nowrap;
}

.com-impftermine-location address {
  font-style: normal;
}

/* Auf schmalen Viewports etwas kompaktere Tabellenschrift. */
@media (max-width: 639px) {
  .com-impftermine-search__results th,
  .com-impftermine-search__results td {
    font-size: 0.875rem;
  }
}

/*
 * Kalenderansicht der Terminsuche.
 *
 * Das Raster ist eine echte Tabelle (sieben Spalten, eine Zeile je Woche) und liegt in
 * einem uk-overflow-auto-Container. Die Mindestbreite sorgt dafuer, dass auf schmalen
 * Geraeten gescrollt statt gequetscht wird.
 */
.com-impftermine-calendar__grid {
  min-width: 700px;
  table-layout: fixed;
}

.com-impftermine-calendar__grid th,
.com-impftermine-calendar__grid td {
  width: 14.2857%;
  vertical-align: top;
}

.com-impftermine-calendar__day {
  height: 6rem;
}

/* Tage ausserhalb des Monats bleiben leer und treten zurueck. */
.com-impftermine-calendar__day--outside {
  opacity: 0.4;
}

.com-impftermine-calendar__daynumber {
  font-weight: 600;
  margin-bottom: 4px;
}

/*
 * Der heutige Tag wird zusaetzlich zur Umrandung durch einen nur fuer Screenreader
 * sichtbaren Text gekennzeichnet - Farbe und Rahmen allein traegen keine Bedeutung
 * (Pflichtenheft Abschnitt 14, WCAG 2.1 AA).
 */
.com-impftermine-calendar__daynumber--today {
  display: inline-block;
  padding: 0 6px;
  border: 2px solid currentColor;
  border-radius: 999px;
}

/*
 * Monatsansicht: je Tag nur die Anzahl der freien Termine. Die Uhrzeiten stehen in der
 * Tagesansicht, die von hier aus verlinkt ist.
 */
.com-impftermine-calendar__count {
  display: block;
  line-height: 1.2;
  text-align: center;
}

.com-impftermine-calendar__count-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
}

/*
 * Tagesansicht als Zeitschiene: eine Zeile je Stunde, links die Uhrzeit als Zeilenkopf.
 * Stunden ohne Termine bleiben stehen, damit die Luecken im Tagesverlauf sichtbar sind.
 */
.com-impftermine-day__grid {
  min-width: 520px;
}

.com-impftermine-day__hourhead,
.com-impftermine-day__hour {
  width: 5rem;
  white-space: nowrap;
  vertical-align: top;
}

.com-impftermine-day__grid td {
  vertical-align: top;
}

.com-impftermine-day__slot {
  display: block;
  height: 100%;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------------
 * Buchungsbeleg (Detailansicht einer Buchung, druckbar)
 * ------------------------------------------------------------------------- */

.com-impftermine-booking__header {
  border-bottom: 1px solid currentColor;
  margin-bottom: 20px;
  padding-bottom: 15px;
}

.com-impftermine-booking__reference {
  margin-top: 10px;
}

.com-impftermine-booking__reference-value {
  font-family: monospace;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

/*
 * Barcode und QR-Code der Buchungsreferenz. Beide sind eingebettete SVG und tragen
 * dieselbe Information wie die Referenz im Klartext darueber.
 */
.com-impftermine-booking__codes {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 15px;
}

.com-impftermine-booking__barcode svg,
.com-impftermine-booking__qr svg {
  display: block;
  height: auto;
  max-width: 100%;
}

.com-impftermine-booking__qr svg {
  width: 120px;
}

/*
 * Eigener QR-Code je Person (D53). Bewusst kleiner als der der Buchung: er steht neben
 * einem Namen und darf die Personenliste nicht auseinanderziehen. Ein Scanner liest bei
 * 80 px noch zuverlaessig - darunter beginnt es vom Geraet abzuhaengen.
 */
.com-impftermine-booking__person-qr {
  margin-top: 6px;
}

.com-impftermine-booking__person-qr svg {
  display: block;
  height: auto;
  width: 80px;
}

.com-impftermine-booking__list {
  margin-bottom: 20px;
}

.com-impftermine-booking__list dt {
  font-size: 0.875rem;
  font-weight: 600;
}

.com-impftermine-booking__list dd {
  margin-left: 0;
}

.com-impftermine-booking__footer {
  border-top: 1px solid currentColor;
  margin-top: 20px;
  padding-top: 10px;
}

/*
 * Druckausgabe: Der Beleg soll auf eine Seite passen und ohne Farben lesbar sein.
 * Schaltflaechen, Navigation und Hinweise tragen .com-impftermine-noprint und
 * verschwinden; das Template selbst bleibt unveraendert.
 */
@media print {
  .com-impftermine-noprint {
    display: none !important;
  }

  .com-impftermine-booking__sheet {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  /* Abschnitte nicht ueber einen Seitenumbruch hinweg zerreissen. */
  .com-impftermine-booking__list,
  .com-impftermine-booking__header,
  .com-impftermine-booking__footer {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .com-impftermine-booking__reference-value {
    font-size: 1.4rem;
  }

  /*
   * Codes duerfen im Ausdruck weder skaliert noch umbrochen werden - ein gestauchter
   * Barcode ist nicht mehr lesbar. Hintergrundgrafiken erzwingen wir nicht; beide
   * Codes sind reine Vektorpfade in Schwarz.
   */
  .com-impftermine-booking__codes {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Links im Ausdruck nicht als Links auszeichnen - sie sind auf Papier wertlos. */
  .com-impftermine-booking a {
    text-decoration: none;
  }

  /* Dasselbe fuer den QR-Code je Person (D53) - er wird vom Papier gescannt. */
  .com-impftermine-booking__person-qr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/*
 * Scanpunkt (D53). Die Person, zu der der gescannte Code gehoert, wird hervorgehoben:
 * bei einer Familie steht sonst eine Liste da, in der erst gesucht werden muss.
 */
.com-impftermine-checkin__person--focus {
  border-left: 4px solid currentColor;
}

/*
 * Mitarbeiterportal (D85). Die Buchung, die per Referenz gesucht wurde, wird in der
 * Tagesliste hervorgehoben - dieselbe Marke wie am Scanpunkt.
 */
.com-impftermine-staff__row--focus > td {
  border-left: 4px solid currentColor;
  font-weight: bold;
}