/* ===================================================
   SMART-COMPTA UI
   Version 1.0
   =================================================== */

:root{

    /* Couleurs principales */
    --primary:#667eea;
    --primary-dark:#5a67d8;
    --secondary:#764ba2;

    /* Couleurs métier */
    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;
    --info:#0ea5e9;

    /* Couleurs interface */
    --background:#f5f7fa;
    --surface:#ffffff;

    --text:#2d3748;
    --text-light:#718096;

    --border:#e2e8f0;

    /* Ombres */
    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow:0 8px 24px rgba(0,0,0,.08);
    --shadow-lg:0 20px 60px rgba(0,0,0,.15);

    /* Arrondis */
    --radius-sm:8px;
    --radius:14px;
    --radius-lg:18px;

    /* Animations */
    --transition:.25s ease;
}

/* ============================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background:var(--background);

    color:var(--text);

    font-size:14px;

    line-height:1.5;
}

/* ============================= */

h1{
    font-size:28px;
    font-weight:700;
}

h2{
    font-size:24px;
    font-weight:700;
}

h3{
    font-size:20px;
    font-weight:600;
}

h4{
    font-size:18px;
    font-weight:600;
}

p{
    color:var(--text-light);
}

/* ============================= */

.container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:30px 20px;
}

/* ============================= */

.card{
    background:var(--surface);
    padding:25px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
    margin-bottom:20px;
}

.card:hover{

    transform:translateY(-2px);
}

/* ============================= */

.hidden{
    display:none;
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

.text-success{
    color:var(--success);
}

.text-danger{
    color:var(--danger);
}

.text-warning{
    color:var(--warning);
}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}

.flex{
    display:flex;
}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

/* Fond des cartes */

.stat-primary{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f4f7ff 100%
    );
}

.stat-info{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f2fbff 100%
    );
}

.stat-warning{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff9ef 100%
    );
}

.stat-danger{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #fff5f5 100%
    );
}

.stat-success{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #f3fcf6 100%
    );
}

.stat-success-dark{
    background:linear-gradient(
        180deg,
        #ffffff 0%,
        #eefbf1 100%
    );
}

/* =====================================================
   SMART-COMPTA - LOGIN
===================================================== */

.login-page{
 margin:0;

 min-height:100vh;

 display:flex;
 align-items:center;
 justify-content:center;

 padding:32px;

 background:#f4f6fb;

 color:#1e293b;

 font-family:
  "Segoe UI",
  Arial,
  sans-serif;
}

.login-page *,
.login-page *::before,
.login-page *::after{
 box-sizing:border-box;
}

 .login-shell{
  width:min(1100px,100%);
  min-height:650px;

  display:grid;
  grid-template-columns:
   minmax(0,1.15fr)
   minmax(380px,.85fr);

  background:#fff;

  border-radius:24px;

  overflow:hidden;

  box-shadow:
   0 25px 70px
   rgba(15,23,42,.14);
 }

 /* ================================================
    BRANDING
 ================================================= */

 .login-brand{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  padding:52px;

  overflow:hidden;

  color:#fff;

  background:
   linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
   );
 }

 .login-brand::before{
  content:"";

  position:absolute;
  width:380px;
  height:380px;

  right:-160px;
  top:-150px;

  border-radius:50%;

  background:
   rgba(255,255,255,.07);
 }

.sidebar-brand-image{
    width:52px;
    height:52px;

    flex:0 0 52px;

    display:block;

    object-fit:contain;
    object-position:center;
}

