/**
 * FullCalendar - Clinical Precision Theme
 * Centralizzato da inline styles per maintainability
 * Supporto completo dark mode e responsive
 * v2.0 - Medical Design System Integration
 */

/* ==========================================================================
   CALENDAR BASE - Structure
   ========================================================================== */

.fc {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-light);
}

/* Calendar Height - Responsive */
#admin-calendar,
#staff-calendar,
#therapist-calendar {
    height: var(--calendar-height-desktop);
    min-height: var(--calendar-height-desktop);
}

#patient-calendar {
    height: 600px;
    min-height: 600px;
}

/* ==========================================================================
   TOOLBAR - Header Controls
   ========================================================================== */

.fc-header-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-bg-primary);
    border-bottom: 2px solid var(--color-border-medium);
}

.fc-toolbar-chunk {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.fc-toolbar-title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    letter-spacing: var(--letter-spacing-tight);
}

/* ==========================================================================
   BUTTONS - Toolbar Navigation
   ========================================================================== */

.fc-button {
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-border-medium);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.fc-button:hover:not(:disabled) {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.fc-button:active {
    transform: translateY(0);
}

.fc-button-primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.fc-button-primary:hover:not(:disabled) {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-primary);
}

.fc-button-active,
.fc-button-primary.fc-button-active {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-inner);
}

.fc-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Button Groups */
.fc-button-group {
    display: inline-flex;
    gap: 0;
}

.fc-button-group .fc-button {
    border-radius: 0;
    border-right: none;
}

.fc-button-group .fc-button:first-child {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: var(--radius-md);
}

.fc-button-group .fc-button:last-child {
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-right: 1px solid var(--color-border-medium);
}

/* ==========================================================================
   VIEW HARNESS - Calendar Grid Container
   ========================================================================== */

.fc-view-harness {
    flex-grow: 1;
    position: relative;
    background: var(--color-bg-primary);
}

.fc-scrollgrid {
    border: none;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.fc-scrollgrid-section > * {
    border: 0;
}

/* ==========================================================================
   COLUMN HEADERS - Day Names
   ========================================================================== */

.fc-col-header {
    background: var(--color-bg-tertiary);
}

.fc-col-header-cell {
    background: var(--color-bg-tertiary);
    padding: var(--spacing-3) var(--spacing-2);
    text-align: center;
    border: 1px solid var(--color-border-light);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-text-secondary);
}

.fc-col-header-cell-cushion {
    padding: var(--spacing-2);
    display: inline-block;
}

/* Weekend Highlight */
.fc-day-sat .fc-col-header-cell,
.fc-day-sun .fc-col-header-cell {
    background: rgba(13, 124, 127, 0.05);
}

/* ==========================================================================
   TIME GRID - Week/Day View
   ========================================================================== */

.fc-timegrid-slot {
    height: var(--calendar-slot-height);
    border-bottom: 1px solid var(--color-border-light);
}

.fc-timegrid-slot-label {
    border-right: 1px solid var(--color-border-medium);
    padding: 0 var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-tertiary);
    vertical-align: top;
}

.fc-timegrid-col {
    border-left: 1px solid var(--color-border-light);
    position: relative;
}

.fc-timegrid-col:hover {
    background: var(--color-surface-hover);
}

/* Current Time Indicator */
.fc-timegrid-now-indicator-line {
    border-color: var(--color-danger);
    border-width: 2px;
}

.fc-timegrid-now-indicator-arrow {
    border-color: var(--color-danger);
    border-width: 6px;
}

/* ==========================================================================
   DAY GRID - Month View
   ========================================================================== */

.fc-daygrid-day {
    border: 1px solid var(--color-border-light);
    min-height: 100px;
    background: var(--color-bg-primary);
    transition: background var(--transition-fast);
}

.fc-daygrid-day:hover {
    background: var(--color-surface-hover);
}

