/* "Viste a um homem diligente na sua obra? Perante reis será posto; não será posto perante os de baixa sorte." — Provérbios 22:29 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,450;9..144,550;9..144,650&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  color-scheme: light;
  --bg: #F5F6F3;
  --surface: #FFFFFF;
  --surface-2: #ECEFEA;
  --border: rgba(16,24,31,0.11);
  --border-strong: rgba(16,24,31,0.18);
  --ink-primary: #10181F;
  --ink-secondary: #4B5A63;
  --ink-muted: #78868D;
  --accent: #2A78D6;
  --accent-ink: #FFFFFF;
  --accent-wash: rgba(42,120,214,0.10);
  --accent-wash-strong: rgba(42,120,214,0.16);
  --good: #0ca30c;
  --good-wash: rgba(12,163,12,0.12);
  --warning: #b9790a;
  --warning-wash: rgba(250,178,25,0.20);
  --serious: #c2571f;
  --serious-wash: rgba(236,131,90,0.18);
  --critical: #d03b3b;
  --critical-wash: rgba(208,59,59,0.12);
  --shadow: 0 1px 2px rgba(16,24,31,0.04), 0 8px 24px -12px rgba(16,24,31,0.18);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg: #0D1116; --surface: #161C22; --surface-2: #1C242C;
    --border: rgba(231,238,240,0.11); --border-strong: rgba(231,238,240,0.20);
    --ink-primary: #E7EDF0; --ink-secondary: #A9B7BF; --ink-muted: #79878F;
    --accent: #6FA6E8; --accent-ink: #071018;
    --accent-wash: rgba(111,166,232,0.14); --accent-wash-strong: rgba(111,166,232,0.22);
    --good: #3FCB4E; --good-wash: rgba(63,203,78,0.14);
    --warning: #F0B31E; --warning-wash: rgba(240,179,30,0.16);
    --serious: #F0916A; --serious-wash: rgba(240,145,106,0.16);
    --critical: #F0716A; --critical-wash: rgba(240,113,106,0.16);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg); color: var(--ink-primary);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
.mono{ font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; }
h1,h2,h3{ font-family:"Fraunces", Georgia, serif; font-weight:600; margin:0; }
a{ color: var(--accent); }

.shell{ max-width: 1180px; margin: 0 auto; padding: 20px 24px 64px; }
.auth-shell{ max-width: 400px; margin: 8vh auto; padding: 0 20px; }

.topbar{ display:flex; align-items:center; gap:16px; padding: 10px 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
.brand{ display:flex; align-items:baseline; gap:9px; }
.brand .mark{ font-family:"Fraunces", serif; font-weight:650; font-size:22px; letter-spacing:-0.01em; }
.brand .tagline{ font-size:11.5px; color:var(--ink-muted); letter-spacing:0.02em; }
.topbar-row{ display:flex; align-items:center; gap:16px; width:100%; padding-bottom:12px; flex-wrap:wrap; }
.topbar-spacer{ flex:1; }
.tenant{ display:flex; align-items:center; gap:8px; color:var(--ink-secondary); font-size:13px; }
.tenant .dot{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px var(--good-wash); }
.role-badge{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-muted); background:var(--surface-2); border:1px solid var(--border); padding:3px 8px; border-radius:5px; }
.breakglass-banner{ display:flex; align-items:center; gap:10px; background:var(--warning-wash); border:1px solid var(--warning); color:var(--ink-primary); padding:8px 14px; border-radius:9px; margin-bottom:14px; font-size:13px; }
.breakglass-banner form{ margin-left:auto; }

.nav-tabs{ display:flex; gap:18px; width:100%; flex-wrap:wrap; }
.nav-tabs a{ font-size:13.5px; color:var(--ink-muted); text-decoration:none; border-bottom:2px solid transparent; padding:0 2px 11px; margin-bottom:-1px; }
.nav-tabs a.active{ color:var(--ink-primary); border-bottom-color:var(--accent); font-weight:500; }

.panel{ background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom:16px; }
.panel-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.panel-title h2{ font-size:15.5px; font-weight:600; }
.panel-title .hint{ font-size:11.5px; color:var(--ink-muted); }

.grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
@media (max-width: 860px){ .grid{ grid-template-columns: 1fr; } .hero{ grid-template-columns: 1fr !important; } }
.hero{ display:grid; grid-template-columns: 1.05fr 1fr; gap:16px; margin-bottom:16px; }

.score-figure{ font-family:"Fraunces", serif; font-weight:650; font-size:56px; line-height:1; letter-spacing:-0.02em; font-variant-numeric: tabular-nums; }
.score-figure sup{ font-size:20px; font-weight:500; color:var(--ink-muted); margin-left:2px; }
.score-delta{ display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--good); background:var(--good-wash); padding:4px 9px 4px 7px; border-radius:100px; font-weight:500; }
.score-meta{ color:var(--ink-secondary); font-size:12.5px; margin-top:6px; }

.ask-panel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-wash); display:flex; flex-direction:column; }
.ask-input-row{ display:flex; gap:8px; }
.ask-input{ flex:1; font-family:inherit; font-size:13.5px; color:var(--ink-primary); background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:10px 12px; }
.ask-send{ font-family:inherit; font-size:13px; font-weight:500; color:var(--accent-ink); background:var(--accent); border:none; border-radius:9px; padding:0 16px; cursor:pointer; }
.chip-row{ display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 4px; }
.chip{ font-family:inherit; font-size:12px; color:var(--ink-secondary); background:var(--surface-2); border:1px solid var(--border); border-radius:100px; padding:5px 11px; cursor:pointer; }
.answer{ margin-top:12px; padding:13px 14px; background:var(--accent-wash); border:1px solid var(--accent-wash-strong); border-radius:10px; font-size:13.5px; color:var(--ink-primary); white-space:pre-wrap; }
.cite-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.cite{ font-family:"IBM Plex Mono", monospace; font-size:10.5px; color:var(--ink-secondary); background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:2px 7px; }
.answer-actions{ display:flex; gap:8px; margin-top:10px; }
.answer-actions button{ font-size:11.5px; color:var(--ink-muted); background:var(--surface); border:1px solid var(--border); border-radius:100px; padding:3px 10px; cursor:pointer; }

.risk-row{ display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-top:1px solid var(--border); }
.risk-row:first-of-type{ border-top:none; padding-top:2px; }
.sev{ flex-shrink:0; margin-top:2px; font-size:10.5px; font-weight:600; letter-spacing:0.02em; padding:2.5px 7px; border-radius:5px; white-space:nowrap; }
.sev-alta,.sev-critica{ color:var(--critical); background:var(--critical-wash); }
.sev-media{ color:var(--warning); background:var(--warning-wash); }
.sev-baixa{ color:var(--ink-muted); background:var(--surface-2); }
.risk-body{ flex:1; min-width:0; }
.risk-title{ font-size:13.5px; margin-bottom:3px; }
.risk-sub{ font-size:11.5px; color:var(--ink-muted); display:flex; gap:7px; flex-wrap:wrap; align-items:center; }

.conn-row{ display:flex; align-items:center; gap:10px; padding:8.5px 0; border-top:1px solid var(--border); }
.conn-row:first-of-type{ border-top:none; padding-top:2px; }
.conn-name{ flex:1; font-size:13.5px; }
.status-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:500; padding:3px 9px; border-radius:100px; white-space:nowrap; }
.status-ok,.status-conectado,.status-ativo,.status-executada{ color:var(--good); background:var(--good-wash); }
.status-atrasado,.status-pausado,.status-pendente,.status-pendente_2a_aprovacao,.status-testando{ color:var(--warning); background:var(--warning-wash); }
.status-erro,.status-falha,.status-rejeitada,.status-inativo,.status-suspenso{ color:var(--critical); background:var(--critical-wash); }
.status-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.conn-time{ font-size:11.5px; color:var(--ink-muted); }

.comp-row{ padding:9px 0; border-top:1px solid var(--border); }
.comp-row:first-of-type{ border-top:none; padding-top:2px; }
.comp-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.comp-bar{ height:6px; border-radius:100px; background:var(--surface-2); overflow:hidden; }
.comp-bar-fill{ height:100%; border-radius:100px; }

.bu-row{ display:grid; grid-template-columns: 100px 1fr 34px; align-items:center; gap:10px; padding:7px 0; }
.bu-track{ height:8px; border-radius:100px; background:var(--surface-2); overflow:hidden; }
.bu-fill{ height:100%; border-radius:100px; background:var(--accent); }

table.data{ width:100%; border-collapse:collapse; font-size:13px; }
table.data th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--border); }
table.data td{ padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.data tr:last-child td{ border-bottom:none; }

/* Ações da lista de clientes: cada botão/link é inline-block simples (sem
   flexbox, sem table-layout:fixed, sem colgroup) — o <form> em si é block por
   padrão, então ganha display:inline-block aqui para ficar lado a lado com
   os <a>. Isso usa o fluxo normal do navegador (o mesmo de várias palavras
   numa frase): nunca empilha um por linha, e se um dia não couber tudo numa
   linha só, o próprio texto quebra de forma previsível — sem depender de
   flexbox, que é onde as tentativas anteriores davam problema. */
