/* ============================================================
   Zwaygo Design System
   Sole stylesheet. Bootstrap/Plain.css/NewSite.css removed.
   Source of truth: Figma/landlord-dashboard-all-residents/
   ============================================================ */

/* ==========================================================
   0. FONTS — Gustavo (from the Zwaygo soft-launch webflow site,
   mirrored locally under /Fonts/Gustavo/). Without these the
   whole design system silently falls back to Inter.
   ========================================================== */
@font-face {
    font-family: "Gustavo";
    src: url("../Fonts/Gustavo/Gustavo-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gustavo";
    src: url("../Fonts/Gustavo/Gustavo-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Gustavo";
    src: url("../Fonts/Gustavo/Gustavo-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================
   1. TOKENS
   Mirrors Figma/styleguide.css + tokens.css exactly.
   ========================================================== */
:root {
    /* Colors */
    --z-white: #ffffff;
    --z-black: #000000;
    --z-gray-100: #f6f6f6;
    --z-gray-200: #eeeeee;
    --z-gray-300: #d2d2d2;
    --z-gray-400: #a5a5a5;
    --z-gray-500: #808080;
    --z-gray-600: #5d5d5d;
    --z-teal-400: #32cdb2;
    --z-teal-500: #1ab29a;
    --z-red: #d62828;

    /* Elevation — shadow only, no hard border. Matches Figma exactly. */
    --z-shadow: 0 0 32px 0 rgba(50, 205, 178, 0.15);

    /* Typography */
    --z-font-display: "Gustavo_trial", "Gustavo", "Inter", sans-serif;
    --z-font-body: "Inter", "Segoe UI", Tahoma, Verdana, sans-serif;

    --product-display-40-font-family: var(--z-font-display);
    --product-display-40-font-weight: 500;
    --product-display-40-font-size: 40px;
    --product-display-40-line-height: 48px;

    --product-display-32-font-family: var(--z-font-display);
    --product-display-32-font-weight: 500;
    --product-display-32-font-size: 32px;
    --product-display-32-line-height: 40px;

    --product-display-24-font-family: var(--z-font-display);
    --product-display-24-font-weight: 500;
    --product-display-24-font-size: 24px;
    --product-display-24-line-height: 32px;

    --18-28-semibold-font-family: var(--z-font-body);
    --18-28-semibold-font-weight: 600;
    --18-28-semibold-font-size: 18px;
    --18-28-semibold-line-height: 28px;

    --body-semibold-font-family: var(--z-font-body);
    --body-semibold-font-weight: 600;
    --body-semibold-font-size: 15px;
    --body-semibold-line-height: 24px;

    --body-med-font-family: var(--z-font-body);
    --body-med-font-weight: 500;
    --body-med-font-size: 15px;
    --body-med-line-height: 24px;

    --body-reg-font-family: var(--z-font-body);
    --body-reg-font-weight: 400;
    --body-reg-font-size: 15px;
    --body-reg-line-height: 24px;

    --small-semibold-font-family: var(--z-font-body);
    --small-semibold-font-weight: 600;
    --small-semibold-font-size: 14px;
    --small-semibold-line-height: 24px;

    /* Spacing / radii */
    --z-max-w: 1312px;
    --z-pad-x: 64px;
}


/* ==========================================================
   2. RESET
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, form       { margin: 0; padding: 0; height: 100%; background: var(--z-white); color: var(--z-black); font-family: var(--z-font-body); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,p   { margin: 0; padding: 0; }
ul, ol                  { margin: 0; padding: 0; list-style: none; }
a                       { color: inherit; text-decoration: none; }
img                     { max-width: 100%; display: inline-block; }
table                   { border-collapse: collapse; border-spacing: 0; }
button, input, select   { font: inherit; }


/* ==========================================================
   3. PAGE SHELL  (MasterPage → main-table → #main)
   ========================================================== */
#MasterPage {
    background: var(--z-white);
    min-height: 100vh;
}

.z-page { width: 100%; }

/* Shell background only. Deliberately NO width here: "td" matches every
   DESCENDANT cell - a width:100% on it forces every cell of every nested
   data grid to demand full width, which is what made grids stretch and
   mis-proportion (root-caused by Sean 2026-07-20). The layout table's own
   width comes from #main-table below.
   TODO: the !important background also washes out .gridview row striping
   and hover (see the z-users-grouphead comment) - candidates for scoping
   to the direct layout cell in a dedicated visual pass. */
.main-layout-table,
.main-layout-table td {
    background: var(--z-white) !important;
}

#main-table { width: 100%; margin: 0; }

#main {
    width: 100%;
    max-width: calc(var(--z-max-w) + var(--z-pad-x) * 2);
    margin: 0 auto;
    padding: 0 var(--z-pad-x) 80px;
}

#content { padding: 0; }


/* ==========================================================
   4. FIXED HEADER + NAV BAR
   Figma: nav at top:32, left:64, 1312×96, rounded-16,
   shadow, backdrop-blur. Menu links flex right, gap:40.
   ========================================================== */

/* Reserve space so content doesn't hide behind fixed header.
   Base height = nav bar (72px) + top padding (20px) + bottom padding (8px) + buffer.
   Pages with community selectors get extra space via the selector bar. */
.ns-site-header-shell {
    height: 132px;
    background: transparent;
}

/* When the selector or search row is visible, add room for it */
.ns-site-header-shell:has(#Panel_AdminCommunitySelector),
.ns-site-header-shell:has(#Panel_Search) {
    height: 172px;
}

#SiteHeader {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9999;
    background: transparent;
    height: auto; width: 100%;
    padding-bottom: 8px;
}

/* Reserve enough vertical space for the fixed nav pill; the actual
   glass is on #SiteHeader-Content so the outer #SiteHeader stays
   transparent and scrolling content can frost through. */
#SiteHeader { min-height: 132px; }
#SiteHeader:has(#Panel_AdminCommunitySelector),
#SiteHeader:has(#Panel_Search) { min-height: 172px; }

/* Visible bottom edge of the glass nav pill, for sticky in-page headers
   to pin flush against — anything lower leaves a strip where data rows
   scroll by uncovered between the pill and the stuck header.
   Measured: pill top 20 + (12 pad + 48 brand row + 12 pad) = 92px;
   the selector/search row adds its 5px margin + 32px height = 129px.
   Keep in sync with #SiteHeader-Content padding and .ns-header-secondary
   if those ever change. */
body { --z-header-bottom: 92px; }
body:has(#Panel_AdminCommunitySelector),
body:has(#Panel_Search) { --z-header-bottom: 129px; }

#SiteHeader-TopSection {
    background: transparent;
    padding: 20px 64px 0;
    display: flex;
    justify-content: center;
}

/* The glass nav pill. Matches the Zwaygo soft-launch webflow navbar
   (.container-10): ~20% white backdrop + blur(20px) so content
   scrolling under the fixed nav is visibly frosted. */
#SiteHeader-Content {
    width: 100%;
    max-width: none;
    min-height: 72px;
    margin: 0;
    padding: 12px 40px;
    background: rgba(255,255,255,0.20);
    border: none;
    border-radius: 16px;
    box-shadow: var(--z-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.ns-header-primary {
    display: flex; align-items: center;
    width: 100%;
    min-height: 48px;
}

.ns-header-brand {
    display: flex; align-items: center;
    flex: 0 0 auto;
    gap: 12px;
}

.ns-header-logo { max-height: 30px; width: auto; }

/* Environment badge — "DEMO" / "DEV" pill beside the logo. Rendered by
   NewSite.master and Residents/MasterPage.master only when web.config's
   Environment is not Production (see SiteSettings.EnvironmentBadgeText),
   so the live site never shows one. Demo is a filled red pill so it
   can't be missed; Dev borrows the amber "warn" tone (.z-status-warn). */
.z-env-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--z-font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}
.z-env-badge--demo {
    background: var(--z-red);
    border-color: var(--z-red);
    color: var(--z-white);
}
.z-env-badge--dev {
    background: #fdf4e7;
    border-color: #c97a00;
    color: #8a5400;
}

/* Hide elements not in Figma nav */
.ns-beta-badge,
.menu-shadow,
.clear,
.menu-divider,
img[src$="button-divider.png"] { display: none !important; }

/* Marketing nav links — rendered by NewSite.master for every page but
   visible only on the login page (Default.aspx, which wraps its content
   in .z-login-page). Mirrors the .nav-menu-2/.nav-link pair from the
   zwaygo-soft-launch webflow nav: Gustavo 16/500/24, right-aligned. */
.ns-header-external-nav { display: none; }
body:has(.z-login-page) .ns-header-external-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto;
}
body:has(.z-login-page) #Panel_MenuBar { display: none !important; }
.ns-ext-link {
    font-family: var(--z-font-display);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--z-black);
    text-decoration: none;
    white-space: nowrap;
}
.ns-ext-link:hover { color: var(--z-teal-400); }

/* Resident account nav — Dashboard / Support / Log out, right-aligned in
   the glass pill (Residents/MasterPage.master). Same type and gap as the
   staff menu (section 5); the current page's link is teal. */
.z-header-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto;
}
.z-header-nav-link {
    font-family: var(--z-font-display);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--z-black);
    text-decoration: none;
    white-space: nowrap;
}
.z-header-nav-link:hover,
.z-header-nav-link.is-active { color: var(--z-teal-400); text-decoration: none; }
/* Tighter link spacing keeps logo + badge + links on one row down to 600px. */
@media (max-width: 720px) {
    .z-header-nav { gap: 24px; }
}
/* Phones: logo, badge and three links no longer fit one row (the links ran
   off the right edge of the fixed pill, out of reach), so the nav takes its
   own line under the logo. Pill: 12 + 30 logo + 4 + 24 links + 12 = 82px,
   bottom edge at 102px - still inside the 132px header reserve. Each link's
   tap area is padded out to 44px tall; the negative margins keep the row
   24px and the links 24px apart. */
@media (max-width: 600px) {
    .ns-header-primary:has(.z-header-nav) { flex-wrap: wrap; row-gap: 4px; }
    .z-header-nav { flex: 1 0 100%; margin-left: 0; }
    .z-header-nav-link { padding: 10px 12px; margin: -10px -12px; }
    body:has(.z-header-nav) { --z-header-bottom: 102px; }
}
/* 320px phones: at 16px the links need 264px of the pill's 248. */
@media (max-width: 359px) {
    .z-header-nav-link { font-size: 14px; }
}

/* Community selector — admin-only toolbar.
   Sits BELOW the nav bar on ALL pages via absolute positioning
   so it never overlaps the menu links or logo.
   top: calc(100% + 8px) adds a gap so the nav shadow is visible. */
/* Community selector — admin-only toolbar below the nav bar.
   Uses the original table layout that Chosen.js depends on. */
/* Community selector — inside #SiteHeader-Content in the DOM.
   Sits below the logo/brand row. #SiteHeader has a white bg
   that covers everything so nothing bleeds through. */
.ns-header-secondary {
    width: 100%;
    margin-top: 5px;
    padding: 0;
    font-size: 14px; font-weight: 500;
    color: var(--z-black);
}

/* Collapse the secondary row entirely only when BOTH its occupants
   (#Panel_AdminCommunitySelector, #Panel_Search) are absent from the DOM
   (Visible="False" in code-behind → not rendered). Otherwise its empty
   <table> still counts as a row inside #SiteHeader-Content and pushes
   the brand row off-center. */
#SiteHeader:not(:has(#Panel_AdminCommunitySelector)):not(:has(#Panel_Search)) .ns-header-secondary {
    display: none;
}

.ns-header-secondary > table,
.ns-header-secondary > table > tbody { display: block; width: 100%; }
.ns-header-secondary > table > tbody > tr {
    display: flex; width: 100%;
    align-items: center; gap: 16px; flex-wrap: wrap;
}
.ns-header-secondary > table > tbody > tr > td { display: block; padding: 0; vertical-align: middle; }

/* Push the search cell to the right edge of the secondary row. */
.ns-header-secondary > table > tbody > tr > td.ns-header-search-cell {
    margin-left: auto;
    flex: 0 1 auto;
}

/* Search field — Zwaygo look: pill-shaped input with subtle border. */
.ns-header-search-panel #SiteHeader-Search { position: relative; }
.ns-header-search-panel .ns_sb_input {
    width: 280px; max-width: 100%;
    height: 32px; line-height: 30px;
    padding: 0 14px;
    border: 1px solid var(--z-gray-300); border-radius: 999px;
    background: var(--z-white); box-shadow: none;
    color: var(--z-black);
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}
.ns-header-search-panel .ns_sb_input:focus {
    border-color: var(--z-teal);
}
.ns-header-search-panel .ns_sb_dropdown,
.ns-header-search-panel .ns_sb_dropdownx {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--z-white);
    z-index: 100001;
}

/* ---- Search results dropdown (Zwaygo look) ----
   #div_SearchResults is a small modal-like panel that anchors below the
   header search input. Sections are stacked; each has a teal section
   header and a list of resident links. */
.ns_sb_dropdown {
    border: 1px solid rgba(50, 205, 178, 0.35);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(50, 205, 178, 0.10);
    padding: 6px;
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ns_sb_section + .ns_sb_section { margin-top: 6px; }

.ns_sb_dropdown .search_sectionHeader {
    font-family: var(--z-font-body);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--z-gray-600);
    padding: 10px 12px 6px;
}

.ns_sb_dropdown ul.ns_sb_results {
    list-style: none;
    margin: 0; padding: 0;
}

.ns_sb_dropdown ul.ns_sb_results li {
    display: flex; align-items: center; gap: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: 12px; line-height: 16px;
    color: var(--z-black);
}

.ns_sb_dropdown ul.ns_sb_results li + li {
    margin-top: 2px;
}

.ns_sb_dropdown ul.ns_sb_results li:hover,
.ns_sb_dropdown ul.ns_sb_results li.highlight {
    background-color: rgba(50, 205, 178, 0.10);
}

.ns_sb_dropdown .ns_sb_link {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    padding: 6px 4px 6px 6px;
    color: var(--z-black);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ns_sb_dropdown ul.ns_sb_results li:hover .ns_sb_link,
.ns_sb_dropdown ul.ns_sb_results li.highlight .ns_sb_link {
    color: var(--z-teal-500);
}

.ns_sb_dropdown .ns_sb_meta {
    color: var(--z-gray-500);
    font-weight: 400;
}

.ns_sb_dropdown .ns_sb_badge {
    display: inline-block;
    padding: 0 7px;
    margin-left: 4px;
    border-radius: 999px;
    background: rgba(50, 205, 178, 0.12);
    color: var(--z-teal-500);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: 1px;
}

.ns_sb_dropdown .ns_sb_popout {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    margin-right: 2px;
    border-radius: 6px;
    opacity: 0.55;
    transition: opacity 120ms ease, background-color 120ms ease;
}
.ns_sb_dropdown .ns_sb_popout img {
    height: 12px; width: auto; display: block;
}
.ns_sb_dropdown .ns_sb_popout:hover {
    opacity: 1;
    background-color: rgba(50, 205, 178, 0.15);
}

/* Under a result list the search API capped (NPSController.Search returns
   at most 50 per list); the next keystroke searches again. */
.ns_sb_dropdown .z-search-more {
    padding: 6px 12px 2px;
    font-size: 11px; line-height: 15px;
    color: var(--z-gray-500);
}

.ns-header-secondary .button,
[id$='Button_ReturnToAdmin'] {
    border: 1px solid var(--z-gray-300); background: var(--z-white);
    color: var(--z-black); border-radius: 999px;
    height: 32px; line-height: 30px; padding: 0 14px;
    font-size: 12px; cursor: pointer;
}

[id$='Panel_AdminCommunitySelector'] {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* ---- Header entity selector (single dropdown, fancytree-based) ---- */
.z-entity-selector-prefix {
    font-size: 14px; font-weight: 600;
    color: var(--z-black); white-space: nowrap;
    margin-right: 4px;
}

.z-entity-selector { position: relative; display: inline-block; }

.z-entity-selector-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 280px; max-width: 420px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--z-gray-300); border-radius: 6px;
    background: var(--z-white); color: var(--z-black);
    font-size: 14px; font-weight: 500; line-height: 30px;
    cursor: pointer; outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.z-entity-selector-trigger:hover { border-color: var(--z-gray-400); }
.z-entity-selector-trigger:focus-visible,
.z-entity-selector-trigger[aria-expanded="true"] {
    border-color: var(--z-teal-400);
    box-shadow: 0 0 0 3px rgba(50,205,178,0.15);
}

.z-entity-selector-label {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left;
}

.z-entity-selector-chevron {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--z-gray-500);
    border-bottom: 2px solid var(--z-gray-500);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 120ms ease;
}
.z-entity-selector-trigger[aria-expanded="true"] .z-entity-selector-chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.z-entity-selector-panel {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 340px; max-width: 95vw;
    background: var(--z-white);
    border: 1px solid rgba(50,205,178,0.35);
    border-radius: 10px;
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.12),
                0 0 0 1px rgba(50,205,178,0.10);
    padding: 10px;
    display: none;
    z-index: 100002;
}
.z-entity-selector-panel.is-open { display: block; }

.z-entity-selector-search-row {
    margin: 0 0 8px;
}

.z-entity-search {
    width: 100%; height: 32px;
    padding: 0 10px;
    border: 1px solid var(--z-gray-300); border-radius: 6px;
    background: var(--z-white); color: var(--z-black);
    font-size: 14px; line-height: 30px;
    outline: none;
    box-sizing: border-box;
}
.z-entity-search:focus {
    border-color: var(--z-teal-400);
    box-shadow: 0 0 0 3px rgba(50,205,178,0.15);
}

.z-entity-tree {
    max-height: 420px; overflow-y: auto; overflow-x: hidden;
    padding: 4px 2px;
}

.z-entity-tree-empty {
    padding: 12px; color: var(--z-gray-500);
    font-size: 13px; text-align: center;
}

/* Fancytree overrides — keep the widget's behavior but tighten to Zwaygo scale */
.z-entity-tree ul.fancytree-container {
    border: 0; background: transparent; outline: none;
    font-family: var(--z-font-body); font-size: 14px;
}
.z-entity-tree .fancytree-node {
    padding: 2px 0; line-height: 22px;
}
.z-entity-tree .fancytree-title { color: var(--z-black); }
.z-entity-tree .fancytree-active .fancytree-title,
.z-entity-tree .fancytree-selected .fancytree-title {
    background: rgba(50,205,178,0.12);
    color: var(--z-black);
    border-radius: 4px;
}
.z-entity-tree .fancytree-focused .fancytree-title {
    outline: 1px solid var(--z-teal-400);
    outline-offset: -1px;
}
.z-entity-tree .fancytree-hide { display: none; }
.z-entity-tree .fancytree-submatch > .fancytree-title { font-weight: 500; }
.z-entity-tree .fancytree-match > .fancytree-title mark {
    background: rgba(50,205,178,0.25); color: inherit;
}

/* ---- Property-management header dropdown (large fancytree selector) ----
   The page H1 acts as the trigger; the popover reuses the .z-entity-tree
   fancytree skin above, just sized up. See PropertyTreeSelector.ascx. */
.z-propsel { position: relative; }

.z-propsel-trigger {
    display: inline-block;
    cursor: pointer;
    border-radius: 10px;
    padding: 4px 12px 6px;
    margin: -4px -12px -6px;   /* bleed the hit-area without shifting layout */
    outline: none;
    transition: background 120ms ease, box-shadow 120ms ease;
}
.z-propsel-trigger:hover { background: rgba(50,205,178,0.06); }
.z-propsel-trigger:focus-visible,
.z-propsel-trigger[aria-expanded="true"] {
    background: rgba(50,205,178,0.08);
    box-shadow: 0 0 0 3px rgba(50,205,178,0.15);
}

.z-propsel-title-line { display: inline-flex; align-items: center; gap: 14px; }
.z-propsel-chevron {
    flex: 0 0 auto;
    width: 14px; height: 14px;
    border-right: 3px solid var(--z-gray-500);
    border-bottom: 3px solid var(--z-gray-500);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 140ms ease;
}
.z-propsel-trigger[aria-expanded="true"] .z-propsel-chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* Add mode (Add Property Manager / Region / Community): the entity selector
   doesn't apply — you're creating a new entity, not picking one. Hide the
   dropdown title + chevron and make the trigger inert, leaving the "Add …"
   eyebrow as a plain heading. Toggled by code-behind adding .is-addmode on
   #propman-entity-wrap; cleared automatically when the header re-renders on
   the next select/view postback. */
.z-propsel.is-addmode .z-propsel-title-line { display: none; }
.z-propsel.is-addmode .z-propsel-trigger {
    cursor: default; pointer-events: none; background: none; box-shadow: none;
}

.z-propsel-panel {
    position: absolute; top: calc(100% + 8px); left: 0;
    width: 640px; max-width: 96vw;
    background: var(--z-white);
    border: 1px solid rgba(50,205,178,0.35);
    border-radius: 12px;
    box-shadow: 0 12px 40px 0 rgba(0,0,0,0.16),
                0 0 0 1px rgba(50,205,178,0.10);
    padding: 14px;
    display: none;
    z-index: 100002;
}
.z-propsel-panel.is-open { display: block; }

.z-propsel-search-row { margin: 0 0 10px; position: relative; }

/* Clear (×) button inside the search box. Hidden until the row gets
   .has-value (toggled by the selector script while the box has text). */
.z-propsel-search-row .z-search-clear {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    display: none;
    align-items: center; justify-content: center;
    padding: 0 0 2px;            /* optically center the × glyph */
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--z-gray-500);
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.z-propsel-search-row.has-value .z-search-clear { display: flex; }
.z-propsel-search-row .z-search-clear:hover {
    color: var(--z-black);
    background: rgba(50,205,178,0.12);
}
.z-propsel-search-row .z-search-clear:focus-visible {
    outline: 2px solid var(--z-teal-400);
    outline-offset: 1px;
}

/* Larger scroll area than the compact header selector. Allow horizontal
   scroll so long / deeply-indented PM, region and community names show in
   full instead of being clipped by the panel edge. */
.z-propsel-tree.z-entity-tree {
    max-height: 60vh;
    min-height: 220px;
    padding: 6px 4px;
    overflow-x: auto;
}
/* Size the tree to its widest node (not just the panel width) so the names
   above can actually overflow-and-scroll rather than getting cut off. */
.z-propsel-tree.z-entity-tree ul.fancytree-container {
    width: max-content;
    min-width: 100%;
}
.z-propsel-tree.z-entity-tree .fancytree-title { white-space: nowrap; }

/* Larger type than the compact header selector: this dropdown is the page's
   primary navigation surface, so the search box and tree rows step up from
   the shared 14px skin to 15px (rows get matching breathing room). */
.z-propsel-panel .z-entity-search {
    font-size: 15px;
    height: 36px; line-height: 34px;
    padding-right: 36px;   /* keep typed text clear of the × button */
}
.z-propsel-tree.z-entity-tree ul.fancytree-container { font-size: 15px; }
.z-propsel-tree.z-entity-tree .fancytree-node {
    padding: 3px 0; line-height: 24px;
}

.z-selector-row {
    display: flex; align-items: center;
    gap: 12px; flex-wrap: wrap;
}

.z-selector-label {
    font-size: 14px; font-weight: 600;
    color: var(--z-black); white-space: nowrap;
}

.ns-header-secondary .button,
[id$='Button_ReturnToAdmin'] {
    border: 1px solid var(--z-gray-300); background: var(--z-white);
    color: var(--z-black); border-radius: 999px;
    height: 32px; line-height: 30px; padding: 0 14px;
    font-size: 12px; cursor: pointer;
}

.ns-header-secondary select,
.ns-header-secondary .chosen-container-single .chosen-single {
    border: 1px solid var(--z-gray-300); border-radius: 6px;
    background: var(--z-white); box-shadow: none;
    color: var(--z-black); height: 32px; line-height: 30px;
    font-size: 14px; padding: 0 8px;
}
.ns-header-secondary .chosen-container { min-width: 220px; }


/* ==========================================================
   5. MENU BAR — fixed overlay on the nav bar, right-aligned
   Figma: flex row, gap:40, Gustavo_trial 16/24/500
   ========================================================== */
#Panel_MenuBar {
    position: fixed; top: 20px;
    left: 64px; right: 64px;
    width: auto;
    max-width: none;
    height: 72px;
    z-index: 100000;
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 40px;
    pointer-events: none;
    background: transparent;
}

/* Pin the menu vertically. Two reasons this is needed:
   1. <table> as a flex item can stretch full-height instead of honoring
      align-items: center on Panel_MenuBar.
   2. ASP.NET Menu emits inline vertical-align="top" on its <td>s,
      which would stick the menu items at the top of the cell. */
#Panel_MenuBar > table.menu-layout-table {
    align-self: center;
    height: 100%;
}
#Panel_MenuBar > table.menu-layout-table > tbody,
#Panel_MenuBar > table.menu-layout-table > tbody > tr {
    height: 100%;
}
#Panel_MenuBar td,
#Panel_MenuBar tr,
#Panel_MenuBar tbody { vertical-align: middle !important; }

#Panel_MenuBar *              { pointer-events: auto; }
#Panel_MenuBar > table,
.menu-layout-table            { width: auto; margin: 0; border-spacing: 0; background: transparent; }
.menu-layout-main-cell        { width: auto; padding: 0; background: transparent; }
.menu-layout-main-cell        { height: 100%; vertical-align: middle !important; }

#menubar {
    border: 0; border-radius: 0; box-shadow: none;
    background: transparent; background-image: none;
    overflow: visible;
    height: 100%;
    display: flex; align-items: center;
}
#menubar > table {
    height: 100%;
    margin: 0 !important;
    margin-left: auto !important;
}
#menubar a       { color: var(--z-black); text-decoration: none; }

.menu { display: flex; align-items: center; margin: 0; gap: 0; }

.menu-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; height: 24px;
    border: 0; border-right: 0;
    padding: 0 20px;
    background: transparent; background-image: none;
    cursor: pointer;
}
.menu-button:hover { background: transparent; }

.menu-icon, .menu-downicon, .menu-button img {
    display: none !important; height: 0; width: 0; margin: 0; padding: 0;
}

/* Override ASP.NET Menu inline styles: font-size:1em, border-style:none */
#menubar a,
.menu-button a {
    font-family: var(--z-font-display) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: var(--z-black) !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ASP.NET Menu wraps each item in a nested <table> — collapse it */
.menu-button,
.menu-button > table,
.menu-button > table td {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* The Menu1 table sits inside #menubar > table > tr > td (single outer cell).
   Inside Menu1, separator cells have width:0px and divider images.
   Hide dividers + width:0 cells; space items with padding. */
#Menu1 > tbody > tr > td[style*="width:0"] {
    display: none !important;
}
#Menu1 > tbody > tr > td > img[src*="button-divider"] {
    display: none !important;
}
/* Menu item cells — add horizontal spacing */
#Menu1 > tbody > tr > td[id^="Menu1n"] {
    padding: 0 20px !important;
}

.menu-text {
    margin: 0; padding: 0;
    color: var(--z-black);
    font-family: var(--z-font-display);
    font-size: 16px; font-weight: 500; line-height: 24px;
    white-space: nowrap;
}

.menu-button:hover .menu-text,
.menu-button:hover a,
.menu-button.selected .menu-text { color: var(--z-teal-400) !important; }

/* Highlight current page menu item — match by href */
#menubar a[href="NewSite_Dashboard.aspx"] .menu-text { color: var(--z-teal-400) !important; }

/* Divider image cells inside the outer wrapper table — the <td>
   next to the Menu1 <td> that holds just an <img> tag */
#menubar > table > tbody > tr > td:last-child {
    display: none !important;
}

/* Compact header on scroll */
body.ns-header-compact .menu-icon,
body.ns-header-compact .menu-downicon { display: none !important; }
body.ns-header-compact img[src$="button-divider.png"] { display: none !important; }


/* ==========================================================
   5.1 DROPDOWN SUBMENUS  (ASP.NET Menu dynamic popouts)
   Popout container: <div id="Menu1n*Items"> emitted by the
   control. Item cells carry .submenu-button (level 2) or
   .submenu_level3_button (level 3) from LevelMenuItemStyles.
   ========================================================== */

/* Make each top-level menu cell the positioning root for its
   popout. ASP.NET's JS-computed inline left/top land wrong
   because the ambient containing block is #SiteHeader (fixed)
   combined with our flex layout — easier to pin the popout in
   CSS than to fight the JS offset math. */
#Menu1 > tbody > tr > td[id^="Menu1n"] { position: relative; }

/* Popout card — white surface, tinted teal edge + shadow
   (mirrors .z-card: low-alpha shadow needs a visible border
   to read as a boundary on white, per Figma/browser gotcha). */
div[id^="Menu1"][id$="Items"] {
    background: var(--z-white) !important;
    border: 1px solid rgba(50, 205, 178, 0.35) !important;
    border-radius: 12px !important;
    box-shadow:
        0 12px 32px rgba(50, 205, 178, 0.28),
        0 2px 8px rgba(0, 0, 0, 0.06) !important;
    padding: 8px !important;
    min-width: 220px;
    z-index: 100000 !important;
}

/* Level-2 popouts — pin to parent menu button's bottom-left.
   Direct-child selector so nested level-3 popouts (deeper in
   a submenu cell) don't match and keep their own rules. */
#Menu1 > tbody > tr > td[id^="Menu1n"] > div[id$="Items"] {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 6px;
}

/* Level-3 popouts fly out to the right of their parent item.
   Each level-2 cell becomes the positioning root for its own
   child popout so ASP.NET's JS coords don't apply. */
.submenu-button { position: relative; }
.submenu-button > div[id$="Items"] {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: 6px;
    margin-top: -8px; /* cancel popout's 8px top padding so the
                         first item lines up with its parent row */
}

/* Admin's level-2 popout sits near the right of the menu bar and
   would clip past the viewport's right edge with ASP.NET's default
   JS-set position. Override `left/right` so the popout's right
   edge aligns with the Admin cell's right edge.

   The popout is `position: absolute`; its containing block is
   #Panel_MenuBar (position: fixed, inset 64px from the viewport).
   The exact `right` value is computed against Panel_MenuBar and
   applied inline by JS in NewSite.master — the `right: 20px` here
   is just a fallback in case the JS doesn't run.

   The `.z-admin-popout` class is also applied by that JS because
   the cell's emitted id (Menu1n*) shifts with the user's role
   (the code-behind removes items at varying indices). */
.z-admin-popout {
    left: auto !important;
    right: 20px !important;
}

/* Collapse the nested table chrome ASP.NET wraps each popout in */
div[id^="Menu1"][id$="Items"] > table,
div[id^="Menu1"][id$="Items"] > table > tbody,
div[id^="Menu1"][id$="Items"] > table > tbody > tr,
div[id^="Menu1"][id$="Items"] > table > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Remove the static-menu horizontal padding for popout cells */
div[id^="Menu1"][id$="Items"] td[id^="Menu1"] {
    padding: 0 !important;
    display: block !important;
}