.sidebar-brand-text{
    min-width:0;
    flex:1;
}

 .login-brand::after{
  content:"";

  position:absolute;
  width:300px;
  height:300px;

  left:-160px;
  bottom:-160px;

  border-radius:50%;

  background:
   rgba(255,255,255,.06);
 }

 .login-brand-content,
 .login-brand-footer{
  position:relative;
  z-index:1;
 }

 .login-logo{
  width:110px;
  height:110px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:28px;
 }

 .login-logo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
 }

 .login-brand h1{
  margin:0;

  font-size:36px;
  font-weight:750;

  letter-spacing:-.8px;
 }

 .login-brand-subtitle{
  margin-top:12px;

  max-width:480px;

  font-size:17px;
  line-height:1.55;

  color:
   rgba(255,255,255,.88);
 }

 .login-capabilities{
  display:grid;
  grid-template-columns:
   repeat(2,minmax(0,1fr));

  gap:10px;

  margin-top:36px;
 }

 .login-capability{
  display:flex;
  align-items:center;
  gap:10px;

  min-height:46px;

  padding:10px 12px;

  border:
   1px solid
   rgba(255,255,255,.18);

  border-radius:11px;

  background:
   rgba(255,255,255,.09);

  color:
   rgba(255,255,255,.94);

  font-size:12px;
  font-weight:600;
 }

 .login-capability i{
  width:18px;

  color:#fff;

  text-align:center;

  font-size:14px;
 }

 .login-brand-footer{
  display:flex;
  align-items:center;
  gap:8px;

  margin-top:35px;

  color:
   rgba(255,255,255,.70);

  font-size:11px;
 }

 .login-brand-footer i{
  color:#a7f3d0;
 }

 /* ================================================
    CONNEXION
 ================================================= */

 .login-panel{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:55px 50px;

  background:#fff;
 }

 .login-form-wrapper{
  width:100%;
  max-width:390px;
 }

 .login-eyebrow{
  color:#667eea;

  font-size:11px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;
 }

 .login-form-wrapper h2{
  margin:
   8px 0 8px;

  color:#172033;

  font-size:29px;
  font-weight:750;

  letter-spacing:-.5px;
 }

 .login-intro{
  margin:
   0 0 30px;

  color:#64748b;

  font-size:13px;
  line-height:1.5;
 }

 .login-field{
  margin-bottom:18px;
 }

 .login-field label{
  display:block;

  margin-bottom:7px;

  color:#475569;

  font-size:12px;
  font-weight:650;
 }

 .login-input{
  position:relative;
 }

 .login-input > i{
  position:absolute;

  left:15px;
  top:50%;

  transform:
   translateY(-50%);

  color:#94a3b8;

  font-size:14px;

  pointer-events:none;
 }

 .login-input input{
  width:100%;
  height:48px;

  padding:
   0 45px
   0 43px;

  border:
   1px solid #dfe5ee;

  border-radius:11px;

  background:#fff;

  color:#1e293b;

  font-size:14px;

  outline:none;

  transition:.2s;
 }

 .login-input input::placeholder{
  color:#b0b8c5;
 }

 .login-input input:focus{
  border-color:#667eea;

  box-shadow:
   0 0 0 3px
   rgba(102,126,234,.10);
 }

 .password-toggle{
  position:absolute;

  right:8px;
  top:50%;

  transform:
   translateY(-50%);

  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;

  border:0;

  border-radius:8px;

  background:transparent;

  color:#94a3b8;

  cursor:pointer;
 }

 .password-toggle:hover{
  background:#f1f5f9;
  color:#667eea;
 }

 .login-submit{
  width:100%;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  margin-top:24px;

  border:0;
  border-radius:11px;

  color:#fff;

  background:
   linear-gradient(
    135deg,
    #667eea,
    #764ba2
   );

  font-size:14px;
  font-weight:700;

  cursor:pointer;

  transition:.2s;
 }

 .login-submit:hover{
  transform:
   translateY(-1px);

  box-shadow:
   0 8px 20px
   rgba(102,126,234,.25);
 }

 .login-submit:disabled{
  opacity:.65;

  cursor:not-allowed;

  transform:none;

  box-shadow:none;
 }

 .login-security{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;

  margin-top:18px;

  color:#94a3b8;

  font-size:10px;
 }

 .login-security i{
  color:#16a34a;
 }

 .login-message{
  margin-top:16px;
 }

 .login-error,
 .login-success{
  padding:11px 12px;

  border-radius:9px;

  font-size:12px;
  line-height:1.4;
 }

 .login-error{
  border-left:
   3px solid #dc2626;

  background:#fef2f2;
  color:#b91c1c;
 }

 .login-success{
  border-left:
   3px solid #16a34a;

  background:#f0fdf4;
  color:#15803d;
 }

 .login-version{
  margin-top:28px;

  color:#b0b8c5;

  text-align:center;

  font-size:10px;
 }

 /* Phase 60quater (correction 4) : bouton « Réglage
    réseau » de la page de connexion. Invisible par
    défaut dans l'app de bureau ; login.js retire
    l'attribut hidden UNIQUEMENT dans le client LAN
    (open_network_settings présent dans son API
    pywebview). [hidden]{display:none} remporte sur
    display:flex pour que le garde-fou tienne. */
 .login-network-settings{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;

  width:100%;

  margin-top:14px;

  padding:11px;

  border:1px dashed #cbd5e1;
  border-radius:9px;

  background:#f8fafc;
  color:#475569;

  font-size:13px;
  font-weight:600;

  cursor:pointer;

  transition:all .2s ease;
 }

 .login-network-settings:hover{
  border-color:#667eea;
  background:#eef1ff;
  color:#4f6bed;
 }

 .login-network-settings i{
  flex-shrink:0;
 }

 .login-network-settings[hidden]{
  display:none;
 }

 @media(max-width:850px){
  body{
   padding:18px;
  }

  .login-shell{
   grid-template-columns:1fr;
  }

  .login-brand{
   padding:35px;
  }

  .login-brand-footer{
   display:none;
  }

  .login-capabilities{
   margin-top:25px;
  }

  .login-panel{
   padding:40px 30px;
  }
 }

 @media(max-width:500px){
  body{
   padding:0;
  }

  .login-shell{
   min-height:100vh;

   border-radius:0;
  }

  .login-brand{
   padding:28px 24px;
  }

  .login-logo{
   width:80px;
   height:80px;

   margin-bottom:18px;
  }

  .login-brand h1{
   font-size:28px;
  }

  .login-capabilities{
   grid-template-columns:1fr 1fr;
  }

  .login-panel{
   padding:36px 24px;
  }
 }

/* ===================================================
   NAVBAR
   =================================================== */

.navbar{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:white;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 35px;

    box-shadow:var(--shadow);

    position:sticky;

    top:0;

    z-index:1000;
}

.navbar h1{

    font-size:24px;

    color:white;

    cursor:pointer;

    letter-spacing:.5px;

    transition:var(--transition);
}

.navbar h1:hover{

    opacity:.85;
}

.nav-links{

    display:flex;

    align-items:center;

    gap:10px;
}

.nav-links a{

    color:white;

    text-decoration:none;

    padding:10px 16px;

    border-radius:10px;

    transition:var(--transition);

    font-weight:500;
}

.nav-links a:hover{

    background:rgba(255,255,255,.15);
}

.nav-links a.active{

    background:rgba(255,255,255,.22);

    backdrop-filter:blur(8px);
}

.logout-btn{

    background:rgba(255,255,255,.15);

    color:white;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    transition:var(--transition);

    font-weight:600;
}

.logout-btn:hover{

    background:rgba(255,255,255,.25);

    transform:translateY(-1px);
}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border:none;

    border-radius:10px;

    padding:10px 18px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:all .25s ease;

    text-decoration:none;
}

.btn:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);
}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;
}

.btn-success{

    background:var(--success);

    color:white;
}

.btn-danger{

    background:var(--danger);

    color:white;
}

.btn-warning{

    background:var(--warning);

    color:white;
}

.btn-info{

    background:var(--info);

    color:white;
}

.btn-secondary{

    background:#6b7280;

    color:white;
}

