.calendar-page {
    background-color: #f5f7fb;
}

.calendar-page .filters-area {
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(35, 52, 70, 0.06);
}

.calendar-page #calendar {
    background-color: #ffffff;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(35, 52, 70, 0.08);
    padding: 12px;
    overflow-x: auto;
}

.calendar-page #calendar .ec {
    --ec-border-color: #dbe3ef;
    --ec-accent-color: #6f87a2;
    --ec-button-bg-color: #ffffff;
    --ec-button-border-color: #d0dbe8;
    --ec-button-text-color: #34495e;
    --ec-button-active-bg-color: #e8f2ff;
    --ec-button-active-border-color: #8db6f2;
    --ec-event-bg-color: #2f80ed;
    --ec-today-bg-color: rgba(47, 128, 237, 0.12);
    --ec-highlight-color: transparent;
    --ec-now-indicator-color: #eb5757;
}

.calendar-page #calendar .ec-day.ec-highlight,
.calendar-page #calendar .ec-time.ec-highlight {
    background-color: transparent !important;
}

.calendar-page #calendar .ec-event.ec-pointer {
    display: none !important;
}

.calendar-page #calendar .ec-event.ec-preview {
    background-color: rgba(47, 128, 237, 0.16) !important;
    border: 1px dashed rgba(47, 128, 237, 0.45);
    box-shadow: none !important;
}

.calendar-page #calendar .ec-bg-event.ec-preview {
    background-color: rgba(47, 128, 237, 0.14) !important;
}

.calendar-page #calendar .ec-toolbar {
    margin-bottom: 12px;
}

.calendar-page #calendar .ec-title {
    color: #2c3e50;
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: capitalize;
}

.calendar-page #calendar .ec-button {
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.32rem 0.75rem;
    transition: all 0.18s ease;
}

.calendar-page #calendar .ec-button:not(:disabled):hover {
    box-shadow: 0 2px 8px rgba(31, 80, 148, 0.16);
}

.calendar-page #calendar .ec-day-head {
    color: #425466;
    font-weight: 600;
}

.calendar-page #calendar .ec-event {
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(47, 128, 237, 0.22);
    padding: 1px 5px;
    font-size: 0.77rem;
}

.calendar-page #calendar .ec-event-title {
    font-weight: 500;
    font-size: 0.77rem;
    line-height: 1.35;
}

.calendar-page #calendar .ec-event i {
    font-size: 0.82rem;
}

.calendar-page #calendar .ec-sidebar {
    background-color: #f8fbff;
}

/* Keep week columns readable and synced between header and slots. */
.calendar-page #calendar .ec.ec-time-grid {
    width: max-content;
    min-width: 100%;
}

.calendar-page #calendar .ec-time-grid .ec-day {
    min-width: 75px;
    max-width: none;
    flex: 1 0 75px;
}

.calendar-page #calendar .ec-time-grid .ec-header .ec-day {
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    line-height: 25px;
}

@media (max-width: 991.98px) {
    .calendar-page #calendar {
        border-radius: 10px;
        padding: 8px;
    }

    .calendar-page #calendar .ec-title {
        font-size: 1rem;
    }

    .calendar-page #calendar .ec-button {
        border-radius: 8px;
        font-size: 0.82rem;
        padding: 0.26rem 0.56rem;
    }
}