/* Inner link wrapper tables (one per item) */
.submenu-button,
.submenu_level3_button,
.submenu-button > table,
.submenu-button > table > tbody,
.submenu-button > table > tbody > tr,
.submenu-button > table > tbody > tr > td,
.submenu_level3_button > table,
.submenu_level3_button > table > tbody,
.submenu_level3_button > table > tbody > tr,
.submenu_level3_button > table > tbody > tr > td {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* The clickable item */
.submenu-button a,
.submenu_level3_button a,
#menubar .submenu-button a,
#menubar .submenu_level3_button a {
    display: block !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-family: var(--z-font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    color: var(--z-gray-600) !important;
    white-space: nowrap;
    text-decoration: none !important;
    border: 0 !important;
    transition: background-color 120ms ease, color 120ms ease;
}

.submenu-button a:hover,
.submenu_level3_button a:hover,
#menubar .submenu-button a:hover,
#menubar .submenu_level3_button a:hover {
    background: rgba(50, 205, 178, 0.12) !important;
    color: var(--z-teal-500) !important;
}

/* The StaticItemTemplate renders .menu-icon / .menu-text /
   .menu-downicon inside every item. Icons/arrows stay hidden
   (already globally); make .menu-text inherit the link style
   instead of the display-font used for top-level buttons. */
.submenu-button .menu-text,
.submenu_level3_button .menu-text {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}


/* ==========================================================
   6. LEASING DASHBOARD  (Panel_LeasingConsultant)
   ========================================================== */
.ns-landlord-shell,
.ns-landlord-shell * { box-sizing: border-box; }
.ns-landlord-shell   { color: var(--z-black); font-family: var(--z-font-body); }

.ns-landlord-empty-state {
    max-width: var(--z-max-w); margin: 0 auto; padding-top: 24px;
}

/* ---- 6a. Welcome row ---- */
/* Figma: welcome at top:200, btn at top:192, 64px card gap (320-200-48-8) */
.ns-landlord-welcome-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 48px;
}

.ns-landlord-welcome {
    margin: 0;
    font-family: var(--product-display-40-font-family);
    font-size: var(--product-display-40-font-size);
    font-weight: var(--product-display-40-font-weight);
    line-height: var(--product-display-40-line-height);
    color: var(--z-black);
}
.ns-landlord-welcome span,
.ns-landlord-welcome label {
    font-family: inherit; font-size: inherit; font-weight: inherit;
}

/* Figma: .btn-large — 64×auto, pill, black bg, body-med white text */
.ns-landlord-enroll-btn {
    height: 64px; border-radius: 60px;
    background: var(--z-black); color: var(--z-white);
    padding: 18px 32px;
    font-family: var(--body-med-font-family);
    font-size: var(--body-med-font-size);
    font-weight: var(--body-med-font-weight);
    line-height: var(--body-med-line-height);
    text-decoration: none; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap; border: none;
}
.ns-landlord-enroll-btn:hover { background: #222; color: var(--z-white); text-decoration: none; }

.ns-landlord-community-row { display: none; }


/* ---- 6b. Dashboard card (z-card) ----
   Figma .frame-124225: 1272×304, white bg, rounded-16, shadow.
   Uses a CSS grid with 3 cols matching Figma absolute positions:
     Dashboard title at left:40  → col 1 = 333px
     Imm attention at left:373   → col 2 = flex
     Notes at left:891           → col 3 = 381px         */
.z-card {
    width: 100%; max-width: 1272px;
    margin: 0 0 72px;
    padding: 32px 40px;
    background: var(--z-white);
    border: none;
    border-radius: 16px;
    box-shadow: var(--z-shadow);
    position: relative;
}

/* Attention card (leasing dashboard) has a fixed min-height */
.z-attention-card { min-height: 304px; }

.z-card-grid {
    display: grid;
    grid-template-columns: 333px minmax(0, 1fr) 381px;
    grid-template-areas:
        "title    subtitle notes"
        "status   links    notes";
    column-gap: 0; row-gap: 32px;
    align-items: start;
}

/* Figma .dashboard-2: product-display-32 */
.z-card-title {
    grid-area: title; margin: 0;
    font-family: var(--product-display-32-font-family);
    font-size: var(--product-display-32-font-size);
    font-weight: var(--product-display-32-font-weight);
    line-height: var(--product-display-32-line-height);
    color: var(--z-black);
}

/* Figma .immediate-attention-required: product-display-24 */
.z-card-subtitle {
    grid-area: subtitle; margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
}

/* Figma .frame-124295: flex col, gap:24, padding-right:24, 14px/24px regular */
.z-card-notes {
    grid-area: notes;
    display: flex; flex-direction: column; gap: 24px;
    padding-right: 24px;
}
.z-card-notes p {
    margin: 0;
    font-family: var(--z-font-body); font-weight: 400;
    font-size: 14px; line-height: 24px;
    color: var(--z-black);
}

/* Figma .frame-124278: count box 82×82 at card-relative top:104/left:40 */
.z-card-status {
    grid-area: status;
    display: grid; grid-template-columns: 82px 1fr;
    column-gap: 30px; align-items: start;
}

.z-card-count {
    width: 82px; height: 82px;
    border: none;
    border-radius: 16px;
    background: var(--z-white);
    box-shadow: var(--z-shadow);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--z-font-body);
    font-size: 32px; font-weight: 600; line-height: 40px;
    color: var(--z-teal-400);
}

/* Figma .areas-require-attention: body-semibold */
.z-card-status-label {
    margin-top: 16px;
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}

/* Figma .frame-124220: flex col, gap:16 */
.z-card-links {
    grid-area: links;
    display: flex; flex-direction: column; gap: 16px;
    padding-top: 6px;
}

/* Figma .frame-124218: flex row, gap:24, 18-28-semibold */
.z-link-row {
    display: flex; align-items: center; gap: 24px;
}

.z-link-count {
    flex: 0 0 auto;
    font-family: var(--18-28-semibold-font-family);
    font-size: var(--18-28-semibold-font-size);
    font-weight: var(--18-28-semibold-font-weight);
    line-height: var(--18-28-semibold-line-height);
    text-align: right;
    color: var(--z-black);
}
.z-link-count span,
.z-link-count label { font: inherit; color: inherit; }

.z-link-text,
.z-link-text a,
.z-link-text span,
.z-link-text input[type="submit"] {
    font-family: var(--18-28-semibold-font-family);
    font-size: var(--18-28-semibold-font-size);
    font-weight: var(--18-28-semibold-font-weight);
    line-height: var(--18-28-semibold-line-height);
    color: var(--z-black);
    text-decoration: none; background: transparent; border: none;
    padding: 0; margin: 0; cursor: pointer;
}
.z-link-text a:hover,
.z-link-text input[type="submit"]:hover { color: var(--z-teal-400); }


/* ---- 6c. Residents section ---- */
.ns-landlord-residents-shell { width: 100%; }
.ns-landlord-residents-wrap {
    width: 100%; max-width: var(--z-max-w);
    min-height: 500px; margin: 0 auto;
}
.ns-landlord-residents-section { padding-bottom: 40px; }

/* Figma .frame-124352: "Residents" + search bar, flex space-between */
.ns-landlord-residents-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}
.ns-landlord-residents-header h3 {
    margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
}

/* Search bar — Figma .search-bar: 524×56, pill, border gray-300 */
.ns-landlord-resident-search {
    width: 360px; height: 40px;
    border-radius: 40px;
    border: 1px solid var(--z-gray-300);
    background: var(--z-white);
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px 0 16px;
    overflow: hidden;
}
.ns-landlord-search-icon {
    color: var(--z-black); font-size: 16px; line-height: 1; flex-shrink: 0;
}
.ns-landlord-resident-search input,
.ns-landlord-resident-search input[type="text"] {
    width: 100%; height: 38px;
    border: 0; outline: 0; background: transparent;
    font-family: var(--body-reg-font-family);
    font-size: 14px;
    font-weight: var(--body-reg-font-weight);
    line-height: 20px;
    color: var(--z-black); padding: 0; margin: 0; box-shadow: none;
}
.ns-landlord-resident-search input::placeholder {
    color: var(--z-gray-600); opacity: 1;
}

/* Controls row: tabs + toggle — Figma .frame-124353 */
.ns-landlord-residents-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 16px;
}

/* Toggle — Figma .toggle: 49×32, pill border gray-400, teal dot */
.ns-landlord-toggle-wrap {
    display: flex; align-items: center; justify-content: flex-end; margin-left: auto;
}
.ns-landlord-toggle-wrap table { border-spacing: 0; }
.ns-landlord-toggle-wrap > input.button { display: none; }

.z-toggle-row {
    display: flex; align-items: center; gap: 10px;
}
.z-toggle-label,
.z-toggle-row > span {
    font-family: var(--z-font-body);
    font-size: 13px; font-weight: 500; line-height: 20px;
    color: var(--z-black);
}

.z-toggle-row input[type="checkbox"],
.z-toggle-checkbox input[type="checkbox"],
.z-th-toggle input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 38px; height: 22px; border-radius: 22px;
    border: 1px solid var(--z-gray-400);
    background: var(--z-white);
    position: relative; cursor: pointer; margin: 0; padding: 0;
}
.z-toggle-row input[type="checkbox"]::after,
.z-toggle-checkbox input[type="checkbox"]::after,
.z-th-toggle input[type="checkbox"]::after {
    content: "";
    position: absolute; top: 3px; left: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--z-teal-400);
    transition: left 0.15s ease;
}
.z-toggle-row input[type="checkbox"]:not(:checked)::after,
.z-toggle-checkbox input[type="checkbox"]:not(:checked)::after,
.z-th-toggle input[type="checkbox"]:not(:checked)::after {
    left: 21px;
}


/* ---- 6d. Residents GridView table ----
   Figma: flex column of 48px rows, header 56px with bottom border #a5a5a5.
   Column positions (px within 1312):
     Resident=16  Date=310  Completion=470  EnrStatus=630
     LastDep=781  NextRent=946  Balance=1115  Excess=1247  */

.ns-landlord-table-shell { width: 100%; }

.ns-landlord-residents-shell .gridview {
    width: 100%; margin: 0; border: 0;
    table-layout: fixed; border-collapse: collapse;
    background: transparent;
}

/* Header: body-semibold, 56px, border-bottom gray-400 */
.ns-landlord-residents-shell .gridview th {
    height: 56px;
    border: 0; border-bottom: 1px solid var(--z-gray-400);
    background: transparent;
    font-family: var(--body-semibold-font-family);
    font-weight: var(--body-semibold-font-weight);
    font-size: var(--body-semibold-font-size);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black); text-align: center;
    padding: 4px 12px; vertical-align: middle;
}

/* Body cells: body-med, 48px rows */
.ns-landlord-residents-shell .gridview td {
    height: 48px; border: 0;
    background: transparent;
    font-family: var(--body-med-font-family);
    font-weight: var(--body-med-font-weight);
    font-size: var(--body-med-font-size);
    line-height: var(--body-med-line-height);
    color: var(--z-black); text-align: center;
    padding: 12px; vertical-align: middle;
}

/* Alternating row background */
.ns-landlord-residents-shell .gridview tr.gridrow-alt td {
    background-color: var(--z-gray-100) !important;
}
.ns-landlord-residents-shell .gridview tr.gridrow:hover td,
.ns-landlord-residents-shell .gridview tr.gridrow-alt:hover td {
    background-color: #eef9f6 !important; cursor: pointer;
}

/* Column widths from Figma pixel positions / 1312 */
.ns-landlord-residents-shell .gridview th:nth-child(1),
.ns-landlord-residents-shell .gridview td:nth-child(1) { width: 22.4%; text-align: left; padding-left: 16px; }

.ns-landlord-residents-shell .gridview th:nth-child(2),
.ns-landlord-residents-shell .gridview td:nth-child(2) { width: 12.2%; }

.ns-landlord-residents-shell .gridview th:nth-child(3),
.ns-landlord-residents-shell .gridview td:nth-child(3) { width: 12.2%; }

.ns-landlord-residents-shell .gridview th:nth-child(4),
.ns-landlord-residents-shell .gridview td:nth-child(4) { width: 11.5%; }

.ns-landlord-residents-shell .gridview th:nth-child(5),
.ns-landlord-residents-shell .gridview td:nth-child(5) { width: 12.6%; }

.ns-landlord-residents-shell .gridview th:nth-child(6),
.ns-landlord-residents-shell .gridview td:nth-child(6) { width: 12.9%; }

.ns-landlord-residents-shell .gridview th:nth-child(7),
.ns-landlord-residents-shell .gridview td:nth-child(7) { width: 10.1%; text-align: right; }

.ns-landlord-residents-shell .gridview th:nth-child(8),
.ns-landlord-residents-shell .gridview td:nth-child(8) { width: 6.1%; text-align: right; padding-right: 16px; }

/* Resident name stays left */
.ns-landlord-residents-shell .gridview td:first-child,
.ns-landlord-residents-shell .gridview .name,
.ns-landlord-residents-shell .gridview .name label { text-align: left; color: inherit; font: inherit; }

.ns-landlord-residents-shell .gridview .amount { text-align: right; }

/* Empty state */
.ns-landlord-grid-empty { padding: 56px 0; text-align: center; }
.ns-landlord-grid-empty h3,
.ns-landlord-residents-shell .gridview h3 {
    margin: 0; color: var(--z-gray-600);
    font-family: var(--z-font-body); font-size: 15px; font-weight: 600;
    line-height: 24px; text-align: center;
}
.ns-landlord-residents-shell .gridview td[colspan] { border-bottom: 0; padding-bottom: 0; background: transparent; }
.ns-landlord-residents-shell .gridview .gridrow-alt td[colspan] { background: transparent; }


/* ==========================================================
   7. STATUS COLORS  (reusable across all pages)
   Figma: teal-400 for Yes/Active/On Track, red for No/Missed
   ========================================================== */
.z-status-good, .z-status-good label, .z-status-good span { color: var(--z-teal-400) !important; }
.z-status-bad,  .z-status-bad label,  .z-status-bad span  { color: var(--z-red) !important; }
.z-status-neutral, .z-status-neutral label, .z-status-neutral span { color: var(--z-black) !important; }
.z-status-warn, .z-status-warn label, .z-status-warn span { color: #c97a00 !important; }


/* ==========================================================
   8. MISC GLOBAL ELEMENTS
   ========================================================== */
[id$='Button_ReturnToRegion'] {
    display: inline-flex; align-items: center; margin-left: 8px;
}


/* ==========================================================
   9. ADMIN / PM / REGION DASHBOARDS
   No Figma design — styled to match the Zwaygo system:
   same fonts, colors, cards, grid treatment, spacing.
   ========================================================== */
.z-admin-shell {
    max-width: var(--z-max-w); margin: 0 auto; padding-top: 24px;
    color: var(--z-black); font-family: var(--z-font-body);
}

.z-section-title {
    font-family: var(--product-display-32-font-family);
    font-size: var(--product-display-32-font-size);
    font-weight: var(--product-display-32-font-weight);
    line-height: var(--product-display-32-line-height);
    color: var(--z-black); margin: 0;
}

.z-section-subtitle {
    font-family: var(--z-font-body);
    font-size: 15px; font-weight: 400; line-height: 24px;
    color: var(--z-gray-600); margin: 4px 0 0;
}

/* Two-card side-by-side summary (admin dashboard) */
.z-admin-summary { margin-bottom: 40px; }

.z-admin-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.z-admin-card {
    max-width: none;
    margin: 0;
    padding: 24px 32px;
    overflow: visible;
    min-width: 0;
}

.z-card-section-title {
    font-family: var(--body-semibold-font-family);
    font-size: 16px; font-weight: 600; line-height: 24px;
    color: var(--z-black);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--z-gray-400);
}

.z-card-section-title select {
    font-size: 14px; font-weight: 500;
    border: 1px solid var(--z-gray-300); border-radius: 6px;
    padding: 4px 8px; height: 30px;
    background: var(--z-white); color: var(--z-black);
    vertical-align: middle; margin-left: 4px;
}

/* Admin summary table rows (count + link pattern) */
.z-admin-table {
    width: 100%; border-collapse: collapse;
}

.z-admin-table {
    width: 100%; border-collapse: collapse;
    table-layout: auto;
}

.z-admin-table td {
    padding: 8px 4px;
    font-family: var(--z-font-body);
    font-size: 15px; font-weight: 500;
    line-height: 24px; color: var(--z-black);
    vertical-align: middle; border: 0;
    white-space: nowrap;
}

.z-admin-table td:first-child {
    width: 32px; text-align: center;
    font-weight: 600; font-size: 16px;
    padding-right: 12px;
}

.z-admin-table a,
.z-admin-table input[type="submit"] {
    color: var(--z-black); text-decoration: none;
    font: inherit; background: transparent; border: none;
    padding: 0; cursor: pointer;
}
.z-admin-table a:hover,
.z-admin-table input[type="submit"]:hover { color: var(--z-teal-400); }

/* Alert count styling for admin labels */
.alert-count {
    color: var(--z-teal-400) !important;
    font-weight: 600 !important;
}

/* Admin select dropdown */
.z-admin-select {
    font-size: 14px; border: 1px solid var(--z-gray-300);
    border-radius: 6px; padding: 4px 8px; height: 30px;
    background: var(--z-white); color: var(--z-black);
}

/* Pill tabs — reusable (admin Dashboard/Bank Recon + landlord All/Active) */
.z-pill-tabs,
.ns-landlord-residents-shell .newsite-tab {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--z-black); border-radius: 56px;
    padding: 4px; background: transparent;
    height: 48px; margin: 0;
}

.z-pill-tabs > input[type="submit"],
.z-pill-tabs > input[type="button"],
.ns-landlord-residents-shell .newsite-tab > input[type="submit"],
.ns-landlord-residents-shell .newsite-tab > input[type="button"] {
    height: 40px; min-width: 140px;
    border: 0; border-radius: 38px;
    background: transparent; color: var(--z-black);
    font-family: var(--small-semibold-font-family);
    font-size: var(--small-semibold-font-size);
    font-weight: var(--small-semibold-font-weight);
    line-height: var(--small-semibold-line-height);
    text-align: center; padding: 8px 24px;
    cursor: pointer; white-space: nowrap; margin: 0;
    top: 0;
}

.z-pill-tabs > input.newsite-tab-selected,
.ns-landlord-residents-shell .newsite-tab > input.newsite-tab-selected {
    background: var(--z-black); color: var(--z-white);
}

.z-pill-tabs hr,
.ns-landlord-residents-shell .newsite-tab hr { display: none; }
.ns-landlord-residents-shell .newsite-tab > input#Button_Tab_NPSAdmin_ResidentsView { display: none; }

.ns-landlord-residents-shell .newsite-tab {
    height: 36px;
    padding: 3px;
    border-radius: 40px;
}

.ns-landlord-residents-shell .newsite-tab > input[type="submit"],
.ns-landlord-residents-shell .newsite-tab > input[type="button"] {
    height: 28px;
    min-width: 108px;
    border-radius: 28px;
    font-size: 12px;
    line-height: 18px;
    padding: 5px 14px;
}

/* Compact pill tabs — for admin nav bars with many tabs (Property Management
   has 9). Smaller buttons, wraps to a second row instead of overflowing. */
.z-pill-tabs--compact {
    flex-wrap: wrap;
    height: auto;
    border-radius: 24px;
}
.z-pill-tabs--compact > input[type="submit"],
.z-pill-tabs--compact > input[type="button"] {
    min-width: auto;
    padding: 8px 18px;
}

/* Global GridView styling — any .gridview on any page */
.gridview {
    width: 100%; border-collapse: collapse;
    font-family: var(--z-font-body);
}

.gridview th {
    height: 48px;
    border: 0; border-bottom: 1px solid var(--z-gray-400);
    background: transparent;
    font-family: var(--body-semibold-font-family);
    font-weight: var(--body-semibold-font-weight);
    font-size: 14px; line-height: 20px;
    color: var(--z-black); text-align: center;
    padding: 6px 12px; vertical-align: middle;
}

.gridview th a {
    color: var(--z-black); text-decoration: none;
}
.gridview th a:hover { color: var(--z-teal-400); }

.gridview td {
    height: 44px; border: 0;
    background: transparent;
    font-family: var(--body-med-font-family);
    font-size: 14px; line-height: 22px;
    font-weight: var(--body-med-font-weight);
    color: var(--z-black); text-align: center;
    padding: 10px 12px; vertical-align: middle;
}

.gridview tr.gridrow td { background: transparent; }
.gridview tr.gridrow-alt td { background: var(--z-gray-100); }
.gridview tr.gridrow:hover td,
.gridview tr.gridrow-alt:hover td { background: #eef9f6; cursor: pointer; }

.gridview td.name,
.gridview td.name label { text-align: left; }
.gridview th.name { text-align: left; }
.gridview td.amount { text-align: right; font-weight: 600; }

/* Totals row for ShowFooter grids (disbursement detail report).
   Applied via FooterStyle-CssClass="z-grid-footer" (renders on the <tr>). */
.gridview tr.z-grid-footer td {
    font-weight: 700;
    border-top: 1px solid var(--z-gray-400);
    background: transparent;
}

/* Content-fit grid: the table sizes to its content instead of stretching to the
   container, so every column is exactly as wide as its widest cell - nothing can
   hog surplus width and nothing gets squeezed into accidental wrapping. All cells
   are nowrap: multi-part values (date+time, name+community) stack via explicit
   <br />, and genuine free-text columns opt back into wrapping with .z-col-wrap
   plus a chosen max-width. */
/* width:auto still stretched to the container in this shell, so pin the used
   width to the content's intrinsic size explicitly. */
.gridview.z-grid-fit { width: max-content; max-width: 100%; }
.gridview.z-grid-fit th,
.gridview.z-grid-fit td { padding-left: 18px; padding-right: 18px; white-space: nowrap; }
.gridview.z-grid-fit th.z-col-wrap,
.gridview.z-grid-fit td.z-col-wrap { white-space: normal; max-width: 340px; }

/* Sort indicators */
.gridview .sort-asc,
.gridview .sort-desc { position: relative; }
.gridview .sort-asc a::after { content: " \25B2"; font-size: 10px; }
.gridview .sort-desc a::after { content: " \25BC"; font-size: 10px; }

/* ---- Sticky residents header stack (leasing dashboard) ----
   The "Residents" title + search bar + tabs/toggle controls + grid
   <th> row all stick together so the user can scroll the data while
   the controls stay anchored at the top.

   Layout math:
     --z-header-bottom          wrapper pins flush under the nav pill
     --z-header-bottom + 108    grid <th> pins here
       wrapper height = header(40) + header MB(16) + controls(36) + pad-bot(16) = 108

   Pinning flush matters: any gap between the pill's bottom edge and the
   wrapper is a strip where data rows scroll by uncovered (rows emerging
   above the wrapper are hidden only by the pill's frosted glass).

   Controls' margin-bottom is moved into the wrapper as padding-bottom
   so the white background covers it — otherwise data scrolls visibly
   through the 16px gap before the <th> engages.

   Each sticky element needs its own solid background, otherwise rows
   scrolling underneath bleed through (the previous .z-grid--landlord
   th rule was being overridden by .ns-landlord-residents-shell .gridview
   th's transparent background — specificity 0,3,0 vs 0,1,1). */
.ns-landlord-residents-sticky {
    position: sticky;
    top: var(--z-header-bottom);
    z-index: 4;
    background: var(--z-white);
    padding-bottom: 16px;
}
.ns-landlord-residents-sticky .ns-landlord-residents-controls {
    margin-bottom: 0;
}

.ns-landlord-residents-shell .z-grid--landlord th {
    position: sticky;
    top: calc(var(--z-header-bottom) + 108px);
    z-index: 5;
    background: var(--z-white) !important;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--z-gray-400);
}

/* Buttons used in admin grids */
.button-blue,
.button-blue-small {
    background: var(--z-teal-400); color: var(--z-white);
    border: none; border-radius: 6px;
    padding: 6px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.button-blue:hover,
.button-blue-small:hover { background: var(--z-teal-500); }

.button-default,
.button {
    background: var(--z-white); color: var(--z-black);
    border: 1px solid var(--z-gray-300); border-radius: 6px;
    padding: 6px 16px; font-size: 13px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.button:hover,
.button-default:hover { border-color: var(--z-gray-400); background: var(--z-gray-100); }

/* Accordion sections in admin reservation lists */
.reservation_accordion {
    cursor: pointer; padding: 8px 0;
    border-bottom: 1px solid var(--z-gray-200);
}
.reservation_accordion h3 {
    font-family: var(--z-font-body);
    font-size: 16px; font-weight: 600; line-height: 28px;
    color: var(--z-teal-400); margin: 0;
}
.accordion_arrow {
    display: inline-block; width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--z-teal-400);
    margin-right: 8px; vertical-align: middle;
    transition: transform 0.2s ease;
}
.accordion_inactive .accordion_arrow { transform: rotate(-90deg); }

/* Property Manager / Region grid */
.region-gv { width: 100%; border-collapse: collapse; }
.region-gv th {
    height: 48px; border: 0; border-bottom: 1px solid var(--z-gray-400);
    background: transparent; font-size: 14px; font-weight: 600;
    color: var(--z-black); padding: 6px 16px; text-align: center;
    font-family: var(--z-font-body);
}
.region-gv td {
    height: 48px; border: 0; background: transparent;
    font-size: 14px; font-weight: 500; color: var(--z-black);
    padding: 10px 16px; vertical-align: middle;
    font-family: var(--z-font-body);
}
.region-gv tr.gridrow td { background: transparent; }
.region-gv tr.gridrow-alt td { background: var(--z-gray-100); }
.region-gv tr.gridrow:hover td,
.region-gv tr.gridrow-alt:hover td { background: #eef9f6; cursor: pointer; }
.region-gv tr.footer td { font-weight: 700; border-top: 1px solid var(--z-gray-400); }

.ns-grid-location { font-weight: 600; }
.ns-grid-empty { padding: 40px 0; text-align: center; color: var(--z-gray-600); }
.icon-btn { cursor: pointer; font-size: 18px; margin-right: 8px; }
.icon-plus::before { content: "+"; }
.icon-minus::before { content: "\2212"; }
.icon-child { display: inline-block; width: 20px; }


/* ==========================================================
   9b. DETAIL / REVIEW PAGES  (DisbursementDetails, RefundRequests, etc.)
   Spec: Figma/community-manage-special-disbursements/ — node 709-4010.
   Layout: z-admin-shell wrapper, section-title + subsection-title,
   detail-header row (title left, button right), gridview table.
   ========================================================== */

/* Back-to-summary link (asp:LinkButton renders as <a>) */
.z-back-link,
a.z-back-link,
input[type="submit"].z-back-link {
    display: inline-block;
    font: 500 14px/20px var(--z-font-body);
    color: var(--z-gray-600);
    text-decoration: none;
    background: none; border: none;
    cursor: pointer; padding: 0;
    margin-bottom: 8px;
}
.z-back-link:hover,
a.z-back-link:hover,
input[type="submit"].z-back-link:hover { color: var(--z-teal-400); }

/* product-display-24 sub-heading */
.z-subsection-title {
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
    margin: 0;
}

/* Title-left / button-right row */
.z-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 32px 0 24px;
    gap: 24px;
    flex-wrap: wrap;
}

.z-detail-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Action button on its own row ABOVE the page title (disbursement reports) —
   long community names in the title keep the full shell width. */
.z-report-head-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Large black pill button (Figma "btn-large") */
.z-btn-primary,
input[type="submit"].z-btn-primary {
    display: inline-flex;
    align-items: center; justify-content: center;
    height: 56px; padding: 14px 32px;
    background: var(--z-black); color: var(--z-white);
    border: none; border-radius: 60px;
    font: var(--body-med-font-weight) var(--body-med-font-size)/var(--body-med-line-height) var(--body-med-font-family);
    cursor: pointer; white-space: nowrap;
}
.z-btn-primary:hover,
input[type="submit"].z-btn-primary:hover { background: var(--z-gray-600); }

/* 40px variant for page-level admin actions. Bare .z-btn-primary is the
   56px Figma hero size — it reads oversized at admin-page density.
   box-sizing is required: content-box <input>s add padding to the height. */
.z-btn-primary.z-btn-primary--sm,
input[type="submit"].z-btn-primary--sm {
    box-sizing: border-box;
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
    line-height: 20px;
}

/* Compact black pill — matches .z-btn-teal--sm height so a primary and a
   teal compact button sit level when paired in a header action row. */
.z-btn-primary.z-btn-primary--xs,
input[type="submit"].z-btn-primary--xs {
    box-sizing: border-box;
    height: 32px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 18px;
}

/* Teal pill button (Figma "small-btn" — per-row approve) */
.z-btn-teal,
input[type="submit"].z-btn-teal {
    display: inline-flex;
    align-items: center; justify-content: center;
    height: 40px; padding: 8px 24px;
    background: var(--z-teal-400); color: var(--z-white);
    border: none; border-radius: 60px;
    font: var(--body-med-font-weight) var(--body-med-font-size)/var(--body-med-line-height) var(--body-med-font-family);
    cursor: pointer; white-space: nowrap;
}
.z-btn-teal:hover,
input[type="submit"].z-btn-teal:hover { background: var(--z-teal-500); }

/* Red text-link button (Figma "reject" — per-row reject) */
.z-btn-reject,
input[type="submit"].z-btn-reject {
    background: none; border: none; padding: 0;
    color: var(--z-red);
    font: var(--body-med-font-weight) var(--body-med-font-size)/var(--body-med-line-height) var(--body-med-font-family);
    cursor: pointer; white-space: nowrap;
}
.z-btn-reject:hover,
input[type="submit"].z-btn-reject:hover { text-decoration: underline; }

/* Destructive PILL button — a real button for modal footers and standalone
   destructive actions (the text-link .z-btn-reject above is for grid rows).
   Outline red at rest, fills red on hover; 40px to sit level with
   .z-btn-teal / .z-btn-outline / .z-modal-confirm. */
.z-btn-danger,
input[type="submit"].z-btn-danger {
    display: inline-flex;
    align-items: center; justify-content: center;
    height: 40px; padding: 8px 24px;
    background: var(--z-white); color: var(--z-red);
    border: 1px solid var(--z-red); border-radius: 60px;
    font: var(--body-med-font-weight) var(--body-med-font-size)/var(--body-med-line-height) var(--body-med-font-family);
    cursor: pointer; white-space: nowrap;
}
.z-btn-danger:hover,
input[type="submit"].z-btn-danger:hover { background: var(--z-red); color: var(--z-white); }

/* Icon button — quiet 32px square for per-row grid actions (rendered as
   asp:LinkButton wrapping an inline SVG that inherits currentColor).
   Neutral actions hover teal; add .z-icon-btn--danger for consequential
   actions (stop / skip / revert) to hover red instead. */
a.z-icon-btn,
.z-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    background: var(--z-white);
    color: var(--z-gray-600);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.z-icon-btn svg { width: 17px; height: 17px; display: block; }
a.z-icon-btn:hover,
.z-icon-btn:hover {
    color: var(--z-teal-500);
    border-color: var(--z-teal-400);
    background: rgba(50, 205, 178, 0.08);
    text-decoration: none;
}
a.z-icon-btn--danger:hover,
.z-icon-btn--danger:hover {
    color: var(--z-red);
    border-color: var(--z-red);
    background: rgba(214, 40, 40, 0.06);
}
.z-icon-btn-row {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Task card rows — a GridView styled as a clean card list instead of a
   bordered table. Each data row is a single cell holding one .z-task-row. */
/* Icon legend — key for the per-row action icons. Matches .z-icon-btn SVGs. */
.z-task-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    margin-top: 16px;
    padding: 12px 18px;
    border: 1px solid var(--z-gray-200);
    border-radius: 10px;
    background: var(--z-white);
}
.z-task-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--z-gray-600);
    white-space: nowrap;
}
.z-task-legend-item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--z-gray-600);
}
.z-task-legend-item.z-legend-teal svg { color: var(--z-teal-500); }
.z-task-legend-item.z-legend-red svg { color: var(--z-red); }