.navbar h1 i{

    margin-right:10px;

    font-size:22px;

    opacity:.9;
}

/* ===================================================
   ERP TOOLBAR BUTTONS
=================================================== */

.toolbar-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 20px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:all .25s ease;
    color:#fff;
    min-width:170px;
}

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

.toolbar-btn-primary{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
}

.toolbar-btn-secondary{
    background:linear-gradient(
        135deg,
        #0ea5e9,
        #0284c7
    );
}

.toolbar-btn-warning{
    background:linear-gradient(
        135deg,
        #f59e0b,
        #d97706
    );
    color:#fff;
}

.toolbar-btn-danger{
    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
    color:#fff;
}

/* ===================================================
   STATISTIQUES
   =================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:22px;

    margin:25px 0;
}

.stat-card{

    background:var(--surface);

    border-radius:18px;

    padding:24px;

    box-shadow:var(--shadow);

    transition:all .25s ease;

    position:relative;

    overflow:hidden;
}

.stat-card{
    cursor:pointer !important;
}

.stats-grid .stat-card.active{
    border:3px solid var(--primary);
    box-shadow:0 10px 25px rgba(102,126,234,.25);
}

/* Couleurs des cartes */

.stat-primary::before{
    background:#667eea;
}

.stat-info::before{
    background:#0ea5e9;
}

.stat-warning::before{
    background:#f59e0b;
}

.stat-danger::before{
    background:#dc2626;
}

.stat-success::before{
    background:#16a34a;
}

.stat-success-dark::before{
    background:#15803d;
}

/* Icônes */

.stat-primary .stat-icon{
    background:rgba(102,126,234,.12);
    color:#667eea;
}

.stat-info .stat-icon{
    background:rgba(14,165,233,.12);
    color:#0ea5e9;
}

.stat-warning .stat-icon{
    background:rgba(245,158,11,.12);
    color:#f59e0b;
}

.stat-danger .stat-icon{
    background:rgba(220,38,38,.12);
    color:#dc2626;
}

.stat-success .stat-icon{
    background:rgba(22,163,74,.12);
    color:#16a34a;
}

.stat-success-dark .stat-icon{
    background:rgba(21,128,61,.12);
    color:#15803d;
}

.stat-card:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.stat-card:active{
    transform:scale(.98);
}

.stat-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:5px;

    height:100%;

    background:var(--primary);
}

.stat-icon{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    background:rgba(102,126,234,.12);

    color:var(--primary);

    margin-bottom:15px;
}

.stat-label{

    color:var(--text-light);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:8px;
}

.stat-value{

    font-size:30px;

    font-weight:700;

    color:var(--text);
}

.stat-card::after{

    content:"";

    display:block;

    width:45px;

    height:3px;

    border-radius:20px;

    margin-top:15px;

    background:currentColor;

    opacity:.20;
}

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

table{

    width:100%;

    border-collapse:collapse;

    background:transparent;
}

table thead th{

    position:sticky;

    top:0;

    background:#f8fafc;

    color:#475569;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.4px;

    padding:15px;

    border-bottom:2px solid var(--border);

    z-index:5;
}

table tbody td{

    padding:15px;

    border-bottom:1px solid #edf2f7;

    transition:var(--transition);

    vertical-align:middle;
}

table tbody tr{

    transition:var(--transition);
}

table tbody tr:hover{

    background:#f8fbff;
}

table tbody tr:hover td{
    filter:brightness(.98);
}

/* ===================================================
   UTILITAIRES
   =================================================== */

.flex{
    display:flex;
}

.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.wrap{
    flex-wrap:wrap;
}

.gap-5{
    gap:5px;
}

.gap-10{
    gap:10px;
}

.gap-15{
    gap:15px;
}

.gap-20{
    gap:20px;
}

.w-100{
    width:100%;
}

.text-right{
    text-align:right;
}

.text-center{
    text-align:center;
}

.text-success{
    color:var(--success);
}

.text-danger{
    color:var(--danger);
}

.text-warning{
    color:var(--warning);
}

.text-muted{
    color:var(--text-light);
}

.fw-bold{
    font-weight:700;
}

.nowrap{
    white-space:nowrap;
}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}

.p-10{padding:10px;}
.p-15{padding:15px;}
.p-20{padding:20px;}

/* ===================================================
   SMART-COMPTA SIDEBAR
   =================================================== */

.app-layout{
    display:flex;
    min-height:100vh;
    background:var(--background);
}

.sidebar{

    width:240px;

    background:linear-gradient(
        180deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    display:flex;
    flex-direction:column;

    position:fixed;

    top:0;
    left:0;

    bottom:0;

    box-shadow:var(--shadow-lg);

    z-index:1000;
}

/* ==========================================
   LOGO SIDEBAR
========================================== */

.sidebar-header-top{
    width:100%;
    display:flex;
    align-items:center;
}

.sidebar-header{

    position:relative;

    padding:28px 20px 20px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:110px;
}

.sidebar-logo{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding-right:12px;
}

.logo-title{
    margin:0;

    color:#fff;

    white-space:nowrap;

    font-size:18px;
    font-weight:750;

    letter-spacing:-.4px;
}

.logo-subtitle{
    margin-top:3px;

    color:rgba(255,255,255,.78);

    font-size:12px;
}

.logo-version{

    margin-top:2px;

    color:rgba(255,255,255,.60);

    font-size:11px;
}

/* ==========================================
   MENU ERP
========================================== */

.sidebar-menu{

    list-style:none;

    margin:10px 0;

    padding:0 14px;

    flex:1;
}

.sidebar-menu li{

    margin-bottom:8px;
}

.sidebar-menu a{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    color:rgba(255,255,255,.92);

    text-decoration:none;

    padding:13px 16px;

    border-radius:14px;

    transition:all .25s ease;

    overflow:hidden;
}

.sidebar-menu a::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:4px;

    height:0;

    border-radius:20px;

    background:white;

    transition:.25s;
}

