/* ============================================================  
   SCANNER — Extraction IA depuis photos  
   ============================================================ */

/* ============================================================  
   CONFIG API  
   ============================================================ */  
.scanner-config-card {  
  border-left: 4px solid var(--primary);  
}

.scanner-config-grid {  
  display: grid;  
  grid-template-columns: 1fr 2fr;  
  gap: 14px;  
  margin-bottom: 12px;  
}

.scanner-api-indicator {  
  display: flex;  
  align-items: center;  
  gap: 8px;  
  padding: 10px 14px;  
  border-radius: 8px;  
  font-size: .85rem;  
  font-weight: 600;  
}

.scanner-api-configured {  
  background: #dcfce7;  
  color: #166534;  
  border-left: 3px solid var(--success);  
}

.scanner-api-not-configured {  
  background: #fef3c7;  
  color: #92400e;  
  border-left: 3px solid var(--warn);  
}

.scanner-api-status {  
  font-size: .82rem;  
  color: var(--muted);  
  margin-top: 4px;  
}

/* ============================================================  
   DROP ZONE  
   ============================================================ */  
.scanner-drop-zone {  
  border: 2px dashed var(--primary);  
  border-radius: var(--radius);  
  padding: 40px 20px;  
  text-align: center;  
  cursor: pointer;  
  background: #eef2ff;  
  transition: background .2s, border-color .2s, transform .15s;  
  user-select: none;  
}

.scanner-drop-zone:hover,  
.scanner-drop-zone.scanner-drop-active {  
  background: #e0e7ff;  
  border-color: var(--primary-dk);  
  transform: scale(1.01);  
}

.scanner-drop-icon {  
  font-size: 3rem;  
  margin-bottom: 10px;  
  line-height: 1;  
}

.scanner-drop-zone p {  
  color: var(--text);  
  font-size: .95rem;  
  margin-bottom: 4px;  
}

.scanner-drop-hint {  
  font-size: .78rem !important;  
  color: var(--muted) !important;  
}

/* ============================================================  
   PREVIEW GRID  
   ============================================================ */  
.scanner-preview-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));  
  gap: 12px;  
  margin-top: 4px;  
}

.scanner-preview-card {  
  background: var(--bg);  
  border-radius: 8px;  
  overflow: hidden;  
  border: 2px solid var(--border);  
  transition: border-color .2s, box-shadow .2s;  
  cursor: default;  
}

.scanner-preview-card:hover {  
  border-color: var(--primary);  
  box-shadow: 0 2px 12px rgba(79,70,229,.15);  
}

.scanner-preview-img-wrap {  
  position: relative;  
  aspect-ratio: 4/3;  
  background: #f1f5f9;  
  overflow: hidden;  
}

.scanner-preview-img {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  display: block;  
}

.scanner-preview-remove {  
  position: absolute;  
  top: 5px;  
  right: 5px;  
  background: rgba(239,68,68,.9);  
  color: #fff;  
  border: none;  
  border-radius: 50%;  
  width: 22px;  
  height: 22px;  
  font-size: .75rem;  
  cursor: pointer;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  opacity: 0;  
  transition: opacity .2s;  
  line-height: 1;  
}

.scanner-preview-card:hover .scanner-preview-remove {  
  opacity: 1;  
}

.scanner-preview-name {  
  padding: 6px 8px;  
  font-size: .72rem;  
  color: var(--muted);  
  white-space: nowrap;  
  overflow: hidden;  
  text-overflow: ellipsis;  
}

/* ============================================================  
   ACTIONS BARRE  
   ============================================================ */  
.scanner-actions {  
  display: flex;  
  align-items: center;  
  gap: 12px;  
  flex-wrap: wrap;  
  padding-top: 4px;  
}

.scanner-count-badge {  
  font-size: .82rem;  
  color: var(--muted);  
  font-weight: 600;  
  margin-left: auto;  
}