/* Category sections — the outer GridView rendered as a responsive grid:
   two sections side by side on wide screens, stacked when there isn't room.
   display:contents lets the tbody/tr melt away so each section is a direct
   grid item. */
.z-task-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    width: 100%;
}
.z-task-sections tbody { display: contents; }
.z-task-sections tr { display: block; min-width: 0; }
.z-task-sections td { display: block; padding: 0; border: none; background: none; }
@media (min-width: 1000px) {
    .z-task-sections { grid-template-columns: 1fr 1fr; }
}

/* Faded-teal section wrapper so each category reads as a group rather than a
   wall of black-and-white cards. */
.z-task-section {
    border: 1px solid rgba(50, 205, 178, 0.35);
    background: rgba(50, 205, 178, 0.04);
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 0;
}
.z-task-section-title {
    margin: 0 0 14px;
    font-family: var(--product-display-24-font-family);
    font-size: 18px;
    font-weight: var(--product-display-24-font-weight);
    line-height: 24px;
    color: var(--z-black);
}

/* Task list inside a section — the inner GridView rendered as a single
   column of cards. display:contents lets the tbody/tr melt away so each card
   becomes a direct grid item. */
.z-task-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    width: 100%;
}
.z-task-grid tbody { display: contents; }
.z-task-grid tr { display: block; min-width: 0; }
.z-task-grid td { display: block; padding: 0; border: none; background: none; }

.z-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
    background: var(--z-white);
    border: 1px solid var(--z-gray-200);
    border-radius: 10px;
    padding: 14px 18px;
}
.z-task-row-info { min-width: 0; }
.z-task-row-name {
    font-family: var(--body-semibold-font-family);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--z-black);
}
.z-task-row-meta {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--z-gray-500);
}
.z-task-sep { color: var(--z-gray-300); margin: 0 2px; }
.z-task-meta-muted { color: var(--z-gray-400); }
.z-task-meta-danger { color: var(--z-red); font-weight: 600; }

/* Modal overlay for a server-toggled panel (Add/Edit recurring task).
   The panel's Visible is flipped in code-behind; when shown it covers the
   viewport as a centered dialog — no client JS needed. */
.z-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    overflow-y: auto;
}
.z-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 920px;
    max-width: 100%;
    margin: auto;
    max-height: calc(100vh - 96px);
    background: var(--z-white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
/* The form was built for full page width; inside the narrower modal let the
   multi-field rows wrap instead of forcing a horizontal scrollbar. */
.z-modal-panel-body .z-form-row { flex-wrap: wrap; }
.z-modal-panel-header {
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--z-gray-200);
}
.z-modal-panel-title {
    margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: 20px;
    font-weight: var(--product-display-24-font-weight);
    line-height: 28px;
    color: var(--z-black);
}
.z-modal-panel-body {
    padding: 24px 28px;
    overflow-y: auto;
}
.z-modal-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 28px;
    border-top: 1px solid var(--z-gray-200);
}

/* Neutral outline button — pairs with .z-btn-teal at the same 40px height so
   Cancel/Save sit level in a modal footer (global border-box keeps them equal). */
.z-btn-outline,
input[type="submit"].z-btn-outline {
    display: inline-flex;
    align-items: center; justify-content: center;
    height: 40px; padding: 8px 24px;
    background: var(--z-white); color: var(--z-gray-600);
    border: 1px solid var(--z-gray-300); border-radius: 60px;
    font: var(--body-med-font-weight) var(--body-med-font-size)/var(--body-med-line-height) var(--body-med-font-family);
    cursor: pointer; white-space: nowrap;
}
.z-btn-outline:hover,
input[type="submit"].z-btn-outline:hover {
    background: var(--z-gray-100);
    border-color: var(--z-gray-400);
    color: var(--z-black);
}

/* Error banner */
.z-error-banner {
    margin-bottom: 20px;
    padding: 12px 20px;
    border: 1px solid var(--z-red);
    border-radius: 8px;
    background: #fef2f2;
    color: var(--z-red);
    font: 500 14px/20px var(--z-font-body);
    text-align: center;
}

/* Empty state */
.z-empty-state {
    padding: 48px 24px;
    text-align: center;
    font: var(--body-semibold-font-weight) var(--body-semibold-font-size)/var(--body-semibold-line-height) var(--body-semibold-font-family);
    color: var(--z-gray-500);
}

/* Shared AlertControl (ascx_Controls/AlertControl.ascx) — inline status
   message shown after an action. Replaces the dead Bootstrap .alert-* classes. */
.z-alert {
    display: inline-block;
    margin: 8px 0;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: 500 14px/20px var(--z-font-body);
}
.z-alert:empty { display: none; }
.z-alert-error   { background: #fef2f2; border-color: var(--z-red);     color: var(--z-red); }
.z-alert-warn    { background: #fff8e6; border-color: #d9a400;          color: #8a6400; }
.z-alert-success { background: #ecfaf4; border-color: var(--z-teal-400); color: var(--z-teal-500); }

/* Floating toast for page-level status messages, so confirmations/errors stay
   visible no matter where the user has scrolled. Empty labels collapse
   (.z-alert:empty), so an empty toast takes no space and blocks nothing. */
.z-alert-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    /* translateY(100%) drops it one full toast-height below the 16px offset */
    transform: translate(-50%, 100%);
    z-index: 10050;
    width: min(600px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.z-alert-toast .z-alert,
.z-alert-toast .z-error-banner {
    pointer-events: auto;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.z-alert-toast--hiding { opacity: 0; }

/* Persistent error toast: the same floating strip, pinned just under the
   fixed site header instead of over it, and never faded by script - an error
   must stay on screen wherever the page is scrolled (owner rule: never in a
   scrollable area the user has to scroll back to). Used on pages whose
   action sits far from the page-level banner: a confirm modal on a long
   list, a bottom Approve button, the resident popup. Pages with a sticky
   header stack put the banner in the stack instead (.z-disb-sticky
   .z-error-banner). Wrap the page's Panel_ErrorMessage (inside its
   UpdatePanel) in <div class="z-alert-toast z-alert-toast--error">. */
.z-alert-toast--error {
    top: calc(var(--z-header-bottom) + 12px);
    transform: translateX(-50%);
}

/* Override checkbox + label */
.z-override-check {
    display: inline-flex;
    align-items: center; gap: 8px;
    font: 500 14px/20px var(--z-font-body);
    color: var(--z-black);
}

/* Bottom-only header border (matches Figma disbursement grid). */
.gridview.z-gridview-bordered th {
    border: 0;
    border-bottom: 1px solid var(--z-gray-400);
}

/* Resident name link in teal (Figma data rows). Applies anywhere the class is
   used - grid cells, hero headers - so resident links always read clickable. */
a.z-resident-link,
.gridview td a.z-resident-link {
    color: var(--z-teal-400); font-weight: 500;
}
a.z-resident-link:hover,
.gridview td a.z-resident-link:hover { text-decoration: underline; }

/* Override notice highlight */
.z-override-notice {
    color: var(--z-red) !important;
    font-weight: 600 !important;
}

/* Row-level CTA cell */
.z-row-ctas {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

/* Approve / Remove toggle pills (per-row, special-disbursements grid).
   Two mutually-exclusive pills; the active one is filled (teal = approve,
   red = remove), the inactive one is a muted outline. The real server-side
   checkboxes (Check_Approve / Check_Remove) are visually hidden inside the
   labels and drive the fill via the sibling-combinator on :checked — so the
   visual always mirrors the live checkbox state, with no extra JS. */
.z-toggle-pills {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.z-toggle-pill {
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}
.z-toggle-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0; padding: 0;
    pointer-events: none;
}
.z-toggle-pill-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 11px;
    border-radius: 60px;
    border: 1px solid var(--z-gray-300);
    background: var(--z-white);
    color: var(--z-gray-500);
    font: 500 12px/16px var(--z-font-body);
    white-space: nowrap;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.z-toggle-pill--approve input:checked ~ .z-toggle-pill-face {
    background: var(--z-teal-400);
    border-color: var(--z-teal-400);
    color: var(--z-white);
}
.z-toggle-pill--remove input:checked ~ .z-toggle-pill-face {
    background: var(--z-red);
    border-color: var(--z-red);
    color: var(--z-white);
}
/* No pill selected yet (a row left undecided, e.g. the admin's community-
   override list): the gray outline only reads as "not chosen" beside a
   filled pill - on its own it looks disabled - so each pill shows its
   action color as an outline until one is picked. */
.z-toggle-pills:not(:has(input:checked)) .z-toggle-pill--approve .z-toggle-pill-face {
    border-color: var(--z-teal-400);
    color: var(--z-teal-500);
}
.z-toggle-pills:not(:has(input:checked)) .z-toggle-pill--remove .z-toggle-pill-face {
    border-color: var(--z-red);
    color: var(--z-red);
}

/* Modal dialog (Zwaygo-styled) */
.z-modal {
    background: var(--z-white);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 380px;
    font-family: var(--z-font-body);
    color: var(--z-black);
}

.z-modal h2 {
    font-family: var(--product-display-24-font-family);
    font-size: 20px;
    font-weight: var(--product-display-24-font-weight);
    line-height: 28px;
    color: var(--z-black);
    margin: 0 0 12px;
}

.z-modal-divider {
    border: none; border-top: 1px solid var(--z-gray-200);
    margin: 12px 0;
}

.z-modal-field-label {
    font-weight: 600; font-size: 14px; line-height: 20px;
    margin-bottom: 6px;
}

.z-modal-detail {
    display: flex; gap: 8px;
    padding: 6px 0;
    font-size: 14px; line-height: 20px;
}
.z-modal-detail dt { font-weight: 600; white-space: nowrap; }
.z-modal-detail dt::after { content: ":"; }
.z-modal-detail dd { margin: 0; }

.z-modal textarea {
    display: block; width: 100%;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px; padding: 8px 12px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black); resize: vertical;
}
.z-modal textarea:focus { outline: none; border-color: var(--z-teal-400); }

.z-modal-actions {
    display: flex; justify-content: flex-end;
    gap: 12px; margin-top: 20px;
}

/* Gridview input fields (change-disbursement text box) — Figma "field" */
.gridview input.z-grid-input {
    width: 100%; max-width: 140px;
    height: 40px; padding: 8px 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
}
.gridview input.z-grid-input:focus { outline: none; border-color: var(--z-teal-400); }

/* Gridview multiline comment box */
.gridview textarea.z-grid-textarea {
    width: 100%; min-width: 140px;
    padding: 8px 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    font: 400 13px/18px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
    resize: vertical;
}
.gridview textarea.z-grid-textarea:focus { outline: none; border-color: var(--z-teal-400); }

/* Community comment block inside grid row */
.z-community-comment-label {
    font: 500 14px/24px var(--z-font-body);
    color: var(--z-black);
}
.z-community-comment-text {
    font: 500 14px/24px var(--z-font-body);
    color: var(--z-red);
}

/* Intro paragraphs on review pages (Figma body-reg). The first is a
   red warning-tone lead; subsequent ones are plain body copy. Footnote
   sits centered below the data grid. */
.z-refund-intro-red,
.z-refund-intro,
.z-refund-footnote {
    font-family: var(--body-reg-font-family);
    font-weight: var(--body-reg-font-weight);
    font-size: var(--body-reg-font-size);
    line-height: var(--body-reg-line-height);
    margin: 0 0 16px;
}
.z-refund-intro-red { color: var(--z-red); }
.z-refund-intro    { color: var(--z-black); }
.z-refund-footnote {
    color: var(--z-black);
    text-align: center;
    margin: 16px 0 0;
    font-style: italic;
}



/* ==========================================================
   9c. ENROLLMENT / RESERVATION FORM
   Spec: Figma/new-resident-enrollment-default-property-manger-view/
   Two-column body (644 left / 533 right) split by a 1px gray-300
   vertical divider. Sections have a 24px title; a bordered card
   holds the lead inputs; remaining inputs sit naked below.
   ========================================================== */

.z-form-page {
    color: var(--z-black);
    font-family: var(--z-font-body);
}

/* Single-column variant — centered 644px column (same width as the
   enrollment form's left column). Used by resident-facing standalone
   flows: Registration, upgrade, etc. */
.z-form-page--narrow {
    max-width: 644px;
    margin: 0 auto;
    padding: 24px;
}

.z-form-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 0 8px;
}

.z-form-page-title {
    font-family: var(--product-display-32-font-family);
    font-size: var(--product-display-32-font-size);
    font-weight: var(--product-display-32-font-weight);
    line-height: var(--product-display-32-line-height);
    color: var(--z-black);
    margin: 0;
}

.z-form-page-subtitle {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-gray-600);
    margin: 0 0 24px;
}

.z-form-intro {
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: var(--body-reg-font-weight);
    line-height: var(--body-reg-line-height);
    color: var(--z-black);
    margin: 0 0 40px;
    max-width: 644px;
}

.z-form-step-banner {
    border: 1px solid var(--z-teal-400);
    background: #f0fbf8;
    color: var(--z-black);
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 24px;
}

.z-form-header-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* Header utility buttons (Quick Fill, Resend Email, View/Add Notes) —
   small black pill, white text, with a clear hover. Override the
   .z-form-cancel base class they wear. */
.z-form-header-buttons .z-form-cancel,
.z-form-header-buttons input[type="submit"].z-form-cancel,
.z-form-header-buttons a.z-form-cancel {
    background: var(--z-black);
    color: var(--z-white);
    border-color: var(--z-black);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.z-form-header-buttons .z-form-cancel:hover,
.z-form-header-buttons input[type="submit"].z-form-cancel:hover,
.z-form-header-buttons a.z-form-cancel:hover {
    background: var(--z-gray-600);
    border-color: var(--z-gray-600);
    color: var(--z-white);
}

.z-form-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
}

.z-form-col-left {
    flex: 0 1 644px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.z-form-col-right {
    flex: 0 1 533px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.z-form-body-divider {
    flex: 0 0 1px;
    background: var(--z-gray-300);
    align-self: stretch;
}

/* Keep these as no-op selectors for backward compatibility */
.z-form-area-profile,
.z-form-area-charges,
.z-form-area-work {}

/* Push the Save block to the bottom of the right column so the column
   bottoms align even when the right column's content is shorter than
   the left column's. Mirrors the Figma where the Save sits at y=1757
   with empty space above to align with the Employment/Income bottom. */
.z-form-area-save { margin-top: auto; }

.z-form-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.z-form-section-title {
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
    margin: 0;
}

.z-form-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.z-form-divider {
    border: 0;
    border-top: 1px solid var(--z-gray-300);
    margin: 24px 0 8px;
    width: 100%;
}

.z-form-rows {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.z-form-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}
.z-form-row > .z-form-field { flex: 1 1 0; min-width: 0; }
.z-form-row > .z-form-field--narrow { flex: 0 0 auto; }
.z-form-row > .z-form-field--double { flex: 2 1 0; }

.z-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.z-form-label {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}

.z-form-required { color: var(--z-red); margin-left: 2px; }

/* Enrollment form, leasing-agent view: only a handful of fields are required, so asterisks tagged
   .LeasingAgentDisplay (resident-only requirements) are hidden when the form carries .is-leasing-agent.
   Ported from the retired NewSite.css; without it every asterisk showed for leasing agents. */
.is-leasing-agent .LeasingAgentDisplay { display: none !important; }

.z-form-discount-code {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-red);
}
.z-form-discount-code:empty { display: none; }

.z-form-input,
input.z-form-input,
select.z-form-input,
textarea.z-form-input {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    background: var(--z-white);
    color: var(--z-black);
    padding: 0 12px;
    font-family: var(--z-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    outline: none;
}
.z-form-input::placeholder { color: #a2a2a2; opacity: 1; }
.z-form-input:focus { border-color: var(--z-teal-400); }

textarea.z-form-input {
    height: auto;
    min-height: 40px;
    padding: 8px 12px;
    line-height: 20px;
}

select.z-form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'%3E%3Cpath d='M0.5 0.5L5.5 5L10.5 0.5' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.z-form-money { position: relative; }
.z-form-money::before {
    content: "$";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    color: var(--z-black);
    pointer-events: none;
    z-index: 1;
}
.z-form-money .z-form-input { padding-left: 24px; }

.z-form-radio-group,
.z-form-check-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    min-height: 24px;
}

.z-form-radio,
.z-form-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.z-form-radio input[type="radio"],
.z-form-check input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1px solid var(--z-gray-300);
    background: var(--z-white);
    cursor: pointer;
    flex: 0 0 auto;
    position: relative;
}
.z-form-radio input[type="radio"] { border-radius: 50%; }
.z-form-check input[type="checkbox"] { border-radius: 4px; }
.z-form-radio input[type="radio"]:checked { border-color: var(--z-teal-400); }
.z-form-radio input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 4px; left: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--z-teal-400);
}
.z-form-check input[type="checkbox"]:checked {
    background: var(--z-black);
    border-color: var(--z-black);
}
.z-form-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 3px; left: 7px;
    width: 6px; height: 11px;
    border: solid var(--z-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.z-form-radio label,
.z-form-check label {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
    cursor: pointer;
    margin: 0;
}

.z-form-inline-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.z-form-inline-row .z-form-label { flex: 0 0 auto; }

.z-form-total {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.z-form-total-amount {
    font-family: var(--z-font-display);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    color: var(--z-black);
}
.z-form-total-amount .bold_red {
    color: var(--z-red);
    font-size: 24px;
}

.z-form-save {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--z-gray-300);
}
.z-form-save-note {
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: var(--body-reg-font-weight);
    line-height: var(--body-reg-line-height);
    color: var(--z-black);
}

/* Muted italic helper note (field hints, "check your email" footnotes).
   Margin 0 — container gap (.z-form-card / .z-form-field) owns spacing. */
.z-form-footnote {
    margin: 0;
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: var(--body-reg-font-weight);
    line-height: var(--body-reg-line-height);
    font-style: italic;
    color: var(--z-gray-600);
}
/* Error banner placed inside a .z-form-card beside its action: the card's
   gap already spaces it, so drop the banner's standalone 24px margins. */
.z-form-card > .z-form-error-banner { margin: 0; }

.z-form-status-pill {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--z-gray-300);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--z-red);
    margin-bottom: 12px;
}

.z-form-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.z-form-submit,
input[type="submit"].z-form-submit {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 0 24px;
    background: var(--z-black);
    color: var(--z-white);
    border: none;
    border-radius: 60px;
    font-family: var(--z-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    opacity: 0.5;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
}
.z-form-submit:hover { background: var(--z-black); opacity: 1; }
.z-form-submit:disabled,
.z-form-submit.disabled { opacity: 0.4; cursor: default; }

/* Save button — ready state: solid Zwaygo teal instead of the gray-ish
   (opacity 0.5 black) default. Set in markup on buttons that are always
   clickable (Save reservation, Support Submit, Go to login screen). */
.z-form-submit.is-complete,
input[type="submit"].z-form-submit.is-complete {
    background: var(--z-teal-400);
    opacity: 1;
}
.z-form-submit.is-complete:hover,
input[type="submit"].z-form-submit.is-complete:hover {
    background: var(--z-teal-500);
    opacity: 1;
}

/* ucModalPopup (~/ascx_Controls/ModalPopup.ascx) — backdrop + Zwaygo-styled
   popup. The AjaxControlToolkit positions the popup itself; we just style
   it. Clicking the backdrop closes the popup via JS in the .ascx. */
.z-modal-backdrop {
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
}

.z-modal--popup {
    position: relative;
    background: var(--z-white);
    border-radius: 12px;
    padding: 32px 32px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 480px;
    max-width: calc(100vw - 32px);
    font-family: var(--z-font-body);
    color: var(--z-black);
    z-index: 10001;
}

.z-modal--popup .z-modal-h2 {
    font-family: var(--product-display-24-font-family);
    font-size: 20px;
    font-weight: var(--product-display-24-font-weight);
    line-height: 28px;
    color: var(--z-black);
    margin: 0 0 12px;
    padding-right: 32px;
}

.z-modal--popup .z-modal-body {
    font-size: 14px;
    line-height: 20px;
    color: var(--z-black);
    margin: 0 0 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Wide variant for modals that present content to inspect (proof images,
   ledgers). Referenced by markup before it was ever defined - the default
   480px was silently winning. */
.z-modal--popup.z-modal--wide {
    width: 920px;
}

.z-modal--popup .z-modal-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--z-gray-600);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.z-modal--popup .z-modal-x:hover {
    background: var(--z-gray-100);
    color: var(--z-black);
}

.z-modal--popup .z-modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}
/* Separates a dismiss action (Close/Cancel) to the left edge of the footer so
   the decision buttons breathe on the right. */
.z-modal--popup .z-modal-actions .z-push-left { margin-right: auto; }

/* Second modal layer - a confirmation stacked ON TOP of an open modal (e.g.
   Reject-with-reason above the proof review). The toolkit assigns both modal
   pairs the same inline z-indexes, so these must win with !important; the
   values are far above any toolkit default. Backdrop dims the layer-1 modal. */
.z-modal-backdrop.z-modal-backdrop-layer2 { z-index: 1000010 !important; }
.z-modal--popup.z-modal-layer2 { z-index: 1000011 !important; }

/* Confirm/close button inside ucModalPopup. Black pill, fits its content. */
.z-modal-confirm,
input[type="submit"].z-modal-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 24px;
    background: var(--z-black);
    color: var(--z-white);
    border: none;
    border-radius: 60px;
    font-family: var(--z-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.z-modal-confirm:hover,
input[type="submit"].z-modal-confirm:hover { background: var(--z-gray-600); }

.z-form-cancel,
a.z-form-cancel,
input[type="submit"].z-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    background: transparent;
    color: var(--z-black);
    border: 1px solid var(--z-gray-300);
    border-radius: 60px;
    font-family: var(--z-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    text-decoration: none;
}
.z-form-cancel:hover { background: var(--z-gray-100); }

.z-form-error-banner {
    border: 1px solid var(--z-red);
    background: #fdecee;
    color: var(--z-red);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 24px 0;
    font-size: 14px;
    font-weight: 500;
}

/* Reusable draggable-modal chrome for legacy AjaxControlToolkit popups
   reskinned as Zwaygo modals (DirectPaymentAccounts, BankFeedReversals,
   FailedDisbursementPostings, ExternalErrors). Title bar = drag handle;
   the body scrolls when content is tall. */
.z-modal-drag-header {
    cursor: move;
    border-bottom: 1px solid var(--z-gray-200);
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.z-modal-drag-header h1,
.z-modal-drag-header h2 {
    margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: var(--z-black);
}
.z-modal-scroll-body {
    max-height: 60vh;
    overflow: auto;
    margin: 0 -8px;
    padding: 0 8px;
}

/* An error raised inside a scrolling modal body pins to the top of that
   scrollport, so it is on screen whether the failing button sat at the top
   (a search) or the bottom (a confirm) of the body. The banner lives in its
   own always-refreshing UpdatePanel so async postbacks re-render it, and it is
   that wrapper div which sticks - it must be a direct child of the scroll body
   for the sticky range to span the whole body (ExternalErrorHandler.ascx). */
.z-modal-scroll-body > div[id$="UpdatePanel_ErrorMessage"] {
    position: sticky;
    top: 0;
    z-index: 2;
}
.z-modal-scroll-body > div[id$="UpdatePanel_ErrorMessage"] .z-error-banner {
    margin: 0 0 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Client-side tab bar (no postback) — replaces dead Bootstrap nav-tabs.
   Used by SalesAgentProfile (Profile / Commissions / Earnings). Pair with
   the tiny $.fn.tab shim on the page so legacy .tab('show') calls keep working. */
.z-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--z-gray-300);
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.z-tab-link {
    display: inline-block;
    padding: 12px 20px;
    font: 600 15px/20px var(--z-font-body);
    color: var(--z-gray-600);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.z-tab-link:hover { color: var(--z-black); }
.z-tab-link.is-active { color: var(--z-black); border-bottom-color: var(--z-teal-400); }
.z-tab-pane { display: none; padding: 24px 0; }
.z-tab-pane.is-active { display: block; }

@media (max-width: 1280px) {
    .z-form-body {
        flex-direction: column;
        gap: 40px;
    }
    .z-form-body-divider { display: none; }
    .z-form-col-left,
    .z-form-col-right { flex: 1 1 auto; }
    .z-form-area-save { margin-top: 0; }
}

/* Phones: #main already supplies the 16px gutter, so the narrow column drops
   its own side padding. Field rows wrap once a field would fall under 150px:
   on a 375px phone two fields still share a page line (first / last name,
   ~163px each), a third moves to a full-width line of its own instead of
   three ~95px columns with wrapped labels, misaligned inputs and clipped
   selects (enrollment form: salary / pay period / day paid, city / state /
   zip), and inside a popup's narrower body every field gets its own line.
   Rows nested inside a field - Registration's MM / DD / YYYY birthdate -
   stay on one line. */
@media (max-width: 600px) {
    .z-form-page--narrow { padding: 24px 0; }
    .z-form-row { flex-wrap: wrap; }
    .z-form-row > .z-form-field:not(.z-form-field--narrow) { flex: 1 1 150px; }
    .z-form-field > .z-form-row { flex-wrap: nowrap; }
    .z-form-field > .z-form-row > .z-form-field:not(.z-form-field--narrow) { flex: 1 1 0; }
}

/* Employment / income editor (ascx_Controls/EmployerIncomeControl.ascx, the
   Edit income popup): employer details (2/3) beside job and pay schedule
   (1/3), split by a gray rule. Phones stack the two, the rule moving on top. */
.z-income-cols { display: flex; gap: 32px; align-items: stretch; }
.z-income-col-main { flex: 2 1 0; min-width: 0; }
.z-income-col-side {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 32px;
    border-left: 1px solid var(--z-gray-300);
}
.z-form-row > .z-income-source-field { flex: 0 0 30%; }
.z-form-row > .z-income-state-field { flex: 1.4 1 0; }
@media (max-width: 600px) {
    .z-income-cols { flex-direction: column; gap: 24px; }
    .z-income-col-side {
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid var(--z-gray-300);
    }
}


/* ==========================================================
   9b. ENROLLMENT — "Complete enrollment" confirmation
   Two side-by-side option cards (online portal / download form)
   joined by an "or" divider, then lease-obligation footnote,
   then a final-step "Create login" CTA.
   Spec: Figma/new-enrollment/ — node 717:4519.
   ========================================================== */
.z-enroll-complete {
    display: flex;
    flex-direction: column;
    gap: 56px;
    padding: 24px 0 48px;
    color: var(--z-black);
    font-family: var(--z-font-body);
}

.z-enroll-complete-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.z-enroll-complete-title {
    margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
    text-align: center;
}

.z-enroll-complete-intro {
    margin: 0;
    max-width: 644px;
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: var(--body-reg-font-weight);
    line-height: var(--body-reg-line-height);
    color: var(--z-black);
    text-align: center;
}

/* Two option cards + center "or" divider. Grid keeps the divider's
   column intrinsic so the cards share remaining width equally. */
.z-enroll-options {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 20px;
    align-items: stretch;
    width: 100%;
    max-width: 1272px;
    margin-top: 8px;
}

.z-enroll-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 48px;
    background: var(--z-white);
    /* Tinted teal shadow alone reads as a boundary in Figma but
       vanishes in browsers — pair with a same-hue 1px border. */
    border: 1px solid rgba(50, 205, 178, 0.35);
    border-radius: 20px;
    box-shadow: var(--z-shadow);
    text-align: center;
}

.z-enroll-option-title {
    margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
}

.z-enroll-option-text {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: var(--body-reg-font-weight);
    line-height: var(--body-reg-line-height);
    color: var(--z-black);
}

.z-enroll-options-or {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    width: 58px;
}
.z-enroll-options-or-line {
    flex: 1 1 auto;
    width: 1px;
    background: var(--z-gray-300);
}
.z-enroll-options-or-text {
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
}

.z-enroll-complete-footnote {
    margin: 0;
    width: 100%;
    max-width: 644px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--z-gray-300);
    font-family: var(--z-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--z-black);
    text-align: center;
}

.z-enroll-complete-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Pill action button — primary CTA on celebration/confirmation
   screens. Sits at 56px to match the Figma rhythm; denser
   .z-form-submit / .z-modal-confirm patterns stay at 40px. */
.z-pill-btn,
input[type="submit"].z-pill-btn,
a.z-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    border: none;
    border-radius: 60px;
    background: var(--z-black);
    color: var(--z-white);
    font-family: var(--body-med-font-family);
    font-size: var(--body-med-font-size);
    font-weight: var(--body-med-font-weight);
    line-height: var(--body-med-line-height);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.z-pill-btn:hover { background: var(--z-gray-600); }

.z-pill-btn-primary,
input[type="submit"].z-pill-btn-primary,
a.z-pill-btn-primary { background: var(--z-teal-400); }
.z-pill-btn-primary:hover,
input[type="submit"].z-pill-btn-primary:hover { background: var(--z-teal-500); }

/* First-attempt state shows only the Atomic card, centered. */
.z-enroll-options.z-enroll-options--solo {
    grid-template-columns: minmax(0, 644px);
    justify-content: center;
}

/* Callout shown above the two options once an Atomic attempt failed or was cancelled.
   Amber "warn" tone (matches .z-status-warn) + a one-shot entrance pulse: the element
   only renders in the failed state, so the animation plays exactly when the resident
   lands back from the widget and should read this first. */
.z-enroll-fallback-msg {
    margin: 0;
    max-width: 644px;
    padding: 16px 24px;
    border: 1px solid #c97a00;
    border-radius: 12px;
    background: #fdf4e7;
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: 500;
    line-height: var(--body-reg-line-height);
    color: #8a5400;
    text-align: center;
    animation: z-fallback-attention 1.2s ease-out;
}

@keyframes z-fallback-attention {
    0%   { opacity: 0; transform: translateY(-6px); box-shadow: 0 0 0 0 rgba(201, 122, 0, 0.35); }
    35%  { opacity: 1; transform: translateY(0);    box-shadow: 0 0 0 10px rgba(201, 122, 0, 0.15); }
    100% { opacity: 1; transform: translateY(0);    box-shadow: 0 0 0 0 rgba(201, 122, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .z-enroll-fallback-msg { animation: none; }
}

/* --- Enrollment confirmation card (partial / incomplete save) -------------
   Shown after a partial reservation is saved (leasing-agent and resident
   views). Same bounded treatment as .z-proof-card: white surface, 1px tinted
   teal edge + soft teal glow, centered in the content column. */
.z-confirm-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 640px;
    margin: 24px auto 48px;
    padding: 40px 48px;
    background: var(--z-white);
    border: 1px solid rgba(50, 205, 178, 0.35);
    border-radius: 20px;
    box-shadow: var(--z-shadow);
}

.z-confirm-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.z-confirm-header h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
}

.z-confirm-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(50, 205, 178, 0.18);
    color: var(--z-teal-500);
    font-weight: 700;
}

.z-confirm-icon::before {
    content: "\2713";
    font-size: 16px;
    line-height: 1;
}

.z-confirm-body {
    font-family: var(--body-reg-font-family);
    font-size: 15px;
    line-height: 1.5;
    color: var(--z-gray-600);
    text-align: center;
}

.z-confirm-body p { margin: 0; }
.z-confirm-body p + p { margin-top: 12px; }

/* Legacy .bold spans (name/email) — the old global .bold rule left with NewSite.css */
.z-confirm-body .bold {
    font-weight: 600;
    color: var(--z-black);
}

/* Required fields a partial save still lacks (resident view). Warn amber like
   .z-enroll-fallback-msg; a left-aligned list centered in the card body.
   Bullets come back explicitly — the global ul reset strips them. */
.z-confirm-missing {
    width: fit-content;
    max-width: 100%;
    margin: 16px auto;
    padding: 16px 24px;
    border: 1px solid #c97a00;
    border-radius: 12px;
    background: #fdf4e7;
    color: #8a5400;
    text-align: left;
}

.z-confirm-missing-title {
    margin-bottom: 8px;
    font-weight: 600;
}

.z-confirm-missing-list {
    padding-left: 20px;
    list-style: disc;
}

.z-confirm-missing-list li + li { margin-top: 4px; }

.z-confirm-actions {
    display: flex;
    justify-content: center;
}

/* --- Direct deposit proof upload (manual verification step) --------------- */
.z-proof-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 644px;
    padding: 48px;
    background: var(--z-white);
    border: 1px solid rgba(50, 205, 178, 0.35);
    border-radius: 20px;
    box-shadow: var(--z-shadow);
    text-align: center;
}

