/* ==================================================================================================== */


/* ==============================================
   STAGES MODULE STYLES
   ============================================== */

.stages-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.stages-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.stages-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.stages-tab.active {
    background: var(--clr-blue);
    color: white;
}

.stages-view {
    display: none;
}

.stages-view.active {
    display: block;
}

/* Status badges supplémentaires */
.status-badge.in-progress {
    background-color: rgba(2, 132, 199, 0.1);
    color: var(--clr-blue);
}

.status-badge.pending {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
}

.status-badge.cancelled {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--clr-red);
}

/* Étudiant info */
.etudiant-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.etudiant-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.etudiant-nom {
    font-weight: 600;
}

.etudiant-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Entreprise info */
.entreprise-info {
    display: flex;
    flex-direction: column;
}

.entreprise-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Tuteur info */
.tuteur-info {
    display: flex;
    flex-direction: column;
}

.tuteur-role {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Note badge */
.note-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
    border-radius: 20px;
    font-weight: 600;
}

/* Calendrier */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calendar-nav h3 {
    font-size: 1.3rem;
    min-width: 150px;
    text-align: center;
}

.calendar-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.calendar-grid {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--clr-shadow);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--clr-bg-primary);
    border-bottom: 2px solid var(--clr-border);
}

.calendar-weekdays div {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--clr-text-secondary);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--clr-border);
}

.calendar-day {
    background: var(--clr-bg-secondary);
    min-height: 120px;
    padding: 0.5rem;
    position: relative;
}

.calendar-day.other-month {
    background: var(--clr-bg-primary);
    opacity: 0.5;
}

