/* ============================================================
   FIRM UI — App Shell (sidebar · topbar · layout) — compacto
   Sidebar: grafite premium, independente do tema da página,
   com modo "rail" (somente ícones) para máxima área útil.
   ============================================================ */

.app { display: flex; min-height: 100vh; }

/* ---------- SIDEBAR (dark, self-contained) ---------- */
.side {
  --s-bg1:#211d16; --s-bg2:#19160f;
  --s-fg: rgba(244,239,229,.84);
  --s-fg-strong:#f8f4ec;
  --s-muted: rgba(244,239,229,.52);
  --s-hover: rgba(255,255,255,.055);
  --s-line: rgba(255,255,255,.07);
  width: var(--sidebar-w); flex-shrink: 0;
  background: linear-gradient(190deg, var(--s-bg1) 0%, var(--s-bg2) 100%);
  border-right: 1px solid #100e0a;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 40;
  transition: width .2s cubic-bezier(.2,.8,.2,1);
}

/* header */
.side-head { height: var(--topbar-h); flex-shrink: 0; padding: 0 .8rem; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid var(--s-line); position: relative; }
.side-logo { height: 21px; width: auto; display: block; }
.side-monogram { display: none; width: 32px; height: 32px; border-radius: 8px; background: var(--gold); color: #20190f; font-weight: 700; font-size: .92rem; letter-spacing: .02em; place-items: center; cursor: pointer; flex-shrink: 0; }
.side-collapse, .side-theme { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--s-line); background: transparent; color: var(--s-muted); cursor: pointer; transition: all .14s ease; }
.side-theme { margin-left: auto; }
.side-collapse { margin-left: .25rem; }
.side-collapse:hover, .side-theme:hover { background: var(--s-hover); color: var(--s-fg-strong); }
.side-collapse .ico, .side-theme .ico { width: 15px; height: 15px; }