.z-proof-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    line-height: var(--body-reg-line-height);
    color: var(--z-black);
}
.z-proof-checklist li {
    position: relative;
    padding-left: 26px;
}
.z-proof-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--z-teal-400);
    font-weight: 700;
}

.z-proof-example {
    width: 100%;
    max-width: 480px;
    border: 1px solid var(--z-gray-300);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
    font-family: var(--body-reg-font-family);
    font-size: 14px;
    line-height: 20px;
    color: var(--z-black);
}
.z-proof-example-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: var(--z-gray-100);
    border-bottom: 1px solid var(--z-gray-300);
    font-weight: 600;
}
.z-proof-example-title {
    padding: 12px 16px 4px;
    font-weight: 700;
}
.z-proof-example-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--z-gray-200);
}
.z-proof-example-row:last-child { border-bottom: none; }
.z-proof-example-value { font-weight: 600; }
.z-proof-example-highlight {
    margin: 4px 8px 8px;
    border: 1px solid var(--z-teal-400);
    border-radius: 8px;
    background: rgba(50, 205, 178, 0.08);
}

.z-proof-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    padding: 32px 24px;
    border: 1px dashed var(--z-teal-400);
    border-radius: 12px;
    background: rgba(50, 205, 178, 0.04);
}
.z-proof-upload-text {
    font-family: var(--body-med-font-family);
    font-size: var(--body-med-font-size);
    font-weight: var(--body-med-font-weight);
    line-height: var(--body-med-line-height);
    color: var(--z-black);
}
.z-proof-upload-hint {
    font-family: var(--body-reg-font-family);
    font-size: 13px;
    color: var(--z-gray-600);
}
.z-proof-upload-input {
    max-width: 100%;
    font-family: var(--body-reg-font-family);
    font-size: 14px;
}

.z-proof-redownload {
    margin: 0;
    font-family: var(--body-reg-font-family);
    font-size: 13px;
    line-height: 20px;
    color: var(--z-gray-600);
}
.z-proof-redownload a {
    color: var(--z-teal-500);
    text-decoration: underline;
}

@media (max-width: 960px) {
    .z-enroll-options {
        grid-template-columns: 1fr;
        row-gap: 16px;
    }
    .z-enroll-options-or {
        flex-direction: row;
        width: 100%;
        height: 32px;
    }
    .z-enroll-options-or-line {
        width: auto;
        height: 1px;
        flex: 1 1 auto;
    }
}


/* ==========================================================
   10. LOGIN PAGE  (Default.aspx — frmLogin)
   Spec: Figma/zwaygo-ll-log-in/ — node 450:8136 "Zwaygo / LL log in".
   Centered 644px column over the master-page chrome. Marketing nav
   and footer from the Figma frame are intentionally not replicated;
   NewSite.master owns the app shell.
   ========================================================== */
.z-login-page {
    width: 100%;
    display: flex; flex-direction: column;
    padding: 0;
    /* Fill the viewport below the fixed header (132px reserved by
       .ns-site-header-shell) so the marketing footer can be pinned to
       the bottom of the window on short pages via margin-top:auto below. */
    min-height: calc(100vh - 132px);
}

.z-login-shell {
    width: 100%; max-width: 480px;
    margin: 48px auto 56px;
    padding: 0 16px;
    display: flex; flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.z-login-title {
    font-family: var(--product-display-32-font-family);
    font-size: var(--product-display-32-font-size);
    font-weight: var(--product-display-32-font-weight);
    line-height: var(--product-display-32-line-height);
    color: var(--z-black);
    text-align: center;
}

/* Figma .switch — "Are you a resident? Log in here →" */
.z-login-switch {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--z-font-display);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: var(--z-black);
    text-decoration: none;
}
.z-login-switch:hover { color: var(--z-teal-500); }
.z-login-switch-arrow {
    font-size: 16px; line-height: 1;
    transition: transform 0.15s ease;
}
.z-login-switch:hover .z-login-switch-arrow { transform: translateX(2px); }

.z-login-notice {
    text-align: center;
    font: 500 13px/20px var(--z-font-body);
    color: var(--z-teal-500);
}

.z-login-error {
    background: #fdecee;
    border: 1px solid var(--z-red);
    border-radius: 6px;
    padding: 10px 16px;
    text-align: center;
    color: var(--z-red);
    font: 500 13px/20px var(--z-font-body);
}

.z-login-error a {
    color: var(--z-red);
    font-weight: 700;
    text-decoration: underline;
}

/* Residents/Login.aspx renders its notice/error labels unconditionally;
   collapse them when empty (same pattern as .z-alert:empty). */
.z-login-notice:empty,
.z-login-error:empty { display: none; }

/* "NPS Rent Assurance is now Zwaygo!" (ascx_Controls/RebrandNotice.ascx) -
   first thing in the shell, only for visitors redirected from the old
   access.npsrentassurance.com site. */
.z-login-rebrand {
    background: #ecfaf4;
    border: 1px solid var(--z-teal-400);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    text-wrap: balance; /* phones: no one-word last line */
    font: 400 14px/22px var(--z-font-body);
    color: var(--z-gray-600);
}
.z-login-rebrand-title {
    margin-bottom: 4px;
    font: 500 18px/26px var(--z-font-display);
    color: var(--z-black);
}

.z-login-form {
    display: flex; flex-direction: column;
    gap: 32px;
}

.z-login-fields {
    display: flex; flex-direction: column;
    gap: 16px;
}

.z-login-field { position: relative; }

.z-login-input {
    display: block; width: 100%;
    height: 52px;
    border: 2px solid var(--z-black);
    border-radius: 6px;
    background: var(--z-white);
    color: var(--z-black);
    padding: 12px 18px;
    font-family: var(--z-font-display);
    font-size: 16px; line-height: 24px;
    outline: none;
}
.z-login-input::placeholder {
    color: var(--z-black);
    opacity: 1;
    font-family: var(--z-font-display);
    font-size: 16px; line-height: 24px;
}
.z-login-input:focus { border-color: var(--z-teal-400); }

.z-login-forgot {
    align-self: center;
    font: 500 13px/20px var(--z-font-body);
    color: var(--z-black);
    text-decoration: none;
}
.z-login-forgot:hover { color: var(--z-teal-500); text-decoration: underline; }

.z-login-actions {
    display: flex; flex-direction: column;
    gap: 16px;
}

/* asp:CheckBox renders <span><input><label></span>. Style the children. */
.z-login-checkbox {
    display: inline-flex; align-items: center; gap: 12px;
}
.z-login-checkbox input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px;
    margin: 0;
    border: 2px solid var(--z-black);
    border-radius: 4px;
    background: var(--z-white);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
}
.z-login-checkbox input[type="checkbox"]:checked { background: var(--z-black); }
.z-login-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 2px; left: 5px;
    width: 5px; height: 9px;
    border: solid var(--z-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.z-login-checkbox label {
    font: 500 14px/20px var(--z-font-body);
    color: var(--z-black);
    cursor: pointer;
}

/* asp:Button renders <input type="submit">. */
.z-login-submit {
    display: block; width: 100%;
    height: 48px;
    background: var(--z-teal-400);
    color: var(--z-white);
    border: none; border-radius: 60px;
    padding: 10px 28px 12px;
    font: 500 15px/24px var(--z-font-body);
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
}
.z-login-submit:hover { background: var(--z-teal-500); }

/* Show/hide password toggle. Sits inside .z-login-field-password over the
   right edge of the input; 44px square so it's a comfortable thumb target. */
.z-login-field-password .z-login-input { padding-right: 52px; }
.z-login-field-password .z-login-input::-ms-reveal,
.z-login-field-password .z-login-input::-ms-clear { display: none; }
.z-login-reveal {
    position: absolute; top: 4px; right: 4px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; margin: 0;
    border: 0; border-radius: 4px;
    background: transparent;
    color: var(--z-gray-500);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.z-login-reveal:hover, .z-login-reveal:focus-visible { color: var(--z-black); outline: none; }
.z-login-reveal:focus-visible { box-shadow: 0 0 0 2px var(--z-teal-400); }
.z-login-reveal svg { width: 22px; height: 22px; display: block; }
.z-login-reveal .z-reveal-slash { display: none; }
.z-login-reveal.is-showing .z-reveal-slash { display: block; }

/* Generic wrapper for password inputs outside the login shell (registration,
   lost-password). Wrap ONLY the input + .z-login-reveal so the wrapper's box
   equals the input's box and the eye centres on it. Inline-block so legacy,
   auto-width inputs stay hugged; block inside a Zwaygo .z-form-field. */
.z-password-wrap {
    position: relative;
    display: inline-block; max-width: 100%;
    vertical-align: middle;
}
.z-form-field > .z-password-wrap { display: block; }
.z-password-wrap > input { padding-right: 44px !important; }
.z-password-wrap > input::-ms-reveal,
.z-password-wrap > input::-ms-clear { display: none; }
.z-password-wrap .z-login-reveal {
    top: 50%; right: 2px;
    transform: translateY(-50%);
    width: 40px; height: 40px;
}

/* Masked account number: a .z-password-wrap whose box shows the account on file as
   *******1234 (refund request form, ManageResident.ascx; behaviour in GeneralScripts.js).
   The server renders the state class: the eye only shows while the box holds the
   account on file (is-masked / is-revealed), never for a number someone typed. Block
   even when an UpdatePanel div sits between it and its .z-form-field. */
.z-password-wrap.z-account-mask { display: block; }
.z-account-mask .z-login-reveal { display: none; }
.z-account-mask.is-masked .z-login-reveal,
.z-account-mask.is-revealed .z-login-reveal { display: flex; }
.z-account-mask.is-revealed .z-reveal-slash { display: block; }
.z-account-mask .z-login-reveal:disabled { cursor: progress; opacity: 0.5; }

.z-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---- 10b. Marketing footer — matches the zwaygo-soft-launch webflow
   footer (.section-12 / .container-7) byte-for-byte on the values
   that matter: lime #b7f588 card, 24px radius, 2fr/1fr/1fr grid,
   96/56/32 padding, 498px min-height, Gustavo at every level. ---- */

/* Take the login page out of #main's 1440px / 64px cage so the footer
   can use plain `margin: 0 8px` like Webflow does, and kill the master
   page's trailing <br /> tags + #main's 80px bottom padding so there
   is no dead scroll space below the footer. */
#main:has(.z-login-page) {
    max-width: none;
    padding: 0;
}
body:has(.z-login-page) #content > br { display: none; }

.z-marketing-footer {
    padding: 8px 0;
    /* Push the footer to the bottom of .z-login-page (a flex column that
       fills the viewport), so it sits against the bottom of the window
       instead of floating up and leaving white space below it. */
    margin-top: auto;
}

.z-marketing-footer-card {
    background: #b7f588;
    border-radius: 24px;
    margin: 0 8px;
    padding: 96px 56px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 16px;
    min-height: 498px;
}

.z-mf-brand { grid-area: 1 / 1 / 2 / 2; }
.z-mf-logo { width: 100px; height: auto; margin-bottom: 32px; display: block; }
.z-mf-tag {
    font-family: var(--z-font-display);
    font-size: 32px; font-weight: 500; line-height: 40px;
    color: #333; margin: 0;
}

.z-mf-col { display: flex; flex-direction: column; }
.z-mf-heading {
    font-family: var(--z-font-display);
    font-size: 16px; font-weight: 500; line-height: 24px;
    padding-bottom: 4px; margin: 0;
    color: var(--z-black);
}
.z-mf-link {
    font-family: var(--z-font-display);
    font-size: 24px; font-weight: 400; line-height: 32px;
    color: var(--z-black);
    text-decoration: none;
    padding-bottom: 4px;
}
.z-mf-link-500 { font-weight: 500; }
a.z-mf-link:hover { color: #5e5e5e; }

.z-mf-copyright {
    align-self: end;
    font-family: var(--z-font-display);
    font-size: 14px; font-weight: 500; line-height: 24px;
    color: var(--z-black);
}

.z-mf-privacy {
    grid-area: 2 / 3 / 3 / 4;
    justify-self: start;
    align-self: end;
    font-family: var(--z-font-display);
    font-size: 14px; font-weight: 500; line-height: 24px;
    color: var(--z-black);
    text-decoration: none;
}
.z-mf-privacy:hover { color: #5e5e5e; }

@media (max-width: 991px) {
    .z-marketing-footer-card {
        column-gap: 32px; row-gap: 32px;
        padding-left: 48px; padding-right: 48px;
    }
    .z-mf-tag { font-size: 30px; }
}

@media (max-width: 767px) {
    .z-marketing-footer-card {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        padding: 48px 24px 24px;
        min-height: 0;
        column-gap: 24px; row-gap: 24px;
    }
    .z-mf-brand, .z-mf-copyright, .z-mf-privacy {
        grid-area: auto;
        justify-self: start;
    }
    .z-mf-tag { font-size: 28px; line-height: 36px; }
    .z-mf-link { font-size: 20px; line-height: 28px; }
}

/* ---- 10c. Error page (Error.aspx) — what everyone but local requests
   sees for an unhandled error or a missing page (Web.config customErrors
   and httpErrors). It has no master page, so it carries its own copy of
   the header pill (logo + environment badge only) and centres the message
   in a column like the login shell. Buttons are .z-btn-teal/.z-btn-outline. ---- */
.z-error-body {
    min-height: 100vh;
    display: flex; flex-direction: column;
}

.z-error-header { padding: 20px 64px 0; }

/* Same glass pill as #SiteHeader-Content (section 4) */
.z-error-header-bar {
    display: flex; align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 40px;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 16px;
    box-shadow: var(--z-shadow);
}
.z-error-brand { display: inline-flex; }
.z-error-logo { display: block; max-height: 30px; width: auto; }

.z-error-page {
    flex: 1 0 auto;
    width: 100%; max-width: 560px;
    margin: 0 auto;
    padding: 96px 16px 64px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}

.z-error-code {
    font: 500 13px/20px var(--z-font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--z-teal-500);
}

.z-error-title {
    margin-top: 12px;
    font-family: var(--product-display-40-font-family);
    font-size: var(--product-display-40-font-size);
    font-weight: var(--product-display-40-font-weight);
    line-height: var(--product-display-40-line-height);
    color: var(--z-black);
    text-wrap: balance;
}

.z-error-text {
    margin-top: 16px;
    max-width: 440px;
    font: var(--body-reg-font-weight) var(--body-reg-font-size)/var(--body-reg-line-height) var(--body-reg-font-family);
    color: var(--z-gray-600);
    text-wrap: pretty;
}

.z-error-actions {
    margin-top: 32px;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px;
}

.z-error-help {
    margin-top: 40px;
    font: 400 13px/20px var(--z-font-body);
    color: var(--z-gray-500);
}
.z-error-help a { color: var(--z-black); text-decoration: underline; }
.z-error-help a:hover { color: var(--z-teal-500); }

/* The reference a user quotes to support (ErrorReference.vb) */
.z-error-ref {
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--z-black);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .z-error-header { padding: 12px 16px 0; }
    .z-error-header-bar { min-height: 60px; padding: 12px 20px; }
    .z-error-page { padding-top: 56px; }
    .z-error-title {
        font-size: var(--product-display-32-font-size);
        line-height: var(--product-display-32-line-height);
    }
    /* Full-width stacked buttons, thumb-sized */
    .z-error-actions { flex-direction: column; align-self: stretch; }
}


/* ==========================================================
   11. RESPONSIVE
   ========================================================== */
@media (max-width: 1200px) {
    :root { --z-pad-x: 32px; }

    .z-card-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "subtitle" "status" "links" "notes";
        row-gap: 24px;
    }
    .z-admin-summary-grid { grid-template-columns: 1fr; }
    .ns-landlord-residents-header,
    .ns-landlord-residents-controls {
        flex-direction: column; align-items: flex-start; gap: 12px;
    }
    .ns-landlord-resident-search { width: 100%; max-width: 360px; }
}

@media (max-width: 960px) {
    .ns-site-header-shell { height: auto; min-height: 132px; }
    #SiteHeader-TopSection { padding: 20px 32px 0; }
    #Panel_MenuBar { left: 32px; right: 32px; }
}
@media (max-width: 1200px) {
    :root { --z-pad-x: 32px; }

    .z-card-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "title" "subtitle" "status" "links" "notes";
        row-gap: 24px;
    }
    .ns-landlord-residents-header,
    .ns-landlord-residents-controls {
        flex-direction: column; align-items: flex-start; gap: 12px;
    }
    .ns-landlord-resident-search { width: 100%; max-width: 360px; }
}

@media (max-width: 960px) {
    .ns-site-header-shell { height: auto; min-height: 132px; }
    #SiteHeader-TopSection { padding: 20px 32px 0; }
    #Panel_MenuBar { left: 32px; right: 32px; }
}

/* Phones (the resident portal, Residents/MasterPage.master): one 16px side
   gutter for the page (#main via --z-pad-x) and for the header pill, whose
   inner padding halves to 20px. The staff menu overlay follows the pill so
   NewSite.master pages still line up. */
@media (max-width: 600px) {
    :root { --z-pad-x: 16px; }
    #SiteHeader-TopSection { padding-left: 16px; padding-right: 16px; }
    #SiteHeader-Content { padding-left: 20px; padding-right: 20px; }
    #Panel_MenuBar { left: 16px; right: 16px; padding-right: 20px; }
}

/* ==========================================================
   LOADING OVERLAY
   Used by AJAX postbacks (PageRequestManager) and by full
   postbacks that take a perceptible amount of time
   (e.g. HeaderEntitySelector impersonation switch).
   ========================================================== */
.modalBackgroundDark {
    background-color: #000;
    opacity: 0.5;
}

.lds-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: #fff;
}
.lds-spinner div:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1.1s; }
.lds-spinner div:nth-child(2)  { transform: rotate(30deg);  animation-delay: -1.0s; }
.lds-spinner div:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.9s; }
.lds-spinner div:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.8s; }
.lds-spinner div:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.7s; }
.lds-spinner div:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.6s; }
.lds-spinner div:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.5s; }
.lds-spinner div:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.4s; }
.lds-spinner div:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.3s; }
.lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
.lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
.lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s;    }

@keyframes lds-spinner {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}


/* ==========================================================
   10. RESIDENT DASHBOARD (ManageResident.ascx — Resident role)
   Spec: Figma/resident-dashboard/
   ========================================================== */

.z-resident-page {
    width: 100%;
    max-width: 1312px;
    margin: 0 auto;
    padding: 16px 0 40px;
    color: var(--z-black);
    font-family: var(--z-font-body);
}

/* Hero stack: name → balance + actions row → excess funds row */
.z-resident-hero {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

.z-resident-identity {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.z-resident-name {
    font-family: var(--product-display-40-font-family);
    font-size: var(--product-display-40-font-size);
    font-weight: var(--product-display-40-font-weight);
    line-height: var(--product-display-40-line-height);
    color: var(--z-black);
    margin: 0;
}

/* Render the "(#NNNN)" ID span (set inline by code-behind with
   style="font-weight: normal") on its own line, smaller and gray. */
.z-resident-name span[style*="font-weight"] {
    display: block;
    font-family: var(--z-font-body);
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #8d8d8d;
    margin-top: 4px;
}

.z-resident-id {
    font-family: var(--z-font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    color: #8d8d8d;
}

/* Balance + actions row (sits BELOW the name, per Figma).
   Balance hugs the left edge; the actions group is pushed to the right
   via `margin-left: auto` on .z-resident-actions. */
.z-resident-balance-row {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.z-resident-balance-row > .z-resident-actions {
    margin-left: auto;
    justify-content: flex-end;
}

/* Legacy alias — keep until all callers migrate */
.z-resident-hero-right {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.z-resident-balance {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.z-resident-balance-label {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}

.z-resident-balance-amount {
    font-family: var(--z-font-body);
    font-weight: 500;
    font-size: 48px;
    line-height: 56px;
    color: var(--z-black);
}

/* Action button row */
.z-resident-actions {
    display: flex;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

/* Community / Manager meta row (admin view) — small subtle text below the hero */
.z-resident-meta {
    margin: -16px 0 24px;
    color: var(--z-gray-600);
}
.z-resident-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 28px;
    font-size: 13px;
    line-height: 20px;
}
/* One label + its value (+ icon buttons). The item wraps to the next line as a unit,
   so the page width never splits "Property Manager:" from the name or its icons. */
.z-resident-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}
.z-resident-meta-label {
    color: var(--z-gray-600);
    font-weight: 500;
    white-space: nowrap;
}
/* Header flag pill, e.g. "Rent excluded from sync" (Manage Resident) */
.z-resident-meta-flag {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    background: #fff4e0;
    border: 1px solid #f0c987;
    color: #8a5a00;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    vertical-align: middle;
}
.z-resident-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.z-resident-meta-link a {
    color: var(--z-black);
    text-decoration: none;
    font-weight: 600;
}
.z-resident-meta-link a:hover { text-decoration: underline; }
/* Plain mode (non-NPS-admin roles, or a window opened from another page): name only, no links */
.z-resident-meta-link.is-plain .z-meta-icon { display: none; }
.z-resident-meta-link.is-plain a,
.z-resident-meta-link.is-plain a:hover {
    text-decoration: none;
    cursor: default;
    pointer-events: none;
}
.z-resident-meta-link img { height: 14px; }

/* Small inline icon buttons on the meta row (open in new tab, log in as) */
.z-meta-icon,
a.z-meta-icon,
.z-resident-meta-link a.z-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--z-gray-300);
    border-radius: 6px;
    background: var(--z-white);
    color: var(--z-gray-600);
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.z-meta-icon svg { width: 13px; height: 13px; display: block; }
.z-meta-icon:hover,
a.z-meta-icon:hover,
.z-resident-meta-link a.z-meta-icon:hover {
    color: var(--z-teal-500);
    border-color: var(--z-teal-400);
    background: rgba(50, 205, 178, 0.08);
    text-decoration: none;
}
.z-resident-meta-row .z-resident-meta-label + label,
.z-resident-meta-row .z-resident-meta-label + span {
    color: var(--z-black);
    font-weight: 500;
}

/* Primary pill action button (Request rent disbursement, Request refund, etc.) */
.z-pill-action,
input[type="submit"].z-pill-action,
a.z-pill-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 32px;
    height: 56px;
    background: var(--z-black);
    color: var(--z-white);
    border: none;
    border-radius: 60px;
    font-family: var(--body-med-font-family);
    font-size: var(--body-med-font-size);
    font-weight: var(--body-med-font-weight);
    line-height: var(--body-med-line-height);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.z-pill-action:hover {
    background: var(--z-gray-600);
    color: var(--z-white);
}

/* Compact filled pill — 40px tall version of z-pill-action.
   Use for dense action rows (e.g., the action row next to Account balance). */
.z-pill-action.is-compact,
input[type="submit"].z-pill-action.is-compact,
a.z-pill-action.is-compact {
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 20px;
}

/* Small outline pill action button (Edit profile, Update lease info, Edit income) */
.z-pill-action-sm,
input[type="submit"].z-pill-action-sm,
a.z-pill-action-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 24px;
    background: var(--z-white);
    color: var(--z-black);
    border: 2px solid var(--z-black);
    border-radius: 60px;
    font-family: var(--z-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.z-pill-action-sm:hover { background: var(--z-gray-100); color: var(--z-black); }

/* Excess funds inline row — sits as the third row of the hero stack */
.z-resident-excess {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}
.z-resident-excess-label,
.z-resident-excess-amount {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}

/* Two-card summary grid (deposit info / rent info) */
.z-resident-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.z-summary-card {
    background: var(--z-white);
    border: none;
    border-radius: 20px;
    box-shadow: var(--z-shadow);
    padding: 32px 40px;
}

.z-summary-card-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.z-summary-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
}

.z-summary-row-label,
.z-summary-row-value,
.z-summary-row-label label,
.z-summary-row-label span,
.z-summary-row-value label,
.z-summary-row-value span {
    font-family: var(--18-28-semibold-font-family);
    font-size: var(--18-28-semibold-font-size);
    font-weight: var(--18-28-semibold-font-weight);
    line-height: var(--18-28-semibold-line-height);
    color: var(--z-black);
}

.z-summary-row-value {
    text-align: right;
    white-space: nowrap;
}

.z-summary-row.is-muted .z-summary-row-label,
.z-summary-row.is-muted .z-summary-row-value,
.z-summary-row.is-muted span,
.z-summary-row.is-muted label { color: #8d8d8d; }

/* Integration ledger block at the foot of the deposit summary card:
   one primary row (total due), one dimmed detail line with the live-pull button */
.z-ledger-block {
    border-top: 1px solid var(--z-gray-300);
    padding-top: 16px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.z-ledger-block .z-summary-row-value .is-empty {
    color: #8d8d8d;
    font-weight: 500;
}
.z-ledger-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}
.z-ledger-detail-text,
.z-ledger-detail-text span,
.z-ledger-detail-text label {
    font-size: 13px;
    line-height: 20px;
    color: #8d8d8d;
    font-weight: 400;
}
.z-ledger-detail-sep { margin: 0 4px; }
.z-ledger-detail .z-icon-btn { width: 28px; height: 28px; border-radius: 7px; }
.z-ledger-detail .z-icon-btn svg { width: 15px; height: 15px; }

/* Provider ledger popup (open transactions pulled live from RealPage) */
.z-ledger-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 36px;
    margin: 0 0 16px;
}
.z-ledger-summary-item { display: flex; flex-direction: column; gap: 2px; }
.z-ledger-summary-label { font-size: 12px; line-height: 16px; color: var(--z-gray-600); }
.z-ledger-summary-value,
.z-ledger-summary-value span { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--z-black); }
.z-ledger-summary-value.is-plain,
.z-ledger-summary-value.is-plain span { font-size: 14px; font-weight: 500; }
.z-ledger-notice {
    font-size: 13px;
    line-height: 18px;
    color: var(--z-gray-600);
    background: var(--z-gray-100);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 16px;
}
.z-ledger-table-wrap { overflow-x: auto; }
.z-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 18px;
}
.z-ledger-table th {
    text-align: left;
    font-weight: 600;
    color: var(--z-gray-600);
    padding: 8px 10px;
    border-bottom: 1px solid var(--z-gray-300);
    white-space: nowrap;
}
.z-ledger-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--z-gray-100);
    vertical-align: top;
}
.z-ledger-table .num { text-align: right; white-space: nowrap; }
.z-ledger-table .nowrap { white-space: nowrap; }
.z-ledger-table tr.is-payment td { color: var(--z-teal-500); }
.z-ledger-table tr.is-deposit td { color: #8d8d8d; }
/* Row tags after the description (Past due, Deposit in / out): the disbursement grid's
   badge shape.  Past due is amber, the Zwaygo warn colour - no red on this ledger. */
.z-ledger-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--z-gray-400);
    background: var(--z-gray-100);
    color: var(--z-gray-600);
    font: 600 11px/16px var(--z-font-body);
    white-space: nowrap;
    vertical-align: middle;
}
.z-ledger-tag--pastdue {
    border-color: #c97a00;
    background: rgba(201, 122, 0, 0.10);
    color: #c97a00;
}
.z-ledger-empty { padding: 16px 0; color: var(--z-gray-600); font-style: italic; }
/* Legend under the lines: one row per column / tag meaning */
.z-ledger-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-size: 12px;
    line-height: 16px;
    color: #8d8d8d;
}
.z-ledger-legend-row { display: flex; gap: 10px; align-items: baseline; }
.z-ledger-legend-key { flex: 0 0 112px; font-weight: 600; color: var(--z-gray-600); }
.z-ledger-legend-key .z-ledger-tag { margin-left: 0; }
/* "Open" tag on the full ledger: the line is still unsettled, i.e. it is on the Open items view */
.z-ledger-tag--open {
    border-color: rgba(50, 205, 178, 0.6);
    background: rgba(50, 205, 178, 0.12);
    color: #1f8f7c;
}
/* Open items / Full ledger switch above the lines: pill tabs sized for the modal, with
   the window / pull note to the right (wraps under on a narrow screen) */
.z-ledger-view-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin: 0 0 12px;
}
.z-pill-tabs.z-ledger-view-tabs { height: 34px; padding: 3px; border-radius: 34px; }
.z-pill-tabs.z-ledger-view-tabs > input[type="submit"],
.z-pill-tabs.z-ledger-view-tabs > input[type="button"] {
    height: 26px; min-width: 0; padding: 4px 14px;
    border-radius: 26px; font-size: 12px; line-height: 18px;
}
.z-ledger-view-note,
.z-ledger-view-note span { font-size: 12px; line-height: 16px; color: #8d8d8d; }
/* Full ledger: running balance bold, the balance-forward row muted */
.z-ledger-table td.num-balance { font-weight: 600; }
.z-ledger-table tr.is-forward td { color: var(--z-gray-600); font-style: italic; }
/* The balances stay in view while the modal body scrolls (padding, not margin, so rows
   never show through the gap under them) */
.z-ledger-summary {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--z-white);
    margin-bottom: 0;
    padding-bottom: 16px;
}
/* Full ledger: its own scroll box with the column header pinned.  A collapsed border does
   not travel with a sticky th, so the header rule is an inset shadow. */
