/* Domaine Styling — les règles de style des utilisateurs (27/10/2026).
   Classes posées par ConditionalStyleController (grilles) et par les deux aperçus d'une règle
   (StyleRulePreviewPropertyEditor, StyleRulePriorityComponent), d'après StyleRuleStyleBuilder. Les onze
   couleurs de la palette (StyleColor) lisent les « Tags » de la charte (CHARTE.md § 5.8) : un texte foncé,
   un fond pâle, un badge = un tag. Turquoise → cyan, Gris → grey, Violet → violet ; Noir et Blanc, absents
   des tags, ont leurs compléments (--ds-style-rule-*). Plus de style en ligne : il battait toute feuille et
   peignait dans une palette à part (« flat UI »).

   Chargée AVANT les feuilles des domaines métier (_Host.cshtml) : à poids égal, un état métier posé sur
   une cellule (pim-stock-shortfall, pim-completion-*) l'emporte sur le texte d'une règle d'utilisateur.

   Le FOND d'une règle « toute la ligne » est sur la ligne : la classe y pose --style-rule-bg, que la ligne
   lit comme sa couleur (app-theme.css, avec le zébrage) — survol, sélection et colonnes figées restent ceux
   du thème. Celui d'une règle « champs précis » est sur la cellule (td, ci-dessous). Les fonds sont déclarés
   avant les textes : un texte choisi l'emporte sur le blanc qu'impose le fond noir. */
.style-bg-red    { --style-rule-bg: var(--ds-tags-red-bg); }
.style-bg-orange { --style-rule-bg: var(--ds-tags-orange-bg); }
.style-bg-yellow { --style-rule-bg: var(--ds-tags-yellow-bg); }
.style-bg-green  { --style-rule-bg: var(--ds-tags-green-bg); }
.style-bg-teal   { --style-rule-bg: var(--ds-tags-cyan-bg); }
.style-bg-blue   { --style-rule-bg: var(--ds-tags-blue-bg); }
.style-bg-purple { --style-rule-bg: var(--ds-tags-violet-bg); }
.style-bg-pink   { --style-rule-bg: var(--ds-tags-pink-bg); }
.style-bg-gray   { --style-rule-bg: var(--ds-tags-grey-bg); }
.style-bg-white  { --style-rule-bg: var(--ds-style-rule-white-bg); }
.style-bg-black {
    --style-rule-bg: var(--ds-style-rule-black-bg);
    color: var(--ds-style-rule-on-black-content);
}

td[class*="style-bg-"],
.style-rule-preview[class*="style-bg-"] {
    background-color: var(--style-rule-bg);
}

.style-text-red    { color: var(--ds-tags-red-content); }
.style-text-orange { color: var(--ds-tags-orange-content); }
.style-text-yellow { color: var(--ds-tags-yellow-content); }
.style-text-green  { color: var(--ds-tags-green-content); }
.style-text-teal   { color: var(--ds-tags-cyan-content); }
.style-text-blue   { color: var(--ds-tags-blue-content); }
.style-text-purple { color: var(--ds-tags-violet-content); }
.style-text-pink   { color: var(--ds-tags-pink-content); }
.style-text-gray   { color: var(--ds-tags-grey-content); }
.style-text-black  { color: var(--ds-style-rule-black-content); }
.style-text-white  { color: var(--ds-style-rule-white-content); }

.style-bold      { font-weight: 700; }
.style-italic    { font-style: italic; }
.style-underline { text-decoration: underline; }

/* Le badge (« Promo », « Gratuit ») : un « Tag (color) » de la charte, de la couleur de fond de la règle, à
   défaut de son texte (StyleRuleStyleBuilder) ; sans couleur, le vert. Le texte vient de l'attribut
   data-style-badge posé sur la cellule. */
.style-badge-red    { --style-badge-bg: var(--ds-tags-red-bg);    --style-badge-border: var(--ds-tags-red-border);    --style-badge-content: var(--ds-tags-red-content); }
.style-badge-orange { --style-badge-bg: var(--ds-tags-orange-bg); --style-badge-border: var(--ds-tags-orange-border); --style-badge-content: var(--ds-tags-orange-content); }
.style-badge-yellow { --style-badge-bg: var(--ds-tags-yellow-bg); --style-badge-border: var(--ds-tags-yellow-border); --style-badge-content: var(--ds-tags-yellow-content); }
.style-badge-green  { --style-badge-bg: var(--ds-tags-green-bg);  --style-badge-border: var(--ds-tags-green-border);  --style-badge-content: var(--ds-tags-green-content); }
.style-badge-teal   { --style-badge-bg: var(--ds-tags-cyan-bg);   --style-badge-border: var(--ds-tags-cyan-border);   --style-badge-content: var(--ds-tags-cyan-content); }
.style-badge-blue   { --style-badge-bg: var(--ds-tags-blue-bg);   --style-badge-border: var(--ds-tags-blue-border);   --style-badge-content: var(--ds-tags-blue-content); }
.style-badge-purple { --style-badge-bg: var(--ds-tags-violet-bg); --style-badge-border: var(--ds-tags-violet-border); --style-badge-content: var(--ds-tags-violet-content); }
.style-badge-pink   { --style-badge-bg: var(--ds-tags-pink-bg);   --style-badge-border: var(--ds-tags-pink-border);   --style-badge-content: var(--ds-tags-pink-content); }
.style-badge-gray,
.style-badge-white  { --style-badge-bg: var(--ds-tags-grey-bg);   --style-badge-border: var(--ds-tags-grey-border);   --style-badge-content: var(--ds-tags-grey-content); }
.style-badge-black  { --style-badge-bg: var(--ds-tags-blue-night-bg); --style-badge-border: var(--ds-tags-blue-night-border); --style-badge-content: var(--ds-tags-blue-night-content); }

.style-rule-badge::after {
    content: attr(data-style-badge);
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid var(--style-badge-border, var(--ds-tags-green-border));
    border-radius: var(--ds-radius-md);
    font-size: 0.75em;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    line-height: 1.4;
    background-color: var(--style-badge-bg, var(--ds-tags-green-bg));
    color: var(--style-badge-content, var(--ds-tags-green-content));
    vertical-align: middle;
}

/* L'aperçu d'une règle (fiche de la règle, liste des priorités) : une pastille en pointillés qui porte les
   classes de la règle. Global et non en .razor.css : l'éditeur de la fiche le rend depuis le C#, hors de
   tout .razor. */
.style-rule-preview {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed var(--ds-panel-border);
    border-radius: var(--ds-radius-md);
}