*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);padding:10px}
.container{max-width:520px;margin:auto;background:var(--card);
           padding:18px;border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.5)}

/* Header */
.hdr{display:flex;justify-content:center;align-items:center;margin-bottom:14px;position:relative}
h2{color:var(--text);font-size:19px}

/* Bandeau prochaine livraison */
.livraison-banner{background:var(--primary-dim);border:1px solid var(--primary);
                  border-radius:8px;padding:8px 12px;margin-bottom:14px;
                  font-size:13px;text-align:center;color:var(--text)}
.livraison-banner strong{color:var(--primary);font-weight:700}
.livraison-banner:empty{display:none}

/* Fields row */
.fields-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.field-group label{display:block;font-size:11px;text-transform:uppercase;
                   color:var(--muted);margin-bottom:4px;letter-spacing:.4px}
.field-input{width:100%;padding:10px;background:var(--bg);border:1px solid var(--border);
             border-radius:8px;color:var(--text);font-size:14px}
.field-input:focus{border-color:var(--primary);outline:none}
.field-input[type="date"]{cursor:pointer;padding:10px 12px;font-family:var(--font-mono)}

/* System select */
select{width:100%;padding:11px;background:var(--bg);border:1px solid var(--border);
       border-radius:8px;color:var(--text);font-size:15px;font-weight:600;margin-bottom:16px}

