/*
 * DUC Magazzino Libri — icone vive (Fase 6).
 *
 * Registrato due volte, deliberatamente (stesso file, non duplicato):
 *  - pannello Filament, via Panel::assets([Css::make(...)]) in AdminPanelProvider
 *  - layout mobile /s/{token} e /cerca, via <link> diretto in scan/layout.blade.php
 *
 * Aggancio: ogni icona custom del set "duc" (resources/svg/duc/*.svg) porta
 * un attributo data-icon="<nome>" sul tag <svg> radice (Fase 6) — sopravvive
 * al merge di attributi di blade-ui-kit/Filament perche' non e' "class"
 * (le class duplicate su un tag HTML vengono deduplicate dal parser, i
 * data-attribute no). Verificato con:
 *   php artisan tinker --execute="echo svg('icon-scatole', ['class'=>'x'])->toHtml();"
 *
 * Stato attivo (voce di menu corrente): il colore blu persistente e' un
 * override esplicito qui, non un default di Filament — sidebar item con
 * classe .fi-active.
 */

@media (prefers-reduced-motion: no-preference) {
    svg[data-icon] {
        transition: color 160ms ease, transform 160ms cubic-bezier(.34, 1.56, .64, 1);
        transform-origin: 50% 50%;
    }

    /* Default: leggero scale + rotazione, per tutte le icone senza un
       comportamento dedicato sotto. */
    .fi-sidebar-item-btn:hover svg[data-icon],
    .duc-icon-hover:hover svg[data-icon],
    label:hover svg[data-icon] {
        transform: scale(1.08) rotate(-3deg);
    }

    /* Scatole: la falda si "apre" — rotazione piu' marcata verso l'alto. */
    .fi-sidebar-item-btn:hover svg[data-icon="scatole"],
    .duc-icon-hover:hover svg[data-icon="scatole"] {
        transform: scale(1.1) rotate(-8deg);
    }

    /* Libri: le pagine si "aprono" — skew leggero invece di rotazione pura. */
    .fi-sidebar-item-btn:hover svg[data-icon="libri"],
    .duc-icon-hover:hover svg[data-icon="libri"] {
        transform: scale(1.1) skewY(-4deg);
    }

    /* Sposta / trasferimento: la freccia si muove lateralmente. */
    .fi-sidebar-item-btn:hover svg[data-icon="sposta"],
    .fi-sidebar-item-btn:hover svg[data-icon="trasferimento"],
    .duc-icon-hover:hover svg[data-icon="sposta"],
    .duc-icon-hover:hover svg[data-icon="trasferimento"] {
        transform: scale(1.08) translateX(2px);
    }

    /* Carico / scarico: la freccia si muove verticalmente (dentro/fuori). */
    .fi-sidebar-item-btn:hover svg[data-icon="carico"],
    .duc-icon-hover:hover svg[data-icon="carico"] {
        transform: scale(1.08) translateY(-2px);
    }

    .fi-sidebar-item-btn:hover svg[data-icon="scarico"],
    .duc-icon-hover:hover svg[data-icon="scarico"] {
        transform: scale(1.08) translateY(2px);
    }

    /* Cerca / scansiona-qr: la lente/mirino si "inclina" per guardare meglio. */
    .fi-sidebar-item-btn:hover svg[data-icon="cerca"],
    .fi-sidebar-item-btn:hover svg[data-icon="scansiona-qr"],
    .duc-icon-hover:hover svg[data-icon="cerca"],
    .duc-icon-hover:hover svg[data-icon="scansiona-qr"] {
        transform: scale(1.1) rotate(10deg);
    }

    /* Click/press: risposta immediata e piu' contenuta di ogni hover. */
    .fi-sidebar-item-btn:active svg[data-icon],
    .duc-icon-hover:active svg[data-icon] {
        transform: scale(0.92);
        transition-duration: 90ms;
    }
}

/* Colore: cambia al hover e resta "attivo" sulla voce corrente — non
   dipende da prefers-reduced-motion, e' solo colore, nessun movimento.
   Due meccanismi distinti, deliberatamente NON unificati:
     - pannello Filament: il dark mode e' una classe .dark su <html>,
       impostata da Filament stesso (localStorage o system, vedi
       vendor/filament/filament/resources/views/components/layout/base.blade.php)
       — MAI un attributo data-theme (quello e' la convenzione degli
       Artifact, non di questa app: usarlo qui avrebbe fatto matchare
       sempre il ramo "dark", bug verificato via screenshot Playwright
       — svg color risultava #6fb3ea anche in light mode).
     - layout mobile (/s/{token}, /cerca): nessuna classe .dark, il tema
       segue solo prefers-color-scheme (vedi scan/layout.blade.php) — le
       sue variabili --accento/--accento-scuro sono gia' corrette per
       tema, quindi qui basta usare var(), niente selettore duplicato. */
.fi-sidebar-item-btn:hover svg[data-icon] {
    color: #1961AC;
}

html.dark .fi-sidebar-item-btn:hover svg[data-icon] {
    color: #6fb3ea;
}

.fi-sidebar-item.fi-active svg[data-icon] {
    color: #1961AC !important;
}

html.dark .fi-sidebar-item.fi-active svg[data-icon] {
    color: #6fb3ea !important;
}

/* Esclude .principale: e' gia' un bottone pieno --accento con icona/testo
   bianco (--su-accento) — cambiare il colore SOLO dell'icona al hover li'
   la spegnerebbe contro lo sfondo blu invece di valorizzarla. */
.duc-icon-hover:not(.principale):hover svg[data-icon] {
    color: var(--accento-scuro, #1961AC);
}

/* Bottoni mobile con stato "attivo" esplicito (pannello aperto — vedi
   scan/scatola.blade.php, classe .attivo aggiunta via JS al toggle). */
.secondario.attivo svg[data-icon] {
    color: var(--accento, #1961AC);
}

/*
 * Effetto glass sulle stat card della dashboard: PROVATO e SCARTATO (Fase 6).
 * Un background traslucido + backdrop-filter sopra la stat card rompeva la
 * leggibilita' in light mode: il fill semi-trasparente della sparkline
 * nativa di Filament (Stat::chart(), canvas a tutta altezza della card)
 * si sommava al nostro overlay producendo un grigio uniforme su tutta la
 * card, non solo sotto la curva — verificato via screenshot Playwright
 * (light-desktop-dashboard.png prima del rollback). Le stat card restano
 * quindi con lo stile nativo Filament (gia' pulito, sparkline inclusa);
 * il glass leggero e' applicato solo a superfici sotto il nostro controllo
 * diretto (.duc-card in Import/Inventario/Report, vedi quelle view).
 */