/* Tracktonica Library — camada de interface: admin (acervo e pessoas).
 * Carregada depois de assets/ui.css. Usa só os tokens de ui.css/theme.php.
 *
 * ==========================================================================
 * COMPONENTES REUTILIZÁVEIS DE PÁGINA ADMIN (prefixo adm-)
 * Direção: estilo "settings" Linear/Vercel — conteúdo direto sobre o fundo,
 * seções separadas por espaço + uma linha sutil, sem caixa dentro de caixa.
 * Linguagem neutra (ADENDO 3): texto secundário = branco com opacidade
 * (--adm-text-2 / --adm-text-3), fundos neutros (--adm-fill), roxo só em botão
 * primário, aba/item ativo e foco. Pills são neutras; a cor do status fica só na
 * bolinha (erro também pinta o texto). Sem fundos roxos translúcidos, sem glass
 * (glass só em superfícies flutuantes, fora do escopo destas páginas).
 * ==========================================================================
 *
 * Página
 *   <div class="adm-page">                     grid vertical, largura de leitura (max 1180px)
 *   <div class="adm-page is-wide">             sem limite de largura (telas com tabelas largas)
 *
 * Cabeçalho de página
 *   <header class="adm-head">
 *     <a class="adm-back js-spa-link" href="/admin/settings.php"><?= ui_icon('chevron-left') ?>Administração</a>
 *     <div class="adm-head__row">
 *       <div class="adm-head__text"><h1>Título</h1><p>Descrição curta.</p></div>
 *       <div class="adm-head__actions"><a class="ghost inline-block">Secundária</a><button>Principal</button></div>
 *     </div>
 *   </header>
 *
 * Seção (separada por espaço e linha fina no topo; a primeira não tem linha)
 *   <section class="adm-section" id="ancora">
 *     <div class="adm-section__head">
 *       <div><h2>Título da seção</h2><p class="adm-section__desc">Para que serve.</p></div>
 *       <div class="adm-section__actions">…botões…</div>
 *     </div>
 *     …conteúdo…
 *   </section>
 *   .adm-section.is-flat  → sem linha no topo.
 *
 * Lista de configurações (rótulo + descrição à esquerda, controle/valor à direita)
 *   <div class="adm-list">
 *     <div class="adm-row">
 *       <div class="adm-row__label"><strong>Nome</strong><span>Descrição curta</span></div>
 *       <div class="adm-row__control">…input, select, pill, botão…</div>
 *     </div>
 *   </div>
 *   .adm-row.is-stack → controle embaixo do rótulo (para campos largos).
 *
 * Formulário em grade
 *   <div class="adm-form-grid">                 auto-fit, colunas de ~240px
 *     <label class="adm-field"><span class="adm-label">Nome</span><input …><small class="adm-hint">Ajuda</small></label>
 *     <label class="adm-field is-wide">…</label>  ocupa a linha inteira
 *   </div>
 *   <label class="adm-check"><input type="checkbox"><span><strong>Rótulo</strong><small>Explicação</small></span></label>
 *   <div class="adm-form-actions"><button>Salvar</button><span class="adm-hint">…</span></div>
 *   <div class="adm-inline">select + botão na mesma linha (botões não esticam)</div>
 *   <div class="adm-path">input + botão "Escolher pasta"</div>
 *
 * Tabela de dados
 *   <div class="adm-table-wrap"><table class="adm-table">…</table></div>
 *   td.num / th.num → números alinhados à direita (tabular).  td.adm-muted, code.adm-code (quebra caminhos)
 *   <tr class="adm-empty-row"><td colspan="N">Mensagem que diz o que fazer.</td></tr>
 *
 * Status pills
 *   <span class="adm-pill is-ok">OK</span>   is-ok | is-warn | is-error | is-info | is-accent
 *   (bolinha colorida + texto; cores por --adm-ok / --adm-warn / --danger)
 *
 * Números (KPIs) em linha, sem caixas
 *   <div class="adm-stats"><div class="adm-stat"><strong>123</strong><span>Faixas ativas</span></div>…</div>
 *   .adm-stat.is-warn / .is-error → número colorido.
 *
 * Grade de atalhos (Painel Geral)
 *   <div class="adm-tiles"><a class="adm-tile js-spa-link" href="…">
 *     <span class="adm-tile__icon"><?= ui_icon('users') ?></span>
 *     <span class="adm-tile__text">
 *       <span class="adm-tile__title"><strong>Nome</strong><span class="adm-pill is-warn">Atenção</span></span>  (pill opcional)
 *       <span>Uma linha.</span></span>
 *   </a></div>
 *
 * Outros
 *   <details class="adm-help"><summary><?= ui_icon('info') ?>Como funciona</summary><div>…</div></details>
 *   <ol class="adm-steps"><li><strong>Passo</strong><span>Explicação</span></li></ol>
 *   <div class="adm-note">Aviso discreto em linha.</div>  .adm-note.is-warn
 *   <details class="adm-danger"><summary>Remoção definitiva</summary>…</details>  zona destrutiva
 *   <details class="adm-more"><summary>Mais ações</summary>…</details>          ações secundárias
 *   <nav class="adm-tabs"><button class="adm-tab is-active">Aba</button>…</nav>   abas (segmentos)
 *   <dl class="adm-kv"><dt>Chave</dt><dd>Valor</dd></dl>                         pares chave/valor
 *   <div class="adm-progress"><div class="adm-progress__bar" style="width:40%"></div></div>
 */

