/*

 * wiesenplaner.css

 * 

 * Zentrale CSS-Datei für die Hundewiesen-Planer-App

 * Angepasst an Hestia-Child-Theme Farbschema

 * 

 * Struktur:

 * 1. Reset & Basis-Styles

 * 2. Layout & Container

 * 3. Navigation & Tabs

 * 4. Buttons

 * 5. Formulare

 * 6. Tabellen

 * 7. Kalender

 * 8. Modals

 * 9. Responsive Design

 */



/* ========================================

   1. RESET & BASIS-STYLES

   ======================================== */



/* Farbvariablen aus Hestia-Child übernehmen */

#planer-app-container {

    --primary-bg: #0a5408;        /* Dunkles Grün */

    --primary-color: #e8dbcb;      /* Helles Beige für Text auf Grün */

    --primary-bg-hover: #094507;   /* Dunkleres Grün für Hover */

    --surface-bg: #f5f5dc;         /* Heller Beige-Hintergrund */

    --text-color-dark: #333333;    /* Dunkler Text auf hellem Grund */

    --border-color: #d4c5b5;       /* Beige Border */

    --shadow-light: rgba(10, 84, 8, 0.08);

    --shadow-medium: rgba(10, 84, 8, 0.15);

    

    /* Kalender-Farben - Verbesserte Farbcodierung */

    --calendar-free: #ffffff;              /* Weiß für freie Slots */

    --calendar-free-hover: #f0fdf4;        /* Hellgrün beim Hover */

    --calendar-booked-own: #34d399;         /* Grün für eigene Buchungen */

    --calendar-booked-own-text: #064e3b;   /* Dunkelgrün für Text */

    --calendar-booked-other: #fbbf24;       /* Orange/Gelb für fremde Buchungen */

    --calendar-booked-other-text: #78350f;  /* Dunkelbraun für Text */

    --calendar-blocked: #ef4444;            /* Rot für blockierte Slots */

    --calendar-blocked-text: #ffffff;       /* Weiß für Text */

    --calendar-blocked-recurring: #dc2626;  /* Dunkleres Rot für wiederkehrende Blockierungen */

    --calendar-past: #e5e7eb;               /* Grau für vergangene Slots */

    --calendar-past-text: #9ca3af;          /* Grauer Text */

    --calendar-selected: #3b82f6;           /* Blau für ausgewählte Slots */

    --calendar-selected-text: #ffffff;       /* Weiß für Text */

}



/* Box-Sizing für alle Elemente in der App */

#planer-app-container *,

#planer-app-container *::before,

#planer-app-container *::after {

    box-sizing: border-box;

}



/* Reset für Links in der App */

#planer-app-container a {

    text-decoration: none;

    color: inherit;

}



/* Hauptcontainer der App */

.page-template-wiesenplaner.blog-post {

    padding-top: 20px;

    padding-bottom: 20px;

}



/* Basis-Schriftart für die App - wie Hestia-Child */

#planer-app-container {

    font-family: 'Open Sans', sans-serif;

    font-size: 15px;

    line-height: 1.6;

    color: var(--text-color-dark);

    background-color: var(--surface-bg);

}



/* ========================================

   2. LAYOUT & CONTAINER

   ======================================== */



/* Message-Bereich */

#planer-app-container .app-message-area {

    margin-bottom: 20px;

}



#planer-app-container .app-message {

    padding: 12px 20px;

    border: 1px solid transparent;

    border-radius: 6px;

    text-align: center;

    margin: 0 auto 15px auto;

    max-width: 600px;

    font-weight: 500;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    animation: slideInDown 0.3s ease-out;

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

}



#planer-app-container .app-message::before {

    content: '';

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

}



#planer-app-container .app-message.success {

    color: #065f46;

    background-color: #d1fae5;

    border-color: #10b981;

}



#planer-app-container .app-message.success::before {

    content: '✓';

    font-size: 18px;

    font-weight: bold;

    color: #10b981;

}



#planer-app-container .app-message.error {

    color: #991b1b;

    background-color: #fee2e2;

    border-color: #ef4444;

}



#planer-app-container .app-message.error::before {

    content: '✕';

    font-size: 18px;

    font-weight: bold;

    color: #ef4444;

}



