/* ============================================================================
 * Domivae — Système d'iconographie unifié
 *
 * Deux sources :
 *   1. Icônes Liv-n (PNG, 4 couleurs : abricot / bleu-marine / canard / blanc)
 *      → <img class="icon icon-livn icon-{size}">
 *   2. Bootstrap Icons (font, recoloris par classes utility)
 *      → <i class="bi bi-* icon icon-bi icon-{size}">
 *
 * Mapping rôle → couleur Liv-n par défaut :
 *   - owner   → canard
 *   - tenant  → abricot
 *   - manager/admin/agency/artisan → bleu-marine
 *   - fonds sombres → blanc (à forcer via opts['color'])
 *
 * RÈGLE D'OR : aucun emoji ne doit plus apparaître dans le HTML rendu.
 * ============================================================================ */

/* ── Base ──────────────────────────────────────────────────────────────── */

.icon {
    display: inline-block;
    vertical-align: -0.125em;        /* alignement optique avec le texte */
    line-height: 1;
    flex-shrink: 0;
}

.icon-livn {
    /* Les PNG sont déjà colorés ; on évite tout filtre par défaut */
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.icon-bi {
    /* Bootstrap Icons héritent de la couleur courante par défaut.
       Les classes utility text-* (text-success, text-warning, …) appliquées
       depuis le helper bi_icon() pilotent la couleur. */
    line-height: 1;
}

/* ── Tailles standardisées ─────────────────────────────────────────────── */

.icon-xs { width: 0.875rem; height: 0.875rem; font-size: 0.875rem; }   /* 14px */
.icon-sm { width: 1rem;     height: 1rem;     font-size: 1rem; }       /* 16px */
.icon-md { width: 1.25rem;  height: 1.25rem;  font-size: 1.25rem; }    /* 20px (défaut) */
.icon-lg { width: 1.5rem;   height: 1.5rem;   font-size: 1.5rem; }     /* 24px */
.icon-xl { width: 2rem;     height: 2rem;     font-size: 2rem; }       /* 32px */
.icon-2x { width: 3rem;     height: 3rem;     font-size: 3rem; }       /* 48px */
.icon-3x { width: 4rem;     height: 4rem;     font-size: 4rem; }       /* 64px */

/* ── Espacement contextuel (juste avant ou après du texte) ─────────────── */

/* Icône suivie d'un mot : petit gap à droite */
.icon + *:not(.icon)        { margin-left: 0.4rem; }
/* Texte suivi d'une icône : petit gap à gauche (gère "Voir →") */
*:not(.icon) + .icon        { margin-left: 0.35rem; }
/* Évite double marge si deux icônes côte à côte */
.icon + .icon               { margin-left: 0.25rem; }

/* ── Boutons & badges ─────────────────────────────────────────────────── */

/* Dans un bouton/badge, l'icône s'aligne au milieu du flex */
.btn .icon,
.badge .icon,
.tab .icon,
.nav-item .icon,
.kpi__icon .icon {
    vertical-align: middle;
}

/* Boutons : laisser le helper gérer le gap via .icon + * */
.btn > .icon:first-child:not(:only-child) { margin-right: 0.4rem; margin-left: 0; }
.btn > .icon:last-child:not(:only-child)  { margin-left: 0.4rem; margin-right: 0; }

/* ── Sidebar / Nav ─────────────────────────────────────────────────────── */

.sidebar .icon,
.menu .icon {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    vertical-align: -0.2em;
}

/* ── KPIs / cartes-stats (icônes grandes) ─────────────────────────────── */

.kpi__icon .icon,
.stat-card .icon-livn,
.stat-card .icon-bi {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 2.25rem;
}

/* ── Couleurs sémantiques pour Bootstrap Icons ─────────────────────────── */
/* (réutilise les variables Domivae si présentes, sinon palette Bootstrap) */

:root {
    --domivae-canard: #2C5F6F;     /* propriétaire */
    --domivae-abricot: #E89B6B;    /* locataire */
    --domivae-bleu-marine: #1B3A5C;/* admin / gestionnaire / agence / artisan */
}

.icon-bi.text-canard      { color: var(--domivae-canard) !important; }
.icon-bi.text-abricot     { color: var(--domivae-abricot) !important; }
.icon-bi.text-bleu-marine { color: var(--domivae-bleu-marine) !important; }

/* Reprend les utilities Bootstrap sans surcharger si la lib est déjà là */
.icon-bi.text-success { color: var(--color-success, #198754) !important; }
.icon-bi.text-danger  { color: var(--color-danger,  #dc3545) !important; }
.icon-bi.text-warning { color: var(--color-warning, #ffc107) !important; }
.icon-bi.text-info    { color: var(--color-info,    #0dcaf0) !important; }
.icon-bi.text-muted   { color: var(--color-muted,   #6c757d) !important; }

/* ── Container icon-text (icône + label inline) ─────────────────────────── */

.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: inherit;
}

/* ── Cas particulier : icônes en hover/lien ───────────────────────────── */

a:hover .icon-livn { opacity: 0.85; }
a:hover .icon-bi   { opacity: 0.85; }

/* ── Accessibilité : décoratives masquées du flux ARIA ─────────────────── */

.icon[role="presentation"],
.icon[aria-hidden="true"] {
    pointer-events: none;
}

/* ── Print : on garde les icônes lisibles ──────────────────────────────── */

@media print {
    .icon-livn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}