.day-number {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

.day-events {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.event-item {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.event-item:hover {
    transform: translateX(2px);
}

.event-item.stage-en-cours {
    background: rgba(2, 132, 199, 0.1);
    color: var(--clr-blue);
    border-left: 3px solid var(--clr-blue);
}

.event-item.stage-debut {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
    border-left: 3px solid var(--clr-green);
}

.event-item.stage-fin {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
    border-left: 3px solid var(--clr-yellow);
}

/* Entreprises grid */
.entreprises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.entreprise-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.entreprise-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.entreprise-logo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.entreprise-info {
    flex: 1;
}

.entreprise-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.entreprise-info p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.entreprise-card-body {
    margin-bottom: 1rem;
}

.stats-mini {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.stats-mini i {
    margin-right: 0.3rem;
    color: var(--clr-blue);
}

.tuteurs-list h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--clr-text-secondary);
}

.tuteur-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: var(--clr-bg-primary);
    margin-bottom: 0.3rem;
}

.tuteur-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.tuteur-item .note {
    margin-left: auto;
    font-weight: 600;
}

.tuteur-item .note.note-4\.5 { color: var(--clr-green); }
.tuteur-item .note.note-5\.0 { color: var(--clr-blue); }

.entreprise-card-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

/* Conventions grid */
.conventions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.convention-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.convention-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.convention-header i {
    font-size: 1.5rem;
    color: var(--clr-blue);
}

.convention-header h4 {
    flex: 1;
    font-size: 1rem;
}

.convention-body {
    margin-bottom: 1rem;
}

.convention-body p {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}

.convention-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

/* Timeline pour suivi */
.timeline {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--clr-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-icon {
    position: absolute;
    left: -2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
}

.timeline-icon.success { background: var(--clr-green); }
.timeline-icon.info { background: var(--clr-blue); }
.timeline-icon.warning { background: var(--clr-yellow); }

.timeline-content {
    background: var(--clr-bg-primary);
    padding: 0.8rem;
    border-radius: 8px;
}

.timeline-content h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.timeline-content p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

/* Documents list */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.document-item i {
    font-size: 1.5rem;
}

.document-item i.pdf { color: #ef4444; }
.document-item i.word { color: #0284c7; }

.document-info {
    flex: 1;
}

.document-info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.document-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-nav {
        width: 100%;
        justify-content: space-between;
    }
    
    .calendar-legend {
        width: 100%;
        justify-content: space-around;
    }
    
    .entreprises-grid,
    .conventions-grid {
        grid-template-columns: 1fr;
    }
    
    .entreprise-card-footer {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .entreprise-card-footer button {
        width: 100%;
    }
    
    .convention-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .stages-tabs {
        flex-direction: column;
    }
    
    .stages-tab {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .calendar-days {
        font-size: 0.8rem;
    }
    
    .calendar-day {
        min-height: 80px;
    }
    
    .event-item {
        font-size: 0.7rem;
        padding: 0.2rem;
    }
    
    .entreprise-card-header {
        flex-wrap: wrap;
    }
    
    .stats-mini {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* ==============================================
   STAGES - ÉLÉMENTS COMPLÉMENTAIRES
   ============================================== */

/* Timeline améliorée */
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.timeline-date {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.timeline-author {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    display: block;
    margin-top: 0.3rem;
}

.suivi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Documents */
.documents-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.document-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.document-actions {
    display: flex;
    gap: 0.3rem;
}

.badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
}

/* Évaluation */
.evaluation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.critere-row {
    display: flex;
    align-items: center;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    margin-bottom: 0.8rem;
}

.critere-label {
    width: 200px;
    display: flex;
    flex-direction: column;
}

.critere-coeff {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.critere-notes {
    flex: 1;
    display: flex;
    gap: 0.8rem;
}

.critere-note {
    width: 100px;
    padding: 0.4rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
}

.critere-commentaire {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
}

.evaluation-resultat {
    display: flex;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    border-radius: 10px;
    color: white;
}

.resultat-card {
    text-align: center;
}

.resultat-label {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.3rem;
}

.resultat-valeur {
    font-size: 2rem;
    font-weight: 700;
}

.resultat-mention {
    font-size: 1.3rem;
    font-weight: 600;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

/* Entreprise details */
.entreprise-details-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.entreprise-logo-large {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.entreprise-titre {
    flex: 1;
}

.entreprise-titre h2 {
    margin-bottom: 0.3rem;
}

.entreprise-titre p {
    color: var(--clr-text-secondary);
}

/* Tuteurs grid */
.tuteurs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.tuteur-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 10px;
}

.tuteur-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.tuteur-card-info {
    flex: 1;
}

.tuteur-card-info h5 {
    margin-bottom: 0.2rem;
}

.tuteur-card-info p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.tuteur-contact {
    font-size: 0.8rem !important;
}

.tuteur-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.tuteur-stats .note {
    font-weight: 600;
}

.tuteurs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Historique stats */
.historique-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 10px;
}

.stat-mini {
    text-align: center;
    flex: 1;
}

.stat-mini .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-blue);
    display: block;
}

.stat-mini .stat-label {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .critere-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .critere-label {
        width: 100%;
    }
    
    .critere-notes {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .critere-note {
        width: 80px;
    }
    
    .radio-group {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .entreprise-details-header {
        flex-direction: column;
        text-align: center;
    }
    
    .tuteurs-grid {
        grid-template-columns: 1fr;
    }
    
    .historique-stats {
        flex-direction: column;
        gap: 1rem;
    }
}




/* ==============================================
   BULLETINS MODULE STYLES
   ============================================== */

.bulletins-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.bulletins-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.bulletins-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.bulletins-tab.active {
    background: var(--clr-blue);
    color: white;
}

.bulletins-view {
    display: none;
}

.bulletins-view.active {
    display: block;
}

/* Mentions */
.mention {
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.mention.tres-bien {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
}

.mention.bien {
    background: rgba(2, 132, 199, 0.1);
    color: var(--clr-blue);
}

.mention.assez-bien {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
}

.mention.insuffisant {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-red);
}

.moyenne {
    font-weight: 600;
    color: var(--clr-blue);
}

/* Classes bulletins grid */
.classes-bulletins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.classe-bulletin-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.classe-bulletin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.classe-bulletin-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.classe-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.classe-info {
    flex: 1;
}

.classe-info h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.classe-info p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.classe-bulletin-stats {
    margin-bottom: 1rem;
}

.classe-bulletin-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    color: var(--clr-text-secondary);
}

.classe-bulletin-stats .valeur {
    font-weight: 600;
}

.classe-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
}

.progress-text {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

/* Envoi groupé */
.envoi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.envoi-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-box {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--clr-shadow);
}

.stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.envoi-config {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.envoi-config h4 {
    margin-bottom: 1.2rem;
    color: var(--clr-blue);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.envoi-preview {
    margin-top: 2rem;
}

.envoi-preview h4 {
    margin-bottom: 1rem;
}

/* Historique timeline */
.timeline-section {
    margin-bottom: 2rem;
}

.timeline-section h4 {
    margin-bottom: 1rem;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Modal génération */
.recap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.recap-item {
    text-align: center;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.recap-label {
    display: block;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.recap-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--clr-blue);
}

.progress-container {
    margin-top: 1.5rem;
}

/* Bulletin preview */
.bulletin-preview {
    background: white;
    color: #1e293b;
    padding: 2rem;
    border-radius: 8px;
    font-family: 'Times New Roman', serif;
}

.theme-dark .bulletin-preview {
    background: #1e293b;
    color: #f8fafc;
}

.bulletin-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.ecole-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ecole-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.ecole-info h2 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.ecole-info p {
    font-size: 0.8rem;
    color: #64748b;
}

.bulletin-titre {
    text-align: right;
}

.bulletin-titre h1 {
    font-size: 1.5rem;
    color: #0284c7;
    margin-bottom: 0.3rem;
}

.bulletin-eleve {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.theme-dark .bulletin-eleve {
    background: #0f172a;
}

.eleve-identite p,
.eleve-stats p {
    margin-bottom: 0.3rem;
}

.moyenne-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0284c7;
}

.mention-value {
    font-weight: 600;
    color: #10b981;
}

.bulletin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.bulletin-table th {
    background: #f1f5f9;
    padding: 0.8rem;
    text-align: left;
    font-size: 0.9rem;
}

.theme-dark .bulletin-table th {
    background: #334155;
}

.bulletin-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
}

.theme-dark .bulletin-table td {
    border-bottom-color: #334155;
}

.note-cell {
    font-weight: 600;
    color: #0284c7;
}

.bulletin-appreciations {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
    font-style: italic;
}

.theme-dark .bulletin-appreciations {
    background: #0f172a;
}

.bulletin-appreciations h4 {
    margin-bottom: 0.5rem;
    font-style: normal;
}

.bulletin-signatures {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.signature {
    text-align: center;
}

.signature-nom {
    margin-top: 2rem;
    font-weight: 600;
}

.bulletin-footer {
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
    .bulletin-entete {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .ecole-info {
        flex-direction: column;
    }
    
    .bulletin-titre {
        text-align: center;
    }
    
    .bulletin-eleve {
        flex-direction: column;
        gap: 1rem;
    }
    
    .bulletin-signatures {
        flex-direction: column;
        gap: 2rem;
    }
    
    .envoi-stats {
        grid-template-columns: 1fr;
    }
    
    .recap-grid {
        grid-template-columns: 1fr;
    }
}



/* ==============================================
   SALLES DE COURS MODULE STYLES
   ============================================== */

.salles-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.salles-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.salles-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.salles-tab.active {
    background: var(--clr-blue);
    color: white;
}

.salles-view {
    display: none;
}

.salles-view.active {
    display: block;
}

/* Salle info */
.salle-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.salle-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.salle-icon.blue { background: var(--clr-blue); }
.salle-icon.green { background: var(--clr-green); }
.salle-icon.yellow { background: var(--clr-yellow); }
.salle-icon.purple { background: #8b5cf6; }

.salle-nom {
    font-weight: 600;
}

.salle-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Équipements mini */
.equipements-mini {
    display: flex;
    gap: 0.3rem;
    color: var(--clr-text-secondary);
}

.equipements-mini i {
    font-size: 1rem;
}

/* Planning grid */
.planning-grid {
    display: flex;
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--clr-shadow);
    margin-top: 1rem;
}

.planning-times {
    width: 100px;
    flex-shrink: 0;
    background: var(--clr-bg-primary);
}

.time-header {
    height: 50px;
    background: var(--clr-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.time-slot {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--clr-border);
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.time-slot.pause {
    background: var(--clr-bg-primary);
    font-weight: 600;
    color: var(--clr-text-primary);
}

.planning-day {
    flex: 1;
    min-width: 120px;
}

.day-header {
    height: 50px;
    background: var(--clr-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-left: 1px solid var(--clr-border);
}

.day-slots {
    display: flex;
    flex-direction: column;
}

.slot {
    height: 70px;
    border-left: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding: 0.2rem;
}

.slot.pause {
    background: var(--clr-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.reservation-card {
    background: var(--clr-bg-primary);
    border-radius: 4px;
    padding: 0.3rem;
    font-size: 0.75rem;
    cursor: pointer;
    border-left: 3px solid;
    transition: transform 0.2s;
}

.reservation-card:hover {
    transform: translateX(2px);
    box-shadow: var(--clr-shadow);
}

.reservation-card.maths { border-left-color: var(--clr-blue); }
.reservation-card.anglais { border-left-color: var(--clr-green); }
.reservation-card.physique { border-left-color: var(--clr-yellow); }
.reservation-card.histoire { border-left-color: var(--clr-red); }
.reservation-card.svt { border-left-color: #8b5cf6; }
.reservation-card.musique { border-left-color: #ec4899; }

.reservation-matiere {
    display: block;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.reservation-classe,
.reservation-enseignant {
    display: block;
    font-size: 0.7rem;
    color: var(--clr-text-secondary);
}

/* Mes réservations */
.reservations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.reservations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.reservation-card-large {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.reservation-card-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.reservation-time {
    min-width: 100px;
    text-align: center;
}

.reservation-time .date {
    display: block;
    font-weight: 600;
    color: var(--clr-blue);
}

.reservation-time .heure {
    display: block;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.reservation-details {
    flex: 1;
}

.reservation-details h5 {
    margin-bottom: 0.3rem;
}

.reservation-details p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.reservation-details i {
    width: 18px;
    margin-right: 0.3rem;
}

.reservation-actions {
    display: flex;
    gap: 0.3rem;
}

/* Disponibilité */
.dispo-header {
    margin-bottom: 1.5rem;
}

.dispo-header h3 {
    margin-bottom: 1rem;
}

.dispo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.dispo-card {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.dispo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.dispo-card-header h5 {
    font-size: 1rem;
}

.dispo-card p {
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

.dispo-card i {
    width: 20px;
    margin-right: 0.3rem;
    color: var(--clr-blue);
}

.dispo-card .btn-small {
    margin-top: 0.8rem;
    width: 100%;
}

/* Équipements list */
.equipements-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.equipement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.equipement-item i {
    font-size: 1.1rem;
}

/* Planning mini */
.planning-mini {
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    overflow: hidden;
}

.planning-mini-header {
    display: grid;
    grid-template-columns: 60px repeat(5, 1fr);
    background: var(--clr-bg-primary);
    border-bottom: 2px solid var(--clr-border);
}

.planning-mini-header span {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.planning-mini-row {
    display: grid;
    grid-template-columns: 60px repeat(5, 1fr);
    border-bottom: 1px solid var(--clr-border);
}

.planning-mini-row:last-child {
    border-bottom: none;
}

.planning-mini-row .time {
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    font-size: 0.8rem;
    text-align: center;
}

.planning-mini-row .slot {
    height: auto;
    padding: 0.3rem;
    font-size: 0.75rem;
    text-align: center;
}

.planning-mini-row .slot.occupied {
    background: rgba(2, 132, 199, 0.1);
    color: var(--clr-blue);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1200px) {
    .planning-grid {
        overflow-x: auto;
    }
    
    .planning-times {
        position: sticky;
        left: 0;
        z-index: 2;
    }
}

@media (max-width: 768px) {
    .reservation-card-large {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .reservation-time {
        width: 100%;
        text-align: left;
    }
    
    .reservation-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .dispo-filters .filter-group {
        flex-direction: column;
    }
    
    .dispo-filters select,
    .dispo-filters input {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .reservations-grid {
        grid-template-columns: 1fr;
    }
    
    .dispo-grid {
        grid-template-columns: 1fr;
    }
}


/* ======================================================================================== */


/* ==============================================
   SALLES - AMÉLIORATIONS RESPONSIVE
   ============================================== */

/* Texte avec ellipsis */
.text-ellipsis {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.salle-nom-container {
    max-width: 120px;
}

.salle-nom {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.salle-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Amélioration du tableau responsive */
@media (max-width: 1200px) {
    .data-table th,
    .data-table td {
        padding: 0.8rem 0.3rem;
        font-size: 0.85rem;
    }
    
    .text-ellipsis {
        max-width: 100px;
    }
}

@media (max-width: 992px) {
    .data-table {
        font-size: 0.8rem;
    }
    
    .action-buttons {
        flex-wrap: wrap;
        gap: 0.2rem;
    }
    
    .action-icon-btn {
        width: 28px;
        height: 28px;
    }
}

/* Amélioration de l'en-tête du planning */
.planning-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.planning-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.planning-nav h3 {
    font-size: 1.1rem;
    margin: 0 0.5rem;
    white-space: nowrap;
}

.planning-filters {
    min-width: 200px;
}

@media (max-width: 768px) {
    .planning-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .planning-nav {
        justify-content: center;
    }
    
    .planning-nav h3 {
        font-size: 1rem;
    }
    
    .planning-filters {
        width: 100%;
    }
    
    .planning-filters select {
        width: 100%;
    }
}

/* Amélioration des cartes de réservation */
.reservations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.reservation-card-large {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .reservation-card-large {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .reservation-time {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .reservation-time .date {
        font-size: 1rem;
    }
    
    .reservation-time .heure {
        font-size: 0.9rem;
    }
    
    .reservation-details {
        width: 100%;
    }
    
    .reservation-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .reservation-time {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    
    .reservation-actions {
        justify-content: space-around;
    }
}



/* ==============================================
   SALLES - CARTES AMÉLIORÉES ET AJUSTEMENTS
   ============================================== */

/* Grille améliorée pour les cartes */
.reservations-grid-improved {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

/* Carte améliorée */
.reservation-card-improved {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reservation-card-improved:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

/* En-tête de carte */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.salle-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.salle-badge i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--clr-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.salle-badge i.fa-flask { background: var(--clr-green); }
.salle-badge i.fa-university { background: #8b5cf6; }

.salle-badge span {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Corps de carte */
.card-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.info-row i {
    width: 20px;
    color: var(--clr-blue);
    font-size: 0.9rem;
}

.info-row .label {
    color: var(--clr-text-secondary);
    width: 70px;
    font-size: 0.85rem;
}

.info-row .value {
    flex: 1;
    font-weight: 500;
    color: var(--clr-text-primary);
}

/* Pied de carte */
.card-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
}

.btn-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-text-primary);
    background: var(--clr-bg-primary);
    border: 1px solid var(--clr-border);
    transition: all 0.2s ease;
}

.btn-icon-text:hover {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.btn-icon-text.danger:hover {
    background: var(--clr-red);
    border-color: var(--clr-red);
}

/* Responsive pour les cartes */
@media (max-width: 768px) {
    .reservations-grid-improved {
        grid-template-columns: 1fr;
    }
    
    .info-row {
        flex-wrap: wrap;
    }
    
    .info-row .label {
        width: auto;
        min-width: 60px;
    }
    
    .card-footer {
        flex-wrap: wrap;
    }
    
    .btn-icon-text {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    
    .info-row i {
        display: none;
    }
    
    .info-row .label {
        width: 100%;
        font-size: 0.8rem;
    }
    
    .info-row .value {
        width: 100%;
        padding-left: 0.5rem;
        font-size: 0.9rem;
    }
}

/* Ajustements du tableau pour les très petits écrans */
@media (max-width: 640px) {
    .data-table th,
    .data-table td {
        padding: 0.6rem 0.2rem;
        font-size: 0.75rem;
    }
    
    .action-icon-btn {
        width: 24px;
        height: 24px;
    }
    
    .badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.3rem;
    }
    
    .equipements-mini i {
        font-size: 0.8rem;
    }
}



/* ==============================================
   INSCRIPTIONS MODULE STYLES
   ============================================== */

.inscriptions-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.inscriptions-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.inscriptions-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.inscriptions-tab.active {
    background: var(--clr-blue);
    color: white;
}

.inscriptions-tab .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.inscriptions-view {
    display: none;
}

.inscriptions-view.active {
    display: block;
}

/* Classes grid */
.classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.classe-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.classe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.classe-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.classe-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
}

.classe-icon.blue { background: var(--clr-blue); }
.classe-icon.green { background: var(--clr-green); }
.classe-icon.yellow { background: var(--clr-yellow); }
.classe-icon.purple { background: #8b5cf6; }

.classe-card-header h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.classe-card-header p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.classe-card-body {
    margin-bottom: 1rem;
}

.classe-card-body .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    color: var(--clr-text-secondary);
}

.classe-card-body .valeur {
    font-weight: 600;
}

/* En attente grid */
.en-attente-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.attente-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    transition: all 0.3s ease;
}

.attente-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.attente-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.attente-card-header img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.attente-card-header h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.attente-card-header .matricule {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.attente-card-header .date {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.attente-card-body {
    margin-bottom: 1rem;
}

.attente-card-body .info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.attente-card-body .info-row i {
    width: 20px;
    color: var(--clr-blue);
}

.attente-card-body .info-row strong {
    margin-left: auto;
}

.attente-card-footer {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

.btn-success {
    background: var(--clr-green);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-success:hover {
    background: #0f9e6a;
    transform: translateY(-2px);
}

/* Réinscriptions */
.reinscriptions-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.reinscriptions-stats .stat-box {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--clr-shadow);
}

.reinscriptions-stats .stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.reinscriptions-stats .stat-label {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

/* Modal Formulaire */
.parent-card {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

.parent-card h5 {
    margin-bottom: 1rem;
    color: var(--clr-blue);
}

.parent-card h5 .optional {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    font-weight: normal;
    margin-left: 0.5rem;
}

.documents-upload {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.document-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.document-row span:first-child {
    width: 180px;
    font-weight: 500;
}

.document-row input[type="file"] {
    flex: 1;
}

.document-row .file-status {
    width: 100px;
    font-size: 0.85rem;
}

.file-status:empty:before {
    content: "Non fourni";
    color: var(--clr-red);
}

/* Détails modal */
.eleve-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.eleve-titre h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.eleve-titre p {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.eleve-titre i {
    width: 16px;
    margin-right: 0.3rem;
}

.parents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.parent-card-detail {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1.2rem;
}

.parent-card-detail h4 {
    margin-bottom: 1rem;
    color: var(--clr-blue);
}

/* ==============================================
   STEPPER & FRAIS STYLES
   ============================================== */

/* Stepper container */
.stepper-container {
    padding: 1.5rem 1.5rem 0.5rem;
    background: var(--clr-bg-secondary);
    border-bottom: 1px solid var(--clr-border);
}

.stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1000px;
    margin: 0 auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.step.active {
    opacity: 1;
}

.step.completed {
    opacity: 0.8;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-bg-primary);
    border: 2px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.step.completed .step-number {
    background: var(--clr-green);
    border-color: var(--clr-green);
    color: white;
}

.step.completed .step-number::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.step-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
}

.step.active .step-label {
    color: var(--clr-blue);
    font-weight: 600;
}

.step-connector {
    flex: 0.5;
    height: 2px;
    background: var(--clr-border);
    margin: 0 0.5rem;
    position: relative;
    top: -15px;
}

/* Step content */
.step-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.step-content.active {
    display: block;
}

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

/* Navigation buttons */
.step-navigation {
    display: flex;
    justify-content: space-between;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--clr-border);
    margin-top: 1.5rem;
}

.step-navigation button {
    min-width: 120px;
}

/* Frais cards */
.frais-resume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.frais-card {
    background: var(--clr-bg-primary);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: center;
    border: 1px solid var(--clr-border);
    transition: all 0.3s ease;
}

.frais-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--clr-shadow);
    border-color: var(--clr-blue);
}

.frais-card.total {
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
}

.frais-card.total .frais-label {
    color: rgba(255, 255, 255, 0.9);
}

.frais-label {
    display: block;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.frais-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.frais-card.total .frais-value {
    color: white;
}

/* Disabled field */
.disabled-field {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
    opacity: 0.7;
    cursor: not-allowed;
}

/* Échéances preview */
#echeancesPreview {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

#echeancesPreview h5 {
    margin-bottom: 1rem;
    color: var(--clr-blue);
}

/* Récapitulatif */
.recap-inscription {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--clr-blue);
}

.recap-inscription p {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--clr-border);
}

.recap-inscription p:last-child {
    border-bottom: none;
}

.recap-inscription strong {
    color: var(--clr-blue);
}

/* Responsive stepper */
@media (max-width: 768px) {
    .stepper {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .step {
        flex-direction: row;
        width: 100%;
        gap: 1rem;
    }
    
    .step-connector {
        display: none;
    }
    
    .step-number {
        margin-bottom: 0;
    }
    
    .step-label {
        text-align: left;
    }
    
    .frais-resume {
        grid-template-columns: 1fr;
    }
    
    .step-navigation {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .step-navigation button {
        width: 100%;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .en-attente-grid {
        grid-template-columns: 1fr;
    }
    
    .attente-card-footer {
        flex-direction: column;
    }
    
    .parents-grid {
        grid-template-columns: 1fr;
    }
    
    .document-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .document-row span:first-child {
        width: 100%;
    }
    
    .document-row input[type="file"] {
        width: 100%;
    }
    
    .document-row .file-status {
        width: 100%;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .classes-grid {
        grid-template-columns: 1fr;
    }
    
    .reinscriptions-stats {
        grid-template-columns: 1fr;
    }
    
    .attente-card-header {
        flex-wrap: wrap;
    }
    
    .attente-card-header .date {
        width: 100%;
        margin-left: 0;
    }
}


/* ==============================================
   STATISTIQUES MODULE STYLES
   ============================================== */

.stats-filters {
    margin-bottom: 1.5rem;
}

/* KPI Cards (déjà existants, à compléter) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.kpi-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.kpi-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

.kpi-icon.blue { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.kpi-icon.green { background: linear-gradient(135deg, #10b981, #34d399); }
.kpi-icon.yellow { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.kpi-icon.purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

.kpi-content {
    margin-bottom: 1rem;
}

.kpi-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.kpi-label {
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.kpi-trend {
    font-size: 0.85rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    display: inline-block;
}

.kpi-trend.positive {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.kpi-trend.neutral {
    background: rgba(100, 116, 139, 0.1);
    color: var(--clr-text-secondary);
}

.kpi-trend.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Charts grid */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
}

.chart-select {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
    font-size: 0.8rem;
    cursor: pointer;
}

/* Structures stats */
.structures-stats-section {
    margin-bottom: 2rem;
}

.structures-stats-section h3 {
    margin-bottom: 1.2rem;
}

.structures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
}

.structure-stat-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.structure-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.structure-stat-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.structure-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
}

.structure-icon.blue { background: var(--clr-blue); }
.structure-icon.green { background: var(--clr-green); }
.structure-icon.purple { background: #8b5cf6; }

.structure-stat-header h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.structure-stat-header p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.structure-stat-body {
    margin-bottom: 1rem;
}

.structure-stat-body .stat-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.structure-stat-body .stat-row span:first-child {
    width: 50px;
}

.structure-stat-body .progress-bar {
    flex: 1;
    height: 8px;
    background: var(--clr-bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.structure-stat-body .progress-bar .progress {
    height: 100%;
    background: var(--clr-blue);
    border-radius: 4px;
}

.structure-stat-body .stat-value {
    width: 40px;
    text-align: right;
    font-weight: 600;
}

.structure-stat-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.structure-stat-footer i {
    margin-right: 0.3rem;
    color: var(--clr-blue);
}

/* Section comparative */
.comparative-section {
    margin-bottom: 2rem;
}

.comparative-section h3 {
    margin-bottom: 1.2rem;
}

.comparative-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.2rem;
}

.comparative-table-container {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    overflow-x: auto;
}

.comparative-table {
    width: 100%;
    border-collapse: collapse;
}

.comparative-table th {
    text-align: left;
    padding: 0.8rem 0.5rem;
    color: var(--clr-text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    border-bottom: 2px solid var(--clr-border);
}

.comparative-table td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.comparative-table tbody tr:hover {
    background: var(--clr-bg-primary);
}

.performance-cards {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.performance-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    text-align: center;
}

.performance-card h4 {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--clr-text-secondary);
}

.gauge-chart {
    height: 100px;
    margin-bottom: 1rem;
}

.performance-value {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.5rem;
}

.big-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-blue);
}

.trend {
    font-size: 0.9rem;
}

/* Section récent */
.recent-section {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.recent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.recent-item:hover {
    background: var(--clr-bg-primary);
}

.recent-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.recent-info {
    flex: 1;
}

.recent-name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.recent-detail {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .comparative-grid {
        grid-template-columns: 1fr;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .structures-grid {
        grid-template-columns: 1fr;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .recent-item {
        flex-wrap: wrap;
    }
}


/* ==============================================
   STATISTIQUES - ÉLÉMENTS COMPLÉMENTAIRES
   ============================================== */

/* Structure stats cards */
.structure-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.structure-stats-cards .stat-card {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.structure-stats-cards .stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.stat-content {
    flex: 1;
}

.stat-content .stat-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-content .stat-label {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

/* Progress bar mini */
.progress-bar-mini {
    width: 80px;
    height: 6px;
    background: var(--clr-bg-primary);
    border-radius: 3px;
    overflow: hidden;
}

/* Personnel stats */
.personnel-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.personnel-stats .stat-mini {
    background: var(--clr-bg-primary);
    border-radius: 6px;
    padding: 0.8rem;
    text-align: center;
}

.personnel-stats .stat-mini .value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--clr-blue);
}

.personnel-stats .stat-mini .label {
    font-size: 0.7rem;
    color: var(--clr-text-secondary);
}

.personnel-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.personnel-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.personnel-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.personnel-info {
    flex: 1;
}

.personnel-info .name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.personnel-info .role {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

.personnel-item .contact {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Analytics grid */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.analytics-card {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
}

.analytics-card h5 {
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

.pie-chart-mini {
    height: 100px;
    width: 100px;
    margin: 0 auto 0.8rem;
}

.stats-lines {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-line {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
}

.stat-line .color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.stat-line .value {
    margin-left: auto;
    font-weight: 600;
}

.stat-line .progress-bar {
    flex: 1;
    height: 4px;
}

/* Filters mini */
.filters-mini {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .structure-stats-cards {
        grid-template-columns: 1fr 1fr;
    }
    
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-mini {
        flex-direction: column;
    }
}

/* ==============================================
   BOURSES MODULE STYLES
   ============================================== */

.bourses-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.bourses-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.bourses-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.bourses-tab.active {
    background: var(--clr-blue);
    color: white;
}

.bourses-tab .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.bourses-view {
    display: none;
}

.bourses-view.active {
    display: block;
}

/* Montant */
.montant {
    font-weight: 600;
    color: var(--clr-green);
}

/* Échéance badge */
.echeance-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
}

.echeance-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
}

.echeance-badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
}

/* Badges de type */
.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

/* Cartes demande */
.demandes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.demande-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    transition: all 0.3s ease;
}

.demande-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.demande-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.demande-card-header img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.demande-card-header h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.demande-card-header .matricule {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.demande-card-header .date {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.demande-card-body {
    margin-bottom: 1rem;
}

.demande-card-body .info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.demande-card-body .info-row i {
    width: 20px;
    color: var(--clr-blue);
}

.demande-card-body .info-row strong {
    margin-left: auto;
}

.demande-card-footer {
    display: flex;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

/* Structure bourse cards */
.bourse-structures-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.bourse-structure-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.bourse-structure-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.structure-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.structure-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
}

.structure-icon.blue { background: var(--clr-blue); }
.structure-icon.green { background: var(--clr-green); }
.structure-icon.purple { background: #8b5cf6; }

.structure-header h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.structure-header p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.structure-body .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.structure-body .stat-row .value {
    font-weight: 600;
}

.structure-body .stat-row .montant {
    color: var(--clr-green);
}

/* Échéances */
.echeances-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.echeance-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    border-left: 4px solid transparent;
}

.echeance-item.urgent {
    border-left-color: var(--clr-red);
    background: rgba(239, 68, 68, 0.05);
}

.echeance-date {
    text-align: center;
    min-width: 60px;
}

.echeance-date .jour {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.echeance-date .mois {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.echeance-info {
    flex: 1;
}

.echeance-info h4 {
    margin-bottom: 0.2rem;
}

.echeance-info p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.echeance-action {
    min-width: 120px;
}

/* Rappels */
.rappels-section {
    margin-top: 2rem;
    padding: 1.2rem;
    background: var(--clr-bg-secondary);
    border-radius: 12px;
}

.rappels-section h4 {
    margin-bottom: 1rem;
}

.rappel-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.rappel-item:last-child {
    border-bottom: none;
}

.rappel-item i {
    color: var(--clr-yellow);
    font-size: 1.2rem;
}

.rappel-item span {
    flex: 1;
    font-size: 0.9rem;
}

/* Dossier modal */
.dossier-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dossier-section {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
}

.dossier-section h4 {
    margin-bottom: 1rem;
    color: var(--clr-blue);
    font-size: 1rem;
}

/* Highlight */
.highlight {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-green);
}

/* Responsive */
@media (max-width: 768px) {
    .demandes-grid {
        grid-template-columns: 1fr;
    }
    
    .echeance-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    
    .echeance-date {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
    }
    
    .echeance-date .jour {
        font-size: 1.2rem;
    }
    
    .echeance-action {
        width: 100%;
    }
    
    .echeance-action button {
        width: 100%;
    }
    
    .demande-card-footer {
        flex-direction: column;
    }
    
    .bourse-structures-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .rappel-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .demande-card-header {
        flex-wrap: wrap;
    }
    
    .demande-card-header .date {
        width: 100%;
        margin-left: 0;
    }
}

/* ==============================================
   BOURSES - ÉLÉMENTS COMPLÉMENTAIRES
   ============================================== */

/* En-tête des demandes avec boutons */
.demandes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Mini cartes de dossier */
.echeance-dossiers-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.dossier-mini-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dossier-mini-card:hover {
    background: rgba(2, 132, 199, 0.1);
}

.dossier-mini-card img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.dossier-mini-info {
    flex: 1;
}

.dossier-mini-info .nom {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.dossier-mini-info .classe {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Détail échéance */
.echeance-detail-card {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .detail-label {
    width: 120px;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.detail-row .detail-value {
    flex: 1;
    font-weight: 500;
}

.detail-row .detail-value.urgent {
    color: var(--clr-red);
    font-weight: 600;
}

.detail-row.full-width {
    flex-direction: column;
}

.detail-row.full-width .detail-label {
    width: 100%;
    margin-bottom: 0.3rem;
}

/* Upload de documents amélioré */
.documents-upload .document-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.documents-upload .document-row span:first-child {
    width: 180px;
    font-weight: 500;
}

.documents-upload .document-row input[type="file"] {
    flex: 1;
}

.documents-upload .document-row .file-status {
    width: 100px;
    font-size: 0.8rem;
}

/* Section résultats (bourse au mérite) */
#sectionResultats {
    transition: all 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .demandes-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-actions {
        width: 100%;
    }
    
    .header-actions button {
        flex: 1;
    }
    
    .documents-upload .document-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .documents-upload .document-row span:first-child {
        width: 100%;
    }
    
    .documents-upload .document-row input[type="file"] {
        width: 100%;
    }
    
    .detail-row {
        flex-direction: column;
    }
    
    .detail-row .detail-label {
        width: 100%;
        margin-bottom: 0.2rem;
    }
}



/* ==============================================
   FACTURATION MODULE STYLES
   ============================================== */

.factures-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.factures-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.factures-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.factures-tab.active {
    background: var(--clr-blue);
    color: white;
}

.factures-view {
    display: none;
}

.factures-view.active {
    display: block;
}

/* Montants */
.montant {
    font-weight: 600;
}

.montant.paye {
    color: var(--clr-green);
}

.montant.restant {
    color: var(--clr-red);
}

/* Numéro facture */
.facture-num {
    font-family: monospace;
    font-weight: 600;
    color: var(--clr-blue);
}

/* Échéances */
.echeances-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.echeance-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    border-left: 4px solid transparent;
}

.echeance-item.urgent {
    border-left-color: var(--clr-red);
    background: rgba(239, 68, 68, 0.05);
}

.echeance-date {
    text-align: center;
    min-width: 60px;
}

.echeance-date .jour {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.echeance-date .mois {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.echeance-info {
    flex: 1;
}

.echeance-info h4 {
    margin-bottom: 0.2rem;
}

.echeance-info p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.echeance-montant {
    text-align: right;
    min-width: 100px;
}

.echeance-montant .label {
    display: block;
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

.echeance-montant .montant {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--clr-blue);
}

.echeance-action {
    min-width: 120px;
}

/* Retards */
.retards-section {
    margin-top: 2rem;
    padding: 1.2rem;
    background: var(--clr-bg-secondary);
    border-radius: 12px;
}

.retards-section h4 {
    margin-bottom: 1rem;
}

.retards-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.retard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.retard-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.retard-badge {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-red);
    border-radius: 4px;
}

/* Rapprochement */
.rapprochement-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.rapprochement-stats .stat-box {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: var(--clr-shadow);
}

.rapprochement-stats .stat-number {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.rapprochement-stats .stat-label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.rapproche {
    background: rgba(16, 185, 129, 0.05);
}

/* Lignes de facture */
.ligne-facture {
    background: var(--clr-bg-primary);
    border-radius: 6px;
    padding: 0.8rem;
    margin-bottom: 0.5rem;
}

.ligne-facture .form-grid {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
    background: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: var(--clr-red);
    color: white;
    border-color: var(--clr-red);
}

/* Totaux facture */
.totaux-facture {
    max-width: 300px;
    margin-left: auto;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.total-row.grand-total {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--clr-border);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-blue);
}

/* Aperçu facture */
.facture-preview {
    background: white;
    color: #1e293b;
    padding: 1.5rem;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
}

.theme-dark .facture-preview {
    background: #1e293b;
    color: #f8fafc;
}

.facture-entete {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.entreprise-info h4 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    color: var(--clr-blue);
}

.entreprise-info p {
    font-size: 0.8rem;
    color: #64748b;
}

.facture-info {
    text-align: right;
}

.facture-info h2 {
    font-size: 1.5rem;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.facture-client {
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
}

.theme-dark .facture-client {
    background: #0f172a;
}

.facture-client h5 {
    margin-bottom: 0.5rem;
    color: #64748b;
}

.facture-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.facture-table th {
    background: #f1f5f9;
    padding: 0.8rem;
    text-align: left;
    font-size: 0.9rem;
}

.theme-dark .facture-table th {
    background: #334155;
}

.facture-table td,
.facture-table th {
    padding: 0.8rem;
    border-bottom: 1px solid #e2e8f0;
}

.theme-dark .facture-table td {
    border-bottom-color: #334155;
}

.facture-table tfoot tr.total td {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--clr-blue);
    border-top: 2px solid #e2e8f0;
}

.text-right {
    text-align: right;
}

.facture-paiements {
    margin-bottom: 1.5rem;
}

.facture-paiements h5 {
    margin-bottom: 0.8rem;
}

.facture-notes {
    font-size: 0.9rem;
    color: #64748b;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .echeance-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    
    .echeance-date {
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
    }
    
    .echeance-montant {
        text-align: left;
        width: 100%;
    }
    
    .echeance-action {
        width: 100%;
    }
    
    .echeance-action button {
        width: 100%;
    }
    
    .retard-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    
    .ligne-facture .form-grid {
        flex-wrap: wrap;
    }
    
    .ligne-facture .form-group {
        width: 100% !important;
    }
    
    .facture-entete {
        flex-direction: column;
        gap: 1rem;
    }
    
    .facture-info {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .rapprochement-stats {
        grid-template-columns: 1fr;
    }
}


/* ================================================================================================= */

/* ==============================================
   CAISSE & SCOLARITÉ STYLES
   ============================================== */

.caisse-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.caisse-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.caisse-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.caisse-tab.active {
    background: var(--clr-blue);
    color: white;
}

.caisse-tab .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.caisse-view {
    display: none;
}

.caisse-view.active {
    display: block;
}

/* Fiche élève */
.recherche-eleve-section {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.recherche-header {
    margin-bottom: 1.5rem;
}

.recherche-rapide {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.recherche-input {
    flex: 1;
    padding: 0.8rem;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    font-size: 1rem;
}

.fiche-eleve {
    margin-top: 2rem;
    border-top: 1px solid var(--clr-border);
    padding-top: 2rem;
}

.fiche-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.eleve-identite {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.eleve-identite img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.eleve-identite h4 {
    margin-bottom: 0.3rem;
}

.eleve-identite p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.eleve-identite i {
    width: 16px;
    margin-right: 0.3rem;
}

.montant-du {
    text-align: right;
}

.montant-du .label {
    display: block;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.montant-du .valeur {
    font-size: 2rem;
    font-weight: 700;
    color: var(--clr-blue);
}

/* Tables */
.frais-table, .historique-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.frais-table th, .historique-table th {
    text-align: left;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.frais-table td, .historique-table td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.reste {
    font-weight: 600;
    color: var(--clr-red);
}

/* Impayés */
.impaye-urgent {
    background: rgba(239, 68, 68, 0.05);
}

.retard {
    font-weight: 600;
}

.retard.urgent {
    color: var(--clr-red);
}

/* Moratoires */
.moratoires-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.moratoire-card {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.moratoire-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.moratoire-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.eleve-nom {
    font-weight: 600;
}

.moratoire-body {
    font-size: 0.9rem;
}

.moratoire-body .detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.moratoire-body .date {
    color: var(--clr-blue);
    font-weight: 600;
}

/* Journal */
.journal-synthese {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.synthese-card {
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--clr-shadow);
}

.synthese-card .label {
    display: block;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.synthese-card .valeur {
    font-size: 1.3rem;
    font-weight: 600;
}

.synthese-card .valeur.positive { color: var(--clr-green); }
.synthese-card .valeur.negative { color: var(--clr-red); }

.journal-liste {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: var(--clr-shadow);
}

.journal-date-header {
    font-weight: 600;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    margin: 0.5rem 0;
    border-radius: 6px;
}

.journal-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
    cursor: pointer;
    transition: background 0.3s ease;
}

.journal-entry:hover {
    background: var(--clr-bg-primary);
}

.entry-time {
    min-width: 60px;
    color: var(--clr-text-secondary);
}

.entry-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.entry-icon.entree { background: var(--clr-green); }
.entry-icon.sortie { background: var(--clr-red); }

.entry-details {
    flex: 1;
}

.entry-title {
    display: block;
    font-weight: 500;
    margin-bottom: 0.2rem;
}

.entry-ref {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.entry-amount {
    font-weight: 600;
    min-width: 100px;
}

.entry-amount.positif { color: var(--clr-green); }
.entry-amount.negatif { color: var(--clr-red); }

.entry-user {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    min-width: 120px;
}

/* Échéances */
.echeances-list {
    margin: 1rem 0;
}

.echeance-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    margin-bottom: 0.3rem;
    border-radius: 4px;
}

.echeance-item .montant {
    font-weight: 600;
    color: var(--clr-blue);
}

/* Responsive */
@media (max-width: 768px) {
    .recherche-rapide {
        flex-direction: column;
    }
    
    .fiche-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .journal-entry {
        flex-wrap: wrap;
    }
    
    .entry-time {
        width: 100%;
    }
    
    .entry-user {
        width: 100%;
        margin-left: 42px;
    }
    
    .moratoires-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .eleve-identite {
        flex-direction: column;
        text-align: center;
    }
    
    .frais-table, .historique-table {
        font-size: 0.85rem;
    }
    
    .frais-table th, .historique-table th {
        padding: 0.5rem;
    }
}



/* ==============================================
   AMÉLIORATIONS CAISSE & SCOLARITÉ
   ============================================== */

/* Badges de statut */
.statut-badge.vert { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.statut-badge.orange { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }
.statut-badge.rouge { background: rgba(239, 68, 68, 0.1); color: var(--clr-red); }
.statut-badge.gris { background: rgba(100, 116, 139, 0.1); color: var(--clr-text-secondary); }

/* Soldes container */
.soldes-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.solde-card {
    background: var(--clr-bg-primary);
    padding: 1rem;
    border-radius: 8px;
    min-width: 120px;
    text-align: center;
}

.solde-card .label {
    display: block;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.solde-card .valeur {
    font-size: 1.3rem;
    font-weight: 600;
}

.solde-card .valeur.positif { color: var(--clr-green); }
.solde-card .valeur.reste { color: var(--clr-red); }
.solde-card .valeur.avance { color: var(--clr-blue); }

/* Résultats recherche */
.resultats-recherche {
    margin-top: 1rem;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    overflow: hidden;
}

.resultat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
    cursor: pointer;
    transition: background 0.3s ease;
}

.resultat-item:hover {
    background: var(--clr-bg-primary);
}

.resultat-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.resultat-info {
    flex: 1;
}

.resultat-info .nom {
    display: block;
    font-weight: 600;
}

.resultat-info .classe {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Échéancier */
.echeancier-table {
    width: 100%;
    border-collapse: collapse;
}

.echeancier-table th {
    text-align: left;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
}

.echeancier-table td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.echeancier-table tr.paye { background: rgba(16, 185, 129, 0.05); }
.echeancier-table tr.partiel { background: rgba(245, 158, 11, 0.05); }
.echeancier-table tr.attente { background: transparent; }

/* Avance */
.avance-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(2, 132, 199, 0.1);
    border-radius: 6px;
    color: var(--clr-blue);
}

/* Info avance dans modal */
.info-avance {
    padding: 0.5rem;
    background: rgba(2, 132, 199, 0.1);
    border-radius: 4px;
    color: var(--clr-blue);
}

/* Résumé paiement */
.paiement-resume {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.resume-ligne {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.resume-ligne.total {
    border-top: 1px solid var(--clr-border);
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

/* Échéances modifiables */
.echeances-list.modifiable {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1rem 0;
}

.echeance-modifiable {
    background: var(--clr-bg-primary);
    border-radius: 6px;
    padding: 0.8rem;
}

.echeance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.echeance-header span {
    font-weight: 600;
}

.btn-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
}

.btn-icon:hover {
    background: var(--clr-bg-secondary);
    color: var(--clr-red);
}

.echeance-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.echeance-fields .field {
    display: flex;
    flex-direction: column;
}

.echeance-fields .field label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.echeance-fields .field input {
    padding: 0.3rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
}

.total-echeances {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    text-align: right;
}

/* Pénalités */
.penalites-section {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.penalites-calcul {
    margin-top: 0.5rem;
}

.penalite-ligne {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.penalite-ligne.total {
    border-top: 1px solid var(--clr-border);
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

.penalite-ligne .valeur.rouge {
    color: var(--clr-red);
}

/* Double validation */
.double-validation {
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
}

/* KPI details */
.detail-stats {
    margin-bottom: 1rem;
}

.detail-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.detail-stats .stat-row.total {
    border-top: 2px solid var(--clr-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

.impaye-item, .moratoire-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.impaye-item.total, .moratoire-item.total {
    border-top: 2px solid var(--clr-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-weight: 600;
}


/* ==============================================
   PAIE MODULE STYLES
   ============================================== */

.paie-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.paie-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.paie-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.paie-tab.active {
    background: var(--clr-blue);
    color: white;
}

.paie-tab .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.paie-view {
    display: none;
}

.paie-view.active {
    display: block;
}

/* Employé info */
.employe-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employe-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.employe-nom {
    font-weight: 600;
}

.employe-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Badges */
.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

/* Résumé mois */
.mois-resume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.resume-card {
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    box-shadow: var(--clr-shadow);
}

.resume-card .label {
    display: block;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.resume-card .valeur {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--clr-blue);
}

/* Virement */
.virement-resume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.virement-apercu {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.virement-apercu pre {
    background: var(--clr-bg-secondary);
    padding: 1rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

/* Historique mois */
.mois-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.mois-card {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.mois-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.mois-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.mois-header h4 {
    font-size: 1rem;
}

.mois-body {
    margin-bottom: 0.8rem;
}

.mois-body .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.mois-footer {
    text-align: right;
}

/* Fiche employé modal */
.employe-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.employe-detail-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.employe-detail-header h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.employe-detail-header p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

/* Bulletin paie */
.bulletin-paie {
    font-family: 'Times New Roman', serif;
    padding: 1rem;
}

.bulletin-paie .bulletin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #000;
}

.entreprise-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.entreprise-info h2 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.entreprise-info p {
    font-size: 0.85rem;
    color: #666;
}

.bulletin-titre h1 {
    font-size: 1.5rem;
    color: #0284c7;
    margin-bottom: 0.2rem;
}

.bulletin-employe {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 2px solid var(--clr-bg-primary) ;
    border-radius: 8px;
}

.bulletin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.bulletin-table th {
    background: #f1f5f9;
    padding: 0.8rem;
    text-align: left;
    font-weight: 600;
}

.bulletin-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
}

.bulletin-totaux {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 2px solid var(--clr-bg-primary);
    border-radius: 8px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.total-row.net {
    border-top: 1px solid #e2e8f0;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.bulletin-mentions {
    font-size: 0.8rem;
    color: #666;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .bulletin-employe {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mois-liste {
        grid-template-columns: 1fr;
    }
    
    .employe-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .bulletin-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .entreprise-info {
        flex-direction: column;
    }
}

/* ==============================================
   CONFIGURATION FINANCE STYLES
   ============================================== */

/* Barre de progression */
.config-progress {
    display: flex;
    justify-content: space-between;
    margin: 2rem 0;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 50px;
    box-shadow: var(--clr-shadow);
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-text-secondary);
}

.progress-item.completed {
    color: var(--clr-green);
}

.progress-step {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--clr-bg-primary);
    border: 2px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.progress-item.completed .progress-step {
    background: var(--clr-green);
    border-color: var(--clr-green);
    color: white;
}

/* Onglets */
.config-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.config-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.config-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.config-tab.active {
    background: var(--clr-blue);
    color: white;
}

.config-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.config-tab-content.active {
    display: block;
}

/* Sections */
.config-section {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h3 {
    font-size: 1.1rem;
    color: var(--clr-blue);
}

/* Tables de configuration */
.config-table {
    width: 100%;
    border-collapse: collapse;
}

.config-table th {
    text-align: left;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

.config-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.config-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.config-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.config-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.config-textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
    resize: vertical;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-blue);
}

/* Grille de paramètres */
.param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.param-item.full-width {
    grid-column: 1 / -1;
}

.param-item label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

/* Switch toggles */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clr-border);
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
}

input:checked + .slider {
    background-color: var(--clr-green);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Aperçu reçu */
.recu-preview {
    background: white;
    color: #1e293b;
    padding: 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.theme-dark .recu-preview {
    background: #1e293b;
    color: #f8fafc;
}

.recu-preview:hover {
    border-color: var(--clr-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.preview-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.preview-body {
    padding: 1rem 0;
}

.preview-body h4 {
    margin-bottom: 0.5rem;
    color: #0284c7;
}

.preview-footer {
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 0.8rem;
    color: #64748b;
}

.preview-signature {
    margin-top: 0.5rem;
    max-width: 100px;
}

/* Calcul auto */
.calcul-auto {
    color: var(--clr-text-secondary);
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .config-progress {
        flex-direction: column;
        gap: 0.5rem;
        border-radius: 10px;
    }
    
    .param-grid {
        grid-template-columns: 1fr;
    }
    
    .config-table {
        font-size: 0.85rem;
    }
    
    .config-table td {
        padding: 0.5rem 0.3rem;
    }
    
    .config-input, .config-select {
        padding: 0.3rem;
    }
}

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



/* =================================================================== */

/* ==============================================
   VUE D'ENSEMBLE FINANCE STYLES
   ============================================== */

/* Comparatifs */
.comparatifs-section {
    margin: 2rem 0;
}

.comparatifs-section h3 {
    margin-bottom: 1rem;
}

.comparatifs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.comparatif-table-container {
    overflow-x: auto;
}

.comparatif-table {
    width: 100%;
    border-collapse: collapse;
}

.comparatif-table th {
    text-align: left;
    padding: 0.8rem 0.5rem;
    color: var(--clr-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--clr-border);
}

.comparatif-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.comparatif-table td.positif {
    color: var(--clr-green);
    font-weight: 600;
}

.comparatif-table td.negatif {
    color: var(--clr-red);
    font-weight: 600;
}

.comparatif-chart {
    height: 200px;
}

/* Alertes */
.alertes-section {
    margin: 2rem 0;
}

.alertes-section h3 {
    margin-bottom: 1rem;
}

.alertes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.alerte-card {
    display: flex;
    gap: 1rem;
    padding: 1.2rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    border-left: 4px solid;
    transition: transform 0.3s ease;
}

.alerte-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.alerte-card.niveau-urgent {
    border-left-color: #ef4444;
}

.alerte-card.niveau-avertissement {
    border-left-color: #f59e0b;
}

.alerte-card.niveau-info {
    border-left-color: #0284c7;
}

.alerte-card.niveau-success {
    border-left-color: #10b981;
}

.alerte-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.niveau-urgent .alerte-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.niveau-avertissement .alerte-icon {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.niveau-info .alerte-icon {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.niveau-success .alerte-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.alerte-content {
    flex: 1;
}

.alerte-content h4 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.alerte-content p {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.alerte-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Répartition */
.repartition-section {
    margin: 2rem 0;
}

.repartition-section h3 {
    margin-bottom: 1rem;
}

.repartition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
}

.repartition-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.repartition-card h4 {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--clr-text-secondary);
}

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
}

.legende-item .couleur {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.stats-liste {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.stat-item .progress-bar {
    flex: 1;
    height: 8px;
    background: var(--clr-bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.stat-item .progress-bar .progress {
    height: 100%;
    background: var(--clr-blue);
    border-radius: 4px;
}

.stat-item .valeur {
    min-width: 80px;
    text-align: right;
    font-weight: 500;
}

/* Détails modaux */
.detail-stats {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.detail-stats .stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.detail-stats .stat-row.total {
    border-top: 2px solid var(--clr-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    font-weight: 600;
}

.seuil-info {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.seuil-info h4 {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.seuil-item {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
}

/* Barre horizontale répartition */
.repartition-impayes {
    margin-top: 1rem;
}

.barre-horizontale {
    display: flex;
    height: 30px;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.barre-segment {
    height: 100%;
}

.legende-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
}

.legende-barre .couleur {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 0.3rem;
}

/* Liste moratoires */
.moratoires-liste {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 400px;
    overflow-y: auto;
}

.moratoire-item {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.moratoire-item:hover {
    background: rgba(2, 132, 199, 0.1);
}

.moratoire-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.moratoire-info .nom {
    font-weight: 600;
}

.moratoire-info .montant {
    color: var(--clr-blue);
    font-weight: 600;
}

.moratoire-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.moratoire-progress .progress-bar {
    flex: 1;
    height: 6px;
    background: var(--clr-bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}

.moratoire-progress .progress-bar .progress {
    height: 100%;
    background: var(--clr-green);
    border-radius: 3px;
}

.moratoire-progress span {
    min-width: 70px;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .comparatifs-grid {
        grid-template-columns: 1fr;
    }
    
    .alertes-grid {
        grid-template-columns: 1fr;
    }
    
    .repartition-grid {
        grid-template-columns: 1fr;
    }
    
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .alerte-card {
        flex-direction: column;
    }
    
    .legende-barre {
        flex-direction: column;
        gap: 0.3rem;
    }
}




/* ========================================================= */


/* ==============================================
   EXAMENS MODULE STYLES
   ============================================== */

.sessions-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.sessions-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.sessions-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.sessions-tab.active {
    background: var(--clr-blue);
    color: white;
}

.sessions-view {
    display: none;
}

.sessions-view.active {
    display: block;
}

/* Session info */
.session-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.session-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.session-icon.blue { background: var(--clr-blue); }
.session-icon.green { background: var(--clr-green); }
.session-icon.yellow { background: var(--clr-yellow); }

.session-nom {
    font-weight: 600;
}

.session-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Épreuve info */
.epreuve-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.epreuve-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.epreuve-icon.maths { background: var(--clr-blue); }
.epreuve-icon.physique { background: var(--clr-green); }
.epreuve-icon.anglais { background: var(--clr-yellow); }
.epreuve-icon.svt { background: #8b5cf6; }

.epreuve-nom {
    font-weight: 600;
}

.epreuve-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Planning timeline */
.planning-timeline {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
    position: relative;
    height: 150px;
}

.timeline-years {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
}

.timeline-months {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.timeline-months .month {
    flex: 1;
    text-align: center;
}

.sessions-timeline {
    position: relative;
    height: 40px;
    background: var(--clr-bg-primary);
    border-radius: 20px;
    margin-top: 0.5rem;
}

.session-bar {
    position: absolute;
    height: 100%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

.session-bar:hover {
    transform: scaleY(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.session-label {
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    padding: 0 0.5rem;
}

/* Plan de salle */
.plan-salle {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.salle-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rangee {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.place {
    width: 40px;
    height: 40px;
    background: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.place:hover {
    border-color: var(--clr-blue);
    background: rgba(2, 132, 199, 0.1);
}

/* Stats mini */
.stats-mini {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
}

.stats-mini .stat {
    text-align: center;
}

.stats-mini .stat .valeur {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--clr-blue);
}

.stats-mini .stat .label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Resultats stats */
.resultats-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.resultats-stats .stat-card {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.resultats-stats .stat-card .valeur {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-months {
        flex-wrap: wrap;
    }
    
    .session-bar {
        min-width: 40px;
    }
    
    .session-label {
        display: none;
    }
    
    .salle-grid {
        overflow-x: auto;
    }
}

/* ==============================================
   EXAMENS - STYLES COMPLÉMENTAIRES
   ============================================== */

/* Upload grid */
.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.upload-item {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
}

.upload-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--clr-blue);
}

.file-upload-area {
    border: 2px dashed var(--clr-border);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-area:hover {
    border-color: var(--clr-blue);
    background: rgba(2, 132, 199, 0.05);
}

.file-upload-area i {
    font-size: 2rem;
    color: var(--clr-blue);
    margin-bottom: 0.5rem;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--clr-bg-secondary);
    border-radius: 4px;
    margin-top: 0.5rem;
}

.file-info i.pdf {
    color: #ef4444;
    font-size: 1.2rem;
}

.file-info span {
    flex: 1;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Plan de salle amélioré */
.legende-placement {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.place-occupee {
    background: var(--clr-green);
}

.dot.place-vide {
    background: var(--clr-border);
}

.dot.place-reservee {
    background: var(--clr-yellow);
}

.salle-grid {
    background: var(--clr-bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.rangee {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.place {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: help;
    transition: all 0.2s ease;
}

.place.occupee {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid var(--clr-green);
    color: var(--clr-green);
}

.place.vide {
    background: var(--clr-bg-secondary);
    border: 1px dashed var(--clr-border);
    color: var(--clr-text-secondary);
}

.place.reservee {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid var(--clr-yellow);
    color: var(--clr-yellow);
}

.place:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bureau-surveillants {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.bureau, .entree {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    background: var(--clr-bg-secondary);
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Surveillants table */
.surveillants-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.surveillants-table th {
    text-align: left;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.surveillants-table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.surveillant-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.surveillant-info img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Consignes */
.consignes-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.consignes-content {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.consignes-content p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.consignes-content i {
    width: 20px;
    color: var(--clr-blue);
}

/* Responsive */
@media (max-width: 768px) {
    .upload-grid {
        grid-template-columns: 1fr;
    }
    
    .salle-grid {
        overflow-x: auto;
    }
    
    .rangee {
        flex-wrap: wrap;
    }
    
    .consignes-content {
        grid-template-columns: 1fr;
    }
}




/* ==============================================
   MODALES SURVEILLANCE
   ============================================== */

.modal-sm {
    max-width: 400px;
}

/* Éditeur de grille */
.plan-salle-editeur {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.config-salle {
    background: var(--clr-bg-primary);
    padding: 1rem;
    border-radius: 8px;
}

.grille-legend {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.grille-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.grille-legend .legend-item:hover {
    background: var(--clr-bg-secondary);
}

.grille-legend .legend-item.active {
    border-color: var(--clr-blue);
}

.grille-modifiable {
    background: var(--clr-bg-primary);
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
}

.rangee-editable {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    justify-content: center;
}

.place-editable {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    border: 2px solid transparent;
}

.place-editable.occupee {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--clr-green);
    color: var(--clr-green);
}

.place-editable.vide {
    background: var(--clr-bg-secondary);
    border: 2px dashed var(--clr-border);
    color: var(--clr-text-secondary);
}

.place-editable.reservee {
    background: rgba(245, 158, 11, 0.2);
    border-color: var(--clr-yellow);
    color: var(--clr-yellow);
}

.place-editable.surveillant {
    background: rgba(2, 132, 199, 0.2);
    border-color: var(--clr-blue);
    color: var(--clr-blue);
}

.place-editable:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.place-num {
    font-weight: 600;
}

.place-statut {
    font-size: 0.65rem;
}

/* Attribution des élèves */
.attribution-container {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}

.liste-eleves {
    flex: 1;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
}

.eleves-list {
    max-height: 200px;
    overflow-y: auto;
}

.eleve-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--clr-bg-secondary);
    border-radius: 4px;
    margin-bottom: 0.3rem;
    cursor: grab;
    transition: all 0.2s ease;
}

.eleve-item:hover {
    background: var(--clr-bg-primary);
    transform: translateX(2px);
}

.eleve-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.aide-drag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--clr-text-secondary);
}

.aide-drag i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .attribution-container {
        flex-direction: column;
    }
    
    .place-editable {
        width: 50px;
        height: 50px;
        font-size: 0.7rem;
    }
}


/* ==============================================
   STYLES POUR LE DRAG & DROP
   ============================================== */

.eleve-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.place-editable.drag-over {
    border-color: var(--clr-blue);
    background: rgba(2, 132, 199, 0.1);
    transform: scale(1.02);
}

.place-eleve-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2px;
}

.liberer-place {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background: var(--clr-red);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.place-editable:hover .liberer-place {
    opacity: 1;
}

.eleves-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 4px;
    font-size: 0.85rem;
}

.place-editable {
    position: relative;
}

/* Animation de drop */
@keyframes dropSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.place-editable.occupee {
    animation: dropSuccess 0.3s ease;
}


/* ======================================================= */


/* ==============================================
   CONVOCATIONS & DÉLIBÉRATIONS STYLES
   ============================================== */

.convocations-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.convocations-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.convocations-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.convocations-tab.active {
    background: var(--clr-blue);
    color: white;
}

.convocations-view {
    display: none;
}

.convocations-view.active {
    display: block;
}

/* Envoi groupé */
.envoi-recap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.recap-card {
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.recap-card .label {
    display: block;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
}

.recap-card .valeur {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clr-blue);
}

.email-config {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1.5rem 0;
}

/* Convocation preview */
.convocation-preview {
    font-family: 'Times New Roman', serif;
    padding: 1.5rem;
    background: white;
    color: #1e293b;
    border-radius: 8px;
}

.convocation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #0284c7;
}

.convocation-eleve {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
}

.convocation-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.convocation-table th {
    background: #f1f5f9;
    padding: 0.8rem;
    text-align: left;
}

.convocation-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
}

.convocation-instructions {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
}

.convocation-qrcode {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
}

.qrcode-container {
    text-align: center;
}

.qrcode-container img {
    width: 100px;
    height: 100px;
}

.convocation-signature {
    text-align: right;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Délibérations grid */
.deliberations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.deliberation-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.deliberation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
}

.card-icon.blue { background: var(--clr-blue); }
.card-icon.green { background: var(--clr-green); }
.card-icon.yellow { background: var(--clr-yellow); }

.card-title {
    flex: 1;
}

.card-title h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.card-title p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
}

.stat-item {
    text-align: center;
}

.stat-item .label {
    display: block;
    font-size: 0.7rem;
    color: var(--clr-text-secondary);
}

.stat-item .value {
    font-size: 1.1rem;
    font-weight: 600;
}

.progress-section {
    margin: 1rem 0;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Progression délibération */
.deliberation-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 50px;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-text-secondary);
}

.progress-step.active {
    color: var(--clr-blue);
}

.step-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--clr-bg-secondary);
    border: 2px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.progress-step.active .step-number {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
    color: white;
}

/* Notes summary */
.notes-summary {
    margin-bottom: 1.5rem;
}

.summary-card {
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
    border-radius: 8px;
    padding: 1rem;
}

.summary-stats {
    display: flex;
    gap: 2rem;
    margin-top: 0.5rem;
}

.summary-stats .stat .value {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Délibération table */
.decision-select {
    padding: 0.3rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

tr.admis { background: rgba(16, 185, 129, 0.05); }
tr.ajourne { background: rgba(239, 68, 68, 0.05); }
tr.rattrapage { background: rgba(245, 158, 11, 0.05); }

.deliberation-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .convocation-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .convocation-qrcode {
        flex-direction: column;
    }
    
    .deliberation-progress {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .summary-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ==============================================
   DIPLÔMES MODULE STYLES
   ============================================== */

.diplomes-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.diplomes-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.diplomes-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.diplomes-tab.active {
    background: var(--clr-blue);
    color: white;
}

.diplomes-view {
    display: none;
}

.diplomes-view.active {
    display: block;
}

/* Badges */
.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }

/* Mentions */
.mention.tres-bien {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.mention.bien {
    background: rgba(2, 132, 199, 0.1);
    color: var(--clr-blue);
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.mention.assez-bien {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.mention.passable {
    background: rgba(100, 116, 139, 0.1);
    color: var(--clr-text-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Liste de génération */
.generation-liste {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    margin: 1.5rem 0;
    box-shadow: var(--clr-shadow);
}

.liste-header {
    display: flex;
    padding: 0.8rem 0;
    border-bottom: 2px solid var(--clr-border);
    font-weight: 600;
    color: var(--clr-text-secondary);
}

.checkbox-col { width: 40px; }
.eleve-col { flex: 2; }
.type-col { flex: 1; }
.mention-col { flex: 1; }
.date-col { width: 120px; }
.statut-col { width: 100px; }

.liste-body {
    display: flex;
    flex-direction: column;
}

.liste-item {
    display: flex;
    align-items: center;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--clr-border);
    transition: background 0.3s ease;
}

.liste-item:hover {
    background: var(--clr-bg-primary);
}

/* Options de génération */
.generation-options {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1.5rem 0;
    box-shadow: var(--clr-shadow);
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.option-item {
    padding: 0.5rem;
}

/* Récapitulatif */
.generation-recap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.recap-card {
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.recap-card .label {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
    margin-bottom: 0.3rem;
}

.recap-card .valeur {
    font-size: 1.3rem;
    font-weight: 600;
}

/* Barre de progression */
.progress-container {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1.5rem 0;
    box-shadow: var(--clr-shadow);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-bar-large {
    height: 20px;
    background: var(--clr-bg-primary);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar-large .progress {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-blue), #38bdf8);
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Validation */
.lot-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.lot-stats .stat-card {
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--clr-shadow);
}

.lot-stats .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.validation-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.validation-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    box-shadow: var(--clr-shadow);
    transition: transform 0.3s ease;
}

.validation-item:hover {
    transform: translateX(5px);
}

.validation-check {
    width: 40px;
}

.validation-eleve {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.validation-eleve img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.validation-eleve .nom {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.validation-eleve .detail {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.validation-docs {
    flex: 1;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.validation-actions {
    display: flex;
    gap: 0.3rem;
}

.validation-batch {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Remise */
.remises-calendrier {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.remise-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.remise-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.remise-date {
    text-align: center;
    min-width: 80px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
    padding: 0.8rem;
    border-radius: 8px;
}

.remise-date .jour {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.remise-date .mois {
    display: block;
    font-size: 0.9rem;
}

.remise-date .annee {
    display: block;
    font-size: 0.8rem;
    opacity: 0.9;
}

.remise-info {
    flex: 1;
}

.remise-info h4 {
    margin-bottom: 0.3rem;
}

.remise-info p {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.remise-info i {
    width: 16px;
    margin-right: 0.3rem;
}

.remise-stats {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.remise-actions {
    min-width: 120px;
}

/* Infos remise dans modal */
.remise-infos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-card {
    background: var(--clr-bg-primary);
    border-radius: 6px;
    padding: 0.8rem;
    text-align: center;
}

.info-card .label {
    display: block;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.info-card .value {
    font-weight: 600;
}

/* Aperçu diplôme */
.diplome-preview {
    font-family: 'Times New Roman', serif;
    padding: 1.5rem;
    background: white;
    color: #1e293b;
    border-radius: 8px;
}

.diplome-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #0284c7;
}

.diplome-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.diplome-titre {
    flex: 1;
}

.diplome-titre h2 {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0.3rem;
}

.diplome-titre h1 {
    font-size: 1.5rem;
    color: #0284c7;
}

.diplome-corps {
    text-align: center;
}

.diplome-texte {
    font-size: 1rem;
    margin: 0.5rem 0;
    color: #333;
}

.diplome-nom {
    font-size: 2rem;
    color: #0284c7;
    margin: 1.5rem 0;
    font-weight: 600;
}

.diplome-naissance {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
}

.diplome-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    max-width: 400px;
    margin: 1.5rem auto;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
    text-align: left;
}

.diplome-details p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

.diplome-signatures {
    display: flex;
    justify-content: space-around;
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.diplome-qrcode {
    margin-top: 1rem;
    text-align: center;
}

.diplome-qrcode img {
    width: 80px;
    height: 80px;
}

/* Responsive */
@media (max-width: 768px) {
    .liste-header {
        display: none;
    }
    
    .liste-item {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .checkbox-col { width: auto; }
    .eleve-col { width: 100%; }
    .type-col, .mention-col, .date-col, .statut-col { width: calc(50% - 0.5rem); }
    
    .validation-item {
        flex-wrap: wrap;
    }
    
    .validation-check { width: auto; }
    .validation-eleve { width: 100%; }
    .validation-docs { width: 100%; }
    .validation-actions { width: 100%; justify-content: flex-end; }
    
    .remise-card {
        flex-wrap: wrap;
    }
    
    .remise-date { width: 100%; }
    .remise-info { width: 100%; }
    .remise-actions { width: 100%; }
    
    .validation-batch {
        flex-direction: column;
    }
    
    .diplome-header {
        flex-direction: column;
        text-align: center;
    }
    
    .diplome-details {
        grid-template-columns: 1fr;
    }
    
    .diplome-signatures {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ==============================================
   PRÉSENCES MODULE STYLES
   ============================================== */

/* Tabs */
.absences-tabs,
.sanctions-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.absences-tab,
.sanctions-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.absences-tab:hover,
.sanctions-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.absences-tab.active,
.sanctions-tab.active {
    background: var(--clr-blue);
    color: white;
}

.absences-tab .badge,
.sanctions-tab .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.absences-view,
.sanctions-view {
    display: none;
}

.absences-view.active,
.sanctions-view.active {
    display: block;
}

/* Badges pour les types */
.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-red { background: rgba(239, 68, 68, 0.1); color: var(--clr-red); }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }
.badge-warning { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }
.badge-danger { background: rgba(239, 68, 68, 0.1); color: var(--clr-red); }

/* Calendrier spécifique aux présences */
.calendar-grid {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--clr-shadow);
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--clr-bg-primary);
    border-bottom: 2px solid var(--clr-border);
}

.calendar-weekdays div {
    padding: 1rem;
    text-align: center;
    font-weight: 600;
    color: var(--clr-text-secondary);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--clr-border);
}

.calendar-day {
    background: var(--clr-bg-secondary);
    min-height: 100px;
    padding: 0.5rem;
    position: relative;
}

.calendar-day.other-month {
    background: var(--clr-bg-primary);
    opacity: 0.5;
}

.day-number {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
}

.day-events {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.event-item {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.2s;
    color: white;
}

.event-item:hover {
    transform: translateX(2px);
}

.event-item.absence {
    background: var(--clr-blue);
}

.event-item.retard {
    background: var(--clr-green);
}

.event-item.justifie {
    background: var(--clr-yellow);
    color: var(--clr-text-primary);
}

.event-item.non-justifie {
    background: var(--clr-red);
}

/* Cartes justificatifs */
.justificatifs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.justificatif-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.justificatif-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.justificatif-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.eleve-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.eleve-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.eleve-info h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.eleve-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.justificatif-card .card-body {
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.info-row i {
    width: 20px;
    color: var(--clr-blue);
    font-size: 0.9rem;
}

.justificatif-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
}

.justificatif-card .card-footer .date {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.justificatif-card .actions {
    display: flex;
    gap: 0.3rem;
}

/* Cartes sanctions */
.sanctions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.sanction-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.sanction-card:hover {
    transform: translateX(5px);
    border-color: var(--clr-blue);
}

.sanction-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sanction-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.recidive {
    font-size: 0.8rem;
    color: var(--clr-red);
}

.recidive i {
    margin-right: 0.3rem;
}

/* Détails absence */
.absence-detail {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.detail-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .label {
    width: 120px;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.detail-row .value {
    flex: 1;
    font-weight: 500;
}

/* Détails sanction */
.sanction-detail {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Justificatif preview */
.justificatif-preview {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.justificatif-preview img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 4px;
}

.justificatif-actions {
    display: flex;
    justify-content: center;
}

/* Motifs table */
.motifs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Stats rapides */
.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-mini-card {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
}

.stat-mini-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-mini-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-mini-icon.blue { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.stat-mini-icon.green { background: linear-gradient(135deg, #10b981, #34d399); }
.stat-mini-icon.yellow { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.stat-mini-icon.red { background: linear-gradient(135deg, #ef4444, #f87171); }

.stat-mini-content {
    flex: 1;
}

.stat-mini-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-mini-label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Détail statistique modal */
.detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.detail-item .badge {
    background: var(--clr-blue);
    color: white;
    padding: 0.3rem 0.8rem;
}

/* Graphiques */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.chart-header {
    margin-bottom: 1rem;
}

.chart-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.chart-container {
    height: 250px;
    width: 100%;
    position: relative;
}

/* Top absences */
.top-absences {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.top-absences h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Pagination */
.pagination-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.pagination-info {
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.pagination-controls {
    display: flex;
    gap: 0.3rem;
}

.pagination-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.pagination-btn.active {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Boutons small */
.btn-small {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 4px;
}

.btn-success {
    background: var(--clr-green);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #0f9e6a;
}

.btn-danger {
    background: var(--clr-red);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #dc2626;
}

/* Formulaires */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-weekdays div {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    .calendar-day {
        min-height: 60px;
        font-size: 0.8rem;
    }
    
    .day-number {
        font-size: 0.7rem;
    }
    
    .justificatifs-grid {
        grid-template-columns: 1fr;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-row {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .detail-row .label {
        width: 100%;
    }
    
    .stat-mini-card {
        padding: 0.8rem;
    }
    
    .stat-mini-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .stat-mini-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .quick-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .calendar-weekdays {
        font-size: 0.7rem;
    }
    
    .calendar-day {
        min-height: 40px;
    }
    
    .event-item {
        font-size: 0.6rem;
        padding: 0.2rem;
    }
    
    .justificatif-card .card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .justificatif-card .actions {
        width: 100%;
    }
    
    .justificatif-card .actions button {
        flex: 1;
    }
    
    .pagination-section {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions button {
        width: 100%;
    }
}


/* ==============================================
   PRÉSENCES 
   ============================================== */


/* Modal Appel */
.appel-params {
    background: var(--clr-bg-primary);
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.appel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.appel-search {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.appel-search i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clr-text-secondary);
}

.appel-search input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.8rem;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
}

.appel-counters {
    display: flex;
    gap: 1.5rem;
}

.counter {
    text-align: center;
}

.counter .count {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.counter.present .count { color: var(--clr-green); }
.counter.absent .count { color: var(--clr-red); }
.counter.total .count { color: var(--clr-blue); }

.counter .label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Grille des élèves */
.eleves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
}

.eleve-card {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: var(--clr-shadow);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.eleve-card.present {
    border-color: var(--clr-green);
    background: rgba(16, 185, 129, 0.05);
}

.eleve-card.absent {
    border-color: var(--clr-red);
    background: rgba(239, 68, 68, 0.05);
}

.eleve-num {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    min-width: 25px;
}

.eleve-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.eleve-nom {
    flex: 1;
    font-weight: 500;
    font-size: 0.9rem;
}

.eleve-actions {
    display: flex;
    gap: 0.3rem;
}

.btn-present, .btn-absent {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-present {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
}

.btn-present:hover,
.btn-present.active {
    background: var(--clr-green);
    color: white;
}

.btn-absent {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-red);
}

.btn-absent:hover,
.btn-absent.active {
    background: var(--clr-red);
    color: white;
}

/* Actions batch spécifiques */
.batch-actions {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid var(--clr-border);
}

/* Responsive */
@media (max-width: 768px) {
    .appel-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .appel-counters {
        justify-content: space-around;
    }
    
    .eleves-grid {
        grid-template-columns: 1fr;
    }
    
    .eleve-card {
        flex-wrap: wrap;
    }
    
    .eleve-actions {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    .btn-present, .btn-absent {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .eleve-card {
        flex-direction: column;
        text-align: center;
    }
    
    .eleve-num {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
    }
}


/* ==============================================
   VUE D'ENSEMBLE PRÉSENCES STYLES
   ============================================== */

/* Couleurs supplémentaires */
.kpi-icon.purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.kpi-icon.orange { background: linear-gradient(135deg, #f97316, #fb923c); }
.kpi-icon.teal { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.kpi-icon.cyan { background: linear-gradient(135deg, #06b6d4, #22d3ee); }

/* Top élèves grid */
.top-eleves-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.top-eleve-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid var(--clr-border);
}

.top-eleve-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.rank {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 24px;
    height: 24px;
    background: var(--clr-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.top-eleve-card:nth-child(1) .rank { background: gold; color: #1e293b; }
.top-eleve-card:nth-child(2) .rank { background: silver; color: #1e293b; }
.top-eleve-card:nth-child(3) .rank { background: #cd7f32; color: white; }

.top-eleve-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.top-eleve-card .info {
    flex: 1;
}

.top-eleve-card .info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.top-eleve-card .info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.top-eleve-card .stats {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    text-align: right;
}

.top-eleve-card .stats .absences {
    color: var(--clr-red);
    font-weight: 600;
}

.top-eleve-card .stats .retards {
    color: var(--clr-yellow);
}

.top-eleve-card .total {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clr-blue);
    min-width: 30px;
    text-align: right;
}

/* Stats mini dans les modales */
.stats-mini {
    display: flex;
    justify-content: space-around;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.stats-mini .stat {
    text-align: center;
}

.stats-mini .stat .label {
    display: block;
    font-size: 0.7rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.stats-mini .stat .value {
    font-size: 1.2rem;
    font-weight: 600;
}

.stats-mini .stat .value.success { color: var(--clr-green); }
.stats-mini .stat .value.warning { color: var(--clr-yellow); }
.stats-mini .stat .value.danger { color: var(--clr-red); }

/* Tableau des présences */
.presences-jour-section {
    margin: 2rem 0;
}

.presences-jour-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.presences-jour-section .data-table tr.present td {
    background: rgba(16, 185, 129, 0.05);
}

.presences-jour-section .data-table tr.absent td {
    background: rgba(239, 68, 68, 0.05);
}

.presences-jour-section .data-table tr.retard td {
    background: rgba(245, 158, 11, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .top-eleves-grid {
        grid-template-columns: 1fr;
    }
    
    .top-eleve-card {
        flex-wrap: wrap;
    }
    
    .stats-mini {
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ==============================================
   CLASSEMENTS STYLES
   ============================================== */

.classement-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: transform 0.3s ease;
}

.classement-item:hover {
    transform: translateX(5px);
}

.classement-item.gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border-left: 4px solid gold;
}

.classement-item.silver {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.05));
    border-left: 4px solid silver;
}

.classement-item.bronze {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05));
    border-left: 4px solid #cd7f32;
}

.classement-item .rank {
    width: 30px;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--clr-text-secondary);
}

.classement-item .nom {
    flex: 1;
    font-weight: 600;
}

.classement-item .score {
    font-size: 1.2rem;
    font-weight: 700;
    margin-right: 1rem;
}

.classement-item .trend {
    width: 60px;
    font-size: 0.9rem;
}

.trend.positive { color: var(--clr-green); }
.trend.neutral { color: var(--clr-text-secondary); }
.trend.negative { color: var(--clr-red); }

/* Présence détail */
.presence-detail {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* ==============================================
   MODALES DÉTAILS
   ============================================== */

.eleve-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.eleve-detail-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.eleve-detail-header h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.eleve-detail-header p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.eleve-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.justificatif-info {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.justificatif-preview {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.justificatif-preview img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 4px;
}

.justificatif-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.sanction-detail {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.full-width {
    grid-column: 1 / -1;
}



/* ==============================================
   BIBLIOTHÈQUE MODULE STYLES
   ============================================== */

.bibliotheque-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.bibliotheque-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.bibliotheque-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.bibliotheque-tab.active {
    background: var(--clr-blue);
    color: white;
}

.bibliotheque-view {
    display: none;
}

.bibliotheque-view.active {
    display: block;
}

/* Options de vue */
.catalogue-view-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.view-toggle {
    display: flex;
    gap: 0.3rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 0.2rem;
}

.view-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.view-btn:hover {
    background: var(--clr-bg-secondary);
}

.view-btn.active {
    background: var(--clr-blue);
    color: white;
}

.results-count {
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

/* Grille des livres */
.livres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.livre-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-border);
}

.livre-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.livre-cover {
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.livre-cover i {
    font-size: 3rem;
    color: white;
    opacity: 0.8;
}

.livre-info {
    flex: 1;
}

.livre-titre {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.livre-auteur {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.livre-meta {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.livre-isbn {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.livre-disponibilite {
    margin-bottom: 1rem;
}

.livre-actions {
    display: flex;
    gap: 0.5rem;
}

/* Détails livre */
.livre-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.livre-cover-large {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.livre-cover-large i {
    font-size: 2.5rem;
    color: white;
}

.livre-detail-titre h2 {
    margin-bottom: 0.3rem;
}

.livre-detail-titre p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

/* Top livres */
.top-livres-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.top-livre-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.top-livre-item:hover {
    background: rgba(2, 132, 199, 0.1);
    transform: translateX(5px);
}

.top-livre-item .rank {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--clr-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.livre-cover-mini {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.livre-cover-mini i {
    font-size: 1.2rem;
    color: white;
}

.top-livre-item .livre-info {
    flex: 1;
}

.top-livre-item .livre-info h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.top-livre-item .livre-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .livres-grid {
        grid-template-columns: 1fr;
    }
    
    .livre-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .view-toggle {
        width: 100%;
    }
    
    .view-btn {
        flex: 1;
    }
}

/* ==============================================
   BIBLIOTHÈQUE - STYLES SUPPLÉMENTAIRES
   ============================================== */

/* Sous-onglets */
.catalogue-subtabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.subtab {
    padding: 0.5rem 1.2rem;
    border-radius: 30px;
    background: var(--clr-bg-primary);
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.subtab:hover {
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
}

.subtab.active {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.catalogue-view {
    display: none;
}

.catalogue-view.active {
    display: block;
}

/* Actions batch */
.batch-actions {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    animation: slideDown 0.3s ease;
}

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

/* En-tête catégorie */
.categorie-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .catalogue-subtabs {
        flex-direction: column;
    }
    
    .subtab {
        width: 100%;
        text-align: center;
    }
    
    .batch-actions {
        flex-wrap: wrap;
    }
    
    .batch-actions button {
        flex: 1;
    }
}


/* ==============================================
   BIBLIOTHÈQUE - EMPRUNTS & RÉSERVATIONS
   ============================================== */

/* Tabs */
.emprunts-tabs,
.retards-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.emprunts-tab,
.retards-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
}

.emprunts-tab:hover,
.retards-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.emprunts-tab.active,
.retards-tab.active {
    background: var(--clr-blue);
    color: white;
}

.emprunts-tab .badge,
.retards-tab .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--clr-red);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
}

.emprunts-view,
.retards-view {
    display: none;
}

.emprunts-view.active,
.retards-view.active {
    display: block;
}

/* Informations livre/emprunteur */
.livre-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.livre-cover-mini {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.livre-cover-mini i {
    font-size: 1.2rem;
    color: white;
}

.livre-nom {
    font-weight: 600;
    font-size: 0.95rem;
}

.livre-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.emprunteur-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.emprunteur-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.emprunteur-nom {
    font-weight: 600;
    font-size: 0.95rem;
}

.emprunteur-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Ligne danger pour les retards */
.danger-row {
    background: rgba(239, 68, 68, 0.05);
}

.danger-row:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Badge danger */
.badge.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-weight: 600;
}

/* Réservations grid */
.reservations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.reservation-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.reservation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.reservation-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.reservation-card .card-header .livre-info {
    flex: 1;
}

.reservation-card .card-header h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.reservation-card .card-header p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.reservation-card .card-body {
    margin-bottom: 1rem;
}

.reservation-card .info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.9rem;
}

.reservation-card .info-row i {
    width: 20px;
    color: var(--clr-blue);
    font-size: 0.9rem;
}

.reservation-card .progress-bar {
    height: 6px;
    background: var(--clr-bg-primary);
    border-radius: 3px;
    margin-top: 0.8rem;
    overflow: hidden;
}

.reservation-card .progress-bar .progress {
    height: 100%;
    background: var(--clr-blue);
    border-radius: 3px;
}

.reservation-card .notification-alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    color: var(--clr-green);
    font-size: 0.85rem;
}

.reservation-card .notification-alert i {
    color: var(--clr-green);
}

.reservation-card .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
}

.reservation-card .card-footer .date {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.reservation-card .card-footer .actions {
    display: flex;
    gap: 0.3rem;
}

/* Boutons small */
.btn-small {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-success {
    background: var(--clr-green);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #0f9e6a;
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--clr-red);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-2px);
}

/* Détails header */
.detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.livre-cover-large {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.livre-cover-large i {
    font-size: 2rem;
    color: white;
}

.detail-titre h4 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.detail-titre p {
    color: var(--clr-text-secondary);
}

.detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Détails grid */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.detail-item .label {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.detail-item .value {
    font-weight: 500;
}

.detail-item .value.danger {
    color: var(--clr-red);
    font-weight: 600;
}

/* Timeline pour historique des relances */
.timeline {
    position: relative;
    padding-left: 2rem;
    margin-top: 1rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--clr-border);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-icon {
    position: absolute;
    left: -2rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
}

.timeline-icon.warning {
    background: var(--clr-yellow);
}

.timeline-icon.danger {
    background: var(--clr-red);
}

.timeline-icon.success {
    background: var(--clr-green);
}

.timeline-content {
    background: var(--clr-bg-primary);
    padding: 0.8rem;
    border-radius: 6px;
}

.timeline-content h5 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.timeline-content p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Historique des relances */
.historique-relances {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.historique-relances h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--clr-blue);
}

/* ==============================================
   RETARDS & AMENDES STYLES
   ============================================== */

/* Amendes stats */
.amendes-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.amendes-stats .stat-card {
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: var(--clr-shadow);
}

.amendes-stats .stat-card .value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.amendes-stats .stat-card .label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Ligne succès pour amendes payées */
.success-row {
    background: rgba(16, 185, 129, 0.05);
}

.success-row:hover {
    background: rgba(16, 185, 129, 0.1) !important;
}

/* Paiement groupé */
.paiement-groupe {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin-top: 1.5rem;
    box-shadow: var(--clr-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.paiement-groupe h4 {
    font-size: 1rem;
}

.paiement-options {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.total-selection {
    font-size: 0.95rem;
}

.total-selection strong {
    font-size: 1.2rem;
    color: var(--clr-blue);
}

/* Top contrevenants */
.top-contrevenants {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin-top: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.top-contrevenants h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* Form control static */
.form-control-static {
    padding: 0.7rem 0;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .reservations-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .detail-actions {
        flex-direction: column;
    }
    
    .detail-actions button {
        width: 100%;
    }
    
    .paiement-groupe {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .paiement-options {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .total-selection {
        text-align: center;
    }
    
    .amendes-stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .amendes-stats {
        grid-template-columns: 1fr;
    }
    
    .emprunteur-info {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .reservation-card .card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .reservation-card .card-footer .actions {
        width: 100%;
    }
    
    .reservation-card .card-footer .actions button {
        flex: 1;
    }
}


/* ==============================================
   AMENDES - STYLES SPÉCIFIQUES
   ============================================== */

.amende-row {
    transition: background 0.3s ease;
}

.amende-row:hover {
    background: var(--clr-bg-primary);
}

.amende-checkbox {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.montant-cell {
    font-weight: 600;
    color: var(--clr-red);
}

.success-row .montant-cell {
    color: var(--clr-green);
}

#totalSelectionAmendes {
    font-size: 1.2rem;
    color: var(--clr-blue);
    font-weight: 600;
}

/* Animation pour les actions batch */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#retardsBatchActions {
    animation: slideDown 0.3s ease;
}



/* =================================================================== */

/* ==============================================
   RESSOURCES HUMAINES MODULE STYLES
   ============================================== */

.personnel-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.personnel-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.personnel-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.personnel-tab.active {
    background: var(--clr-blue);
    color: white;
}

.personnel-view {
    display: none;
}

.personnel-view.active {
    display: block;
}

/* Employé info */
.employe-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employe-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.employe-nom {
    font-weight: 600;
}

.employe-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Badges */
.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }

/* Organigramme */
.organigramme-container {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--clr-shadow);
}

.org-node {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.org-card {
    background: var(--clr-bg-primary);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
    min-width: 200px;
}

.org-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.org-card.direction {
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
}

.org-card.direction .org-info p {
    color: rgba(255,255,255,0.8);
}

.org-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.org-info h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.org-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.org-level {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.org-level.departments {
    justify-content: space-around;
}

.org-department {
    background: var(--clr-bg-primary);
    border-radius: 10px;
    padding: 1.2rem;
    min-width: 250px;
}

.org-department h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--clr-blue);
    text-align: center;
}

.org-node-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.org-card.small {
    padding: 0.5rem;
    min-width: auto;
}

.org-card.small img {
    width: 24px;
    height: 24px;
}

.org-card.small span {
    font-size: 0.9rem;
}

.more-badge {
    text-align: center;
    padding: 0.3rem;
    background: var(--clr-bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.more-badge:hover {
    background: var(--clr-blue);
    color: white;
}

/* Calendrier mini */
.calendar-mini {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1.5rem 0;
    box-shadow: var(--clr-shadow);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-header h4 {
    font-size: 1rem;
}

.calendar-grid-mini {
    width: 100%;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}

.day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 4px;
    background: var(--clr-bg-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.day:hover {
    background: var(--clr-blue);
    color: white;
}

.day.event {
    background: rgba(245, 158, 11, 0.1);
    font-weight: 600;
}

.day.event .event-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: var(--clr-red);
    color: white;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Demandes de congés */
.demandes-section {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.demandes-section h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.demandes-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.demande-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.demande-card:hover {
    transform: translateX(5px);
    border-color: var(--clr-blue);
}

.demande-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.demande-info {
    flex: 1;
}

.demande-info h5 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.demande-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.demande-info .date {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

.demande-actions {
    display: flex;
    gap: 0.3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .org-level {
        flex-direction: column;
        gap: 1rem;
    }
    
    .org-department {
        width: 100%;
    }
    
    .demande-card {
        flex-wrap: wrap;
    }
    
    .demande-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==============================================
   RESSOURCES HUMAINES - STEPPER & FORMULAIRES
   ============================================== */

/* Stepper */
.form-stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 50px;
    position: relative;
}

.step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--clr-bg-secondary);
    border: 2px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--clr-text-secondary);
    transition: all 0.3s ease;
}

.step-label {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    transition: all 0.3s ease;
}

/* Step actif */
.step.active .step-number {
    background: var(--clr-blue);
    border-color: var(--clr-blue);
    color: white;
}

.step.active .step-label {
    color: var(--clr-blue);
    font-weight: 500;
}

/* Step complété */
.step.completed .step-number {
    background: var(--clr-green);
    border-color: var(--clr-green);
    color: white;
}

.step.completed .step-label {
    color: var(--clr-green);
}

/* Ligne de progression */
.form-stepper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 60px;
    right: 60px;
    height: 2px;
    background: var(--clr-border);
    transform: translateY(-50%);
    z-index: 1;
}

/* Step content */
.step-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.step-content.active {
    display: block;
}

/* Navigation des étapes */
.step-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

/* ==============================================
   FORMULAIRES RH
   ============================================== */

/* Sections de formulaire */
.form-section {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-blue);
}

.form-section-title i {
    font-size: 1.1rem;
}

/* Grille de formulaire */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.form-grid .full-width {
    grid-column: 1 / -1;
}

/* Groupes de formulaire */
.form-group {
    margin-bottom: 0.8rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
}

.form-group .required::after {
    content: '*';
    color: var(--clr-red);
    margin-left: 0.2rem;
}

.form-control {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: var(--clr-blue);
    outline: none;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.1);
}

.form-control:disabled {
    background: var(--clr-bg-primary);
    cursor: not-allowed;
    opacity: 0.7;
}

.form-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

/* Upload de fichiers */
.documents-upload {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.document-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem;
    background: var(--clr-bg-primary);
    border-radius: 4px;
}

.document-row span:first-child {
    width: 200px;
    font-weight: 500;
}

.document-row input[type="file"] {
    flex: 1;
}

.file-status {
    width: 100px;
    font-size: 0.8rem;
    text-align: right;
}

.file-status:empty:before {
    content: "Non fourni";
    color: var(--clr-text-secondary);
    font-style: italic;
}

/* Référents cards */
.referent-card {
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--clr-border);
}

.referent-card h5 {
    margin-bottom: 1rem;
    color: var(--clr-blue);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.referent-card h5 .required {
    color: var(--clr-red);
    font-size: 0.8rem;
}

/* ==============================================
   MODALES RH
   ============================================== */

.modal-xl {
    max-width: 1000px !important;
    width: 95%;
}

.employe-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.employe-detail-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.employe-detail-header h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.employe-detail-header p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.contrat-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.contrat-detail-header h2 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

/* Détails tabs */
.details-tabs {
    margin-top: 1rem;
}

.tabs-header {
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 1.2rem;
    overflow-x: auto;
    padding-bottom: 0.3rem;
}

.tab-btn {
    padding: 0.5rem 1rem;
    border-radius: 6px 6px 0 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--clr-blue);
}

.tab-btn.active {
    color: var(--clr-blue);
    border-bottom-color: var(--clr-blue);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Documents list */
.documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem;
    background: var(--clr-bg-primary);
    border-radius: 4px;
}

.document-item i.pdf {
    color: #ef4444;
    font-size: 1.2rem;
}

.document-item span {
    flex: 1;
}

.document-item .btn-link {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

/* Detail actions */
.detail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ==============================================
   ORGANIGRAMME
   ============================================== */

.organigramme-container {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--clr-shadow);
    overflow-x: auto;
}

.org-node {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.org-card {
    background: var(--clr-bg-primary);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
    min-width: 200px;
}

.org-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.org-card.direction {
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    color: white;
}

.org-card.direction .org-info p {
    color: rgba(255,255,255,0.8);
}

.org-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.org-info h4 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.org-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.org-level {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.org-level.departments {
    justify-content: space-around;
}

.org-department {
    background: var(--clr-bg-primary);
    border-radius: 10px;
    padding: 1.2rem;
    min-width: 250px;
}

.org-department h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--clr-blue);
    text-align: center;
}

.org-node-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.org-card.small {
    padding: 0.5rem;
    min-width: auto;
}

.org-card.small img {
    width: 24px;
    height: 24px;
}

.org-card.small span {
    font-size: 0.9rem;
}

.more-badge {
    text-align: center;
    padding: 0.3rem;
    background: var(--clr-bg-secondary);
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.more-badge:hover {
    background: var(--clr-blue);
    color: white;
}

/* ==============================================
   CALENDRIER MINI
   ============================================== */

.calendar-mini {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    margin: 1.5rem 0;
    box-shadow: var(--clr-shadow);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-header h4 {
    font-size: 1rem;
}

.calendar-nav {
    display: flex;
    gap: 0.3rem;
}

.btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg-primary);
    color: var(--clr-text-secondary);
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: var(--clr-blue);
    color: white;
}

.calendar-grid-mini {
    width: 100%;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}

.day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: 4px;
    background: var(--clr-bg-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.day:hover {
    background: var(--clr-blue);
    color: white;
}

.day.event {
    background: rgba(245, 158, 11, 0.1);
    font-weight: 600;
}

.day.event .event-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: var(--clr-red);
    color: white;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ==============================================
   DEMANDES DE CONGÉS
   ============================================== */

.demandes-section {
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.demandes-section h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.demandes-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.demande-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.demande-card:hover {
    transform: translateX(5px);
    border-color: var(--clr-blue);
}

.demande-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.demande-info {
    flex: 1;
}

.demande-info h5 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.demande-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.demande-info .date {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

.demande-actions {
    display: flex;
    gap: 0.3rem;
}

/* ==============================================
   DÉTAILS ROWS
   ============================================== */

.detail-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .label {
    width: 120px;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.detail-row .value {
    flex: 1;
    font-weight: 500;
}

/* ==============================================
   ANIMATIONS
   ============================================== */

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

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

@media (max-width: 768px) {
    .form-stepper {
        flex-direction: column;
        gap: 0.5rem;
        background: transparent;
        padding: 0;
    }
    
    .form-stepper::before {
        display: none;
    }
    
    .step {
        background: var(--clr-bg-primary);
        padding: 0.5rem;
        border-radius: 30px;
    }
    
    .step-number {
        width: 28px;
        height: 28px;
    }
    
    .step-label {
        font-size: 0.8rem;
    }
    
    .employe-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .document-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .document-row span:first-child {
        width: 100%;
    }
    
    .document-row input[type="file"] {
        width: 100%;
    }
    
    .file-status {
        width: 100%;
        text-align: left;
    }
    
    .org-level {
        flex-direction: column;
        gap: 1rem;
    }
    
    .org-department {
        width: 100%;
    }
    
    .demande-card {
        flex-wrap: wrap;
    }
    
    .demande-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .detail-actions {
        flex-direction: column;
    }
    
    .detail-actions button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .tabs-header {
        flex-wrap: wrap;
    }
    
    .tab-btn {
        flex: 1;
        text-align: center;
    }
    
    .step-navigation {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .step-navigation button {
        width: 100%;
    }
}


/* ==============================================
   CARTES DU PERSONNEL - STYLES COMPLETS
   ============================================== */

/* En-tête des cartes */
.cartes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.cartes-header h3 {
    font-size: 1.2rem;
    color: var(--clr-blue);
    margin: 0;
}

.cartes-header .header-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Options de génération */
.cartes-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.option-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
    border: 1px solid var(--clr-border);
    transition: all 0.3s ease;
}

.option-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.option-card h4 {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    color: var(--clr-blue);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.option-card h4 i {
    font-size: 1.2rem;
}

/* Radio et checkbox groups */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0;
    transition: color 0.3s ease;
}

.radio-group label:hover {
    color: var(--clr-blue);
}

.radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--clr-blue);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0;
    transition: color 0.3s ease;
}

.checkbox-group label:hover {
    color: var(--clr-blue);
}

.checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--clr-blue);
}

/* Aperçu des cartes */
.cartes-preview {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--clr-shadow);
}

.cartes-preview h4 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: var(--clr-blue);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cartes-preview h4 i {
    font-size: 1.2rem;
}

.cartes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    justify-items: center;
}

/* Carte de prévisualisation */
.carte-preview {
    background: white;
    color: #1e293b;
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 300px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.theme-dark .carte-preview {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
}

.carte-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.3);
}

/* Formats de cartes */
.carte-preview[data-format="standard"] {
    aspect-ratio: 1.6 / 1;
    max-width: 300px;
}

.carte-preview[data-format="badge"] {
    aspect-ratio: 1.4 / 1;
    max-width: 250px;
}

.carte-preview[data-format="credit"] {
    aspect-ratio: 1.586 / 1; /* 85.6 x 54 mm */
    max-width: 280px;
}

/* En-tête de carte */
.carte-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #cbd5e1;
}

.theme-dark .carte-header {
    border-bottom-color: #334155;
}

.carte-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--clr-blue);
}

.carte-logo {
    max-width: 60px;
    max-height: 25px;
    object-fit: contain;
}

/* Corps de carte */
.carte-body {
    text-align: center;
    margin-bottom: 0.8rem;
}

.carte-body h4 {
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: #0284c7;
    font-weight: 600;
}

.theme-dark .carte-body h4 {
    color: #38bdf8;
}

.carte-body p {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.theme-dark .carte-body p {
    color: #cbd5e1;
}

.carte-id {
    font-size: 0.7rem;
    font-family: monospace;
    color: #94a3b8;
    margin-top: 0.3rem;
}

/* Pied de carte */
.carte-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px dashed #cbd5e1;
}

.theme-dark .carte-footer {
    border-top-color: #334155;
}

.carte-qr img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.carte-barcode img {
    width: 100px;
    height: 30px;
    object-fit: contain;
}

.carte-validite {
    font-size: 0.65rem;
    color: #64748b;
    text-align: right;
}

/* Variations de cartes */
.carte-preview[data-format="badge"] .carte-body {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.carte-preview[data-format="badge"] .carte-body h4 {
    font-size: 0.9rem;
}

.carte-preview[data-format="badge"] .carte-body p {
    font-size: 0.7rem;
}

/* Actions d'impression */
.cartes-print-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

/* Modal carte unitaire */
#carteUnitaireModal .carte-preview {
    margin: 1rem auto;
    cursor: default;
}

#carteUnitaireModal .carte-preview:hover {
    transform: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* Animation d'apparition */
@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carte-preview {
    animation: cardAppear 0.3s ease;
}

/* Style pour les cartes sélectionnables */
.carte-preview.selected {
    border: 3px solid var(--clr-blue);
    transform: scale(1.02);
}

.carte-preview.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--clr-blue);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Badge de type de carte */
.carte-type-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(2, 132, 199, 0.2);
    color: var(--clr-blue);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 768px) {
    .cartes-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .cartes-header .header-actions {
        width: 100%;
    }
    
    .cartes-header select {
        width: 100%;
    }
    
    .cartes-options {
        grid-template-columns: 1fr;
    }
    
    .cartes-grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .cartes-print-actions {
        flex-direction: column;
    }
    
    .cartes-print-actions button {
        width: 100%;
    }
    
    .carte-preview {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .carte-preview {
        max-width: 250px;
    }
    
    .carte-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .carte-qr img {
        width: 40px;
        height: 40px;
    }
    
    .carte-validite {
        width: 100%;
        text-align: center;
    }
}

/* Mode impression */
@media print {
    .carte-preview {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .carte-preview:hover {
        transform: none;
    }
}


/* ==============================================
   CARTES SÉLECTIONNABLES
   ============================================== */

.carte-preview {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.carte-preview.selected {
    border: 3px solid var(--clr-blue);
    transform: scale(1.02);
}

.carte-preview.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--clr-blue);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.carte-preview:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
}

/* Sélecteur unitaire */
#unitaireSelector {
    background: var(--clr-bg-primary);
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    animation: slideDown 0.3s ease;
}

#unitaireSelector label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--clr-blue);
}

#unitaireSelector select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--clr-border);
    border-radius: 4px;
    background: var(--clr-bg-secondary);
}

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

/* ==============================================
   QR CODE & CODE-BARRES STYLES
   ============================================== */

.carte-qr {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-qr canvas, .carte-qr img {
    width: 50px !important;
    height: 50px !important;
}

.carte-barcode {
    width: 100px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carte-barcode svg {
    width: 100px;
    height: 30px;
}

/* Mode impression */
@media print {
    .carte-qr canvas, .carte-qr img {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}


/* ==============================================
   VUE D'ENSEMBLE RH STYLES
   ============================================== */

/* Couleurs supplémentaires */
.kpi-icon.purple { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.kpi-icon.orange { background: linear-gradient(135deg, #f97316, #fb923c); }
.kpi-icon.teal { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.kpi-icon.cyan { background: linear-gradient(135deg, #06b6d4, #22d3ee); }

/* Stats mini */
.stats-mini {
    display: flex;
    justify-content: space-around;
    background: var(--clr-bg-primary);
    border-radius: 6px;
    padding: 0.8rem;
}

.stats-mini .stat {
    text-align: center;
}

.stats-mini .stat .label {
    display: block;
    font-size: 0.7rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.stats-mini .stat .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--clr-blue);
}

/* Derniers mouvements */
.recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.recent-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
}

.recent-card h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--clr-blue);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.recent-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.recent-item:hover {
    background: var(--clr-bg-primary);
}

.recent-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.recent-info {
    flex: 1;
}

.recent-name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.recent-detail {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Badge urgent */
.badge.urgent {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .recent-grid {
        grid-template-columns: 1fr;
    }
}


/* ==============================================
   ANNUAIRE MODULE STYLES
   ============================================== */

.annuaire-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.annuaire-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.annuaire-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.annuaire-tab.active {
    background: var(--clr-blue);
    color: white;
}

.annuaire-view {
    display: none;
}

.annuaire-view.active {
    display: block;
}

/* Personne info */
.personne-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.personne-info img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.personne-nom {
    font-weight: 600;
}

.personne-meta {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Badges */
.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }

/* Vue photos */
.photos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.2rem;
}

.photo-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.photo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.photo-container {
    position: relative;
    height: 150px;
    background: linear-gradient(135deg, var(--clr-blue), #38bdf8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-container img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.photo-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
}

.photo-badge.eleve { background: var(--clr-blue); }
.photo-badge.enseignant { background: var(--clr-green); }
.photo-badge.parent { background: var(--clr-purple); }
.photo-badge.personnel { background: var(--clr-yellow); }

.photo-info {
    padding: 1rem;
    text-align: center;
}

.photo-info h4 {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.photo-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

.photo-contact {
    font-size: 0.75rem !important;
    margin-top: 0.3rem;
}

.photo-contact i {
    width: 14px;
    margin-right: 0.3rem;
    color: var(--clr-blue);
}

/* Anniversaires */
.anniversaires-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.anniversaires-liste {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.anniversaire-today h4,
.anniversaire-week h4,
.anniversaire-month h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--clr-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.anniversaire-today h4 i {
    color: var(--clr-yellow);
}

.anniversaire-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.anniversaire-card:hover {
    background: var(--clr-bg-secondary);
    border-color: var(--clr-blue);
    transform: translateX(5px);
}

.anniversaire-card.today {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--clr-yellow);
}

.anniversaire-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.anniversaire-info {
    flex: 1;
}

.anniversaire-info h5 {
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
}

.anniversaire-info p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

/* Détails personne */
.personne-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.personne-detail-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.personne-detail-header h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.personne-detail-header p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

/* Relations */
.relations-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.relation-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.relation-item:hover {
    background: var(--clr-bg-secondary);
}

.relation-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.relation-info {
    flex: 1;
}

.relation-nom {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.relation-lien {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
    .photos-grid {
        grid-template-columns: 1fr;
    }
    
    .personne-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .relation-item {
        flex-wrap: wrap;
    }
}

/* ============================================================================ */
 
    /* Styles spécifiques à la gestion des comptes */
    .security-alerts {
        background: var(--clr-bg-secondary);
        border-radius: 10px;
        padding: 1.2rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--clr-shadow);
    }
    
    .alert-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    .alert-header h3 {
        font-size: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .alert-items {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
    }
    
    .alert-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.8rem;
        border-radius: 6px;
    }
    
    .alert-item.warning {
        background: rgba(245, 158, 11, 0.1);
        color: var(--clr-yellow);
    }
    
    .alert-item.danger {
        background: rgba(239, 68, 68, 0.1);
        color: var(--clr-red);
    }
    
    .alert-item.info {
        background: rgba(2, 132, 199, 0.1);
        color: var(--clr-blue);
    }
    
    .alert-item i {
        font-size: 1.2rem;
    }
    
    .alert-item span {
        flex: 1;
        color: var(--clr-text-primary);
    }
    
    .kpi-card[onclick] {
        cursor: pointer;
    }
    
    .comptes-tabs {
        display: flex;
        gap: 0.5rem;
        margin: 1.5rem 0;
        border-bottom: 1px solid var(--clr-border);
        padding-bottom: 0.5rem;
        flex-wrap: wrap;
    }
    
    .comptes-tab {
        padding: 0.7rem 1.5rem;
        border-radius: 30px;
        background: transparent;
        color: var(--clr-text-secondary);
        font-weight: 500;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }
    
    .comptes-tab:hover {
        background: var(--clr-bg-primary);
        color: var(--clr-text-primary);
    }
    
    .comptes-tab.active {
        background: var(--clr-blue);
        color: white;
    }
    
    .comptes-view {
        display: none;
    }
    
    .comptes-view.active {
        display: block;
    }
    
    .role-tags {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
        margin-top: 0.3rem;
    }
    
    .role-tag {
        display: inline-block;
        padding: 0.2rem 0.4rem;
        background: var(--clr-bg-primary);
        border-radius: 4px;
        font-size: 0.7rem;
        color: var(--clr-text-secondary);
    }
    
    /* Cartes de comptes */
    .cartes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.2rem;
        margin-top: 1rem;
    }
    
    .carte-compte {
        background: var(--clr-bg-secondary);
        border-radius: 12px;
        padding: 1.2rem;
        box-shadow: var(--clr-shadow);
        border: 1px solid var(--clr-border);
        transition: all 0.3s ease;
    }
    
    .carte-compte:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
        border-color: var(--clr-blue);
    }
    
    .carte-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    
    .carte-avatar img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid var(--clr-bg-primary);
    }
    
    .carte-body h4 {
        margin-bottom: 0.3rem;
    }
    
    .carte-email {
        font-size: 0.85rem;
        color: var(--clr-text-secondary);
        margin-bottom: 0.5rem;
    }
    
    .carte-badges {
        margin-bottom: 0.5rem;
    }
    
    .carte-roles {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
        margin-bottom: 0.8rem;
    }
    
    .carte-details p {
        font-size: 0.8rem;
        color: var(--clr-text-secondary);
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        gap: 0.3rem;
    }
    
    .carte-footer {
        display: flex;
        gap: 0.3rem;
        margin-top: 1rem;
        padding-top: 0.8rem;
        border-top: 1px solid var(--clr-border);
    }
    
    .carte-footer button {
        flex: 1;
    }
    
    .carte-footer .btn-icon {
        flex: 0 0 40px;
    }
    
    /* Vue dernières connexions */
    .connexions-table-container {
        overflow-x: auto;
        background: var(--clr-bg-secondary);
        border-radius: 10px;
        padding: 1rem;
        box-shadow: var(--clr-shadow);
    }
    
    .connexions-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .connexions-table th {
        text-align: left;
        padding: 1rem 0.5rem;
        color: var(--clr-text-secondary);
        font-weight: 600;
        font-size: 0.85rem;
        border-bottom: 2px solid var(--clr-border);
    }
    
    .connexions-table td {
        padding: 0.8rem 0.5rem;
        border-bottom: 1px solid var(--clr-border);
    }
    
    .connexions-table tr.failed {
        background: rgba(239, 68, 68, 0.05);
    }
    
    /* Modal rôles */
    .roles-list {
        margin: 1rem 0;
    }
    
    .role-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.8rem;
        background: var(--clr-bg-primary);
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }
    
    .role-name {
        flex: 1;
        font-weight: 500;
    }
    
    .role-scope {
        color: var(--clr-text-secondary);
        font-size: 0.85rem;
    }
    
    .add-role {
        margin: 1.5rem 0;
        padding: 1rem;
        background: var(--clr-bg-primary);
        border-radius: 6px;
    }
    
    .add-role h4 {
        margin-bottom: 0.8rem;
        font-size: 0.95rem;
    }
    
    .permission-categories {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .permission-cat {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.3rem 0;
    }
    
    /* Sécurité */
    .info-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border-radius: 6px;
        margin-bottom: 1rem;
    }
    
    .info-card.warning {
        background: rgba(245, 158, 11, 0.1);
    }
    
    .info-card.success {
        background: rgba(16, 185, 129, 0.1);
    }
    
    .info-card i {
        font-size: 1.5rem;
    }
    
    .securite-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin: 1.5rem 0;
    }
    
    .log-audit h4 {
        margin-bottom: 0.8rem;
    }
    
    .audit-item {
        display: flex;
        gap: 1rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--clr-border);
        font-size: 0.85rem;
    }
    
    .audit-item .date {
        min-width: 120px;
        color: var(--clr-text-secondary);
    }
    
    .audit-item .action {
        flex: 1;
    }
    
    .audit-item .user {
        color: var(--clr-text-secondary);
    }
    
    /* Formulaire rôles */
    .roles-assignment {
        margin-top: 1rem;
    }
    
    .role-row {
        display: flex;
        gap: 0.5rem;
        align-items: flex-end;
        margin-bottom: 1rem;
    }
    
    .roles-list-form {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--clr-bg-primary);
        border-radius: 6px;
        min-height: 50px;
    }
    
    .role-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.8rem;
        background: var(--clr-bg-secondary);
        border-radius: 20px;
        font-size: 0.85rem;
        border: 1px solid var(--clr-border);
    }
    
    .role-tag .structure {
        color: var(--clr-text-secondary);
        font-size: 0.75rem;
    }
    
    .role-tag i {
        cursor: pointer;
        color: var(--clr-text-secondary);
    }
    
    .role-tag i:hover {
        color: var(--clr-red);
    }
    
    /* Recherche personne */
    .personne-search {
        position: relative;
    }
    
    .search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--clr-bg-secondary);
        border: 1px solid var(--clr-border);
        border-radius: 6px;
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        box-shadow: var(--clr-shadow);
    }
    
    .search-result-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .search-result-item:hover {
        background: var(--clr-bg-primary);
    }
    
    .search-result-item img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    
    .selected-personne {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        background: var(--clr-bg-primary);
        border-radius: 6px;
    }
    
    .selected-personne img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    .selected-personne div {
        flex: 1;
    }
    
    .selected-personne strong {
        display: block;
        margin-bottom: 0.2rem;
    }
    
    #selectedPersonneId {
        display: none;
    } 


    /* =================================================================================== */


    /* ==============================================
   STYLES COMPLETS POUR LA GESTION DES COMPTES
   ============================================== */

/* --- Statistiques KPI améliorées --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kpi-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.kpi-card[onclick] {
    cursor: pointer;
}

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin-bottom: 1rem;
}

.kpi-icon.blue { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.kpi-icon.green { background: linear-gradient(135deg, #10b981, #34d399); }
.kpi-icon.yellow { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.kpi-icon.red { background: linear-gradient(135deg, #ef4444, #f87171); }
.kpi-icon.gray { background: linear-gradient(135deg, #64748b, #94a3b8); }

.kpi-content {
    position: relative;
}

.kpi-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.kpi-label {
    color: var(--clr-text-secondary);
    font-size: 0.85rem;
}

.kpi-trend {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
}

.kpi-trend.positive {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* --- Alertes sécurité --- */
.security-alerts {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 2rem;
    box-shadow: var(--clr-shadow);
    border: 1px solid var(--clr-border);
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.alert-header h3 {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-text-primary);
}

.alert-header h3 i {
    color: var(--clr-blue);
}

.view-all {
    color: var(--clr-blue);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.view-all:hover {
    text-decoration: underline;
    color: #0369a1;
}

.alert-items {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.alert-item:hover {
    transform: translateX(5px);
    border-color: currentColor;
}

.alert-item.warning {
    background: rgba(245, 158, 11, 0.08);
    color: var(--clr-yellow);
    border-left: 4px solid var(--clr-yellow);
}

.alert-item.danger {
    background: rgba(239, 68, 68, 0.08);
    color: var(--clr-red);
    border-left: 4px solid var(--clr-red);
}

.alert-item.info {
    background: rgba(2, 132, 199, 0.08);
    color: var(--clr-blue);
    border-left: 4px solid var(--clr-blue);
}

.alert-item i {
    font-size: 1.2rem;
}

.alert-item span {
    flex: 1;
    color: var(--clr-text-primary);
    font-weight: 500;
}

/* --- Modale Alertes détaillées --- */
.alerts-filters {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.alert-detail-card {
    display: flex;
    gap: 1.2rem;
    padding: 1.2rem;
    background: var(--clr-bg-primary);
    border-radius: 10px;
    border-left: 4px solid;
    transition: all 0.3s ease;
}

.alert-detail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.alert-detail-card.warning {
    border-left-color: var(--clr-yellow);
}

.alert-detail-card.danger {
    border-left-color: var(--clr-red);
}

.alert-detail-card.info {
    border-left-color: var(--clr-blue);
}

.alert-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--clr-bg-secondary);
    color: inherit;
}

.alert-content {
    flex: 1;
}

.alert-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    color: var(--clr-text-primary);
}

.alert-content p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.alert-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.alert-priority {
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-weight: 500;
}

.alert-priority.high {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-red);
}

.alert-priority.medium {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
}

.alert-priority.low {
    background: rgba(2, 132, 199, 0.1);
    color: var(--clr-blue);
}

.alert-date {
    color: var(--clr-text-secondary);
}

.alert-preview {
    margin: 1rem 0;
    background: var(--clr-bg-secondary);
    border-radius: 8px;
    padding: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.alert-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* --- Badges et tags --- */
.role-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.role-tag {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    background: var(--clr-bg-primary);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border);
}

.badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-blue { background: rgba(2, 132, 199, 0.1); color: var(--clr-blue); }
.badge-green { background: rgba(16, 185, 129, 0.1); color: var(--clr-green); }
.badge-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.badge-yellow { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }
.badge-orange { background: rgba(245, 158, 11, 0.1); color: #f97316; }
.badge.warning { background: rgba(245, 158, 11, 0.1); color: var(--clr-yellow); }
.badge.danger { background: rgba(239, 68, 68, 0.1); color: var(--clr-red); }

/* --- Status badges --- */
.status-badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: var(--clr-green);
}

.status-badge.pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--clr-yellow);
}

.status-badge.inactive {
    background: rgba(100, 116, 139, 0.1);
    color: var(--clr-text-secondary);
}

.status-badge.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--clr-red);
}

/* --- Cartes compte --- */
.cartes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.carte-compte {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    border: 1px solid var(--clr-border);
    transition: all 0.3s ease;
}

.carte-compte:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.carte-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.carte-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--clr-bg-primary);
}

.carte-body h4 {
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
}

.carte-email {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.5rem;
}

.carte-badges {
    margin-bottom: 0.5rem;
}

.carte-roles {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.carte-details p {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.carte-footer {
    display: flex;
    gap: 0.3rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
}

.carte-footer button {
    flex: 1;
}

.carte-footer .btn-icon {
    flex: 0 0 40px;
}

/* --- Tableau connexions --- */
.connexions-table-container {
    overflow-x: auto;
    background: var(--clr-bg-secondary);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: var(--clr-shadow);
}

.connexions-table {
    width: 100%;
    border-collapse: collapse;
}

.connexions-table th {
    text-align: left;
    padding: 1rem 0.5rem;
    color: var(--clr-text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 2px solid var(--clr-border);
}

.connexions-table td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.connexions-table tr.failed {
    background: rgba(239, 68, 68, 0.05);
}

.connexions-table tr.failed:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* --- Modale Détails compte --- */
.compte-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.compte-detail-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--clr-bg-primary);
}

.compte-detail-header h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.compte-detail-header p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.2rem;
}

/* --- Gestion des rôles --- */
.roles-section {
    margin-top: 1rem;
}

.roles-list {
    margin: 1rem 0;
}

.role-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.role-name {
    flex: 1;
    font-weight: 500;
}

.role-scope {
    color: var(--clr-text-secondary);
    font-size: 0.85rem;
}

.add-role {
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.add-role h4 {
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
    color: var(--clr-blue);
}

.add-role .form-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.add-role select {
    flex: 1;
}

.permissions-resume {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.permissions-resume h4 {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--clr-blue);
}

.permission-categories {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.permission-cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--clr-border);
}

.permission-cat:last-child {
    border-bottom: none;
}

/* --- Sécurité --- */
.info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-card.warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid var(--clr-yellow);
}

.info-card.success {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--clr-green);
}

.info-card i {
    font-size: 1.5rem;
}

.info-card h4 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.info-card p {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.securite-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.log-audit {
    margin-top: 1.5rem;
}

.log-audit h4 {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--clr-blue);
}

.audit-item {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    font-size: 0.85rem;
}

.audit-item .date {
    min-width: 120px;
    color: var(--clr-text-secondary);
}

.audit-item .action {
    flex: 1;
    font-weight: 500;
}

.audit-item .user {
    color: var(--clr-text-secondary);
}

/* --- Formulaire rôles --- */
.roles-assignment {
    margin-top: 1rem;
}

.role-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.role-row select {
    height: 38px;
}

.roles-list-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    min-height: 60px;
    border: 1px solid var(--clr-border);
}

.role-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: var(--clr-bg-secondary);
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid var(--clr-border);
    transition: all 0.3s ease;
}

.role-tag:hover {
    border-color: var(--clr-blue);
    background: rgba(2, 132, 199, 0.05);
}

.role-tag .structure {
    color: var(--clr-text-secondary);
    font-size: 0.75rem;
    background: var(--clr-bg-primary);
    padding: 0.1rem 0.3rem;
    border-radius: 10px;
}

.role-tag i {
    cursor: pointer;
    color: var(--clr-text-secondary);
    font-size: 0.8rem;
}

.role-tag i:hover {
    color: var(--clr-red);
}

/* --- Recherche personne --- */
.personne-search {
    position: relative;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--clr-bg-secondary);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 0.3rem;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--clr-border);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--clr-bg-primary);
}

.search-result-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.selected-personne {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    border: 1px solid var(--clr-blue);
}

.selected-personne img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.selected-personne div {
    flex: 1;
}

.selected-personne strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 1rem;
}

#selectedPersonneId {
    display: none;
}

/* --- Modales inactifs et tentatives --- */
.inactive-stats,
.failed-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.inactive-stats .stat-card,
.failed-stats .stat-card {
    background: var(--clr-bg-primary);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.inactive-stats .stat-value,
.failed-stats .stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-blue);
    margin-bottom: 0.3rem;
}

.inactive-stats .stat-card.danger .stat-value,
.failed-stats .stat-card.danger .stat-value {
    color: var(--clr-red);
}

.inactive-stats .stat-label,
.failed-stats .stat-label {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
}

.inactive-filters,
.failed-filters {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.inactive-table-container,
.failed-table-container {
    margin-bottom: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
}

.danger-row {
    background: rgba(239, 68, 68, 0.05);
}

.danger-row:hover {
    background: rgba(239, 68, 68, 0.1) !important;
}

.warning-row {
    background: rgba(245, 158, 11, 0.05);
}

.warning-row:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

.suspicious-ips {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
}

.suspicious-ips h4 {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--clr-red);
}

.ips-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ip-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: var(--clr-bg-secondary);
    border-radius: 6px;
    flex-wrap: wrap;
}

.ip-item .ip {
    font-family: monospace;
    font-weight: 600;
    min-width: 120px;
}

/* --- Boutons et actions --- */
.btn-small {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-success {
    background: var(--clr-green);
    color: white;
    border: none;
}

.btn-success:hover {
    background: #0f9e6a;
    transform: translateY(-2px);
}

.btn-warning {
    background: var(--clr-yellow);
    color: white;
    border: none;
}

.btn-warning:hover {
    background: #e68a00;
    transform: translateY(-2px);
}

.btn-danger {
    background: var(--clr-red);
    color: white;
    border: none;
}

.btn-danger:hover {
    background: #dc2626;
    transform: translateY(-2px);
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg-primary);
    color: var(--clr-text-secondary);
    transition: all 0.3s ease;
    border: 1px solid var(--clr-border);
}

.btn-icon:hover {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

/* --- Pagination et batch actions --- */
.batch-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem;
    background: var(--clr-bg-primary);
    border-radius: 8px;
    margin-bottom: 1rem;
    animation: slideDown 0.3s ease;
}

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

.pagination-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.pagination-info {
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.pagination-controls {
    display: flex;
    gap: 0.3rem;
}

.pagination-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
    background: var(--clr-bg-secondary);
    color: var(--clr-text-primary);
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.pagination-btn.active {
    background: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .compte-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .alert-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .alert-detail-card {
        flex-direction: column;
    }
    
    .role-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .role-row select,
    .role-row button {
        width: 100%;
    }
    
    .audit-item {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .audit-item .date {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    
    .cartas-grid {
        grid-template-columns: 1fr;
    }
    
    .alert-actions {
        flex-direction: column;
    }
    
    .ip-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .batch-actions {
        flex-wrap: wrap;
    }
    
    .batch-actions button {
        flex: 1;
    }
}

/* ==============================================
   STYLES SPÉCIFIQUES À LA PAGE SÉCURITÉ & PERMISSIONS
   ============================================== */

/* --- Onglets de navigation --- */
.securite-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
}

.securite-tab {
    padding: 0.7rem 1.5rem;
    border-radius: 30px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.securite-tab:hover {
    background: var(--clr-bg-primary);
    color: var(--clr-text-primary);
}

.securite-tab.active {
    background: var(--clr-blue);
    color: white;
}

.securite-tab .badge {
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
}

.securite-view {
    display: none;
}

.securite-view.active {
    display: block;
}

/* --- Grille des rôles --- */
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.role-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    border: 1px solid var(--clr-border);
    transition: all 0.3s ease;
}

.role-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    border-color: var(--clr-blue);
}

.role-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--clr-border);
}

.role-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.role-icon.super-admin { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.role-icon.admin { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.role-icon.directeur { background: linear-gradient(135deg, #10b981, #34d399); }
.role-icon.departement { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.role-icon.comptable { background: linear-gradient(135deg, #f97316, #fb923c); }
.role-icon.enseignant { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }
.role-icon.titulaire { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.role-icon.surveillant { background: linear-gradient(135deg, #64748b, #94a3b8); }
.role-icon.parent { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.role-icon.eleve { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.role-icon.employe { background: linear-gradient(135deg, #6b7280, #9ca3af); }

.role-info {
    flex: 1;
}

.role-info h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.role-code {
    font-size: 0.8rem;
    color: var(--clr-text-secondary);
    font-family: monospace;
}

.role-badge {
    margin-left: auto;
}

.role-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.8rem;
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

.role-stats i {
    width: 16px;
    margin-right: 0.3rem;
    color: var(--clr-blue);
}

.role-description {
    font-size: 0.9rem;
    color: var(--clr-text-secondary);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.role-permissions h4 {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--clr-text-secondary);
}

.permission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.permission-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
    border: 1px solid var(--clr-border);
}

.role-card-footer {
    display: flex;
    gap: 0.3rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--clr-border);
}

.role-card-footer button {
    flex: 1;
}

.role-card-footer .btn-icon {
    flex: 0 0 40px;
}

/* --- Graphique d'activité --- */
.activity-chart-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chart-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.chart-legend {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
}

.legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 0.3rem;
}

/* --- Tableau des logs --- */
.logs-table-container {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

#logsTable .warning-row {
    background: rgba(245, 158, 11, 0.05);
}

#logsTable .warning-row:hover {
    background: rgba(245, 158, 11, 0.1) !important;
}

/* --- Statistiques de traçabilité --- */
.tracabilite-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.tracabilite-stats .stat-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--clr-shadow);
}

.tracabilite-stats .stat-card i {
    font-size: 2rem;
    color: var(--clr-blue);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg-primary);
    border-radius: 10px;
}

.tracabilite-stats .stat-card .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.tracabilite-stats .stat-card .stat-label {
    font-size: 0.85rem;
    color: var(--clr-text-secondary);
}

/* --- Types de traçabilité --- */
.tracabilite-types {
    margin-bottom: 2rem;
}

.tracabilite-types h3 {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
}

.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.type-card {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: var(--clr-shadow);
    border: 1px solid var(--clr-border);
}

.type-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--clr-border);
}

.type-header i {
    font-size: 1.2rem;
    color: var(--clr-blue);
}

.type-header h4 {
    font-size: 1rem;
}

.type-card ul {
    list-style: none;
    padding: 0;
}

.type-card li {
    padding: 0.3rem 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.type-card li i {
    width: 16px;
}

/* --- Export traçabilité --- */
.export-tracabilite {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.export-tracabilite h3 {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
}

.export-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .export-options {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.export-format-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.format-card {
    background: var(--clr-bg-primary);
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.format-card:hover {
    border-color: var(--clr-blue);
    transform: translateY(-2px);
    box-shadow: var(--clr-shadow);
}

.format-card.selected {
    border-color: var(--clr-blue);
    background: rgba(2, 132, 199, 0.05);
}

.format-card i {
    font-size: 2rem;
    color: var(--clr-blue);
    display: block;
    margin-bottom: 0.3rem;
}

.export-options-details {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.date-range {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0;
}

.date-range input {
    flex: 1;
}

/* --- Paramètres sécurité --- */
.parametres-securite {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.param-section {
    background: var(--clr-bg-secondary);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--clr-shadow);
}

.param-section h3 {
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--clr-blue);
    border-bottom: 1px solid var(--clr-border);
    padding-bottom: 0.5rem;
}

.param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.param-item.full-width {
    grid-column: 1 / -1;
}

.param-item label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
}

.param-item .form-hint {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
    margin-top: 0.2rem;
}

.param-item select[multiple] {
    height: auto;
    min-height: 80px;
}

/* --- Modal détails rôle --- */
.role-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-border);
}

.role-icon-large {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
}

.role-icon-large.super-admin { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.role-icon-large.admin { background: linear-gradient(135deg, #0284c7, #38bdf8); }
.role-icon-large.directeur { background: linear-gradient(135deg, #10b981, #34d399); }

.role-detail-info h2 {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
}

.role-detail-info p {
    color: var(--clr-text-secondary);
    margin-bottom: 0.3rem;
    font-family: monospace;
}

.role-detail-description {
    margin-bottom: 1.5rem;
}

.role-detail-description h4 {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--clr-text-secondary);
}

.role-detail-description p {
    line-height: 1.5;
}

.permissions-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
    margin: 1rem 0;
}

.permission-category h5 {
    margin-bottom: 0.5rem;
    color: var(--clr-blue);
    font-size: 0.9rem;
}

.permission-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.permission-item i {
    width: 16px;
}

.role-users {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--clr-border);
}

.role-users h4 {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.user-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-item span {
    flex: 1;
    font-weight: 500;
}

.user-item .user-structure {
    color: var(--clr-text-secondary);
    font-size: 0.85rem;
    font-weight: normal;
}

/* --- Éditeur de permissions --- */
.permissions-editor {
    margin-top: 1rem;
}

.permissions-filters {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    background: var(--clr-bg-primary);
    border-radius: 6px;
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid var(--clr-border);
    border-radius: 6px;
}

.permission-module h5 {
    margin-bottom: 0.5rem;
    color: var(--clr-blue);
    font-size: 0.9rem;
    border-bottom: 1px dashed var(--clr-border);
    padding-bottom: 0.3rem;
}

.permission-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* --- Modal détails log --- */
.log-detail-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.log-detail-row {
    display: flex;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-border);
}

.log-detail-row.full {
    flex-direction: column;
    gap: 0.5rem;
}

.log-detail-row .label {
    width: 120px;
    color: var(--clr-text-secondary);
    font-size: 0.9rem;
}

.log-detail-row .value {
    flex: 1;
    font-weight: 500;
}

.log-json {
    background: var(--clr-bg-primary);
    padding: 1rem;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .roles-grid {
        grid-template-columns: 1fr;
    }
    
    .tracabilite-stats {
        grid-template-columns: 1fr;
    }
    
    .types-grid {
        grid-template-columns: 1fr;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    .role-detail-header {
        flex-direction: column;
        text-align: center;
    }
    
    .permissions-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .user-item {
        flex-wrap: wrap;
    }
    
    .user-item .user-structure {
        width: 100%;
        margin-left: 48px;
    }
}

@media (max-width: 480px) {
    .chart-legend {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .date-range {
        flex-direction: column;
    }
    
    .date-range input {
        width: 100%;
    }
    
    .log-detail-row {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .log-detail-row .label {
        width: 100%;
    }
}



/* ============================================================================ */



/* ====================================================================================== */

/* =========================================================== */