/* ============================================================================
   ADM-01 — UTILISATEURS ET RÔLES (domaine finance), écran d'EasyAccounting
   Préfixe .scp-  (sécurité comptable)

   CE QUI N'EST PAS ICI, ET POURQUOI
     · le rail d'onglets (.eca-onglets) et la carte de section (.eca-carte) :
       ils servent déjà cinq écrans et vivent dans la feuille de MODULE
       css/easycompta-onglets.css. Les recopier ici en aurait fait deux
       dessins qui divergent au premier réglage — c'est exactement la règle
       du dépôt : une classe employée par deux écrans ou plus remonte ;
     · la liste des comptes : c'est le gabarit .tbl-* du dépôt, rendu par
       Components/Shared/Tableau.razor ;
     · la modale : .mx-modale-* du gabarit (css/modele-erp.css).

   AUCUNE COULEUR EN DUR. Les vignettes prennent leur teinte par --vig, posé
   par l'écran avec un jeton d'état ; la matrice n'en pose aucune.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. LA BANDE D'INDICATEURS N'EST PAS ICI

   .scp-faits / .scp-fait sont déclarées dans la feuille de MODULE
   (css/easycompta-vignette.css), avec les trente-cinq autres préfixes d'écran :
   c'est LE dessin de l'indicateur chiffré d'EasyAccounting, et une bande de
   vignettes est un composant du gabarit, pas un dessin d'écran. Le redéclarer
   ici en aurait fait une trente-sixième copie qui dérive au premier réglage —
   et le repli à deux colonnes sous 1024 px, qui vit déjà là-bas, aurait été le
   premier oublié. L'écran ne pose que le rôle, par --vig.
   -------------------------------------------------------------------------- */

.appgrid .scp-attente { padding: 18px; color: var(--et-muted); font-size: 13px; }

.appgrid .scp-note { margin: 8px 0 0; font-size: 12px; color: var(--et-muted); line-height: 1.5; }
.appgrid .scp-note strong { color: var(--et-ink); font-weight: 600; }

/* ----------------------------------------------------------------------------
   2. LES CELLULES DE LA LISTE

   Le compte tient sur deux lignes — l'identifiant en chasse fixe, le nom en
   dessous — parce que ce sont deux clés de lecture : on cherche « p.bella »
   dans un journal d'audit, et « Pauline Bella » quand on parle d'elle.
   -------------------------------------------------------------------------- */

.appgrid .scp-compte { display: block; min-width: 0; }
.appgrid .scp-id { display: block; font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); }
.appgrid .scp-nom { display: block; font-size: 12px; color: var(--et-muted); }

/* UN COMPTE SANS RÔLE EST BARRÉ, PAS CACHÉ : c'est un droit à demander. */
.appgrid .scp-sans-role { color: var(--et-faint); text-decoration: line-through; }

.appgrid .scp-gestes { display: inline-flex; align-items: center; gap: 6px; font-family: var(--et-font-mono); font-size: 13px; }
.appgrid .scp-marque { padding: 1px 6px; background: var(--et-surface-3); border: 1px solid var(--et-form-border); font-family: var(--et-font); font-size: 12px; font-weight: 600; color: var(--et-muted); }

.appgrid .scp-borne { font-size: 12px; color: var(--et-muted); }
.appgrid .scp-borne.est-borne { color: var(--et-ink); font-weight: 600; }

.appgrid .scp-vu { display: block; min-width: 0; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-ink); }
.appgrid .scp-vu-2 { display: block; color: var(--et-muted); }

/* ----------------------------------------------------------------------------
   3. LA MATRICE RÔLE × GESTE

   Elle scrolle dans son propre cadre : un dossier de cabinet porte huit à dix
   rôles, et la première colonne — le geste — doit rester lisible pendant qu'on
   parcourt les autres. C'est la même règle que les tables larges du dépôt
   (docs/tables-larges.md) ; elle est écrite ici parce que cette table n'est pas
   une liste .tbl-* et n'a donc pas d'ancre à déclarer.
   -------------------------------------------------------------------------- */

