/* ============================================================================
   scanner.css — overlay caméra.

   Choix de structure : la vidéo est en PLEIN CADRE et les contrôles flottent
   par-dessus. L'ancienne version empilait barre / résultat / vidéo, ce qui
   volait le tiers de la hauteur sur téléphone — précisément là où on a besoin
   de voir les colis.
   ========================================================================= */

.overlay{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:var(--black);
  overscroll-behavior:contain;
}
/* Indispensable : sans ça, `display:grid` l'emporterait sur l'attribut hidden. */
.overlay[hidden]{display:none}

.overlay__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--black);
}

 /* Uniquement les TROIS enfants de flux. Une règle générique du type
    `.overlay > *:not(.overlay__video)` aurait une spécificité (0,2,0)
    supérieure à `.frame` (0,1,0) : les équerres et l'anneau repasseraient en
    `position:relative`, deviendraient des éléments de grille et créeraient
    deux rangées parasites qui décalent toute la barre de contrôles. */
.overlay__top,
.overlay__result,
.overlay__bottom{position:relative;z-index:2}

/* --- Voiles ----------------------------------------------------------------
   Les contrôles doivent rester lisibles quel que soit ce que filme la caméra. */
.overlay__top,
.overlay__bottom{pointer-events:none}
.overlay__top > *,
.overlay__bottom > *{pointer-events:auto}

.overlay__top{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:calc(var(--sp-3) + env(safe-area-inset-top))
          calc(var(--sp-3) + env(safe-area-inset-right))
          var(--sp-5)
          calc(var(--sp-3) + env(safe-area-inset-left));
  background:var(--scrim-top);
}
/* L'emplacement du menu de tri est l'élément de flux ; c'est LUI qui doit
   porter la souplesse, pas le <select> qu'il contient. Son `margin-right:auto`
   pousse la torche et la fermeture contre le bord droit — y compris quand la
   torche est masquée, cas qu'une règle de frère adjacent gérait mal. */
.overlay__filter{flex:1 1 auto;min-width:0;max-width:280px;margin-right:auto}
.overlay__filter .select{width:100%}

.overlay__bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-6)
          calc(var(--sp-5) + env(safe-area-inset-right))
          calc(var(--sp-4) + env(safe-area-inset-bottom))
          calc(var(--sp-5) + env(safe-area-inset-left));
  background:var(--scrim-bottom);
  text-align:center;
}
.overlay__code{
  font-family:var(--font-mono);
  font-size:var(--t-xs);
  color:var(--on-video);
  min-height:1.2em;
  word-break:break-all;
  max-width:44ch;
}
.overlay__hint{
  font-size:var(--t-xs);
  color:var(--on-video);
  line-height:1.55;
  max-width:46ch;
}
.overlay__hint b{color:var(--on-video-strong);font-weight:550}

/* --- Équerres de cadre -----------------------------------------------------
   Elles couvrent ~86 % de l'image : ça se lit comme un vrai scanner, sans
   laisser croire qu'il faut viser précisément. La détection reste plein cadre. */
.frame{
  position:absolute;
  inset:7%;
  z-index:1;
  pointer-events:none;
}
.frame span{
  position:absolute;
  width:34px;
  height:34px;
  border:2px solid var(--glass-line-strong);
}
.frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:var(--r-sm) 0 0 0}
.frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 var(--r-sm) 0 0}
.frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 var(--r-sm)}
.frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 var(--r-sm) 0}

/* --- Anneau de statut plein écran ------------------------------------------
   À chaque résultat, le bord de l'écran s'illumine de la couleur du statut.
   C'est perceptible en vision périphérique : on peut garder les yeux sur les
   colis et savoir quand même si le scan est bon. */
.overlay__ring{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
}
.overlay.is-pulse .overlay__ring{animation:ring-pulse 900ms var(--ease) both}
.overlay.is-ok    .overlay__ring{box-shadow:inset 0 0 0 4px var(--ok),   inset 0 0 90px -10px var(--ok-glow)}
.overlay.is-wrong .overlay__ring{box-shadow:inset 0 0 0 4px var(--wrong),inset 0 0 90px -10px var(--wrong-glow)}
.overlay.is-err   .overlay__ring{box-shadow:inset 0 0 0 4px var(--err),  inset 0 0 90px -10px var(--err-glow)}
@keyframes ring-pulse{
  0%{opacity:0}
  12%{opacity:1}
  60%{opacity:.85}
  100%{opacity:0}
}

/* --- Panneau de résultat ---------------------------------------------------- */

.overlay__result{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-right))
          0 calc(var(--sp-4) + env(safe-area-inset-left));
  min-height:0;
}

.result{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  max-width:100%;
  padding:var(--sp-3) var(--sp-5);
  border:1px solid var(--glass-line-soft);
  border-radius:var(--r-xl);
  background:var(--glass-panel);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:var(--lift-float);
  transition:border-color var(--d-2) var(--ease-io);
}
.result.is-ok{border-color:var(--ok-line)}
.result.is-wrong{border-color:var(--wrong-line)}
.result.is-err{border-color:var(--err-line)}

.banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--sp-1);
  min-width:0;
  text-align:center;
  color:var(--on-video);
  font-size:var(--t-md);
  font-weight:550;
}
.banner__label{
  font-size:clamp(.6875rem,2.6vw,.8125rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--fg-3);
  padding-left:.22em;
  white-space:nowrap;
}
.banner__num{
  font-family:var(--font-num);
  font-size:clamp(3.5rem,15vw,7rem);
  font-weight:800;
  line-height:.85;
  letter-spacing:var(--ls-num);
  font-variant-numeric:tabular-nums;
}
.banner__state{
  font-size:clamp(1.25rem,5.5vw,2rem);
  font-weight:750;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-left:.14em;
}
/* Sans statut, le bandeau ne porte que la consigne d'attente : elle doit
   rester discrète, sinon elle occupe l'écran autant qu'un vrai résultat. */
.banner:not(.is-ok):not(.is-wrong):not(.is-err) .banner__state{
  font-size:var(--t-md);
  font-weight:550;
  letter-spacing:.06em;
  text-transform:none;
  padding-left:0;
}
.banner.is-ok    .banner__num,.banner.is-ok    .banner__state{color:var(--ok)}
.banner.is-wrong .banner__num,.banner.is-wrong .banner__state{color:var(--wrong)}
.banner.is-err   .banner__num,.banner.is-err   .banner__state{color:var(--err)}

.banner.is-flash{animation:banner-in var(--d-3) var(--ease) both}
@keyframes banner-in{
  from{opacity:0;transform:translateY(8px) scale(.97)}
  to{opacity:1;transform:none}
}

/* Miniature du colis capturé, au moment de la lecture. */
.result__thumb{
  flex:none;
  width:clamp(58px,15vw,86px);
  height:clamp(58px,15vw,86px);
  object-fit:cover;
  border-radius:var(--r-lg);
  border:1px solid var(--glass-line);
  background:var(--black);
}

/* Paysage écrasé : le panneau passe en ligne pour libérer de la hauteur. */
@media (orientation:landscape) and (max-height:540px){
  .overlay__top{padding-bottom:var(--sp-3)}
  .banner__num{font-size:clamp(2.5rem,10vh,4rem)}
  .result{padding:var(--sp-2) var(--sp-4)}
  .overlay__hint{display:none}
  .frame{inset:5%}
}