.actions-cell{ line-height:2.1; }
.actions-cell form{ display:inline-block; margin:0 6px 0 0; vertical-align:middle; }
/* "Excluir" usa .btn-danger (cor/borda vermelha, pra chamar atenção por ser
   destrutivo) mas aqui herdava um padding/fonte diferentes de .icon-btn, o
   que fazia ele ficar visivelmente maior que os outros três botões da
   linha. Padronizando font-size/padding/border-radius só dentro de
   .actions-cell — a cor de perigo continua vinda de .btn-danger normalmente,
   só o tamanho fica igual aos outros. Além disso, "Ver como"/"Bloquear" são
   <button> e "Editar"/"Excluir" são <a> — navegadores aplicam um line-height
   diferente por padrão pra cada um, então mesmo com padding/fonte idênticos
   a ALTURA final ficava diferente; height fixo + inline-flex centralizando
   o texto elimina essa diferença de vez, não dependendo de line-height. */
.actions-cell .icon-btn,
.actions-cell .btn-danger{
  margin-right:6px; text-align:center;
  font-size:11.5px; padding:0 9px; border-radius:7px; min-width:92px;
  height:30px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle;
}
/* Sem isso, a tabela (width:100%) sobra espaço nas colunas curtas
   (Pontuação/Usuários/Conectores/Status/Ações) e o navegador empurra toda
   essa folga para dentro da própria célula de Ações — como o conteúdo dela
   é alinhado à esquerda, sobra um vão vazio bem visível depois do botão
   "Excluir". Com white-space:nowrap nessas colunas, elas ficam do tamanho
   do próprio conteúdo, e é a coluna "Cliente" (mais natural pra "esticar")
   que absorve a folga — o mesmo espaçamento visual do resto da tabela. */
