/* La caisse.
   ────────────────────────────────────────────────────────────────────────────
   Un écran posé dans une salle, à hauteur d'yeux, lu par quelqu'un qui s'arrête
   devant lui. Rien à voir avec le tableau de cuisine, qui se lit à trois mètres
   à travers la vapeur : la caisse porte la palette de la plateforme — le tour 6 —
   et l'exception haute-visibilité du § 2 ne la concerne pas.

   Presque rien ici, et c'est voulu. Tout ce qui compose ces deux écrans est du
   MudBlazor thémé ; ce fichier ne pose que la barre du haut, qui n'a pas
   d'équivalent MudBlazor sans traîner un tiroir et un menu de compte dont une
   caisse n'a que faire. */

.till {
    min-height: 100vh;
    background: var(--mud-palette-background, #f6f1e7);
}

/* La largeur utile.
   ────────────────────────────────────────────────────────────────────────────
   Ces écrans ont été écrits pour une tablette et n'étaient bornés par rien : sur
   un moniteur large, le nom du plat absorbait toute la place et les champs
   partaient à un mètre de lui. Un formulaire ne se lit pas mieux parce qu'il est
   plus long — il se lit moins bien, parce que l'œil doit refaire le trajet du
   nom au montant à chaque ligne. */
.till-page {
    max-width: 1500px;
    margin: 0 auto;
}

.till-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;

    /* Le fond traverse tout l'écran, le contenu s'arrête où s'arrête la page. Une
       barre bornée laisserait une bande de couleur flottante ; un contenu non
       borné mettrait le nom de la salle et les onglets aux deux extrémités d'un
       moniteur, à un mètre l'un de l'autre. */
    padding: .75rem max(1rem, calc((100% - 1500px) / 2));

    background: var(--mud-palette-surface, #fffdf8);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0d8c8);

    /* Collante : les deux onglets et le nom de la salle sont ce qui situe la
       personne, et une ardoise de vingt lignes les ferait disparaître au premier
       défilement. */
    position: sticky;
    top: 0;
    z-index: 10;
}

.till-place {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--mud-palette-text-primary, #241c16);
}

/* Le montant d'une ligne à peser : chiffres à chasse fixe, parce que la colonne
   des totaux se lit en la survolant et qu'un « 1 » étroit décale tout. */
.till-amount {
    font-variant-numeric: tabular-nums;
}

/* Les lignes, en colonnes quand il y a la place.
   ────────────────────────────────────────────────────────────────────────────
   Une ardoise de vingt plats tient sur un écran large en deux colonnes, et c'est
   ce qu'on veut : moins de défilement pendant un service. `auto-fill` avec un
   minimum de 32rem décide seul — une colonne sur une tablette, deux au-delà de
   ~1100 px — sans point de rupture à tenir à jour.

   Ce n'est pas un tableau. Chaque plat reste une carte avec ses champs à lui :
   sur un écran de caisse on remplit une ligne, on valide, on passe à la suivante,
   et une grille de cellules alignées ferait perdre laquelle on est en train de
   modifier. */
.till-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
    gap: 0 1rem;
    align-items: start;
}

/* Un titre de section traverse la grille : « sans prix sur la carte » annonce ce
   qui suit, et le laisser dans une cellule le mettrait à côté d'un plat plutôt
   qu'au-dessus des deux colonnes. */
.till-rows > .till-heading {
    grid-column: 1 / -1;
}

/* Le nom cesse de tout absorber. Sans plafond il prenait la largeur restante et
   repoussait les champs à l'autre bout de la ligne. */
.till-name {
    flex: 1 1 12rem;
    min-width: 10rem;
    max-width: 20rem;
}