.z-ledger-table-wrap.is-scroll { max-height: 45vh; overflow-y: auto; }
.z-ledger-table-wrap.is-scroll th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--z-white);
    border-bottom: none;
    box-shadow: inset 0 -1px 0 var(--z-gray-300);
}
/* Open items: total of the Open column under the lines */
.z-ledger-table tr.z-ledger-total td {
    font-weight: 600;
    border-top: 1px solid var(--z-gray-300);
    border-bottom: none;
}
.z-ledger-table tr.z-ledger-total td:first-child { text-align: right; }
.z-ledger-total-note { font-weight: 400; color: #8d8d8d; }
/* Ledger popup layout: only the lines scroll.  The body is a column capped to the viewport;
   the summary, notices, view switch and legend keep their height and every z-ledger-flex
   panel on the way down shrinks, so the table's scroll box takes what is left - the column
   header (sticky th above) then sits in the fixed space under the view switch. */
.z-modal--popup.z-ledger-modal .z-modal-body {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 280px);
    min-height: 0;
}
.z-ledger-modal .z-ledger-flex {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.z-ledger-modal .z-ledger-flex > * { flex-shrink: 0; }
.z-ledger-modal .z-modal-body > .z-ledger-flex,
.z-ledger-modal .z-ledger-flex > .z-ledger-flex,
.z-ledger-modal .z-ledger-flex > .z-ledger-table-wrap.is-scroll { flex: 1 1 auto; min-height: 0; }
.z-ledger-modal .z-ledger-table-wrap.is-scroll { max-height: none; }
/* The generic .z-modal--popup table spacing (0 6px) leaves a gap above the pinned header
   that scrolled rows show through; pad the cells instead so rows keep their height */
.z-modal--popup.z-ledger-modal table.z-ledger-table { border-spacing: 0; }
.z-modal--popup.z-ledger-modal .z-ledger-table td { padding: 7px 6px; }
/* Open items total stays in view at the bottom of the scroll box */
.z-ledger-table-wrap.is-scroll tr.z-ledger-total td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--z-white);
    border-top: none;
    box-shadow: inset 0 1px 0 var(--z-gray-300);
}
.z-ledger-notice.is-success {
    color: var(--z-black);
    background: rgba(50, 205, 178, 0.12);
    border: 1px solid rgba(50, 205, 178, 0.35);
}
.z-ledger-notice.is-error {
    color: var(--z-black);
    background: rgba(214, 40, 40, 0.06);
    border: 1px solid rgba(214, 40, 40, 0.3);
}
.z-ledger-summary-value .z-ledger-cache-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--z-gray-100);
    color: var(--z-gray-600);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    vertical-align: middle;
}
.z-ledger-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.z-ledger-footer-note,
.z-ledger-footer-note span { font-size: 13px; line-height: 18px; color: var(--z-black); }
.z-ledger-footer-note.is-muted,
.z-ledger-footer-note.is-muted span { color: #8d8d8d; font-size: 12px; line-height: 16px; }
.z-ledger-footer .z-modal-actions { margin-top: 8px; }

/* Section card (Transactions, Activity Log, Profile, Lease, Income) */
.z-resident-card {
    background: var(--z-white);
    border: none;
    border-radius: 20px;
    box-shadow: var(--z-shadow);
    padding: 40px;
    margin-bottom: 24px;
    position: relative;
}

.z-resident-card-title {
    font-family: var(--product-display-32-font-family);
    font-size: var(--product-display-32-font-size);
    font-weight: var(--product-display-32-font-weight);
    line-height: var(--product-display-32-line-height);
    color: var(--z-black);
    margin: 0 0 32px;
}

.z-resident-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}
.z-resident-card-header .z-resident-card-title { margin: 0; }
.z-resident-card-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* Two-column profile/lease/income row, per Figma resident-dashboard
   (each card is 644px in a 1312px container = exactly 2 per row).
   The third card flows to row 2 in the left cell; the right cell stays
   empty by design. */
.z-resident-trio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}
.z-resident-trio-grid > .z-resident-card { margin-bottom: 0; }

/* Detail rows used inside section cards */
.z-detail-rows {
    display: flex;
    flex-direction: column;
}
.z-detail-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 32px;
    padding: 8px 0;
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}
.z-detail-row > .z-detail-label {
    text-align: right;
    color: var(--z-black);
}
.z-detail-row > .z-detail-value {
    text-align: left;
    color: var(--z-black);
    word-wrap: break-word;
    min-width: 0;
}
.z-detail-row > .z-detail-value label,
.z-detail-row > .z-detail-value span,
.z-detail-row > .z-detail-value a {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--z-black);
}
.z-detail-row > .z-detail-value a {
    text-decoration: none;
}
.z-detail-row > .z-detail-value a:hover { color: var(--z-teal-400); }
.z-detail-row.is-section-divider {
    border-top: 1px solid var(--z-gray-300);
    padding-top: 16px;
    margin-top: 16px;
}

/* Sub-section block (e.g., Login & Password inside profile card) */
.z-resident-subblock {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--z-gray-200);
}
.z-resident-subblock-title {
    font-family: var(--product-display-24-font-family);
    font-size: var(--product-display-24-font-size);
    font-weight: var(--product-display-24-font-weight);
    line-height: var(--product-display-24-line-height);
    color: var(--z-black);
    margin: 0 0 16px;
}

/* Activity log */
.z-activity-log {
    display: flex;
    flex-direction: column;
}
.z-activity-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 32px;
    padding: 12px 24px;
}
.z-activity-row:nth-child(even) { background: var(--z-gray-100); }
.z-activity-date {
    display: flex;
    flex-direction: column;
    font-family: var(--z-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--z-black);
}
.z-activity-body { display: flex; flex-direction: column; }
.z-activity-user {
    font-family: var(--small-semibold-font-family);
    font-size: var(--small-semibold-font-size);
    font-weight: var(--small-semibold-font-weight);
    line-height: var(--small-semibold-line-height);
    color: var(--z-black);
}
.z-activity-text {
    font-family: var(--z-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--z-black);
}
.z-activity-empty {
    padding: 16px 24px;
    text-align: center;
    color: var(--z-gray-600);
    font-style: italic;
    font-size: 14px;
}

/* Text link ("View more", "Show legacy transactions") */
.z-text-link,
a.z-text-link,
input[type="submit"].z-text-link {
    display: inline-block;
    font-family: var(--z-font-body);
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: var(--z-black);
    text-decoration: underline;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.z-text-link:hover { color: var(--z-teal-400); }

/* Inline prose link — teal at rest so it reads as clickable inside body text */
a.z-inline-link {
    color: var(--z-teal-500);
    text-decoration: underline;
}
a.z-inline-link:hover { color: var(--z-teal-400); }

.z-resident-card-footer {
    margin-top: 24px;
    text-align: center;
}

/* Card whose last child sits on the bottom edge even when the grid row
   stretches the card taller than its content */
.z-resident-card--column {
    display: flex;
    flex-direction: column;
}
.z-resident-card-doc-footer {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    justify-content: flex-end;
}

/* Stand-alone document link — teal, underlined, with a new-tab arrow */
a.z-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--z-font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--z-teal-500);
    text-decoration: underline;
    text-underline-offset: 3px;
}
a.z-doc-link::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
a.z-doc-link:hover { color: var(--z-teal-400); }

/* Resident-only credit-card promo banner */
.z-resident-only-banner {
    background: #f0fbf8;
    border: 1px solid var(--z-teal-400);
    border-radius: 12px;
    padding: 16px 24px;
    margin: 0 auto 24px;
    max-width: 1312px;
    font-size: 14px;
    line-height: 20px;
    color: var(--z-black);
}
.z-resident-only-banner a {
    color: var(--z-teal-500);
    font-weight: 600;
    text-decoration: underline;
}

/* Bank-account confirmation card */
.z-resident-confirmation {
    background: var(--z-black);
    color: var(--z-white);
    border-radius: 16px;
    padding: 24px 32px;
    margin: 0 auto 24px;
    max-width: 780px;
}
.z-resident-confirmation h4 {
    margin: 0 0 12px;
    font-family: var(--product-display-24-font-family);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}
.z-resident-confirmation input[type="checkbox"] { margin-right: 8px; }
.z-resident-confirmation .z-confirmation-note {
    margin-top: 8px;
    font-size: 12px;
    font-style: italic;
    color: rgba(255,255,255,0.85);
}

/* Status bar (Lease, Employment, Last Deposit, NPS Enrollment) */
.z-resident-status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 16px 24px;
    margin-bottom: 24px;
    background: var(--z-white);
    /* Match the summary cards below: no hard border, soft teal glow edge */
    border: none;
    border-radius: 20px;
    box-shadow: var(--z-shadow);
}
.z-resident-status-bar > div {
    position: relative;
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-family: var(--z-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--z-gray-600);
}
/* Fading teal divider between each status column (centered in the 24px gap).
   Echoes the Zwaygo card edge — rgba(50,205,178) — but as a vertical line that
   fades out top and bottom. Center alpha bumped to 0.55 so it stays visible on
   white (low-alpha teal washes out per the Figma-vs-browser gotcha). */
.z-resident-status-bar > div + div::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(50, 205, 178, 0.55) 25%,
        rgba(50, 205, 178, 0.55) 75%,
        transparent
    );
}
.z-resident-status-bar .Status {
    color: var(--z-black);
    font-weight: 600;
}
/* "Not Renewing Lease" — keep the pill compact (it inherits the column's
   center alignment) instead of stretching to fill the full column width.
   The selector mirrors the base `input[type="submit"].z-pill-action-sm`
   (specificity 0,2,1) and adds the wrapper class so it actually wins —
   otherwise the base rule's 40px height / 14px font keeps applying. */
.z-resident-status-bar input[type="submit"].z-pill-action-sm,
.z-resident-status-bar .z-pill-action-sm {
    align-self: center;
    height: 22px;
    padding: 0 10px;
    font-size: 10.5px;
    line-height: 14px;
    border-width: 1px;
}
/* NPS Enrollment Status dropdown — wears the canonical Zwaygo select skin
   (.z-form-input) but sized to its content + a touch shorter so it fits the
   compact status strip instead of stretching the full centered column. */
.z-resident-status-bar select.z-form-input {
    width: auto;
    min-width: 110px;
    height: 34px;
}

/* Alert / error banner */
.z-alert-banner {
    background: #fdecec;
    border: 1px solid var(--z-red);
    border-radius: 12px;
    padding: 16px 24px;
    margin: 0 auto 24px;
    max-width: 1312px;
    color: var(--z-red);
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

/* Inline edit-toggle (Rent Program / Discount Code dropdown swap) */
.z-inline-edit { display: inline-flex; align-items: center; gap: 8px; }
.z-inline-edit a,
.z-inline-edit input[type="submit"] {
    font-size: 12px;
    font-weight: 500;
    color: var(--z-teal-500);
    text-decoration: underline;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.z-inline-edit a:hover,
.z-inline-edit input[type="submit"]:hover { color: var(--z-teal-400); }

/* Resident ledger / transactions wrapper override — strip the
   ResidentLedger sub-control's own card chrome since we wrap it
   in our own z-resident-card. */
.z-resident-card .payment-history,
.z-resident-card .resident-ledger,
.z-resident-card .ledger-shell { background: transparent; box-shadow: none; padding: 0; border: 0; }

/* Currency-aligned cells inside any .gridview — tabular numerals so
   dollar amounts line up vertically. Adds to the existing `.gridview td.amount`
   rule (text-align: right; font-weight: 600). */
.gridview td.amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Group-header row injected by ResidentLedger.ascx.vb for Full_Ledger mode —
   spans the For-Rent / Excess column groups above the main header row. */
.gridview td.z-ledger-grouphead,
.gridview th.z-ledger-grouphead {
    font-family: var(--body-semibold-font-family);
    font-size: 13px;
    font-weight: 600;
    font-style: italic;
    color: var(--z-gray-600);
    text-align: center;
    vertical-align: bottom;
    padding: 6px 12px;
    border-bottom: 0;
    background: transparent;
}

/* Resident Transaction Ledger (Ledger_DisplayModes.Resident) — code-behind sets
   CssClass="gridview ResidentGrid". 5 visible columns at runtime: Transaction date,
   Post date, Description, Amount, Main balance. */
.gridview.ResidentGrid {
    table-layout: auto;
}
.gridview.ResidentGrid th,
.gridview.ResidentGrid td {
    padding: 10px 16px;
    vertical-align: middle;
}

/* Date columns inside the resident ledger. The .Scrollable jQuery plugin splits
   the GridView's <thead> and <tbody> into separate <table> elements at runtime,
   so an ItemStyle Width on the column only affects the body table and not the
   header table. Pinning min-width on the class — applied to BOTH the header
   <th> and the body <td> via HeaderStyle CssClass + ItemStyle CssClass on the
   .aspx — forces both tables to honor the width regardless of content pressure. */
.gridview th.z-ledger-date-col,
.gridview td.z-ledger-date-col {
    min-width: 160px;
    width: 160px;
    white-space: nowrap;
}

/* ---- Resident ledger "Show Details" / Full_Ledger view ----
   Code-behind tags the grid CssClass="gridview z-ledger-full" only in detail
   mode (Ledger_DisplayModes.Full_Ledger). That view widens from 8 columns to
   17 (Amount, Main balance, then the For-Rent and Excess net/fee/gross/balance
   blocks). At the summary font size those 17 columns overflow the card's right
   edge. Shrinking the type + padding pulls every column's content width down so
   the whole table fits inside the card — which also lets the .Scrollable
   plugin's header/body width-sync reconcile (the way it already does in the
   summary view), so columns line up with their data again. */
.gridview.z-ledger-full th,
.gridview.z-ledger-full td {
    font-size: 11px;
    line-height: 15px;
    height: auto;
    padding: 5px 5px;
}
.gridview.z-ledger-full th {
    height: 38px;
    /* Let multi-word headers (e.g. "Transaction date", "Percent fee") wrap
       inside the narrow columns instead of forcing the column wider. */
    white-space: normal;
}
/* Date columns: override the 160px summary width for the dense view. The 74px
   needs !important because the column also carries an inline style="width:160px"
   (from HeaderStyle/ItemStyle Width="160px"), which would otherwise win. */
.gridview.z-ledger-full th.z-ledger-date-col,
.gridview.z-ledger-full td.z-ledger-date-col {
    min-width: 0;
    width: 74px !important;
}
/* Numeric columns — narrow + tight. The "amount" class is on BOTH the header
   (HeaderStyle CssClass="amount") and body (ItemStyle CssClass="amount") cells,
   so pinning the same !important width on th + td forces them equal and overrides
   whatever the .Scrollable plugin computes — header and body columns stay aligned
   instead of drifting by the plugin's per-cell -3px. !important also beats the
   inline ItemStyle Width (100-120px) ASP.NET renders on each cell. */
.gridview.z-ledger-full th.amount,
.gridview.z-ledger-full td.amount {
    width: 70px !important;
    padding-left: 4px;
    padding-right: 4px;
}
/* Description: pin the same width on header + body (the "name" class is now on
   both) and allow the body label to wrap so a long transaction description
   (e.g. "Reversal of Manual Deposit") can't stretch the table past the card.
   !important on white-space overrides the inline nowrap from ItemStyle Wrap="false". */
.gridview.z-ledger-full th.name,
.gridview.z-ledger-full td.name {
    width: 130px !important;
    max-width: 130px;
}
.gridview.z-ledger-full td.name {
    white-space: normal !important;
}

/* Vertical-scroll box for the detail ledger. Code-behind sets CssClass
   ="z-ledger-scroll" on the wrapper only in Full_Ledger mode (it's "" otherwise,
   so the summary view's .Scrollable plugin is unaffected). Because the detail
   grid is a single table, capping the wrapper height + overflow:auto gives a real
   vertical scrollbar, and position:sticky pins the column header while the body
   scrolls — no header/body table split, so columns stay aligned. */
.z-ledger-scroll {
    max-height: 440px;
    overflow: auto;
}
/* Two-level sticky header: the "Anticipated for Rent / Excess" group row pins at
   the very top, the column-label row pins directly below it (25px = the group
   row's line-height 15 + 5+5 padding). Both need a solid background so scrolled
   body rows don't show through. Keeping the group row visible is what tells the
   two "Net / Percent fee / Fixed fee / Gross" pairs apart. */
.z-ledger-scroll .gridview.z-ledger-full td.z-ledger-grouphead {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--z-white);
}
.z-ledger-scroll .gridview.z-ledger-full th {
    position: sticky;
    top: 25px;
    z-index: 2;
    background: var(--z-white);
    /* border-bottom can fail to repaint on a sticky cell under border-collapse;
       a box-shadow draws the header/body divider reliably while scrolling. */
    box-shadow: 0 1px 0 0 var(--z-gray-400);
}

/* Activity Log / Notes GridView (Notes.ascx — GridView_Notes).
   Header hidden via GridView ShowHeader="false". Two-column body:
   left = stacked date + time, right = bold user name above note text. */
.gridview.z-notes {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.gridview.z-notes td {
    padding: 12px 16px;
    vertical-align: top;
    border: 0;
    background: transparent;
    font-family: var(--z-font-body);
    font-size: 14px;
    line-height: 22px;
    color: var(--z-black);
    text-align: left;
}

.gridview.z-notes tr.gridrow td { background: transparent; }
.gridview.z-notes tr.gridrow-alt td { background: var(--z-gray-100); }
.gridview.z-notes tr.gridrow:hover td,
.gridview.z-notes tr.gridrow-alt:hover td { background: #eef9f6; cursor: default; }

/* Left column: stacked date / time, no wrap */
.gridview.z-notes td.z-notes-when-cell {
    width: 140px;
    min-width: 140px;
    white-space: nowrap;
}
.z-notes-when {
    display: flex;
    flex-direction: column;
    font-weight: 500;
    color: var(--z-black);
}

/* Right column: user bold above note text */
.gridview.z-notes td.z-notes-body-cell { width: auto; }
.z-notes-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.z-notes-user {
    font-weight: 700;
    color: var(--z-black);
}
.z-notes-text {
    font-weight: 500;
    color: var(--z-black);
}

/* Add Note popup wrapper (asp:Panel set to CssClass="add-notes-popup" by
   the code-behind in Notes.ascx.vb). Self-contained now that Notes.css
   is no longer loaded. */
.add-notes-popup {
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    margin: 0;
    padding: 24px;
    background: var(--z-white);
    border: 1px solid var(--z-gray-300);
    border-radius: 12px;
}
.add-notes-popup h1 {
    font-family: var(--product-display-24-font-family);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: var(--z-black);
    text-align: center;
    margin: 0 0 12px;
}
.add-notes-popup hr {
    border: 0;
    border-top: 1px solid var(--z-gray-200);
    margin: 12px 0;
}

/* New Comment / Note header row inside the Add Note popup — label on the
   left, "Personal Contact" checkbox on the right, full-width row. */
.z-note-newcomment-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--z-black);
}
.z-note-newcomment-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.z-note-newcomment-header .z-note-personal-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;  /* explicit non-bold to override any inherited bold */
}
.z-note-newcomment-header .z-note-personal-contact input[type="checkbox"] {
    margin: 0;
    accent-color: var(--z-teal-400);
    cursor: pointer;
}
.z-note-newcomment-header .z-note-personal-contact label {
    font-weight: 500;
    cursor: pointer;
}

/* New-comment textarea — full width, sane padding, Zwaygo border. */
.z-note-textarea {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
    resize: vertical;
}
.z-note-textarea:focus { outline: none; border-color: var(--z-teal-400); }

/* "New Note Viewable by:" row inside the Add Note popup (Notes.ascx).
   Single flex row of label + 5 checkboxes; wraps to a new line when the
   container shrinks. Replaces the 2-row legacy table. */
.z-note-viewable {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 10px 0;
    margin-top: 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 13px;
}
.z-note-viewable-label {
    font-weight: 600;
    color: var(--z-black);
    white-space: nowrap;
}
/* ASP.NET asp:CheckBox with a CssClass renders as <span class="..."><input/><label/></span> */
.z-note-viewable .checkboxfix,
.z-note-viewable > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Global shim for the legacy .checkboxfix alignment class (Plain.css is gone).
   asp:CheckBox renders <span class="checkboxfix"><input/><label/></span>;
   asp:CheckBoxList renders <table class="checkboxfix">. Keep box and label on
   one line with a consistent gap — unstyled, long or table-cell labels wrap
   beneath their checkbox (e.g. the Auto Pay Enabled/Disabled pair). */
span.checkboxfix { display: inline-flex; align-items: flex-start; gap: 6px; }
span.checkboxfix > input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; }
table.checkboxfix td { white-space: nowrap; padding: 2px 14px 2px 0; }
table.checkboxfix input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: middle; }
table.checkboxfix label { vertical-align: middle; }
.checkboxfix input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--z-black); }
.checkboxfix label { cursor: pointer; }
.z-note-viewable input[type="checkbox"] {
    margin: 0;
    accent-color: var(--z-teal-400);
    cursor: pointer;
}
.z-note-viewable label {
    font-weight: 500;
    color: var(--z-black);
    cursor: pointer;
}

/* Pending lease changes column inside lease card (highlights diff in red) */
.z-lease-changes {
    color: var(--z-red);
    font-style: italic;
}
.z-lease-changes-title {
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--z-red);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* Wide variant of the z-modal--popup for forms (Edit Profile, Edit Employment). */
.z-modal--popup.z-modal--wide { width: 820px; }
.z-modal--popup.z-modal--xl   { width: 1312px; padding: 40px; }

/* Phones: popups already fill the width (max-width on .z-modal--popup); cap
   their height to the screen too and scroll inside. The toolkit pins a popup
   position:fixed and centres it from its rendered height, so one taller than
   the screen (Edit resident profile: 884px) sat at a negative top - title and
   close button above the screen, Save below it, and no way to scroll to them. */
@media (max-width: 600px) {
    .z-modal--popup,
    .z-modal--popup.z-modal--xl {
        padding: 24px 20px 20px;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---- Resident dashboard on small screens (MyAccount.aspx, Transactions.aspx) ----
   Below 768px the two-up card grids stack. The transactions ledger is a
   5-column table of nowrap dates, descriptions and amounts (~630px at its
   narrowest), so it scrolls sideways inside its card - header and body
   together when Scripts/ScrollableGridPlugin.js has split them. The plugin
   also writes a px width on the Activity log's scroll box, measured once at
   load. Both boxes take width 0 + min-width 100%: they fill the card, but
   their content can't widen it - the resident master's layout table would
   otherwise grow to the widest content and the phone zooms the page out. */
@media (max-width: 767px) {
    .z-resident-summary-grid,
    .z-resident-trio-grid { grid-template-columns: 1fr; }
    .z-resident-card [id$="_Panel_LedgerScroll"] {
        overflow-x: auto;
        width: 0;
        min-width: 100%;
    }
    .z-resident-card div:has(> table.z-notes) {
        width: 0 !important;
        min-width: 100%;
    }
}

/* Phones: cards trade the 40px desktop padding for 20px, display type steps
   down, action pills stack full width (like the portal's other phone
   buttons), and detail rows stack label over value (the 160px label column
   left ~110px for an address or email). The Activity log's date column drops
   its 140px desktop width (also set inline by the grid's ItemStyle, hence
   !important). The ledger keeps its pinned 160px dates: ScrollableGridPlugin
   splits header and body into two tables at 23+ rows, and only an identical
   fixed width on both keeps their columns lined up. */
@media (max-width: 600px) {
    .z-resident-name { font-size: 32px; line-height: 40px; }
    .z-resident-balance-row > .z-resident-actions {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
    }
    .z-summary-card,
    .z-resident-card { padding: 24px 20px; }
    .z-resident-card-title { font-size: 24px; line-height: 32px; margin-bottom: 24px; }
    .z-resident-card-header { margin-bottom: 24px; }
    .z-detail-row { grid-template-columns: 1fr; gap: 0; }
    .z-detail-row > .z-detail-label {
        text-align: left;
        color: var(--z-gray-600);
        font-size: 13px;
        line-height: 20px;
    }
    .gridview.ResidentGrid th,
    .gridview.ResidentGrid td { padding: 8px 10px; }
    .gridview.z-notes td { padding: 10px 12px; }
    .gridview.z-notes td.z-notes-when-cell { min-width: 0; width: auto !important; }
}

/* ==========================================================
   11. UPDATE LEASE MODAL (ResidentLeaseControl.ascx)
   Spec: Figma/update-lease-modal-default/, Figma/change-lease-modal-renew-lease/
   ========================================================== */

.z-lease-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.z-lease-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 40px;
}
.z-lease-modal-title {
    font-family: var(--product-display-32-font-family);
    font-size: var(--product-display-32-font-size);
    font-weight: var(--product-display-32-font-weight);
    line-height: var(--product-display-32-line-height);
    color: var(--z-black);
    margin: 0;
    text-align: center;
}
.z-lease-modal-close,
a.z-lease-modal-close,
input[type="submit"].z-lease-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--z-black);
    font-size: 28px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.z-lease-modal-close:hover { color: var(--z-gray-600); }

.z-lease-modal-pending-notice {
    text-align: center;
    color: var(--z-red);
    font-weight: 600;
    font-size: 16px;
    padding: 12px 16px;
    border: 1px solid var(--z-red);
    border-radius: 8px;
    background: #fdecec;
    margin: 0;
}

.z-lease-modal-resident {
    display: none;  /* Hidden per Figma; resident name comes from page context */
    gap: 8px;
    align-items: baseline;
    font-size: 13px;
    color: var(--z-gray-600);
    margin-top: -8px;
}
.z-lease-modal-resident-label { font-weight: 600; color: var(--z-black); }

/* Three-column lease grid. Two thin vertical dividers sit in the gutters
   between columns (drawn as absolutely-positioned pseudo-elements on the
   grid container so they span all rows). */
.z-lease-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 64px;       /* increased from 32px so the dividers breathe */
    row-gap: 16px;
    position: relative;
}
/* Vertical dividers: span only the BODY rows (current data + change controls),
   not the header row. `top` is calibrated to land just below the header's
   horizontal divider line: 24px header line-height + 4px padding-bottom +
   16px row-gap − 10px divider margin + 1px divider = ~35px. */
.z-lease-grid::before,
.z-lease-grid::after {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 0;
    width: 1px;
    background: var(--z-gray-300);
    pointer-events: none;
}
.z-lease-grid::before { left: 33.333%; }
.z-lease-grid::after { left: 66.666%; }

.z-lease-col-header {
    font-family: var(--body-semibold-font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--z-black);
    padding: 0 0 4px;       /* was 12px — tighter to the horizontal divider line */
    text-align: left;
}
/* .is-right kept for backwards compat but no longer used after the
   "Lease dates" header was moved to left alignment. */
.z-lease-col-header.is-right { text-align: left; }

/* Full-width horizontal divider between column headers and content.
   Negative top margin pulls the divider closer to the header text
   (otherwise the grid's 16px row-gap leaves an awkward "line gap"
   between the two). */
.z-lease-grid-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: var(--z-gray-400);
    margin: -10px 0 0;
}

.z-lease-col-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Current-data rows inside each column (label + value, right-aligned label) */
.z-lease-current-block {
    display: flex;
    flex-direction: column;
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}
.z-lease-current-block > * { display: block; }
.z-lease-current-block label,
.z-lease-current-block span {
    font: inherit;
    color: inherit;
}
.z-lease-current-block .z-lease-community {
    font-weight: 700;
    margin-bottom: 4px;
}
.z-lease-current-block .z-lease-internal-unit { margin-top: 8px; font-size: 13px; color: var(--z-gray-600); font-weight: 500; }

.z-lease-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}
.z-lease-summary-row.is-total { font-weight: 700; }

.z-lease-key-value {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    row-gap: 8px;
    align-items: baseline;
}
.z-lease-key-value > .z-lease-k {
    text-align: left;
    font-weight: 600;
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}
.z-lease-key-value > .z-lease-v {
    text-align: right;
    font-weight: 600;
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}

