/* Menu lateral e cabeçalho do painel no visual "Portu" (ver AdminPanelProvider, renderHook HEAD_END).
   Só reaplica estilo nas classes `fi-*` do Filament — a estrutura e o comportamento (menu que
   abre/fecha, busca global, menu do usuário, celular) continuam sendo os do Filament.
   Cores: as da logo do SP Certificados (verde-azulado #065a62, dourado #ca922a). */

:root {
    --pds-main: #065a62;
    --pds-gold: #ca922a;
    --pds-page: #f3f8f8;
    --pds-card: #ffffff;
    --pds-line: #dbe6e6;
    --pds-muted: rgba(6, 90, 98, 0.6);
    --pds-shadow: 0 1px 2px rgba(6, 90, 98, 0.05), 0 8px 24px rgba(6, 90, 98, 0.07);
    --pds-banner: 0px;
    --pds-topbar: 64px;
}

.dark {
    --pds-main: #8fd3d9;
    --pds-page: #030712;
    --pds-card: #0f1c1e;
    --pds-line: rgba(255, 255, 255, 0.08);
    --pds-muted: rgba(220, 240, 242, 0.55);
    --pds-shadow: none;
}

/* O aviso de homologação (fixo no topo) empurra tudo para baixo na altura dele. */
body:has(.pd-staging-banner) { --pds-banner: 26px; }

/* ===== Fundo da página (só nas telas com o layout do painel; o login tem o dele) ===== */
.fi-body:has(.fi-layout) {
    background:
        radial-gradient(800px 600px at 4% 0%, rgba(202, 146, 42, 0.07), transparent 70%),
        radial-gradient(900px 700px at 92% 100%, rgba(6, 90, 98, 0.07), transparent 70%),
        var(--pds-page) !important;
}
.dark .fi-body:has(.fi-layout) { background: var(--pds-page) !important; }

