/* Auth pages (login + invite-accept) — ported verbatim from the Homeowner Portal's styles.scss
   so the two portals match exactly. Plain CSS classes (no component library) on the auth screens. */

.auth-scope {
  --navy:#1a2b3c; --navy-2:#2a3d50;
  --teal:#006088; --teal-soft:#e3eff4;
  --gold:#f5c518;
  --bg:#f5f7f8;
  --surface:#ffffff;
  --border:#e6ecf0; --border-strong:#d5dee5;
  --success:#1f9d6b; --success-soft:#e4f4ec;
  --danger:#d9534f; --danger-soft:#fbe6e5;
  --ink:#1a2b3c; --muted:#5b6b78; --muted-2:#8595a0;
  --radius:12px;
  --sans:"Public Sans","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-family: var(--sans);
  color: var(--ink);
}

/* Two-panel layout */
.auth-layer { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
@media (min-width:1440px){ .auth-layer{ grid-template-columns:1fr 720px; } }
@media (max-width:900px){ .auth-layer{ grid-template-columns:1fr; } .auth-aside{ display:none; } }

.auth-aside { background:linear-gradient(150deg,var(--navy),var(--navy-2) 60%,var(--teal)); color:#fff; padding:54px 56px; display:flex; flex-direction:column; }
.auth-aside .logo { width:48px; height:48px; border-radius:12px; object-fit:contain; display:block; }

.auth-main { display:flex; align-items:center; justify-content:center; padding:40px; background:#fff; }
.auth-box  { width:100%; max-width:440px; margin:0 auto; }
.auth-head { margin-bottom:30px; }
.auth-box h1 { font-size:31px; font-weight:750; letter-spacing:-.02em; margin:0; color:var(--ink); }
.auth-box .lead, .auth-head .lead { color:var(--muted); margin:8px 0 0; font-size:15px; }
.center { text-align:center; }

/* Provider (Google/Apple) buttons */
.provider-btn { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; border:1px solid var(--border-strong); background:#fff; border-radius:10px; padding:13px; font-size:14.5px; font-weight:600; color:var(--navy); cursor:pointer; transition:background .15s,border-color .15s; }
.provider-btn:hover { background:var(--bg); }
.provider-btn + .provider-btn { margin-top:10px; }
.provider-btn svg { width:19px; height:19px; }

.divider-or { display:flex; align-items:center; gap:14px; color:var(--muted-2); font-size:12.5px; margin:22px 0; }
.divider-or::before, .divider-or::after { content:""; flex:1; height:1px; background:var(--border); }

/* Fields */
.field { margin-bottom:18px; }
.field-label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; }
.hint { font-size:12px; color:var(--muted); margin-top:5px; display:block; }
.input { width:100%; border:1px solid var(--border-strong); border-radius:10px; padding:13px; font-size:15px; font-family:inherit; color:var(--ink); background:#fff; transition:border-color .15s,box-shadow .15s; box-sizing:border-box; }
.input:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,96,136,.13); }
.input::placeholder { color:var(--muted-2); }
.input:disabled { background:var(--bg); color:var(--muted); }

.input-ic { position:relative; }
.input-ic .ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted-2); }
.input-ic .input { padding-left:40px; }
.input-ic.has-toggle .input { padding-right:44px; }
.pw-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center; background:transparent; border:none; border-radius:8px; color:var(--muted-2); cursor:pointer; }
.pw-toggle:hover { color:var(--navy); background:var(--bg); }
.pw-toggle svg { width:18px; height:18px; }

/* Options row */
.auth-options { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.keep-signed-in { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.keep-signed-in__cb { width:16px; height:16px; flex:none; accent-color:var(--teal); cursor:pointer; }
.keep-signed-in__label { font-size:13.5px; color:var(--muted); }
.link { color:var(--teal); font-weight:600; font-size:13.5px; text-decoration:none; cursor:pointer; background:none; border:none; padding:0; }
.link:hover { text-decoration:underline; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; padding:11px 18px; font-size:14.5px; font-weight:650; border:1px solid transparent; font-family:inherit; cursor:pointer; transition:filter .15s,background .15s,box-shadow .15s,border-color .15s; }
.btn:active { transform:scale(.985); }
.btn-primary { background:var(--teal); color:#fff; }
.btn-primary:hover { filter:brightness(1.07); }
.btn-ghost { background:#fff; color:var(--navy); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--bg); }
.btn-lg { padding:14px 22px; font-size:15.5px; margin-top:8px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; filter:none; transform:none; pointer-events:none; }

/* Banner (errors / info) */
.banner { display:flex; align-items:flex-start; gap:14px; padding:15px 18px; border-radius:var(--radius); border:1px solid; font-size:14px; margin-bottom:16px; }
.banner .bi { flex:none; width:24px; height:24px; display:grid; place-items:center; }
.banner .bi svg { width:20px; height:20px; }
.banner.info { background:var(--teal-soft); border-color:#bcdbe6; color:#0a4f6c; }
.banner.info .bi { color:var(--teal); }
.banner.danger { background:var(--danger-soft); border-color:#f0b8b7; color:#8f2b28; }
.banner.danger .bi { color:var(--danger); }

/* Invite badge + status icons */
.badge { display:inline-flex; align-items:center; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.b-info { background:var(--teal-soft); color:#0a4f6c; }
.status-icon { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; margin:0 auto 16px; }
.status-icon.ok   { background:var(--teal-soft); color:var(--teal); }
.status-icon.warn { background:var(--danger-soft); color:var(--danger); }
.status-icon svg { width:28px; height:28px; }

.auth-secure { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; color:var(--muted-2); font-size:13px; font-weight:500; }
.auth-secure svg { width:16px; height:16px; }