/*
 * Corrections globales pour l'alignement des icônes Iconify
 * Fix permanent pour éviter les icônes sur ligne 1 et texte sur ligne 2
 */

/* Force les icônes Iconify à être inline avec le texte */
iconify-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}


/* EXCEPTION: Gestion de la visibilité des icônes de toggle du sidebar */
/* Par défaut, cacher l'icône "active" (flèche) et montrer "non-active" (burger) */
.sidebar-toggle iconify-icon.active,
.sidebar-toggle .icon.active {
    display: none !important;
}

.sidebar-toggle iconify-icon.non-active,
.sidebar-toggle .icon.non-active {
    display: inline-block !important;
}

/* Quand le sidebar est actif (ouvert), inverser : cacher burger, montrer flèche */
.sidebar-toggle.active iconify-icon.non-active,
.sidebar-toggle.active .icon.non-active {
    display: none !important;
}

.sidebar-toggle.active iconify-icon.active,
.sidebar-toggle.active .icon.active {
    display: inline-block !important;
}

/* Pour le toggle mobile, toujours visible */
.sidebar-mobile-toggle iconify-icon,
.sidebar-mobile-toggle .icon {
    display: inline-block !important;
}

/* ==========================================================================
   FIX GLOBAL: Boutons d'action avec icônes
   ========================================================================== */

/*
 * PROBLÈME: Iconify icons dans les boutons sont mal alignées et trop petites
 * SOLUTION MODULAIRE: Standardisation de tous les boutons avec icônes
 */

/* Tous les boutons avec icônes - Taille et alignement */
.btn iconify-icon,
button iconify-icon,
a.btn iconify-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    font-size: 1.25rem !important; /* 20px - Taille visible */
    width: 1.25em !important;
    height: 1.25em !important;
}

/* Boutons avec texte ET icône - Ajouter espace */
.btn iconify-icon:not(:only-child) {
    margin-right: 0.5rem !important;
}

/* Boutons ICON ONLY (sans texte) - Centrage parfait */
.btn iconify-icon:only-child,
button iconify-icon:only-child {
    margin: 0 !important;
}

/* Boutons small - Icônes proportionnelles */
.btn-sm iconify-icon,
.btn.btn-sm iconify-icon {
    font-size: 1.1rem !important; /* 17.6px pour btn-sm */
}

/* Boutons large - Icônes proportionnelles */
.btn-lg iconify-icon,
.btn.btn-lg iconify-icon {
    font-size: 1.5rem !important; /* 24px pour btn-lg */
}

/* EXCEPTION: Sidebar toggles gardent leurs règles spécifiques */
.sidebar-toggle iconify-icon,
.sidebar-mobile-toggle iconify-icon {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
}

/* Correction pour les liens et boutons contenant des icônes (sauf les toggles) */
a:not(.sidebar-toggle):not(.sidebar-mobile-toggle) iconify-icon {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-right: 0.25rem;
}

/* Correction spécifique pour les éléments avec d-flex */
.d-flex iconify-icon,
.d-inline-flex iconify-icon {
    flex-shrink: 0;
}

/* Correction pour les badges avec icônes */
.badge iconify-icon {
    vertical-align: text-bottom !important;
}

/* Correction pour les titres avec icônes */
h1 iconify-icon,
h2 iconify-icon,
h3 iconify-icon,
h4 iconify-icon,
h5 iconify-icon,
h6 iconify-icon,
.card-title iconify-icon {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 0.5rem;
}

