/* =====================================================================
   assets/css/primitives.css
   -----------------------------------------------------------------------
   UI-1 — Primitives transverses MIGRÉES depuis leur dispersion précédente
   (base.css, fiches-techniques.css) vers UN seul emplacement, utilisant
   exclusivement assets/css/tokens.css. Ces classes sont utilisées par
   tous les écrans (V1 legacy ET V2) — elles n'ont plus leur place dans
   un fichier scopé à un module métier particulier.

   Chargé APRÈS tokens.css, AVANT tous les CSS de module — un module qui
   redéfinirait encore l'une de ces classes primerait par cascade
   naturelle (aucune régression possible, migration non destructive).
   ===================================================================== */

/* ---- Badge de statut (vert/jaune/rouge) ---- */
.badge {
  display: inline-block;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  margin-top: 4px;
  color: #fff;
}
.badge.green { background: var(--fa-ok); }
.badge.yellow { background: var(--fa-warn); }
.badge.red { background: var(--fa-critical); }

/* ---- Bouton icône (action secondaire discrète) ---- */
.icon-btn {
  background: transparent;
  border: 1px solid var(--fa-border);
  padding: 6px 10px;
  font-size: 15px;
  border-radius: var(--fa-radius);
  color: var(--fa-text);
}
.icon-btn:hover { border-color: var(--fa-text-muted); }

/* ---- Bouton d'ajout (action neutre, pas l'action primaire accent) ---- */
.add-btn {
  background: var(--fa-surface);
  color: var(--fa-text);
  border: 1px solid var(--fa-border);
  font-weight: 600;
  border-radius: var(--fa-radius);
  padding: 10px 14px;
}
.add-btn:active { opacity: .85; }

/* ---- Ligne de liste standard (admin, produits, fournisseurs, commandes...) ---- */
.admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fa-space-3);
  border-bottom: 1px solid var(--fa-border);
  min-height: var(--fa-row-h);
}

/* ---- Formulaire modal commun (refonte UI/UX finale) ---- */
.ui-form-modal { max-width: 560px; width: 100%; }
.ui-form-title { margin: 0 0 var(--fa-space-2); font-size: 18px; }
.ui-form-description { color: var(--fa-text-muted); font-size: 13px; margin-bottom: var(--fa-space-3); }
.ui-form-body { display: flex; flex-direction: column; gap: var(--fa-space-3); max-height: 60vh; overflow-y: auto; }
.ui-form-field { display: flex; flex-direction: column; gap: 4px; }
.ui-form-label { font-size: 13px; font-weight: 600; color: var(--fa-text); }
.ui-form-input {
  border: 1px solid var(--fa-border);
  border-radius: var(--fa-radius);
  padding: var(--fa-space-2);
  font-size: 14px;
  min-height: var(--fa-tap);
  background: var(--fa-surface);
  color: var(--fa-text);
}
.ui-form-help { font-size: 12px; color: var(--fa-text-muted); }
.ui-form-chips { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); }
.ui-form-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--fa-border); border-radius: 999px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.ui-form-chip input { margin: 0; }
.ui-form-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ---- Modale de détail/historique (lecture seule) ---- */
.ui-detail-modal { max-width: 480px; width: 100%; }
.ui-detail-list { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--fa-space-3); margin: 0; }
.ui-detail-list dt { font-weight: 600; color: var(--fa-text-muted); font-size: 13px; }
.ui-detail-list dd { margin: 0; font-size: 14px; }

/* ---- Login refondu (refonte UI/UX finale) — email réel + mot de passe uniquement ---- */
.v2-login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--fa-bg); padding: var(--fa-space-4);
}
.v2-login-box {
  background: var(--fa-surface); border: 1px solid var(--fa-border); border-radius: var(--fa-radius-lg);
  padding: var(--fa-space-4); width: 100%; max-width: 380px;
  display: flex; flex-direction: column; gap: var(--fa-space-3);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}
.v2-login-box h1 { text-align: center; margin: 0; font-size: 22px; }
.v2-login-sub { text-align: center; color: var(--fa-text-muted); font-size: 13px; margin-bottom: var(--fa-space-2); }
.v2-login-error { color: var(--fa-critical); font-size: 13px; min-height: 18px; }
.v2-login-footer { text-align: center; font-size: 12px; color: var(--fa-text-muted); margin-top: var(--fa-space-2); }
/* .v2-primary-btn est déjà défini par assets/css/referential-v2.css — réutilisé ici tel quel, jamais redéfini. */

