/*
============================================================
Datei:
assets/css/index_zimmer.css

Projekt:
Kalenderbuchung / PC Doctor / Thaimassage

Beschreibung:
Gestaltet die komplette Zimmerübersicht auf der Startseite.

Aufgabe:
------------------------------------------------------------
- Zeigt alle Zimmer als Zeitstrahl
- Zeigt freie und belegte Bereiche
- Zeigt Termine als farbige Balken
- Zeigt aktuelle Uhrzeit als rote Linie
- Unterstützt dynamische Öffnungszeiten
- Nutzt immer die verfügbare Breite der Box

Wichtig:
------------------------------------------------------------
Die Anzahl der Stunden wird dynamisch aus den
Systemeinstellungen berechnet.

PHP übergibt:

--timeline-hours
--timeline-labels

Beispiel:

15:00 - 23:00
= 8 Stunden
= 9 Uhrzeitbeschriftungen

11:00 - 22:00
= 11 Stunden
= 12 Uhrzeitbeschriftungen
============================================================
*/

/*
|--------------------------------------------------------------------------
| Gesamte Zimmerübersicht
|--------------------------------------------------------------------------
*/
.zimmer-container {
    width: calc(100% - 10px);

    margin: 25px 5px 0 5px;

    padding: 20px;

    background: #f7eadc;

    border: 1px solid #d6a875;
    border-radius: 8px;

    box-sizing: border-box;

    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Überschrift
|--------------------------------------------------------------------------
*/
.zimmer-container h2 {
    margin-top: 0;
    margin-bottom: 18px;

    color: #7a3e00;
}

/*
|--------------------------------------------------------------------------
| Timeline-Hauptbereich
|--------------------------------------------------------------------------
*/
.zimmer-timeline-box {
    width: 100%;

    background: #f7eadc;

    border-radius: 6px;

    box-sizing: border-box;

    overflow-x: hidden;
    overflow-y: hidden;

    padding-bottom: 4px;
}

/*
|--------------------------------------------------------------------------
| Kopfzeile
|--------------------------------------------------------------------------
| Linke Spalte:
| - Platz für Zimmernamen
|
| Rechte Spalte:
| - Zeitstrahl nutzt den restlichen verfügbaren Platz
|--------------------------------------------------------------------------
*/
.timeline-header {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    align-items: center;

    margin-bottom: 8px;
}

/*
|--------------------------------------------------------------------------
| Leerbereich links
|--------------------------------------------------------------------------
*/
.timeline-label {
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| Uhrzeiten exakt auf Rasterlinien positionieren
|--------------------------------------------------------------------------
*/

.timeline-hours {
    position: relative;

    height: 24px;

    font-size: 12px;
    font-weight: bold;

    color: #7a3e00;
}

.timeline-hours span {
    position: absolute;

    top: 0;

    transform: translateX(-50%);

    white-space: nowrap;
}

.timeline-hours span.time-label-start {
    transform: translateX(0);
}

.timeline-hours span.time-label-end {
    transform: translateX(-100%);
}

/*
|--------------------------------------------------------------------------
| Zimmerzeile
|--------------------------------------------------------------------------
*/
.zimmer-row {
    display: grid;

    grid-template-columns:
        150px
        minmax(0, 1fr);

    align-items: center;

    margin-bottom: 10px;
}

/*
|--------------------------------------------------------------------------
| Zimmername
|--------------------------------------------------------------------------
*/
.zimmer-label {
    font-weight: bold;
    color: #3b2a1a;

    white-space: nowrap;
    padding-right: 8px;
}

/*
|--------------------------------------------------------------------------
| Zeitlinie
|--------------------------------------------------------------------------
*/
.timeline-line {
    position: relative;

    height: 46px;

    background: #fffdf8;

    border: 1px solid #d8c0a5;
    border-radius: 6px;

    overflow: hidden;
}

/*
|--------------------------------------------------------------------------
| Stundenraster
|--------------------------------------------------------------------------
| Die Anzahl der Rasterspalten kommt aus PHP über:
| --timeline-hours
|--------------------------------------------------------------------------
*/
.timeline-grid {
    position: absolute;

    inset: 0;

    display: grid;

    grid-template-columns:
        repeat(var(--timeline-hours, 12), 1fr);

    pointer-events: none;
}

.timeline-grid div {
    border-right: 1px solid #eee0cf;
}

.timeline-grid div:last-child {
    border-right: none;
}

/*
|--------------------------------------------------------------------------
| Terminbalken
|--------------------------------------------------------------------------
*/
.termin-balken {
    position: absolute;
    top: 6px;
    height: 34px;
    color: #ffffff;
    border-radius: 6px;
    padding: 2px 6px;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: bold;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    text-align: center;
    line-height: 1.1;

    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    z-index: 10;
}

.termin-balken.is-erledigt {
    background: #777777 !important;
    border-color: rgba(255,255,255,0.28);
    opacity: 0.62;
    filter: grayscale(1);
}

.termin-name {
    font-size: 12px;
    font-weight: bold;
    line-height: 13px;
    white-space: nowrap;
}

.termin-time {
    font-size: 10px;
    line-height: 11px;
    white-space: nowrap;
    margin-top: 1px;
}

/*
|--------------------------------------------------------------------------
| Aktuelle Uhrzeit
|--------------------------------------------------------------------------
*/
.now-line {
    position: absolute;

    top: 0;
    bottom: 0;

    width: var(--now-line-width, 2px);

    background: red;

    opacity: 0.85;

    z-index: 20;
}

/*
|--------------------------------------------------------------------------
| Sichtfenster um die aktuelle Uhrzeit
|--------------------------------------------------------------------------
| 10 Minuten vor und 10 Minuten nach der roten Linie.
|--------------------------------------------------------------------------
*/
.now-window {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(90, 90, 90, 0.24);
    pointer-events: none;
    z-index: 9;
}

/*
|--------------------------------------------------------------------------
| Globale Pause
|--------------------------------------------------------------------------
| Grauer Balken für Mittagspause
|--------------------------------------------------------------------------
*/

.pause-balken {
    position: absolute;

    top: 0;
    bottom: 0;

    background:
        repeating-linear-gradient(
            45deg,
            rgba(120,120,120,0.18),
            rgba(120,120,120,0.18) 10px,
            rgba(180,180,180,0.18) 10px,
            rgba(180,180,180,0.18) 20px
        );

    border-left: 2px solid #888;
    border-right: 2px solid #888;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #555;
    font-size: 11px;
    font-weight: bold;
}

/*
|--------------------------------------------------------------------------
| Hover-Popup für Termine
|--------------------------------------------------------------------------
*/
.termin-hover-preview .tooltip-title {
    color: #c98a00;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.termin-hover-preview div {
    margin-bottom: 5px;
    font-size: 14px;
}

.termin-hover-preview .tooltip-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #ead5be;
    font-size: 11px;
    color: #777;
}
/* ============================================================
   KOMPAKTE ZIMMERÜBERSICHT HAUPTSEITE
   ============================================================ */
.zimmer-container {
    margin: 7px 0 0 0;
    padding: 10px 14px;
    width: 100%;
}

.zimmer-container h2 {
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 1.2;
}

.timeline-header,
.zimmer-row {
    grid-template-columns: 118px minmax(0, 1fr);
}

.timeline-header {
    margin-bottom: 4px;
}

.timeline-hours {
    height: 18px;
    font-size: 11px;
}

.zimmer-row {
    margin-bottom: 6px;
}

.zimmer-label {
    font-size: 13px;
    padding-right: 6px;
}

.timeline-line {
    height: 34px;
    border-radius: 5px;
}

.termin-balken {
    top: 4px;
    height: 26px;
    padding: 1px 4px;
    border-radius: 5px;
}

.termin-name {
    font-size: 10px;
    line-height: 11px;
}

.termin-time {
    font-size: 9px;
    line-height: 10px;
}

.pause-balken {
    font-size: 9px;
}

.now-line {
    width: var(--now-line-width, 2px);
}

@media (max-width: 1200px) {
    .timeline-header,
    .zimmer-row {
        grid-template-columns: 105px minmax(0, 1fr);
    }

    .zimmer-label {
        font-size: 12px;
    }
}


/* Manuelle Reihenfolge-Korrektur in der Zimmerübersicht */
.zimmer-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.zimmer-title-row h2 {
    margin: 0;
}

.zimmer-rebalance-btn {
    border: 1px solid #c98f55;
    background: #fff8ef;
    color: #8b3f00;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.zimmer-rebalance-btn:hover {
    background: #f4e4d1;
}

.zimmer-rebalance-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}

