/*
 * Custom Flatpickr Date Picker Styling
 * Consistent Arabic-friendly date picker design for SSO PublicPortal
 * Version: 1.0
 * Created: 2026-02-04
 */

/* Calendar Container */
.flatpickr-calendar {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: none;
    font-family: inherit;
    direction: ltr; /* Force LTR for calendar itself */
}

/* Center the calendar below the input field */
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    left: 50% !important;
    transform: translateX(-50%);
}

/* Adjust calendar positioning to center it */
.flatpickr-calendar.open {
    margin-left: 0 !important;
    left: 50% !important;
    transform: translateX(-50%);
}

/* Month and Year Header */
.flatpickr-months {
    padding: 0;
}

.flatpickr-months .flatpickr-month {
    background: #0d6efd;
    color: white;
    padding: 12px 10px;
    border-radius: 12px 12px 0 0;
    height: auto;
}

.flatpickr-current-month {
    padding: 5px 0;
    height: auto;
    line-height: normal;
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Add spacing between header and days */
.flatpickr-innerContainer {
    padding-top: 15px;
    position: relative;
    z-index: 1;
}

.flatpickr-rContainer {
    padding-top: 0;
}

.flatpickr-days {
    margin-top: 10px;
}

/* Month and Year Dropdowns */
.flatpickr-monthDropdown-months,
.flatpickr-yearDropdown-months,
.numInputWrapper input.cur-year,
select.cur-year {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 5px 10px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 100;
}

/* Month Dropdown */
.flatpickr-monthDropdown-months {
    margin-right: 15px !important; /* Add space between month and year */
    direction: rtl;
    text-align: right;
}

/* Year Dropdown */
.flatpickr-yearDropdown-months,
select.cur-year {
    margin-left: 0;
}

.flatpickr-monthDropdown-months:hover,
.flatpickr-yearDropdown-months:hover,
.numInputWrapper input.cur-year:hover,
select.cur-year:hover {
    background: #f8f9fa;
}

/* Month dropdown options - better colors */
.flatpickr-monthDropdown-months option {
    background: white;
    color: #212529;
    padding: 8px;
    font-weight: 500;
}

.flatpickr-monthDropdown-months option:disabled {
    color: #adb5bd;
    background: #f8f9fa;
}

.flatpickr-monthDropdown-months option:hover:not(:disabled) {
    background: #e7f1ff;
    color: #0d6efd;
}

/* Year dropdown options */
select.cur-year option {
    background: white;
    color: #212529;
    padding: 5px;
}

/* Calendar Days */
.flatpickr-day {
    border-radius: 8px;
    font-weight: 500;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #0d6efd;
    border-color: #0d6efd;
}

.flatpickr-day:hover {
    background: #e7f1ff;
    border-color: #e7f1ff;
}

.flatpickr-day.today {
    border-color: #0d6efd;
    background: #e7f1ff;
}

/* Disabled days */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #adb5bd;
    background: transparent;
    cursor: not-allowed;
}

/* Input field styling */
input.flatpickr-input {
    background-color: white !important;
    cursor: pointer !important;
}

input.flatpickr-input:focus {
    background-color: white !important;
}

/* Arrow navigation */
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: white;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #f0f0f0;
}

/* Weekday headers */
.flatpickr-weekdays {
    background: #f8f9fa;
}

.flatpickr-weekday {
    color: #495057;
    font-weight: 600;
}

/* RTL adjustments for Arabic UI */
.flatpickr-calendar[dir="rtl"] .flatpickr-monthDropdown-months {
    direction: rtl;
    text-align: right;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .flatpickr-calendar {
        font-size: 0.9rem;
    }

    .flatpickr-day {
        height: 35px;
        line-height: 35px;
    }
}