/* ============================================================
   MyWMS — ecrans des terminaux (Android / Zebra)
   ------------------------------------------------------------
   AUCUNE COULEUR EN DUR : tout passe par les variables du theme
   (tokens-<client>.css), comme wms.css. Clair et sombre suivent le theme.

   Regles d'un ecran de terminal, tenues ici :
     - des cibles d'au moins 56 px de haut : on tape avec un gant ;
     - du texte d'au moins 18 px, et 22 px dans les champs : on lit a bout de bras ;
     - une information principale par ecran, en tres grand (l'emplacement propose) ;
     - les messages en haut, en grand : un cariste ne cherche pas un toast.
   ============================================================ */

.t-corps { font-size: 18px; line-height: 1.4; min-height: 100vh; background: var(--sib-page);
           color: var(--sib-ink); -webkit-tap-highlight-color: transparent; }

/* ======================== bandeau ======================== */

.t-barre { position: sticky; top: 0; z-index: 20; display: grid;
           grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sib-3);
           padding: var(--sib-2) var(--sib-3); background: var(--sib-bandeau); color: var(--sib-sur-bandeau); }
.t-barre__menu, .t-barre__marque { display: inline-flex; align-items: center; min-height: 48px;
                 padding: 0 var(--sib-4); border-radius: var(--sib-r-pill); font-weight: 700;
                 font-size: 18px; text-decoration: none; color: var(--sib-sur-bandeau); }
.t-barre__menu { border: 2px solid var(--sib-bandeau-filet); }
.t-barre__menu:active { background: var(--sib-bandeau-survol); }
.t-barre__titre { margin: 0; font-size: 20px; font-weight: 700; color: var(--sib-sur-bandeau);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-barre__qui { margin: 0; display: flex; flex-direction: column; align-items: flex-end;
                font-size: 14px; line-height: 1.25; color: var(--sib-sur-bandeau-2); }

/* ======================== page ======================== */

.t-page { max-width: 760px; margin: 0 auto; padding: var(--sib-3) var(--sib-3) var(--sib-7);
          display: flex; flex-direction: column; gap: var(--sib-4); }
.t-page h2 { margin: 0; font-size: 22px; }
.t-page p { margin: 0; }

.t-carte { background: var(--sib-surface); border: var(--sib-bd); border-radius: var(--sib-r);
           padding: var(--sib-4); display: flex; flex-direction: column; gap: var(--sib-3); }
.t-carte--accent { border-color: var(--sib-orange); }

/* ======================== messages ======================== */

.t-alerte { padding: var(--sib-4); border-radius: var(--sib-r-sm); border: 2px solid; border-inline-start-width: 8px;
            font-size: 20px; font-weight: 700; line-height: 1.35; }
.t-alerte--erreur { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }
.t-alerte--succes { color: var(--sib-good); background: var(--sib-good-bg); border-color: var(--sib-good-br); }
.t-alerte--info { color: var(--sib-neutre); background: var(--sib-neutre-bg); border-color: var(--sib-neutre-br); }
.t-alerte--attention { color: var(--sib-warn); background: var(--sib-warn-bg); border-color: var(--sib-warn-br); }

/* ======================== champs ======================== */

.t-form { display: flex; flex-direction: column; gap: var(--sib-3); margin: 0; }
.t-champ { display: flex; flex-direction: column; gap: 6px; }
.t-champ__libelle { font-size: 16px; font-weight: 700; color: var(--sib-ink-2); }
.t-champ__aide { font-size: 15px; color: var(--sib-ink-3); }
.t-champ input, .t-champ select {
  width: 100%; min-height: 60px; padding: 10px var(--sib-3);
  font: 600 22px/1.2 var(--sib-font); color: var(--sib-ink); background: var(--sib-surface);
  border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r-sm);
}
.t-champ input:focus, .t-champ select:focus { outline: none; box-shadow: var(--sib-focus); border-color: var(--sib-bleu); }
.t-champ input[data-scan] { border-width: 3px; border-color: var(--sib-orange); letter-spacing: .02em; }
.t-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sib-3); }

/* La quantite en cartons + unites (PCB fournisseur, 12/10/2026) : deux grands champs sous un libelle, le total dessous ;
   et, a cote d'une quantite a prendre, sa decomposition en palettes, cartons et unites. */
.t-quantite { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.t-quantite > legend { padding: 0; margin-bottom: 6px; }
/* Cartons et unites restent cote a cote, meme sur un petit ecran : deux nombres courts. */
.t-quantite .t-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-quantite__total { min-height: 1.4em; font-size: 20px; font-weight: 800; color: var(--sib-ink); font-variant-numeric: tabular-nums; }
.t-colisage { font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--sib-ink); }
.t-colisage span { white-space: nowrap; }

.t-scan { display: flex; gap: var(--sib-2); align-items: stretch; }
.t-scan input { flex: 1; min-width: 0; }
.t-scan__clavier { flex: 0 0 60px; min-height: 60px; font-size: 26px; border-radius: var(--sib-r-sm);
                   border: 2px solid var(--sib-border-fort); background: var(--sib-surface-2);
                   color: var(--sib-ink); cursor: pointer; }
.t-scan__clavier[aria-pressed="true"] { background: var(--sib-bandeau); color: var(--sib-sur-bandeau); }

/* ======================== boutons ======================== */

.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sib-2);
         min-height: 60px; padding: 0 var(--sib-5); border-radius: var(--sib-r-sm);
         border: 2px solid transparent; font: 700 20px/1.1 var(--sib-font); text-decoration: none;
         text-align: center; cursor: pointer; width: 100%; }