.clients-table td:not(:first-child),
.clients-table th:not(:first-child){ width:1%; white-space:nowrap; }

/* Lista longa (trilha de auditoria, etc.) dentro de uma caixa com rolagem
   própria, em vez de esticar a página inteira — cabeçalho fica fixo (sticky)
   enquanto rola, para não perder o contexto das colunas. */
.table-scroll{ max-height:420px; overflow-y:auto; border:1px solid var(--border); border-radius:10px; }
.table-scroll table.data{ margin:0; }
.table-scroll table.data thead th{ position:sticky; top:0; background:var(--surface); box-shadow: 0 1px 0 var(--border); z-index:1; }
.table-scroll table.data tr:last-child td{ border-bottom:1px solid var(--border); }

/* .btn-* e .icon-btn são usados tanto em <button> quanto em <a> (link estilizado
   como botão) — text-decoration/display aqui garantem que os dois casos fiquem
   visualmente idênticos, sem sublinhado escapando por baixo do estilo de link. */
.btn-primary{ font-family:inherit; font-size:13px; font-weight:500; color:var(--accent-ink); background:var(--accent); border:none; border-radius:9px; padding:9px 14px; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-block; }
.btn-secondary{ font-family:inherit; font-size:13px; color:var(--ink-secondary); background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:9px 14px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-danger{ font-family:inherit; font-size:12.5px; color:var(--critical); background:var(--critical-wash); border:1px solid var(--critical); border-radius:9px; padding:7px 12px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn-ghost{ font-family:inherit; font-size:13px; color:var(--ink-muted); background:none; border:none; cursor:pointer; padding:9px 4px; text-decoration:none; display:inline-block; }
.icon-btn{ font-family:inherit; font-size:11.5px; color:var(--ink-secondary); background:transparent; border:1px solid var(--border); border-radius:7px; padding:5px 9px; cursor:pointer; text-decoration:none; display:inline-block; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label{ font-size:11.5px; color:var(--ink-secondary); font-weight:500; }
.field select, .field input[type="text"], .field input[type="password"], .field input[type="email"], .field textarea{
  font-family:inherit; font-size:13.5px; color:var(--ink-primary); background:var(--surface-2);
  border:1px solid var(--border); border-radius:8px; padding:9px 10px; width:100%;
}
.field .hint{ font-size:11px; color:var(--ink-muted); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:0 18px; }
@media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } }
.form-actions{ display:flex; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap; }

.flash{ padding:11px 14px; border-radius:10px; margin-bottom:14px; font-size:13.5px; }
.flash-sucesso{ background:var(--good-wash); color:var(--good); border:1px solid var(--good); }
.flash-erro{ background:var(--critical-wash); color:var(--critical); border:1px solid var(--critical); }

.badge-critico{ color:var(--critical); }
.nivel-badge{ font-size:10.5px; font-weight:600; padding:2.5px 7px; border-radius:5px; background:var(--surface-2); color:var(--ink-secondary); white-space:nowrap; }
.nivel-3{ color:var(--warning); background:var(--warning-wash); }

footer.app-footer{ margin-top:24px; padding-top:16px; border-top:1px solid var(--border); font-size:11.5px; color:var(--ink-muted); }

.auth-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px 26px; box-shadow: var(--shadow); }
.auth-card h1{ font-size:22px; margin-bottom:6px; }
.auth-card p.sub{ color:var(--ink-muted); font-size:13px; margin:0 0 20px; }

.otp-secret{ font-family:"IBM Plex Mono",monospace; font-size:14px; background:var(--surface-2); padding:10px 12px; border-radius:8px; word-break:break-all; margin:10px 0; }

[hidden]{ display:none !important; }