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

/* ==========================================================
   0. FONTS — Gustavo (from the Zuego 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 Zuego 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;
}

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

/* 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
   zuego-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); }

/* 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 — Zuego 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 (Zuego 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);
}

.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 Zuego 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"] {
    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 {
    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 {
    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 Zuego 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; }

/* 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;
}

/* 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); }

/* 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;
    margin-bottom: 24px;
}
.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);
}

/* GridView rendered as a responsive card grid: two columns on wide screens,
   one column when there isn't room. 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 21px;
    align-items: start;
    width: 100%;
}
.z-task-grid tbody { display: contents; }
.z-task-grid tr { display: block; }
.z-task-grid td { display: block; padding: 0; border: none; background: none; }
@media (min-width: 1000px) {
    .z-task-grid { grid-template-columns: 1fr 1fr; }
}

.z-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 125px;
    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 {
    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; }

/* 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);
}

/* Modal dialog (Zuego-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);
}

.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; }

.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);
}
.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 — complete state. JS adds .is-complete when the form
   has passed validation; the gray-ish (opacity 0.5 black) becomes
   solid Zuego teal so the user can tell the form is ready. */
.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 + Zuego-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 Zuego 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;
}

/* 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; }
}


/* ==========================================================
   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);
}

.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/zuego-ll-log-in/ — node 450:8136 "Zuego / 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);
}

/* 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; }

.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); }

.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 zuego-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: 64px; 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: var(--z-black); 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;
}
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; }
}


/* ==========================================================
   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; }
}

/* ==========================================================
   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 12px;
    font-size: 13px;
    line-height: 20px;
}
.z-resident-meta-label {
    color: var(--z-gray-600);
    font-weight: 500;
}
.z-resident-meta-row > .z-resident-meta-label:not(:first-child) {
    margin-left: 16px;
}
.z-resident-meta-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}
.z-resident-meta-link a {
    color: var(--z-black);
    text-decoration: none;
    font-weight: 600;
}
.z-resident-meta-link a:hover { text-decoration: underline; }
.z-resident-meta-link img { height: 14px; }
.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; }

/* 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); }

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

/* 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 Zuego 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 Zuego 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, Zuego 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; }

/* ==========================================================
   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;
}

/* Zuego-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; }

.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,
#Panel_Eviction {
    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
   Zuego 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; }

/* 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 Zuego 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;
}

.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;
}

.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). Stack height is fixed at
   120px: 40px title line + 24px gap + 40px section header + 16px padding —
   the sticky th offsets below depend on it. The error banner and the
   Generate row deliberately sit OUTSIDE the stack so their variable
   heights can't break those offsets. */
.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);
}
.z-disb-sticky .z-detail-header { margin: 0; flex-wrap: nowrap; }

.z-disb-page .gridview th {
    position: sticky;
    top: calc(var(--z-header-bottom) + 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;
    gap: 16px;
    margin-bottom: 24px;
}

/* Status + approved-date columns: long values ("Pending Community
   Approval", "10:32:15 AM") stay on one line at a reduced size instead
   of wrapping. */
.gridview td.z-disb-status,
.gridview td.z-disb-datetime {
    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);
}


/* ==========================================================
   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 Zuego;
   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 Zuego 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
   Zuego 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); }

/* --- Right-click ledger popup menu (positioned by showPopup in JS) --- */
.z-recon-popmenu {
    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 { width: 100%; border-collapse: collapse; }
.z-recon-popmenu 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 { padding: 0; border: 0; }
.z-recon-popmenu 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 { background: #eef9f6; color: var(--z-teal-500); }

/* --- "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 Zuego 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 Zuego 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 Zuego 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); }