.sidebar-menu a:hover{

    background:rgba(255,255,255,.10);

    transform:translateX(4px);
}

.sidebar-menu a:hover::before{

    height:26px;
}

.sidebar-menu a.active{

    background:rgba(255,255,255,.18);

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.08);
}

.sidebar-menu a.active::before{

    height:34px;
}

.sidebar-menu i{

    width:22px;

    text-align:center;

    font-size:17px;

    transition:.25s;
}

.sidebar-menu a:hover i{

    transform:scale(1.15);
}

.sidebar-divider{

    height:1px;

    margin:0 20px;

    background:

        rgba(255,255,255,.15);
}

.main-content{
    flex:1;
    margin-left:240px;
    padding:35px 40px;
    transition:all .25s ease;
}

/* ===================================================
   PAGE HEADER
   =================================================== */

.page-title{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:25px;
}

.page-title-left h1{

    font-size:30px;

    color:var(--text);

    margin-bottom:6px;
    text-align:left;
}

.page-title-left p{

    color:var(--text-light);

    font-size:15px;
    text-align:left;
}

.page-actions{

    display:flex;

    gap:10px;

    align-items:center;
}

.breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

    color:var(--text-light);

    font-size:13px;
}

.breadcrumb a{

    text-decoration:none;

    color:var(--text-light);

    transition:.2s;
}

.breadcrumb a:hover{

    color:var(--primary);
}

/* ===================================================
   TOPBAR
   =================================================== */

.topbar{

    background:var(--surface);

    padding:25px 35px;

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    display:flex;

    justify-content:flex-start;

    align-items:flex-start;

    text-align:left;
}

.page-title-main{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    background-clip:text;

    font-size:42px;

    font-weight:700;
}

.page-subtitle{

    margin-top:6px;

    color:var(--text-light);

    font-size:15px;
}

/* ===================================================
   SIDEBAR FOOTER
   =================================================== */

.sidebar-footer .btn{

    width:100%;

    margin-top:0;
}

.user-status{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;
}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:0 0 10px rgba(34,197,94,.6);
}

.user-label{

    font-size:12px;

    color:rgba(255,255,255,.75);
}

.user-name{

    font-size:14px;

    font-weight:600;

    color:white;
}

.status-dot{

    width:11px;

    height:11px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:

        0 0 12px
        rgba(34,197,94,.7);

    animation:

        pulse 2s infinite;
}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;
    }

    50%{

        transform:scale(1.3);

        opacity:.65;
    }

    100%{

        transform:scale(1);

        opacity:1;
    }
}


.sidebar-toggle{
    position:absolute;

    top:50%;
    right:-17px;

    transform:translateY(-50%);

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    background:#fff;
    color:var(--primary);

    border:1px solid #e2e8f0;
    border-radius:50%;

    box-shadow:
        0 4px 12px
        rgba(15,23,42,.16);

    cursor:pointer;

    z-index:10;

    transition:
        background .2s,
        color .2s,
        transform .2s;
}

.sidebar-toggle i{
    font-size:11px;
}

.sidebar-toggle:hover{
    background:var(--primary);
    color:#fff;

    transform:
        translateY(-50%)
        scale(1.08);
}

.sidebar.collapsed{

    width:78px;
}

.sidebar.collapsed .logo-title,
.sidebar.collapsed .logo-subtitle,
.sidebar.collapsed .logo-version,
.sidebar.collapsed .user-label,
.sidebar.collapsed .user-name,
.sidebar.collapsed .sidebar-version{

    display:none;
}

.sidebar.collapsed .sidebar-menu span{

    display:none;
}

.sidebar.collapsed .sidebar-menu a{

    justify-content:center;

    padding:14px;
}

.sidebar.collapsed .sidebar-menu i{

    margin:0;
}

.sidebar.collapsed .sidebar-header{
    padding-left:12px;
    padding-right:12px;
}

.sidebar.collapsed .sidebar-logo{
    justify-content:center;
}

.sidebar.collapsed .sidebar-brand-text{
    display:none;
}

.sidebar.collapsed .sidebar-brand-image{
    width:50px;
    height:50px;
    flex-basis:50px;
}

.sidebar.collapsed .sidebar-toggle i{
    transform:rotate(180deg);
}

.sidebar-logout{
    width:100%;
    margin-top:5px;
    margin-bottom:3px;
}

.sidebar-logout i{
    flex-shrink:0;
}

.sidebar.collapsed .sidebar-logout{
    width:44px;
    height:44px;

    margin:0 auto;

    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;
}

.sidebar.collapsed .sidebar-logout-text{
    display:none;
}

.sidebar.collapsed .sidebar-logout i{
    margin:0;
    font-size:16px;
}

.sidebar-menu{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
}

.sidebar > div:last-child{
    flex-shrink:0;

    padding-top:10px !important;
    padding-bottom:12px !important;

    background:transparent;
}

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

.sidebar-menu::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.20);
    border-radius:10px;
}

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

.main-content.expanded{
    margin-left:78px;
    padding:35px 40px;
}

.topbar.expanded{

    margin-left:78px;
}

/* ===================================================
   DOCUMENT TOOLBAR
   =================================================== */

.doc-toolbar{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    width:100%;
    margin:25px 0;
}

.toolbar-right{
    margin-left:auto;
    display:flex;
    gap:12px;
}

.doc-toolbar button{

    min-width:140px;

    height:46px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    color:white;

    font-size:14px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    transition:all .25s ease;

    box-shadow:var(--shadow-sm);
}

.doc-toolbar button:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow);

    filter:brightness(1.05);
}

.doc-toolbar .facture{
    background:#667eea;
}

.doc-toolbar .devis{
    background:#0ea5e9;
}

