/* Acesso e Escritório (Fase 4): telas sem sessão (entrar, código, convite, redefinição, escolha de
   escritório, erro) e gestão de usuários / PJe. Só tokens canônicos. */

/* ---- Telas sem sessão: cartão centralizado de 400px com o wordmark em cima ---- */
main.auth {
  max-width: calc(400px + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-12) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
/* O aviso do servidor vem antes do conteúdo no base.html; o wordmark sobe para o topo. */
main.auth > .auth-brand { order: -1; }
main.auth > .alert { margin: 0; }
.auth-brand {
  margin: 0 0 var(--space-2); text-align: center; color: var(--color-text-default);
  font-family: var(--font-family-sans); font-weight: var(--font-weight-semibold); font-size: var(--font-size-2xl);
  letter-spacing: 0.01em; line-height: var(--font-lineHeight-tight);
}
.auth-card { display: grid; gap: var(--space-4); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.auth-card h1 { margin: 0; font-size: var(--font-size-xl); line-height: var(--font-lineHeight-tight); }
.auth-card > p, .auth-card form > p { margin: 0; }
.auth-card .lead { color: var(--color-text-muted); }
.auth-card form { display: grid; gap: var(--space-4); }
.auth-card label { display: grid; gap: var(--space-1); font-weight: var(--font-weight-medium); }
.auth-card input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.auth-card button.wide, .auth-card .btn.wide { width: 100%; }
.auth-card .help { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }
.auth-card .alert { margin: 0; }
.auth-foot { margin: 0; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Passos do autenticador */
.auth-steps { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); color: var(--color-text-muted); }
/* O QR precisa de fundo claro para ser lido em qualquer tema (usa a superfície do tema claro). */
.auth-card .qr {
  justify-self: center; width: min(220px, 100%); padding: var(--space-3);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
}
.auth-card .qr svg { display: block; width: 100%; height: auto; }
.auth-card .link-box {
  display: block; margin-top: var(--space-1); padding: var(--space-2) var(--space-3);
  background: var(--color-bg-sunken); color: var(--color-text-default); border-radius: var(--radius-md);
  font-size: var(--font-size-sm); letter-spacing: 0.04em; overflow-wrap: anywhere;
}

/* Códigos de recuperação em duas colunas, monoespaçados */
.auth-card .codes {
  list-style: none; margin: 0; padding: var(--space-3) var(--space-4); columns: 2; column-gap: var(--space-6);
  background: var(--color-bg-sunken); border-radius: var(--radius-md); font-size: var(--font-size-md);
}
.auth-card .codes li { padding: var(--space-1) 0; font-variant-numeric: tabular-nums; }

/* Escolha de escritório: uma linha clicável por opção */
.office-options { border: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.office-options legend { padding: 0; margin-bottom: var(--space-2); font-weight: var(--font-weight-medium); }
.auth-card label.office-option {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-md); cursor: pointer;
  font-weight: var(--font-weight-regular);
}
.auth-card label.office-option:hover { background: var(--color-bg-muted); }
.auth-card label.office-option:has(input:checked) { border-color: var(--color-action-primary-bg); background: var(--color-action-primary-subtle); }
.office-option input { flex: none; margin: 0; }
.office-option .grow { display: grid; min-width: 0; }
.office-option strong { overflow-wrap: anywhere; }
.office-option .meta { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Bloqueio / erro: ícone, motivo, quem pode e saída */
.auth-card .empty { padding: var(--space-4) 0 0; }
.auth-card .empty p { margin: 0; color: var(--color-text-default); }
.auth-card .who-can { color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; }
.auth-card .who-can strong { color: var(--color-text-default); }

/* ---- Usuários do escritório ---- */
.issued-link { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.issued-link h2 { margin: 0; font-size: var(--font-size-md); display: flex; align-items: center; gap: var(--space-2); }
.issued-link p { margin: 0; }
.issued-link .link-box {
  padding: var(--space-2) var(--space-3); background: var(--color-bg-sunken); color: var(--color-text-default);
  border-radius: var(--radius-md); font-size: var(--font-size-sm); overflow-wrap: anywhere;
}

/* O menu "Mais" é absoluto: a tabela não pode recortar o painel. No celular as linhas viram cartões. */
.members-wrap { overflow: visible; }
.members .person { display: grid; min-width: 0; }
.members .person strong { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.members .meta { color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.members td { vertical-align: middle; }
.members td.oab { font-variant-numeric: tabular-nums; white-space: nowrap; }
.members .more-panel.member-panel { min-width: min(300px, calc(100vw - 2 * var(--space-8))); gap: var(--space-3); padding: var(--space-3); }
.member-panel { text-align: left; white-space: normal; }
.member-panel form { display: grid; gap: var(--space-2); }
.member-panel form + form { border-top: 1px solid var(--color-border-default); padding-top: var(--space-3); }
.member-panel .form-title { margin: 0; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.member-panel .inline-fields { display: flex; gap: var(--space-2); }
.member-panel .inline-fields > * { flex: 1 1 auto; min-width: 0; }
.member-panel .inline-fields .uf { flex: 0 0 calc(var(--size-control) * 1.6); }
.member-panel select, .member-panel input { width: 100%; }
.member-panel button { justify-self: start; }

@media (max-width: 720px) {
  .members thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .members, .members tbody, .members tr, .members td { display: block; }
  .members tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-default); position: relative; }
  .members tbody tr:last-child { border-bottom: none; }
  .members td { height: auto; padding: var(--space-1) 0; border: none; }
  .members tbody tr:hover td { background: none; }
  .members td.actions { position: absolute; top: var(--space-2); right: var(--space-3); padding: 0; }
  .members td.person-cell { padding-right: var(--space-10); }
  .members td[data-label]::before { content: attr(data-label) ": "; color: var(--color-text-muted); font-size: var(--font-size-sm); }
}

/* ---- PJe e tribunais ---- */
.pje-intro { color: var(--color-text-muted); max-width: 72ch; margin: 0 0 var(--space-4); }
.pje-section { margin-bottom: var(--space-5); }
.pje-section > h2 { font-size: var(--font-size-md); margin: 0 0 var(--space-2); }
.pje-form fieldset { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); margin: 0; padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-3); }
.pje-form legend { padding: 0 var(--space-1); font-weight: var(--font-weight-medium); }
.pje-form label { display: grid; gap: var(--space-1); }
.pje-form label.check { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: var(--font-weight-regular); }
.pje-form label.check input { margin-top: var(--space-1); }