#planer-app-container .app-message.info {

    color: #1e40af;

    background-color: #dbeafe;

    border-color: #3b82f6;

}



#planer-app-container .app-message.info::before {

    content: 'ℹ';

    font-size: 18px;

    font-weight: bold;

    color: #3b82f6;

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Cards für verschiedene Bereiche - Hestia-Child Style */

#planer-app-container .card {

    background: white;

    border-radius: 10px;

    padding: 25px;

    margin-bottom: 25px;

    box-shadow: 0 2px 8px var(--shadow-light);

    border: 1px solid var(--border-color);

}



/* Überschriften - Hestia-Child Style */

#planer-app-container h1 {

    font-size: 32px;

    font-weight: 600;

    color: var(--primary-bg);

    margin-bottom: 20px;

    font-family: 'Open Sans', sans-serif;

}



#planer-app-container h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--primary-bg);

    margin-top: 30px;

    margin-bottom: 15px;

    border-bottom: 2px solid var(--border-color);

    padding-bottom: 10px;

}



#planer-app-container h3 {

    font-size: 18px;

    font-weight: 600;

    color: var(--text-color-dark);

    margin-top: 20px;

    margin-bottom: 10px;

}



/* ========================================

   3. NAVIGATION & TABS

   ======================================== */



/* Haupt-Navigation - Hestia-Child Style */

#planer-app-container .app-nav {

    background: var(--primary-bg);

    padding: 12px 20px;

    margin-bottom: 25px;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 15px;

    border-radius: 8px;

    box-shadow: 0 2px 6px var(--shadow-light);

}



/* Linksbündig: "Angemeldet als" - immer erste Zeile */

#planer-app-container .app-nav .nav-left {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-shrink: 0;

    order: 1;

}



/* Rechtsbündig: "Abmelden" - immer erste Zeile */

#planer-app-container .app-nav .nav-right {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    flex-shrink: 0;

    order: 3;

    margin-left: auto;

}



/* Zentriert: Bereiche (Root, Admin, Benutzer) - zwischen links und rechts */

#planer-app-container .app-nav .nav-center {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    flex: 1 1 auto;

    order: 2;

    min-width: 0;

}



#planer-app-container .app-nav a {

    color: var(--primary-color);

    text-decoration: none;

    padding: 5px 10px;

    font-size: 15px;

    font-weight: 500;

    transition: all 0.3s ease;

    border-radius: 4px;

    white-space: nowrap;

}



#planer-app-container .app-nav a:hover {

    background: var(--primary-bg-hover);

    color: white;

    text-decoration: none;

}



/* Admin/Root Subnavigation - Modernes Tab-Design */

.page-template-wiesenplaner #planer-app-container .admin-subnav {

    display: flex;

    gap: 0;

    margin: 15px 0 30px 0;

    border-bottom: 1px solid #e5e7eb;

    position: relative;

}



.page-template-wiesenplaner #planer-app-container .admin-subnav .btn {

    min-width: auto;

    padding: 10px 20px 11px 20px;

    margin: 0;

    margin-bottom: -1px;

    background: transparent;

    border: 1px solid transparent;

    border-bottom: 2px solid transparent;

    border-radius: 0;

    color: #6b7280;

    font-size: 14px;

    font-weight: 400;

    text-transform: none;

    letter-spacing: 0;

    text-align: center;

    box-shadow: none;

    transition: all 0.15s ease;

}



.page-template-wiesenplaner #planer-app-container .admin-subnav .btn:hover {

    color: #374151;

    background: #f9fafb;

    border-bottom-color: #9ca3af;

}



.page-template-wiesenplaner #planer-app-container .admin-subnav .btn.current-page {

    color: #1e5e1e;

    font-weight: 500;

    background: white;

    border-color: #e5e7eb;

    border-bottom: 2px solid #1e5e1e;

    pointer-events: none;

}



/* User Info in Navigation */

#planer-app-container .app-nav .user-inline {

    color: var(--primary-color);

    font-size: 0.95em;

    display: inline-block;

}



#planer-app-container .app-nav .user-inline .username {

    font-weight: 600;

    color: var(--primary-color);

}