/* nav */
.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .6rem .5rem .8rem; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); }
.nav-group + .nav-group { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--s-line); }
.nav-cap { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--s-muted); padding: 0 .55rem .3rem; white-space: nowrap; }
.nav-link {
  display: flex; align-items: center; gap: .65rem; height: 31px; padding: 0 .55rem;
  border-radius: 7px; color: var(--s-fg); font-size: .8rem; font-weight: 450;
  position: relative; transition: background .14s ease, color .14s ease; white-space: nowrap;
}
.nav-link .ico { width: 16px; height: 16px; flex-shrink: 0; color: var(--s-muted); transition: color .14s; }
.nav-link .nlbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-link:hover { background: var(--s-hover); color: var(--s-fg-strong); }
.nav-link:hover .ico { color: var(--s-fg); }
.nav-link.active { background: linear-gradient(90deg, rgba(197,164,126,.20), rgba(197,164,126,.08)); color: #f0dcbb; font-weight: 500; }
.nav-link.active .ico { color: var(--gold); }
.nav-link.active::before { content: ""; position: absolute; left: -.5rem; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; background: var(--gold); border-radius: 0 3px 3px 0; }
.nav-link .tag { margin-left: auto; font-family: var(--font-mono); font-size: .6rem; background: rgba(255,255,255,.1); color: var(--s-fg); padding: .03rem .35rem; border-radius: 99px; }
.nav-link.active .tag { background: var(--gold); color: #20190f; }

/* sub-níveis (2º e 3º nível) */
.nav-toggle { width: 100%; text-align: left; background: transparent; border: 0; font-family: inherit; cursor: pointer; }
.chev { margin-left: auto; display: inline-flex; align-items: center; color: var(--s-muted); transition: transform .2s ease; }
.chev .ico { width: 13px; height: 13px; }
.nav-link .tag + .chev { margin-left: .4rem; }
.nav-parent.open > .nav-toggle .chev { transform: rotate(90deg); }
.nav-parent.open > .nav-toggle { color: var(--s-fg-strong); }
.nav-children { overflow: hidden; max-height: 0; transition: max-height .28s ease; margin: 1px 0 1px 1.5rem; border-left: 1px solid var(--s-line); padding-left: .25rem; }
.nav-parent.open > .nav-children { max-height: 1200px; }
.nav-children .nav-link { height: 28px; font-size: .77rem; color: var(--s-fg); }
.nav-children .nav-link:hover { color: var(--s-fg-strong); }
.nav-children .nav-link.active { color: #f0dcbb; }
.nav-children .nav-link::before { display: none; }

/* footer */
.side-foot { padding: .5rem; border-top: 1px solid var(--s-line); }
.side-user { display: flex; align-items: center; gap: .55rem; padding: .4rem .45rem; border-radius: 7px; cursor: pointer; transition: background .14s; }
.side-user:hover { background: var(--s-hover); }
.side-user .meta { flex: 1; min-width: 0; }
.side-user .meta b { display: block; font-size: .78rem; font-weight: 600; color: var(--s-fg-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .meta span { font-size: .66rem; color: var(--s-muted); }
.side-user > .ico { width: 16px; height: 16px; color: var(--s-muted); flex-shrink: 0; }
.side-user:hover > .ico { color: #e0a39a; }
.side .avatar-ink { background: var(--gold); color: #20190f; border-color: transparent; }

/* ---------- RAIL (somente ícones) ---------- */
.app[data-rail="on"] .side { width: 58px; }
.app[data-rail="on"] .side-logo,
.app[data-rail="on"] .side-collapse,
.app[data-rail="on"] .side-theme,
.app[data-rail="on"] .nav-cap,
.app[data-rail="on"] .nav-link .nlbl,
.app[data-rail="on"] .nav-link .tag,
.app[data-rail="on"] .chev,
.app[data-rail="on"] .nav-children,
.app[data-rail="on"] .side-user .meta,
.app[data-rail="on"] .side-user > .ico { display: none; }
.app[data-rail="on"] .side-monogram { display: grid; margin: 0 auto; }
.app[data-rail="on"] .side-head { justify-content: center; padding: 0; }
.app[data-rail="on"] .nav-link { justify-content: center; padding: 0; gap: 0; }
.app[data-rail="on"] .nav-link.active::before { left: -.5rem; }
.app[data-rail="on"] .side-user { justify-content: center; padding: .4rem 0; }
.app[data-rail="on"] .nav-group + .nav-group { margin-top: .4rem; padding-top: .4rem; }

/* ---------- MAIN ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1.1rem; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.topbar-left { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.topbar h1 { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.topbar .crumb { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.topbar-right { display: flex; align-items: center; gap: .5rem; }

.menu-btn { display: none; }
.content { padding: 1.1rem 1.25rem; width: 100%; }

/* ============================================================
   PÁGINA FIXA — tabela com rolagem interna e cabeçalho travado.
   Ative com <div class="app fixed-page">. O shell ocupa exatamente
   a viewport; o card que contém a .table-wrapper encolhe e só ele
   rola (vertical + horizontal), com o thead congelado no topo.
   Listas curtas ficam compactas (o card não estica). Usa :has(),
   suportado nos navegadores atuais.
   ============================================================ */
.app.fixed-page { height: 100vh; overflow: hidden; }
.app.fixed-page .main { height: 100%; min-height: 0; }
.app.fixed-page .content { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* irmãos acima da tabela (stats, banner, page-head) mantêm o tamanho */
.app.fixed-page .content > * { flex-shrink: 0; }
.app.fixed-page .content-card:has(> .table-wrapper) {
  flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0;
}
.app.fixed-page .content-card:has(> .table-wrapper) > .content-card-header,
.app.fixed-page .content-card:has(> .table-wrapper) > .pagination { flex-shrink: 0; }
.app.fixed-page .content-card:has(> .table-wrapper) > .table-wrapper { flex: 1; min-height: 0; overflow: auto; }
/* cabeçalho travado acima das linhas ao rolar */
.app.fixed-page .table thead th,
.app.fixed-page .fip-table thead th,
.app.fixed-page .leads-table thead th { position: sticky; top: 0; z-index: 2; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.page-head .h1 { margin-bottom: .15rem; }

/* ---------- RESPONSIVE ---------- */
.scrim-side { display: none; }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: var(--sh-xl); width: var(--sidebar-w); }
  .app[data-rail="on"] .side { width: var(--sidebar-w); }
  .app[data-rail="on"] .side-logo { display: block; }
  .app[data-rail="on"] .side-monogram, .app[data-rail="on"] .side-collapse { display: none; }
  .app[data-rail="on"] .nav-cap, .app[data-rail="on"] .nav-link .nlbl, .app[data-rail="on"] .nav-link .tag, .app[data-rail="on"] .side-user .meta, .app[data-rail="on"] .side-user > .ico { display: block; }
  .app[data-rail="on"] .chev { display: inline-flex; }
  .app[data-rail="on"] .nav-children { display: block; }
  .app[data-rail="on"] .nav-link { justify-content: flex-start; padding: 0 .55rem; gap: .65rem; }
  .app[data-side="open"] .side { transform: none; }
  .app[data-side="open"] .scrim-side { display: block; position: fixed; inset: 0; background: rgba(20,17,12,.5); z-index: 39; }
  .menu-btn { display: inline-grid; }
  .side-collapse { display: none; }
}
@media (max-width: 720px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .content { padding: .9rem; }
  .topbar { padding: 0 .9rem; }
}

/* ---------- MENU ----------
   O menu mora no /app.html e as telas abrem num quadro ao lado (FirmShell.host no shell.js), então trocar de tela
   não redesenha o menu. O espaço da barra de rolagem fica sempre reservado: com um grupo aberto o menu rola, e a
   barra aparecendo estreitava os itens. */
.side .side-nav { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }

/* "Carregando…" (showLoading do utils.js): nas telas com menu, cobre só a área principal — o menu não some — e só
   aparece se a espera passar de ~0,4 s, para a carga rápida não virar um piscar de tela. */
.loader-overlay.loader-area {
  left: var(--sidebar-w); backdrop-filter: none; background: color-mix(in srgb, var(--bg) 60%, transparent);
  animation: fui-loader-in .18s ease .4s both;
}
.app[data-rail="on"] ~ .loader-overlay.loader-area { left: 58px; }
.app[data-embed="on"] ~ .loader-overlay.loader-area { left: 0; }   /* tela dentro do app.html: o menu está fora */
@media (max-width: 1024px) { .loader-overlay.loader-area { left: 0; } }
@keyframes fui-loader-in { from { opacity: 0; } to { opacity: 1; } }