body {
    font-family: Arial, sans-serif;
    padding-top: 56px; /* Account for fixed navbar */
}
#calendar {
position: relative;
min-height: 200px; /* Give it some height so the spinner is visible */
}
.fc-event {
font-size: var(--fc-event-font-size, 0.85em); /* Controlled by font size slider */
overflow: hidden;
cursor: pointer;
}
.fc-event-title, .fc-event-main {
text-overflow: ellipsis;
max-width: 100%;
display: block;
margin: 3px;
}
/* Hide the date title over the calendar in mobile view */
@media(max-width:768px){
.fc-toolbar-title {
display: none;
}
}
#calendar h2 {
text-align: center;
}
#calendar.loading::before {
content: '';
position: absolute;
top: 50px; /* Position it a bit down from the top */
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px; /* Half of width to center it */
border: 5px solid var(--bs-tertiary-bg);
border-radius: 50%;
border-top-color: var(--bs-primary);
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Style for UNCHECKED filter list items */
.form-check-input:not(:checked) ~ .form-check-label {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Style for UNCHECKED list items (when clicking outside checkbox) - more specific to avoid affecting button groups */
.clickable-item:not(:has(.form-check-input:checked)) .form-check-label {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Ensure cursor is pointer for entire clickable list item */
.clickable-item,
.clickable-item * {
    cursor: pointer !important;
}

/* Override cursor for checkbox and label to maintain pointer */
.clickable-item .form-check-input,
.clickable-item .form-check-label {
    cursor: pointer !important;
}

/* Prevent filter styles from affecting theme button group */
.btn-group .btn {
    opacity: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* Ensure color theme buttons are visible in both light and dark modes */
[data-bs-theme="dark"] .btn-group .btn-outline-dark {
    border-color: var(--bs-gray-400) !important;
    color: var(--bs-gray-400) !important;
}

/* Fix dark color selection visibility in dark mode */
[data-bs-theme="dark"] .btn-group .btn-check:checked + .btn-outline-dark {
    background-color: var(--bs-gray-800) !important;
    border-color: var(--bs-gray-800) !important;
    color: white !important;
}

#settingsCard {
max-height: calc(100vh - 150px); /* Exact viewport height minus navbar */
overflow-y: auto; /* Inner scrollbar */
}
/* Settings collapse positioning with fixed navbar */
#collapseSettings {
    position: fixed;
    top: 66px; /* Right below the fixed navbar with spacing */
    left: 0;
    right: 0;
    z-index: 1035; /* Above navbar (1030) and footer (1035) */
    height: calc(100vh - 66px); /* Exact viewport height minus navbar */
    overflow-y: auto; /* Inner scrollbar */
}

#collapseSettings .card {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin: 10px;
    margin-bottom: 10px; /* Ensure no gap at bottom */
}

/* Footer toggle button */
.footer-toggle-btn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1040;
}

/* Footer fade animation */
#footerCollapse {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transition: opacity 0.4s ease-in-out;
    opacity: 1;
    z-index: 1030;
}

#footerCollapse.collapsing {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
    display: block !important;
    z-index: 1030;
}

#footerCollapse:not(.show) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1030;
}

#footerCollapse.show {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 1;
    pointer-events: auto;
    z-index: 1030;
}