/*
 * O sino do topo.
 *
 * O padrão do Filament é um ícone cinza com um contador pequeno, do mesmo peso
 * visual dos outros botões da barra — em tela cheia de informação, quem tem
 * aviso novo não percebe. A ideia aqui é simples: enquanto não há nada, o sino
 * fica quieto como qualquer outro ícone; quando há, ele se anuncia.
 *
 * O destaque depende do `:has()`, que é como o botão sabe que tem contador
 * dentro. Onde o navegador não suportar, tudo continua funcionando com a
 * aparência padrão — nada quebra, só não realça.
 */

/* Transição suave para o realce entrar e sair sem susto. */
.fi-topbar-database-notifications-btn {
    transition:
        color 200ms ease,
        background-color 200ms ease,
        transform 150ms ease;
}

.fi-topbar-database-notifications-btn:hover {
    transform: scale(1.06);
}

.fi-topbar-database-notifications-btn:active {
    transform: scale(0.97);
}

/* ---- Com aviso não lido ---- */

/*
 * A cor vai no ícone, e não no botão. O SVG do Filament não herda a cor do pai
 * — ele tem regra própria e `stroke: currentColor` —, então pintar o botão não
 * muda nada: verificado na tela, o traço continuava cinza. Pintando o `.fi-icon`
 * o traço acompanha.
 */
.fi-topbar-database-notifications-btn:has(.fi-icon-btn-badge-ctn) .fi-icon {
    color: var(--warning-500, #f59e0b);
}

.fi-topbar-database-notifications-btn:has(.fi-icon-btn-badge-ctn):hover {
    background-color: var(--warning-50, #fffbeb);
}

:is(.dark) .fi-topbar-database-notifications-btn:has(.fi-icon-btn-badge-ctn) .fi-icon {
    color: var(--warning-400, #fbbf24);
}

:is(.dark) .fi-topbar-database-notifications-btn:has(.fi-icon-btn-badge-ctn):hover {
    background-color: color-mix(in oklab, var(--warning-400, #fbbf24) 12%, transparent);
}

/*
 * Um toque no sino ao carregar a página, e só. Balanço contínuo cansa e vira
 * ruído — o objetivo é que o olho encontre o ícone uma vez, não que a tela
 * fique se mexendo enquanto a pessoa trabalha.
 */
.fi-topbar-database-notifications-btn:has(.fi-icon-btn-badge-ctn) .fi-icon {
    animation: sino-toque 1.2s ease-in-out 1;
    transform-origin: top center;
}

@keyframes sino-toque {
    0%,
    60%,
    100% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(11deg);
    }
    20% {
        transform: rotate(-9deg);
    }
    30% {
        transform: rotate(7deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

/* ---- O contador ---- */

.fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge {
    /* Pílula com folga: dois e três dígitos continuam legíveis, e o contorno
       separa o número do ícone quando os dois se sobrepõem. */
    min-width: 1.15rem;
    padding-inline: 0.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: 9999px;
    box-shadow: 0 0 0 2px var(--gray-50, #f9fafb);
}

:is(.dark) .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge {
    box-shadow: 0 0 0 2px var(--gray-900, #111827);
}

/*
 * Quem pediu menos movimento no sistema operacional não deve receber o balanço.
 * O realce de cor e o contador continuam — a informação não depende da
 * animação.
 */
@media (prefers-reduced-motion: reduce) {
    .fi-topbar-database-notifications-btn,
    .fi-topbar-database-notifications-btn:hover,
    .fi-topbar-database-notifications-btn:active {
        transform: none;
        transition: color 200ms ease, background-color 200ms ease;
    }

    .fi-topbar-database-notifications-btn:has(.fi-icon-btn-badge-ctn) .fi-icon {
        animation: none;
    }
}