/* public\assets\css\sidebar-fix.css */
/* ====== SIDEBAR MODERNE TDRCONSULTING ====== */

/* Variables CSS */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --sidebar-width: 280px;
    --header-height: 70px;
    --sidebar-bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --card-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1);
    --hover-shadow: 0 8px 35px 0 rgba(0, 0, 0, 0.15);
}

/* ====== SIDEBAR STYLES ====== */
.modern-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header de la sidebar */
.sidebar-header {
    padding: 25px 20px;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    flex-shrink: 0;
}

.sidebar-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.logo-container {
    text-align: center;
    margin-bottom: 15px;
}

.logo-container a {
    text-decoration: none !important;
}

.logo {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.logo:hover {
    transform: scale(1.05);
}

.logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.company-name {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.platform-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.speciality-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    padding: 12px 20px;
    margin: 20px 0;
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

.mobile-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

.btn-close-sidebar {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-close-sidebar:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Contenu de la sidebar */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.sidebar-content::-webkit-scrollbar {
    width: 4px;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.nav-wrapper {
    padding: 10px 0;
}

.nav-main {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-section {
    margin: 20px 0;
}

.section-title {
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0.3px;
    font-weight: 600;
    padding: 0 25px 15px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 25px;
    right: 25px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* Titres de section transformés en boutons d'accordéon (repliables) :
   on réinitialise les styles par défaut du <button> pour hériter de
   l'apparence de .section-title telle quelle. */
.section-title-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    /* Seule la famille de police est réinitialisée : le raccourci "font"
       réinitialiserait aussi font-size/font-weight et écraserait le 11px/600
       défini sur .section-title (même piège que color/text-transform
       précédemment — la déclaration la plus tardive dans le fichier gagne
       à spécificité égale). */
    font-family: inherit;
    /* Chrome/Firefox appliquent text-align:center par défaut aux <button> ;
       invisible tant que le libellé tient sur une ligne, mais un intitulé
       plus long (ex. « Gestion de Formateur », « Gestion des Évaluations »)
       passe alors sur 2 lignes centrées au lieu de rester aligné à gauche
       comme les autres titres de section. */
    text-align: left;
}

.section-title-btn > span {
    flex: 1 1 auto;
    min-width: 0;
}

.section-chevron {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.section-title-btn[aria-expanded="true"] .section-chevron {
    transform: rotate(90deg);
}

.section-title-btn:focus-visible {
    outline: 2px solid #4facfe;
    outline-offset: 2px;
    border-radius: 4px;
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 10px 25px 8px;
    margin-top: 15px;
}

.nav-item {
    margin: 2px 15px;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.nav-link:hover::before {
    left: 100%;
}

.nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transform: translateX(8px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.nav-link.active {
    color: #fff;
    background: var(--app-primary, #4facfe);
    border-left: 3px solid rgba(255, 255, 255, 0.85);
    transform: translateX(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.nav-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    flex-shrink: 0;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

/* Traitement distinct de l'icône pour la page active : un fond arrondi
   dédié, en plus de la couleur de fond de toute la ligne, pour que le
   repère reste visible même au survol rapide ou en rail replié (icône
   seule, texte masqué). */
.nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.nav-text {
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.notification-badge {
    background: #ff4757;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-left: auto;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.footer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    line-height: 1.4;
}

.footer-link {
    color: #4facfe;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #64b5f6;
}

/* ====== HEADER MODERNE ====== */
.modern-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--app-header-bg, rgba(255, 255, 255, 0.95));
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--app-header-border, rgba(0, 0, 0, 0.08));
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    transition: left 0.3s ease;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
 

.breadcrumb-nav {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-selector {
    display: flex;
    background: var(--app-surface-soft, #f8f9fa);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--app-muted, #6c757d);
    transition: all 0.3s ease;
    border: none;
    background: none;
    white-space: nowrap;
}

.lang-btn.active {
    background: var(--app-primary, #0665d0);
    color: white;
    border-radius: 25px;
}

.lang-btn:hover:not(.active) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--app-body-color, #495057);
    text-decoration: none;
}

.user-menu {
    position: relative;
}

.user-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--app-body-color, #495057);
}

.user-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-primary, #0665d0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
}

.dropdown-menu {
    border: none;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 8px 0;
    min-width: 250px;
    margin-top: 8px;
}

.dropdown-header {
    padding: 15px 20px;
    background: var(--app-surface-soft, #f8f9fa);
    border-bottom: 1px solid var(--app-border, #e9ecef);
    margin-bottom: 8px;
    border-radius: 15px 15px 0 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.dropdown-item:hover {
    background: rgba(79, 172, 254, 0.1);
    color: #4facfe;
}

.dropdown-item.text-danger:hover {
    background: rgba(255, 71, 87, 0.1);
    color: #dc3545;
}

.dropdown-divider {
    height: 1px;
    background: var(--app-border, #e9ecef);
    margin: 8px 0;
    border: none;
}

/* ====== OVERLAYS HEADER ====== */
.overlay-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay-header.show {
    opacity: 1;
    visibility: visible;
}

.search-backdrop,
.loader-backdrop {
    width: 100%;
    height: 100%;
    background: rgba(30, 60, 114, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-content,
.loader-content {
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.search-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 12px;
    padding: 15px 20px;
    font-size: 16px;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #4facfe;
    box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.25);
    color: white;
}

.btn-search-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 12px 0 0 12px;
    padding: 15px 20px;
    transition: all 0.3s ease;
}

.btn-search-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ====== LAYOUT PRINCIPAL ====== */
.main-content {
    /* margin-left: var(--sidebar-width); */
    margin-top: var(--header-height);
    transition: margin-left 0.3s ease;
    display: flex;
    flex-direction: column;
    /* min-width:0 : en tant qu'enfant flex de #page-container, évite
       que le contenu large (tables) empêche le rétrécissement et
       déborde la page horizontalement. */
    min-width: 0;
    min-height: calc(100vh - var(--header-height));
}

.content-wrapper {
    flex: 1;
    /* min-width:0 permet au conteneur de rétrécir sous la largeur
       intrinsèque de son contenu (tables larges), afin que
       .table-responsive défile en interne au lieu d'élargir la page. */
    min-width: 0;
    padding: 30px;
}

/* ====== ANCIENNES CLASSES POUR COMPATIBILITÉ ====== */
.sidebar-custom {
    /* Redirection vers la nouvelle classe */
}

.sidebar-container {
    /* Redirection vers la nouvelle classe */
}

.sidebar-scroll {
    /* Redirection vers la nouvelle classe */
}

.sidebar-content {
    /* Déjà définie ci-dessus */
}

.nav-main-heading {
    /* Utilise section-title à la place */
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-main-subheading {
    /* Utilise section-subtitle à la place */
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 1rem 1.5rem 0.5rem;
    font-size: 0.69rem;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-main-link {
    /* Utilise nav-link à la place */
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
}

.nav-main-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    text-decoration: none;
}

.nav-main-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-main-item {
    margin: 0.25rem 0.5rem;
}

.nav-main-link-icon {
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

.nav-main-link-name {
    font-size: 14px;
    font-weight: 500;
}

.nav-main-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 25px;
}

/* ====== RESPONSIVE DESIGN ====== */
@media (max-width: 991.98px) {
    .modern-sidebar {
        transform: translateX(-100%);
    }

    .sidebar-o .modern-sidebar,
    .modern-sidebar.sidebar-o {
        transform: translateX(0);
    }

    .modern-header {
        left: 0;
    }

    .main-content {
        margin-left: 0;
    }

    .overlay-header {
        left: 0;
    }

    .user-name {
        display: none;
    }

    .lang-label {
        display: none;
    }

    .lang-btn {
        padding: 6px 8px;
    }

    .breadcrumb-nav {
        display: none !important;
    }

    .content-wrapper {
        padding: 20px 15px;
    }
}

@media (max-width: 575.98px) {
    .modern-header {
        padding: 0 8px;
        gap: 4px;
    }

    .header-left,
    .header-right {
        gap: 4px;
    }

    .lang-btn {
        padding: 5px 6px;
        font-size: 11px;
    }

    .lang-label {
        display: none;
    }

    /* Sélecteur de thème compacté pour libérer de la largeur */
    .theme-selector {
        box-shadow: none;
    }

    .theme-btn {
        padding: 5px 7px;
        font-size: 12px;
    }

    .dropdown-menu {
        min-width: 200px;
    }
}

/* ====== ANIMATIONS ====== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.modern-sidebar.show {
    animation: slideInLeft 0.3s ease forwards;
}

/* ====== ÉTATS SPÉCIAUX ====== */
.sidebar-dark .modern-sidebar {
    background: var(--app-sidebar-bg, var(--sidebar-bg));
}

.enable-page-overlay::before {
    content: '';
    position: fixed;
    display: none !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-o.enable-page-overlay::before {
    opacity: 1;
    visibility: visible;
        pointer-events: auto; /* Active les clics seulement quand visible */

}

/* ====== AMÉLIORATIONS ACCESSIBILITÉ ====== */
.nav-link:focus,
.user-toggle:focus,
.sidebar-toggle:focus,
.lang-btn:focus {
    outline: 2px solid #063749;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ====== FIXES SPÉCIFIQUES LARAVEL ====== */
.page-header-fixed .modern-header {
    position: fixed;
}

.main-content-narrow .main-content {
    max-width: none;
}

/* ====== AMÉLIORATION DES COMPOSANTS ====== */
.card {
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    border: none;
    transition: all 0.3s ease;
}

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

.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
}

.btn-primary {
    background: var(--app-primary, #0665d0);
    border: none;
}

.btn-success {
    background: var(--success-gradient);
    border: none;
}

.btn-warning {
    background: var(--warning-gradient);
    border: none;
}

.btn-secondary {
    background: var(--secondary-gradient);
    border: none;
}

/* Tables modernes */
.table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    border: none;
}

.table th {
    background: var(--app-surface-soft, #f8f9fa);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--app-muted, #6c757d);
    padding: 15px 20px;
}

.table td {
    border: none;
    border-bottom: 1px solid var(--app-border, #e9ecef);
    padding: 15px 20px;
    vertical-align: middle;
}

.table tbody tr:hover {
    background: rgba(79, 172, 254, 0.05);
}

/* Forms modernes */
.form-control {
    border-radius: 10px;
    border: 2px solid var(--app-border, #e9ecef);
    transition: all 0.3s ease;
    padding: 12px 15px;
}

.form-control:focus {
    border-color: #4facfe;
    box-shadow: 0 0 0 0.2rem rgba(79, 172, 254, 0.25);
}

.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
}

/* Alerts modernes */
.alert {
    border-radius: 12px;
    border: none;
    padding: 15px 20px;
    box-shadow: var(--card-shadow);
}

.alert-primary {
    background: rgba(102, 126, 234, 0.1);
    color: #312e81;
}

.alert-success {
    background: rgba(79, 172, 254, 0.1);
    color: #0c4a6e;
}

.alert-warning {
    background: rgba(67, 233, 123, 0.1);
    color: #065f46;
}

.alert-danger {
    background: rgba(255, 71, 87, 0.1);
    color: #991b1b;
}

/* Badges modernes */
.badge {
    border-radius: 25px;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pagination moderne */
.pagination {
    gap: 5px;
}

.page-link {
    border-radius: 8px;
    border: none;
    color: #6c757d;
    font-weight: 600;
    transition: all 0.3s ease;
}

.page-link:hover {
    background: var(--app-primary, #0665d0);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
}

.page-item.active .page-link {
    background: var(--app-primary, #0665d0);
    border: none;
}

/* ====== CORRECTIONS FINALES ====== */
.d-none {
    display: none !important;
}

.d-lg-none {
    display: block !important;
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
}

.table-bg{
    background: #000;
}