/* ============================================================================
   G-STOCK — Design System
   ----------------------------------------------------------------------------
   CHARTE 3 COULEURS (reprise de la page d'authentification)

     1. Bleu Royal  #2563EB  → action, marque, état actif, liens
     2. Bleu Nuit   #1E3A8A  → sidebar, surfaces sombres, titres
     3. Neutre      #0F172A → #F8FAFC  → texte, fonds, bordures

   Les 3 couleurs de signal (succès / alerte / danger) ne font PAS partie de la
   charte : ce sont des indicateurs d'état, toujours utilisés en pastille
   teintée (fond 10 % + texte foncé), jamais en aplat décoratif.
   ========================================================================= */

:root {
    /* ---- 1. Bleu Royal ---------------------------------------------------- */
    --blue:          #2563EB;
    --blue-hover:    #1D4ED8;
    --blue-active:   #1E40AF;
    --blue-50:       #EFF4FF;   /* fond info, pastille, survol discret */
    --blue-100:      #DBE6FE;

    /* ---- 2. Bleu Nuit ----------------------------------------------------- */
    --navy:          #1E3A8A;
    --navy-deep:     #17306F;   /* bas de la sidebar */
    --navy-ink:      #142A62;

    /* ---- 3. Neutre -------------------------------------------------------- */
    --ink:           #0F172A;   /* titres */
    --text:          #334155;   /* texte courant */
    --muted:         #64748B;   /* texte secondaire */
    --faint:         #94A3B8;   /* texte tertiaire, placeholders */
    --border:        #E2E8F0;
    --border-soft:   #F1F5F9;
    --bg:            #F6F8FB;   /* fond d'application */
    --surface:       #FFFFFF;

    /* ---- Signaux d'état (hors charte) ------------------------------------- */
    --success:       #16A34A;
    --success-soft:  #E8F6EE;
    --warning:       #D97706;
    --warning-soft:  #FDF3E3;
    --danger:        #DC2626;
    --danger-soft:   #FDECEC;

    /* ---- Dégradé de marque (identique au panneau d'authentification) ------- */
    --grad-brand:    linear-gradient(150deg, var(--blue) 0%, var(--navy) 100%);
    /* Sidebar : même famille, ancrée sur le bleu nuit pour un usage prolongé.
       Pour une sidebar identique au panneau d'auth, remplacer par --grad-brand. */
    --grad-sidebar:  linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);

    /* ---- Rayons ----------------------------------------------------------- */
    --r-sm:  8px;
    --r-md:  10px;
    --r-lg:  14px;
    --r-xl:  20px;
    --r-pill: 999px;

    /* ---- Élévation (douce, jamais de noir pur) ---------------------------- */
    --sh-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --sh-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --sh-md: 0 4px 12px rgba(15, 23, 42, .07);
    --sh-lg: 0 12px 32px rgba(15, 23, 42, .10);
    --sh-xl: 0 24px 60px rgba(20, 42, 98, .28);
    --ring:  0 0 0 3px rgba(37, 99, 235, .22);

    /* ---- Typographie ------------------------------------------------------ */
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;

    /* ---- Alias de compatibilité (utilisés dans les gabarits existants) ----- */
    --primary-color:   var(--navy);
    --secondary-color: var(--ink);
    --accent-color:    var(--blue);
    --success-color:   var(--success);
    --warning-color:   var(--warning);
    --danger-color:    var(--danger);
    --blue-dark:       var(--navy);
    --dark:            var(--navy);
    --soft:            var(--blue-50);
    --line:            var(--border);
    --green:           var(--success);
    --amber:           var(--warning);
    --red:             var(--danger);

    /* ---- Surcharge des tokens Bootstrap 5 --------------------------------- */
    --bs-primary:      #2563EB;
    --bs-primary-rgb:  37, 99, 235;
    --bs-link-color:   #2563EB;
    --bs-link-hover-color: #1D4ED8;
    --bs-body-color:   #334155;
    --bs-body-bg:      #F6F8FB;
    --bs-border-color: #E2E8F0;
    --bs-border-radius: 10px;
    --bs-font-sans-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ============================================================================
   BASE
   ========================================================================= */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background-color: var(--bg);
    font-family: var(--font-body);
    color: var(--text);
    font-size: .95rem;
    line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-head);
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -.01em;
}

