/*
 * =================================================================
 * Grundlegende Bus- und Sitzplan-Stile
 * =================================================================
 */

/* Der äußere Rahmen des Busses */
.bus-outline {
    border: 3px solid #888; /* Dicker und dunkler wie im Prototyp */
    border-radius: 25px;
    padding: 25px 20px;
    background-color: #f0f0f0;
    display: inline-block;
}

/* Das Grid-Layout für den Sitzplan */
.bus-plan {
    display: grid;
    grid-template-columns: repeat(5, var(--seat-size, 40px));
    gap: 8px;
    justify-content: center;
}

/* Basis-Stil für alle Elemente im Grid (Sitze, Gänge, etc.) */
.seat, .grid-item {
    width: var(--seat-size, 40px);
    height: var(--seat-size, 40px);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: bold;
    color: #333;
    position: relative;
    box-sizing: border-box;
    user-select: none;
}

/* Grid-Spanning für größere Elemente (z.B. Treppe, WC, Gepäckraum) */
.span-2 {
    grid-column: span 2;
    width: calc(2 * var(--seat-size, 40px) + 8px); /* 8px = gap-size */
}

.span-5 {
    grid-column: span 5;
    width: calc(5 * var(--seat-size, 40px) + 32px); /* 4 * 8px gaps */
}

/*
 * =================================================================
 * Sitz-Zustände (verfügbar, gebucht, ausgewählt)
 * =================================================================
 */

/* Verfügbare, klickbare Sitze */
.seat.available {
    background-color: #a5d6a7; /* Helles Grün */
    border: 1px solid #66bb6a;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}
.seat.available:hover {
    background-color: #81c784; /* Etwas dunkleres Grün */
    transform: scale(1.08);
}

/* Bereits gebuchte oder (terminbezogen) gesperrte, nicht klickbare Sitze */
.seat.booked, .seat.blocked {
    background-color: #ef9a9a; /* Helles Rot */
    border: 1px solid #e57373;
    cursor: not-allowed;
    color: #fff;
}

/* Vom Kunden aktuell ausgewählte Sitze */
.seat.selected {
    background-color: #007bff; /* Auswahlfarbe = Legendenfarbe (v2.18.4) */
    border: 2px solid #0056b3;
    color: white;
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.7);
}

/*
 * =================================================================
 * Spezielle Elemente (Fahrer, Gang, WC, etc.)
 * =================================================================
 */

/* Allgemeine Klasse für nicht-buchbare Elemente (Fahrer, RL, WC, Küche, Treppe, etc.) */
.special {
    cursor: default;
    background-color: #e0e0e0; /* Grau wie im Prototyp */
    border: 1px solid #ccc;
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    color: #616161;
}

/* Leerer Gang-Platz */
.aisle {
    background-color: transparent;
    border: none;
    color: #888;
    font-size: 12px;
    font-weight: normal;
}

/* Einstiegs-Bereich - weiß mit gestricheltem Rahmen */
.entry {
    background-color: #fff; /* Weiß wie im Prototyp */
    border: 2px dashed #999;
    font-size: 9px;
    color: #777;
    cursor: default;
}

/*
 * =================================================================
 * Frontend Buchungs-Zusammenfassung
 * =================================================================
 */
.sitzplan-buchung-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.sitzplan-container {
    flex: 2;
    min-width: 350px;
}
.booking-summary {
    flex: 1;
    min-width: 280px;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.booking-summary h2 {
    margin-top: 0;
    font-size: 22px;
}
#selected-seats-list {
    list-style-type: none;
    padding: 0;
    margin: 15px 0;
}
#selected-seats-list li {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}
#total-price {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
}
#book-button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    margin-top: 20px;
    transition: background-color 0.2s;
}
#book-button:hover:not(:disabled) {
    background-color: #218838;
}
#book-button:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

/*
 * =================================================================
 * Admin-Bereich & Detailansicht
 * =================================================================
 */

