/*
 * Shipaholics Termine Salespage – Frontend Styles (Fork aus SuperSaaS Calendar; 1.1.0: Terminkachel
 * mit Datumsblock, Mehr/Einklappen; 1.1.1: mehr Innenabstand im Datumsblock).
 * Seit v1.5.0 (WPCS-3): Farben und Randbreiten der Slot-Cards sind als CSS-Klassen
 * definiert (.sscal-slot--<status>, siehe unten), NICHT mehr als Inline-Styles im JS.
 * Das JS setzt nur noch die className. Vorteil: CSP-fähig, weniger Style-Recalc.
 */

/* ─── Container ─────────────────────────────────────────────────────────────── */
.sscal-container {
  /* 1.1.0 (Zweitprüfung R-2): Die Container-Abfrage auf .sscal-slots nimmt der Liste ihre Inhaltsbreite. In Hüllen
   * ohne eigene Breite (inline-block, Flex ohne stretch) fiele der Kalender sonst auf 0 px. Die Grid-Spur
   * minmax(0, 600px) gibt ihm dort min(600 px, verfügbare Breite); in normalen Spalten bleiben Breite und Höhe
   * gleich (gemessen bei 1280 und 375 px). „width: 600px“ wäre am Handy in solchen Hüllen übergelaufen. */
  display: grid;
  grid-template-columns: minmax(0, 600px);
  max-width: 600px;
  margin-inline: auto;
  font-family: inherit;
  color: inherit;
  scroll-margin-top: 1rem; /* 1.1.0: Ziel von „Einklappen" (www ohne fixierte Kopfzeile, gemessen 19.10.) */
}

/* ─── Filter-Leiste ─────────────────────────────────────────────────────────── */
.sscal-filter-bar {
  text-align: center;
  margin-bottom: 20px;
}

/* ── Desktop: Buttons ── */
.sscal-desktop-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sscal-view-btn {
  padding: 10px 20px;
  font-size: 1em;
  font-family: inherit;
  cursor: pointer;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: white;
  color: #333;
  transition: all 0.3s ease;
  min-width: 180px;
}

.sscal-view-btn:hover {
  background: #f0f0f0;
  border-color: #7ebec5;
}

.sscal-view-btn:focus-visible {
  outline: 3px solid #7ebec5;
  outline-offset: 2px;
}

.sscal-view-btn.active {
  background: #7ebec5 !important;
  color: white !important;
  border-color: #7ebec5 !important;
}

/* ── Mobile: Dropdown ── */
.sscal-mobile-dropdown {
  display: none;
}

@media (max-width: 767px) {
  .sscal-desktop-buttons {
    display: none;
  }

  .sscal-mobile-dropdown {
    display: block;
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    font-size: 1em;
    font-family: inherit;
    border: 2px solid #ddd;
    border-radius: 20px;
    background: white;
    color: #333;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    margin-inline: auto;
  }

  .sscal-mobile-dropdown:focus {
    outline: none;
    border-color: #7ebec5;
    box-shadow: 0 0 0 3px rgba(126, 190, 197, 0.1);
  }
}

