/* ==========================================================================
   Vanilla Calendar Custom Styles for Jules
   ========================================================================== */

/* Limit dropdown height for time picker */
.dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
}

/* Custom scrollbar for dropdowns */
.dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--accent-line);
    border-radius: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Calendar Popup Container */
.calendar-popup {
    position: relative;
}

.calendar-container {
    position: absolute;
    /* Changed from fixed to absolute */
    top: 100%;
    left: 0;
    margin-top: 8px;
    z-index: 10000;
    /* Above modals */
    display: none;
    /* NO TRANSITION - instant show/hide */
}

.calendar-container.active {
    display: block;
}

/* Vanilla Calendar Base Styling */
.vanilla-calendar {
    background: var(--bg-card) !important;
    border: 1px solid var(--accent-line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 16px !important;
    font-family: var(--font-sans) !important;
}

/* Header */
.vanilla-calendar-header {
    margin-bottom: 16px !important;
}

.vanilla-calendar-header__content {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
}

/* Navigation Arrows */
.vanilla-calendar-arrow {
    color: var(--text-secondary) !important;
    transition: color 0.2s ease !important;
}

.vanilla-calendar-arrow:hover {
    color: var(--text-primary) !important;
}

/* Week Days */
.vanilla-calendar-week__day {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Days */
.vanilla-calendar-day__btn {
    color: var(--text-primary) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    font-weight: 400 !important;
}

.vanilla-calendar-day__btn:hover {
    background: #F5F0EB !important;
    color: var(--text-primary) !important;
}

/* Today */
.vanilla-calendar-day__btn_today {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    position: relative !important;
}

.vanilla-calendar-day__btn_today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--text-primary);
    border-radius: 50%;
}

/* Selected Day */
.vanilla-calendar-day__btn_selected {
    background: var(--text-primary) !important;
    color: white !important;
    font-weight: 500 !important;
}

.vanilla-calendar-day__btn_selected:hover {
    background: #3D3835 !important;
}

/* Disabled Days */
.vanilla-calendar-day__btn_disabled {
    color: #D1CCC6 !important;
    cursor: not-allowed !important;
}

/* Other Month Days */
.vanilla-calendar-day__btn_prev,
.vanilla-calendar-day__btn_next {
    color: var(--text-secondary) !important;
    opacity: 0.4 !important;
}

/* Range Selection */
.vanilla-calendar-day__btn_range-start,
.vanilla-calendar-day__btn_range-end {
    background: var(--text-primary) !important;
    color: white !important;
}

.vanilla-calendar-day__btn_range-between {
    background: #F5F0EB !important;
    color: var(--text-primary) !important;
}