/* ============================================================
   Monitor Behind — sistema de design (dark, tema da marca)
   ============================================================ */

/* ---------- Fontes self-host ---------- */
@font-face {
  font-family:'Neue Montreal';
  src:url('fonts/NeueMontreal-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'Reckless Neue';
  src:url('fonts/RecklessNeue-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
/* GeistMono não presente na pasta — mono usa fallback de sistema. */

:root {
  /* Heat (bege da marca) */
  --heat-100:#D2C2AA; --heat-90:#BFB099;
  --heat-16:rgba(210,194,170,.16); --heat-12:rgba(210,194,170,.12); --heat-8:rgba(210,194,170,.08);

  /* Superfícies */
  --background-base:#0a0a0a; --background-lighter:#0f0f0f;
  --surface:#141414; --surface-raised:#1a1a1a; --hover:#161616;
  --accent-bg-active:#1F1813;

  /* Bordas */
  --border-faint:#1f1f1f; --border-muted:#2a2a2a; --border-loud:#404040;

  /* Texto */
  --text-main:#F5F5F5; --text-default:#C0C0C0; --text-muted:#737373; --text-dim:#4D4D4D;

  /* Acentos */
  --accent-forest:#10b981; --accent-crimson:#ef4444; --accent-honey:#C5A572;

  /* Raios / sombras */
  --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-full:9999px;
  --shadow-focus:0 0 0 2px var(--background-base); --shadow-elev:0 4px 16px rgba(0,0,0,.2);

  /* Motion */
  --dur-fast:100ms; --dur-base:200ms; --ease-out:cubic-bezier(0,0,.2,1);

  /* Famílias */
  --font-display:'Reckless Neue', Georgia, 'Times New Roman', serif;
  --font-sans:'Neue Montreal', system-ui, -apple-system, sans-serif;
  --font-mono:'GeistMono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }

/* Barra de rolagem da página — fina e escura, no tom das bordas */
html {
  scrollbar-width:thin;
  scrollbar-color:var(--border-muted) transparent;
}
html::-webkit-scrollbar { width:10px; height:10px; }
html::-webkit-scrollbar-track { background:transparent; }
html::-webkit-scrollbar-thumb {
  background:var(--border-muted);
  border-radius:var(--radius-full);
  border:2px solid var(--background-base); background-clip:content-box;
}
html::-webkit-scrollbar-thumb:hover { background:var(--border-loud); background-clip:content-box; }

body {
  background:var(--background-base);
  color:var(--text-default);
  font-family:var(--font-sans);
  font-size:14px; line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Título "Monitor Behind" — Display (Reckless Neue) reto */
h2 {
  font-family:var(--font-display); font-style:normal; font-weight:400;
  font-size:28px; line-height:1.15; letter-spacing:0;
  color:var(--text-main); margin:0;
}
h3 { font-size:14px; font-weight:500; color:var(--text-main); margin:0; }

a { color:inherit; }

/* Rótulos de seção — Sans, uppercase */
.microlabel {
  font-family:var(--font-sans);
  font-size:13px; font-weight:450; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
}

/* Números — assinatura de dados: Mono + tabular */
.num, .tabular { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* Foco global acessível */
a:focus-visible, button:focus-visible, input:focus-visible, .toggle-tab:focus-visible {
  outline:2px solid var(--heat-100); outline-offset:2px;
}

/* Superfícies chapadas — sem aurora / sem vidro */
.aurora, .topband { display:none; }

/* ============================================================
   Receita .glass — painel/card chapado
   ============================================================ */
.glass {
  background:var(--surface);
  border:1px solid var(--border-muted);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-elev);
}

/* ============================================================
   Controles — inputs, botões, pílulas
   ============================================================ */
.input {
  width:100%;
  padding:9px 12px;
  font:inherit; font-size:14px; color:var(--text-main);
  background:var(--surface-raised);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-muted);
  transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.input::placeholder { color:var(--text-dim); }
.input:focus {
  outline:none;
  border-color:var(--border-loud);
  box-shadow:var(--shadow-focus);
}

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-size:13px; font-weight:450;
  border:none; cursor:pointer; text-decoration:none;
  border-radius:var(--radius-full);
  padding:9px 18px;
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn-block { width:100%; }
.btn-sm { padding:5px 14px; font-size:12px; }

/* Primário "Entrar" */
.btn-primary {
  background:var(--heat-100); color:var(--background-base);
}
.btn-primary:hover { background:var(--heat-90); }

/* Secundário "Renovar" */
.btn-secondary {
  background:transparent;
  color:var(--heat-100);
  border:1px solid var(--border-muted);
  border-radius:var(--radius-md);
}
.btn-secondary:hover { background:var(--heat-8); }

/* Pílula de status — sem bolinha */
.pill {
  display:inline-block;
  padding:3.5px 12px;
  border-radius:var(--radius-full);
  font-size:13px; font-weight:450;
}
.pill-ok { color:var(--accent-forest); background:rgba(16,185,129,.1); }
.pill-danger { color:var(--accent-crimson); background:rgba(239,68,68,.1); }

/* Estados de backup — mesma escala de cor do resto do painel */
.pill-warning  { margin-top: 10px; color:var(--accent-honey); background:rgba(197,165,114,.1); }
.pill-critical { color:var(--accent-crimson); background:rgba(239,68,68,.1); }
.pill-aguardando { color:var(--accent-honey); background:rgba(197,165,114,.1); }
/* Não configurado não é erro: cinza, discreto, sem fundo colorido */
.pill-nao_configurado { color:var(--text-muted); background:var(--surface-raised); }
.pill { white-space:nowrap; }

/* Hospedagem — não é status, é responsabilidade: tom neutro, sem alarme.
   Só "sem classificação" chama atenção, porque é trabalho meu pendente. */
.pill-hosp-propria    { color:var(--heat-100); background:var(--heat-8); }
.pill-hosp-terceiro   { color:var(--text-muted); background:var(--surface-raised); }
.pill-hosp-indefinida { color:var(--accent-honey); background:rgba(197,165,114,.1); }

/* ============================================================
   Login
   ============================================================ */
.login-body { min-height:100vh; background:var(--background-base); }
.login-wrap {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login-card {
  width:100%; max-width:360px;
  padding:28px 26px 26px;
  display:flex; flex-direction:column; gap:16px;
}
/* Wordmark do login — Display reto */
.wordmark {
  font-family:var(--font-display); font-style:normal; font-weight:400;
  font-size:28px; line-height:1.1; color:var(--text-main);
  margin-bottom:2px;
}

.field { display:flex; flex-direction:column; gap:6px; }

.form-error {
  margin:0;
  color:var(--accent-crimson);
  font-size:13px; font-weight:450;
}

/* ============================================================
   Painel — layout
   ============================================================ */
/* Conteúdo com teto de 1280px, centralizado pela própria margem lateral:
   desktop = max(20px, sobra/2); notebook e tablet = 3rem; celular = 1.25rem.
   O --gutter também alinha o "Sair" com a borda do conteúdo. */
.page {
  --gutter: max(20px, calc((100% - 1280px) / 2));
  position:relative; z-index:1;
  padding:48px var(--gutter) 96px;
}

/* Cabeçalho centralizado: só título e data. Nada mais nessa faixa. */
.page-head {
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  margin-bottom:28px;
}
/* Subtítulo / data — Mono */
.head-sub {
  margin:8px 0 0;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--text-muted);
}

/* Sair — canto superior direito, fora do fluxo central. É raro: não compete
   com o cabeçalho. */
.signout {
  position:absolute; top:48px; right:var(--gutter);
  font-size:12.5px; color:var(--text-muted); text-decoration:none;
}
.signout:hover { color:var(--text-main); text-decoration:underline; }

/* Toggle Sem WWW / Com WWW — segmentado */
.toggle {
  display:inline-flex; padding:3px;
  background:transparent;
  border-radius:var(--radius-full);
  border:1px solid var(--border-muted);
}
.toggle-tab {
  border:none; background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:450;
  color:var(--text-muted);
  padding:6px 14px; border-radius:var(--radius-full);
  transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.toggle-tab.is-active {
  background:var(--accent-bg-active); color:var(--heat-100);
}

/* Abas Sites · Domínios · Backups — mesmo .toggle/.toggle-tab do filtro www,
   centralizadas logo abaixo do cabeçalho. Em tela estreita a barra rola
   sozinha em vez de espremer as abas. */
.tabs {
  display:flex;
  justify-content:center;
  /* safe center: se as abas não couberem, a barra rola sem cortar a primeira */
  justify-content:safe center;
  margin-bottom:44px;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tabs .toggle { flex:0 0 auto; }

/* Contador de pendências na aba. Sem badge = nada a fazer ali. */
.tab-badge {
  display:inline-block; margin-left:7px;
  padding:0 6px; min-width:18px;
  border-radius:var(--radius-full);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:11.5px; line-height:16px; text-align:center;
}
.tab-badge-danger { color:var(--accent-crimson); background:rgba(239,68,68,.14); }
.tab-badge-warn   { color:var(--accent-honey);   background:rgba(197,165,114,.14); }

/* ============================================================
   Filtros da tabela de sites — ícone + popover
   Notebook/desktop: dois ícones no canto direito do painel, alinhados com a
   coluna Observação. Tablet para baixo: viram uma linha de botões visível.
   ============================================================ */
.panel-tools {
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 4px 12px;
}
.tool { position:relative; }

/* Ícone: só aparece de notebook para cima (regra no bloco responsivo) */
.tool-btn {
  display:none;
  padding:5px; line-height:0;
  color:var(--heat-100);
  background:var(--accent-bg-active);
  border:1px solid var(--border-muted);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out);
}
.tool-btn:hover { border-color:var(--border-loud); }
.tool-btn[aria-expanded="true"] { border-color:var(--heat-100); }

/* Filtro ativo diferente do padrão: ponto no canto do ícone, para o estado não
   ficar escondido dentro do popover fechado. */
.tool-btn.is-filtering { position:relative; }
.tool-btn.is-filtering::after {
  content:''; position:absolute; top:-3px; right:-3px;
  width:6px; height:6px; border-radius:var(--radius-full);
  background:var(--heat-100);
}

/* Base (tablet para baixo): os grupos ficam visíveis, o atributo hidden que o
   PHP escreve não vale — quem esconde é só o modo popover do desktop. */
.tool-pop { position:static; }
.tool-pop[hidden] { display:block; }

/* Blocos */
.block { margin-top:44px; }
.block:first-of-type { margin-top:0; }
/* Com JS, só um painel fica visível: ele nunca herda o respiro do empilhamento.
   Sem JS, os três continuam empilhados e espaçados como antes. */
.block[data-panel] { margin-top:0; }
.block[data-panel]:not([hidden]) ~ .block[data-panel]:not([hidden]) { margin-top:56px; }
.block-head {
  display:flex; align-items:baseline; gap:14px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.empty {
  padding:22px; font-size:13px; color:var(--text-muted);
}

/* ============================================================
   Tabela de sites
   ============================================================ */
.panel { padding:6px; }
/* Rolagem horizontal em tela estreita (celular) + altura limitada para o
   cabeçalho grudar. overflow-x:auto já torna o eixo Y rolável por especificação;
   sem um teto de altura o sticky não teria contra o que grudar. */
.table-scroll {
  overflow:auto;
  max-height:calc(100vh - 240px);
  /* Barra discreta: fina, sem trilho, some no fundo do card. */
  scrollbar-width:thin;
  scrollbar-color:var(--border-loud) transparent;
  overscroll-behavior:contain;
}
.table-scroll::-webkit-scrollbar { width:8px; height:8px; }
.table-scroll::-webkit-scrollbar-track { background:transparent; }
.table-scroll::-webkit-scrollbar-corner { background:transparent; }
.table-scroll::-webkit-scrollbar-thumb {
  background:var(--border-muted);
  border-radius:var(--radius-full);
  border:2px solid transparent; background-clip:content-box;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background:var(--border-loud); background-clip:content-box; }

/* Piso de largura: em vez de espremer 7 colunas no celular, a tabela rola. */
.tbl { width:100%; min-width:820px; border-collapse:separate; border-spacing:0; }
.tbl th {
  position:sticky; top:0; z-index:2;
  text-align:left;
  font-family:var(--font-sans);
  font-size:13px; font-weight:450; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
  padding:14px 16px 12px;
  background:var(--surface);
  border-bottom:1px solid var(--border-faint);
  white-space:nowrap;
}
.tbl th.num { text-align:right; }
.tbl td {
  font-size:14px; font-weight:400; color:var(--text-default);
  padding:13px 16px;
  border-bottom:1px solid var(--border-faint);
  vertical-align:middle;
}
.tbl tbody tr { transition:background var(--dur-fast) var(--ease-out); }
.tbl tbody tr:hover { background:var(--hover); }
.tbl tr:last-child td { border-bottom:none; }
/* Na tabela de sites a última linha do DOM costuma estar filtrada (hidden), e
   aí :last-child tira a borda de uma linha invisível enquanto a última linha
   VISÍVEL fica com o risco sobrando. CSS não sabe selecionar "último visível";
   quem marca é o JS, a cada filtro. */
.tbl tbody tr.is-last-visible td { border-bottom:none; }
/* Nome do cliente destacado */
.tbl td:first-child { color:var(--text-main); }
.tbl td.num { text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tbl td.soft { color:var(--text-muted); white-space:nowrap; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tbl td.url a { color:var(--text-default); text-decoration:none; }
.tbl td.url a:hover { color:var(--text-main); text-decoration:underline; }

/* ============================================================
   Backups — contadores e tabela
   ============================================================ */
/* Data da última coleta no cabeçalho do bloco */
.head-note {
  margin-left:auto;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--text-muted);
}
.head-note .stale { color:var(--accent-honey); }

/* min() no minmax: em tela de 320px a coluna encolhe em vez de estourar. */
.stat-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  margin-bottom:20px;
}
.stat { padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.stat-num {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:24px; line-height:1.1; color:var(--text-main);
}
.stat-lbl {
  font-size:12.5px; font-weight:450; text-transform:uppercase;
  letter-spacing:.08em; color:var(--text-muted);
}
.stat-ok .stat-num       { color:var(--accent-forest); }
.stat-warning .stat-num  { color:var(--accent-honey); }
.stat-critical .stat-num { color:var(--accent-crimson); }
.stat-aguardando .stat-num { color:var(--accent-honey); }
/* Não configurado não é problema: fica cinza mesmo quando tem gente na conta */
.stat-nao_configurado .stat-num { color:var(--text-muted); }
/* Zero não precisa gritar */
.stat.is-zero .stat-num { color:var(--text-dim); }

/* Linha de site sem script instalado — presente, mas apagada */
.tbl tr.bk-off td,
.tbl tr.bk-off td:first-child { color:var(--text-dim); }

.tbl td.obs { font-size:13px; color:var(--text-muted); min-width:220px; }

/* Cliente + domínio na mesma célula, como nos cards de domínio */
.bk-cliente { display:block; color:var(--text-main); }
.bk-dom { display:block; font-size:12.5px; color:var(--text-muted); margin-top:1px; }
.tbl tr.bk-off .bk-cliente, .tbl tr.bk-off .bk-dom { color:var(--text-dim); }

/* ============================================================
   Cards de domínio
   ============================================================ */
.dom-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.dom-card {
  padding:16px 16px 14px;
  display:flex; flex-direction:column; gap:11px;
}
/* <p> sem reset traz 1em de margem e engorda o card à toa */
.dom-obs { margin:0; font-size:12.5px; }

.dom-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.dom-cliente { font-size:14px; font-weight:500; color:var(--text-main); }
.dom-nome { font-size:12.5px; color:var(--text-muted); margin-top:1px; }

/* Selo VENCIDO */
.badge {
  font-size:11px; font-weight:500; letter-spacing:.06em;
  padding:3px 8px; border-radius:var(--radius-md);
  text-transform:uppercase;
}
.badge-danger { color:var(--accent-crimson); background:rgba(239,68,68,.12); }

.dom-venc {
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 0; border-top:1px solid var(--border-faint); border-bottom:1px solid var(--border-faint);
}
/* Data de vencimento — Mono */
.dom-data {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:400; color:var(--text-main);
}
/* Contagem por urgência — Mono, colorida */
.dom-conta {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:12.5px; font-weight:400;
}
.urg-danger-text { color:var(--accent-crimson); }
.urg-warn-text   { color:var(--accent-honey); }
.urg-ok-text     { color:var(--text-default); }
.urg-none-text   { color:var(--text-muted); }

.dom-meta { display:flex; align-items:center; gap:10px; }
.dom-prov { font-size:13px; color:var(--text-default); }
.dom-meta .btn { margin-left:auto; }

/* Credenciais */
.dom-creds { display:flex; flex-direction:column; gap:8px; }
.cred-empty { margin:0; font-size:12.5px; }
.soft { color:var(--text-muted); }

.cred {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px;
  background:var(--surface-raised);
  border:1px solid var(--border-faint);
  border-radius:var(--radius-md);
}
.cred-info { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cred-label { font-size:12.5px; font-weight:450; color:var(--text-main); }
.cred-pass { display:flex; align-items:center; gap:6px; }
/* Senha mascarada — Mono */
.cred-dots {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:13px; letter-spacing:.06em; color:var(--text-default);
  max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Botão copiar — estado copiado */
.js-copy.copied { color:var(--accent-forest); border-color:var(--accent-forest); }

/* ============================================================
   Responsivo — notebook, tablet e celular
   ============================================================ */

/* Notebook e desktop: filtros recolhidos em dois ícones sobrepostos à própria
   linha de cabeçalho da tabela, no canto direito — sem faixa extra em cima.
   Só o painel de Sites tem .panel-tools; o de Backups fica intacto. */
@media (min-width:901px) {
  .panel { position:relative; }
  .panel-tools {
    position:absolute; top:14px; right:14px; z-index:3;
    padding:0; flex-wrap:nowrap;
  }
  .tool-btn { display:inline-flex; }
  /* Sem caixa em volta: o popover é só posição. Quem tem forma é o próprio
     grupo de botões. width:max-content porque o container é do tamanho do
     ícone — sem isso o "Sem WWW" quebra em duas linhas. */
  .tool-pop {
    position:absolute; top:calc(100% + 8px); right:0; z-index:5;
    width:max-content;
    padding:0; background:none; border:0; box-shadow:none;
  }
  /* Fundo próprio para não ficar transparente por cima das linhas da tabela */
  .tool-pop .toggle {
    background:var(--surface-raised);
    box-shadow:var(--shadow-elev);
  }
  /* No desktop o popover nasce fechado: o hidden do PHP volta a valer.
     (A regra base solta o hidden porque no mobile os grupos ficam visíveis.) */
  .tool-pop[hidden] { display:none; }
  /* Sem a linha de filtros no meio, o resumo do bloco encosta na tabela. */
  .block-head { margin-bottom:16px; }
}

/* Notebook e tablet: margem lateral fixa de 3rem.
   O corte é em 1376px de propósito: é exatamente onde a fórmula do desktop
   ((100% - 1280px) / 2) vale 48px. Assim a margem nunca dá um pulo — acima
   disso ela só cresce, abaixo ela trava em 3rem. */
@media (max-width:1376px) {
  .page { --gutter:3rem; }
}

/* Tablet em retrato e abaixo: o resumo do bloco desgruda da direita e vira
   linha própria, em vez de brigar por espaço com o título. */
@media (max-width:900px) {
  .page { padding-top:40px; padding-bottom:72px; }
  .signout { top:40px; }
  .page-head { margin-bottom:24px; }
  .tabs { margin-bottom:32px; }
  .block[data-panel]:not([hidden]) ~ .block[data-panel]:not([hidden]) { margin-top:44px; }
  .table-scroll { max-height:calc(100vh - 220px); }

  /* Do tablet para baixo tudo centraliza. Em coluna estreita, título à
     esquerda e resumo empurrado para a direita pelo margin-left:auto vira
     zigue-zague — centralizado o bloco lê como uma coisa só. */
  .head-note { margin-left:0; }
  .block-head {
    justify-content:center; align-items:center; text-align:center;
    gap:8px 14px;
  }
  .panel-tools { justify-content:center; }
  .stat { align-items:center; text-align:center; }
}

/* Celular: margem lateral de 1.25rem. O "Sair" sobe para a faixa de cima para
   não colidir com o título centralizado. */
@media (max-width:640px) {
  .page { --gutter:1.25rem; padding-top:56px; }
  .signout { top:20px; }
  h2 { font-size:23px; }
  .head-sub { font-size:12px; }
  .tabs { margin-bottom:26px; }
  .tabs .toggle-tab { padding:6px 11px; font-size:12px; }
  /* Os grupos ficam com a largura do próprio conteúdo e centralizados.
     Esticar o .toggle abria um vão enorme em volta dos botões. */
  .panel-tools { gap:8px; justify-content:center; }
  .panel-tools .toggle { flex:0 0 auto; }
  .microlabel, .head-note { font-size:12px; }
  .stat { padding:12px 14px; }
  .stat-num { font-size:20px; }
  .table-scroll { max-height:none; }
  .tbl th { position:static; }
  .dom-card { padding:14px 14px 12px; }
  .cred-dots { max-width:120px; }
}

/* Motion — só quando o usuário permite */
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
}