/* ============================================================================
   ÉCRAN — SÉANCES DE SAISIE (SAI-06)

   Feuille d'ÉCRAN, préfixe .ss-. Reprise de la passation « Sessions de saisie »
   (docs/modeles/passation-sessions-saisie.md), ecran-sessions.css. Gardée sous son
   nom du dépôt — l'écran s'appelle sessions-saisie, son <link> existe déjà, et un
   renommage n'aurait déplacé qu'une ligne d'App.razor.

   AUCUNE VALEUR DE COULEUR EN DUR : tout vient des jetons de easytech-theme.css.
   Une couleur d'état n'est JAMAIS écrite en color: (docs/couleurs-en-dur.md) —
   sur un aplat pâle c'est le rang -ink qui tient le contraste, et l'ambre, qui ne
   passe pas le seuil graphique de 3:1, prend --et-avertissement-mark comme marque.

   CE QUI N'EST PAS ICI : le cadre de liste (.tbl-*), les fenêtres (ModalCadre),
   l'ossature et le bandeau d'écran (EcranCompta / EcranModule, .liste-entete) —
   ils viennent du dépôt et ne se redéfinissent pas par écran.
   ========================================================================== */

/* ---- Ligne de contexte ------------------------------------------------- */

.appgrid .ss-contexte {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 7px 12px;
  background: var(--et-surface-2);
  border: 1px solid var(--et-hairline);
}

.appgrid .ss-bascule { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: var(--et-ink); cursor: pointer; }
/* Taille retiree le 2026-09-10 : la case prend les 17 px du gabarit (app.css),
   et 24 px sous 1024 px (lot02). Voir docs/cibles-tactiles.md. */

.appgrid .ss-jeton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: var(--et-neutre-bg);
  border: 1px solid var(--et-hairline);
  color: var(--et-ink);
  font-size: 13px;
  text-decoration: none;
}

.appgrid a.ss-jeton:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); text-decoration: none; }
.appgrid .ss-jeton > .bi { font-size: 12px; color: var(--et-muted); }
.appgrid .ss-fort { font-weight: 600; }
/* .tbl-mono du dépôt n'existe QUE sous .tbl : hors d'une table, il faut celle-ci. */
.appgrid .ss-mono { font-family: var(--et-font-mono); font-size: 12px; }

/* ---- Bandeaux ---------------------------------------------------------- */

.appgrid .ss-bandeau {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.appgrid .ss-bandeau > .bi { flex-shrink: 0; }
.appgrid .ss-bandeau.est-grave { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }
.appgrid .ss-bandeau.est-signal { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
/* Dans un bloc, le bandeau n'est plus pleine largeur d'écran. */
.appgrid .ss-bandeau-bloc { margin-bottom: 0; font-size: 12px; }

/* ---- Corps ------------------------------------------------------------- */

.appgrid .ss-corps { display: flex; align-items: stretch; }
.appgrid .ss-liste { flex: 1; min-width: 0; }
.appgrid .ss-bloc + .ss-bloc { margin-top: 14px; }

/* ---- Table des séances ------------------------------------------------- */

.appgrid .ss-table { width: 100%; border: 1px solid var(--et-hairline); }

/* ---- Colonnes des trois tables ------------------------------------------
   La passation les posait en style inline sur chaque <th> — vingt-deux largeurs en dur
   dans deux composants, qu'aucun palier ne pouvait reprendre. Les têtes s'alignent à
   gauche, les montants à droite ; la table des séances, celle des pièces de la séance et
   celle du rattachement partagent Jrn, date et libellé. */
.appgrid .ss-table th { text-align: left; }
.appgrid .ss-table .ss-col-date { width: 104px; }
.appgrid .ss-table .ss-col-jrn { width: 66px; }
.appgrid .ss-table .ss-col-porteur { width: 110px; }
.appgrid .ss-table .ss-col-avancement { width: 190px; }
.appgrid .ss-table .ss-col-montant { width: 130px; text-align: right; }
.appgrid .ss-table .ss-col-etat { width: 160px; }
.appgrid .ss-table .ss-col-chevron { width: 40px; }
.appgrid .ss-table .ss-col-reference { width: 150px; }
.appgrid .ss-table .ss-col-montant-piece { width: 120px; text-align: right; }
.appgrid .ss-table .ss-col-statut { width: 150px; }
.appgrid .ss-table .ss-col-geste { width: 54px; }
.appgrid .ss-table .ss-col-rattacher { width: 120px; }

/* Le rang entier est cliquable : viser une petite flèche dans une table dense est un
   geste raté une fois sur trois. */
.appgrid .ss-rang { cursor: pointer; border-bottom: 1px solid var(--et-hairline); }
.appgrid .ss-rang:hover { background: var(--et-surface-3); }
.appgrid .ss-rang.est-visee { background: var(--et-tint); }
.appgrid .ss-rang.est-close { opacity: .78; }
.appgrid .ss-rang:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }

.appgrid .ss-tronque { overflow: hidden; text-overflow: ellipsis; }
.appgrid .ss-muet { color: var(--et-muted); }
.appgrid .ss-sous { margin-top: 3px; font-size: 12px; color: var(--et-muted); line-height: 1.4; }
.appgrid .ss-alerte-sous { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--et-danger-ink); line-height: 1.4; }
.appgrid .ss-chevron { color: var(--et-inerte); font-size: 12px; }

