:root {
    --time-col-width: 60px;
    --day-col-width: 300px;
    --slot-height: 60px;
    --header-height: 60px;
    --virgin-red: #AF231C;
    --virgin-purple: #5C068C;
    --virgin-purple-light: #F3E8F5;
    --virgin-teal: #71d6e0;
    --virgin-border: #7C08BD;
    --custom-blue: #1d4ed8;
}

body {
    font-family: 'Outfit', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f3f4f6;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #1f2937;
}

/* --- Dark Mode Overrides --- */
body.dark {
    background-color: #111827;
    color: #f3f4f6;
}

body.dark .bg-white {
    background-color: #1f2937;
}

body.dark .bg-gray-50 {
    background-color: #111827;
}

body.dark .border-gray-200,
body.dark .border-gray-300 {
    border-color: #374151;
}

body.dark .text-gray-800 {
    color: #f9fafb;
}

body.dark .text-gray-700 {
    color: #d1d5db;
}

body.dark .text-gray-600 {
    color: #9ca3af;
}

body.dark .text-gray-500 {
    color: #9ca3af;
}

body.dark .text-gray-400 {
    color: #6b7280;
}

body.dark #time-column,
body.dark #schedule-viewport,
body.dark .day-header {
    background-color: #1f2937;
    border-color: #374151;
}

body.dark .day-column {
    border-right: 1px solid #374151;
    background-image: linear-gradient(to bottom, #1f2937 1px, transparent 1px);
}

body.dark .day-column::before {
    background-image: linear-gradient(to bottom, #4b5563 1px, transparent 1px);
}

body.dark .day-header {
    color: #e5e7eb;
    border-bottom-color: #374151;
}

body.dark .time-label {
    color: #9ca3af;
}

body.dark .modal-content,
body.dark #context-menu,
body.dark #search-results {
    background-color: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark .search-result-item:hover {
    background-color: #374151;
}

body.dark .ctx-item:hover {
    background-color: #374151;
    filter: brightness(1.2);
}

body.dark .ctx-divider {
    background-color: #374151;
}

body.dark .form-input {
    background-color: #111827;
    border-color: #4b5563;
    color: white;
}

body.dark #search-input {
    background-color: #374151;
    color: white;
    border-color: #4b5563;
}

body.dark #search-input::placeholder {
    color: #9ca3af;
}

/* --- Common Styles --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 7500;
    /* Increased to be above mobile modal (7000) */
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.modal-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 450px;
    overflow: hidden;
    animation: modalPop 0.2s ease-out;
}

@keyframes modalPop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes eventFlash {

    0%,
    100% {
        box-shadow: 0 0 0 4px #f59e0b;
        transform: scale(1);
    }

    25% {
        box-shadow: 0 0 0 8px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.6);
        transform: scale(1.08);
    }

    50% {
        box-shadow: 0 0 0 4px #f59e0b;
        transform: scale(1);
    }

    75% {
        box-shadow: 0 0 0 8px #f59e0b, 0 0 20px rgba(245, 158, 11, 0.6);
        transform: scale(1.08);
    }
}

.event-flash {
    animation: eventFlash 1s ease-in-out;
    z-index: 200 !important;
    opacity: 1 !important;
    /* Ensure flash event is fully visible */
}

/* Dim all events when one is flashing */
#schedule-grid.dimmed-for-flash .event-card {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Keep the flashing event fully visible */
#schedule-grid.dimmed-for-flash .event-flash {
    opacity: 1 !important;
}

/* --- Upload Overlay --- */
#upload-screen {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Changed from center to prevent clipping */
    padding: 20px;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    /* Enable vertical scrolling */
}

/* Ensure content doesn't get clipped when centered */
#upload-screen::before {
    content: '';
    flex: 0 0 auto;
    height: 20px;
    /* Top spacer */
}

#upload-screen::after {
    content: '';
    flex: 0 0 auto;
    height: 20px;
    /* Bottom spacer */
}

