/* Frameworks de base */
@import "../css/bootstrap.min-IBIFbR8.css";
@import "../css/animate-QZ5-rDR.css";

/* Composants de date et formulaires */
@import "../css/bootstrap-datetimepicker.min-RsKUy14.css";
@import "../plugins/select2/css/select2.min-hfD4X29.css";
@import "../plugins/daterangepicker/daterangepicker-_sUpYIZ.css";
@import "../plugins/@simonwep/pickr/themes/nano.min-ZobVY6j.css";

/* Iconographie */
@import "../plugins/tabler-icons/tabler-icons-MqKG29i.css";
@import "../plugins/fontawesome/css/fontawesome.min-GGAUJs7.css";
@import "../plugins/fontawesome/css/all.min-mJkjKOh.css";

/* Style principal de l'application */
@import "../css/style-Gp_5twI.css";

/* Modules spécifiques par page */
@import "modules/categorie/index-LkbFiJF.css";
@import "modules/article/index-Ae6SkBF.css";
@import "modules/article/form-Wo_sNWz.css";
@import "modules/stock_mouvement/form-vuTawVC.css";
@import "modules/facturation/index-gDnEPfk.css";
@import "modules/dashboard/index-H2ZVgzB.css";

/* Toast Notifications */
@import "components/toast-yiIJf6A.css";

/* Skeleton loaders — ghost placeholders pour états de chargement */
@import "components/skeleton-7CbJEEd.css";

/* Système unifié de badges (état/sémantique) — soft-tones + theme-aware */
@import "components/stk-badges-zYvj7jR.css";

/* Panneau onboarding (mise en service article/entité) — soft-tones */
@import "components/stk-onboarding-QI9wgbN.css";

/* Modales — charte 2026 + neutralise l'override rouge 2016 sur .btn-close */
@import "components/stk-modal-3torpsR.css";

/* Alertes contextuelles soft-tones — réutilise les variables des badges */
@import "components/stk-alerts-yzziP_A.css";

/* Carte de complétion configuration (checklist + score + sticky footer) */
@import "components/stk-completion-w0e9T9Z.css";

/* Cartes Settings Hub — grille cliquable pour pages d'index de config */
@import "components/stk-hub-cards-tdtH4-X.css";

/* Documentation — layout 3 colonnes (Stripe/Linear-like) pour /aide/docs */
@import "components/stk-docs-fB7gYzG.css";

/* Panneau "Prêt à X ?" — checklist de prérequis pour formulaires longs */
@import "components/stk-readiness-wZc1Fso.css";

/* Bandeau session active (caisse, eMECeF, etc.) — soft-tones success */
@import "components/stk-session-SgOJOym.css";

/* Design tokens — spacing / radius / transitions / typography */
@import "tokens/_spacing-nJUUJt1.css";

/* Accessibilité globale — focus-visible, prefers-reduced-motion, cursor pointer */
@import "a11y-Yp5kOCr.css";

/* Tom-Select : thème NUKUNTCHE (design tokens, light/dark).
   Le CSS par défaut de Tom-Select est chargé via le controller Stimulus. */
@import "components/tom-select-theme-ezAUU1e.css";

/* Style personnalisé */
:root {
    --app-primary-color: #4361ee;
    --app-secondary-color: #2f3c4e;
    --app-text-color: #333;
    --app-border-radius: 6px;
}

/* Évite le saut horizontal quand la scrollbar verticale apparaît/disparaît
   (ex : changement de filtre qui modifie la hauteur de la page). */
html {
    scrollbar-gutter: stable;
}

/* Mode sombre */
body.dark-mode {
    --app-primary-color: #5f76ff;
    --app-secondary-color: #1c2533;
    --app-text-color: #f0f0f0;
}


/* Styles pour l'arborescence des catégories */
.category-tree .category-item {
    margin-bottom: 8px;
}

.category-tree .subcategories {
    margin-left: 20px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
}

/* Icône pour catégories ayant des enfants */
.has-children .category-name:before {
    content: '▾';
    margin-right: 5px;
}

