/* ============================================================
   FLATPICKR CALENDAR - DARK MODE & UI IMPROVEMENTS
   Created: 2025-11-01
   Purpose: Dark mode support for Flatpickr calendar in booking pages
   Target: .flatpickr-calendar selectors (booking steps)
   ============================================================ */

/* =============================================================
   FLATPICKR CALENDAR - LIGHT MODE ENHANCEMENTS
   ============================================================= */

/* Calendar container - Modern styling */
.flatpickr-calendar {
    background: var(--color-background, #ffffff);
    border-radius: var(--booking-radius-xl, 16px);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    border: none;
    font-family: var(--font-family-body, 'Poppins', sans-serif);
}

/* Calendar header */
.flatpickr-months {
    background: var(--color-background, #ffffff);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    padding: var(--booking-space-md, 12px);
}

/* Month/Year display */
.flatpickr-current-month {
    color: var(--color-text-primary, #111827);
    font-size: var(--booking-text-lg, 18px);
    font-weight: var(--booking-font-semibold, 600);
}

/* Month dropdown */
.flatpickr-monthDropdown-months {
    background: var(--color-background, #ffffff);
    color: var(--color-text-primary, #111827);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--booking-radius-md, 8px);
    padding: var(--booking-space-xs, 4px) var(--booking-space-sm, 8px);
}

.flatpickr-monthDropdown-months:hover {
    background: var(--color-gray-50, #f9fafb);
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    color: var(--color-text-primary, #111827);
    fill: var(--color-text-primary, #111827);
    transition: all var(--booking-transition-base, 250ms) ease;
    padding: var(--booking-space-sm, 8px);
    border-radius: 50%;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-primary, #0c2340);
    fill: var(--color-primary, #0c2340);
}

/* Weekday headers */
.flatpickr-weekdays {
    background: var(--color-background, #ffffff);
}

.flatpickr-weekday {
    color: var(--color-text-secondary, #6b7280);
    font-size: var(--booking-text-xs, 12px);
    font-weight: var(--booking-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Calendar days container */
.flatpickr-days {
    background: var(--color-background, #ffffff);
}

.dayContainer {
    background: var(--color-background, #ffffff);
}

/* Individual day cells */
.flatpickr-day {
    color: var(--color-text-primary, #111827);
    border: 2px solid transparent;
    border-radius: 50%;
    transition: all var(--booking-transition-base, 250ms) ease;
    font-weight: var(--booking-font-medium, 500);
}

/* Hover state for available days */
.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
    background: var(--color-gray-100, #f3f4f6);
    border-color: var(--color-border, #e5e7eb);
}

/* Today indicator */
.flatpickr-day.today {
    border-color: var(--color-primary, #0c2340);
    font-weight: var(--booking-font-semibold, 600);
}

.flatpickr-day.today:hover {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-primary, #0c2340);
}

/* Selected dates (start/end) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary, #0c2340) !important;
    border-color: var(--color-primary, #0c2340) !important;
    color: white !important;
    font-weight: var(--booking-font-bold, 700);
    box-shadow: 0 2px 8px rgba(12, 35, 64, 0.3);
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--color-primary-dark, #061628) !important;
    border-color: var(--color-primary-dark, #061628) !important;
}

/* Date range (in-between dates) */
.flatpickr-day.inRange {
    background: rgba(12, 35, 64, 0.1) !important;
    color: var(--color-primary, #0c2340) !important;
    border-color: transparent !important;
    box-shadow: none;
}

.flatpickr-day.inRange:hover {
    background: rgba(12, 35, 64, 0.15) !important;
}

/* Disabled/Unavailable dates */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.disabled {
    color: var(--color-text-tertiary, #9ca3af) !important;
    background: var(--color-gray-50, #f9fafb) !important;
    cursor: not-allowed !important;
    opacity: 0.5;
    position: relative;
}

/* Red strikethrough for unavailable dates */
.flatpickr-day.flatpickr-disabled::after,
.flatpickr-day.disabled::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 100%;
    height: 1px;
    background: var(--color-error, #ef4444);
}

/* Previous/Next month dates (grayed out) */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--color-text-tertiary, #9ca3af);
    opacity: 0.4;
}

/* Time picker (if enabled) */
.flatpickr-time {
    background: var(--color-background, #ffffff);
    border-top: 1px solid var(--color-border, #e5e7eb);
}

.flatpickr-time input {
    color: var(--color-text-primary, #111827);
    background: var(--color-background, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--booking-radius-md, 8px);
}

.flatpickr-time input:hover {
    background: var(--color-gray-50, #f9fafb);
}

.flatpickr-time input:focus {
    border-color: var(--color-primary, #0c2340);
    outline: none;
    box-shadow: 0 0 0 3px rgba(12, 35, 64, 0.1);
}

.flatpickr-time .flatpickr-am-pm {
    color: var(--color-text-primary, #111827);
    background: var(--color-background, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--booking-radius-md, 8px);
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--color-gray-50, #f9fafb);
}

/* =============================================================
   DARK MODE OVERRIDES
   ============================================================= */

[data-theme="dark"] .flatpickr-calendar {
    background: var(--color-background-secondary, #0a0a0a);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Header dark mode */
[data-theme="dark"] .flatpickr-months {
    background: var(--color-background-secondary, #0a0a0a);
    border-bottom-color: var(--color-border, #2a2a2a);
}

/* Month/Year display dark mode */
[data-theme="dark"] .flatpickr-current-month {
    color: var(--color-text-primary, #ffffff);
}

/* Month dropdown dark mode */
[data-theme="dark"] .flatpickr-monthDropdown-months {
    background: var(--color-background, #000000);
    color: var(--color-text-primary, #ffffff);
    border-color: var(--color-border, #2a2a2a);
}

[data-theme="dark"] .flatpickr-monthDropdown-months:hover {
    background: var(--color-gray-700, #121212);
}

/* Navigation arrows dark mode */
[data-theme="dark"] .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-next-month {
    color: var(--color-text-primary, #ffffff);
    fill: var(--color-text-primary, #ffffff);
}

[data-theme="dark"] .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-next-month:hover {
    background: var(--color-gray-700, #121212);
    color: var(--color-accent, #d4af37);
    fill: var(--color-accent, #d4af37);
}

/* Weekday headers dark mode */
[data-theme="dark"] .flatpickr-weekdays {
    background: var(--color-background-secondary, #0a0a0a);
}

[data-theme="dark"] .flatpickr-weekday {
    color: var(--color-text-secondary, #e0e0e0);
}

/* Calendar days container dark mode */
[data-theme="dark"] .flatpickr-days {
    background: var(--color-background-secondary, #0a0a0a);
}

[data-theme="dark"] .dayContainer {
    background: var(--color-background-secondary, #0a0a0a);
}

/* Individual day cells dark mode */
[data-theme="dark"] .flatpickr-day {
    color: var(--color-text-primary, #ffffff);
}

/* Hover state dark mode */
[data-theme="dark"] .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected):not(.startRange):not(.endRange) {
    background: var(--color-gray-700, #121212);
    border-color: var(--color-border, #3a3a3a);
}

/* Today indicator dark mode */
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--color-accent, #d4af37);
}

[data-theme="dark"] .flatpickr-day.today:hover {
    background: var(--color-gray-700, #121212);
    border-color: var(--color-accent, #d4af37);
}

/* Selected dates dark mode - Use gold accent */
[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: var(--color-accent, #d4af37) !important;
    border-color: var(--color-accent, #d4af37) !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
}

[data-theme="dark"] .flatpickr-day.selected:hover,
[data-theme="dark"] .flatpickr-day.startRange:hover,
[data-theme="dark"] .flatpickr-day.endRange:hover {
    background: var(--color-accent-dark, #b49225) !important;
}

/* Date range dark mode */
[data-theme="dark"] .flatpickr-day.inRange {
    background: rgba(212, 175, 55, 0.15) !important;
    color: var(--color-accent, #d4af37) !important;
}

[data-theme="dark"] .flatpickr-day.inRange:hover {
    background: rgba(212, 175, 55, 0.2) !important;
}

/* Disabled dates dark mode */
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.disabled {
    color: var(--color-text-tertiary, #6b7280) !important;
    background: var(--color-gray-800, #0a0a0a) !important;
}

/* Previous/Next month dark mode */
[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: var(--color-text-tertiary, #6b7280);
}

/* Time picker dark mode */
[data-theme="dark"] .flatpickr-time {
    background: var(--color-background-secondary, #0a0a0a);
    border-top-color: var(--color-border, #2a2a2a);
}

[data-theme="dark"] .flatpickr-time input {
    color: var(--color-text-primary, #ffffff);
    background: var(--color-background, #000000);
    border-color: var(--color-border, #2a2a2a);
}

[data-theme="dark"] .flatpickr-time input:hover {
    background: var(--color-gray-700, #121212);
}

[data-theme="dark"] .flatpickr-time input:focus {
    border-color: var(--color-accent, #d4af37);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--color-text-primary, #ffffff);
    background: var(--color-background, #000000);
    border-color: var(--color-border, #2a2a2a);
}

[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
    background: var(--color-gray-700, #121212);
}

/* =============================================================
   RESPONSIVE - MOBILE
   ============================================================= */

@media (max-width: 768px) {
    .flatpickr-calendar {
        border-radius: 0;
        max-width: 100vw;
    }

    /* Larger touch targets for mobile */
    .flatpickr-day {
        min-height: 44px;
        min-width: 44px;
    }

    /* Larger month navigation */
    .flatpickr-prev-month,
    .flatpickr-next-month {
        padding: var(--booking-space-md, 12px);
    }

    /* Larger month/year display */
    .flatpickr-current-month {
        font-size: var(--booking-text-xl, 20px);
    }
}

/* =============================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        border: 3px solid white;
    }

    .flatpickr-day.flatpickr-disabled::after,
    .flatpickr-day.disabled::after {
        height: 2px;
        background: var(--color-error, #ef4444);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .flatpickr-day,
    .flatpickr-prev-month,
    .flatpickr-next-month,
    .flatpickr-time input {
        transition: none;
    }
}

/* Focus visible for keyboard navigation */
.flatpickr-day:focus-visible {
    outline: 3px solid var(--color-primary, #0c2340);
    outline-offset: 2px;
    z-index: 1;
}

[data-theme="dark"] .flatpickr-day:focus-visible {
    outline-color: var(--color-accent, #d4af37);
}

/* =============================================================
   TWINS REAL ESTATE BRANDING
   ============================================================= */

/* Use navy blue primary color for selected dates */
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
    background: var(--color-primary, #0c2340) !important;
}

/* Use gold accent for today indicator in dark mode */
[data-theme="dark"] .flatpickr-day.today {
    border-color: var(--color-accent, #d4af37);
    color: var(--color-accent, #d4af37);
}

/* Subtle gold highlight on hover in dark mode */
[data-theme="dark"] .flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
    border-color: rgba(212, 175, 55, 0.3);
}

/* =============================================================
   END OF FLATPICKR DARK MODE
   ============================================================= */