/* CondoHub PH — font pairing and design-system polish layered over MudBlazor.
   Nunito for headings/labels, Mulish for body copy (per the design system tokens). */

:root {
    --ch-primary: #6E5AD1;
    --ch-primary-dark: #5746B5;
    --ch-primary-soft: #ECE7FB;
    --ch-accent: #26E0D7;
    --ch-ink: #2B2A27;
    --ch-muted: #6E6A62;
    --ch-line: #ECE5E0;
    --ch-bg: #F6F4F1;

    --mud-typography-default-family: 'Mulish', system-ui, sans-serif;
    --mud-typography-body1-family: 'Mulish', system-ui, sans-serif;
    --mud-typography-body2-family: 'Mulish', system-ui, sans-serif;
    --mud-typography-h1-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-h2-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-h3-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-h4-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-h5-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-h6-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-subtitle1-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-subtitle2-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-button-family: 'Nunito', system-ui, sans-serif;
    --mud-typography-caption-family: 'Mulish', system-ui, sans-serif;
    --mud-typography-overline-family: 'Nunito', system-ui, sans-serif;
}

html, body {
    font-family: 'Mulish', system-ui, sans-serif;
    background-color: var(--ch-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito', system-ui, sans-serif;
}

/* ============================================================
   Resident-portal app shell (custom, matching the design mockups)
   ============================================================ */
.rp-shell { display: flex; min-height: 100vh; align-items: stretch; }

.rp-sidebar {
    width: 252px; flex: none; background: var(--ch-primary-dark, #5746B5); color: #fff;
    padding: 22px 16px; display: flex; flex-direction: column; gap: 20px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
}
.rp-brand { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.rp-brand-badge {
    width: 38px; height: 38px; flex: none; border-radius: 12px; background: #C4B5FD;
    display: flex; align-items: center; justify-content: center; color: #5746B5;
}
.rp-unit-card { background: rgba(255,255,255,.10); border-radius: 18px; padding: 12px 14px; }
.rp-nav { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.rp-nav a {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
    border-radius: 12px; color: rgba(255,255,255,.82); font: 600 13.5px/1.2 'Nunito', sans-serif;
    text-decoration: none; transition: background .14s ease, color .14s ease;
}
.rp-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.rp-nav a.active { background: rgba(255,255,255,.20); color: #fff; }
.rp-nav .rp-badge { background: #26E0D7; color: #0D3B39; font: 800 10.5px 'Nunito', sans-serif; padding: 2px 7px; border-radius: 999px; }
.rp-nav-section { font: 700 10px 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); padding: 12px 12px 2px; }
.rp-copilot-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0;
    border-radius: 18px; background: rgba(38,224,215,.16); color: #fff;
    font: 700 13px/1.2 'Nunito', sans-serif; cursor: pointer; text-align: left;
}
.rp-copilot-btn:hover { background: rgba(38,224,215,.26); }
.rp-signout { display: flex; align-items: center; gap: 9px; padding: 2px 6px; color: rgba(255,255,255,.68); font: 600 12.5px 'Nunito', sans-serif; background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.rp-signout:hover { color: #fff; }

.rp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #F7F6F3; }
.rp-header {
    position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ch-line); padding: 14px 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.rp-search {
    display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--ch-line);
    border-radius: 999px; padding: 8px 14px; flex: 0 1 300px; min-width: 160px;
}
.rp-search input { border: 0; outline: none; flex: 1; min-width: 0; font-size: 14px; background: transparent; font-family: 'Mulish', sans-serif; }
.rp-iconbtn { width: 42px; height: 42px; border: 2px solid var(--ch-line); border-radius: 999px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ch-ink); }
.rp-content { flex: 1; padding: 28px 32px 56px; width: 100%; }
.rp-burger { display: none; width: 42px; height: 42px; border: 2px solid var(--ch-line); border-radius: 12px; background: #fff; cursor: pointer; }

/* Resident-portal cards */
.rp-card { background: #fff; border: 1px solid var(--ch-line); border-radius: 28px; box-shadow: 0 2px 8px rgba(43,42,39,.06); }

/* Header dropdowns (account + notifications) */
.rp-avatar-btn { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 4px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; text-align: left; transition: background .14s ease; }
.rp-avatar-btn:hover { background: var(--ch-primary-soft); }
.rp-menu-wrap { position: relative; }
.rp-menu-backdrop { position: fixed; inset: 0; z-index: 48; background: transparent; }
.rp-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 49; min-width: 248px;
    background: #fff; border: 1px solid var(--ch-line); border-radius: 16px;
    box-shadow: 0 16px 48px rgba(43,42,39,.16); overflow: hidden;
}
.rp-dropdown-head { padding: 14px 16px; border-bottom: 1px solid var(--ch-line); }
.rp-dropdown a, .rp-dropdown button.rp-dropdown-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 11px 16px;
    font: 600 13.5px 'Nunito', sans-serif; color: var(--ch-ink); text-decoration: none;
    background: transparent; border: 0; cursor: pointer; text-align: left;
}
.rp-dropdown a:hover, .rp-dropdown button.rp-dropdown-item:hover { background: var(--ch-primary-soft); color: var(--ch-primary-dark); }
.rp-dropdown .rp-dropdown-foot { border-top: 1px solid var(--ch-line); }
.rp-dropdown .rp-dropdown-foot form { width: 100%; margin: 0; }
.rp-dropdown .rp-dropdown-foot button { color: #C0392B; }
.rp-dropdown .rp-dropdown-foot button:hover { background: #F7DAD6; color: #C0392B; }

@media (max-width: 900px) {
    .rp-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 12px 48px rgba(0,0,0,.3); }
    .rp-sidebar.open { transform: translateX(0); }
    .rp-burger { display: flex; align-items: center; justify-content: center; }
    .rp-header { padding: 12px 16px; }
    .rp-content { padding: 18px 16px 40px; }
    .rp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 39; }
}

/* Soft cards that echo the mockups' rounded, low-shadow surfaces. */
.ch-card {
    border: 1px solid var(--ch-line);
    border-radius: 16px;
}

/* Selected / featured card edges — 2px primary stroke per the design system. */
.ch-card--selected {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-soft);
}

.ch-card--featured {
    border: 2px solid var(--color-primary);
}

.ch-eyebrow {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ch-muted);
}

/* Native inputs styled like MudBlazor outlined fields, for the static-SSR auth forms
   (MudBlazor's static-input bridge is unreliable on this MudBlazor major version). */
.ch-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.ch-field > label { font-size: .8rem; font-weight: 600; color: var(--ch-muted); }
.ch-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #b9b4ab;
    border-radius: 8px;
    background: #fff;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 1rem;
    color: var(--ch-ink);
}
.ch-input:focus {
    outline: none;
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 1px var(--ch-primary);
}
.ch-btn-primary {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: var(--ch-primary);
    color: #fff;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
}
.ch-btn-primary:hover { background: var(--ch-primary-dark); }

.ch-signout-btn {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #C0392B;
    border-radius: 10px;
    background: #fff;
    color: #C0392B;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
}
.ch-signout-btn:hover { background: #C0392B; color: #fff; }

.ch-validation { color: var(--ch-primary); }
.ch-validation .validation-message { color: #C0392B; font-size: .8rem; }

/* Native select styled to sit alongside MudBlazor outlined inputs (used in static-SSR forms). */
.ch-select {
    width: 100%;
    padding: 14px 12px;
    border: 1px solid #b9b4ab;
    border-radius: 8px;
    background: #fff;
    font-family: 'Mulish', system-ui, sans-serif;
    font-size: 1rem;
    color: var(--ch-ink);
}
.ch-select:focus {
    outline: none;
    border-color: var(--ch-primary);
    box-shadow: 0 0 0 1px var(--ch-primary);
}

/* Brand gradient used on the marketing hero and auth panels. */
.ch-hero {
    background: linear-gradient(135deg, #6E5AD1 0%, #5746B5 55%, #17B8B0 140%);
    color: #fff;
}

/* Drawer nav: readable inactive/active states on the deep lavender sidebar. */
.mud-navmenu .mud-nav-link {
    color: #ffffffcc;
    border-radius: 10px;
    margin: 2px 8px;
}
.mud-navmenu .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}
.mud-navmenu .mud-nav-link.active {
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
    font-weight: 700;
}
.mud-navmenu .mud-nav-group .mud-nav-link {
    color: #ffffffcc;
}

/* ============================================================
   Account area — shared sidebar + the profile/settings cards
   ("CondoHub PH Account Sidebar.dc.html", "CondoHub PH Profile.dc.html")
   ============================================================ */
.acct-head { margin-bottom: 22px; }

.acct-shell {
    display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 36px; align-items: start; max-width: 1320px;
}
.acct-aside { position: sticky; top: 24px; }
.acct-body { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.acct-card {
    background: #fff; border: 1px solid var(--color-line); border-radius: 28px;
    box-shadow: 0 2px 8px rgba(43,42,39,.06);
}
.acct-side { display: block; padding: 18px; }
.acct-side-who {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 8px 16px; border-bottom: 1px dashed var(--color-line);
}
.acct-side-avatar {
    width: 44px; height: 44px; flex: none; border-radius: 999px;
    background: var(--color-primary-soft); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font: 800 15px 'Nunito', sans-serif;
}
.acct-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
.acct-nav a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px;
    color: var(--color-ink); font: 700 13.5px 'Nunito', sans-serif; text-decoration: none;
    transition: background 140ms ease, color 140ms ease;
}
.acct-nav a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.acct-nav a.active { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* Cards and fields inside the account pages. */
.acct-panel {
    background: #fff; border: 1px solid var(--color-line); border-radius: 28px;
    padding: 30px 32px; box-shadow: 0 2px 8px rgba(43,42,39,.06);
}
.acct-h2 { margin: 0 0 4px; font: 800 20px/1.2 'Nunito', sans-serif; color: var(--color-ink); }
.acct-lede { margin: 0 0 22px; font: 400 13.5px/1.6 'Mulish', sans-serif; color: var(--color-muted); }
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.acct-label { display: block; font: 700 12.5px 'Nunito', sans-serif; color: var(--color-ink); margin-bottom: 6px; }
.acct-in {
    width: 100%; border: 2px solid var(--color-line); border-radius: 10px; padding: 12px 14px;
    font: 400 14px 'Mulish', sans-serif; color: var(--color-ink); background: #fff;
    outline: none; transition: border-color 140ms ease;
}
.acct-in:focus { border-color: var(--color-primary); }
.acct-in[readonly], .acct-in:disabled { background: var(--color-bg-alt); color: var(--color-muted); }
.acct-in::placeholder { color: #9C968D; }
textarea.acct-in { resize: vertical; }
.acct-hint { display: block; font: 400 12px/1.55 'Mulish', sans-serif; color: var(--color-muted); margin-top: 6px; }

.acct-btn {
    border: 0; background: var(--color-lavender); color: #2B2A27;
    font: 800 13.5px 'Nunito', sans-serif; padding: 13px 24px; border-radius: 999px;
    cursor: pointer; transition: background 140ms ease;
}
.acct-btn:hover:enabled { background: var(--color-lavender-hover); }
.acct-btn:active:enabled { transform: scale(.97); }
.acct-btn:disabled { opacity: .55; cursor: default; }
.acct-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--color-line);
    background: #fff; color: var(--color-ink); font: 700 12.5px 'Nunito', sans-serif;
    padding: 9px 16px; border-radius: 999px; cursor: pointer; text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease;
}
.acct-btn-ghost:hover:enabled, a.acct-btn-ghost:hover {
    border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.acct-btn-ghost:disabled { opacity: .55; cursor: default; }

/* The "let neighbors message me" switch. */
.acct-toggle {
    display: flex; gap: 13px; align-items: flex-start; width: 100%; text-align: left;
    background: var(--color-bg-alt); border: 0; border-radius: 14px; padding: 14px 16px; cursor: pointer;
}
.acct-track {
    width: 44px; height: 26px; flex: none; border-radius: 999px; background: var(--color-line);
    position: relative; transition: background 140ms ease;
}
.acct-switch { position: absolute; opacity: 0; width: 0; height: 0; }
.acct-switch:checked + .acct-track { background: var(--color-primary); }
.acct-switch:focus-visible + .acct-track { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.acct-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px;
    background: #fff; transition: left 140ms ease;
}
.acct-switch:checked + .acct-track .acct-knob { left: 21px; }

.acct-note {
    background: var(--color-mint-soft); border-radius: 14px; padding: 12px 14px;
    font: 400 13px/1.55 'Mulish', sans-serif; color: var(--color-success);
}
.acct-note--warn { background: #FDF3EE; color: #B4661F; }

/* One line of "Account and security". */
.acct-row {
    display: flex; gap: 14px; align-items: center; padding: 15px 0; flex-wrap: wrap;
    border-bottom: 1px dashed var(--color-line);
}
.acct-row:last-child { border-bottom: 0; }
.acct-row-main { flex: 1; min-width: 220px; }
.acct-row-main > .t { font: 700 14px/1.3 'Nunito', sans-serif; color: var(--color-ink); }
.acct-row-main > .n { font: 400 12.5px/1.55 'Mulish', sans-serif; color: var(--color-muted); margin-top: 3px; }

/* "Leaving the towers?" */
.acct-danger { margin-top: 20px; background: #FDF3EE; border: 1px solid #E8975A; border-radius: 18px; padding: 18px 20px; }
.acct-danger h3 { margin: 0; font: 800 14.5px 'Nunito', sans-serif; color: #B4661F; }
.acct-danger p { margin: 6px 0 14px; font: 400 13px/1.6 'Mulish', sans-serif; color: #B4661F; max-width: 60ch; }
.acct-danger button {
    border: 2px solid #E8975A; background: #fff; color: #B4661F;
    font: 700 13px 'Nunito', sans-serif; padding: 11px 18px; border-radius: 999px; cursor: pointer;
}
.acct-danger button:disabled { opacity: .65; cursor: default; }

@media (max-width: 900px) {
    /* The mockup drops the sidebar on narrow screens; keep the nav instead, as a scrolling row. */
    .acct-shell { grid-template-columns: 1fr; gap: 20px; }
    .acct-aside { position: static; }
    .acct-side-who { display: none; }
    .acct-nav { flex-direction: row; overflow-x: auto; margin-top: 0; padding-bottom: 2px; }
    .acct-nav a { white-space: nowrap; }
    .acct-panel { padding: 24px 20px; border-radius: 22px; }
}

/* Status pills used down the right of the account rows. */
.acct-pill {
    display: inline-flex; align-items: center; flex: none; padding: 6px 12px; border-radius: 999px;
    font: 700 12px 'Nunito', sans-serif;
}
.acct-pill--ok { background: var(--color-mint-soft); color: var(--color-success); }
.acct-pill--wait { background: var(--color-bg-alt); color: var(--color-muted); }
.acct-pill--bad { background: #FDF3EE; color: #B4661F; }

/* A row's leading tile: a brand tag, a pet, a vehicle, a member's initials. */
.acct-tile {
    width: 38px; height: 38px; flex: none; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font: 800 11px 'Nunito', sans-serif;
    background: var(--color-primary-soft); color: var(--color-primary-dark);
}
.acct-tile--round { border-radius: 999px; font-size: 13px; }
.acct-tile--mint { background: var(--color-mint-soft); color: var(--color-success); }
.acct-tile--lav { background: var(--color-lavender); color: #2B2A27; }

/* The in-hub / email / SMS matrix on notification settings. */
.acct-matrix-head { display: flex; justify-content: flex-end; padding-bottom: 4px; }
.acct-matrix-head span {
    width: 72px; flex: none; text-align: center;
    font: 700 10px 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-muted);
}
.acct-checks { display: flex; flex: none; }
.acct-checks > span { width: 72px; display: flex; justify-content: center; }
.acct-check {
    width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 2px solid var(--color-line);
    background: #fff; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 140ms ease, border-color 140ms ease;
}
.acct-check:hover:enabled { border-color: var(--color-primary); }
.acct-check.on { border-color: var(--color-primary); background: var(--color-primary); }
.acct-check:disabled { cursor: default; opacity: .55; }

/* Shared bits of furniture inside the panels. */
.acct-sub { margin: 26px 0 12px; font: 800 14.5px 'Nunito', sans-serif; color: var(--color-ink); }
.acct-empty { margin: 0; font: 400 13.5px/1.6 'Mulish', sans-serif; color: var(--color-muted); }
.acct-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.acct-btn-ghost--danger { color: #C0392B; }
.acct-btn-ghost--danger:hover:enabled { border-color: #C0392B; background: #F9E7E4; color: #C0392B; }

/* "How payments work here" and the other explainer lists. */
.acct-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.acct-facts li { display: flex; gap: 12px; align-items: flex-start; font: 400 13px/1.6 'Mulish', sans-serif; color: var(--color-muted); }
.acct-facts svg { flex: none; margin-top: 2px; color: var(--color-primary); }

@media (max-width: 620px) {
    .acct-matrix-head span, .acct-checks > span { width: 54px; }
}

.acct-pill--soft { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* ============================================================
   Platform Operations boards — "CondoHub PH Platform Ops.dc.html"
   ============================================================ */
.po-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.po-eyebrow { font: 700 10px/1.2 'Nunito', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-dark); }
.po-title { margin: 3px 0 0; font: 800 21px/1.15 'Nunito', sans-serif; letter-spacing: -.01em; color: var(--color-ink); }
.po-pill { display: flex; align-items: center; gap: 8px; font: 700 13px 'Nunito', sans-serif; padding: 8px 14px; border-radius: 999px; }
.po-pill span.dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }

.po-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.po-kpi { background: #fff; border: 1px solid var(--color-line); border-radius: 22px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(43,42,39,.06); }
.po-panel { background: #fff; border: 1px solid var(--color-line); border-radius: 28px; box-shadow: 0 2px 8px rgba(43,42,39,.06); }

.po-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.po-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }

@media (max-width: 1080px) {
    .po-split, .po-pipe { grid-template-columns: 1fr; }
}

/* The request rows on the overview and the support queue share one skeleton. */
.po-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--color-line); }
.po-row:last-child { border-bottom: 0; }
.po-row-main { flex: 1; min-width: 0; }
.po-sev { font: 700 9.5px 'Nunito', sans-serif; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; width: 64px; text-align: center; flex: none; }
.po-col-condo { width: 150px; font: 600 12.5px 'Nunito', sans-serif; color: var(--color-ink); }
.po-col-age { width: 110px; text-align: right; font: 700 12px 'Nunito', sans-serif; }
.po-col-owner { width: 100px; text-align: right; font: 700 11px 'Nunito', sans-serif; color: var(--color-muted); }
.po-queue-head {
    display: flex; align-items: center; gap: 14px; padding: 16px 0 10px;
    border-bottom: 1px solid var(--color-line);
    font: 700 10.5px 'Nunito', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted);
}

/* On a phone the request keeps the row to itself and the condo, age and owner wrap below it,
   rather than squeezing the title into a two-word column. */
@media (max-width: 760px) {
    .po-queue-head { display: none; }
    .po-row { flex-wrap: wrap; row-gap: 6px; }
    .po-row-main { flex: 1 1 calc(100% - 78px); }
    .po-col-condo, .po-col-age, .po-col-owner { width: auto; text-align: left; }
}

.po-filter { border: 2px solid var(--color-line); background: #fff; color: var(--color-ink); font: 700 12.5px 'Nunito', sans-serif; padding: 8px 15px; border-radius: 999px; cursor: pointer; }
.po-filter.on { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary); }

.po-pipe-col { background: #fff; border: 1px solid var(--color-line); border-radius: 22px; padding: 14px; box-shadow: 0 1px 4px rgba(43,42,39,.05); }
.po-pipe-card { border: 1px solid var(--color-line); border-radius: 14px; padding: 13px 14px; }

/* ============================================================
   Platform Admin console — "CondoHub PH Admin Condos.dc.html"
   ============================================================ */
.pa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pa-h1 { margin: 0; font: 800 22px 'Nunito', sans-serif; color: var(--color-ink); }
.pa-lede { margin: 5px 0 0; font: 400 13.5px 'Mulish', sans-serif; color: var(--color-muted); }
.pa-h2 { margin: 0 0 6px; font: 800 17px 'Nunito', sans-serif; color: var(--color-ink); }
.pa-note { margin: 0 0 18px; font: 400 13px/1.6 'Mulish', sans-serif; color: var(--color-muted); }
.pa-back { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }

.pa-panel { background: #fff; border: 1px solid var(--color-line); border-radius: 22px; box-shadow: 0 2px 8px rgba(43,42,39,.06); }
.pa-panel--pad { padding: 26px 28px; }
.pa-split { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 22px; align-items: start; }
.pa-stack { display: flex; flex-direction: column; gap: 22px; }
.pa-form { display: flex; flex-direction: column; gap: 16px; }

/* Buttons */
.pa-btn { border: 0; border-radius: 999px; cursor: pointer; font: 800 13.5px 'Nunito', sans-serif; padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.pa-btn:disabled { opacity: .6; cursor: default; }
.pa-btn-lav { background: var(--color-lavender); color: #2B2A27; }
.pa-btn-lav:hover:enabled { background: var(--color-lavender-hover); }
.pa-btn-lav:active:enabled { transform: scale(.97); }
.pa-btn-primary { background: var(--color-primary); color: #fff; font-size: 13px; padding: 9px 16px; }
.pa-btn-primary:hover:enabled { background: var(--color-primary-dark); }
.pa-btn-ghost { background: #fff; border: 2px solid var(--color-line); color: var(--color-ink); font-weight: 800; padding: 9px 16px; text-decoration: none; }
.pa-btn-ghost:hover:enabled, a.pa-btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.pa-btn-danger { background: #B4661F; color: #fff; padding: 13px 24px; font-size: 14px; }
.pa-btn-danger:hover:enabled { background: #9A5419; }
.pa-btn-danger-ghost { background: #fff; border: 2px solid #E8975A; color: #B4661F; padding: 10px 18px; }
.pa-btn-danger-ghost:hover:enabled { background: #FDF3EE; }
.pa-btn-sm { border: 2px solid var(--color-line); background: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font: 700 12px 'Nunito', sans-serif; color: var(--color-ink); text-decoration: none; display: inline-block; }
.pa-btn-sm:hover:enabled, a.pa-btn-sm:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.pa-btn-sm--danger { color: #B4661F; }
.pa-btn-sm--danger:hover:enabled, a.pa-btn-sm--danger:hover { border-color: #E8975A; background: #FDF3EE; color: #B4661F; }
.pa-btn-sm--ok { color: var(--color-success); }
.pa-btn-sm--ok:hover:enabled { border-color: var(--color-success); background: var(--color-mint-soft); color: var(--color-success); }

.pa-saved { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px 'Nunito', sans-serif; color: var(--color-success); background: var(--color-mint-soft); padding: 7px 13px; border-radius: 999px; }

/* Search bar and filter chips */
.pa-search { background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 4px rgba(43,42,39,.05); flex: 1 1 260px; min-width: 220px; }
.pa-search input { border: 0; outline: none; flex: 1; min-width: 0; font: 400 14px 'Mulish', sans-serif; background: transparent; }
.pa-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.pa-chip { border: 2px solid var(--color-line); background: #fff; color: var(--color-ink); font: 700 12.5px 'Nunito', sans-serif; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all .14s ease; }
.pa-chip.on { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.pa-meta { font: 400 12.5px 'Mulish', sans-serif; color: var(--color-muted); margin-bottom: 12px; }

/* Tables. Each screen sets its own --pa-cols. */
.pa-table { background: #fff; border: 1px solid var(--color-line); border-radius: 22px; overflow: hidden; box-shadow: 0 2px 8px rgba(43,42,39,.06); }
.pa-thead, .pa-trow { display: grid; grid-template-columns: var(--pa-cols); gap: 14px; }
.pa-thead { padding: 12px 22px; background: var(--color-primary); color: #fff; font: 700 11.5px 'Nunito', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pa-trow { padding: 15px 22px; border-bottom: 1px dashed var(--color-line); align-items: center; }
.pa-trow:last-child { border-bottom: 0; }
.pa-trow:hover { background: var(--color-bg-alt); }
.pa-tcap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--color-line); }
.pa-empty { padding: 26px 22px; font: 400 13.5px 'Mulish', sans-serif; color: var(--color-muted); }
.pa-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.pa-badge { font: 700 11px 'Nunito', sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; width: fit-content; }
.pa-rolepill { font: 700 12px 'Nunito', sans-serif; color: var(--color-primary-dark); background: var(--color-primary-soft); padding: 5px 11px; border-radius: 999px; width: fit-content; }
.pa-avatar { flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-weight: 800; }

/* Forms */
.pa-label { display: flex; flex-direction: column; gap: 6px; }
.pa-label > span { font: 700 12.5px 'Nunito', sans-serif; color: var(--color-ink); }
.pa-req { color: #B4661F; }
.pa-input, .pa-select, .pa-textarea {
    width: 100%; border: 2px solid var(--color-line); border-radius: 10px; padding: 11px 13px;
    font: 400 14px 'Mulish', sans-serif; outline: none; background: #fff; color: var(--color-ink);
}
.pa-input:focus, .pa-select:focus, .pa-textarea:focus { border-color: var(--color-primary); }
.pa-textarea { resize: vertical; }
.pa-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pa-readfield > .k { font: 700 12px 'Nunito', sans-serif; color: var(--color-muted); margin-bottom: 5px; }
.pa-readfield > .v { font: 400 14.5px 'Mulish', sans-serif; color: var(--color-ink); word-break: break-word; }
.pa-error { background: #FDF3EE; border: 1px solid #E8975A; border-radius: 12px; padding: 11px 13px; font: 400 13px 'Mulish', sans-serif; color: #B4661F; }

/* Switch rows */
.pa-switch { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px dashed var(--color-line); }
.pa-switch:last-child { border-bottom: 0; }
.pa-switch-tile { width: 36px; height: 36px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.pa-switch-main { flex: 1; min-width: 0; }
.pa-switch-main > .t { font: 700 14px 'Nunito', sans-serif; }
.pa-switch-main > .d { font: 400 12px/1.45 'Mulish', sans-serif; color: var(--color-muted); margin-top: 2px; }
.pa-toggle { flex: none; width: 46px; height: 26px; border-radius: 999px; border: 0; cursor: pointer; background: #D1CCC6; position: relative; transition: background .2s ease; padding: 0; }
.pa-toggle.on { background: var(--color-primary); }
.pa-toggle > span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(43,42,39,.2); transition: left .2s ease; }
.pa-toggle.on > span { left: 23px; }
.pa-toggle:disabled { opacity: .6; cursor: default; }
.pa-toggle-label { font: 700 11.5px 'Nunito', sans-serif; min-width: 28px; text-align: right; color: var(--color-muted); }
.pa-toggle-label.on { color: var(--color-primary-dark); }

/* Danger zone and the dark plan/session cards */
.pa-danger { background: #FDF3EE; border: 1px solid #E8975A; border-radius: 22px; padding: 22px 26px; }
.pa-danger h3 { margin: 0 0 6px; font: 800 15px 'Nunito', sans-serif; color: #B4661F; }
.pa-danger p { margin: 0 0 16px; font: 400 13px/1.6 'Mulish', sans-serif; color: #B4661F; max-width: 60ch; }
.pa-dark { background: var(--color-primary-dark); color: #fff; border-radius: 22px; padding: 26px 28px; }
.pa-dark .eyebrow { font: 700 10px 'Nunito', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }

/* The confirm screens (delete a condominium, invitation sent) */
.pa-confirm { max-width: 540px; margin: 8px auto 0; background: #fff; border: 1px solid var(--color-line); border-radius: 28px; padding: 40px 38px; box-shadow: 0 8px 24px rgba(43,42,39,.08); text-align: center; }
.pa-confirm-icon { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.pa-confirm h2 { margin: 18px 0 8px; font: 800 22px 'Nunito', sans-serif; }
.pa-confirm p { margin: 0 auto; max-width: 46ch; font: 400 14.5px/1.65 'Mulish', sans-serif; color: var(--color-muted); }
.pa-confirm-actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

.pa-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.pa-stat { background: #fff; border: 1px solid var(--color-line); border-radius: 20px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(43,42,39,.06); }
.pa-stat > .k { font: 400 12px/1.3 'Mulish', sans-serif; color: var(--color-muted); text-transform: uppercase; letter-spacing: .08em; }
.pa-stat > .v { font: 800 28px/1.1 'Nunito', sans-serif; margin-top: 8px; }
.pa-stat > .s { font: 400 12.5px 'Mulish', sans-serif; color: var(--color-muted); margin-top: 5px; }

@media (max-width: 1100px) {
    .pa-split { grid-template-columns: 1fr; }
}

/* Below this the grid tables stop being grids: each row becomes a stacked card. */
@media (max-width: 880px) {
    .pa-thead { display: none; }
    .pa-trow { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 18px; }
    .pa-pair { grid-template-columns: 1fr; }
}

/* Manage-user dialog — "CondoHub PH Admin Condos.dc.html", Platform users. */
.pa-modal-backdrop {
    position: fixed; inset: 0; z-index: 60; background: rgba(43,42,39,.42); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; overflow-y: auto;
}
.pa-modal {
    width: 100%; max-width: 480px; background: #fff; border-radius: 24px;
    box-shadow: 0 24px 64px rgba(43,42,39,.24); overflow: hidden;
}
.pa-modal-head { display: flex; align-items: center; gap: 14px; padding: 24px 26px; border-bottom: 1px solid var(--color-line); }
.pa-modal-head .who { flex: 1; min-width: 0; }
.pa-modal-head .who > .n { font: 800 17px 'Nunito', sans-serif; }
.pa-modal-head .who > .e { font: 400 12.5px 'Mulish', sans-serif; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-modal-x {
    border: 0; background: var(--color-bg-alt); width: 34px; height: 34px; flex: none; border-radius: 999px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-ink);
}
.pa-modal-x:hover { background: var(--color-primary-soft); }
.pa-modal-body { padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }
.pa-modal-foot {
    display: flex; gap: 10px; justify-content: flex-end; padding: 18px 26px;
    border-top: 1px solid var(--color-line); background: var(--color-bg-alt);
}

.pa-affil { border: 1px solid var(--color-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.pa-affil-top { display: flex; align-items: center; gap: 10px; }
.pa-affil-select {
    flex: 1; min-width: 0; border: 2px solid var(--color-line); border-radius: 10px; padding: 9px 12px;
    font: 600 13.5px 'Mulish', sans-serif; background: #fff; outline: none; color: var(--color-ink);
}
.pa-affil-select:focus { border-color: var(--color-primary); }
.pa-affil-remove {
    border: 0; background: var(--color-bg-alt); width: 32px; height: 32px; flex: none; border-radius: 999px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: #B4661F;
}
.pa-affil-remove:hover { background: #FDF3EE; }
.pa-affil-roles { display: flex; gap: 7px; flex-wrap: wrap; }
.pa-rolechip {
    border: 2px solid var(--color-line); background: #fff; color: var(--color-ink);
    font: 700 12px 'Nunito', sans-serif; padding: 6px 12px; border-radius: 999px; cursor: pointer;
    transition: all .14s ease;
}
.pa-rolechip.on { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.pa-affil-warn { font: 600 11.5px 'Mulish', sans-serif; color: #B4661F; }
.pa-affil-add {
    align-self: flex-start; border: 2px dashed var(--color-line); background: #fff; color: var(--color-primary-dark);
    font: 700 12.5px 'Nunito', sans-serif; padding: 9px 15px; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
}
.pa-affil-add:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }

.pa-modal-actions { border-top: 1px solid var(--color-line); padding-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.pa-modal-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pa-modal-action .t { font: 700 13.5px 'Nunito', sans-serif; }
.pa-modal-action .d { font: 400 12px 'Mulish', sans-serif; color: var(--color-muted); margin-top: 2px; }
.pa-modal-action .d.ok { font-weight: 600; color: var(--color-success); }
.pa-modal-pill {
    flex: none; border: 2px solid var(--color-line); background: #fff; font: 700 12.5px 'Nunito', sans-serif;
    padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--color-ink);
}
.pa-modal-pill:hover:enabled { border-color: var(--color-primary); color: var(--color-primary-dark); }
.pa-modal-pill--danger { border-color: #E8975A; color: #B4661F; }
.pa-modal-pill--danger:hover:enabled { background: #FDF3EE; color: #B4661F; border-color: #E8975A; }

.pa-modal-save { border: 0; background: var(--color-primary); color: #fff; font: 800 13px 'Nunito', sans-serif; padding: 10px 20px; border-radius: 999px; cursor: pointer; }
.pa-modal-save:hover:enabled { background: var(--color-primary-dark); }
.pa-modal-save:disabled { background: #B9B3AB; cursor: not-allowed; opacity: .7; }

@media (max-width: 560px) {
    .pa-modal-backdrop { padding: 20px 12px; }
}