/* ...existing code... */

/* Styles généraux */
:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0f4c81;
  --accent-2:#5b21b6;
  --line:#e6e9ef;
  --text:#0b1220;
  --shadow: 0 8px 24px rgba(16,24,40,0.06);
  --success:#16a34a;
  --danger:#ef4444;
  --radius:10px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Conteneur */
.wrapper{max-width:1100px;margin:24px auto;padding:18px}
h1{margin:0 0 12px;font-size:20px;color:var(--accent)}
nav{margin-bottom:14px}
nav a{margin-right:12px;color:var(--accent-2);font-weight:600}

/* Cards / KPI */
.cards{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);padding:14px;border-radius:var(--radius);min-width:180px;box-shadow:var(--shadow);flex:1}
.card h3{margin:0 0 8px 0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px}
.card .value{font-size:20px;font-weight:700;color:var(--accent)}
.card small{display:block;color:var(--muted);margin-top:6px}

/* Layout sections */
.section-flex{display:flex;gap:18px;align-items:flex-start}
.section-flex > div{background:var(--card);padding:12px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 4px 12px rgba(16,24,40,0.03)}
.section-flex h2{margin:0 0 12px 0;font-size:15px;color:var(--muted)}

/* Tableaux */
.table-compact{width:100%;border-collapse:collapse}
.table-compact th,.table-compact td{border:1px solid #eee;padding:8px;text-align:left;font-size:14px}
.table-compact th{background:#fafafa;color:var(--muted);font-weight:600}
.table-compact tr:nth-child(even){background:#fbfdff}

/* Formulaires */
form{display:block;margin:6px 0}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.form-row .form-field{flex:1;min-width:160px}
input[type="text"],input[type="number"],input[type="date"],select,textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);
}
textarea{min-height:100px;resize:vertical}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}

/* Boutons */
.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--accent)}
.btn-danger{background:var(--danger);color:#fff}

/* Helpers */
.kv{display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px;color:var(--muted)}

/* Responsive */
@media (max-width:880px){
  .section-flex{flex-direction:column}
  .cards{flex-direction:column}
  .card{min-width:100%}
}

/* Tiny printable adjustments */
@media print{
  body{background:#fff;color:#000}
  nav, .btn, .toolbar{display:none}
  .card{box-shadow:none;border:1px solid #ddd}
}



  .layout{display:flex;min-height:100vh;background:var(--bg)}
  .sidebar{
    width:var(--sidebar-w);
    background:#0f172a;
    color:#fff;
    padding:18px 12px;
    box-shadow:2px 0 8px rgba(2,6,23,.08);
    display:flex;flex-direction:column;gap:12px;transition:width .22s ease;
  }
  .sidebar.collapsed{width:var(--sidebar-collapsed-w)}
  .sidebar .brand{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px}
  .brand .logo{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#60a5fa);display:flex;align-items:center;justify-content:center;font-weight:700}
  .brand .title{font-weight:700;font-size:16px}
  .sidebar.collapsed .title{display:none}
  .nav-section{margin-top:6px}
  .nav-link{
    display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:rgba(255,255,255,.95);text-decoration:none;font-weight:600;
  }
  .nav-link:hover{background:rgba(255,255,255,0.04)}
  .nav-link .icon{width:20px;text-align:center;color:#93c5fd}
  .nav-divider{height:1px;background:rgba(255,255,255,0.06);margin:8px 0;border-radius:2px}
  .sidebar .user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.03)}
  .user .avatar{width:40px;height:40px;border-radius:8px;background:#fff;color:#0f172a;display:flex;align-items:center;justify-content:center;font-weight:700}
  .sidebar.collapsed .user .name{display:none}
  .sidebar .search{display:flex;gap:8px}
  .sidebar .search input{flex:1;padding:8px;border-radius:8px;border:none;background:rgba(255,255,255,0.06);color:#fff}
  .content{flex:1;padding:18px;overflow:auto}
  .topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .btn-toggle{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:8px;border-radius:8px;cursor:pointer}
  /* responsive */
  .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:30}
  @media (max-width:900px){
    .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .22s ease,width .22s}
    .sidebar.open{transform:translateX(0)}
    .mobile-overlay{display:none}
    .mobile-overlay.active{display:block}
    .content{padding:12px}
  }



      /* Table + layout improvements (conserve la structure modal existante) */
   
    .container{max-width:1280px;margin:28px auto;padding:0 18px}
    h1{font-size:20px;margin:0 0 14px;color:#111827}
    .toolbar{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
    .toolbar .left{display:flex;gap:8px;align-items:center;flex:1}
    .toolbar .right{display:flex;gap:8px;align-items:center}

    .search{padding:10px 12px;border-radius:10px;border:1px solid #e6e9ef;min-width:280px;background:#fff}
    .select{padding:8px 10px;border-radius:8px;border:1px solid #e6e9ef;background:#fff}
    .btn{padding:8px 10px;border-radius:10px;border:0;cursor:pointer}
    .btn-primary{background:var(--accent);color:#fff}
    .btn-ghost{background:transparent;border:1px solid #e6e9ef;color:#111827}
    .btn-icon{background:#fff;border:1px solid #e6e9ef;padding:6px;border-radius:8px}

    .card{background:var(--card);border-radius:12px;box-shadow:0 8px 20px rgba(16,24,40,0.04);padding:12px}
    table.products{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
    table.products thead th{padding:12px 10px;text-align:left;color:#374151;font-weight:700;border-bottom:1px solid #eef2f7;cursor:pointer;user-select:none}
    table.products tbody td{padding:12px 10px;border-bottom:1px solid #f3f6fa;vertical-align:middle;color:#111827}
    table.products tbody tr:hover{background:linear-gradient(90deg, rgba(11,116,255,0.03), rgba(11,116,255,0.015))}

    .thumb{width:72px;height:56px;object-fit:cover;border-radius:8px;display:block}
    .col-sku{width:140px;color:var(--muted)}
    .col-name{width:44%}
    .col-qty{text-align:center;width:90px}
    .col-price{text-align:right;width:120px}
    .col-actions{text-align:center;width:140px}

    .actions-group{display:flex;gap:8px;justify-content:center}
    .badge{padding:4px 8px;border-radius:999px;font-size:12px;background:#eef2ff;color:var(--accent)}

    /* sort indicator */
    th.asc::after, th.desc::after{content:'';display:inline-block;margin-left:8px;border:6px solid transparent}
    th.asc::after{border-bottom-color:var(--accent);transform:translateY(-4px)}
    th.desc::after{border-top-color:var(--accent);transform:translateY(4px)}

    @media (max-width:900px){
      .col-sku{display:none}
      .col-name{width:60%}
      .thumb{width:56px;height:44px}
    }