/* ===== Área do Cliente - UNIXBSD ===== */
:root {
    --primary-green: #00ff66;
    --btn-green: #00b34d;
    --card-bg: rgba(16, 24, 39, 0.75);
    --text-light: #e2e8f0;
    --text-muted: #94a3b8;
    --accent-border: rgba(0, 255, 102, 0.25);
    --terminal-red: #ff4d4d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #050811;
    background-image: radial-gradient(circle at 20% 20%, rgba(0, 255, 102, 0.16), transparent 40%),
                       radial-gradient(circle at 80% 80%, rgba(0, 255, 102, 0.13), transparent 45%);
    color: var(--text-light);
    min-height: 100vh;
}

a { color: inherit; }

/* ---------- LOGIN ---------- */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background-color: rgba(16, 24, 39, 0.85);
    background-image: radial-gradient(circle at 25% 15%, rgba(0, 255, 102, 0.12), transparent 45%),
                       radial-gradient(circle at 85% 90%, rgba(0, 255, 102, 0.08), transparent 50%);
    border: 1px solid rgba(0, 255, 102, 0.2);
    border-radius: 16px;
    padding: 2.5rem 2.2rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 255, 102, 0.05);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.8rem;
    text-decoration: none;
    text-align: center;
}

.login-brand img {
    height: 44px;
}

.login-brand span {
    color: #00AA00;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.login-card h1 {
    font-size: 1.5rem;
    color: var(--primary-green);
    margin-bottom: 0.4rem;
}

.login-card .subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
}

.form-group {
    margin-bottom: 1.3rem;
}

.form-group label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(0, 255, 102, 0.12);
}

.form-group small.hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.form-group small.error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--terminal-red);
}

.form-error-box {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.35);
    color: #ff8080;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 1.3rem;
}

.form-info-box {
    background: rgba(0, 255, 102, 0.08);
    border: 1px solid rgba(0, 255, 102, 0.3);
    color: var(--primary-green);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 1.3rem;
}

/* ---------- DASHBOARD ---------- */
.dash-layout {
    display: flex;
    min-height: 100vh;
}

/* QE 121.6 — o travamento do viewport só vale no dashboard (html/body
   .dash-escroll). A página de documentação também usa .dash-layout e mantém
   a rolagem natural da janela. Sem media — igual Central/CRM. */
.dash-escroll .dash-layout {
    height: 100vh;
    overflow: hidden;
}

.dash-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: rgba(10, 14, 23, 0.92);
    background-image: radial-gradient(circle at 30% 15%, rgba(0, 255, 102, 0.16), transparent 45%),
                       radial-gradient(circle at 20% 90%, rgba(0, 255, 102, 0.1), transparent 50%);
    border-right: 1px solid var(--accent-border);
    padding: 1.6rem 1.2rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--accent-border);
}

.dash-brand img { height: 28px; }

.dash-brand span {
    color: #00AA00;
    font-weight: 700;
    font-size: 0.92rem;
}

.dash-client {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.dash-client strong {
    display: block;
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.dash-nav {
    list-style: none;
    flex-grow: 1;
}

.dash-nav li { margin-bottom: 0.4rem; }

.dash-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.65rem 0.8rem;
    border-radius: 6px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.dash-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }

/* ═══ RETRAÇÃO DO MENU LATERAL (estilo OPNsense) ═══ */
.dash-sidebar-toggle {
    position: absolute;
    top: 1.2rem;
    right: 0.9rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 102, 0.06);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.dash-sidebar-toggle:hover {
    background: rgba(0, 255, 102, 0.16);
    color: var(--primary-green);
}
.dash-sidebar-toggle svg { width: 15px; height: 15px; }

.dash-sidebar.dash-sidebar-retraido {
    width: 68px;
    padding: 1.6rem 0.7rem;
}
.dash-sidebar.dash-sidebar-retraido .dash-sidebar-toggle {
    right: 21px;
    transform: rotate(180deg);
}
.dash-sidebar.dash-sidebar-retraido .dash-brand {
    justify-content: center;
    padding: 0.4rem 0 0.8rem;
    margin-bottom: 0.8rem;
    gap: 0;
}
.dash-sidebar.dash-sidebar-retraido .dash-brand span { display: none; }
.dash-sidebar.dash-sidebar-retraido .dash-brand img { height: 26px; }
.dash-sidebar.dash-sidebar-retraido .dash-client {
    justify-content: center;
    padding: 0.2rem 0 0.6rem;
}
.dash-sidebar.dash-sidebar-retraido .dash-client strong,
.dash-sidebar.dash-sidebar-retraido .dash-client span.nivel-tag { display: none; }
.dash-sidebar.dash-sidebar-retraido .dash-abrir-chamado,
.dash-sidebar.dash-sidebar-retraido .dash-abrir-chamado::after {
    font-size: 0;
    overflow: hidden;
}
.dash-sidebar.dash-sidebar-retraido .dash-abrir-chamado {
    justify-content: center;
    gap: 0;
    padding: 0.55rem 0;
    margin: 0 auto 0.9rem;
    width: 44px;
}
.dash-sidebar.dash-sidebar-retraido .dash-abrir-chamado svg { margin: 0; }
.dash-sidebar.dash-sidebar-retraido .dash-nav-divider {
    text-align: center;
    padding: 0;
    font-size: 0.6rem;
    overflow: hidden;
    white-space: nowrap;
    max-width: 44px;
    margin-left: auto;
    margin-right: auto;
}
.dash-sidebar.dash-sidebar-retraido .dash-nav a {
    justify-content: center;
    gap: 0;
    padding: 0.6rem 0;
    font-size: 0;
}
.dash-sidebar.dash-sidebar-retraido .dash-nav a .ext-icon {
    display: none;
}
.dash-sidebar.dash-sidebar-retraido .dash-nav a svg {
    width: 20px;
    height: 20px;
    margin-inline: auto;
    filter: drop-shadow(0 0 4px rgba(0, 255, 102, 0.18));
}
.dash-sidebar.dash-sidebar-retraido .dash-nav-dropdown > a::after {
    display: none;
}
.dash-sidebar.dash-sidebar-retraido .dash-nav a:hover svg {
    filter: drop-shadow(0 0 8px rgba(0, 255, 102, 0.45));
}
.dash-sidebar.dash-sidebar-retraido .dash-update-info {
    display: none;
}

/* Balão (tooltip) dos itens retraídos — informa o recurso ao pairar sobre o ícone */
.dash-nav-tooltip {
    position: fixed;
    z-index: 500;
    background: rgba(10, 14, 23, 0.97);
    border: 1px solid var(--accent-border);
    color: #e6edf3;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease;
}
.dash-nav-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--accent-border);
}

.dash-nav a:hover {
    background: rgba(0, 255, 102, 0.08);
    color: var(--primary-green);
}

.dash-nav a.active {
    background: rgba(0, 255, 102, 0.12);
    color: var(--primary-green);
    border: 1px solid var(--accent-border);
}

/* Evidência da seção (página atual) suprimida quando outro menu está
   travado por clique e este dropdown fica FORA da cadeia do travado. */
.dash-nav a.active.menu-realce-fora {
    background: transparent;
    color: var(--text-light);
    border-color: transparent;
}

