/* =============================================================================
   GPlanSiS · Design System "GH" — a linguagem visual do GitHub (Primer) em dois
   temas, escrita MOBILE-FIRST.

   As regras da casa, e o motivo de cada uma:

   1. **Mobile é o estado base, não a exceção.** Todo componente é escrito para a
      tela estreita primeiro; `min-width` acrescenta o que sobra de espaço. O
      contrário (desktop com `max-width` remendando) é o que produz aquele
      layout que "quase funciona" no celular.
   2. **Cor é estado, nunca decoração.** Verde, amarelo e vermelho dizem saudável,
      atenção e incidente. O laranja GPlanSiS aparece só na marca e no indicador
      da página ativa — se virasse cor de botão, deixaria de significar "hub".
   3. **Alvo de toque de 44px.** No desktop os controles têm 32px, a medida do
      Primer; no toque eles crescem, porque dedo não é ponteiro.
   4. **Nada estoura a largura da tela.** Tabela, código e SQL rolam dentro do
      próprio quadro (`.gh-scroll`), nunca empurrando a página inteira.
   5. **Um token, um lugar.** Quem precisa de cor pega do token; nenhuma tela
      redefine paleta própria — foi assim que as telas antigas acabaram com
      `--tinta2` e `--lar` apontando para o vazio.
   ============================================================================= */

/* ---------- tokens · DARK (padrão) ------------------------------------------ */
:root, :root[data-tema="escuro"]{
  color-scheme: dark;
  --canvas:#0d1117; --canvas-inset:#010409; --canvas-subtle:#161b22; --canvas-overlay:#1c2128;
  --border:#30363d; --border-muted:#21262d;
  --fg:#e6edf3; --fg-muted:#8b949e; --fg-subtle:#6e7681; --fg-on-emphasis:#ffffff;
  --accent:#2f81f7; --accent-emphasis:#1f6feb; --accent-subtle:rgba(56,139,253,.15);
  --success:#3fb950; --success-emphasis:#238636; --success-subtle:rgba(46,160,67,.15);
  --attention:#d29922; --attention-emphasis:#9e6a03; --attention-subtle:rgba(187,128,9,.15);
  --danger:#f85149; --danger-emphasis:#da3633; --danger-subtle:rgba(248,81,73,.15);
  --done:#a371f7; --sponsors:#db61a2;
  --btn-bg:#21262d; --btn-hover:#30363d; --btn-border:rgba(240,246,252,.1);
  --shadow:0 0 transparent; --shadow-md:0 8px 24px rgba(1,4,9,.5);
  --overlay:rgba(1,4,9,.72);
  --marca:#EB6A20;
  --bronze:#c47b3a; --silver:#8b949e; --gold:#e3b341;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:6px; --r-lg:12px;
  --topbar:56px;                 /* altura da barra — vira offset de sticky e do drawer */
  --toque:44px;                  /* alvo mínimo de toque; no desktop cai para 32px */
  --gutter:16px;                 /* respiro lateral da página; cresce com a tela */
}
/* ---------- tokens · LIGHT --------------------------------------------------- */
:root[data-tema="claro"]{
  color-scheme: light;
  --canvas:#ffffff; --canvas-inset:#f6f8fa; --canvas-subtle:#f6f8fa; --canvas-overlay:#ffffff;
  --border:#d0d7de; --border-muted:#d8dee4;
  --fg:#1f2328; --fg-muted:#656d76; --fg-subtle:#6e7781; --fg-on-emphasis:#ffffff;
  --accent:#0969da; --accent-emphasis:#0969da; --accent-subtle:#ddf4ff;
  --success:#1a7f37; --success-emphasis:#1f883d; --success-subtle:#dafbe1;
  --attention:#9a6700; --attention-emphasis:#bf8700; --attention-subtle:#fff8c5;
  --danger:#d1242f; --danger-emphasis:#cf222e; --danger-subtle:#ffebe9;
  --done:#8250df;
  --btn-bg:#f6f8fa; --btn-hover:#eef1f4; --btn-border:rgba(31,35,40,.15);
  --shadow:0 1px 0 rgba(31,35,40,.04); --shadow-md:0 8px 24px rgba(140,149,159,.2);
  --overlay:rgba(31,35,40,.45);
  --bronze:#9a5b1f; --silver:#57606a; --gold:#9a6700;
}
/* No escuro a barra é mais escura que a página; no claro precisa ser mais clara,
   senão o cabeçalho se dissolve no conteúdo. */
