/*
 * Estilo minimo das telas existentes (CSP: style-src 'self', sem inline).
 * Cores, fonte, raios e espacos vem de /brand/tokens.css (carregado antes);
 * aqui nao ha cor crua. Alvos de toque: 44 px no minimo.
 */
* { box-sizing: border-box; }

/*
 * Altura da pagina: 100% do <html> (= area visivel), nunca 100vh. No celular, 100vh e a
 * altura SEM a barra de endereco (sobra a altura da barra e a pagina rola mesmo curta);
 * com zoom fracionario (125%...) o 100vh arredonda 1 px acima. Com border-box no body,
 * o padding fica dentro da altura. Pagina longa cresce e rola normalmente.
 */
html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.5 var(--font-sans);
}

/* main.card: a abertura (partials/splash) tem um <rect class="card"> que nao pode herdar isto */
main.card {
    width: 100%;
    max-width: 420px;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-1);
}

/* Cabecalho do cartao: logo a esquerda, botao de tema no canto */
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-2); }

.brand { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-5); line-height: 1.2; color: var(--text); }
.card-header .brand { margin: 0; }
.brand-suffix { font-weight: 600; color: var(--text-muted); }

/* Logo: so a versao do tema ativo aparece (data-theme do <html>; sem JS, o sistema) */
.logo { display: block; height: 32px; width: auto; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .logo-light { display: none; }
    :root:not([data-theme]) .logo-dark { display: block; }
}

h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-6); font-weight: 600; line-height: 1.2; }
h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-4); font-weight: 600; line-height: 1.2; }
p, ol { color: var(--text-muted); }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

label, .label { display: block; margin: var(--sp-3) 0 var(--sp-1); font-weight: 600; color: var(--text); }

input, select {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--sp-3);
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
}

textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px var(--sp-3);
    font: inherit;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    resize: vertical;
}

select option { color: var(--text); background: var(--surface); }
input[readonly] { color: var(--text-muted); }

button {
    width: 100%;
    min-height: 44px;
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    font: inherit;
    font-weight: 600;
    color: var(--on-primary);
    background: var(--primary);
    border: 0;
    border-radius: var(--r-control);
    cursor: pointer;
}

button:hover { background: var(--primary-hover); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

button.link { background: none; color: var(--text-muted); text-decoration: underline; }
button.link:hover { color: var(--text); }

.error {
    padding: 10px var(--sp-3);
    color: var(--st-cancelado);
    background: var(--st-cancelado-bg);
    border-radius: var(--r-control);
}

.error ul { margin: 0; padding-left: 1.1rem; }

/* Avisos de sucesso (flash `status`). */
.notice {
    padding: 10px var(--sp-3);
    color: var(--st-confirmado);
    background: var(--st-confirmado-bg);
    border-radius: var(--r-control);
}

.secret {
    font: 500 1.15rem/1.4 var(--font-mono);
    letter-spacing: 0.05em;
    color: var(--text);
    word-break: break-all;
}

.uri { font-family: var(--font-mono); font-size: var(--fs-1); word-break: break-all; }

/* Setup do autenticador (partials/two-factor-enroll): passos, QR (SVG do servidor, preto no branco) */
.steps { padding-left: 1.25rem; }
.steps li { margin-bottom: var(--sp-2); }
.qr-box { margin: var(--sp-4) 0; text-align: center; }
.qr-box figcaption { margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--text-muted); }
.qr { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; border-radius: var(--r-control); }
details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--primary); font-weight: 600; }

/* Honeypot do cadastro: fora da tela (sem display:none, que alguns robos ignoram). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { margin-top: var(--sp-4); }

/* Link com cara de botao (ex.: "Entrar com Google"): so CSS, sem JS (CSP). */
a.button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: var(--sp-4);
    padding: var(--sp-3);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: var(--r-control);
}

a.button-secondary { color: var(--text); background: var(--bg); border: 1px solid var(--border); }
a.button-primary { color: var(--on-primary); background: var(--primary); }
a.button-primary:hover { color: var(--on-primary); background: var(--primary-hover); }

.divider { margin: var(--sp-4) 0 0; text-align: center; color: var(--text-muted); }

/* Botao de tema (partials/theme-toggle): 44 x 44, so tokens */
.theme-toggle {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}

/* `hidden` nao esconde <svg> (UA so cobre elementos HTML): regra propria. */
.theme-toggle [data-theme-icon][hidden] { display: none; }
/* Sem JS ainda: o theme-init marca html[data-theme-pref]; mostra o icone certo na 1a pintura (o theme.js depois mantem `hidden` igual). */
html[data-theme-pref="light"] .theme-toggle [data-theme-icon="light"],
html[data-theme-pref="dark"] .theme-toggle [data-theme-icon="dark"] { display: block; }
html[data-theme-pref="light"] .theme-toggle [data-theme-icon="system"],
html[data-theme-pref="dark"] .theme-toggle [data-theme-icon="system"] { display: none; }