.fc-daygrid-day-number {
    padding: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

/* Today Highlight */
.fc-day-today {
    background: rgba(13, 124, 127, 0.08) !important;
}

.fc-day-today .fc-daygrid-day-number,
.fc-day-today .fc-col-header-cell-cushion {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Weekend Days */
.fc-day-sat,
.fc-day-sun {
    background: var(--color-bg-secondary);
}

/* Other Month Days */
.fc-day-other .fc-daygrid-day-number {
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* ==========================================================================
   EVENTS - Appointment Cards
   ========================================================================== */

.fc-event {
    border-radius: var(--radius-md);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    margin: 1px;
}

.fc-event:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.fc-event-title {
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-event-time {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    opacity: 0.9;
}

/* Event Color Coding - Medical States */
.fc-event.status-pending {
    background: var(--badge-pending);
    color: white;
}

.fc-event.status-in-progress {
    background: var(--color-primary);
    color: white;
}

.fc-event.status-completed {
    background: var(--color-success);
    color: white;
}

.fc-event.status-no-show {
    background: var(--color-warning);
    color: var(--color-text-primary);
}

.fc-event.status-cancelled {
    background: #6b7280;
    color: white;
    opacity: 0.7;
}

.fc-event.status-late-cancel {
    background: var(--color-danger);
    color: white;
}

/* ==========================================================================
   EVENT POSITIONING - Time Grid
   ========================================================================== */

.fc-direction-ltr .fc-timegrid-col-events {
    margin: 0 2.5% 0 2px;
}

.fc-timegrid-event-harness {
    position: absolute;
}

.fc-timegrid-event {
    position: absolute;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.fc-h-event {
    display: block;
    border: none;
}

.fc-daygrid-event-harness {
    position: relative;
    margin: 2px;
}

/* ==========================================================================
   MORE LINK - Event Overflow
   ========================================================================== */

.fc-more-link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    padding: var(--spacing-1) var(--spacing-2);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.fc-more-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Popover for More Events */
.fc-popover {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-popover);
}

.fc-popover-header {
    background: var(--color-bg-tertiary);
    padding: var(--spacing-3) var(--spacing-4);
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--color-border-light);
}

.fc-popover-body {
    padding: var(--spacing-2);
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 1200px) {
    #admin-calendar,
    #staff-calendar,
    #therapist-calendar {
        height: 550px;
        min-height: 550px;
    }

    .fc-toolbar-title {
        font-size: var(--font-size-lg);
    }
}

@media (max-width: 992px) {
    #admin-calendar,
    #staff-calendar,
    #therapist-calendar {
        height: var(--calendar-height-tablet);
        min-height: var(--calendar-height-tablet);
    }

    .fc-header-toolbar {
        flex-wrap: wrap;
        gap: var(--spacing-3);
    }

    .fc-toolbar-chunk {
        flex: 1 1 auto;
    }

    .fc-button {
        padding: var(--spacing-2) var(--spacing-3);
        font-size: var(--font-size-xs);
    }

    .fc-col-header-cell {
        font-size: 0.7rem;
        padding: var(--spacing-2) var(--spacing-1);
    }

    .fc-timegrid-slot-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    #admin-calendar,
    #staff-calendar,
    #therapist-calendar,
    #patient-calendar {
        height: var(--calendar-height-mobile);
        min-height: var(--calendar-height-mobile);
    }

    .fc-header-toolbar {
        padding: var(--spacing-3);
    }

    .fc-toolbar-title {
        font-size: var(--font-size-base);
        width: 100%;
        text-align: center;
    }

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

    .fc-event {
        font-size: 0.7rem;
        padding: 2px 4px;
    }

    /* Mobile: Hide time labels for more space */
    .fc-timegrid-slot-label {
        font-size: 0.65rem;
        padding: 0 var(--spacing-1);
    }
}

/* ==========================================================================
   DARK MODE - Night Shift Theme
   ========================================================================== */

[data-theme="dark"] .fc {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .fc-header-toolbar {
    background: var(--color-bg-primary);
    border-bottom-color: var(--color-border-medium);
}

[data-theme="dark"] .fc-col-header {
    background: var(--color-bg-tertiary);
}

[data-theme="dark"] .fc-col-header-cell {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .fc-daygrid-day {
    background: var(--color-bg-primary);
    border-color: var(--color-border-light);
}

[data-theme="dark"] .fc-timegrid-slot {
    border-color: var(--color-border-light);
}

[data-theme="dark"] .fc-timegrid-slot-label {
    border-color: var(--color-border-medium);
}

[data-theme="dark"] .fc-timegrid-col {
    border-color: var(--color-border-light);
}

[data-theme="dark"] .fc-button {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
    color: var(--color-text-primary);
}

[data-theme="dark"] .fc-button:hover:not(:disabled) {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .fc-button-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

[data-theme="dark"] .fc-day-today {
    background: rgba(27, 161, 165, 0.15) !important;
}

[data-theme="dark"] .fc-popover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-medium);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .fc-header-toolbar {
        padding: var(--spacing-2);
    }

    .fc-button,
    .fc-toolbar-chunk:last-child {
        display: none !important;
    }

    .fc-event {
        box-shadow: none;
        border: 1px solid #000;
    }

    .fc {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Focus Visible - Keyboard Navigation */
.fc-button:focus-visible,
.fc-event:focus-visible,
.fc-more-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Screen Reader Support */
.fc-event[aria-label]::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    .fc-event,
    .fc-button,
    .fc-daygrid-day {
        transition: none !important;
    }
}