/* ===================================================================
   SCAN FEATURE v2 — Styles
   À placer dans /client/scan-feature.css
=================================================================== */

/* ─── Modal ───────────────────────────────────────────────────── */
#sfModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(0,0,0,.72);
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
#sfModal.show { display: flex; }
@media (min-width: 640px) { #sfModal { align-items: center; padding: 20px; } }

.sf-card {
  background: var(--card, #1e1e2e);
  border: 1px solid var(--line, #333);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(60px);
  opacity: 0;
  transition: transform .30s cubic-bezier(.22,.68,0,1.2), opacity .25s;
  box-shadow: 0 -8px 40px rgba(0,0,0,.45);
}
#sfModal.show .sf-card { transform: translateY(0); opacity: 1; }
@media (min-width: 640px) { .sf-card { border-radius: 18px; max-height: 88vh; } }

/* ─── Header ──────────────────────────────────────────────────── */
.sf-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--line,#444); margin: 12px auto 0; flex-shrink: 0; }

.sf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 10px; border-bottom: 1px solid var(--line,#333);
  flex-shrink: 0; gap: 10px;
}
.sf-header-left { display: flex; flex-direction: column; gap: 2px; }
.sf-header-title { font-size: 17px; font-weight: 700; color: var(--text,#eee); line-height: 1.2; }
.sf-step-badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 20px; background: rgba(96,165,250,.18); color: var(--primary,#60a5fa); letter-spacing: .4px;
}
.sf-close-btn {
  background: transparent; border: 1px solid var(--line,#444); border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; color: var(--muted,#888); transition: border-color .15s, color .15s;
}
.sf-close-btn:hover { border-color: var(--danger,#ef4444); color: var(--danger,#ef4444); }

#sfBody {
  overflow-y: auto; overflow-x: hidden; flex: 1;
  padding: 16px 16px 8px; -webkit-overflow-scrolling: touch;
}

/* ─── Section header ──────────────────────────────────────────── */
.sf-section-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line,#2a2a3a);
}
.sf-hd-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.sf-hd-title { font-size: 16px; font-weight: 700; color: var(--text,#eee); }
.sf-hd-sub   { font-size: 12px; color: var(--muted,#888); margin-top: 2px; }

/* ─── Viewfinder ──────────────────────────────────────────────── */
.sf-viewfinder-wrap {
  position: relative; border-radius: 14px; overflow: hidden;
  background: #000; height: 170px; width: 100%; margin-bottom: 10px;
}
.sf-viewfinder-wrap > div:first-child { width: 100% !important; height: 100% !important; border-radius: 14px; }
.sf-viewfinder-wrap :is(#sfReader,#sfLocReader,#sfEanReader) > *:not(video):not(canvas) { display: none !important; }
.sf-viewfinder-wrap video { width:100% !important; height:100% !important; object-fit:cover; border-radius:14px; }
.sf-vf-overlay { position: absolute; inset: 0; pointer-events: none; height: 170px; }
.sf-vf-corner { position: absolute; width: 22px; height: 22px; border-color: var(--primary,#60a5fa); border-style: solid; opacity: .9; }
.sf-vf-tl { top:12px; left:12px;  border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.sf-vf-tr { top:12px; right:12px; border-width: 3px 3px 0 0; border-radius: 0 4px 0 0; }
.sf-vf-bl { bottom:12px; left:12px;  border-width: 0 0 3px 3px; border-radius: 0 0 0 4px; }
.sf-vf-br { bottom:12px; right:12px; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
@keyframes sfLaser { 0%,100%{top:14%;opacity:1} 50%{top:80%;opacity:.7} }
.sf-vf-laser {
  position: absolute; left: 10%; width: 80%; height: 2px;
  background: linear-gradient(90deg,transparent,var(--primary,#60a5fa),transparent);
  animation: sfLaser 2.2s ease-in-out infinite;
  border-radius: 2px; box-shadow: 0 0 8px var(--primary,#60a5fa);
}

/* ─── Misc ────────────────────────────────────────────────────── */
.sf-scan-status { text-align: center; font-size: 12px; color: var(--muted,#888); padding: 4px 0 6px; }
.sf-or-sep { display:flex; align-items:center; gap:10px; margin:8px 0; color:var(--muted,#777); font-size:11px; }
.sf-or-sep::before,.sf-or-sep::after { content:''; flex:1; height:1px; background:var(--line,#333); }
.sf-manual-row { display:flex; gap:8px; align-items:center; }
.sf-manual-row input {
  flex:1; min-width:0; padding:10px 12px; border-radius:10px;
  border:1px solid var(--line,#444); background:var(--bg,#12121f);
  color:var(--text,#eee); font-size:15px;
}
.sf-manual-row input:focus { outline:none; border-color:var(--primary,#60a5fa); }

/* ─── EAN pill ────────────────────────────────────────────────── */
.sf-ean-pill {
  display:flex; align-items:center; gap:7px; padding:10px 14px;
  border-radius:10px; background:rgba(96,165,250,.1);
  border:1px solid rgba(96,165,250,.25); color:var(--primary,#60a5fa);
  font-size:13px; margin-bottom:14px;
}

/* ─── Produit inconnu — actions ───────────────────────────────── */
.sf-unknown-actions { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.sf-ua-btn {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:14px; border:1px solid var(--line,#333);
  background:rgba(255,255,255,.03); cursor:pointer; text-align:left;
  color:var(--text,#eee); transition:background .15s, border-color .15s;
  width:100%;
}
.sf-ua-btn:hover { background:rgba(96,165,250,.08); border-color:rgba(96,165,250,.35); }
.sf-ua-btn:active { background:rgba(96,165,250,.15); }
.sf-ua-icon { font-size:22px; flex-shrink:0; }
.sf-ua-body { flex:1; min-width:0; }
.sf-ua-title { font-size:14px; font-weight:700; }
.sf-ua-sub   { font-size:11px; color:var(--muted,#888); margin-top:2px; }
.sf-ua-arrow { width:18px; height:18px; flex-shrink:0; color:var(--muted,#666); }

/* ─── Produit connu ───────────────────────────────────────────── */
.sf-product-card { background:rgba(255,255,255,.04); border:1px solid var(--line,#333); border-radius:14px; padding:14px; margin-bottom:14px; }
.sf-product-name { font-size:17px; font-weight:700; color:var(--text,#eee); margin-bottom:8px; }
.sf-chips { display:flex; flex-wrap:wrap; gap:6px; }
.sf-chip  { font-size:11px; padding:3px 9px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid var(--line,#444); color:var(--text,#ccc); }

/* ─── Champs variables ────────────────────────────────────────── */
.sf-var-title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted,#888); margin-bottom:8px; }
.sf-var-list  { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.sf-var-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04);
  border:1px solid var(--line,#333); cursor:pointer; user-select:none;
  transition:background .15s, border-color .15s; gap:10px;
}
.sf-var-row:hover { background:rgba(96,165,250,.08); border-color:rgba(96,165,250,.3); }
.sf-var-left { display:flex; align-items:center; gap:12px; }
.sf-var-lbl  { font-size:13px; font-weight:600; color:var(--text,#ddd); }
.sf-var-val  { font-size:12px; color:var(--muted,#888); margin-top:2px; font-family:monospace; }
.sf-var-val.sf-warn   { color:var(--warning,#f59e0b); }
.sf-var-val.sf-danger { color:var(--danger,#ef4444); }
.sf-var-val.sf-ok     { color:var(--success,#22c55e); }
.sf-toggle-knob { width:38px; height:22px; border-radius:11px; background:var(--line,#444); flex-shrink:0; position:relative; transition:background .2s; }
.sf-toggle-knob::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.sf-toggle-knob[data-on="true"] { background:var(--success,#22c55e); }
.sf-toggle-knob[data-on="true"]::after { transform:translateX(16px); }
.sf-var-badge { font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
.badge-on  { background:rgba(34,197,94,.15);  color:var(--success,#22c55e); border:1px solid rgba(34,197,94,.35); }
.badge-off { background:rgba(239,68,68,.1);   color:var(--muted,#888); border:1px solid var(--line,#444); }

/* ─── Boutons bas ─────────────────────────────────────────────── */
.sf-btn-row   { display:flex; gap:10px; margin-top:14px; padding-bottom:6px; }
.sf-btn-row .btn { flex:1; padding:12px; font-size:14px; border-radius:12px; }
.sf-back-btn  { width:100%; margin-top:10px; padding:11px; border-radius:12px; text-align:center; }
.sf-danger-btn { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:var(--danger,#ef4444); border-radius:12px; cursor:pointer; padding:11px; }
.sf-info-txt  { font-size:13px; color:var(--muted,#888); line-height:1.6; margin:0 0 14px; }

/* ─── Association liste ───────────────────────────────────────── */
.sf-assoc-list {
  max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 6px; padding-right: 2px;
}
.sf-assoc-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 12px; border: 1px solid var(--line,#333);
  background: rgba(255,255,255,.03); cursor: pointer;
  transition: background .13s, border-color .13s;
}
.sf-assoc-row:hover    { background: rgba(96,165,250,.08); border-color: rgba(96,165,250,.3); }
.sf-assoc-sel          { background: rgba(96,165,250,.12) !important; border-color: var(--primary,#60a5fa) !important; }
.sf-assoc-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line,#444);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; color: var(--primary,#60a5fa);
  transition: border-color .15s, background .15s;
}
.sf-assoc-sel .sf-assoc-check { background: var(--primary,#60a5fa); border-color: var(--primary,#60a5fa); color: #fff; }
.sf-assoc-info { flex: 1; min-width: 0; }
.sf-assoc-name { font-size: 14px; font-weight: 600; color: var(--text,#eee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Onglets rangée + mode ────────────────────────────────────── */
.sf-row-tabs-wrap { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.sf-rtab { padding:5px 11px; border-radius:8px; border:1px solid var(--line,#444); background:transparent; color:var(--muted,#888); font-size:12px; cursor:pointer; transition:all .15s; }
.sf-rtab:hover  { border-color:var(--primary,#60a5fa); color:var(--primary,#60a5fa); }
.sf-rtab.active { background:var(--primary,#60a5fa); border-color:var(--primary,#60a5fa); color:#fff; font-weight:700; }
.sf-loc-tabs    { display:flex; border:1px solid var(--line,#333); border-radius:12px; overflow:hidden; margin-bottom:12px; }
.sf-loc-tab     { flex:1; padding:10px 6px; background:transparent; border:none; color:var(--muted,#888); font-size:13px; font-weight:600; cursor:pointer; transition:background .15s,color .15s; }
.sf-loc-tab.active { background:var(--primary,#60a5fa); color:#fff; }
.sf-loc-tab:first-child { border-right:1px solid var(--line,#333); }
.sf-loc-content { min-height:80px; max-height:36vh; overflow-y:auto; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ─── Positions grille ────────────────────────────────────────── */
.sf-sel-alv     { outline:2px solid var(--primary,#60a5fa) !important; outline-offset:1px; background:rgba(96,165,250,.08) !important; }
.sf-blocked-alv { opacity:.35 !important; }
.sf-add-sub {
  cursor:pointer; background:rgba(96,165,250,.15) !important;
  border:1px dashed var(--primary,#60a5fa) !important; color:var(--primary,#60a5fa) !important;
  font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center;
  border-radius:4px; transition:background .12s, transform .1s;
}
.sf-add-sub:hover  { background:rgba(96,165,250,.32) !important; transform:scale(1.08); }
.sf-add-sel        { background:var(--primary,#60a5fa) !important; color:#fff !important; border-style:solid !important; }
.sf-occ-sel        { outline:2px solid var(--primary,#60a5fa); outline-offset:1px; }

/* ─── Footer emplacement ──────────────────────────────────────── */
.sf-loc-footer {
  position:sticky; bottom:0; background:var(--card,#1e1e2e);
  border-top:1px solid var(--line,#333); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:0 -16px -8px; z-index:2;
}
.sf-sel-loc { font-size:14px; color:var(--text,#eee); display:flex; align-items:center; gap:6px; }
.sf-sel-loc strong { font-family:monospace; color:var(--primary,#60a5fa); }

/* ─── FAB ─────────────────────────────────────────────────────── */
#btnQuickScan {
  position:fixed; bottom:24px; right:20px; z-index:9000;
  width:58px; height:58px; border-radius:50%;
  background:var(--primary,#60a5fa); border:none;
  box-shadow:0 4px 20px rgba(96,165,250,.45);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#fff; font-size:24px;
  transition:transform .15s, box-shadow .15s;
}
#btnQuickScan:hover  { transform:scale(1.07); box-shadow:0 6px 28px rgba(96,165,250,.6); }
#btnQuickScan:active { transform:scale(0.96); }

/* ─── Bouton inline éditModal ─────────────────────────────────── */
.sf-inline-btn {
  display:flex; align-items:center; gap:6px; padding:7px 12px; font-size:12px;
  border-radius:9px; border:1px dashed var(--primary,#60a5fa);
  color:var(--primary,#60a5fa); background:rgba(96,165,250,.07); cursor:pointer;
  transition:background .15s; white-space:nowrap;
}
.sf-inline-btn:hover { background:rgba(96,165,250,.15); }

/* ─── Bouton EAN sur carte palette (dans renderPalette) ───────── */
.sf-ean-badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  font-size:11px; border-radius:8px; cursor:pointer;
  border:1px solid rgba(96,165,250,.3); background:rgba(96,165,250,.08);
  color:var(--primary,#60a5fa); font-family:monospace;
  transition:background .14s;
}
.sf-ean-badge:hover { background:rgba(96,165,250,.2); }
.sf-ean-badge-empty {
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  font-size:11px; border-radius:8px; cursor:pointer;
  border:1px dashed var(--line,#444); background:transparent;
  color:var(--muted,#666);
  transition:background .14s, border-color .14s, color .14s;
}
.sf-ean-badge-empty:hover { border-color:var(--primary,#60a5fa); color:var(--primary,#60a5fa); background:rgba(96,165,250,.06); }

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRE MOBILE — 1 colonne, lisible
   Ajouter data-mobile="true" sur le formulaire, ou utiliser
   la classe .form-mobile sur le conteneur du formulaire.
   ─────────────────────────────────────────────────────────────
   Remplace les grilles multi-colonnes existantes par du
   stack vertical sur écrans < 540px.
═══════════════════════════════════════════════════════════════ */

/* Force 1 colonne sur mobile pour TOUT le formulaire editModal */
@media (max-width: 540px) {
  /* Grilles multi-colonnes → 1 colonne */
  #editModal .form-grid,
  #editModal .form-row,
  #editModal .input-grid,
  #editModal [class*="grid-"],
  #editModal [class*="-grid"],
  #editModal [style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Chaque champ prend 100% */
  #editModal .form-group,
  #editModal .field,
  #editModal .form-field,
  #editModal label,
  #editModal input,
  #editModal select,
  #editModal textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Padding du modal réduit */
  #editModal .modal-body,
  #editModal form,
  #editModal .form-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Inputs et selects plus grands pour les doigts */
  #editModal input[type="text"],
  #editModal input[type="number"],
  #editModal input[type="date"],
  #editModal input[type="search"],
  #editModal select,
  #editModal textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* évite le zoom auto iOS */
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }

  /* Textarea plus haute sur mobile */
  #editModal textarea { min-height: 80px !important; }

  /* Labels au dessus (block) */
  #editModal label {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Boutons bas de form : pleine largeur empilés */
  #editModal .form-actions,
  #editModal .modal-footer,
  #editModal .btn-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #editModal .form-actions .btn,
  #editModal .modal-footer .btn,
  #editModal .btn-row .btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 15px !important;
  }
}

/* Thème clair */
[data-theme="light"] .sf-manual-row input { background:var(--bg-alt,#f4f4f6); border-color:var(--line,#ddd); color:var(--text,#111); }
[data-theme="light"] .sf-product-card     { background:rgba(0,0,0,.03); }
[data-theme="light"] .sf-var-row          { background:rgba(0,0,0,.02); }
[data-theme="light"] .sf-ua-btn           { background:rgba(0,0,0,.02); }
[data-theme="light"] .sf-assoc-row        { background:rgba(0,0,0,.02); }
[data-theme="light"] .sf-loc-footer       { background:var(--card,#fff); }