/* Original desktop login is retained. Approved redesign applies below 768px only. */
.erp-login-page .login-mobile-only { display: none; }
@media (max-width: 767px) {
/* Login only: approved company-branded mobile layout. */
.erp-login-page {
    --login-bg: #fff; --login-panel: #fff; --login-text: #1d2939; --login-muted: #667085;
    --login-border: #d0d5dd; --login-green: #067647; --login-soft: #e7f5ec;
    box-sizing: border-box; display: flex; justify-content: center; align-items: center;
    width: 100%; min-height: 100vh; min-height: 100svh; padding: 32px 20px;
    background: #fff;
    color: var(--login-text); font-family: Outfit, 'Segoe UI', sans-serif;
}

.dark .erp-login-page { background: #fff; }
.erp-login-page *, .erp-login-page *::before, .erp-login-page *::after { box-sizing: border-box; }
.erp-login-page .login-shell { width: 100%; max-width: 420px; min-width: 0; }
.erp-login-page .login-brand { display: flex; justify-content: center; margin-bottom: 22px; }
.erp-login-page .login-logo-surface { display: grid; place-items: center; padding: 10px 18px; border-radius: 18px; background: #fff; }
.erp-login-page .login-company-logo { display: block; width: 138px; height: 90px; object-fit: contain; }
.erp-login-page .login-card { padding: 28px 26px; border: 1px solid var(--login-border); border-radius: 20px; background: var(--login-panel); box-shadow: 0 10px 30px #00000006; }
.erp-login-page .login-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; color: var(--login-green); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.erp-login-page .login-eyebrow svg { flex-shrink: 0; }
.erp-login-page h1 { margin: 0 0 5px; font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: -.5px; }
.erp-login-page .login-subtitle { margin: 0 0 26px; color: var(--login-muted); font-size: 13px; line-height: 1.5; }
.erp-login-page #LoginForm { margin-top: 0; }
.erp-login-page #LoginForm > div { margin-top: 0 !important; margin-bottom: 18px; }
.erp-login-page #LoginForm > div:last-child { margin-top: 24px !important; margin-bottom: 0; }
.erp-login-page #LoginForm label { display: block; margin-bottom: 7px; color: var(--login-text); font-size: 13px; line-height: 20px; font-weight: 500; }
.erp-login-page #LoginForm input:not([type="hidden"]), .erp-login-page #LoginForm select {
    display: block; width: 100%; max-width: 100%; height: 48px; min-height: 48px;
    padding: 11px 13px; border: 1px solid var(--login-border); border-radius: 8px;
    background: var(--login-panel); color: var(--login-text); font-size: 16px; line-height: 24px;
}
.erp-login-page #LoginForm input::placeholder { color: var(--login-muted); font-size: 14px; }
.erp-login-page #LoginForm input:focus, .erp-login-page #LoginForm select:focus { border-color: var(--login-green); outline: 2px solid var(--login-soft); outline-offset: 1px; }
.erp-login-page .login-input-wrap { position: relative; }
.erp-login-page .login-input-wrap > svg { position: absolute; left: 13px; right: auto; top: 16px; width: 16px; height: 16px; pointer-events: none; }
.erp-login-page #LoginForm input[name="txtusername"] { padding-left: 40px; }
.erp-login-page #LoginForm input[name="txtpassword"] { padding-right: 48px; }
.erp-login-page .login-input-wrap > button {
    position: absolute; right: 2px; top: 2px; transform: none; display: flex; align-items: center;
    justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 7px;
    background: transparent; color: var(--login-muted);
}
.erp-login-page .login-input-wrap > button:hover { background: var(--login-soft); }
.erp-login-page #btnSignIn {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px;
    padding: 12px 16px; border: 1px solid #067647; border-radius: 10px; background: #067647;
    color: #fff; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: normal;
    box-shadow: 0 4px 10px #06764718;
}
.erp-login-page #btnSignIn:hover { background: #085d3a; }
.erp-login-page button:focus-visible { outline: 2px solid var(--login-green); outline-offset: 3px; }
.erp-login-page .login-footer { display: grid; gap: 5px; margin-top: 24px; text-align: center; color: var(--login-muted); font-size: 12px; line-height: 18px; }
.erp-login-page .login-company-name { overflow-wrap: anywhere; }
.erp-login-page [hidden], .erp-login-page input[type="hidden"] { display: none !important; }
@media (max-width: 480px) {
    .erp-login-page { align-items: flex-start; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
    .erp-login-page .login-card { padding: 26px 22px; }
}
@media (max-width: 360px) {
    .erp-login-page { padding-inline: 14px; }
    .erp-login-page .login-card { padding-inline: 18px; }
}
@media (max-height: 600px) { .erp-login-page { align-items: flex-start; } }

.erp-login-page .login-mobile-only { display: block; }
.erp-login-page .login-brand.login-mobile-only { display: flex; }
.erp-login-page .login-desktop-heading, .erp-login-page .login-desktop-brand { display: none; }
.erp-login-page .login-layout, .erp-login-page .login-form-column, .erp-login-page .login-form-background { display: contents; }
.erp-login-page .login-mobile-stack { display: block; min-height: 0; width: 100%; max-width: 420px; padding: 0; }
.erp-login-page .login-footer { width: 100%; margin-top: 24px !important; }
.erp-login-page .login-footer > label { color: var(--login-muted) !important; font-size: 12px !important; line-height: 18px; }
.erp-login-page .login-input-wrap > span { right: 2px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
}