/* ==========================================================================
   ÍCONES 3D — tratamento visual global para todos os ícones Font Awesome
   Aplica um acabamento "glossy/3D" (gradiente + brilho + sombra de profundidade)
   em cima de QUALQUER ícone fa-solid/fa-regular/fa-brands já usado no projeto,
   sem precisar trocar nenhum <i> individualmente. Basta este arquivo estar
   linkado na página — o efeito é automático em 100% dos ícones.
   ========================================================================== */

.fa-solid::before,
.fa-regular::before,
.fa-brands::before,
.fas::before,
.far::before,
.fab::before {
    display: inline-block;
    background: linear-gradient(152deg,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .55) 16%,
        currentColor 46%,
        currentColor 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 1.5px 0 rgba(255, 255, 255, .35))
        drop-shadow(0 3px 4px rgba(15, 23, 42, .30));
}

/* Ícones muito pequenos (badges, contadores) ficam sujos com sombra forte — suaviza */
.nav-badge .fa-solid::before,
.nav-lock-badge::before,
.fa-spin::before,
.fa-spinner::before {
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .3))
        drop-shadow(0 1.5px 2px rgba(15, 23, 42, .25));
}

/* Ícones brancos (dentro de botões/badges cheios de cor) — realça o brilho
   em vez de escurecer, já que currentColor já é claro nesses contextos */
.btn i.fa-solid::before,
.btn i.fa-regular::before,
button i.fa-solid::before,
button i.fa-regular::before,
.shortcut-icon i.fa-solid::before,
.shortcut-icon i.fa-regular::before {
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, .45))
        drop-shadow(0 2px 3px rgba(15, 23, 42, .35));
}

/* ==========================================================================
   MENU LATERAL — selo "clay" 3D (fofo, com brilho no topo e sombra funda)
   O ícone vira ele mesmo o selo: usa currentColor (a cor que já estava no
   <i>, inline ou herdada) pra montar o gradiente do fundo, e o glifo em
   cima fica branco puro pra garantir contraste com qualquer cor de fundo.
   Ícones sem cor própria (sem style="color:...") caem no roxo padrão da
   marca — o style inline de quem já tem cor sempre vence essa regra.
   ========================================================================== */
#sidebarNav .nav-item > i:first-child {
    color: #8b5cf6; /* fallback — qualquer style="color:" inline no próprio <i> vence esta linha */
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: radial-gradient(circle at 32% 26%,
        color-mix(in srgb, currentColor 40%, white) 0%,
        currentColor 55%,
        color-mix(in srgb, currentColor 70%, black) 100%);
    box-shadow:
        inset 0 1.5px 1px rgba(255, 255, 255, .65),
        inset 0 -5px 7px rgba(0, 0, 0, .30),
        0 4px 8px rgba(0, 0, 0, .40),
        0 1px 0 rgba(255, 255, 255, .06);
    transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
}
#sidebarNav .nav-item > i:first-child::before {
    color: #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
#sidebarNav .nav-item:hover > i:first-child {
    transform: scale(1.08) rotate(-3deg);
}

/* Itens do menu cujo "ícone" é um emoji solto (não um <i> do Font Awesome)
   não pegavam a regra acima. Mesmo selo clay, badge por classe. */
.nav-emoji-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1;
    box-shadow:
        inset 0 1.5px 1px rgba(255, 255, 255, .65),
        inset 0 -5px 7px rgba(0, 0, 0, .30),
        0 4px 8px rgba(0, 0, 0, .40);
    transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
}
.nav-item:hover .nav-emoji-badge {
    transform: scale(1.08) rotate(-3deg);
}
.nav-emoji-badge.pic {
    background: radial-gradient(circle at 32% 26%, #fde68a 0%, #f59e0b 55%, #b45309 100%);
}