/* Login page — dark theme, centered card.
 *
 * Scoped to `body.login-page` so the rest of the design system
 * (light HMI surfaces like /admin, /crm) keeps its tokens.css
 * defaults. The dark palette overrides 8 token custom properties
 * inside this scope; everything else is just layout.
 *
 * Layout: [ centered login-card on dark page ]
 *   login-card:
 *     [ h1 "ENP Estimator — Sign in" ]
 *     [ subtitle ]
 *     [ error (conditional, one of 4 error codes) ]
 *     [ label + username input ]
 *     [ label + password input ]
 *     [ submit button ]
 *     [ info (lockout copy) ]
 *
 * /login is intentionally a clean shell: no _topbar.html, no
 * sidebar — just the card. The HMI-session hook in app.py
 * short-circuits /login and /logout before redirecting
 * unauthenticated requests, so the page is reachable without a
 * session. The same dark palette as /, /chat, and /board makes
 * the HMI feel like one product.
 */

body.login-page {
    /* Dark palette override — matches body.chat-page,
     * body.kanban-page, and body.landing-page exactly so the
     * entire HMI feels like one product. Tokens cascade into
     * every component on this page. */
    --bg: #0e0e10;
    --bg-elevated: #161618;
    --line: #26262a;
    --line-strong: #3a3a3e;
    --ink: #fafafa;
    --ink-muted: #a1a1aa;
    --brand-red: #f87171;
    --brand-red-soft: rgba(248, 113, 113, 0.14);

    * { box-sizing: border-box; }

    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
}

/* --- Card ------------------------------------------------------------- */

.login-card {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--sp-6) var(--sp-7);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    width: 360px;
    max-width: 100%;
    display: block;
}

h1 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--sp-1) 0;
}

.subtitle {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    margin: 0 0 var(--sp-5) 0;
}

/* --- Form fields ------------------------------------------------------ */

label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    margin-bottom: var(--sp-1);
}

input[type="text"],
input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-family: var(--font-body);
    margin-bottom: var(--sp-3);
    background: var(--bg);
    color: var(--ink);
    transition: border-color var(--motion-fast);
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: 2px solid var(--brand-red);
    outline-offset: -1px;
    border-color: var(--brand-red);
}

button {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    /* The shared --brand-red (#f87171) is softened for visual use on
     * dark surfaces and only gives white text ~2.7:1 contrast —
     * fails WCAG AA. /login is the auth gate and this button is the
     * highest-stakes CTA in the HMI, so use the darker red as the
     * base (≈5.2:1 white text) and even darker on hover. */
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--motion-fast);
}

button:hover {
    background: #b91c1c;
}

button:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 2px;
}

/* --- Error + info banners --------------------------------------------- */

.error {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    border: 1px solid var(--brand-red);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.info {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-top: var(--sp-4);
}

.info code {
    font-family: var(--font-mono);
    font-size: 0.95em;
    background: var(--bg);
    padding: 1px 4px;
    border-radius: 3px;
}