/* ---- Tableau d'ingrédients éditable en ligne (Recettes, refonte UI/UX finale) ---- */
.v2-recipe-row-edit { border: 1px solid var(--fa-border); border-radius: var(--fa-radius); padding: var(--fa-space-2); margin-bottom: var(--fa-space-2); }
.v2-recipe-row-edit-grid { display: flex; flex-wrap: wrap; gap: var(--fa-space-2); align-items: center; }
.v2-recipe-row-edit-grid .ui-form-input { flex: 1 1 140px; min-width: 100px; }
/* Retour utilisateur (CORRECTIONS APRÈS AUDIT RÉEL, 20/08) — "tout sur
   une ligne comme V1" : le nom (produit/sous-recette/libre) prend le
   plus de place, quantité/unité/prix restent compacts pour que
   l'ensemble tienne sur une seule ligne dès une largeur d'écran raisonnable. */
.v2-recipe-row-edit-grid .v2-recipe-row-name { flex: 3 1 200px; min-width: 140px; }
.v2-recipe-row-edit-grid .row-qty { flex: 0 1 80px; min-width: 64px; }
.v2-recipe-row-edit-grid .row-unit { flex: 0 1 80px; min-width: 64px; }
.v2-recipe-row-edit-grid .row-supplier { flex: 1 1 160px; min-width: 120px; }
.v2-recipe-row-edit-grid .row-remove { flex: 0 0 auto; }
.v2-recipe-row-price { flex: 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fa-text); white-space: nowrap; }

/* ---- Onglets Ingrédients/Procédé de l'éditeur de recette (inspiré V1) ---- */
.v2-recipe-tabbar { display: flex; gap: var(--fa-space-2); margin: var(--fa-space-2) 0; }
.v2-recipe-tab {
  flex: 1; border: 1px solid var(--fa-border); border-radius: var(--fa-radius);
  padding: var(--fa-space-2); background: var(--fa-surface); cursor: pointer; font-size: 14px;
}
.v2-recipe-tab.active { background: var(--fa-accent); color: #fff; border-color: var(--fa-accent); }

/* ---- Sélecteur visuel de sous-recette (point 5) ---- */
.v2-recipe-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--fa-space-2); max-height: 50vh; overflow-y: auto; }
.v2-recipe-picker-card { border: 1px solid var(--fa-border); border-radius: var(--fa-radius); padding: var(--fa-space-2); display: flex; flex-direction: column; gap: var(--fa-space-1); }
.v2-recipe-picker-card-name { font-weight: 600; }
.v2-recipe-picker-card-meta { font-size: 12px; color: var(--fa-text-muted); }

/* ---- Point 8 (20/08) — modales V2 plein écran sur mobile, action
   principale toujours accessible (footer sticky). Scopé à .ui-form-modal
   (classe V2 uniquement, jamais .modal/.overlay legacy globalement). */
@media (max-width: 760px) {
  .ui-form-modal {
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .ui-form-modal .ui-form-body { flex: 1 1 auto; max-height: none; }
  .ui-form-modal .modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--fa-surface);
    padding-top: var(--fa-space-2);
    margin-top: 0;
  }
  .ui-form-modal #rf-procedure { min-height: 30vh; }
}

