/**
 * Air Datepicker Dark Theme
 * Custom dark theme to match TripTally design
 */

/* Calendar container */
.air-datepicker {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-family);
    color: var(--color-text-primary);
}

.air-datepicker--pointer {
    display: none;
}

/* Navigation */
.air-datepicker-nav {
    background: var(--color-surface-light);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-sm);
}

.air-datepicker-nav--title,
.air-datepicker-nav--title i {
    color: var(--color-text-primary);
    font-weight: 500;
}

.air-datepicker-nav--title:hover {
    background: var(--color-surface-hover);
}

.air-datepicker-nav--action {
    color: var(--color-text-primary);
}

.air-datepicker-nav--action:hover {
    background: var(--color-surface-hover);
}

.air-datepicker-nav--action svg {
    fill: var(--color-text-primary);
}

.air-datepicker-nav--action:hover svg {
    fill: var(--color-primary);
}

/* Body */
.air-datepicker-body {
    background: var(--color-surface);
}

.air-datepicker-body--day-names {
    background: var(--color-surface-light);
}

.air-datepicker-body--day-name {
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

/* Cells (days, months, years) */
.air-datepicker-cell {
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
}

.air-datepicker-cell:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.air-datepicker-cell.-focus- {
    background: var(--color-surface-hover);
}

.air-datepicker-cell.-current- {
    color: var(--color-primary);
    font-weight: 600;
}

.air-datepicker-cell.-current-:not(.-selected-) {
    background: transparent;
    border: 2px solid var(--color-primary);
}

.air-datepicker-cell.-selected- {
    background: var(--color-primary);
    color: white;
}

.air-datepicker-cell.-selected-:hover {
    background: var(--color-primary-dark);
}

.air-datepicker-cell.-in-range- {
    background: rgba(74, 158, 255, 0.2);
    color: var(--color-text-primary);
}

.air-datepicker-cell.-range-from-,
.air-datepicker-cell.-range-to- {
    background: var(--color-primary);
    color: white;
}

/* Disabled cells */
.air-datepicker-cell.-disabled- {
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.air-datepicker-cell.-disabled-:hover {
    background: transparent;
}

/* Other months */
.air-datepicker-cell.-other-month- {
    color: var(--color-text-disabled);
}

.air-datepicker-cell.-other-month-:hover {
    background: var(--color-surface-hover);
}

/* Buttons */
.air-datepicker-buttons {
    background: var(--color-surface-light);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-sm);
}

.air-datepicker-button {
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.air-datepicker-button:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* Time picker */
.air-datepicker-time {
    background: var(--color-surface-light);
    border-top: 1px solid var(--color-border);
}

.air-datepicker-time--current {
    color: var(--color-text-primary);
}

.air-datepicker-time--current-colon {
    color: var(--color-text-secondary);
}

.air-datepicker-time--current-hours,
.air-datepicker-time--current-minutes {
    color: var(--color-text-primary);
}

.air-datepicker-time--row input[type="range"] {
    background: var(--color-surface-hover);
}

.air-datepicker-time--row input[type="range"]::-webkit-slider-thumb {
    background: var(--color-primary);
}

.air-datepicker-time--row input[type="range"]::-moz-range-thumb {
    background: var(--color-primary);
}

/* Months and years view */
.air-datepicker--content.-months- .air-datepicker-body--cells,
.air-datepicker--content.-years- .air-datepicker-body--cells {
    grid-template-columns: repeat(3, 1fr);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .air-datepicker {
        font-size: var(--font-size-base);
    }

    .air-datepicker-nav {
        padding: var(--spacing-md);
    }

    .air-datepicker-cell {
        height: 42px;
        font-size: var(--font-size-base);
    }

    .air-datepicker-nav--action {
        width: 44px;
        height: 44px;
    }

    .air-datepicker-button {
        font-size: var(--font-size-base);
        margin-right: var(--spacing-sm);
        margin-left: var(--spacing-sm);
    }
}

/* Animation */
.air-datepicker-global-container {
    z-index: var(--z-modal);
}