h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.18rem; }
h4, .h4 { font-size: 1.05rem; }
h5, .h5 { font-size: .98rem; }
h6, .h6 { font-size: .9rem; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

hr { border-color: var(--border); opacity: 1; }

/* Anneau de focus unique et visible sur tout le produit (accessibilité) */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Texte clair sur fonds sombres (sidebar, panneau d'auth) */
#sidebar .sidebar-header h4,
.auth-brand h1, .auth-brand h2, .auth-brand h3,
.auth-brand h4, .auth-brand h5, .auth-brand h6 {
    color: #fff;
}

/* Barres de défilement discrètes */
* { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--faint); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
   SIDEBAR  —  bleu nuit de la charte d'authentification
   ========================================================================= */

#sidebar {
    min-width: 256px;
    max-width: 256px;
    width: 256px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--grad-sidebar) !important;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .06);
    transition: min-width .22s ease, max-width .22s ease, width .22s ease, margin-left .22s ease;
}

#sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* ---- En-tête de marque ---- */
#sidebar .sidebar-header {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}

#sidebar .sidebar-header h4 {
    font-weight: 800;
    letter-spacing: .06em;
    font-size: 1.12rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

#sidebar .sidebar-header i {
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex: 0 0 auto;
}

/* ---- Items de navigation ---- */
#sidebar .components { padding: 12px 0 !important; }
#sidebar .components li { margin-bottom: 0 !important; }

#sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 2px 12px;
    border-radius: var(--r-md);
    color: rgba(255, 255, 255, .78) !important;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color .16s ease, color .16s ease;
}

#sidebar .nav-link i {
    width: 20px;
    text-align: center;
    font-size: .95rem;
    flex: 0 0 auto;
    opacity: .85;
    transition: opacity .16s ease;
}

#sidebar .nav-link .sidebar-label { margin-left: 0 !important; }

#sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .09);
    color: #fff !important;
    transform: none;          /* on remplace le décalage par un fond : plus stable */
}
#sidebar .nav-link:hover i { opacity: 1; }

#sidebar .nav-link.active {
    background-color: var(--blue);
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(37, 99, 235, .35);
}
#sidebar .nav-link.active i { opacity: 1; }

/* Repère vertical sur l'item actif */
#sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

/* ---- Pied de sidebar ---- */
#sidebar .sidebar-footer {
    padding: 14px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    background: rgba(0, 0, 0, .12);
}

#sidebar .sidebar-footer small,
#sidebar .sidebar-footer .text-muted {
    color: rgba(255, 255, 255, .55) !important;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#sidebar .sidebar-footer p {
    color: #fff;
    font-size: .9rem;
}

#sidebar .sidebar-footer .btn-outline-light {
    border-color: rgba(255, 255, 255, .28);
    color: rgba(255, 255, 255, .9);
    font-weight: 500;
}
#sidebar .sidebar-footer .btn-outline-light:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

/* ---- État réduit (icônes seules) ---- */
#sidebar.active {
    min-width: 76px;
    max-width: 76px;
    width: 76px;
}
#sidebar.active .sidebar-label { display: none; }
#sidebar.active .nav-link {
    justify-content: center;
    padding: 12px 0;
    margin: 2px 14px;
    gap: 0;
}
#sidebar.active .nav-link.active::before { display: none; }
#sidebar.active .sidebar-header {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#sidebar.active .sidebar-header h4 { justify-content: center; }
#sidebar.active .sidebar-footer { text-align: center; }
#sidebar.active .sidebar-footer .btn { padding-left: 0; padding-right: 0; }

/* ============================================================================
   ZONE DE CONTENU + BARRE SUPÉRIEURE
   ========================================================================= */

#content {
    flex: 1;
    min-width: 0;
    margin-left: 256px;
    transition: margin-left .22s ease;
}
#content.active { margin-left: 76px; }

#content > .navbar {
    background: rgba(255, 255, 255, .88) !important;
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border) !important;
    padding: .55rem 0;
    min-height: 60px;
}

#content > .navbar .navbar-text {
    color: var(--muted);
    font-size: .85rem;
}
#content > .navbar .navbar-text i { color: var(--faint); }