/* ---- Liste de résultats de recherche produit (point 4, remplace la datalist native) ---- */
.v2-recipe-search-results { border: 1px solid var(--fa-border); border-radius: var(--fa-radius); max-height: 240px; overflow-y: auto; margin-top: 4px; }
.v2-recipe-search-result { display: flex; flex-direction: column; width: 100%; text-align: left; padding: var(--fa-space-2); border: 0; border-bottom: 1px solid var(--fa-border); background: var(--fa-surface); cursor: pointer; min-height: var(--fa-tap); }
.v2-recipe-search-result:last-child { border-bottom: 0; }
.v2-recipe-search-result:hover, .v2-recipe-search-result:focus-visible { background: var(--fa-surface-hover, var(--fa-accent-light, #f0f0f0)); }
.v2-recipe-search-empty { padding: var(--fa-space-2); color: var(--fa-text-muted); }

/* ---- Pied de modale recette : coûts recalculés en direct (point 5, CORRECTIONS APRÈS AUDIT RÉEL) ---- */
.v2-recipe-metrics { display: flex; gap: var(--fa-space-4); flex-wrap: wrap; padding: var(--fa-space-2) 0; border-top: 1px solid var(--fa-border); margin-top: var(--fa-space-2); }
.v2-recipe-metric { display: flex; flex-direction: column; font-size: 13px; color: var(--fa-text-muted); }
.v2-recipe-metric b { font-size: 16px; color: var(--fa-text); }

/* ---- Recettes : navigation interne Recettes/Sous-recettes + liste compacte (CORRECTIONS + SIMPLIFICATION UX, 20/08) ---- */
.v2-ref-subnav { display: flex; gap: var(--fa-space-2); margin-bottom: var(--fa-space-2); }
.v2-ref-subnav-item { padding: var(--fa-space-2) var(--fa-space-3); border: 1px solid var(--fa-border); border-radius: var(--fa-radius); background: var(--fa-surface); cursor: pointer; min-height: var(--fa-tap); }
.v2-ref-subnav-item.active { background: var(--fa-accent); color: #fff; border-color: var(--fa-accent); }
.v2-recipe-compact-row { display: flex; align-items: center; gap: var(--fa-space-3); padding: var(--fa-space-2) var(--fa-space-3); border-bottom: 1px solid var(--fa-border); flex-wrap: wrap; }
.v2-recipe-compact-row.is-warning { background: var(--fa-warning-bg, #fff8e1); }
.v2-recipe-compact-main { flex: 2 1 200px; display: flex; flex-direction: column; }
.v2-recipe-compact-name { text-align: left; background: none; border: 0; padding: 0; font-weight: 600; font-size: 15px; color: var(--fa-accent); cursor: pointer; min-height: var(--fa-tap); }
.v2-recipe-compact-name:hover, .v2-recipe-compact-name:focus-visible { text-decoration: underline; }
.v2-recipe-compact-cost { flex: 1 1 140px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.v2-recipe-compact-unknown { color: var(--fa-warning, #b26a00); }
.v2-recipe-compact-actions { flex: 0 0 auto; display: flex; gap: var(--fa-space-1); }
.v2-recipe-compact-actions .icon-btn { min-width: var(--fa-tap); min-height: var(--fa-tap); }

/* ---- Catalogue unifié : modale compacte Produit + Fournisseurs & tarifs ---- */
.v2-catalogue-subnav { margin-bottom: 0; }
.v2-catalogue-inner-head { margin-bottom: var(--fa-space-3); }
.v2-catalogue-inner-head h3 { margin: 0; font-size: 20px; }
.modal.v2-catalogue-modal { width: min(980px, calc(100vw - 32px)); max-width: 980px; max-height: min(88vh, 820px); display: flex; flex-direction: column; overflow: hidden; }
.v2-catalogue-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--fa-space-3); border-bottom: 1px solid var(--fa-border); padding-bottom: var(--fa-space-2); }
.v2-catalogue-modal-tabs { display: flex; gap: var(--fa-space-1); flex-wrap: wrap; }
.v2-catalogue-modal-body { overflow-y: auto; overflow-x: hidden; padding: var(--fa-space-3) 0; min-width: 0; }
.v2-catalogue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fa-space-2) var(--fa-space-3); }
.v2-catalogue-grid .span-2 { grid-column: span 2; }
.v2-catalogue-grid .span-3 { grid-column: 1 / -1; }
.v2-catalogue-tariff-toolbar { display: flex; justify-content: space-between; gap: var(--fa-space-2); align-items: center; margin-bottom: var(--fa-space-2); }
.v2-catalogue-tariff-card { border: 1px solid var(--fa-border); border-radius: var(--fa-radius-lg); padding: var(--fa-space-3); margin-bottom: var(--fa-space-2); background: var(--fa-surface); }
.v2-catalogue-tariff-card.is-inactive { opacity: .65; }
.v2-catalogue-tariff-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--fa-space-2); margin-bottom: var(--fa-space-2); }
.v2-catalogue-tariff-supplier { display: flex; align-items: center; gap: var(--fa-space-2); min-width: 0; }
.v2-catalogue-tariff-supplier .ui-form-input { min-width: 220px; }
.v2-catalogue-tariff-actions { display: flex; gap: var(--fa-space-1); align-items: center; }
.v2-catalogue-tariff-grid { display: grid; grid-template-columns: 1.3fr .7fr .8fr .8fr .7fr .8fr; gap: var(--fa-space-2); }
.v2-catalogue-tariff-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--fa-space-2); margin-top: var(--fa-space-2); font-size: 12px; color: var(--fa-text-muted); }
.v2-catalogue-empty { padding: var(--fa-space-4); }
.v2-catalogue-modal-actions { position: sticky; bottom: 0; background: var(--fa-surface); border-top: 1px solid var(--fa-border); padding-top: var(--fa-space-2); }
.v2-cadencier-row { min-height: 68px; }

@media (max-width: 900px) {
  .modal.v2-catalogue-modal { width: calc(100vw - 20px); max-width: calc(100vw - 20px); padding: 16px; }
  .v2-catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-catalogue-grid .span-2, .v2-catalogue-grid .span-3 { grid-column: 1 / -1; }
  .v2-catalogue-tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-catalogue-tariff-card-head { align-items: flex-start; }
  .v2-catalogue-tariff-supplier { flex: 1 1 auto; }
}
@media (max-width: 640px) {
  .modal.v2-catalogue-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; padding: 14px; }
  .v2-catalogue-modal-head { flex-direction: column; }
  .v2-catalogue-modal-tabs { width: 100%; }
  .v2-catalogue-modal-tabs > * { flex: 1; }
  .v2-catalogue-grid, .v2-catalogue-tariff-grid { grid-template-columns: 1fr; }
  .v2-catalogue-tariff-card-head, .v2-catalogue-tariff-toolbar, .v2-catalogue-tariff-foot { align-items: stretch; flex-direction: column; }
  .v2-catalogue-tariff-supplier .ui-form-input { min-width: 0; width: 100%; }
  .v2-catalogue-tariff-actions { flex-wrap: wrap; }
}