/* Monthly rent block in middle column (no border per design feedback) */
.z-lease-rent-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Zwaygo-styled checkbox row (matches Figma square 24×24 unchecked / black 24×24 with check icon when checked) */
.z-lease-check-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--body-reg-font-family);
    font-size: var(--body-reg-font-size);
    font-weight: var(--body-reg-font-weight);
    line-height: var(--body-reg-line-height);
    color: var(--z-black);
}
.z-lease-check-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 1px solid #8d8d8d;
    border-radius: 4px;
    background: var(--z-white);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.z-lease-check-row input[type="checkbox"]:checked {
    background: var(--z-black);
    border-color: var(--z-black);
}
.z-lease-check-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;
    width: 6px;
    height: 12px;
    border: solid var(--z-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.z-lease-check-row label { cursor: pointer; }

/* "Exclude rent from <provider> sync" switch under Change monthly rent (Zwaygo admins only) */
.z-lease-sync-exclusion { margin-top: 12px; }
.z-lease-sync-exclusion-note {
    display: block;
    margin: 6px 0 0 40px;
    font-size: 12px;
    line-height: 1.4;
    color: #8a5a00;
}

.z-lease-check-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Each change-section column-content becomes a flex column with a 16px
   gap. The activation checkbox row and the conditional inputs panel are
   then siblings — the gap between them is identical in every column, so
   the first input row vertically aligns across "Change lease address",
   "Change monthly rent", and "Renew lease" when all three are checked.
   `align-self: start` keeps these cells pinned to the TOP of their grid
   row regardless of the row's stretched height, so all three checkboxes
   land on the same horizontal baseline. */
.z-lease-col-content.z-lease-col-change-address,
.z-lease-col-content.z-lease-col-change-rent,
.z-lease-col-content.z-lease-col-change-lease {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
}

/* Also ensure the first input field's *label* in every section uses the
   same font, so the input itself ends up at the same vertical offset from
   the checkbox. The col-3 sub-sections use asp:Label (renders as <span>),
   not <label> — without this rule, those spans inherit the default body
   font (~14px) instead of the input-field's 13px, throwing the input
   below them down by a couple of pixels. */
.z-lease-input-field > label,
.z-lease-input-field > span:not(.z-lease-money) {
    font-family: var(--body-semibold-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--z-black);
    text-align: left;
}

/* Same treatment inside each sub-section of the third column so its
   inner check-row → inputs gap matches the outer column gap. */
#Panel_NewLease,
#Panel_EndLease {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Conditional inputs panel (shown when "Renew lease" / etc. checkbox is checked).
   No margin-top here — the parent .z-lease-col-content / Panel_NewLease wrappers
   use flex column with `gap: 16px`, so EVERY check-row→first-input distance is
   the same value regardless of which column or sub-section it lives in. */
.z-lease-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
    margin-top: 0;
}
.z-lease-input-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;       /* fields fill the cell width */
    text-align: left;           /* override any inherited center alignment */
    gap: 4px;
}
.z-lease-input-field label {
    font-family: var(--body-semibold-font-family);
    font-size: 13px;
    font-weight: 600;
    color: var(--z-black);
    text-align: left;
}
.z-lease-input-field input[type="text"],
.z-lease-input-field .z-lease-input,
.z-lease-input-field select.z-lease-input {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 6px;
    font: 500 14px/32px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.z-lease-input-field input[type="text"]:hover,
.z-lease-input-field .z-lease-input:hover,
.z-lease-input-field select.z-lease-input:hover { border-color: var(--z-gray-400); }
.z-lease-input-field input[type="text"]:focus,
.z-lease-input-field .z-lease-input:focus,
.z-lease-input-field select.z-lease-input:focus {
    outline: none;
    border-color: var(--z-teal-400);
    box-shadow: 0 0 0 3px rgba(50, 205, 178, 0.15);
}

/* Native <select> styled to match the z-entity-selector-trigger look:
   no OS chrome, custom CSS chevron drawn via background-image SVG. */
.z-lease-input-field select.z-lease-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' fill='none' stroke='%235d5d5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
.z-lease-input-field select.z-lease-input::-ms-expand { display: none; }

/* The generic `.z-modal--popup input[type="text"]` rule (section 9c) has the
   same specificity but is defined later, so it was forcing these text inputs
   back to 40px. Pin the compact height with a higher-specificity, lease-scoped
   selector so only the lease modal is affected. */
.z-lease-modal .z-lease-input-field input[type="text"],
.z-lease-modal .z-lease-input-field .z-lease-input,
.z-lease-modal .z-lease-input-field select.z-lease-input,
.z-lease-modal .z-lease-money input[type="text"] {
    height: 32px;
    line-height: 32px;
}

/* Chosen.js-rendered dropdown skinned to match the .z-lease-input /
   .z-entity-selector-trigger / native <select> look. Opt-in: apply
   `.z-chosen` to an ancestor of the rendered .chosen-container (the
   wrapper that contains the original <select>). This is the standard
   Zwaygo treatment for any Chosen instance and overrides Chosen's
   inline forced width (passed via $().chosen({ width: ... }))
   so the dropdown fills its container.

   `.z-lease-modal` is treated as an implicit `.z-chosen` so the lease
   modal's Community / Building selectors keep working without markup
   changes. Other Chosen instances (e.g. master-page community
   selector) are unaffected unless explicitly opted in. */
.z-chosen .chosen-container,
.z-lease-modal .chosen-container { width: 100% !important; min-width: 0; }

.z-chosen .chosen-container-single .chosen-single,
.z-lease-modal .chosen-container-single .chosen-single {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 6px;
    background: var(--z-white);
    box-shadow: none;
    color: var(--z-black);
    font: 500 14px/40px var(--z-font-body);
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.z-chosen .chosen-container-single .chosen-single:hover,
.z-lease-modal .chosen-container-single .chosen-single:hover { border-color: var(--z-gray-400); }
.z-chosen .chosen-container-active.chosen-with-drop .chosen-single,
.z-lease-modal .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: var(--z-teal-400);
    box-shadow: 0 0 0 3px rgba(50, 205, 178, 0.15);
}
.z-chosen .chosen-container-single .chosen-single span,
.z-lease-modal .chosen-container-single .chosen-single span {
    margin-right: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Replace Chosen's default sprite arrow with the same CSS chevron used on
   the native <select>. The <div><b></b></div> Chosen emits sits absolute
   on the right; we hide its <b> and draw our own arrow via background. */
.z-chosen .chosen-container-single .chosen-single div,
.z-lease-modal .chosen-container-single .chosen-single div { display: none; }
.z-chosen .chosen-container-single .chosen-single,
.z-lease-modal .chosen-container-single .chosen-single {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' fill='none' stroke='%235d5d5d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
}
/* Lease modal uses the compact 32px field height; keep its Chosen triggers
   in sync without affecting the generic .z-chosen used on other pages. */
.z-lease-modal .chosen-container-single .chosen-single {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

/* Dropdown panel + results. */
.z-chosen .chosen-container .chosen-drop,
.z-lease-modal .chosen-container .chosen-drop {
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    background: var(--z-white);
    margin-top: 4px;
    overflow: hidden;
}
.z-chosen .chosen-container-single .chosen-search input[type="text"],
.z-lease-modal .chosen-container-single .chosen-search input[type="text"] {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--z-gray-300);
    border-radius: 6px;
    background-image: none;
    font: 400 13px/30px var(--z-font-body);
    color: var(--z-black);
}
.z-chosen .chosen-container .chosen-results,
.z-lease-modal .chosen-container .chosen-results {
    padding: 4px 0;
    margin: 0;
    max-height: 240px;
}
.z-chosen .chosen-container .chosen-results li,
.z-lease-modal .chosen-container .chosen-results li {
    padding: 8px 12px;
    font: 500 14px/20px var(--z-font-body);
    color: var(--z-black);
}
.z-chosen .chosen-container .chosen-results li.highlighted,
.z-lease-modal .chosen-container .chosen-results li.highlighted {
    background: rgba(50, 205, 178, 0.12);
    color: var(--z-black);
}
.z-chosen .chosen-container .chosen-results li.result-selected,
.z-lease-modal .chosen-container .chosen-results li.result-selected {
    color: var(--z-teal-500);
    font-weight: 600;
    background: transparent;
}

/* Editable rent form (when "Change monthly rent" is checked).
   No margin-top — see comment on .z-lease-inputs above. */
.z-lease-rent-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
    margin-top: 0;
}
.z-lease-rent-edit .full-width { grid-column: 1 / -1; }

/* Currency input — $ prefix */
.z-lease-money {
    position: relative;
}
.z-lease-money::before {
    content: "$";
    position: absolute;
    top: 0;
    left: 12px;
    line-height: 32px;
    color: var(--z-black);
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
}
.z-lease-money input[type="text"] {
    padding-left: 24px;
}

.z-lease-rent-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--z-gray-300);
    margin-top: 8px;
    font-family: var(--body-semibold-font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--z-black);
    grid-column: 1 / -1;
}

/* Pending lease change block (red highlight) */
.z-lease-pending {
    border: 1px solid var(--z-red);
    border-radius: 12px;
    padding: 16px 24px;
    margin-top: 16px;
    background: #fdf6f6;
    color: var(--z-red);
}
.z-lease-pending-title {
    font-weight: 700;
    color: var(--z-red);
    margin: 0 0 12px;
}

/* Modal footer: input date + process request button (right-aligned) */
.z-lease-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.z-lease-modal-footer-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.z-lease-modal-footer-right {
    display: flex;
    align-items: center;
    gap: 24px;
}
.z-lease-effective-date {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: 600;
    color: var(--z-black);
}
.z-lease-effective-date-label {
    font-weight: 600;
    margin-right: 8px;
}

/* Validation errors inline inside the lease modal */
.z-lease-modal .errorMsg,
.z-lease-modal .error {
    color: var(--z-red);
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
}

/* Override z-modal--popup table reset for the lease modal — we use flex/grid */
.z-modal--popup.z-modal--xl > .z-lease-modal table { border-collapse: collapse; border-spacing: 0; }

/* Phones: the three lease columns (address / rent / dates) stack. The grid's
   children are row-major - three headers, the divider, three current-value
   blocks, then the three change sections - so `order` regroups each column's
   header, current values and change controls (z-lease-col--* markup classes);
   a rule under each header stands in for the full-width divider and the two
   vertical ones. The centred title keeps clear of the corner close button. */
@media (max-width: 600px) {
    .z-lease-modal-header { padding: 0 36px; }
    .z-lease-modal-title { font-size: 24px; line-height: 32px; }
    .z-lease-grid { grid-template-columns: 1fr; }
    .z-lease-grid::before,
    .z-lease-grid::after,
    .z-lease-grid-divider { display: none; }
    .z-lease-col-header { border-bottom: 1px solid var(--z-gray-400); }
    .z-lease-col-header.z-lease-col--rent,
    .z-lease-col-header.z-lease-col--dates { margin-top: 16px; }
    .z-lease-col--address { order: 1; }
    .z-lease-col-change-address { order: 2; }
    .z-lease-col--rent { order: 3; }
    .z-lease-col-change-rent { order: 4; }
    .z-lease-col--dates { order: 5; }
    .z-lease-col-change-lease { order: 6; }
    .z-lease-modal-footer-right { flex-wrap: wrap; gap: 12px 24px; }
}

/* Modal backdrop class used by ajaxToolkit:ModalPopupExtender */
.modal-bg { background: rgba(0, 0, 0, 0.45); z-index: 10000; }

/* Modal close (×) button used in ServiceProviderResidentSync */
.modal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--z-gray-600);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.modal-close-x:hover { background: var(--z-gray-100); color: var(--z-black); }

/* Legacy classes still referenced inside modal content. Mapped to Zwaygo tokens. */
.refund-popup-text {
    font-weight: 600;
    color: var(--z-black);
    font-size: 15px;
}
.fee-manager-text {
    font-weight: 600;
    color: var(--z-black);
    font-size: 14px;
}
.multiline-commentbox {
    width: 100%;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    padding: 8px 12px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
    resize: vertical;
    min-height: 80px;
}
.multiline-commentbox:focus { outline: none; border-color: var(--z-teal-400); }

.error, .errorMsg {
    color: var(--z-red);
    font-size: 13px;
    font-weight: 500;
}

/* Modal-internal layout helpers (Cancel/Process buttons in two columns) */
.z-modal--popup .col-left { float: left; }
.z-modal--popup .col-right { float: right; }
.z-modal--popup::after { content: ""; display: table; clear: both; }
.z-modal--popup h1 {
    font-family: var(--product-display-24-font-family);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: var(--z-black);
    margin: 0 0 12px;
}
.z-modal--popup h2 {
    font-family: var(--body-semibold-font-family);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--z-black);
    margin: 16px 0 8px;
}
.z-modal--popup hr {
    border: none;
    border-top: 1px solid var(--z-gray-200);
    margin: 12px 0;
}
.z-modal--popup table { border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
.z-modal--popup td { padding: 4px 6px; vertical-align: middle; }
.z-modal--popup input[type="text"],
.z-modal--popup input[type="password"] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
    box-sizing: border-box;
}
.z-modal--popup input[type="text"]:focus,
.z-modal--popup input[type="password"]:focus { outline: none; border-color: var(--z-teal-400); }
/* Keep the $-prefix gap on money fields inside modals. The .z-modal--popup
   input[type="text"] rule above (higher specificity than .z-form-money
   .z-form-input) otherwise resets padding-left to 12px, sliding the first digit
   under the $. */
.z-modal--popup .z-form-money .z-form-input { padding-left: 24px; }

/* Clickable rows in the deposit-selector grid (Manual Deposit / Reversal). The
   whole row toggles its checkbox (see ResidentLedger RowDataBound); these give
   the affordance — pointer cursor + a subtle teal hover on data cells (td only,
   so the header row is unaffected). */
.z-deposit-selector td { cursor: pointer; }
.z-deposit-selector tr:hover td { background: rgba(50, 205, 178, 0.12); }

.z-modal--popup select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
    background: var(--z-white);
}
/* Restore z-form-input's custom chevron when the select also uses .z-form-input
   inside a modal — the rule above's `background:` shorthand would otherwise
   wipe the SVG arrow. */
.z-modal--popup select.z-form-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'%3E%3Cpath d='M0.5 0.5L5.5 5L10.5 0.5' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-color: var(--z-white);
    padding-right: 32px;
}

/* Buttons inside modals: Cancel = outline pill, Primary = filled black pill */
.z-modal--popup input[type="submit"].button,
.z-modal--popup input[type="submit"].button-default {
    height: 40px;
    padding: 0 24px;
    background: var(--z-white);
    color: var(--z-black);
    border: 2px solid var(--z-black);
    border-radius: 60px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin: 4px 0;
}
.z-modal--popup input[type="submit"].button:hover,
.z-modal--popup input[type="submit"].button-default:hover { background: var(--z-gray-100); }
.z-modal--popup input[type="submit"].button-blue {
    height: 40px;
    padding: 0 24px;
    background: var(--z-black);
    color: var(--z-white);
    border: none;
    border-radius: 60px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin: 4px 0;
}
.z-modal--popup input[type="submit"].button-blue:hover { background: var(--z-gray-600); }


/* ==========================================================
   9d. ADMIN — ACH Batch Payouts (NewSite_Manage_ACHBatchPayouts.aspx)
   No Figma reference. Reuses z-admin-shell, z-section-title,
   z-subsection-title, z-pill-tabs, gridview, z-modal--popup.
   Adds a sticky right-aligned summary card and a small pill
   variant for the per-row download buttons.
   ========================================================== */

/* Two-column layout: grids fill the left, summary card sits in a 320px
   right column. The card is `position: sticky` so it stays visible while
   the grids scroll — no JS scroll listener needed. */
.z-ach-pending {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
    align-items: start;
}
.z-ach-pending-main { min-width: 0; }
.z-ach-pending-side { width: 320px; }

.z-ach-summary {
    position: sticky;
    top: 120px;
    padding: 20px 24px 24px;
    background: var(--z-white);
    border: none;
    border-radius: 16px;
    box-shadow: var(--z-shadow);
    font-family: var(--z-font-body);
    color: var(--z-black);
    z-index: 50;
}

/* jQuery UI datepicker: it appends #ui-datepicker-div to <body> and sets an
   inline z-index of (input's positioned-ancestor z-index + 1). Its ancestor
   walk only counts absolute/relative/fixed, not sticky, so a date field inside
   a sticky card (e.g. the ACH Batch Total Post Date) gets z-index 1 and opens
   underneath the card. The popup is transient, so pin it above everything,
   modals included. */
#ui-datepicker-div { z-index: 1000020 !important; }

.z-ach-summary-label {
    font-family: var(--body-semibold-font-family);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--z-gray-600);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.z-ach-summary-amount,
span.z-ach-summary-amount {
    display: block;
    text-align: center;
    font-family: var(--product-display-32-font-family);
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    color: var(--z-black);
    margin: 4px 0 16px;
}

.z-ach-summary-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* Create-batch errors live in this sticky card, right above the button that
   raised them, so they are on screen however far down the pending list the
   admin has scrolled (a banner at the top of the list was never seen). */
.z-ach-summary .z-error-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
}

.z-ach-summary-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.z-ach-summary-field-label {
    font-family: var(--body-semibold-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: var(--z-black);
}

.z-ach-summary-field .z-form-input,
.z-ach-summary-field input.z-ach-summary-input {
    width: 100%;
    box-sizing: border-box;
}

/* The bank selector control inside the summary field is a .z-chosen wrapper —
   its Chosen.js dropdown is restyled by the .z-chosen rules above. */

.z-ach-summary-submit,
input[type="submit"].z-ach-summary-submit {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
    line-height: 20px;
}

.z-ach-grid-title {
    margin: 32px 0 12px;
}
.z-ach-grid-title.z-ach-grid-title--first {
    margin-top: 0;
}

/* The Select-All link inside the grid header. Inherits header color, no
   underline, vertical-aligns with the checkbox image. */
.gridview th .z-select-all,
.gridview th a.z-select-all {
    color: var(--z-black);
    text-decoration: none;
    font: 500 12px/16px var(--z-font-body);
    display: inline-flex;
    align-items: center;
}
.gridview th .z-select-all img { margin-right: 4px; }
.gridview th .z-select-all:hover { color: var(--z-teal-400); }

/* Two side-by-side per-row download buttons in the ACH Batch History grid. */
.z-ach-download-actions {
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

/* Compact teal pill — same hue as .z-btn-teal but sized to fit inside grid rows. */
.z-btn-teal.z-btn-teal--sm,
input[type="submit"].z-btn-teal.z-btn-teal--sm {
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 18px;
}

/* Modals on this page: same chrome as z-modal--popup z-modal--wide, with
   a draggable header (cursor + bottom rule) and an inner scroll region
   that hosts the grid. The ajaxToolkit ModalPopupExtender stays in place;
   we only restyle the target Panel. */
.z-ach-modal {
    padding-bottom: 24px;
}
.z-ach-modal-header {
    cursor: move;
    border-bottom: 1px solid var(--z-gray-200);
    padding-bottom: 12px;
    margin-bottom: 12px;
}
.z-ach-modal-header h1 {
    margin: 0;
    font-family: var(--product-display-24-font-family);
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: var(--z-black);
}
.z-ach-modal-subhead {
    font-family: var(--body-semibold-font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--z-black);
    margin-bottom: 12px;
}
.z-ach-modal-scroll {
    max-height: 500px;
    overflow: auto;
    border-top: 1px solid var(--z-gray-200);
    border-bottom: 1px solid var(--z-gray-200);
    margin: 0 -8px;
    padding: 0 8px;
}


/* ==========================================================
   9d-2. ADMIN — Main Disbursements (NewSite_Manage_Disbursements.aspx)
   No Figma reference. Reuses z-admin-shell, z-section-title,
   z-detail-header, z-override-check, z-btn-primary, gridview,
   z-gridview-bordered, z-empty-state, z-modal--popup.
   Adds the centered month-selector header row and the
   property-manager group band rows injected by RowDataBound.
   ========================================================== */

/* Sticky header stack: title bar + section header pin below the fixed site
   header while grid rows scroll underneath (same pattern + offsets as the
   dashboard's .ns-landlord-residents-sticky). At rest the stack is 120px:
   40px title line + 24px gap + 40px section header + 16px padding — the
   fallback for --z-disb-stack-h, which the pinned th offset below reads.
   The stack also holds the page's error banner (see .z-disb-sticky
   .z-error-banner), whose height varies with its message, so
   zSyncStickyStackHeight() in Scripts/GeneralScripts.js measures the stack
   and writes the real height into --z-disb-stack-h on the .z-disb-page
   shell (on load, after every async postback, and on resize). Notices and
   the Generate row still sit OUTSIDE the stack: they may scroll away. */
.z-disb-sticky {
    position: sticky;
    top: var(--z-header-bottom);
    z-index: 4;
    background: var(--z-white);
    padding-bottom: 16px;
}
/* Paint the strip between the fixed nav and the stuck stack — #SiteHeader
   is transparent outside its glass pill, so without this the data rows
   show through the gap while scrolling. Height matches the sticky top. */
.z-disb-sticky::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--z-header-bottom);
    background: var(--z-white);
}
/* Junction strip below the stack: the top 1px draws the gridview's top
   border at the stack/pinned-header boundary (matching the
   z-gridview-bordered table border it sits over at rest), and the white
   1px under it masks the sub-pixel crack that fractional display scaling
   can open between the stuck stack and the stuck th - without this, data
   rows peek through that crack while scrolling. */
.z-disb-sticky::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 2px;
    background: var(--z-white);
    border-top: 1px solid var(--z-gray-300);
    box-sizing: border-box;
}
/* min-height matches the Approve button so the stack height (and the pinned
   grid-header offset below) holds when the action controls are hidden for a
   fully NPS-approved month. The details page overrides this to 74px for its
   taller stacked-actions layout. */
.z-disb-sticky .z-detail-header { margin: 0; flex-wrap: nowrap; min-height: 40px; }

/* Error banner inside the stack, directly under the section-header (action)
   row, so it is on screen whenever it shows: the action buttons live in this
   stack and are clicked with the page scrolled well down, and the master page
   restores that scroll position after every async postback — a banner in the
   scrolling content below was simply never seen. Informational notices may
   scroll away; errors may not. width: 0 keeps a long message from widening a
   fit-content wrapper (.z-disb-fit) past the grid — a zero width contributes
   nothing to the wrapper's intrinsic width — and min-width then stretches the
   banner to the wrapper's resolved width. */
.z-disb-sticky .z-error-banner {
    margin: 12px 0 0;
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
}

.z-disb-page .gridview th {
    position: sticky;
    /* Flush with the measured stack (120px at rest); the stack's ::after
       junction strip owns the border line at this boundary and masks
       sub-pixel rounding cracks. */
    top: calc(var(--z-header-bottom) + var(--z-disb-stack-h, 120px));
    /* Below .z-disb-sticky (4): the month-selector popup lives INSIDE the
       sticky stack, whose z-index caps it — th at a higher level would
       paint over the opened popup. The th and the stack never overlap
       spatially, so the lower level costs nothing. */
    z-index: 3;
    background: var(--z-white) !important;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--z-gray-400);
}

/* Title bar: page title left, month selector right — the selector is the
   single source of the selected month (no repeat in the section heading). */
.z-disb-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
    margin-bottom: 24px;
}
.z-disb-month {
    display: flex;
    align-items: center;
    gap: 12px;
}
.z-disb-month-label {
    font: 500 14px/20px var(--z-font-body);
    color: var(--z-gray-600);
    white-space: nowrap;
}
.z-disb-generate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;        /* the sync notice takes its own full-width row above the controls */
    gap: 16px;
    margin-bottom: 24px;
}

/* RealPage balance-sync gate: notice above the Generate controls. A plain
   white card with a colored accent bar and title (red = generation blocked,
   teal = balances current) instead of a tinted fill - the tint made a routine
   "run the sync first" reminder read as a hard error. While blocked, the
   Generate button is not rendered at all, so the notice is the only thing on
   the row. Override & Continue removes the notice and brings Generate back. */
.z-realpage-gate {
    position: relative;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 16px 20px 16px 24px;
    border: 1px solid var(--z-gray-300);
    border-radius: 12px;
    background: var(--z-white);
    box-sizing: border-box;
    overflow: hidden;       /* clips the accent bar to the rounded corners */
}
.z-realpage-gate::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 4px;
    background: var(--z-gray-400);
}
.z-realpage-gate--blocked::before { background: var(--z-red); }
.z-realpage-gate--good::before    { background: var(--z-teal-400); }

/* Body grows to fill the row; the 420px basis is what pushes the action
   buttons onto their own line when the row gets too narrow to share. */
.z-realpage-gate-body { flex: 1 1 420px; min-width: 0; }
.z-realpage-gate-title {
    display: block;
    font: 600 15px/22px var(--z-font-body);
    color: var(--z-black);
}
.z-realpage-gate--blocked .z-realpage-gate-title { color: var(--z-red); }
.z-realpage-gate--good .z-realpage-gate-title    { color: var(--z-teal-500); }
.z-realpage-gate-text {
    display: block;
    margin-top: 2px;
    max-width: 78ch;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-gray-600);
}
.z-realpage-gate-meta {
    display: block;
    margin-top: 6px;
    font: 500 13px/18px var(--z-font-body);
    color: var(--z-gray-500);
}
.z-realpage-gate-meta:empty { display: none; }
.z-realpage-gate-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;      /* stays right-aligned when wrapped under the body */
}

/* List search: client-side filter over the community grid (community + PM
   columns). Sits where the "Main Disbursements by Community" heading used to
   be; exactly 40px tall so the sticky-stack height (and the pinned grid-header
   offset) holds steady. Skin matches .z-entity-search / .z-search-clear. */
.z-disb-search { position: relative; flex: 0 1 360px; }
.z-disb-search-input {
    width: 100%; height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--z-gray-300); border-radius: 10px;
    background: var(--z-white); color: var(--z-black);
    font: 400 15px/38px var(--z-font-body);
    outline: none; box-sizing: border-box;
}
.z-disb-search-input::placeholder { color: var(--z-gray-500); }
.z-disb-search-input:focus {
    border-color: var(--z-teal-400);
    box-shadow: 0 0 0 3px rgba(50,205,178,0.15);
}
.z-disb-search .z-search-clear {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    display: none;
    align-items: center; justify-content: center;
    padding: 0 0 2px;            /* optically center the × glyph */
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--z-gray-500);
    font-size: 20px; line-height: 1;
    cursor: pointer;
}
.z-disb-search.has-value .z-search-clear { display: flex; }
.z-disb-search .z-search-clear:hover {
    color: var(--z-black);
    background: rgba(50,205,178,0.12);
}

/* Client-side "no matches" row injected by the search script */
.gridview td.z-disb-noresults {
    padding: 24px 14px;
    text-align: center;
    color: var(--z-gray-500);
    font-size: 14px;
}

/* Status + approved-date columns: long values ("Pending Community
   Approval", "10:32:15 AM") stay on one line at a reduced size instead
   of wrapping. Status is a step smaller still so its two stacked lines
   read as secondary next to the Net Disbursement amount. */
.gridview td.z-disb-datetime {
    font-size: 12px;
    line-height: 16px;
}
.gridview td.z-disb-status {
    font-size: 11px;
    line-height: 15px;
}

/* Property Manager column: reduced size — the group band above each block
   already names the PM; the per-row value only matters when a long list
   scrolls the band off screen. */
.gridview td.z-disb-pm {
    font-size: 12px;
    line-height: 16px;
}

/* Property-manager group band + spacer rows injected by
   GridView_MainDisbursements_Summary_RowDataBound in the code-behind. */
.gridview td.z-pm-groupspacer {
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
}
.gridview td.z-pm-grouphead {
    font-family: var(--body-semibold-font-family);
    font-size: 16px;
    font-weight: 700;
    color: var(--z-black);
    text-align: left;
    padding: 10px 14px;
    /* Teal wash + accent so the band reads as a group header instead of
       blending into the gray-100 alternating rows. */
    background: #c9efe5;
    border-left: 4px solid var(--z-teal-400);
    border-bottom: 1px solid var(--z-gray-300);
}

/* ---- View controls that live in the pinned column headers ----
   A header holds its sort link plus one control: the Community header has the
   "Group by Property Manager" switch, the Disbursement Status header has the
   status filter button and its popover. Everything is driven by the page's
   view script (delegated handlers - the header is re-rendered by every async
   postback). The th is already position: sticky, which also makes it the
   containing block for the popover. */
.z-disb-page .gridview th .z-th-tools {
    display: flex;
    align-items: flex-end;         /* header row is bottom-aligned */
    justify-content: space-between;
    gap: 16px;
}
.z-disb-page .gridview th .z-th-tools--center {
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
}
/* Community header: sort link over the toggle, so the header is two lines
   like its neighbours and its width never dictates the column's - the
   community names do. */
.z-disb-page .gridview th .z-th-tools--stack {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
}
.z-disb-page .gridview th .z-th-tools a { white-space: nowrap; }

.z-th-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-bottom: 1px;
    cursor: pointer;
    font: 500 12px/16px var(--z-font-body);
    color: var(--z-gray-600);
    white-space: nowrap;
}
.z-th-toggle:hover { color: var(--z-black); }
/* Smaller switch than .z-toggle-checkbox (18px tall) so the stacked
   Community header stays the same two-line height as its neighbours */
.z-th-toggle input[type="checkbox"] { width: 32px; height: 18px; }
.z-th-toggle input[type="checkbox"]::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.z-th-toggle input[type="checkbox"]:not(:checked)::after { left: 16px; }

.z-th-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--z-gray-500);
    cursor: pointer;
}
.z-th-filter svg { width: 14px; height: 14px; display: block; }
.z-th-filter:hover,
.z-th-filter[aria-expanded="true"] {
    color: var(--z-teal-500);
    border-color: var(--z-teal-400);
    background: rgba(50, 205, 178, 0.08);
}
/* A filter is applied: filled funnel so the narrowed list is never mistaken
   for the whole month */
.z-th-filter.is-active {
    color: var(--z-teal-500);
    border-color: var(--z-teal-400);
    background: rgba(50, 205, 178, 0.14);
}
.z-th-filter.is-active svg path { fill: currentColor; }

