/* Sign-in screen only (Views/Account/Login.cshtml). Reuses app.css's colour tokens (--g, --ink, --sub, --line, --bg)
   so the page matches the rest of the CRM, but the two-column layout below is specific to this screen. */

html, body { height: 100%; }
body { margin: 0; background: var(--bg); }

.auth-shell { min-height: 100vh; display: flex; }

/* ---- left: brand / hero / illustration ---- */
.auth-visual { flex: 1.1; position: relative; overflow: hidden; padding: 44px 56px; display: flex; flex-direction: column; background: #fbfdfc; }
/* Scoped as .auth-visual .auth-blob (specificity 0,2,0) so it always wins over the generic .auth-visual > * content
   rule below - both set `position`, and if the blobs lost `absolute` to that rule they'd become huge flex items
   and push the logo/hero/illustration off-screen. */
.auth-visual .auth-blob { position: absolute; border-radius: 50%; background: var(--g-l); filter: blur(2px); z-index: 0; }
.auth-blob.b1 { width: 460px; height: 460px; top: -160px; right: -140px; opacity: .8; }
.auth-blob.b2 { width: 300px; height: 300px; bottom: -120px; right: 120px; background: #eaf3ff; opacity: .7; }
.auth-blob.b3 { width: 180px; height: 180px; bottom: 60px; left: -60px; background: var(--g-l); opacity: .6; }

.auth-visual > * { position: relative; z-index: 1; }
.auth-visual > .auth-blob { position: absolute; z-index: 0; }
.auth-logo { font-size: 26px; font-weight: 800; color: var(--ink); }
.auth-logo b { color: var(--g); font-style: normal; }
.auth-logo-tag { font-size: 11px; color: var(--sub); margin-top: 2px; letter-spacing: .2px; }

.auth-hero { margin-top: 64px; max-width: 480px; }
.auth-hero h1 { margin: 0; font-size: 42px; line-height: 1.15; letter-spacing: -.5px; }
.auth-hero h1 .navy { color: var(--ink); }
.auth-hero h1 .green { color: var(--g); display: block; }
.auth-hero p { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--sub); max-width: 380px; }

.auth-illustration { margin-top: auto; padding-top: 30px; }
.auth-illustration svg { width: 100%; height: auto; max-width: 460px; display: block; }

/* ---- right: the sign-in card ---- */
.auth-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: #fff; overflow-y: auto; }
.auth-card { width: 100%; max-width: 400px; margin: auto 0; }
.auth-card h2 { margin: 0 0 4px; font-size: 26px; color: var(--ink); }
.auth-card .lead { margin: 0 0 20px; color: var(--sub); font-size: 13.5px; }

.field-icon { position: relative; margin-bottom: 12px; }
/* Direct-child combinator (>) is deliberate: this must only reach the mail/lock icon that sits straight inside
   .field-icon, never the eye/eye-off icons nested one level deeper inside .toggle-visibility. Those icons are NOT
   direct children, so this rule leaving them alone is what lets the button size itself around them normally
   (see .toggle-visibility below) instead of collapsing to a near-invisible hit target. */
.field-icon > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--sub); pointer-events: none; }
.field-icon input.in { width: 100%; padding: 12px 40px; }
.field-icon input.in:focus + svg, .field-icon:focus-within > svg { color: var(--g); }

.toggle-visibility { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--sub); cursor: pointer; }
.toggle-visibility:hover { background: #f3f6f4; color: var(--ink); }
.toggle-visibility:focus-visible { outline: 2px solid var(--g); outline-offset: 1px; }
.toggle-visibility svg { display: block; pointer-events: none; }
.toggle-visibility svg.eye-off { display: none; }
.field-icon.pw-visible .toggle-visibility svg.eye { display: none; }
.field-icon.pw-visible .toggle-visibility svg.eye-off { display: block; }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 16px; font-size: 12.5px; }
.auth-row label { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; margin: 0; color: var(--ink); cursor: pointer; }
.auth-row a { color: var(--g); font-weight: 700; text-decoration: none; }
.auth-row a:hover { text-decoration: underline; }

.btn-arrow { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-size: 13.5px; }
.btn-arrow svg { transition: transform .15s; }
.btn-arrow:hover svg { transform: translateX(3px); }

.auth-devnote { margin-top: 20px; padding: 10px 12px; background: var(--g-l); border: 1px solid var(--g-b); border-radius: 8px; font-size: 11px; color: #0f6e3f; line-height: 1.5; }
.auth-devnote code { background: rgba(255,255,255,.6); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 900px) {
  .auth-visual { display: none; }
  .auth-panel { padding: 40px 20px; }
}