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

Projekt:
Kalenderbuchung / PC Doctor / Thaimassage

Beschreibung:
Diese Datei enthält das Layout der Hauptseite index.php.

Aufgabe:
------------------------------------------------------------
- Datum- und Uhrzeitleiste
- Tagesnavigation
- Benachrichtigungen
- Zwei-Spalten-Layout
- Buchungssystem links
- Anwesenheit rechts
- Footer / Copyright unten

Hinweis:
------------------------------------------------------------
Spezielle Bereiche haben eigene CSS-Dateien:

index_buchung.css
index_anwesenheit.css
index_zimmer.css
index_mob.css
============================================================
*/


/*
|--------------------------------------------------------------------------
| Datum- und Uhrzeit-Container
|--------------------------------------------------------------------------
| Zeigt oben den aktuell gewählten Tag und die laufende Uhrzeit.
| Bleibt beim Scrollen oben sichtbar.
|--------------------------------------------------------------------------
*/
.date-time-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;
    padding: 10px 20px;

    background-color: #fdf5e6;

    border: 1px solid #d2b48c;
    border-radius: 5px;

    font-size: 18px;
    color: #8b4513;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    position: sticky;
    top: 0;
    z-index: 10;
}

.current-date,
.current-time {
    margin: 0;
}


/*
|--------------------------------------------------------------------------
| Tagesnavigation
|--------------------------------------------------------------------------
| Enthält die Buttons:
| - Zurück
| - Heute
| - Vor
|--------------------------------------------------------------------------
*/
.navigation-container {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}


/*
|--------------------------------------------------------------------------
| Navigationsbuttons
|--------------------------------------------------------------------------
*/
.nav-button {
    padding: 10px 15px;

    background-color: #8b4513;

    color: #ffffff;

    border: none;
    border-radius: 4px;

    text-decoration: none;

    font-size: 16px;

    cursor: pointer;
}

.nav-button:hover {
    background-color: #a0522d;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.nav-button:focus {
    outline: 2px solid #d2b48c;
}


/*
|--------------------------------------------------------------------------
| Benachrichtigungen
|--------------------------------------------------------------------------
| Wird per JavaScript ein- und ausgeblendet.
|
| Beispiele:
| - Buchung erfolgreich
| - Zimmer belegt
| - Mitarbeiter nicht verfügbar
|--------------------------------------------------------------------------
*/
.notification-container {
    position: fixed;

    top: 20px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 1000;

    padding: 15px 20px;

    max-width: 800px;
    width: calc(100% - 40px);

    border-radius: 8px;

    font-size: 16px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    display: none;

    transition: all 0.3s ease-in-out;
}


/*
|--------------------------------------------------------------------------
| Erfolgsnachricht
|--------------------------------------------------------------------------
*/
.notification-success {
    background-color: #dff0d8;

    color: #3c763d;

    border: 1px solid #c3e6cb;
}


/*
|--------------------------------------------------------------------------
| Fehlermeldung
|--------------------------------------------------------------------------
*/
.notification-error {
    background-color: #f8d7da;

    color: #721c24;

    border: 1px solid #f5c6cb;
}


/*
|--------------------------------------------------------------------------
| Informationsmeldung
|--------------------------------------------------------------------------
*/
.notification-info {
    background-color: #d9edf7;

    color: #31708f;

    border: 1px solid #bce8f1;
}


/*
|--------------------------------------------------------------------------
| Sichtbare Benachrichtigung
|--------------------------------------------------------------------------
*/
.notification-container.show {
    display: block;

    animation: fadeIn 0.5s ease-in-out;
}


/*
|--------------------------------------------------------------------------
| Animation für Benachrichtigungen
|--------------------------------------------------------------------------
*/
@keyframes fadeIn {
    from {
        opacity: 0;

        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;

        transform: translate(-50%, 0);
    }
}


/*
|--------------------------------------------------------------------------
| Hauptbereich mit zwei Spalten
|--------------------------------------------------------------------------
| Linke Spalte:
| - Buchungssystem
|
| Rechte Spalte:
| - Anwesenheit
|--------------------------------------------------------------------------
*/
.two-columns {
    display: flex;

    gap: 20px;

    align-items: stretch;
}


