/* Calendar View Buttons - Enhanced UX */

/* Improve button spacing and visibility */
.ec-toolbar button {
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
    min-height: 2.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Better visual feedback for active button */
.ec-toolbar button.ec-active {
    background-color: rgb(249, 115, 22) !important;
    color: white !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important;
}

/* Hover state */
.ec-toolbar button:hover:not(.ec-active) {
    background-color: rgba(249, 115, 22, 0.1) !important;
    transform: translateY(-1px);
}

/* Dark mode support */
.dark .ec-toolbar button {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .ec-toolbar button:hover:not(.ec-active) {
    background-color: rgba(249, 115, 22, 0.2) !important;
}

/* Add spacing between button groups */
.ec-toolbar .ec-button-group {
    gap: 0.25rem !important;
}

/* Today button styling */
.ec-toolbar button.ec-today {
    background-color: rgba(249, 115, 22, 0.05) !important;
    border-color: rgb(249, 115, 22) !important;
    color: rgb(249, 115, 22) !important;
}

.dark .ec-toolbar button.ec-today {
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* Navigation buttons (prev/next) */
.ec-toolbar button.ec-prev,
.ec-toolbar button.ec-next {
    min-width: 2.5rem !important;
}

/* Ensure buttons are clearly separated */
.ec-toolbar {
    gap: 1rem !important;
}

/* Make view buttons more prominent */
.ec-toolbar button[class*="dayGridMonth"],
.ec-toolbar button[class*="timeGridWeek"],
.ec-toolbar button[class*="timeGridDay"] {
    min-width: 7rem !important;
}

/* Add subtle animation on view change */
.ec-toolbar button {
    position: relative;
    overflow: hidden;
}

.ec-toolbar button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.ec-toolbar button:active::after {
    width: 100%;
    height: 100%;
}

/* FullCalendar (Guava) specific styles */
.fc-toolbar-chunk button {
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.2s ease !important;
}

.fc .fc-button-primary {
    background-color: rgb(249, 115, 22) !important;
    border-color: rgb(249, 115, 22) !important;
}

.fc .fc-button-primary:hover:not(:disabled) {
    background-color: rgb(234, 88, 12) !important;
    border-color: rgb(234, 88, 12) !important;
}

.fc .fc-button-active {
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3) !important;
}

/* Responsive: Hide calendar view buttons on mobile */
@media (max-width: 768px) {
    .fc-toolbar-chunk:last-child,
    .ec-toolbar .ec-button-group:last-child {
        display: none !important;
    }

    /* Ensure calendar title is centered on mobile */
    .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
    }

    .fc-toolbar-chunk {
        margin: 0.25rem 0;
    }
}