/* ===========================================================================
   ÉCRAN « POSTES DE TRAVAIL » (/app/postes-travail) — préfixe .pdt-*

   Maquette « Postes de travail — EasyTime » (canevas du 2026-09-27, versée dans
   docs/modeles/design_handoff_postes_travail/). Ce que cette feuille pose, et rien de plus :
     · la pastille de couleur dans le code du poste ;
     · la plage sur une frise de 24 h ;
     · le bandeau « à revoir » et la consigne de sa colonne.

   .pdt-* ET NON .pos-* : ce dernier appartient à la caisse (EasyPOS).
   Les onglets sont au gabarit (.mx-vues), comme la liste en cartes sous 1024 px
   (.mx-liste-cartes).

   AUCUNE COULEUR EN DUR : tout par --et-*. La couleur d'un poste est une DONNÉE — celle que
   sa fiche lui donne — et arrive en style en ligne, jamais ici.
   =========================================================================== */

.pdt-vues             { margin: 4px 0 16px; }

/* La pastille entre dans la puce du code : c'est la couleur du poste dans le planning. */
.pdt-code             { display: inline-flex; align-items: center; gap: 6px; }
.pdt-pastille         { flex: none; width: 10px; height: 10px; }

/* ---------------------------------------------------------------------------
   LA FRISE DE 24 H — une piste de 0 h à 24 h, trois repères (6 h, 12 h, 18 h), le poste à sa
   place. Un poste de nuit s'enroule : deux segments, le second repart de 0 h.
   --------------------------------------------------------------------------- */
.pdt-plage            { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pdt-frise            { position: relative; display: block; height: 8px; min-width: 120px;
                        background:
                          linear-gradient(var(--et-hairline), var(--et-hairline)) 25% 0 / 1px 100% no-repeat,
                          linear-gradient(var(--et-hairline), var(--et-hairline)) 50% 0 / 1px 100% no-repeat,
                          linear-gradient(var(--et-hairline), var(--et-hairline)) 75% 0 / 1px 100% no-repeat,
                          var(--et-surface-3); }
/* Un filet autour du segment : la couleur du poste est une donnée, et un ardoise foncé posé
   sur la piste du thème sombre s'y perdait. Le filet, lui, suit le thème. */
.pdt-frise > span     { position: absolute; top: 0; bottom: 0; box-shadow: inset 0 0 0 1px var(--et-filet-fort); }

/* ---------------------------------------------------------------------------
   LE BANDEAU « À REVOIR » — il tient sa ligne, son bouton passe dessous quand la place
   manque. La consigne de l'onglet est à l'encre d'avertissement : un réglage à revoir n'est
   pas une panne, c'est une surprise à venir.
   --------------------------------------------------------------------------- */
.pdt-bandeau          { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 16px; }
.pdt-bandeau .mx-blocage-txt { flex: 1 1 320px; }
.pdt-bandeau-btn      { flex: none; }
.pdt-c-revoir         { font-weight: 600; color: var(--et-avertissement-ink); }

/* ---------------------------------------------------------------------------
   DENSITÉ COMPACTE (2026-10-23) — une rangée sur une ligne quand la place le permet. Mesuré au
   banc à 1440 px : 39 px dans la liste, parce que le nom (« Gardiennage 24 h ») et la
   résolution E/S (« Horaire — le plus proche ») revenaient à la ligne dans leur colonne. En
   compacte, ces deux-là tiennent leur ligne : 28 px. La frise reste SOUS la plage (posée à
   côté, l'heure sortait de sa colonne) ; dans « À revoir », la consigne garde ses retours —
   coupée par « … », elle ne se lirait plus, et élargie, la table sortait de l'écran.
   Confortable et Tactile gardent la mise en page d'origine. Au-dessus de 1024 px : dessous,
   la liste est en cartes.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .appgrid[data-densite="compacte"] .pdt-corps .mx-carte-l1 > strong,
    .appgrid[data-densite="compacte"] .pdt-resolution { white-space: nowrap; }
}

@media (max-width: 1024px) {
    .pdt-bandeau-btn,
    .pdt-tete .mx-outils .mx-btn { min-height: 44px; }
    /* Sur la carte, la plage et sa frise prennent la ligne entière. */
    .pdt-corps table.tbl > tbody > tr > td:has(.pdt-plage) { flex: 1 1 100%; }
}
@media (max-width: 640px) {
    .pdt-bandeau-btn { flex: 1 1 100%; justify-content: center; }
}