.appgrid .scp-matrice-cadre { overflow-x: auto; border: 1px solid var(--et-hairline); }
.appgrid .scp-matrice { width: 100%; border-collapse: collapse; font-size: 13px; }

.appgrid .scp-matrice thead th { position: sticky; top: 0; z-index: 2; background: var(--et-table-head); color: var(--et-sur-ardoise-plein); padding: 7px 9px; text-align: center; font-size: var(--et-fs-tete); font-weight: 600; vertical-align: bottom; white-space: nowrap; }
.appgrid .scp-matrice thead th.scp-geste { text-align: left; }
.appgrid .scp-matrice thead th.scp-col-figee { color: var(--et-sur-ardoise); }

.appgrid .scp-role { display: block; }
.appgrid .scp-role-n { display: block; font-family: var(--et-font-mono); font-size: 12px; font-weight: 400; color: var(--et-sur-ardoise); }

.appgrid .scp-matrice td { padding: 6px 9px; border-top: 1px solid var(--et-hairline); }
.appgrid .scp-matrice tbody tr:hover td { background: var(--et-rang); }

/* LA PREMIÈRE COLONNE EST GELÉE : c'est elle qui dit ce qu'on coche. */
.appgrid .scp-matrice .scp-geste { position: sticky; left: 0; z-index: 1; min-width: 300px; background: var(--et-surface); }
.appgrid .scp-matrice tbody tr:hover .scp-geste { background: var(--et-rang); }
.appgrid .scp-code { display: block; font-family: var(--et-font-mono); font-size: 12px; color: var(--et-faint); }

.appgrid .scp-matrice .scp-case { text-align: center; width: 130px; }
/* 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 .scp-matrice .scp-case input { cursor: pointer; }
.appgrid .scp-matrice .scp-case input:disabled { cursor: not-allowed; }

/* Le titre de domaine — même dessin que les têtes de section de la charte :
   un filet fort et une barre bleue, jamais un fond de couleur. */
.appgrid .scp-matrice tr.scp-domaine td { background: var(--et-surface-2); border-top: 2px solid var(--et-filet-fort); padding: 7px 9px; }
.appgrid .scp-matrice tr.scp-domaine span { font-family: var(--et-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--et-table-head-encre); }
.appgrid .scp-matrice tr.scp-domaine:hover td { background: var(--et-surface-2); }

.appgrid .scp-barre { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--et-hairline); }
.appgrid .scp-barre .scp-note { flex: 1; min-width: 200px; margin: 0; }

/* ----------------------------------------------------------------------------
   4. LA FENÊTRE DES BORNES
   -------------------------------------------------------------------------- */

.appgrid .scp-champ { margin-top: 11px; }
.appgrid .scp-champ > label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--et-muted); }
.appgrid .scp-aide { margin-top: 3px; font-size: 12px; color: var(--et-faint); line-height: 1.4; }
.appgrid .scp-aide strong { color: var(--et-ink); font-weight: 600; }
.appgrid .scp-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

.appgrid .scp-jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.appgrid .scp-jeton { height: 30px; padding: 0 11px; background: var(--et-surface); border: 1px solid var(--et-form-border); font-family: var(--et-font-mono); font-size: 13px; font-weight: 600; color: var(--et-ink); cursor: pointer; }
.appgrid .scp-jeton:hover { border-color: var(--et-form-blue); color: var(--et-form-blue); }
.appgrid .scp-jeton.est-actif { background: var(--et-form-blue); border-color: var(--et-form-blue); color: var(--et-sur-aplat); }

/* ----------------------------------------------------------------------------
   5. LES PALIERS (docs/conventions-responsive.md)

   Géométrie seulement, jamais de couleur. Les deux paliers retenus sont ceux
   de l'échelle du dépôt : 1024 px (la règle des 44 px tactiles) et 720 px, où
   la bande d'indicateurs et la fenêtre passent sur une colonne.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .appgrid .scp-jeton { min-height: 44px; padding: 0 14px; }
    /* 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 .scp-matrice td { padding: 10px 9px; }
  .appgrid .scp-matrice .scp-geste { min-width: 240px; }
}

@media (max-width: 720px) {
  .appgrid .scp-deux { grid-template-columns: minmax(0, 1fr); }
}