/*
|--------------------------------------------------------------------------
| Linker und rechter Container
|--------------------------------------------------------------------------
*/
.left-container,
.right-container {
    flex: 1;

    padding: 20px;

    background-color: #f7e4d4;

    border: 1px solid #d2b48c;
    border-radius: 5px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    color: #4a3b31;

    overflow-y: auto;

    max-height: 80vh;
}


/*
|--------------------------------------------------------------------------
| Footer / Copyright
|--------------------------------------------------------------------------
| Wird unten auf der Hauptseite angezeigt.
|--------------------------------------------------------------------------
*/
.footer {
    margin: 20px 5px;
    padding: 15px;

    background: #f4e8dc;
    border: 1px solid #d4a373;
    border-radius: 10px;

    text-align: center;
    color: #8b4513;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/*
|--------------------------------------------------------------------------
| Optimierung Hauptseite 21.06.2026
|--------------------------------------------------------------------------
| Ziel:
| - Buchungssystem breiter, weil es der Hauptarbeitsbereich ist.
| - Anwesenheit rechts exakt auf gleicher Höhe wie das Buchungssystem.
| - Zimmerübersicht darf darunter liegen; sie muss nicht sofort vollständig sichtbar sein.
| - Bei 100% Browser-Zoom besser nutzbar.
|--------------------------------------------------------------------------
*/
.container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 8px 8px 8px;
    box-sizing: border-box;
}

.testmodus-box {
    margin: 4px 0 !important;
    padding: 6px 10px !important;
}

.date-time-container {
    margin-bottom: 6px;
    padding: 8px 14px;
    font-size: 15px;
    position: static;
}

.navigation-container {
    margin: 4px 0 8px 0;
    gap: 6px;
}

.nav-button {
    padding: 7px 13px;
    font-size: 14px;
}

.two-columns {
    display: grid;
    grid-template-columns: clamp(390px, 26vw, 500px) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    margin-bottom: 8px;
}

.left-container,
.right-container {
    flex: unset;
    margin: 0;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
}

.right-container {
    height: 100%;
    overflow: auto;
}

.right-container h2 {
    margin-top: 0;
}

.zimmer-container {
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .two-columns {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   DESIGN-PHASE 1 / 25.06.2026
   Einheitliche, kompakte Hauptansicht ohne Funktionsänderungen
   ============================================================ */

.container {
    padding: 6px 10px 10px;
}

.frontend-pin-login,
.testmodus-box {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-soft);
    font-size: var(--fs-sm) !important;
}

/* Frontend-PIN ist ein eigener Bereich UNTER der abgeschlossenen Navbar. */
.frontend-pin-login {
    width: 100%;
    margin: 8px 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #c9a06c !important;
    background: #fffaf3 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.frontend-pin-login--logged-out {
    justify-content: flex-start;
}

.frontend-pin-login--logged-in {
    justify-content: space-between;
}

/* Keine PIN-Komponente darf optisch Teil der braunen Navbar werden. */
.navbar .frontend-pin-login {
    display: none !important;
}

.date-time-container {
    margin: 6px 0 8px;
    padding: 8px 14px;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: var(--fs-base);
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.navigation-container {
    margin: 0 0 8px;
    gap: 8px;
}

.nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    background: var(--color-primary);
    border-radius: 999px;
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(67, 31, 8, 0.14);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.nav-button:hover {
    background: var(--color-primary-hover);
    box-shadow: 0 5px 12px rgba(67, 31, 8, 0.20);
    transform: translateY(-1px);
}

.notification-container {
    top: 16px;
    padding: 12px 16px;
    max-width: 760px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    font-weight: 700;
}

.two-columns {
    grid-template-columns: clamp(390px, 27vw, 500px) minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 8px;
}

.left-container,
.right-container {
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    color: var(--color-text);
}

.left-container h2,
.right-container h2,
.zimmer-container h2 {
    color: var(--color-primary);
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    letter-spacing: -0.01em;
}

.footer {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 1100px) {
    .two-columns {
        grid-template-columns: 1fr;
    }
}