/* ============================================================
   Login page — standalone, pre-auth.
   Rendered by React (react-src/LoginPage.jsx, bundled to
   static/js/dist/login-app.js).

   Layout: DARK, centred — logo pinned top, "Sign in" form (email +
   password) centred in the viewport, legal footer pinned bottom.

   TOKENS: canonical design tokens (static/css/tokens.css, source of truth
   static/design-system/tokens.css) are linked from templates/login.html
   BEFORE this file. Tokens drive radius / spacing / font / the primary
   button / error colours. The DARK surface palette has no equivalent in
   the (light-only) token system, so it lives below as page-local `--lg-*`
   vars — clearly NOT design tokens. Promote to tokens.css only via a
   separate design-system task if a dark theme is ever adopted firm-wide.
   ============================================================ */

:root {
    /* --- Login-only DARK palette (NOT design tokens) --- */
    --lg-bg:            #181A1F;               /* page background */
    --lg-ink:           #FFFFFF;               /* title */
    --lg-muted:         #9499A3;               /* placeholders, footer, lead icons */
    --lg-field-bg:      #1F2127;               /* input surface */
    --lg-field-bd:      #2C2F37;               /* input border */
    --lg-field-bd-hov:  #3A3E48;               /* input border hover */
    --lg-link:          #C4C9D1;               /* footer links */
    --lg-btn-disabled:  #3A3E48;               /* disabled sign-in button */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: var(--f-family);
    background: var(--lg-bg);
    color: var(--lg-ink);
}

/* ============================================================
   PAGE COLUMN — logo top · form centred · footer bottom
   ============================================================ */
.login-container {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    justify-content: space-between;   /* logo top · form centred · footer bottom */
    padding: var(--s-48) var(--s-20) var(--s-32);
}

.login-logo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.login-logo svg { height: 32px; width: auto; }

/* form block — sits in the centre zone between logo and footer */
.login-card {
    width: 400px; max-width: 100%;
    /* fade only (no transform) so nothing shifts on mount */
    animation: loginFade .25s ease-out;
}
@keyframes loginFade { from { opacity: 0; } to { opacity: 1; } }

.login-title {
    font-size: var(--f-display); font-weight: 600; color: var(--lg-ink);
    text-align: center; letter-spacing: var(--ls-tight);
    margin-bottom: var(--s-40);
}

/* ============================================================
   FORM
   ============================================================ */
.form-group { margin-bottom: var(--s-16); }

.input-wrap { position: relative; }
.input-lead {
    position: absolute; left: var(--s-12); top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--lg-muted); pointer-events: none;
}

.form-input {
    width: 100%; height: var(--h-form-input); padding: 0 var(--s-12);
    font: 400 var(--f-body) var(--f-family);
    border: 1px solid var(--lg-field-bd); border-radius: var(--r-md);
    background: var(--lg-field-bg); color: var(--lg-ink);
    transition: border-color var(--dur-interaction) ease, box-shadow var(--dur-interaction) ease; outline: none;
}
.form-input.has-lead   { padding-left: 40px; }
.form-input.has-toggle { padding-right: 40px; }
.form-input::placeholder { color: var(--lg-muted); }
.form-input:hover { border-color: var(--lg-field-bd-hov); }
.form-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
.form-input.error { border-color: var(--c-danger); }
.form-input.error:focus { box-shadow: 0 0 0 1px var(--c-danger); }

/* Kill the browser-autofill yellow — keep the dark surface + light text.
   The inset shadow paints over the UA background; transition delay stops the
   yellow flash before our override applies. */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--lg-field-bg) inset;
    box-shadow: 0 0 0 1000px var(--lg-field-bg) inset;
    caret-color: var(--lg-ink);
    transition: background-color 9999s ease-out 0s;
}
.form-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1px var(--c-primary), 0 0 0 1000px var(--lg-field-bg) inset;
    box-shadow: 0 0 0 1px var(--c-primary), 0 0 0 1000px var(--lg-field-bg) inset;
}

/* Password show/hide toggle */
.input-toggle {
    position: absolute; right: var(--s-6); top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: none; border: none; border-radius: var(--r-sm);
    color: var(--lg-muted); cursor: pointer; transition: color var(--dur-interaction) ease;
}
.input-toggle:hover { color: var(--lg-ink); }
.input-toggle svg { width: 16px; height: 16px; }

/* Remember me — CSS-drawn check, dark-themed */
.remember-row { margin: var(--s-12) 0 var(--s-4); }
.db-check { display: inline-flex; align-items: center; gap: var(--s-8); cursor: pointer; user-select: none; }
.db-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.db-check-box {
    width: 18px; height: 18px;
    border: 2px solid var(--lg-field-bd-hov);
    border-radius: var(--r-sm);
    background: var(--lg-field-bg);
    position: relative;
    flex-shrink: 0;
    transition: border-color var(--dur-interaction) ease, background var(--dur-interaction) ease;
}
.db-check:hover .db-check-box { border-color: var(--c-primary); }
.db-check input:focus-visible + .db-check-box { box-shadow: 0 0 0 3px var(--c-primary-soft); }
.db-check input:checked + .db-check-box { border-color: var(--c-primary); background: var(--c-primary); }
.db-check input:checked + .db-check-box::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 4px; height: 8px;
    border: solid var(--lg-ink);
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.db-check-label { font-size: var(--f-control); color: var(--lg-muted); }

.login-button {
    width: 100%; height: var(--h-form-input);
    font: 600 var(--f-body) var(--f-family); color: var(--c-bg);
    background: var(--c-primary); border: none; border-radius: var(--r-md);
    cursor: pointer; transition: background var(--dur-interaction) ease; margin-top: var(--s-24);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8);
}
.login-button:hover:not(:disabled) { background: var(--c-primary-h); }
.login-button:active:not(:disabled) { background: var(--c-info); }
.login-button:disabled { background: var(--lg-btn-disabled); color: var(--lg-muted); cursor: not-allowed; }
.login-button .spinner { display: none; }
.login-button.loading .spinner { display: inline-block; }
.login-button.loading .button-text { display: none; }

.spinner {
    width: 16px; height: 16px;
    border: 2px solid transparent; border-top: 2px solid currentColor;
    border-radius: var(--r-pill); animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Alerts */
.alert {
    padding: var(--s-12) 14px; border-radius: var(--r-sm); margin-bottom: var(--s-16);
    font-size: var(--f-control); display: flex; align-items: center; gap: var(--s-10); line-height: 1.4;
    animation: slideIn .3s ease-out;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.alert i { flex-shrink: 0; }
/* Per-type fill — semantic tokens (light bg + matching text/icon via currentColor).
   Green = success, red = error, amber = warning. */
.alert-success { background: var(--c-success-bg); color: var(--c-success); }
.alert-error   { background: var(--c-danger-bg);  color: var(--c-danger); }
.alert-warning { background: var(--c-warn-bg);    color: var(--c-warn); }

/* ============================================================
   FOOTER
   ============================================================ */
.login-footer {
    flex-shrink: 0;
    text-align: center; max-width: 420px;
    color: var(--lg-muted); font-size: var(--f-meta); line-height: var(--lh-body);
}
.login-footer-terms { margin-bottom: var(--s-16); }
.login-footer-legal { display: flex; align-items: center; justify-content: center; gap: var(--s-16); }
.login-footer a {
    color: var(--lg-link); text-decoration: underline; text-underline-offset: 2px;
    transition: color var(--dur-interaction) ease;
}
.login-footer a:hover { color: var(--lg-ink); }

@media (max-width: 600px) {
    .login-container { padding: var(--s-32) var(--s-16); }
}