/* app.css — ajustes desta tela sobre o tema copiado (tokens/base/auth). */

[hidden] { display: none !important; }

.nav-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: var(--console);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
}

#lista-sites { display: flex; flex-direction: column; gap: 2px; }

.nav-item .site-url {
  display: block;
  font: 400 10px/1.3 var(--font-mono);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item .nav-label { min-width: 0; }

.nav-vazio {
  padding: 6px 10px 10px;
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
}

.vazio-card { padding: 28px 18px; color: var(--ink-3); text-align: center; }

.form-card { max-width: 560px; }

.add-form { display: flex; flex-direction: column; padding: 18px 16px; }
.fg-area { height: auto; padding: 10px 12px; resize: vertical; font-size: 12px; margin-bottom: 14px; }


.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.banco { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.arvore { padding: 8px 0 10px; max-height: calc(100vh - 200px); overflow-y: auto; }
.arvore-col { padding: 10px 16px 4px; font: 500 var(--fs-meta)/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.arvore-item {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  padding: 6px 16px; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 12px/1.4 var(--font-mono); color: var(--ink-2);
}
.arvore-item:hover { background: var(--iris-wash); color: var(--ink); }
.arvore-item.active { background: var(--iris-wash); color: var(--iris-hi); }
.arvore-item .tipo { color: var(--ink-off); flex: none; }
.arvore-item.pisca { animation: pisca 900ms var(--ease); }
@keyframes pisca { from { background: var(--pass-wash); } }
.arvore-vazio { padding: 16px; color: var(--ink-3); font-size: var(--fs-body-sm); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duo .fg-input { width: 100%; }
.acoes { display: flex; align-items: center; gap: 12px; }
.acoes .fg-btn { flex: 1; }
#site-erro { margin-bottom: 12px; }

.view-modulo { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#modulo-conteudo { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#modulo-conteudo .ml-app { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#modulo-conteudo .ml-tabs { margin: 14px 22px 0; align-self: flex-start; flex: none; }
#modulo-conteudo .content { padding: 16px 22px 32px; }

/* ---------- Tile (KPI) sem ícone: título em cima, número, subtítulo ----------
   O tile da base reserva a 1ª coluna para o ícone; sem ele, o rótulo ficava ao lado do número. */
.tile:not(:has(.tile-ico)) {
  grid-template-columns: 1fr;
  gap: 4px 0;
  align-content: start;
}
.tile:not(:has(.tile-ico)) .label { align-self: start; }
.tile:not(:has(.tile-ico)) .value { margin-top: 2px; }
.tile:not(:has(.tile-ico)) .sub { grid-column: 1; margin-top: 2px; }

/* ---------- Tabela padrão com altura fixa (10 linhas) e rolagem interna ----------
   Reaproveitável por qualquer módulo: envolve a <table class="domains"> junto com .table-wrap.
   37px = altura do <th> (10px padding x2 + 10px fonte + 1px borda). */
.table-scroll {
  --rows: 10;
  max-height: calc(var(--row-h) * var(--rows) + 37px);
  overflow: auto;
  scrollbar-width: thin;
}
.table-scroll.is-fixed { height: calc(var(--row-h) * var(--rows) + 37px); }
.table-scroll table.domains thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--console-2);
}
/* a 1ª coluna sticky (mobile) fica abaixo do cabeçalho */
.table-scroll table.domains td:first-child { z-index: 1; }
.table-scroll table.domains th:first-child { z-index: 4; }

/* Segmentos que podem estourar a largura (abas, períodos): rolam na horizontal
   em vez de cortar o último item. */
.seg-scroll {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.seg-scroll::-webkit-scrollbar { display: none; }
.seg-scroll .seg-btn { flex: none; }

@media (max-width: 900px) { .banco { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  #modulo-conteudo .ml-tabs { display: flex; align-self: stretch; margin: 12px 16px 0; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  #modulo-conteudo .ml-tabs::-webkit-scrollbar { display: none; }
  #modulo-conteudo .ml-tabs .seg-btn { flex: none; }
  #modulo-conteudo .content { padding: 14px 16px 28px; }
}

/* Menu "⋯" do topo (abriga o "Remover site", que saiu da barra de ações) */
.tb-menu { position: relative; }
.tb-menu .row-menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  min-width: 180px;
}