/* Correction pour les items de menu sidebar */
.sidebar-menu a iconify-icon,
.menu-icon {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Correction pour les form-label avec icônes */
.form-label iconify-icon,
label iconify-icon {
    vertical-align: middle !important;
    margin-right: 0.25rem;
}

/* Correction pour les alertes avec icônes */
.alert iconify-icon {
    vertical-align: middle !important;
    margin-right: 0.5rem;
}

/* Correction pour les inputs avec icônes */
.input-group-text iconify-icon {
    vertical-align: middle !important;
}

/* Correction pour les tables avec icônes dans les en-têtes */
th iconify-icon,
td iconify-icon {
    vertical-align: middle !important;
}

/* ==========================================================================
   Sous-menus du sidebar - Améliorations UX 2025
   ========================================================================== */

/* Smooth transitions pour expand/collapse (Standard 2025) */
.sidebar-submenu {
    transition: all 0.3s ease;
}

/* Feedback visuel moderne au hover (sans écraser le thème) */
.sidebar-menu .sidebar-submenu li a {
    transition: all 0.2s ease;
}

.sidebar-menu .sidebar-submenu li a:hover {
    transform: translateX(4px);
}

/* Icônes des sous-menus - taille optimisée pour lisibilité */
.sidebar-menu .sidebar-submenu a iconify-icon {
    font-size: 1rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.sidebar-menu .sidebar-submenu a:hover iconify-icon {
    opacity: 1;
}

/* Animation moderne pour la flèche (Standard UX 2025) */
.has-arrow .arrow-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.has-arrow[aria-expanded="true"] .arrow-icon {
    transform: rotate(180deg);
}

/* Style pour le menu parent avec sous-menus */
.dropdown-hover > a.has-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Mode dark - Améliorations subtiles uniquement */
@media (prefers-color-scheme: dark) {
    .sidebar-menu .sidebar-submenu li a:hover iconify-icon {
        opacity: 1;
        filter: brightness(1.2);
    }
}

/* ==========================================================================
   Fix Bootstrap spacing utilities
   ========================================================================== */

/*
 * PROBLÈME: Le thème personnalisé (style.css) override Bootstrap avec:
 *   .mb-4 { margin-block-end: var(--size-4) !important; } // --size-4 = 0.25rem = 4px
 *
 * SOLUTION: Forcer Bootstrap mb-4 original (1.5rem = 24px) pour les composants
 *           qui utilisent les classes Bootstrap standards
 */

/* Override pour restaurer Bootstrap mb-4 = 24px au lieu de 4px du thème */
.mb-4 {
    margin-bottom: 1.5rem !important;
    margin-block-end: 1.5rem !important;
}

/* Force sur les conteneurs principaux */
.dashboard-main-body .mb-4,
.container-fluid > .mb-4,
.container-fluid .d-flex.mb-4 {
    margin-bottom: 1.5rem !important;
    margin-block-end: 1.5rem !important;
}

/* ==========================================================================
   Logo Sidebar - Structure améliorée (haute spécificité)
   ========================================================================== */

/* Conteneur principal du logo - flexbox horizontal */
aside.sidebar a.sidebar-logo div.logo-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Conteneur de l'image logo - taille fixe carrée */
aside.sidebar a.sidebar-logo div.logo-wrapper div.logo-img-container {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Images du logo - contraintes strictes */
aside.sidebar a.sidebar-logo div.logo-img-container img {
    max-width: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Logo icon - toujours caché par défaut (mode étendu) */
aside.sidebar a.sidebar-logo img.logo-icon {
    display: none !important;
}

/* Texte du branding - 2 lignes max, ne dépasse pas */
aside.sidebar a.sidebar-logo span.sidebar-text {
    flex: 1 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: inherit !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
}

/* ==========================================================================
   Logo Sidebar - Mode Collapsed (sidebar.active)
   ========================================================================== */

/* Quand sidebar collapsed - cacher le texte */
aside.sidebar.active a.sidebar-logo span.sidebar-text {
    display: none !important;
}

/* Quand sidebar collapsed - cacher le logo full */
aside.sidebar.active a.sidebar-logo img.logo-full {
    display: none !important;
}

/* Quand sidebar collapsed - montrer le logo icon */
aside.sidebar.active a.sidebar-logo img.logo-icon {
    display: block !important;
}

/* Quand sidebar collapsed - centrer le logo */
aside.sidebar.active a.sidebar-logo div.logo-wrapper {
    justify-content: center !important;
}

/* Quand sidebar collapsed - ajuster le conteneur */
aside.sidebar.active a.sidebar-logo div.logo-img-container {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
}

/* ==========================================================================
   Logo Sidebar - Mode Hover sur Collapsed
   ========================================================================== */

/* Quand hover sur sidebar collapsed - re-montrer le texte */
aside.sidebar.active:hover a.sidebar-logo span.sidebar-text {
    display: -webkit-box !important;
}

/* Quand hover sur sidebar collapsed - montrer logo full */
aside.sidebar.active:hover a.sidebar-logo img.logo-full {
    display: block !important;
}

/* Quand hover sur sidebar collapsed - cacher logo icon */
aside.sidebar.active:hover a.sidebar-logo img.logo-icon {
    display: none !important;
}

/* Quand hover sur sidebar collapsed - remettre alignement gauche */
aside.sidebar.active:hover a.sidebar-logo div.logo-wrapper {
    justify-content: flex-start !important;
}

/* Quand hover sur sidebar collapsed - taille normale */
aside.sidebar.active:hover a.sidebar-logo div.logo-img-container {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
}

/* ==========================================================================
   CORRECTIF GLOBAL TOGGLE SWITCH (form-switch)
   Fix permanent pour tous les switches de l'application
   ========================================================================== */

/* Reset du background-image de Bootstrap */
.form-switch .form-check-input {
    background-image: none !important;
    background-color: var(--neutral-400, #6c757d) !important;
    border-radius: 20px !important;
    width: 36px !important;
    height: 20px !important;
    border: 0 !important;
}

/* État coché - couleur primaire par défaut */
.form-switch .form-check-input:checked {
    background-color: var(--primary-600, #0d6efd) !important;
    background-image: none !important;
}

/* Curseur visible via ::before */
.form-switch .form-check-input::before {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    background: #fff !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 2px !important;
    transition: left 0.25s ease-in-out, transform 0.25s ease-in-out !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
    border: 0 !important;
    opacity: 1 !important;
}

/* Position du curseur quand coché */
.form-switch .form-check-input:checked::before {
    display: block !important;
    visibility: visible !important;
    left: 18px !important;
    transition: left 0.25s ease-in-out, transform 0.25s ease-in-out !important;
    opacity: 1 !important;
}

/* Container du switch - alignement vertical */
.form-switch {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 20px !important;
    padding-inline-start: 0 !important;
}

/* Label - alignement et espacement */
.form-switch .form-check-label {
    display: inline-block !important;
    line-height: 20px !important;
    margin-left: 8px !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

/* Input switch - alignement */
.form-switch .form-check-input {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   Variantes de couleurs pour les switches
   ========================================================================== */

/* Switch Primary (bleu) */
.switch-primary .form-check-input:checked {
    background-color: var(--primary-600, #0d6efd) !important;
}

/* Switch Danger (rouge) */
.switch-danger .form-check-input:checked {
    background-color: var(--danger-600, #dc3545) !important;
}

/* Switch Warning (orange) */
.switch-warning .form-check-input:checked {
    background-color: var(--warning-600, #ffc107) !important;
}

/* Switch Info (cyan) */
.switch-info .form-check-input:checked {
    background-color: var(--info-600, #0dcaf0) !important;
}

/* Switch Success (vert) */
.switch-success .form-check-input:checked {
    background-color: var(--success-600, #198754) !important;
}

/* ==========================================================================
   CORRECTIF GLOBAL CHECKBOXES (form-check standard)
   Fix permanent pour l'alignement texte/checkbox
   ========================================================================== */

/* Container du checkbox - alignement vertical parfait */
.form-check:not(.form-switch) {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    min-height: 1.5rem !important;
    padding-inline-start: 0 !important;
    padding-left: 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Input checkbox - taille et alignement */
.form-check:not(.form-switch) .form-check-input {
    width: 1.125rem !important;
    height: 1.125rem !important;
    margin-top: 0 !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
}

/* Label du checkbox - alignement vertical */
.form-check:not(.form-switch) .form-check-label {
    display: inline-block !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

/* Espacement entre checkboxes dans une row */
.row .form-check:not(.form-switch) {
    margin-bottom: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}