/**
 * auth.css — telas do InfinityID no InfinityCharge (login, cadastro,
 * recuperação de senha, segundo fator, contas, sessões).
 *
 * As views vêm do pacote (sharedcode views/infinityid) e entram no
 * layouts/main do Charge; o estilo é do Charge (S26, decisão do dono: nada
 * servido da sharedcode pela web). As classes `auth-*` são o contrato que a
 * casca do pacote emite — não renomear. Cores pelas variáveis do layout de
 * marketing (critical.css), medidas pelos tokens com fallback (tokens.css não
 * entra no layouts/main).
 */

.auth-layout { display: flex; justify-content: center; padding: var(--sp-10, 40px) var(--sp-4, 16px); }
.auth-panel { width: 100%; max-width: 26rem; }
.auth-panel--centered { text-align: center; }
.auth-panel--wide { max-width: 56rem; }

.auth-card {
    display: flex; flex-direction: column; gap: var(--sp-6, 24px);
    padding: var(--sp-8, 32px);
    background: var(--bg-card); color: var(--text-primary);
    border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px);
    box-shadow: var(--card-shadow, 0 8px 24px rgba(0,0,0,.08));
}
.auth-header h1 { margin: 0 0 var(--sp-2, 8px); font-size: 1.75rem; font-weight: 800; line-height: 1.15; color: var(--text-primary); }
.auth-header p, .auth-text, .auth-hint { margin: 0; font-size: .88rem; color: var(--text-secondary); }

