/*
 * Feuille de Style "Orion Pro" pour l'Espace Administration
 * Conforme au manifeste : excellence, clarté, et design soigné.
 */

/* -- 1. Variables de Couleur & Typographie -- */
:root {
    --primary-color: #0D6EFD; /* Un bleu vif et moderne */
    --secondary-color: #6C757D; /* Un gris neutre pour le texte secondaire */
    --dark-color: #1A2C50;      /* Bleu marine profond pour la sidebar */
    --light-color: #F8F9FA;    /* Fond principal très clair */
    --font-family: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--light-color);
}

/* -- 2. Page de Connexion -- */
.login-page {
    background: linear-gradient(-45deg, #eee, #fff, #eee, #fff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.login-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.8);
}

.login-card .form-control {
    padding: 0.9rem 1rem;
    border-radius: 0.5rem;
}

/* Spécificité pour le champ mot de passe avec icône */
.password-wrapper {
    position: relative;
}
.password-wrapper .form-control {
    padding-right: 3rem; /* Espace pour l'icône */
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--secondary-color);
    background: none;
    border: none;
    padding: 0.5rem;
}

/* Forcer LTR pour les champs de saisie, même en mode RTL */
.login-card input[type="text"],
.login-card input[type="password"] {
    direction: ltr;
    text-align: left;
}

/* -- 3. Layout de l'Administration -- */
/* ... (Code de la page de connexion) ... */

/* -- 3. Layout Général de l'Administration -- */
#wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Empêche le double scroll */
}

#page-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto; /* Permet uniquement au contenu principal de scroller */
}

.main-content {
    padding: 2rem;
}

/* -- 4. La Sidebar "de Ouf" -- */
#sidebar-wrapper {
    width: 280px;
    background-color: var(--dark-color);
    color: #adb5bd;
    transition: margin-left 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-heading {
    padding: 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
}
.sidebar-heading img {
    height: 35px;
    margin-right: 10px;
}

.sidebar-search {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-search .form-control {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 0.5rem;
}
.sidebar-search .form-control::placeholder {
    color: #adb5bd;
}

.sidebar-nav-wrapper {
    flex-grow: 1;
    overflow-y: auto;
}

.sidebar-nav {
    list-style: none;
    padding: 1rem 0;
}
.sidebar-nav .nav-group-title {
    padding: 0.5rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sidebar-nav .nav-item a {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.25rem;
    color: #adb5bd;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-left: 4px solid transparent;
}
.sidebar-nav .nav-item a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.sidebar-nav .nav-item.active > a {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--primary-color);
}
.sidebar-nav .nav-item a .nav-icon {
    font-size: 1.2rem;
    margin-right: 1rem;
    width: 24px;
    text-align: center;
    transition: transform 0.2s ease;
}
.sidebar-nav .nav-item.active a .nav-icon {
    transform: scale(1.1);
}
.sidebar-nav .nav-item.d-none {
    display: none !important; /* Pour la recherche */
}

/* -- 5. Header de l'Admin -- */
.admin-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-actions {
    display: flex;
    align-items: center;
}
.header-actions .dropdown-toggle::after {
    display: none;
}
.user-dropdown .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

/* ... (tout le code CSS précédent) ... */


/* -- 6. Responsive & Sidebar Off-Canvas -- */

/* Par défaut, la sidebar est visible sur les grands écrans (lg et plus) */
@media (min-width: 992px) {
    #wrapper {
        transition: all 0.3s ease;
    }
    /* Style pour la sidebar repliée sur grand écran (une future amélioration possible) */
    /*
    #wrapper.sidebar-collapsed #sidebar-wrapper {
        margin-left: -220px;
    }
    #wrapper.sidebar-collapsed #page-content-wrapper {
        padding-left: 60px;
    }
    */
}

/* Comportement sur les écrans plus petits (en dessous de lg / 992px) */
@media (max-width: 991.98px) {
    #sidebar-wrapper {
        position: fixed; /* La sidebar sort du flux normal */
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1030; /* Au-dessus du contenu mais en dessous des modales BS */
        margin-left: -280px; /* Cachée par défaut */
        transition: margin-left 0.3s ease-in-out;
    }

    #wrapper.sidebar-toggled #sidebar-wrapper {
        margin-left: 0; /* Afficher la sidebar */
    }

    /* Nous ajoutons une surcouche semi-transparente sur le contenu quand la sidebar est ouverte */
    #wrapper::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1029;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    #wrapper.sidebar-toggled::before {
        opacity: 1;
        visibility: visible;
    }

    .admin-header {
        padding: 0.75rem 1rem; /* Moins de padding sur mobile */
    }
}

