:root { 
    --primary-color: #D3000F; 
    --primary-hover: #A3000B; 
    --accent-color: #111111; 
    --bg-color: #F8F9FA; 
    --card-bg: #FFFFFF; 
    --backlog-bg: #FFF8E1; 
    --backlog-border: #FFC107; 
    --border-radius: 4px; 
    --font-family: 'Montserrat', sans-serif; 
    --hour-height: 120px; 
    --timeline-hours: 18; /* FIX: Exakte Dauer des Kalenders */
}

body { font-family: var(--font-family); background-color: var(--bg-color); margin: 0; padding: 10px; color: var(--accent-color); height: 100vh; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; font-size: 13px; }
*:focus-visible { outline: 2px solid #1A73E8 !important; outline-offset: 1px; }

/* Header & Toolbars */
.header { display: flex; flex-direction: column; background: var(--card-bg); padding: 10px 15px; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05); flex-shrink: 0; margin-bottom: 10px; gap: 10px; border: 1px solid #E0E0E0; }
.header-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.header-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E0E0E0; padding-top: 10px; flex-wrap: wrap; gap: 10px;}
.logo-container { display: flex; align-items: center; gap: 10px; }
.logo-container img { height: 32px; display: block; }
.logo-container h2 { margin: 0; font-weight: 700; font-size: 1.1rem; color: var(--accent-color); border-left: 2px solid #E0E0E0; padding-left: 10px; display: flex; align-items: baseline; gap: 8px; }

.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn { background-color: var(--primary-color); color: white; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-family); transition: all 0.2s; display: flex; align-items: center; gap: 6px; text-decoration: none; }
.btn:hover:not(:disabled) { background-color: var(--primary-hover); transform: translateY(-1px); color: #FFFFFF !important; }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-blue { background-color: #1A73E8; } .btn-blue:hover:not(:disabled) { background-color: #1557B0; }
.btn-green { background-color: #1E8E3E; } .btn-green:hover:not(:disabled) { background-color: #137333; }
.btn-orange { background-color: #F29900; } .btn-orange:hover:not(:disabled) { background-color: #E27100; }
.btn-gray { background-color: #5F6368; } .btn-gray:hover:not(:disabled) { background-color: #3C4043; }
.btn-purple { background-color: #951b81; } .btn-purple:hover:not(:disabled) { background-color: #7A1569; }
.btn-icon-only { padding: 6px 8px; }

.view-switch { display: flex; gap: 0; background: #F1F3F4; border-radius: 4px; border: 1px solid #DADCE0; overflow: hidden; }
.btn-view { background: transparent; color: #5F6368; border: none; padding: 6px 12px; margin: 0; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; font-family: var(--font-family); }
.btn-view.active { background: #FFFFFF; color: var(--primary-color); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.btn-view:hover:not(.active) { background: #E8EAED; color: #111 !important; }

.user-info { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #111111; padding: 4px 8px; border-radius: 4px; border: 1px solid transparent; }
.last-modified { font-size: 11px; color: #3C4043; font-weight: 600; margin-right: 4px; }

.day-tabs { display: flex; gap: 6px; }
.tab-btn { background: #F1F3F4; color: #111111; border: 1px solid #DADCE0; padding: 6px 16px; border-radius: 16px; cursor: pointer; font-weight: 600; font-size: 12px; transition: all 0.2s; }
.tab-btn:hover { background: #E8EAED; }
.tab-btn.active { background: var(--primary-color); color: white; border-color: var(--primary-color); }
.active-date-display { font-weight: 700; font-size: 13px; color: #111111; }

.toolbar-right { display: flex; gap: 15px; align-items: center; }
.filter-container { display: flex; align-items: center; gap: 6px; position: relative; }
.filter-container label, .zoom-controls span { font-size: 12px; font-weight: 600; color: #111111; }
.filter-select, .filter-input { padding: 6px 10px; border-radius: 4px; border: 1px solid #70757A; font-family: var(--font-family); font-size: 12px; outline: none; color: #111; background-color: #FFF; }
.filter-input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.filter-input { width: 140px; }
.filter-input:focus, .filter-select:focus { border-color: #1A73E8; }

.multi-select-btn { width: 150px; text-align: left; background: #fff; padding: 6px 10px; border: 1px solid #70757A; border-radius: 4px; font-size: 12px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: space-between; align-items: center; }
.multi-select-dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #DADCE0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 4px; padding: 10px; z-index: 2000; max-height: 300px; overflow-y: auto; width: max-content; margin-top: 4px; }
.multi-select-dropdown label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-weight: 500; font-size: 12px; margin-bottom: 0; color: #111; }

.zoom-controls { display: flex; align-items: center; gap: 6px; background: #F1F3F4; padding: 4px; border-radius: 4px; border: 1px solid #DADCE0; }
.btn-zoom { background: white; border: 1px solid #DADCE0; border-radius: 4px; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-weight: bold; color: #111111; font-size: 14px;}
.btn-zoom:hover { background: #E8EAED; color: var(--primary-color); }


/* --- Board Container & Layout --- */
/* FIX: Der Container hat den grauen Hintergrund für freie Flächen */
.board-container { flex-grow: 1; overflow: auto; position: relative; background: #E8EAED; border-radius: var(--border-radius); box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #E0E0E0; user-select: none; }

/* FIX: Layout zwingt alles dazu, exakt auf Inhaltsgröße zu wachsen */
.board-layout { display: flex; width: max-content; min-width: 100%; height: max-content; padding-bottom: 60px; position: relative; }

/* Zeitachse */
.time-axis { min-width: 55px; position: sticky; left: 0; background: #FFFFFF; z-index: 30; border-right: 2px solid #DADCE0; height: max-content; display: flex; flex-direction: column; }

/* FIX: Der Inhaltbereich MUSS exakt die Höhe annehmen */
.time-axis-content { position: relative; height: calc(var(--timeline-hours) * var(--hour-height)); width: 100%; }

.time-label { position: absolute; width: 100%; text-align: right; padding-right: 8px; transform: translateY(-50%); margin-top: 0; line-height: 1; box-sizing: border-box; color: #111111; z-index: 10; pointer-events: none; }
.time-label span { background: rgba(255,255,255,0.9); padding: 2px 4px; border-radius: 3px; }
.time-label.hour { font-size: 0.85em; font-weight: 800; color: #111; }
.time-label.quarter { font-size: 0.7em; font-weight: 600; color: #3C4043; } 

/* Board */
.board { display: flex; gap: 0; padding: 0; height: max-content; align-items: flex-start; }

.facility-line { position: absolute; left: 0; right: 0; height: 3px; z-index: 5; pointer-events: none; }
.time-axis-content .facility-line { z-index: 4; } 
.facility-line.open-line { background-color: #1E8E3E; }
.facility-line.close-line { background-color: #D32F2F; }
.facility-line .line-label { position: absolute; left: 55px; top: -7px; display: inline-block; color: white; font-weight: 700; font-size: 11px; padding: 3px 10px; border-bottom-right-radius: 6px; border-top-right-radius: 6px; white-space: nowrap; z-index: 35; }
.facility-line.open-line .line-label { background-color: #1E8E3E; }
.facility-line.close-line .line-label { background-color: #D32F2F; }

/* FIX: Raum-Styles, weißer Hintergrund */
.room { width: 240px; min-width: 240px; display: flex; flex-direction: column; border-right: 1px solid #E8EAED; background: #FFFFFF; height: max-content; position: relative; }
.room.backlog { width: 160px; min-width: 160px; background: var(--backlog-bg); border-right: 1px solid var(--backlog-border); }
.room.collapsed { min-width: 50px; width: 50px; background: #E8EAED; height: auto; align-self: stretch; }

.room-header { padding: 8px 10px; background: #FFFFFF; display: flex; justify-content: space-between; align-items: flex-start; position: sticky; top: 0; z-index: 40; border-bottom: 2px solid var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.03); height: 56px; box-sizing: border-box; width: 100%; }
.backlog .room-header { background: var(--backlog-bg); border-bottom-color: var(--backlog-border); }
.room.collapsed .room-header { flex-direction: column; padding: 6px 4px; height: 56px; align-items: center; justify-content: center; }

.room-title-container { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.room-title { color: #111; padding: 0 4px; border-radius: 4px; font-weight: 700; font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.room-subtitle { color: #3C4043; padding: 0 4px; border-radius: 4px; font-weight: 600; font-size: 0.75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.room-actions { display: flex; gap: 2px; flex-shrink: 0; }
.icon-btn { background: none; border: 1px solid transparent; color: #3C4043; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--primary-color); background: #F1F3F4; border-color: #DADCE0; }

.collapsed-title { display: none; position: sticky; top: 70px; transform: rotate(180deg); writing-mode: vertical-rl; font-weight: 700; color: #3C4043; font-size: 0.85em; white-space: nowrap; z-index: 10; pointer-events: none; align-self: center; margin: 15px auto; }
.room.collapsed .room-title-container { display: none; }
.room.collapsed .room-actions { flex-direction: column; width: 100%; align-items: center; }
.room.collapsed .collapsed-title { display: block; }

/* FIX: Der Inhalt hat die fixierte Zeit-Höhe in sich verankert */
.room-content { position: relative; height: calc(var(--timeline-hours) * var(--hour-height)); width: 100%; cursor: crosshair; }
.room.collapsed .room-content { display: none; }


.grid-line { position: absolute; left: 0; width: 100%; pointer-events: none; box-sizing: border-box; }
.grid-line.quarter { border-bottom: 1px dashed #E2E8F0; }
.grid-line.hour { border-bottom: 2px solid #CBD5E1; } 

.selection-indicator { position: absolute; left: 4px; width: calc(100% - 8px); background-color: rgba(26, 115, 232, 0.2); border: 2px solid #1A73E8; border-radius: 4px; pointer-events: none; z-index: 50; box-sizing: border-box; }
.drop-indicator { position: absolute; width: calc(100% - 8px); left: 4px; background-color: rgba(26, 115, 232, 0.15); border: 2px dashed #1A73E8; border-radius: 4px; pointer-events: none; z-index: 20; box-sizing: border-box; }
.overlap-alert { position: absolute; left: 4px; width: calc(100% - 8px); background: rgba(255, 0, 0, 0.4); border-radius: 4px; border: 2px dashed #FF0000; z-index: 10; pointer-events: none; mix-blend-mode: multiply; box-sizing: border-box; }

/* Events */
.event { padding: 4px 22px 4px 6px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); cursor: grab; border-left: 4px solid; position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; overflow: hidden; transition: box-shadow 0.2s, filter 0.2s, opacity 0.2s; z-index: 6; border-top: 1px solid rgba(0,0,0,0.05); border-right: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); color: #111; }
.event.cat-Ehrengaeste { background-color: rgba(149, 27, 129, 0.85); border-left-color: #951b81; color: #FFFFFF; }
.event.cat-Showacts { background-color: rgba(239, 125, 0, 0.85); border-left-color: #ef7d00; color: #FFFFFF; }
.event.cat-FanMeetup { background-color: rgba(239, 125, 0, 0.85); border-left-color: #ef7d00; color: #FFFFFF; } 
.event.cat-Vortraege { background-color: rgba(65, 192, 240, 0.85); border-left-color: #41c0f0; color: #111111; }
.event.cat-ConnichiCouch { background-color: rgba(65, 192, 240, 0.85); border-left-color: #41c0f0; color: #111111; } 
.event.cat-Japanforschung { background-color: rgba(65, 192, 240, 0.85); border-left-color: #41c0f0; color: #111111; } 
.event.cat-Workshops { background-color: rgba(133, 188, 33, 0.85); border-left-color: #85bc21; color: #111111; } 
.event.cat-Wettbewerbe { background-color: rgba(230, 0, 100, 0.85); border-left-color: #e60064; color: #FFFFFF; }
.event.cat-Rahmenprogramm { background-color: rgba(239, 125, 0, 0.85); border-left-color: #ef7d00; color: #FFFFFF; }
.event.cat-Intern { background-color: rgba(240, 240, 240, 0.95); border-left-color: #B0B0B0; color: #111111; }
.event.cat-Anmerkungen { background-color: rgba(255, 205, 210, 0.95); border-left-color: #ef9a9a; color: #111111; }
.event.cat-ohneBereich { background-color: rgba(230, 230, 230, 0.95); border-left-color: #5F6368; color: #111111; }

.event.is-canceled { opacity: 0.6; filter: grayscale(50%); }
.event.is-canceled span.text { text-decoration: line-through; opacity: 0.8; }
.event:hover { z-index: 12; box-shadow: 0 4px 8px rgba(0,0,0,0.2); filter: brightness(0.95); }
.event:active { cursor: grabbing; }
.event.dragging { opacity: 0.4; box-shadow: 0 0 0 2px #1A73E8; z-index: 100; }

.timeline-room .event { position: absolute; width: calc(100% - 8px); left: 4px; }
.backlog .event { position: relative !important; top: auto !important; height: auto !important; width: calc(100% - 16px) !important; left: 8px !important; margin-top: 8px; margin-bottom: 0; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; border: 1px solid rgba(255,255,255,0.3);}
.status-Geplant { background-color: #D93025; }
.status-Zugesagt { background-color: #1E8E3E; }
.status-Offen { background-color: #5F6368; } 

.event.status-Geplant { border-left-color: #D93025 !important; }
.event.status-Zugesagt { border-left-color: #1E8E3E !important; }
.event.status-Offen { border-left-color: #5F6368 !important; } 

.event-title { font-weight: 700; font-size: 0.82em; line-height: 1.2; display: flex; align-items: flex-start; gap: 5px; }
.event-title span.text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event-leader { font-size: 0.7em; opacity: 0.85; font-weight: 600; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-time { font-size: 0.7em; font-weight: 600; opacity: 0.95; white-space: nowrap; margin-top: auto;}
.event-image-preview { width: 100%; flex: 1; min-height: 0; height: auto; object-fit: cover; border-radius: 3px; margin-top: 4px; border: 1px solid rgba(0,0,0,0.1); pointer-events: none; }

.btn-edit { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: rgba(255,255,255,0.9); color: var(--primary-color); border: 1px solid #DADCE0; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.event:hover .btn-edit, .event:focus-within .btn-edit { opacity: 1; }
.btn-edit:hover { background: #F1F3F4; }

/* List View */
.list-container { flex-grow: 1; overflow: auto; background: white; border-radius: var(--border-radius); box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 1px solid #E0E0E0; }
.event-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; table-layout: fixed; }
.event-table th { position: sticky; top: 0; background: #FFFFFF; padding: 12px 10px; font-weight: 700; border-bottom: 2px solid var(--primary-color); z-index: 10; color: #111111; box-shadow: 0 2px 4px rgba(0,0,0,0.03); cursor: pointer; transition: background 0.2s; }
.event-table th:hover { background: #F8F9FA; }
.event-table th span.sort-icon { font-size: 10px; margin-left: 4px; color: #9AA0A6; }
.event-table td { padding: 4px 6px; border-bottom: 1px solid #E8EAED; vertical-align: middle; height: 36px; box-sizing: border-box; } 
.event-table tr:hover td { background: #F8F9FA; }

/* Status-Spalte Einfärbung und Kontrast-Optimierungen */
.status-cell-Geplant { background-color: #D93025 !important; }
.status-cell-Zugesagt { background-color: #1E8E3E !important; }
.status-cell-Offen { background-color: #5F6368 !important; }

.status-cell-Geplant select,
.status-cell-Zugesagt select,
.status-cell-Offen select {
    color: #FFFFFF !important;
    font-weight: 700;
}

/* Lesbarkeit bei Fokus (weißer Hintergrund) und in der Options-Liste */
.status-cell-Geplant select:focus,
.status-cell-Zugesagt select:focus,
.status-cell-Offen select:focus,
.status-cell-Geplant select option,
.status-cell-Zugesagt select option,
.status-cell-Offen select option {
    color: #111111 !important;
    background-color: #FFFFFF !important;
}

.grid-input, .grid-select { width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent; padding: 6px 8px; font-family: inherit; font-size: 13px; color: #111111; border-radius: 4px; transition: all 0.15s; }
.grid-input:focus, .grid-select:focus { border-color: #1A73E8; background: #FFFFFF; outline: none; box-shadow: 0 0 0 1px #1A73E8, inset 0 1px 2px rgba(0,0,0,0.1); }
.grid-input.title-field { font-weight: 600; }
.time-cell-container { display: flex; align-items: center; gap: 4px; }
.time-grid-input { width: 75px; padding: 4px; text-align: center; }

.btn-edit-list { display: inline-flex; align-items: center; justify-content: center; height: 26px; background: #F1F3F4; border: 1px solid #DADCE0; border-radius: 4px; padding: 0 8px; cursor: pointer; color: #3C4043; font-weight: 600; font-size: 11px; gap: 4px; transition: all 0.2s; box-sizing: border-box; vertical-align: middle; }
.btn-edit-list:hover { background: #E8EAED; border-color: #9AA0A6; color: #111 !important; }
.btn-delete-list { background: #FFFFFF; color: #D3000F; border: 1px solid #FCE8E6; }
.btn-delete-list:hover { background: #FCE8E6; border-color: #D3000F; color: #D3000F !important; }
.btn-edit-list svg, .btn-delete-list svg { width: 12px; height: 12px; }

/* Modals */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px); justify-content: center; align-items: center; z-index: 1000; }
.modal { background: #FFF; padding: 24px; border-radius: 6px; width: 580px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.modal h3 { margin-top: 0; margin-bottom: 20px; color: #111; font-size: 1.2em;}
.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 4px; font-size: 0.85em; font-weight: 700; color: #111; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="time"], .form-group input[type="url"], .form-group input[type="number"], .form-group select, .form-group textarea { width: 100%; padding: 8px; border: 2px solid #DADCE0; border-radius: 4px; box-sizing: border-box; font-family: var(--font-family); font-size: 0.95em; color: #111; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #1A73E8; }
.form-group.checkbox-row { display: flex; align-items: center; gap: 8px; }
.form-group.checkbox-row input[type="checkbox"] { width: auto; margin: 0; }
.form-group.checkbox-row label { margin-bottom: 0; font-weight: 600; cursor: pointer; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

.modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.btn-cancel { background: #FFFFFF; color: #111111; border: 1px solid #70757A; font-weight: 600;}
.btn-cancel:hover { background: #F1F3F4; color: #000000 !important; border-color: #111111; }
.btn-delete { background: #FFFFFF; color: #D3000F; border: 1px solid #D3000F; font-weight: 600;}
.btn-delete:hover { background: #D3000F; color: #FFFFFF !important; border-color: #D3000F; }

.checkbox-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-grid label, .checkbox-list-container label { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 0.9em; cursor: pointer; margin-bottom: 0; color: #111; }
.checkbox-list-container { display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto; border: 2px solid #DADCE0; padding: 10px; border-radius: 4px; background: #FAFAFA; }

.image-preview-container { margin-top: 10px; display: none; }
.image-preview-container img { max-width: 100px; max-height: 100px; border-radius: 4px; border: 1px solid #DADCE0; object-fit: cover; }

.event-footer-meta { font-size: 10px; color: #9AA0A6; display: flex; justify-content: space-between; align-items: center; margin-top: 15px; border-top: 1px solid #E0E0E0; padding-top: 10px; }
.event-id-display { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.event-id-display:hover { color: #111; }
.event-last-modified { font-style: italic; text-align: right; }

svg { width: 14px; height: 14px; fill: currentColor; }

/* Admin Settings Tabs */
.admin-tabs { display: flex; border-bottom: 1px solid #DADCE0; margin-bottom: 15px; }
.admin-tab { padding: 8px 16px; cursor: pointer; font-weight: 600; font-size: 13px; color: #5F6368; border-bottom: 2px solid transparent; }
.admin-tab:hover { background: #F1F3F4; color: #111; }
.admin-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.admin-tab-content { display: none; }
.admin-tab-content.active { display: block; }

/* Custom room dropdown in user management */
.user-room-dropdown-container {
    position: relative;
    width: 100%;
}
.user-room-dropdown-btn {
    border: 1px solid #70757A;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.form-group .user-room-dropdown-btn {
    border: 2px solid #DADCE0;
    padding: 8px;
    font-size: 0.95em;
    font-family: var(--font-family);
    color: #111;
    border-radius: 4px;
    box-sizing: border-box;
    height: 38px;
}
.form-group .user-room-dropdown-btn:hover {
    border-color: #70757A;
}
.user-room-dropdown-btn::after {
    content: "▼";
    font-size: 8px;
    color: #5F6368;
    margin-left: 8px;
}
.user-room-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #DADCE0;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 2100;
    max-height: 200px;
    overflow-y: auto;
    padding: 5px 0;
    margin-top: 4px;
}
.user-room-dropdown-content label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 0;
    color: #111;
    transition: background 0.15s ease;
}
.user-room-dropdown-content label:hover {
    background: #F1F3F4;
}

/* History List Container */
.history-list {
    max-height: 350px;
    overflow-y: auto;
    margin-top: 10px;
    border: 1px solid #DADCE0;
    border-radius: 4px;
    padding: 10px;
    background: #FAFAFA;
}

/* Modal bottom expansion when allowed rooms dropdown is open */
.modal {
    transition: padding-bottom 0.25s ease-in-out;
}
.modal.has-open-dropdown {
    padding-bottom: 220px;
}

/* Consolidation Dropdowns */
.header-dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 5px);
    background-color: #FFFFFF;
    min-width: 185px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid #DADCE0;
    border-radius: 6px;
    z-index: 100;
    padding: 6px 0;
    flex-direction: column;
}
.dropdown-menu.show {
    display: flex;
}
.dropdown-menu button, .dropdown-menu a {
    background: none;
    border: none;
    color: #3C4043;
    padding: 10px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    display: block;
    transition: background-color 0.15s, color 0.15s;
}
.dropdown-menu button:hover, .dropdown-menu a:hover {
    background-color: #F1F3F4;
    color: var(--primary-color);
}
.dropdown-menu .dropdown-divider {
    height: 1px;
    background-color: #E8EAED;
    margin: 6px 0;
}
.dropdown-menu .dropdown-user-header {
    padding: 10px 16px;
    font-size: 11px;
    color: #5F6368;
    background-color: #F8F9FA;
    border-bottom: 1px solid #E8EAED;
    margin-top: -6px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.dropdown-menu .dropdown-user-header .user-name {
    font-weight: 700;
    color: #111;
    font-size: 13px;
    margin-bottom: 2px;
}
.dropdown-menu .dropdown-user-header .user-role {
    font-weight: 600;
    font-size: 11px;
}

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

/* --- Print Styles --- */
@media print {
    @page {
        size: A4 landscape;
        margin: 5mm;
    }
    
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Show print-only header */
    .print-only-header {
        display: block !important;
        text-align: center;
        margin-bottom: 10px;
        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 5px;
    }
    .print-only-header h1 {
        font-size: 16px;
        margin: 0;
        font-weight: 800;
        color: var(--accent-color);
    }
    .print-only-header h2 {
        font-size: 12px;
        margin: 3px 0 0 0;
        font-weight: 600;
        color: #5F6368;
    }
    
    /* Hide all UI elements, header, buttons, dropdowns, and overlays */
    .header,
    .header-top,
    .header-bottom,
    .dropdown-menu,
    .modal-overlay,
    .zoom-controls,
    .actions,
    .toolbar-right,
    .btn-edit,
    .icon-btn,
    .admin-tabs,
    .admin-element,
    .info-btn-planner {
        display: none !important;
    }
    
    /* Reset scroll and page boundaries for print */
    html, body {
        overflow: visible !important;
        height: auto !important;
        background: #FFFFFF !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .board-container {
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
        background: #FFFFFF !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .board-layout {
        width: 100% !important;
        max-width: 100% !important;
        height: calc(56px + var(--print-active-height, 1080px)) !important;
        padding-bottom: 0 !important;
        display: flex !important;
        overflow: hidden !important;
    }
    
    /* Hide backlog column entirely */
    .room.backlog {
        display: none !important;
    }
    
    /* Crop empty hours using offset translation and height limitation */
    .time-axis-content,
    .room-content {
        transform: translateY(calc(-1 * var(--print-offset-y, 0px))) !important;
        height: var(--print-active-height, 1080px) !important;
    }
    
    .time-axis,
    .room {
        height: calc(56px + var(--print-active-height, 1080px)) !important;
        overflow: hidden !important;
    }
    
    /* Format the time-axis for print side-by-side layout */
    .time-axis {
        position: relative !important;
        left: auto !important;
        border-right: 1px solid #DADCE0 !important;
        min-width: 50px !important;
        width: 50px !important;
    }
    
    .board {
        display: flex !important;
        flex-direction: row !important;
        flex-grow: 1 !important;
        width: calc(100% - 50px) !important;
        height: calc(56px + var(--print-active-height, 1080px)) !important;
    }
    
    /* Distribute room column widths evenly to fit A4 Landscape width */
    .room.timeline-room {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        border-right: 1px solid #DADCE0 !important;
        background: #FFFFFF !important;
    }
    
    .room.timeline-room.collapsed {
        flex: 0 0 35px !important;
        width: 35px !important;
        min-width: 35px !important;
        align-self: stretch !important;
    }
    
    /* Make headers wrap and fit in narrow printed columns */
    .room-header {
        height: auto !important;
        min-height: 56px !important;
        padding: 4px 6px !important;
        box-sizing: border-box !important;
        position: relative !important;
        top: auto !important;
    }
    
    .room-title {
        white-space: normal !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }
    
    .room-subtitle {
        white-space: normal !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
    }
    
    /* Hide the status dot ampel in print */
    .status-dot {
        display: none !important;
    }
    
    /* Position the Hallenöffnung label below the line in print to prevent clipping at the top */
    .facility-line.open-line .line-label {
        top: 2px !important;
    }
    
    /* Prevent time labels from shifting above the top boundary when printed */
    .time-label {
        transform: none !important;
    }
    
    /* Hide elements programmatically determined to be out of the active print range */
    .print-hide-el {
        display: none !important;
    }
    
    /* Optimize event text, padding, and image previews for print */
    .event {
        padding: 4px 4px 4px 6px !important;
        box-shadow: none !important;
        border: 1px solid rgba(0,0,0,0.15) !important;
        border-left-width: 4px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    
    .event-title {
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
    
    /* Let title and leader text expand and fill vertical space */
    .event-title span.text {
        -webkit-line-clamp: unset !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .event-leader {
        font-size: 8px !important;
        padding-left: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    
    .event-time {
        font-size: 8px !important;
    }
    
    .event-image-preview {
        max-height: 60px !important;
        margin-top: 2px !important;
    }
}

/* --- Mobile Viewport Optimizations --- */
.mobile-menu-toggle, .mobile-zoom {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobile-menu-toggle {
        display: inline-flex !important;
    }
    .mobile-zoom {
        display: flex !important;
    }
    .toolbar-right .zoom-controls {
        display: none !important;
    }
    .logo-container {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .header:not(.menu-open) .actions {
        display: none !important;
    }
    .header:not(.menu-open) .header-bottom {
        display: none !important;
    }
    .header-top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .actions {
        justify-content: center !important;
        gap: 6px !important;
    }
    .header-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .header-bottom > div {
        justify-content: center !important;
    }
    .toolbar-right {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 10px !important;
    }
    .filter-container {
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .filter-input,
    .multi-select-btn,
    .filter-select {
        flex-grow: 1 !important;
        width: auto !important;
        max-width: none !important;
    }
    .toolbar-right .zoom-controls {
        justify-content: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media screen and (max-width: 600px) {
    .modal {
        width: 100% !important;
        max-width: calc(100% - 24px) !important;
        padding: 16px !important;
        margin: 12px !important;
        box-sizing: border-box !important;
    }
    .form-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .multi-select-dropdown {
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        left: 0 !important;
        right: 0 !important;
    }
}