:root[data-tema="claro"] .gh-topbar{background:#ffffff}

/* ---------- base ------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--fg);font-family:var(--sans);font-size:14px;
     line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100dvh;
     overflow-x:hidden}
body.travado{overflow:hidden}            /* enquanto a gaveta está aberta */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;overflow-wrap:break-word}
h1{font-size:20px}h2{font-size:16px}h3{font-size:14px}
h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}
p{margin:0}
img,svg,canvas{max-width:100%}
code,.mono{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.text-muted{color:var(--fg-muted)}.text-small{font-size:12px}
.hidden,[hidden]{display:none!important}
.grow{flex:1;min-width:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:1024px){:root{--gutter:24px;--toque:32px}}
@media (min-width:1440px){:root{--gutter:32px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- topbar ----------------------------------------------------------- */
/* No celular: hambúrguer, marca, tema, avatar. A busca e os atalhos de módulo
   saem da barra e vão para a gaveta — cabeçalho apertado é cabeçalho inútil. */
.gh-topbar{display:flex;align-items:center;gap:8px;height:var(--topbar);padding:0 12px;
  background:var(--canvas-inset);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
.gh-topbar .logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--fg);min-width:0}
.gh-topbar .logo:hover{text-decoration:none}
.gh-topbar .logo .octo{width:30px;height:30px;flex:none;border-radius:50%;background:var(--fg);color:var(--canvas);
  display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:-.02em}
.gh-topbar .logo .nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-topbar .logo .marca{color:var(--marca)}
.gh-topbar .crumb{color:var(--fg);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-topbar .crumb-sep,.gh-topbar .crumb{display:none}
.gh-topbar .icon-btn{width:var(--toque);height:var(--toque);flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);color:var(--fg-muted);
  cursor:pointer;font:inherit;font-size:15px;position:relative;text-decoration:none}
.gh-topbar .icon-btn:hover{background:var(--canvas-subtle);color:var(--fg);text-decoration:none}
.gh-topbar .icon-btn .dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--danger);border:2px solid var(--canvas-inset)}
.gh-search{display:none}
.gh-avatar{width:var(--toque);height:var(--toque);flex:none;border-radius:50%;
  background:linear-gradient(135deg,var(--success),var(--accent));display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:12px;border:1px solid var(--border);text-decoration:none}
.gh-avatar:hover{text-decoration:none;filter:brightness(1.1)}
.gh-avatar.sm{width:20px;height:20px;font-size:9px;border:0}
@media (min-width:768px){
  .gh-topbar{padding:0 var(--gutter);gap:12px}
  .gh-topbar .crumb-sep,.gh-topbar .crumb{display:block}
  .gh-search{display:flex;align-items:center;gap:8px;flex:1;max-width:320px;height:32px;padding:0 10px;
    border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);color:var(--fg-muted);font-size:13px}
  .gh-search span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gh-search:hover{text-decoration:none;border-color:var(--fg-subtle)}
  .gh-search kbd{margin-left:auto;border:1px solid var(--border);border-radius:4px;padding:0 5px;font:11px var(--mono)}
}
@media (min-width:1024px){.gh-topbar .menu-btn{display:none}}   /* no desktop a sidebar é fixa */

/* ---------- layout: sidebar + main + aside ---------------------------------- */
/* Mobile: uma coluna. A sidebar vira gaveta sobreposta; o painel lateral desce
   para o fim do conteúdo, que é onde um resumo cabe numa tela estreita. */
.gh-shell{flex:1;display:block;width:100%}
.gh-main{padding:16px var(--gutter) 32px;width:100%;min-width:0;max-width:1280px}
.gh-aside{padding:0 var(--gutter) 24px;min-width:0}