.dash-nav-divider {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0 0.8rem;
    margin: 1.1rem 0 0.5rem;
    border-top: 1px solid var(--accent-border);
    padding-top: 1rem;
}

.dash-update-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 0.8rem;
    margin: 0.15rem 0.2rem 0.5rem;
    border-top: 1px solid var(--accent-border);
    border-bottom: 1px solid var(--accent-border);
}

.dash-update-info-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.dash-update-info-valor {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.dash-update-info-valor strong {
    color: var(--primary-green);
    font-size: 0.85rem;
}

.dash-update-info-valor span {
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.dash-nav-external {
    flex-grow: 0;
}

.dash-nav-external a {
    position: relative;
}

.dash-nav-external .ext-icon {
    width: 13px;
    height: 13px;
    margin-left: auto;
    opacity: 0.55;
    flex-shrink: 0;
}

/* Dropdown do menu lateral (ex.: Ferramentas) — flyout à direita,
   mesma lógica dos menus Relatórios/Firewall da Área do Cliente. */
.dash-nav-dropdown {
    position: relative;
}

/* Menu TRAVADO por clique (menu-pinned): o link do item fica com a mesma
   "evidência" de um item ativo (faixa/fundo) para indicar que o menu e seus
   submenus aninhados permanecem abertos, em qualquer estado da sidebar. */
.dash-nav-dropdown.menu-pinned > a {
    background: rgba(0, 255, 102, 0.12);
    color: var(--primary-green);
    box-shadow: inset 3px 0 0 var(--btn-green);
}
.dash-nav-dropdown.menu-pinned > a::after {
    color: var(--primary-green);
    opacity: 1;
}

.dash-nav-dropdown > a::after {
    content: '▸';
    margin-left: auto;
    font-size: 0.65em;
    opacity: 0.7;
    transform: translateY(-1px);
    pointer-events: none;
}

.dash-nav-flyout {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
    background: rgba(10, 14, 23, 0.97);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
    z-index: 400;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.dash-nav-flyout.menu-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dash-nav-flyout .dash-nav-flyout-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 4px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-nav-flyout a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 20px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(0, 255, 102, 0.4);
    border-radius: 30px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.dash-nav-flyout a:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

.dash-nav-flyout a.active {
    background: rgba(0, 255, 102, 0.12);
    border-color: var(--btn-green);
}

/* Submenu aninhado dentro do flyout (ex.: Cadastro, Configuração, Ferramentas).
   Visual de pill com seta ▸ à direita. */
.dash-nav-flyout .dash-nav-dropdown {
    position: relative;
}

.dash-nav-flyout .dash-nav-dropdown > a {
    display: flex;
    justify-content: flex-start;
    padding: 12px 20px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(0, 255, 102, 0.4);
    border-radius: 30px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
}

.dash-nav-flyout .dash-nav-dropdown > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

/* Subflyout aberto a partir de outro flyout fica acima */
.dash-nav-flyout .dash-nav-dropdown + .dash-nav-flyout,
#config-submenu-flyout,
#blog-submenu-flyout,
#docs-submenu-flyout,
#cadastro-submenu-flyout,
#ferramentas-submenu-flyout {
    z-index: 500;
}

/* Removido: regras específicas para #financeiro-flyout — agora usam estilo genérico */

.dash-main {
    flex-grow: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 1.4rem;
    position: relative;
    min-width: 0;
}

/* Painel de dados ("dashboard de edição") — ÚNICA região que rola.
   Barra de rolagem fica DENTRO do painel, delimitada pela borda,
   longe das bordas da janela. Sidebar e cabeçalho ficam fixos.
   O cabeçalho sticky (filho) usa margin negativa p/ vazar o padding
   lateral e continuar cobrindo o topo do painel de borda a borda. */
.dash-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--accent-border);
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(0, 255, 102, 0.07);
    background: rgba(8, 12, 22, 0.6);
    padding: 0 1rem 1.2rem;
}

/* ===== Seções em modo "preencher": MODELO DE ROLAGEM QE → qc → cqe (115.30) =====
   Ativado via admin.js quando o .dash-body tem filho direto [data-fill-scroll]
   (injetam --quadro-h = altura visível do quadro e --sec-header-h = cabeçalho).
   Terminologia (definida pelo NoRm4nD em 15/09/2026 — ver AGENTS.md):
     - QE  (quadro de exibição) = .dash-body/.dash-fill-quadro, a PRIMEIRA
       moldura que engloba o cabeçalho da página. ROLA QUANDO NECESSÁRIO:
       a barra fica NA BORDA EXTERNA do quadro, nunca solta no meio.
     - qc  (quadro de card) = contêineres [data-fill-scroll] intermediários sem
       classe de card (+ [data-fw-painel], [data-srv-painel]). MOLDURA INVISÍVEL:
       NÃO rola, NÃO tem barra própria (pass-through).
     - cqe (card de edição/acesso) = dash-card, painel-cartao, cartao-painel,
       artigo-visualizacao (inclusive aninhados dentro de um qc, ex.
       #fwCardEditar). CADA card rola SOZINHO quando o conteúdo transborda:
       barra NA BORDA DO CARD.
   Respiros: o último painel tem margin-bottom 1rem (nunca encosta na borda
   inferior do QE — sem linha grossa de bordas sobrepostas).
   115.32: canal dedicado da barra — no modo fill o .dash-header para de cobrir
   a faixa direita do quadro (margin-right: calc(-1rem + 4mm)), então a barra
   vertical do QE fica num canal próprio na borda externa e NUNCA invade o
   cabeçalho (barra desenhada por cima do conteúdo cortava o canto sup. dir.). */
.dash-fill-quadro {
    overflow: auto;
    padding-bottom: 0;
    scrollbar-color: rgba(0, 255, 102, 0.5) rgba(255, 255, 255, 0.07);
    /* Canal dedicado da barra SEMPRE reservado à direita (115.35): o
       cabeçalho (sticky) cobre o canal na sua área, então a barra do QE
       só fica visível APÓS o cabeçalho — nunca "sobe" até o topo. */
    scrollbar-gutter: stable;
}

/* POC 115.36 — QE EM DOIS QUADROS (firewalls editar): .quadro-cabecalho +
   .quadro-exibicao. O .dash-body vira coluna flex e NÃO rola mais; quem rola
   é o .quadro-exibicao (barra SÓ ali, abaixo do cabeçalho). :has() só ativa
   quando a seção realmente usa o modelo de dois quadros.
   MOLDURA PRÓPRIA DOS DOIS QUADROS INTERNOS (115.36): o .dash-body deixa de
   desenhar a borda (border:0) e vira só o contêiner (fundo, sombra, raio);
   quem desenha a moldura são o .quadro-cabecalho (topo + laterais) e o
   .quadro-exibicao (base + laterais), ambas full-width — a borda do quadro
   de card agora é DELE, alinhada com a do cabeçalho, sem linha derivada. */
.dash-fill-quadro:has(> .quadro-cabecalho) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    scrollbar-color: rgba(0, 255, 102, 0.5) rgba(255, 255, 255, 0.07);
}

/* Quadro do Cabeçalho (POC 115.36): quadro interno SUPERIOR, fora da rolagem.
   MOLDURA PRÓPRIA: topo + laterais (border-bottom 0 para encostar no quadro
   de exibição sem linha dupla). Borda inferior dos cards INVISÍVEL (115.36):
   fronteira limpa com os cards abaixo. */