#planer-app-container .app-nav .user-inline a {

    color: var(--primary-color);

    text-decoration: none;

}



#planer-app-container .app-nav .user-inline a:hover {

    color: #ffffff;

    text-decoration: underline;

}



/* Kalendernavigation - unter der Bereichsnavigation */

#planer-app-container .calendar-nav {

    background: var(--surface-bg);

    padding: 6px 14px;

    margin: 6px 0;

    border-radius: 6px;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



#planer-app-container .calendar-nav-container {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



/* ========================================

   4. BUTTONS - MIT MAXIMALER SPEZIFITÄT

   ======================================== */



/* Reset ALLER Button-Styles vom Child-Theme - Bessere Spezifität ohne !important */

body.page-template-wiesenplaner #planer-app-container button,

body.page-template-wiesenplaner #planer-app-container .btn,

body.page-template-wiesenplaner #planer-app-container a.btn,

body.page-template-wiesenplaner #planer-app-container input[type="button"],

body.page-template-wiesenplaner #planer-app-container input[type="submit"],

body.page-template-wiesenplaner #planer-app-container .button {

    /* Reset Child-Theme Styles - Höhere Spezifität durch body + template-class */

    all: unset;

    

    /* Dann unsere Styles anwenden */

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 6px 16px;

    font-size: 13.5px;

    line-height: 1.4;

    border-radius: 7px;

    font-weight: 600;

    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;

    cursor: pointer;

    text-decoration: none;

    border: 1px solid #d1d5db;

    text-align: center;

    background: #ffffff;

    color: #1f2937;

    font-family: inherit;

    margin: 0;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);

    text-transform: none;

    letter-spacing: normal;

    min-width: auto;

    max-width: none;

    height: auto;

    min-height: auto;

    vertical-align: middle;

}



/* Primary Button - Nur für Hauptnavigation */

body.page-template-wiesenplaner #planer-app-container .btn-primary,

body.page-template-wiesenplaner #planer-app-container .btn.btn-primary,

body.page-template-wiesenplaner #planer-app-container button.btn-primary {

    background-color: var(--primary-bg);

    color: var(--primary-color);

    border: 1px solid var(--primary-bg);

    padding: 8px 18px;

    font-size: 14px;

    box-shadow: 0 2px 4px var(--shadow-light);

    font-weight: 500;

    text-transform: none;

    letter-spacing: normal;

    border-radius: 6px;

}



body.page-template-wiesenplaner #planer-app-container .btn-primary:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-primary:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-primary:hover {

    background-color: var(--primary-bg-hover);

    border-color: var(--primary-bg-hover);

    color: white;

    box-shadow: 0 3px 6px var(--shadow-medium);

    transform: translateY(-1px);

}



/* Secondary Button - Neutrale Aktionen */

body.page-template-wiesenplaner #planer-app-container .btn-secondary,

body.page-template-wiesenplaner #planer-app-container .btn.btn-secondary,

body.page-template-wiesenplaner #planer-app-container button.btn-secondary {

    background-color: #f3f4f6;

    color: #4b5563;

    border: 1px solid #d1d5db;

    box-shadow: none;

    padding: 5px 12px;

    font-size: 13px;

    font-weight: 400;

    text-transform: none;

    letter-spacing: normal;

}



body.page-template-wiesenplaner #planer-app-container .btn-secondary:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-secondary:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-secondary:hover {

    background-color: #e5e7eb;

    color: #374151;

    border-color: #9ca3af;

    transform: none;

}



/* Success Button - Positive Aktionen (Speichern, Hinzufügen) */

body.page-template-wiesenplaner #planer-app-container .btn-success,

body.page-template-wiesenplaner #planer-app-container .btn.btn-success,

body.page-template-wiesenplaner #planer-app-container button.btn-success,

body.page-template-wiesenplaner #planer-app-container a.btn-success {

    background-color: #e7f7ee !important;

    color: #0f5132 !important;

    border: 1px solid #9bd4ad !important;

    box-shadow: 0 1px 2px rgba(15, 81, 50, 0.18);

}



body.page-template-wiesenplaner #planer-app-container .btn-success:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-success:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-success:hover,