.gh-sidebar{position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:60;
  padding:16px 12px calc(16px + env(safe-area-inset-bottom));background:var(--canvas-inset);
  border-right:1px solid var(--border);overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);transition:transform .18s ease;visibility:hidden}
body.drawer .gh-sidebar{transform:none;visibility:visible}
.gh-overlay{position:fixed;inset:0;background:var(--overlay);z-index:50;opacity:0;pointer-events:none;transition:opacity .18s ease}
body.drawer .gh-overlay{opacity:1;pointer-events:auto}
.gh-sidebar .fechar{display:flex;justify-content:flex-end;margin-bottom:4px}
.gh-sidebar .who{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:12px;font-size:14px}
.gh-sidebar .sec{display:flex;justify-content:space-between;align-items:center;margin:16px 0 6px;
  font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted)}
.gh-nav{display:flex;flex-direction:column;gap:2px}
.gh-nav a{display:flex;align-items:center;gap:10px;min-height:var(--toque);padding:6px 10px;
  border-radius:var(--r);color:var(--fg);font-size:14px}
.gh-nav a:hover{background:var(--canvas-subtle);text-decoration:none}
.gh-nav a.on{background:var(--canvas-subtle);font-weight:600;position:relative}
.gh-nav a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--marca)}
.gh-nav .ico{width:18px;flex:none;text-align:center;color:var(--fg-muted)}
.gh-nav .conta{margin-left:auto}

@media (min-width:1024px){
  .gh-shell,.gh-shell.tres{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start}
  .gh-sidebar{position:sticky;top:var(--topbar);height:calc(100dvh - var(--topbar));
    width:auto;transform:none;visibility:visible;z-index:1;padding:20px 12px 20px var(--gutter)}
  .gh-sidebar .fechar{display:none}
  .gh-overlay{display:none}
  .gh-main{padding:24px var(--gutter) 40px}
  .gh-aside{padding:0 var(--gutter) 40px}
}
@media (min-width:1400px){
  /* Só numa tela realmente larga o painel vira terceira coluna: abaixo disso ele
     espremeria o conteúdo em vez de acompanhá-lo. */
  .gh-shell.tres{grid-template-columns:260px minmax(0,1fr) 320px}
  .gh-shell.tres .gh-aside{padding:24px var(--gutter) 40px 0;position:sticky;top:var(--topbar);
    max-height:calc(100dvh - var(--topbar));overflow-y:auto}
}

/* ---------- cabeçalho de página --------------------------------------------- */
.gh-page{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.gh-page .titulo{min-width:0}
.gh-page h1{font-size:20px}
.gh-page .sub{color:var(--fg-muted);font-size:13px;margin-top:4px;max-width:80ch}
.gh-page .acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (min-width:768px){
  .gh-page{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px}
  .gh-page h1{font-size:24px}
  .gh-page .acoes{justify-content:flex-end}
}

/* ---------- inputs ----------------------------------------------------------- */
.gh-input,.gh-select,.gh-textarea,input,select,textarea{
  width:100%;min-height:var(--toque);padding:8px 12px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--canvas);color:var(--fg);font:inherit;
  font-size:16px;                 /* 16px evita o zoom automático do iOS ao focar */
  max-width:100%}
@media (min-width:1024px){.gh-input,.gh-select,.gh-textarea,input,select,textarea{font-size:14px;padding:5px 12px}}
.gh-textarea,textarea{min-height:88px;height:auto}
select[multiple]{height:auto}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;accent-color:var(--accent)}
.gh-input:focus,.gh-select:focus,.gh-textarea:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.gh-input.mono{font-family:var(--mono)}
.gh-label-form,label{display:block;font-size:12px;font-weight:600;margin:0 0 4px;color:var(--fg)}
.gh-field{margin-bottom:12px;min-width:0}
.gh-input-group{display:flex;flex-direction:column;gap:8px}
@media (min-width:768px){
  .gh-input-group{flex-direction:row;gap:0}
  .gh-input-group>.gh-input{border-radius:var(--r) 0 0 var(--r)}
  .gh-input-group>.gh-btn{border-radius:0 var(--r) var(--r) 0;margin-left:-1px}
}

