/* TMA Flatpickr theme — aligned with the project design tokens.
 * primary  #6366F1 (indigo)   secondary  #475467 (slate)   tertiary  #DC2626 (red)
 * surface  #FFFFFF             muted      #F9FAFB           border    #D1D5DB
 */

/* Trigger input — match the standard form input look. */
.tma-datepicker-input {
    width: 100%;
    border: 0;
    border-radius: 0.375rem; /* rounded-md */
    background-color: #FFFFFF;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-ring-inset: inset;
    box-shadow: inset 0 0 0 1px #D1D5DB, 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: box-shadow .15s ease;
}
.tma-datepicker-input::placeholder { color: #9CA3AF; }
.tma-datepicker-input:focus,
.tma-datepicker-input.flatpickr-input:focus,
input.flatpickr-input.tma-datepicker-input.active {
    outline: 0;
    box-shadow: inset 0 0 0 2px #6366F1, 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.tma-datepicker-input[disabled] {
    background-color: #F9FAFB;
    color: #6B7280;
    cursor: not-allowed;
}

/* Range wrapper layout */
.tma-daterange { display: flex; align-items: center; gap: 0.5rem; }
.tma-daterange > input { flex: 1 1 0; min-width: 0; }
.tma-daterange-sep { color: #6B7280; font-size: 0.875rem; user-select: none; }

/* Calendar popup */
.flatpickr-calendar {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
    font-family: 'Inter', system-ui, sans-serif;
    padding: 0.25rem;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after { display: none; }

/* Header */
.flatpickr-months { padding: 0.5rem 0.25rem; }
.flatpickr-month {
    color: #111827;
    background: transparent;
    border-radius: 0.5rem;
    height: 2.5rem;
}
.flatpickr-current-month {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.25rem 0;
    color: #111827;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #111827;
    font-weight: 600;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: #EEF2FF; }

/* Prev / next nav */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #475467;
    fill: #475467;
    padding: 0.5rem;
    border-radius: 0.5rem;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: #EEF2FF;
    color: #6366F1;
    fill: #6366F1;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg { width: 0.75rem; height: 0.75rem; }

/* Weekday header */
.flatpickr-weekdays { background: transparent; }
span.flatpickr-weekday {
    color: #475467;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Days */
.flatpickr-days { padding: 0.25rem; }
.dayContainer { padding: 0; }
.flatpickr-day {
    color: #1F2937;
    border-radius: 0.5rem;
    border: 0;
    font-size: 0.8125rem;
    height: 2.25rem;
    line-height: 2.25rem;
    max-width: 2.25rem;
    margin: 1px 0;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
    background: #EEF2FF;
    color: #4338CA;
    border-color: transparent;
}
.flatpickr-day.today {
    border: 1px solid #6366F1;
    color: #4338CA;
}
.flatpickr-day.today:hover { background: #EEF2FF; color: #4338CA; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange:hover {
    background: #6366F1;
    color: #FFFFFF;
    border-color: #6366F1;
}
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: #EEF2FF;
    color: #4338CA;
    border-color: transparent;
    box-shadow: -5px 0 0 #EEF2FF, 5px 0 0 #EEF2FF;
}
.flatpickr-day.startRange.endRange { border-radius: 0.5rem; }
.flatpickr-day.startRange:not(.endRange) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.flatpickr-day.endRange:not(.startRange) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #9CA3AF;
    background: transparent;
}
.flatpickr-day.flatpickr-disabled { cursor: not-allowed; }