/* Statut actif/inactif */
.status-badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
}
/* ANCIEN STYLE - Désactivé si sidebar-redesign-colored est utilisé */
.sidebar-menu li.active > a {
    background-color: #f0f0f0;
    color: #007bff;
    font-weight: bold;
}

.sidebar-menu .submenu.active > a {
    color: #007bff;
    font-weight: bold;
}

/* ========================================
   OVERRIDE POUR SIDEBAR REDESIGN
   Ces styles écrasent TOUT pour la sidebar redesignée
   VERSION COLORED ET VERSION WHITE
   ======================================== */

/* Menu actif en BLEU (au lieu d'orange) - POUR LES 2 VERSIONS */
.sidebar.sidebar-redesign-colored .sidebar-menu li.active > a,
.sidebar.sidebar-redesign-colored .sidebar-menu li.active a,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active > a,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active a,
#sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a,
.sidebar.sidebar-redesign-white .sidebar-menu li.active > a,
.sidebar.sidebar-redesign-white .sidebar-menu li.active a,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.active a,
#sidebar.sidebar-redesign-white .sidebar-menu li.active > a,
#sidebar.sidebar-redesign-white .sidebar-menu li.active a,
#sidebar.sidebar-redesign-white .sidebar-menu ul li.active a {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2) !important;
}

.sidebar.sidebar-redesign-colored .sidebar-menu li.active > a span,
.sidebar.sidebar-redesign-colored .sidebar-menu li.active a span,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a span,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active > a span,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active a span,
#sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a span,
.sidebar.sidebar-redesign-white .sidebar-menu li.active > a span,
.sidebar.sidebar-redesign-white .sidebar-menu li.active a span,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.active a span,
#sidebar.sidebar-redesign-white .sidebar-menu li.active > a span,
#sidebar.sidebar-redesign-white .sidebar-menu li.active a span,
#sidebar.sidebar-redesign-white .sidebar-menu ul li.active a span {
    color: white !important;
}

.sidebar.sidebar-redesign-colored .sidebar-menu li.active > a svg,
.sidebar.sidebar-redesign-colored .sidebar-menu li.active a svg,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a svg,
.sidebar.sidebar-redesign-colored .sidebar-menu li.active > a i,
.sidebar.sidebar-redesign-colored .sidebar-menu li.active a i,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a i,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active > a svg,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active a svg,
#sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a svg,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active > a i,
#sidebar.sidebar-redesign-colored .sidebar-menu li.active a i,
#sidebar.sidebar-redesign-colored .sidebar-menu ul li.active a i,
.sidebar.sidebar-redesign-white .sidebar-menu li.active > a svg,
.sidebar.sidebar-redesign-white .sidebar-menu li.active a svg,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.active a svg,
.sidebar.sidebar-redesign-white .sidebar-menu li.active > a i,
.sidebar.sidebar-redesign-white .sidebar-menu li.active a i,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.active a i,
#sidebar.sidebar-redesign-white .sidebar-menu li.active > a svg,
#sidebar.sidebar-redesign-white .sidebar-menu li.active a svg,
#sidebar.sidebar-redesign-white .sidebar-menu ul li.active a svg,
#sidebar.sidebar-redesign-white .sidebar-menu li.active > a i,
#sidebar.sidebar-redesign-white .sidebar-menu li.active a i,
#sidebar.sidebar-redesign-white .sidebar-menu ul li.active a i {
    color: white !important;
}

/* ========================================
   AMÉLIORATIONS PROFESSIONNELLES
   ======================================== */

/* 1. RETIRER LES SOULIGNEMENTS (look amateur) */
.sidebar.sidebar-redesign-colored .sidebar-menu a,
.sidebar.sidebar-redesign-colored .sidebar-menu a:hover,
.sidebar.sidebar-redesign-colored .sidebar-menu a:focus,
.sidebar.sidebar-redesign-colored .sidebar-menu a:active,
#sidebar.sidebar-redesign-colored .sidebar-menu a,
#sidebar.sidebar-redesign-colored .sidebar-menu a:hover,
.sidebar.sidebar-redesign-white .sidebar-menu a,
.sidebar.sidebar-redesign-white .sidebar-menu a:hover,
.sidebar.sidebar-redesign-white .sidebar-menu a:focus,
.sidebar.sidebar-redesign-white .sidebar-menu a:active,
#sidebar.sidebar-redesign-white .sidebar-menu a,
#sidebar.sidebar-redesign-white .sidebar-menu a:hover {
    text-decoration: none !important;
}