/* ---------- buttons ---------------------------------------------------------- */
.gh-btn,.bt{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--toque);padding:0 14px;border:1px solid var(--btn-border);border-radius:var(--r);
  background:var(--btn-bg);color:var(--fg);font:inherit;font-size:14px;font-weight:500;cursor:pointer;
  white-space:nowrap;text-decoration:none;box-shadow:var(--shadow)}
.gh-btn:hover,.bt:hover{background:var(--btn-hover);text-decoration:none}
.gh-btn:disabled,.bt:disabled{opacity:.5;cursor:not-allowed}
.gh-btn.primary,.bt.forte{background:var(--success-emphasis);border-color:rgba(240,246,252,.1);color:#fff}
.gh-btn.primary:hover,.bt.forte:hover{filter:brightness(1.08);background:var(--success-emphasis)}
.gh-btn.accent{background:var(--accent-emphasis);border-color:rgba(240,246,252,.1);color:#fff}
.gh-btn.accent:hover{filter:brightness(1.08);background:var(--accent-emphasis)}
.gh-btn.danger,.bt.perigo{color:var(--danger)}
.gh-btn.danger:hover,.bt.perigo:hover{background:var(--danger-emphasis);color:#fff;border-color:var(--danger-emphasis)}
.gh-btn.sm,.bt.min{min-height:32px;padding:0 10px;font-size:12px}
.gh-btn.invisible{background:transparent;border-color:transparent;box-shadow:none;color:var(--fg-muted)}
.gh-btn.invisible:hover{background:var(--canvas-subtle);color:var(--fg)}
.gh-btn.bloco{width:100%}
.gh-btn-group{display:inline-flex;max-width:100%}
.gh-btn-group>.gh-btn{border-radius:0;min-width:0}
.gh-btn-group>.gh-btn:first-child{border-radius:var(--r) 0 0 var(--r)}
.gh-btn-group>.gh-btn:last-child{border-radius:0 var(--r) var(--r) 0;margin-left:-1px;padding:0 10px}
.gh-btn-group>.gh-btn:only-child{border-radius:var(--r)}
.caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.gh-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- labels (pílulas) ------------------------------------------------- */
.gh-label,.etq{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid var(--border);
  border-radius:999px;font-size:12px;font-weight:500;color:var(--fg-muted);line-height:1;white-space:nowrap;max-width:100%}
.gh-label.new{color:var(--success);border-color:var(--success)}
.gh-label.private{color:var(--fg-muted)}
.gh-label.bronze,.etq.bronze{color:var(--bronze);border-color:var(--bronze)}
.gh-label.silver,.etq.silver{color:var(--silver);border-color:var(--silver)}
.gh-label.gold,.etq.gold{color:var(--gold);border-color:var(--gold)}
.gh-label.app,.etq.app{color:var(--done);border-color:var(--done)}
.gh-label.ok,.etq.ok{color:var(--success);border-color:var(--success)}
.gh-label.warn,.etq.alerta{color:var(--attention);border-color:var(--attention)}
.gh-label.bad,.etq.erro{color:var(--danger);border-color:var(--danger)}
.gh-counter{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:rgba(110,118,129,.4);
  color:var(--fg);font-size:12px;font-weight:600;line-height:18px;text-align:center}
.gh-counter.bad{background:var(--danger-emphasis);color:#fff}

/* ---------- card destacado --------------------------------------------------- */
.gh-feature{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--canvas-subtle);overflow:hidden}
.gh-feature::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 85% 50%,var(--success-subtle),transparent 55%),
             repeating-linear-gradient(0deg,transparent 0 11px,rgba(63,185,80,.06) 11px 12px),
             repeating-linear-gradient(90deg,transparent 0 11px,rgba(63,185,80,.06) 11px 12px);
  mask:linear-gradient(90deg,transparent 30%,#000 70%)}
.gh-feature>*{position:relative;z-index:1}
.gh-feature .txt{min-width:0}
.gh-feature .titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:14px;padding-right:28px}
.gh-feature .desc{color:var(--fg-muted);font-size:12.5px;margin-top:4px}
.gh-feature .x{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;background:none;
  color:var(--fg-muted);cursor:pointer;font-size:18px;border-radius:var(--r);z-index:2}
.gh-feature .x:hover{background:var(--canvas-overlay);color:var(--fg)}
@media (min-width:768px){.gh-feature{flex-direction:row;align-items:center;gap:16px;padding:16px 20px}
  .gh-feature .txt{flex:1}.gh-feature .titulo{padding-right:0}}

/* ---------- box + linhas ------------------------------------------------------ */
.gh-box{border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);overflow:hidden}
.gh-box-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:12px 16px;background:var(--canvas-subtle);border-bottom:1px solid var(--border);font-weight:600;font-size:13.5px}
.gh-box-corpo{padding:16px}
.gh-row{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.gh-row:last-child{border-bottom:0}
.gh-row:hover{background:var(--canvas-subtle)}
.gh-row .nome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;font-size:14px;min-width:0}
.gh-row .nome a{color:var(--accent);overflow-wrap:anywhere}
.gh-row .nome .ns{color:var(--fg-muted);font-weight:400}
.gh-row .desc{color:var(--fg-muted);font-size:13px;margin:2px 0 4px}
.gh-row .gh-spark{width:100%;height:28px}
@media (min-width:768px){
  .gh-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:16px;align-items:center}
  .gh-row .gh-spark{width:120px;height:32px}
}
.gh-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--fg-muted);align-items:center}
.gh-meta .sep{display:none}
@media (min-width:600px){.gh-meta .sep{display:inline}.gh-meta .sep::before{content:"•";color:var(--fg-subtle)}}
.gh-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px;flex:none}
.gh-dot.bronze{background:var(--bronze)}.gh-dot.silver{background:var(--silver)}.gh-dot.gold{background:var(--gold)}.gh-dot.app{background:var(--done)}
.gh-dot.tabela{background:#3572A5}.gh-dot.vista{background:#f1e05a}.gh-dot.materializada{background:#e34c26}.gh-dot.particionada{background:var(--done)}
.gh-spark{display:block}
.gh-spark path{fill:none;stroke:var(--success);stroke-width:1.5}
.gh-spark path.area{fill:var(--success-subtle);stroke:none}
.gh-spark text{fill:var(--fg-subtle)}

/* ---------- grade de "repositórios" (bancos do hub) ------------------------- */
.gh-repos{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.gh-repos{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
.gh-repo{border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);
  padding:14px 16px 14px 20px;display:flex;flex-direction:column;gap:6px;position:relative;min-width:0}
.gh-repo::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--cor,var(--accent))}
.gh-repo .cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;min-width:0}
.gh-repo .cab .ico{color:var(--fg-muted);flex:none}
.gh-repo .cab a{color:var(--accent);overflow-wrap:anywhere}
.gh-repo .desc{font-size:12.5px;color:var(--fg-muted)}
.gh-repo .gh-spark{width:100%;height:28px;margin-top:auto;padding-top:4px}

