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

.main-layout-table,
.main-layout-table td {
    width: 100%;
    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; }

#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: 26px; 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;
}

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

/* "View more" link below the table */
.ns-landlord-table-shell::after {
    content: "View more";
    display: block; text-align: center; margin-top: 32px;
    font-family: var(--z-font-body); font-size: 14px; font-weight: 500;
    line-height: 24px; color: var(--z-black); cursor: pointer;
}


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

/* 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 td.amount { text-align: right; font-weight: 600; }

/* 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 (default visible site-header = ~100px tall):
     100            wrapper sticks here
     100 + 108      grid <th> sticks here
       wrapper height = header(40) + header MB(16) + controls(36) + pad-bot(16) = 108

   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: 100px;
    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: 208px;
    z-index: 5;
    background: var(--z-white) !important;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--z-gray-400);
}

/* Community-selector variant: site header is 40px taller, plus a 10px
   gap so the sticky wrapper doesn't butt up against the selector row. */
body:has(#Panel_AdminCommunitySelector) .ns-landlord-residents-sticky { top: 168px; }
body:has(#Panel_AdminCommunitySelector) .ns-landlord-residents-shell .z-grid--landlord th { top: 276px; }

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

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

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

/* 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) */
.gridview td a.z-resident-link {
    color: var(--z-teal-400); font-weight: 500;
}
.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;
}

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

.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;
    gap: 12px;
}

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

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

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

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

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

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

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

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

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


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

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

/* Injected group header row (code-behind sets cell.CssClass on a colspan=4 td)
   — black background strip with the location name, like an accordion divider. */
.gridview td.z-users-grouphead {
    background: var(--z-gray-100);
    border-top: 1px solid var(--z-gray-400);
    border-bottom: 1px solid var(--z-gray-400);
    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: left;
    padding: 10px 12px;
    cursor: default;
}
.gridview tr:hover td.z-users-grouphead { background: var(--z-gray-100); cursor: default; }
.z-users-grouphead-tag {
    color: var(--z-teal-500);
    font-weight: 400;
}

/* Hierarchy indent for nested locations / users (Level 2 and 3) */
.gridview td.z-users-row-lvl2 { padding-left: 32px; }
.gridview td.z-users-row-lvl3 { padding-left: 56px; }

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