.z-disb-page .gridview th .z-th-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 8px;
    min-width: 300px;
    padding: 12px 16px 10px;
    border: 1px solid var(--z-gray-300);
    border-radius: 10px;
    background: var(--z-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    text-align: left;
    font: 400 13px/18px var(--z-font-body);
    color: var(--z-black);
    white-space: nowrap;
}
.z-disb-page .gridview th .z-th-popover.is-open { display: block; }
.z-disb-page .gridview th .z-th-popover-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 6px;
}
.z-disb-page .gridview th .z-th-popover-title { font-weight: 600; }
.z-disb-page .gridview th .z-th-popover-links a {
    margin-left: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--z-teal-500);
}
.z-disb-page .gridview th .z-th-popover-links a:hover { text-decoration: underline; }
/* The sorted-column arrow (.sort-asc a::after) must not land on these links */
.z-disb-page .gridview th .z-th-popover a::after { content: none !important; }
.z-disb-page .gridview th .z-th-popover-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    cursor: pointer;
    font-weight: 500;
}
.z-disb-page .gridview th .z-th-popover-option:hover { color: var(--z-teal-500); }
.z-disb-page .gridview th .z-th-popover-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--z-teal-400);
    cursor: pointer;
}
.z-disb-page .gridview th .z-th-popover-option-text { flex: 1 1 auto; }
.z-disb-page .gridview th .z-th-popover-option-count {
    color: var(--z-gray-500);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Row hover. The page shell paints every layout-table descendant cell white
   with !important (.main-layout-table td, section 3), which silently beats
   the system-wide .gridview hover on every nested grid, so this page
   restates its hover at the same weight. A stronger tint than the system's
   #eef9f6: every data row navigates to the community's details page, so the
   hover has to read as "clickable" at a glance. Only data rows carry the
   gridrow classes - the PM band and spacer rows are Separator rows
   (RowDataBound), so they never highlight. */
.z-disb-page .gridview tr.gridrow:hover td,
.z-disb-page .gridview tr.gridrow-alt:hover td {
    background: rgba(50, 205, 178, 0.14) !important;
    cursor: pointer;
}

/* Totals footer: sums of the VISIBLE rows (RowDataBound prints the full month,
   the view script re-sums after every search / status change). Pinned to the
   bottom of the viewport while the list is taller than the screen, so the
   totals for the current filter are always in view. The rule above the totals
   is an inset shadow, not border-top: in this border-collapse table the
   collapsed borders are painted where the footer sits at rest, so a stuck
   footer lost its rule and floated over the data rows (the pinned th draws
   its bottom rule the same way). */
.z-disb-page .gridview tr.z-grid-footer td {
    position: sticky;
    bottom: 0;
    z-index: 2;                    /* under the pinned th (3) */
    background: var(--z-white);
    border-top: 0;
    box-shadow: inset 0 2px 0 var(--z-gray-400);
    padding-top: 12px;             /* 10px of air under the 2px rule */
    padding-bottom: 10px;
    font-weight: 700;
    cursor: default;
}
.z-disb-totals-label {
    display: block;
    font-family: var(--body-semibold-font-family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
}
.z-disb-totals-scope {
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--z-gray-500);
}


/* ==========================================================
   9d-3. SPECIAL DISBURSEMENT REVIEW
   (NewSite_Community_ManageSpecialDisbursements.aspx - community,
    NewSite_ManageSpecialDisbursements.aspx - Zwaygo Admin)
   No Figma reference: both pages follow the Main Disbursement
   details grid (NewSite_DisbursementDetails.aspx, which keeps its
   own inline copy of these rules) - the 9d-2 sticky stack, the
   Approve / Remove pills, the comment box and the sticky totals
   footer. Scoped to the page shell's .z-disb-review class.
   Behaviour: Scripts/DisbursementReview.js.
   ========================================================== */

/* At-rest sticky stack: 40 title bar + 4 + 26 subtitle + 20 + 40
   section header + 16 stack padding. zSyncStickyStackHeight()
   (GeneralScripts.js) writes the measured height over it on load
   and after every async postback. */
.z-disb-review { --z-disb-stack-h: 146px; }
.z-disb-review .z-disb-titlebar { margin-bottom: 4px; }

/* Line under the title: the community (community review) or what
   the list holds (admin review) */
.z-disb-review .z-disb-subtitle {
    font: 600 20px/26px var(--z-font-body);
    color: var(--z-gray-600);
    margin-bottom: 20px;
}

/* Header rows + grid shrink-wrap to the grid's width, so the Apply
   button lines up with the grid's right edge (the error banner in
   the stack never widens it - see .z-disb-sticky .z-error-banner). */
.z-disb-review .z-disb-fit {
    width: fit-content;
    min-width: 900px;
}
.z-disb-review table.gridview {
    width: auto;
    min-width: 900px;
}
.z-disb-review .gridview td { vertical-align: middle !important; }
.z-disb-review .gridview td.name { width: 240px; }

/* Info strip above the grid (outside the sticky stack, so it may scroll
   away). The 12px top margin clears the stack's 2px junction strip; the
   width rules make it span the grid without widening it. */
.z-disb-review .z-disb-notice {
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px solid var(--z-teal-400);
    border-radius: 8px;
    background: rgba(50, 205, 178, 0.08);
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
}

/* The 9d-2 hover tint stays, but review rows are not links */
.z-disb-review .gridview tr.gridrow:hover td,
.z-disb-review .gridview tr.gridrow-alt:hover td { cursor: default; }

/* Secondary line under a cell value: who asked for the request, the
   resident's community */
.z-disb-review .z-disb-meta {
    display: block;
    margin-top: 2px;
    font: 400 12px/16px var(--z-font-body);
    color: var(--z-gray-600);
}

/* Tag line under the resident, rendered only when a tag shows */
.z-disb-review .z-resident-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.z-disb-review .z-disb-tag {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid currentColor;
    font: 600 11px/16px var(--z-font-body);
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
/* Red: cannot be approved (community not active) */
.z-disb-review .z-disb-tag--bad { color: #b42318; background: rgba(180, 35, 24, 0.08); }
/* Amber: fix first, then approve (resident not synced with the provider) */
.z-disb-review .z-disb-tag--warn { color: #c97a00; background: rgba(201, 122, 0, 0.10); }
/* Purple: the community changed the amount (the tooltip has the amounts) */
.z-disb-review .z-disb-tag--changed { color: #6f42c1; background: rgba(111, 66, 193, 0.10); }

/* Approve / Remove pills stay on one line; an Approve pill the row
   cannot use yet is dimmed (its tag says why) */
.z-disb-review .gridview .z-toggle-pills { flex-wrap: nowrap; }
.z-disb-review .z-toggle-pill.is-disabled { cursor: not-allowed; opacity: 0.45; }

.z-disb-review #disbursement-total-value { color: var(--z-teal-500); }

/* Disbursement Approved box: shorter than the 40px z-grid-input so it
   sits in the 44px row; "--" replaces it while the row is on Remove */
.z-disb-review .gridview td input.approved-amount-input {
    height: 30px;
    padding: 4px 10px;
    max-width: 92px;
    text-align: right;
}
.z-disb-review .approved-amount-placeholder { display: none; color: var(--z-gray-500); }

/* Comments cell: the gray box holds the recorded notes, this user's
   own note preview and - whenever the box shows - the Add / Edit link
   at its bottom; with nothing recorded the link stands alone. The
   note itself posts back in the hidden storage textarea. */
.z-disb-review .comment-cell { padding: 4px 6px; }
.z-disb-review .comment-storage { display: none; }
.z-disb-review .comment-box {
    background-color: #f7f8fa;
    border: 1px solid #e0e3e8;
    border-radius: 4px;
    padding: 8px 10px;
}
.z-disb-review .comment-recorded {
    text-align: left;
    padding-bottom: 4px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ddd;
}
.z-disb-review .comment-recorded-label {
    font-size: 10px;
    color: #888;
    font-weight: bold;
}
.z-disb-review .comment-recorded-text { font-size: 11px; }
.z-disb-review .comment-preview-text {
    white-space: normal;
    text-align: left;
    font-weight: normal;
    margin-bottom: 4px;
}
.z-disb-review .add-comment-link {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--z-teal-400);
    white-space: nowrap;
}
.z-disb-review .comment-box .add-comment-link {
    display: block;
    margin-top: 6px;
    text-align: center;
}

/* Ledger Balance cell (admin review): the amount and its ledger icon as
   one right-aligned group; the icon (.z-icon-btn) loses its outline and
   hugs the narrow receipt glyph */
.z-disb-review .z-ledger-balance {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}
.z-disb-review .gridview td .z-icon-btn {
    width: 18px;
    height: 22px;
    border: 0;
    border-radius: 5px;
    background: transparent;
}
.z-disb-review .gridview td .z-icon-btn:hover { background: rgba(50, 205, 178, 0.08); }
.z-disb-review .gridview td .z-icon-btn svg { width: 18px; height: 18px; }

/* Comment modal */
.z-disb-review .comment-modal-textbox {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    padding: 8px 12px;
    font: 400 14px/20px var(--z-font-body);
    color: var(--z-black);
}
.z-disb-review .comment-modal-textbox:focus {
    outline: none;
    border-color: var(--z-teal-400);
}
.z-disb-review .comment-modal-required {
    display: none;
    margin-top: 6px;
    font-size: 12px;
    color: #b42318;
}


/* ==========================================================
   9d-4. REFUND REQUEST REVIEW (NewSite_Manage_RefundRequests.aspx,
   NewSite_Manage_CommunityRefunds.aspx)
   No Figma reference: both refund lists wear the 9d-3 review
   shell (.z-disb-review) - sticky stack, bordered grid, Approve /
   Reject pills, comment box + modal, sticky totals footer. On the
   admin list the pills post back and Scripts/DisbursementReview.js
   drives only the Comments cell and its modal; on the community
   list the script drives the pills too (client-side, like the
   special disbursement review). These rules only cover what the
   refund grids add. Scoped to the page shell's .z-refund-review.
   ========================================================== */

/* Resident and Request are left-aligned, header and cell; every header
   from Ledger Balance on stays centered (global .gridview th).
   HeaderStyle-/ItemStyle-HorizontalAlign="Left" renders an align
   attribute, which the global centered rules otherwise win over */
.z-refund-review .gridview th[align="left"],
.z-refund-review .gridview td[align="left"]  { text-align: left; }

/* Request cell: amount, "date by who" meta line, refund-type select */
.z-refund-review .z-refund-requested { display: block; font-weight: 600; }
.z-refund-review .z-refund-requested + .z-disb-meta { white-space: nowrap; }
.z-refund-review .gridview select.z-refund-type {
    display: block;
    width: 100%;
    height: 30px;
    margin-top: 6px;
    padding: 0 8px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    background: var(--z-white);
    font: 400 13px/18px var(--z-font-body);
    color: var(--z-black);
    cursor: pointer;
}
.z-refund-review .gridview select.z-refund-type:focus { outline: none; border-color: var(--z-teal-400); }

/* Refund Override box: the 9d-3 Disbursement Approved size. Read-only once
   a Full Fee deposit sets the amount. */
.z-refund-review .gridview td input.z-refund-override {
    height: 30px;
    padding: 4px 10px;
    max-width: 92px;
    text-align: right;
}
.z-refund-review .gridview td input.z-refund-override[readonly] {
    background: var(--z-gray-100);
    color: var(--z-gray-600);
}

/* Approve pill wraps an asp:CheckBox (AutoPostBack); :has() covers the
   span ASP.NET wraps around the input whenever it carries attributes, which
   breaks the 9d-3 sibling selector */
.z-refund-review .z-toggle-pill--approve:has(input:checked) .z-toggle-pill-face {
    background: var(--z-teal-400);
    border-color: var(--z-teal-400);
    color: var(--z-white);
}
/* Reject is a submit button wearing the pill face: it opens the
   confirmation, so it fills red on hover instead of toggling */
.z-refund-review input[type="submit"].z-toggle-pill-face {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.z-refund-review .z-toggle-pill--remove input[type="submit"].z-toggle-pill-face:hover {
    background: var(--z-red);
    border-color: var(--z-red);
    color: var(--z-white);
}
/* "No bank account" tag replaces Approve; clicking it reloads the page */
.z-refund-review a.z-disb-tag { text-decoration: none; cursor: pointer; }

/* Refund To Issue + the batch total in the sticky footer */
.z-refund-review .gridview td.z-refund-to-issue,
.z-refund-review .z-refund-batch-total { color: var(--z-teal-500); }

/* Community list: the intro paragraphs sit between the sticky stack and
   the grid (they scroll away). The 12px top margin clears the stack's
   junction strip; width 0 + min-width 100% wraps them to the grid's
   width instead of widening the fit-content wrapper (as .z-disb-notice). */
.z-refund-review .z-refund-intro-block {
    margin: 12px 0 4px;
    box-sizing: border-box;
    width: 0;
    min-width: 100%;
}

/* Affects Next Month's Rent: "Yes" (the refund leaves the resident short
   of next month's rent) reads in the amber warn tone */
.z-refund-review .z-refund-affects { font-weight: 600; }

/* Outstanding Balance Due box (community list): a read-only trigger for
   its dialog - the 9d-3 amount-box size, with a pointer */
.z-refund-review .gridview td input.z-refund-balance-due {
    height: 30px;
    padding: 4px 10px;
    max-width: 100px;
    text-align: right;
    cursor: pointer;
}
.z-refund-review .gridview td input.z-refund-balance-due:hover { border-color: var(--z-teal-400); }

/* The balance in the Reason / Comments box, above the user's own note */
.z-refund-review .comment-balance-due .comment-recorded-label { color: #c97a00; }

/* Outstanding Balance Due dialog */
.z-refund-balance-modal .z-refund-balance-resident { margin-bottom: 12px; }
.z-refund-balance-modal .z-refund-balance-explain {
    margin: 0 0 10px;
    color: var(--z-gray-600);
}
.z-refund-balance-modal .z-form-label { display: block; margin-top: 14px; }
.z-refund-balance-modal input.z-refund-balance-amount {
    max-width: 180px;
    margin-top: 6px;
    text-align: right;
}
.z-refund-balance-modal .z-refund-balance-limit {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    color: var(--z-gray-600);
}
.z-refund-balance-modal .comment-modal-textbox { margin-top: 6px; }

/* Reject confirmation: resident / community / amount as label-value rows */
.z-refund-reject-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
    margin: 16px 0;
}
.z-refund-reject-details dt { font-weight: 600; text-align: right; }
.z-refund-reject-details dd { margin: 0; }
.z-refund-reject-note {
    margin-top: 6px;
    font-size: 12px;
    font-style: italic;
    color: var(--z-gray-600);
}


/* ==========================================================
   9e. ADMIN — Users (NewSite_Users.aspx + ascx_Controls/Users.ascx)
   No Figma reference. Reuses z-admin-shell, z-section-title,
   z-subsection-title, gridview, z-form-* family, z-empty-state,
   z-btn-teal, z-chosen. Adds: location selector row,
   grouped grid header rows for the user list, and a two-column
   form layout with a right-side rules-card.
   ========================================================== */

/* Location filter row above the user list (NPS Admin only) */
.z-users-location-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 32px;
    flex-wrap: wrap;
}
.z-users-location-label {
    font-family: var(--body-semibold-font-family);
    font-size: var(--body-semibold-font-size);
    font-weight: var(--body-semibold-font-weight);
    line-height: var(--body-semibold-line-height);
    color: var(--z-black);
}
/* The page-level CommunitySelectorControl wrapper. Chosen.js is initialized
   at width:280px in the control's code-behind; .z-chosen overrides that to
   100%, so the wrapper needs an explicit width to render the dropdown at
   the intended size. */
.z-users-location-chosen { width: 280px; }

.z-users-body { margin-top: 0; }

/* User list panel — centered on the page. The header row and grid both
   fill this container so the "Users" title sits at the grid's left edge
   and the "+ Add User" button sits at the grid's right edge. */
.z-users-list {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

.z-users-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 16px;
}

/* Override gridview defaults that conflict with the row-click hover */
.z-users-grid tr.gridrow td,
.z-users-grid tr.gridrow-alt td { cursor: pointer; }

/* User Name column — left-align the data. The global `.gridview td`
   rule centers every cell, which beats the column's align="left"
   attribute; this override restores the intended left alignment. */
.gridview td.z-users-login { text-align: left; max-width: 150px; }

/* Fixed full-width layout: with four unpinned header cells, fixed layout
   distributes the columns evenly while ignoring long cell content and the
   colspan=4 group-header rows the code-behind injects. */
.z-users-grid {
    table-layout: fixed;
    width: 100%;
}
/* Column split (fixed layout reads widths off the header row): a slight
   rebalance from the equal quarters — User Name cedes a quarter of its
   width to Name; Role and Status keep their original quarters. */
.z-users-grid th:nth-child(2) { width: 20%; }
.z-users-grid th:nth-child(3) { width: 20%; }
.z-users-grid th:nth-child(4) { width: 20%; }

/* Injected group header row (code-behind sets cell.CssClass on a colspan=4 td)
   — soft teal wash with a teal accent bar so the Property Manager / Region /
   Community headers read as section headers without overpowering the rows.
   The entity type renders as a small uppercase teal tag after the name. */
.gridview td.z-users-grouphead,
.gridview tr.gridrow td.z-users-grouphead,
.gridview tr.gridrow-alt td.z-users-grouphead {
    /* !important: the legacy .main-layout-table td shell rule paints every
       descendant cell white with !important and would wash out the band. */
    background: rgba(50, 205, 178, 0.14) !important;
    border-top: 0;
    border-bottom: 0;
    font-family: var(--body-semibold-font-family);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--z-black);
    text-align: left;
    padding: 9px 16px;
    cursor: default;
}
.gridview tr:hover td.z-users-grouphead,
.gridview tr.gridrow:hover td.z-users-grouphead,
.gridview tr.gridrow-alt:hover td.z-users-grouphead { background: rgba(50, 205, 178, 0.14) !important; cursor: default; }
.z-users-grouphead-tag {
    color: var(--z-teal-500);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Thin separators under the user rows (the group bands keep their own clean
   edge via the border-bottom: 0 in the higher-specificity rules above). */
.z-users-grid tr.gridrow td,
.z-users-grid tr.gridrow-alt td { border-bottom: 1px solid var(--z-gray-200); }

/* Hierarchy indents, 24px per level. Section headers step in by their level
   (PM at the band's base 16px, Region under it, Community under whichever
   parent it belongs to), and the Name column is left-aligned one step deeper
   than its own section header. The extra selector variants outrank the band
   rule's padding shorthand and the gridrow cell rules above. */
.gridview td.z-users-grouphead.z-users-row-lvl2,
.gridview tr.gridrow td.z-users-grouphead.z-users-row-lvl2,
.gridview tr.gridrow-alt td.z-users-grouphead.z-users-row-lvl2 { padding-left: 40px; }
.gridview td.z-users-grouphead.z-users-row-lvl3,
.gridview tr.gridrow td.z-users-grouphead.z-users-row-lvl3,
.gridview tr.gridrow-alt td.z-users-grouphead.z-users-row-lvl3 { padding-left: 64px; }

.z-users-grid tr.gridrow td:first-child:not(.z-users-grouphead),
.z-users-grid tr.gridrow-alt td:first-child:not(.z-users-grouphead) { text-align: left; padding-left: 40px; }
.z-users-grid tr.gridrow td:first-child.z-users-row-lvl2:not(.z-users-grouphead),
.z-users-grid tr.gridrow-alt td:first-child.z-users-row-lvl2:not(.z-users-grouphead) { padding-left: 64px; }
.z-users-grid tr.gridrow td:first-child.z-users-row-lvl3:not(.z-users-grouphead),
.z-users-grid tr.gridrow-alt td:first-child.z-users-row-lvl3:not(.z-users-grouphead) { padding-left: 88px; }

/* Edit/Add user form — two-column layout (main form + side rules card).
   Capped near the list panel's width so the form sits at sensible page
   density instead of stretching across the full 1312px admin shell. */
.z-users-edit {
    max-width: 820px;
    margin: 0 auto;
}
.z-users-form-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 32px;
    align-items: start;
}
.z-users-form-main { min-width: 0; max-width: 520px; }
.z-users-form-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Read-only label that replaces an editable input when in display-only mode
   (e.g. RealName / LoginName / Email shown as labels for an existing user
   the current user can't rename). Sits where the input would, plain text. */
.z-users-readonly {
    display: inline-block;
    padding: 8px 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--z-black);
}
.z-users-readonly:empty { display: none; }

/* Per-field validator message under the input */
.z-form-fielderror {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
    color: var(--z-red);
}

/* Fancytree location picker — keep the plugin's own DOM, just bound it */
.z-users-location-tree {
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    padding: 8px;
    background: var(--z-white);
    max-height: 260px;
    overflow: auto;
}
.z-users-location-tree:empty { display: none; }

/* Status radio group — horizontal pair, normal weight, comfortable spacing */
.z-users-status { gap: 16px; }
.z-users-status label { margin-right: 16px; font-size: 14px; }

/* Inline error banner shown inside the form (server-side validation message) */
.z-users-error {
    display: block;
    margin: 0 0 16px;
}
.z-users-error:empty {
    display: none;
    margin: 0;
}

/* Side rules card — soft-bordered info panel listing login/password rules */
.z-users-rules-card {
    background: var(--z-white);
    border: 1px solid var(--z-gray-300);
    border-radius: 12px;
    padding: 16px 20px;
    font-family: var(--z-font-body);
    font-size: 13px;
    line-height: 20px;
    color: var(--z-gray-600);
}
.z-users-rules-card ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.z-users-rules-card li { padding: 2px 0; }
.z-users-rules-title {
    margin: 0;
    font-family: var(--body-semibold-font-family);
    font-size: 14px;
    font-weight: var(--body-semibold-font-weight);
    line-height: 20px;
    color: var(--z-black);
}

@media (max-width: 900px) {
    .z-users-form-body { grid-template-columns: 1fr; }
}


/* ==========================================================
   9f. ADMIN — Invoice List (Admin_InvoiceList.aspx +
   ascx_Controls/InvoiceListControl.ascx)
   No Figma reference. Reuses z-admin-shell, z-section-title,
   gridview + z-gridview-bordered, z-form-input, z-btn-primary,
   z-btn-teal, z-empty-state, z-error-banner. Adds a filter
   toolbar, a pager, and the recon payment-allocation header.
   ========================================================== */

/* ---- Filter toolbar ---- */
.z-invoice-filters {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 24px 0 8px;
}
.z-invoice-filter-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}
.z-invoice-daterange {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.z-invoice-filter-label {
    font-family: var(--body-semibold-font-family);
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    color: var(--z-black);
}
.z-invoice-daterange-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* z-form-input forces width:100%; pin explicit widths here (higher specificity). */
.z-invoice-daterange-controls select.z-invoice-quickdate { width: 170px; }
.z-invoice-daterange-controls input.z-invoice-dateinput { width: 116px; text-align: center; }
.z-invoice-daterange-sep {
    font-size: 13px;
    font-weight: 500;
    color: var(--z-gray-600);
}
.z-invoice-filter-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* Normalize both filter pills to 40px so they line up with the inputs
   (border-box needed because <input type=submit> defaults to content-box). */
.z-invoice-filter-actions input[type="submit"].z-btn-primary,
.z-invoice-filter-actions input[type="submit"].z-btn-teal {
    box-sizing: border-box;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
}

/* ---- Search row ---- */
.z-invoice-search {
    display: flex;
    align-items: center;
    gap: 8px;
}
.z-invoice-search input.z-invoice-searchinput { width: 320px; }
.z-invoice-search input[type="submit"].z-btn-teal {
    box-sizing: border-box;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
}
/* asp:CheckBox renders <span class="z-invoice-checkbox"><input><label></span> */
.z-invoice-checkbox {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: var(--z-black);
}
.z-invoice-checkbox input[type="checkbox"] { margin: 0 8px 0 0; }
.z-invoice-checkbox label { margin: 0; }

/* ---- Pager ---- */
.z-invoice-paging {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--z-gray-200);
}
.z-invoice-paging-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.z-invoice-paging-pagebox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 4px;
    font-size: 14px;
    color: var(--z-black);
}
.z-page-btn,
input[type="submit"].z-page-btn {
    box-sizing: border-box;
    height: 36px;
    min-width: 40px;
    padding: 0 12px;
    background: var(--z-white);
    color: var(--z-black);
    border: 1px solid var(--z-gray-300);
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.z-page-btn:hover,
input[type="submit"].z-page-btn:hover {
    border-color: var(--z-teal-400);
    color: var(--z-teal-400);
}
.z-invoice-paging-pagebox input.z-page-input {
    width: 56px;
    height: 36px;
    text-align: center;
}
.z-page-total { font-weight: 600; }
.z-invoice-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--z-black);
}
.z-invoice-pagesize select.z-invoice-pagesize-select { width: 84px; }

/* ---- Recon payment-allocation header (PaymentMode embed) ---- */
.z-invoice-payment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.z-invoice-payment-recon {
    margin-top: 8px;
    font-size: 15px;
    color: var(--z-black);
}
.z-invoice-payment-box {
    min-width: 320px;
    padding: 16px 20px;
    border: 1px solid var(--z-gray-300);
    border-radius: 12px;
}
.z-invoice-payment-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0;
    font-size: 14px;
}
.z-invoice-payment-row span { font-weight: 600; }
.z-invoice-payment-confirm,
input[type="submit"].z-invoice-payment-confirm {
    box-sizing: border-box;
    height: 40px;
    margin-top: 12px;
    padding: 0 20px;
    font-size: 14px;
}

/* ---- Per-row "Pay This Invoice" panel (PaymentMode) ---- */
.z-invoice-pay-panel {
    width: 100%;
    margin: 12px 0;
    padding: 16px 20px;
    background: var(--z-gray-100);
    border-radius: 12px;
}
.z-invoice-pay-title {
    margin: 0 0 12px;
    font-family: var(--body-semibold-font-family);
    font-size: 16px;
    font-weight: 600;
    color: var(--z-black);
}
.z-invoice-pay-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 16px;
    text-align: left;
}
.z-invoice-pay-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.z-invoice-pay-field--wide { grid-column: 1 / -1; }
.z-invoice-pay-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--z-gray-600);
}
.z-invoice-pay-balance {
    font-size: 19px;
    font-weight: 700;
}


/* ==========================================================
   9g. ADMIN — Invoice (view) (Admin_Invoice.aspx admin chrome)
   No Figma reference. Only the surrounding app-chrome is Zwaygo;
   the printable invoice body (InvoiceControl.ascx) keeps its
   Bootstrap + Invoice.css document styling (shared with the
   standalone Resources/PrintOutput/Invoice.aspx). Reuses
   z-admin-shell, z-section-title, z-detail-header/-actions,
   z-back-link, z-btn-*, z-modal--popup, and the z-invoice-pay-*
   panel classes from section 9f.
   ========================================================== */

/* Action row pills — normalize to 40px (input[type=submit] is content-box,
   so z-btn-teal's 8px vertical padding would otherwise inflate it to 56px). */
.z-invoice-view-actions input[type="submit"].z-btn-teal,
.z-invoice-view-actions input[type="submit"].z-btn-primary {
    box-sizing: border-box;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
}

.z-invoice-divider {
    border: 0;
    border-top: 1px solid var(--z-gray-200);
    margin: 24px 0;
}

/* Invoice tech-details (Date Created / Input Source / Created By / Email Sent) */
.z-invoice-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 32px;
    margin: 24px 0;
    padding: 16px 20px;
    background: var(--z-gray-100);
    border-radius: 12px;
}
.z-invoice-meta-row {
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: var(--z-black);
}
.z-invoice-meta-label {
    color: var(--z-gray-600);
    font-weight: 500;
    white-space: nowrap;
}

/* Pay-panel field spans + footer actions (reuses .z-invoice-pay-* from 9f) */
.z-invoice-pay-field--span2 { grid-column: span 2; }
.z-invoice-pay-field--span3 { grid-column: span 3; }
.z-invoice-pay-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}


/* ==========================================================
   9h. ADMIN — Invoice editor (Admin_InvoiceAdd.aspx)
   Full Zwaygo form — Bootstrap + Invoice.css dropped (this page
   is standalone; it does NOT embed the shared print control).
   Reuses z-admin-shell, z-section-title, z-card + z-admin-card,
   z-card-section-title, z-form-* family, gridview, z-chosen,
   z-modal--popup, z-btn-primary.
   ========================================================== */

/* Two-column card grid (Bill To / Details, Late Fee / Status) */
.z-invoiceadd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

/* Bill-to block */
.z-invoiceadd-payer {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--z-black);
    margin-bottom: 4px;
}
.z-invoiceadd-billto {
    font-size: 14px;
    line-height: 20px;
    color: var(--z-gray-600);
}
.z-invoiceadd-readonly {
    display: inline-block;
    padding: 10px 0;
    font-size: 14px;
    color: var(--z-gray-600);
}

/* Input with a trailing unit (DAYS, %) */
.z-invoiceadd-suffix {
    display: flex;
    align-items: center;
    gap: 8px;
}
.z-invoiceadd-suffix .z-form-input { width: 120px; }
.z-invoiceadd-suffix-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--z-gray-600);
}
.z-invoiceadd-inlineinput,
input.z-invoiceadd-inlineinput { width: 72px; text-align: center; }

/* Late-fee settings panel is toggled via jQuery .show()/.hide(); space its
   children with margins (block-safe) rather than flex gap, since older
   jQuery .show() forces display:block and would drop a flex layout. */
.z-invoiceadd-latefee > * + * { margin-top: 24px; }

/* Line-items card */
.z-invoiceadd-items .gridview { margin-top: 4px; }
.z-invoiceadd-items .gridview td a {
    color: var(--z-teal-500);
    font-weight: 500;
    text-decoration: none;
}
.z-invoiceadd-items .gridview td a:hover { text-decoration: underline; }
.z-invoiceadd-griddim,
a.z-invoiceadd-griddim { color: var(--z-gray-500) !important; margin-left: 12px; }

.z-invoiceadd-additem-row { padding: 12px 0 4px; }
.z-invoiceadd-additem-link,
a.z-invoiceadd-additem-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--z-teal-500);
    text-decoration: none;
}
.z-invoiceadd-additem-link:hover { text-decoration: underline; }

/* Totals block (right-aligned) */
.z-invoiceadd-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 320px;
    max-width: 100%;
    margin-left: auto;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--z-gray-200);
}
.z-invoiceadd-total-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 14px;
    color: var(--z-black);
}
.z-invoiceadd-total-row--grand {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--z-gray-300);
    font-size: 16px;
    font-weight: 700;
}

/* Add Item popup (PopupControlExtender content) */
.z-invoiceadd-popup {
    width: 720px;
    max-width: 92vw;
    background: var(--z-white);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 24px 28px;
    z-index: 1000;
}
.z-invoiceadd-popup-title {
    margin: 0 0 16px;
    font-family: var(--body-semibold-font-family);
    font-size: 16px;
    font-weight: 600;
    color: var(--z-black);
}
.z-invoiceadd-popup-fields {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.z-invoiceadd-popup-desc { flex: 1 1 240px; }
.z-invoiceadd-popup-num { flex: 0 0 110px; }
.z-invoiceadd-popup-num .z-form-input { width: 110px; }
.z-invoiceadd-popup-calc {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
}
.z-invoiceadd-popup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}
.z-invoiceadd-popup-vs { margin-right: auto; }

/* Status note */
.z-invoiceadd-statusnote {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    color: var(--z-gray-600);
}

/* Action bar */
.z-invoiceadd-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
}
.z-invoiceadd-actions .errorMsg,
.z-invoiceadd-actions > span:first-child { margin-right: auto; }
.z-invoiceadd-actions input[type="submit"].z-btn-primary {
    box-sizing: border-box;
    height: 40px;
    padding: 0 24px;
    font-size: 14px;
}

/* =====================================================================
   Bank Reconciliation — NewSite_Dashboard.aspx "Bank Recon" tab
   (Panel_NPSAdmin_BankRecon). No Figma reference; built from existing
   Zwaygo patterns + tokens. Replaces the dead NewSite.css recon classes
   (recon-gridContainer / reconRow / HoverBox / ledger-popupMenu / etc.)
   and dead Bootstrap utilities the workbench relied on.
   ===================================================================== */

/* Recon cards stack full-width with a tighter rhythm than .z-card */
.z-recon-card { max-width: none; margin: 0 0 32px; }
/* The transactions card hosts the ledger popup menu, which showPopup()
   positions with page (pageX/pageY) coordinates via position:absolute.
   Keep this card non-positioned so the menu's offset parent stays the
   document (the legacy recon containers were static); otherwise .z-card's
   position:relative would shift the menu by the card's offset. */
.z-recon-trxn-card { position: static; }

/* --- Top summary: bank balances grid + resident balance line --- */
.gridview.z-recon-balances td.z-recon-foot {
    border-top: 2px solid var(--z-gray-300);
    font-weight: 700; color: var(--z-black);
}
.z-recon-resident-balance {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--z-gray-200);
    font-size: 16px; font-weight: 600; color: var(--z-black);
}

/* --- Controls row: date range selector + bank file upload --- */
.z-recon-controls { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.z-recon-control-block { flex: 1 1 360px; min-width: 0; }
.z-recon-control-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--z-black); }
.z-recon-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.z-recon-control-head .z-recon-control-title { margin: 0; }
.z-recon-daterange { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.z-recon-field-label { font-size: 14px; font-weight: 500; color: var(--z-gray-600); }
.z-recon-date-input {
    box-sizing: border-box; height: 40px; width: 130px; padding: 0 12px;
    border: 1px solid var(--z-gray-300); border-radius: 8px;
    font: 400 14px/20px var(--z-font-body); color: var(--z-black);
    text-align: center; background: var(--z-white);
}
.z-recon-date-input:focus { outline: none; border-color: var(--z-teal-400); }
.z-recon-link { color: var(--z-teal-500); font-size: 13px; text-decoration: none; cursor: pointer; }
.z-recon-link:hover { text-decoration: underline; }
.z-recon-upload {
    border: 1px solid var(--z-gray-300); border-radius: 10px;
    padding: 14px 16px; background: var(--z-white);
    display: flex; flex-direction: column; gap: 14px; max-width: 460px;
}
.z-recon-upload-row { display: flex; align-items: center; gap: 12px; }
.z-recon-browse {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 18px; flex: 0 0 auto;
    background: var(--z-teal-400); color: var(--z-white);
    border-radius: 60px; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.z-recon-browse:hover { background: var(--z-teal-500); }
.z-recon-upload-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}
.z-recon-filename {
    font-size: 14px; color: var(--z-gray-600); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.z-recon-upload-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.z-recon-source-account { display: flex; flex-direction: column; gap: 6px; }
.z-recon-source-account .z-recon-field-label { color: var(--z-black); }
.z-recon-submit-wrap { display: flex; align-items: center; gap: 10px; }

/* --- Summary section: collapsible grids + Analysis & Totals card --- */
.z-recon-summary-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 32px; }
.z-recon-summary-card { flex: 1 1 560px; min-width: 0; margin: 0; }
.z-recon-totals-card { flex: 0 0 340px; margin: 0; }
.z-recon-collapse-group { margin-bottom: 4px; }
.z-recon-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    text-align: left; background: none; border: 0; cursor: pointer;
    padding: 10px 0; font-size: 16px; font-weight: 600; color: var(--z-black);
}
.z-recon-toggle:hover { color: var(--z-teal-500); }
.z-recon-toggle-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: 0 0 20px;
    border: 1px solid var(--z-gray-400); border-radius: 4px;
    font-size: 14px; line-height: 1; color: var(--z-gray-600);
}
.z-recon-collapse { margin-bottom: 8px; }
.z-recon-collapse.z-collapsed { display: none; }
.z-recon-totals { display: flex; flex-direction: column; gap: 10px; }
.z-recon-total-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--z-gray-600); }
.z-recon-total-row span:last-child { font-weight: 600; color: var(--z-black); font-variant-numeric: tabular-nums; }
.z-recon-total-divider { border-top: 1px solid var(--z-gray-200); margin: 4px 0; }
.z-recon-total-emph span { font-weight: 700; color: var(--z-black); }

