/* ==========================================================================
   ÉCRAN — CUISINE (KDS)

   Sa propre feuille, comme le veut la charte : un écran ajouté à la queue de
   modele-erp.css entre en conflit avec tous les autres sur la dernière ligne
   du fichier et sur la clé de cache, jamais sur le fond.

   CE N'EST NI LE COMPTOIR NI LA SALLE, ET LA DIFFÉRENCE EST PHYSIQUE
     Le caissier a l'écran sous les yeux, à trente centimètres. Le cuisinier
     l'a AU MUR, à un mètre ou deux, les mains prises, souvent dans la vapeur
     et sous une lumière crue. Trois conséquences, qui expliquent presque
     toutes les valeurs de cette feuille :

       — la plus petite chose lisible ici est plus grosse qu'ailleurs : le
         libellé d'un plat est à 1.15rem et sa quantité à 1.5rem, contre
         0.92rem sur l'addition du serveur ;
       — il n'y a QU'UN SEUL bouton par bon, haut de 64 px, et il porte le
         geste suivant — pas trois boutons dont il faudrait choisir ;
       — aucune information n'est cachée derrière un survol ou un repli : ce
         qui compte est écrit, tout le temps.

   LES JETONS --cai-* VIENNENT DE caisse.css, où .cuisine-plein-ecran est
   déclaré avec les trois autres plein-écrans du POS. Une seule source de
   vérité pour la charte du poste — les recopier ici avait déjà coûté une
   divergence à la caisse mobile.

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

   LE TEMPS EST LA SEULE COULEUR QUI CHANGE
     Un bon vire à l'ambre puis au rouge en vieillissant, et c'est le seul
     endroit où cette feuille peint hors des jetons. Ce n'est pas une
     décoration : c'est l'information que le chef cherche en levant les yeux,
     et elle doit se lire sans compter les minutes.
   ========================================================================== */

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

.cuisine-plein-ecran {
    /* La colonne d'un bon. En dessous de 300 px un libellé de plat se coupe ;
       au-dessus de 380 px un écran de 24 pouces n'en tient plus que trois. */
    --cui-colonne: 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 du cuisinier pressé. */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
}

/* ==========================================================================
   §2 — BANDEAU
   Plus maigre que celui du comptoir : le poste, le compte, l'heure. Un
   cuisinier n'a que faire du point de vente ni de la session de caisse.
   ========================================================================== */

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

.cui-marque {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cui-poste-nom {
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cui-compte {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--cai-bord);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--cai-texte-faible);
}

.cui-compte b { font-size: 1.05rem; color: var(--cai-texte); font-variant-numeric: tabular-nums; }

/* Le compte des retards ne s'affiche QUE s'il y en a : un zéro permanent
   cesse d'être lu au bout d'un service. */
.cui-compte.retard { border-color: var(--cai-danger); color: var(--cai-danger); }
.cui-compte.retard b { color: var(--cai-danger); }

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

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

.cui-outil:active { background: var(--cai-surface-2); }

.cui-horloge {
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   §3 — CHOIX DU POSTE
   Premier écran quand l'adresse n'en porte pas. Des tuiles, pas une liste
   déroulante : on l'ouvre une fois par service, avec les mains sales.
   ========================================================================== */

.cui-choix {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 2rem;
    text-align: center;
}

.cui-choix-titre { font-size: 1.4rem; font-weight: 700; }
.cui-choix-sous { color: var(--cai-texte-faible); max-width: 46ch; }

.cui-choix-grille {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

.cui-choix-tuile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 200px;
    min-height: 120px;
    padding: 1rem;
    background: var(--cai-surface);
    border: 1px solid var(--cai-bord);
    border-radius: 10px;
    color: var(--cai-texte);
    font-size: 1.15rem;
    font-weight: 700;
}

.cui-choix-tuile:active { background: var(--cai-surface-2); }
.cui-choix-tuile em { font-size: 0.78rem; font-weight: 500; font-style: normal; color: var(--cai-texte-faible); }

/* Un poste qui n'a pas d'écran est proposé quand même, mais dit ce qu'il est :
   l'ouvrir montrerait une file vide sans que personne comprenne pourquoi. */
.cui-choix-tuile.sans-ecran { opacity: 0.75; }

/* ==========================================================================
   §4 — LA FILE
   Colonnes qui s'enroulent, le plus ancien EN HAUT À GAUCHE. Pas de tri par
   statut : une cuisine sert dans l'ordre d'arrivée, et un bon pris en charge
   qui descendrait sous des bons plus récents se ferait oublier.
   ========================================================================== */

.cui-file {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.8rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--cui-colonne), 1fr));
    gap: 0.8rem;
    align-content: start;
}

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

.cui-vide i { font-size: 2.4rem; opacity: 0.5; }

/* ==========================================================================
   §5 — UN BON
   ========================================================================== */

