/* /Pages/Components/Date/DatePicker.razor.rz.scp.css */
/* Calendar root vars */
.datepicker[b-v9jft3c8l1] {
    --dp-cell: 2.25rem; /* Cell size */
    --dp-r: 0.4rem; /* Border radius */
    z-index: 99;
}

    /* Day button base */
    .datepicker .btn-day[b-v9jft3c8l1] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: var(--dp-cell);
        font-size: 0.875rem;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        /* remove default button border */
        border: none !important;
        box-shadow: none !important;
    }

        /* Hover effect */
        .datepicker .btn-day:hover:not(.bg-primary)[b-v9jft3c8l1] {
            box-shadow: var(--tblr-shadow-sm, 0 1px 2px rgba(0,0,0,.06));
            transform: translateY(-1px);
            background-color: var(--tblr-light, #f5f7fb);
        }

        /* Keyboard focus */
        .datepicker .btn-day:focus-visible[b-v9jft3c8l1] {
            outline: 2px solid var(--tblr-primary, #206bc4);
            outline-offset: 2px;
        }

        /* Today indicator (border only) */
        .datepicker .btn-day.border-primary[b-v9jft3c8l1] {
            border-width: 2px !important;
        }

        /* Selected day */
        .datepicker .btn-day.bg-primary[b-v9jft3c8l1] {
            background-color: var(--tblr-primary, #206bc4);
            border-color: transparent !important;
            color: #fff !important;
        }

        /* Weekend days (text color only) */
        .datepicker .btn-day.text-danger[b-v9jft3c8l1] {
            color: var(--tblr-red, #d63939) !important;
        }

        /* Other month (faded appearance) */
        .datepicker .btn-day.dp-other-month[b-v9jft3c8l1] {
            opacity: 0.4;
        }

        /* Disable transitions on selected day to avoid jitter */
        .datepicker .btn-day.bg-primary:hover[b-v9jft3c8l1] {
            transform: none;
            box-shadow: none;
        }

        /* Optional: make Today + Selected stand out more with a slight glow */
        .datepicker .btn-day.border-primary:not(.bg-primary)[b-v9jft3c8l1] {
            box-shadow: 0 0 0 0.15rem rgba(32, 107, 196, 0.2);
        }

    /* Keep 7-column grid stable when gutters change */
    .datepicker .card-body .row.g-2 .col[b-v9jft3c8l1] {
        flex: 1 0 14.28% !important;
    }


    /* ===== Today styling (subtle animated ring) ===== */
    .datepicker .btn-day.dp-today[b-v9jft3c8l1] {
        position: relative;
        isolation: isolate; /* keep pseudo-element behind text */
        background: linear-gradient(0deg, rgba(32,107,196,.06), rgba(32,107,196,.06));
        border: none !important; /* keep it clean */
        box-shadow: 0 0 0 .12rem rgba(32,107,196,.18);
        border-radius: var(--dp-r);
    }

        /* Pulsing ring behind the button */
        .datepicker .btn-day.dp-today[b-v9jft3c8l1]::after {
            content: "";
            position: absolute;
            inset: -2px; /* slightly larger than the cell */
            border-radius: calc(var(--dp-r) + .15rem);
            box-shadow: 0 0 0 .2rem rgba(32,107,196,.22);
            opacity: .65;
            z-index: -1;
            animation: dpPulse-b-v9jft3c8l1 1.8s ease-in-out infinite;
            pointer-events: none;
        }

        /* Slight shimmer on hover to acknowledge interactivity */
        .datepicker .btn-day.dp-today:hover[b-v9jft3c8l1] {
            background: linear-gradient(0deg, rgba(32,107,196,.09), rgba(32,107,196,.09));
            transform: translateY(-1px);
            box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 .12rem rgba(32,107,196,.22);
        }

/* Pulse keyframes */
@keyframes dpPulse-b-v9jft3c8l1 {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 .2rem rgba(32,107,196,.22);
        opacity: .6;
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 .35rem rgba(32,107,196,.10);
        opacity: .35;
    }

    100% {
        transform: scale(0.98);
        box-shadow: 0 0 0 .2rem rgba(32,107,196,.22);
        opacity: .6;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .datepicker .btn-day.dp-today[b-v9jft3c8l1]::after {
        animation: none;
        opacity: .35;
    }
}

/* Keep your existing hover rule for non-selected days,
   but don’t override the dp-today tweaks too aggressively */
.datepicker .btn-day:hover:not(.bg-primary):not(.dp-today)[b-v9jft3c8l1] {
    box-shadow: var(--tblr-shadow-sm, 0 1px 2px rgba(0,0,0,.06));
    transform: translateY(-1px);
    background-color: var(--tblr-light, #f5f7fb);
}

/* full-viewport transparent click-catcher that appears only when picker is open */
.dp-backdrop[b-v9jft3c8l1] {
    position: fixed;
    inset: 0;
    background: transparent; /* change to rgba(0,0,0,.05) if you want a faint veil */
    z-index: 1049; /* under the popup */
}
/* ensure popup is above backdrop */
.z-50[b-v9jft3c8l1] {
    z-index: 1050;
}

.z-60[b-v9jft3c8l1] {
    position: relative;
    z-index: 1060;
}