/* ==========================================================================
   INV-CPT — L'INVENTAIRE DU COMPTOIR (/caisse/inventaire)

   POURQUOI SA PROPRE FEUILLE
     Règle du dépôt : un écran, une feuille, un <link> dans App.razor. Ces
     styles-là ont fini à la queue de modele-erp.css pendant des mois, où
     chaque branche entrait en conflit avec toutes les autres sur la dernière
     ligne du fichier — jamais sur le fond, toujours sur la position.

   ELLE ARRIVE APRÈS caisse.css, ET CE N'EST PAS UN DÉTAIL
     Elle emprunte au poste ses toasts (.caisse-toast*) et ses jetons --cai-*,
     où .inventaire-plein-ecran est déclaré avec les autres plein-écrans du POS.
     Une seule source de vérité pour la charte du poste — les recopier avait
     déjà coûté une divergence à la caisse mobile, puis au comptoir.

   CE QUE .inv-* PORTE, ET QUE NI LE COMPTOIR NI LA SALLE N'ONT
     Une LISTE DE COMPTAGE. Ni des tuiles (on ne choisit pas un article, on les
     parcourt tous), ni un plan (rien n'a de place sur un écran). Une ligne par
     référence, haute de 72 px, avec le chiffre compté à droite — la colonne que
     l'œil descend pour savoir ce qui reste.

     Et une JAUGE D'AVANCEMENT au bandeau : c'est la seule question que se pose
     celui qui compte, « est-ce que j'ai fini ? ». En bas d'une colonne qu'il
     faut faire défiler, elle ne servirait à rien.

   L'ÉCRAN EST TENU D'UNE MAIN, DEVANT L'ÉTAGÈRE
     L'autre déplace les bouteilles. D'où : 72 px pour une ligne, 56 px pour
     tout le reste, un pavé numérique de 64 px par touche — au-dessus de la
     règle des 44 px (docs/cibles-tactiles.md), parce qu'ici on vise sans
     regarder l'écran.

   AUCUN :hover, AUCUNE TRANSITION
     Règle d'origine du POS : pas de souris, et un retour instantané. On utilise
     :active, qui correspond au doigt posé.

   AUCUNE COULEUR EN DUR : tout passe par --cai-* / --et-*.
   ========================================================================== */

/* ==========================================================================
   §1 — PLEIN ÉCRAN
   ========================================================================== */

.inventaire-plein-ecran {
    /* La colonne de droite. En dessous de 300 px un nom de vin se coupe ;
       au-dessus de 380 px la feuille perd de la place là où on travaille. */
    --inv-panneau: 340px;

    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--cai-fond);
    color: var(--cai-texte);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Un double appui rapide ne doit pas zoomer : le geste de celui qui compte
       vite, une bouteille dans l'autre main. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

/* ==========================================================================
   §2 — BANDEAU
   ========================================================================== */

.inv-bandeau {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 56px;
    padding: 0 0.75rem;
    background: var(--cai-surface);
    border-bottom: 1px solid var(--cai-bord);
}

.inv-marque {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cai-texte);
}

.inv-lieu {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.inv-lieu > span {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-lieu > em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--cai-texte-faible);
}

/* ---- L'état du comptage ---- */
.inv-etat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--cai-bord);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--cai-texte-faible);
    white-space: nowrap;
}

.inv-etat.en-cours { color: var(--cai-valider); border-color: var(--cai-valider); }
.inv-etat.off      { color: var(--cai-texte-faible); }

.inv-etat .et-pastille {
    width: 8px; height: 8px; border-radius: 999px;
    background: currentColor;
    display: inline-block;
}

/* ---- L'avancement : la seule question de celui qui compte ---- */
.inv-avancement {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--cai-texte-faible);
    white-space: nowrap;
}

.inv-avancement b { color: var(--cai-texte); font-size: 1.05rem; }

.inv-jauge {
    display: inline-block;
    width: 120px;
    height: 8px;
    border-radius: 999px;
    background: var(--cai-surface-2);
    overflow: hidden;
}

.inv-jauge > span {
    display: block;
    height: 100%;
    background: var(--cai-valider);
}

.inv-sep { flex: 1 1 auto; }

.inv-outil {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0 0.7rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    font-size: 0.85rem;
    text-decoration: none;
    cursor: pointer;
}

.inv-outil:active { background: var(--cai-bord); }
.inv-outil:disabled { opacity: 0.5; cursor: default; }

.inv-horloge {
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cai-texte);
}

/* ==========================================================================
   §3 — CORPS : la feuille à gauche, le panneau à droite
   ========================================================================== */