.doc-toolbar .bl{
    background:#f59e0b;
}

.doc-toolbar .avoir{
    background:#dc2626;
}

.stock-toolbar{
    justify-content:flex-end;
}

/* ==========================================
   SEARCH TOOLBAR
========================================== */

.search-toolbar{

    display:flex;

    gap:15px;

    align-items:center;

    flex-wrap:wrap;
}

.search-box{

    flex:1;

    min-width:320px;

    position:relative;
}

.search-box i{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;
}

.search-box input{

    width:100%;

    padding:12px 14px 12px 42px;

    border:1px solid var(--border);

    border-radius:12px;
}

.search-toolbar select{

    min-width:190px;

    padding:12px;

    border:1px solid var(--border);

    border-radius:12px;

    background:white;
}

/* ===================================================
   LAYOUT
   =================================================== */

.flex{
    display:flex;
}

.flex-column{
    display:flex;
    flex-direction:column;
}

.flex-wrap{
    flex-wrap:wrap;
}

.items-center{
    align-items:center;
}

.items-start{
    align-items:flex-start;
}

.justify-between{
    justify-content:space-between;
}

.justify-center{
    justify-content:center;
}

.justify-end{
    justify-content:flex-end;
}

.gap-5{gap:5px;}
.gap-10{gap:10px;}
.gap-12{gap:12px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}

.w-full{
    width:100%;
}

.max-w-500{
    max-width:500px;
}

.max-w-600{
    max-width:600px;
}

.max-w-1000{
    max-width:1000px;
}

/* ===================================================
   MODAL HEADER
   =================================================== */

.modal-title{

    display:flex;

    align-items:center;

    gap:15px;
}

.modal-icon{

    width:54px;

    height:54px;

    border-radius:14px;

    background:rgba(102,126,234,.12);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;
}

.modal-title h2{

    margin:0;

    color:var(--primary);

    font-size:24px;
}

.modal-title p{

    margin-top:4px;

    font-size:13px;

    color:var(--text-light);
}

/* ===================================================
   MODALES
=================================================== */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:99999;
    overflow-y:auto;
    padding:20px;
}

.modal.active{
    display:flex;
    align-items:center;
    justify-content:center;
}

.modal-content{
    background:var(--surface);
    width:100%;
    border-radius:16px;
    box-shadow:var(--shadow-lg);
    padding:30px;
}

.modal-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid var(--border);
}

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:20px;
    margin-top:20px;
    border-top:1px solid var(--border);
}

.close-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#f8fafc;

    cursor:pointer;

    color:#64748b;

    transition:.25s;
}

.close-btn:hover{

    background:#ef4444;

    color:white;

    transform:rotate(90deg);
}

/* ===================================================
   SECTION TITLE
   =================================================== */

.section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin:28px 0 18px;
    padding-bottom:10px;
    border-bottom:1px solid #eef2f7;
    font-size:15px;
    font-weight:700;
    color:var(--primary);
}

.section-title i{
    color:var(--primary);
    font-size:16px;
}

/* ===================================================
   TOTAUX
   =================================================== */

.totaux{

    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fbff
    );

    border:1px solid var(--border);

    border-radius:16px;

    padding:22px;

    box-shadow:var(--shadow-sm);
}

.totaux-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 0;

    font-size:15px;
}

.totaux-row span:last-child{

    font-weight:600;
}

.totaux-row.total{

    margin-top:12px;

    padding-top:16px;

    border-top:2px dashed var(--border);

    font-size:22px;

    color:var(--primary);

    font-weight:700;
}

.product-search-table{

    width:100%;

    border-collapse:collapse;

    margin-top:15px;
}

.product-search-table thead th{

    background:#f8fafc;

    padding:14px;

    text-align:left;

    border-bottom:2px solid var(--border);
}

.product-search-table tbody td{

    padding:14px;

    border-bottom:1px solid var(--border);
}

.product-search-table tbody tr{

    cursor:pointer;

    transition:.2s;
}

.product-search-table tbody tr:hover{

    background:#eef4ff;
}

/* ===================================================
   TOASTS
   =================================================== */

#toastContainer{

    position:fixed;

    top:20px;

    right:20px;

    z-index:999999;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.toast{

    min-width:320px;

    max-width:420px;

    padding:16px 18px;

    border-radius:14px;

    color:white;

    box-shadow:var(--shadow-lg);

    animation:toastIn .25s ease;

    display:flex;

    align-items:center;

    gap:12px;
    
    overflow:hidden;

}

.toast-hide{

    animation:toastOut .3s forwards;
}

@keyframes toastOut{

    from{

        opacity:1;

        transform:translateX(0);
    }

    to{

        opacity:0;

        transform:translateX(40px);
    }
}

.toast-content{

    flex:1;

    display:flex;

    flex-direction:column;
}

.toast-message{

    font-size:14px;

    font-weight:500;

    line-height:1.4;
}

.toast-progress{

    margin-top:10px;

    height:3px;

    border-radius:20px;

    background:rgba(255,255,255,.35);

    overflow:hidden;

    position:relative;
}

.toast-progress::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    height:100%;

    width:100%;

    background:white;

    animation:toastProgress 4s linear forwards;
}

.toast-icon{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    font-size:18px;

    margin-top:2px;
}

@keyframes toastProgress{

    from{

        width:100%;
    }

    to{

        width:0%;
    }
}

.toast-success{
    background:#16a34a;
}

.toast-error{
    background:#dc2626;
}

.toast-warning{
    background:#f59e0b;
}

.toast-info{
    background:#0ea5e9;
}

.toast i{

    font-size:18px;
}

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(40px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }
}

/* ===================================================
   BADGES GÉNÉRIQUES
=================================================== */

.badge-success{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background:#dcfce7;
    color:#166534;
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    min-width:50px;
}

