/* ==========================================================================
   1. GLOBAL COMPONENT THEME TOKENS
   ========================================================================= */
duet-date-picker {
    --duet-color-primary: #4fa3ff; /* Sharp light blue focus theme color */
    --duet-color-focus: #4fa3ff !important;
    --duet-color-text: #333;
    --duet-color-text-active: #fff;
    --duet-color-placeholder: #666;
    --duet-color-button: #f5f5f5;
    --duet-color-surface: #fff;
    --duet-color-overlay: rgba(0, 0, 0, 0.4);
    --duet-color-border: #ccc;
    --duet-radius: 4px;
    --duet-z-index: 1050;
    width: 100%;
}

/* ==========================================================================
   2. INPUT FIELDS & TOGGLE BUTTONS
   ========================================================================= */
.duet-date__input {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.375rem;
    color: rgb(33,37,41);
    float: none;
    font-family: var(--duet-font);
    font-size: 0.9em;
    line-height: normal;
    padding: 9px 6px;
    width: 100%;
}

/* Day grid selections & global focus rings */
duet-date-picker .duet-date__day.is-selected,
duet-date-picker .duet-date__day:focus {
    background: var(--duet-color-primary) !important;
    color: var(--duet-color-text-active) !important;
    box-shadow: none !important;
    outline: 0 !important;
}

duet-date-picker .duet-date__day:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4fa3ff !important;
}

/* ==========================================================================
   3. DESKTOP MODAL 
   ========================================================================= */
.duet-date__dialog {
    z-index: var(--duet-z-index);
}

.duet-date__dialog-content {
    background: var(--duet-color-surface);
    border-radius: var(--duet-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /*padding: 16px !important;*/
    width: 100%;
}

/* ==========================================================================
   4. MOBILE LAYOUT 
   ========================================================================= */
@media (max-width: 576px) {
    /* Ensure the overlay covers the screen when the class is present */
    body.duet-overlay-active::before {
        content: "" !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 2 !important; /* Force high index */
        display: block !important;
        pointer-events: auto !important; /* Block background clicks */
    }

    /* Target the dialog specifically to be above the overlay */
    duet-date-picker::part(dialog),
    .duet-date__dialog {
        z-index: 3 !important;
        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12) !important;
    }

        .duet-date__dialog.is-active {
            animation: slideUp 0.22s cubic-bezier(0, 0, 0.2, 1);
        }

    /* Outer sheet padding content compression */
    .duet-date__dialog-content {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        padding: 8px 20px 4px 20px !important;
        box-sizing: border-box !important;
    }

    /* Primary "Choose a date" Header Row */
    .duet-date__header {
        padding: 0 0 4px 0 !important;
        margin: 0 0 2px 0 !important;
        border-bottom: 1px solid #eee !important;
        height: auto !important;
        min-height: unset !important;
    }

        .duet-date__header h2 {
            font-size: 1rem !important;
            font-weight: 500 !important;
            margin: 0 !important;
        }

    /* YEAR / MONTH / ARROW NAVIGATION SUB-HEADER COMPRESSION */
    .duet-date__nav {
        margin-top: 4px !important;
        margin-bottom: 0px !important;
        padding: 0 !important;
        height: 28px !important;
        min-height: unset !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Dropdown structural selectors */
    .duet-date__select {
        height: 26px !important;
    }

        .duet-date__select select {
            padding-top: 1px !important;
            padding-bottom: 1px !important;
            height: 26px !important;
            font-size: 0.9rem !important;
            line-height: normal !important;
        }

    /* Horizontal spacing configuration for arrow sets */
    .duet-date__prev,
    .duet-date__next {
        width: 32px !important;
        height: 26px !important;
        min-width: 32px !important;
        min-height: 26px !important;
        padding: 0 !important;
        margin: 0 0 0 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        .duet-date__select select:focus,
        .duet-date__prev:focus,
        .duet-date__next:focus {
            outline: 2px solid #4fa3ff !important;
            outline-offset: 1px !important;
        }

    /* Dismiss icon target alignment overrides */
    duet-date-picker .duet-date__close,
    duet-date-picker::part(close) {
        width: 24px !important;
        height: 24px !important;
    }

    /* Calendar Day Grid Layout */
    .duet-date__grid {
        width: 100% !important;
        margin: -8px auto 0 auto !important;
        row-gap: 2px !important;
    }

        .duet-date__grid th {
            padding-top: 0 !important;
            padding-bottom: 4px !important;
        }
}

/* ==========================================================================
   5. KEYFRAME ANIMATIONS
   ========================================================================= */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.duet-date__input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
/* ==========================================================================
   6. SELECTION HIGHLIGHT STATE OVERRIDES (INPUT ONLY)
   ========================================================================= */
/* Keep exact base working highlight rules */
.dateFilter.highlight .duet-date__input {
    background: #2B265E;
    color: #fff;
}

/* Force the calendar component's layout engine to render its normal colors 
   by overriding the internal button variables instead of hacking the SVGs */
.dateFilter.highlight duet-date-picker {
    --duet-color-button: #f5f5f5; /* Restores button background */
    --duet-color-text: #333333; /* Restores dark icon lines perfectly */
}

/* Ensure the toggle inherits the clean custom design tokens */
.dateFilter.highlight .duet-date__toggle {
    background-color: var(--duet-color-button) !important;
    color: var(--duet-color-text) !important;
    border-left: 1px solid #ccc !important; /* Clean separator line */
}