/* When content is taller than screen, justify-content: center breaks scrolling in some browsers without margin auto on child */
#upload-screen>* {
    flex-shrink: 0;
}

body.dark #upload-screen {
    background-color: #111827;
    color: white;
}

.drop-zone {
    width: 100%;
    max-width: 500px;
    height: 300px;
    border: 3px dashed #cbd5e1;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #f8fafc;
    transition: all 0.2s;
    cursor: pointer;
}

body.dark .drop-zone {
    background-color: #1f2937;
    border-color: #4b5563;
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--virgin-red);
    background: #fef2f2;
}

body.dark .drop-zone:hover {
    background-color: #374151;
}

/* --- Main Layout --- */
#app-container {
    flex: 1;
    display: none;
    /* Hidden until data loaded */
    overflow: hidden;
    position: relative;
}

#time-column {
    width: var(--time-col-width);
    flex-shrink: 0;
    background: var(--virgin-purple);
    border-right: 1px solid var(--virgin-border);
    overflow-y: hidden;
    /* padding-top: var(--header-height); Removed to allow sticky header to sit at top */
    z-index: 20;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    position: relative;
    color: white;
}

#schedule-viewport {
    flex: 1;
    overflow: auto;
    position: relative;
    background: #fff;
    scroll-behavior: smooth;
    user-select: none;
}

#schedule-grid {
    display: flex;
    min-width: fit-content;
    position: relative;
    transition: opacity 0.2s;
}

.day-column {
    width: var(--day-col-width);
    min-width: var(--day-col-width);
    border-right: 1px solid var(--virgin-border);
    position: relative;
    background-image: linear-gradient(to bottom, #f3f4f6 1px, transparent 1px);
    background-size: 100% 15px;
    cursor: crosshair;
}

.day-column:nth-child(even) {
    background-color: var(--virgin-purple-light);
    /* Light Virgin Purple */
}

body.dark .day-column:nth-child(even) {
    background-color: #111827;
}

/* Hour markers - Made Significantly Bolder */
.day-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, #94a3b8 2px, transparent 2px);
    /* Darker and 2px thick */
    background-size: 100% 60px;
    pointer-events: none;
}

/* Drag Preview Box */
.drag-preview {
    position: absolute;
    background-color: rgba(29, 78, 216, 0.4);
    border: 2px solid var(--custom-blue);
    border-radius: 4px;
    width: 100%;
    z-index: 200;
    pointer-events: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.add-event-btn {
    position: absolute;
    background-color: rgba(29, 78, 216, 0.2);
    border: 2px dashed var(--custom-blue);
    border-radius: 4px;
    width: 100%;
    z-index: 200;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--custom-blue);
    transition: all 0.2s;
}

.add-event-btn:hover {
    background-color: rgba(29, 78, 216, 0.4);
    transform: scale(1.02);
}

.day-header {
    min-height: var(--header-height);
    height: auto;
    padding-bottom: 4px;
    position: sticky;
    top: 0;
    background: var(--virgin-purple);
    border-bottom: 2px solid var(--virgin-border);
    border-right: 1px solid var(--virgin-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 150;
    /* Higher than event cards (100) */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin: 0;
    margin-right: -1px;
    width: calc(100% + 1px);
}

.time-label {
    position: absolute;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
    transform: translateY(-50%);
    background-color: transparent;
}

.day-name-text {
    color: #9ca3af;
}

.port-text {
    color: var(--virgin-teal);
}

.time-column-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: var(--virgin-purple);
    border-bottom: 2px solid var(--virgin-border);
    z-index: 50;
}

body.dark .time-column-header {
    background-color: #1f2937;
    border-color: #374151;
}

/* --- Event Cards --- */
.event-card {
    position: absolute;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 0.70rem;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-left: 3px solid rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    z-index: 1;
    background-color: #e2e8f0;
    user-select: none;
    color: #111827;
}