/* Layout für die Admin-Detailansicht (Zwei-Spalten-Layout) */
.admin-detail-flex-container {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf sehr kleinen Bildschirmen */
    gap: 30px; /* Mehr Abstand zwischen den Spalten */
    margin-top: 20px;
    margin-bottom: 20px;
}

.admin-detail-column-sitzplan {
    flex: 0 0 300px; /* Feste Breite für Sitzplan */
    min-width: 300px;
}

.admin-detail-column-passagiere {
    flex: 1; /* Nimmt den restlichen Platz */
    min-width: 500px;
    overflow-x: auto; /* Scrollbar wenn nötig */
}

/* Sorgen dafür, dass die Tabellen in der Passagierliste scrollbar werden, wenn sie zu lang sind */
.passagierliste-container {
    max-height: 600px; /* Beispielhöhe, kann angepasst werden */
    overflow-y: auto; /* Fügt eine Scrollbar hinzu, wenn der Inhalt höher ist */
    border: 1px solid #eee;
}

/* Stile für den Bearbeiten-Button */
.edit-button {
    background: #dc3545; /* Roter Hintergrund */
    color: white; /* Weißes Zahnrad */
    border: 1px solid #c82333;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 18px;
    line-height: 30px;
    padding: 0;
    text-align: center;
}
.edit-button:hover {
    background: #c82333;
    border-color: #bd2130;
}

/*
 * =================================================================
 * Stile für das Bearbeitungs-Popup (Modal)
 * =================================================================
 */
/* Alte Buchungs-Popup-Overlay-/Container-Regeln in v2.16.3 entfernt – das Popup nutzt
   jetzt das Hausmuster (sb-modal-overlay/sb-modal in css/sitzplan-admin.css). */
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

/*
 * =================================================================
 * Tab-Navigation für Doppeldecker
 * =================================================================
 */
.tab-container {
    display: flex;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}
.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: #f0f0f0;
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: bold;
}
.tab-button.active {
    background-color: #fff;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 2px solid #fff;
    position: relative;
    top: 2px;
}
.tab-content {
    display: none;
}
.tab-content.active {
    display: block;
}

/*
 * =================================================================
 * Stile für das Formular im Bearbeitungs-Popup
 * =================================================================
 */
#edit-booking-form fieldset {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    margin: 0;
}
#edit-booking-form legend {
    font-weight: bold;
    padding: 0 5px;
    margin-left: 10px;
}
#edit-booking-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 3px;
}
#edit-booking-form input[type="text"],
#edit-booking-form input[type="email"],
#edit-booking-form input[type="tel"],
#edit-booking-form input[type="number"],
#edit-booking-form input[type="date"],
#edit-booking-form select,
#edit-booking-form textarea {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
#edit-booking-form input[type="text"]:focus,
#edit-booking-form input[type="email"]:focus,
#edit-booking-form input[type="tel"]:focus,
#edit-booking-form input[type="number"]:focus,
#edit-booking-form input[type="date"]:focus,
#edit-booking-form select:focus,
#edit-booking-form textarea:focus {
    outline: none;
    border-color: #4fc3f7;
    box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
}

/* Passagier-Bearbeitungs-Zeilen */
.passenger-edit-row {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.passenger-edit-row:hover {
    background-color: #f4f4f4;
}
.delete-passenger-button {
    background: #fff;
    border: 2px solid #dc3545;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.delete-passenger-button:hover {
    background: #dc3545;
}
.delete-passenger-button:hover span {
    color: white !important;
}

/* Button-Styles */
.button {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.button-primary {
    background-color: #28a745;
    color: white;
    border: none;
}
.button-primary:hover {
    background-color: #218838;
}
#add-passenger-button {
    background-color: #007bff;
    color: white;
    border: 1px solid #0056b3;
}
#add-passenger-button:hover {
    background-color: #0056b3;
}

/*
 * =================================================================
 * Enfold-Neutralisierung Frontend-Sitzplan (v2.18.4)
 * Enfold vererbt word-wrap: break-word → Zellen-Labels brechen um.
 * =================================================================
 */
.elitebus-reise-frontend .bus-plan .grid-item,
.elitebus-reise-frontend .bus-plan .seat {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}