/* ---------------------------------------------------------------------
    PREMIUM SUBSTITUTION CALENDAR STYLES (PURE VISUAL REFINEMENT)
------------------------------------------------------------------------ */

:root {
    /* Refined color variations based on app.css */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.4);
}

body {
    background-color: #f8fafc;
    /* Subtle background pattern for a premium feel without extra elements */
    background-image: 
        radial-gradient(at 0% 0%, rgba(15, 76, 129, 0.03) 0, transparent 50%), 
        radial-gradient(at 50% 0%, rgba(157, 195, 212, 0.05) 0, transparent 50%),
        radial-gradient(at 100% 0%, rgba(40, 167, 69, 0.03) 0, transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Main Container Entry Animation */
.main {
    animation: pageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#substitution-calendar {
    padding: 1rem;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
}

/* Card Styling Refinement */
.card {
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 
                0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    transition: box-shadow 0.3s ease;
}

.fc {
    font-family: var(--font-main);

    /* Toolbar styling - More "Floaty" look */
    .fc-toolbar {
        margin-bottom: 2rem !important;
        padding: 0 10px;
        
        .fc-toolbar-title {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--primary-dark);
            letter-spacing: -0.02em;
        }

        .fc-button-group {
            background: var(--primary-light);
            padding: 4px;
            border-radius: 12px;
        }

        .fc-button-primary {
            background-color: transparent !important;
            border: none !important;
            color: var(--primary) !important;
            font-weight: 700;
            font-size: 0.85rem;
            border-radius: 8px !important;
            padding: 0.5rem 1rem;
            transition: all 0.2s ease;

            &:hover {
                background-color: var(--surface) !important;
                color: var(--primary-dark) !important;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            }

            &.fc-button-active {
                background-color: var(--surface) !important;
                box-shadow: var(--shadow-sm);
                color: var(--primary-dark) !important;
            }
            
            &:focus { box-shadow: none !important; }
        }

        .fc-today-button {
            background-color: var(--primary) !important;
            color: var(--text-on-primary) !important;
            border-radius: 8px !important;
            margin-right: 12px !important;
            border: none !important;
            font-weight: 700;
            
            &:disabled { opacity: 0.6 !important; }
        }
    }

    /* Table refinement */
    .fc-theme-bootstrap5 thead { border: none; }

    .fc-col-header-cell {
        background: transparent;
        border: none;
        padding-bottom: 12px;

        .fc-col-header-cell-cushion {
            color: var(--text-muted);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-decoration: none;
        }
    }

    .fc-scrollgrid { border: none !important; }

    .fc-daygrid-day {
        border: 1px solid rgba(0, 0, 0, 0.04) !important;

        &.fc-day-today {
            background-color: rgba(15, 76, 129, 0.03) !important;
            .fc-daygrid-day-number {
                background: var(--primary);
                color: var(--text-on-primary);
                width: 26px;
                height: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                margin: 4px;
            }
        }
    }

    .fc-daygrid-day-number {
        font-weight: 700;
        color: var(--primary-dark);
        padding: 8px 12px;
        font-size: 0.85rem;
        text-decoration: none !important;
    }

    /* Events Refinement - Soft Gradients */
    .fc-event {
        border: none !important;
        padding: 5px 10px !important;
        margin: 2px 6px !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.08);
        transition: transform 0.2s ease, filter 0.2s ease;
        color: white !important;

        &:hover {
            transform: scale(1.02);
            filter: brightness(1.1);
        }

        &.level-eso { background: linear-gradient(135deg, var(--primary), #1a6ab3) !important; }
        &.level-high-school { background: linear-gradient(135deg, var(--success), #27ae60) !important; }
        &.level-primary { background: linear-gradient(135deg, #f39c12, #e67e22) !important; }
        &.level-vocational { background: linear-gradient(135deg, #8e44ad, #7d3c98) !important; }
        &.level-default { background: linear-gradient(135deg, #6c757d, #5a6268) !important; }
    }

    /* List View Refinement */
    .fc-list {
        border: none !important;
        background-color: var(--surface);
        
        .fc-list-day-cushion {
            background-color: #fcfcfc !important;
            border-bottom: 1px solid var(--border) !important;
            padding: 15px 25px !important;

            .fc-list-day-text, .fc-list-day-side-text {
                color: var(--primary-dark) !important;
                font-weight: 800 !important;
                text-transform: capitalize;
                text-decoration: none !important;
                font-size: 0.9rem;
            }
        }

        .fc-list-event {
            &:hover td { background-color: transparent !important; }
            td { border-bottom: 1px solid var(--border) !important; padding: 15px 25px !important; }
        }
    }
}

/* Tooltip - Advanced Glassmorphism */
.event-tooltip {
    position: absolute;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px) saturate(180%);
    min-width: 280px;
    padding: 20px !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 16px;
    animation: tooltipAppear 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    h6 { letter-spacing: -0.01em; font-weight: 800; }
    hr { margin: 15px 0; border-top: 1px solid rgba(0,0,0,0.08); }
}

@keyframes tooltipAppear {
    from { opacity: 0; transform: scale(0.9) translateY(15px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Legend Styling (Sidebar Widget) */
.calendar-legend {
    display: flex;
    flex-direction: column;
    padding: 25px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);

    .uppercase { text-transform: uppercase; }
    .letter-spacing { letter-spacing: 0.1em; }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.72rem;
        font-weight: 800;
        color: var(--text-muted);
        padding: 10px 0;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        transition: color 0.2s ease;

        &:hover { color: var(--primary-dark); }
        &:last-child { border-bottom: none; }

        .dot {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }
    }
}