body:not(.adding-event-mode) .event-card:hover {
    z-index: 100 !important;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.event-title {
    font-weight: 700;
    margin-bottom: 2px;
    pointer-events: none;
}

.event-loc {
    font-size: 0.65rem;
    opacity: 0.9;
    pointer-events: none;
}



/* --- Logic States --- */
.event-card.single-instance {
    background-color: var(--virgin-red) !important;
    color: white !important;
    border: 0 !important;
    border-left: 3px solid #7a1510 !important;
}

.event-card.custom-event {
    background-color: var(--custom-blue) !important;
    color: white !important;
    border: 0 !important;
    border-left: 3px solid #1e3a8a !important;
}

.event-card.is-attending {
    background-color: #10b981 !important;
    color: white !important;
    border: 0 !important;
    border-left: 3px solid #065f46 !important;
    box-shadow: 0 0 0 2px #059669;
    z-index: 10;
}

.event-card.is-sibling-attended {
    opacity: 0.85;
    border-left-color: #86efac !important;
    border-left-width: 4px !important;
}

.event-card.is-dimmed {
    opacity: 0.85;
    filter: grayscale(30%);
}



.event-card.is-sibling-highlight {
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 0 0 3px #3b82f6 !important;
    z-index: 50 !important;
    transform: scale(1.02);
}

/* Hover Dim Mode */
#schedule-grid.dim-mode .event-card {
    opacity: 0.5;
    transition: opacity 0.1s;
}

#schedule-grid.dim-mode .event-card.is-hovered-series {
    opacity: 1 !important;
    z-index: 50;
    filter: none !important;
}



/* --- Search Results Dropdown --- */
#search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 5000;
    display: none;
}

.search-result-item {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: #f9fafb;
}

body.dark .search-result-item {
    border-color: #374151;
}

/* --- Tooltip --- */
#tooltip {
    position: fixed;
    background: rgba(17, 24, 39, 0.98);
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    width: 320px;
    pointer-events: auto;
    /* Allow hovering over tooltip */
    z-index: 5000;
    display: none;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    border: 1px solid #374151;
}


#tooltip img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 12px;
    display: block;
}

#tooltip h4 {
    margin: 0 0 4px 0;
    color: #fbbf24;
    font-size: 1rem;
}

#tooltip .meta {
    color: #9ca3af;
    font-size: 0.8rem;
    border-bottom: 1px solid #374151;
    padding-bottom: 8px;
    margin-bottom: 8px;
    font-weight: bold;
}

#tooltip .meta div {
    margin-bottom: 2px;
}

#tooltip p {
    margin: 0 0 10px 0;
    line-height: 1.5;
    color: #d1d5db;
    font-size: 0.8rem;
}

#tooltip .siblings-list {
    margin-top: 8px;
    border-top: 1px solid #374151;
    padding-top: 8px;
    font-size: 0.75rem;
    color: #93c5fd;
}

#tooltip .sibling-item {
    margin-bottom: 2px;
}

#toolbar-tooltip {
    position: fixed;
    background: rgba(17, 24, 39, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 6000;
    display: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.15s ease;
}

#toolbar-tooltip.visible {
    opacity: 1;
}

/* --- Context Menu --- */
#context-menu {
    position: fixed;
    background: white;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    width: 200px;
    z-index: 8000;
    /* Increased to be above mobile modal (7000) */
    display: none;
    overflow: hidden;
    font-size: 0.85rem;
    color: #374151;
}

@media (max-width: 768px) {
    #context-menu {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 400px;
        border-radius: 16px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    /* Overlay for context menu on mobile */
    #context-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 7900;
        /* Just below context menu (8000) */
        backdrop-filter: blur(2px);
    }

    #context-menu-overlay.active {
        display: block;
    }

    .ctx-item {
        padding: 20px 24px !important;
        font-size: 18px;
        border-bottom: 1px solid #e5e7eb;
    }

    .ctx-item:last-child {
        border-bottom: none;
    }

    /* Hide dividers on mobile to avoid doubling up with the new borders */
    .ctx-divider {
        display: none !important;
    }

    body.dark .ctx-item {
        border-color: #374151;
    }
}

