/**
 * Flatpickr — Modern Responsive Overrides
 * Constrained to viewport, minimal aesthetic matching bottom sheet
 */

/* =============================================================================
   BASE — Fluid calendar, never overflows viewport
   ============================================================================= */

.flatpickr-calendar {
    width: calc(100vw - 40px) !important;
    max-width: 340px;
    min-width: 0;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    padding: 4px !important;
    font-family: inherit;
    overflow: hidden;
}

/* Force calendar within viewport on mobile */
@media (max-width: 768px) {
    .flatpickr-calendar {
        left: 20px !important;
        right: 20px !important;
        width: calc(100vw - 40px) !important;
        max-width: none;
    }

    .flatpickr-calendar.arrowTop::before,
    .flatpickr-calendar.arrowTop::after,
    .flatpickr-calendar.arrowBottom::before,
    .flatpickr-calendar.arrowBottom::after {
        display: none;
    }
}

.flatpickr-days,
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-innerContainer {
    width: 100%;
}

.flatpickr-rContainer {
    width: 100%;
}

/* =============================================================================
   MONTH HEADER
   ============================================================================= */

.flatpickr-months {
    width: 100%;
    padding: 4px 0 0;
}

.flatpickr-month {
    width: 100%;
    height: 36px;
}

.flatpickr-current-month {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    padding: 6px 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600;
    color: #1a1a1a;
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    padding: 8px !important;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: #f3f4f6;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #6b7280;
}

/* =============================================================================
   WEEKDAY HEADERS
   ============================================================================= */

.flatpickr-weekdays {
    width: 100%;
}

span.flatpickr-weekday {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px 0 4px;
}

/* =============================================================================
   DAY CELLS
   ============================================================================= */

.flatpickr-day {
    width: 14.2857143% !important;
    max-width: none !important;
    min-height: 38px;
    height: auto !important;
    aspect-ratio: 1 / 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    color: #374151;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 10px;
    border: none !important;
    transition: background 0.12s ease, color 0.12s ease;
    margin: 1px 0;
}

.flatpickr-day:hover {
    background: #f3f4f6;
    border: none !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #d1d5db;
    background: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #d1d5db;
}

/* Today */
.flatpickr-day.today {
    background: #f0f4f8;
    border: none !important;
    font-weight: 600;
    color: #4c7291;
}

.flatpickr-day.today:hover {
    background: #e0e8f0;
    color: #4c7291;
    border: none !important;
}

/* =============================================================================
   SELECTION — Range & Single
   ============================================================================= */

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #4c7291 !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #3d5f7a !important;
    border: none !important;
}

/* Range endpoints shape */
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange {
    border-radius: 10px 0 0 10px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.endRange.endRange {
    border-radius: 0 10px 10px 0;
}

.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange {
    border-radius: 10px;
}

/* In-range days */
.flatpickr-day.inRange {
    background: rgba(76, 114, 145, 0.1) !important;
    border: none !important;
    border-radius: 0;
    color: #4c7291;
    box-shadow: none !important;
}

.flatpickr-day.inRange:hover {
    background: rgba(76, 114, 145, 0.18) !important;
    border: none !important;
}

/* =============================================================================
   INLINE MODE
   ============================================================================= */

.flatpickr-calendar.inline {
    width: 100% !important;
    max-width: 100%;
    display: block;
    box-shadow: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
}

/* =============================================================================
   MOBILE TOUCH OPTIMIZATIONS
   ============================================================================= */

@media (max-width: 768px) {
    .flatpickr-day {
        font-size: 15px;
        min-height: 40px;
    }

    span.flatpickr-weekday {
        font-size: 11px;
    }

    .flatpickr-current-month {
        font-size: 16px;
    }

    .flatpickr-prev-month,
    .flatpickr-next-month {
        padding: 12px !important;
    }
}

@media (max-width: 380px) {
    .flatpickr-calendar {
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
    }

    .flatpickr-day {
        font-size: 13px;
        min-height: 36px;
    }

    .flatpickr-current-month {
        font-size: 14px;
    }
}

/* Landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .flatpickr-calendar {
        max-width: 380px;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .flatpickr-calendar {
        max-width: 350px;
    }

    .flatpickr-day {
        font-size: 14px;
    }
}

/* Touch devices — larger tap targets */
@media (hover: none) and (pointer: coarse) {
    .flatpickr-day {
        min-height: 42px;
        min-width: 42px;
    }
}

/* Focus for accessibility */
.flatpickr-day:focus-visible {
    outline: 2px solid #4c7291;
    outline-offset: -2px;
    z-index: 10;
}