/* ============================================================
   Modurel Identity — Authentication theme
   Split-screen brand panel + form column, social providers.

   Component styles ONLY. The design tokens this file consumes live in
   wwwroot/css/tokens/ and are linked separately by the layouts:
     tokens/core.css           neutral / structural, brand-independent
     tokens/brand-modurel.css  the default brand hue (`:root`)
     tokens/brand-modurel-send.css `[data-brand="modurel-send"]` override

   They were split out of this file so the Astro marketing site can import
   the exact same bytes instead of keeping a hand-synced copy — the drift
   that made three divergent palettes of what should have been one.

   The `data-brand` attribute is set on <html> by
   Pages/Account/_AuthLayout.cshtml from the resolved ClientBrand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------------- base reset for auth pages ---------------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { height:100%; }
body.bn-auth-body {
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.5;
  color:var(--text-primary);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.bn-auth-body a { color:var(--text-link); text-decoration:none; }
.bn-auth-body a:hover { text-decoration:underline; }

@keyframes bn-float { 0%,100%{transform:translate(0,0)} 50%{transform:translate(0,-18px)} }
@keyframes bn-rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* ---------------- split-screen shell ---------------- */
.bn-auth { display:flex; min-height:100vh; width:100%; background:var(--bg-app); }

/* Left brand panel */
.bn-brand {
  position:relative; flex:1.05 1 0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 56px; background:var(--grad-brand);
}
.bn-brand__wash {
  position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,0.16), transparent 60%),
             radial-gradient(80% 60% at 0% 100%, rgba(8,18,28,0.45), transparent 60%);
}
.bn-brand__orb {
  position:absolute; width:340px; height:340px; right:-80px; top:140px; border-radius:50%;
  background:rgba(255,255,255,0.12); filter:blur(40px); animation:bn-float 9s ease-in-out infinite;
}
.bn-brand__dots {
  position:absolute; inset:0; opacity:0.16;
  background-image:radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.bn-brand__lockup { position:relative; display:flex; align-items:center; gap:12px; }
.bn-brand__lockup img { filter:drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
.bn-brand__name { font-family:var(--font-brand); font-size:24px; font-weight:600; letter-spacing:0.005em; color:#fff; }

.bn-brand__copy { position:relative; max-width:460px; }
.bn-brand__copy h1 { margin:0 0 16px; font-size:var(--text-4xl); line-height:1.1; font-weight:700; letter-spacing:-0.02em; color:#fff; }
.bn-brand__copy p.lead { margin:0 0 30px; font-size:var(--text-lg); line-height:1.5; color:rgba(255,255,255,0.82); }
.bn-points { display:flex; flex-direction:column; gap:16px; }
.bn-point { display:flex; align-items:center; gap:13px; }
.bn-point__ic {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0;
  border-radius:var(--radius-md); background:rgba(255,255,255,0.14); color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.18);
}
.bn-point__t { font-size:var(--text-md); font-weight:600; color:#fff; }
.bn-point__s { font-size:var(--text-sm); color:rgba(255,255,255,0.72); }
.bn-brand__quote { position:relative; font-size:var(--text-sm); color:rgba(255,255,255,0.7); font-style:italic; }
.bn-brand__quote cite { display:block; margin-top:6px; font-style:normal; font-weight:600; color:#fff; }

/* Right form column */
.bn-formcol { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; padding:40px 24px; overflow-y:auto; }
.bn-card { width:100%; max-width:404px; animation:bn-rise var(--dur-base) ease-out; }
.bn-mobilelogo { display:none; align-items:center; gap:10px; justify-content:center; margin-bottom:24px; }
.bn-mobilelogo span { font-family:var(--font-brand); font-size:19px; font-weight:600; letter-spacing:0.005em; color:var(--text-primary); }

.bn-head { margin-bottom:24px; }
.bn-head h2 { margin:12px 0 4px; font-size:var(--text-3xl); font-weight:700; letter-spacing:-0.01em; color:var(--text-primary); }
.bn-head p { margin:0; font-size:var(--text-md); color:var(--text-muted); }

/* Badge (eyebrow) */
.bn-badge {
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:var(--radius-sm);
  font-size:var(--text-xs); font-weight:600; letter-spacing:0.02em;
  background:var(--accent-soft-bg); color:var(--accent-soft-fg); border:1px solid var(--border);
}

/* ---------------- form fields ---------------- */
.bn-fields { display:flex; flex-direction:column; gap:14px; }
.bn-field { display:flex; flex-direction:column; gap:6px; }
.bn-field > label { font-size:var(--text-sm); font-weight:500; color:var(--text-secondary); }
.bn-inputwrap { position:relative; display:flex; align-items:center; }
.bn-inputwrap .bn-ic-left {
  position:absolute; left:12px; display:inline-flex; color:var(--text-muted); pointer-events:none;
}
.bn-inputwrap .bn-ic-right {
  position:absolute; right:12px; display:inline-flex; color:var(--text-muted); cursor:pointer;
  background:none; border:0; padding:0;
}
.bn-input {
  width:100%; height:42px; padding:0 12px; font-family:var(--font-sans); font-size:var(--text-md);
  color:var(--text-primary); background:var(--surface-inset);
  border:1px solid var(--border); border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.bn-inputwrap .bn-ic-left ~ .bn-input { padding-left:38px; }
.bn-input.has-right { padding-right:38px; }
.bn-input::placeholder { color:var(--text-faint); }
.bn-input:focus { border-color:var(--border-focus); box-shadow:var(--shadow-focus); }
.bn-hint { font-size:var(--text-xs); color:var(--text-faint); }
.bn-error { font-size:var(--text-xs); color:var(--danger-fg); }

/* checkbox + row */
.bn-rememberrow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bn-check { display:inline-flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--text-secondary); cursor:pointer; }
.bn-check input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.bn-link { font-size:var(--text-sm); color:var(--text-link); cursor:pointer; }

/* ---------------- buttons ---------------- */
.bn-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--radius-md); cursor:pointer;
  font-family:var(--font-sans); font-size:var(--text-md); font-weight:600; border:1px solid transparent;
  transition:background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
}
.bn-btn--block { width:100%; }
.bn-btn--primary { background:var(--accent); color:var(--accent-fg); box-shadow:var(--edge-highlight); }
.bn-btn--primary:hover { background:var(--accent-hover); }
.bn-btn--primary:active { background:var(--accent-press); }
.bn-btn--primary:disabled { opacity:0.5; cursor:not-allowed; }
.bn-btn--secondary { background:var(--surface-raised); color:var(--text-primary); border-color:var(--border); }
.bn-btn--secondary:hover { background:var(--surface-hover); border-color:var(--border-strong); }

/* ---------------- social provider grid ---------------- */
.bn-social { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bn-social__btn {
  display:flex; align-items:center; justify-content:center; gap:9px; height:42px; width:100%;
  border:1px solid var(--border); background:var(--surface-raised); color:var(--text-primary);
  border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-sans);
  font-size:var(--text-sm); font-weight:500; box-shadow:var(--edge-highlight);
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.bn-social__btn:hover { border-color:var(--border-strong); background:var(--surface-hover); }
.bn-social__btn svg { flex-shrink:0; }
/* odd one out spans full width to keep the grid tidy */
.bn-social__btn--wide { grid-column:1 / -1; }

/* ---------------- divider ---------------- */
.bn-divider { display:flex; align-items:center; gap:12px; margin:2px 0; }
.bn-divider::before, .bn-divider::after { content:''; flex:1; height:1px; background:var(--border-subtle); }
.bn-divider span {
  font-size:var(--text-xs); color:var(--text-faint); text-transform:uppercase;
  letter-spacing:0.06em; font-family:var(--font-mono);
}

/* ---------------- misc ---------------- */
.bn-stack { display:flex; flex-direction:column; gap:16px; }
.bn-switchrow { display:flex; align-items:center; gap:8px; justify-content:center; font-size:var(--text-sm); color:var(--text-muted); }
.bn-switchrow a { color:var(--text-link); font-weight:500; }
/* "This is a Modurel account" — the one element every brand renders, so a user
   arriving from any product knows which credential they are using. */
.bn-accountnote {
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:24px 0 0; padding-top:16px; border-top:1px solid var(--border-subtle);
  font-size:var(--text-xs); color:var(--text-muted);
}
.bn-accountnote svg { color:var(--accent-soft-fg); flex-shrink:0; }
.bn-foot { margin-top:10px; text-align:center; font-size:var(--text-xs); color:var(--text-faint); }

.bn-alert {
  display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border-radius:var(--radius-md);
  font-size:var(--text-sm); margin-bottom:16px;
}
.bn-alert--danger { background:var(--danger-soft); color:var(--danger-fg); border:1px solid rgba(224,81,74,0.35); }
.bn-alert--success { background:var(--success-soft); color:var(--success-fg); border:1px solid rgba(47,174,120,0.35); }

/* big circular status icon (recovery sent / secure step) */
.bn-bigicon {
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:var(--radius-xl); border:1px solid var(--border);
}
.bn-bigicon--brand { background:var(--accent-soft-bg); color:var(--accent-soft-fg); }
.bn-bigicon--success { background:var(--success-soft); color:var(--success-fg); border-color:rgba(47,174,120,0.35); }
.bn-center { display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }

/* validation summary list (ASP.NET) */
.bn-alert ul { margin:0; padding-left:18px; }
/* ASP.NET adds these classes when there are no errors — keep the box hidden */
.validation-summary-valid { display:none; }
.bn-error:empty { display:none; }

/* ---------------- responsive ---------------- */
@media (max-width:860px) {
  .bn-brand { display:none; }
  .bn-mobilelogo { display:flex; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}