.inv-corps {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.inv-feuille {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* ---- Le point de vente, quand il y en a plusieurs ---- */
.inv-pdv {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--cai-bord);
}

.inv-pdv-chip {
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid var(--cai-bord);
    border-radius: 999px;
    background: var(--cai-surface);
    color: var(--cai-texte-faible);
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
}

.inv-pdv-chip.actif {
    background: var(--cai-surface-2);
    border-color: var(--cai-accent);
    color: var(--cai-texte);
    font-weight: 600;
}

/* ==========================================================================
   §4 — ACCUEIL : rien d'ouvert
   ========================================================================== */

.inv-accueil {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 2rem;
    text-align: center;
}

.inv-accueil > i {
    font-size: 3rem;
    color: var(--cai-texte-faible);
}

.inv-accueil h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.inv-accueil p {
    margin: 0;
    max-width: 46ch;
    color: var(--cai-texte-faible);
    line-height: 1.5;
}

.inv-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 52ch;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-surface);
    color: var(--cai-texte-faible);
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
}

.inv-note.alerte {
    border-color: var(--cai-danger);
    color: var(--cai-texte);
}

/* ==========================================================================
   §5 — FILTRES
   ========================================================================== */

.inv-filtres {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--cai-bord);
}

.inv-seg {
    display: inline-flex;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    overflow: hidden;
}

.inv-seg > button {
    min-height: 44px;
    padding: 0 0.9rem;
    border: 0;
    border-right: 1px solid var(--cai-bord);
    background: var(--cai-surface);
    color: var(--cai-texte-faible);
    font-size: 0.9rem;
    cursor: pointer;
}

.inv-seg > button:last-child { border-right: 0; }

.inv-seg > button.actif {
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    font-weight: 600;
}

.inv-recherche {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-surface);
    color: var(--cai-texte-faible);
}

.inv-recherche input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--cai-texte);
    font-size: 1rem;
    outline: none;
}

/* ==========================================================================
   §6 — LES LIGNES DE COMPTAGE
   Le cœur de l'écran : une ligne par référence, le chiffre à droite.
   ========================================================================== */

.inv-lignes {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.inv-ligne {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 72px;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-bottom: 1px solid var(--cai-bord);
    background: transparent;
    color: var(--cai-texte);
    text-align: left;
    cursor: pointer;
}

.inv-ligne:active { background: var(--cai-surface-2); }

/*  UNE LIGNE COMPTÉE S'EFFACE SANS DISPARAÎTRE : elle reste lisible pour qu'on
    puisse y revenir (un recomptage), mais elle cesse d'attirer l'œil — c'est ce
    qui reste à faire qu'on doit voir. */
.inv-ligne.faite .inv-ligne-nom { color: var(--cai-texte-faible); }

.inv-ligne-corps {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.inv-ligne-nom {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
}

.inv-ligne-sous {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--cai-texte-faible);
}

/*  LE FAIT SUR L'ÉTAGÈRE, ET NON LE THÉORIQUE. Il porte l'accent parce qu'il
    change le geste : sans lui, le barman compte une bouteille qui n'est plus en
    stock, et la validation la recrée. Le théorique, lui, n'apparaît nulle part —
    la campagne est aveugle. */
.inv-entamee-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--cai-accent);
    border-radius: 999px;
    color: var(--cai-accent);
    font-weight: 600;
}

.inv-ligne-valeur {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 72px;
    font-variant-numeric: tabular-nums;
}

.inv-ligne-valeur b {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cai-valider);
}

.inv-ligne-valeur em {
    font-style: normal;
    font-size: 0.7rem;
    color: var(--cai-texte-faible);
}

.inv-a-compter {
    font-size: 1.35rem;
    color: var(--cai-texte-faible);
}

.inv-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--cai-texte-faible);
}

.inv-vide > i { font-size: 2rem; }

/* ==========================================================================
   §7 — LE PANNEAU
   ========================================================================== */

.inv-panneau {
    flex: 0 0 var(--inv-panneau);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    padding: 0.75rem;
    background: var(--cai-surface);
    border-left: 1px solid var(--cai-bord);
    overflow-y: auto;
}

.inv-bloc {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-surface-2);
}

.inv-bloc.grandit { flex: 1 1 auto; min-height: 0; }

.inv-bloc-tete {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.inv-compte-mini {
    margin-left: auto;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--cai-accent);
    color: var(--cai-fond);
    font-size: 0.75rem;
    font-weight: 700;
}

.inv-bloc-note,
.inv-bloc-vide {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--cai-texte-faible);
}

/* ---- Comment on compte : une bascule, pour toute la feuille ---- */
.inv-bascule {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.inv-bascule input {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    accent-color: var(--cai-accent);
}

.inv-bascule span { display: flex; flex-direction: column; gap: 0.25rem; }
.inv-bascule b { font-size: 0.9rem; font-weight: 600; color: var(--cai-texte); }

.inv-bascule em {
    font-style: normal;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--cai-texte-faible);
}

/* ---- Les entamées ---- */
.inv-entamees {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.inv-entamee {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.1rem 0.5rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-surface);
}

.inv-entamee-nom {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-entamee-nb {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--cai-accent);
}

.inv-entamee-reste {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: var(--cai-texte-faible);
}

/* ==========================================================================
   §8 — L'ENGAGEMENT
   Un seul geste plein par état, jamais deux boutons pleins côte à côte.
   ========================================================================== */

