/* ============================================================
   DESIGN SYSTEM - Gestion Materiel NFC (responsive mobile-first)
   ============================================================ */
:root{
  --bg:#f7f8fa;
  --surface:#ffffff;
  --border:#e6e8ec;
  --text:#1a1d23;
  --text-muted:#6b7280;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --primary-soft:#eef2ff;
  --success:#16a34a;
  --success-soft:#e9f9ee;
  --danger:#dc2626;
  --danger-soft:#fdecec;
  --warning:#d97706;
  --warning-soft:#fef3e2;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --topbar-h:58px;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;background:var(--bg);color:var(--text);}
body{font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom);}
a{color:var(--primary);text-decoration:none;}
code{background:#f1f2f5;padding:2px 6px;border-radius:6px;font-size:12.5px;word-break:break-all;}
button, input, select, textarea{font-family:inherit;}
h1,h2,h3{margin:0 0 8px;}
input, select{border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;font-size:14px;background:var(--surface);color:var(--text);width:100%;}
input:focus, select:focus{outline:2px solid var(--primary-soft);border-color:var(--primary);}
label{font-size:12.5px;color:var(--text-muted);font-weight:600;display:block;margin-top:12px;margin-bottom:4px;}

.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;font-weight:600;transition:.15s;white-space:nowrap;}
.btn:hover{background:var(--bg);}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-danger{background:var(--danger-soft);border-color:var(--danger-soft);color:var(--danger);}
.btn-danger:hover{background:#fbdada;}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px;}
.btn-block{width:100%;}

/* ---------- Auth pages ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#f7f8fa 0%,#eef1f8 100%);padding:16px;}
.auth-card{background:var(--surface);padding:36px 30px;border-radius:var(--radius);box-shadow:var(--shadow);width:100%;max-width:380px;text-align:center;}
.auth-logo{font-size:36px;margin-bottom:6px;}
.auth-card h1{font-size:19px;margin:4px 0 2px;}
.muted{color:var(--text-muted);font-size:13px;margin:0 0 20px;}
.auth-form{display:flex;flex-direction:column;gap:4px;text-align:left;}
.auth-form label{font-size:12.5px;color:var(--text-muted);margin-top:10px;font-weight:600;}
.auth-form input{margin-top:4px;width:100%;}
.alert-error{background:var(--danger-soft);color:var(--danger);padding:10px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:6px;}
.alert-success{background:var(--success-soft);color:var(--success);padding:10px;border-radius:var(--radius-sm);font-size:13px;margin-bottom:6px;}

/* ---------- Layout / Topbar ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:var(--topbar-h);position:sticky;top:0;z-index:46;}
body.nav-locked .topbar{ position: static; }
.topbar-left{display:flex;align-items:center;gap:18px;min-width:0;}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;white-space:nowrap;}
.brand .emoji{font-size:20px;}
.burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:6px;}
.topnav{display:flex;gap:4px;flex-wrap:wrap;}
.topnav button{background:transparent;border:none;color:var(--text-muted);padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:13.5px;font-weight:500;transition:.15s;white-space:nowrap;}
.topnav button:hover{background:var(--bg);color:var(--text);}
.topnav button.active{background:var(--primary-soft);color:var(--primary-dark);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.org-select{border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;background:var(--surface);max-width:180px;}
.user-chip{font-size:13px;color:var(--text-muted);white-space:nowrap;}
.logout-link{font-size:13px;color:var(--danger);font-weight:600;}

main.container{max-width:1100px;margin:0 auto;padding:24px 20px 60px;}
.hidden{display:none !important;}

/* ---------- Cards / KPIs ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.kpi .val{font-size:26px;font-weight:700;}
.kpi .lbl{font-size:12.5px;color:var(--text-muted);margin-top:4px;}

/* ---------- Toolbar / filtres ---------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.toolbar input, .toolbar select{width:auto;min-width:140px;flex:1;}
.spacer{flex:1;}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;}
th{text-align:left;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
td{padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;}
tr:last-child td{border-bottom:none;}
.empty-row td{text-align:center;color:var(--text-muted);padding:24px;white-space:normal;}

.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;}
.badge-ok{background:var(--success-soft);color:var(--success);}
.badge-warn{background:var(--warning-soft);color:var(--warning);}
.badge-danger{background:var(--danger-soft);color:var(--danger);}
.badge-neutral{background:var(--bg);color:var(--text-muted);}

.stock-actions{display:inline-flex;gap:4px;align-items:center;}
.stock-actions button{width:28px;height:28px;border-radius:50%;padding:0;font-size:15px;line-height:1;}

/* ---------- Modales ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(16,20,30,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;}
.modal{background:var(--surface);border-radius:var(--radius);padding:26px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.2);}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;}

.nfc-input-group{display:flex;gap:8px;}
.nfc-input-group input{flex:1;}
.nfc-scan-btn{white-space:nowrap;}
.nfc-status{font-size:12.5px;color:var(--text-muted);margin:6px 0 0;min-height:16px;}
.nfc-status.err{color:var(--danger);}
.nfc-status.ok{color:var(--success);}

.scan-hero{text-align:center;padding:30px 20px;}
.scan-hero .icon{font-size:48px;margin-bottom:10px;}
.scan-result{margin-top:18px;}


/* ============================================================
   AJOUTS v5 : menu mobile corrigé, scanner code-barres, cartes mobiles
   (le reste du design desktop existant n'est pas modifié)
   ============================================================ */

/* Overlay derrière le menu mobile */
.nav-overlay{position:fixed;inset:0;background:rgba(16,20,30,.4);z-index:45;display:none;}
.nav-overlay.show{display:block;}
body.nav-locked{overflow:hidden;}

/* Segmented control (choix cible / mode du scanner) */
.scan-choice-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:18px 0;}
.scan-choice-group{display:flex;flex-direction:column;gap:6px;align-items:center;}
.scan-choice-label{font-size:12px;color:var(--text-muted);font-weight:600;}
.segmented{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:3px;background:var(--bg);}
.seg-btn{border:none;background:transparent;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
.seg-btn.active{background:var(--primary);color:#fff;}
.scan-mode-panel{margin-top:6px;}

/* Zone vidéo scan code-barres */
.barcode-video-wrap{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.barcode-video-wrap video{width:100%;max-width:360px;border-radius:var(--radius);background:#000;}
.field-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.field-row input{flex:1;min-width:120px;}

/* Cartes mobiles (remplacent les tableaux larges sur petit écran) */
.cards-mobile{display:none;}
.mobile-card{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;margin-bottom:10px;background:var(--surface);}
.mobile-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;}
.mobile-card-rows{display:flex;flex-direction:column;gap:4px;font-size:13px;margin-bottom:8px;}
.mobile-card-rows .muted{font-size:11.5px;display:inline-block;min-width:100px;}
.mobile-card-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}

/* ---------- Responsive corrigé (remplace le comportement précédent du menu) ---------- */
@media (max-width: 860px){
  .topbar{padding:0 12px;}
  .topbar-left{gap:10px;}
  .topbar-right{gap:8px;}
  .topbar-right .user-chip{display:none;}
  .topbar-right .btn-sm{display:none;}
  .topbar-right .logout-link{display:none;}
  .org-select{max-width:110px;font-size:12px;}

  .burger{
    display:inline-flex; align-items:center; justify-content:center;
    order:99; margin-left:4px;
  }

  .topnav{
    position:fixed; top:0; right:0; bottom:0;
    width:78vw; max-width:300px;
    background:var(--surface);
    flex-direction:column; align-items:stretch; gap:2px;
    padding:70px 10px 20px;
    box-shadow:-8px 0 24px rgba(0,0,0,.12);
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:50;
    overflow-y:auto;
  }
  .topnav.open{transform:translateX(0);}
  .topnav button{
    text-align:left;width:100%;padding:13px 14px;border-radius:var(--radius-sm);
    display:flex;align-items:center;gap:10px;font-size:14.5px;
  }
  .topnav button.active{background:var(--primary-soft);color:var(--primary-dark);font-weight:700;}
  .topnav button::before{content:attr(data-icon);font-size:16px;}

  main.container{padding:16px 14px 90px;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .card{padding:16px;}
  .modal{padding:20px;}

  /* Sur mobile : cartes au lieu de tableaux larges */
  .table-scroll{display:none;}
  .cards-mobile{display:block;}

  .scan-choice-row{gap:14px;}
  .segmented{flex-wrap:wrap;}
}

@media (max-width: 480px){
  .kpis{grid-template-columns:1fr 1fr;}
  .kpi .val{font-size:20px;}
  .auth-card{padding:28px 22px;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .toolbar > *{width:100%;flex:none;}
  .card-header{flex-direction:column;align-items:stretch;}
  .nfc-input-group{flex-direction:column;}
  .field-row{flex-direction:column;align-items:stretch;}
  .topnav{width:86vw;}
}


/* ============================================================
   AJOUTS v6 : Tableau de bord / statistiques + responsive complet
   (pas de changement visuel sur le desktop hors nouvelle page dashboard)
   ============================================================ */

.dash-filters{gap:10px;flex-wrap:wrap;}
.dash-filters select{flex:1;min-width:140px;}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-top:16px;}
.dash-chart-card h2{margin-bottom:10px;font-size:15px;}
.chart-wrap{position:relative;height:280px;}
.chart-wrap-small{height:220px;}

.top-list{display:flex;flex-direction:column;gap:10px;}
.top-item-row{display:flex;flex-direction:column;gap:4px;}
.top-item-info{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13.5px;}
.top-item-info code{font-size:11.5px;color:var(--text-muted);}
.top-item-bar-wrap{position:relative;background:var(--bg);border-radius:6px;height:20px;overflow:hidden;}
.top-item-bar{background:var(--primary);height:100%;border-radius:6px;transition:width .3s;}
.top-item-qty{position:absolute;right:8px;top:0;font-size:11.5px;line-height:20px;font-weight:700;color:var(--text);}

/* ---------- Responsive general etendu (tableaux, formulaires, modales, boutons, scans, stats) ---------- */
@media (max-width: 860px){
  .dash-grid{grid-template-columns:1fr;}
  .chart-wrap, .chart-wrap-small{height:240px;}

  /* Boutons et champs plus grands, faciles au doigt */
  .btn{padding:11px 16px;font-size:14px;min-height:42px;}
  .btn-sm{padding:9px 12px;font-size:13px;min-height:38px;}
  input, select, textarea{padding:11px 12px;font-size:14.5px;min-height:42px;}
  .seg-btn{padding:9px 14px;min-height:38px;}

  /* Modales plein ecran-friendly, scrollables, sans debordement */
  .modal-bg{padding:0;align-items:flex-end;}
  .modal{
    width:100%; max-width:100%; max-height:92vh; overflow-y:auto;
    border-radius:16px 16px 0 0; padding:20px 16px 24px;
  }
  .modal-actions{position:sticky;bottom:-24px;background:var(--surface);padding-top:10px;margin-top:14px;}

  /* Toolbar / recherche pleine largeur, pas de debordement horizontal */
  .toolbar{gap:10px;}
  .toolbar input, .toolbar select{width:100%;}

  /* Empeche tout debordement horizontal global */
  body, .container, main.container{max-width:100vw;overflow-x:hidden;}
  /* .data-table garde sa largeur naturelle : les tableaux sont masques (display:none) sur mobile, remplaces par .cards-mobile, donc aucun min-width ne doit forcer de scroll horizontal ici */

  /* Fiches article / cartes : zones tactiles confortables */
  .mobile-card{padding:14px;}
  .mobile-card-actions .btn{flex:1;}
  .stock-actions button{width:38px;height:38px;font-size:16px;}

  /* Segmented / filtres dashboard empiles proprement */
  .scan-choice-row{flex-direction:column;align-items:stretch;}
  .scan-choice-group{align-items:stretch;}
  .segmented{justify-content:center;}
}

@media (max-width: 480px){
  .dash-filters select{min-width:100%;}
  .chart-wrap, .chart-wrap-small{height:220px;}
  .top-item-info{flex-direction:column;align-items:flex-start;gap:2px;}
}