/* ── Bootsbuchung – Frontend ── */

.bb-hinweis { padding: 12px; background: #f6f7f7; border: 1px solid #ddd; border-radius: 4px; }

.bb-meldung { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
.bb-meldung.bb-erfolg { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }
.bb-meldung.bb-fehler { background: #fdecea; border: 1px solid #f5b7b1; color: #b71c1c; }

/* Kompakte, zentrierte Navigationsleiste: ◀  Heute  [📅 Datum]  ▶ */
.bb-tag-navigation {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0;
}
.bb-nav-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; }
.bb-tag-navigation .disabled { opacity: 0.4; pointer-events: none; }

/* Astras .ast-outline-button-Optik (Rahmen, kein Unterstrich) scheint nur für
   <button>-Elemente zu gelten – für <a>/<span> im Plugin explizit nachbauen. */
a.ast-outline-button, span.ast-outline-button {
    text-decoration: none;
    border: 2px solid #1F4E79;
    border-radius: 4px;
    color: #1F4E79;
    background: transparent;
}
a.ast-outline-button:hover, span.bb-datum-feld:hover { background: #1F4E79; color: #fff; }
span.ast-outline-button.disabled { border-color: #ccc; color: #ccc; }

/* Datums-Button: sichtbares Label (Wochentag + Datum), native Auswahl per Klick */
.bb-datum-feld { position: relative; cursor: pointer; }
.bb-datum-feld .bb-datum-label { white-space: nowrap; font-weight: bold; }
.bb-datum-feld input[type="date"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; border: none; margin: 0; padding: 0;
}

.bb-tabelle-wrapper { overflow-x: auto; margin-bottom: 24px; }

/* Kalender-Grid: gleich breite Boot-Spalten, bewusst kompakt (mehr Boote = seitliches Scrollen).
   Volle Breite wie Tag-Navigation und die Buchungen-Tabelle darunter – der Button
   bleibt trotzdem kompakt (kein width:100%), damit er nicht in die Breite gezogen wird. */
.bb-tabelle { table-layout: fixed; width: 100%; min-width: 400px; margin-bottom: 0; }

/* Alle sichtbaren Rahmenlinien kommen ausschliesslich von den Zellen (das Theme erzwingt per
   "table th, table td { border: 1px solid #D1D5DB !important }" ohnehin ein einheitliches
   Zellgitter). Zwei Dinge sind dafür nötig:

   1. border-collapse: collapse - im Theme-Standard "separate" zeichnet jede Zelle ihren
      eigenen Rahmen, innen stossen dadurch zwei 1px-Linien aneinander (wirkt 2px), am
      Aussenrand steht nur eine (wirkt dünner). Mit "collapse" fallen benachbarte Rahmen zu
      genau einer 1px-Linie zusammen - überall gleich dick.
   2. border: none auf der Tabelle selbst - Astra setzt via "table, td, th" auch dem
      <table>-Element einen eigenen Rahmen. Der wird einmal komplett aussen herum gezeichnet;
      in der Mehrtages-Ansicht läuft er dabei quer über die Lücken-Spalten hinweg (daher
      stammten dort die kleinen Querlinien oben/unten in den Lücken). Der Aussenrand bleibt
      trotzdem sichtbar, weil ihn die Rahmen der Randzellen bilden. Gilt für beide Ansichten,
      nicht nur die Mehrtages-Ansicht - das Theme setzt "separate" global. */
.bb-tabelle { border-collapse: collapse !important; border: none !important; }

.bb-tabelle th, .bb-tabelle td { text-align: center; vertical-align: middle; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; }
.bb-tabelle td:first-child, .bb-tabelle th:first-child { text-align: left; width: 75px; }
.bb-tabelle .ast-outline-button { padding: 4px 8px; font-size: 0.9em; line-height: 1.3; width: 100%; box-sizing: border-box; }

/* Mehrtages-Ansicht (Shortcode-Attribut "tage", 1-5, z.B. [bootsbuchung tage="3"]): mehr
   Spalten, daher breiter - Mindestbreite skaliert mit der tatsächlichen Anzahl Tage/Boote
   (--bb-tage/--bb-boote werden inline auf der Tabelle gesetzt). Echte Lücken-Spalten trennen
   die Uhrzeit-Spalte vom ersten Tag und die Tagesgruppen optisch. */
.bb-tabelle-mehrtage {
    /* Platzbedarf für alle konfigurierten Tage. Dient zugleich als Obergrenze für die
       @container-Regeln (siehe bb_mehrtage_container_css() in includes/formular.php), damit
       eine Tabelle mit z.B. nur 2 konfigurierten Tagen nicht auf die Breite von 4 gezogen wird. */
    --bb-basis: calc(60px + var(--bb-tage, 1) * (8px + var(--bb-boote, 1) * 70px));
    min-width: var(--bb-basis);
}

/* Zeit-Spalte in der Mehrtages-Ansicht knapper als die 75px der 1-Tages-Ansicht: die Kopfzeile
   "Zeit" braucht gemessen 35px, die Zeitangaben (06:00) 45px inkl. Padding - muss zum
   $zeit_spalte-Wert in bb_mehrtage_container_css() (includes/formular.php) passen. */
.bb-tabelle-mehrtage td:first-child, .bb-tabelle-mehrtage th:first-child { width: 48px; }

/* Bezugsgrösse für die @container-Regeln ist die tatsächlich verfügbare Breite des Wrappers,
   nicht der Viewport - die beiden unterscheiden sich je nach Theme/Seitenrändern deutlich
   (gemessen: 738px Inhalt bei 778px Viewport). Nur für die Mehrtages-Ansicht aktiviert, damit
   die 1-Tages-Ansicht unverändert ohne Containment rendert. */
.bb-tabelle-wrapper:has(.bb-tabelle-mehrtage) { container-type: inline-size; }

/* !important nötig: WordPress' globale Block-Styles setzen für "table tbody td" eine eigene
   Hintergrundfarbe, die trotz geringerer Selektor-Spezifität vor unseren Regeln zum Zug kommt
   (vermutlich CSS-Layer-bedingt) - ohne !important würde die Lücke wieder eingefärbt. Die
   linke/rechte Rahmenlinie bleibt bewusst bestehen (trennt die Tagesblöcke sichtbar, wie im
   alten System) - oben/unten soll dagegen keine Querlinie erscheinen. Dafür "hidden" statt
   "none": bei border-collapse:collapse gewinnt bei einem Rahmenkonflikt die breitere Linie,
   und "none" zählt als Breite 0 - es würde also gegen jede Nachbarlinie verlieren. "hidden"
   unterdrückt die Linie an dieser Kante dagegen kompromisslos. */
.bb-tabelle-mehrtage .bb-tag-luecke {
    /* Gesamtbreite inkl. der beiden 1px-Rahmenlinien links/rechts - sichtbarer Zwischenraum
       dazwischen ist also 6px, angeglichen an den Abstand der Navigations-Buttons (gap: 6px
       in .bb-tag-navigation, gemessen). */
    width: 8px;
    padding: 0 !important;
    background: transparent !important;
    border-top: hidden !important;
    border-bottom: hidden !important;
}

/* Zebra-Streifen (aus .striped) für die Mehrtages-Ansicht abschalten: Status-Zellen tragen
   ohnehin ihre eigene Hintergrundfarbe (.bb-slot-*), und nur so zeigen die Lücken-Spalten
   wirklich die Seiten-Hintergrundfarbe statt der Streifenfarbe durchscheinen zu lassen. */
.bb-tabelle-mehrtage thead tr, .bb-tabelle-mehrtage tbody tr { background: transparent !important; }

/* Das schrittweise Ausblenden der hintersten Tage passiert nicht hier, sondern über
   @container-Regeln, die bb_mehrtage_container_css() (includes/formular.php) aus der
   tatsächlichen Bootsanzahl berechnet - feste Schwellwerte an dieser Stelle könnten weder die
   echte Containerbreite noch unterschiedliche Bootsanzahlen berücksichtigen.
   Browser ohne @container-Unterstützung ignorieren diese Regeln und zeigen alle Tage mit
   seitlichem Scrollen - also das Verhalten von vorher, nur eben nicht optimiert. */

/* "Ihre anstehenden Buchungen": eigene, natürliche Spaltenbreiten statt Grid-Fixierung */
.bb-buchungen-tabelle { width: 100%; margin-bottom: 0; }
.bb-buchungen-tabelle th, .bb-buchungen-tabelle td { text-align: left; vertical-align: middle; padding: 6px 8px; }
.bb-buchungen-tabelle .ast-outline-button { padding: 4px 8px; font-size: 0.9em; line-height: 1.3; width: 100%; box-sizing: border-box; text-align: center; }

@media (max-width: 600px) {
    /* Datums-Button auf eigene, volle Zeile unter den Pfeil-/Heute-Buttons */
    .bb-datum-feld { order: 5; flex-basis: 100%; }

    /* Keine vorgegebenen Spaltenbreiten mehr auf schmalen Screens – der Browser
       verteilt den Platz selbst nach tatsächlichem Inhaltsbedarf je Spalte.
       Passt nicht alles, scrollt der Wrapper (.bb-tabelle-wrapper) seitlich.
       Gilt nur für die 1-Tages-Ansicht: bei mehreren Tagen (.bb-tabelle-mehrtage) würden
       "auto"-Spaltenbreiten auf schmalen Screens unbrauchbar eng zusammenschrumpfen - dort
       bleibt table-layout:fixed mit fester Mindestbreite, der Wrapper scrollt seitlich. */
    .bb-tabelle:not(.bb-tabelle-mehrtage) { min-width: 0; table-layout: auto; width: 100%; }
    .bb-tabelle th, .bb-tabelle td { padding: 3px 6px; font-size: 0.8em; width: auto; }
    .bb-tabelle:not(.bb-tabelle-mehrtage) td:first-child, .bb-tabelle:not(.bb-tabelle-mehrtage) th:first-child { width: auto; }
    .bb-tabelle .ast-outline-button { padding: 2px 8px; font-size: 0.8em; }
}

.bb-slot-leer { color: #bbb; }
.bb-slot-vorbei { color: #999; }
.bb-slot-belegt { color: #b71c1c; }
.bb-slot-zu_kurzfristig, .bb-slot-zu_weit { color: #999; }
.bb-slot-wartung { color: #999; font-style: italic; }
.bb-slot-eigene { color: #2e7d32; font-weight: bold; }
.bb-slot-verfuegbar { background: #e8f5e9; }

/* Klar von belegt (fremde Buchung, rot) und wartung (Boot außer Betrieb, grau/kursiv)
   unterscheidbar - Sperrzeiten sind ein befristetes drittes Konzept (siehe plan/sperrzeiten.md).
   Gilt ausnahmslos für alle, auch Vorstand/Admin - kein abweichender Buchen-Button. */
.bb-slot-gesperrt { background: #fff3e0; color: #e65100; }
.bb-slot-gesperrt-label { font-size: 0.9em; }
.bb-slot-gesperrt-label small { font-weight: normal; opacity: 0.85; }

.bb-belegt-info {
    display: flex;
    align-items: baseline;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.bb-belegt-info:hover, .bb-belegt-info:focus { text-decoration: underline; }
.bb-belegt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.bb-belegt-anzahl { flex: 0 0 auto; white-space: nowrap; margin-left: 2px; }
#bb-info-dialog-personenzahl, #bb-info-dialog-begleiter { margin: 8px 0 0; }
.bb-info-dialog-kontakt { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #e0e0e0; }
.bb-info-dialog-kontakt a { display: inline-block; text-decoration: none; }
.bb-info-dialog-kontakt a:hover { text-decoration: underline; }

.bb-dialog {
    border: none;
    border-radius: 8px;
    padding: 24px 28px;
    /* Feste Breite statt width:100%: ein modaler <dialog> liegt im Top-Layer, dort
       bezieht sich 100% auf den Viewport - fällt max-width aus, geht der Dialog sonst
       über die volle Bildschirmbreite. Ohne width würde der Browser fit-content nutzen
       und den Dialog am längsten Hinweistext (einzeilig gemessen) aufziehen. */
    width: 360px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.bb-dialog::backdrop { background: rgba(0,0,0,0.5); }
.bb-dialog h3 { margin: 0 0 4px; }
.bb-dialog #bb-dialog-hinweis { margin: 12px 0 0; }
.bb-dialog-feld { display: flex; align-items: center; gap: 10px; margin: 16px 0; }
.bb-dialog-feld[hidden] { display: none; }
.bb-dialog-feld select { flex: 1; }
.bb-dialog-feld-block { display: block; }
.bb-dialog-feld-block[hidden] { display: none; }
.bb-dialog-feld-block label { display: block; margin-bottom: 6px; }
.bb-dialog-feld-block textarea { width: 100%; box-sizing: border-box; font-family: inherit; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.bb-dialog-aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.bb-meine-buchungen-titel { margin-top: 32px; }