/*
 * Standalone portal login/auth-page styling — split brand panel + card form.
 * Shared visual language with customer_portal/login.html's inline styles
 * (same tokens, same layout classes); this file is the externalized version
 * used by pages that can't inline hex per DESIGN_STANDARDS (Rule 2).
 *
 * Primary/secondary are swapped relative to the customer portal (purple
 * leads here, orange there) — same two brand colors, just a different
 * emphasis, so the two portals read as distinct at a glance without
 * introducing a third color. The "Nirvana" wordmark itself stays the fixed
 * brand orange in both (logo identity, not a themeable accent).
 */

:root {
  --primary:#673AB7; --primary-hover:#5C2E9E; --primary-soft:#EDE5F8;
  --secondary:#CC5500; --secondary-soft:#FCE7D6; --highlight:#FFD54F;
  --ink:#212121; --ink-soft:#2E2E2E; --text:#212121; --text-2:#4A4A4A;
  --text-3:#6B7280; --border:#E6E6E6; --gray-light:#F5F5F5; --danger:#dc2626;
  --radius:4px;
  --serif:'Times New Roman',Times,serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
* { box-sizing:border-box; }
html, body {
  margin:0; padding:0; min-height:100vh;
  background:var(--gray-light);
  font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* Split layout */
.login-shell { display:flex; min-height:100vh; }
.login-brand-panel {
  width:440px; flex-shrink:0;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:3rem 2.75rem; color:#fff;
}

.brand-logo { --logo-size:46px; display:inline-flex; flex-direction:column; align-items:center; text-decoration:none; line-height:1; }
.brand-row { display:inline-flex; align-items:baseline; }
.brand-word { font-family:'Outfit',var(--sans); font-weight:500; letter-spacing:-.04em; font-size:var(--logo-size); color:#FF7B33; line-height:1; }
.brand-vmark { flex-shrink:0; width:calc(var(--logo-size)*.71); height:calc(var(--logo-size)*.5); margin:0 0 0 calc(var(--logo-size)*.107); }
.brand-tech { margin-top:calc(var(--logo-size)*.143); font-family:var(--mono); font-size:calc(var(--logo-size)*.214); color:var(--highlight); text-transform:uppercase; letter-spacing:.35em; padding-left:.35em; }
.brand-portal-label { margin-top:.85rem; font-family:var(--mono); font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.78); }

.brand-tagline { margin-top:auto; padding-top:3rem; }
.brand-tagline h2 { font-family:var(--serif); font-weight:400; font-size:2rem; line-height:1.12; margin:0 0 1rem; letter-spacing:-.02em; }
.brand-tagline h2 em { font-style:italic; color:var(--primary); }
.brand-tagline p { font-size:.9rem; color:rgba(255,255,255,.72); margin:0; }
.brand-features { list-style:none; padding:0; margin:1.75rem 0 0; display:flex; flex-direction:column; gap:.7rem; }
.brand-features li { display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:rgba(255,255,255,.85); }
.brand-features li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0; }
.brand-footer { font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:rgba(255,255,255,.4); padding-top:2.5rem; }

/* Form panel */
.login-form-panel { flex:1; display:flex; align-items:center; justify-content:center; padding:2rem 1.5rem; }
.login-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 30px rgba(16,24,40,.08);
  padding:2.5rem 2.5rem; width:100%; max-width:420px;
}
.login-heading { font-family:var(--serif); font-weight:400; font-size:1.8rem; color:var(--ink); margin:0 0 .35rem; letter-spacing:-.02em; }
.login-sub { font-size:.9rem; color:var(--text-3); margin:0 0 1.75rem; }

.form-group { margin-bottom:1.1rem; }
label { font-family:var(--mono); font-size:.66rem; font-weight:500; color:var(--text-2); text-transform:uppercase; letter-spacing:.12em; display:block; margin-bottom:.4rem; }
input[type=email], input[type=password], input[type=text] {
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:.7rem .9rem; font-size:.95rem; font-family:var(--sans);
  outline:none; transition:border-color .12s, box-shadow .12s;
}
input:focus { border-color:var(--secondary); box-shadow:0 0 0 3px var(--secondary-soft); }
input.error-input { border-color:var(--danger); }

.btn-login {
  width:100%; background:var(--primary); color:#fff;
  border:none; border-radius:var(--radius); padding:.8rem 1rem;
  font-size:.95rem; font-weight:600; font-family:var(--sans);
  cursor:pointer; transition:background .15s; margin-top:.6rem;
}
.btn-login:hover { background:var(--primary-hover); }
.btn-login:disabled { opacity:.55; cursor:not-allowed; }

.error-msg { background:#fef2f2; border:1px solid rgba(220,38,38,.25); border-radius:var(--radius); padding:.7rem .9rem; font-size:.85rem; color:var(--danger); margin-bottom:1.1rem; display:flex; align-items:center; gap:.5rem; }
.form-links { display:flex; justify-content:flex-end; margin-top:.4rem; font-size:.8rem; }
.form-links a { color:var(--text-3); text-decoration:none; }
.form-links a:hover { color:var(--primary); }

.divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0; }
.login-help { font-size:.82rem; color:var(--text-3); text-align:center; margin-top:1rem; }
.login-help a { color:var(--primary); }

@media (max-width:740px) {
  .login-brand-panel { display:none; }
  .login-form-panel { background:var(--gray-light); }
}