/* =====================================================================
   The login page (core::views::login, also in the floating window to log
   in again): its own stylesheet, after common.css (its tokens).
   ===================================================================== */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--color-chrome-bg), var(--color-chrome-alt));
}

.login-card {
    background: var(--color-surface);
    padding: 40px;
    border-radius: var(--radius-lg);
    width: 320px;
    box-shadow: var(--shadow-lg);
}

/* In the floating window (login again): the card alone fills it. */
html[data-in-popup] .login-body { min-height: 0; display: block; background: var(--color-surface); margin: 0; }
html[data-in-popup] .login-card { width: auto; padding: 24px 28px; border-radius: 0; box-shadow: none; }
.login-card h1 { margin: 0 0 4px; }
/* Logo of the company of the address, in place of "ERP". */
.login-card h1.login-company { margin: 0 0 8px; line-height: 0; }
.login-company-logo { display: block; max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.login-card .subtitle { color: var(--color-muted); margin: 0 0 20px; }
.login-card form { display: flex; flex-direction: column; gap: 6px; }
.login-card label { font-size: var(--text-sm); color: var(--color-muted); margin-top: 8px; }
.login-card button {
    margin-top: 16px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: none;
    padding: 10px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}
.login-card button:hover { background: var(--color-accent-text); color: var(--color-on-strong); }
.login-logo {
    display: block;
    height: 32px;
    width: auto;
    margin: 24px auto 0;
}
/* Deux fichiers réels (noir / blanc fournis), pas une approximation par
   filtre CSS : on affiche l'un ou l'autre selon le thème actif. Par
   défaut (thème clair) : logo noir visible, logo blanc masqué. */
.login-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .login-logo-light { display: none; }
    :root:not([data-theme="light"]) .login-logo-dark { display: block; }
}
:root[data-theme="dark"] .login-logo-light { display: none; }
:root[data-theme="dark"] .login-logo-dark { display: block; }