/* =========================================================================
   Atenção: no Filament 1rem = 16px (no site, 10px).
   Painel Carango — visual premium sobre o Filament 5, sem build.
   - Fundo: imagem do usuário (modo escuro) ou fundo claro próprio.
   - Topo: logo | rótulo, busca, avisos, claro/escuro, configurações, perfil.
   - Menu lateral direto sobre o fundo; só o conteúdo usa "liquid glass".
   O Filament aplica o modo escuro com :where(.dark …) (especificidade 0),
   então "html.dark .fi-…" sobrescreve sem !important.
   ========================================================================= */

:root {
    --painel-vermelho: #ea3636;

    /* modo claro */
    --painel-fundo-claro:
        radial-gradient(37.5rem 25rem at 85% -10%, rgba(234, 54, 54, 0.10), transparent 60%),
        radial-gradient(31.25rem 25rem at -10% 110%, rgba(84, 120, 190, 0.14), transparent 60%),
        linear-gradient(160deg, #eef2f8 0%, #e4eaf3 50%, #f3f5f9 100%);
    --painel-vidro: rgba(255, 255, 255, 0.55);
    --painel-vidro-borda: rgba(255, 255, 255, 0.75);
    --painel-vidro-sombra: 0 1.5rem 3.75rem rgba(45, 54, 67, 0.12);
    --painel-cartao: rgba(255, 255, 255, 0.72);
    --painel-cartao-borda: rgba(255, 255, 255, 0.85);
    --painel-texto-menu: #2d3643;
    --painel-texto-menu-suave: #6b7480;
    --painel-botao: rgba(255, 255, 255, 0.6);
    --painel-botao-borda: rgba(255, 255, 255, 0.8);
}

html.dark {
    --painel-vidro: rgba(16, 20, 26, 0.45);
    --painel-vidro-borda: rgba(255, 255, 255, 0.10);
    --painel-vidro-sombra: 0 1.5rem 3.75rem rgba(0, 0, 0, 0.45);
    --painel-cartao: rgba(255, 255, 255, 0.04);
    --painel-cartao-borda: rgba(255, 255, 255, 0.08);
    --painel-texto-menu: rgba(255, 255, 255, 0.82);
    --painel-texto-menu-suave: rgba(255, 255, 255, 0.5);
    --painel-botao: rgba(255, 255, 255, 0.06);
    --painel-botao-borda: rgba(255, 255, 255, 0.12);
}

/* ---------- Fundo ---------- */

html .fi-body {
    background: var(--painel-fundo-claro) fixed;
}

html.dark .fi-body {
    background-color: #05070a;
    background-image:
        linear-gradient(180deg, rgba(5, 7, 10, 0.35) 0%, rgba(5, 7, 10, 0.65) 100%),
        var(--painel-fundo-imagem);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ---------- Topo ---------- */

html .fi-topbar {
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    gap: 0.75rem;
}

/* sticky: um véu de vidro só para o conteúdo rolando por baixo.
   Fica num ::before: backdrop-filter no próprio contêiner vira referência
   dos menus suspensos (avatar, avisos) e eles abriam por baixo do conteúdo. */
html .fi-topbar-ctn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    background: color-mix(in srgb, var(--painel-vidro) 60%, transparent);
    border-bottom: 1px solid var(--painel-vidro-borda);
}

.painel-brand-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-inline-start: 0.75rem;
}

.painel-brand-divider {
    width: 1px;
    height: 1.375rem;
    background: currentColor;
    opacity: 0.25;
}

.painel-brand-text {
    font-weight: 600;
    font-size: 0.938rem;
    letter-spacing: 0.01em;
    color: var(--painel-texto-menu);
    white-space: nowrap;
}

.painel-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botões redondos de vidro (claro/escuro, configurações) */
.painel-icon-btn {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid var(--painel-botao-borda);
    background: var(--painel-botao);
    color: var(--painel-texto-menu);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.painel-icon-btn:hover {
    color: var(--painel-vermelho);
}

.painel-icon-btn:focus-visible {
    outline: 2px solid var(--painel-vermelho);
    outline-offset: 2px;
}

.painel-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* mostra o sol no escuro (ir para o claro) e a lua no claro */
.painel-icon-sun {
    display: none;
}

html.dark .painel-icon-sun {
    display: block;
}

html.dark .painel-icon-moon {
    display: none;
}

/* Sino de avisos e avatar com o mesmo formato */
html .fi-topbar .fi-topbar-database-notifications-btn,
html .fi-topbar .fi-user-menu-trigger {
    border-radius: 50%;
}

html .fi-topbar .fi-topbar-database-notifications-btn {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--painel-botao-borda);
    background: var(--painel-botao);
}

/* Busca em pílula de vidro */
html .fi-topbar .fi-global-search-field .fi-input-wrp {
    border-radius: 999px;
    background: var(--painel-botao);
    --tw-ring-color: var(--painel-botao-borda);
}

/* ---------- Menu lateral direto sobre o fundo ---------- */

@media (min-width: 40rem) {
    html .fi-sidebar,
    html.dark .fi-sidebar {
        background: transparent;
        box-shadow: none;
        --tw-ring-shadow: 0 0 #0000;
    }
}