/* La jauge d'avancement — comptabilisées sur rattachées. C'est la seule chose qui dit
   si une séance est finie, et « 12 pièces / 3 brouillons » demandait une soustraction
   pour le savoir. La barre la fait à la place du lecteur ; sa couleur est une MARQUE,
   posée par le composant (SeanceService.MarqueJauge), pas par cette feuille. */
.appgrid .ss-piste { height: 6px; background: var(--et-piste); }
.appgrid .ss-piste > span { display: block; height: 100%; }

/* ---- Jetons d'état ----------------------------------------------------- */

.appgrid .ss-etat,
.appgrid .ss-statut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.appgrid .ss-etat > .bi,
.appgrid .ss-statut > .bi { font-size: 12px; }
.appgrid .ss-etat.est-ouverte { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .ss-etat.est-close { background: var(--et-neutre-bg); color: var(--et-muted); }
.appgrid .ss-statut.est-faite { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .ss-statut.est-brouillon { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }

/* ---- Séances dormantes ------------------------------------------------- */

.appgrid .ss-dormante {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 7px;
  padding: 8px 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  /* Le liséré est une MARQUE : l'ambre nue rend 2,15:1 et ne passe pas le seuil
     graphique de 3:1 — --et-avertissement-mark tient la même teinte en le passant. */
  border-left: 3px solid var(--et-avertissement-mark);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.appgrid .ss-dormante:hover { border-color: var(--et-form-blue); border-left-color: var(--et-avertissement-mark); }
.appgrid .ss-dormante:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }
.appgrid .ss-dormante-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--et-ink); }
.appgrid .ss-dormante-c { flex: none; font-size: 12px; color: var(--et-muted); }

.appgrid .ss-dormante-a {
  flex: none;
  padding: 1px 7px;
  background: var(--et-avertissement-bg);
  color: var(--et-avertissement-ink);
  font-size: 12px;
  font-weight: 700;
}

/* ---- Fiche de séance --------------------------------------------------- */

.appgrid .ss-fiche { background: var(--et-surface); border: 1px solid var(--et-hairline); }

.appgrid .ss-fiche-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--et-hairline);
}

.appgrid .ss-fiche-t { font-size: 14px; font-weight: 700; color: var(--et-ink); }
.appgrid .ss-fiche-tete > .ss-ico { margin-left: auto; }

.appgrid .ss-ico {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font-size: 12px;
  cursor: pointer;
}

.appgrid .ss-ico:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.appgrid .ss-ico:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }

.appgrid .ss-mesures {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--et-hairline);
  background: var(--et-surface-2);
}

@media (max-width: 1024px) { .appgrid .ss-mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mêmes proportions que les vignettes du module (easycompta-vignette.css) : clé 12 px
   mono en capitales — 12 et non 11, l'échelle ne descend pas sous 12 px —, valeur 16 px mono. La couleur passe par le bord gauche — une
   marque — et jamais par l'encre du chiffre. */
.appgrid .ss-mesure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left: 3px solid var(--et-form-blue);
}

.appgrid .ss-mesure > .n {
  font-family: var(--et-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--et-muted);
}

.appgrid .ss-mesure > .v { font-family: var(--et-font-mono); font-size: 16px; font-weight: 600; color: var(--et-ink); }

.appgrid .ss-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.appgrid .ss-actions > .ss-sous { margin-top: 0; }

.appgrid .ss-sec { border-top: 1px solid var(--et-hairline); }
.appgrid .ss-sec-tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 14px; }
.appgrid .ss-sec-tete > .ss-sous { margin-top: 0; }
.appgrid .ss-sec .tbl-cadre { margin: 0 14px 14px; }

.appgrid .ss-sec-t {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--et-table-head-encre);
}