.ctx-item {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ctx-item:hover {
    background-color: #f3f4f6;
    color: #111827;
}

.ctx-item.danger {
    color: #ef4444;
}

.ctx-item.danger:hover {
    background-color: #fef2f2;
}

.ctx-divider {
    height: 1px;
    background-color: #e5e7eb;
    margin: 4px 0;
}

/* --- Custom Event Modal specific --- */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.form-input {
    width: 100%;
    border: 1px solid #d1d5db;
    /* rounded: 0.25rem; Removed invalid property */
    padding: 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
}

.form-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 1px #ef4444;
}

/* --- Dropdown Menu --- */
#dropdown-menu {
    position: absolute;
    top: 45px;
    right: 20px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    width: 180px;
    z-index: 3000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

body.dark #dropdown-menu {
    background: #1f2937;
    border-color: #374151;
}

/* --- Attendance Panel --- */
.attendance-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 4500;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-in-out;
    background: white;
    height: 100%;
}

/* --- Smart Scheduler Wizard --- */
.wizard-modal {
    width: 90vw;
    max-width: 800px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .wizard-modal {
        width: 100%;
        height: 100%;
        max-width: none;
        border-radius: 0;
    }
}

.wizard-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    flex-shrink: 0;
}

.wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f9fafb;
}

.wizard-footer {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: white;
    flex-shrink: 0;
}

.btn-primary {
    background-color: var(--virgin-red);
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #8a1c16;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.btn-secondary:hover {
    background-color: #f3f4f6;
}

body.dark .wizard-modal,
body.dark .wizard-header,
body.dark .wizard-footer {
    background-color: #1f2937;
    border-color: #374151;
    color: white;
}

body.dark .wizard-body {
    background-color: #111827;
}

body.dark .text-gray-800 {
    color: #f3f4f6;
}

body.dark .text-gray-600 {
    color: #9ca3af;
}

body.dark .bg-gray-50 {
    background-color: #374151;
}

body.dark .btn-secondary {
    background-color: #374151;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark .btn-secondary:hover {
    background-color: #4b5563;
}


.attendance-panel.open {
    right: 0;
}

.attendance-panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
}

.attendance-panel-description {
    padding: 0.75rem 1.5rem;
    background: #fef2f2;
    border-bottom: 1px solid #fee2e2;
}

.attendance-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.missing-event-group {
    margin-bottom: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: white;
    overflow: hidden;
}

.missing-event-header {
    padding: 0.75rem 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #1f2937;
}

.missing-event-instance {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.missing-event-instance:last-child {
    border-bottom: none;
}

.missing-event-instance:hover {
    background: #f9fafb;
}

.missing-event-datetime {
    font-size: 0.875rem;
    color: #374151;
}

.missing-event-date {
    font-weight: 600;
    margin-bottom: 0.125rem;
}

.missing-event-time {
    color: #6b7280;
    font-size: 0.8rem;
}

.missing-event-location {
    font-size: 0.75rem;
    color: #9ca3af;
    font-style: italic;
}

/* Dark Mode for Attendance Panel */
body.dark .attendance-panel {
    background: #1f2937;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
}

body.dark .attendance-panel-header {
    background: #111827;
    border-color: #374151;
}

body.dark .attendance-panel-header h3 {
    color: #f3f4f6;
}

body.dark .attendance-panel-description {
    background: #7f1d1d;
    border-color: #991b1b;
}

body.dark .attendance-panel-description p {
    color: #fecaca;
}

body.dark .missing-event-group {
    background: #111827;
    border-color: #374151;
}

/* --- Agenda Panel --- */
.agenda-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 4500;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-in-out;
    background: white;
    height: 100%;
}

.agenda-panel.open {
    right: 0;
}

.agenda-panel-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f9fafb;
}

.agenda-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.agenda-conflict {
    background-color: #fef2f2 !important;
    border-color: #fca5a5 !important;
}

/* Dark Mode for Agenda Panel */
body.dark .agenda-panel {
    background: #1f2937;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
}

body.dark .agenda-conflict {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
}

