/*
 * Ajustes do painel (admin e portal), carregado pelos PanelProviders (render hook HEAD_END).
 * Mesmo padrão do projeto BOX.
 */

/* Barra da lista: ações da lista à esquerda e, logo depois, o botão "Pesquisar" (App\Support\FiltrosPadrao) */
.fi-ta-header-toolbar {
    justify-content: flex-start;
}
.fi-ta-header-toolbar > div:last-child:not(.fi-ta-actions) {
    order: 1;
    margin-inline-start: 0;
}
/* Lista sem botões: o bloco de ações vazio não ocupa espaço, e o "Pesquisar" fica alinhado à esquerda.
   Vale também quando só há ações em massa ("Excluir selecionados"), que ficam escondidas (x-show)
   até marcar alguma linha: sem isso, o bloco invisível empurrava o "Pesquisar" 1rem para a direita. */
.fi-ta-header-toolbar > .fi-ta-actions:not(:has(> :not([style*="display: none"]))) {
    display: none;
}

/* Marca no topo do painel e no login (resources/views/filament/marca.blade.php) */
.zap-marca { display: inline-flex; align-items: center; gap: .5rem; height: 100%; }
.zap-marca svg { height: 100%; width: auto; }
.zap-marca-nome { font-family: Nunito, system-ui, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; color: #0B3B2C; line-height: 1; }
.dark .zap-marca-nome { color: #FFFFFF; }

/*
 * Tela de login (App\Filament\Auth\Login): fundo escuro na cor da marca e o cartão branco com a
 * marca, o título e o botão largo. Só nas telas sem usuário logado (sem o cabeçalho da simple layout).
 */
.fi-simple-layout:not(:has(.fi-simple-layout-header)) {
    background:
        radial-gradient(circle at 18% 22%, rgba(60, 196, 138, .22), transparent 42%),
        radial-gradient(circle at 85% 80%, rgba(15, 157, 107, .28), transparent 45%),
        linear-gradient(160deg, #0B3B2C 0%, #08291F 55%, #0B3B2C 100%);
    min-height: 100dvh;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-main-ctn {
    padding: 1.5rem 1rem;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-main {
    max-width: 26rem;
    padding: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --tw-ring-color: transparent;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-page {
    padding: 0 2.25rem 1.75rem;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-header {
    margin: 0 -2.25rem 1.5rem;
    padding: 2.25rem 2.25rem 1.5rem;
    background: linear-gradient(180deg, #EAF7F1 0%, #FFFFFF 100%);
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-header .fi-logo {
    margin-bottom: 1.25rem;
    height: 2.75rem !important;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-header-heading {
    font-family: Nunito, system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    color: #0B3B2C;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-header-subheading {
    margin-top: .25rem;
    color: #4F625B;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-input-wrp {
    background: #F4FAF7;
    border-radius: .65rem;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-input {
    padding-block: .7rem;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-ac .fi-btn {
    padding-block: .8rem;
    border-radius: .65rem;
    font-size: 1rem;
    background: linear-gradient(180deg, #0F9D6B 0%, #0B7A53 100%);
    box-shadow: 0 10px 22px -10px rgba(11, 122, 83, .8);
    color: #FFFFFF;
    font-weight: 600;
}
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-ac .fi-btn .fi-btn-label,
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-ac .fi-btn svg { color: #FFFFFF; }
.fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-ac .fi-btn:hover {
    background: linear-gradient(180deg, #0B7A53 0%, #0B3B2C 100%);
}
.zap-login-rodape {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .75rem;
    color: #8A9A93;
}
/* Login em tema escuro: o cartão continua claro, como a marca. */
.dark .fi-simple-layout:not(:has(.fi-simple-layout-header)) .fi-simple-main { color-scheme: light; }