.t-btn--principal { background: var(--sib-grad-orange); color: var(--sib-on-orange); }
.t-btn--principal:active { background: var(--sib-grad-orange-survol); }
.t-btn--second { background: var(--sib-surface-2); color: var(--sib-ink); border-color: var(--sib-border-fort); }
.t-btn--second:active { background: var(--sib-survol); }
.t-btn--danger { background: var(--sib-crit-bg); color: var(--sib-crit); border-color: var(--sib-crit-br); }
.t-btn:disabled { opacity: .5; cursor: not-allowed; }
.t-btn__detail { display: block; font-size: 15px; font-weight: 500; }
.t-actions { display: grid; gap: var(--sib-3); }
.t-actions--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-actions--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ======================== menu ======================== */

.t-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sib-3); }
.t-tuile { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px;
           min-height: 110px; padding: var(--sib-4); border-radius: var(--sib-r); border: var(--sib-bd);
           background: var(--sib-surface); color: var(--sib-ink); text-decoration: none;
           font-size: 22px; font-weight: 800; }
.t-tuile:active { background: var(--sib-survol); }
button.t-tuile { width: 100%; height: 100%; font-family: inherit; text-align: start; cursor: pointer; }
.t-tuile--sortie { background: var(--sib-surface-2); }
.t-tuile__detail { font-size: 15px; font-weight: 500; color: var(--sib-ink-2); }
.t-tuile__compte { position: absolute; top: var(--sib-3); inset-inline-end: var(--sib-3); min-width: 36px; height: 36px;
                   padding: 0 10px; border-radius: var(--sib-r-pill); display: inline-flex;
                   align-items: center; justify-content: center; font-size: 18px; font-weight: 800;
                   background: var(--sib-orange); color: var(--sib-on-orange); }

/* ======================== l'information principale ======================== */

.t-grand { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: .02em;
           color: var(--sib-ink); word-break: break-all; }
.t-moyen { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--sib-ink); }
.t-raison { font-size: 17px; color: var(--sib-ink-2); }
.t-etiquette { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
               color: var(--sib-ink-3); }

/* ======================== listes ======================== */

.t-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sib-2); }
.t-item { display: flex; flex-direction: column; gap: 2px; padding: var(--sib-3); border-radius: var(--sib-r-sm);
          border: 2px solid var(--sib-border); background: var(--sib-surface); color: var(--sib-ink);
          text-decoration: none; text-align: start; font: inherit; width: 100%; }
a.t-item:active, button.t-item:active { background: var(--sib-survol); }
button.t-item { cursor: pointer; }
.t-item--fait { border-style: dashed; color: var(--sib-ink-3); }
.t-item__haut { display: flex; justify-content: space-between; gap: var(--sib-3); align-items: baseline; }
.t-item__titre { font-weight: 800; font-size: 19px; }
.t-item__qte { font-weight: 900; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-item__detail { font-size: 15px; color: var(--sib-ink-2); }
.t-item__actions { display: flex; justify-content: flex-end; margin-top: var(--sib-2); }
.t-item__actions .t-btn { width: auto; min-height: 48px; font-size: 17px; }

.t-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--sib-r-pill);
           border: 1px solid; font-size: 14px; font-weight: 700; white-space: nowrap; }
.t-badge--disponible { color: var(--sib-good); background: var(--sib-good-bg); border-color: var(--sib-good-br); }
.t-badge--bloque { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }
.t-badge--controle, .t-badge--litige { color: var(--sib-warn); background: var(--sib-warn-bg); border-color: var(--sib-warn-br); }
.t-badge--neutre { color: var(--sib-neutre); background: var(--sib-neutre-bg); border-color: var(--sib-neutre-br); }

.t-faible { color: var(--sib-ink-3); font-size: 15px; }
.t-vide { padding: var(--sib-5); text-align: center; color: var(--sib-ink-3); font-size: 18px;
          border: 2px dashed var(--sib-border); border-radius: var(--sib-r); }
.t-total { display: flex; justify-content: space-between; font-weight: 800; font-size: 19px;
           padding: var(--sib-2) var(--sib-3); }
.t-sep { border: 0; border-top: 2px solid var(--sib-border-2); margin: var(--sib-2) 0; width: 100%; }

@media (max-width: 380px) {
  .t-tuiles, .t-actions--deux, .t-duo { grid-template-columns: 1fr; }
  .t-grand { font-size: 42px; }
}

/* Une case a cocher au terminal, et une section repliee (la reserve a la reception, lot 3). */
.t-case { display: flex; align-items: center; gap: var(--sib-2); font-size: 17px; min-height: 44px; }
.t-case input { width: 24px; height: 24px; }
details.t-carte > summary { cursor: pointer; list-style: revert; }
details.t-carte[open] > summary { margin-bottom: var(--sib-2); }

/* Le choix de la langue (fiche « mat-langues ») : discret, en bas de l'accueil, chaque langue dans sa propre ecriture. */
.t-langues { display: flex; flex-wrap: wrap; gap: var(--sib-2); justify-content: center; margin-top: var(--sib-6); }
.t-langue { min-height: 44px; padding: var(--sib-2) var(--sib-4); border-radius: var(--sib-r-sm); border: 1px solid var(--sib-border);
            background: var(--sib-surface); color: var(--sib-ink); font: inherit; cursor: pointer; }
.t-langue--active { border-color: var(--sib-bleu); box-shadow: inset 0 0 0 1px var(--sib-bleu); font-weight: 600; }