.dash-fill-quadro > .quadro-cabecalho {
    flex: 0 0 auto;
    min-height: 0;
    border: 1px solid var(--accent-border);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(5, 8, 17, 0.72);
}
/* Borda inferior das ABAS do cabeçalho INVISÍVEL (115.36): a linha que a
   barra de separação desenhava era a border-bottom do .tabs, não sobra
   nenhum fio entre o quadro de cabeçalho e o quadro de exibição. */
.dash-fill-quadro > .quadro-cabecalho .section-header__tabs,
.dash-fill-quadro > .quadro-cabecalho .tabs {
    border-bottom: 0;
}
.dash-fill-quadro > .quadro-cabecalho > .section-header,
.dash-fill-quadro > .quadro-cabecalho > .dash-header:not([style*="border-bottom"]),
.dash-fill-quadro > .quadro-cabecalho > .fw-cabecalho-fixo {
    position: static;
    top: auto;
    margin-left: 0;
    margin-right: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.dash-fill-quadro > .quadro-cabecalho > .dash-header:not([style*="border-bottom"]) {
    padding: 0.9rem 1.2rem 0.6rem;
}

/* Quadro de Exibição (POC 115.36): quadro interno INFERIOR, começa EXATAMENTE
   abaixo do cabeçalho, é quem rola. MOLDURA PRÓPRIA: laterais + base (border-top
   0 para encostar no cabeçalho sem linha dupla). O padding lateral de 1rem que
   saiu do .dash-body mora aqui (respiro dos cards); barra apenas aqui. */
.dash-fill-quadro > .quadro-exibicao {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    border: 1px solid var(--accent-border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    padding: 0 1rem 1.2rem;
    scrollbar-color: rgba(0, 255, 102, 0.5) rgba(255, 255, 255, 0.07);
}

/* qc — contêiner intermediário (o qc NÃO é card): pass-through, sem scroll.
   Funciona nos dois modelos: filho direto do QE (uma caixa) ou filho do
   .quadro-exibicao (dois quadros). */
.dash-fill-quadro > [data-fill-scroll]:not(.dash-card):not(.cartao-painel):not(.painel-cartao):not(.artigo-visualizacao),
.dash-fill-quadro > [data-fill-scroll][data-fw-painel],
.dash-fill-quadro > [data-fill-scroll][data-srv-painel],
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]:not(.dash-card):not(.cartao-painel):not(.painel-cartao):not(.artigo-visualizacao),
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-fw-painel],
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-srv-painel] {
    overflow: visible;
    min-height: 0;
    max-height: none;
    background: transparent;
}

/* cqe — cards que rolam sozinhos, barra na própria borda.
   O [data-fill-scroll] JÁ é o card (filho direto do QE) ou o card está
   aninhado dentro de um qc. */
.dash-fill-quadro > [data-fill-scroll].dash-card,
.dash-fill-quadro > [data-fill-scroll].cartao-painel,
.dash-fill-quadro > [data-fill-scroll].painel-cartao,
.dash-fill-quadro > [data-fill-scroll].artigo-visualizacao,
.dash-fill-quadro > [data-fill-scroll] .dash-card,
.dash-fill-quadro > [data-fill-scroll] .cartao-painel,
.dash-fill-quadro > [data-fill-scroll] .painel-cartao,
.dash-fill-quadro > [data-fill-scroll] .artigo-visualizacao,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll].dash-card,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll].cartao-painel,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll].painel-cartao,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll].artigo-visualizacao,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] .dash-card,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] .cartao-painel,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] .painel-cartao,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] .artigo-visualizacao {
    overflow: auto;
    min-height: 0;
    max-height: calc(var(--quadro-h, 80vh) - var(--sec-header-h, 6.5rem) - 6mm);
    scrollbar-color: rgba(0, 255, 102, 0.5) rgba(255, 255, 255, 0.07);
}

/* Respiro terminal — nenhum painel encosta na borda inferior do quadro
   (evita a linha grossa de bordas sobrepostas). dash-card/painel-cartao
   já têm margin-bottom própria. */
.dash-fill-quadro > [data-fill-scroll][data-fw-painel],
.dash-fill-quadro > [data-fill-scroll][data-srv-painel],
.dash-fill-quadro > [data-fill-scroll]:not(.dash-card):not(.cartao-painel):not(.painel-cartao):not(.artigo-visualizacao):not([data-fw-painel]):not([data-srv-painel]),
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-fw-painel],
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-srv-painel],
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]:not(.dash-card):not(.cartao-painel):not(.painel-cartao):not(.artigo-visualizacao):not([data-fw-painel]):not([data-srv-painel]) {
    margin-bottom: 1rem;
}

/* Scrollbar 3mm nos painéis internos e no próprio quadro (borda) */
.dash-body::-webkit-scrollbar,
.dash-fill-quadro > [data-fill-scroll]::-webkit-scrollbar,
.dash-fill-quadro > [data-fill-scroll] > *::-webkit-scrollbar,
.dash-fill-quadro > .quadro-exibicao::-webkit-scrollbar,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]::-webkit-scrollbar,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] > *::-webkit-scrollbar { width: 3mm; height: 3mm; }
.dash-body::-webkit-scrollbar-track,
.dash-fill-quadro > [data-fill-scroll]::-webkit-scrollbar-track,
.dash-fill-quadro > [data-fill-scroll] > *::-webkit-scrollbar-track,
.dash-fill-quadro > .quadro-exibicao::-webkit-scrollbar-track,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]::-webkit-scrollbar-track,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] > *::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 12px 12px;
}
.dash-body::-webkit-scrollbar-thumb,
.dash-fill-quadro > [data-fill-scroll]::-webkit-scrollbar-thumb,
.dash-fill-quadro > [data-fill-scroll] > *::-webkit-scrollbar-thumb,
.dash-fill-quadro > .quadro-exibicao::-webkit-scrollbar-thumb,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]::-webkit-scrollbar-thumb,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] > *::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 102, 0.45);
    border: 3px solid #0c111d;
    border-radius: 8px;
    background-clip: padding-box;
}
.dash-body::-webkit-scrollbar-thumb:hover,
.dash-fill-quadro > [data-fill-scroll]::-webkit-scrollbar-thumb:hover,
.dash-fill-quadro > [data-fill-scroll] > *::-webkit-scrollbar-thumb:hover,
.dash-fill-quadro > .quadro-exibicao::-webkit-scrollbar-thumb:hover,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]::-webkit-scrollbar-thumb:hover,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] > *::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 102, 0.7);
    background-clip: padding-box;
}
.dash-body::-webkit-scrollbar-corner,
.dash-fill-quadro > [data-fill-scroll]::-webkit-scrollbar-corner,
.dash-fill-quadro > [data-fill-scroll] > *::-webkit-scrollbar-corner,
.dash-fill-quadro > .quadro-exibicao::-webkit-scrollbar-corner,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll]::-webkit-scrollbar-corner,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll] > *::-webkit-scrollbar-corner { background: transparent; }

/* Painéis das abas do editar de firewalls: o [data-fw-painel] é um qc
   (MOLDURA INVISÍVEL, sem borda própria) — os cards .dash-card internos
   (ex.: #fwCardEditar) são os cqe que rolam sozinhos, barra na borda de
   cada card. O QE (.dash-fill-quadro) cobre o excedente se necessário. */