@media (max-width: 768px) {
    .zimmer-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .zimmer-rebalance-btn {
        width: 100%;
    }
}

/* ============================================================
   Terminblock: Kundennummer + Name + Uhrzeit
   ============================================================ */
.termin-balken {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 3px 7px;
    gap: 5px;
}

.termin-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

.termin-nummer {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.92);
    background: rgba(0,0,0,0.10);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.28);
}

.termin-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.termin-name,
.termin-time {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.termin-name {
    font-size: 10.5px;
    line-height: 11px;
    font-weight: 800;
}

.termin-time {
    margin-top: 1px;
    font-size: 9.5px;
    line-height: 10px;
    font-weight: 700;
    opacity: 0.96;
}

.termin-balken.termin-wunsch::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 10px solid rgba(255,255,255,0.72);
    border-left: 10px solid transparent;
    pointer-events: none;
}

@media (max-width: 900px) {
    .termin-balken {
        padding: 2px 4px;
        gap: 3px;
    }

    .termin-nummer {
        width: 15px;
        height: 15px;
        font-size: 9px;
        border-width: 1.5px;
    }

    .termin-name {
        font-size: 9.5px;
    }

    .termin-time {
        font-size: 8.5px;
    }
}

/* ============================================================
   Modernisierung Terminblöcke v2
   - Nummer links als fester Badge
   - Name daneben
   - Uhrzeit darunter sichtbar
   - ruhigeres, moderneres Layout ohne Logikänderung
   ============================================================ */
