/*
    A identidade visual do SecurePassword, e as primitivas de formulário que as telas compartilham.

    O que é específico de uma tela vive no CSS com escopo do componente (`.razor.css`). O que está
    aqui é o que precisa ser o mesmo em todas: os tokens de cor e tipografia, o fundo, e os controles
    de formulário — porque um campo de senha que muda de aparência entre a tela de cadastro e a de
    destravar é um campo que o usuário não reconhece como o mesmo.
*/

/* ---------------------------------------------------------------------------------------------
   Tipografia — servida daqui, nunca de um CDN. Ver wwwroot/fonts/README.md.
   --------------------------------------------------------------------------------------------- */

@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/fraunces-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------------------------- */

:root {
    /*
        Os cinco tokens abaixo aparecem também COM TRANSPARÊNCIA no CSS com escopo dos componentes
        — a tinta de fundo de um alerta, a borda de um cartão em erro, o véu da barra de navegação.
        Por isso eles são declarados em canais, e a cor sólida é derivada deles logo abaixo.

        O que isso conserta: antes, `--danger` era `#F87171` aqui e `rgba(248, 113, 113, 0.35)`
        redigitado em quatro arquivos de componente. Trocar a cor de perigo mudava o texto do alerta
        e deixava o fundo dele na cor antiga — a paleta tinha dois donos, e o segundo era invisível.
    */
    --bg-rgb: 14 17 32;
    --brass-rgb: 201 162 75;
    --ok-rgb: 74 222 128;
    --warn-rgb: 245 184 65;
    --danger-rgb: 248 113 113;

    --bg: rgb(var(--bg-rgb));
    --bg-2: #14172A;
    --surface: #1A1E34;
    --surface-hi: #232748;
    --brass: rgb(var(--brass-rgb));
    --brass-dim: #8A733A;
    --text: #EDEDF3;
    --muted: #8B90AC;
    --ok: rgb(var(--ok-rgb));
    --warn: rgb(var(--warn-rgb));
    --danger: rgb(var(--danger-rgb));
    --line: rgba(255, 255, 255, 0.07);
    --line-hi: rgba(255, 255, 255, 0.14);

    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    /*
        A pilha monoespaçada começa por 'JetBrains Mono' — a fonte que a tela de segredos de projeto
        pede — e continua exatamente como estava. Ela NÃO é servida por esta aplicação, e a ausência
        é a mesma decisão do README das fontes: um `@font-face` apontando para um CDN contaria a um
        terceiro que alguém abriu este cofre, e empacotar mais um arquivo de fonte só para exibir
        valor de variável não paga o peso. Quem a tem instalada — que é o público desta tela — vê a
        fonte pedida; quem não tem cai no monoespaçado do sistema, e nada quebra.
    */
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

    --radius: 12px;
    --radius-sm: 9px;

    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(201, 162, 75, 0.10), transparent 60%),
        radial-gradient(900px 500px at 90% 0%, rgba(90, 70, 180, 0.12), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 600;
    margin: 0;
}

a {
    color: var(--brass);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*
    O foco visível NUNCA é removido. Um `outline: none` numa tela de senha é o tipo de decisão
    estética que deixa de fora quem navega por teclado — e quem gerencia senhas navega por teclado.
*/
:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
   Formulário
   --------------------------------------------------------------------------------------------- */

.field {
    display: block;
    margin-bottom: 18px;
}

.field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    margin-bottom: 7px;
}

.input {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-2);
    color: var(--text);
    font-family: inherit;
    font-size: 14.5px;
    transition: border-color .15s ease, background .15s ease;
}

.input::placeholder {
    color: rgba(139, 144, 172, 0.6);
}

.input:hover {
    border-color: var(--line-hi);
}

.input:focus {
    border-color: var(--brass);
    background: #12152a;
}

.input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.field-hint {
    display: block;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.45;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-hi);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

.btn:hover:not(:disabled) {
    border-color: var(--brass);
    color: var(--brass);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: linear-gradient(155deg, var(--brass), var(--brass-dim));
    border-color: transparent;
    color: #0E1120;
}

.btn-primary:hover:not(:disabled) {
    color: #0E1120;
    filter: brightness(1.08);
}

.btn-ghost {
    background: transparent;
    color: var(--muted);
    font-weight: 500;
}

/*
    O botão de uma ação destrutiva.

    Vermelho de contorno, e não vermelho sólido: um botão vermelho preenchido é o mais chamativo da
    tela, e a ação mais chamativa de um diálogo de exclusão não deve ser a exclusão. Quem quer
    confirmar acha; quem chegou por engano não é puxado para lá.
*/
.btn-danger {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(248, 113, 113, 0.12);
    border-color: var(--danger);
    color: var(--danger);
}

.btn-inline {
    width: auto;
    padding: 9px 14px;
    font-size: 13px;
}

/* Girinho do botão em espera. `prefers-reduced-motion` para de girar; o botão continua desabilitado. */
.spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------------------------------------
   Blocos de texto do Blazor que não passam por componente
   --------------------------------------------------------------------------------------------- */

.mono {
    font-family: var(--mono);
}

/*
    Visível apenas para leitor de tela.

    Existe porque parte da informação desta interface é puramente visual: as bolinhas do campo de
    senha são `aria-hidden`, e sem um texto ao lado delas quem usa leitor de tela ouviria um campo
    vazio — sem saber se a senha está oculta ou se o item não tem senha. `display: none` não serve:
    ele esconde de todo mundo, inclusive de quem precisa.
*/
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#blazor-error-ui {
    background: var(--surface);
    border-top: 1px solid var(--danger);
    color: var(--text);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13.5px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.65rem;
}

.blazor-error-boundary {
    background: var(--surface);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    padding: 1rem;
    color: var(--text);
}

.blazor-error-boundary::after {
    content: "Algo deu errado nesta tela.";
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 30vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 0.4rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #C9A24B;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    inset: calc(30vh + 3.4rem) 0 auto 0;
    font-family: 'Fraunces', Georgia, serif;
    color: #8B90AC;
    font-size: 13px;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carregando");
}