.dash-fill-quadro > [data-fill-scroll][data-fw-painel] {
    border: 0;
    border-radius: 0;
    margin: 0 0 1rem;
    padding: 3mm 0;
}
/* POC 115.36 (dois quadros): sem gap no topo — card encosta na borda
   superior do quadro invisível de exibição. */
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-fw-painel] {
    padding: 0 0 3mm;
}

/* Painéis de servidores (qc): o [data-srv-painel] é MOLDURA INVISÍVEL (sem
   borda/padding/scroll próprios) — o card .painel-cartao (cqe) é quem carrega
   a borda e o scroll (barra NO CARD). QE cobre o excedente quando necessário. */
.dash-fill-quadro > [data-fill-scroll][data-srv-painel],
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-srv-painel] {
    border: 0;
    border-radius: 0;
    margin: 0 0 1rem;
    padding: 3mm 0;
    overflow: visible;
    max-height: none;
    background: transparent;
}
.dash-fill-quadro > [data-fill-scroll][data-srv-painel] > .painel-cartao:last-child,
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-srv-painel] > .painel-cartao:last-child {
    overflow: auto;
    min-height: 0;
    max-height: calc(var(--quadro-h, 80vh) - var(--sec-header-h, 6.5rem) - 6mm);
    margin-bottom: 0;
    scrollbar-color: rgba(0, 255, 102, 0.5) rgba(255, 255, 255, 0.07);
}

/* SCROLL DO BROWSER ELIMINADO — incondicional (qualquer largura).
   <html class="dash-escroll"> no dashboard.php: overflow:hidden na RAIZ
   remove fisicamente a barra de rolagem da janela (vertical e horizontal).
   O único scroll existente é o do .dash-body acima. Sem media. */
html.dash-escroll { overflow: hidden; }
body.dash-escroll { height: 100%; overflow: hidden; }

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dash-header h1 {
    font-size: 1.7rem;
    color: var(--primary-green);
    margin-bottom: 0.3rem;
}

.dash-header p {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.dash-card {
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.8rem;
    margin-bottom: 1.5rem;
}

.dash-card h3 {
    color: var(--primary-green);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}

.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
}

.info-row:last-child { border-bottom: none; }
.info-row .label { color: var(--text-muted); }
.info-row .value { color: var(--text-light); font-weight: 500; }

table.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

table.dash-table th {
    text-align: left;
    color: var(--primary-green);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--accent-border);
}

table.dash-table td {
    padding: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-light);
}