.appgrid .ss-audit { padding: 0 14px 12px; }
.appgrid .ss-fait { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--et-hairline); font-size: 12px; }
.appgrid .ss-fait:first-child { border-top: 0; }
.appgrid .ss-fait > .bi { flex: none; color: var(--et-muted); }
.appgrid .ss-fait-l { flex: 1; min-width: 0; color: var(--et-ink); }

/* ---- Rapport ----------------------------------------------------------- */

.appgrid .ss-rapport { padding: 12px 14px; border-top: 1px solid var(--et-hairline); }
.appgrid .ss-rapport-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.appgrid .ss-rapport-tete > .ss-lien { margin-left: auto; }
.appgrid .ss-rapport-bilan { margin-bottom: 8px; font-size: 13px; color: var(--et-ink); line-height: 1.45; }

.appgrid .ss-rapport-l {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 5px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}

.appgrid .ss-rapport-l > .bi { flex-shrink: 0; }
.appgrid .ss-rapport-l.est-ok { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.appgrid .ss-rapport-l.est-ko { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); }

.appgrid .ss-confirme {
  margin: 0 14px 12px;
  padding: 10px 12px;
  background: var(--et-avertissement-bg);
  border: 1px solid var(--et-avertissement-mark);
}

.appgrid .ss-confirme-t { font-size: 13px; color: var(--et-ink); line-height: 1.45; }
.appgrid .ss-confirme > .ss-actions { padding: 9px 0 0; }

/* ---- État vide --------------------------------------------------------- */

.appgrid .ss-vide { padding: 28px 16px !important; text-align: center !important; font-family: inherit !important; }
.appgrid .ss-vide > .bi { font-size: 24px; color: var(--et-inerte); }
.appgrid .ss-vide-t { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--et-ink); }
.appgrid .ss-vide-d { margin: 4px auto 0; max-width: 420px; font-size: 13px; color: var(--et-muted); line-height: 1.5; }

/* ---- Boutons ----------------------------------------------------------- */