.cui-bon {
    display: flex;
    flex-direction: column;
    background: var(--cai-surface);
    border: 1px solid var(--cai-bord);

    /* Le liseré de gauche porte l'âge du bon (§7) : épais, il se voit de loin,
       et il ne consomme aucune place en hauteur. */
    border-left: 6px solid var(--cai-bord);
    border-radius: 8px;
    overflow: hidden;
}

.cui-bon-tete {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--cai-bord);
}

.cui-bon-ou {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Les minutes, en gros et alignées : c'est le chiffre qu'on compare d'un bon
   à l'autre sans les lire un par un. */
.cui-bon-min {
    flex: 0 0 auto;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cui-bon-min small { font-size: 0.7rem; font-weight: 600; opacity: 0.7; }

.cui-bon-etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0 0.7rem 0.5rem;
}

.cui-etiq {
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--cai-bord);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cai-texte-faible);
}

/* « SUITE DE COMMANDE » : le poste a déjà reçu quelque chose pour cette table.
   Le cuisinier doit le savoir avant de croire à une commande neuve. */
.cui-etiq.rappel { border-color: var(--cai-accent); color: var(--cai-accent); }
.cui-etiq.encours { border-color: var(--cai-valider); color: var(--cai-valider); }

/* « ENTRÉES », « PLATS » : la consigne de service.
   PLEINE, ET NON CERCLÉE — c'est ce qui la sépare des trois autres étiquettes,
   qui informent, alors que celle-ci commande. Un bon lu de loin doit donner son
   service avant son âge. */
.cui-etiq.service {
    background: var(--cai-texte);
    border-color: var(--cai-texte);
    color: var(--cai-fond);
}

/* ---- Les lignes ---- */
.cui-bon-lignes {
    flex: 1 1 auto;
    padding: 0.35rem 0.7rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cui-ligne { display: flex; align-items: baseline; gap: 0.5rem; }

.cui-ligne-qte {
    flex: 0 0 auto;
    min-width: 2.2rem;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cui-ligne-corps { flex: 1 1 auto; min-width: 0; }

.cui-ligne-nom {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* La note du serveur (« sans glace », « cuisson à point ») : c'est elle qui
   fait rater un plat quand elle se lit mal. Elle est donc DISTINCTE — jamais
   la même couleur ni le même style que le libellé. */
.cui-ligne-note {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--cai-accent);
    overflow-wrap: anywhere;
}

/* Les suppléments descendent SOUS leur plat, en retrait : « 2 × Double
   fromage » se lit comme une précision du plat, pas comme un plat de plus. */
.cui-ligne-sup {
    font-size: 0.92rem;
    color: var(--cai-texte-faible);
    overflow-wrap: anywhere;
}

/* Une ligne retirée en salle reste VISIBLE, barrée : le cuisinier doit voir ce
   qu'il ne prépare plus, pas le voir disparaître entre deux coups d'œil. */
.cui-ligne.annulee { opacity: 0.45; }
.cui-ligne.annulee .cui-ligne-nom,
.cui-ligne.annulee .cui-ligne-qte { text-decoration: line-through; }

/* ---- Le geste ---- */
.cui-bon-pied { flex: 0 0 auto; padding: 0.5rem 0.7rem 0.7rem; }

/* UN SEUL BOUTON, ET IL PORTE LE GESTE SUIVANT. Proposer « prendre / prêt /
   servi » côte à côte demanderait au cuisinier de choisir — alors qu'à chaque
   instant, un bon n'a qu'une suite possible. */
.cui-action {
    width: 100%;
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--cai-surface-2);
    border: 1px solid var(--cai-bord);
    border-radius: 8px;
    color: var(--cai-texte);
    font-size: 1.15rem;
    font-weight: 800;
}

.cui-action:active { background: var(--cai-bord); }
.cui-action[disabled] { opacity: 0.5; }

.cui-action.prendre { border-color: var(--cai-accent); color: var(--cai-accent); }
.cui-action.pret { background: var(--cai-valider); border-color: var(--cai-valider); color: #fff; }
.cui-action.servi { border-color: var(--cai-valider); color: var(--cai-valider); }

/* ==========================================================================
   §6 — BON ANNULÉ
   Toutes ses lignes ont été retirées en salle. Il reste affiché le temps que
   le cuisinier le voie et l'écarte — le faire disparaître le laisserait
   préparer un plat qu'il croyait avoir lu.
   ========================================================================== */

.cui-bon.annule { opacity: 0.6; }
.cui-bon.annule .cui-bon-ou { text-decoration: line-through; }

/* ==========================================================================
   §7 — L'ÂGE D'UN BON
   La seule couleur peinte hors des jetons, et la seule information que le chef
   lit de loin. Les rgba dérivent de l'ambre et du rouge de la charte du poste,
   qui n'ont pas de jeton propre pour les fonds.
   ========================================================================== */

.cui-bon[data-age="frais"] { border-left-color: var(--cai-valider); }

.cui-bon[data-age="attention"] {
    border-left-color: #e8a33d;
    background: linear-gradient(0deg, rgba(232, 163, 61, 0.06), rgba(232, 163, 61, 0.06)), var(--cai-surface);
}

.cui-bon[data-age="retard"] {
    border-left-color: var(--cai-danger);
    background: linear-gradient(0deg, rgba(214, 69, 69, 0.10), rgba(214, 69, 69, 0.10)), var(--cai-surface);
}

.cui-bon[data-age="attention"] .cui-bon-min { color: #e8a33d; }
.cui-bon[data-age="retard"] .cui-bon-min { color: var(--cai-danger); }

/* ==========================================================================
   §8 — ÉCRANS PLUS PETITS
   Une tablette de 10 pouces posée au passe : deux colonnes, puis une. Les
   cibles ne rétrécissent JAMAIS — c'est la règle tactile du projet
   (docs/cibles-tactiles.md), et une cuisine est le pire endroit pour viser.
   ========================================================================== */

@media (max-width: 1024px) {
    .cuisine-plein-ecran { --cui-colonne: 300px; }
}

@media (max-width: 640px) {
    .cuisine-plein-ecran { --cui-colonne: 100%; }

    .cui-bandeau { flex-wrap: wrap; gap: 0.5rem 0.7rem; }
    .cui-sep { flex-basis: 100%; height: 0; }
}

/* ==========================================================================
   §12 — LA RUPTURE DU JOUR (script 1368)

   POURQUOI L'INTERRUPTEUR EST ICI, ET PAS EN SALLE
     « On est épuisé sur le poisson » est le geste d'un chef qui regarde son
     passe. Cet écran est déjà devant lui, au mur. L'obliger à traverser la
     salle pour éteindre un plat, c'est garantir qu'il ne le fera pas — et
     qu'il criera à la place, ce que ce lot cherche justement à remplacer.

   MÊMES RÈGLES QUE LE RESTE DE CETTE FEUILLE : rien sous 44 px, aucun :hover,
   des libellés lisibles à un mètre. Le chef a les mains prises, ici aussi.
   ========================================================================== */

/* Le compte des ruptures, dans le bandeau. Il ne s'affiche que s'il y en a :
   un zéro permanent cesse d'être lu au bout d'un service (même règle que le
   compte des retards, §2). */
.cui-compte-mini {
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--cai-texte);
    color: var(--cai-fond);
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cui-outil.actif { border-color: var(--cai-texte); }

.cui-voile {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--cai-voile);
}

.cui-panneau {
    width: min(720px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cai-surface);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 6px;
    overflow: hidden;
}

.cui-panneau-tete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--cai-bord);
}