body.page-template-wiesenplaner #planer-app-container a.btn-success:hover {

    background-color: #d2f0e0 !important;

    border-color: #7ec693 !important;

    transform: translateY(-1px);

}



/* Confirm Button - explizit für "Ja" */

body.page-template-wiesenplaner #planer-app-container .btn-confirm,

body.page-template-wiesenplaner #planer-app-container .btn.btn-confirm,

body.page-template-wiesenplaner #planer-app-container button.btn-confirm {

    background-color: #0a5408;

    color: #fefce8;

    border: 1px solid #063b05;

    font-weight: 600;

    padding: 6px 16px;

    font-size: 14px;

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



body.page-template-wiesenplaner #planer-app-container .btn-confirm:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-confirm:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-confirm:hover {

    background-color: #094507;

    border-color: #052d04;

    color: #ffffff;

    transform: translateY(-1px);

}



/* Deny Button - explizit für "Nein" */

body.page-template-wiesenplaner #planer-app-container .btn-deny,

body.page-template-wiesenplaner #planer-app-container .btn.btn-deny,

body.page-template-wiesenplaner #planer-app-container button.btn-deny {

    background-color: #fee2e2;

    color: #b91c1c;

    border: 1px solid #fca5a5;

    font-weight: 600;

    padding: 6px 16px;

    font-size: 14px;

    letter-spacing: 0.02em;

    text-transform: uppercase;

}



body.page-template-wiesenplaner #planer-app-container .btn-deny:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-deny:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-deny:hover {

    background-color: #fecaca;

    color: #991b1b;

    border-color: #f87171;

    transform: translateY(-1px);

}



/* Danger Button - Negative Aktionen (Löschen, Entziehen) */

body.page-template-wiesenplaner #planer-app-container .btn-danger,

body.page-template-wiesenplaner #planer-app-container .btn.btn-danger,

body.page-template-wiesenplaner #planer-app-container button.btn-danger,

body.page-template-wiesenplaner #planer-app-container a.btn-danger {

    background-color: #fde2e1 !important;

    color: #7f1d1d !important;

    border: 1px solid #f5b5b0 !important;

    box-shadow: 0 1px 2px rgba(127, 29, 29, 0.18);

}



body.page-template-wiesenplaner #planer-app-container .btn-danger:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-danger:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-danger:hover,

body.page-template-wiesenplaner #planer-app-container a.btn-danger:hover {

    background-color: #fccdcb !important;

    border-color: #f18c86 !important;

    transform: translateY(-1px);

}



/* Warning Button - Ändern/Bearbeiten Aktionen */

body.page-template-wiesenplaner #planer-app-container .btn-warning,

body.page-template-wiesenplaner #planer-app-container .btn.btn-warning,

body.page-template-wiesenplaner #planer-app-container button.btn-warning,

body.page-template-wiesenplaner #planer-app-container a.btn-warning {

    background-color: #fff4d6 !important;

    color: #92400e !important;

    border: 1px solid #f8d78c !important;

    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.15);

}



body.page-template-wiesenplaner #planer-app-container .btn-warning:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-warning:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-warning:hover,

body.page-template-wiesenplaner #planer-app-container a.btn-warning:hover {

    background-color: #feeabe !important;

    border-color: #f2bd66 !important;

    transform: translateY(-1px);

}



/* Info Button - Informative/Neutrale Aktionen */

body.page-template-wiesenplaner #planer-app-container .btn-info,

body.page-template-wiesenplaner #planer-app-container .btn.btn-info,

body.page-template-wiesenplaner #planer-app-container button.btn-info,

body.page-template-wiesenplaner #planer-app-container a.btn-info {

    background-color: #e1edff !important;

    color: #1d4ed8 !important;

    border: 1px solid #9ec0ff !important;

    box-shadow: 0 1px 2px rgba(29, 78, 216, 0.18);

}



body.page-template-wiesenplaner #planer-app-container .btn-info:hover,

body.page-template-wiesenplaner #planer-app-container .btn.btn-info:hover,

body.page-template-wiesenplaner #planer-app-container button.btn-info:hover,

body.page-template-wiesenplaner #planer-app-container a.btn-info:hover {

    background-color: #d0e2ff !important;

    border-color: #7ea8ff !important;

    transform: translateY(-1px);

}



