/* auth-polish.css
   Extra polish for the Resident and Admin sign-in pages.
   Loaded through the page's own head call:  extraStylesheet='auth-polish.css'
   (so fragments/head.html does NOT need to change). Everything is scoped to
   .rig.split, so register / forgot-password / reset pages are not affected. */


/* ---- short screens: auth.css fixes the page to exactly screen height and centers it, so a tall card
   lost its top (logo + back link) and the gradient stopped at the bottom, leaving a visible line.
   Let the page grow instead, and center the card only when there is spare room. ---- */
html { height: auto; min-height: 100%; background: #14315e; }
body:has(.rig.split) { height: auto; min-height: 100vh; align-items: flex-start; background-attachment: fixed; }
.rig.split { margin: auto; }

/* ---- background: replace the muddy gold glow (gold over blue turns olive) with soft blue light ---- */
body:not(.landing-body):not(.admin-body):not(.resident-body)::after {
    box-shadow:
            8vw -8vh 130px 170px rgba(96, 165, 250, 0.30),
            82vw 88vh 140px 180px rgba(58, 134, 255, 0.28);
}

/* ---- split layout: brand panel + card ---- */
.rig.split { max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; align-items: stretch; }

.rig.split .brand {
    --accent: #cfe3ff;
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 38px; border-radius: 22px; color: #fff;
    background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 24px 60px -24px rgba(8,20,45,.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rig.split .brand.admin { --accent: #f6d27a; }
.brand-seal { width: 84px; height: 84px; border-radius: 50%; padding: 4px; background: #fff; box-shadow: 0 10px 28px -10px rgba(0,0,0,.5); margin-bottom: 22px; overflow: hidden; }
.brand-seal img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.brand-eyebrow { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.brand h2 { margin: 0 0 8px; font: 600 30px/1.15 'Poppins', sans-serif; }
.brand-sub { margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); }
.brand-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.brand-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.92); }
.brand-list .ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.14); color: var(--accent); }
.brand-list .ico svg { width: 18px; height: 18px; }

/* ---- the card ---- */
.rig.split .card { align-self: center; padding: 30px 30px 26px; }
.rig.split .card .logo-circle { display: none; }          /* the seal is in the brand panel on desktop */
.card-brand { display: none; }

.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-dim); text-decoration: none; margin-bottom: 18px; }
.back-link:hover { color: var(--primary); }
.rig.split .form-header { margin-bottom: 22px; }
.rig.split .form-title { font-size: 24px; line-height: 1.2; }
.rig.split .form-title span { font-size: 11.5px; margin-bottom: 4px; }
.form-lead { margin: 6px 0 0; font: 400 13.5px/1.5 'Inter', sans-serif; color: var(--ink-dim); }