.badge {
    display: inline-block;
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.badge-ativo { background: rgba(0, 255, 102, 0.12); color: var(--primary-green); border: 1px solid rgba(0, 255, 102, 0.3); }
.permissao-item { display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:6px; border:1px solid var(--accent-border); cursor:pointer; font-size:.9rem; transition:border-color .2s; }
.permissao-item:hover { border-color: var(--primary-green); }
.badge-pendente { background: rgba(255, 189, 46, 0.12); color: #ffbd2e; border: 1px solid rgba(255, 189, 46, 0.3); }
.badge-encerrado { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); border: 1px solid rgba(148,163,184,0.3); }
.badge-em_andamento { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-escalonado { background: rgba(249, 115, 22, 0.12); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-alerta { background: rgba(249, 115, 22, 0.12); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.3); }
.badge-pago { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
.badge-parcial { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-atrasado { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-cancelado { background: rgba(148, 163, 184, 0.12); color: var(--text-muted); border: 1px solid rgba(148,163,184,0.3); }
.badge-gerado { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.badge-emitido { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }

.cell-hint {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    margin-top: 2px;
    font-family: var(--font-mono, monospace);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.estado-vazio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ---------- Ferramentas > Blog: cards de artigos ---------- */
.artigo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    margin-top: 1.2rem;
}

.artigo-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.artigo-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 255, 102, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.artigo-card-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.artigo-card-ordem {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
}

.artigo-card-titulo {
    color: var(--primary-green);
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0;
}

.artigo-card-categoria {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.artigo-card-data {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin: 0;
}

.artigo-card-acoes {
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------- Ferramentas > Blog: visualização individual (70% centralizada) ---------- */
.dash-header-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.artigo-visualizacao {
    width: 70%;
    max-width: 960px;
    margin: 0 auto;
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 2.5rem;
    line-height: 1.7;
    color: var(--text-light);
}

.artigo-visualizacao-topo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.artigo-visualizacao-ordem {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: var(--font-mono, monospace);
}

.artigo-visualizacao-titulo {
    color: var(--primary-green);
    font-size: 1.6rem;
    line-height: 1.3;
    margin: 0.9rem 0 0.4rem;
}

.artigo-visualizacao-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.artigo-visualizacao-divisor {
    border: none;
    border-top: 1px solid var(--accent-border);
    margin: 1.5rem 0;
}

.artigo-visualizacao-conteudo p {
    margin: 0 0 1rem;
}

.artigo-visualizacao-conteudo h2,
.artigo-visualizacao-conteudo h3 {
    color: var(--primary-green);
    margin: 1.4rem 0 0.6rem;
}

.artigo-visualizacao-conteudo ul,
.artigo-visualizacao-conteudo ol {
    margin: 0 0 1rem 1.4rem;
}

.artigo-visualizacao-conteudo li {
    margin-bottom: 0.4rem;
}

.artigo-visualizacao-conteudo a {
    color: var(--primary-green);
}

.artigo-visualizacao-cta {
    margin-top: 2.2rem;
    text-align: center;
}


/* Terminal (seção Terminal Sec) */
.terminal-window {
    background: rgba(5, 8, 17, 0.98);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    overflow: hidden;
}

.terminal-header {
    background: rgba(16, 24, 39, 0.95);
    padding: 10px 18px;
    display: flex;
    gap: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.terminal-body {
    padding: 1.5rem;
    font-family: 'Consolas', 'Fira Code', 'Courier New', monospace;
    color: var(--primary-green);
    min-height: 260px;
    max-height: 400px;
    overflow-y: auto;
    font-size: 0.9rem;
}

.terminal-body p { margin-bottom: 6px; line-height: 1.5; }

.terminal-input-line {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.terminal-prompt { color: #3b82f6; font-weight: bold; font-family: monospace; }

.terminal-input {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-family: monospace;
    font-size: 0.9rem;
    width: 100%;
    outline: none;
}

/* Responsivo — layout empilha, mas o browser CONTINUA travado e o scroll
   permanece no .dash-body (painel de dados). Cabeçalho continua fixo. */
@media (max-width: 900px) {
    .dash-layout { flex-direction: column; }
    .dash-escroll .dash-layout { height: 100vh; overflow: hidden; }
    .dash-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    .dash-brand { margin-bottom: 0; padding-bottom: 0; border-bottom: none; margin-right: auto; }
    .dash-client { display: none; }
    .dash-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; flex-grow: 0; width: 100%; margin-top: 1rem; }
    .dash-nav li { margin-bottom: 0; }
    .dash-main { padding: 1rem; flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; }
}

/* ===== Extensões específicas do CRM Administrativo ===== */

.admin-badge {
    display: inline-block;
    background: rgba(0, 255, 102, 0.1);
    border: 1px solid var(--accent-border);
    color: var(--primary-green);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 0.9rem;
}


/* ---------- Cards de estatística (Visão Geral) ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-card .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-light);
}

.stat-card.stat-good .stat-value { color: var(--primary-green); }
.stat-card.stat-warn .stat-value { color: #ffbd2e; }
.stat-card.stat-muted .stat-value { color: var(--text-muted); }

.stat-card .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dash-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
}

/* ---------- Filtros / busca ---------- */
.filter-bar {
    display: flex;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
}

.filter-bar input[type="text"] {
    flex: 0 0 60%;
    padding: 0.6rem 0.9rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
    outline: none;
}

.filter-bar select {
    flex: 0 0 calc(20% - 1.05rem);
    padding: 0.6rem 0.9rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
    outline: none;
}


.filter-bar input[type="text"]:focus,
.filter-bar select:focus { border-color: var(--primary-green); }

/* Filtros de período e fonte da telemetria no cabeçalho sticky. */
#srv_tel_periodo_controle select,
#srv_tel_periodo_controle input[type="date"],
#fw_tel_periodo_controle select,
#fw_tel_periodo_controle input[type="date"] {
    background-color: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    color-scheme: dark;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}

#srv_tel_periodo_controle select:focus,
#srv_tel_periodo_controle input[type="date"]:focus,
#fw_tel_periodo_controle select:focus,
#fw_tel_periodo_controle input[type="date"]:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(0, 255, 102, 0.12);
}

#srv_tel_periodo_controle select option,
#fw_tel_periodo_controle select option {
    background-color: #050811;
    color: var(--text-light);
}

.filter-count {
    text-align: right;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    margin-top: 0.4rem;
}

/* Filtro no cabeçalho da seção (canto superior direito) */
.section-header .filter-bar.filter-bar-header {
    margin-bottom: 0;
    align-items: center;
    gap: 0.6rem;
}
.section-header .filter-bar.filter-bar-header input[type="text"] {
    flex: 0 0 auto;
    width: 230px;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
}
.section-header .filter-bar.filter-bar-header .filter-count {
    margin-top: 0;
    font-size: 0.72rem;
}
@media (max-width: 900px) {
    .section-header .filter-bar.filter-bar-header {
        width: 100%;
    }
    .section-header .filter-bar.filter-bar-header input[type="text"] {
        width: 100%;
    }
}

/* ---------- Editor de permissões — módulos em dropdown ---------- */
.modulo-permissoes {
    margin-bottom: 1rem;
}

.modulo-permissoes-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: rgba(5, 8, 17, 0.6);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.modulo-permissoes-cabecalho:hover {
    background: rgba(5, 8, 17, 0.85);
    border-color: var(--primary-green);
}

.modulo-permissoes-cabecalho-aberto {
    border-color: var(--primary-green);
    background: rgba(5, 8, 17, 0.9);
}

.modulo-permissoes-titulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.modulo-permissoes-chevron {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
    flex: 0 0 auto;
    transition: transform 0.18s ease;
}

.modulo-permissoes-aberto {
    transform: rotate(90deg);
}

.modulo-permissoes-count {
    font-weight: normal;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.modulo-permissoes-acoes {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.modulo-permissoes-conteudo {
    padding: 0.75rem 0.25rem 0;
    overflow-x: auto;
}

/* ---------- Formulários de cadastro ---------- */
.form-card { max-width: 760px; }
.form-card-full { max-width: 100%; }

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.form-row .form-group { flex: 1; min-width: 220px; }

.form-card select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.95rem;
    outline: none;
}

.form-card select:focus { border-color: var(--primary-green); }

.form-card textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
}

.form-card textarea:focus { border-color: var(--primary-green); }

/* Chamados: selects/textareas/arquivos dentro de qualquer card de formulário */
.dash-card select,
.dash-card textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    resize: vertical;
}

.dash-card select:focus,
.dash-card textarea:focus { border-color: var(--primary-green); }

.dash-card input[type="file"],
.login-card input[type="file"] {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.dash-card input[type="file"]::file-selector-button,
.login-card input[type="file"]::file-selector-button {
    background: rgba(10, 14, 23, 0.92);
    color: var(--primary-green);
    border: 1px solid rgba(0, 255, 102, 0.4);
    border-radius: 30px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    margin-right: 0.8rem;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dash-card input[type="file"]::file-selector-button:hover,
.login-card input[type="file"]::file-selector-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

/* ---------- Tabela: coluna de ações ---------- */
.col-acoes { white-space: nowrap; }

/* Linhas clicáveis */
.cli-row-clickable { cursor: pointer; transition: background 0.15s, box-shadow 0.15s; }
.cli-row-clickable:hover {
    background: rgba(0, 255, 102, 0.06);
    box-shadow: inset 3px 0 0 var(--primary-green), 0 0 12px rgba(0, 255, 102, 0.08);
}

.row-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.inline-form { display: inline; }

/* ---------- Paginação da listagem de firewalls (índice inferior esquerdo) ---------- */
.fw-pag-indice {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
}
.fw-pag-info {
    margin-right: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.fw-pag-btn {
    min-width: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--accent-border, rgba(140, 255, 170, 0.25));
    background: transparent;
    color: var(--text-light);
    border-radius: 6px;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.fw-pag-btn:hover { border-color: var(--primary-green); color: var(--primary-green); }
.fw-pag-btn.ativa {
    background: var(--primary-green);
    border-color: var(--primary-green);
    color: #062b16;
    font-weight: 700;
}
.fw-pag-elm { color: var(--text-muted); padding: 0 0.15rem; }

.row-link { color: var(--text-light); text-decoration: none; }
.row-link:hover { color: var(--primary-green); text-decoration: underline; }

/* ---------- Tags de nível de acesso (admins) ---------- */
.nivel-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 2px 9px;
    border-radius: 20px;
    text-transform: uppercase;
}
.nivel-admin { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
.nivel-superadmin { background: rgba(0, 255, 102, 0.12); color: var(--primary-green); border: 1px solid rgba(0, 255, 102, 0.3); }
.nivel-usuario { background: rgba(234, 179, 8, 0.12); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.3); }

/* ---------- Abas (Auditoria) ---------- */
.tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0;
    padding: 0 8px;
    border-bottom: 2px solid var(--accent-border);
}

.tabs .tab {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 1.2rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    border: 0;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
    user-select: none;
}

.tabs .tab.active {
    color: var(--primary-green);
    background: var(--card-bg);
    box-shadow: inset 0 3px 0 var(--primary-green);
}

.tabs .tab:hover:not(.active) { color: var(--text-light); background: rgba(255, 255, 255, 0.06); }

/* Conexão das abas com o conteúdo abaixo (padrão do card de configuração do daemon) */
[data-fw-painel] { padding-top: 14px; }
[data-srv-painel] { padding-top: 14px; }
/* Primeiro painel DENTRO do quadro de exibição INVISÍVEL (115.36): o card
   encosta na borda superior do quadro sem o respiro de 14px dos painéis. */
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-fw-painel],
.dash-fill-quadro > .quadro-exibicao > [data-fill-scroll][data-srv-painel] {
    padding-top: 0;
}

/* Cabeçalho fixo (sticky) de seção — base na linha inferior das abas.
   Padrão do CRM: contexto do registro + abas que permanecem visíveis
   durante a rolagem do conteúdo (aplicado na edição de firewalls). */
.fw-cabecalho-fixo {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: rgba(5, 8, 17, 0.98);
    background-image: radial-gradient(circle at 15% 0%, rgba(0, 255, 102, 0.08), transparent 45%);
    border-radius: 10px 10px 0 0;
    padding: 0.9rem 1.2rem 0;
}
.fw-cabecalho-fixo .fw-contexto {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.8rem;
    flex-shrink: 0;
}
.fw-cabecalho-fixo .fw-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0 0 0.45rem;
    border: 0;
}
.fw-cabecalho-fixo .fw-dash-header h1 {
    display: inline;
    font-size: 1.05rem;
    margin: 0;
}
.fw-cabecalho-fixo .fw-dash-header p {
    display: inline;
    font-size: 0.72rem;
    margin: 0 0 0 0.5rem;
}
.fw-cabecalho-fixo .fw-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-green);
    margin-bottom: 0.25rem;
}
.fw-cabecalho-fixo .fw-nome {
    font-size: 1.15rem;
    font-weight: 700;
    color: #e6edf3;
    margin: 0 0 0.55rem;
    word-break: break-word;
}
.fw-cabecalho-fixo .fw-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.fw-cabecalho-fixo .fw-meta b { color: var(--text-light); font-weight: 600; }
.fw-cabecalho-fixo .tabs {
    margin-bottom: 0;
    margin-left: -8px;
    padding-top: 0.4rem;
}
.fw-cabecalho-fixo .tabs .tab { padding: 0.6rem 1.1rem; }
@media (max-width: 900px) {
    .fw-cabecalho-fixo { position: relative; top: auto; border-radius: 10px; }
}

/* ===== Cabeçalho de seção genérico (padrão sticky do CRM) =====
   Mesmo padrão do .fw-cabecalho-fixo, mas reutilizável por qualquer
   seção via admin/includes/section-header.php. */
.section-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    margin-left: -1rem;
    margin-right: -1rem;
    background-color: rgba(5, 8, 17, 0.98);
    background-image: radial-gradient(circle at 15% 0%, rgba(0, 255, 102, 0.08), transparent 45%);
    border-radius: 12px 12px 0 0;
    padding: 0.9rem 1.2rem 0;
}
.section-header__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.45rem;
}
.section-header__info { min-width: 0; }
.section-header__kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-green);
    margin-bottom: 0.25rem;
}
.section-header__titulo {
    display: inline;
    font-size: 1.05rem;
    color: var(--primary-green);
    margin: 0;
}
.section-header__subtitulo {
    display: inline;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0 0 0 0.5rem;
}
.section-header__acoes {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.section-header__contexto {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.8rem;
    flex-shrink: 0;
}
.section-header__contexto .section-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.section-header__contexto .section-header__meta b { color: var(--text-light); font-weight: 600; }
/* Aliases genéricos — contexto de registro no padrão sticky */
.section-header .fw-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-green);
    margin-bottom: 0.25rem;
}
.section-header .fw-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.section-header .fw-meta b { color: var(--text-light); font-weight: 600; }
.section-header__tabs { margin: 0.3rem -8px 0; padding-top: 0.4rem; }
.section-header__tabs .tab { padding: 0.6rem 1.1rem; }