/* --- Transactions workbench: two-column unmatched item picker --- */
.z-recon-trxn-body { margin-top: 4px; }
.z-recon-workbench { display: flex; gap: 24px; align-items: flex-start; }
.z-recon-workbench-col { flex: 1 1 0; min-width: 0; }
.z-recon-list { width: 100%; border-collapse: collapse; }
.z-recon-list tr, .z-recon-list td { padding: 0; border: 0; background: transparent; }
.z-recon-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px; margin: 0 0 10px;
    background: var(--z-white);
    border: 1px solid var(--z-gray-300); border-radius: 10px;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.z-recon-row:hover { background: #eef9f6; border-color: var(--z-teal-400); }
.z-recon-row-main { display: flex; align-items: center; gap: 8px; }
.z-recon-select { flex: 0 0 32px; text-align: center; }
.z-recon-desc { flex: 4 1 0; min-width: 0; }
.z-recon-date { font-size: 11px; color: var(--z-gray-500); margin-bottom: 2px; }
.z-recon-desc-text { font-weight: 600; font-size: 13px; color: var(--z-black); }
.z-recon-desc a, .z-recon-desc-text a { color: var(--z-teal-500); font-weight: 600; text-decoration: none; }
.z-recon-desc a:hover { text-decoration: underline; }
.z-recon-amount { flex: 1 1 0; text-align: right; font-size: 13px; font-weight: 600; white-space: nowrap; }
.z-recon-bankname { font-size: 10px; color: var(--z-gray-500); text-align: right; }
.z-recon-empty { padding: 24px; text-align: center; color: var(--z-gray-500); font-size: 13px; font-weight: 500; }
.z-recon .z-hidden { display: none !important; }
/* Highlighted item preview inside the ledger-entry / bank-transfer modals */
.z-recon-row--preview { cursor: default; background: #eef9f6; border-color: var(--z-teal-400); }

/* --- Ledger row popup menu (positioned at the cursor by showPopup in GeneralScripts.js) ---
   One look for every ledger context menu: the bank-recon menus (.z-recon-popmenu) and
   the row menus of ResidentLedger.ascx, AppClient_Ledger.ascx and
   NewSite_Manage_ExternalErrors.aspx, which still carry the legacy .ledger-popupMenu
   class. Its rules used to live in NewSite.css; with that file gone the admin menu on
   Manage Resident rendered as unstyled, transparent links. */
.z-recon-popmenu, .ledger-popupMenu {
    position: absolute; display: none;
    background: var(--z-white);
    border: 1px solid var(--z-gray-300); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-size: 13px; z-index: 10003; overflow: hidden;
}
.z-recon-popmenu table, .ledger-popupMenu table { width: 100%; border-collapse: collapse; }
.z-recon-popmenu th, .ledger-popupMenu th {
    text-align: left; padding: 8px 14px;
    background: var(--z-black); color: var(--z-white);
    font-weight: 600; font-size: 13px;
}
.z-recon-popmenu td, .ledger-popupMenu td { padding: 0; border: 0; }
.z-recon-popmenu a, .ledger-popupMenu a {
    display: block; padding: 8px 14px;
    color: var(--z-black); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.z-recon-popmenu tr:hover a, .z-recon-popmenu a:hover,
.ledger-popupMenu tr:hover a, .ledger-popupMenu a:hover { background: #eef9f6; color: var(--z-teal-500); }
/* A disabled menu row renders its Label instead of the LinkButton; the ledger menus
   use one as the title row ("Bank Feed Deposit (Reconciled)"). Style it like the
   recon th. !important beats the markup's inline maroon colour. */
.z-recon-popmenu span, .ledger-popupMenu span {
    display: block; padding: 8px 14px;
    background: var(--z-black); color: var(--z-white) !important;
    font-weight: 600; white-space: nowrap;
}
/* The legacy item wrapper carries an inline margin-right that would leave a white
   strip beside the hover highlight and the title bar. */
.ledger-popupMenu td > div { margin: 0 !important; }

/* --- "Reconcile These Selected Items" hover overlay --- */
.z-recon-hoverbox {
    position: fixed; top: 100px; left: 50%; transform: translateX(-50%);
    display: none; z-index: 10002;
    background: var(--z-white); border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
    max-width: calc(100vw - 48px); overflow: hidden;
}
.z-recon-hoverbox-main { padding: 0 0 16px; }
.z-recon-hoverbox-header {
    height: 48px; display: flex; align-items: center; justify-content: center;
    background: var(--z-teal-400); color: var(--z-white);
    font-size: 16px; font-weight: 600;
}
.z-recon-hoverbox-grids { display: flex; gap: 24px; padding: 20px 24px 0; }
.z-recon-selected-col { flex: 1 1 0; min-width: 340px; }
.z-recon-selected-col + .z-recon-selected-col { border-left: 1px solid var(--z-gray-200); padding-left: 24px; }
.z-recon-selected-title { font-size: 15px; font-weight: 700; color: var(--z-black); margin-bottom: 8px; }
.z-recon-hoverbox-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-top: 16px; padding: 16px 24px 0;
    border-top: 1px solid var(--z-gray-200);
}
.z-recon-hoverbox-error { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 8px 24px 0; }
.z-recon-override { margin-left: 8px; }

/* --- Matched (reconciled) items detail --- */
.z-recon-matched { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--z-gray-200); }
.z-recon-matched-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.z-recon-matched-grid { width: 100%; border-collapse: collapse; }
.z-recon-matched-grid th, .z-recon-matched-grid td { padding: 0; border: 0; background: transparent; }
.z-recon-matched-colhead {
    display: flex; gap: 8px; padding: 8px 4px; margin-top: 8px;
    font-weight: 600; font-size: 14px; color: var(--z-black);
    border-bottom: 1px solid var(--z-gray-400);
}
.z-recon-matched-colhead > div { text-align: center; }
.z-recon-matched-row { display: flex; gap: 8px; padding: 6px 0; align-items: stretch; }
.z-recon-matched-cell {
    background: var(--z-gray-100); border-radius: 8px;
    padding: 10px 12px; font-size: 13px;
}
.z-recon-matched-amount {
    display: flex; flex-direction: column; justify-content: space-between;
    text-align: right; background: #eef9f6;
}
.z-recon-pager td { padding: 0; border: 0; }
.z-recon-pager a, .z-recon-pager span {
    display: inline-block; padding: 4px 10px; margin: 8px 2px;
    border: 1px solid var(--z-gray-300); border-radius: 6px;
    color: var(--z-teal-500); text-decoration: none; font-size: 13px;
}
.z-recon-pager a:hover { background: var(--z-teal-400); color: var(--z-white); }
.z-recon-pager span { background: var(--z-gray-100); color: var(--z-black); }

/* Disabled "Reconcile These Items" teal button */
.z-btn-teal:disabled,
input[type="submit"].z-btn-teal:disabled,
.z-btn-teal.aspNetDisabled { opacity: 0.4; cursor: default; }

/* --- Recon modals (reskinned ajaxToolkit popups) --- */
.z-recon-modal { max-height: 90vh; overflow-y: auto; }
.z-recon-modal-header {
    cursor: move; padding-bottom: 12px; margin-bottom: 20px;
    border-bottom: 1px solid var(--z-gray-200);
}
.z-recon-modal-header .z-modal-h2 { margin: 0; }
.z-recon-modal-content { margin-top: 4px; }
.z-recon-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 20px; }

@media (max-width: 900px) {
    .z-recon-workbench { flex-direction: column; }
    .z-recon-workbench-col { width: 100%; }
    .z-recon-selected-col + .z-recon-selected-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--z-gray-200); padding-top: 16px; }
    .z-recon-hoverbox-grids { flex-direction: column; }
}

/* =====================================================================
   Property Management (NewSite_PropertyManagement.aspx)
   Search-tree sidebar + tabbed detail panel. No Figma — built from the
   shared Zwaygo patterns (z-pill-tabs, z-card, z-modal--popup).
   ===================================================================== */

/* Two-column shell: search-tree sidebar + detail content */
.z-propman-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.z-propman-sidebar { flex: 0 0 auto; }
.z-propman-content { flex: 1 1 auto; min-width: 0; }

/* Detail header: eyebrow + entity name on the left, actions on the right */
.z-propman-header-block { margin-bottom: 16px; }
.z-propman-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.z-propman-header-titles { display: flex; flex-direction: column; gap: 2px; }
.z-propman-eyebrow {
    font-family: var(--small-semibold-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--z-gray-600);
}
.z-propman-header .z-section-title { margin: 0; }
.z-propman-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Property-management header: action pills ride on their own row above the
   title, right-aligned, so the full PM/community name has the row below to
   itself. Smaller 12px pills. */
.z-propman-header-block > .z-propman-header-actions {
    justify-content: flex-end;
    margin-bottom: 12px;
}
.z-propman-header-block > .z-propman-header-actions .z-btn-primary--sm {
    height: 30px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 18px;
}

/* Keep the selected-entity name on one line. (The "truncation" we chased here
   was actually a data bug — names with '&' were cut by the postback; the real
   fix is in PropertyTreeSelector, which now resolves the name from the DB.) */
.z-propsel-title-line .z-section-title { white-space: nowrap; }

.z-propman-body { margin-top: 8px; }

/* Reports tab — vertical list of download links */
.z-propman-reports {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 12px;
}

/* Add-community placeholder card */
.z-propman-add-card { padding: 24px; max-width: 640px; }
.z-propman-add-copy { font-size: 14px; line-height: 22px; color: var(--z-gray-600); margin: 20px 0; }
.z-propman-add-actions { display: flex; gap: 12px; }

/* Empty / no-selection splash */
.z-propman-splash {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    box-shadow: var(--z-shadow);
    border-radius: 16px;
    color: var(--z-gray-400);
    font-weight: 700;
    font-size: 32px;
    text-align: center;
}

/* Modal key/value table (Move Community) */
.z-propman-kv { border-collapse: collapse; }
.z-propman-kv td { padding: 6px 8px 6px 0; font-size: 14px; vertical-align: middle; }
.z-propman-kv-label { color: var(--z-gray-600); white-space: nowrap; padding-right: 16px; }

/* RealPage report modal */
.z-propman-report-options { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; font-weight: 600; }
.z-propman-report-email { display: flex; gap: 16px; margin-top: 16px; }
.z-propman-textarea {
    width: 100%;
    min-height: 72px;
    padding: 8px 12px;
    border: 1px solid var(--z-gray-300);
    border-radius: 8px;
    font-family: var(--z-font-body);
    font-size: 14px;
    line-height: 20px;
    resize: vertical;
}
.z-propman-textarea:focus { outline: none; border-color: var(--z-teal-400); }
.z-propman-footnote { font-size: 12px; font-style: italic; color: var(--z-gray-600); margin-top: 6px; }

@media (max-width: 900px) {
    .z-propman-layout { flex-direction: column; }
    .z-propman-sidebar { width: 100%; }
}

/* ---- Shared helpers used by the property-management controls ---- */
/* GridView header centering helper (HeaderStyle CssClass="text-center") */
.text-center { text-align: center; }
/* Bordered gridview variant (was legacy .gridview-borders / .gridview-lightfont) */
.z-gridview-bordered { border: 1px solid var(--z-gray-300); }

/* ---- ProfileManager.ascx (PM / Community profile, hosted in z-propman-body) ---- */
/* 48px gaps (not 24px) so the teal card shadow (var(--z-shadow), 32px blur)
   has white space around each box instead of bleeding into the next card. */
.z-profile-columns { display: flex; flex-flow: row wrap; gap: 48px; align-items: flex-start; }
.z-profile-column { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.z-profile-card { margin: 0; }
input.z-form-input.z-profile-grid-input {
    width: 90px; height: 32px; text-align: center; margin: 0 auto; padding: 0 6px;
}
.z-profile-upload-card { max-width: 680px; }
.z-profile-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.z-profile-file { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 320px; }
.z-profile-file-button { position: relative; overflow: hidden; flex: 0 0 auto; }
.z-profile-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.z-profile-file-name {
    font-family: var(--z-font-body); font-size: 14px; color: var(--z-gray-600);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.z-profile-upload-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.z-profile-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; }
.z-profile-actions .errorMsg { margin-right: auto; }

/* ---- BillingManager.ascx ---- */
.z-billing-section { margin-left: 45px; }
.z-billing-row { border-collapse: collapse; }
.z-billing-header {
    color: var(--z-black); font-family: var(--body-semibold-font-family);
    font-size: 16px; font-weight: 600; line-height: 24px;
}
.z-billing-notice { color: var(--z-red); font-weight: 600; font-size: 14px; line-height: 20px; }
.z-billing-grid {
    width: 100%; border-collapse: collapse; font-family: var(--z-font-body);
    border-top: 1px solid var(--z-gray-300); border-bottom: 1px solid var(--z-gray-300);
}
.z-billing-grid th {
    height: 40px; border: 0; border-bottom: 1px solid var(--z-gray-400); background: transparent;
    font-family: var(--body-semibold-font-family); font-weight: 600; font-size: 13px; line-height: 18px;
    color: var(--z-black); text-align: center; padding: 6px 10px; vertical-align: middle;
}
.z-billing-grid td { border: 0; font-size: 14px; line-height: 20px; color: var(--z-black); padding: 8px 10px; vertical-align: middle; }
.z-billing-grid input[type="text"] {
    height: 32px; padding: 4px 8px; border: 1px solid var(--z-gray-300); border-radius: 6px;
    font: 400 13px/18px var(--z-font-body); color: var(--z-black); background: var(--z-white);
}
.z-billing-grid input[type="text"]:focus { outline: none; border-color: var(--z-teal-400); }
/* Native selects inside the billing grids match their sibling 32px inputs
   (invoice-method edit panels, invoice-group reassign, etc.). */
.z-billing-grid select {
    height: 32px; padding: 4px 8px; border: 1px solid var(--z-gray-300); border-radius: 6px;
    font: 400 13px/18px var(--z-font-body); color: var(--z-black); background: var(--z-white);
}
.z-billing-grid select:focus { outline: none; border-color: var(--z-teal-400); }
/* Comma-joined recipient lists in the email-group grids: allow breaking inside
   long unspaced address runs so the list wraps instead of running under the
   action icons. */
.z-billing-manager .z-billing-emails {
    display: flex; gap: 5px; margin: 5px 0 5px 25px;
    color: var(--z-gray-400); font-size: 11px; line-height: 16px;
    text-align: left; white-space: normal;
}
.z-billing-manager .z-billing-emails > div { min-width: 0; overflow-wrap: anywhere; }
.z-billing-rate, .z-billing-rate-sm { display: inline-block; text-align: right; font-weight: 600; color: var(--z-black); }
.z-billing-rate { width: 60px; }
.z-billing-rate-sm { width: 40px; }

/* Tier-row "Qualifying Monthly Rent Range" cell: the From / To pairs sit
   inline. (The legacy markup put display:flex on the <td> itself, which breaks
   table-cell layout and scattered the cell contents.) */
.z-billing-manager td.z-billing-range { text-align: left; white-space: nowrap; }
.z-billing-manager td.z-billing-range > div { display: inline-flex; align-items: center; gap: 4px; }
.z-billing-manager td.z-billing-range > div:first-child { margin-right: 14px; }
.z-billing-manager td.z-billing-range > div:last-child { margin-left: 4px; }

/* Small inline editors in the tier rows. Legacy .tinput was 55px in
   NewSite.css; with no rule they fall back to the ~173px browser default and
   wrap out of their cells. */
.z-billing-manager .tinput { width: 72px; }

/* "No upper bound" marker on the last tier's To field. Ported from the removed
   NewSite.css rule — without it the ∞ never renders and the To column just
   looks empty. */
.z-billing-manager span.infinity,
.z-billing-manager input.infinity {
    background-image: url('../Images/infinity.gif');
    background-repeat: no-repeat;
    background-position: center;
}
.z-billing-manager span.infinity { min-width: 60px; }

/* "Rate Type: <value>" readout right of the Resident Billing header (replaces
   dead legacy .form-table markup, which collapsed to ~80px and wrapped). */
.z-billing-ratetype {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: 14px;
}
.z-billing-ratetype-value { font-weight: 600; color: var(--z-red); }
/* The Rate Type dropdown is Chosen-ified (see BillingManager.ascx.vb); the
   .z-chosen wrapper carries the width. It renders empty in view mode (the
   DropDownList is server-side invisible) — collapse it so it doesn't hold
   200px of blank space next to the label. */
.z-billing-ratetype .z-chosen { width: 200px; }
.z-billing-ratetype .z-chosen:empty { display: none; }

/* Keep the legacy Billing geometry while retaining the Zwaygo type, color,
   border, and control treatments. These tables were designed around compact
   4px horizontal cell gutters; the global GridView gutters redistribute the
   auto-layout columns and make the action/rate columns look uneven. */
.z-billing-manager .z-billing-gridview,
.z-billing-manager .z-billing-grid {
    table-layout: fixed;
}
.z-billing-manager .z-billing-row { table-layout: auto; }
.z-billing-manager .z-billing-gridview th,
.z-billing-manager .z-billing-gridview td {
    padding-left: 4px;
    padding-right: 4px;
}
.z-billing-manager .z-billing-grid th,
.z-billing-manager .z-billing-grid td {
    padding-left: 5px;
    padding-right: 5px;
}
.z-billing-manager .z-billing-row,
.z-billing-manager .z-billing-gridview {
    width: 100%;
}

/* The legacy Billing tables rely on deliberately asymmetric columns. Under
   the global GridView styles, the browser's auto-layout algorithm gives the
   unused indicator/action cells most of the available width. Keep the exact
   desktop column geometry used by the original Billing screen. */
.z-billing-manager [id$="GridView_PM_EmailDistributionLists"] > tbody > tr > :nth-child(1),
.z-billing-manager [id$="GridView_Community_EmailDistributionList"] > tbody > tr > :nth-child(1) { width: 40px; }
.z-billing-manager [id$="GridView_PM_EmailDistributionLists"] > tbody > tr > :nth-child(2),
.z-billing-manager [id$="GridView_Community_EmailDistributionList"] > tbody > tr > :nth-child(2) { width: 229px; }
.z-billing-manager [id$="GridView_PM_EmailDistributionLists"] > tbody > tr > :nth-child(3),
.z-billing-manager [id$="GridView_Community_EmailDistributionList"] > tbody > tr > :nth-child(3) { width: 410px; }
.z-billing-manager [id$="GridView_PM_EmailDistributionLists"] > tbody > tr > :nth-child(4),
.z-billing-manager [id$="GridView_Community_EmailDistributionList"] > tbody > tr > :nth-child(4) { width: 110px; }

.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(2) { width: 302px; }
.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(3) { width: 189px; }
.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(4) { width: 66px; }
.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(5) { width: 62px; }
.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(6) { width: 75px; }
.z-billing-manager [id$="GridView_PM_InvoiceGroups"] > tbody > tr > :nth-child(7) { width: 55px; }

/* Service-fee grids: pin the data columns, let the Service Fee Name column
   absorb the leftover. (Earlier pins gave the action column 6px and Expires
   81px — icons overflowed the table edge and "No Expiration" wrapped.) */
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(1),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(3),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(3) { width: 90px; }
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(4),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(4) { width: 111px; }
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(5),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(5) { width: 130px; }
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(6),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(6) { width: 150px; }
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(7),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(7) { width: 110px; }
.z-billing-manager [id$="GridView_PMBilling_ServiceFees"] > tbody > tr > :nth-child(8),
.z-billing-manager [id$="GridView_CommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(8) { width: 72px; }

.z-billing-manager [id$="GridView_PM_DefaultCommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-manager [id$="GridView_PM_DefaultCommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(2) { width: 232px; }
.z-billing-manager [id$="GridView_PM_DefaultCommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(3),
.z-billing-manager [id$="GridView_PM_DefaultCommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(4) { width: 140px; }
.z-billing-manager [id$="GridView_PM_DefaultCommunityServiceFees_FixedRate"] > tbody > tr > :nth-child(5) { width: 117px; }

.z-billing-grid--pm-per-disbursement > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-grid--pm-per-disbursement > tbody > tr > :nth-child(2),
.z-billing-grid--pm-per-disbursement > tbody > tr > :nth-child(6) { width: 14px; }
.z-billing-grid--pm-per-disbursement > tbody > tr > :nth-child(3),
.z-billing-grid--pm-per-disbursement > tbody > tr > :nth-child(4) { width: 100px; }
.z-billing-grid--pm-per-disbursement > tbody > tr > :nth-child(5) { width: 401px; }

.z-billing-grid--pm-invoice-method > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-grid--pm-invoice-method > tbody > tr > :nth-child(2) { width: 589px; }
.z-billing-grid--pm-invoice-method > tbody > tr > :nth-child(3) { width: 40px; }

.z-billing-grid--resident-rates > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-grid--resident-rates > tbody > tr > :nth-child(2) { width: 123px; }
.z-billing-grid--resident-rates > tbody > tr > :nth-child(3),
.z-billing-grid--resident-rates > tbody > tr > :nth-child(4),
.z-billing-grid--resident-rates > tbody > tr > :nth-child(5) { width: 100px; }
.z-billing-grid--resident-rates > tbody > tr > :nth-child(6) { width: 263px; }
.z-billing-grid--resident-rates > tbody > tr > :nth-child(7) { width: 63px; }

.z-billing-grid--community-invoice-method > tbody > tr > :nth-child(1) { width: 51px; }
.z-billing-grid--community-invoice-method > tbody > tr > :nth-child(3) { width: 90px; }
.z-billing-grid--community-invoice-method > tbody > tr > :nth-child(4),
.z-billing-grid--community-invoice-method > tbody > tr > :nth-child(5) { width: 110px; }
.z-billing-grid--community-invoice-method > tbody > tr > :nth-child(6) { width: 64px; }

/* Billing dialogs: standard Zwaygo modal chrome. The width bounds the dialog;
   content flows fluidly inside it. (The earlier pixel-pinned compat tables
   overflowed the box and put a horizontal scrollbar inside the email-group
   dialog — don't reintroduce fixed table widths here.) */
.z-billing-modal {
    padding: 20px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
}
.z-billing-modal--confirm       { width: 510px; }
.z-billing-modal--invoice-group { width: 620px; }
.z-billing-modal--service-fee   { width: 636px; }
.z-billing-modal--email-group   { width: 840px; }

/* Label + field(s) on one line (email-group name row). The label keeps its
   natural width; z-form-input fields flex to fill the remainder. */
.z-billing-modal-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0 4px;
    font-weight: 600;
    font-size: 14px;
}
.z-billing-modal-label { white-space: nowrap; }
.z-billing-modal-row .z-form-input { flex: 1 1 auto; width: auto; min-width: 0; }
.z-billing-modal-row .checkboxfix { white-space: nowrap; }

/* TO/CC/BCC rows: fixed layout so the 48px label column from the first row
   holds and the address inputs (width:100%) get the rest — under auto layout
   the percentage-width inputs collapse the input column instead. */
.z-billing-modal--email-group table { table-layout: fixed; width: 100%; }

/* Preserve the original two-column form proportions inside the service-fee
   dialog and prevent long labels from stealing width from the input column. */
.z-billing-modal--service-fee > table,
.z-billing-modal--service-fee [id$="Panel_FixedRateBilling_RecurringSettings"] > table {
    width: 546px;
    max-width: calc(100% - 50px);
    table-layout: fixed;
}
.z-billing-modal--service-fee > [id$="Panel_FixedRateBilling_InvoiceGroup"] > table,
.z-billing-modal--service-fee [id$="Panel_FixedRateBilling_OneTime_InvoiceDate"] > table {
    width: 288px;
    max-width: calc(100% - 50px);
}
.z-billing-modal--service-fee > table td:first-child,
.z-billing-modal--service-fee [id$="Panel_FixedRateBilling_RecurringSettings"] > table td:first-child {
    width: 288px;
}
.z-billing-modal--service-fee > table td:nth-child(2),
.z-billing-modal--service-fee [id$="Panel_FixedRateBilling_RecurringSettings"] > table td:nth-child(2) {
    width: 258px;
}

@media (max-width: 700px) {
    .z-billing-section { margin-left: 0; }
    .z-billing-modal { width: calc(100vw - 32px); }
    .z-billing-modal--service-fee > table,
    .z-billing-modal--service-fee [id$="Panel_FixedRateBilling_RecurringSettings"] > table,
    .z-billing-modal--service-fee > [id$="Panel_FixedRateBilling_InvoiceGroup"] > table,
    .z-billing-modal--service-fee [id$="Panel_FixedRateBilling_OneTime_InvoiceDate"] > table {
        width: calc(100% - 50px);
    }
}

.z-billing-tabs > button {
    height: 40px; min-width: auto; border: 0; border-radius: 38px; background: transparent; color: var(--z-black);
    font-family: var(--small-semibold-font-family); font-size: var(--small-semibold-font-size);
    font-weight: var(--small-semibold-font-weight); line-height: var(--small-semibold-line-height);
    padding: 8px 18px; cursor: pointer; white-space: nowrap; margin: 0;
}
.z-billing-tabs > button.newsite-tab-small-selected { background: var(--z-black); color: var(--z-white); }

/* ---- BankAccount.ascx ---- */
/* The whole tab is a single capped-width card (Panel carries
   z-card z-admin-card z-bankacct); fields are label-left/value-right
   z-detail-rows like the Profile cards. */
.z-bankacct { max-width: 560px; }
.z-bankacct .z-detail-row { align-items: center; }
.z-bankacct-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.z-bankacct-header .z-card-section-title { margin: 0; border: 0; padding: 0; }
.z-bankacct-checklist label { display: block; margin: 4px 0; font-family: var(--z-font-body); font-size: 14px; color: var(--z-black); }
.z-bankacct-checklist input[type="checkbox"] { margin-right: 8px; accent-color: var(--z-teal-400); }
.z-bankacct-actions { justify-content: flex-end; }

/* ---- Buildings.ascx ---- */
/* Header spans the same 75% width as the building list table so the
   Add Building / Upload Batch actions right-align with the table edge. */
.z-buildings-header { width: 75%; }

/* ---- Buildings.ascx edit modal ---- */
.z-building-actions { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.z-building-delete-prompt { margin: 8px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--z-red); }

/* ---- Services.ascx / Services_Community.ascx ---- */
/* Bounded card band: without the max-width the auto-fill columns balloon on
   wide screens and the card contents float in dead space — the original
   layout kept these as a tight two-column arrangement. */
.z-services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 24px; align-items: start; margin-top: 8px; max-width: 1080px; }
.z-services-card { display: flex; flex-direction: column; gap: 20px; }
.z-services-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.z-services-body { display: flex; flex-direction: column; gap: 20px; min-height: 200px; }
.z-services-warning-row:empty { display: none; }
.z-services-warning-row { text-align: center; }
.z-services-enable { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 140px; }
.z-services-settings-group { display: flex; flex-direction: column; gap: 12px; }
.z-services-subhead {
    font: var(--small-semibold-font-weight) var(--small-semibold-font-size)/var(--small-semibold-line-height) var(--small-semibold-font-family);
    color: var(--z-black); padding-bottom: 6px; border-bottom: 1px solid var(--z-gray-300);
}
.z-services-fields, .z-services-fields tr, .z-services-fields td { display: block; width: 100%; }
.z-services-fields td { padding: 0; }
.z-services-field { margin-bottom: 12px; }
.z-services-field-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.z-services-platform-name { font-weight: 600; color: var(--z-teal-500); }
.z-services-form-actions { display: flex; justify-content: center; gap: 16px; margin-top: 4px; }
.z-services-list { display: flex; flex-direction: column; gap: 16px; }
.z-services-list-actions { display: flex; justify-content: flex-start; }
.z-services-row-actions { display: inline-flex; gap: 16px; justify-content: center; }
.z-services-row-actions .z-link-text { font-size: 14px; line-height: 20px; }
.z-services-confirm { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; font-size: 14px; }
.z-services-confirm-actions { display: flex; gap: 16px; }
.z-services-info-table { width: 100%; font-size: 14px; color: var(--z-black); border-collapse: collapse; }
.z-services-info-table td { padding: 4px 8px 4px 0; vertical-align: top; }
.z-services-info-subhead { font-weight: 600; padding-top: 12px !important; text-decoration: underline; }
.z-services-upload-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.z-services-file-container { display: flex; align-items: flex-start; gap: 8px; }
.z-services-file-name { padding-top: 5px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.z-services-upload-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.z-services-email-list { width: 100%; }
/* Add-address row and resend action inside the disbursement-email card
   (PM_DisbursementEmail_Manager.ascx). */
.z-services-addemail { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.z-services-addemail .z-form-input { flex: 1 1 auto; width: auto; min-width: 0; }
.z-services-addemail .z-btn-primary--sm { flex: 0 0 auto; white-space: nowrap; }
.z-services-resend { display: flex; justify-content: center; margin-top: 24px; }
/* Invisible-overlay file input for the Batch Applications API "Browse..."
   button — ported from the removed NewSite.css .file-upload-buttononly rules;
   without it the native file control renders next to the styled button. */
.z-services-upload-wrap .file-upload-buttononly { position: relative; overflow: hidden; }
.z-services-upload-wrap .file-upload-buttononly input.upload {
    position: absolute; inset: 0; margin: 0; padding: 0;
    opacity: 0; cursor: pointer; font-size: 20px;
}

/* ---- SearchTree.ascx (sidebar chrome only; fancytree untouched) ---- */
.z-searchtree-search { width: 100%; margin-bottom: 10px; }
.z-searchtree-reset { margin-bottom: 10px; vertical-align: top; }
.z-searchtree-link {
    display: block; margin-bottom: 6px; padding: 6px 10px; border-radius: 6px; font-size: 14px;
    color: var(--z-gray-600); text-decoration: none; background: var(--z-gray-100);
}
.z-searchtree-link:hover { background: #eef9f6; color: var(--z-teal-500); }