/* 2. AUGMENTER LA TAILLE DE POLICE (plus lisible et premium) */
.sidebar.sidebar-redesign-colored .sidebar-menu > ul > li > a,
#sidebar.sidebar-redesign-colored .sidebar-menu > ul > li > a,
.sidebar.sidebar-redesign-white .sidebar-menu > ul > li > a,
#sidebar.sidebar-redesign-white .sidebar-menu > ul > li > a {
    font-size: 16px !important; /* Option A : augmentation modérée */
}

.sidebar.sidebar-redesign-colored .sidebar-menu > ul > li > a span,
#sidebar.sidebar-redesign-colored .sidebar-menu > ul > li > a span,
.sidebar.sidebar-redesign-white .sidebar-menu > ul > li > a span,
#sidebar.sidebar-redesign-white .sidebar-menu > ul > li > a span {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* 3. SOUS-MENUS : taille de police cohérente */
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.submenu ul li a,
#sidebar.sidebar-redesign-colored .sidebar-menu ul li.submenu ul li a,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.submenu ul li a,
#sidebar.sidebar-redesign-white .sidebar-menu ul li.submenu ul li a {
    font-size: 15px !important; /* Option A : 14px → 15px */
    text-decoration: none !important;
}

/* 4. TITRES DE SECTIONS : plus visibles */
.sidebar.sidebar-redesign-colored .submenu-hdr,
#sidebar.sidebar-redesign-colored .submenu-hdr,
.sidebar.sidebar-redesign-white .submenu-hdr,
#sidebar.sidebar-redesign-white .submenu-hdr {
    font-size: 12px !important; /* Option A : 11px → 12px */
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* 5. ESPACEMENTS PLUS GÉNÉREUX (look premium) */
.sidebar.sidebar-redesign-colored .sidebar-menu > ul > li,
#sidebar.sidebar-redesign-colored .sidebar-menu > ul > li,
.sidebar.sidebar-redesign-white .sidebar-menu > ul > li,
#sidebar.sidebar-redesign-white .sidebar-menu > ul > li {
    margin-bottom: 4px !important;
}

.sidebar.sidebar-redesign-colored .sidebar-menu > ul > li > a,
#sidebar.sidebar-redesign-colored .sidebar-menu > ul > li > a,
.sidebar.sidebar-redesign-white .sidebar-menu > ul > li > a,
#sidebar.sidebar-redesign-white .sidebar-menu > ul > li > a {
    padding: 12px 16px !important; /* Plus généreux : 12px vertical, 16px horizontal */
}

/* 6. ICÔNES : taille augmentée pour cohérence */
.sidebar.sidebar-redesign-colored .sidebar-menu svg,
.sidebar.sidebar-redesign-colored .sidebar-menu i,
#sidebar.sidebar-redesign-colored .sidebar-menu svg,
#sidebar.sidebar-redesign-colored .sidebar-menu i,
.sidebar.sidebar-redesign-white .sidebar-menu svg,
.sidebar.sidebar-redesign-white .sidebar-menu i,
#sidebar.sidebar-redesign-white .sidebar-menu svg,
#sidebar.sidebar-redesign-white .sidebar-menu i {
    min-width: 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
}

/* 7. TRANSITION FLUIDE sur tous les liens */
.sidebar.sidebar-redesign-colored .sidebar-menu a,
#sidebar.sidebar-redesign-colored .sidebar-menu a,
.sidebar.sidebar-redesign-white .sidebar-menu a,
#sidebar.sidebar-redesign-white .sidebar-menu a {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   FIXES POUR OFFCANVAS MOBILE
   ======================================== */

/* 1. Bouton hamburger en BLEU (au lieu d'orange) */
.mobile_btn .bar-icon span {
    background-color: #3B82F6 !important;
}

.mobile_btn:hover .bar-icon span {
    background-color: #2563EB !important;
}