/* Le bouton ☰ devient un bouton icône neutre, le bleu reste réservé aux actions */
#sidebarCollapse.btn,
#sidebarCollapse.btn-primary {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--r-md);
    box-shadow: none;
}
#sidebarCollapse.btn:hover {
    background: var(--blue-50);
    border-color: var(--blue-100);
    color: var(--blue);
}

/* ============================================================================
   CARTES
   ========================================================================= */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: box-shadow .18s ease, border-color .18s ease;
}

/* Plus de translation au survol : le contenu des tableaux ne doit pas bouger */
.card:hover {
    transform: none;
    box-shadow: var(--sh-md);
}

/* En-têtes de carte : surface claire + filet, à la place du dégradé sombre */
.card-header:not([class*="bg-"]) {
    background: var(--surface) !important;
    color: var(--ink) !important;
}
.card-header {
    border: 0;
    border-bottom: 1px solid var(--border) !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    padding: 14px 18px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .98rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

.card-header:not([class*="bg-"]) h1, .card-header:not([class*="bg-"]) h2,
.card-header:not([class*="bg-"]) h3, .card-header:not([class*="bg-"]) h4,
.card-header:not([class*="bg-"]) h5, .card-header:not([class*="bg-"]) h6 {
    color: var(--ink) !important;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin: 0;
    font-size: 1rem;
}

/* En-tête volontairement coloré (ex. confirmation de suppression) : titre en blanc */
.card-header[class*="bg-"] h1, .card-header[class*="bg-"] h2,
.card-header[class*="bg-"] h3, .card-header[class*="bg-"] h4,
.card-header[class*="bg-"] h5, .card-header[class*="bg-"] h6 {
    color: #fff !important;
}

/* Les icônes d'en-tête portent l'accent bleu */
.card-header > i:first-child,
.card-header h1 > i:first-child, .card-header h2 > i:first-child,
.card-header h3 > i:first-child, .card-header h4 > i:first-child,
.card-header h5 > i:first-child, .card-header h6 > i:first-child {
    color: var(--blue);
}

/* Boutons et textes clairs placés dans un en-tête redeviennent lisibles */
.card-header:not([class*="bg-"]) .text-white,
.card-header:not([class*="bg-"]) .text-light { color: var(--ink) !important; }
.card-header .btn-outline-light {
    color: var(--blue);
    border-color: var(--border);
}
.card-header .btn-outline-light:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.card-body { padding: 18px; }
.card-footer {
    background: var(--border-soft);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    padding: 12px 18px;
}

/* ============================================================================
   BOUTONS
   ========================================================================= */

.btn {
    border-radius: var(--r-md);
    font-weight: 550;
    font-size: .9rem;
    padding: .5rem 1rem;
    line-height: 1.4;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:focus, .btn:focus-visible { box-shadow: var(--ring); }
.btn-sm { padding: .34rem .7rem; font-size: .82rem; border-radius: var(--r-sm); }
.btn-lg { padding: .7rem 1.4rem; font-size: 1rem; }

.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .25);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:first-child:active, .btn-check:checked + .btn-primary {
    background: var(--blue-hover) !important;
    border-color: var(--blue-hover) !important;
    color: #fff;
}

.btn-outline-primary { color: var(--blue); border-color: var(--blue-100); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-primary:first-child:active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
}

/* Secondaire = neutre (et non gris plein) : la hiérarchie reste lisible */
.btn-secondary,
.btn-outline-secondary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-secondary:first-child:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-secondary:first-child:active {
    background: var(--border-soft) !important;
    border-color: var(--faint) !important;
    color: var(--ink) !important;
}

.btn-dark {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark:first-child:active {
    background: var(--navy-ink) !important;
    border-color: var(--navy-ink) !important;
}

/* info → bleu de la charte (pas de cyan Bootstrap) */
.btn-info {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info:first-child:active {
    background: var(--blue-hover) !important;
    border-color: var(--blue-hover) !important;
    color: #fff !important;
}
.btn-outline-info { color: var(--blue); border-color: var(--blue-100); }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
}

/* Boutons d'état : utilisés uniquement pour des actions d'état */
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:first-child:active {
    background: #15803D !important; border-color: #15803D !important; color: #fff !important;
}
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning:first-child:active {
    background: #B45309 !important; border-color: #B45309 !important; color: #fff !important;
}
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:first-child:active {
    background: #B91C1C !important; border-color: #B91C1C !important; color: #fff !important;
}
.btn-outline-success { color: var(--success); border-color: #BBE7CB; }
.btn-outline-success:hover, .btn-outline-success:active { background: var(--success) !important; border-color: var(--success) !important; color: #fff !important; }
.btn-outline-danger { color: var(--danger); border-color: #F5C6C6; }
.btn-outline-danger:hover, .btn-outline-danger:active { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }
.btn-outline-warning { color: var(--warning); border-color: #F4D9AC; }
.btn-outline-warning:hover, .btn-outline-warning:active { background: var(--warning) !important; border-color: var(--warning) !important; color: #fff !important; }

.btn-link { color: var(--blue); font-weight: 550; }
.btn-link:hover { color: var(--blue-hover); }

/* ============================================================================
   UTILITAIRES BOOTSTRAP RAMENÉS À LA CHARTE
   ========================================================================= */

.bg-primary, .text-bg-primary { background-color: var(--blue) !important; color: #fff !important; }
.bg-info, .text-bg-info       { background-color: var(--blue) !important; color: #fff !important; }
.bg-dark, .text-bg-dark       { background-color: var(--navy) !important; color: #fff !important; }
.bg-secondary, .text-bg-secondary { background-color: var(--muted) !important; color: #fff !important; }
.bg-light                     { background-color: var(--border-soft) !important; }
.bg-success, .text-bg-success { background-color: var(--success) !important; color: #fff !important; }
.bg-warning, .text-bg-warning { background-color: var(--warning) !important; color: #fff !important; }
.bg-danger,  .text-bg-danger  { background-color: var(--danger)  !important; color: #fff !important; }

.text-primary { color: var(--blue) !important; }
.text-info    { color: var(--blue) !important; }
.text-dark    { color: var(--ink) !important; }
.text-muted   { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }

.border { border-color: var(--border) !important; }
.border-secondary { border-color: var(--border) !important; }

.navbar-dark.bg-primary { background: var(--grad-brand) !important; }

/* ============================================================================
   TABLEAUX
   ========================================================================= */

.table {
    --bs-table-color: var(--text);
    --bs-table-bg: transparent;
    border-color: var(--border);
    margin-bottom: 0;
}

/* En-tête clair : les en-têtes sombres écrasaient la hiérarchie de la page */
.table > thead th,
.table thead th {
    background-color: var(--border-soft);
    color: var(--muted);
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: .74rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 11px 15px;
    white-space: nowrap;
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.table tbody tr:last-child td { border-bottom: 0; }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background-color: rgba(37, 99, 235, .025);
    color: var(--text);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    background-color: var(--blue-50);
    color: var(--ink);
}

/* La carte découpe proprement le tableau qu'elle contient */
.card > .table-responsive,
.card > .table { border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }

/* DataTables alignés sur la charte */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: .35rem .6rem;
    outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--blue);
    box-shadow: var(--ring);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--muted); font-size: .85rem; }
.page-link { color: var(--blue); border-color: var(--border); border-radius: var(--r-sm); }
.page-link:hover { background: var(--blue-50); color: var(--blue-hover); border-color: var(--blue-100); }
.page-item.active .page-link { background: var(--blue); border-color: var(--blue); color: #fff; }
.page-item.disabled .page-link { color: var(--faint); }

/* ============================================================================
   BADGES  —  pastilles teintées, lisibles (AA) sur fond clair
   ========================================================================= */

.badge {
    border-radius: var(--r-pill);
    padding: .34em .7em;
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .01em;
}

.badge.bg-primary, .badge.text-bg-primary,
.badge.bg-info,    .badge.text-bg-info {
    background-color: var(--blue-50) !important;
    color: var(--blue-active) !important;
}
.badge.bg-success, .badge.text-bg-success {
    background-color: var(--success-soft) !important;
    color: #15803D !important;
}
.badge.bg-warning, .badge.text-bg-warning {
    background-color: var(--warning-soft) !important;
    color: #92400E !important;
}
.badge.bg-danger, .badge.text-bg-danger {
    background-color: var(--danger-soft) !important;
    color: #B91C1C !important;
}
.badge.bg-secondary, .badge.text-bg-secondary {
    background-color: var(--border-soft) !important;
    color: var(--muted) !important;
}
.badge.bg-dark, .badge.text-bg-dark {
    background-color: var(--navy) !important;
    color: #fff !important;
}

/* ============================================================================
   ALERTES
   ========================================================================= */

.alert {
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--r-md);
    padding: .8rem 1rem;
    font-size: .9rem;
    box-shadow: var(--sh-xs);
}
.alert-primary, .alert-info {
    background-color: var(--blue-50);
    border-color: var(--blue-100);
    border-left-color: var(--blue);
    color: var(--navy);
}
.alert-success {
    background-color: var(--success-soft);
    border-color: #CDEBDA;
    border-left-color: var(--success);
    color: #14532D;
}
.alert-warning {
    background-color: var(--warning-soft);
    border-color: #F6E2BE;
    border-left-color: var(--warning);
    color: #78350F;
}
.alert-danger {
    background-color: var(--danger-soft);
    border-color: #F7D4D4;
    border-left-color: var(--danger);
    color: #7F1D1D;
}
.alert .btn-sm { padding: .3rem .75rem; }

/* ============================================================================
   FORMULAIRES
   ========================================================================= */

.form-label {
    font-weight: 600;
    color: var(--ink);
    font-size: .85rem;
    margin-bottom: 6px;
}

.form-control,
.form-select {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background-color: var(--surface);
    padding: .6rem .8rem;
    font-size: .92rem;
    color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.form-control::placeholder { color: var(--faint); }
.form-control:hover, .form-select:hover { border-color: #CBD5E1; }
.form-control:focus, .form-select:focus {
    border-color: var(--blue);
    box-shadow: var(--ring);
    background-color: var(--surface);
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--border-soft);
    color: var(--muted);
}
.form-control-sm, .form-select-sm { padding: .38rem .6rem; font-size: .85rem; border-radius: var(--r-sm); }
.form-text { color: var(--muted); font-size: .8rem; }

.input-group-text {
    background: var(--border-soft);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: var(--r-md);
    font-size: .88rem;
}

.form-check-input { border-color: #CBD5E1; }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-input:focus { border-color: var(--blue); box-shadow: var(--ring); }
.form-switch .form-check-input:checked { background-color: var(--blue); }

.is-invalid, .form-control.is-invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger); font-size: .8rem; }

/* ============================================================================
   NAV / ONGLETS / MODALES / INFOBULLES
   ========================================================================= */

.nav-tabs { border-bottom: 1px solid var(--border); gap: 2px; }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-weight: 550;
    padding: .6rem .95rem;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--ink); background: var(--border-soft); }
.nav-tabs .nav-link.active {
    color: var(--blue);
    background: transparent;
    border-bottom-color: var(--blue);
}

.nav-pills .nav-link { color: var(--muted); border-radius: var(--r-md); font-weight: 550; }
.nav-pills .nav-link.active { background: var(--blue); color: #fff; }

.modal-content {
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 16px 20px;
}
.modal-title { font-family: var(--font-head); font-weight: 650; color: var(--ink); font-size: 1.05rem; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--border); padding: 14px 20px; }

.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    padding: 6px;
}
.dropdown-item { border-radius: var(--r-sm); font-size: .9rem; padding: .5rem .7rem; color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--blue-50); color: var(--blue-active); }

.tooltip-inner {
    background: var(--ink);
    border-radius: var(--r-sm);
    font-size: .78rem;
    padding: .4rem .6rem;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--ink); }

.progress { background: var(--border-soft); border-radius: var(--r-pill); height: 9px; }
.progress-bar { background: var(--blue); border-radius: var(--r-pill); }

.list-group-item { border-color: var(--border); color: var(--text); }
.list-group-item.active { background: var(--blue); border-color: var(--blue); }

/* SweetAlert2 aligné sur la charte */
.swal2-popup { border-radius: var(--r-xl) !important; font-family: var(--font-body) !important; }
.swal2-title { font-family: var(--font-head) !important; color: var(--ink) !important; }
.swal2-styled.swal2-confirm { background-color: var(--blue) !important; border-radius: var(--r-md) !important; }
.swal2-styled.swal2-cancel { background-color: var(--muted) !important; border-radius: var(--r-md) !important; }

/* ============================================================================
   AUTHENTIFICATION  —  référence de la charte
   ========================================================================= */

body.log {
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(37, 99, 235, .35), transparent 60%),
        linear-gradient(135deg, var(--navy) 0%, var(--navy-ink) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-shell {
    display: flex;
    width: 100%;
    max-width: 940px;
    background: var(--surface);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-xl);
}

.auth-brand {
    flex: 1 1 44%;
    background: var(--grad-brand);
    color: #fff;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Marque cliquable (retour à l'accueil) : garde l'apparence d'origine */
.auth-brand .brand-link {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    transition: opacity .16s ease;
}
.auth-brand .brand-link:hover { opacity: .9; text-decoration: none; }
.auth-brand .brand-link h1 { color: #fff; }

.auth-brand .brand-logo {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .15);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 20px;
}
.auth-brand h1 { font-weight: 800; letter-spacing: .06em; font-size: 1.9rem; margin: 0; }
.auth-brand .tagline { opacity: .9; margin: 8px 0 26px; font-size: .95rem; line-height: 1.5; }
.auth-brand ul { list-style: none; padding: 0; margin: 0; }
.auth-brand li {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; opacity: .95; font-size: .92rem;
}
.auth-brand li i {
    background: rgba(255, 255, 255, .2);
    width: 28px; height: 28px;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    font-size: .8rem;
}

.auth-form {
    flex: 1 1 56%;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-container { background: transparent; box-shadow: none; padding: 0; width: 100%; max-width: 100%; }

@media (max-width: 768px) {
    .auth-shell { flex-direction: column; max-width: 460px; }
    .auth-brand { padding: 30px 28px; }
    .auth-brand ul { display: none; }
    .auth-form { padding: 32px 26px; }
    .login-container { padding: 0; }
}

/* ============================================================================
   COMPOSANTS MÉTIER
   ========================================================================= */

/* Tuiles de statistiques */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    box-shadow: var(--sh-xs);
}
.stat-card.success { border-left-color: var(--success); }
.stat-card.warning { border-left-color: var(--warning); }
.stat-card.danger  { border-left-color: var(--danger); }

.stat-number {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 2px;
}
.stat-label { color: var(--muted); font-weight: 500; font-size: .85rem; }

/* États de stock : teinte douce + filet, jamais d'aplat saturé */
.stock-low {
    background-color: var(--warning-soft) !important;
    box-shadow: inset 3px 0 0 var(--warning);
}
.stock-out {
    background-color: var(--danger-soft) !important;
    box-shadow: inset 3px 0 0 var(--danger);
}
.stock-good {
    background-color: var(--blue-50) !important;
    box-shadow: inset 3px 0 0 var(--blue);
}

/* Sur une ligne déjà teintée, la pastille repasse sur fond blanc pour rester lisible */
.stock-low .badge, .stock-out .badge, .stock-good .badge,
.stock-low td .badge, .stock-out td .badge, .stock-good td .badge {
    background-color: var(--surface) !important;
    box-shadow: inset 0 0 0 1px currentColor;
}

/* ============================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 768px) {
    /* La sidebar devient un panneau superposé, masqué par défaut */
    #sidebar {
        margin-left: -256px;
        box-shadow: var(--sh-lg);
    }
    #sidebar.active {
        min-width: 256px;
        max-width: 256px;
        width: 256px;
        margin-left: 0;
    }
    #sidebar.active .sidebar-label { display: inline; }
    #sidebar.active .nav-link {
        justify-content: flex-start;
        text-align: left;
        padding: 10px 16px;
        margin: 2px 12px;
        gap: 12px;
    }
    #sidebar.active .sidebar-header { justify-content: flex-start; padding: 18px 20px !important; }
    #sidebar.active .sidebar-header h4 { justify-content: flex-start; }
    #sidebar.active .sidebar-footer { text-align: left; }

    #content, #content.active { margin-left: 0; }

    .card-body { padding: 14px; }
    .table tbody td, .table thead th { padding: 10px 12px; }
}

/* ============================================================================
   ANIMATIONS
   ========================================================================= */

.fade-in { animation: fadeIn .4s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.loading {
    display: inline-block;
    width: 20px; height: 20px;
    border: 3px solid var(--border);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Respect des préférences système */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ============================================================================
   IMPRESSION
   ========================================================================= */

@media print {
    #sidebar, #content > .navbar, #sidebarCollapse, .btn, .alert { display: none !important; }
    #content, #content.active { margin-left: 0 !important; }
    .card { box-shadow: none; border: 1px solid #ddd; }
    body { background: #fff; }
}