/**
 * Reusable Custom Date Picker Styles
 * 
 * Usage: <link rel="stylesheet" href="/styles/date-picker/date-picker.css">
 * 
 * This stylesheet provides all the styles needed for the custom date picker component.
 * Works in conjunction with date-picker.js
 */

@import url('../base/colors.css');
@import url('../base/design-tokens.css');

/* Date Input Wrapper */
.date-input-wrapper {
    position: relative;
    width: 100%;
}

/* Compact modifier for narrower contexts (e.g., modal headers) */
.date-input-wrapper.date-input-compact {
    max-width: 135px;
}

.date-input-wrapper.date-input-compact input[type="text"] {
    font-size: 0.85rem;
    padding: var(--space-xs) 32px var(--space-xs) 10px;
    height: 40px;
    text-align: center;
}

.date-input-wrapper.date-input-compact .date-input-icon {
    right: 12px;
    font-size: 0.95rem !important;
}

/* Date Input Field */
.date-input-wrapper input[type="text"],
input.date-picker-input {
    width: 100%;
    padding: var(--space-xs) 40px var(--space-xs) 12px;
    border: 2px solid var(--gray-450);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: all var(--transition-base);
    height: auto;
    box-sizing: border-box;
    cursor: pointer;
    background: white;
}

.date-input-wrapper input[type="text"]:focus,
input.date-picker-input:focus {
    outline: none;
    border-color: var(--purple-primary);
    box-shadow: 0 0 0 3px var(--bg-purple-medium);
}

.date-input-wrapper input[type="text"]::placeholder,
input.date-picker-input::placeholder {
    color: var(--gray-600);
}

/* Calendar Icon in Input */
.date-input-icon,
.date-input-wrapper .date-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--purple-primary);
    font-size: 1rem !important;
    pointer-events: none;
}

/* Custom Calendar Container */
.custom-calendar {
    position: absolute;
    background: white;
    border: 2px solid var(--purple-primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px var(--shadow-medium);
    padding: 1rem;
    margin-top: 0.5rem;
    z-index: var(--z-calendar);
    min-width: 320px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Calendar Header */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-350);
}

/* Calendar Navigation Buttons */
.calendar-nav-btn {
    background: white;
    border: 2px solid var(--gray-450);
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--gray-700);
    font-size: 1rem;
}

.calendar-nav-btn i {
    font-size: 1rem;
}

.calendar-nav-btn:hover {
    border-color: var(--purple-primary);
    color: var(--purple-primary);
    background: var(--bg-purple-light);
}

/* Month and Year Display */
.calendar-month-year {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* Calendar Weekdays Header */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.calendar-weekday {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-700);
    padding: 0.5rem;
}

/* Highlight Thursday in header (when it's an allowed day) */
.calendar-weekday.thursday {
    color: var(--purple-primary);
}

/* Calendar Days Grid */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

/* Individual Calendar Day */
.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    cursor: default;
    transition: all var(--transition-fast);
}

/* Empty day cells (for alignment) */
.calendar-day.empty {
    visibility: hidden;
}

/* Past dates (disabled) */
.calendar-day.past {
    color: var(--gray-550);
    background: var(--gray-100);
}

/* Not allowed days (not in allowedDays array) and closedown dates */
.calendar-day.not-allowed {
    color: var(--gray-600);
    background: var(--gray-300);
}

/* Allowed days (can be selected) */
.calendar-day.allowed-day {
    color: var(--purple-primary);
    background: var(--bg-purple-alt-strong);
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
}

/* Legacy support: Thursday class (for backward compatibility) */
.calendar-day.thursday {
    color: var(--purple-primary);
    background: var(--bg-purple-alt-strong);
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
}

/* Hover state for allowed days */
.calendar-day.allowed-day:hover,
.calendar-day.thursday:hover {
    background: var(--bg-purple-alt-stronger);
    border-color: var(--purple-primary);
    transform: scale(1.05);
}

/* Selected date */
.calendar-day.allowed-day.selected,
.calendar-day.thursday.selected {
    background: var(--purple-primary);
    color: white;
    border-color: var(--purple-primary);
}

/* Today indicator */
.calendar-day.today.allowed-day,
.calendar-day.today.thursday {
    border: 2px solid var(--purple-primary);
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Calendar adjustments for mobile */
    .custom-calendar {
        left: 0;
        right: 0;
        min-width: unset;
        width: 100%;
        max-width: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
    }

    .calendar-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .calendar-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .calendar-day {
        font-size: 0.8rem;
        padding: 0.25rem;
    }

    .calendar-weekday {
        font-size: 0.7rem;
        padding: 0.25rem;
    }

    .calendar-month-year {
        font-size: 0.95rem;
    }

    .calendar-days {
        gap: 0.125rem;
    }

    .calendar-weekdays {
        gap: 0.125rem;
        margin-bottom: 0.375rem;
    }
}