:root {
    --header-height: 50px;
    --time-col-width: 60px;
}

/* Unified Grid for Sticky Headers/Columns */

/* Day Column in Unified Grid */
.day-column, .day-area-column {
    position: relative;
    border-right: 1px solid var(--border-color);
    background-image: linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
    background-size: 100% 30px; /* 30px per slot */
    min-height: 1440px; /* 24h * 60px/h = 1440px */
}

.schedules-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.schedule-block {
    position: absolute;
    background: white;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 11px;
    cursor: pointer;
    pointer-events: auto;
    z-index: 15;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.1s, box-shadow 0.1s, z-index 0.1s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.schedule-block:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 25; /* Above headers when hovered? No, keep below sticky. Sticky is 20/30/40. So 19? */
    z-index: 19;
}

.schedule-block .time-range {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
}

.schedule-block .person-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-block .notes-indicator {
    font-size: 10px;
    opacity: 0.7;
    margin-top: auto;
}

/* ========== FULL HEIGHT LAYOUT FOR SCHEDULE ========== */
/* 1. Global Reset - Allow Body Scroll Again */
html {
    height: 100%;
    overflow-y: auto; /* Allow vertical scroll on html */
}

body {
    height: auto; /* Let body grow with content */
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto; /* Allow vertical scroll */
    overflow-x: hidden; /* Prevent horizontal body scroll (handled by table) */
    position: static; /* Default position */
}

/* 2. App Container - Standard Flow */
.app-container.schedule-page {
    height: auto;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--bg-body);
    position: relative;
}

