/* Self-hosted styles — system font stack, no external fonts or CDNs.
   Apple theme: the macOS/iOS look. A pale gray canvas, white cards with hairline
   borders and whisper shadows, a light Finder-style sidebar, and system blue as
   the only accent. Fully token-driven with an automatic light/dark scheme. Every
   surface colour is a CSS variable so dark mode is a token swap, not a rewrite. */
:root {
  color-scheme: light dark;

  /* Accent — Apple system blue. Two roles: --brand is the accent TEXT/icon/link
     colour (the apple.com link blue, 5.7:1 on white); --accent-fill is the button
     background that white text sits on (4.6:1 against white). Hover goes LIGHTER,
     the way Apple's own buttons do. */
  --brand: #0066cc;
  --brand-strong: #004a99;
  --brand-ink: #ffffff;
  --accent-fill: #0071e3;
  --accent-fill-strong: #0077ed;
  --brand-tint: rgba(0, 113, 227, .10);
  --brand-tint-strong: rgba(0, 113, 227, .18);

  /* The sidebar is the macOS one: pale gray, dark text, hairline edge, a blue
     fill behind the selected item. Flips to dark gray in the dark scheme. */
  --side-bg: #f5f5f7;
  --side-bg-deep: #f5f5f7;
  --side-ink: rgba(60, 60, 67, .82);
  --side-ink-strong: #1d1d1f;
  --side-active: #0071e3;
  --side-active-ink: #ffffff;
  --side-hover: rgba(0, 0, 0, .05);
  --side-line: rgba(0, 0, 0, .10);

  /* Ink + lines — Apple's neutral grays, no colour cast. */
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --faint: #aeaeb2;
  --line: rgba(0, 0, 0, .10);
  --line-strong: rgba(0, 0, 0, .18);
  /* The outline of grouped surfaces (cards, tables). Transparent: like macOS
     System Settings, a white group on the gray canvas needs no stroke. Dark mode
     adds a whisper ring for definition on low-contrast panels. */
  --card-line: transparent;

  /* Surfaces — clean and solid; depth comes from soft shadows, not translucency */
  --card: #ffffff;
  --card-strong: #ffffff;
  --card-solid: #ffffff;
  --field-bg: #ffffff;
  --fill: rgba(120, 120, 128, .08);
  --fill-strong: rgba(120, 120, 128, .14);
  --track: rgba(120, 120, 128, .20);
  --glass: none;
  --glass-strong: none;
  /* Retired glass stroke — kept as a token so --shadow keeps composing. */
  --glass-edge: 0 0 0 0 transparent;

  /* Status palette (tint = translucent fill, ink = readable text on that tint) */
  --ok-ink: #157a40;        --ok-tint: rgba(48, 199, 89, .16);    --ok-line: rgba(48, 199, 89, .34);
  --warn-ink: #8a5a12;      --warn-tint: rgba(255, 159, 10, .16); --warn-line: rgba(255, 159, 10, .36);
  --danger: #c01a13;        --danger-ink: #c01a13;                --danger-tint: rgba(255, 59, 48, .13); --danger-line: rgba(255, 59, 48, .30);
  --info-ink: #0a5bd0;      --info-tint: rgba(0, 122, 255, .13);
  --indigo-ink: #4b48c4;    --indigo-tint: rgba(94, 92, 230, .15);
  --purple-ink: #7a3da8;    --purple-tint: rgba(175, 82, 222, .15);
  --neutral-ink: #51606e;   --neutral-tint: rgba(118, 128, 145, .15);

  /* Chart/graphic swatches — Apple system colours, used for donuts, bars, legends. */
  --chart-blue: #007aff;
  --chart-green: #34c759;
  --chart-orange: #ff9500;
  --chart-amber: #e0a020;
  --chart-red: #ff3b30;
  --chart-gray: #c7c7cc;

  /* Depth */
  --shadow: none;
  --shadow-pop: 0 16px 44px -12px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08);
  /* Double ring: a solid surface-coloured gap then a solid accent ring, so the
     indicator clears 3:1 on any surface (incl. tinted hover states). */
  --focus-ring: 0 0 0 2px var(--card-solid), 0 0 0 4px var(--brand);

  /* Geometry */
  --radius-lg: 20px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --leading: 1.55;
  --font-head: 600;

  /* Page background — Apple's pale gray. Flat; the white cards read as elevated
     against it through hairline borders and whisper shadows. */
  --page-bg: #f5f5f7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #409cff;
    --brand-strong: #66b2ff;
    --brand-ink: #ffffff;
    /* Filled controls keep the deeper blue even in dark mode: white text on
       #0a84ff is 3.6:1, on #0071e3 it clears 4.5:1. Hover lightens. */
    --accent-fill: #0071e3;
    --accent-fill-strong: #0a84ff;
    --brand-tint: rgba(10, 132, 255, .20);
    --brand-tint-strong: rgba(10, 132, 255, .32);

    /* Dark sidebar: macOS dark gray, one step off the canvas. */
    --side-bg: #1d1d20;
    --side-bg-deep: #1d1d20;
    --side-ink: rgba(235, 235, 245, .72);
    --side-ink-strong: #f5f5f7;
    --side-active: #0071e3;
    --side-active-ink: #ffffff;
    --side-hover: rgba(255, 255, 255, .07);
    --side-line: rgba(255, 255, 255, .10);

    --ink: #f5f5f7;
    --muted: #98989d;
    --faint: rgba(235, 235, 245, .42);
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .22);
    --card-line: rgba(255, 255, 255, .06);

    --card: #1c1c1e;
    --card-strong: #26262a;
    --card-solid: #26262a;
    --field-bg: rgba(255, 255, 255, .07);
    --fill: rgba(255, 255, 255, .07);
    --fill-strong: rgba(255, 255, 255, .13);
    --track: rgba(255, 255, 255, .15);
    --glass-edge: 0 0 0 0 transparent;

    --ok-ink: #34d164;        --ok-tint: rgba(48, 209, 88, .22);    --ok-line: rgba(48, 209, 88, .38);
    --warn-ink: #ffb340;      --warn-tint: rgba(255, 159, 10, .22); --warn-line: rgba(255, 159, 10, .40);
    --danger: #ff8077;        --danger-ink: #ff8077;                --danger-tint: rgba(255, 69, 58, .24); --danger-line: rgba(255, 69, 58, .42);
    --info-ink: #5aa9ff;      --info-tint: rgba(10, 132, 255, .22);
    --indigo-ink: #9b99ff;    --indigo-tint: rgba(94, 92, 230, .28);
    --purple-ink: #d68cff;    --purple-tint: rgba(175, 82, 222, .28);
    --neutral-ink: rgba(235, 235, 245, .72); --neutral-tint: rgba(255, 255, 255, .10);

    --chart-blue: #0a84ff;
    --chart-green: #30d158;
    --chart-orange: #ff9f0a;
    --chart-amber: #ffd60a;
    --chart-red: #ff453a;
    --chart-gray: #8a8a8e;

    --shadow: none;
    --shadow-pop: 0 20px 56px -10px rgba(0, 0, 0, .74), 0 2px 10px rgba(0, 0, 0, .55);

    --page-bg: #101012;
  }
}