:root {
  --adm-ok: color-mix(in srgb, #3FBF7F 78%, var(--text));
  --adm-warn: color-mix(in srgb, #E2A93B 80%, var(--text));
  --adm-err: var(--danger);
  --adm-text-2: color-mix(in srgb, var(--text) 66%, transparent);  /* texto secundário (branco com opacidade) */
  --adm-text-3: color-mix(in srgb, var(--text) 48%, transparent);  /* rótulos de tabela, dicas */
  --adm-fill: color-mix(in srgb, var(--text) 7%, transparent);     /* fundo neutro de pills/ícones */
  --adm-gap: 40px;
  --adm-row-pad: 16px;
}

/* ---------- Página ---------- */

.adm-page {
  display: grid;
  gap: var(--adm-gap);
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  padding: 8px 0 24px;
}

.adm-page.is-wide { max-width: none; }

.adm-page > * { min-width: 0; }

.adm-page code,
.adm-code {
  font-size: 0.84em;
  background: var(--panel-2);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* .card legado dentro de páginas admin vira seção (sem caixa). */
.adm-page .card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ---------- Cabeçalho ---------- */

.adm-head { display: grid; gap: 14px; }

.adm-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  color: var(--adm-text-2);
  font-size: 0.88rem;
  text-decoration: none;
}

.adm-back .ui-icon { width: 16px; height: 16px; }
.adm-back:hover { color: var(--text); }

.adm-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}

.adm-head__text { display: grid; gap: 8px; min-width: 0; max-width: 760px; }

.adm-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.adm-head p { margin: 0; color: var(--adm-text-2); font-size: 1rem; line-height: 1.55; }

.adm-head__actions,
.adm-section__actions,
.adm-form-actions,
.adm-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.adm-head__actions > *,
.adm-section__actions > *,
.adm-form-actions > button,
.adm-form-actions > a,
.adm-inline > button,
.adm-inline > a,
.adm-inline > form { width: auto; }

.adm-row__control .adm-inline input[type="text"] { min-width: 240px; flex: 1 1 240px; }
.adm-inline > form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.adm-inline select,
.adm-inline input:not([type="checkbox"]):not([type="radio"]) { width: auto; min-width: 140px; }

/* Botões em páginas admin: altura 38px, sem esticar dentro de linhas */
.adm-page button,
.adm-page a.ghost,
.adm-page .button {
  min-height: 38px;
  border-radius: var(--r-ctl);
}

.adm-page a.ghost,
.adm-page a.button,
.adm-page .button.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-strong);
  width: auto;
}

.adm-page a.ghost:hover,
.adm-page a.button:hover { background: var(--adm-fill); border-color: color-mix(in srgb, var(--text) 30%, transparent); }

.adm-page button .ui-icon,
.adm-page a .ui-icon { width: 17px; height: 17px; }

.adm-page button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- Seções ---------- */