body.dark .agenda-panel-header {
    background: #111827;
    border-color: #374151;
}

body.dark .agenda-panel-header h3 {
    color: #f3f4f6;
}

body.dark .missing-event-header {
    background: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
}

body.dark .missing-event-instance {
    border-color: #374151;
}

body.dark .missing-event-instance:hover {
    background: #374151;
}

body.dark .missing-event-datetime {
    color: #d1d5db;
}

body.dark .missing-event-time {
    color: #9ca3af;
}

body.dark .missing-event-location {
    color: #6b7280;
}

.conflict-warning {
    margin-top: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    font-size: 0.7rem;
    color: #dc2626;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.missing-event-instance.has-conflict {
    border-left: 3px solid #ef4444;
}

/* Dark Mode for conflict warning */
body.dark .conflict-warning {
    background: #7f1d1d;
    border-color: #991b1b;
    color: #fca5a5;
}

/* --- Toggle Switch --- */
input:checked~.toggle-dot {
    transform: translateX(100%);
    background-color: #10b981;
    /* green-500 */
}

input:checked~.toggle-bg {
    background-color: #d1fae5;
    /* green-100 */
}

.toggle-dot {
    top: -2px;
    /* Adjust for alignment */
    left: -2px;
    transition: all 0.3s ease-in-out;
}

/* Ensure label doesn't shrink */
.missing-event-header label {
    flex-shrink: 0;
}

/* --- Tabs --- */
.tab-active {
    border-bottom-color: #AF231C !important;
    color: #AF231C !important;
    font-weight: 600;
    background-color: white;
}

body.dark .tab-active {
    background-color: #1f2937;
    color: #ef4444 !important;
    /* Lighter red for dark mode */
    border-bottom-color: #ef4444 !important;
}

/* --- Optional Event in Grid --- */
.event-card.is-optional {
    opacity: 0.75;
    filter: grayscale(20%);
    border-style: dashed !important;
}

/* Ensure attending optional events keep the dashed border but lose opacity/grayscale if desired, 
   or keep it all. User said "lightly dimmed and dashed". 
   Let's keep the base .is-optional styles. 
   However, .is-attending has !important on border-style usually? 
   No, .is-attending has border-left: 3px solid. 
   We need to override that. */

.event-card.is-optional.is-attending {
    border-style: dashed !important;
    opacity: 0.85 !important;
    /* Slightly less dimmed than non-attending optional */
    filter: grayscale(5%) !important;
}

#schedule-grid.dim-mode .event-card.is-optional.is-attending:not(.is-sibling-highlight) {
    opacity: 0.5 !important;
}

.event-card.is-optional:hover,
.event-card.is-optional.is-attending:hover,
.event-card.is-optional.is-attending.is-sibling-highlight {
    opacity: 1 !important;
    filter: none !important;
    z-index: 200 !important;
}

/* Past Event Dimming (Overrides Optional and Hover) */
.event-card.is-past,
.event-card.is-past:hover,
.event-card.is-optional.is-past,
.event-card.is-optional.is-past:hover {
    opacity: 0.5 !important;
    filter: grayscale(70%) !important;
}

/* --- Search States (Moved to end for precedence) --- */
.event-card.is-search-dimmed,
.event-card.is-optional.is-search-dimmed,
.event-card.is-optional.is-attending.is-search-dimmed {
    opacity: 0.1 !important;
}

.show-hidden-mode .event-card.is-optional {
    opacity: 1 !important;
}

.event-card.is-optional.is-attending.is-search-dimmed {
    opacity: 0.1 !important;
    filter: grayscale(100%) !important;
    z-index: 0 !important;
    transition: opacity 0.2s, filter 0.2s;
}

.event-card.is-search-dimmed:hover {
    opacity: 1 !important;
    filter: none !important;
    z-index: 100 !important;
}

.event-card.is-search-match {
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 0 0 3px #f59e0b !important;
    z-index: 60 !important;
}

/* --- Hidden Manager Modal --- */
#hidden-manager-modal .modal-content {
    max-width: 800px;
    height: 80vh;
    /* Fixed height for better scrolling */
}

