.calendar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
}

.grid-auto-rows-fr {
    grid-auto-rows: 1fr; /* All rows equal height */
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .calendar-wrapper {
        overflow-x: auto;
    }

    .grid-cols-7 {
        min-width: 100%;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    .grid-cols-7 {
        min-width: 100%;
    }
}

/* Optional: smooth scrollbar for mobile */
.calendar-wrapper::-webkit-scrollbar {
    height: 8px;
}

.calendar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}


/*#region Colors */

.event-item {
    background-color: var(--bg);
    color: var(--fg);
    transition: background-color 0.25s ease-in-out;
}

.event-item:hover {
    filter: brightness(85%); /* darken on hover */
}

.event-item a {
    color: inherit; /* inherit text color */
    text-decoration: none; /* remove underline */
    display: block; /* make full area clickable */
    padding: 0.25rem 0.5rem; /* optional padding for readability */
}


/*#endregion */