/* gaveta do celular: vidro para o texto não ficar sobre a imagem */
@media (max-width: 39.994rem) {
    html .fi-sidebar.fi-sidebar-open {
        background: var(--painel-vidro);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        backdrop-filter: blur(24px) saturate(140%);
    }
}

html .fi-sidebar .fi-sidebar-item-label,
html .fi-sidebar .fi-sidebar-item-icon,
html .fi-sidebar .fi-sidebar-group-label {
    color: var(--painel-texto-menu);
}

html .fi-sidebar .fi-sidebar-group-label {
    color: var(--painel-texto-menu-suave);
}

html .fi-sidebar .fi-sidebar-item-btn:hover {
    background: var(--painel-botao);
}

/* item ativo: pílula de vidro com ícone vermelho */
html .fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--painel-vidro);
    border: 1px solid var(--painel-vidro-borda);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.10);
}

html .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
}

html .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--painel-vermelho);
}

/* ---------- Conteúdo em "liquid glass" ---------- */

@media (min-width: 40rem) {
    /* ocupa toda a área ao lado do menu (o max-width do Filament centralizava
       o vidro e abria um vão entre o menu e o conteúdo) */
    html .fi-main {
        width: auto;
        max-width: none;
        margin-inline-start: 0;
        margin-block: 1rem 1.5rem;
        margin-inline-end: 1rem;
        padding: 1.5rem;
        border-radius: 1.75rem;
        background: var(--painel-vidro);
        border: 1px solid var(--painel-vidro-borda);
        box-shadow: var(--painel-vidro-sombra), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        -webkit-backdrop-filter: blur(28px) saturate(150%);
        backdrop-filter: blur(28px) saturate(150%);
    }
}

@media (max-width: 39.994rem) {
    html .fi-main {
        margin: 0.75rem 0.75rem 1.25rem;
        padding: 1rem;
        border-radius: 1.25rem;
        width: auto;
        background: var(--painel-vidro);
        border: 1px solid var(--painel-vidro-borda);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
    }
}

/* Blocos dentro do vidro: translúcidos, sem o cinza chapado do tema */
html .fi-main .fi-section:not(.fi-section-not-contained):not(.fi-aside),
html .fi-main .fi-section.fi-aside > .fi-section-content-ctn,
html .fi-main .fi-ta-ctn,
html .fi-main .fi-wi-stats-overview-stat,
html .fi-main .fi-wi-chart .fi-section {
    background: var(--painel-cartao);
    --tw-ring-color: var(--painel-cartao-borda);
    border-radius: 1.125rem;
}

html .fi-main .fi-ta-ctn {
    overflow: hidden;
}

/* ---------- Sem transparência para quem pede ---------- */

@media (prefers-reduced-transparency: reduce) {
    html .fi-main,
    html .fi-topbar-ctn::before,
    html .fi-sidebar.fi-sidebar-open {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: #f5f7fa;
    }

    html.dark .fi-main,
    html.dark .fi-topbar-ctn::before,
    html.dark .fi-sidebar.fi-sidebar-open {
        background: #12161b;
    }
}

/* ---------- Menu lateral sem barra de rolagem visível ----------
   continua rolando (roda do mouse, trackpad, toque e teclado) */
html .fi-sidebar-nav {
    scrollbar-width: none;
    scrollbar-gutter: auto;
}

html .fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* ---------- Cards do resumo na dashboard ---------- */
html .fi-main .fi-wi-stats-overview-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

html .fi-main a.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.10);
}

html .fi-main .fi-wi-stats-overview-stat-label-ctn .fi-icon {
    color: var(--painel-vermelho);
}

@media (prefers-reduced-motion: reduce) {
    html .fi-main a.fi-wi-stats-overview-stat:hover {
        transform: none;
    }
}

/* ---------- Saudação no topo, ao lado do avatar ---------- */
.painel-saudacao {
    margin-inline-start: 0.5rem;
    font-size: 0.875rem;
    color: var(--painel-texto-menu-suave);
    white-space: nowrap;
}

.painel-saudacao strong {
    font-weight: 600;
    color: var(--painel-texto-menu);
}

@media (max-width: 47.99rem) {
    .painel-saudacao {
        display: none;
    }
}

/* ---------- Fundo em Configurações: só a miniatura, sem o nome do arquivo ---------- */
.painel-upload-fundo .filepond--file-info {
    display: none;
}

/* ---------- Menu lateral mais compacto e com "tem mais" no pé ----------
   Sem barra de rolagem, os grupos de baixo (Blog, Suporte, Sistema) ficavam
   escondidos em telas baixas sem nenhuma pista. Menos respiro entre grupos e
   itens, e um esmaecido no pé do menu indica que ele continua rolando. */
html .fi-sidebar-nav {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
    row-gap: 1.25rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 3rem), transparent);
}

html .fi-sidebar-nav-groups {
    row-gap: 1.25rem;
}

html .fi-sidebar .fi-sidebar-item-btn {
    padding-block: 0.4rem;
}

html .fi-sidebar .fi-sidebar-group-btn {
    padding-block: 0.25rem;
}

/* Avatar do topo (iniciais no círculo vermelho) no mesmo tamanho dos botões */
html .fi-topbar .fi-user-menu-trigger .fi-avatar {
    width: 2.5rem;
    height: 2.5rem;
}

html .fi-topbar .fi-user-menu-trigger:hover .fi-avatar {
    filter: brightness(1.08);
}