/* Login split-screen styles (ported from the Botica SaaS conversion) — used only by login.php */
:root { --radius-sm: 6px; }

/* ===== Login split-screen SaaS sign-in (page-login only) ===== */
body.page-login { margin: 0; background: var(--bg-primary); }
.lg-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

/* --- LEFT: brand + product story --- */
.lg-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 48px 56px; background: linear-gradient(160deg, #001529 0%, #001f3f 46%, #003366 100%); color: #fff; }
/* accent glow + clinical dot grid, drawn in css so the page loads with no image request */
.lg-brand::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
    radial-gradient(circle at 84% 10%, rgba(0,116,217,.42), transparent 46%),
    radial-gradient(circle at 6% 92%, rgba(0,116,217,.20), transparent 44%); }
.lg-brand::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 76%);
    mask-image: radial-gradient(circle at 50% 38%, #000 26%, transparent 76%); }
.lg-brand > * { position: relative; z-index: 1; }

.lg-brand-top { display: flex; align-items: center; gap: 13px; }
.lg-brand-logo { width: 44px; height: 44px; border-radius: 3px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.lg-brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.lg-brand-name { font-size: 17px; font-weight: 700; letter-spacing: .2px; }

.lg-brand h1 { margin: 0 0 14px; font-size: 38px; line-height: 1.18; font-weight: 700; letter-spacing: -.5px; }
.lg-brand-lede { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.76); max-width: 46ch; }

.lg-feats { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.lg-feats li { display: flex; align-items: flex-start; gap: 15px; }
.lg-feat-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 3px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.17); display: grid; place-items: center; font-size: 16px; }
.lg-feat-t { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.lg-feat-d { display: block; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.66); }

.lg-brand-foot { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.lg-trust { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.7); }
.lg-trust i { color: rgba(255,255,255,.9); }