/* -- 6. Responsive & Sidebar Off-Canvas -- */
/* ... (code responsive mobile) */

/* Sur grand écran, on change le comportement du toggle */
@media (min-width: 992px) {
    #page-content-wrapper {
        transition: padding-left 0.3s ease;
    }

    #wrapper.sidebar-toggled #sidebar-wrapper {
        margin-left: -280px; /* On la cache complètement */
    }
}

/* ... (code existant) ... */

/* -- 7. Wizard de Création de Personnel -- */
.wizard-nav {
    padding: 0;
    margin: 0 0 2rem 0;
    list-style: none;
    display: flex;
    border-bottom: 1px solid #dee2e6;
}
.wizard-nav-item {
    flex-grow: 1;
    text-align: center;
}
.wizard-nav-link {
    display: block;
    padding: 1rem 0.5rem;
    color: var(--secondary-color);
    text-decoration: none;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}
.wizard-nav-link.active {
    color: var(--primary-color);
    font-weight: 600;
    border-bottom-color: var(--primary-color);
}
.wizard-nav-link.completed {
    color: #198754;
}
.wizard-nav-link.completed::after {
    content: '\F26A'; /* Icone Bootstrap check */
    font-family: 'bootstrap-icons';
    margin-left: 8px;
}
.wizard-nav-link .step-number {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    border: 1px solid #ced4da;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 0.9rem;
}
.wizard-nav-link.active .step-number {
    border-color: var(--primary-color);
    background-color: var(--primary-color);
    color: #fff;
}
.wizard-nav-link.completed .step-number {
    border-color: #198754;
    background-color: #198754;
    color: #fff;
}

.wizard-step-content {
    display: none;
    animation: fadeIn 0.5s;
}
.wizard-step-content.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Forcer les majuscules */
.form-control.text-uppercase {
    text-transform: uppercase;
}
.form-control.text-uppercase::placeholder {
    text-transform: none;
}

/* Upload Photo */
.photo-uploader {
    border: 2px dashed #ced4da;
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.photo-uploader:hover, .photo-uploader.dragover {
    border-color: var(--primary-color);
    background-color: #f8f9fa;
}
.photo-uploader .icon {
    font-size: 3rem;
    color: #adb5bd;
}
.photo-preview {
    max-width: 150px;
    max-height: 150px;
    border-radius: 50%;
    margin: 0 auto 1rem auto;
}

/* -- 8. Composants d'UI Additionnels -- */
.badge.bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
.badge.bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); }

/* ... (code existant) ... */

/* -- 9. Vue 360° du Dossier Personnel -- */

/* Carte de Profil */
.profile-card {
    position: sticky;
    top: 2rem; /* Pour qu'elle reste visible au scroll */
}
.profile-card .profile-photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    margin-top: -60px; /* Fait remonter la photo sur le header de la carte */
}
.profile-card .profile-name {
    font-weight: 600;
    color: var(--dark-color);
}

/* Section d'information dans les onglets */
.info-section dt {
    font-weight: 500;
    color: var(--secondary-color);
}
.info-section dd {
    font-weight: 500;
    color: var(--dark-color);
}

/* Timeline de Carrière */
.timeline {
    list-style: none;
    padding: 1rem 0;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #e9ecef;
    left: 20px;
    margin-left: -1.5px;
}
body.rtl .timeline::before {
    left: auto;
    right: 20px;
    margin-left: 0;
    margin-right: -1.5px;
}

.timeline-item {
    margin-bottom: 2rem;
    position: relative;
    padding-left: 55px;
}
body.rtl .timeline-item {
    padding-left: 0;
    padding-right: 55px;
}
.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-size: 1.2rem;
}
body.rtl .timeline-icon {
    left: auto;
    right: 0;
}
.timeline-item.current .timeline-icon {
    background-color: var(--primary-color);
}

.timeline-content {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #dee2e6;
    position: relative;
}
.timeline-content .timeline-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-color);
}

/* ... (code existant) ... */

/* -- 10. Module de Gestion des Congés -- */

/* Filtres rapides */
.filter-pills .nav-link {
    border-radius: 50rem; /* pill shape */
    padding: 0.4rem 1rem;
    font-weight: 500;
    color: var(--secondary-color);
    background-color: #e9ecef;
    margin-right: 0.5rem;
}
.filter-pills .nav-link.active {
    color: #fff;
    background-color: var(--primary-color);
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3);
}