/* Navigation Buttons (Kalender) */

body.page-template-wiesenplaner #planer-app-container .nav-button {

    display: inline-block;

    padding: 4px 10px;

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    text-transform: none;

    border-radius: 6px;

    transition: all 0.2s ease;

    background-color: #dbeafe;

    color: #1e40af;

    border: 1px solid #93c5fd;

}



body.page-template-wiesenplaner #planer-app-container .nav-button:hover {

    background-color: #bfdbfe;

    color: #1e3a8a;

    border-color: #60a5fa;

}



body.page-template-wiesenplaner #planer-app-container .nav-button.disabled {

    opacity: 0.5;

    cursor: not-allowed;

    pointer-events: none;

}



/* Kompaktere Buttons in Tabellen */

#planer-app-container table .btn,

#planer-app-container table button,

#planer-app-container table a.btn {

    padding: 6px 16px !important;

    font-size: 13.5px !important;

    margin: 4px 6px 4px 0 !important;

    font-weight: 600 !important;

    line-height: 1.4 !important;

    white-space: nowrap !important;

    border-radius: 7px !important;

    border-width: 1px !important;

    border-style: solid !important;

    text-transform: none !important;

    letter-spacing: normal !important;

    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;

}



#planer-app-container .wp-list-table .btn-info,

#planer-app-container .wp-list-table .btn.btn-info,

#planer-app-container .wp-list-table button.btn-info,

#planer-app-container .wp-list-table a.btn-info {

    background-color: #e1edff !important;

    color: #1d4ed8 !important;

    border-color: #9ec0ff !important;

}



#planer-app-container .wp-list-table .btn-info:hover {

    background-color: #d0e2ff !important;

    border-color: #7ea8ff !important;

    color: #1a3a9a !important;

}



#planer-app-container .wp-list-table .btn-success,

#planer-app-container .wp-list-table .btn.btn-success,

#planer-app-container .wp-list-table button.btn-success,

#planer-app-container .wp-list-table a.btn-success {

    background-color: #e7f7ee !important;

    color: #0f5132 !important;

    border-color: #9bd4ad !important;

}



#planer-app-container .wp-list-table .btn-success:hover {

    background-color: #d2f0e0 !important;

    border-color: #7ec693 !important;

}



#planer-app-container .wp-list-table .btn-danger,

#planer-app-container .wp-list-table .btn.btn-danger,

#planer-app-container .wp-list-table button.btn-danger,

#planer-app-container .wp-list-table a.btn-danger {

    background-color: #fde2e1 !important;

    color: #7f1d1d !important;

    border-color: #f5b5b0 !important;

}



#planer-app-container .wp-list-table .btn-danger:hover {

    background-color: #fccdcb !important;

    border-color: #f18c86 !important;

    color: #641212 !important;

}



#planer-app-container .wp-list-table .btn-warning,

#planer-app-container .wp-list-table .btn.btn-warning,

#planer-app-container .wp-list-table button.btn-warning,

#planer-app-container .wp-list-table a.btn-warning {

    background-color: #fff4d6 !important;

    color: #92400e !important;

    border-color: #f8d78c !important;

}



#planer-app-container .wp-list-table .btn-warning:hover {

    background-color: #feeabe !important;

    border-color: #f2bd66 !important;

}



#planer-app-container .temp-pass,

#planer-app-container .status-temp-pw,

#planer-app-container .status-temp-pw .temp-pass {

    color: #b91c1c;

    font-weight: 700;

}



/* ========================================

   5. FORMULARE

   ======================================== */



#planer-app-container input[type="text"],

#planer-app-container input[type="email"],

#planer-app-container input[type="password"],

#planer-app-container input[type="date"],

#planer-app-container input[type="time"],

#planer-app-container input[type="number"],

#planer-app-container select,

#planer-app-container textarea {

    width: 100%;

    padding: 8px 12px;

    border: 1px solid #d1d5db;

    border-radius: 4px;

    font-size: 14px;

    transition: border-color 0.15s ease;

    box-sizing: border-box;

}



#planer-app-container input:focus,

#planer-app-container select:focus,

#planer-app-container textarea:focus {

    outline: none;

    border-color: #1e5e1e;

    box-shadow: 0 0 0 3px rgba(30, 94, 30, 0.1);

}



