/* ============================================================
   1. GLOBAL LAYOUT & WRAPPER
   ============================================================ */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #fafafa;
    text-align: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.booking-wrapper {
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    max-width: 1400px;
    margin: 0 auto;
}

/* ============================================================
   2. HEADER & CONTROLS
   ============================================================ */
.controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 5px;
}

/* Wochen Navigation */
.week-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn {
    background: #fff;
    border: 1px solid #ddd;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: 0.2s;
}
.nav-btn:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

.week-label {
    font-size: 1.1rem; /* Aus oberem Block übernommen, da unten oft undefiniert */
    font-weight: bold;
    min-width: 90px;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    color: #333;
}

/* Geräte Schalter & Selects */
.device-switch {
    display: flex;
    background: #f1f3f5;
    border-radius: 8px;
    padding: 4px;
}

.switch-btn {
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}
.switch-btn.active {
    background: white;
    color: #2e5d8b;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.switch-btn:hover {
    text-decoration: none;
    color: #2e5d8b;
}

.room-select-wrapper { margin: 0 15px; flex-grow: 1; max-width: 400px; }
.form-select {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

/* ============================================================
   3. DASHBOARD TILES & FORMS (Unique Content)
   ============================================================ */
.dashboard-container {
    display: flex; justify-content: center;
    gap: 20px; margin: 30px auto; padding: 0 10px; max-width: 100%;
    flex-wrap: wrap;
}

.action-card {
    background: #fff; border-radius: 15px; padding: 40px 30px;
    width: 320px; text-align: center; text-decoration: none; color: #333;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
}
.action-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(46, 93, 139, 0.15); border-color: #2e5d8b;
    text-decoration: none; color: #333;
}
.action-card .icon-wrapper { margin-bottom: 20px; }
.action-card .material-icons { font-size: 64px; color: #2e5d8b; transition: transform 0.3s; }
.action-card:hover .material-icons { transform: scale(1.1); }
.action-card h3 { margin: 10px 0; font-weight: 600; font-size: 1.5rem; color: #222; }
.card-desc { color: #777; font-size: 1rem; line-height: 1.5; }

.admin-card .material-icons { color: #d63384; }
.admin-card:hover { border-color: #d63384; box-shadow: 0 15px 35px rgba(214, 51, 132, 0.15); }

/* Formulare */
.card-form { background: #fff; border-radius: 15px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #f0f0f0; }
.form-group { margin-bottom: 20px; }
.form-group label { font-weight: 600; color: #333; margin-bottom: 8px; display:block; }
.form-control { border-radius: 10px; border: 1px solid #ddd; padding: 12px; width: 100%; box-sizing: border-box; }
.form-control:focus { border-color: #2e5d8b; box-shadow: 0 0 0 3px rgba(46, 93, 139, 0.1); }

/* Filter Bar */
.filter-bar {
    background: white; padding: 15px 20px; border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); border: 1px solid #eee;
    margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.filter-search { flex: 1; min-width: 250px; }
.filter-search input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }
.filter-options { display: flex; gap: 15px; flex-wrap: wrap; }
.filter-check { display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; font-size: 0.9rem; color: #555; }
.filter-check input { width: 16px; height: 16px; accent-color: #2e5d8b; }

/* Ticket Type Switcher */
.ticket-type-selector { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.type-option { cursor: pointer; padding: 15px 30px; border: 2px solid #eee; border-radius: 50px; font-weight: 600; color: #777; background: #fff; transition: all 0.2s; display: flex; align-items: center; gap: 8px; }
.type-option:hover { background: #f9f9f9; transform: translateY(-2px); }
.type-option.active { border-color: #2e5d8b; background: #eef4fa; color: #2e5d8b; }

/* ============================================================
   4. SCHEDULE TABLE LAYOUT
   ============================================================ */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* WICHTIG: Macht alle Spalten gleich breit */
    margin-top: 5px;
    text-align: center;
}

.schedule-table thead th {
    background: #f8f9fa;
    color: #444;
    border-bottom: 2px solid #ddd;
    border-right: 1px solid #eee;
    padding: 5px;
}

.day-name { display: block; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.day-date { font-size: 1.1rem; font-weight: bold; }

.time-col {
    width: 80px;
    background: #fff;
    border-right: 2px solid #eee;
    color: #666;
    vertical-align: middle;
    padding: 3px;
    border-bottom: 2px solid #ddd;
}
.time-nr { font-weight: bold; font-size: 1.2rem; display: block; }
.time-range { font-size: 0.75rem; color: #999; }

/* ============================================================
   5. CELL LOGIC (Single & Split View)
   ============================================================ */
.schedule-table td.slot-cell {
    height: 1px; /* TRICK: Erlaubt Kindern, 100% der Zeilenhöhe zu nutzen */
    padding: 0;
    vertical-align: top;
    border: 2px solid #dee2e6;
    cursor: pointer;
    background-color: white;
    transition: all 0.1s;
}
.slot-cell:hover { background-color: #f1f8ff; }

/* Container für den Inhalt der Zelle */
.cell-inner {
    height: 100%;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* Einzeilige Ansicht (Laptops) */
.cell-single {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Geteilte Ansicht (iPads) */
.cell-split {
    padding: 0;
    justify-content: space-between;
}

.split-part {
    flex: 1; /* WICHTIG: Wächst mit! */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: 2px;
    min-height: 25px;
    background-clip: padding-box;
}
.split-part:last-child { border-bottom: none; }

/* Text Styles innerhalb der Zellen */
.free-count { font-weight: bold; font-size: 1.1em; color: #2e5d8b; }
.booking-list, .booking-info {
    font-size: 0.75rem; /* Konsolidiert auf 0.75rem */
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.1;
    margin-top: 2px;
    text-align: center;
    color: #666;
}
.free-label { color: #28a745; font-size: 0.8rem; font-weight: bold; opacity: 0.5; }

/* ============================================================
   6. CELL STATES (Booked, Mine, Selected)
   ============================================================ */
/* Heute Markierung */
th.is-today, td.is-today { background-color: #dcf4fc !important; }

/* Voll / Leer */
.full-cell, .is-booked {
    background-color: #ffebee !important;
    color: #c62828;
    cursor: not-allowed;
}
.split-part.is-empty {
    background-color: #ffebee;
    color: #c62828;
}
.full-cell .free-count, .split-part.is-empty .free-count { color: #dc3545; }

/* Eigene Buchungen (Grün) */
.is-mine {
    background-color: #d4edda !important;
    color: #155724 !important;
    font-weight: bold;
}
.split-part.is-mine {
    background-color: #d4edda !important;
}

/* Selektiert (Blau - überschreibt alles) */
.slot-cell.selected {
    background-color: #edce66 !important;
    color: white; !important;
}

.slot-cell.selected .split-part.is-empty {
    background-color: transparent !important;
    color: white !important;
}
/* Trennlinie auf Weiß/Hell ändern bei Auswahl */
.slot-cell.selected .split-part {
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   7. STICKY ACTION BAR & FOOTER
   ============================================================ */
.sticky-action-bar {
    position: sticky;
    background: white;
    bottom: 0;
    padding: 15px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 0 0 12px 12px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.sticky-action-bar.hidden { display: none; }

.action-bar-content {
    display: flex;
    gap: 20px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.slider-section { flex: 1; }

.pool-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    justify-content: center;
}
.pool-tab {
    padding: 8px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    background: #f8f9fa;
    transition: all 0.2s;
    text-align: center;
}
.pool-tab:hover { background: #e9ecef; }
.pool-tab.active {
    background: #4472a1;
    color: white;
    border-color: #4472a1;
    box-shadow: 0 2px 5px rgba(46, 93, 139, 0.15);
}
.tab-badge {
    background: #fff; padding: 2px 8px; border-radius: 10px;
    font-weight: bold; font-size: 0.9rem; margin-left: 5px; color: #333;
}
.pool-tab.active .tab-badge { background: #4472a1; color: white; }

.slider-row { display: flex; gap: 10px; align-items: center; }
input[type=range] { width: 100%; cursor: pointer; accent-color: #4472a1; }

.val-input { width: 50px; text-align: center; font-weight: bold; padding: 5px; border: 1px solid #ddd; border-radius: 4px;}

.btn-book {
    background: #4472a1;
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.3);
}
.btn-book:hover { background: #0d47a1; }
.btn-book:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }

a.btn-book, a.btn-book:visited, a.btn-book:hover, a.btn-book:active {
    color: white !important;
    text-decoration: none !important;
}

.btn-switch {
    background: #4472a1;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 10px rgba(21, 101, 192, 0.3);
    width: auto; padding: 10px 20px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.btn-switch:hover { background: #4472a1; }
.btn-switch:disabled { background: #ccc; cursor: not-allowed; box-shadow: none; }

a.btn-switch, a.btn-switch:visited, a.btn-switch:hover, a.btn-switch:active {
    color: white !important;
    text-decoration: none !important;
}

/* ============================================================
   8. MODALS
   ============================================================ */
.custom-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999;
    display: none; justify-content: center; align-items: center;
}
.custom-modal-box {
    background: #fff; padding: 25px; border-radius: 10px;
    max-width: 90%;
    text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    max-height: 90vh; overflow-y: auto;
}
.modal-buttons { margin-top: 20px; display: flex; justify-content: center; gap: 5px; }

.modern-headline {
    text-align: center;
    color: #333;
}
.modern-headline h2 {
    font-weight: 300;
    font-size: 2rem;
    margin: 0;
    color: #2e5d8b;
    padding: 5px;
}
.modern-headline .user-name { font-weight: 700; color: #2e5d8b; }
.modern-headline .sub-text {
    font-size: 1rem; color: #888; display: block; margin-top: 5px;
}

/* ============================================================
   9. MOBILE OPTIMIZATIONS (Max-Width 768px)
   ============================================================ */
/* Mobile Tabs (Standard versteckt) */
.mobile-day-nav, .mobile-day-tabs { display: none; }

@media (max-width: 768px) {

    .modern-headline h2 {
        font-size: 1.6rem;
    }

    /* Layout */
    .controls-header {gap: 10px; padding: 0px}
    .room-select-wrapper { width: 100%; margin: 0; }

    /* Header Controls Kompakt */
    .switch-btn { padding: 4px 12px; font-size: 0.8rem; height: 30px; }
    .week-label { font-size: 0.9rem; }
    .nav-btn { width: 30px; height: 30px; }

    /* Tabelle */
    .day-col { display: none; } /* Alle Tage ausblenden */
    .day-col.active-day { display: table-cell; } /* Nur aktiver Tag an */
    .time-col { width: 50px; font-size: 0.8rem; padding: 3px; }
    .schedule-table th, .schedule-table td { font-size: 0.9rem; }

    /* Mobile Tabs Navigation */
    .mobile-day-tabs {
        display: flex; justify-content: space-between;
        gap: 5px;
        background: #fff; padding: 5px; border-radius: 8px;
    }
    .day-tab {
        padding: 10px; border: 1px solid #ddd; flex: 1;
        text-align: center; cursor: pointer; border-radius: 5px;
    }
    .day-tab.active { background: #4472a1; color: white; border-color: #4472a1; }
    .day-tab .tab-name { display: block; font-weight: bold; font-size: 1.1em; }
    .day-tab .tab-date { display: block; font-size: 0.75em; opacity: 0.8; }

    /* Sticky Action Bar Mobile */
    .sticky-action-bar { padding: 8px 10px; bottom: 0; margin: 0 -10px -10px -10px; border-radius: 0; }
    .action-bar-content { flex-direction: column; gap: 10px; }
    .slider-section { width: 100%; padding: 0; margin: 0; border: none; }
    .pool-tabs { justify-content: center; gap: 30px; margin-bottom: 5px; align-items: center}
    .pool-tab { padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; align-items: center}
    .val-input { width: 50px; height: 32px; text-align: center; }

    .btn-book {
        width: 100%;
        padding: 0 20px;
        height: 36px;
        display: flex; justify-content: center; align-items: center;
    }

    /* Modal */
    .custom-modal-box { width: 95% !important; padding: 15px !important; }
}

/* =========================================
   CUSTOM SLIDER STYLING
   ========================================= */

/* 1. Basis-Reset für den Slider */
input[type=range] {
    -webkit-appearance: none; /* Entfernt Standard-Design */
    width: 100%;
    background: transparent;  /* Hintergrund durchsichtig machen */
    margin: 10px 0;           /* Etwas Abstand */
}

input[type=range]:focus {
    outline: none;
}

/* -----------------------------------------
   CHROME / SAFARI / EDGE
   ----------------------------------------- */

/* Der "Weg" (Track) */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;              /* Höhe des Balkens */
    cursor: pointer;
    background: #e0e0e0;      /* Farbe des Balkens (Grau) */
    border-radius: 3px;
}

/* Der "Knopf" (Thumb) */
input[type=range]::-webkit-slider-thumb {
    height: 24px;             /* <--- HIER GRÖSSE ÄNDERN */
    width: 24px;              /* <--- HIER GRÖSSE ÄNDERN */
    border-radius: 50%;       /* Macht ihn rund */
    background: #4472a1;      /* Deine Blaue Farbe */
    cursor: pointer;
    -webkit-appearance: none;

    /* Vertikal zentrieren: (Track-Höhe - Thumb-Höhe) / 2 */
    /* Rechnung: (6px - 24px) / 2 = -9px */
    margin-top: -9px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* Kleiner Schatten für 3D-Effekt */
    transition: transform 0.1s;
}

/* Effekt beim Hover/Klicken */
input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);    /* Wird beim Drüberfahren etwas größer */
    background: #0d47a1;      /* Dunkleres Blau */
}

/* -----------------------------------------
   FIREFOX
   ----------------------------------------- */

/* Der "Weg" (Track) */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #e0e0e0;
    border-radius: 3px;
}

/* Der "Knopf" (Thumb) */
input[type=range]::-moz-range-thumb {
    height: 24px;             /* <--- HIER GRÖSSE ÄNDERN */
    width: 24px;              /* <--- HIER GRÖSSE ÄNDERN */
    border: none;
    border-radius: 50%;
    background: #4472a1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

input[type=range]::-moz-range-thumb:hover {
    transform: scale(1.1);
    background: #0d47a1;
}

/* =========================================
   1. KLASSE ZUM AUSGRAUEN (DISABLED)
   ========================================= */
/* Diese Klasse wird dem Container (div.slider-row) gegeben */
.slider-row.disabled-slider {
    opacity: 0.3;           /* Macht alles blass */
    pointer-events: none;   /* Verhindert Klicks */
    filter: grayscale(100%); /* Macht es grau */
    cursor: not-allowed;
}

/* =========================================
   2. SLIDER KNOPF AUF HANDY VERGRÖSSERN
   ========================================= */
@media (max-width: 768px) {
    /* Chrome / Safari / Edge */
    input[type=range]::-webkit-slider-thumb {
        height: 34px !important;    /* Deutlich größer für Finger */
        width: 34px !important;
        /* WICHTIG: (Track-Höhe 6px - Thumb-Höhe 34px) / 2 = -14px */
        margin-top: -14px !important;
    }

    /* Firefox */
    input[type=range]::-moz-range-thumb {
        height: 34px !important;
        width: 34px !important;
    }
}

@media (max-width: 768px) {
    /* Container Fix */
    .container, .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }

    /* Dashboard & Kacheln */
    .action-card { width: 100%; margin-bottom: 15px; padding: 30px 20px; }
    .dashboard-container { margin-top: 20px; gap: 15px; flex-direction: column;  flex-wrap: wrap;}

    /* Tabelle fixieren */
    .modern-table, .admin-table { table-layout: fixed; width: 100%; }

    /* Zellen & Text */
    .modern-table th, .modern-table td,
    .admin-table th, .admin-table td {
        padding: 12px 6px;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sichtbarkeit Spalten */
    .mobile-hide { display: none !important; }
    .mobile-only-info { display: block; margin-bottom: 15px; color: #555; font-size: 0.9rem; }
    .mobile-only-info p { margin: 3px 0; }

    /* Spaltenbreiten */
    .col-status { width: 33%; }
    .col-raum   { width: 22%; font-weight: bold; }
    .col-fehler { width: 45%; color: #666; }

    /* Badges */
    .status-badge { padding: 4px 6px; min-width: auto; width: 100%; font-size: 0.65rem; }

    /* Typografie & Bilder */
    .modern-headline h2 { font-size: 1.6rem; }
    .gallery-link img { width: 100%; height: auto; max-height: none; }

    /* Formulare Mobil */
    #filterForm .text-right { text-align: center !important; display: flex; gap: 10px; margin-top: 10px; }
    #filterForm .btn { flex: 1; margin: 0 !important; }

    /* Mobile Action Bar */
    .mobile-action-bar { display: flex; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
    .mobile-action-bar .btn { flex: 1; justify-content: center; }
    .mobile-action-bar form { flex: 1; display: flex; }
    .mobile-action-bar form button { width: 100%; }
}