.timeline-line {
    height: 42px;
    border-radius: 7px;
    background: #fffdfa;
}

.zimmer-row {
    margin-bottom: 7px;
}

.termin-balken {
    top: 5px;
    height: 32px;
    min-width: 48px;
    border-radius: 7px;
    padding: 4px 7px 4px 30px;
    display: block;
    text-align: left;
    overflow: hidden;
    box-shadow:
        0 2px 6px rgba(65, 35, 12, 0.22),
        inset 0 1px 0 rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.35);
}

.termin-balken::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
    pointer-events: none;
}

.termin-content {
    display: block;
    width: 100%;
    min-width: 0;
    height: 100%;
}

.termin-nummer {
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.96);
    background: rgba(0,0,0,0.08);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.34);
    z-index: 2;
}

.termin-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.termin-name {
    display: block;
    font-size: 11px;
    line-height: 12px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.termin-time {
    display: block;
    margin-top: 1px;
    font-size: 9.5px;
    line-height: 10px;
    font-weight: 800;
    opacity: 0.98;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.termin-balken.termin-wunsch::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 11px solid rgba(255,255,255,0.76);
    border-left: 11px solid transparent;
    pointer-events: none;
    z-index: 3;
}

@media (max-width: 1100px) {
    .termin-balken {
        padding-left: 27px;
    }

    .termin-nummer {
        width: 16px;
        height: 16px;
        left: 5px;
        font-size: 9px;
    }

    .termin-name {
        font-size: 10px;
        line-height: 11px;
    }

    .termin-time {
        font-size: 8.5px;
        line-height: 9px;
    }
}

@media (max-width: 760px) {
    .timeline-line {
        height: 40px;
    }

    .termin-balken {
        top: 5px;
        height: 30px;
        padding: 3px 5px 3px 24px;
        border-radius: 6px;
    }

    .termin-nummer {
        width: 15px;
        height: 15px;
        left: 4px;
        border-width: 1.5px;
        font-size: 8.5px;
    }
}

/* ============================================================
   Offene Planungskonflikte nach manuellen Termin-Korrekturen
   ============================================================ */
.zimmer-konflikt-box {
    margin: 8px 10px 14px;
    padding: 12px 14px;
    border: 2px solid #b42318;
    border-radius: 10px;
    background: #fff1f0;
    box-shadow: 0 2px 8px rgba(120, 20, 10, 0.12);
}

.zimmer-konflikt-title {
    font-size: 18px;
    font-weight: 800;
    color: #8f1209;
    margin-bottom: 4px;
}

.zimmer-konflikt-hinweis {
    color: #5f1d18;
    margin-bottom: 9px;
}

.zimmer-konflikt-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 8px 0;
    border-top: 1px solid rgba(180, 35, 24, 0.22);
}

.zimmer-konflikt-zeile:first-of-type {
    border-top: 0;
}

.zimmer-konflikt-termin {
    border: 1px solid #c2410c;
    background: #fff;
    border-radius: 7px;
    padding: 6px 9px;
    font-weight: 700;
    cursor: pointer;
}

.zimmer-konflikt-termin:hover {
    text-decoration: underline;
}

.zimmer-konflikt-pfeil,
.zimmer-konflikt-frage {
    font-weight: 800;
    color: #8f1209;
}


/*
|--------------------------------------------------------------------------
| Zimmerübersicht – Dark Mode (verfeinert)
|--------------------------------------------------------------------------
*/
.zimmer-timeline-box.is-dark-mode {
    background: #1a1d21;
    color: #f2f4f6;
    border-color: #3a4047;
}

