/* Login, menu do usuário, tela de carregamento e página de usuários. */

/* ---------- carregando ---------- */
#auth-carregando {
  position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center;
  background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(2px);
}
#auth-carregando .auth-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 28px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; max-width: 360px; text-align: center;
}
#auth-carregando p { margin: 0; color: var(--text-secondary); }
.auth-giro { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--grid); border-top-color: var(--series-1); animation: auth-gira .8s linear infinite; }
#auth-carregando.erro .auth-giro { display: none; }
#auth-carregando.erro p { color: var(--delta-desce); }
@keyframes auth-gira { to { transform: rotate(360deg); } }

/* ---------- menu do usuário ---------- */
.auth-menu { position: relative; }
.auth-usuario { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 2000; min-width: 230px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14); display: flex; flex-direction: column;
}
.auth-lista[hidden] { display: none; }
.auth-info { display: flex; flex-direction: column; padding: 6px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.auth-info b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.auth-info span { color: var(--text-muted); font-size: 12px; }
.auth-lista button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; color: var(--text-primary); }
.auth-lista button:hover { background: var(--surface-2); }

/* aba "Usuários" só para o adm */
.abas .so-adm { display: none; }
:root[data-papel="adm"] .abas .so-adm { display: inline-block; }

/* sem permissão: some da tela (o servidor também não entrega os dados) */
.sem-ver-policiais #ms-policial, .sem-ver-policiais #card-pm, .sem-ver-policiais .so-policiais { display: none !important; }
.sem-editar-horarios #btn-horarios { display: none !important; }

/* ---------- formulários e diálogos ---------- */
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form h2 { font-size: 17px; margin: 0; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.auth-form input:not([type="checkbox"]), .auth-form select {
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); color: var(--text-primary); font-size: 14px; font-weight: 400;
}
.auth-form input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.auth-linha { display: flex; gap: 6px; }
.auth-linha input { flex: 1; min-width: 0; }
.auth-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.auth-msg { margin: 0; min-height: 1.2em; font-size: 13px; color: var(--text-secondary); }
.auth-msg.erro { color: var(--delta-desce); }
.auth-msg.ok { color: var(--delta-sobe); }
.auth-perms { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.auth-perms legend { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; padding: 0 4px; }
.auth-form label.chk { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--text-primary); font-size: 13.5px; }
#dlg-senha, #dlg-usuario, #dlg-nova-senha {
  border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; width: min(440px, calc(100vw - 32px));
  background: var(--surface-1); color: var(--text-primary);
}
#dlg-senha::backdrop, #dlg-usuario::backdrop, #dlg-nova-senha::backdrop { background: rgba(10, 14, 40, .45); }

/* ---------- login ---------- */
/* caixa de login no centro da tela (vertical e horizontal) */
.pagina-login .viz-root { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-caixa {
  width: 100%; max-width: 400px; margin: 0; background: var(--surface-1); border: 1px solid var(--border);
  border-top: 4px solid var(--series-1); border-radius: 12px; padding: 26px 28px 22px;
  box-shadow: 0 6px 24px rgba(27, 36, 99, .08);
}
.login-caixa h1 { font-size: 20px; }
.login-caixa .sub { margin-bottom: 18px; }
.login-caixa .btn-primario { padding: 10px; font-size: 15px; margin-top: 2px; }
.login-rodape { margin-top: 16px; text-align: center; }

/* ---------- usuários ---------- */
.t-usuarios td, .t-usuarios th { vertical-align: middle; }
.t-usuarios .centro { text-align: center; }
.t-usuarios td.nome { font-weight: 600; }
.t-usuarios td.quando { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }
.t-usuarios td.acoes { white-space: nowrap; text-align: right; }
.t-usuarios td.acoes button { padding: 4px 10px; font-size: 12.5px; margin-left: 4px; }
.t-usuarios tr.inativo td { opacity: .55; }
.t-usuarios tr.salvando { opacity: .6; pointer-events: none; }
.t-usuarios select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); }
.t-usuarios input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--series-1); }
.btn-ghost.perigo { color: var(--delta-desce); }

/* ---------- cabeçalho no celular: título em cima, botões embaixo quebrando linha ---------- */
@media (max-width: 760px) {
  .topo { flex-direction: column; align-items: stretch; gap: 10px; }
  .topo-acoes { flex-wrap: wrap; gap: 6px; position: relative; }
  .topo-acoes .btn-ghost, .topo-acoes .btn-primario { padding: 6px 10px; font-size: 13px; }
  .auth-usuario { max-width: 170px; }
  /* o menu do usuário abre na largura toda, logo abaixo dos botões */
  .auth-menu { position: static; }
  .auth-lista { left: 0; right: 0; min-width: 0; }
}