/* ===== Painel de dados do CRM: cabeçalho da seção fixo (sticky) no topo
   do painel + conteúdo rolável. O .dash-body (acima) é o contêiner de
   scroll; o cabeçalho (ações) fica colado no topo e não rola. Sub-headers
   aninhados dentro de painéis (ex.: servidores.php painel Serviços) NÃO
   são afetados. */
.dash-body > .dash-header:not([style*="border-bottom"]) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 40;
    margin-left: -1rem;
    margin-right: -1rem;
    background-color: rgba(5, 8, 17, 0.98);
    background-image: radial-gradient(circle at 15% 0%, rgba(0, 255, 102, 0.08), transparent 45%);
    border-radius: 12px 12px 0 0;
    padding: 0.9rem 1.2rem 0.6rem;
    margin-bottom: 0.9rem;
}
/* Linha de retorno após o cabeçalho sticky (ex.: resultado do deploy) */
.dash-header-linha {
    margin: -0.9rem 0 1.5rem;
    padding: 0.5rem 1.2rem;
    border-top: 1px solid var(--accent-border);
    border-bottom: 1px solid var(--accent-border);
    font-size: 0.82rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dash-header-linha::before {
    content: "↩";
    color: var(--primary-green);
    font-weight: 700;
}
.dash-header-linha--ok::before { content: "✓"; color: var(--primary-green); }
.dash-header-linha--erro::before { content: "✕"; color: #ff5f57; }
.dash-header-linha--erro { color: #ffb3ae; }

/* Editor WYSIWYG e DRE movidos para assets/wysiwyg.css e assets/dre.css
   (folhas por função). Carregados nas páginas correspondentes via chave
   'css' do dashboard.php. Permanece aqui apenas a utilidade global. */
.text-right { text-align: right; }

/* ===== Modal de confirmação custom (substitui window.confirm) ===== */
.ubsd-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.6); display: flex;
    align-items: center; justify-content: center;
}
.ubsd-modal-box {
    background: #0f1729; border: 1px solid var(--accent-border);
    border-radius: 10px; padding: 1.5rem 2rem; max-width: 420px; width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.ubsd-modal-msg {
    font-size: 0.92rem; color: var(--text-light); line-height: 1.5;
    margin-bottom: 1.2rem;
}
.ubsd-modal-btns { display: flex; gap: 0.6rem; justify-content: flex-end; }
.ubsd-modal-btns button {
    padding: 6px 14px; border-radius: 30px; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; border: none; font-family: inherit;
    transition: background 0.15s;
}
.ubsd-modal-cancel {
    background: rgba(255,255,255,0.06); color: var(--text-muted);
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.ubsd-modal-cancel:hover { background: rgba(255,255,255,0.1); }
.ubsd-modal-ok {
    background: rgba(248,113,113,0.15); color: #f87171;
    border: 1px solid rgba(248,113,113,0.3) !important;
}
.ubsd-modal-ok:hover { background: rgba(248,113,113,0.25); }


/* Dica em célula de tabela (ex.: sem permissões de ações) */
.dica-celula { color: var(--texto-suave, #8b93a7); font-size: 0.82rem; font-style: italic; white-space: nowrap; }

/* Menu item de envio (sidebar SMS/WhatsApp) */
.menu-item-envio {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: 6px;
    color: var(--texto-principal, #e2e8f0);
    text-decoration: none;
    font-size: .88rem;
    transition: all .15s ease;
}
.menu-item-envio:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.menu-item-envio.active {
    background: var(--accent-bg, rgba(59,130,246,.12));
    color: var(--accent, #60a5fa);
    font-weight: 600;
}
.menu-item-envio svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .7;
}
.menu-item-envio.active svg {
    opacity: 1;
}


/* === ALIASES PADRAO DO PROJETO (AGENTS.md) — gerado automaticamente === */
/* Classes novas herdam as regras das legadas para nao quebrar visual. */
.painel-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.painel-cabecalho h1 {
    font-size: 1.7rem;
    color: var(--primary-green);
    margin-bottom: 0.3rem;
}
.painel-cabecalho p {
    color: var(--text-muted);
    font-size: 0.92rem;
}
.painel-cabecalho-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.painel-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
}
.painel-cartao {
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.8rem;
    margin-bottom: 1.5rem;
}
.painel-cartao h3 {
    color: var(--primary-green);
    font-size: 1.05rem;
    margin-bottom: 1rem;
}
.painel-cartao select:focus,
.dash-card textarea:focus { border-color: var(--primary-green); }
.painel-cartao input[type="file"],
.login-card input[type="file"] {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.9rem;
}
.painel-cartao input[type="file"]::file-selector-button,
.login-card input[type="file"]::file-selector-button {
    background: rgba(10, 14, 23, 0.92);
    color: var(--primary-green);
    border: 1px solid rgba(0, 255, 102, 0.4);
    border-radius: 30px;
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    margin-right: 0.8rem;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.painel-cartao input[type="file"]::file-selector-button:hover,
.login-card input[type="file"]::file-selector-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}
.estado-vazio {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.acoes-linha {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.form-erro-caixa {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.35);
    color: #ff8080;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 1.3rem;
}
.form-info-caixa {
    background: rgba(0, 255, 102, 0.08);
    border: 1px solid rgba(0, 255, 102, 0.3);
    color: var(--primary-green);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-bottom: 1.3rem;
}
.barra-filtro input[type="text"] {
    flex: 0 0 60%;
    padding: 0.6rem 0.9rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
    outline: none;
}
.barra-filtro select {
    flex: 0 0 calc(20% - 1.05rem);
    padding: 0.6rem 0.9rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
    outline: none;
}
.barra-filtro input[type="text"]:focus,
.filter-bar select:focus { border-color: var(--primary-green); }
.contagem-filtro {
    text-align: right;
    font-size: 0.82rem;
    color: var(--text-muted, #6b7280);
    white-space: nowrap;
    margin-top: 0.4rem;
}
.cartao-estatistica {
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.3rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.cartao-estatistica .stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-light);
}
.cartao-estatistica .stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.acesso-cartao {
    width: 100%;
    max-width: 420px;
    background-color: rgba(16, 24, 39, 0.85);
    background-image: radial-gradient(circle at 25% 15%, rgba(0, 255, 102, 0.12), transparent 45%),
                       radial-gradient(circle at 85% 90%, rgba(0, 255, 102, 0.08), transparent 50%);
    border: 1px solid rgba(0, 255, 102, 0.2);
    border-radius: 16px;
    padding: 2.5rem 2.2rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 255, 102, 0.05);
}
.acesso-cartao h1 {
    font-size: 1.5rem;
    color: var(--primary-green);
    margin-bottom: 0.4rem;
}
.acesso-cartao .subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.8rem;
}
.acesso-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 1.8rem;
    text-decoration: none;
    text-align: center;
}
.acesso-brand img {
    height: 44px;
}
.acesso-brand span {
    color: #00AA00;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════════════════════════════
   PADRÃO DO PROJETO (AGENTS.md) — formulários/filtros em classes novas.
   form-grupo, form-linha, form-cartao, form-erro-caixa, form-info-caixa,
   barra-filtro, contagem-filtro. Mesmas regras das classes legadas
   (form-group/form-row/form-card/filter-bar) — coexistência sem regressão.
   ═══════════════════════════════════════════════════════════════════ */
.form-grupo { margin-bottom: 1.3rem; }
.form-grupo label {
    display: block;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    border-color: var(--primary-green);
    box-shadow: 0 0 0 3px rgba(0, 255, 102, 0.12);
}
.form-grupo small.hint { display: block; margin-top: 0.35rem; font-size: 0.75rem; color: var(--text-muted); }
.form-grupo small.error { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--terminal-red); }
.form-linha { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.form-linha .form-grupo { flex: 1; min-width: 220px; }
.form-cartao select { width: 100%; padding: 0.8rem 1rem; background: rgba(5,8,17,0.85); border: 1px solid var(--accent-border); border-radius: 6px; color: var(--text-light); font-size: 0.95rem; outline: none; }
.form-cartao select:focus { border-color: var(--primary-green); }

.form-erro-caixa,
.form-info-caixa {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-top: 0.8rem;
}
.form-erro-caixa { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.4); color: #f87171; }
.form-info-caixa { background: rgba(0, 255, 102, 0.07); border: 1px solid rgba(0, 255, 102, 0.3); color: #d4dbe3; }
.form-info-caixa code { color: var(--primary-green); background: rgba(0,255,102,0.1); padding: 1px 5px; border-radius: 4px; }

.barra-filtro {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.barra-filtro input[type="text"],
.barra-filtro select {
    padding: 0.6rem 0.9rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
    outline: none;
}
.barra-filtro input[type="text"]:focus,
.barra-filtro select:focus { border-color: var(--primary-green); }
.barra-filtro a {
    padding: 0.5rem 0.9rem;
    border-radius: 30px;
    border: 1px solid var(--accent-border);
    background: rgba(10, 14, 23, 0.8);
    color: var(--text-light);
    font-size: 0.82rem;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.barra-filtro a:hover { border-color: var(--primary-green); }
.barra-filtro a.ativo { background: rgba(0, 255, 102, 0.15); border-color: var(--primary-green); color: var(--primary-green); }
.contagem-filtro { color: var(--text-muted); font-size: 0.75rem; margin-left: 0.25rem; }


/* ============================================================
   BOTÕES — padrão do painel administrativo (extraído de admin.css)
   Carregado via includes/botoes_css.php — NÃO editar admin.css
   ------------------------------------------------------------
   Padrão: Criar/Novo=botao-principal · Salvar=botao-enviar ·
   Voltar/Cancelar=botao-secundario · Excluir em tabela=link-btn,
   link-btn-danger · destrutiva em destaque=botao-perigo
   ============================================================ */

.btn-submit,
.botao-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.15), rgba(0, 255, 102, 0.08));
    border: 1px solid rgba(0, 255, 102, 0.45);
    border-radius: 30px;
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 255, 102, 0.12), 0 1px 3px rgba(0,0,0,0.3);
    transition: all 0.25s ease;
    text-transform: none;
}

.botao-enviar-bloco {
    width: 100%;
}

.btn-submit:hover,
.botao-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0, 255, 102, 0.25), 0 2px 6px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, rgba(0, 255, 102, 0.22), rgba(0, 255, 102, 0.12));
    border-color: rgba(0, 255, 102, 0.6);
}

