/* ===========================================================================
   ÉCRAN FICHE LICENCE (/app/fiche-licence) — l'état avec sa conséquence, les
   faits du contrat, les quotas rapportés à l'usage, le périmètre de modules,
   les options souscrites et l'origine des chiffres.
   Port de la passation « design_handoff_licence » (Projet EasyTime, Design).

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css comme le demandait la
   passation : c'est là que toutes les branches ouvertes le même jour entraient
   en conflit — sur la dernière ligne du fichier et sur la clé de cache
   partagée, jamais sur la substance. Le <link> est dans App.razor, APRÈS
   modele-erp.css.

   AUCUNE COULEUR EN DUR : la passation en écrivait une quarantaine (#BB0000,
   #0854A0, #8A4A0C…). Elles sont toutes des jetons --et-* de la charte — les
   mêmes valeurs, mais qui suivent la bascule de thème au lieu de la trouer.

   RIEN ICI N'EST GÉNÉRIQUE. Une classe que deux écrans emploieraient monte en
   section 11 de modele-erp.css — jamais l'inverse, ou un écran finit par
   dépendre de la feuille d'un autre pour s'afficher.
   =========================================================================== */

.lic-page {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lic-carte {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
}

/* ---------------------------------------------------------------------------
   1. EN-TÊTE — le filet bleu de 3 px sous la barre est celui du gabarit : ce
   qui est interactif DANS une page est bleu SAP, l'orange reste au seul bouton
   d'engagement, et cet écran n'en a aucun (on ne modifie pas sa licence ici).
   --------------------------------------------------------------------------- */
.lic-carte .tete {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    row-gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
    background: var(--et-surface-2);
    border-bottom: 3px solid var(--et-form-strip);
}
.lic-carte .tete .ico {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--et-info-bg);
    color: var(--et-form-blue-encre);
}
.lic-carte .tete .txt { flex: 1 1 260px; min-width: 200px; }
.lic-carte .tete .titre { font-size: 17px; font-weight: 700; color: var(--et-ink); }
.lic-carte .tete .sous { margin-top: 2px; font-size: 13px; color: var(--et-muted); }

.lic-carte .tete .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lic-carte .tete .horodatage {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-faint);
}

/* ---------------------------------------------------------------------------
   2. L'ÉTAT, AVEC SA CONSÉQUENCE — cinq teintes pour six statuts : « Essai » et
   « pas encore active » partagent le bleu, parce que dans les deux cas rien
   n'est en défaut — le contrat court, ou il n'a pas commencé.
   --------------------------------------------------------------------------- */