.appgrid .ss-btn,
.appgrid .ss-btn-fort,
.appgrid .ss-btn-bleu {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  background: var(--et-surface);
  border: 1px solid var(--et-filet-fort);
  border-radius: 0;
  color: var(--et-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* LE SEUL BOUTON D'ENGAGEMENT DE L'ÉCRAN EST « OUVRIR UNE SÉANCE » (tranché le 2026-09-06),
   et l'orange est réservé à celui-là — plus au CTA de sa fenêtre, qui est la même action.
   Les actions fortes de la fiche — reprendre la saisie, confirmer la clôture — sont bleues :
   même partage qu'en saisie de pièce (.sr-btn-fort / .sr-btn-engager). L'encre sur un
   aplat de marque a un nom. */
.appgrid .ss-btn-fort { background: var(--et-action); border-color: var(--et-action); color: var(--et-sur-aplat); }
.appgrid .ss-btn-bleu { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }
.appgrid .ss-btn-bleu:hover { background: var(--et-form-blue-d); border-color: var(--et-form-blue-d); color: var(--et-sur-aplat); text-decoration: none; }
.appgrid .ss-btn-bleu:disabled { background: var(--et-inerte); border-color: var(--et-inerte); color: var(--et-sur-aplat); cursor: not-allowed; }
.appgrid .ss-btn-fort:hover { color: var(--et-sur-aplat); text-decoration: none; }
.appgrid .ss-btn-fort:disabled { background: var(--et-action-off); border-color: var(--et-action-off); color: var(--et-sur-aplat); cursor: not-allowed; }
.appgrid .ss-btn:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.appgrid .ss-btn:disabled { color: var(--et-inerte); border-color: var(--et-hairline); cursor: not-allowed; }
.appgrid .ss-btn:focus-visible,
.appgrid .ss-btn-fort:focus-visible,
.appgrid .ss-btn-bleu:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 2px; }

.appgrid .ss-lien { background: none; border: 0; padding: 0; color: var(--et-form-blue); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* ---- Fenêtre de séance --------------------------------------------------
   Le cadre, l'en-tête, la grille et le pied viennent d'easycompta-modal.css (.xp-*). Ne
   descend ici que ce qui est propre à cette fenêtre. */

.appgrid .ss-fenetre { max-width: 600px; }
.appgrid .ss-fenetre-grille { margin-top: 0; }
.appgrid .ss-bandeau-fenetre { margin: 0 0 12px; }
.appgrid .ss-fenetre-aide { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; }
.appgrid .ss-fenetre-aide > .bi { color: var(--et-form-blue); }

/* ---- Retour immédiat --------------------------------------------------- */

.appgrid .ss-toast {
  position: fixed;
  z-index: 1090;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 420px;
  padding: 10px 14px;
  background: var(--et-surface);
  border: 1px solid var(--et-hairline);
  border-left-width: 3px;
  box-shadow: var(--et-ombre-flottant);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--et-ink);
}

/* Le liséré porte l'état — c'est une marque, pas de l'encre ; le texte reste à l'encre
   du corps, qui tient le contraste sur la surface. */
.appgrid .ss-toast.est-ok { border-left-color: var(--et-succes); }
.appgrid .ss-toast.est-ko { border-left-color: var(--et-danger); }
.appgrid .ss-toast.est-ok > .bi { color: var(--et-succes-ink); }
.appgrid .ss-toast.est-ko > .bi { color: var(--et-danger-ink); }

/* ==============================================================================================
   PALIERS — sur l'échelle retenue (docs/conventions-responsive.md) : 1024, 720, 560. Le
   palier de 900 px de la passation n'en fait pas partie : la table empilée passe à 720, la
   règle tactile à 1024 où le lot 02 la pose pour la coquille.
   ============================================================================================== */

/* ---- 1024 px : tout se touche au doigt ------------------------------------------------- */

@media (max-width: 1024px) {
  /* CIBLES TACTILES (docs/cibles-tactiles.md) : sous 1024 px, rien sous 44 × 44 px, TOUTES
     les cibles — boutons, gestes, dormantes, liens d'action, bascule, rangées cliquables. */
  .appgrid .ss-btn,
  .appgrid .ss-btn-fort,
  .appgrid .ss-btn-bleu,
  .appgrid .ss-lien,
  .appgrid .ss-dormante,
  .appgrid a.ss-jeton,
  .appgrid .ss-bascule { min-height: 44px; }
  .appgrid .ss-btn { min-width: 44px; }
  .appgrid .ss-ico { width: 44px; height: 44px; }
    /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes
       les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */
  .appgrid .ss-rang > td { padding-top: 12px; padding-bottom: 12px; }
  .appgrid .ss-fenetre .xp-champ { min-height: 44px; }
  .appgrid .ss-fenetre .xp-fermer { width: 44px; height: 44px; }
}

/* ---- 720 px : les tables s'empilent -------------------------------------------------- */

@media (max-width: 720px) {
  /* La table passe en rangées empilées, chaque cellule portant son libellé : huit colonnes
     ne tiennent pas, et un défilement horizontal sur une liste qu'on parcourt à la
     verticale se perd. 720 et non 900 : 900 n'est pas sur l'échelle retenue. */
  .appgrid .ss-table thead { display: none; }
  /* height:auto, ET C'EST UN CORRECTIF (2026-09-06) : le gabarit pose « .tbl tbody tr
     { height: 1px } » pour qu'une rangée-table se réduise à son contenu ; passée en BLOC,
     elle prend ce pixel au pied de la lettre et les séances se chevauchaient sur un
     téléphone (même défaut, même correctif qu'au brouillard). */
  .appgrid .ss-table tbody tr,
  .appgrid .ss-table tfoot tr { display: block; height: auto; padding: 9px 12px; border-bottom: 2px solid var(--et-filet-fort); }
  .appgrid .ss-table tbody td,
  .appgrid .ss-table tfoot td { display: flex; align-items: baseline; gap: 10px; padding: 3px 0 !important; text-align: left !important; }
  .appgrid .ss-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--et-muted);
  }
  .appgrid .ss-table tbody td:empty { display: none; }
  .appgrid .ss-table .ss-vide::before { content: none; }
  .appgrid .ss-table .ss-vide { display: block !important; }
  .appgrid .ss-mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 560 px : le téléphone — contexte et actions empilés, une mesure par rangée ------- */

@media (max-width: 560px) {
  .appgrid .ss-contexte { padding-left: 10px; padding-right: 10px; }
  .appgrid .ss-mesures { grid-template-columns: minmax(0, 1fr); padding-left: 12px; padding-right: 12px; }
  .appgrid .ss-actions { flex-direction: column; align-items: stretch; }
  .appgrid .ss-actions > .ss-btn,
  .appgrid .ss-actions > .ss-btn-bleu { justify-content: center; }
  .appgrid .ss-fiche-tete,
  .appgrid .ss-sec-tete,
  .appgrid .ss-audit,
  .appgrid .ss-rapport { padding-left: 12px; padding-right: 12px; }
}