.btn-submit:active,
.botao-enviar:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 255, 102, 0.15);
}

/* Botão de perigo (pílula vermelha) — variante destrutiva do botao-principal */
.botao-perigo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 30px;
    color: #f87171;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.botao-perigo:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.35);
    border-color: rgba(248, 113, 113, 0.7);
    color: #f87171;
}

.acesso-voltar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid var(--accent-border);
    border-radius: 30px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}

.acesso-voltar:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.25);
    border-color: var(--btn-green);
    color: var(--text-light);
}


/* Botão Sair - canto inferior direito */
.logout-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(255, 77, 77, 0.4);
    border-radius: 30px;
    color: var(--terminal-red);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.logout-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.35);
}

.logout-fab svg { width: 16px; height: 16px; }


/* Botão flutuante de Documentação — logo acima do botão Sair (canto inferior direito) */
.docs-fab {
    position: fixed;
    bottom: 74px;
    right: 24px;
    z-index: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.95);
    border: 1px solid var(--accent-border);
    border-radius: 30px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.docs-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

.docs-fab svg { width: 16px; height: 16px; }

/* Botão Filtros — mesma linguagem visual do Ajuda/Sair, mas em fluxo normal
   (vive no cabeçalho da seção, à direita da seleção de fonte). */
.filtros-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.95);
    border: 1px solid var(--accent-border);
    border-radius: 30px;
    color: var(--primary-green);
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.filtros-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