.adm-section {
  display: grid;
  gap: 18px;
  padding-top: var(--adm-gap);
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  min-width: 0;
}

.adm-head + .adm-section,
.adm-section.is-flat { padding-top: 0; border-top: 0; }

.adm-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.adm-section__head > div:first-child { display: grid; gap: 4px; min-width: 0; max-width: 760px; }

.adm-section h2,
.adm-page .card > h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.adm-section h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
}

.adm-section__desc,
.adm-section > p { margin: 0; color: var(--adm-text-2); line-height: 1.55; }

.adm-sub { display: grid; gap: 12px; }
.adm-sub + .adm-sub { margin-top: 12px; }

/* ---------- Lista de configurações ---------- */

.adm-list { display: grid; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.adm-list > .adm-row:last-child { border-bottom: 0; padding-bottom: 0; }

.adm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 10px 32px;
  padding: var(--adm-row-pad) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.adm-row.is-stack { grid-template-columns: 1fr; }

.adm-row__label { display: grid; gap: 3px; min-width: 0; }
.adm-row__label strong { font-weight: 600; font-size: 0.95rem; }
.adm-row__label span { color: var(--adm-text-2); font-size: 0.88rem; line-height: 1.5; }

.adm-row__control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.adm-row__control > button,
.adm-row__control > a { width: auto; }

.adm-row.is-stack .adm-row__control { justify-content: flex-start; }

/* ---------- Formulários ---------- */

.adm-form { display: grid; gap: 20px; margin: 0; }

.adm-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px 18px;
  align-items: start;
}

.adm-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.adm-field.is-wide { grid-column: 1 / -1; }

.adm-label { font-size: 0.88rem; font-weight: 500; color: var(--text); }

.adm-hint,
.adm-field small { color: var(--adm-text-2); font-size: 0.82rem; line-height: 1.45; }

.adm-field input,
.adm-field select,
.adm-field textarea { width: 100%; }

.adm-checks { display: flex; flex-wrap: wrap; gap: 12px 28px; }

.adm-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 0.92rem;
}

.adm-check input { margin-top: 2px; flex: none; }
.adm-check > span { display: grid; gap: 2px; }
.adm-check small { color: var(--adm-text-2); font-size: 0.82rem; }

.adm-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.adm-path > button { width: auto; white-space: nowrap; }

.adm-page input[type="file"] {
  padding: 10px;
  border-style: dashed;
  background: transparent;
}

/* ---------- Tabelas ---------- */

.adm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.adm-table thead th,
.adm-page table thead th {
  background: transparent;
  color: var(--adm-text-3);
  font-weight: 500;
  font-size: 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  white-space: nowrap;
}

.adm-table td,
.adm-page table td {
  padding: 11px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  vertical-align: middle;
}

.adm-table tbody tr:hover > td { background: color-mix(in srgb, var(--panel) 70%, transparent); }

.adm-table th:first-child,
.adm-table td:first-child { padding-left: 4px; }

.adm-table .num { text-align: right; white-space: nowrap; }
.adm-table .adm-nowrap { white-space: nowrap; }
.adm-table .adm-muted,
.adm-muted { color: var(--adm-text-2); }

.adm-table td strong { font-weight: 600; }
.adm-table td .adm-sub-line { display: block; color: var(--adm-text-2); font-size: 0.84rem; margin-top: 2px; }

.adm-table .adm-empty-row td,
.adm-empty {
  color: var(--adm-text-2);
  padding: 22px 4px;
  text-align: left;
}

.adm-empty { padding: 4px 0; margin: 0; }

.adm-table td form { margin: 0; }
.adm-table td select,
.adm-table td input:not([type="checkbox"]) { width: auto; min-width: 110px; min-height: 34px; padding: 6px 10px; }
.adm-table td button { width: auto; min-height: 34px; padding: 6px 12px; font-size: 0.86rem; }

/* ---------- Status pills ---------- */

