/* ════════════════════════════════════════════════════════════════
   RIBBON — badges d'icônes colorés (.educated-ribbon-ico)
   Fichier : wwwroot/css/educated-ribbon-icons.css

   Classe injectée par educated-ribbon-icons.js. Même principe que
   educated-sidebar-icons.css mais dimensionné pour le ribbon (22px).
   ════════════════════════════════════════════════════════════════ */

.educated-ribbon-ico {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-right: 6px;
}

    .educated-ribbon-ico svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

/* Icon-only : pas de texte après le badge → pas de marge droite inutile */
.xaf-ribbon button.dxbl-ribbon-button > .educated-ribbon-ico:last-child {
    margin-right: 0;
}

/* ── Tints — fallback hex en dur (sécurité) ─────────────────── */
.xaf-ribbon .educated-ribbon-ico.tint-violet {
    background: var(--tint-violet-bg, #EEEAFF) !important;
    color: var(--tint-violet-fg, #6D5BFE) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-blue {
    background: var(--tint-blue-bg, #DCEAFE) !important;
    color: var(--tint-blue-fg, #2563EB) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-indigo {
    background: var(--tint-indigo-bg, #E0DEFA) !important;
    color: var(--tint-indigo-fg, #4F46E5) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-teal {
    background: var(--brand-soft, #DFF7F5) !important;
    color: var(--brand, #0F9E97) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-emerald {
    background: var(--tint-emerald-bg, #D0F4E2) !important;
    color: var(--tint-emerald-fg, #059669) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-amber {
    background: var(--tint-amber-bg, #FBE9CC) !important;
    color: var(--tint-amber-fg, #B45309) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-rose {
    background: var(--tint-rose-bg, #FCDCE5) !important;
    color: var(--tint-rose-fg, #E11D48) !important;
}

.xaf-ribbon .educated-ribbon-ico.tint-slate {
    background: var(--tint-slate-bg, #E2E5EB) !important;
    color: var(--tint-slate-fg, #475569) !important;
}

/* Alignement dans le bouton ribbon */
.xaf-ribbon button.dxbl-ribbon-button,
.xaf-ribbon div.dxbl-btn-split.dxbl-ribbon-button > button {
    display: inline-flex !important;
    align-items: center !important;
}

/* ── Masquer l'icône native une fois remplacée par notre badge ──────
   Bat la règle "afficher icône + texte" (display:block !important)
   posée précédemment dans educated-ribbon.css — chargé APRÈS ce
   fichier, donc gagne sur la cascade à spécificité égale. ────────── */
.educated-icon-hidden {
    display: none !important;
}