/* jQuery UI Datepicker - Bootstrap 5 Compatible Styling */

/* Datepicker container */
.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 9999 !important;
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .5em 0;
        background: var(--medium-green, #60830E);
        color: white;
        border-radius: 0.25rem 0.25rem 0 0;
        margin: -0.2em -0.2em 0.2em -0.2em;
    }

    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1.8em;
        height: 1.8em;
        cursor: pointer;
        text-align: center;
        line-height: 1.8em;
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 0.5em;
    }

    .ui-datepicker .ui-datepicker-next {
        right: 0.5em;
    }

        .ui-datepicker .ui-datepicker-prev:hover,
        .ui-datepicker .ui-datepicker-next:hover {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 0.25rem;
        }

        .ui-datepicker .ui-datepicker-prev span,
        .ui-datepicker .ui-datepicker-next span {
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -8px;
            top: 50%;
            margin-top: -8px;
        }

            /* Use simple arrows instead of icons */
            .ui-datepicker .ui-datepicker-prev span:before {
                content: "◀";
                font-size: 14px;
                color: white;
            }

            .ui-datepicker .ui-datepicker-next span:before {
                content: "▶";
                font-size: 14px;
                color: white;
            }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
        color: white;
        font-weight: 600;
    }

        .ui-datepicker .ui-datepicker-title select {
            font-size: 1em;
            margin: 1px 0;
            padding: 0.25rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            background: white;
            color: #495057;
        }

    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width: 45%;
    }

    .ui-datepicker table {
        width: 100%;
        font-size: .9em;
        border-collapse: collapse;
        margin: 0 0 .4em;
    }

    .ui-datepicker th {
        padding: .7em .3em;
        text-align: center;
        font-weight: 600;
        border: 0;
        color: #495057;
    }

    .ui-datepicker td {
        border: 0;
        padding: 1px;
    }

        .ui-datepicker td span,
        .ui-datepicker td a {
            display: block;
            padding: .4em;
            text-align: center;
            text-decoration: none;
            color: #495057;
            border-radius: 0.25rem;
        }

            .ui-datepicker td a:hover {
                background: var(--light-green, #87A14A);
                color: white;
            }

    .ui-datepicker .ui-datepicker-current-day a {
        background: var(--medium-green, #60830E);
        color: white;
        font-weight: 600;
    }

    .ui-datepicker .ui-state-disabled span {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* Today button */
.ui-datepicker-buttonpane {
    background: #f8f9fa;
    padding: .7em 0;
    margin: .4em -0.2em -0.2em -0.2em;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 0.25rem 0.25rem;
}

    .ui-datepicker-buttonpane button {
        margin: .5em .2em .4em;
        cursor: pointer;
        padding: .5em 1em;
        width: auto;
        overflow: visible;
        background: var(--medium-green, #60830E);
        color: white;
        border: none;
        border-radius: 0.25rem;
        font-weight: 500;
    }

        .ui-datepicker-buttonpane button:hover {
            background: var(--medium-dark-green, #57770D);
        }

/* Hide the default icon spans */
.ui-icon {
    text-indent: -99999px;
    overflow: hidden;
    background-image: none !important;
}

/* jQuery UI Spinner - Already styled in NewSiteCSS.css */
/* Keeping the existing spinner styles from NewSiteCSS.css */

/* Ensure proper z-index for datepicker */
.ui-datepicker {
    z-index: 1050 !important; /* Above Bootstrap modals */
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .ui-datepicker {
        width: 90vw;
        max-width: 320px;
        left: 50% !important;
        transform: translateX(-50%);
    }
}