* { box-sizing: border-box; }
/* The hidden attribute must win over component display rules (e.g. .form label is
   display:flex, which would otherwise keep a [hidden] field visible). */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg) fixed;
  color: var(--ink);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.muted { color: var(--muted); }

/* Auth */
.auth { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card {
  background: var(--card-strong); border: 1px solid var(--card-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 32px; width: 100%; max-width: 380px;
  -webkit-backdrop-filter: var(--glass-strong); backdrop-filter: var(--glass-strong);
}
.brand { margin: 0 0 4px; font-size: 20px; color: var(--brand); }
/* Keyhold sign-in logo: the source art is a square with whitespace, so crop to the
   wordmark band with object-fit. */
.brand-logo { display: block; width: 168px; height: auto; margin: 0 auto 14px; }
@media (prefers-color-scheme: dark) {
  .brand-logo { filter: brightness(0) invert(1); opacity: .92; }
}
.card form { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
input, select, textarea {
  font-size: 16px; padding: 10px 12px; border: 1px solid var(--line-strong); /* 16px: stops iOS Safari zooming on focus */
  border-radius: var(--radius-sm); background: var(--field-bg); color: var(--ink); width: 100%; font-family: inherit;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
select[multiple] { padding: 4px; }
button {
  font-size: 15px; padding: 10px 16px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent-fill); color: var(--brand-ink); cursor: pointer; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: background .14s ease, box-shadow .14s ease, transform .06s ease, filter .14s ease;
}
button:hover { background: var(--accent-fill-strong); filter: none; }
button:active { background: var(--accent-fill-strong); transform: translateY(0.5px); }
button:focus-visible, .btn:focus-visible, .actions a:focus-visible, .sidebar a:focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}
.alert {
  background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger-line);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px;
}

/* App chrome. On desktop the app has no top bar: the forest sidebar owns the brand
   and runs the full viewport height, like the reference design. The top bar remains
   for phones (hamburger + logo) and for org-less onboarding accounts. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card-strong); border-bottom: 1px solid var(--line); padding: 12px 24px;
  position: sticky; top: 0; z-index: 50;
}
@media (min-width: 641px) { .topbar-app { display: none; } }
.topbar-brand { display: inline-flex; align-items: center; }
/* The logo art is an opaque white square; show it as a small rounded chip (crop to the
   wordmark band) so it reads cleanly on both the light and dark header. */
.topbar-logo { display: block; height: 30px; width: auto; max-width: 150px; object-fit: contain;
  background: #fff; border-radius: 6px; padding: 4px 8px; box-sizing: border-box; }
.topbar-nav { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sep { color: var(--line-strong); }
.inline { display: inline; }
button.link { background: none; color: var(--brand); padding: 2px 4px; font-weight: 600; border-radius: var(--radius-sm); box-shadow: none; }
button.link:hover { text-decoration: none; background: var(--brand-tint); color: var(--ink); filter: none; }
button.link.danger { color: var(--danger); }
button.link.danger:hover { background: var(--danger-tint); color: var(--danger); }

/* Mobile menu button — hidden on desktop, shown on phones (see media query).
   Pure-CSS toggle: a visually hidden checkbox holds the open/closed state. */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px;
  margin: -4px 6px -4px -8px; border-radius: var(--radius-sm); color: var(--brand); cursor: pointer; }
.nav-toggle:hover { background: var(--brand-tint); }
.nav-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
@media (min-width: 641px) { .nav-cb, .nav-toggle { display: none; } }

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; min-height: 100svh; }
.sidebar { background: var(--side-bg); border-right: 1px solid var(--side-line); padding: 18px 14px;
  display: flex; flex-direction: column;
  /* Pin the nav so it stays in place instead of scrolling away with the page.
     align-self:start stops the grid cell stretching to the full content height (which
     would leave no room to stick). min-height keeps the panel full-height; no
     overflow, so the sidebar itself never gets a scrollbar. */
  position: sticky; top: 0; align-self: start;
  min-height: 100vh; min-height: 100svh; }
/* Brand at the head of the sidebar: the two-tone mark rendered as a single-ink
   silhouette - near-black on the light panel, white on the dark one - so it sits
   on the gray like a native macOS source-list header. */
.side-brand { display: block; margin: 6px 6px 20px; }
.side-brand img { display: block; width: 158px; height: auto; }
@media (prefers-color-scheme: dark) {
  .side-brand img { filter: brightness(0) invert(1); opacity: .92; }
}
.sidebar a {
  display: block; padding: 10px 12px; border-radius: 10px; color: var(--side-ink);
  text-decoration: none; font-size: 14px; font-weight: 500; margin-bottom: 2px;
  transition: background .14s ease, color .14s ease;
}
.sidebar a:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.sidebar a.active { background: var(--side-active); color: var(--side-active-ink); }
/* Sign out: pinned to the foot of the sidebar, quietly destructive. */
.sidebar-signout { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--side-line); }
.sidebar-signout button {
  display: flex; align-items: center; gap: 9px; width: 100%; margin: 0;
  padding: 10px 12px; border: 0; border-radius: 10px; background: none; box-shadow: none;
  color: var(--side-ink); font-size: 14px; font-weight: 500; font-family: inherit; text-align: left;
  cursor: pointer; transition: background .14s ease, color .14s ease;
}
.sidebar-signout button:hover { background: var(--danger-tint); color: var(--danger); }
.sidebar-signout svg { flex: none; opacity: .9; }
.content { padding: 24px; max-width: 960px; min-width: 0; } /* min-width:0 lets wide tables scroll inside the grid cell */
.content-wide { max-width: 1320px; }
/* Widescreen: reclaim the empty gutters on large monitors. Forms cap themselves at
   640px, so only tables, card grids and hubs actually stretch. */
@media (min-width: 1600px) { .content-wide { max-width: 1500px; } }
@media (min-width: 1900px) { .content-wide { max-width: 1720px; } }
/* Organization name, quietly top-right of the content like the reference design. */
.content-org { display: flex; justify-content: flex-end; font-size: 13px; color: var(--muted); margin: -6px 0 10px; }