.zimmer-timeline-box.is-dark-mode .zimmer-header,
.zimmer-timeline-box.is-dark-mode .zimmer-row,
.zimmer-timeline-box.is-dark-mode .timeline-line {
    background-color: #20242a;
    color: #f2f4f6;
    border-color: #3b424a;
}

.zimmer-timeline-box.is-dark-mode .zimmer-row:nth-child(even) .timeline-line {
    background-color: #1d2126;
}

.zimmer-timeline-box.is-dark-mode .zimmer-name {
    color: #f5f7f9 !important;
    font-weight: 700;
    text-shadow: none !important;
}

.zimmer-timeline-box.is-dark-mode .timeline-hour-label,
.zimmer-timeline-box.is-dark-mode .timeline-header-label,
.zimmer-timeline-box.is-dark-mode .timeline-hours,
.zimmer-timeline-box.is-dark-mode .timeline-hour {
    color: #d9dee3 !important;
    text-shadow: none !important;
}

.zimmer-timeline-box.is-dark-mode .timeline-grid > div {
    border-color: rgba(255,255,255,.095);
}

.zimmer-timeline-box.is-dark-mode .termin-balken:not(.is-erledigt) {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--mitarbeiter-farbe, #888) 18%, #242a30),
            #242a30 34%
        ) !important;
    border: 1px solid var(--mitarbeiter-farbe, #888) !important;
    box-shadow:
        inset 5px 0 0 var(--mitarbeiter-farbe, #888),
        0 1px 3px rgba(0,0,0,.38);
}

.zimmer-timeline-box.is-dark-mode .termin-balken:not(.is-erledigt) .termin-name,
.zimmer-timeline-box.is-dark-mode .termin-balken:not(.is-erledigt) .termin-time {
    color: color-mix(in srgb, var(--mitarbeiter-farbe, #eef2f5) 70%, white 30%) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.65) !important;
}

.zimmer-timeline-box.is-dark-mode .termin-balken:not(.is-erledigt) .termin-nummer {
    color: #ffffff !important;
    background: color-mix(in srgb, var(--mitarbeiter-farbe, #777) 70%, #1b1f24 30%) !important;
    border-color: rgba(255,255,255,.6) !important;
}

.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt {
    background: #31363c !important;
    border-color: #59616a !important;
    box-shadow: none !important;
    filter: grayscale(1);
    opacity: .54;
}

.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt .termin-name,
.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt .termin-time {
    color: #aeb5bd !important;
    text-shadow: none !important;
}

.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt .termin-nummer {
    background: #555d66 !important;
    color: #f0f2f4 !important;
}

.zimmer-timeline-box.is-dark-mode .now-window {
    background: rgba(190,198,206,.09) !important;
}

.zimmer-timeline-box.is-dark-mode .now-line {
    background: #ff3b3b !important;
    opacity: .98 !important;
    box-shadow: 0 0 4px rgba(255,59,59,.45);
}

.zimmer-timeline-box.is-dark-mode .pause-balken {
    opacity: .38;
}

.zimmer-timeline-box.is-dark-mode .termin-wunsch::after,
.zimmer-timeline-box.is-dark-mode .termin-wunsch .wunsch-star {
    filter: brightness(1.15);
}



/*
|--------------------------------------------------------------------------
| Zimmerübersicht – Dark Mode Feinschliff
|--------------------------------------------------------------------------
*/
.zimmer-timeline-box.is-dark-mode .zimmer-name,
.zimmer-timeline-box.is-dark-mode .zimmer-name strong,
.zimmer-timeline-box.is-dark-mode .zimmer-label {
    color: #f5f7f9 !important;
    text-shadow: none !important;
}

.zimmer-timeline-box.is-dark-mode .zimmer-title,
.zimmer-timeline-box.is-dark-mode .zimmer-uebersicht-title,
.zimmer-timeline-box.is-dark-mode h1,
.zimmer-timeline-box.is-dark-mode h2,
.zimmer-timeline-box.is-dark-mode h3 {
    color: #f2f4f6 !important;
}

.zimmer-timeline-box.is-dark-mode,
.zimmer-timeline-box.is-dark-mode .zimmer-header {
    background-color: #171a1f !important;
}

.zimmer-timeline-box.is-dark-mode {
    border-color: #353b42 !important;
}

.zimmer-timeline-box.is-dark-mode .zimmer-row {
    border-color: #343a41 !important;
}

.zimmer-timeline-box.is-dark-mode .zimmer-row > :first-child {
    color: #f5f7f9 !important;
    background-color: #171a1f !important;
}

.zimmer-timeline-box.is-dark-mode .zimmer-row > :first-child * {
    color: inherit !important;
}



/*
|--------------------------------------------------------------------------
| Zimmerübersicht – Dark Mode Abschluss
|--------------------------------------------------------------------------
*/

/* Gesamte Zimmerfläche bewusst EIN Grauton – keine alternierenden Zeilen. */
.zimmer-timeline-box.is-dark-mode,
.zimmer-timeline-box.is-dark-mode .zimmer-header,
.zimmer-timeline-box.is-dark-mode .zimmer-row,
.zimmer-timeline-box.is-dark-mode .zimmer-row:nth-child(even),
.zimmer-timeline-box.is-dark-mode .zimmer-row:nth-child(odd),
.zimmer-timeline-box.is-dark-mode .timeline-line,
.zimmer-timeline-box.is-dark-mode .zimmer-row:nth-child(even) .timeline-line,
.zimmer-timeline-box.is-dark-mode .zimmer-row:nth-child(odd) .timeline-line,
.zimmer-timeline-box.is-dark-mode .zimmer-row > :first-child {
    background-color: #1d2126 !important;
}

/* Trennung nur noch über feine Linien statt wechselnde Grautöne. */
.zimmer-timeline-box.is-dark-mode .zimmer-row,
.zimmer-timeline-box.is-dark-mode .timeline-line {
    border-color: rgba(255,255,255,.13) !important;
}

/* Zimmernamen klar und ruhig. */
.zimmer-timeline-box.is-dark-mode .zimmer-name,
.zimmer-timeline-box.is-dark-mode .zimmer-row > :first-child,
.zimmer-timeline-box.is-dark-mode .zimmer-row > :first-child * {
    color: #f4f6f8 !important;
}

/* Erledigte Termine bleiben grau, Text aber besser lesbar. */
.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt {
    background: #343a40 !important;
    border-color: #59616a !important;
    opacity: .68 !important;
}

.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt .termin-name,
.zimmer-timeline-box.is-dark-mode .termin-balken.is-erledigt .termin-time {
    color: #d0d5da !important;
}

/* Falls Überschrift/Kopf innerhalb des Dark-Containers liegt. */
.zimmer-timeline-box.is-dark-mode .zimmer-title,
.zimmer-timeline-box.is-dark-mode .zimmer-uebersicht-title,
.zimmer-timeline-box.is-dark-mode h1,
.zimmer-timeline-box.is-dark-mode h2,
.zimmer-timeline-box.is-dark-mode h3 {
    color: #f4f6f8 !important;
    background: transparent !important;
}



/*
|--------------------------------------------------------------------------
| Zimmerübersicht – Dark Mode Kopfbereich
|--------------------------------------------------------------------------
*/

/* Der komplette äußere Bereich soll im Dark Mode wie eine Einheit wirken. */
.zimmer-timeline-box.is-dark-mode {
    background: #1d2126 !important;
    border-color: #3b4249 !important;
    box-shadow: none !important;
}

/* Überschrift oberhalb der Stundenleiste. */
.zimmer-timeline-box.is-dark-mode > h1,
.zimmer-timeline-box.is-dark-mode > h2,
.zimmer-timeline-box.is-dark-mode > h3,
.zimmer-timeline-box.is-dark-mode .zimmer-title,
.zimmer-timeline-box.is-dark-mode .zimmer-uebersicht-title {
    background: #1d2126 !important;
    color: #f4f6f8 !important;
    border-color: #3b4249 !important;
    text-shadow: none !important;
}

/* Falls der Kopfbereich über ein separates Wrapper-Element aufgebaut ist. */
.zimmer-timeline-box.is-dark-mode .zimmer-head,
.zimmer-timeline-box.is-dark-mode .zimmer-kopf,
.zimmer-timeline-box.is-dark-mode .timeline-title,
.zimmer-timeline-box.is-dark-mode .timeline-head {
    background: #1d2126 !important;
    color: #f4f6f8 !important;
    border-color: #3b4249 !important;
}

/* Stundenleiste optisch an den Kopf anschließen. */
.zimmer-timeline-box.is-dark-mode .zimmer-header {
    background: #1d2126 !important;
    border-color: #3b4249 !important;
}



/*
|--------------------------------------------------------------------------
| Dark Mode – äußerer Zimmer-Container
|--------------------------------------------------------------------------
| Der Titel "Zimmerübersicht + Datum" liegt AUSSERHALB von
| .zimmer-timeline-box. Deshalb wird der gemeinsame Elterncontainer über
| :has() dunkel geschaltet, sobald die innere Zimmerübersicht Dark Mode hat.
|--------------------------------------------------------------------------
*/
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) {
    background: #1d2126 !important;
    border-color: #3b4249 !important;
    color: #f4f6f8 !important;
    box-shadow: none !important;
}

.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-title-row {
    background: #1d2126 !important;
    border-color: #3b4249 !important;
    color: #f4f6f8 !important;
}

.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-title-row h2,
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-title-row .zimmer-datum {
    color: #f4f6f8 !important;
    text-shadow: none !important;
}

.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) #zimmerContent {
    background: #1d2126 !important;
}

/* Einen hellen Innenabstand/Rand im Dark Mode vermeiden. */
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) {
    --zimmer-dark-bg: #1d2126;
}


/* Mitarbeiter-Tagesansicht: jeder MA exakt eine horizontale Linie */
.mitarbeiter-row { display:grid; grid-template-columns:130px minmax(0,1fr); min-height:48px; border-top:1px solid rgba(155,105,55,.25); }
.mitarbeiter-label { display:flex; align-items:center; padding:0 12px; font-weight:800; border-right:1px solid rgba(155,105,55,.25); box-shadow:inset 5px 0 0 var(--ma-farbe); background:rgba(255,255,255,.55); }
.is-mitarbeiter-view .ma-termin-balken .termin-name { font-weight:800; }
.is-mitarbeiter-view.is-dark-mode .mitarbeiter-label { background:#252525; color:var(--ma-farbe); }
@media (max-width:1200px){ .mitarbeiter-row{grid-template-columns:105px minmax(0,1fr)} .mitarbeiter-label{font-size:12px;padding:0 8px} }
.zimmer-title-row { flex-wrap:wrap; }
.zimmer-view-switch { display:inline-flex; gap:3px; padding:3px; margin-left:auto; border:1px solid #d8a26c; border-radius:10px; background:#fff8ef; }
.zimmer-view-btn { padding:6px 10px; border-radius:7px; color:#7a3b08; text-decoration:none; font-weight:700; font-size:13px; white-space:nowrap; }
.zimmer-view-btn:hover, .zimmer-view-btn.is-active { background:#ead0b2; }


/* 29.08.2026 – kompakte aktuelle Zimmerlage in der Mitarbeiter-Kopfzeile */
.zimmer-jetzt{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-left:auto;font-size:12px}
.zimmer-jetzt-label{font-weight:800;color:#6f3a12;margin-right:2px;white-space:nowrap}
.zimmer-jetzt-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:7px;border:1px solid rgba(0,0,0,.14);background:#f5f5f5;font-weight:800;line-height:1.2;cursor:help;white-space:nowrap}
.zimmer-jetzt-chip.is-free{background:#edf8ef;border-color:#a9d5af;color:#23642d}
.zimmer-jetzt-chip.is-busy{background:#fbecec;border-color:#e0aaaa;color:#8a2424}
.zimmer-jetzt-chip.is-blocked{background:#fff4dd;border-color:#e3c078;color:#805800}
.zimmer-jetzt-chip.is-neutral{background:#f1f1f1;color:#777}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-jetzt-label{color:#f0d3b4}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-jetzt-chip{filter:brightness(.9)}
@media(max-width:1200px){.zimmer-jetzt{order:3;width:100%;margin-left:0}.zimmer-jetzt-chip{padding:2px 5px}}

/* 29.08.2026 – großer eigener Hover-Informationskasten für "Zimmer jetzt" */
.zimmer-jetzt-chip{position:relative;outline:none}
.zimmer-jetzt-tooltip{
  position:absolute;
  z-index:2500;
  left:50%;
  top:calc(100% + 9px);
  transform:translateX(-50%) translateY(-2px);
  width:max-content;
  min-width:240px;
  max-width:320px;
  padding:12px 14px;
  border:1px solid #d7a06a;
  border-radius:11px;
  background:#fff8ef;
  color:#4e2b12;
  box-shadow:0 10px 24px rgba(72,43,21,.22);
  text-align:left;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.zimmer-jetzt-tooltip::before{
  content:"";
  position:absolute;
  left:50%;
  top:-6px;
  width:10px;
  height:10px;
  background:#fff8ef;
  border-left:1px solid #d7a06a;
  border-top:1px solid #d7a06a;
  transform:translateX(-50%) rotate(45deg);
}
.zimmer-jetzt-tooltip-title,
.zimmer-jetzt-tooltip-status,
.zimmer-jetzt-tooltip-detail{display:block}
.zimmer-jetzt-tooltip-title{font-size:16px;font-weight:900;color:#7a3b08;margin-bottom:7px}
.zimmer-jetzt-tooltip-status{font-size:14px;margin-bottom:7px}
.zimmer-jetzt-tooltip-detail{padding-top:5px;border-top:1px solid rgba(173,113,57,.18)}
.zimmer-jetzt-tooltip-detail.is-secondary{margin-top:3px;color:#6b5747;border-top:0;padding-top:0}
.zimmer-jetzt-chip:hover .zimmer-jetzt-tooltip,
.zimmer-jetzt-chip:focus .zimmer-jetzt-tooltip,
.zimmer-jetzt-chip:focus-within .zimmer-jetzt-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.zimmer-jetzt-chip:first-of-type .zimmer-jetzt-tooltip{left:0;transform:translateX(0) translateY(-2px)}
.zimmer-jetzt-chip:first-of-type:hover .zimmer-jetzt-tooltip,
.zimmer-jetzt-chip:first-of-type:focus .zimmer-jetzt-tooltip{transform:translateX(0) translateY(0)}
.zimmer-jetzt-chip:first-of-type .zimmer-jetzt-tooltip::before{left:16px;transform:rotate(45deg)}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-jetzt-tooltip{
  background:#242424;color:#f3e4d4;border-color:#9a6842;filter:none
}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-jetzt-tooltip::before{background:#242424;border-color:#9a6842}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-jetzt-tooltip-title{color:#f1c28f}
@media(max-width:900px){.zimmer-jetzt-tooltip{min-width:210px;max-width:260px;font-size:12px}.zimmer-jetzt-tooltip-title{font-size:14px}}

/* 29.08.2026 – Kopfzeile kompakt: Zimmerstatus groesser, Automatik nur als Icon */
.zimmer-title-row{
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:12px;
    min-width:0;
}
.zimmer-title-row h2{
    flex:0 0 auto;
    white-space:nowrap;
}
.zimmer-jetzt{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:7px;
    margin-left:auto;
    font-size:14px;
    white-space:nowrap;
    min-width:0;
}
.zimmer-jetzt-label{
    font-size:14px;
    margin-right:3px;
}
.zimmer-jetzt-chip{
    gap:4px;
    padding:6px 10px;
    min-height:30px;
    border-radius:9px;
    font-size:14px;
    box-sizing:border-box;
    flex:0 0 auto;
}
.zimmer-jetzt-chip b{
    font-size:16px;
    line-height:1;
}
.zimmer-jetzt-tooltip{
    min-width:300px;
    max-width:380px;
    padding:16px 18px;
    border-radius:12px;
    font-size:15px;
    line-height:1.45;
}
.zimmer-jetzt-tooltip-title{
    font-size:18px;
    margin-bottom:9px;
}
.zimmer-jetzt-tooltip-status{
    font-size:16px;
    margin-bottom:9px;
}
.zimmer-jetzt-tooltip-detail{
    padding-top:7px;
}
.zimmer-view-switch{
    margin-left:0;
    flex:0 0 auto;
}
.zimmer-rebalance-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px;
    min-width:42px;
    height:38px;
    padding:0;
    font-size:19px;
    line-height:1;
    overflow:visible;
}
.zimmer-rebalance-icon{
    display:block;
    line-height:1;
}
.zimmer-rebalance-tooltip{
    position:absolute;
    z-index:2600;
    right:0;
    top:calc(100% + 9px);
    width:310px;
    padding:13px 15px;
    border:1px solid #d7a06a;
    border-radius:11px;
    background:#fff8ef;
    color:#4e2b12;
    box-shadow:0 10px 24px rgba(72,43,21,.22);
    text-align:left;
    font-size:13px;
    font-weight:500;
    line-height:1.38;
    white-space:normal;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-2px);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.zimmer-rebalance-tooltip::before{
    content:"";
    position:absolute;
    right:14px;
    top:-6px;
    width:10px;
    height:10px;
    background:#fff8ef;
    border-left:1px solid #d7a06a;
    border-top:1px solid #d7a06a;
    transform:rotate(45deg);
}
.zimmer-rebalance-tooltip strong{
    display:block;
    margin-bottom:4px;
    font-size:15px;
    color:#7a3b08;
}
.zimmer-rebalance-tooltip span{display:block;}
.zimmer-rebalance-btn:hover .zimmer-rebalance-tooltip,
.zimmer-rebalance-btn:focus-visible .zimmer-rebalance-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-rebalance-tooltip{
    background:#242424;
    color:#f3e4d4;
    border-color:#9a6842;
}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-rebalance-tooltip::before{
    background:#242424;
    border-color:#9a6842;
}
.zimmer-container:has(.zimmer-timeline-box.is-dark-mode) .zimmer-rebalance-tooltip strong{
    color:#f0d3b4;
}

/* Auf kleineren Desktopbreiten weiterhin eine Kopfzeile statt Umbruch */
@media(max-width:1450px){
    .zimmer-title-row{gap:8px;}
    .zimmer-jetzt{gap:4px;font-size:13px;}
    .zimmer-jetzt-label{font-size:13px;margin-right:1px;}
    .zimmer-jetzt-chip{padding:5px 7px;font-size:13px;min-height:28px;}
    .zimmer-jetzt-chip b{font-size:14px;}
    .zimmer-view-btn{padding:6px 8px;}
}
@media(max-width:1100px){
    .zimmer-title-row h2{font-size:18px;}
    .zimmer-jetzt{gap:3px;font-size:12px;}
    .zimmer-jetzt-label{font-size:12px;}
    .zimmer-jetzt-chip{padding:4px 5px;font-size:12px;min-height:26px;}
    .zimmer-view-btn{font-size:12px;padding:5px 7px;}
    .zimmer-rebalance-btn{width:38px;min-width:38px;flex-basis:38px;height:34px;font-size:17px;}
}
/* Alte Mobile-Regel width:100% fuer diesen Button neutralisieren. */
@media(max-width:768px){
    .zimmer-title-row{flex-direction:row;align-items:center;gap:5px;overflow:visible;}
    .zimmer-rebalance-btn{width:36px;min-width:36px;flex:0 0 36px;height:34px;}
    .zimmer-rebalance-tooltip{right:0;left:auto;width:270px;}
    .zimmer-rebalance-tooltip::before{right:14px;left:auto;}
}

/* ============================================================
   04.09.2026 – Mobile Mitarbeiter-/Zimmerübersicht
   - Kopfzeile darf auf Tablet/Handy nicht horizontal ueberlaufen
   - Ansichtsschalter + Automatik bleiben erreichbar
   - "Zimmer jetzt" bekommt auf Mobile eine eigene, gut lesbare Zeile
   - auf sehr schmalen Displays werden die Zimmer-Chips auf zwei Zeilen verteilt
   ============================================================ */
@media (max-width: 900px) {
    .zimmer-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 7px 8px;
        width: 100%;
        overflow: visible;
    }

    .zimmer-title-row h2 {
        grid-column: 1;
        min-width: 0;
        margin: 0;
        font-size: 17px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .zimmer-view-switch {
        grid-column: 2;
        margin: 0;
        justify-self: end;
        flex: 0 0 auto;
    }

    .zimmer-rebalance-btn {
        grid-column: 3;
        margin: 0;
        justify-self: end;
        width: 38px;
        min-width: 38px;
        height: 36px;
        flex: 0 0 38px;
    }

    .zimmer-jetzt {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        margin: 0;
        padding: 2px 0 1px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 5px;
        white-space: normal;
    }

    .zimmer-jetzt-label {
        font-size: 13px;
        margin-right: 2px;
    }

    .zimmer-jetzt-chip {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 13px;
        border-radius: 8px;
    }

    .zimmer-jetzt-chip b {
        font-size: 14px;
    }

    /* Der grosse Zimmer-Infokasten darf am Displayrand nicht zu breit werden. */
    .zimmer-jetzt-tooltip {
        min-width: 240px;
        width: max-content;
        max-width: min(330px, calc(100vw - 28px));
        font-size: 14px;
    }

    .zimmer-jetzt-tooltip-title {
        font-size: 17px;
    }

    .zimmer-jetzt-tooltip-status {
        font-size: 15px;
    }
}

@media (max-width: 560px) {
    .zimmer-title-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px;
    }

    .zimmer-title-row h2 {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 16px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .zimmer-view-switch {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .zimmer-rebalance-btn {
        grid-column: 2;
        grid-row: 2;
    }

    .zimmer-jetzt {
        grid-column: 1 / -1;
        grid-row: 3;
        gap: 4px;
        padding-top: 1px;
    }

    .zimmer-jetzt-label {
        flex: 0 0 100%;
        font-size: 12px;
        margin-bottom: 1px;
    }

    .zimmer-jetzt-chip {
        min-height: 27px;
        padding: 4px 7px;
        font-size: 12px;
    }

    .zimmer-view-btn {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* MA-Namen bleiben sichtbar, nehmen aber weniger wertvolle Timeline-Breite. */
    .mitarbeiter-row {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .mitarbeiter-label {
        padding: 0 7px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .mitarbeiter-row {
        grid-template-columns: 82px minmax(0, 1fr);
    }

    .mitarbeiter-label {
        padding: 0 6px;
        font-size: 11px;
    }

    .zimmer-jetzt-chip {
        padding-left: 6px;
        padding-right: 6px;
    }
}