.adm-pill {
  --pill: var(--adm-text-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: var(--adm-fill);
  color: color-mix(in srgb, var(--text) 86%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.adm-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pill);
  flex: none;
}

.adm-pill.is-ok { --pill: var(--adm-ok); }
.adm-pill.is-warn { --pill: var(--adm-warn); }
.adm-pill.is-error { --pill: var(--adm-err); }
.adm-pill.is-accent { --pill: var(--accent); }
.adm-pill.is-error { color: var(--adm-err); }
.adm-pill.is-info { --pill: var(--adm-text-2); }
.adm-pill.is-plain::before { display: none; }

/* ---------- KPIs ---------- */

.adm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 22px 28px;
}

.adm-stat { display: grid; gap: 2px; min-width: 0; }

.adm-stat strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.adm-stat span { color: var(--adm-text-2); font-size: 0.86rem; line-height: 1.4; }
.adm-stat.is-warn strong { color: var(--adm-warn); }
.adm-stat.is-error strong { color: var(--adm-err); }
.adm-stat.is-small strong { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }

/* ---------- Atalhos (Painel Geral) ---------- */

.adm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 4px 16px;
}

.adm-tile {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 12px;
  margin: 0 -12px;
  border-radius: var(--r-card);
  color: var(--text);
  text-decoration: none;
  transition: background-color .15s ease;
}

.adm-tile:hover { background: var(--panel); color: var(--text); }

.adm-tile__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--adm-fill);
  color: var(--text);
}

.adm-tile__icon .ui-icon { width: 20px; height: 20px; }

.adm-tile__text { display: grid; gap: 2px; min-width: 0; }
.adm-tile__text strong { font-weight: 600; font-size: 0.95rem; }
.adm-tile__text > span:last-child { color: var(--adm-text-2); font-size: 0.86rem; line-height: 1.45; }
.adm-tile__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-tile__title .adm-pill { min-height: 20px; font-size: 0.72rem; padding: 1px 8px 1px 7px; }

.adm-tile.is-muted { opacity: .7; }

/* ---------- Ajuda, passos, notas ---------- */

.adm-help { margin: 0; }

.adm-help > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  color: var(--adm-text-2);
  font-size: 0.9rem;
  width: fit-content;
}

.adm-help > summary::-webkit-details-marker { display: none; }
.adm-help > summary .ui-icon { width: 16px; height: 16px; }
.adm-help > summary:hover { color: var(--text); }

.adm-help > div,
.adm-help > ul {
  margin: 10px 0 0;
  padding: 0 0 0 22px;
  color: var(--adm-text-2);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 820px;
}

.adm-help > div { padding-left: 22px; display: grid; gap: 6px; }
.adm-help li { margin: 0 0 4px; }
.adm-help strong { color: var(--text); font-weight: 600; }

.adm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: adm-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px 28px;
}

.adm-steps li {
  counter-increment: adm-step;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 2px 12px;
  align-content: start;
}

.adm-steps li::before {
  content: counter(adm-step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.adm-steps strong { font-weight: 600; font-size: 0.93rem; }
.adm-steps span { color: var(--adm-text-2); font-size: 0.86rem; line-height: 1.5; }

.adm-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--adm-text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.adm-note .ui-icon { width: 17px; height: 17px; margin-top: 1px; }
.adm-note.is-warn .ui-icon { color: var(--adm-warn); }
.adm-note.is-error .ui-icon { color: var(--adm-err); }

/* Chave/valor */
.adm-kv {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 8px 20px;
  margin: 0;
  font-size: 0.9rem;
}

.adm-kv dt { color: var(--adm-text-2); }
.adm-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Mais ações / zona destrutiva ---------- */

.adm-more,
.adm-danger { margin: 0; }

.adm-more > summary,
.adm-danger > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--adm-text-2);
  width: fit-content;
}

.adm-more > summary::-webkit-details-marker,
.adm-danger > summary::-webkit-details-marker { display: none; }

.adm-more > summary .ui-icon,
.adm-danger > summary .ui-icon { width: 15px; height: 15px; transition: transform .15s ease; }
.adm-more[open] > summary .ui-icon-chevron-down,
.adm-danger[open] > summary .ui-icon-chevron-down { transform: rotate(180deg); }

.adm-more > summary:hover { color: var(--text); }
.adm-danger > summary:hover { color: var(--danger); }

.adm-more > div,
.adm-danger > form,
.adm-danger > div { margin-top: 10px; display: grid; gap: 8px; }

