/*
 * pfSense-theme-wba-login.css
 *
 * Override exclusivo da PÁGINA DE LOGIN / ERRO do pfSense 2.8.x.
 * O webConfigurator carrega essa página com /css/login.css (não usa o tema de
 * console via webguicss), então a skin do login é aplicada por este arquivo,
 * referenciado em /etc/inc/authgui.inc (display_login_form e
 * display_error_form). Aplicação: ver README (requer reaplicar após upgrade).
 *
 * Nota: arquivos do pfSense (logo.svg, login.css) são Apache-2.0 © Netgate;
 * este arquivo apenas os estiliza via CSS.
 */

:root {
    /* mesmos tokens do tema WBA */
    --wba-bg: #0c1220;
    --wba-bg-deep: #0a0f1b;
    --wba-panel: #121a2c;
    --wba-panel-2: #161f33;
    --wba-head: #19233a;
    --wba-border: #2a3852;
    --wba-border-soft: #1d2940;
    --wba-fg-strong: #f2f6fd;
    --wba-fg: #e2e9f5;
    --wba-muted: #9aa9c2;
    --wba-faint: #71839f;
    --wba-accent: #4c86f7;
    --wba-accent-deep: #2a5fd4;
    --wba-accent-deep-2: #1e4db0;
    --wba-accent-soft: rgba(76, 134, 247, .16);
    --wba-accent-ring: rgba(76, 134, 247, .45);
    --wba-link: #6fa2ff;
    --wba-danger: #ff7b7f;
    --wba-input: #0d1422;
    --wba-input-border: #32415f;
    --wba-logo-txt: #eef3fb;
    --wba-logo-sub: #8396b6;
    --sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* fundo geral */
html,
body {
    background-color: var(--wba-bg-deep);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

/* barra superior (logo + host) */
#headerrow {
    background-color: var(--wba-bg-deep) !important;
    border-bottom: 1px solid var(--wba-border-soft);
    box-shadow: 0 1px 0 rgba(4, 8, 16, .4);
}

#logodiv svg#logo {
    width: auto;
    height: 54px;
}

#hostspan {
    color: var(--wba-muted);
    font-size: 13px;
    letter-spacing: .01em;
}

.nowarning.msgbox.text-danger {
    color: var(--wba-danger) !important;
}

/* logo recolorido igual ao console */
.logo-st0 {
    fill: var(--wba-logo-txt);
}

.logo-st1 {
    fill: var(--wba-logo-sub);
}

.logo-st2 {
    fill: var(--wba-accent);
}

/* corpo: fundo WBA (substitui a cor inline do logincss) */
body#login .pagebody,
body#login .pagebodywarn,
body#error .pagebody,
body#error .pagebodywarn {
    color: var(--wba-fg);
    background:
        radial-gradient(1100px 520px at 50% -10%, var(--wba-accent-soft), transparent 60%),
        linear-gradient(to bottom, var(--wba-bg) 0%, var(--wba-bg-deep) 100%) !important;
    padding-top: clamp(48px, 12vh, 150px);
}


/* cartão maior: libera a coluna central (sai da col-sm-4 fixa de 1/3) */
html,
body#login {
    overflow: hidden;
    height: 100%;
}

body#login .pagebody,
body#login .pagebodywarn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    overflow: hidden;
}
body#login .pagebody > div,
body#login .pagebodywarn > div {
    float: none;
    width: auto;
    margin-left: 0 !important;
}
body#login .pagebody > .logoCol,
body#login .pagebodywarn > .logoCol {
    flex: 0 0 auto;
    height: auto;
}

/* o login.css posiciona .loginCont como absoluto (top50%/left50%) e com altura fixa
   de 55% — anula isso para o flex acima centralizar o cartão de verdade */
body#login .logoCol .loginCont,
body#login .pagebodywarn .logoCol .loginCont {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    height: auto;
    margin: 0;
}
/* cartão central de login */
body#login form.login {
    width: 552px;
    max-width: 92vw;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    margin: 0 auto;
    background: var(--wba-panel);
    border: 1px solid var(--wba-border);
    border-radius: 18px;
    padding: 38px 42px 42px;
    box-shadow: 0 24px 70px rgba(4, 8, 16, .55);
    color: var(--wba-fg);
}

body#login form.login p.form-title {
    margin: 0 0 28px;
    text-align: center;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--wba-fg-strong);
}

body#login form.login input[type="text"],
body#login form.login input[type="password"] {
    display: block;
    width: 100%;
    margin: 0 0 17px;
    padding: 14px 18px;
    font: inherit;
    font-size: 20px;
    color: var(--wba-fg);
    background: var(--wba-input);
    border: 1px solid var(--wba-input-border);
    border-radius: 11px;
    box-shadow: inset 0 1px 2px rgba(4, 8, 16, .2);
    box-sizing: border-box;
}

body#login form.login input[type="text"]::placeholder,
body#login form.login input[type="password"]::placeholder {
    color: var(--wba-faint);
    opacity: 1;
}

body#login form.login input[type="text"]:focus,
body#login form.login input[type="password"]:focus {
    outline: none;
    border-color: var(--wba-accent);
    box-shadow: 0 0 0 3px var(--wba-accent-ring);
    color: var(--wba-fg-strong);
}

/* botão principal (o pfSense usa btn-success no login) */
body#login form.login input[type="submit"].btn-success {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 14px 22px;
    font: inherit;
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    background-color: var(--wba-accent-deep);
    border: 1px solid var(--wba-accent-deep);
    border-radius: 11px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

body#login form.login input[type="submit"].btn-success:hover,
body#login form.login input[type="submit"].btn-success:focus {
    background-color: var(--wba-accent-deep-2);
    border-color: var(--wba-accent-deep-2);
    color: #FFFFFF;
}

body#login form.login input[type="submit"].btn-success:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--wba-accent-ring);
}

/* páginas de erro usam o mesmo visual */
body#error .pagebody a,
body#error .pagebodywarn a {
    color: var(--wba-link);
}

body#error .loginCont.error-panel {
    max-width: 560px;
    margin: 0 auto;
    background: var(--wba-panel);
    border: 1px solid var(--wba-border);
    border-radius: 12px;
    padding: 22px 26px;
    color: var(--wba-fg);
    text-align: center;
}

/* rodapé (créditos do pfSense) */
body#login footer#3 #footertext,
body#error footer#3 #footertext {
    color: var(--wba-faint);
}

body#login footer#3 #footertext p,
body#error footer#3 #footertext p {
    color: var(--wba-faint);
}