.lic-etat {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 20px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.lic-etat .pt {
    flex: none;
    margin-top: 2px;
    width: 9px;
    height: 9px;
    border-radius: var(--et-r-pill);
    background: var(--et-muted);
}
.lic-etat .txt { flex: 1; min-width: 0; }
.lic-etat .ligne { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lic-etat .statut { font-size: 14px; font-weight: 700; color: var(--et-muted); }
.lic-etat .echeance {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}
.lic-etat .consequence { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--et-muted); }

.lic-etat.est-active { background: var(--et-succes-bg); border-bottom-color: var(--et-succes-bord); }
.lic-etat.est-active .pt { background: var(--et-succes); }
.lic-etat.est-active .statut,
.lic-etat.est-active .echeance { color: var(--et-succes-ink); }
.lic-etat.est-active .consequence { color: var(--et-ink); }

.lic-etat.est-info { background: var(--et-info-bg); border-bottom-color: var(--et-form-blue-l); }
.lic-etat.est-info .pt { background: var(--et-form-blue-d); }
.lic-etat.est-info .statut,
.lic-etat.est-info .echeance { color: var(--et-form-blue-d); }
.lic-etat.est-info .consequence { color: var(--et-ink); }

/* La grâce est le SEUL état de lecture seule : ambre, non rouge — le produit
   fonctionne encore, en partie. L'encre est --et-avertissement-ink et non
   --et-avertissement : celui-ci ne vaut que 2,9:1 sur fond clair. */
.lic-etat.est-grace { background: var(--et-avertissement-bg); border-bottom-color: var(--et-avertissement-bord); }
.lic-etat.est-grace .pt { background: var(--et-avertissement-ink); }
.lic-etat.est-grace .statut,
.lic-etat.est-grace .echeance,
.lic-etat.est-grace .consequence { color: var(--et-avertissement-ink); }

.lic-etat.est-bloque { background: var(--et-danger-badge-bg); border-bottom-color: var(--et-danger-bord); }
.lic-etat.est-bloque .pt { background: var(--et-danger); }
.lic-etat.est-bloque .statut,
.lic-etat.est-bloque .echeance,
.lic-etat.est-bloque .consequence { color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   3. LES FAITS — colonne de libellés à largeur fixe, valeur à droite. Les dates
   et les codes sont en chasse fixe : ce sont des valeurs qu'on compare d'un
   écran à l'autre, non de la prose.
   --------------------------------------------------------------------------- */
.lic-faits { margin: 0; padding: 4px 20px 10px; }
.lic-faits > div {
    display: flex;
    align-items: baseline;
    gap: 14px;
    row-gap: 4px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--et-rang);
}
.lic-faits dt {
    flex: none;
    width: 180px;
    font-size: 12px;
    font-weight: 400;
    color: var(--et-muted);
}
.lic-faits dd {
    flex: 1 1 220px;
    min-width: 180px;
    margin: 0;
    font-size: 13px;
    color: var(--et-ink);
}
.lic-faits dd.mono { font-family: var(--et-font-mono); }
.lic-faits dd.est-code { font-weight: 500; color: var(--et-table-head-encre); }
.lic-faits dd.est-fort { font-weight: 600; }
.lic-faits dd.est-info { color: var(--et-form-blue-d); }
.lic-faits dd.est-attention { color: var(--et-avertissement-ink); }
.lic-faits dd.est-negatif { color: var(--et-danger-ink); }
.lic-faits dd.est-neutre { color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   4. EN-TÊTE DE GROUPE — la note porte ce qu'un titre ne peut pas dire : que
   les plafonds n'existent pas sans souscription, que le registre des modules
   est distinct de la licence.
   --------------------------------------------------------------------------- */
.lic-groupe {
    display: flex;
    align-items: baseline;
    gap: 10px;
    row-gap: 6px;
    flex-wrap: wrap;
    padding: 16px 20px 8px;
    border-bottom: 2px solid var(--et-hairline);
}
.lic-groupe.sans-marge { padding: 0 0 8px; }
.lic-groupe .filet { flex: none; width: 3px; height: 15px; background: var(--et-form-strip); }
.lic-groupe .titre {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--et-table-head-encre);
}
.lic-groupe .note { flex: 1 1 240px; min-width: 180px; font-size: 12px; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   5. QUOTAS — le filet gauche porte l'état, pas seulement la barre : il se lit
   avant le chiffre, et un plafond atteint doit se voir sans lire.
   --------------------------------------------------------------------------- */
.lic-quotas {
    padding: 14px 20px 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.lic-quotas .carte {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 3px solid var(--et-form-strip);
    padding: 12px 14px;
}
.lic-quotas .carte.est-chaud {
    background: var(--et-avertissement-bg);
    border-color: var(--et-avertissement-bord);
    border-left-color: var(--et-avertissement-mark);
}
.lic-quotas .carte.est-plein {
    background: var(--et-danger-badge-bg);
    border-color: var(--et-danger-bord);
    border-left-color: var(--et-danger);
}

.lic-quotas .libelle {
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--et-muted);
}
.lic-quotas .valeurs {
    margin-top: 6px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}
.lic-quotas .valeur {
    font-family: var(--et-font-mono);
    font-size: 21px;
    font-weight: 500;
    color: var(--et-ink);
}
/* Base non nulle : la mention se replie sur sa ligne plutôt que de se
   comprimer derrière « 38 / 50 ». */
.lic-quotas .base { flex: 1 1 90px; min-width: 70px; font-size: 12px; color: var(--et-faint); }

.lic-quotas .est-chaud .valeur,
.lic-quotas .est-chaud .base,
.lic-quotas .est-chaud .detail { color: var(--et-avertissement-ink); }
.lic-quotas .est-plein .valeur,
.lic-quotas .est-plein .base,
.lic-quotas .est-plein .detail { color: var(--et-danger-ink); }

.lic-quotas .piste {
    margin-top: 9px;
    height: 6px;
    border-radius: var(--et-r-pill);
    background: var(--et-piste);
    overflow: hidden;
}
.lic-quotas .piste span { display: block; height: 100%; background: var(--et-form-strip); }
.lic-quotas .est-chaud .piste span { background: var(--et-avertissement); }
.lic-quotas .est-plein .piste span { background: var(--et-danger); }

.lic-quotas .detail { margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   6. OPTIONS SOUSCRITES — elles conditionnent des fonctionnalités entières.
   --------------------------------------------------------------------------- */
.lic-options { padding: 0 20px 18px; }
.lic-options .pastilles { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.lic-options .pastille {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    background: var(--et-succes-bg);
    border: 1px solid var(--et-succes-bord);
    border-radius: var(--et-r-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--et-succes-ink);
}
.lic-options .pastille .pt { width: 6px; height: 6px; border-radius: var(--et-r-pill); background: currentColor; }

/* ---------------------------------------------------------------------------
   7. ORIGINE DES CHIFFRES — bleu quand EasyKeyManager n'est pas configuré :
   c'est une EXPLICATION, non un défaut. Vert quand la synchronisation est
   active — mais la note avertit alors que toute saisie manuelle sera écrasée.
   --------------------------------------------------------------------------- */
.lic-source {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 20px;
    background: var(--et-info-bg);
    border-top: 1px solid var(--et-hairline);
    font-size: 12px;
    line-height: 1.6;
    color: var(--et-form-blue-d);
}
.lic-source.est-synchronise { background: var(--et-succes-bg); color: var(--et-succes-ink); }
.lic-source i { flex: none; margin-top: 1px; }
.lic-source > div { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------------
   8. HISTORIQUE — la trace qui explique pourquoi un plafond a changé.
   --------------------------------------------------------------------------- */
.lic-historique { padding: 4px 20px 12px; }
.lic-historique .ligne {
    display: flex;
    align-items: baseline;
    gap: 12px;
    row-gap: 4px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--et-rang);
}
.lic-historique .ligne:last-child { border-bottom: none; }
.lic-historique .date {
    flex: none;
    width: 100px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}
.lic-historique .libelle { flex: 1 1 220px; min-width: 180px; font-size: 13px; color: var(--et-ink); }
.lic-historique .par { flex: none; font-size: 12px; color: var(--et-faint); }

/* ---------------------------------------------------------------------------
   9. MODULES COUVERTS — le registre (`TenantModule`) est DISTINCT de la
   licence : une seule activation, une seule échéance, et ce bloc dit lesquels
   sont dans le périmètre. Sept états, et le filet gauche les porte — il se lit
   avant le libellé.
   --------------------------------------------------------------------------- */
.lic-modules { padding: 0 20px 18px; }

.lic-modules .groupe {
    margin-top: 14px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--et-faint);
}

.lic-modules .grille {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.lic-modules .carte {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-left: 3px solid var(--et-repos-bord);
    padding: 11px 13px;
}

.lic-modules .tete {
    display: flex;
    align-items: baseline;
    gap: 9px;
    row-gap: 4px;
    flex-wrap: wrap;
}
/* Base non nulle : l'état se replie sur sa ligne plutôt que de se comprimer
   derrière un nom long comme « EasyControlling ». */
.lic-modules .nom { flex: 1 1 120px; min-width: 100px; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.lic-modules .etat {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-faint);
}
.lic-modules .etat .pt { width: 6px; height: 6px; border-radius: var(--et-r-pill); background: currentColor; }

.lic-modules .meta { margin-top: 3px; }
.lic-modules .code {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-inerte);
}
.lic-modules .detail { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }

/* Souscrit et utilisable : vert. Le socle est bleu — toujours actif, ce n'est
   pas un choix contractuel. */
.lic-modules .est-souscrit { border-left-color: var(--et-succes); }
.lic-modules .est-souscrit .etat { color: var(--et-succes-ink); }

.lic-modules .est-socle { border-left-color: var(--et-form-blue-d); }
.lic-modules .est-socle .etat { color: var(--et-form-blue-d); }

.lic-modules .est-avenir { border-left-color: var(--et-form-blue-d); }
.lic-modules .est-avenir .etat { color: var(--et-form-blue-d); }

/* Hors contrat et « bientôt » sont NEUTRALISÉS, non en défaut : rien n'est
   cassé, le module est simplement hors périmètre ou pas encore livré. */
.lic-modules .est-hors,
.lic-modules .est-bientot { background: var(--et-surface-3); }
.lic-modules .est-hors .nom,
.lic-modules .est-bientot .nom { color: var(--et-faint); }
.lic-modules .est-bientot .detail { color: var(--et-inerte); }
.lic-modules .est-bientot .etat { color: var(--et-inerte); }

/* L'état suit la LICENCE : un module souscrit sur une licence en grâce ou
   suspendue prend sa teinte, puisque c'est elle qui le rend inaccessible. */
.lic-modules .est-grace {
    background: var(--et-avertissement-bg);
    border-color: var(--et-avertissement-bord);
    border-left-color: var(--et-avertissement-mark);
}
.lic-modules .est-grace .etat,
.lic-modules .est-grace .detail { color: var(--et-avertissement-ink); }

.lic-modules .est-bloque {
    background: var(--et-danger-badge-bg);
    border-color: var(--et-danger-bord);
    border-left-color: var(--et-danger);
}
.lic-modules .est-bloque .etat,
.lic-modules .est-bloque .detail { color: var(--et-danger-ink); }

/* ---------------------------------------------------------------------------
   10. POSTES ACTIVÉS (EasyKeyManager) — bloc conservé de l'écran d'origine, et
   ABSENT tant qu'EKM n'est pas configuré : c'est le seul endroit du produit
   d'où l'on peut libérer un siège, et la maquette ne le traitait pas parce
   qu'elle ne traitait pas EKM. Rendre l'écran sans lui aurait retiré une action
   qui marche là où elle est branchée.
   --------------------------------------------------------------------------- */
.lic-postes { padding: 12px 20px 18px; }
.lic-postes .ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    row-gap: 6px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-bottom: 1px solid var(--et-rang);
}
.lic-postes .ligne:last-child { border-bottom: none; }
.lic-postes .nom { flex: 1 1 200px; min-width: 160px; font-size: 13px; font-weight: 500; color: var(--et-ink); }
.lic-postes .etat {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-faint);
}
.lic-postes .etat.est-actif { color: var(--et-succes-ink); }
.lic-postes .etat .pt { width: 6px; height: 6px; border-radius: var(--et-r-pill); background: currentColor; }
.lic-postes .vu {
    flex: none;
    width: 132px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-muted);
}