/* --- AI assistant promo (left panel) --- */
.lg-ai { position: relative; display: flex; align-items: flex-start; gap: 14px; margin: 28px 0 0; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: linear-gradient(135deg, rgba(0,116,217,.30), rgba(124,58,237,.16) 70%, rgba(0,116,217,.10)); box-shadow: 0 14px 34px rgba(0,0,0,.20); }
.lg-ai::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 46%, transparent 62%); }
.lg-ai-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: #fff; background: linear-gradient(135deg, #0074d9, #7c3aed); box-shadow: 0 0 0 5px rgba(0,116,217,.18), 0 8px 20px rgba(0,0,0,.24); }
.lg-ai-body { display: block; min-width: 0; }
.lg-ai-t { display: block; font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.lg-ai-t i { color: #ffd66b; margin-right: 6px; }
.lg-ai-d { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.7); }
.lg-ai-badge { position: absolute; top: -10px; right: 14px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: #1a2b4a; background: linear-gradient(90deg, #ffd66b, #ffb020); box-shadow: 0 4px 12px rgba(255,176,32,.45); }
.lg-ai-badge i { display: none; }

/* --- AI assistant mini-chip (form panel, mobile only) --- */
.lg-ai-mini { display: none; align-items: center; gap: 9px; margin: 0 0 18px; padding: 10px 13px; font-size: 13px; font-weight: 600; color: var(--text-primary); border: 1px solid rgba(0,116,217,.35); background: linear-gradient(135deg, rgba(0,116,217,.10), rgba(124,58,237,.10)); border-radius: 8px; }
.lg-ai-mini > i.fa-robot { color: var(--navy-accent); }
.lg-ai-mini-new { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #7a4a00; background: linear-gradient(90deg, #ffd66b, #ffb020); white-space: nowrap; }

/* --- RIGHT: the form --- */
.lg-panel { display: flex; align-items: center; justify-content: center; padding: 44px 28px; background: var(--bg-primary); }
.lg-card { width: 100%; max-width: 424px; }
.lg-mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 26px; }
.lg-mobile-logo { width: 44px; height: 44px; border-radius: 3px; overflow: hidden; background: var(--navy-primary); display: grid; place-items: center; flex: 0 0 auto; }
.lg-mobile-logo img { width: 100%; height: 100%; object-fit: cover; }
.lg-mobile-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-mobile-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.lg-mobile-tag { font-size: 12px; color: var(--text-muted); line-height: 1.35; }

.lg-title { margin: 0 0 7px; font-size: 27px; font-weight: 700; color: var(--text-primary); letter-spacing: -.3px; }
.lg-sub { margin: 0 0 26px; font-size: 14px; color: var(--text-muted); }

.lg-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.55; border-radius: var(--radius-sm); border: 1px solid transparent; }
.lg-alert i { margin-top: 2px; }
.lg-alert-err { background: rgba(234,67,53,.09); border-color: rgba(234,67,53,.3); color: #b3261e; }
.lg-alert-ok { background: rgba(52,168,83,.1); border-color: rgba(52,168,83,.32); color: #1e6b34; }
.lg-alert-warn { background: rgba(251,188,4,.14); border-color: rgba(251,188,4,.4); color: #8a6500; }
.lg-alert a { color: inherit; font-weight: 700; }
body.dark-mode .lg-alert-err { color: #ff9d95; }
body.dark-mode .lg-alert-ok { color: #7ee2a0; }
body.dark-mode .lg-alert-warn { color: #ffd24d; }

.lg-field { margin-bottom: 16px; }
.lg-field > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.lg-input-wrap { position: relative; display: block; }
.lg-input-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; pointer-events: none; }
.lg-input { width: 100%; height: 50px; padding: 0 16px 0 42px; font-size: 16px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--text-primary); transition: border-color .18s, box-shadow .18s; }
.lg-input::placeholder { color: var(--text-muted); }
.lg-input:focus { outline: none; border-color: var(--navy-accent); box-shadow: 0 0 0 3px rgba(0,116,217,.14); }
.lg-input-pw { padding-right: 48px; }
.lg-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none; border-radius: 3px; background: transparent; color: var(--text-muted); font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.lg-eye:hover { color: var(--navy-accent); background: rgba(0,116,217,.08); }
.lg-caps { display: none; align-items: center; gap: 8px; margin-top: 9px; font-size: 12.5px; color: #8a6500; }
.lg-caps.on { display: flex; }
body.dark-mode .lg-caps { color: #ffd24d; }
.lg-field-help { display: block; margin-top: 7px; font-size: 12px; color: var(--text-muted); }

.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 22px; }
.lg-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.lg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-check-box { width: 19px; height: 19px; border-radius: 3px; border: 1.5px solid var(--input-border); background: var(--input-bg); display: grid; place-items: center; color: transparent; font-size: 10px; transition: background .16s, border-color .16s, color .16s; }
.lg-check input:checked + .lg-check-box { background: var(--navy-accent); border-color: var(--navy-accent); color: #fff; }
.lg-check input:focus-visible + .lg-check-box { box-shadow: 0 0 0 3px rgba(0,116,217,.2); }

.lg-btn { width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: var(--radius-sm); background: var(--navy-primary); color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .18s, transform .1s; }
.lg-btn:hover:not(:disabled) { background: var(--navy-light); }
.lg-btn:active:not(:disabled) { transform: translateY(1px); }
.lg-btn:disabled { background: var(--border-color); color: var(--text-muted); cursor: not-allowed; }

.lg-div { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: 12.5px; color: var(--text-muted); }
.lg-div::before, .lg-div::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.lg-google { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .18s, background .18s; }
.lg-google:hover { border-color: var(--navy-accent); background: rgba(0,116,217,.05); }

.lg-foot { margin-top: 26px; text-align: center; }
.lg-foot-line { margin: 0 0 10px; font-size: 14px; color: var(--text-secondary); }
.lg-link { color: var(--navy-accent); font-weight: 600; text-decoration: none; }
.lg-link:hover { text-decoration: underline; }
.lg-copy { margin: 0; font-size: 12px; color: var(--text-muted); }

@media (max-width: 980px) {
    .lg-shell { grid-template-columns: 1fr; }
    .lg-brand { display: none; }
    .lg-mobile-brand { display: flex; }
    .lg-ai-mini { display: flex; }
    .lg-panel { padding: 34px 20px; align-items: flex-start; }
}
@media (max-width: 420px) {
    .lg-title { font-size: 23px; }
    .lg-panel { padding: 26px 16px; }