/* Pack de base button */
.btn-pack-base{width:100%;padding:11px;background:var(--primary-dim);border:1px solid var(--primary);border-radius:8px;color:var(--primary);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:16px;transition:all .2s}
.btn-pack-base:active{transform:scale(.98);background:var(--primary);color:#fff}

/* Alerts (stock bas) Accordéon */
.alerts-box{background:var(--red-dim);border:1px solid var(--red);border-radius:8px;
            padding:10px 12px;margin-bottom:14px;font-size:12px}
.alerts-box summary{color:var(--red);font-weight:700;cursor:pointer;outline:none;font-size:13px;}
.alerts-box summary::marker{color:var(--red);}
.alerts-box[open] summary{margin-bottom:8px;border-bottom:1px dashed rgba(229,105,95,.3);padding-bottom:6px;}
.alert-item{color:#f0b3ae;padding:4px 0}

/* Category title */
.cat-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;color:var(--primary);
           margin:22px 0 6px;border-bottom:1px solid var(--border);
           padding-bottom:5px;letter-spacing:.06em;font-weight:600}

/* Item row */
.item-wrap{border-bottom:1px solid var(--border);padding:10px 0}
.item-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.item-desc{flex:1;font-size:14px;line-height:1.4}
.item-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:3px;font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.code-fab{font-style:italic}

/* Stock badges (pastilles façon mockup) */
.badge{font-family:var(--font-mono);padding:3px 9px;border-radius:999px;font-weight:600;font-size:10px;cursor:default;white-space:nowrap}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-orange{background:var(--orange-dim);color:var(--orange)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge.clickable{cursor:pointer}

/* Qty controls */
.controls{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-qty{width:30px;height:30px;border-radius:50%;border:none;
         background:var(--card2);font-size:18px;font-weight:700;color:var(--text);
         display:flex;align-items:center;justify-content:center;line-height:1;
         cursor:pointer;user-select:none;transition:background .1s}
.btn-qty:active{background:var(--border)}
.qty-val{width:36px;text-align:center;font-family:var(--font-mono);font-size:16px;font-weight:700;
         color:var(--primary);background:transparent;border:none}

/* Scan input */
.scan-wrap{margin-top:8px;display:none}
.scan-input{width:100%;padding:9px 12px;background:#1a1a1a;border:1px dashed #555;
            border-radius:6px;color:var(--primary);font-family:var(--font-mono);font-size:13px}
.scan-input:focus{border-color:var(--primary);outline:none}
.scan-input::placeholder{color:#555;font-family:sans-serif}
.scan-hint{font-size:11px;color:var(--muted);margin-top:3px}

/* Consommables section */
details.conso-accordion{background:var(--card2);border-radius:10px;padding:12px;
        margin-top:20px;border-left:4px solid #555}
details.conso-accordion summary{font-weight:700;color:var(--text);cursor:pointer;font-size:14px;outline:none}
details.conso-accordion summary::marker{color:var(--primary)}

/* Submit */
.btn-submit{width:100%;padding:15px;background:var(--primary);color:#fff;border:none;
            border-radius:10px;font-size:16px;font-weight:700;cursor:pointer;
            margin-top:22px;box-shadow:0 4px 12px rgba(255,154,61,.25);
            transition:transform .1s}
.btn-submit:active{transform:scale(.98)}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}

/* Bouton de validation flottant (bulle ✓ en bas à droite) */
.btn-submit-floating{position:fixed;bottom:24px;right:24px;width:60px;height:60px;
                     border-radius:50%;background:var(--primary);color:#23150a;border:none;
                     font-size:26px;font-weight:700;cursor:pointer;
                     box-shadow:0 6px 20px rgba(0,0,0,.45);
                     display:flex;align-items:center;justify-content:center;
                     transition:transform .2s,box-shadow .2s;z-index:999}
.btn-submit-floating:active{transform:scale(.92)}
.btn-submit-floating:disabled{opacity:.5;cursor:not-allowed}
.btn-submit-floating:hover{box-shadow:0 8px 24px rgba(0,0,0,.55)}

/* Compteur d'articles sélectionnés, épinglé sur la bulle */
.fab-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;
           background:var(--text);color:var(--bg);border-radius:999px;
           font-family:var(--font-mono);font-size:11px;font-weight:700;
           display:flex;align-items:center;justify-content:center;padding:0 6px}

/* Laisse la place à la bulle flottante en bas de page */
.container{margin-bottom:90px}

/* Status */
#status{text-align:center;margin-top:14px;font-weight:700;font-size:14px;min-height:20px}
.st-success{color:var(--green)} .st-error{color:var(--red)} .st-info{color:#90caf9}

/* Loading */
.loading{text-align:center;padding:30px;color:var(--muted);font-size:14px}

/* ── Modals ── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.82);
          z-index:1000;align-items:center;justify-content:center;
          backdrop-filter:blur(3px)}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:14px;
           width:88%;max-width:420px;max-height:82vh;display:flex;flex-direction:column;
           box-shadow:0 12px 40px rgba(0,0,0,.9)}
.modal-hdr{display:flex;justify-content:space-between;align-items:flex-start;
           padding:16px;border-bottom:1px solid var(--border)}
.modal-hdr h3{color:var(--primary);font-size:15px;padding-right:12px}
.modal-close{font-size:22px;color:var(--muted);cursor:pointer;line-height:1}
.modal-close:active{color:var(--primary)}
.modal-body{overflow-y:auto;padding:14px;flex:1}
.modal-body::-webkit-scrollbar{width:4px}
.modal-body::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}
.modal-footer{padding:14px;border-top:1px solid var(--border);display:flex;gap:10px}
.modal-footer button{flex:1;padding:12px;border:none;border-radius:8px;
                     font-size:14px;font-weight:700;cursor:pointer}
.btn-confirm{background:var(--primary);color:#fff}
.btn-cancel{background:var(--btn-bg);color:var(--text);border:1px solid var(--border)!important}
.btn-confirm:active,.btn-cancel:active{transform:scale(.97)}

/* Confirmation list */
.confirm-meta{font-size:13px;color:var(--muted);margin-bottom:12px;line-height:1.8}
.confirm-meta strong{color:var(--text)}
.confirm-list{list-style:none}
.confirm-list li{padding:8px 0;border-bottom:1px dashed var(--border);
                 font-size:13px;display:flex;align-items:center;gap:8px}
.confirm-list li:last-child{border-bottom:none}
.confirm-qty{font-family:var(--font-mono);background:var(--primary-dim);color:var(--primary);
             padding:2px 6px;border-radius:4px;font-weight:700;font-size:12px;flex-shrink:0}
.confirm-sn{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-left:auto}

/* Serial list in stock detail modal */
.serial-list{list-style:none}
.serial-list li{padding:8px 0;border-bottom:1px dashed var(--border);
                font-family:var(--font-mono);font-size:14px;color:#ccc}
.serial-list li:last-child{border-bottom:none}

/* Toast Notification */
.toast-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px 20px;
       box-shadow:0 4px 16px rgba(0,0,0,.6);display:flex;align-items:center;gap:12px;
       animation:slideIn .3s ease-out;pointer-events:auto;max-width:320px;min-width:280px}
.toast.error{border-left:4px solid var(--red);background:rgba(229,105,95,.1)}
.toast.success{border-left:4px solid var(--green);background:rgba(87,184,119,.1)}
.toast.info{border-left:4px solid #90caf9;background:rgba(144,202,249,.1)}
.toast-icon{font-size:20px;flex-shrink:0}
.toast-message{color:var(--text);font-size:14px;flex:1}
.toast-close{color:var(--muted);cursor:pointer;font-size:18px;flex-shrink:0;transition:color .2s}
.toast-close:hover{color:var(--text)}

@keyframes slideIn{
  from{transform:translateX(400px);opacity:0}
  to{transform:translateX(0);opacity:1}
}

@keyframes slideOut{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(400px);opacity:0}
}

@media (max-width: 400px) {
  .fields-row {
    grid-template-columns: 1fr;
  }
  .field-input[type="date"] {
    width: 92.5%;
    max-width: 92.5%;
  }
}