/* ─── Zustände: Loading / Leer / Fehler ─────────────────────────────────────── */
.sscal-loading,
.sscal-empty,
.sscal-error {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.sscal-error { color: #8B0000; }

/* Spinner */
@keyframes sscal-spin {
  to { transform: rotate(360deg); }
}

.sscal-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e0e0e0;
  border-top-color: #7ebec5;
  border-radius: 50%;
  animation: sscal-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ─── „Mehr Termine zeigen" + „Einklappen" (1.1.0, F-W7) ────────────────────── */
.sscal-more-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.sscal-collapse-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.sscal-more-btn,
.sscal-collapse-btn {
  padding: 6px 14px;
  font-size: 0.93em;
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid #B4B2A9;
  background: #ffffff;
  color: #2C2C2A;
}

.sscal-more-btn:hover,
.sscal-collapse-btn:hover {
  background: #f0f0f0;
  border-color: #7ebec5;
}

.sscal-more-btn:focus-visible,
.sscal-collapse-btn:focus-visible {
  background: #f0f0f0;
  border-color: #7ebec5;
  outline: 2px solid #3d8b92; /* 1.1.0 (R-7): 3,96:1 auf Weiß, WCAG 1.4.11 verlangt 3:1 (#7ebec5 = 2,09:1) */
  outline-offset: 2px;
}

/* Pfeil nach oben vor „Einklappen" (reines CSS, keine Grafik). */
.sscal-collapse-btn::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.55em;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(0.12em) rotate(45deg);
}

/* Handy: Knöpfe unten auf volle Breite (Entwurf 19.10.). */
@media (max-width: 767px) {
  .sscal-more-wrap > button {
    flex: 1 1 auto;
  }
}

/* ─── controls="dropdown": Dropdown auf allen Bildschirmgrößen ───────────────── */
.sscal-controls--dropdown .sscal-desktop-buttons {
  display: none !important;
}

.sscal-controls--dropdown .sscal-mobile-dropdown {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 12px 16px;
  font-size: 1em;
  font-family: inherit;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: white;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  margin-inline: auto;
}

.sscal-controls--dropdown .sscal-mobile-dropdown:focus {
  outline: none;
  border-color: #7ebec5;
  box-shadow: 0 0 0 3px rgba(126, 190, 197, 0.1);
}

/* ─── Slot-Cards (WPCS-3, v1.5.0) ────────────────────────────────────────────
 * Bis v1.4.x kamen Card-Farben und Randbreiten als Inline-Styles aus dem JS
 * (element.style.*). Seit v1.5.0 sind sie hier als CSS-Klassen definiert:
 *   - CSP-fähig: keine style-Attribute mehr → strikte style-src 'self' möglich
 *   - performanter: eine className-Zuweisung statt ~11 einzelner .style.*-Writes
 * Das JS setzt nur noch: class="sscal-slot sscal-slot--<status>".
 * Seit Termine Salespage 1.1.0 (19.10.2026): neue Kachel, Farben und Randbreite siehe unten –
 * die Bucket-Klassen sscal-slot--<status> bleiben (kein eigenes CSS auf www nutzt sscal-Klassen,
 * gemessen 19.10.).
 * ──────────────────────────────────────────────────────────────────────────── */

/* Card-Basis – 1.1.0 (Betreiber 19.10.: Entwurf „Datumsblock, dünner Rand"): helle Kachel mit
 * Haarlinie, dünner farbiger Rand links (3 px), ruhigere Farben. Gilt für Termine, Platzhalter
 * (bucket unknown) und Hinweise; die Termin-Anordnung steht unter .sscal-slot--termin. */
.sscal-slot {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #ffffff;
  border: 1px solid #E3E1DA;
  border-left: 3px solid #999;   /* Default = unknown; Status-Modifier überschreiben die Farbe */
  border-radius: 0 8px 8px 0;
  line-height: 1.4;
}

/* Status-Modifier: Randfarbe (Buckets unverändert aus ShipCore). */
.sscal-slot--unknown   { border-left-color: #999;    }
.sscal-slot--full      { border-left-color: #E24B4A; }
.sscal-slot--critical  { border-left-color: #BA7517; }
.sscal-slot--limited   { border-left-color: #639922; }
.sscal-slot--available { border-left-color: #639922; }

/* Klickbare Card (verlinkt="true") */
.sscal-slot--clickable { cursor: pointer; }

/* Titel bzw. Platzhalter-/Hinweistext */
.sscal-title {
  font-weight: 500;
  color: #2C2C2A;
}

/* ─── Terminkachel: Datumsblock | Titel + Uhrzeit · Ort | Status ─────────────── */
.sscal-slot--termin {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sscal-datum {
  flex: 0 0 auto;
  box-sizing: border-box;
  /* 1.1.1 (Betreiber 19.10., Variante A): Innenabstand rundherum 0,5em (≈ 6 px). Kasten 5,6em, damit die breiteste
   * Zeile „Monat Jahr“ innen Platz hat – in 1.1.0 (4,6em, 4/2 px) ragte sie bei Mär/Mai/Aug/Sep/Nov/Dez in den
   * Innenabstand (gemessen 53,1 px Text bei 51 px Innenbreite). */
  width: 5.6em;
  padding: 0.5em;
  font-size: 0.86em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  color: #5F5E5A;
  background: #F1EFE8;
  border-radius: 8px;
}

.sscal-datum > span { display: block; }

.sscal-datum-tag {
  font-size: 1.66em;
  font-weight: 500;
  color: #2C2C2A;
}

.sscal-inhalt {
  flex: 1 1 auto;
  min-width: 0;
}

.sscal-meta {
  font-size: 0.93em;
  color: #5F5E5A;
}

/* 1.1.1: Der Ort bricht als Einheit in die nächste Zeile um, statt mitten im Namen („Ottensheim a. d. | Donau“) –
 * wichtig am schmalen Handy, wo der breitere Datumsblock (5,6em) Platz kostet. max-width: längere Orte brechen
 * innerhalb der Einheit um, nichts ragt aus der Kachel. */
.sscal-ort { display: inline-block; max-width: 100%; }
.sscal-ort-icon { margin-right: 2px; }

/* Status: farbiger Punkt + Text (Handy/schmal: dritte Zeile unter Uhrzeit und Ort). */
.sscal-status-rechts {
  font-size: 0.93em;
  font-weight: 500;
}

.sscal-status-rechts::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: currentColor;
}

.sscal-slot--available .sscal-status-rechts,
.sscal-slot--limited   .sscal-status-rechts { color: #3B6D11; }
.sscal-slot--critical  .sscal-status-rechts { color: #854F0B; }
.sscal-slot--full      .sscal-status-rechts { color: #A32D2D; }

/* Breiter Kalender (ab 520 px): Status rechts neben Titel/Uhrzeit – für alle Kacheln einer Liste gleich.
 * Ältere Browser ohne Container-Abfragen zeigen die schmale Anordnung. */
.sscal-slots { container-type: inline-size; }

@container (min-width: 520px) {
  .sscal-inhalt {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .sscal-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .sscal-status-rechts {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Hinweistexte (#359): wie Platzhalter, kursiv abgesetzt. */
.sscal-hinweis .sscal-title {
  font-style: italic;
}

/* Nur für Screenreader (Link öffnet in neuem Fenster). */
.sscal-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}