#planer-app-container label {

    display: block;

    margin-bottom: 5px;

    font-weight: 500;

    color: #374151;

    font-size: 14px;

}



#planer-app-container .form-group {

    margin-bottom: 15px;

}



/* ========================================

   6. TABELLEN - Hestia-Child Style

   ======================================== */



#planer-app-container table:not(.calendar) {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    background: white;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 2px 8px var(--shadow-light);

    border: 1px solid var(--border-color);

}



#planer-app-container table:not(.calendar) thead {

    background: linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-bg-hover) 100%);

}



#planer-app-container table:not(.calendar) th {

    padding: 14px 16px;

    text-align: left;

    font-weight: 600;

    font-size: 14px;

    color: var(--primary-color);

    border-bottom: 2px solid var(--border-color);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



#planer-app-container table:not(.calendar) td {

    padding: 12px 16px;

    font-size: 14px;

    color: #4b5563;

    border-bottom: 1px solid #f3f4f6;

}



#planer-app-container .status-temp-pw {

    color: #b91c1c;

    font-weight: 700;

    cursor: pointer;

}



/* Zebrastreifen */

#planer-app-container table:not(.calendar) tbody tr:nth-child(even) {

    background-color: #fafafa;

}



/* Hover-Effekt */

#planer-app-container table:not(.calendar) tbody tr {

    transition: background-color 0.15s ease;

}



#planer-app-container table:not(.calendar) tbody tr:hover {

    background-color: #f0f9ff;

}



/* Letzte Zeile ohne Border */

#planer-app-container table:not(.calendar) tbody tr:last-child td {

    border-bottom: none;

}



/* ========================================

   7. KALENDER

   ======================================== */



#planer-app-container .calendar-container {

    overflow-x: auto;

    margin: 20px 0;

}



#planer-app-container .calendar {

    width: 100%;

    min-width: 700px;

    border-collapse: collapse;

    background: white;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

}



#planer-app-container .calendar th {

    background: #f9fafb;

    padding: 10px;

    font-weight: 600;

    text-align: center;

    border: 1px solid #e5e7eb;

    font-size: 14px;

}



#planer-app-container .calendar td {

    border: 1px solid #e5e7eb;

    padding: 8px;

    text-align: center;

    cursor: pointer;

    transition: background-color 0.2s ease;

}



/* Kalender-Zellen - Basis-Styles */

#planer-app-container .calendar td {

    border: 1px solid #e5e7eb;

    padding: 8px;

    text-align: center;

    cursor: pointer;

    transition: background-color 0.2s ease, border-color 0.2s ease;

    position: relative;

}



#planer-app-container .calendar td.time-label {

    font-weight: 600;

    color: #374151;

    background-color: #ffffff;

    text-align: right;

    padding-right: 10px;

}



/* Freie Slots */

#planer-app-container .calendar td.free {

    background-color: var(--calendar-free);

}



#planer-app-container .calendar td.free:hover {

    background-color: var(--calendar-free-hover);

    border-color: var(--primary-bg);

}



/* Eigene Buchungen - Grün */

#planer-app-container .calendar td.booked-by-me-or-admin {

    background-color: var(--calendar-booked-own);

    color: var(--calendar-booked-own-text);

    cursor: pointer;

    font-weight: 500;

}



#planer-app-container .calendar td.booked-by-me-or-admin:hover {

    background-color: #10b981;

    border-color: var(--calendar-booked-own-text);

}



/* Fremde Buchungen - Orange/Gelb */

#planer-app-container .calendar td.booked:not(.booked-by-me-or-admin) {

    background-color: var(--calendar-booked-other);

    color: var(--calendar-booked-other-text);

    cursor: not-allowed;

    font-weight: 500;

}



/* Blockierte Slots - Rot */

#planer-app-container .calendar td.blocked {

    background-color: var(--calendar-blocked);

    color: var(--calendar-blocked-text);

    cursor: not-allowed;

    font-weight: 500;

}



/* Wiederkehrende Blockierungen - Dunkleres Rot (am selben Tag) */