.badge-danger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background:#fee2e2;
    color:#b91c1c;
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    min-width:70px;
}

/* ===================================================
   INDICATEUR DE STOCK
=================================================== */

.stock-status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:600;
}

.stock-status.ok i{
    color:#22c55e;
}

.stock-status.alert i{
    color:#ef4444;
}

.doc-toolbar.stock-toolbar{
    justify-content:flex-end;
}

.doc-toolbar button:disabled{
    opacity:.55;
    cursor:not-allowed;
    filter:grayscale(.15);
}

.doc-toolbar button:disabled:hover{
    transform:none;
    box-shadow:none;
}

/* ===================================================
   SMART TOOLTIP
=================================================== */

.sc-tooltip{
    position:relative;
    cursor:help;
}

.sc-tooltip::after{
    content:attr(data-tooltip);
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    transform:translateX(-50%);
    background:#1f2937;
    color:#fff;
    padding:8px 12px;
    border-radius:8px;
    font-size:12px;
    font-weight:500;
    line-height:1.4;
    white-space:normal;
    min-width:220px;
    max-width:320px;
    text-align:left;
    opacity:0;
    visibility:hidden;
    transition:all .2s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.20);
    z-index:9999;
}

.sc-tooltip:hover::after{
    opacity:1;
    visibility:visible;
}

/* ===================================================
   CHAMPS CALCULÉS
=================================================== */

.input-calculated{
    background:#f8fafc;
    border:2px solid #e2e8f0;
    color:#334155;
    font-weight:700;
    text-align:right;
}

.input-calculated:focus{
    border-color:#cbd5e1;
    box-shadow:none;
    outline:none;
}

.input-calculated[readonly]{
    cursor:default;
}

/* ===================================================
   ACTIONS ERP
=================================================== */

.actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:nowrap;
}

.actions button{
    min-width:40px;
    width:40px;
    height:36px;
    padding:0;
    border:none;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .25s ease;
}

.actions button i{
    transition:transform .25s ease;
}

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

.actions button:hover i{
    transform:scale(1.10);
}

.actions button.action-labeled{
    width:auto;
    min-width:40px;
    padding:0 10px;
    gap:6px;
}

.actions button.action-labeled i{
    font-size:14px;
}

.actions button.action-labeled span{
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.actions.sav-row-actions{
    flex-wrap:nowrap;
    justify-content:flex-start;
}

.grouped-bl-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    color:var(--text);
    font-size:16px;
    font-weight:700;
}

.grouped-bl-title i{
    color:var(--primary);
}

.grouped-bl-controls{
    display:flex;
    gap:10px;
    margin-bottom:12px;
}

.grouped-bl-controls select{
    flex:1;
    min-width:240px;
}

#groupedBlClient{
    min-width:260px;
}

.grouped-bl-hint{
    color:var(--text-light);
    font-size:13px;
}

/* Combobox client « Facture groupée depuis BL » */
.grouped-bl-client-box{
    position:relative;
    flex:1;
    min-width:240px;
}

.grouped-bl-client-search{
    width:100%;
    padding:9px 12px;
    font-size:14px;
    color:var(--text);
    background:var(--background);
    border:1px solid #e2e6ee;
    border-radius:10px;
    outline:none;
    transition:border-color .15s;
}

.grouped-bl-client-search:focus{
    border-color:var(--primary);
}

.grouped-bl-client-list{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 4px);
    z-index:70;
    max-height:240px;
    overflow-y:auto;
    background:var(--background);
    border:1px solid #e2e6ee;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.grouped-bl-client-item{
    padding:9px 12px;
    cursor:pointer;
    font-size:14px;
    color:var(--text);
}

.grouped-bl-client-item:hover{
    background:#eef1f6;
}

.grouped-bl-client-item.selected{
    background:#e8eafd;
    font-weight:600;
}

.grouped-bl-client-empty{
    padding:9px 12px;
    font-size:13px;
    font-style:italic;
    color:var(--text-light);
}

/* Combobox « Famille » (fiche produit) */
.famille-dropdown{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 4px);
    z-index:60;
    max-height:240px;
    overflow-y:auto;
    background:var(--background);
    border:1px solid #e2e6ee;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.famille-item{
    padding:9px 12px;
    cursor:pointer;
    font-size:14px;
    color:var(--text);
}

.famille-item:hover{
    background:#eef1f6;
}

.famille-item.selected{
    background:#e8eafd;
    font-weight:600;
}

.famille-empty{
    padding:9px 12px;
    font-size:13px;
    font-style:italic;
    color:var(--text-light);
}

.grouped-bl-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    margin-bottom:8px;
    background:var(--background);
    border-radius:10px;
    cursor:pointer;
    transition:background .15s;
}

.grouped-bl-item:hover{
    background:#eef1f6;
}

.grouped-bl-check{
    width:16px;
    height:16px;
    cursor:pointer;
}

.grouped-bl-numero{
    font-weight:700;
    color:var(--primary);
    min-width:120px;
}

.grouped-bl-numero i{
    margin-right:6px;
    font-size:12px;
}

.grouped-bl-date{
    color:var(--text-light);
    font-size:12px;
}

.grouped-bl-total{
    margin-left:auto;
    font-weight:600;
    color:var(--text);
}

.grouped-bl-footer{
    margin-top:16px;
}

.grouped-bl-footer .btn{
    min-width:220px;
}

.module-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
    padding:25px 30px;
    background:white;
    border-radius:18px;
    box-shadow:var(--shadow);
}

.module-header h2{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--primary);
}

.module-header p{
    margin-top:6px;
}

/* ===================================================
   MODULE HEADER
=================================================== */

.module-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
    padding:25px 30px;
    background:var(--surface);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.module-header-left h2{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--primary);
    font-size:30px;
}

.module-header-left h2 i{
    color:var(--primary);
}