/* 2. Offcanvas : s'assurer qu'il est visible */
.offcanvas.sidebar {
    display: block !important;
    visibility: visible !important;
}

.offcanvas .sidebar-inner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.offcanvas .sidebar-menu {
    display: block !important;
    visibility: visible !important;
}

/* 3. Backdrop de l'Offcanvas */
.offcanvas-backdrop {
    z-index: 1040 !important;
}

/* ========================================
   SIDEBAR SCROLLABLE
   ======================================== */

/* Rendre la sidebar scrollable quand le contenu dépasse */
.sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 65px); /* Hauteur écran - hauteur header */
}

/* Scrollbar personnalisée pour la sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

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

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.3);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

/* ========================================
   SIDEBAR MINI MODE (TOGGLE)
   ======================================== */

/* Sidebar en mode mini (réduite) */
.sidebar.mini-sidebar {
    width: 80px !important;
    transition: width 0.3s ease-in-out;
}

/* Cacher les textes en mode mini */
.sidebar.mini-sidebar .sidebar-menu span {
    display: none;
}

/* Logo par défaut : afficher le logo normal, cacher le mini */
.sidebar-logo .logo-normal {
    display: block !important;
}

.sidebar-logo .logo-small {
    display: none !important;
}

/* En mode mini : cacher le logo normal, afficher le mini (S uniquement) */
.sidebar.mini-sidebar .sidebar-logo .logo-normal {
    display: none !important;
}

.sidebar.mini-sidebar .sidebar-logo .logo-small {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Centrer le logo S en mode mini */
.sidebar.mini-sidebar .sidebar-logo {
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

/* Cacher les badges en mode mini */
.sidebar.mini-sidebar .badge {
    display: none;
}

/* Cacher les headers de sections en mode mini */
.sidebar.mini-sidebar .submenu-hdr {
    display: none;
}

/* Cacher les flèches de sous-menus en mode mini */
.sidebar.mini-sidebar .menu-arrow {
    display: none;
}

/* Centrer les icônes en mode mini */
.sidebar.mini-sidebar .sidebar-menu a {
    justify-content: center;
    padding: 12px 0 !important;
    position: relative;
}

/* Amélioration de l'icône active en mode mini */
.sidebar.mini-sidebar .sidebar-menu li.active > a {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    margin: 4px 8px !important;
    width: calc(100% - 16px) !important;
}

/* Icône active en mode mini : couleur blanche */
.sidebar.mini-sidebar .sidebar-menu li.active > a i,
.sidebar.mini-sidebar .sidebar-menu li.active > a svg {
    color: white !important;
    stroke: white !important;
}

/* Hover en mode mini : plus visible */
.sidebar.mini-sidebar .sidebar-menu li:not(.active) > a:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    border-radius: 12px !important;
    margin: 4px 8px !important;
    width: calc(100% - 16px) !important;
}

/* Barre indicatrice à gauche pour l'item actif en mode mini */
.sidebar.mini-sidebar .sidebar-menu li.active > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: white;
    border-radius: 0 3px 3px 0;
}

/* Cacher le profil utilisateur texte en mode mini */
.sidebar.mini-sidebar .sidebar-profile-info {
    display: none;
}

/* Réduire l'avatar en mode mini */
.sidebar.mini-sidebar .sidebar-profile {
    justify-content: center;
    padding: 10px !important;
}

/* Transition fluide pour le page-wrapper */
.page-wrapper {
    transition: margin-left 0.3s ease-in-out;
}

/* Icône du bouton toggle qui tourne */
#toggle_btn i {
    transition: transform 0.3s ease-in-out;
}

.sidebar.mini-sidebar #toggle_btn i {
    transform: rotate(180deg);
}

/* OVERRIDE : Supprimer le cercle orange de l'ancien template */
#toggle_btn::before,
#toggle_btn::after {
    display: none !important;
}

.header-left #toggle_btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Bouton toggle hamburger moderne */
.sidebar-toggle-btn {
    background: transparent !important;
    border: none !important;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: none !important;
    margin-left: 28px !important;
}

.sidebar-toggle-btn:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}