/* ---------- flash ------------------------------------------------------------ */
.gh-flash,.aviso,.erro-caixa,.ok-caixa{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--canvas-subtle);font-size:13px}
.gh-flash.warn,.aviso{background:var(--attention-subtle);border-color:rgba(187,128,9,.4)}
.gh-flash.error,.erro-caixa{background:var(--danger-subtle);border-color:rgba(248,81,73,.4)}
.gh-flash.success,.ok-caixa{background:var(--success-subtle);border-color:rgba(46,160,67,.4)}
.erro-caixa{font-family:var(--mono);font-size:12px;overflow-wrap:anywhere}
.aviso,.erro-caixa,.ok-caixa{margin:8px 0}

/* ---------- cards de KPI ------------------------------------------------------ */
.gh-cards{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.gh-cards{gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.gh-card,.cartao{border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);padding:14px;min-width:0}
@media (min-width:768px){.gh-card,.cartao{padding:16px}}
.gh-card .k{font-size:11.5px;color:var(--fg-muted);font-weight:600;overflow-wrap:anywhere}
.gh-card .v{font-size:20px;font-weight:600;font-family:var(--mono);margin:2px 0;overflow-wrap:anywhere}
@media (min-width:768px){.gh-card .v{font-size:24px}}
.gh-card .v.ok{color:var(--success)}.gh-card .v.warn{color:var(--attention)}.gh-card .v.bad{color:var(--danger)}
.gh-card .s{font-size:11.5px;color:var(--fg-muted)}
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi span{font-size:11.5px;color:var(--fg-muted);font-weight:600}
.kpi b{font-size:20px;font-family:var(--mono);font-weight:600;overflow-wrap:anywhere}
@media (min-width:768px){.kpi b{font-size:24px}}
.kpi small{color:var(--fg-muted);font-size:11.5px}
.kpi.ok b{color:var(--success)}.kpi.alerta b{color:var(--attention)}.kpi.erro b{color:var(--danger)}

/* ---------- tabelas ----------------------------------------------------------- */
/* Toda tabela vive dentro de .gh-scroll: rola sozinha, com sombra indicando que
   há mais coluna à direita. É o padrão do próprio GitHub para tabela larga. */
.gh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  background:linear-gradient(90deg,var(--canvas) 30%,transparent),
             linear-gradient(90deg,transparent,var(--canvas) 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;
  background-attachment:local,local,scroll,scroll}
.gh-table,table.t{width:100%;border-collapse:collapse;font-size:13px}
.gh-table th,table.t th{text-align:left;font-size:11.5px;color:var(--fg-muted);font-weight:600;padding:8px 12px;
  background:var(--canvas-subtle);border-bottom:1px solid var(--border);white-space:nowrap}
.gh-table td,table.t td{padding:8px 12px;border-bottom:1px solid var(--border-muted);vertical-align:middle}
.gh-table tr:last-child td,table.t tr:last-child td{border-bottom:0}
.gh-table td.num,.gh-table th.num,table.t td.num,table.t th.num{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gh-progress,.barra-h{height:8px;min-width:60px;border-radius:4px;background:var(--canvas-subtle);
  border:1px solid var(--border-muted);overflow:hidden}
.gh-progress i,.barra-h i{display:block;height:100%;background:var(--success)}
.gh-progress i.warn,.barra-h i.alerta{background:var(--attention)}
.gh-progress i.bad,.barra-h i.erro{background:var(--danger)}
.gh-progress i.accent{background:var(--accent)}

/* ---------- lista responsiva (tabela que vira cartão no celular) ------------ */
/* Onde a linha tem muitos números, a grade vira pilha rotulada no celular: o
   rótulo sai do atributo `data-r`, então o dado nunca aparece sem nome. */
.gh-lista{display:flex;flex-direction:column}
.gh-lista .item{display:grid;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border)}
.gh-lista .item:last-child{border-bottom:0}
.gh-lista .item:hover{background:var(--canvas-subtle)}
.gh-lista .cab{display:none;background:var(--canvas-subtle);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--fg-muted);font-weight:600;padding:8px 14px;border-bottom:1px solid var(--border)}
.gh-lista .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:4px 12px}
.gh-lista .campo{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
  border-bottom:1px dashed var(--border-muted);padding-bottom:3px}
