/**
 * Login page — a single clean centered card.
 *
 * The "wow" / brand hero lives on the separate landing page (index.php when
 * logged out, assets/css/pages/landing.css). This page is deliberately quiet:
 * one card, token-driven so it follows the light/dark toggle.
 *
 * The 2026-08-18 dark-mode / autofill / `.form-floating label { height: auto }`
 * fixes are load-bearing — do not strip them when touching this file.
 */

.login-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 32px 20px;
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* Brand lockup above the card, links back to the landing page. */
.login-topbrand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-color);
    text-decoration: none;
}

.login-topbrand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding: 5px;
    border: 1px solid var(--border-color);
}

/* === CARD === */
.login-card {
    width: 100%;
    max-width: min(400px, 100%);
    padding: 36px 34px;
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.login-card-brand {
    margin-bottom: 26px;
}

.login-card-brand h3 {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    font-size: 1.4rem;
    color: var(--text-color);
}

.login-card-brand p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* === FORM === */
.form-floating {
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.form-floating input {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 100%;
    font-size: 1rem;
    /* Explicit color + background - without these, a browser/OS in dark mode
       applies its own dark-UA style to unstyled form controls (light text)
       while the input keeps its white background from nowhere else
       overriding it, rendering typed text invisible (white-on-white).
       color-scheme is set explicitly per theme (below) rather than left to
       the browser's guess, same reasoning - it follows the app-wide
       dark-mode toggle instead of being hardcoded light, since
       --text-color/--bg-card already track that toggle correctly. */
    color: var(--text-color);
    background-color: var(--bg-card);
    color-scheme: light;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

html[data-bs-theme="dark"] .form-floating input {
    color-scheme: dark;
}

/* Browser autofill (saved credentials) ignores the plain color/background-color
   above and paints its own colors directly - same invisible-text risk if left
   unset. -webkit-text-fill-color is the only thing Chromium/WebKit actually
   respects for autofilled text color; the inset box-shadow + long transition
   is the standard trick to override autofill's background. */
.form-floating input:-webkit-autofill,
.form-floating input:-webkit-autofill:hover,
.form-floating input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-color);
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-card) inset;
    box-shadow: 0 0 0px 1000px var(--bg-card) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-floating label {
    position: absolute;
    top: 12px;
    left: 16px;
    /* height: auto is the actual fix here (was the real root cause of the
       reported "can't see what I type" bug): Bootstrap 5.3's own
       .form-floating > label rule (loaded from CDN before this file) sets
       height: 100%, so the label's opaque background painted over the whole
       input and hid typed text. */
    height: auto;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    pointer-events: none;
    background-color: var(--bg-card);
    padding: 0 4px;
}

.form-floating input:focus + label,
.form-floating input:not(:placeholder-shown) + label {
    top: -8px;
    left: 12px;
    font-size: 0.8rem;
    color: var(--brand-color);
}

.form-floating input:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-color-rgb), 0.25);
}

/* === SHOW / HIDE PASSWORD === */
.form-floating-password input {
    padding-right: 44px;
}

.pw-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 42px;
    border: none;
    background: none;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast);
}

.pw-toggle:hover {
    color: var(--text-color);
}

.pw-toggle:focus-visible {
    outline: 2px solid var(--brand-color);
    outline-offset: -2px;
}

/* === REMEMBER ME === */
.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--brand-color);
    cursor: pointer;
}

/* === BUTTON === */
.btn-login {
    width: 100%;
    padding: 12px;
    margin-top: 4px;
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-dark) 100%);
    color: white;
    border: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.btn-login:hover {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-color) 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(var(--brand-color-rgb), 0.35);
}

.btn-login:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-color-rgb), 0.25);
}

.login-hint {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* === ALERT === */
.login-alert {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    background-color: var(--alert-danger-bg);
    border: 1px solid var(--alert-danger-border);
    color: var(--alert-danger-text);
    font-size: 0.9rem;
}

/* === FOOTER === */
.login-foot {
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 576px) {
    .login-card {
        padding: 30px 22px;
        box-shadow: none;
        border: none;
    }
}