/* ===== SPOTLIGHT DAY HIGHLIGHTING ON CALENDAR ===== */

/* Highlight the spotlighted day on the calendar */
/* Note: The actual class is .day-cell, not .calendar-day */
.year-calendar .day-cell.spotlight-active,
.calendar-body .day-cell.spotlight-active,
div.day-cell.spotlight-active,
.day-cell.spotlight-active {
    position: relative !important;
    z-index: 100 !important;
    border: 3px solid var(--color-primary) !important;
    background: color-mix(in srgb, var(--color-primary) 15%, transparent) !important;
}

/* Remove any existing background images or colors */
.day-cell.spotlight-active {
    background-image: none !important;
    background-color: transparent !important;
    overflow: visible !important;
}

/* Glowing ring disabled - user preference */
/* .day-cell.spotlight-active::before { ... } */

/* Star icon on the spotlighted day */
.year-calendar .day-cell.spotlight-active::after,
.calendar-body .day-cell.spotlight-active::after,
div.day-cell.spotlight-active::after,
.day-cell.spotlight-active::after {
    content: '\2605' !important; /* Unicode star character */
    display: block !important;
    position: absolute !important;
    top: calc(50% + 5px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 3.2rem !important;
    line-height: 1 !important;
    color: var(--color-primary) !important;
    text-shadow: 0 0 20px var(--color-primary),
                 0 0 40px color-mix(in srgb, var(--color-primary) 80%, transparent),
                 0 0 60px color-mix(in srgb, var(--color-primary) 60%, transparent),
                 0 0 80px color-mix(in srgb, var(--color-primary) 40%, transparent) !important;
    animation: starTwinkle 1.5s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Pulsating animation disabled - user preference */

/* Glowing ring animation disabled - user preference */

/* Star twinkling animation - includes translate to maintain centering */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9) rotate(-15deg);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3) rotate(15deg);
    }
    75% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.95) rotate(-10deg);
    }
}

/* Dim other days when spotlight is active */
.spotlight-mode-active .day-cell:not(.spotlight-active) {
    opacity: 0.5;
    filter: grayscale(40%);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

/* Keep month labels visible */
.spotlight-mode-active .month-label {
    opacity: 0.6;
}

/* Keep headers visible */
.spotlight-mode-active .weekday-header {
    opacity: 0.5;
}