/* ============ STOCK FIELD — Poste de travail mobile terrain ============ */
.sf-wrap { max-width: 560px; margin: 0 auto; padding-bottom: 110px; }
.sf-topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sf-user { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sf-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-topbar .btn { min-height: 44px; }
.sf-sync-badge { background: #f59e0b; color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 800; font-size: 13px; }
.sf-sync-badge.ok { background: #16a34a; }
.sf-offline-banner { background: #b91c1c; color: #fff; padding: 10px 14px; border-radius: 12px; font-weight: 700; margin-bottom: 10px; text-align: center; }

.sf-scan-btn { width: 100%; min-height: 130px; border: none; border-radius: 20px; cursor: pointer;
    background: linear-gradient(160deg, #F5A623, #e08900); color: #fff; font-size: 22px; font-weight: 900;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 8px 24px rgba(245,166,35,.35); margin-bottom: 8px; }
.sf-scan-btn i { font-size: 40px; }
.sf-scan-btn:active { transform: scale(.98); }
.sf-manual { display: flex; gap: 8px; margin-bottom: 14px; }
.sf-manual input { flex: 1; min-height: 52px; font-size: 16px; border-radius: 12px; }
.sf-manual .btn { min-height: 52px; min-width: 56px; }

.sf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.sf-tile { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 12px 8px; text-align: center; cursor: pointer; }
.sf-tile .v { font-size: 22px; font-weight: 900; }
.sf-tile .l { font-size: 11px; color: var(--text-muted, #6b7280); font-weight: 700; text-transform: uppercase; }
.sf-tile.warn .v { color: #dc2626; }

.sf-alerts { margin-bottom: 14px; }
.sf-alert { display: flex; gap: 10px; align-items: center; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.sf-alert.medium { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* Fiche produit après scan */
.sf-product { background: var(--bg-card, #fff); border: 2px solid #F5A623; border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.sf-product h3 { margin: 0 0 4px; font-size: 18px; }
.sf-pstates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.sf-pstate { text-align: center; background: var(--bg-secondary, #f8fafc); border-radius: 10px; padding: 8px 2px; }
.sf-pstate .v { font-size: 18px; font-weight: 900; }
.sf-pstate .l { font-size: 10px; color: var(--text-muted, #6b7280); font-weight: 700; }
.sf-pstate.av .v { color: #16a34a; }
.sf-pstate.av.zero .v { color: #dc2626; }
.sf-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sf-actions .btn { min-height: 56px; font-size: 15px; font-weight: 800; border-radius: 14px; }

/* Panneau quantité */
.sf-qty-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1200; display: flex; align-items: flex-end; }
.sf-qty-panel { background: var(--bg-card, #fff); width: 100%; border-radius: 20px 20px 0 0; padding: 18px 16px 26px; }
.sf-qty-panel h3 { margin: 0 0 12px; font-size: 17px; }
.sf-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0; }
.sf-stepper button { width: 64px; height: 64px; border-radius: 50%; border: none; font-size: 28px; font-weight: 900; background: var(--bg-secondary, #eef2f7); cursor: pointer; }
.sf-stepper input { width: 110px; height: 64px; text-align: center; font-size: 28px; font-weight: 900; border: 2px solid var(--border, #e5e7eb); border-radius: 14px; }
.sf-qty-panel select, .sf-qty-panel input.sf-extra { width: 100%; min-height: 50px; font-size: 16px; margin-bottom: 10px; border-radius: 12px; }
.sf-validate { width: 100%; min-height: 60px; font-size: 18px; font-weight: 900; border-radius: 14px; border: none; background: #16a34a; color: #fff; cursor: pointer; }
.sf-cancel { width: 100%; min-height: 48px; margin-top: 8px; background: none; border: none; color: var(--text-muted, #6b7280); font-weight: 700; font-size: 15px; }

/* Flash feedback */
.sf-flash { position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .12s; display: flex; align-items: center; justify-content: center; }
.sf-flash.show { opacity: 1; }
.sf-flash.ok { background: rgba(22,163,74,.85); } .sf-flash.err { background: rgba(220,38,38,.88); }
.sf-flash .msg { color: #fff; font-size: 26px; font-weight: 900; text-align: center; padding: 0 20px; }

/* Écran de déverrouillage PIN */
.fa-unlock-overlay { position: fixed; inset: 0; z-index: 3000; background: #0f172a; display: flex; align-items: center; justify-content: center; padding: 16px; }
.fa-unlock-card { width: 100%; max-width: 380px; background: #1e293b; border-radius: 22px; padding: 26px 20px; color: #e2e8f0; text-align: center; }
.fa-unlock-card h2 { margin: 0 0 4px; font-size: 20px; color: #fff; }
.fa-users { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.fa-user-chip { padding: 12px 16px; border-radius: 14px; background: #334155; color: #fff; font-weight: 700; border: 2px solid transparent; cursor: pointer; min-height: 48px; }
.fa-user-chip.sel { border-color: #F5A623; background: #47391c; }
.fa-user-chip.locked { opacity: .5; }
.fa-pin-dots { display: flex; gap: 12px; justify-content: center; margin: 14px 0; min-height: 18px; }
.fa-pin-dots span { width: 16px; height: 16px; border-radius: 50%; background: #334155; }
.fa-pin-dots span.on { background: #F5A623; }
.fa-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.fa-pad button { min-height: 60px; font-size: 24px; font-weight: 800; border-radius: 14px; border: none; background: #334155; color: #fff; cursor: pointer; }
.fa-pad button:active { background: #475569; }
.fa-pad .fa-alt { font-size: 13px; background: none; color: #94a3b8; }
.fa-err { color: #f87171; font-weight: 700; min-height: 20px; font-size: 13px; margin-top: 8px; }
.fa-full-login { margin-top: 12px; background: none; border: none; color: #94a3b8; font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* Outbox errors */
.sf-outbox-errors { margin-top: 12px; }
.sf-op-err { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; color: #991b1b; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }

/* ============ STOCK CENTRAL (desktop) ============ */
.sc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sc-kpi { background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb); border-radius: 14px; padding: 14px 16px; }
.sc-kpi .v { font-size: 26px; font-weight: 900; } .sc-kpi .l { font-size: 12px; color: var(--text-muted, #6b7280); font-weight: 600; }
.sc-low { color: #dc2626 !important; }
.sc-badge-low { background: #fef2f2; color: #b91c1c; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 800; }
.sc-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 96vw; background: var(--bg-card, #fff); box-shadow: -8px 0 30px rgba(0,0,0,.2); z-index: 1100; overflow-y: auto; padding: 20px; }
.sc-drawer h3 { margin-top: 0; }
.sc-drawer .sf-actions { grid-template-columns: repeat(3, 1fr); margin: 12px 0; }
.sc-drawer .sf-actions .btn { min-height: 44px; font-size: 13px; }
@media (max-width: 768px) { .sc-drawer { width: 100vw; } }