.cui-panneau-titre {
    font-size: 1.15rem;
    font-weight: 800;
}

.cui-panneau-sous {
    font-size: 0.78rem;
    color: var(--cai-texte-faible);
}

.cui-panneau-corps {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.8rem 0.9rem;
}

.cui-rup-titre {
    margin: 0.5rem 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cai-texte-faible);
}

.cui-rup-titre:first-child { margin-top: 0; }

/* Une ligne d'épuisé : ce qu'on ne sert plus, depuis quand, et par qui. L'heure
   compte — c'est elle que le gérant relira pour savoir quand la carte s'est
   réduite. */
.cui-rup {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.35rem;
    background: var(--cai-fond);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
}

.cui-rup-corps { flex: 1 1 auto; min-width: 0; }

.cui-rup-nom {
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: line-through;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cui-rup-detail {
    font-size: 0.75rem;
    color: var(--cai-texte-faible);
    font-variant-numeric: tabular-nums;
}

/* « J'en refais » est le seul geste peint de ce panneau : c'est celui qui rend
   un plat à la carte, et le seul qu'on cherche des yeux. */
.cui-rup-geste {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 0.9rem;
    background: var(--cai-valider);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.cui-rup-geste:active { filter: brightness(1.15); }
.cui-rup-geste:disabled { background: var(--cai-bord); color: var(--cai-texte-faible); }

.cui-rup-recherche {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.7rem;
    min-height: 52px;
    background: var(--cai-fond);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    color: var(--cai-texte-faible);
}

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

.cui-rup-vide {
    padding: 0.8rem 0;
    color: var(--cai-texte-faible);
    font-size: 0.85rem;
    text-align: center;
}

.cui-rup-grille {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.4rem;
}

.cui-rup-tuile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: 64px;
    padding: 0.5rem 0.6rem;
    background: var(--cai-surface-2);
    color: var(--cai-texte);
    border: 1px solid var(--cai-bord);
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
}

.cui-rup-tuile:active { background: var(--cai-bord); }

.cui-rup-tuile span {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cai-texte-faible);
}

/* Déjà épuisé : la tuile se lit, elle ne se touche plus. */
.cui-rup-tuile.epuise {
    opacity: 0.55;
    text-decoration: line-through;
}

@media (max-width: 720px) {
    .cui-rup { flex-wrap: wrap; }
    .cui-rup-geste { width: 100%; }
    .cui-rup-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}