/* ================================
   MATERIAL DATEPICKER FULL STYLE
================================ */

/* Container */
.ui-datepicker {
    width: 100%;
    max-width: 320px;
    padding: 0;
    display: none;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
    border: none;
    animation: fadeIn 0.25s ease-in-out;
}

    /* Header */
    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: 12px;
        background: #f7f7f7;
        color: #fff;
        border: none;
        text-align: center;
    }

    /* Title */
    .ui-datepicker .ui-datepicker-title {
        margin: 0;
        line-height: 1.6;
        font-size: 16px;
        font-weight: 500;
    }

    /* Dropdowns */
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        background: transparent;
        border: none;
        color: #000;
        font-size: 14px;
        font-weight: 500;
        outline: none;
    }

    /* Navigation */
    .ui-datepicker .ui-datepicker-prev,
    .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 12px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        border-radius: 50%;
        transition: background 0.2s;
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 8px;
    }

    .ui-datepicker .ui-datepicker-next {
        right: 8px;
    }

        .ui-datepicker .ui-datepicker-prev:hover,
        .ui-datepicker .ui-datepicker-next:hover {
            background: rgba(255,255,255,0.2);
        }

        /* Arrow icons */
        .ui-datepicker .ui-datepicker-prev span,
        .ui-datepicker .ui-datepicker-next span {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            transform: translate(-50%, -50%);
            filter: invert(1);
        }

    /* Table */
    .ui-datepicker table {
        width: 100%;
        border-collapse: collapse;
        margin: 10px 0;
    }

    /* Day Headers */
    .ui-datepicker th {
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #9e9e9e;
        padding: 8px 0;
    }

    /* Cells */
    .ui-datepicker td {
        text-align: center;
        padding: 4px;
    }

        /* Dates */
        .ui-datepicker td a,
        .ui-datepicker td span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin: auto;
            border-radius: 50%;
            text-decoration: none;
            color: #333;
            font-size: 14px;
            transition: all 0.2s ease;
        }

            /* Hover */
            .ui-datepicker td a:hover {
                background: #e8eaf6;
                color: #3f51b5;
            }

    /* Active Date */
    .ui-datepicker .ui-state-active {
        background: #175593 !important;
        color: #fff !important;
        font-weight: 500;
    }

    /* Today */
    .ui-datepicker .ui-state-highlight {
        background: #c5cae9;
        color: #000;
    }

    /* Disabled */
    .ui-datepicker .ui-state-disabled span {
        color: #ccc;
    }

    /* Button Pane */
    .ui-datepicker .ui-datepicker-buttonpane {
        border-top: 1px solid #eee;
        padding: 10px;
        text-align: right;
    }

        /* Buttons */
        .ui-datepicker .ui-datepicker-buttonpane button {
            background: transparent;
            border: none;
            color: #3f51b5;
            font-weight: 500;
            padding: 6px 10px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.2s;
        }

            .ui-datepicker .ui-datepicker-buttonpane button:hover {
                background: rgba(63, 81, 181, 0.1);
            }

    /* Multi Month */
    .ui-datepicker.ui-datepicker-multi {
        width: auto;
    }

.ui-datepicker-multi .ui-datepicker-group {
    float: left;
    width: 100%;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

/* RTL Support */
.ui-datepicker-rtl {
    direction: rtl;
}

    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 8px;
        left: auto;
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 8px;
        right: auto;
    }

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ui-datepicker {
        max-width: 100%;
        font-size: 14px;
    }

        .ui-datepicker td a,
        .ui-datepicker td span {
            width: 32px;
            height: 32px;
            font-size: 13px;
        }
}

@media (max-width: 480px) {
    .ui-datepicker {
        font-size: 13px;
    }

        .ui-datepicker td a,
        .ui-datepicker td span {
            width: 28px;
            height: 28px;
            font-size: 12px;
        }
}


.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 36% !important;
}