/* ==========================================================================
   FOOD-01 — LE COÛT MATIÈRE (/app/pos/cout-matiere)

   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.

   CE QUE .cm-* PORTE, ET QUE LE GABARIT N'A PAS
     — LA PASTILLE DE VERDICT, qui doit se lire d'un coup d'œil dans une colonne
       de trente lignes : c'est elle qui dit où aller en cuisine ;
     — LA TUILE DE PERTE, dont la couleur suit le verdict — le seul endroit de
       l'application où un indicateur change de teinte selon son contenu ;
     — LA MENTION « ESTIMÉ », minuscule et permanente, qui distingue un calcul
       d'un relevé sur chaque ligne concernée ;
     — LE TIRET DE L'ABSENCE : un ratio qui n'existe pas ne s'affiche pas « 0 % ».

   AUCUNE COULEUR EN DUR : tout passe par --et-*. Les quatre teintes de verdict
   reprennent celles des états du dépôt (succès, avertissement, danger, info) —
   un gérant qui lit un rouge ici doit y reconnaître le rouge d'ailleurs.
   ========================================================================== */

/* ==========================================================================
   §1 — LES CHAMPS DE PÉRIODE, dans la barre de portée
   ========================================================================== */

.cm-champ {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--et-muted);
}

.cm-champ > span {
    white-space: nowrap;
}

.cm-champ input,
.cm-champ select {
    min-height: 42px;
    padding: 0 0.6rem;
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    background: var(--et-surface);
    color: var(--et-ink);
    font-size: 0.9rem;
}

.cm-champ input[type="number"] { width: 96px; }
.cm-champ select { min-width: 220px; }

/* ==========================================================================
   §2 — LA TUILE DE PERTE
   Le seul indicateur du dépôt dont la teinte suit son contenu. C'est assumé :
   la perte non expliquée est la raison d'être de l'écran, et un gérant doit
   savoir en entrant s'il a un problème.
   ========================================================================== */

.mx-ind.cm-ind-normal      { border-left: 3px solid var(--et-succes); }
.mx-ind.cm-ind-surveiller  { border-left: 3px solid var(--et-avertissement-mark); }
.mx-ind.cm-ind-fuite       { border-left: 3px solid var(--et-danger); }
.mx-ind.cm-ind-excedent    { border-left: 3px solid var(--et-info); }
.mx-ind.cm-ind-indetermine { border-left: 3px solid var(--et-hairline); }

/* ==========================================================================
   §3 — LES PASTILLES DE VERDICT
   ========================================================================== */

.cm-pastille {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.cm-normal      { background: var(--et-succes-bg);    color: var(--et-succes-ink); }
.cm-surveiller  { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
.cm-fuite       { background: var(--et-danger-badge-bg);    color: var(--et-danger-ink); }

/*  UN EXCÉDENT N'EST PAS UNE BONNE NOUVELLE, et sa pastille ne doit donc pas
    être verte : trouver plus de farine que prévu signifie qu'une recette est
    fausse, qu'une réception n'a pas été saisie, ou qu'on a compté deux fois.
    Noyé dans le vert, cela ne se règle jamais. */
.cm-excedent    { background: var(--et-info-bg);      color: var(--et-info); }

.cm-indetermine { background: var(--et-surface-2);      color: var(--et-muted); }

/* ==========================================================================
   §4 — LES TABLEAUX
   ========================================================================== */

/*  Sept à huit colonnes de chiffres : au-delà de 960 px la table défile dans son
    propre cadre plutôt que de faire défiler la page entière
    (docs/tables-larges.md, docs/conventions-responsive.md). */
.cm-tableau-cadre {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cm-tbl { min-width: 900px; }

.cm-tbl th,
.cm-tbl td { vertical-align: middle; }

.cm-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cm-nom {
    font-weight: 600;
    line-height: 1.25;
}

.cm-code {
    font-size: 0.75rem;
    color: var(--et-muted);
}

.cm-bon     { color: var(--et-succes-ink); font-weight: 600; }
.cm-mauvais { color: var(--et-danger-ink); font-weight: 600; }

/*  L'ABSENCE N'EST PAS UN ZÉRO. Un ratio sans chiffre d'affaires, une dérive
    sans consommation théorique : le tiret dit « on ne sait pas », et c'est une
    information — souvent la plus intéressante du tableau. */
.cm-absent { color: var(--et-muted); }

/*  « ESTIMÉ » : petit, permanent, jamais derrière un survol. Un chiffre présenté
    comme un relevé alors qu'il est un calcul finit par être opposé à quelqu'un. */
.cm-estime {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--et-muted);
}

.cm-sous {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--et-muted);
}

.cm-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--et-muted);
    text-align: center;
}

.cm-vide > i { font-size: 1.8rem; }

/* ==========================================================================
   §5 — LE DIALOGUE DES CIBLES
   ========================================================================== */

.cm-voile {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .45);
}

.cm-dialogue {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(760px, 100%);
    max-height: 88vh;
    padding: 1.25rem;
    background: var(--et-surface);
    color: var(--et-ink);
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    overflow-y: auto;
}

.cm-dialogue-tete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.cm-dialogue-sous {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--et-muted);
}

.cm-fermer {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    background: transparent;
    color: var(--et-ink);
    cursor: pointer;
}

.cm-saisie {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--et-hairline);
}

.cm-dialogue-note {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--et-hairline);
    border-radius: 0;
    background: var(--et-surface-2);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--et-muted);
}

/* ==========================================================================
   §6 — PALIERS (docs/conventions-responsive.md)
   Recette à 390 / 768 / 1280 / 1600 px. Géométrie seule — aucune couleur ici.
   ========================================================================== */

/*  Sous 1024 px : les champs de période passent à la ligne plutôt que de
    comprimer les boutons de la barre de portée — un bouton ne rétrécit pas
    (docs/cibles-tactiles.md). */
@media (max-width: 1024px) {
    .pos-portee { flex-wrap: wrap; }
    .cm-champ select { min-width: 160px; }
}

/*  Sous 720 px : le dialogue prend toute la largeur et sa saisie s'empile.
    Les cibles se posent rarement depuis un téléphone, mais s'y consultent. */
@media (max-width: 720px) {
    .cm-dialogue { max-height: 94vh; padding: 0.9rem; }
    .cm-saisie { flex-direction: column; align-items: stretch; }
    .cm-champ { justify-content: space-between; }
    .cm-champ input[type="number"] { width: 100%; }
    .cm-champ select { min-width: 0; width: 100%; }
}