/* Catalogue v5 — fournisseur compact, aucun débordement horizontal */
.v2-catalogue-tariff-card { min-width: 0; overflow: hidden; }
.v2-catalogue-tariff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.v2-catalogue-tariff-grid > .ui-form-field { min-width: 0; width: 100%; }
.v2-catalogue-tariff-grid .ui-form-input { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 700px) {
  .v2-catalogue-tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-catalogue-tariff-card { padding: 12px; }
}
@media (max-width: 420px) {
  .v2-catalogue-tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v2-catalogue-tariff-card { padding: 10px; }
  .v2-catalogue-tariff-grid .ui-form-label { font-size: 11px; }
}

/* Administration V2 — correctif fonctionnel de navigation interne.
   Empêche les onglets hors écran de devenir inaccessibles sans imposer
   la future refonte visuelle. */
#v2admin-subnav {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
#v2admin-subnav > .v2-ref-subnav-item {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
}

/* Sur un vrai grand écran, afficher les onglets sur plusieurs lignes plutôt
   que forcer un scroll horizontal inutile. */
@media (min-width: 1000px) {
  #v2admin-subnav {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Search-select FAstock — remplace le datalist natif, notamment sur Android. */
.ui-search-select{position:relative;width:100%}
.ui-search-select-input{width:100%;box-sizing:border-box}
.ui-search-select-menu{position:absolute;z-index:10020;top:calc(100% + 4px);left:0;right:0;max-height:240px;overflow:auto;background:var(--fa-surface);border:1px solid var(--fa-border);border-radius:var(--fa-radius);box-shadow:0 10px 28px rgba(0,0,0,.16)}
.ui-search-select-option{display:block;width:100%;padding:11px 12px;border:0;border-bottom:1px solid var(--fa-border);background:var(--fa-surface);color:var(--fa-text);text-align:left;font:inherit;cursor:pointer}
.ui-search-select-option:last-child{border-bottom:0}.ui-search-select-option:hover,.ui-search-select-option:focus{background:var(--fa-bg)}
.ui-search-select-empty{padding:12px;color:var(--fa-text-muted);font-size:13px}