/* Page header */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
/* The page title must out-rank the sections inside it. It was 22px against a
   23px h2.sub, so every section heading looked bigger than the page it was on. */
h1 { font-size: 28px; font-weight: var(--font-head); letter-spacing: -0.022em; line-height: 1.2; margin: 0; }
.btn {
  display: inline-block; background: var(--accent-fill); color: var(--brand-ink);
  padding: 9px 16px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: background .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover { background: var(--accent-fill-strong); filter: none; }

/* Success toast: floats bottom-center, auto-dismisses. Errors keep the inline flash. */
.toast { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97); z-index: 400;
  display: flex; align-items: center; gap: 9px; max-width: min(92vw, 480px);
  background: rgba(28, 28, 30, .94); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .3); cursor: pointer; opacity: 0;
  transition: opacity .25s ease, transform .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast svg { color: #30d158; flex: none; }
@media (prefers-reduced-transparency: reduce) { .toast { -webkit-backdrop-filter: none; backdrop-filter: none; background: #1c1c1e; } }

/* Flash */
.flash { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; border: 1px solid transparent;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.flash-ok { background: var(--ok-tint); color: var(--ok-ink); border-color: var(--ok-line); }
.flash-err { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }

/* Data table */
table.data { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--card-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
table.data th, table.data td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-size: 14px; }
table.data th { background: none; color: var(--muted); font-weight: 500; font-size: 13px; }
table.data tr:last-child td { border-bottom: 0; }
/* .num alone loses to "table.data td" on specificity, so numeric columns were
   silently left-aligned everywhere. Money is also kept on one line: "USD
   2,500.00" wrapping mid-amount is what made these columns look ragged. */
table.data th.num, table.data td.num { text-align: right; white-space: nowrap; }
table.data th { white-space: nowrap; }
.col-actions { width: 1%; }
.actions { display: flex; align-items: center; gap: var(--space-4); white-space: nowrap; min-height: 32px; }
.actions a, .actions form.inline { margin: 0; }
.actions a, .actions button.link { padding: 5px 9px; border-radius: var(--radius-sm); line-height: 1.2; text-decoration: none; }
.actions form.inline { display: inline-flex; }
.actions a:hover, .actions button.link:hover { background: var(--brand-tint); color: var(--ink); text-decoration: none; filter: none; }
.actions button.link.danger { color: var(--danger); }
.actions button.link.danger:hover { background: var(--danger-tint); color: var(--danger); }
/* Pause before a destructive action. Space, not a rule: a hairline between two
   text links reads as clutter once every row has one. */
.actions form.inline:has(button.link.danger) { margin-left: var(--space-2); }

/* Status as a coloured dot beside plain text — the list idiom used throughout
   macOS. Quieter than a filled capsule and it leaves the row's text baseline
   unbroken. The label always carries the meaning; the dot only speeds scanning. */
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.status-occupied::before    { background: var(--chart-green); }
.status-active::before      { background: var(--chart-green); }
/* Hollow ring for vacant: reads as "empty" at a glance, and stays visible where
   a pale grey fill looked like a rendering artefact. */
.status-vacant::before      { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
/* Not an error state — "unavailable" is renovation, owner use or storage. */
.status-unavailable::before { background: var(--chart-orange); }

/* Secondary line under a row's primary label: contract numbers, dues, kind.
   One quiet grey size for all of it, so the eye reads the label first. */
.u-meta { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 1px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; }
.badge-vacant { background: var(--neutral-tint); color: var(--neutral-ink); }
.badge-occupied { background: var(--ok-tint); color: var(--ok-ink); }
.badge-unavailable { background: var(--danger-tint); color: var(--danger); }
/* Type labels stay neutral. Colour is reserved for status - is this thing OK,
   needs attention, or wrong - so a timeshare suite and a locker no longer arrive
   in indigo and purple for no reason. */
.badge-ts      { background: var(--fill); color: var(--muted); }
.badge-parking { background: var(--fill); color: var(--muted); }
.badge-locker  { background: var(--fill); color: var(--muted); }
.badge-draft { background: var(--neutral-tint); color: var(--neutral-ink); }
.badge-active { background: var(--ok-tint); color: var(--ok-ink); }
.badge-ended { background: var(--warn-tint); color: var(--warn-ink); }
.badge-terminated { background: var(--danger-tint); color: var(--danger); }

/* Forms */
.form { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px; max-width: 640px; display: flex; flex-direction: column; gap: 14px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }
.form label.check input { width: auto; }
.form label.check-top { align-items: flex-start; line-height: 1.45; }
.form label.check-top input { margin-top: 2px; flex: none; }
.err { color: var(--danger); font-size: 12px; }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 6px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.kpi { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-5);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.kpi-value { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.kpi-label { font-size: 13px; font-weight: 600; margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Lease statement + accounting UI */
.summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.actions-card { padding: 18px; margin-bottom: 18px; }
.actions-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.actions-bar:not(:last-child) { margin-bottom: 14px; }
.btn-sm { font-size: 13px; padding: 7px 12px; border: 0; border-radius: var(--radius-sm); background: var(--accent-fill); color: var(--brand-ink); cursor: pointer; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12); transition: background .14s ease, box-shadow .14s ease, filter .14s ease; }
.btn-sm:hover { background: var(--accent-fill-strong); filter: none; }
.pay-form { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pay-form .row { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pay-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
h2.sub { font-size: 23px; font-weight: var(--font-head); letter-spacing: -0.018em; margin: var(--space-6) 0 var(--space-3); }
h3.sub { font-size: 17px; font-weight: var(--font-head); letter-spacing: -0.012em; }
/* Key/value summary rows (the LTB prepare and view screens). */
.kv { display: flex; flex-direction: column; gap: 8px; }
.kv > div { display: flex; align-items: baseline; gap: 12px; }
.kv .muted { flex: 0 0 auto; min-width: 120px; font-size: 13px; }
.kv strong { color: var(--ink); }
table.data tfoot th { background: none; font-size: 13px; color: var(--ink); border-top: 1px solid var(--line-strong); }
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.btn-muted { background: var(--fill-strong); color: var(--ink); text-decoration: none; display: inline-block; border-radius: var(--radius-sm); box-shadow: none; }
.btn-muted:hover { background: var(--track); filter: none; }
.btn-danger { font-size: 13px; padding: 6px 12px; border: 1px solid var(--danger-line); border-radius: var(--radius-sm); background: transparent; color: var(--danger); cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; box-shadow: none; transition: background .14s ease; }
.btn-danger:hover { background: var(--danger-tint); }
/* Properties index: one table per property. Fixed layout + a shared colgroup
   keeps every group's columns on the same rails, so the stacked tables read as
   a single grid. */
.pr-grid { table-layout: fixed; }
.pr-grid td { overflow-wrap: break-word; }
.pr-head:first-of-type { margin-top: 14px; }

.hub-table tr[data-href] { cursor: pointer; }
.hub-table tbody tr[data-href]:hover { background: var(--brand-tint); }
.hub-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ld-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ld-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 11px 14px; background: var(--card); box-shadow: var(--shadow); transition: border-color .14s ease, transform .12s ease; }
/* No transform on hover: a CSS transform creates a stacking context that traps an open
   ⋯ menu's dropdown behind the card beneath it, causing a flicker when you hover the
   overlap. Border colour + a stronger shadow are the hover cue instead. */
.ld-card:hover { border-color: var(--line-strong); box-shadow: 0 4px 14px rgba(15, 23, 42, .10); }
/* Belt and suspenders: keep a card whose ⋯ menu is open above the cards below it. */
.ld-card:has(details.ls-menu[open]) { position: relative; z-index: 10; }
.ld-open { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.ld-icon { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.ld-body { min-width: 0; }
.ld-name { display: block; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-open:hover .ld-name { text-decoration: underline; }
.ld-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.ls-menu { position: relative; display: inline-block; }
.ls-menu > summary { display: inline-block; list-style: none; cursor: pointer; }
.ls-menu > summary::-webkit-details-marker { display: none; }
.ls-menu-pop { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--card-strong); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 6px;
  -webkit-backdrop-filter: var(--glass-strong); backdrop-filter: var(--glass-strong); }
/* Opened near the bottom of the window there is nothing below to open into, so
   the menu flips above its button the way a macOS menu does. Applied by the
   flipMenus() script in the layout, which measures the real space available. */
.ls-menu-pop.flip-up { top: auto; bottom: calc(100% + 6px); }
.ls-menu-pop a, .ls-menu-pop button { display: block; width: 100%; text-align: left; padding: 9px 11px; margin: 0; border: 0; border-radius: 8px; background: none; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; text-decoration: none; box-sizing: border-box; box-shadow: none; }
.ls-menu-pop a:hover, .ls-menu-pop button:hover { background: var(--brand-tint); }
.ls-menu-pop button.danger { color: var(--danger); }
.ls-menu-pop button.danger:hover { background: var(--danger-tint); }
.ls-menu-pop form { margin: 0; }
.ls-menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
.ls-menu-empty { display: block; padding: 9px 11px; font-size: 13px; color: var(--muted); }
/* A menu whose summary is a real button (the header "Add ▾"). */
summary.btn-sm { display: inline-block; }
/* Cards hosting an open ⋯ menu must stack above the sticky jump bar. */
.ls-info-card:has(details.ls-menu[open]) { position: relative; z-index: 21; }
.ls-actions-bar:has(details.ls-menu[open]) { position: relative; z-index: 21; }
.ld-rename { padding: 4px 4px 2px; }
.ld-rename input { display: block; width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; background: var(--card); color: var(--ink); }
.ld-rename input:focus { outline: none; border-color: var(--brand); }
/* table.data clips overflow for its rounded corners - let a row's open menu escape
   that clip instead of being invisibly cut off. The z-index lift is essential too:
   every table.data is its own backdrop-filter stacking context, so without it a
   later table (e.g. Payments below Charges) paints over the popover's lower half.
   Raising the open table to a positioned z-index (below the sticky topbar's 50)
   floats it and its menu above any following glass surface. */
table.data:has(.ls-menu[open]) { overflow: visible; position: relative; z-index: 20; }
/* The "..." summary renders as the SF-style circled ellipsis, app-wide. The
   glyph is a masked inline SVG so the markup's ⋯ text stays for accessibility
   fallbacks but is visually replaced (font-size: 0). Colour rides currentColor:
   quiet gray at rest, accent on hover, matching .map-pin. */
.ls-menu.ls-menu-dots > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 8px;
  font-size: 0; line-height: 1; color: var(--muted);
}
.ls-menu.ls-menu-dots > summary::before {
  content: ""; width: 19px; height: 19px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='7.2' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='16.8' cy='12' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='7.2' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='16.8' cy='12' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ls-menu.ls-menu-dots > summary:hover { background: var(--brand-tint); color: var(--brand); }
/* Let a card show its dropdown menu instead of clipping it, and float it over any
   glass surface that follows (same stacking reason as the table above). */
.tenant-card:has(.ls-menu[open]) { overflow: visible; position: relative; z-index: 20; }
.ls-arrears-alert { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--danger-tint); border: 1px solid var(--danger-line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 14px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.ls-arrears-amt { display: block; font-weight: 700; color: var(--danger); font-size: 16px; }
.ls-arrears-sub { display: block; font-size: 13px; color: var(--ink); margin-top: 2px; }
.ls-arrears-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
/* Countdown to the N4's last day to pay, shown beside the alert's actions. */
.ls-n4-count { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding: 2px 14px 2px 4px; margin-right: 6px; border-right: 1px solid var(--danger-line); }
.ls-n4-count-n { font-size: 26px; font-weight: 700; color: var(--danger); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ls-n4-count-l { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* Maintenance: priority + status badges */
.pri-low { background: var(--neutral-tint); color: var(--neutral-ink); }
.pri-normal { background: var(--info-tint); color: var(--info-ink); }
.pri-high { background: var(--warn-tint); color: var(--warn-ink); }
.pri-urgent { background: var(--danger-tint); color: var(--danger); }
.mr-open { background: var(--info-tint); color: var(--info-ink); }
.mr-in_progress { background: var(--warn-tint); color: var(--warn-ink); }
.mr-resolved { background: var(--ok-tint); color: var(--ok-ink); }
.mr-closed { background: var(--neutral-tint); color: var(--neutral-ink); }
.mr-cancelled { background: var(--danger-tint); color: var(--danger); }

.inline-assign { display: flex; align-items: flex-end; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; flex-wrap: wrap; }
.inline-assign label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.inline-assign select { min-width: 220px; }
.comments { display: flex; flex-direction: column; gap: 10px; }
.comment { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; overflow-wrap: anywhere; }
.comment.internal { background: var(--warn-tint); border-color: var(--warn-line); }
.c-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; }

/* Tabs (timeshare sub-nav) */
/* Toasts: transient status in the corner, for work that happens without a page load
   (compressing a photo, an upload that was rejected). Square corners, per the UI rules. */
/* Centred on screen: an upload can take a while and the message matters, so it
   lands where the eye already is rather than in a corner that is easy to miss. */
.tst-wrap { position: fixed; inset: 0; z-index: 400; display: flex;
  flex-direction: column; gap: 10px; align-items: center; justify-content: center;
  padding: 20px; pointer-events: none; }
.tst { pointer-events: auto; width: min(430px, 100%); background: var(--card-solid); color: var(--ink);
  border: 1px solid var(--card-line); border-left: 3px solid var(--brand); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 15px 17px; font-size: 14px; line-height: 1.45;
  display: flex; gap: 10px; align-items: flex-start;
  animation: tst-in .18s ease-out; }
.tst.err { border-left-color: var(--danger); }
.tst.ok  { border-left-color: var(--ok-ink); }
.tst .t-body { flex: 1; min-width: 0; }
.tst .t-title { font-weight: 600; }
.tst .t-msg { color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.tst .t-x { background: none; border: 0; box-shadow: none; color: var(--faint); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; margin: 0; }
.tst .t-x:hover { color: var(--ink); background: none; }
.tst .t-rows { margin-top: 9px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.tst .t-row { display: flex; gap: 10px; align-items: baseline; }
.tst .t-k { flex: none; width: 74px; color: var(--muted); }
.tst .t-v { min-width: 0; overflow-wrap: anywhere; }
.tst .t-v.is-strong { font-weight: 600; }
.tst .t-acts { margin-top: 11px; display: flex; gap: 7px; flex-wrap: wrap; }
.tst .t-acts button { border: 1px solid var(--line); background: var(--fill); color: var(--ink);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; }
.tst .t-acts button:hover { background: var(--fill-strong); }
.tst .t-acts button.t-primary { background: var(--accent-fill); color: var(--brand-ink); border-color: transparent; }
.tst .t-acts button.t-danger { color: var(--danger); }
.tst .t-bar { height: 3px; background: var(--fill-strong); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.tst .t-bar i { display: block; height: 100%; background: var(--brand); width: 0; transition: width .2s ease; }
@keyframes tst-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tst { animation: none; } .tst .t-bar i { transition: none; } }

/* The agreements page stacks three tables that must read as one grid, so the
   column widths are fixed rather than sized to each table's own content. */
.ag-grid { table-layout: fixed; }
.ag-grid td, .ag-grid th { overflow-wrap: anywhere; }

/* In-page jump bar for long pages (a property hub runs to several screens). Sticks
   to the top of the content column so every section stays one click away. */
.pagenav { position: sticky; top: 0; z-index: 20; display: flex; gap: 2px; flex-wrap: wrap;
  background: var(--page-bg); border-bottom: 1px solid var(--line); margin: 0 0 4px; padding: 9px 0; }
.pagenav a { padding: 7px 12px; border-radius: 8px; text-decoration: none; color: var(--muted);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .14s ease, color .14s ease; }
.pagenav a:hover { background: var(--fill); color: var(--ink); }
.pagenav a.active { background: var(--brand-tint); color: var(--brand); }
/* Anchored sections must clear the sticky bar when jumped to. */
.jump-target { scroll-margin-top: 62px; }
@media (max-width: 640px) {
  .pagenav { top: 53px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jump-target { scroll-margin-top: 112px; }
}

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tabs a { padding: 8px 14px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }

/* Maintenance photos */
.photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }

/* Lease cards */
.lease-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.lease-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); transition: transform .14s ease, box-shadow .14s ease; }
.lease-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.lease-card-head { padding: 16px 18px 14px; flex: 1; }
.lease-card-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lease-card-property { font-size: 15px; font-weight: 700; margin: 6px 0 2px; }
.lease-card-unit { font-size: 12px; color: var(--muted); }
.lease-card-rent { font-size: 20px; font-weight: 700; white-space: nowrap; text-align: right; padding-top: 2px; letter-spacing: -.02em; }
.lease-card-tenant { font-size: 14px; margin: 8px 0 0; }
.lease-card-dates { font-size: 12px; color: var(--muted); margin-top: 6px; }
.lease-card-foot { border-top: 1px solid var(--line); padding: 10px 18px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: var(--fill); }
.lc-spacer { flex: 1; }
.lc-action { background: none; border: 0; padding: 5px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--brand); box-shadow: none; }
.lc-action:hover { background: var(--brand-tint); filter: none; }

/* Map-pin icon link in a section head: quiet gray glyph, blue on hover. */
.map-pin { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; color: var(--muted); }
.map-pin:hover { background: var(--brand-tint); color: var(--brand); }
.lc-primary { background: var(--accent-fill); color: var(--brand-ink); }
.lc-primary:hover { filter: none; background: var(--accent-fill-strong); }
.lc-danger { color: var(--danger); }
.lc-danger:hover { background: var(--danger-tint); }

/* Lease detail page */
.ls-info-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.ls-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 24px; }
.ls-field-full { grid-column: 1 / -1; }
.ls-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.ls-value { font-size: 14px; font-weight: 500; }
.kpi-alert { border-color: var(--danger-line); background: var(--danger-tint); }
.ls-tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.ls-tenant-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 14px 16px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); transition: border-color .15s ease; }
.ls-tenant-card:hover { border-color: var(--line-strong); }
.ls-tenant-card:has(.ls-menu[open]) { position: relative; z-index: 20; }
.ls-tenant-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ls-tenant-name { font-weight: 600; color: var(--ink); }
.ls-tenant-name a { text-decoration: none; }
.ls-tenant-name a:hover { text-decoration: underline; }
.ls-pay-card { background: var(--card); border: 1.5px solid var(--brand); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.ls-pay-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.ls-pay-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ls-pay-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ls-pay-field input, .ls-pay-field select { margin: 0; }
.ls-pay-btn { background: var(--accent-fill); color: var(--brand-ink); font-size: 14px; padding: 10px 20px; border: 0; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ls-pay-btn:hover { filter: none; background: var(--accent-fill-strong); }
.ls-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ls-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 34px 0 10px; }
.ls-addcharge-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.ls-addcharge-btn { background: var(--fill-strong); color: var(--ink); font-size: 14px; padding: 9px 18px; border: 0; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; box-shadow: none; }
.ls-addcharge-btn:hover { background: var(--track); filter: none; }
.ac-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; align-items: start; }
.ac-fields { display: flex; flex-direction: column; gap: 12px; }
.ac-fields .ls-addcharge-btn { align-self: flex-start; margin-top: 4px; }
.ac-billcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (max-width: 760px) { .ac-grid { grid-template-columns: 1fr; } }
.ls-bill-cell { white-space: nowrap; }
.ls-bill-link { display: inline-block; font-size: 13px; text-decoration: none; margin-right: 8px; }
.ls-bill-link:hover { text-decoration: underline; }

/* Bank reconciliation: unmatched-deposit rows. A plain flex layout, not a table -
   a <select> inside an auto-layout table cell can't reliably resolve a percentage
   width across browsers, which is exactly what squeezed the tenant name/property
   label before. As a normal block/flex child it just takes the full row width,
   which on a real desktop screen is the whole .content column (hundreds of px
   more than a table column would ever offer here). */
.bank-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.bank-row { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 12px 14px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.bank-row-top { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.bank-row-date { color: var(--muted); font-size: 13px; white-space: nowrap; flex: none; }
.bank-row-amount { font-weight: 600; white-space: nowrap; flex: none; margin-left: auto; }
.bank-desc { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.bank-attribute-form { display: flex; flex-direction: column; gap: 8px; }
.bank-tenant-select { width: 100%; }
.bank-attribute-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bank-attribute-row select { flex: 1; min-width: 0; }
.bank-attribute-row button { flex: none; }
/* Optional deposit slice of a bank deposit: compact labeled amount box in the row. */
.bank-deposit-field { flex: none; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.bank-deposit-field input { width: 120px; margin: 0; flex: none; }
/* Payment reference (e.g. a bank e-Transfer's full raw description, kept for
   traceability) can be long - truncate it in the Payments table rather than
   blowing out the row; the full text is still one hover away via title. */
.pay-ref { display: inline-block; max-width: 320px; overflow-wrap: anywhere; white-space: normal; vertical-align: top; }

/* Recurring monthly charge templates (service fees etc.) */
.rc-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
.rc-item + .rc-item { margin-top: 8px; }
.rc-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-item > summary::-webkit-details-marker { display: none; }
.rc-item[open] > summary { margin-bottom: 10px; }
.rc-name { font-weight: 600; color: var(--ink); }
.rc-body { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }

/* Drag-and-drop file upload */
.dz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.dz-field-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.dz { width: 100%; }
.dz-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  border: 2px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 18px; cursor: pointer; color: var(--muted);
  background: var(--fill); transition: border-color .15s, background .15s, color .15s; }
.dz-drop:hover { border-color: var(--brand); color: var(--ink); }
.dz-drop:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.dz.is-over .dz-drop { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.dz.is-over .dz-preview { border-color: var(--brand); background: var(--brand-tint); }
.dz-icon { color: var(--brand); }
.dz-prompt { font-size: 13px; }
.dz-browse { color: var(--brand); font-weight: 600; text-decoration: underline; }
.dz-hint { font-size: 11px; }
.dz-preview { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-solid); overflow: hidden; }
.dz-pv-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--fill); }
.dz-pv-head .dz-name { flex: 1; }
.dz-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-size { font-size: 12px; color: var(--muted); flex: none; }
.dz-pv-open { font-size: 12px; font-weight: 600; text-decoration: none; flex: none; }
.dz-pv-open:hover { text-decoration: underline; }
.dz-pv-body { background: var(--fill); display: flex; justify-content: center; align-items: flex-start; }
.dz-pv-list { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--fill); max-height: 220px; overflow-y: auto; }
.dz-pv-item { display: flex; align-items: baseline; gap: 10px; }
.dz-pv-item .dz-name { flex: 1; font-weight: 500; }
.dz-pv-img { max-width: 100%; max-height: 360px; object-fit: contain; display: block; }
.dz-pv-frame { width: 100%; height: 420px; border: 0; display: block; background: var(--card-solid); }
.dz-remove { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; border-radius: 8px; flex: none; box-shadow: none; }
.dz-remove:hover { background: var(--danger-tint); color: var(--danger); filter: none; }
.dz-remove:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dz-error { color: var(--danger); font-size: 12px; margin-top: 6px; }

/* Compact dropzone (per-charge-row attach) */
.dz-mini { display: inline-flex; align-items: center; gap: 6px; }
.dz-mini.is-over .dz-mini-trigger { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.dz-mini.is-over .dz-mini-chip { outline: 2px dashed var(--brand); outline-offset: 2px; border-radius: 6px; }
.dz-mini-trigger { background: none; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 12px;
  font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer; box-shadow: none; }
.dz-mini-trigger:hover { border-color: var(--brand); color: var(--brand); filter: none; background: var(--fill); }
.dz-mini-chip { display: inline-flex; align-items: center; gap: 6px; }
.dz-mini-name { font-size: 12px; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-mini-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; box-shadow: none; }
.dz-mini-remove:hover { color: var(--danger); filter: none; }
.dz-mini-upload { background: var(--accent-fill); color: var(--brand-ink); border: 0; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; cursor: pointer; }
.dz-mini-upload:hover { filter: none; background: var(--accent-fill-strong); }
.dz-mini-trigger:focus-visible, .dz-mini-remove:focus-visible, .dz-mini-upload:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Utilities */
.num { text-align: right; }
.text-danger { color: var(--danger); font-weight: 600; }
/* Money received / "paid" reads in neutral primary text (apple.com restraint —
   colour is reserved for what needs attention). Red stays for amounts owed. */
.text-ok { color: var(--ink); font-weight: 600; }
.sidebar-sep { height: 1px; background: var(--side-line); margin: 8px 4px; }

/* List toolbar (search + stats) */
.list-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.search-box { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search-box input { width: 100%; padding-left: 36px; }
.search-box svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.list-stats { display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.list-stats strong { color: var(--ink); font-weight: 700; }

/* Tenants — card grid grouped by property */
.tenant-section { margin-bottom: 26px; }
.tenant-section-head { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: none; letter-spacing: .02em; }
.avatar-lg { width: 44px; height: 44px; font-size: 15px; }

.tenant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.tenant-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden; -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transition: box-shadow .15s ease, border-color .15s ease, transform .14s ease; }
.tenant-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.tc-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; }
.tc-id { flex: 1; min-width: 0; }
.tc-name { font-weight: 700; font-size: 15px; line-height: 1.25; }
.tc-email { font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; overflow-wrap: anywhere; }
.tc-meta { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.tc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.tc-label { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tc-units { text-align: right; }
.tc-foot { margin-top: auto; border-top: 1px solid var(--line); background: var(--fill); padding: 8px 10px;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.unit-badge { display: inline-block; background: var(--neutral-tint); color: var(--neutral-ink); border-radius: 7px; padding: 2px 8px;
  font-size: 12px; font-weight: 500; text-decoration: none; margin: 1px 0 1px 4px; white-space: nowrap; }
.unit-badge:hover { background: var(--fill-strong); color: var(--ink); }
.badge-portal { background: var(--ok-tint); color: var(--ok-ink); }
.badge-nologin { background: var(--neutral-tint); color: var(--neutral-ink); }
.empty-row { text-align: center; color: var(--muted); padding: 28px 14px; }

/* Email template editor */
.tpl-tokens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; }
.tpl-token code { background: var(--fill-strong); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.tpl-head { display: flex; align-items: center; gap: 10px; }
.tpl-form { padding: 0; border: 0; box-shadow: none; max-width: none; margin-top: 12px; gap: 10px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tpl-form textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; }

/* Email body view */
.email-body { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; max-width: 680px; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }

/* Attach-a-document picker on the compose form */
.email-attach { border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 8px 12px 10px; margin: 0; }
.email-attach legend { font-size: 13px; font-weight: 600; color: var(--ink); padding: 0 6px; }
/* Compose attachments: paperclip button + "Attach a document on file" popup + chips. */
.attach-bar { display: flex; align-items: center; gap: 12px; }
.attach-btn { display: inline-flex; align-items: center; gap: 7px; }
.attach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.attach-chips:empty { display: none; }
.attach-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  background: var(--fill); border: 1px solid var(--card-line); border-radius: var(--radius-sm);
  padding: 6px 8px 6px 10px; font-size: 13px; color: var(--ink); }
.attach-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.attach-chip button { border: 0; background: none; box-shadow: none; padding: 0 2px; margin: 0;
  cursor: pointer; color: var(--muted); font-size: 15px; line-height: 1; }
.attach-chip button:hover { color: var(--danger); background: none; }
dialog.attach-dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card-solid);
  color: var(--ink); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 64px rgba(6, 18, 12, .32); }
dialog.attach-dialog::backdrop { background: rgba(0, 0, 0, .42); }
.attach-dialog-head { padding: 16px 20px 13px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.attach-dialog-body { max-height: 55vh; overflow-y: auto; padding: 10px 20px 14px; }
.attach-dialog-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.attach-dialog-foot .count { font-size: 13px; color: var(--muted); margin-right: auto; }
.email-attach-group + .email-attach-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.email-attach-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; }
.email-attach-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
/* Out-specify `.form label`'s column layout: these picker rows are horizontal. */
.form label.email-attach-row { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.email-attach-row input { width: auto; margin: 0; flex: none; }
.email-attach-name { color: var(--ink); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-attach-detail { font-size: 12px; margin-left: auto; white-space: nowrap; padding-left: 10px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Filter bar (expenses, reports) */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.filter-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.filter-bar select { min-width: 150px; }

/* T776 summary document */
.t776-doc { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; max-width: 760px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.t776-title { font-size: 15px; margin-bottom: 16px; }
.t776-table { max-width: 680px; }
.t776-doc h2.sub:first-of-type { margin-top: 18px; }

/* Expense form — two columns on wide screens (fields left, invoice preview right) */
.exp-form { max-width: 1080px; }
.exp-form-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.exp-form-fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.exp-form-side { position: sticky; top: 16px; min-width: 0; }
@media (max-width: 860px) {
  .exp-form-grid { grid-template-columns: 1fr; gap: 16px; }
  .exp-form-side { position: static; }
}

/* Expense category identity + Apple-feel polish */
.exp-cat { display: inline-flex; align-items: center; font-weight: 500; }
.exp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; flex: none; vertical-align: middle; }
.exp-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.exp-date { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.exp-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-receipt { color: var(--brand); font-size: 13px; }
.exp-table tbody tr { transition: background .12s ease; }
.exp-table tbody tr:hover { background: var(--fill); }

.exp-minibar { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; min-width: 90px; max-width: 180px; }
.exp-minibar span { display: block; height: 100%; border-radius: 999px; transition: width .2s ease; }
.exp-cat-table td, .exp-cat-table th { vertical-align: middle; }

.exp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.exp-stat { background: var(--fill); border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 14px 16px; }
.exp-stat-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.exp-stat-val { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.exp-stat-accent { background: var(--brand-tint); border-color: var(--brand-tint-strong); }
.exp-stat-accent .exp-stat-val { color: var(--brand); }

/* Dashboard cards */
.dash-head { margin-bottom: 22px; }
.dash-head h1 { margin: 0; }
.dash-date { font-size: 13px; color: var(--muted); margin-top: 3px; }
.dash-section { margin-top: 32px; }
/* Section titles sit OUTSIDE their cards and carry the page's structure, so they
   are set well above the card titles inside them. */
.dash-h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.dash-card-sub { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.dash-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-card-title { font-weight: 700; font-size: 14px; }
.dash-card-link { font-size: 12px; color: var(--muted); white-space: nowrap; }
.dash-pct { font-size: 22px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.dash-progress { height: 16px; margin-bottom: 12px; background: var(--track); }
.dash-collection-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); }
.dash-collection-meta strong { color: var(--ink); font-weight: 700; }
.dash-footnote { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.dash-empty { text-align: center; padding: 32px 22px; }

.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.dash-list li:first-child { border-top: 0; }
.dash-list-main { display: flex; flex-direction: column; gap: 1px; text-decoration: none; min-width: 0; }
.dash-list-title { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-amt { font-size: 14px; font-weight: 700; white-space: nowrap; flex: none; }
a.dash-list-main:hover .dash-list-title { color: var(--brand); text-decoration: underline; }
.dash-list-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.dash-list-cols li { border-top: 1px solid var(--line); }
@media (max-width: 560px) { .dash-list-cols { grid-template-columns: 1fr; } }

/* Occupancy donut */
.donut-card { display: flex; flex-direction: column; align-items: center; }
.donut { width: 132px; height: 132px; margin: 4px 0 2px; }
.donut-num { font-size: 24px; font-weight: 800; fill: var(--ink); }
.donut-cap { font-size: 10px; fill: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.donut-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.donut-legend span { display: inline-flex; align-items: center; gap: 6px; }
.donut-legend strong { color: var(--ink); }

/* Lease onboarding nudge: set up the standard lease when none is on file yet. */
.ls-onboard { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--brand-tint); border: 1px solid var(--brand-tint-strong); border-radius: var(--radius);
  padding: 15px 18px; margin: 0 0 14px; }
.ls-onboard-msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ls-onboard-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.ls-onboard-sub { font-size: 13px; color: var(--muted); max-width: 68ch; }
.ls-onboard-actions { display: flex; gap: 10px; white-space: nowrap; flex: none; }

/* Property cards (dashboard) */
/* Wider than the old 290px: a timeshare card carries a countdown whose label
   ("175 days to week 4 · Jan 25") needs room to sit on one line. */
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; }
.prop-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--card-line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  transition: transform .18s ease, box-shadow .18s ease; }
.prop-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.prop-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
a.prop-name { font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.prop-name:hover { color: var(--brand); }
.prop-addr { font-size: 13px; color: var(--muted); line-height: 1.5; }
.prop-occ { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.prop-bar { height: 6px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.prop-bar span { display: block; height: 100%; background: var(--chart-green); border-radius: var(--radius-pill); }
.prop-occ-cap { font-size: 12px; color: var(--muted); }
.prop-stats { display: flex; gap: 10px 18px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
.prop-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prop-stat b.muted { color: var(--faint); font-weight: 600; }
.prop-stat b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prop-stat span { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.prop-stat-ok { color: var(--ok-ink); }
.prop-stat-warn { color: var(--warn-ink); }
.prop-actions { display: flex; gap: 16px; font-size: 13px; margin-top: 2px; }
.prop-actions a { text-decoration: none; }
.prop-actions a:hover { text-decoration: underline; }

/* Charges-outstanding breakdown (lease page) */
.charge-breakdown { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.cb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.cb-title { font-weight: 700; font-size: 16px; }
.cb-total { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.cb-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--track); }
.cb-seg { height: 100%; transition: width .2s ease; }
.cb-seg + .cb-seg { box-shadow: inset 1.5px 0 0 var(--card-solid); }
.cb-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.cb-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.cb-leg-item strong { color: var(--ink); font-weight: 600; }
.cb-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

/* Smart-lock access code */
.ls-lock-card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.ls-lock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ls-lock-title { font-weight: 700; font-size: 14px; }
.ls-lock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ls-lock-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; font-weight: 700;
  letter-spacing: 3px; background: var(--fill); border: 1px solid var(--card-line); border-radius: var(--radius-sm); padding: 6px 16px; color: var(--ink); }
.portal-lockcard { margin-top: 12px; background: var(--brand-tint); border: 1px solid var(--brand-tint-strong); border-radius: var(--radius-sm); padding: 12px 14px; }
.portal-lock-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.portal-lockcode { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 28px; font-weight: 800;
  letter-spacing: 4px; color: var(--brand); margin-top: 2px; }

/* Rent roll */
.rr-kpis { grid-template-columns: repeat(4, 1fr); }
.rr-amount { font-size: 22px; }
.rr-cur { font-size: 11px; font-weight: 700; letter-spacing: .04em; opacity: .6; margin-left: 4px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rr-table { min-width: 760px; }
.rr-table .num { white-space: nowrap; }
.rr-sub { font-size: 11px; margin-top: 3px; }
.rr-nudge { background: var(--warn-tint); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; margin: 0 0 16px; }
.rr-prop-row td { background: var(--fill-strong); border-top: 2px solid var(--line-strong); border-bottom: 0; padding: 8px 14px; }
.rr-prop-name { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rr-prop-num { font-size: 13px; font-weight: 600; }
.rr-unit-cell { padding-left: 22px !important; }
.rr-unit-link { text-decoration: none; color: var(--ink); font-weight: 500; }
.rr-unit-link:hover { color: var(--brand); text-decoration: underline; }

/* ============================================================
   Responsive: iPad + iPhone
   ============================================================ */

/* iPad (portrait) and phones: data tables scroll sideways instead of squashing. */
@media (max-width: 1024px) {
  table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data th, table.data td { white-space: nowrap; }
  .table-scroll table.data { display: table; overflow: visible; } /* wrapper already scrolls */
  .rr-kpis { grid-template-columns: repeat(2, 1fr); }

  /* Lease charges/payments tables (.ls-txn): these are wide and scroll sideways here,
     and the trailing row-action column (the "⋯" menu, in its own .col-actions cell) was
     the first thing chopped off the right edge. Pin that last column so it stays put while
     the data columns scroll under it. Scoped to .ls-txn so other tables are untouched. */
  table.data.ls-txn td.col-actions,
  table.data.ls-txn th.col-actions {
    position: sticky; right: 0; z-index: 2;
    background: var(--card-solid);
    box-shadow: -9px 0 12px -10px rgba(0, 0, 0, .30);
  }
  /* Keep the table scrolling (so the pin holds) even while a menu is open. Drop the
     table's backdrop-filter here too: a filtered ancestor would become the containing
     block for the fixed menu below and trap it inside the table. The pinned action
     cells stay opaque (their own solid background), so the table still reads fine. */
  table.data.ls-txn:has(.ls-menu[open]) {
    overflow-x: auto; overflow-y: visible; position: static; z-index: auto;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Its opened row menu becomes a small sheet anchored to the viewport corner, so it is
     always fully visible no matter how far the table is scrolled. */
  table.data.ls-txn .ls-menu[open] .ls-menu-pop {
    position: fixed; inset: auto 12px 12px auto; min-width: 220px;
  }
}

/* Phones: collapse the sidebar behind the menu button, tighten the chrome. */
@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  .topbar-brand { min-width: 0; }
  .topbar-logo { height: 24px; width: 104px; }
  .topbar-nav { gap: 8px; font-size: 13px; }
  .topbar-nav .muted, .topbar-nav .sep { display: none; } /* drop org name to save room */

  .nav-toggle { display: inline-flex; }
  .shell { grid-template-columns: 1fr; min-height: calc(100vh - 53px); min-height: calc(100svh - 53px); }
  .sidebar { display: none; padding: 10px; border-radius: 0 0 16px 16px;
    position: static; min-height: 0; height: auto; overflow: visible; } /* toggle dropdown, not a pinned panel */
  .side-brand { margin: 6px 6px 12px; }
  .nav-cb:checked ~ .shell .sidebar { display: block; }
  .nav-cb:focus-visible ~ .topbar .nav-toggle { box-shadow: var(--focus-ring); }
  .sidebar a { padding: 12px; font-size: 15px; margin-bottom: 0; }
  .sidebar-sep { display: none; }
  .sidebar-signout { border-top: 0; padding-top: 0; margin-top: 4px; }
  .sidebar-signout button { padding: 12px; font-size: 15px; }

  .content, .content-wide { padding: 16px; max-width: none; }
  .page-head { flex-wrap: wrap; gap: 10px; }
  .form { padding: 18px; }
  .card { padding: 24px; }
  .actions { gap: var(--space-3); }
  .actions a, .actions button.link { padding: 8px 10px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs a { white-space: nowrap; }
}

/* Reduced transparency: drop blur. Neutral surfaces become opaque; status-tinted
   surfaces keep their semantic colour (just lose the blur) so success/error reads. */
@media (prefers-reduced-transparency: reduce) {
  .card, .topbar, .sidebar, table.data, .form, .kpi, .lease-card, .tenant-card, .ls-info-card,
  .ls-pay-card, .ls-addcharge-card, .dash-card, .prop-card, .charge-breakdown, .ls-lock-card, .t776-doc,
  .email-body, .filter-bar, .ls-menu-pop, input, select, textarea {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-solid);
  }
  .flash, .alert, .ls-arrears-alert { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}