/* ===========================================================================
   SERVEURS DE NOTIFICATION (.srv-*) — une vignette par canal d'expédition,
   son quota face au consommé, et l'état de son dernier essai.

   D'OÙ ÇA VIENT
   Passation « Projet EasyTime — Design 31 », design_handoff_serveurs_notification.
   Écran : Components/Pages/App/ServeursNotification.razor, route
   /app/serveurs-notification, groupe de menu Système.

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css
   La passation demandait une concaténation au gabarit. Le dépôt ne le fait plus
   depuis que deux branches ouvertes le même jour y ont ajouté chacune leur bloc
   et se sont heurtées — jamais sur le fond, qui ne se recouvre pas d'un écran à
   l'autre, mais sur la DERNIÈRE LIGNE du fichier et sur la CLÉ DE CACHE que
   chacune bumpait. Un écran nouveau prend sa feuille et sa ligne dans App.razor ;
   ce qui sert à deux écrans remonte au gabarit, jamais l'inverse.

   AUCUNE COULEUR EN DUR — la passation donne des hex (#0A6ED1, #FEF7F1, #8A4A0C,
   #FFEBEB…), ce sont très exactement les jetons --et-* de easytech-theme.css, et
   c'est par eux que le mode sombre passe.

   DEUX CLASSES DE LA PASSATION NE SONT PAS REPRISES
     · .srv-bascule  → .mx-switch du gabarit, qui EST cet interrupteur au pixel
                       près : piste 34 × 18, pastille 14 px glissant à 18 px, bleu
                       SAP à l'état coché. En reposer un jumeau aurait fait deux
                       vérités pour un même objet — précisément ce que la section 11
                       du gabarit vient de corriger sur .par-switch / .nat-switch.
     · .champ .saisie .suffixe → .mx-input-suffixe, même histoire à quatre copies
                       près (terminaux, conventions, paramètres, natures). Seule la
                       RÉSERVE de padding reste ici : elle dépend de la longueur du
                       suffixe, et « msg » n'occupe pas la place de « % ».
   =========================================================================== */

/* --- La portée, dans l'en-tête --------------------------------------------
   Ces réglages sont par société, avec repli sur la plateforme. Sans cette
   mention, modifier le global en croyant régler sa filiale est muet — et
   coûteux : la filiale continue d'envoyer, toutes les autres changent. */
.srv-portee {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.srv-portee .pastille {
    padding: 2px 9px;
    background: var(--et-tint);
    border: 1px solid var(--et-form-blue-l);
    border-radius: var(--et-r);
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--et-form-blue-d);
}
.srv-portee .pastille.est-plateforme {
    background: var(--et-avertissement-bg);
    border-color: var(--et-avertissement-bord);
    color: var(--et-avertissement-ink);
}
.srv-portee .aide { font-size: 12px; color: var(--et-faint); }

/* --- Bandeau critique -----------------------------------------------------
   Un canal activé, incomplet ET employé par des types de notification
   n'atteindra personne. Il passe AVANT toute alerte de facturation : ce qui ne
   part pas compte plus que ce que cela coûterait si cela partait. */
.srv-alerte {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.55;
    background: var(--et-danger-badge-bg);
    border: 1px solid var(--et-danger-bord);
    color: var(--et-danger-ink);
}

/* --- Vignettes ----------------------------------------------------------- */
.srv-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.srv-carte {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    border-radius: var(--et-r);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* La carte E-mail porte tous ses objets — deux jeux de champs complets et
   mutuellement exclusifs : elle prend la largeur entière. */
.srv-carte.est-large { grid-column: 1 / -1; }

/* Activé mais incomplet : la bordure le dit avant qu'on lise la pastille. */
.srv-carte.est-incomplet { border-color: var(--et-avertissement-bord); }

.srv-carte .tete {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 16px;
    background: var(--et-surface-2);
    border-bottom: 1px solid var(--et-hairline);
}
.srv-carte .tete .ico {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--et-tint);
    color: var(--et-form-blue-encre);
}
.srv-carte .tete .txt { flex: 1; min-width: 0; }
.srv-carte .tete .ligne { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.srv-carte .tete .titre { font-size: 14px; font-weight: 700; color: var(--et-ink); }
.srv-carte .tete .sous { margin-top: 2px; font-size: 12px; color: var(--et-muted); }

/* --- Corps --------------------------------------------------------------- */
.srv-carte .corps {
    flex: 1;
    padding: 13px 16px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px 16px;
    align-content: start;
}
.srv-carte .corps.est-large { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.srv-carte .champ { min-width: 0; }
.srv-carte .champ.est-large { grid-column: 1 / -1; }

.srv-carte .champ > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--et-ink);
    margin-bottom: 4px;
}
.srv-carte .champ .req { color: var(--et-danger-ink); }

