/*
================================================================================
Version 1.0 - Style utilisé pour les emploi du temps
================================================================================
Version 2.0 - Mise à jour des styles pour une meilleure réactivité et esthétique
Auteur : Emile SNYERS
Date : 2025-06-09
Description : 
Utilisation : 
Ce fichier CSS est utilisé pour styliser la section des emplois du temps dans l'application. Il comprend des styles pour les cartes d'emploi du temps, les jours, les créneaux horaires et les badges de statut.
Mise à jour : 
================================================================================
*/

/* Schedule Section */
.schedule-section {
    margin-top: var(--spacing-xxl);
}

.schedule-main-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--theme-primary);
    color: white;
}

.schedule-status .badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.schedule-day {
    background: var(--theme-tertiary);
    border: 1px solid var(--theme-primary);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.schedule-day:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.schedule-day.preferred {
    border-color: var(--theme-primary);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.schedule-day.weekend {
    opacity: 0.7;
}

.day-header {
    padding: var(--spacing-md);
    background: var(--theme-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.schedule-day.preferred .day-header {
    background: var(--theme-primary);
    color: white;
}

.day-header h4 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.day-badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.day-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.time-slot {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.time-slot.general {
    background: rgba(108, 117, 125, 0.1);
    border-left: 3px solid #6c757d;
}

.time-slot.available {
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid #22c55e;
}

.time-slot.open {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
}

.time-slot.closed {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    opacity: 0.7;
}

.time-slot:hover {
    transform: translateX(5px);
}

.time-slot i {
    width: 20px;
    text-align: center;
}

.time-slot.general i { color: #6c757d; }
.time-slot.available i { color: #22c55e; }
.time-slot.open i { color: #3b82f6; }
.time-slot.closed i { color: #ef4444; }

.time-slot div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.time-slot strong {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.time-slot small {
    color: var(--theme-text-muted);
    font-size: var(--font-size-xs);
}

.schedule-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}