/* --- Manual Fixes for Dark Mode Forms --- */

html.dark {
    color-scheme: dark;
}

/* Force dark styles on input elements */
.dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea,
.dark .flatpickr-input {
    background-color: #334155 !important;
    /* slate-700 */
    border-color: #475569 !important;
    /* slate-600 */
    color: #ffffff !important;
}

.dark ::placeholder {
    color: #94a3b8 !important;
    /* slate-400 */
    opacity: 1;
}

/* Clean up input to avoid weird icons since we are using text type now */
input[type="text"]::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* --- FLATPICKR CUSTOM THEME --- */

/* 1. General Container */
.flatpickr-calendar {
    font-family: 'Outfit', sans-serif !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0.25rem !important;
    /* Rounded-sm */
    overflow: hidden;
    width: auto;
}

/* 2. HEADER: Fixed layout (Month + Year side-by-side) */
.flatpickr-current-month {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 10px 0 !important;
    width: 100% !important;
}

.flatpickr-monthDropdown-months {
    background: transparent !important;
    border: none !important;
    font-weight: 400 !important;
    cursor: pointer;
    margin: 0 !important;
}

.flatpickr-current-month .numInputWrapper {
    width: 4rem !important;
    display: inline-block !important;
}

/* Year Input Fixes */
.flatpickr-current-month input.cur-year {
    font-weight: 400 !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    border: none !important;
    background: transparent !important;
    display: inline-block !important;
}

/* HIDE Spinner/Arrows on Year Input */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
    display: none !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 3. FLUID WIDTH CONTENT */
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
    width: 100% !important;
    max-width: none !important;
}

.flatpickr-day {
    flex-basis: 14.28% !important;
    max-width: none !important;
    height: 38px !important;
    line-height: 38px !important;
}

/* 🌙 DARK MODE OVERRIDES (FLATPICKR) */
.dark .flatpickr-calendar {
    background: #334155 !important;
    /* slate-700 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid #475569 !important;
}

.dark .flatpickr-calendar.arrowTop:before,
.dark .flatpickr-calendar.arrowTop:after {
    border-bottom-color: #334155 !important;
}

.dark .flatpickr-calendar.arrowBottom:before,
.dark .flatpickr-calendar.arrowBottom:after {
    border-top-color: #334155 !important;
}

.dark .flatpickr-months {
    background: #334155 !important;
    border-bottom: 1px solid #475569;
}

.dark .flatpickr-prev-month,
.dark .flatpickr-next-month {
    color: #cbd5e1 !important;
    fill: #cbd5e1 !important;
}

.dark .flatpickr-monthDropdown-months {
    color: #fff !important;
}

.dark input.cur-year {
    color: #fff !important;
}

.dark .flatpickr-weekdays {
    background: #334155 !important;
}

.dark span.flatpickr-weekday {
    background: #334155 !important;
    color: #94a3b8 !important;
}

.dark .flatpickr-days {
    border-top: 1px solid #475569;
    background: #334155 !important;
}

.dark .flatpickr-day {
    color: #e2e8f0 !important;
}

.dark .flatpickr-day:hover {
    background: #475569 !important;
    color: #fff !important;
}

.dark .flatpickr-day.today {
    border: 1px solid #3b82f6 !important;
    color: #3b82f6 !important;
}

.dark .flatpickr-day.selected {
    background: #2563EB !important;
    border-color: #2563EB !important;
    color: #fff !important;
}

.dark .flatpickr-day.prevMonthDay,
.dark .flatpickr-day.nextMonthDay,
.dark .flatpickr-day.flatpickr-disabled {
    color: #64748b !important;
}


/* --- CHOICES.JS CUSTOM THEME --- */

/* Reset base styles to match our inputs */
.choices__inner {
    border-radius: 0.25rem !important;
    /* rounded-sm */
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    /* gray-200 */
    font-size: 1rem;
    padding: 0px 10px !important;
    min-height: 42px !important;
    display: flex;
    align-items: center;
}

/* Remove default focus outline/shadow (The "contour") */
.choices.is-focused .choices__inner,
.choices__inner:focus {
    box-shadow: none !important;
    border-color: #3b82f6 !important;
    /* blue-500 */
}

/* When open, keep the rounded corners on the input */
.choices.is-open .choices__inner {
    border-radius: 0.25rem !important;
    border-color: #3b82f6 !important;
}

/* Hide search inputs background */
/* Hide search inputs background and border ("recuadre") */
.choices__input {
    background-color: transparent !important;
    border: none !important;
    /* Remove box border */
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
    /* Ensure nice spacing */
}

/* Specific fix for the search input inside the dropdown to ensure full width */
.choices__list--dropdown .choices__input {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    /* Optional: Separator line */
    background-color: #f8fafc !important;
    /* Slight background to distinguish */
}

.dark .choices__list--dropdown .choices__input {
    background-color: #1e293b !important;
    border-bottom: 1px solid #475569 !important;
}

/* Dropdown Menu Itself */
.choices__list--dropdown {
    display: none;
    /* Force hidden by default */
    border-radius: 0.25rem !important;
    /* rounded-sm */
    margin-top: 5px !important;
    border: none !important;
    /* NO BORDER for lighter look */
    z-index: 100 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.choices__list--dropdown.is-active {
    display: block !important;
    border: none !important;
    /* Force no border on active state too */
}

/* 🌙 DARK MODE OVERRIDES (CHOICES.JS) */
.dark .choices__inner {
    background-color: #334155 !important;
    /* slate-700 */
    border-color: #475569 !important;
    /* slate-600 */
    color: #ffffff !important;
}

.dark .choices__input {
    color: #ffffff !important;
    /* White search text */
}

.dark .choices.is-focused .choices__inner {
    border-color: #3b82f6 !important;
    /* blue-500 */
}

.dark .choices__list--dropdown {
    background-color: #334155 !important;
    border: none !important;
    /* Remove ANY border in dark mode */
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.dark .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #475569 !important;
    /* hover state */
}

.dark .choices__list--dropdown .choices__item {
    color: #e2e8f0 !important;
}

/* Fix generic Choice items */
.choices__list--dropdown .choices__item--selectable {
    padding: 10px !important;
}

/* Arrow Color Fix */
.dark .choices[data-type*="select-one"]::after {
    border-color: #fff transparent transparent transparent;
}

.dark .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent #fff transparent;
}

/* Placeholder */
.dark .choices__placeholder {
    color: #94a3b8;
    opacity: 1;
}