.sidebar-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Icône hamburger (3 barres) - TRAITS TRÈS ÉPAIS ET SERRÉS */
.toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}

.toggle-icon span {
    display: block;
    width: 100%;
    height: 4px;
    background: #3B82F6;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* Animation quand la sidebar est mini (transforme en X) */
.sidebar.mini-sidebar .toggle-icon {
    gap: 6px;
}

.sidebar.mini-sidebar .toggle-icon span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.sidebar.mini-sidebar .toggle-icon span:nth-child(2) {
    opacity: 0;
}

.sidebar.mini-sidebar .toggle-icon span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ========================================
   FIX HEADER : Alignement à droite
   ======================================== */
.user-menu {
    justify-content: flex-end !important;
    -webkit-justify-content: flex-end !important;
    margin-left: auto !important;
}

/* ========================================
   FIX SIDEBAR : Bullet points et état actif
   ======================================== */

/* FORCER suppression des bullet points - très agressif */
.sidebar.sidebar-redesign-colored .sidebar-menu ul,
.sidebar.sidebar-redesign-white .sidebar-menu ul,
.sidebar.sidebar-redesign-colored .sidebar-menu .submenu ul,
.sidebar.sidebar-redesign-white .sidebar-menu .submenu ul,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.submenu ul,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.submenu ul {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
}

.sidebar.sidebar-redesign-colored .sidebar-menu .submenu ul li,
.sidebar.sidebar-redesign-white .sidebar-menu .submenu ul li,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.submenu ul li,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.submenu ul li {
    list-style: none !important;
    list-style-type: none !important;
}

.sidebar.sidebar-redesign-colored .sidebar-menu .submenu ul li::before,
.sidebar.sidebar-redesign-white .sidebar-menu .submenu ul li::before,
.sidebar.sidebar-redesign-colored .sidebar-menu .submenu ul li::marker,
.sidebar.sidebar-redesign-white .sidebar-menu .submenu ul li::marker {
    content: none !important;
    display: none !important;
}

/* DIFFÉRENCIATION CLAIRE : Menu actif VS Sous-menu actif */

/* Menu principal actif (niveau 1) - GRADIENT BLEU PUISSANT */
.sidebar.sidebar-redesign-colored .sidebar-menu > ul > li.active > a,
.sidebar.sidebar-redesign-white .sidebar-menu > ul > li.active > a,
.sidebar.sidebar-redesign-colored .sidebar-menu > ul > li.submenu.active > a,
.sidebar.sidebar-redesign-white .sidebar-menu > ul > li.submenu.active > a {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2) !important;
}

/* Sous-menu actif (niveau 2) - FOND SUBTIL avec BORDURE GAUCHE */
.sidebar.sidebar-redesign-colored .sidebar-menu .submenu ul li.active > a,
.sidebar.sidebar-redesign-white .sidebar-menu .submenu ul li.active > a,
.sidebar.sidebar-redesign-colored .sidebar-menu ul li.submenu ul li.active > a,
.sidebar.sidebar-redesign-white .sidebar-menu ul li.submenu ul li.active > a {
    background: rgba(255, 255, 255, 0.15) !important;
    background-image: none !important; /* Pas de gradient */
    color: white !important;
    font-weight: 500 !important;
    border-left: 3px solid white !important;
    border-radius: 6px !important;
    box-shadow: none !important; /* Pas d'ombre */
    padding-left: 45px !important;
}

.sidebar.sidebar-redesign-colored .sidebar-menu .submenu ul li.active > a i,
.sidebar.sidebar-redesign-white .sidebar-menu .submenu ul li.active > a i {
    color: white !important;
}

/* ========================================
   OVERRIDE GLOBAL : CHECKBOXES
   accent-color est natif et supporté par Firefox/Chrome/Safari.
   Pas de lutte contre le rendu natif du navigateur.
   ======================================== */

input[type="checkbox"],
input.form-check-input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    accent-color: #3B82F6 !important;
    cursor: pointer;
}

input[type="checkbox"]:focus,
input.form-check-input[type="checkbox"]:focus {
    box-shadow: none !important;
    outline: none !important;
}