.module-header-left p{
    margin-top:8px;
    color:var(--text-light);
    font-size:14px;
}

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

/* ===================================================
   ERP CARDS
=================================================== */

.erp-card{
    background:var(--surface);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.erp-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
}

.erp-card-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--primary);
    font-size:18px;
    font-weight:700;
}

.erp-card-title i{
    color:var(--primary);
}

.erp-card-body{
    padding:22px;
}

.erp-card-footer{
    padding:18px 22px;
    border-top:1px solid var(--border);
    background:#fafbfc;
}

/* ===================================================
   METRIC CARD
=================================================== */

.metric-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.metric-card{
    padding:18px;
    border-radius:14px;
    text-align:center;
    transition:var(--transition);
}

.metric-card:hover{
    transform:translateY(-2px);
}

.metric-card.primary{
    background:#eef2ff;
}

.metric-card.success{
    background:#dcfce7;
}

.metric-card.info{
    background:#dbeafe;
}

.metric-card.danger{
    background:#fee2e2;
}

.metric-card-value{
    margin-top:8px;
    font-size:28px;
    font-weight:700;
    color:var(--text);
}

.metric-card-label{
    font-size:13px;
    color:var(--text-light);
    text-transform:uppercase;
}

/* ===================================================
   INFO LIST
=================================================== */

.info-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.info-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding-bottom:10px;
    border-bottom:1px solid #f1f5f9;
}

.info-label{
    font-weight:600;
    color:var(--text-light);
    min-width:170px;
}

.info-value{
    flex:1;
    font-weight:600;
    color:var(--text);
}

/* ===================================================
   DETAIL PANEL
=================================================== */

.detail-layout{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:25px;
    align-items:start;
}

.detail-info-card{
    background:#f8f9ff;
    padding:20px;
    border-radius:15px;
    border-left:5px solid var(--primary);
}

.detail-history{
    max-height:300px;
    overflow-y:auto;
    border:1px solid #eee;
    border-radius:10px;
    margin-top:10px;
}

.detail-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

/* ===================================================
   ACTION BAR
=================================================== */

.action-bar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.action-bar .btn{
    min-width:160px;
}

/* ===================================================
   CARD TITLE
=================================================== */

.card-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    color:var(--primary);
    font-size:22px;
    font-weight:700;
}

.card-title i{
    color:var(--primary);
}

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

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-bottom:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
    color:var(--text-light);
}

.form-group input,
.form-group select,
.form-group textarea{
    padding:10px;
    border:2px solid var(--border);
    border-radius:10px;
    font-size:14px;
    transition:var(--transition);
    background:#fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(102,126,234,.10);
}

/* ===================================================
   EMPTY STATE
=================================================== */

.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:60px 20px;
    color:var(--text-light);
}

.empty-state i{
    font-size:48px;
    color:#cbd5e1;
    margin-bottom:18px;
}

.empty-state h3{
    margin-bottom:8px;
    color:var(--text);
    font-size:20px;
}

.empty-state p{
    max-width:420px;
    line-height:1.6;
}

/* ===================================================
   PROFILE HEADER
=================================================== */

.profile-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:20px 24px;
    margin-bottom:25px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    border-radius:16px;
}

.profile-title{
    font-size:28px;
    font-weight:700;
}

.profile-subtitle{
    margin-top:6px;
    opacity:.9;
    font-size:14px;
}

.profile-badge{
    padding:8px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    font-weight:600;
    backdrop-filter:blur(6px);
}

.profile-avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
}

.profile-info{
    display:flex;
    align-items:center;
    gap:18px;
}

.profile-balance{
    margin-top:10px;
    font-size:15px;
    font-weight:700;
}

.profile-balance.positive{
    color:#fecaca;
}

.profile-balance.zero{
    color:#bbf7d0;
}

/* ===================================================
   ETAT DES FACTURES
=================================================== */

.invoice-late::before{
    background:#dc2626;
}

.invoice-warning::before{
    background:#f59e0b;
}

.invoice-paid::before{
    background:#16a34a;
}

.invoice-late td{
    background:#fff5f5;
}

.invoice-warning td{
    background:#fffaf0;
}

.invoice-paid td{
    background:#f4fff7;
}

.invoice-late td:first-child,
.invoice-warning td:first-child,
.invoice-paid td:first-child{
    position:relative;
}

.invoice-late td:first-child::before,
.invoice-warning td:first-child::before,
.invoice-paid td:first-child::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:4px;
    border-radius:20px;
}

.invoice-late td:first-child::before{
    background:#dc2626;
}

.invoice-warning td:first-child::before{
    background:#f59e0b;
}

.invoice-paid td:first-child::before{
    background:#16a34a;
}

.invoice-late td:first-child,
.invoice-warning td:first-child,
.invoice-paid td:first-child{
    padding-left:18px;
}

.invoice-partial td{
    background:#eff6ff;
}

.invoice-partial td:first-child{
    position:relative;
    padding-left:18px;
}

.invoice-partial td:first-child::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:4px;
    border-radius:20px;
    background:#2563eb;
}

/* ===================================================
   TABLE SUMMARY
=================================================== */

.table-summary{

    display:flex;
    justify-content:flex-end;
    gap:35px;
    margin-top:20px;
    padding-top:18px;
    border-top:2px solid var(--border);

}

.summary-item{

    display:flex;
    flex-direction:column;
    align-items:flex-end;

}

.summary-item span{

    font-size:12px;
    color:var(--text-light);

}

.summary-item strong{

    margin-top:4px;
    font-size:18px;
    color:var(--primary);

}

/* ===================================================
   CARD HEADER
=================================================== */

.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.card-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--primary);
    font-size:22px;
    font-weight:700;
}

.card-title i{
    color:var(--primary);
}

/* ===================================================
   FORM HELP
=================================================== */

