/*
 * Нэвтрэх хуудасны хэв маяг.
 *
 * Өмнө нь login.blade.php дотор <style> блокоор байсныг салгав —
 * Blade хувьсагч агуулаагүй тул статик файл болгож, браузерт кэшлэгдэнэ.
 */

.auth_shell, .auth_shell_inner { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important; }

.lg_wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: var(--ux-bg, #eef1f4);
    font-family: "Segoe UI", "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

.lg_card {
    width: 100%; max-width: 380px;
    background: var(--ux-card, #fff);
    border: 1px solid var(--ux-border, #e2e6ea);
    border-radius: 10px;
    padding: 32px 28px;
    box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

.lg_card_head { text-align: center; margin-bottom: 22px; }
.lg_logo {
    width: 52px; height: 52px; border-radius: 8px;
    background: var(--ux-primary, #2563eb); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 800; margin-bottom: 14px;
}
.lg_title { margin: 0 0 5px; font-size: 1.5rem; font-weight: 800; color: var(--ux-text, #1b2430); letter-spacing: -.02em; }
.lg_sub { margin: 0; font-size: .88rem; color: var(--ux-muted, #5c6773); }

.lg_alert { display: flex; flex-direction: column; gap: 4px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 6px; padding: 11px 14px; font-size: .85rem; margin-bottom: 18px; }

.lg_field { margin-bottom: 15px; }
.lg_label { display: block; font-size: .8rem; font-weight: 700; color: var(--ux-text, #1b2430); margin-bottom: 6px; }
.lg_field input, .lg_pass_wrap input {
    width: 100%; height: 46px; box-sizing: border-box; padding: 0 14px;
    border: 1.5px solid var(--ux-border, #dbe0e6); border-radius: 6px;
    font-size: .95rem; color: var(--ux-text, #1b2430); background: var(--ux-card, #fff);
    transition: border-color .15s, box-shadow .15s;
}
.lg_field input::placeholder, .lg_pass_wrap input::placeholder { color: var(--ux-muted, #9aa3ae); }
.lg_field input:focus, .lg_pass_wrap input:focus { outline: none; border-color: var(--ux-primary, #2563eb); box-shadow: var(--ux-ring, 0 0 0 3px rgba(37,99,235,.15)); }

.lg_pass_wrap { position: relative; }
.lg_pass_wrap input { padding-right: 42px; }
.lg_eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 8px; color: var(--ux-muted, #94a3b8); cursor: pointer; }
.lg_eye:hover { color: var(--ux-primary, #2563eb); }
.lg_eye svg { width: 18px; height: 18px; }

/* Талбарын бичвэрийг курсороор чөлөөтэй сонгоно (Ctrl+C-ээр хуулна). */
.lg_field input, .lg_pass_wrap input { user-select: text; -webkit-user-select: text; }

.lg_row { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 20px; }
.lg_check { display: inline-flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--ux-muted, #475569); cursor: pointer; user-select: none; }
.lg_check input { width: 16px; height: 16px; accent-color: var(--ux-primary, #2563eb); cursor: pointer; }
.lg_forgot { font-size: .87rem; font-weight: 600; color: var(--ux-primary, #2563eb); text-decoration: none; }
.lg_forgot:hover { text-decoration: underline; }

.lg_submit { width: 100%; height: 48px; border: none; border-radius: 6px; background: var(--ux-primary, #2563eb); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .15s, transform .08s; }
.lg_submit:hover { background: var(--ux-primary-dark, #1e50c0); }
.lg_submit:active { transform: scale(.99); }

/* ===== Харанхуй горим =====
   Токенууд (--ux-card, --ux-text г.м) enhance.css-д тодорхойлогдсон бөгөөд
   login хуудсанд ч ачаалагддаг тул card/input/text автоматаар дасна. Доор
   зөвхөн токеноор гүйцэд хамрагдахгүй нарийн зүйлсийг (сүүдэр, alert) засна. */
html[data-theme="dark"] .lg_card { box-shadow: 0 8px 30px rgba(0,0,0,.4); }
html[data-theme="dark"] .lg_alert { background: #450a0a; border-color: #7f1d1d; color: #fca5a5; }

/* ===== Нууц үг сэргээх модал ===== */
.fp_modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 20px; }
.fp_modal[hidden] { display: none; }
.fp_backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.fp_box {
    position: relative; width: 100%; max-width: 400px;
    background: var(--ux-card, #fff); border: 1px solid var(--ux-border, #e2e6ea);
    border-radius: 14px; box-shadow: 0 20px 50px rgba(15,23,42,.25); overflow: hidden;
}
.fp_head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ux-border, #e2e6ea); }
.fp_head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ux-text, #1b2430); }
.fp_x { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--ux-muted, #94a3b8); line-height: 1; padding: 4px; }
.fp_x:hover { color: var(--ux-text, #1b2430); }
.fp_body { padding: 18px; }
.fp_note { margin: 0 0 14px; font-size: .86rem; color: var(--ux-muted, #64748b); line-height: 1.5; }
.fp_note b { color: var(--ux-primary, #2563eb); word-break: break-all; }
.fp_field { margin-bottom: 13px; }
.fp_field label { display: block; font-size: .8rem; font-weight: 600; color: var(--ux-text, #1b2430); margin-bottom: 5px; }
.fp_input {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid var(--ux-border, #e2e6ea); border-radius: 8px;
    background: var(--ux-bg, #fff); color: var(--ux-text, #1b2430); font-size: .92rem;
    transition: border-color .14s, box-shadow .14s;
}
.fp_input:focus { outline: none; border-color: var(--ux-primary, #2563eb); box-shadow: 0 0 0 3px rgba(20,71,122,.12); }
.fp_code { font-family: ui-monospace, monospace; font-size: 1.4rem; font-weight: 700; letter-spacing: .5em; text-align: center; padding-left: .5em; }
.fp_hint { display: block; margin-top: 5px; font-size: .78rem; color: var(--ux-muted, #94a3b8); }
.fp_resend { background: none; border: none; padding: 0; cursor: pointer; color: var(--ux-primary, #2563eb); font-weight: 700; font-size: .78rem; text-decoration: underline; }
.fp_err { display: block; margin-top: 10px; font-size: .8rem; color: #dc2626; font-weight: 600; }
/* `display: block` нь хөтчийн `hidden` (display: none)-ыг дардаг тул алдааны
   мөр хоосон ч гэсэн зай эзэлж үлддэг байв. */
.fp_err[hidden] { display: none; }
.fp_foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 18px; border-top: 1px solid var(--ux-border, #e2e6ea); }
.fp_cancel, .fp_ok {
    padding: 9px 16px; border-radius: 8px; font-size: .87rem; font-weight: 700; cursor: pointer;
    border: 1px solid var(--ux-border, #e2e6ea); background: var(--ux-card, #fff); color: var(--ux-text, #1b2430);
    transition: filter .13s, opacity .13s;
}
.fp_ok { background: var(--ux-primary, #2563eb); color: #fff; border-color: transparent; }
.fp_ok:hover:not(:disabled) { filter: brightness(1.08); }
.fp_ok:disabled { opacity: .55; cursor: not-allowed; }
.fp_cancel:hover { background: var(--ux-surface, #f1f5f9); }
html[data-theme="dark"] .fp_input { background: #0f1d33; }