/* « msg » demande plus de place que « % » : c'est la seule chose que la réserve
   du gabarit ne peut pas décider à la place de l'écran. */
.srv-carte .mx-input-suffixe { --mx-suffixe-reserve: 42px; }

/* Un champ obligatoire vide sur un canal ACTIVÉ est en ambre : c'est ce qui fait
   qu'il n'atteindra personne. Pas en rouge — rien n'est cassé, la configuration
   est simplement inachevée. */
.srv-carte .mx-input.est-vide { border-color: var(--et-avertissement-bord); }
.srv-carte .mx-input.est-mono { font-family: var(--et-font-mono); font-size: 13px; }

.srv-carte .aide {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-faint);
}
.srv-carte .aide.est-attention { color: var(--et-avertissement-ink); }

/* --- Note de canal ------------------------------------------------------- */
.srv-note {
    grid-column: 1 / -1;
    margin-top: auto;
    padding: 9px 11px;
    background: var(--et-tint);
    border: 1px solid var(--et-filet-fort);
    font-size: 12px;
    line-height: 1.55;
    color: var(--et-ink);
}
.srv-note.est-facture {
    background: var(--et-avertissement-bg);
    border-color: var(--et-avertissement-bord);
    color: var(--et-avertissement-ink);
}

/* --- Quota face au consommé ----------------------------------------------
   Le seul réglage de cet écran qui engage une facture. Un plafond sans point de
   comparaison ne se surveille pas ; et sans plafond saisi, la ligne le dit. */
.srv-quota {
    grid-column: 1 / -1;
    padding: 9px 11px;
    background: var(--et-surface-2);
    border: 1px solid var(--et-hairline);
}
.srv-quota.est-chaud { background: var(--et-avertissement-bg); border-color: var(--et-avertissement-bord); }
.srv-quota.est-plein { background: var(--et-danger-badge-bg); border-color: var(--et-danger-bord); }

.srv-quota .piste {
    height: 6px;
    border-radius: var(--et-r-pill);
    background: var(--et-piste);
    overflow: hidden;
}
.srv-quota .piste span { display: block; height: 100%; background: var(--et-form-blue-d); }
.srv-quota.est-chaud .piste span { background: var(--et-avertissement-ink); }
.srv-quota.est-plein .piste span { background: var(--et-danger); }

.srv-quota .txt {
    margin-top: 6px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-form-blue-d);
}
.srv-quota.est-chaud .txt { color: var(--et-avertissement-ink); }
.srv-quota.est-plein .txt { color: var(--et-danger-ink); }

/* --- Pied : état d'essai --------------------------------------------------
   Trois états, et le troisième est celui qui compte : « essayé et muet » veut
   dire paramétré sans atteindre personne. */
.srv-carte .pied {
    display: flex;
    align-items: center;
    gap: 10px;
    row-gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--et-surface-3);
    border-top: 1px solid var(--et-hairline);
}
.srv-carte .pied .etat {
    flex: 1 1 180px;
    min-width: 140px;
    font-size: 12px;
    line-height: 1.45;
}
.srv-carte .pied .est-inconnu { color: var(--et-faint); }
.srv-carte .pied .est-recu { color: var(--et-ok); font-weight: 600; }
.srv-carte .pied .est-muet { color: var(--et-danger-ink); font-weight: 600; }

/* --- Légende ------------------------------------------------------------- */
.srv-legende {
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    padding: 12px 18px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--et-faint);
}