.theme-toggle:hover { color: var(--text); background: var(--surface-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Texto so para leitor de tela */
.sr-only,
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/*
 * Tela baixa (notebook com zoom de 125%, celular deitado): espacos menores para os
 * formularios curtos (entrar, 2FA) caberem sem rolar. So espacamento; nada some.
 */
@media (max-height: 600px) {
    body { padding: var(--sp-2); }
    main.card { padding: var(--sp-4); }
    .card-header { margin-bottom: var(--sp-1); }
    h2 { margin-bottom: var(--sp-3); }
    label, .label { margin-top: var(--sp-2); }
    button, a.button { margin-top: var(--sp-3); }
    .divider { margin-top: var(--sp-2); }
    main.card > :last-child { margin-bottom: 0; }
}

/* Botao secundario (ex.: "Voltar ao login"): mesmo par de cores do a.button-secondary */
button.button-secondary { color: var(--text); background: var(--bg); border: 1px solid var(--border); }
button.button-secondary:hover { background: var(--surface-2); }

/*
 * Codigo do autenticador (partials/otp-code + brand/otp.js). Sem JS: campo unico com fonte
 * mono. Com JS (.otp-on): seis caixas; o input name="code" real fica so para leitor de tela
 * (padrao .sr-only, nunca display:none) e o botao some (envio automatico no 6o digito).
 */
.otp-panel { margin-inline: auto; text-align: center; }
.otp-panel h2 { margin-bottom: var(--sp-2); }
.otp-panel .error { text-align: left; }
.otp-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: var(--sp-2) auto var(--sp-4);
    color: var(--on-primary);
    background: var(--primary);
    border-radius: var(--r-card);
}
.otp { margin-top: var(--sp-4); }
.otp-field { font: 600 var(--fs-5)/1.2 var(--font-mono); letter-spacing: 0.3em; text-align: center; }
.otp-on .otp-field,
.otp-on .otp-label-quiet { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.otp-form .otp-submit { display: none; }
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); justify-content: center; gap: var(--sp-2); }
.otp-digit {
    min-width: 0;
    height: 56px;
    padding: 0;
    font: 600 var(--fs-6)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: center;
    caret-color: var(--primary);
    transition: border-color 120ms ease;
}
.otp-digit:focus { border-color: var(--primary); }
.otp-digit:disabled { color: var(--text-muted); }
@media (max-width: 400px) {
    .otp-boxes { gap: var(--sp-1); }
}
@media (prefers-reduced-motion: reduce) {
    .otp-digit { transition: none; }
}

/* Painel do super (Task 8): sem JS, sem estilo inline (CSP). */
body.super, body.wide { align-items: flex-start; }

/* Cartao largo (super e painel): precisa de especificidade >= main.card (0,1,1), senao fica com 420 px no PC */
main.card.card-wide { max-width: 1100px; }

.super-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.super-header .brand { margin: 0; }

.super-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

.super-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary); font-weight: 600; }

form.inline { display: inline; }

form.inline button.link, .super-nav button.link { width: auto; margin: 0; padding: 0 var(--sp-1); }

.narrow { max-width: 420px; }

.request { padding: var(--sp-4) 0; border-top: 1px solid var(--border); }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4); margin: 0 0 var(--sp-3); }

.facts dt { font-weight: 600; color: var(--text-muted); }

.facts dd { margin: 0; word-break: break-word; }

.actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-4); align-items: end; }

/*
 * Celular (<= 640 px): tabela .stack vira cartoes empilhados, sem rolagem lateral.
 * td::before mostra o data-label (posto no Blade); o thead fica so para leitor de tela
 * (mesmo padrao do .sr-only, nunca display:none). No PC a tabela nao muda.
 */
@media (max-width: 640px) {
    .actions { grid-template-columns: 1fr; }
    table.stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    table.stack, table.stack tbody, table.stack tr { display: block; width: 100%; }
    table.stack tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
    table.stack td { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 0; overflow-wrap: anywhere; }
    table.stack td::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); }
    table.stack td[data-label=""] { display: block; }
    table.stack td[data-label=""]::before { content: none; }
    table.stack td.cell-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-2); }
    table.stack td.cell-actions::before { flex: 1 0 100%; }
    table.stack td.cell-actions form { flex: 1 1 10rem; }
    table.stack button { width: 100%; min-height: 44px; }
}

button.button-danger { color: var(--surface); background: var(--st-cancelado); }
button.button-danger:hover { background: var(--st-cancelado); opacity: 0.9; }

button.button-small { width: auto; margin: 0; padding: 6px 10px; font-size: var(--fs-2); }

.badge {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 2px var(--sp-2);
    font-size: var(--fs-1);
    font-weight: 600;
    color: var(--on-primary);
    background: var(--primary);
    border-radius: var(--r-pill);
    vertical-align: middle;
}

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th, td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }

th { color: var(--text-muted); font-weight: 600; }

.pager { display: flex; gap: var(--sp-4); margin-top: var(--sp-4); }

/* Modo suporte (impersonacao somente leitura do super) */
.impersonation-banner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    margin: 0 0 var(--sp-4);
    padding: 10px var(--sp-3);
    color: var(--st-cancelado);
    background: var(--st-cancelado-bg);
    border: 1px solid var(--st-cancelado);
    border-radius: var(--r-control);
}
.impersonation-banner span { flex: 1 1 200px; }