.gh-lista .campo::before{content:attr(data-r);color:var(--fg-muted);font-size:11.5px}
.gh-lista .campo b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
@media (min-width:900px){
  .gh-lista .item,.gh-lista .cab{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 96px 96px 110px;
    align-items:center;gap:12px}
  .gh-lista .campos{display:contents}
  .gh-lista .campo{display:block;text-align:right;border:0;padding:0;font-family:var(--mono);font-size:12px;
    font-variant-numeric:tabular-nums;color:var(--fg-muted)}
  .gh-lista .campo::before{content:none}
  .gh-lista .campo b{font-weight:500;color:var(--fg)}
}

/* ---------- código, SQL, timeline, abas -------------------------------------- */
pre.gh-code,pre.sql{margin:8px 0;padding:12px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--canvas-inset);font:12px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:240px;overflow:auto}
.gh-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--border)}
.gh-timeline li{position:relative;padding:0 0 16px 12px;font-size:13px}
.gh-timeline li:last-child{padding-bottom:0}
.gh-timeline li::before{content:"";position:absolute;left:-19px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--fg-subtle);border:2px solid var(--canvas)}
.gh-timeline .when{display:block;font-size:11.5px;color:var(--fg-muted)}
.gh-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.gh-tabs a{padding:10px 12px;color:var(--fg);border-bottom:2px solid transparent;font-size:14px;white-space:nowrap}
.gh-tabs a.on{border-bottom-color:var(--marca);font-weight:600}
.gh-tabs a:hover{text-decoration:none;background:var(--canvas-subtle);border-radius:var(--r) var(--r) 0 0}
.gh-footer{padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border);
  color:var(--fg-muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
canvas.gh-graf,canvas.graf{width:100%;height:170px;display:block}
.legenda{font-size:11px;color:var(--fg-muted);display:flex;gap:12px;margin-top:6px;flex-wrap:wrap}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}