/* ============================================================  
   PROGRESS  
   ============================================================ */  
.scanner-progress-wrap {  
  background: var(--card);  
  border-radius: var(--radius);  
  box-shadow: var(--shadow);  
  padding: 20px 24px;  
  margin-bottom: 18px;  
  border-left: 4px solid var(--primary);  
}

.scanner-progress-inner {  
  display: flex;  
  flex-direction: column;  
  gap: 8px;  
}

.scanner-progress-label {  
  font-size: .9rem;  
  font-weight: 600;  
  color: var(--text);  
}

.scanner-progress-bar-bg {  
  height: 10px;  
  background: var(--border);  
  border-radius: 99px;  
  overflow: hidden;  
}

.scanner-progress-bar-fill {  
  height: 100%;  
  background: linear-gradient(90deg, var(--primary), var(--accent));  
  border-radius: 99px;  
  transition: width .3s ease;  
  width: 0%;  
}

.scanner-progress-stats {  
  font-size: .8rem;  
  color: var(--muted);  
}

/* ============================================================  
   RÉSULTATS  
   ============================================================ */  
.scanner-results-list {  
  display: flex;  
  flex-direction: column;  
  gap: 16px;  
}

.scanner-result-card {  
  background: var(--bg);  
  border-radius: 10px;  
  border: 1px solid var(--border);  
  overflow: hidden;  
  transition: box-shadow .2s;  
}

.scanner-result-card:hover {  
  box-shadow: 0 4px 16px rgba(0,0,0,.08);  
}

.scanner-result-card.scanner-result-error {  
  border-color: var(--danger);  
  background: #fff5f5;  
}

.scanner-result-card.scanner-result-imported {  
  opacity: .75;  
  border-color: var(--success);  
  background: #f0fdf4;  
}

/* Header de la carte résultat */  
.scanner-result-header {  
  display: flex;  
  align-items: center;  
  gap: 14px;  
  padding: 14px 16px;  
  border-bottom: 1px solid var(--border);  
  background: var(--card);  
}

.scanner-result-checkbox-wrap {  
  cursor: pointer;  
  display: flex;  
  align-items: center;  
}

.scanner-result-checkbox {  
  width: 18px;  
  height: 18px;  
  cursor: pointer;  
  accent-color: var(--primary);  
}

.scanner-result-thumb-wrap {  
  width: 72px;  
  height: 54px;  
  border-radius: 6px;  
  overflow: hidden;  
  flex-shrink: 0;  
  background: #f1f5f9;  
  border: 1px solid var(--border);  
}

.scanner-result-thumb {  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  display: block;  
}

.scanner-result-meta {  
  flex: 1;  
  display: flex;  
  flex-direction: column;  
  gap: 4px;  
}

.scanner-result-filename {  
  font-size: .82rem;  
  color: var(--muted);  
  font-weight: 600;  
}

.scanner-result-error-msg {  
  font-size: .85rem;  
  color: var(--danger);  
  font-weight: 600;  
}

/* Badges confiance */  
.scanner-conf-badge {  
  display: inline-block;  
  padding: 2px 10px;  
  border-radius: 99px;  
  font-size: .72rem;  
  font-weight: 700;  
}