@media (max-width: 768px) {
    #hidden-manager-modal {
        z-index: 6500 !important;
        /* Ensure it's below mobile event modal (7000) */
    }

    #hidden-manager-modal .modal-content {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        /* Use dynamic viewport height if supported */
        max-height: none;
        max-width: none;
        border-radius: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
}

/* Time Blocks */
.time-block {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    /* Allow clicking through to grid */
    z-index: 0;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
    /* Divider */
}

/* Teal to Purple Progression (More Dramatic) */
.time-block-breakfast {
    background-color: rgba(113, 214, 224, 0.25);
    /* Virgin Teal */
}

.time-block-morning {
    background-color: rgba(100, 180, 230, 0.25);
    /* Teal-Blue transition */
}

.time-block-lunch {
    background-color: rgba(100, 130, 240, 0.25);
    /* Blue-Indigo transition */
}

.time-block-afternoon {
    background-color: rgba(120, 100, 220, 0.25);
    /* Indigo-Purple transition */
}

.time-block-dinner {
    background-color: rgba(92, 6, 140, 0.25);
    /* Virgin Purple */
}

.time-block-evening {
    background-color: rgba(60, 0, 90, 0.3);
    /* Deep Purple */
}

/* violet-50 */

/* Dark mode overrides */
/* Dark mode overrides - Brightest to Darkest */
body.dark .time-block {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark .time-block-breakfast {
    background-color: rgba(113, 214, 224, 0.25);
}

body.dark .time-block-morning {
    background-color: rgba(90, 160, 210, 0.3);
}

body.dark .time-block-lunch {
    background-color: rgba(80, 120, 200, 0.35);
}

body.dark .time-block-afternoon {
    background-color: rgba(100, 80, 180, 0.4);
}

body.dark .time-block-dinner {
    background-color: rgba(92, 6, 140, 0.45);
}

body.dark .time-block-evening {
    background-color: rgba(40, 0, 60, 0.6);
}

/* Add labels to time blocks */
.time-block::after {
    content: attr(data-label);
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.dark .time-block::after {
    color: rgba(255, 255, 255, 0.2);
}

/* --- Mobile Layout --- */
@media (max-width: 768px) {
    :root {
        --day-col-width: calc(100vw - var(--time-col-width));
    }

    #schedule-viewport {
        scroll-snap-type: x mandatory;
    }

    .day-column {
        scroll-snap-align: start;
        /* Ensure width is strictly enforced */
        min-width: var(--day-col-width);
        width: var(--day-col-width);
    }

    .attendance-panel,
    .agenda-panel {
        width: 100%;
        right: -100%;
    }

    /* Wider Main Menu on Mobile */
    #dropdown-menu {
        width: 280px;
        right: 10px;
    }

    #dropdown-menu .ctx-item {
        padding: 16px 20px;
        /* Taller and more padding */
        font-size: 16px;
    }
}

/* --- Current Time Bar --- */
.current-time-bar {
    position: absolute;
    height: 2px;
    background-color: var(--virgin-red);
    width: 100%;
    z-index: 500;
    pointer-events: none;
    left: 0;
    box-shadow: 0 0 4px rgba(175, 35, 28, 0.6);
}

.current-time-bar::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: var(--virgin-red);
    border-radius: 50%;
}

.agenda-current {
    background-color: rgba(92, 6, 140, 0.1) !important;
    border-color: rgba(92, 6, 140, 0.3) !important;
}

body.dark .agenda-current {
    background-color: rgba(92, 6, 140, 0.4) !important;
    border-color: rgba(92, 6, 140, 0.6) !important;
}

/* --- Celebration Feature --- */
#celebration-container {
    z-index: 2147483647 !important;
    /* Max z-index */
}

.event-card.is-completed {
    opacity: 0.6;
    filter: grayscale(30%);
    border: 2px solid #10b981 !important;
    /* Green border */
}

.event-card.is-completed::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    background: #10b981;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 10;
}