#planer-app-container .calendar td.blocked[data-blocked-reason="recurring"]:not(.past) {

    background-color: var(--calendar-blocked-recurring);

    background-image: repeating-linear-gradient(

        45deg,

        transparent,

        transparent 5px,

        rgba(255, 255, 255, 0.1) 5px,

        rgba(255, 255, 255, 0.1) 10px

    );

}



/* Wiederkehrende Blockierungen in der Vergangenheit (ab nächstem Tag) - Blassrot */

#planer-app-container .calendar td.blocked.past[data-blocked-reason="recurring"] {

    background-color: #fca5a5; /* Blassrot */

    background-image: repeating-linear-gradient(

        45deg,

        transparent,

        transparent 5px,

        rgba(255, 255, 255, 0.15) 5px,

        rgba(255, 255, 255, 0.15) 10px

    );

    opacity: 0.7;

    color: #991b1b; /* Dunkleres Rot für Text */

}



/* Vergangene Slots - Grau (nur für nicht-wiederkehrende) */

#planer-app-container .calendar td.past:not([data-blocked-reason="recurring"]) {

    background-color: var(--calendar-past);

    color: var(--calendar-past-text);

    cursor: not-allowed;

    opacity: 0.6;

}



/* Ausgewählte Slots - Blau */

#planer-app-container .calendar td.selected {

    background-color: var(--calendar-selected);

    color: var(--calendar-selected-text);

    border-color: #1e40af;

    border-width: 2px;

    font-weight: 600;

}



/* Hover-Effekt: Ausgewählte Slots sollen blau bleiben */

#planer-app-container .calendar td.selected:hover {

    background-color: var(--calendar-selected);

    color: var(--calendar-selected-text);

    border-color: #1d4ed8;

}



/* Tooltip für Buchungsnamen */

#planer-app-container .calendar td .booking-name {

    display: block;

    font-size: 11px;

    margin-top: 2px;

    font-weight: 600;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

}



#planer-app-container .calendar td .booking-name.booking-name--hidden {

    visibility: hidden;

}



/* ========================================

   8. MODALS

   ======================================== */



.modal {

    display: none;

    position: fixed;

    z-index: 10000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgba(0,0,0,0.5);

}



.modal-content {

    background-color: white;

    margin: 5% auto;

    padding: 30px;

    border: none;

    border-radius: 8px;

    width: 90%;

    max-width: 500px;

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

    position: relative;

}



.modal-content h2 {

    margin-top: 0;

    margin-bottom: 20px;

    color: #111827;

}



.modal-content .close {

    color: #aaa;

    position: absolute;

    top: 10px;

    right: 15px;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    transition: color 0.3s ease;

}



.modal-content .close:hover {

    color: #000;

}



/* Modal Buttons */

.modal-content button,

.modal-content .btn {

    padding: 8px 16px;

    font-size: 13px;

    margin: 5px;

    text-transform: none;

}



/* Modal-Verbesserungen für bessere Meldungen */

.modal-content {

    animation: modalFadeIn 0.2s ease-out;

}



.modal-content h2 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 0;

    margin-bottom: 20px;

    color: #111827;

}



.modal-content h2::before {

    content: '';

    width: 24px;

    height: 24px;

    flex-shrink: 0;

    background-size: contain;

}



.modal-content.success h2::before {

    content: '✓';

    color: #10b981;

    font-size: 24px;

    font-weight: bold;

}



.modal-content.error h2::before {

    content: '✕';

    color: #ef4444;

    font-size: 24px;

    font-weight: bold;

}



.modal-content.info h2::before {

    content: 'ℹ';

    color: #3b82f6;

    font-size: 24px;

    font-weight: bold;

}



