/* Painel Administrativo - GD Tecnologia
Segue DESIGN_SYSTEM.md do projeto principal (tema escuro, tokens em :root).
Tipografia atualizada em 10/09/2026 aplicando a skill frontend-design:
IBM Plex Sans (texto, com contraste de peso 300/800) + IBM Plex Mono
(dados/tokens/logs), saindo da pilha de fonte de sistema genérica.
Ícones decorativos (emoji na sidebar, busca, setas, "x" de fechar) foram
removidos - navegação e ações usam só texto/tipografia. */
:root{
color-scheme: dark;
--bg:#171a20;
--panel:#1c1f26;
--panel-2:#21242c;
--border:#2a2e37;
--text:#eceef1;
--muted:#8b8f98;
--accent:#2196f3;
--accent-2:#14506e;
--good:#3ddc84;
--mid:#ffc857;
--bad:#ff5b6a;
--shared:#b388f5;
--surface-light:#ffffff;
--mono:'IBM Plex Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
--sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
--sidebar-ini:#1a1d24;
--sidebar-meio:#1c2029;
--sidebar-fim:#1e3040;
--raio: 14px;
--sombra: 0 1px 2px rgba(0,0,0,.16), 0 3px 10px rgba(0,0,0,.18);
--sombra-alta: 0 8px 20px rgba(0,0,0,.22);
}
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
background:
radial-gradient(900px 480px at 100% -10%, rgba(33,150,243,.08), transparent 60%),
radial-gradient(700px 420px at -10% 100%, rgba(179,136,245,.05), transparent 55%),
var(--bg);
color:var(--text);
font-family:var(--sans);
font-weight:300;
}
a{color:var(--accent);text-decoration:none;}
.muted{color:var(--muted);}
.small{font-size:12px;}
h1,h2,h3{font-family:var(--sans);font-weight:800;letter-spacing:-.01em;}
@keyframes entrada{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.stat-card,.entry-card,.data-table-wrap,.auth-card,.painel-simples{animation:entrada .45s cubic-bezier(.16,1,.3,1) both;}
.stats-row .stat-card:nth-child(1){animation-delay:0ms}
.stats-row .stat-card:nth-child(2){animation-delay:40ms}
.stats-row .stat-card:nth-child(3){animation-delay:80ms}
.stats-row .stat-card:nth-child(4){animation-delay:120ms}
.stats-row .stat-card:nth-child(5){animation-delay:160ms}
.stats-row .stat-card:nth-child(6){animation-delay:200ms}
.entries-grid .entry-card:nth-child(1){animation-delay:0ms}
.entries-grid .entry-card:nth-child(2){animation-delay:30ms}
.entries-grid .entry-card:nth-child(3){animation-delay:60ms}
.entries-grid .entry-card:nth-child(4){animation-delay:90ms}
.entries-grid .entry-card:nth-child(5){animation-delay:120ms}
.entries-grid .entry-card:nth-child(6){animation-delay:150ms}
/* ---- Login ---- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;}
.auth-card{
width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);
border-radius:14px;padding:28px 26px;text-align:center;
}
.auth-logo{display:block;height:32px;margin:0 auto 16px;}
.auth-card h1{font-size:17px;font-weight:800;margin:0 0 4px;}
.auth-card form{margin-top:18px;max-width:320px;margin-left:auto;margin-right:auto;text-align:left;}
.auth-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:14px;}
.auth-card label input{margin-top:6px;padding:0.85rem 1rem;font-size:1rem;}
.auth-card .btn-primary{width:100%;padding:0.9rem 1.3rem;}
/* ---- Shell com sidebar ---- */
.mobile-topbar{
display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
background:var(--sidebar-ini);border-bottom:1px solid var(--border);
position:sticky;top:0;z-index:1001;
}
.menu-btn{
display:inline-flex;align-items:center;justify-content:center;
height:36px;padding:0 14px;flex-shrink:0;background:rgba(255,255,255,.08);
border:none;border-radius:9px;color:#fff;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;cursor:pointer;
}
.menu-btn:hover{background:rgba(255,255,255,.16);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;}
.sidebar-overlay.is-open{display:block;}
.app-shell{display:flex;min-height:100vh;}
.sidebar{
width:216px;flex-shrink:0;
background:linear-gradient(180deg, var(--sidebar-ini) 0%, var(--sidebar-meio) 45%, var(--sidebar-fim) 100%);
display:flex;flex-direction:column;gap:18px;
padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar-brand{
font-family:var(--sans);font-weight:800;font-size:15px;color:#fff;letter-spacing:-.01em;
display:block;line-height:1.3;text-decoration:none;
}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;}
.sidebar-nav a{
display:block;padding:9px 11px;border-radius:8px;
color:rgba(255,255,255,.68);font-size:13px;font-weight:500;text-decoration:none;transition:.15s;
}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.sidebar-nav a.active{background:rgba(255,255,255,.1);color:#fff;font-weight:700;}
.sidebar-nav-heading{
margin:10px 0 2px;padding:0 11px;font-size:10.5px;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.4);
}
.sidebar-footer{
margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:12px;
color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.1);padding-top:14px;
}
.sidebar-footer a{color:rgba(255,255,255,.75);text-decoration:none;display:block;}
.sidebar-footer a:hover{color:#fff;}
.sidebar-version{color:rgba(255,255,255,.4);font-size:11px;font-family:var(--mono);}
.content-area{flex:1;min-width:0;display:flex;flex-direction:column;}
.container{max-width:1360px;margin:26px auto;padding:0 32px 60px;width:100%;}
@media (max-width:960px){
.sidebar{width:180px;padding:18px 12px;}
.container{padding:22px 20px 48px;}
}
@media (max-width:720px){
.app-shell{min-height:auto;}
.mobile-topbar{display:flex;}
.sidebar{position:fixed;top:0;left:0;height:100vh;width:240px;transform:translateX(-100%);transition:transform .2s ease;z-index:1002;}
.sidebar.is-open{transform:translateX(0);}
.sidebar .sidebar-brand{display:none;}
.container{padding:0 14px 40px;margin:16px auto;}
}
/* ---- Botões ---- */
.btn-primary,.btn-secondary,.btn-danger{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 16px;border-radius:10px;border:1px solid var(--border);
font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none;
}
.btn-small{padding:7px 11px;font-size:12px;}
.btn-primary{background:var(--accent);color:#fff;border:none;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-secondary{background:var(--panel-2);color:var(--text);}
.btn-secondary:hover{border-color:#3a4152;}
.btn-danger{background:transparent;color:var(--bad);border-color:rgba(255,91,106,.4);}
.btn-danger:hover{background:rgba(255,91,106,.1);}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed;}
/* ---- Inputs ---- */
input[type=text],input[type=password],input[type=email],input[type=number],select,textarea{
width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--border);
background:var(--panel-2);color:var(--text);font-size:14px;font-family:var(--sans);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);}
label.campo{display:block;font-size:12px;color:var(--muted);margin-bottom:14px;}
label.campo > span{display:block;margin-bottom:6px;}
label.campo input,label.campo select,label.campo textarea{margin-top:0;}
.campos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px;}
.campos-grid label.campo{grid-column:span 1;}
.campos-grid label.campo.full{grid-column:1 / -1;}
@media (max-width:640px){.campos-grid{grid-template-columns:1fr;}}
/* ---- Cards, tabelas, badges, alerts ---- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px;}
.stat-card{
background:var(--panel);border:1px solid var(--border);
border-left:3px solid var(--stat-color, var(--accent));
border-radius:10px;padding:14px 16px;display:flex;align-items:flex-start;gap:12px;
}
.stat-label{font-size:11px;color:var(--muted);margin-bottom:3px;}
.stat-value{font-family:var(--sans);font-size:20px;font-weight:800;color:var(--text);}
.stat-value.mono{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;}
.data-table-wrap{background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;min-width:640px;}
.data-table th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--border);}
.data-table td{padding:15px 16px;border-bottom:1px solid var(--border);font-size:13px;}
.data-table tbody tr:hover td{background:rgba(255,255,255,.025);}
.data-table tr.linha-clicavel{cursor:pointer;}
.data-table tr.linha-clicavel:hover td{background:rgba(33,150,243,.06);}
.entries-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.entry-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;}
.tag{font-size:11px;background:var(--panel-2);color:var(--muted);padding:3px 8px;border-radius:20px;border:1px solid var(--border);}
.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;}
.status-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;}
.status-good{color:var(--good);}
.status-mid{color:var(--mid);}
.status-bad{color:var(--bad);}
.status-muted{color:var(--muted);}
.alert{padding:12px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;}
.alert-bad{background:rgba(255,91,106,.1);color:var(--bad);border:1px solid rgba(255,91,106,.3);}
.alert-good{background:rgba(61,220,132,.1);color:var(--good);border:1px solid rgba(61,220,132,.3);}
.alert-mid{background:rgba(255,200,87,.1);color:var(--mid);border:1px solid rgba(255,200,87,.3);}
/* ---- Badge de severidade (achados de segurança) ---- */
.sev{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;}
.sev-critico{background:rgba(255,91,106,.18);color:var(--bad);}
.sev-alto{background:rgba(255,91,106,.1);color:var(--bad);}
.sev-medio{background:rgba(255,200,87,.12);color:var(--mid);}
.sev-baixo{background:rgba(255,255,255,.08);color:var(--muted);}
.sev-informativo{background:rgba(33,150,243,.12);color:var(--accent);}
.page-title{font-family:var(--sans);font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;}
.page-sub{color:var(--muted);font-size:13px;margin:0 0 22px;}
/* ---- GD Backup - Empresas/Lojas/Máquinas (10/09/2026) ----
As duas páginas (gdbackup-painel.php, gdbackup-empresas.php) usam os
componentes normais do Painel Admin (stat-card, data-table, entry-card,
pill, modal etc.), mas com a paleta escura aprovada pelo cliente pro GD
Backup (a mesma do bloco @media prefers-color-scheme:dark do protótipo
"Backup Claro.html", cliente gostou desse tom e pediu pra usar fixo,
tanto no GD Backup quanto aqui). A classe .gdbackup-tema, envolvendo o
conteúdo dessas duas páginas, sobrescreve localmente as variáveis do
tema (--bg/--panel/--panel-2/--border/--text/--muted/--accent/--good/
--mid/--bad) só ali dentro - sidebar e as demais telas do Painel Admin
continuam com o tema escuro padrão de sempre, sem mudança. */
.gdbackup-tema{
--bg:#0E1420; --panel:#161D2C; --panel-2:#131927;
--border:#2A3348; --border-strong:#3A4560;
--text:#EAEEF6; --muted:#9AA4B8;
--accent:#5B8FF5; --accent-2:#1B2740;
--good:#4ADE80; --mid:#F5B948; --bad:#F58C82;
background:var(--bg); color:var(--text);
border:1px solid var(--border); border-radius:var(--raio);
padding:24px 26px 32px;
}
.pill{
display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
padding:3px 9px;border-radius:20px;white-space:nowrap;
}
.pill::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.pill-good{color:var(--good);background:rgba(61,220,132,.12);}
.pill-mid{color:var(--mid);background:rgba(255,200,87,.12);}
.pill-bad{color:var(--bad);background:rgba(255,91,106,.12);}
.pill-neutro{color:var(--muted);background:var(--panel-2);border:1px solid var(--border);}
.toolbar-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 18px;}
.busca-caixa{position:relative;min-width:220px;flex:1;max-width:320px;}
.cartao-empresa{cursor:pointer;transition:.15s;}
.cartao-empresa:hover{border-color:#3a4152;}
.cartao-empresa .entry-card-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.cartao-empresa .entry-card-topo strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cartao-empresa .entry-card-rodape{
display:flex;justify-content:space-between;align-items:center;gap:8px;
margin-top:auto;padding-top:10px;border-top:1px solid var(--border);
}
.acoes-linha{display:flex;gap:8px;flex-wrap:wrap;}
/* Voltar / breadcrumb do drill-down de empresa */
.voltar-link{display:inline-block;color:var(--muted);font-size:13px;font-weight:600;margin-bottom:14px;}
.voltar-link:hover{color:var(--text);text-decoration:none;}
/* ---- Modal ---- */
.modal-overlay{
display:none;position:fixed;inset:0;background:rgba(8,10,14,.65);
align-items:center;justify-content:center;padding:20px;z-index:2000;
}
.modal-overlay.is-open{display:flex;}
.modal{
background:var(--panel);border:1px solid var(--border);border-radius:var(--raio);
width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;
overflow:hidden;
box-shadow:var(--sombra-alta);
animation:entrada .3s cubic-bezier(.16,1,.3,1) both;
}
/* Todos os modais (Empresa/Loja/Máquina) envolvem cabeçalho+corpo+rodapé
num