/* ===== Título da página ===== */
.fi-header-heading {
    color: var(--pds-main);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ===== Cabeçalho (barra do topo) ===== */
.fi-topbar { background: transparent; box-shadow: none; --tw-ring-shadow: 0 0 #0000; }
.fi-topbar-ctn { background: transparent; }

.fi-global-search-ctn .fi-input-wrp {
    background: var(--pds-card);
    border-radius: 12px;
    box-shadow: var(--pds-shadow);
    --tw-ring-shadow: 0 0 #0000;
}
.fi-global-search-ctn .fi-input-wrp:focus-within { box-shadow: var(--pds-shadow), 0 0 0 2px rgba(6, 90, 98, 0.25); }
.fi-global-search-ctn input { font-size: 14px; }

/* Sino (notificações do Filament) e engrenagem (perfil): quadradinhos brancos com sombra, como no Portu. */
.fi-topbar-end { gap: 12px; }
.fi-topbar-database-notifications-btn,
.pds-icon-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pds-card);
    box-shadow: var(--pds-shadow);
    color: var(--pds-main);
}
.pds-icon-btn svg { width: 20px; height: 20px; }
.fi-topbar-database-notifications-btn .fi-icon { color: var(--pds-main); }
.fi-topbar-database-notifications-btn .fi-badge { background: var(--pds-gold); color: #fff; }

/* Nome e perfil ao lado do avatar (resources/views/filament/shell/user-label.blade.php) */
/* Só a partir de 640px: em telas estreitas fica só o avatar. */
.pds-user-label { display: none; margin-inline-end: 12px; text-align: right; line-height: 1.25; white-space: nowrap; }
@media (min-width: 640px) { .pds-user-label { display: block; } }
.pds-user-label b { display: block; font-size: 13px; font-weight: 600; color: var(--pds-main); }
.pds-user-label span { display: block; font-size: 12px; color: var(--pds-muted); }

.fi-user-menu-trigger .fi-avatar { width: 40px; height: 40px; border-radius: 12px; }

/* ===== Menu e cabeçalho no desktop (≥ 1024px): menu na altura toda, cabeçalho só sobre o conteúdo ===== */
@media (min-width: 1024px) {
    body.fi-body { --sidebar-width: 15rem !important; }

    /* Cabeçalho fixo, do lado do menu até a borda direita. */
    .fi-topbar-ctn {
        position: fixed;
        top: var(--pds-banner);
        left: 0;
        right: 0;
        z-index: 30;
        height: var(--pds-topbar);
        background: color-mix(in srgb, var(--pds-page) 82%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    body:has(.fi-main-ctn-sidebar-open) .fi-topbar-ctn { left: var(--sidebar-width); }
    .fi-topbar { height: var(--pds-topbar); padding-inline: 32px; }

    /* O logo sai do cabeçalho e vai para o topo do menu. */
    .fi-topbar-start a { display: none; }

    /* Conteúdo abaixo do cabeçalho fixo. */
    .fi-main-ctn { padding-top: var(--pds-topbar); }

    /* Menu na altura toda. */
    .fi-sidebar {
        top: var(--pds-banner) !important;
        height: calc(100dvh - var(--pds-banner)) !important;
        border-inline-end: 1px solid var(--pds-line);
        background: transparent;
    }

    .fi-body-has-topbar .fi-sidebar-header {
        display: flex !important;
        height: auto;
        padding: 24px 28px 8px;
        background: transparent !important;
        box-shadow: none !important;
        --tw-ring-shadow: 0 0 #0000 !important;
    }
    .fi-sidebar-header .fi-logo { height: 46px !important; width: auto; margin-inline-start: 0 !important; }

    /* O título da página (o <h1> do Filament) sobe para dentro do cabeçalho, à esquerda, como no Portu;
       o resto do cabeçalho da página (migalhas, botões de ação) continua no lugar. */
    .fi-header-heading {
        position: fixed;
        top: var(--pds-banner);
        left: calc(var(--sidebar-width) + 52px);
        z-index: 31;
        height: var(--pds-topbar);
        max-width: calc(100vw - var(--sidebar-width) - 580px);
        margin: 0;
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        pointer-events: none;
    }
    body:not(:has(.fi-main-ctn-sidebar-open)) .fi-header-heading {
        left: 104px;
        max-width: calc(100vw - 104px - 560px);
    }

    /* Sem migalhas nem botões de ação, o cabeçalho da página só tinha o título (que subiu): some,
       para não sobrar um vão entre o cabeçalho e o conteúdo. */
    .fi-header:has(> div:only-child > .fi-header-heading:only-child) { display: none; }

    /* Botão de recolher: pequeno, no começo do cabeçalho, antes do título. */
    .fi-topbar-close-collapse-sidebar-btn {
        position: absolute;
        top: 14px;
        left: 6px;
        z-index: 40;
    }

    /* Menu recolhido (só ícones): os itens começam abaixo do cabeçalho fixo, onde fica o botão de abrir. */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav { padding-top: calc(var(--pds-topbar) + 8px); }
}

/* ===== Itens do menu ===== */
.fi-sidebar-nav { padding: 14px 16px 24px; }
.fi-sidebar-nav-groups { row-gap: 6px; }
.fi-sidebar-group-items { row-gap: 6px; }

.fi-sidebar-item-btn {
    height: 41px;
    padding-inline: 14px;
    column-gap: 13px;
    border-radius: 12px;
    color: var(--pds-muted);
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.fi-sidebar-item-btn:hover { background: color-mix(in srgb, var(--pds-card) 70%, transparent); color: var(--pds-main); }
.fi-sidebar-item-btn .fi-icon { width: 21px; height: 21px; color: currentColor; }
.fi-sidebar-item-label { font-size: 14px; font-weight: 500; color: inherit; }

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--pds-card);
    color: var(--pds-main);
    box-shadow: var(--pds-shadow);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--pds-main); font-weight: 600; }

/* Rodapé do menu (usuário/notificações quando ficam no menu) */
.fi-sidebar-footer { border-top: 1px solid var(--pds-line); }

@media (prefers-reduced-motion: reduce) { .fi-sidebar-item-btn { transition: none; } }