/* Formulário */
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4, 16px); margin: 0; }
.auth-field { display: flex; flex-direction: column; gap: .4rem; }
.auth-field label { font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
.auth-field-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2, 8px); }
.auth-field input:not([type="checkbox"]) {
    width: 100%; box-sizing: border-box; min-height: 2.9rem; padding: .75rem 1rem;
    font: inherit; font-size: .88rem; color: var(--text-primary);
    background: var(--bg-card); border: 1.5px solid var(--border-subtle); border-radius: 12px;
    outline: none; transition: border-color .2s, box-shadow .2s;
}
.auth-field input:not([type="checkbox"]):focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.auth-field input[readonly] { background: var(--bg-secondary); color: var(--text-muted); cursor: not-allowed; }
.auth-field input[readonly]:focus { box-shadow: none; border-color: var(--border-subtle); }
.auth-field--check { flex-direction: row; align-items: center; gap: .6rem; }
.auth-field--check label { font-weight: 400; color: var(--text-secondary); }
.auth-field--check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.auth-field.has-error input:not([type="checkbox"]) { border-color: #ef4444; }
.auth-field.has-error input:not([type="checkbox"]):focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.auth-field-error { display: block; font-size: .75rem; color: #ef4444; }

/* Botões e links */
.auth-btn {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-height: 2.9rem; padding: .6rem 1.1rem; font: inherit; font-size: .9rem; font-weight: 600;
    text-decoration: none; cursor: pointer; color: var(--text-primary);
    background: transparent; border: 1.5px solid var(--border); border-radius: 12px;
    transition: background .2s, border-color .2s, opacity .2s;
}
.auth-btn:hover { border-color: var(--accent); }
.auth-btn--primary { width: 100%; color: #fff; background: var(--accent); border-color: var(--accent); }
.auth-btn--primary:hover { background: var(--accent-hover, var(--accent)); }
.auth-btn--secondary { width: 100%; background: var(--bg-secondary); border-style: dashed; }
.auth-btn--danger { width: 100%; color: #ef4444; border-color: #ef4444; }
.auth-btn:disabled { cursor: not-allowed; opacity: .6; }
.auth-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2, 8px); }
.auth-inline-form { display: inline; }
.auth-link, button.auth-link { color: var(--accent); font-weight: 600; text-decoration: none; }
button.auth-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.auth-link:hover, button.auth-link:hover { text-decoration: underline; }
.auth-footer p { margin: 0; font-size: .8rem; color: var(--text-muted); text-align: center; }

/* Nota "conta InfinityID" */
.auth-idnote {
    display: flex; align-items: flex-start; gap: var(--sp-3, 12px);
    padding-top: var(--sp-5, 20px); border-top: 1px solid var(--border-subtle);
    font-size: .8rem; line-height: 1.55; color: var(--text-muted);
}
.auth-idnote-mark { flex-shrink: 0; margin-top: 1px; }
.auth-idnote p { margin: 0; }
.auth-idnote strong { font-weight: 600; color: var(--text-secondary); }

/* Avisos (flash do pacote e do layouts/main) */
.auth-alert {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2, 8px);
    padding: .75rem .9rem; font-size: .85rem; color: var(--text-primary);
    background: var(--bg-secondary); border: 1px solid var(--border); border-left-width: 4px;
    border-radius: var(--r-md, 9px); transition: opacity .3s;
}
.auth-alert--error, .auth-alert--danger { border-color: #ef4444; }
.auth-alert--warning { border-color: #f59e0b; }
.auth-alert--success { border-color: #10b981; }
.auth-alert--info { border-color: var(--accent); }
.auth-alert--required { display: block; font-weight: 600; }
.auth-alert-close { font: inherit; font-size: 1.1rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; opacity: .7; }
.auth-alert-close:hover { opacity: 1; }
.auth-main > .auth-alert { max-width: 26rem; margin: var(--sp-6, 24px) auto 0; }

/* Contas (troca de conta, convites) */
.auth-accounts { display: flex; flex-direction: column; gap: var(--sp-2, 8px); margin: 0; padding: 0; list-style: none; }
.auth-account {
    display: flex; align-items: center; gap: var(--sp-3, 12px); width: 100%; box-sizing: border-box;
    min-height: 3rem; padding: .6rem .8rem; font: inherit; text-align: left; color: var(--text-primary);
    background: transparent; border: 1.5px solid var(--border-subtle); border-radius: 12px; cursor: pointer;
}
.auth-account:hover { border-color: var(--accent); }
.auth-account:disabled { cursor: not-allowed; opacity: .6; }
.auth-account-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.auth-account-name { font-weight: 700; overflow-wrap: anywhere; }
.auth-account-meta, .auth-account-state { font-size: .8rem; color: var(--text-muted); }

/* Segundo fator e sessões */
.auth-recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.auth-recovery-codes code, .auth-secret { font-family: var(--ff-mono, ui-monospace, monospace); font-size: 1rem; letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
.auth-sessions .auth-session { display: flex; align-items: center; gap: var(--sp-3, 12px); padding: .75rem 0; border-bottom: 1px solid var(--border-subtle); }
.auth-session--current .auth-account-name { color: var(--accent); }
.auth-status { font-size: 2.5rem; }
.auth-security { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6, 24px); }
.auth-section {
    display: flex; flex-direction: column; gap: var(--sp-4, 16px); min-width: 0;
    padding: var(--sp-5, 20px); border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px);
}
.auth-section h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.auth-section p { margin: 0; }
.auth-qr { width: 100%; max-width: 15rem; align-self: center; background: #fff; padding: var(--sp-2, 8px); border-radius: var(--r-md, 9px); }
.auth-qr svg { display: block; width: 100%; height: auto; }

@media (min-width: 48rem) {
    .auth-security--off, .auth-security--setup, .auth-security--enabled { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .auth-security--setup { grid-template-areas: "state qr" "confirm qr"; grid-template-rows: auto 1fr; }
    .auth-security--setup .auth-section--state { grid-area: state; }
    .auth-security--setup .auth-section--qr { grid-area: qr; }
    .auth-security--setup .auth-section--confirm { grid-area: confirm; }
    .auth-security--enabled { grid-template-areas: "state state" "codes disable"; }
    .auth-security--enabled .auth-section--state { grid-area: state; }
    .auth-security--enabled .auth-section--codes { grid-area: codes; }
    .auth-security--enabled .auth-section--disable { grid-area: disable; }
}

:where(.auth-btn, .auth-account, .auth-link, .auth-alert-close, .auth-field input):focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

@media (max-width: 30rem) {
    .auth-layout { padding: var(--sp-6, 24px) var(--sp-3, 12px); }
    .auth-card { padding: var(--sp-5, 20px); }
    .auth-header h1 { font-size: 1.5rem; }
}