/* =====================================
   DATEPICKER COMPONENT STYLES
   ===================================== */

@layer components{
    /* ============= Datepicker Base ============= */
    .ui-datepicker{
        background-color: var(--surface-primary);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--border);
        border-radius: var(--widget-radius);
        overflow: hidden;
    }

    /* ============= Datepicker Header ============= */
    .ui-datepicker-header{
        background-color: var(--surface-second);
        border: none;
        border-bottom: 1px solid var(--border);
    }

    /* Datepicker Header Divider */
    .ui-datepicker-header:not(:last-of-type){
        border-right: 1px solid var(--border);
    }

    /* Datepicker Title Text */
    .ui-datepicker-title span{
        color: var(--foreground-primary);
        font-size: var(--font-size-md);
        font-family: var(--font-family-sans);
    }

    /* ============= Navigation Arrows ============= */
    /* Hide Default Arrow Text */
    .ui-datepicker-prev span{
        display: none;
    }

    .ui-datepicker-next span{
        display: none;
    }

    /* Previous Arrow Button */
    .ui-datepicker-prev{
        background-image: url("/client/images/icon_chevron-left.svg");
        background-size: 16px 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Next Arrow Button */
    .ui-datepicker-next{
        background-image: url("/client/images/icon_chevron-right.svg");
        background-size: 16px 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* ============= Calendar Grid ============= */
    /* Calendar Header Cells */
    .ui-datepicker-calendar th{
        border-bottom: 1px solid var(--border);
        color: var(--foreground-third);
        font-size: var(--font-size-base);
        font-weight: 600;
    }

    /* Calendar Date Cells */
    .ui-datepicker-calendar td{
        border: 1px solid var(--border);
        width: 35px;
        height: 35px;
    }

    /* Calendar Date Links and Spans */
    .ui-datepicker-calendar td a, .ui-datepicker-calendar td span{
        color: var(--foreground-primary);
        font-size: var(--font-size-base);
        line-height: 35px;
        font-weight: 600;

        background-color: var(--surface-second);
    }

    /* ============= Calendar States ============= */
    /* Highlighted Date (Today) */
    .ui-datepicker-calendar td a.ui-state-highlight{
        color: var(--primary);
        border: none;
    }

    /* Date Hover State */
    .ui-datepicker-calendar td a:hover{
        background-color: var(--primary);
        color: var(--color-white);
    }

    /* Other Month Dates - Commented Out */
    /* .ui-datepicker-calendar td.ui-datepicker-other-month{
        border: none;
    } */
}