@keyframes modalFadeIn {

    from {

        opacity: 0;

        transform: scale(0.95);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



/* ========================================

   9. RESPONSIVE DESIGN

   ======================================== */



#planer-app-container .calendar-intro {

    display: none; /* Wird per JavaScript bei Touch-Geräten eingeblendet */

    margin: 0 0 10px;

    font-size: 0.9rem;

    color: #b45309;

    background-color: #fff7ed;

    border: 1px solid #fed7aa;

    border-radius: 6px;

    padding: 10px 12px;

    line-height: 1.4;

}



/* Touch-Geräte: Text wird per JavaScript mit display:block sichtbar gemacht */



@media (max-width: 768px) {

    #planer-app-container .admin-subnav {

        gap: 0;

        overflow-x: auto;

        border-bottom: 1px solid #e5e7eb;

    }

    

    #planer-app-container .admin-subnav .btn {

        white-space: nowrap;

        min-width: auto;

    }

    

    #planer-app-container .calendar {

        min-width: 400px;

    }

    

    .modal-content {

        width: 95%;

        margin: 10% auto;

        padding: 20px;

    }

    

    #planer-app-container table:not(.calendar) {

        font-size: 12px;

    }

    

    #planer-app-container table:not(.calendar) th,

    #planer-app-container table:not(.calendar) td {

        padding: 8px;

    }



    /* Kalender-Container erhält eigene Scrollfläche */

    #planer-app-container .calendar-container {

        max-height: calc(100vh - 220px);

        overflow-y: auto;

        overflow-x: auto;

        position: relative;

        -webkit-overflow-scrolling: touch;

    }



    /* Sticky Header und Zeitleiste */

    #planer-app-container .calendar thead th {

        position: sticky;

        top: 0;

        z-index: 5;

        background-color: #f9fafb;

    }



    #planer-app-container .calendar thead .sticky-col,

    #planer-app-container .calendar tbody td.time-label {

        position: sticky;

        left: 0;

        z-index: 6;

        background-color: #ffffff;

        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);

    }



    #planer-app-container .calendar thead .sticky-col {

        z-index: 7;

        background-color: #f1f5f9;

    }

}



/* Desktop: Alles in einer Zeile wenn möglich */

@media (min-width: 769px) {

    #planer-app-container .app-nav {

        flex-wrap: nowrap;

    }

    

    #planer-app-container .app-nav .nav-left {

        order: 1;

        flex: 0 0 auto;

    }

    

    #planer-app-container .app-nav .nav-center {

        order: 2;

        flex: 1 1 auto;

        justify-content: center;

    }

    

    #planer-app-container .app-nav .nav-right {

        order: 3;

        flex: 0 0 auto;

        margin-left: auto;

    }

}



@media (max-width: 768px) {

    #planer-app-container .app-nav {

        gap: 10px;

    }

    

    /* Erste Zeile: "Angemeldet als" und "Abmelden" */

    #planer-app-container .app-nav .nav-left {

        order: 1;

        flex: 0 0 auto;

    }

    

    #planer-app-container .app-nav .nav-right {

        order: 2;

        flex: 0 0 auto;

        margin-left: auto;

    }

    

    /* Zweite Zeile: Bereiche (nur wenn nötig, keine Leerzeile) */

    #planer-app-container .app-nav .nav-center {

        order: 3;

        flex: 1 1 100%;

        width: 100%;

        justify-content: center;

        border-top: 1px solid rgba(232, 219, 203, 0.3);

        padding-top: 8px;

        margin-top: 0;

        margin-bottom: 0;

    }

    

    /* Keine Leerzeilen zwischen Elementen */

    #planer-app-container .app-nav .nav-center:empty {

        display: none;

    }

}



@media (max-width: 480px) {

    #planer-app-container .app-nav {

        gap: 8px;

    }

    

    #planer-app-container h1 {

        font-size: 24px;

    }

    

    #planer-app-container h2 {

        font-size: 18px;

    }

    

    /* Button-Größe in Modals bereits durch Hauptregel definiert */

}



/* ========================================

   10. UTILITY CLASSES

   ======================================== */



#planer-app-container .text-center {

    text-align: center;

}



#planer-app-container .text-right {

    text-align: right;

}



#planer-app-container .mt-1 { margin-top: 8px; }

#planer-app-container .mt-2 { margin-top: 16px; }

#planer-app-container .mt-3 { margin-top: 24px; }



#planer-app-container .mb-1 { margin-bottom: 8px; }

#planer-app-container .mb-2 { margin-bottom: 16px; }

#planer-app-container .mb-3 { margin-bottom: 24px; }



#planer-app-container .hidden {

    display: none !important;

}



#planer-app-container .disabled {

    opacity: 0.5;

    cursor: not-allowed !important;

    pointer-events: none !important;

}