/**
 * Events Calendar Styles
 * Custom styling for FullCalendar and view toggle to match Onkoloogika theme
 */

/* ==========================================================================
   View Toggle Buttons
   ========================================================================== */

.onk-view-toggle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.onk-view-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0;
    border: none;
    background: transparent;
    color: #6f2ac0;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
    border-bottom: 2px solid transparent;
}

.onk-view-toggle__btn:hover {
    opacity: 0.75;
}

.onk-view-toggle__btn.active {
    opacity: 1;
    border-bottom-color: #6f2ac0;
}

.onk-view-toggle__btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

.onk-view-toggle__separator {
    width: 1px;
    height: 1.25rem;
    background: #6f2ac0;
    opacity: 0.3;
}

/* ==========================================================================
   FullCalendar Theme Overrides
   ========================================================================== */

/* Calendar container */
.fc {
    --fc-border-color: #e5e7eb;
    --fc-button-bg-color: #8d44E2;
    --fc-button-border-color: #8d44E2;
    --fc-button-hover-bg-color: #6f2ac0;
    --fc-button-hover-border-color: #6f2ac0;
    --fc-button-active-bg-color: #6f2ac0;
    --fc-button-active-border-color: #6f2ac0;
    --fc-today-bg-color: #f6f0ff;
    --fc-event-bg-color: #8d44E2;
    --fc-event-border-color: #8d44E2;
}

/* Header toolbar - title left, nav right */
.fc .fc-toolbar {
    flex-wrap: wrap;
    row-gap: 1rem;
}

.fc .fc-toolbar-chunk:first-child {
    order: 1;
}

.fc .fc-toolbar-chunk:nth-child(2) {
    order: 0;
    flex: 1;
}

.fc .fc-toolbar-chunk:last-child {
    order: 2;
}

.fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    text-align: left;
    text-transform: capitalize;
}

/* Navigation buttons */
.fc .fc-button-primary {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
    border-radius: 0.375rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.fc .fc-button-primary:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
}

.fc .fc-button-primary:focus {
    box-shadow: 0 0 0 2px rgba(141, 68, 226, 0.3);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #8d44E2;
    border-color: #8d44E2;
    color: white;
}

/* Today button */
.fc .fc-today-button {
    background-color: transparent;
    border-color: #8d44E2;
    color: #8d44E2;
}

.fc .fc-today-button:hover:not(:disabled) {
    background-color: #f6f0ff;
    border-color: #8d44E2;
    color: #8d44E2;
}

.fc .fc-today-button:disabled {
    opacity: 0.4;
    border-color: #d1d5db;
    color: #9ca3af;
    background-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* Day headers */
.fc .fc-col-header-cell {
    padding: 0.75rem 0;
    background-color: #f9fafb;
}

.fc .fc-col-header-cell-cushion {
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Day cells */
.fc .fc-daygrid-day {
    min-height: 100px;
}

.fc .fc-daygrid-day-number {
    padding: 0.5rem;
    font-weight: 500;
    color: #374151;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background-color: #8d44E2;
    color: white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Events */
.fc .fc-daygrid-event {
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fc .fc-daygrid-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(141, 68, 226, 0.3);
}

/* "More" link */
.fc .fc-daygrid-more-link {
    color: #8d44E2;
    font-weight: 600;
    font-size: 0.75rem;
}

.fc .fc-daygrid-more-link:hover {
    color: #6f2ac0;
    text-decoration: underline;
}

/* Past days */
.fc .fc-day-past {
    background-color: #fafafa;
}

.fc .fc-day-past .fc-daygrid-day-number {
    color: #9ca3af;
}

/* ==========================================================================
   List View Styles (mobile-friendly)
   ========================================================================== */

.fc-list {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: hidden;
}

.fc-list-day-cushion {
    background-color: #f3eafc !important;
    padding: 0.75rem 1rem !important;
}

.fc-list-day-text,
.fc-list-day-side-text {
    color: #6f2ac0 !important;
    font-weight: 600 !important;
    text-transform: capitalize;
}

.fc-list-event {
    cursor: pointer;
}

.fc-list-event:hover td {
    background-color: #f6f0ff !important;
}

.fc-list-event-time {
    color: #6b7280;
    padding-left: 1rem !important;
}

.fc-list-event-title {
    color: #1f2937;
    font-weight: 500;
}

.fc-list-event-dot {
    border-color: #8d44E2 !important;
}

.fc-list-empty {
    background-color: #fafafa;
    text-align: center;
    padding: 3rem 1rem;
}

.fc-list-empty-cushion {
    color: #6b7280;
    font-style: italic;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 640px) {
    .fc .fc-toolbar-chunk:first-child,
    .fc .fc-toolbar-chunk:nth-child(2),
    .fc .fc-toolbar-chunk:last-child {
        order: unset;
        flex: unset;
        width: 100%;
    }

    .fc .fc-toolbar-chunk:nth-child(2) {
        order: -1;
    }

    .fc .fc-toolbar-title {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .fc .fc-daygrid-day {
        min-height: 70px;
    }

    .fc .fc-col-header-cell-cushion {
        font-size: 0.625rem;
    }

    /* View toggle: icons only on mobile */
    .onk-view-toggle {
        flex-shrink: 0;
    }

    .onk-view-toggle__btn span {
        display: none;
    }

    .onk-view-toggle__btn {
        padding: 0.5rem;
    }

    .onk-view-toggle__btn svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}