/* ---------- utilidades de grade ---------------------------------------------- */
.grade{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:700px){.g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sub{color:var(--fg-muted);margin:0 0 12px;max-width:80ch;font-size:13px}
.linha{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.linha>*{min-width:0}

/* ---------- AG Grid no tema GH ---------------------------------------------- */
.ag-theme-quartz{--ag-font-family:var(--sans);--ag-font-size:13px;--ag-background-color:var(--canvas);
  --ag-header-background-color:var(--canvas-subtle);--ag-odd-row-background-color:transparent;
  --ag-border-color:var(--border);--ag-foreground-color:var(--fg);--ag-header-foreground-color:var(--fg-muted);
  --ag-row-hover-color:var(--canvas-subtle);--ag-selected-row-background-color:var(--accent-subtle);
  --ag-accent-color:var(--accent);--ag-wrapper-border-radius:var(--r);--ag-input-focus-border-color:var(--accent)}

/* ---------- páginas de entrada (login, troca de senha) ---------------------- */
.gh-entrada{min-height:100dvh;display:grid;place-items:center;padding:24px 16px;background:var(--canvas-inset)}
.gh-entrada.com-fundo{background:var(--canvas-inset) url(/marca/fundo-organograma.jpg) center/cover}
.gh-entrada::before{content:"";position:fixed;inset:0;background:var(--overlay)}
.gh-entrada .cartao{position:relative;width:min(420px,100%);background:var(--canvas);border:1px solid var(--border);
  border-top:3px solid var(--marca);border-radius:var(--r-lg);padding:24px 20px;box-shadow:var(--shadow-md)}
@media (min-width:480px){.gh-entrada .cartao{padding:28px 32px}}
.gh-entrada .logo{display:block;width:min(150px,60%);margin:0 auto 4px}
.gh-entrada .marca-nome{text-align:center;font-weight:700;letter-spacing:.1em;font-size:16px;margin:8px 0 4px}
.gh-entrada .marca-nome span{color:var(--marca)}
.gh-entrada .dica{margin:6px 0 18px;text-align:center;font-size:12.5px;color:var(--fg-muted)}
.gh-entrada label{margin-top:12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-muted)}
.gh-entrada .gh-btn{width:100%;margin-top:18px;min-height:46px;font-weight:700}
.gh-entrada .pista{margin:16px 0 0;font-size:11.5px;color:var(--fg-muted);text-align:center}

/* ---------- impressão --------------------------------------------------------- */
@media print{
  .gh-topbar,.gh-sidebar,.gh-overlay,.gh-footer,.gh-acoes,.gh-page .acoes{display:none!important}
  .gh-shell,.gh-shell.tres{display:block}
  .gh-main,.gh-aside{padding:0;max-width:none}
  .gh-box,.gh-card,.cartao{break-inside:avoid;border-color:#ccc}
  body{background:#fff;color:#000}
}