.filtros-fab svg { width: 16px; height: 16px; }

/* Sub-card dos filtros: pendurado no bloco de controles, à direita. */
.filtros-card {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 500;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    min-width: 240px;
    padding: .8rem .9rem;
    background: var(--card-bg);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}

.filtros-card label {
    font-size: .75rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.filtros-card select,
.filtros-card input[type="date"] {
    padding: .3rem .45rem;
    font-size: .8rem;
}

/* Rodapé do card: janela de horário do dia (das … até …). */
.filtros-card .filtros-hora {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    border-top: 1px solid var(--accent-border);
    padding-top: .55rem;
}

.filtros-card .filtros-hora .filtros-hora-titulo {
    width: 100%;
    font-size: .7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.filtros-card .filtros-hora label {
    flex-direction: row;
    align-items: center;
    gap: .2rem;
}

.filtros-card .filtros-hora select {
    padding: .25rem .35rem;
    font-size: .75rem;
}

/* Botão Aplicar do sub-card de filtros. */
.filtros-card .filtros-aplicar {
    align-self: flex-end;
    padding: .3rem .9rem;
    background: rgba(10, 14, 23, 0.95);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    color: var(--primary-green);
    font-weight: 700;
    font-size: .75rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.filtros-card .filtros-aplicar:hover {
    border-color: var(--primary-green);
    box-shadow: 0 0 12px rgba(0, 255, 102, 0.25);
}

/* ---------- Botões ---------- */
.btn-primary,
.botao-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(0, 255, 102, 0.4);
    border-radius: 30px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.btn-primary:hover,
.botao-principal:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.35);
}

.btn-secondary,
.botao-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid var(--accent-border);
    border-radius: 30px;
    color: var(--text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-secondary:hover,
.botao-secundario:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.25);
    border-color: var(--btn-green);
    color: var(--text-light);
}

/* ---------- Botão-link padrão (pílula) ---------- */
/* Base global: onde .row-actions .link-btn é mais específico, mantém o
   estilo compacto da tabela. */
.link-btn,
.botao-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(0, 255, 102, 0.25);
    border-radius: 30px;
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.link-btn:hover,
.botao-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 18px rgba(0, 255, 102, 0.3);
    border-color: rgba(0, 255, 102, 0.5);
    color: var(--primary-green);
    text-decoration: none;
}
.link-btn-danger,
.botao-link-perigo {
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}
.link-btn-danger:hover,
.botao-link-perigo:hover {
    box-shadow: 0 0 18px rgba(248, 113, 113, 0.3);
    border-color: rgba(248, 113, 113, 0.6);
    color: #f87171;
}
.link-btn-success,
.botao-link-sucesso {
    border-color: rgba(34, 197, 94, 0.35);
    color: #4ade80;
}
.link-btn-success:hover,
.botao-link-sucesso:hover {
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.6);
    color: #4ade80;
}


.filter-bar .btn-secondary {
    flex: 0 0 calc(20% - 1.05rem);
    padding: 6px 14px;
    text-align: center;
}


.row-actions a,
.row-actions .link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(10, 14, 23, 0.92);
    border: 1px solid rgba(0, 255, 102, 0.3);
    border-radius: 30px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.row-actions a:hover,
.row-actions .link-btn:hover {
    background: rgba(10, 14, 23, 0.92);
    border-color: rgba(0, 255, 102, 0.5);
    color: var(--primary-green);
    transform: translateY(-1px);
    box-shadow: 0 0 14px rgba(0, 255, 102, 0.25);
    text-decoration: none;
}

.row-actions .link-btn-danger {
    color: #f87171;
}
.row-actions .link-btn-danger:hover {
    background: rgba(10, 14, 23, 0.92);
    border-color: rgba(248,113,113,0.5);
    box-shadow: 0 0 14px rgba(248,113,113,0.25);
    color: #f87171;
}


/* ============================================================
   painelmc — overrides do Coletor Minha Conexão
   Reaproveita as classes do painel administrativo UNIXBSD.
   ============================================================ */

/* O layout do coletor não usa o wrapper .dash-body; a rolagem fica no main. */
.dash-main {
    overflow-y: auto;
    overflow-x: hidden;
}

.login-card h1,
.login-card .subtitle {
    text-align: center;
}

.login-card .admin-badge {
    display: block;
    width: max-content;
    margin: 0 auto 0.9rem;
}

.login-card .form-error-box,
.login-card .form-info-box {
    text-align: left;
}

.barra-filtro input[type="date"] {
    padding: 0.6rem 0.9rem;
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.88rem;
    outline: none;
    color-scheme: dark;
}

.barra-filtro input[type="date"]:focus {
    border-color: var(--primary-green);
}

.barra-filtro .form-grupo {
    margin-bottom: 0;
}

.mc-table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 8px;
}

.mc-table-scroll table.dash-table {
    min-width: 980px;
}

.mc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.3rem;
}

.mc-pagination a {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--accent-border);
    border-radius: 6px;
    color: var(--text-light);
    background: rgba(10, 14, 23, 0.8);
    text-decoration: none;
    font-size: 0.82rem;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.mc-pagination a:hover {
    border-color: var(--primary-green);
    color: var(--primary-green);
}

.mc-pagination a.ativo {
    border-color: var(--primary-green);
    background: rgba(0, 255, 102, 0.15);
    color: var(--primary-green);
    font-weight: 700;
}

.mc-json {
    background: rgba(5, 8, 17, 0.85);
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    padding: 1rem;
    overflow: auto;
    max-height: 480px;
    color: #cbd5e1;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.mc-btn-danger {
    padding: 0.35rem 0.8rem;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 30px;
    color: #f87171;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mc-btn-danger:hover {
    background: rgba(248, 113, 113, 0.18);
    border-color: rgba(248, 113, 113, 0.75);
}

.mc-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.mc-logout svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.mc-logout:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #f87171;
}

.form-grupo input[readonly] {
    color: var(--primary-green);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.82rem;
}

code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--primary-green);
    background: rgba(0, 255, 102, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-all;
}

@media (max-width: 900px) {
    html.dash-escroll,
    body.dash-escroll {
        height: auto;
        min-height: 100%;
        overflow: auto;
    }
    .dash-escroll .dash-layout {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .dash-main {
        height: auto;
        overflow-y: visible;
    }
}

@media (max-width: 768px) {
    .dash-main {
        padding: 1rem;
        height: auto;
        overflow-y: visible;
    }
    .dash-header h1 {
        font-size: 1.35rem;
    }
    .barra-filtro .form-grupo,
    .barra-filtro button,
    .barra-filtro a {
        width: 100%;
    }
    .mc-pagination a {
        padding: 0.4rem 0.6rem;
    }
}