.adm-danger > form,
.adm-danger > div {
  padding: 14px 0 0 14px;
  border-left: 2px solid color-mix(in srgb, var(--danger) 55%, transparent);
}

.adm-danger input:not([type="checkbox"]) { width: 100%; max-width: 280px; }

/* ---------- Abas (segmentos) ---------- */

.adm-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
}

.adm-tabs::-webkit-scrollbar { display: none; }

.adm-tab,
.adm-tabs button {
  width: auto;
  flex: none;
  min-height: 40px;
  padding: 8px 12px;
  margin-bottom: -1px;
  background: transparent;
  color: var(--adm-text-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-weight: 500;
  font-size: 0.92rem;
  white-space: nowrap;
}

.adm-tab:hover,
.adm-tabs button:hover { background: transparent; color: var(--text); }

.adm-tab.is-active,
.adm-tabs button.is-active {
  color: var(--text);
  border-bottom-color: var(--accent-ink, var(--accent));
}

.adm-tab .adm-count {
  margin-left: 6px;
  color: var(--adm-text-2);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Progresso ---------- */

/* ==========================================================================
 * Telas específicas
 * ========================================================================== */

/* Usuários: papéis */
.adm-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 18px 28px;
  margin: 0;
}

.adm-roles > div { display: grid; gap: 4px; align-content: start; }
.adm-roles dt { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.93rem; }
.adm-roles dd { margin: 0; color: var(--adm-text-2); font-size: 0.86rem; line-height: 1.5; }

.adm-user-cell { display: grid; gap: 1px; min-width: 160px; }
.adm-user-cell span { color: var(--adm-text-2); font-size: 0.84rem; }

.adm-copy-box { display: grid; gap: 10px; max-width: 560px; }
.adm-copy-box textarea { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88rem; resize: none; }

/* Resultado do teste LDAP (classes de app.css) */
.adm-page .ldap-test-result {
  margin-top: 4px;
  padding: 14px 0 0 16px;
  border: 0;
  border-left: 2px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
}

.adm-page .ldap-test-result.is-success { border-left-color: var(--adm-ok); }
.adm-page .ldap-test-result.is-error { border-left-color: var(--adm-err); }
.adm-page .ldap-test-steps li.is-ok strong { color: var(--adm-ok); }
.adm-page .ldap-test-steps li.is-fail strong { color: var(--adm-err); }

/* Pastas do acervo: envio de mídias */
.catalog-upload-panel {
  display: grid;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.catalog-upload-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.catalog-upload-progress {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-2);
}

.catalog-upload-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width .2s ease;
}

.catalog-upload-panel.is-done .catalog-upload-progress-bar { background: var(--adm-ok); }
.catalog-upload-panel.is-error .catalog-upload-progress-bar { background: var(--adm-err); }
.catalog-upload-panel.is-error #catalogUploadStatus { color: var(--adm-err); }
.catalog-upload-panel.is-done #catalogUploadStatus { color: var(--adm-ok); }

.catalog-upload-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px 28px;
}

.catalog-upload-meta > div { display: grid; gap: 2px; min-width: 0; }
.catalog-upload-meta .muted { font-size: 0.82rem; }
.catalog-upload-meta strong { font-variant-numeric: tabular-nums; }
.catalog-upload-meta code { overflow-wrap: anywhere; }

.catalog-upload-result { line-height: 1.5; white-space: pre-wrap; font-size: 0.9rem; }

.catalog-upload-errors {
  margin: 0;
  padding: 10px 0 10px 32px;
  border-left: 2px solid var(--danger);
  color: var(--danger);
  display: grid;
  gap: 4px;
  font-size: 0.88rem;
}

.catalog-upload-errors[hidden],
.catalog-upload-actions[hidden] { display: none; }

.catalog-upload-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.catalog-upload-actions button { width: auto; }

/* Pastas do acervo: ações por pasta */
.cs-actions { display: grid; gap: 10px; min-width: 260px; }
.cs-scan-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.cs-scan-form select { flex: 1 1 170px; }
.cs-secondary-actions { display: grid; gap: 6px; justify-items: start; }
.cs-secondary-actions form { margin: 0; }
.cs-danger-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.88rem; }
.cs-danger-check input { margin-top: 2px; }