/* 3. Navbar - Sticks to top, scrolls away or stays depending on preference. 
   User wants header to scroll away, so we keep it static or sticky? 
   Let's keep it sticky for now but make sure it doesn't overlap weirdly.
*/
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 4. Schedule Header (Date controls, filters) - Sticky below Navbar */
.schedule-header {
    position: sticky;
    top: var(--header-height); /* Below navbar */
    z-index: 900;
    background: var(--bg-body);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

/* 5. Calendar Container - No fixed height, grows with content */
.calendar-container {
    flex: 1;
    position: relative;
    overflow: visible; /* Let it expand */
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* 6. Unified Grid - The Scrollable Table */
.unified-grid {
    display: grid;
    /* Grid columns defined inline or via JS */
    position: relative;
    /* No overflow-y: auto here! Let body scroll. */
    overflow-x: auto; /* Only horizontal scroll if needed */
}

/* Sticky Header Row (Time Labels) */
.header-row {
    position: sticky;
    top: calc(var(--header-height) + 60px); /* Adjust based on actual header height */
    z-index: 40; /* Highest in grid */
    background: white;
    border-bottom: 2px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Sticky Time Column (First Column) */
.time-column {
    position: sticky;
    left: 0;
    z-index: 30; /* Above day columns */
    background: white;
    border-right: 2px solid var(--border-color);
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    width: var(--time-col-width);
}

/* Intersection of Sticky Header and Sticky Column */
.header-corner {
    position: sticky;
    top: calc(var(--header-height) + 60px);
    left: 0;
    z-index: 50; /* Topmost */
    background: white;
    border-right: 2px solid var(--border-color);
    border-bottom: 2px solid var(--border-color);
}

/* Adjust sticky top values dynamically via JS if header height changes? 
   For now, assume fixed header height approx 110px total.
*/

/* Mobile Adjustments */
@media (max-width: 768px) {
    .schedule-header {
        position: static; /* Unstick on mobile to save space */
    }
    .header-row, .header-corner {
        top: 0; /* Stick to top of viewport on mobile if navbar scrolls away */
    }
    .app-container.schedule-page {
        padding-top: 0;
    }
    .time-column {
        width: 40px;
    }
    .month-day {
        min-height: 40px;
        font-size: 0.8em;
    }
    .day-column {
        width: auto;
        min-width: 35px; /* Minimal width for mobile */
    }
    .time-slot-label {
        font-size: 0.7rem;
        padding: 0 2px;
        text-align: center;
    }
}

/* Sync Indicator */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fbbf24; /* Orange default */
    margin-right: 8px;
    transition: background-color 0.3s ease;
}
.sync-indicator.synced {
    background-color: #10b981; /* Green */
}
.sync-indicator.syncing {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Media Gallery */
.media-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.2s;
}
.media-upload-area:hover {
    border-color: var(--primary-color);
    background-color: var(--bg-hover);
}
.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}
.media-item {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f0f0f0;
}
.media-preview {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: zoom-in;
    display: block;
}
.media-delete-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(220, 38, 38, 0.8);
    color: white;
    border: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 10;
}
.media-delete-btn:hover {
    background: rgb(220, 38, 38);
}
.media-info {
    font-size: 0.7rem;
    padding: 2px 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Global Tabs Styling (Microsoft Style) */
.tabs-nav {
    display: flex;
    border-bottom: 1px solid #edebe9;
    margin-bottom: 1rem;
    gap: 20px;
}

.tab-btn {
    padding: 10px 4px;
    border: none;
    background: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: #605e5c;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: #0078d4;
}

.tab-btn.active {
    border-bottom-color: #0078d4;
    color: #0078d4;
}

.tab-content {
    display: none;
    animation: fadeIn 0.2s;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Stats Bar */
.stats-bar {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

.stat-item-inline {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.stat-label-inline {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.stat-value-inline {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-value-inline.primary {
    color: var(--primary);
}

.stat-value-inline.muted {
    color: var(--text-muted);
}

/* Schedule Card Styles */
.schedules-section {
    margin-bottom: 1.5rem;
}

.section-title-sm {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.schedules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}

.schedule-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    page-break-inside: avoid;
    break-inside: avoid;
}

.schedule-detail-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.schedule-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}

.schedule-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.125rem 0;
}

.schedule-card-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0;
    text-transform: capitalize;
}

.schedule-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.schedule-time-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.schedule-time-block svg {
    color: var(--primary);
    flex-shrink: 0;
}

.schedule-team {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.375rem 0.5rem;
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}

.schedule-notes-block {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.375rem 0.5rem;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}

.schedule-notes-block strong,
.schedule-team strong {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .schedules-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-bar {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Schedule List View (Modern & Separated) */
.today-schedules-card,
.schedule-day-container {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
}

.today-schedules-title,
.schedule-day-header {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #edebe9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.schedule-list-item {
    position: relative;
    background: #f8f9fa;
    padding: 12px 16px;
    margin-bottom: 12px;
    border: none;
    border-left: 6px solid var(--area-color, #0078d4);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all var(--transition-base);
}

.schedule-list-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateX(2px);
    background: #f0f0f0;
}

.schedule-list-time {
    display: flex;
    flex-direction: column;
    min-width: 110px;
    border-right: 1px solid #edebe9;
    padding-right: 12px;
    margin-right: 4px;
}

.schedule-list-time-range {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.schedule-list-duration {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.schedule-list-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-list-area {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--area-color, #0078d4);
}

.schedule-list-subarea {
    font-size: 0.95rem;
    font-weight: 600;
    color: #4b5563;
}

.schedule-list-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2px;
    align-items: center;
}

.schedule-list-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.schedule-list-team {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.schedule-list-notes {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 768px) {
    .schedule-list-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 12px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }
    
    .schedule-list-time {
        flex-direction: row;
        align-items: center;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #edebe9;
        padding-right: 0;
        padding-bottom: 8px;
        margin-right: 0;
        justify-content: space-between;
    }
    
    .schedule-list-time-range {
        font-size: 1rem;
    }

    .schedule-list-actions {
        width: 100%;
        margin-top: 0.5rem;
        justify-content: flex-end;
    }
    
    .schedule-unassign-btn, .schedule-btn {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Print Only Elements (hidden on screen) */
.print-only-header {
    display: none;
}

/* Print Styles */
@media print {
    /* Verstecke unnötige Elemente */
    .navbar, .app-sidebar, .btn, .tabs-nav, .form-actions, .modal-close, .page-header .btn, .action-buttons, .form-card .form-actions, .page-subtitle, .search-container, .alphabet-nav, .availability-controls, .schedule-list-actions, .no-print {
        display: none !important;
    }
    
    /* Layout Reset */
    .app-container, .main-content, .container, .modal, .modal-content, .tab-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        box-shadow: none !important;
        position: static !important;
        border: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
        font-size: 10pt; /* Etwas kleinere Schrift */
    }

    /* Kopfzeilen kompakter */
    h1, h2, h3, .page-title, .section-title {
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        font-size: 14pt !important;
    }
    
    .page-header {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #ccc;
    }

    /* Print Header für Person */
    .print-only-header {
        display: block !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #333 !important;
    }
    
    .print-only-header h1 {
        font-size: 16pt !important;
        margin: 0 !important;
    }

    /* Stats Bar kompakter und NEBENEINANDER */
    .stats-bar {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        padding: 0.5rem !important;
        margin-bottom: 1rem !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 2rem !important; /* Großer Abstand zwischen den Items */
        justify-content: flex-start !important;
        align-items: center !important;
        width: 100% !important;
    }

    .stat-item-inline {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0 !important;
    }

    .stat-label-inline {
        font-weight: bold !important;
        color: #333 !important;
        font-size: 10pt !important;
    }

    .stat-value-inline {
        font-size: 10pt !important;
        font-weight: normal !important;
    }

    /* Tab Content - nur aktiven anzeigen */
    .tab-content:not(.active) {
        display: none !important;
    }
    
    /* ZWEISPALTIGES LAYOUT FÜR LISTE */
    .schedule-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr; /* Zwei Spalten */
        gap: 0.5rem 1rem; /* Kleiner Zeilenabstand, mittlerer Spaltenabstand */
        width: 100% !important;
    }

    /* Einzelner Eintrag kompakter */
    .schedule-list-item {
        break-inside: avoid;
        page-break-inside: avoid;
        border: 1px solid #ccc !important;
        border-left: 5px solid var(--area-color, #000) !important; /* Etwas schmaler */
        box-shadow: none !important;
        background: white !important;
        margin-bottom: 0 !important; /* Gesteuert durch Grid Gap */
        padding: 6px 10px !important; /* Deutlich weniger Padding */
        border-radius: 4px !important; /* Weniger Rundung für Platz */
        display: flex !important;
        align-items: center;
        gap: 8px !important;
        height: auto;
    }

    /* Zeit-Spalte kompakter */
    .schedule-list-time {
        min-width: 70px !important; /* Schmaler */
        padding-right: 6px !important;
        margin-right: 2px !important;
        border-right: 1px solid #eee !important;
    }

    .schedule-list-time-range {
        font-size: 10pt !important;
        font-weight: bold;
    }

    .schedule-list-duration {
        font-size: 8pt !important;
        margin-top: 2px !important;
    }

    /* Info-Spalte kompakter */
    .schedule-list-info {
        gap: 2px !important;
    }

    .schedule-list-area {
        font-size: 10pt !important;
        font-weight: bold;
        line-height: 1.1;
    }

    .schedule-list-subarea, .schedule-list-team, .schedule-list-notes {
        font-size: 8pt !important;
        line-height: 1.1;
    }
    
    /* Tages-Überschriften (wenn gruppiert) */
    .schedule-day-container {
        grid-column: 1 / -1; /* Volle Breite */
        margin-top: 0.5rem;
    }
    
    .schedule-day-header {
        font-size: 11pt;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        margin-bottom: 0.25rem;
        padding-top: 0.5rem;
    }
}

/* Fix for Schedule Grid Layout */
.unified-calendar {
    display: grid;
    overflow: auto;
    max-height: calc(100vh - 140px);
    position: relative;
    background: var(--bg-card);
    z-index: 1;
}

.sticky-corner {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 50;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bg-card);
}

.sticky-left {
    position: sticky;
    left: 0;
    z-index: 40;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
}

.day-area-column {
    position: relative;
    border-right: 1px solid var(--border-color);
    background-image: linear-gradient(to bottom, var(--border-color) 1px, transparent 1px);
    background-size: 100% 15px;
}

.time-slot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    border-bottom: 1px solid transparent;
}

.time-slot.hour {
    border-top: 1px solid var(--border-color);
    font-weight: bold;
}

.time-slot.half-hour {
    border-top: 1px dotted var(--border-color);
}