/* Badges de statut améliorés */
.status-badge {
    font-size: 0.8rem;
    padding: 0.4em 0.7em;
    font-weight: 600;
}
.status-pending {
    background-color: rgba(255, 193, 7, 0.1);
    color: #a07d00 !important;
}
.status-approved {
    background-color: rgba(25, 135, 84, 0.1);
    color: #0f5132 !important;
}
.status-rejected {
    background-color: rgba(220, 53, 69, 0.1);
    color: #842029 !important;
}

/* Calculateur de jours dans la modale */
#days-count-display {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* ... (tout le code CSS précédent) ... */

/* -- 11. BLINDAGE POUR LES MODALES SCROLLABLES -- */
/*
 * Ce bloc garantit que les modales utilisant .modal-dialog-scrollable
 * fonctionnent correctement même avec un contenu complexe.
 * Il force la structure flexbox à s'étirer sur toute la hauteur disponible.
*/


.modal-dialog.modal-dialog-scrollable {
    /* Permet au dialogue de prendre une hauteur maximale */
    display: flex;
    max-height: calc(100% - 1rem); /* 1rem = margin-top par défaut de Bootstrap */
}

.modal-dialog.modal-dialog-scrollable .modal-content {
    /* Le conteneur de contenu doit être flexible et s'étirer */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Empêche le contenu lui-même de déborder */
    flex-grow: 1;
}

.modal-dialog.modal-dialog-scrollable .modal-body {
    /* Le corps de la modale est la seule partie qui doit défiler */
    overflow-y: auto;
}

/* ... (code existant) ... */

/* -- 12. Gestion Documentaire Visuelle -- */
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.document-card {
    border: 1px solid var(--urf-border-gray);
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}
.document-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.document-card .doc-icon {
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--urf-border-gray);
    font-size: 4rem;
    line-height: 1;
}
.doc-icon .bi-file-earmark-pdf { color: #dc3545; }
.doc-icon .bi-file-earmark-word { color: #0d6efd; }
.doc-icon .bi-file-earmark-image { color: #198754; }
.doc-icon .bi-file-earmark-text { color: var(--secondary-color); }

.document-card .doc-body {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.doc-body .doc-title {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.25rem;
    /* Gérer les textes trop longs */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.doc-body .doc-meta {
    font-size: 0.8rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}
.doc-body .doc-type-badge {
    font-size: 0.75rem;
    align-self: flex-start; /* Aligner le badge en haut */
}

.document-card .doc-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--urf-border-gray);
    background-color: var(--light-color);
}

/* Barre de progression pour l'upload */
.upload-progress {
    height: 5px;
    width: 0%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

/* ... (dans la section /* -- 9. Vue 360° du Dossier Personnel -- */) ... */

.timeline-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* La couleur sera définie par les classes bg-primary, bg-success, etc. */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    font-size: 1.2rem;
    box-shadow: 0 0 0 4px var(--light-color); /* Crée un "halo" autour de l'icône */
}
body.rtl .timeline-icon {
    left: auto;
    right: 0;
}

/* ... (le reste du style de la timeline) ... */

/* Badge pour le poste actuel */
.badge.bg-primary-soft {
    background-color: rgba(13, 110, 253, 0.1);
}

/* ... (code existant) ... */

/* -- 13. Tableau de Bord RH -- */

/* Cartes KPI */
.kpi-card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.kpi-card .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kpi-card .kpi-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--dark-color);
}
.kpi-card .kpi-label {
    font-weight: 500;
    color: var(--secondary-color);
}
.kpi-card .kpi-icon {
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.2;
}

/* Conteneurs de graphiques */
.chart-container {
    height: 350px; /* Hauteur fixe pour les graphiques */
}

/* Animations de chargement "Skeleton" */
.skeleton-loader {
    animation: skeleton-pulse 1.5s infinite ease-in-out;
}
@keyframes skeleton-pulse {
    0% { background-color: #f0f2f5; }
    50% { background-color: #e9ecef; }
    100% { background-color: #f0f2f5; }
}
.skeleton-kpi .kpi-value, .skeleton-kpi .kpi-label {
    color: transparent !important;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}
.skeleton-kpi .kpi-value { width: 50%; }
.skeleton-kpi .kpi-label { width: 80%; }

/* ... */
.badge.bg-danger-soft { background-color: rgba(220, 53, 69, 0.1); }
.badge.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
.badge.bg-info-soft { background-color: rgba(13, 202, 240, 0.1); }