/* =====================================================================
   PG-DS-ATUALIZAR-V1 — Botao de atualizar canonico (.pg-atualizar*).

   Consumido por Components/Shared/BotaoAtualizar.razor.

   POR QUE EXISTE
   O portal e multi-tenant e a troca de empresa acontece SEM reload
   (Service/EmpresaContext.cs). As telas de gerencia carregam os dados
   uma vez no OnInitializedAsync, entao depois da troca elas continuam
   mostrando o conteudo da empresa anterior ate o F5. Este botao da ao
   usuario a acao explicita de recarregar a tela atual.

   Cor e fundo saem dos tokens (--cp-*), entao acompanha o tema claro/escuro
   sozinho. NAO redeclare .pg-atualizar* no <style> local de pagina: blocos
   <style> em .razor sao globais e vazam de uma tela para outra.
   ===================================================================== */

.pg-atualizar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: 44px;
    height: 44px;
    padding: 0;

    background: var(--cp-surface);
    border: 1px solid var(--cp-line);
    border-radius: 12px;
    color: var(--cp-primary);

    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease,
                box-shadow 0.15s ease, transform 0.15s ease;
}

.pg-atualizar:hover:not(:disabled) {
    background: var(--cp-primary-soft, rgba(67, 56, 202, 0.08));
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.18);
    transform: translateY(-1px);
}

.pg-atualizar:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.pg-atualizar:disabled {
    opacity: 0.65;
    cursor: default;
}

.pg-atualizar .mud-icon-root {
    color: var(--cp-primary) !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

/* Com rotulo (Compacto="false"): vira um botao normal, largura automatica. */
.pg-atualizar-rotulo {
    width: auto;
    padding: 0 16px;
    font-family: var(--cp-font);
    font-size: 13px;
    font-weight: 600;
}

/* Enquanto carrega, o icone gira — sinal de que a acao esta em andamento. */
.pg-atualizar-girando .mud-icon-root {
    animation: pgAtualizarGira 0.9s linear infinite;
}

@keyframes pgAtualizarGira {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-atualizar-girando .mud-icon-root { animation: none; }
    .pg-atualizar:hover:not(:disabled) { transform: none; }
}