/* Seletor de pastas (modal) */
.dir-picker-modal {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.dir-picker-modal.hidden { display: none; }

.dir-picker-card {
  width: min(760px, 100%);
  max-height: 82vh;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
}

.dir-picker-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dir-picker-header strong { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.dir-picker-header button,
.dir-picker-actions button { width: auto; }
.dir-picker-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#dirPickerCurrent { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.84rem; overflow-wrap: anywhere; }

.dir-picker-list {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.dir-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--r-ctl);
  cursor: pointer;
}

.dir-entry:hover { background: var(--panel-2); }
.dir-entry small { overflow-wrap: anywhere; text-align: right; }

/* Marca: cores */
.adm-color {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.adm-color input[type="color"] {
  width: 40px;
  height: 38px;
  min-height: 38px;
  padding: 3px;
  border-radius: var(--r-ctl);
  cursor: pointer;
}

.adm-color input[type="text"] { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.adm-segment {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--panel-2);
}

.adm-segment label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-ctl);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--adm-text-2);
  margin: 0;
}

.adm-segment input { position: absolute; opacity: 0; pointer-events: none; }
.adm-segment label:has(input:checked) { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); }
.adm-segment label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.adm-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px 32px;
}

.adm-preview .adm-inline button { width: auto; }
.adm-preview > * { align-content: start; }
.adm-preview .adm-sub + .adm-sub { margin-top: 0; }

/* Controle de álbuns */
.adm-album {
  display: grid;
  gap: 14px;
  padding: 24px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.adm-album:first-of-type { padding-top: 4px; }

.adm-album__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
}

.adm-album__head h3 { margin: 0; font-size: 1.1rem; }
.adm-album__meta { display: flex; gap: 6px 14px; flex-wrap: wrap; color: var(--adm-text-2); font-size: 0.86rem; font-variant-numeric: tabular-nums; }

.adm-track-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 8px 20px;
}

.adm-tab-pane { display: none; }
.adm-tab-pane.is-active { display: grid; gap: var(--adm-gap); }

/* ---------- Responsivo ---------- */

@media (max-width: 860px) {
  :root { --adm-gap: 32px; }
  .adm-row { grid-template-columns: 1fr; }
  .adm-row__control { justify-content: flex-start; }
  .adm-head__actions { width: 100%; }
}

@media (max-width: 560px) {
  .adm-path { grid-template-columns: 1fr; }
  .adm-path > button { width: 100%; }
  .adm-head__actions > *,
  .adm-form-actions > button { flex: 1 1 auto; }
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .adm-stat strong { font-size: 1.45rem; }
  .adm-tile { margin: 0; padding: 10px 0; }
  .adm-tile:hover { background: transparent; }
  .cs-actions { min-width: 220px; }
}

/* ---------- Adições: botão-link principal, abas como links, segredo ---------- */

/* <a class="adm-primary">  link com aparência de botão principal (roxo) */
.adm-page a.adm-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--r-ctl);
  background: var(--button-primary, var(--accent));
  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  width: auto;
}

.adm-page a.adm-primary:hover { background: var(--button-primary-hover, var(--accent-lo)); color: var(--on-accent); }

a.adm-tab { text-decoration: none; display: inline-flex; align-items: center; }

/* Bloco com senha/segredo mostrado uma única vez */
.adm-secret .adm-copy-box textarea,
.adm-secret__value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.adm-secret .adm-copy-box textarea { background: var(--panel); border-color: var(--line-strong); }

.adm-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.adm-section[id],
.adm-sub[id] { scroll-margin-top: 80px; }

/* .adm-form-grid.is-roomy → colunas mais largas (~380px), para campos de caminho/URL */
.adm-form-grid.is-roomy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.adm-help > div .adm-table-wrap,
.adm-help .adm-kv dd { color: var(--text); }
.adm-help > div:has(.adm-table-wrap) { padding-left: 0; margin-top: 14px; }

.adm-row__control > input:not([type="checkbox"]):not([type="radio"]),
.adm-row__control > select { flex: 1 1 200px; min-width: 0; }
.adm-row__control.adm-checks { gap: 10px 20px; }
.adm-row__control textarea { width: 100%; }
.ctr-terms { gap: 6px; }