/* ============================================
   ICON SYSTEM - Brand XManagerPro
   Icone SVG (libreria IOSLINE, sprite inline in
   NetLuxCustomControl/IconSpriteInline.ascx) con
   meccanismo colore-per-stato dell'identikit di
   brand (approvato 10/07/2026).

   Dipende da Content/_theme-variables.css, che
   DEVE essere caricato prima di questo file.
   ============================================ */

/* ---- Icona base (sprite <svg><use>) ---- */
.icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    fill: currentColor;
    stroke: none;
}

/* ---- Dimensioni ---- */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 18px; height: 18px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ---- Icona rotante (spinner/caricamento) ---- */
.icon--spin {
    animation: icon-spin 1s linear infinite;
}
@keyframes icon-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Stati colore (su sfondo chiaro) ---- */
.icon--rest     { color: var(--icon-rest); }         /* Grigio Ardesia - UI a riposo */
.icon--active   { color: var(--primary-color); }     /* Blu Elettrico - icone attive/hover/selezionate */
.icon--positive { color: var(--teal); }              /* Turchese Vitale - stati positivi */
.icon--urgent   { color: var(--accent-corallo); }    /* Corallo Energia - urgenza */

/* ---- Varianti su sfondo scuro (Blu Notte, --primary-dark) ---- */
.icon--on-dark        { color: var(--icon-rest-dark-bg); }  /* Bianco Ottico */
.icon--on-dark-accent { color: var(--teal); }                /* Turchese, contrasto 7.3:1 (identikit) */

/* ---- Badge pattern: pillola chiara + icona colorata piccola ---- */
.icon-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.icon-badge--positive { background: var(--teal-light); color: #0a7a68; }
.icon-badge--urgent    { background: var(--accent-corallo-light); color: #8a2e1f; }
.icon-badge--positive .icon,
.icon-badge--urgent .icon { color: inherit; }

/* ---- Badge pattern: cerchio pieno + icona bianca
   (identikit: 42x42, radius 12px, icona 22x22) ---- */
.icon-badge-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
}
.icon-badge-circle--active { background: var(--navy-accent); }
.icon-badge-circle--urgent { background: var(--accent-corallo); }
.icon-badge-circle .icon { width: 22px; height: 22px; color: #ffffff; }