/* ==============================================================
   Datepicker Mobile Responsive Fix
   Fixes vanillajs-datepicker calendar overflow issue on mobile devices
   ============================================================== */

/* Prevent datepicker dropdown from exceeding screen width */
.datepicker-dropdown {
    max-width: calc(100vw - 16px);
}

/* Make datepicker-view flexible instead of having a fixed width */
.datepicker-view {
    width: 100%;
    max-width: 15.75rem;
    min-width: 0;
    box-sizing: border-box;
}

/* Prevent modal body/footer from clipping absolute-positioned calendars */
.modal-body,
.modal-footer {
    overflow: visible;
}

/* ==============================================================
   Overrides for Datepicker Colors
   ============================================================== */
/* Change the 'today' highlight color from green to a theme-based gray */
.datepicker-cell.today:not(.selected) {
    background-color: var(--adv-textbox-infobox-font-color, #445159);
}

.datepicker-cell.today.focused:not(.selected) {
    background-color: var(--basic-body-text-color, #21252B); 
}

/* ==============================================================
   Responsive: Screens smaller than 480px (mobile)
   ============================================================== */
@media (max-width: 480px) {

    /* Adjust font size to fit the calendar grid in the available space */
    .datepicker-picker {
        font-size: 0.85rem;
    }

    /* Reduce cell height to save vertical space */
    .datepicker-cell {
        height: 2rem;
    }

    .datepicker-cell:not(.day) {
        height: 4rem;
    }

    /* Reduce header day-of-week font size */
    .datepicker .dow {
        font-size: 0.72rem;
    }

    /* If datepicker is oriented left -> align to left of the screen */
    /* Increase specificity by adding .datepicker prefix to avoid !important */
    .datepicker .datepicker-dropdown.datepicker-orient-left {
        left: 8px;
    }

    /* If datepicker is oriented right -> align to right of the screen */
    .datepicker .datepicker-dropdown.datepicker-orient-right {
        right: 8px;
        left: auto;
    }
}