/* inputs with a leading icon */
.input-ico { position: relative; }
.rig.split .input-ico > .lead-ico,
.rig.split .password-field > .lead-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #8a99ab; pointer-events: none; }
.rig.split .input-ico > input,
.rig.split .password-field > input { padding-left: 42px; }
.rig.split .field input { min-height: 48px; }
.rig.split .field input::placeholder { color: #8493a5; }
.rig.split .field input:focus { box-shadow: 0 0 0 4px rgba(27, 95, 174, .12); }
.rig.split.admin-login .field input:focus { border-color: var(--admin); box-shadow: 0 0 0 4px rgba(185, 128, 15, .15); }
.rig.split.admin-login .input-ico:focus-within > .lead-ico,
.rig.split.admin-login .password-field:focus-within > .lead-ico { color: var(--admin); }
.rig.split .input-ico:focus-within > .lead-ico,
.rig.split .password-field:focus-within > .lead-ico { color: var(--primary); }
.rig.split.admin-login .input-ico:focus-within > .lead-ico,
.rig.split.admin-login .password-field:focus-within > .lead-ico { color: var(--admin); }

.caps-warn { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12.5px; font-weight: 500; color: #b45309; }
.caps-warn[hidden] { display: none; }
.caps-warn svg { width: 14px; height: 14px; flex: none; }

/* tighter spacing around the button */
.rig.split .row-split { margin: 4px 0 18px; }
.rig.split .status-note { margin-top: 0; min-height: 0; }
.rig.split .status-note:empty { display: none; }
.rig.split .submit-btn { min-height: 50px; font-size: 15px; }
.rig.split.admin-login .form-header { margin-bottom: 24px; }

/* "create an account" as a real button */
.or-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 12.5px; color: var(--ink-dim); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.create-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; border: 1.5px solid var(--primary); color: var(--primary); font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .15s, color .15s; }
.create-btn:hover { background: var(--primary-soft); }
.rig.split .foot-note { margin-top: 18px; }

/* ---- phones / small tablets: just the card, with the seal and portal name on top ---- */
@media (max-width: 900px) {
    .rig.split { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
    .rig.split .brand { display: none; }
    .rig.split .card .logo-circle { display: flex; }
    .card-brand { display: block; text-align: center; margin: -8px 0 20px; }
    .card-brand b { display: block; font: 600 15px 'Poppins', sans-serif; }
    .card-brand span { font-size: 12.5px; color: var(--ink-dim); }
}

/* =====================================================================
   Register page (templates/resident/register.html) - wider card, two-column form
   ===================================================================== */
.rig.split.register { max-width: 1020px; grid-template-columns: minmax(0, 1fr) 560px; }
.rig.split.register .card { padding: 30px 32px 26px; }

.form-section { margin: 4px 0 12px; font: 600 11.5px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 10px; }
.form-section::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form-section:not(:first-of-type) { margin-top: 10px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: start; }
.form-grid > .span-2 { grid-column: 1 / -1; }
.rig.split.register .field { margin-bottom: 14px; }
.rig.split.register .field-hint { font-size: 12px; line-height: 1.45; color: var(--ink-dim); margin-top: 6px; }
.rig.split.register .pw-hint { margin: -4px 0 14px; }
.rig.split.register .field input::placeholder,
.rig.split.register .date-display::placeholder { color: #8493a5; }
.rig.split.register .field input { min-height: 48px; }
.rig.split.register .date-display { min-height: 48px; }
.rig.split.register .field input:focus,
.rig.split.register .date-display:focus { box-shadow: 0 0 0 4px rgba(27, 95, 174, .12); }
.rig.split.register .date-field .date-dropdown { left: auto; right: 0; }
.rig.split.register .submit-btn { margin-top: 4px; }
.rig.split.register .switch-note { margin-top: 18px; font-size: 13.5px; }

@media (max-width: 900px) {
    .rig.split.register { max-width: 520px; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .form-grid { grid-template-columns: 1fr; }
    .rig.split.register .card { padding: 26px 20px 22px; }
    .rig.split.register .date-field .date-dropdown { left: 0; right: auto; }
}
.rig.split.register .password-field > input { padding-left: 14px; }

/* =====================================================================
   Forgot password / Reset password / Reset success
   ===================================================================== */
body:has(.rig.solo) { height: auto; min-height: 100vh; align-items: flex-start; background-attachment: fixed; }
.rig.split.reset-flow { max-width: 940px; grid-template-columns: minmax(0, 1fr) 440px; }
.rig.solo { max-width: 440px; margin: auto; }
.rig.solo .card { padding: 36px 32px 28px; text-align: center; }
.rig.solo .success-box h2 { font: 600 22px 'Poppins', sans-serif; margin: 6px 0 10px; }
.rig.solo .success-box p { color: var(--ink-dim); line-height: 1.55; margin: 0 0 4px; }
.rig.solo .btn-link { display: flex; align-items: center; justify-content: center; min-height: 50px; margin: 22px 0 6px; border-radius: 12px; font-weight: 600; }
.rig.solo .redirect-note { margin-top: 18px; font-size: 12.5px; }

/* numbered steps in the brand panel */
.brand-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.brand-steps li { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: rgba(255,255,255,.62); }
.brand-steps li span { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 600 14px 'Poppins', sans-serif; border: 1.5px solid rgba(255,255,255,.35); }
.brand-steps li.is-active { color: #fff; font-weight: 600; }
.brand-steps li.is-active span { background: #fff; color: #14315e; border-color: #fff; box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); }
.brand-steps li.is-done span { background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }

/* green notice on the reset page (replaces the old inline styles) */
.form-success-banner { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 13px 14px; border-radius: 12px; border: 1.5px solid #1a7f37; background: #f0faf0; color: #1a7f37; font-size: 13.5px; line-height: 1.45; }
.form-success-banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.form-success-banner a { color: #146c2e; font-weight: 700; }

.rig.split.reset-flow .date-display { min-height: 48px; padding-left: 14px; }
.rig.split.reset-flow .date-display::placeholder { color: #8493a5; }
.rig.split.reset-flow .field { margin-bottom: 14px; }
.rig.split.reset-flow .field-hint { font-size: 12px; line-height: 1.45; color: var(--ink-dim); margin-top: 6px; }
.rig.split.reset-flow .submit-btn { min-height: 50px; }
.rig.split.reset-flow .date-field .date-icon-btn { right: 8px; }
.rig.solo .btn-link { background: var(--primary); color: #fff; text-decoration: none; box-shadow: 0 12px 22px -12px rgba(27,95,174,.9); transition: background .15s, transform .15s; }
.rig.solo .btn-link:hover { background: var(--primary-dark, #164f93); transform: translateY(-1px); }
.rig.solo .success-box .redirect-note { margin-top: 26px; }

/* forgot / reset pages: one centered card on tablets and phones (the two-column rule above is more specific than the generic one) */
@media (max-width: 900px) {
    .rig.split.reset-flow { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
}

/* =====================================================================
   APPEND THIS BLOCK TO THE VERY END OF auth-polish.css
   Responsiveness and layout-stability fixes for: resident login, admin login,
   register, forgot / reset password.
   ===================================================================== */

/* Mobile browsers: 100vh is taller than the visible screen (address bar), which caused a
   needless scrollbar. 100dvh is the real visible height. Browsers without dvh keep 100vh. */
body:has(.rig.split),
body:has(.rig.solo) { min-height: 100dvh; }

/* Short screens (laptops with toolbars, phones in landscape): less empty padding */
@media (max-height: 720px) {
    body:has(.rig) { padding-top: 16px; padding-bottom: 16px; }
}

/* Register + Forgot password are long forms. The brand panel used to stretch to the full form
   height, so its text sat far below the first screen (see register screenshot). It is now as
   tall as the visible screen and stays in view while the form scrolls. */
.rig.split.register .brand,
.rig.split.reset-flow .brand {
    position: sticky;
    top: 32px;
    align-self: start;
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    min-height: 460px;
}

/* Register: the two-column layout squeezed the brand panel to ~200px between 900px and
   1100px wide. Switch to the single-card layout earlier (same markup and look as the
   existing <=900px rules, just starting at 1100px). */
@media (max-width: 1100px) {
    .rig.split.register { max-width: 560px; grid-template-columns: minmax(0, 1fr); }
    .rig.split.register .brand { display: none; }
    .rig.split.register .card .logo-circle { display: flex; }
    .rig.split.register .card-brand { display: block; text-align: center; margin: -8px 0 20px; }
    .rig.split.register .card-brand b { display: block; font: 600 15px 'Poppins', sans-serif; }
    .rig.split.register .card-brand span { font-size: 12.5px; color: var(--ink-dim); }
}

/* iPhone/iPad Safari zooms the page when an input below 16px gets focus, which shifts the
   whole layout. Inputs were 15px. */
@media (max-width: 900px) {
    .rig .field input,
    .rig .date-display,
    .rig .dd-header select { font-size: 16px; }
}