/* ===== entrada =====
   O ecrã de autenticação e mais nada: o painel escuro, a órbita, a marca e o formulário.
   É o único bloco da página que ninguém mais partilha, e por isso é o mais fácil de manter
   à parte -- uma regra `dashboard-login-*` só existe aqui. */

/* O cinzento claro da maqueta é a superfície deste ecrã, e estava escrito duas vezes.
   O painel da esquerda não leva par escuro: já é escuro nos dois temas, de propósito. */
:root {
    --login-surface: #f4f5f7;
    /* O painel da esquerda é escuro nos dois temas, e por isso estes tons não viram: são a
       identidade e não o tema. Ficam em nomes na mesma, porque estavam escritos como
       literais -- e o ciano em que estavam (`#74c0fc` e `#0dcaf0`) não era cor nenhuma desta
       marca. A órbita é agora o navy aclarado, o mesmo `--brand-emphasis` que o tema escuro
       usa para realçar. */
    --login-panel-from: rgba(7, 13, 38, .96);
    --login-panel-to: rgba(11, 22, 63, .92);
    --login-accent: #7ea2f5;
    --login-accent-rgb: 126, 162, 245;
    --login-ink-rgb: 255, 255, 255;
    --login-panel-shadow: rgba(11, 22, 63, .1);
}

[data-bs-theme="dark"] {
    --login-surface: #0a0f1a;
    --login-panel-shadow: rgba(0, 0, 0, .4);
}

.dashboard-login {
    background:
        radial-gradient(circle at 15% 15%, rgba(var(--brand-rgb), .12), transparent 32rem),
        var(--login-surface);
}

/* O cinzento claro da maqueta, e não branco: os campos são brancos, e sobre branco puro
   desapareciam -- o lado direito lê-se como uma folha vazia com texto solto. */
.dashboard-login-panel {
    background: var(--login-surface);
    box-shadow: -1.5rem 0 4rem var(--login-panel-shadow);
    z-index: 1;
}

/* O branco do campo é o do corpo da página: é a mesma relação -- campo claro sobre
   superfície cinzenta -- e assim vira com o tema em vez de ficar branco no escuro. */
.dashboard-login-panel .form-control {
    background-color: var(--bs-body-bg);
}

.dashboard-login-brand img {
    width: 148px;
}

.dashboard-login-submit {
    min-height: 2.75rem;
    font-size: var(--fs-body);
    font-weight: 600;
}

.dashboard-login-submit-loading {
    align-items: center;
    justify-content: center;
    gap: .55rem;
}

.dashboard-login-submit-loading:not(.d-none) {
    display: inline-flex;
}

.dashboard-login-atmosphere {
    background:
        linear-gradient(145deg, var(--login-panel-from), var(--login-panel-to)),
        repeating-linear-gradient(90deg, transparent 0 79px, rgba(var(--login-ink-rgb), .04) 80px);
}

.dashboard-login-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--login-ink-rgb), .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--login-ink-rgb), .035) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* A marca no canto superior esquerdo do painel escuro, como na maqueta. O logo e escuro,
   por isso inverte-se, como ja acontece na barra de navegacao. */
.dashboard-login-badge {
    position: absolute;
    left: 3rem;
    top: 2.5rem;
}

.dashboard-login-badge img {
    height: 24px;
    width: auto;
    display: block;
    filter: invert(100%);
    opacity: .9;
}

/* A assinatura e a frase, no canto inferior esquerdo. Estavam a direita e sem frase. */
.dashboard-login-mark {
    position: absolute;
    left: 3rem;
    right: 3rem;
    bottom: 2.5rem;
    max-width: 20rem;
}

.dashboard-login-signature {
    display: block;
    color: rgba(var(--login-ink-rgb), .45);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: .625rem;
}

.dashboard-login-pitch {
    margin: 0;
    color: rgba(var(--login-ink-rgb), .8);
    font-size: var(--fs-body);
    line-height: 1.6;
}

/* Uma medida fixa para o formulario, em vez da largura que a coluna der. */
.dashboard-login-form-column {
    width: 100%;
    max-width: 22.5rem;
    margin: 0 auto;
}

.dashboard-login-orbit {
    position: absolute;
    width: min(46vw, 660px);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(var(--login-accent-rgb), .34);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.dashboard-login-orbit::before,
.dashboard-login-orbit::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(var(--login-accent-rgb), .2);
    border-radius: 50%;
}

.dashboard-login-orbit::before {
    inset: 16%;
}

.dashboard-login-orbit::after {
    inset: 34%;
    background: radial-gradient(circle, rgba(var(--login-accent-rgb), .3), transparent 68%);
}

.dashboard-login-signal {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--login-accent);
    box-shadow: 0 0 0 10px rgba(var(--login-accent-rgb), .08), 0 0 2rem var(--login-accent);
    animation: signal-pulse 2.4s ease-in-out infinite;
}

.dashboard-login-signal-one {
    top: 27%;
    left: 39%;
}

.dashboard-login-signal-two {
    right: 28%;
    bottom: 31%;
    animation-delay: -1.2s;
}

@keyframes signal-pulse {
    50% {
        transform: scale(1.25);
        opacity: .65;
    }
}