<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/png" href="{{ asset('icons/icon-192.png') }}">
    <title>{{ $title ?? 'Painel' }} — {{ \App\Models\Configuracao::atual()->nome_sistema }}</title>
    @livewireStyles
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    @php($config = \App\Models\Configuracao::atual())
    {{-- Logo "de marca" pro canto do painel gerencial: usa a logo da empresa se
         tiver sido cadastrada, senão cai pra logo da câmara mesmo. --}}
    @php($logoTopo = $config->logo_empresa_path ?? $config->logo_path)
    {{-- Consulta única e leve (status já é indexado, ver migration de sessoes) —
         só pra decidir se mostra o indicador "AO VIVO", nada pesado. Calculada
         aqui (não dentro do @if de permissão) pra poder ser reaproveitada tanto
         no menu desktop quanto no menu mobile sem duplicar a consulta/lógica. --}}
    @php($haSessaoAtivaAgora = \App\Models\Sessao::where('status', 'ativa')->exists())

    {{-- ===================== Menu administrativo (ETAPA 2C) =====================
         Fonte de dados ÚNICA e hierárquica (grupos com itens dentro), usada
         IDENTICAMENTE pelo dropdown desktop e pelo acordeão mobile logo
         abaixo — nunca duas listas divergentes (ver item 15 da Etapa 2C).

         'tipo' => 'link'  → item direto na barra, sem dropdown (Painel, Relatórios).
         'tipo' => 'grupo' → dropdown (desktop) / acordeão (mobile) com sub-itens.

         Cada item folha: 'modulo' (chave de Permissao::MODULOS; null = livre
         pra qualquer operador autenticado), 'rota' (nome de rota existente,
         nada foi criado/alterado), 'icone' (Font Awesome já usado no
         projeto) e 'ativoQuando' (padrão(ões) de request()->routeIs()).

         Sessões Legislativas e Auditoria/Resumo da Sessão NÃO têm item de
         menu próprio de propósito (ver relatório da Etapa 2C): Sessões
         Legislativas já é gerenciada dentro da própria tela de Legislaturas
         (resources/views/admin/legislaturas/index.blade.php) e Auditoria/
         Resumo já são alcançadas de dentro do contexto de uma sessão
         específica (central-sessao.blade.php e painel-operador.blade.php) —
         adicionar itens permanentes pra elas aqui só poluiria o menu. --}}
    @php($menu = [
        ['tipo' => 'link', 'modulo' => null, 'rota' => 'admin.dashboard', 'label' => 'Painel', 'icone' => 'fa-house', 'ativoQuando' => ['admin.dashboard']],

        ['tipo' => 'grupo', 'grupo' => 'Sessão Plenária', 'icone' => 'fa-gauge-high', 'itens' => [
            ['modulo' => 'sessoes', 'rota' => 'admin.central-sessao', 'label' => 'Central da Sessão', 'icone' => 'fa-gauge-high', 'ativoQuando' => ['admin.central-sessao'], 'aoVivo' => true],
            ['modulo' => 'sessoes', 'rota' => 'admin.sessoes.index', 'label' => 'Sessões', 'icone' => 'fa-calendar-days', 'ativoQuando' => ['admin.sessoes.*']],
            ['modulo' => 'audio', 'rota' => 'admin.audio.index', 'label' => 'Áudio', 'icone' => 'fa-microphone', 'ativoQuando' => ['admin.audio.*']],
        ]],

        ['tipo' => 'grupo', 'grupo' => 'Processo Legislativo', 'icone' => 'fa-file-lines', 'itens' => [
            ['modulo' => 'materias', 'rota' => 'admin.materias.index', 'label' => 'Matérias', 'icone' => 'fa-file-lines', 'ativoQuando' => ['admin.materias.*']],
            ['modulo' => 'protocolo', 'rota' => 'admin.protocolos.index', 'label' => 'Protocolo', 'icone' => 'fa-inbox', 'ativoQuando' => ['admin.protocolos.*']],
            ['modulo' => 'leis', 'rota' => 'admin.leis.index', 'label' => 'Leis', 'icone' => 'fa-scroll', 'ativoQuando' => ['admin.leis.*']],
            ['modulo' => 'atas', 'rota' => 'admin.atas.index', 'label' => 'Atas', 'icone' => 'fa-book', 'ativoQuando' => ['admin.atas.*']],
        ]],

        ['tipo' => 'grupo', 'grupo' => 'Estrutura Legislativa', 'icone' => 'fa-landmark', 'itens' => [
            // 'ativoQuando' também cobre admin.sessoes-legislativas* — autorizado
            // pelo módulo 'legislaturas' desde a Etapa 2B — pra "Legislaturas"
            // continuar marcado como módulo atual se alguém acessar aquela
            // rota diretamente, mesmo sem item de menu próprio pra ela.
            ['modulo' => 'legislaturas', 'rota' => 'admin.legislaturas.index', 'label' => 'Legislaturas', 'icone' => 'fa-landmark', 'ativoQuando' => ['admin.legislaturas*', 'admin.sessoes-legislativas*']],
            ['modulo' => 'comissoes', 'rota' => 'admin.comissoes.index', 'label' => 'Comissões', 'icone' => 'fa-people-group', 'ativoQuando' => ['admin.comissoes.*']],
            ['modulo' => 'configuracoes', 'rota' => 'admin.perfis-regimentais.index', 'label' => 'Perfis Regimentais', 'icone' => 'fa-sitemap', 'ativoQuando' => ['admin.perfis-regimentais.*']],
            // Autorização é o módulo 'configuracoes' (decisão da Etapa 2B,
            // não alterada aqui) — a posição visual dentro de "Estrutura
            // Legislativa" é só desta etapa.
            ['modulo' => 'configuracoes', 'rota' => 'admin.regras-deliberacao.index', 'label' => 'Regras de Deliberação', 'icone' => 'fa-gavel', 'ativoQuando' => ['admin.regras-deliberacao.*']],
        ]],

        ['tipo' => 'link', 'modulo' => 'relatorios', 'rota' => 'admin.relatorios.index', 'label' => 'Relatórios', 'icone' => 'fa-chart-line', 'ativoQuando' => ['admin.relatorios*']],

        ['tipo' => 'grupo', 'grupo' => 'Administração', 'icone' => 'fa-gear', 'alinhar' => 'direita', 'itens' => [
            ['modulo' => 'usuarios', 'rota' => 'admin.usuarios.index', 'label' => 'Usuários', 'icone' => 'fa-users', 'ativoQuando' => ['admin.usuarios.*']],
            ['modulo' => 'cadastros', 'rota' => 'admin.cadastros.index', 'label' => 'Cadastros', 'icone' => 'fa-list-check', 'ativoQuando' => ['admin.cadastros.*']],
            ['modulo' => 'configuracoes', 'rota' => 'admin.configuracoes.edit', 'label' => 'Configurações', 'icone' => 'fa-gear', 'ativoQuando' => ['admin.configuracoes*']],
        ]],
    ])
    @php
        // Filtra ITEM A ITEM por podeAcessarModulo() (nunca o grupo inteiro
        // de uma vez — ver item 7 da Etapa 2C) e remove grupos que ficaram
        // sem nenhum item visível. $menuVisivel é a única fonte usada tanto
        // pelo bloco desktop quanto pelo off-canvas mobile logo abaixo.
        $usuarioLogado = auth()->user();
        $podeVerModulo = fn (?string $modulo) => is_null($modulo) || $usuarioLogado->podeAcessarModulo($modulo);

        $menuVisivel = collect($menu)
            ->map(function (array $entrada) use ($podeVerModulo) {
                if ($entrada['tipo'] === 'link') {
                    return $podeVerModulo($entrada['modulo']) ? $entrada : null;
                }

                $itensVisiveis = array_values(array_filter(
                    $entrada['itens'],
                    fn (array $item) => $podeVerModulo($item['modulo'])
                ));

                return $itensVisiveis ? [...$entrada, 'itens' => $itensVisiveis] : null;
            })
            ->filter()
            ->values()
            ->all();

        // Nome do grupo que contém a rota atual (ou null) — usado pra
        // destacar o botão do grupo como "módulo atual" e pra já abrir o
        // acordeão certo no mobile quando o menu é aberto.
        $grupoComRotaAtual = collect($menuVisivel)->first(
            fn (array $entrada) => $entrada['tipo'] === 'grupo'
                && collect($entrada['itens'])->contains(fn (array $item) => request()->routeIs(...$item['ativoQuando']))
        );
        $grupoAtivoAtual = $grupoComRotaAtual['grupo'] ?? null;
    @endphp
    <style>
        :root {
            --cor-primaria: {{ $config->cor_primaria }};
            --cor-secundaria: {{ $config->cor_secundaria ?? $config->cor_primaria }};
            --gray-50: #f3f6fb; --gray-100: #e9eef6; --gray-200: #d9dee7;
            --gray-500: #5b6472; --gray-700: #2e3643; --gray-900: #121827;
            --shadow-sm: 0 2px 8px rgba(18,24,39,.08);
            --shadow-md: 0 12px 22px rgba(18,24,39,.10);
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
            background:
                radial-gradient(820px 420px at -10% -10%, #e2e8ff 0 60%, transparent 61%),
                radial-gradient(960px 480px at 110% 0%, #ffd6dd 0 55%, transparent 56%),
                linear-gradient(180deg,#edf2f7 0%, #e7ecf4 100%);
            min-height: 100vh;
            color: var(--gray-900);
        }

        /* ===== Header ===== */
        .header {
            background: rgba(255,255,255,.92);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--gray-200);
            box-shadow: var(--shadow-sm);
            position: sticky; top: 0; z-index: 30;
        }
        .header-content {
            max-width: 1200px; margin: 0 auto; padding: 12px 20px;
            display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
        }
        .brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.3rem; }
        .brand img { height: 40px; }
        .brand .brand-text { white-space: nowrap; }
        .brand .brand-text .accent { color: var(--cor-primaria); }
        .nav-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center; }

        /* ===== Botões ===== */
        .btn {
            --btn-bg: #fff; --btn-fg: var(--gray-900); --btn-bd: var(--gray-200);
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--btn-bg); color: var(--btn-fg);
            border: 2px solid var(--btn-bd); border-radius: 12px;
            padding: 10px 16px; font-weight: 700; font-size: .92rem;
            cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
            transition: transform .15s ease, box-shadow .15s ease;
        }
        .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
        .btn.small { padding: 6px 12px; font-size: .82rem; border-radius: 9px; }
        .btn.primary { --btn-bg: var(--cor-primaria); --btn-fg: #fff; --btn-bd: var(--cor-primaria); }
        .btn.outline { --btn-bg: #fff; --btn-fg: var(--cor-primaria); --btn-bd: var(--cor-primaria); }
        .btn.danger { --btn-bg: #ef4444; --btn-fg: #fff; --btn-bd: #ef4444; }
        .btn.success { --btn-bg: #16a34a; --btn-fg: #fff; --btn-bd: #16a34a; }
        .btn.warning { --btn-bg: #f59e0b; --btn-fg: #fff; --btn-bd: #f59e0b; }
        .btn.round { border-radius: 999px; }
        .btn.icon-only { padding: 10px; }
        .btn.logout { --btn-bg: #fff; --btn-fg: #ef4444; --btn-bd: #ef4444; }
        /* "Módulo/item atual" (ETAPA 2C) — mesmo preenchimento de cor
           primária já usado pra estado ativo em outros lugares do LegGov
           (ex. .pg-num.active, .badge), aplicado aos botões/links do menu. */
        .btn.round.ativo { --btn-bg: var(--cor-primaria); --btn-fg: #fff; --btn-bd: var(--cor-primaria); }

        .main { max-width: 1200px; margin: 24px auto; padding: 0 20px; }

        /* ===== Cards ===== */
        .card {
            background: #fff; border: 1px solid var(--gray-200); border-radius: 18px;
            padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
        }

        /* ===== KPI cards ===== */
        .grid-resumo {
            display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
            gap: 16px; margin-bottom: 20px;
        }
        .kpi {
            border-radius: 18px; padding: 20px; position: relative; overflow: hidden;
            box-shadow: var(--shadow-sm); color: #0f172a;
        }
        .kpi .icon { position: absolute; right: 18px; top: 16px; font-size: 1.6rem; opacity: .3; }
        .kpi h4 { margin: 0 0 6px; font-size: .92rem; font-weight: 800; }
        .kpi .big { font-size: 2.1rem; font-weight: 900; }
        .kpi .sub { font-size: .82rem; opacity: .75; margin-top: 2px; }
        .kpi.total { background: linear-gradient(135deg,#c9d9ff 0%,#9ec0ff 100%); }
        .kpi.prep  { background: linear-gradient(135deg,#d8ceff 0%,#bdb8ff 100%); }
        .kpi.ativa { background: linear-gradient(135deg,#b3f0ce 0%,#7ee6a7 100%); }
        .kpi.enc   { background: linear-gradient(135deg,#ffc8cf 0%,#f8a4b0 100%); }

        /* ===== Filtros ===== */
        .filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        .filters input, .filters select {
            border: 2px solid var(--gray-200); border-radius: 12px; padding: 10px 14px;
            font-size: .95rem; min-width: 220px; background: #fff;
        }
        .filters input:focus, .filters select:focus { outline: none; border-color: var(--cor-primaria); }

        /* ===== Tabela ===== */
        table { width: 100%; border-collapse: collapse; }
        th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--gray-200); }
        th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); font-weight: 800; }
        tbody tr:hover { background: #f8fafc; }
        .actions-row { display: flex; gap: 6px; flex-wrap: wrap; }

        label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: 4px; }
        input, select, textarea {
            width: 100%; padding: 9px 12px; border: 2px solid var(--gray-200); border-radius: 10px;
            font-size: 1rem; margin-bottom: 12px;
        }
        input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-primaria); }

        .alert { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; }
        .alert.sucesso { background: #dcfce7; color: #166534; }
        .alert.erro { background: #fee2e2; color: #991b1b; }

        .badge {
            display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px;
            border-radius: 999px; font-weight: 800; font-size: .76rem; border: 1px solid transparent;
        }
        .badge.ativa      { background: #dcfce7; color: #166534; border-color: #86efac; }
        .badge.encerrada  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
        .badge.preparacao { background: #e0e7ff; color: #3730a3; border-color: #a5b4fc; }

        @keyframes central-sessao-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

        /* ===== Dropdown de grupo do menu (desktop) — ETAPA 2C =====
           Um padrão único (x-data="{ grupoAberto: null }" no wrapper
           .nav-actions), repetido via @@foreach — nunca JS reescrito por
           grupo. @click.outside + @keydown.escape fecham; clicar em outro
           grupo troca sozinho (grupoAberto só guarda 1 valor por vez). */
        .nav-dropdown { position: relative; }
        .nav-dropdown-seta { font-size: .62rem; margin-left: 2px; opacity: .6; transition: transform .15s ease; }
        .nav-dropdown-seta-aberta { transform: rotate(180deg); }
        .nav-dropdown-painel {
            position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
            background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
            box-shadow: var(--shadow-md); padding: 8px; min-width: 230px;
            display: flex; flex-direction: column; gap: 2px;
        }
        /* Grupos próximos da borda direita (ex. Administração, colado no
           Sair) abrem pra esquerda em vez de transbordar a tela — heurística
           estática por grupo (ver 'alinhar' => 'direita' no array $menu),
           não é reposicionamento dinâmico por viewport. */
        .nav-dropdown-painel-direita { left: auto; right: 0; }
        .nav-dropdown-item {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
            color: var(--gray-900); text-decoration: none; font-weight: 700; font-size: .88rem;
            white-space: nowrap;
        }
        .nav-dropdown-item i:first-child { width: 18px; text-align: center; flex-shrink: 0; }
        .nav-dropdown-item:hover { background: var(--gray-50); }
        .nav-dropdown-item.ativo { background: var(--cor-primaria); color: #fff; }
        .nav-dropdown-aovivo { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #dc2626; font-size: .68rem; font-weight: 800; white-space: nowrap; }
        .nav-dropdown-item.ativo .nav-dropdown-aovivo { color: #fecaca; }
        .nav-dropdown-aovivo-ponto { width: 7px; height: 7px; border-radius: 50%; background: #dc2626; display: inline-block; animation: central-sessao-pulso 1.4s infinite; }

        /* ===== Menu mobile (hambúrguer / off-canvas) =====
           Reaproveita o breakpoint de 820px que já existia neste arquivo
           (era usado só pra empilhar os botões, o que deixava o cabeçalho
           enorme no celular — ver Central da Sessão). Abaixo dele,
           .nav-actions inteiro some e dá lugar ao botão ☰; o desktop
           (acima de 820px) continua idêntico a antes, .admin-menu-toggle
           nem aparece. */
        .admin-menu-toggle {
            display: none; background: var(--cor-primaria); color: #fff; border: none;
            border-radius: 10px; width: 42px; height: 42px; font-size: 1.15rem;
            cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0;
        }
        [x-cloak] { display: none !important; }
        .admin-offcanvas-overlay {
            position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 90;
        }
        .admin-offcanvas {
            position: fixed; top: 0; left: 0; height: 100vh; width: 84vw; max-width: 320px;
            background: #fff; z-index: 91; display: flex; flex-direction: column;
            box-shadow: 8px 0 30px rgba(0,0,0,.25);
        }
        .admin-offcanvas-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 18px; border-bottom: 1px solid var(--gray-200);
            font-weight: 900; font-size: 1.05rem; flex-shrink: 0;
        }
        .admin-offcanvas-close {
            background: none; border: none; font-size: 1.5rem; color: var(--gray-500);
            cursor: pointer; padding: 2px 8px; line-height: 1;
        }
        .admin-offcanvas-body { flex: 1; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
        .admin-offcanvas-link {
            display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px;
            color: var(--gray-900); text-decoration: none; font-weight: 700; font-size: .95rem;
            border: none; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
        }
        .admin-offcanvas-link:hover { background: var(--gray-50); }
        .admin-offcanvas-link.active { background: var(--cor-primaria); color: #fff; }
        .admin-offcanvas-link i { width: 20px; text-align: center; flex-shrink: 0; }
        .admin-offcanvas-aovivo { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #dc2626; font-size: .68rem; font-weight: 800; white-space: nowrap; }
        .admin-offcanvas-link.active .admin-offcanvas-aovivo { color: #fecaca; }
        .admin-offcanvas-sair { color: #ef4444; border-top: 1px solid var(--gray-200); margin-top: 6px; padding-top: 15px; }

        /* ===== Acordeão de grupo do menu (mobile) — ETAPA 2C =====
           Mesma ideia do dropdown desktop: 1 padrão, repetido via @@foreach,
           estado (grupoMobileAberto) isolado dentro de .admin-offcanvas-body. */
        .admin-offcanvas-grupo-btn {
            display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 10px;
            color: var(--gray-900); font-weight: 700; font-size: .95rem;
            border: none; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
        }
        .admin-offcanvas-grupo-btn:hover { background: var(--gray-50); }
        .admin-offcanvas-grupo-btn.active { background: var(--gray-50); color: var(--cor-primaria); }
        .admin-offcanvas-grupo-btn i:first-child { width: 20px; text-align: center; flex-shrink: 0; }
        .admin-offcanvas-grupo-seta { margin-left: auto; font-size: .72rem; opacity: .6; transition: transform .15s ease; }
        .admin-offcanvas-grupo-seta-aberta { transform: rotate(180deg); }
        .admin-offcanvas-grupo-itens { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; margin: 2px 0 4px; }
        .admin-offcanvas-sublink { font-size: .9rem; padding: 11px 14px; }

        body.admin-menu-open { overflow: hidden; }

        @media (max-width: 820px) {
            .header-content { flex-wrap: nowrap; }
            .brand { flex: 1; min-width: 0; }
            .brand .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .nav-actions { display: none; }
            .admin-menu-toggle { display: inline-flex; }
        }

        /* ===== Paginação (ver resources/views/vendor/pagination/admin.blade.php) =====
           Substitui a view padrão do Laravel (pagination::tailwind, com SVGs
           que dependem de classes Tailwind inexistentes aqui e apareciam
           gigantes). CSS centralizado aqui — a view de paginação em si não
           tem nenhum <style> próprio, pra não duplicar regra por página. */
        .pg-wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
        .pg-info { color: var(--gray-500); font-size: .85rem; font-weight: 600; }
        .pg-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
        .pg-btn, .pg-num {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 34px; height: 34px; padding: 0 12px; border-radius: 9px;
            border: 2px solid var(--gray-200); background: #fff; color: var(--gray-900);
            font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer;
            transition: background .15s ease, border-color .15s ease;
        }
        .pg-num { min-width: 34px; padding: 0; }
        .pg-btn:hover, .pg-num:hover { background: var(--gray-50); border-color: var(--cor-primaria); }
        .pg-btn.disabled { opacity: .45; cursor: not-allowed; }
        .pg-btn.disabled:hover { background: #fff; border-color: var(--gray-200); }
        .pg-num.active { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; cursor: default; }
        .pg-dots { color: var(--gray-500); padding: 0 4px; font-size: .85rem; user-select: none; }
        @media (max-width: 560px) {
            .pg-wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
            .pg-btn, .pg-num { min-width: 30px; height: 30px; font-size: .8rem; padding: 0 9px; }
        }
    </style>
</head>
<body x-data="{ mobileMenuOpen: false }" :class="{ 'admin-menu-open': mobileMenuOpen }" @keydown.escape.window="mobileMenuOpen = false; $refs.adminMenuOpenBtn && $refs.adminMenuOpenBtn.focus()">
    <div class="header">
        <div class="header-content">
            <div class="brand">
                @if($logoTopo)
                    <img src="{{ Storage::url($logoTopo) }}" alt="Logo">
                @endif
                <span class="brand-text">{{ $config->nome_camara }}</span>
            </div>

            {{-- ===== Menu desktop (dropdown por grupo) — ETAPA 2C =====
                 grupoAberto guarda o NOME do grupo aberto (ou null) —
                 compartilhado por todos os dropdowns deste .nav-actions, por
                 isso abrir um fecha o outro automaticamente. --}}
            <div class="nav-actions" x-data="{ grupoAberto: null }" @keydown.escape.window="grupoAberto = null">
                @foreach($menuVisivel as $entrada)
                    @if($entrada['tipo'] === 'link')
                        <a href="{{ route($entrada['rota']) }}" class="btn round {{ request()->routeIs(...$entrada['ativoQuando']) ? 'ativo' : '' }}">
                            <i class="fa {{ $entrada['icone'] }}"></i> {{ $entrada['label'] }}
                        </a>
                    @else
                        <div class="nav-dropdown" @click.outside="grupoAberto = null">
                            <button type="button"
                                class="btn round {{ $entrada['grupo'] === $grupoAtivoAtual ? 'ativo' : '' }}"
                                @click="grupoAberto = (grupoAberto === @js($entrada['grupo']) ? null : @js($entrada['grupo']))"
                                :aria-expanded="grupoAberto === @js($entrada['grupo'])"
                                aria-haspopup="true">
                                <i class="fa {{ $entrada['icone'] }}"></i> {{ $entrada['grupo'] }}
                                <i class="fa fa-chevron-down nav-dropdown-seta" :class="{ 'nav-dropdown-seta-aberta': grupoAberto === @js($entrada['grupo']) }"></i>
                            </button>
                            <div class="nav-dropdown-painel {{ ($entrada['alinhar'] ?? null) === 'direita' ? 'nav-dropdown-painel-direita' : '' }}"
                                 x-show="grupoAberto === @js($entrada['grupo'])"
                                 x-cloak
                                 x-transition
                                 role="menu"
                                 :aria-label="@js($entrada['grupo'])">
                                @foreach($entrada['itens'] as $item)
                                    <a href="{{ route($item['rota']) }}"
                                       class="nav-dropdown-item {{ request()->routeIs(...$item['ativoQuando']) ? 'ativo' : '' }}"
                                       role="menuitem"
                                       @click="grupoAberto = null">
                                        <i class="fa {{ $item['icone'] }}"></i> {{ $item['label'] }}
                                        @if(($item['aoVivo'] ?? false) && $haSessaoAtivaAgora)
                                            <span class="nav-dropdown-aovivo">
                                                <span class="nav-dropdown-aovivo-ponto"></span> AO VIVO
                                            </span>
                                        @endif
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endforeach

                <form method="POST" action="{{ route('logout') }}" style="display:inline">
                    @csrf
                    <button type="submit" class="btn logout round"><i class="fa fa-right-from-bracket"></i> Sair</button>
                </form>
            </div>

            {{-- Só aparece abaixo do breakpoint mobile (ver CSS .admin-menu-toggle) —
                 nunca simultaneamente com .nav-actions. Estado (mobileMenuOpen)
                 vem do x-data no <body>, compartilhado com o overlay/painel
                 abaixo — por isso este botão não declara x-data próprio. --}}
            <button type="button" class="admin-menu-toggle" x-ref="adminMenuOpenBtn"
                @click="mobileMenuOpen = true; $nextTick(() => $refs.adminMenuClose && $refs.adminMenuClose.focus())"
                :aria-expanded="mobileMenuOpen ? 'true' : 'false'"
                aria-controls="adminOffcanvasMenu" aria-label="Abrir menu">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </div>

    {{-- ===== Menu mobile (hambúrguer / off-canvas com acordeão) — ETAPA 2C =====
         Estado do off-canvas (mobileMenuOpen) mora no <body> (ver acima),
         compartilhado entre o botão ☰, o overlay e o painel. Dentro dele,
         grupoMobileAberto é local a .admin-offcanvas-body e já nasce
         apontando pro grupo da rota atual (mesma variável $grupoAtivoAtual
         do desktop), pra abrir direto no lugar certo. MESMA $menuVisivel
         do desktop — nunca uma segunda lista. --}}
    <div class="admin-offcanvas-overlay" x-show="mobileMenuOpen" x-cloak
         @click="mobileMenuOpen = false; $nextTick(() => $refs.adminMenuOpenBtn && $refs.adminMenuOpenBtn.focus())"></div>

    <nav id="adminOffcanvasMenu" class="admin-offcanvas" x-show="mobileMenuOpen" x-cloak
         role="dialog" aria-modal="true" aria-label="Menu administrativo">
        <div class="admin-offcanvas-head">
            <span>Menu</span>
            <button type="button" class="admin-offcanvas-close" x-ref="adminMenuClose"
                @click="mobileMenuOpen = false; $nextTick(() => $refs.adminMenuOpenBtn && $refs.adminMenuOpenBtn.focus())"
                aria-label="Fechar menu">&times;</button>
        </div>
        <div class="admin-offcanvas-body" x-data="{ grupoMobileAberto: @js($grupoAtivoAtual) }">
            @foreach($menuVisivel as $entrada)
                @if($entrada['tipo'] === 'link')
                    <a href="{{ route($entrada['rota']) }}"
                        class="admin-offcanvas-link {{ request()->routeIs(...$entrada['ativoQuando']) ? 'active' : '' }}"
                        @click="mobileMenuOpen = false">
                        <i class="fa {{ $entrada['icone'] }}"></i> {{ $entrada['label'] }}
                    </a>
                @else
                    <div>
                        <button type="button"
                            class="admin-offcanvas-grupo-btn {{ $entrada['grupo'] === $grupoAtivoAtual ? 'active' : '' }}"
                            @click="grupoMobileAberto = (grupoMobileAberto === @js($entrada['grupo']) ? null : @js($entrada['grupo']))"
                            :aria-expanded="grupoMobileAberto === @js($entrada['grupo'])">
                            <i class="fa {{ $entrada['icone'] }}"></i>
                            <span>{{ $entrada['grupo'] }}</span>
                            <i class="fa fa-chevron-down admin-offcanvas-grupo-seta" :class="{ 'admin-offcanvas-grupo-seta-aberta': grupoMobileAberto === @js($entrada['grupo']) }"></i>
                        </button>
                        <div class="admin-offcanvas-grupo-itens" x-show="grupoMobileAberto === @js($entrada['grupo'])" x-cloak x-transition>
                            @foreach($entrada['itens'] as $item)
                                <a href="{{ route($item['rota']) }}"
                                    class="admin-offcanvas-link admin-offcanvas-sublink {{ request()->routeIs(...$item['ativoQuando']) ? 'active' : '' }}"
                                    @click="mobileMenuOpen = false">
                                    <i class="fa {{ $item['icone'] }}"></i> {{ $item['label'] }}
                                    @if(($item['aoVivo'] ?? false) && $haSessaoAtivaAgora)
                                        <span class="admin-offcanvas-aovivo">● AO VIVO</span>
                                    @endif
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            @endforeach
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="admin-offcanvas-link admin-offcanvas-sair">
                    <i class="fa fa-right-from-bracket"></i> Sair
                </button>
            </form>
        </div>
    </nav>

    <div class="main">
        @if($errors->any())
            <div class="alert erro">
                <ul style="margin:0; padding-left:18px">
                    @foreach($errors->all() as $erro)
                        <li>{{ $erro }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{ $slot }}
    </div>

    {{-- Toast global (Etapa 2A) — único listener de `notificar` para toda
         a área admin; substitui o antigo bloco `alert sucesso` acima (que
         só cobria controllers tradicionais) e os widgets locais que
         existiam em algumas telas Livewire (ver toast-global.blade.php). --}}
    <x-toast-global />

    @livewireScripts
</body>
</html>