.form-help{
    margin-top:6px;
    font-size:12px;
    color:var(--text-light);
}

/* ===================================================
   CODE-BARRES
=================================================== */

.barcode-text{

    display:inline-flex;
    align-items:center;
    gap:6px;

    font-family:
        "Consolas",
        "Courier New",
        monospace;

    font-size:13px;

    font-weight:600;

    color:#374151;

    letter-spacing:.5px;

}

.barcode-text i{

    color:var(--primary);

    font-size:14px;

}

/* ===================================================
   DASHBOARD - ESPACE DE TRAVAIL
=================================================== */

.workspace-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.workspace-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:22px;
    border-radius:18px;
    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fbff
    );
    text-decoration:none;
    color:inherit;
    transition:var(--transition);
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

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

.workspace-card i{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:rgba(102,126,234,.10);
    color:var(--primary);
    font-size:26px;
}

.workspace-card h3{
    margin:0;
    color:var(--primary);
    font-size:20px;
}

.workspace-card p{
    margin:0;
    color:var(--text-light);
    line-height:1.5;
}

.workspace-card .workspace-footer{
    margin-top:auto;
    padding-top:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--primary);
    font-weight:700;
}

/* ===================================================
   DASHBOARD KPI DETAILS
=================================================== */

.stat-detail{
    margin-top:10px;
    font-size:13px;
    color:var(--text-light);
    font-weight:600;
    min-height:18px;
}

.kpi-revenue{
 border-left-color:#16a34a;
}

.kpi-purchases{
 border-left-color:#f59e0b;
}

.kpi-result{
 border-left-color:#15803d;
}

.kpi-invoices{
 border-left-color:#0ea5e9;
}

.kpi-customers{
 border-left-color:#667eea;
}

.kpi-stock{
 border-left-color:#667eea;
}

.kpi-receivables{
 border-left-color:#dc2626;
}

/* ==========================================
   RECHERCHE GLOBALE
========================================== */

.search-results{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-top:8px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow-lg);
    max-height:420px;
    overflow-y:auto;
    z-index:9999;
}

.search-result-item{
    display:flex;
    gap:14px;
    align-items:center;
    padding:14px 18px;
    cursor:pointer;
    transition:.2s;
    border-bottom:1px solid #f1f5f9;
}

.search-result-item:last-child{
    border-bottom:none;
}

.search-result-item:hover{
    background:#eef4ff;
}

.search-result-icon{
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef2ff;
    color:var(--primary);
}

.search-result-title{
    font-weight:700;
    color:var(--text);
}

.search-result-subtitle{
    font-size:12px;
    color:var(--text-light);
}

.profile-badge i{
    margin-right:8px;
}

/* ===================================================
   DASHBOARD KPI
=================================================== */

.dashboard-kpi-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
    gap:22px;
    margin:25px 0;
    width:100%;
}

.hero-dashboard-panel{
    display:flex;
    flex-direction:column;
    gap:12px;
    align-items:flex-end;
}

.hero-dashboard-panel .profile-badge{
    min-width:220px;
    justify-content:center;
}

.hero-dashboard-panel select{
    background:transparent;
    border:none;
    color:#ffffff;
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    outline:none;
}

.hero-dashboard-panel select option{
    color:#1f2937;
    background:#ffffff;
}

/* =======================================================
   DASHBOARD - HERO
======================================================= */

.dashboard-period{
    position:relative;
    cursor:pointer;
}

.dashboard-period-item i{

    color:#5b5ce2;

}

/* ==========================================================
   DASHBOARD - PERIOD MENU
========================================================== */

.dashboard-period-wrapper{
    position:relative;
    display:inline-block;
}

.dashboard-period{
    cursor:pointer;
}

.dashboard-period-menu{

    position:absolute;

    top:calc(100% + 10px);

    right:0;

    width:240px;

    background:#ffffff;

    border-radius:14px;

    border:1px solid #e5e7eb;

    box-shadow:0 16px 40px rgba(15,23,42,.18);

    overflow:hidden;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(-8px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s;

}

.dashboard-period-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    cursor:pointer;

    color:#334155;

    background:#ffffff;

    transition:background .2s;

}

.dashboard-period-item:hover{

    background:#f8faff;

}

.dashboard-period-item.active{

    background:#eef2ff;

    color:#5b5ce2;

    font-weight:600;

}

.period-check{

    visibility:hidden;

    color:#5b5ce2;

}

.dashboard-period-item.active .period-check{

    visibility:visible;

}

.dashboard-period-menu.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ===================================================
 DASHBOARD - DERNIÈRES ACTIVITÉS
=================================================== */

.dashboard-activity-list{
    max-height:510px;      /* environ 6 activités */
    overflow-y:auto;
    padding-right:6px;
}

.dashboard-activity-list::-webkit-scrollbar{
    width:8px;
}

.dashboard-activity-list::-webkit-scrollbar-thumb{
    background:#d1d5db;
    border-radius:999px;
}

.dashboard-activity-list::-webkit-scrollbar-thumb:hover{
    background:#9ca3af;
}

.dashboard-activity-list::-webkit-scrollbar-track{
    background:transparent;
}

.dashboard-activity{
    cursor:pointer;
    transition:all .2s ease;
}

.dashboard-activity:hover{
    background:#f8fbff;
    border-radius:12px;
    transform:translateX(4px);
}

.badge-warning{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background:#fef3c7;
    color:#92400e;
    font-size:11px;
    font-weight:700;
}

.badge-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:11px;
    font-weight:700;
}

.badge-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 10px;
    border-radius:999px;
    background:#e5e7eb;
    color:#374151;
    font-size:11px;
    font-weight:700;
}

/* =========================================================
   SAV — En-tête fixe du tableau des dossiers
   ========================================================= */

.service-request-table-card {
    overflow: visible;
}

.service-request-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
}