.hidden {
    display: none !important;
}

.calendar-day {
    min-height: 8rem;
    width: 100%;
    transition: all 0.2s ease-in-out;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* Default state (grey/white) */
.calendar-day {
    background-color: white;
    color: #1f2937; /* gray-800 */
}

/* Locked state */
.calendar-day.locked {
    background-color: #f1f5f9; /* slate-100 */
    color: #94a3b8; /* slate-400 */
}

/* Unavailable state (planning mode) */
.calendar-day.unavailable {
    background-color: #fef2f2; /* red-50 */
    color: #991b1b; /* red-800 */
}

/* Scheduled state (planned mode) */
.calendar-day.scheduled {
    background-color: #eff6ff; /* blue-50 */
    color: #1e3a8a; /* blue-900 */
}

/* ATTENDING STATE - Blue theme */
.calendar-day.is-attending {
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
}

/* Attending badge - starts hidden */
.attending-badge {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show badge when attending */
.calendar-day.is-attending .attending-badge {
    opacity: 1;
    transform: translateX(0);
}

/* Attendee count badge transition */
.attendee-count {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.calendar-day.is-attending .attendee-count {
    background-color: #2563eb; /* blue-600 */
    color: white;
}

.custom-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: #fff;
    text-align: left;
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, bottom 0.2s;
    margin-bottom: 8px;
    max-width: 220px;
    width: max-content;
}

.tooltip-wrapper:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
    bottom: 110%;
}

.toggle-checkbox {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toggle-checkbox:checked {
    transform: translateX(100%);
    border-color: #10B981;
}

.toggle-label {
    transition: background-color 0.3s ease;
}

.toggle-checkbox:checked + .toggle-label {
    background-color: #10B981;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Save indicator animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.saving-indicator {
    animation: pulse 1.5s infinite;
}

/* Attending transition - left number box and right attending box */
.calendar-day {
    position: relative;
    overflow: hidden;
}

/* Left number container - default state */
.day-number-container {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.0, 0.0, 0.0, 1.0); /* Custom ease-out: slow start, fast end, abrupt stop */
}

.day-number-box {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    transition: all 0.4s cubic-bezier(0.0, 0.0, 0.0, 1.0);
    background: transparent;
    color: inherit;
}

/* Right attending container - starts hidden/inside */
.attending-container {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    transform: translateX(150%); /* Start off-screen to the right */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.0, 0.0, 0.0, 1.0);
}

.attending-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ATTENDING STATE */
.calendar-day.is-attending .day-number-box {
    background: #2563eb; /* blue-600 */
    color: white;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.calendar-day.is-attending .attending-container {
    transform: translateX(0); /* Slide into position */
    opacity: 1;
}

/* Ensure day content doesn't interfere */
.day-content {
    position: relative;
    z-index: 5;
    pointer-events: none;
}

.day-content > * {
    pointer-events: auto;
}