.inv-engager {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 0;
    background: var(--cai-accent);
    color: var(--cai-fond);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.inv-engager:active { filter: brightness(0.92); }
.inv-engager:disabled { opacity: 0.45; cursor: default; }

/*  La clôture n'est pas l'engagement de l'écran : l'engagement, c'est compter.
    Elle garde donc la taille et perd le plein — sinon deux boutons pleins se
    disputeraient le pouce, et c'est le mauvais qui gagnerait un soir de rush. */
.inv-engager.sobre {
    background: transparent;
    border: 1px solid var(--cai-accent);
    color: var(--cai-accent);
}

.inv-secondaire {
    min-height: 56px;
    padding: 0 1.2rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: transparent;
    color: var(--cai-texte);
    font-size: 1rem;
    cursor: pointer;
}

.inv-secondaire:active { background: var(--cai-surface-2); }

/* ==========================================================================
   §9 — LE PAVÉ DE COMPTAGE (feuille montante)

   UN PAVÉ, ET NON UN <input type="number">
     Le clavier système couvre la moitié de l'écran — et la liste avec. Celui qui
     compte perdrait de vue la ligne qu'il saisit. Même parti que le comptoir.
   ========================================================================== */

.inv-voile {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--cai-voile);
}

.inv-feuille-montante,
.inv-dialogue {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(520px, 100%);
    max-height: 92vh;
    padding: 1rem;
    background: var(--cai-modale);
    color: var(--cai-texte);
    border: 1px solid var(--cai-modale-bord);
    border-radius: 0;
    box-shadow: var(--cai-modale-ombre);
    overflow-y: auto;
}

.inv-dialogue {
    align-self: center;
    margin-bottom: auto;
    margin-top: auto;
    border-radius: 0;
}

.inv-pave-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.inv-pave-titre { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.inv-pave-sous  { font-size: 0.8rem; color: var(--cai-texte-faible); }

.inv-fermer {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: transparent;
    color: var(--cai-texte);
    cursor: pointer;
}

.inv-fermer:active { background: var(--cai-surface-2); }

/*  LE RAPPEL DES ENTAMÉES, à l'endroit et au moment où il change le geste :
    sous les yeux de celui qui va taper un chiffre, et pas une ligne plus tôt. */
.inv-pave-entamees {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--cai-accent);
    border-radius: 0;
    color: var(--cai-texte);
    font-size: 0.9rem;
    line-height: 1.4;
}

.inv-pave-entamees > i { color: var(--cai-accent); font-size: 1.1rem; }

.inv-pave-affichage {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-modale-creux);
}

.inv-pave-chiffre {
    font-size: 2.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.inv-pave-unite { font-size: 0.85rem; color: var(--cai-texte-faible); }

.inv-pave-note {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--cai-texte-faible);
}

.inv-pave {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.inv-touche {
    min-height: var(--cai-touche-h);
    border: 1px solid var(--cai-bord);
    border-radius: 0;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
}

.inv-touche:active { background: var(--cai-bord); }
.inv-touche.efface { color: var(--cai-danger); }

/* ---- Le dialogue de clôture ---- */
.inv-dialogue-texte {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--cai-texte-faible);
}

.inv-dialogue-texte b { color: var(--cai-texte); }

.inv-dialogue-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

/* ==========================================================================
   §10 — PALIERS (docs/conventions-responsive.md)
   Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue.
   Géométrie seule — aucune couleur ici.
   ========================================================================== */

/*  Sous 1024 px : le panneau passe SOUS la feuille. Une tablette en portrait
    tenue devant l'étagère n'a pas la largeur pour deux colonnes, et c'est la
    liste qui doit gagner — le panneau se consulte, la liste se travaille. */
@media (max-width: 1024px) {
    .inv-corps { flex-direction: column; }

    .inv-panneau {
        flex: 0 0 auto;
        max-height: 42vh;
        border-left: 0;
        border-top: 1px solid var(--cai-bord);
    }

    .inv-feuille-montante { width: 100%; }
}

/*  Sous 720 px : le bandeau perd les libellés de ses outils, jamais leur
    surface — un bouton ne rétrécit pas (docs/cibles-tactiles.md). La jauge
    disparaît avant le compte : « 12 / 48 » se lit, une barre de 40 px non. */
@media (max-width: 720px) {
    .inv-outil { padding: 0 0.6rem; font-size: 0; gap: 0; }
    .inv-outil > i { font-size: 1.1rem; }

    .inv-jauge { display: none; }
    .inv-lieu > em { display: none; }
}

/*  Sous 560 px : on rend les marges. La ligne de comptage garde ses 72 px —
    c'est la cible du doigt, et c'est la dernière chose qu'on rogne. */
@media (max-width: 560px) {
    .inv-bandeau { gap: 0.4rem; padding: 0 0.4rem; }
    .inv-ligne   { padding: 0.5rem 0.5rem; }
    .inv-panneau { padding: 0.5rem; }
    .inv-filtres { flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; }
    .inv-etat    { display: none; }
}