/* ===== entrada =====
   Só o que não tem utilitária: medidas exactas, os fundos do painel e os tons fora do tema. */

/* O cinzento claro da maqueta é a superfície deste ecrã. O painel da esquerda é escuro nos
   dois temas, de propósito. */
:root {
    --login-surface: #f4f5f7;
    /* O painel da esquerda é escuro nos dois temas: estes tons são a identidade e não o
       tema, e por isso não viram. */
    --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);
}

/* 55/45, que é a divisão da Havicare e não existe na grelha do Bootstrap. */
@media (min-width: 992px) {
    .dashboard-login-atmosphere {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .dashboard-login-panel {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

/* O cinzento claro da maqueta, e não branco, para o cartão branco se ver. A sombra é de um
   lado só, e as utilitárias do Bootstrap são a toda a volta. */
.dashboard-login-panel {
    background: var(--login-surface);
    box-shadow: -1.5rem 0 4rem var(--login-panel-shadow);
}

/* ----- o cartão do formulário ----- */

.dashboard-login-card {
    max-width: 26rem;
}

/* Num telemóvel não há cartão: a moldura tirava largura ao formulário, e o Bootstrap não tem
   utilitárias de moldura, sombra ou canto por ponto de quebra. */
@media (min-width: 576px) {
    .dashboard-login-card {
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: 1rem;
        background: var(--bs-body-bg);
        box-shadow: var(--bs-box-shadow-lg);
    }
}

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

/* O logótipo tem duas versões, e é o único sítio que segue o tema. */
[data-bs-theme="dark"] .dashboard-login-brand img {
    content: url("/assets/logo-dark.png");
}

/* O único ecrã que não tem a barra de navegação, e por isso leva o seu próprio botão. */
.dashboard-login-theme {
    width: 2.75rem;
    height: 2.75rem;
}

/* ----- o painel escuro ----- */

.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;
}

/* O halo por trás do discurso dá profundidade sem competir com o texto; segue a coluna
   centrada para iluminar o texto e não a margem. */
.dashboard-login-atmosphere::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(46rem, 90%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--login-accent-rgb), .18), transparent 62%);
}

/* A marca no canto superior esquerdo do painel escuro, como na maqueta. O painel é escuro
   nos dois temas, por isso leva sempre a versão escura do logótipo. */
.dashboard-login-badge img {
    height: 26px;
}

/* Os três blocos do painel partilham a mesma coluna centrada, para num ultrawide o texto não
   ficar encostado a um lado. */
.dashboard-login-column {
    max-width: 34rem;
}

.dashboard-login-rule {
    width: 3.25rem;
    height: 3px;
    background: var(--login-accent);
}

.dashboard-login-headline {
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: rgb(var(--login-ink-rgb));
}

/* Os tons do painel são o branco diluído e não os do tema: o painel não vira com ele. */
.dashboard-login-pitch {
    max-width: 26rem;
    color: rgba(var(--login-ink-rgb), .66);
}

.dashboard-login-highlight-icon {
    width: 2.625rem;
    height: 2.625rem;
    border: 1px solid rgba(var(--login-ink-rgb), .13);
    background: rgba(var(--login-ink-rgb), .07);
    color: rgba(var(--login-ink-rgb), .88);
}

.dashboard-login-highlight-title {
    color: rgb(var(--login-ink-rgb));
}

.dashboard-login-highlight-text {
    color: rgba(var(--login-ink-rgb), .56);
}

.dashboard-login-signature {
    color: rgba(var(--login-ink-rgb), .45);
    font-size: var(--fs-label);
    letter-spacing: .22em;
}

/* A frase manuscrita, a responder ao título em vez de o repetir. */
.dashboard-login-aside {
    font-family: 'Caveat', cursive;
    font-size: 1.7rem;
    line-height: 1.15;
    color: rgba(var(--login-ink-rgb), .44);
    transform: rotate(-3deg);
}

/* ----- a constelação dos tipos de dispositivo ----- */

/* Fundo do painel e não conteúdo: decoração, fora do caminho do rato, e mede o painel exacto
   para as percentagens da tabela serem do painel. */
.dashboard-login-constellation {
    inset: 0;
    opacity: .42;
    pointer-events: none;
}

/* Cada cartão traz o seu ângulo, compasso e curso, para não subirem em uníssono. O passo vem
   antes da rotação para ser em linha recta no ecrã e não no eixo do cartão. */
.dashboard-login-device {
    left: var(--x);
    top: var(--y);
    width: 124px;
    padding: 15px 10px 13px;
    gap: 9px;
    border: 1px solid rgba(var(--login-ink-rgb), .16);
    border-radius: 18px;
    background: rgba(var(--login-ink-rgb), .07);
    backdrop-filter: blur(7px);
    box-shadow: 0 14px 34px rgba(4, 8, 26, .34), inset 0 1px 0 rgba(var(--login-ink-rgb), .14);
    color: rgba(var(--login-ink-rgb), .9);
    transform: translate(0, 0) rotate(var(--angle));
    animation: dashboard-login-drift var(--seconds) ease-in-out var(--delay) infinite;
}

.dashboard-login-device-label {
    font-size: var(--fs-label);
    line-height: 1.25;
}

@keyframes dashboard-login-drift {
    50% {
        transform: translate(var(--dx), var(--dy)) rotate(var(--angle));
    }
}

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