/* ==========================================================================
   login.css — CSS เฉพาะหน้าเข้าสู่ระบบ (ไม่ใช้ app shell)
   ========================================================================== */

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;

    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(79, 70, 229, 0.25), transparent),
        radial-gradient(1000px 500px at 110% 110%, rgba(124, 58, 237, 0.2), transparent),
        var(--app-bg);
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
}

.login-card {
    padding: 32px;

    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}

.login-brand {
    text-align: center;
    margin-bottom: 24px;
}

.login-brand-icon {
    display: inline-grid;
    place-items: center;

    width: 56px;
    height: 56px;
    border-radius: 16px;

    background: var(--app-primary);
    color: #fff;
    font-size: 26px;
}

.login-brand h1 {
    margin: 12px 0 2px;
    font-size: 20px;
    font-weight: 700;
}

.login-brand p {
    margin: 0;
    font-size: 13.5px;
    color: var(--app-text-muted);
}

.login-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--app-border);

    text-align: center;
    font-size: 12.5px;
    color: var(--app-text-muted);
}

.login-card .form-label {
    font-size: 13.5px;
    font-weight: 500;
}

.login-password-toggle {
    display: grid;
    place-items: center;
    min-width: 44px;
    color: var(--app-text-muted);
    border-color: var(--bs-border-color, #dee2e6);
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    color: var(--app-primary);
    background: #eef2ff;
    border-color: var(--app-primary);
}