: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? 
   "alles nach oben scrollen kann" implies standard flow.
*/
.navbar {
    flex: 0 0 auto;
    width: 100%;
    z-index: 100;
}

/* 4. Main Content */
.app-container.schedule-page .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 0;
}

/* 5. Schedule Container */
.app-container.schedule-page .schedule-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding-bottom: 20px;
}

/* 6. Headers - Standard Block Elements */
.schedule-header, 
.controls-bar, 
.notes-history-container, 
.filter-container,
.area-filters-section,
.occupancy-filters-section {
    flex: 0 0 auto;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

/* 7. The Scrollable Area - ONLY Horizontal Scroll here */
.calendar-view {
    flex: 1;
    overflow-x: auto !important; /* Force horizontal scroll */
    overflow-y: visible !important; /* Let vertical scroll happen on body */
    min-height: 0;
    position: relative;
    background: var(--bg-card);
    width: 100%;
    display: block;
    
    /* Mobile Scroll Physics */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

/* Unified Grid for Sticky Headers/Columns */
.unified-calendar {
    display: grid;
    /* grid-template-columns set via inline style */
    width: max-content;
    min-width: 100%;
    height: auto;
    padding-bottom: 50px;
}

/* Sticky Positioning Logic */
.sticky-top {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0; /* Stick to top of viewport when scrolling down */
    z-index: 20;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.sticky-left {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 0;
    z-index: 30;
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
    box-shadow: 1px 0 2px rgba(0,0,0,0.05);
}

.sticky-corner {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0; /* Stick to top */
    left: 0; /* Stick to left */
    z-index: 40; /* Highest priority */
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
@media (max-width: 768px) {
    .time-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; }
}