.scanner-conf-high { background: #dcfce7; color: #166534; }  
.scanner-conf-mid  { background: #fef3c7; color: #92400e; }  
.scanner-conf-low  { background: #fee2e2; color: #991b1b; }

.scanner-imported-badge {  
  display: inline-block;  
  padding: 2px 10px;  
  border-radius: 99px;  
  font-size: .72rem;  
  font-weight: 700;  
  background: #dcfce7;  
  color: #166534;  
}

/* Grille des champs */  
.scanner-result-fields {  
  display: grid;  
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));  
  gap: 10px;  
  padding: 14px 16px;  
}

.scanner-result-field {  
  display: flex;  
  flex-direction: column;  
  gap: 4px;  
}

.scanner-result-field.scanner-result-field-full {  
  grid-column: 1 / -1;  
}

.scanner-result-field label {  
  font-size: .72rem;  
  font-weight: 700;  
  color: var(--muted);  
  text-transform: uppercase;  
  letter-spacing: .04em;  
}

.scanner-field-input {  
  border: 1px solid var(--border);  
  border-radius: 6px;  
  padding: 7px 10px;  
  font-size: .85rem;  
  background: #fff;  
  color: var(--text);  
  outline: none;  
  transition: border-color .2s;  
  font-family: inherit;  
  width: 100%;  
}

.scanner-field-input:focus {  
  border-color: var(--primary);  
  box-shadow: 0 0 0 2px rgba(79,70,229,.1);  
}

.scanner-field-input[readonly] {  
  background: #f8fafc;  
  color: var(--muted);  
  cursor: not-allowed;  
}

.scanner-tags-wrap {  
  display: flex;  
  flex-wrap: wrap;  
  gap: 6px;  
}

.scanner-tag {  
  background: #eef2ff;  
  color: var(--primary);  
  border-radius: 99px;  
  padding: 3px 10px;  
  font-size: .78rem;  
  font-weight: 600;  
}

.scanner-ai-notes {  
  font-size: .8rem;  
  color: var(--muted);  
  font-style: italic;  
  background: #f8fafc;  
  border-radius: 6px;  
  padding: 8px 10px;  
  border-left: 3px solid var(--border);  
}

/* ============================================================  
   STATUT IMPORT  
   ============================================================ */  
.scanner-import-status {  
  padding: 12px 16px;  
  border-radius: 8px;  
  font-size: .88rem;  
  font-weight: 600;  
  margin-top: 12px;  
}

.scanner-import-ok   { background: #dcfce7; color: #166534; border-left: 4px solid var(--success); }  
.scanner-import-warn { background: #fef3c7; color: #92400e; border-left: 4px solid var(--warn); }

/* ============================================================  
   HISTORIQUE  
   ============================================================ */  
.scanner-history-list {  
  display: flex;  
  flex-direction: column;  
  gap: 0;  
  max-height: 360px;  
  overflow-y: auto;  
}

.scanner-history-empty {  
  text-align: center;  
  color: var(--muted);  
  font-size: .88rem;  
  padding: 28px;  
  font-style: italic;  
}

.scanner-history-row {  
  display: grid;  
  grid-template-columns: 120px 180px 1fr 130px 1fr auto;  
  gap: 10px;  
  align-items: center;  
  padding: 10px 14px;  
  border-bottom: 1px solid var(--border);  
  font-size: .8rem;  
  transition: background .15s;  
}

.scanner-history-row:last-child { border-bottom: none; }  
.scanner-history-row:hover      { background: #f8faff; }

.scanner-history-date    { color: var(--muted); white-space: nowrap; }  
.scanner-history-file    { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  
.scanner-history-societe { font-weight: 700; color: var(--primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  
.scanner-history-tel     { color: var(--text); }  
.scanner-history-addr    { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  
.scanner-history-meta    { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.scanner-provider-badge {  
  display: inline-block;  
  padding: 2px 8px;  
  border-radius: 99px;  
  font-size: .68rem;  
  font-weight: 700;  
  background: #f1f5f9;  
  color: var(--muted);  
}

/* ============================================================  
   RESPONSIVE  
   ============================================================ */  
@media (max-width: 900px) {  
  .scanner-config-grid    { grid-template-columns: 1fr; }  
  .scanner-history-row    { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }  
  .scanner-result-fields  { grid-template-columns: 1fr 1fr; }  
}

@media (max-width: 600px) {  
  .scanner-preview-grid   { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }  
  .scanner-result-fields  { grid-template-columns: 1fr; }  
  .scanner-history-row    { grid-template-columns: 1fr; }  
}