/* Design system: tokens first, then base, layout, components, page-specific bits. */

/* Inter, served from here (no extra connections to Google on slow networks). One variable file: weights 400–800. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --text: #101828;
  --text-2: #475467;
  --muted: #667085;
  --border: #e4e7ec;
  --brand: #0e7a4b;
  --brand-hover: #0b6640;
  --brand-ink: #ffffff;
  --brand-soft: #e6f4ed;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --warn: #b54708;
  --warn-soft: #fef0e1;
  --info: #175cd3;
  --info-soft: #e8f0fe;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.06);
  --shadow-lg: 0 12px 32px -8px rgb(16 24 40 / 0.18);
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Dark theme. Applied when the user picks Dark, or picks System (the default) on a device set to
   dark. The choice lives in localStorage "theme" (auto | light | dark), the same key Django's admin
   uses, and is mirrored to <html data-theme> before the page paints (see templates/base.html). */
:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #151b23;
  --surface-2: #1b232e;
  --text: #e6e9ee;
  --text-2: #b4bcc8;
  --muted: #8b95a5;
  --border: #273040;
  --brand: #34c48a;
  --brand-hover: #4fd69c;
  --brand-ink: #04261a;
  --brand-soft: rgb(52 196 138 / 0.13);
  --danger: #f97066;
  --danger-soft: rgb(249 112 102 / 0.13);
  --warn: #fdb022;
  --warn-soft: rgb(253 176 34 / 0.13);
  --info: #84adff;
  --info-soft: rgb(132 173 255 / 0.13);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0d1117;
    --surface: #151b23;
    --surface-2: #1b232e;
    --text: #e6e9ee;
    --text-2: #b4bcc8;
    --muted: #8b95a5;
    --border: #273040;
    --brand: #34c48a;
    --brand-hover: #4fd69c;
    --brand-ink: #04261a;
    --brand-soft: rgb(52 196 138 / 0.13);
    --danger: #f97066;
    --danger-soft: rgb(249 112 102 / 0.13);
    --warn: #fdb022;
    --warn-soft: rgb(253 176 34 / 0.13);
    --info: #84adff;
    --info-soft: rgb(132 173 255 / 0.13);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

/* Dark mode: logo-on-dark.png, the same logo (same shapes, size and framing, transparent background)
   recoloured to read on dark pages: navy and grey become light, greens stay green. */
:root[data-theme="dark"] .logo { background-image: url("../img/logo-on-dark.c995800dea67.png"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .logo { background-image: url("../img/logo-on-dark.c995800dea67.png"); }
}

/* ---- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 24px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }
code { font-size: 0.9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.text-danger { color: var(--danger); }
.text-success { color: var(--brand); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: 500 14px/1.2 var(--font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }
.btn svg { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- Forms --------------------------------------------------------------- */

input, select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: 14px/1.4 var(--font);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
label, .label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field + .field { margin-top: 14px; }
.field .helptext, .helptext { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: var(--danger); font-size: 13px; }
.form-inline { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.form-inline .field { margin: 0; flex: 1 1 160px; }

/* ---- Cards, KPIs, alerts, badges ------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-header .muted { font-size: 13px; }
.card-body { padding: 18px; }
.card-body.flush { padding: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.kpi { padding: 16px 18px; }
.kpi .label { margin: 0 0 6px; color: var(--muted); font-weight: 500; }
.kpi .value { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 14px; font-weight: 500; color: var(--muted); margin-right: 3px; }
.kpi .sub { font-size: 13px; color: var(--muted); margin-top: 4px; }

.progress { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

.alert { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14px; border: 1px solid transparent; flex-wrap: wrap; }
.alert-success { background: var(--brand-soft); color: var(--text); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.alert-error, .alert-danger { background: var(--danger-soft); color: var(--text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-warning { background: var(--warn-soft); color: var(--text); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.alert-info { background: var(--info-soft); color: var(--text); }
.messages { display: grid; gap: 8px; margin-bottom: 20px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px;
  font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge-success { background: var(--brand-soft); color: var(--brand); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-info { background: var(--info-soft); color: var(--info); }

.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-weight: 600; font-size: 13px;
}
.avatar-lg { width: 52px; height: 52px; font-size: 18px; }
.who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.who .name { font-weight: 500; color: var(--text); }
.who .meta { font-size: 12px; color: var(--muted); }

/* ---- Tables ---------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; padding: 10px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.table th.num { text-align: right; }
.table td { padding: 12px 18px; min-width: 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.table .num { white-space: nowrap; }
.empty { padding: 32px 18px; text-align: center; color: var(--muted); font-size: 14px; }
.empty strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }

/* ---- App shell (signed-in landlord pages) -------------------------------------- */

.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; color: var(--text); padding: 4px 8px 18px; }
.brand:hover { text-decoration: none; }
/* The logo is logo-transparent.png: logo.jpeg (the Rentipay emblem, wordmark and tagline) with its white
   background made transparent and trimmed to the artwork, so it can be shown large enough to read. The two
   decorative bars under the artwork in logo.jpeg are left out. Nothing is stretched.
   with its grey background made transparent, so it blends into any light page. The box takes the
   image's own proportions. Dark mode uses a recoloured copy (see the dark-mode rules above). */
.logo {
  display: inline-block; flex: none; height: 40px; aspect-ratio: 977 / 294;
  background: url("../img/logo-transparent.2ac56bc0e580.png") center / contain no-repeat;
}
.logo-lg { height: 76px; max-width: 100%; }
.auth-logo { text-align: center; margin: -8px 0 18px; }
.footer-logo .logo { height: 52px; }
.topbar .logo, .site-nav .logo { height: 46px; }
.sidebar .logo { height: 60px; }
@media (max-width: 900px) { .sidebar .logo { height: 44px; } }
.nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 10px 6px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 14px; font-weight: 500;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--brand-soft); color: var(--brand); }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav .count { margin-left: auto; font-size: 11px; background: var(--danger); color: #fff; border-radius: 99px; padding: 0 7px; }
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.sidebar-footer form { margin-left: auto; }

.main { min-width: 0; padding: 28px 32px 48px; }
.container { max-width: 1120px; margin: 0 auto; }
.page-header { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-header .sub { color: var(--muted); margin-top: 4px; font-size: 14px; }
.page-header .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .main { padding: 20px 16px 40px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Lease statement ------------------------------------------------------------ */

.profile { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.profile dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.profile dt { color: var(--muted); }
.profile dd { margin: 0; }
.copy { display: flex; gap: 6px; align-items: center; }
.copy input { font-size: 13px; padding: 6px 10px; background: var(--surface-2); }
.balance-hero { text-align: left; }
.balance-hero .value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.balance-hero.owing .value { color: var(--danger); }
.balance-hero.clear .value { color: var(--brand); }

/* ---- Auth & tenant portal (narrow, centered) ------------------------------------- */

.narrow { max-width: 560px; margin: 0 auto; padding: 24px 16px 48px; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.auth-card { max-width: 400px; margin: 8vh auto 0; padding: 32px; }
.auth-card h1 { font-size: 22px; margin-bottom: 4px; }
.auth-card form { margin-top: 24px; }
.auth-card .btn { margin-top: 20px; }
.pay-box { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; }
.pay-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 8px 0 0; }
.pay-box dt { color: var(--muted); }
.pay-box dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Marketing home page ------------------------------------------------------- */

.site-nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-nav .inner { max-width: 1160px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 24px; }
.site-nav .brand { padding: 0; }
.site-nav .links { display: flex; gap: 22px; margin-right: auto; }
.site-nav .links a { color: var(--text-2); font-size: 14px; font-weight: 500; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-soft); padding: 4px 12px; border-radius: 99px; margin-bottom: 18px; }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.section-head p { color: var(--text-2); font-size: 17px; margin-top: 12px; }

.hero { padding-top: 72px; padding-bottom: 80px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 750; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { font-size: 18px; color: var(--text-2); margin-top: 20px; max-width: 520px; }
.hero .ctas { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .proof { display: flex; gap: 20px; margin-top: 28px; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.hero .proof span::before { content: "✓"; color: var(--brand); font-weight: 700; margin-right: 6px; }

/* The product mock in the hero: a dashboard card with a phone overlapping it. */
.mock { position: relative; padding: 0 0 40px 0; }
.mock-window { margin-right: 80px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.mock-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.mock-body { padding: 18px; display: grid; gap: 12px; }
.mock-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mock-kpis .card { padding: 12px; box-shadow: none; }
.mock-kpis .label { font-size: 11px; margin: 0 0 2px; }
.mock-kpis b { font-size: 17px; font-variant-numeric: tabular-nums; }
.mock-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.mock-row .avatar { width: 28px; height: 28px; font-size: 11px; }
.mock-row .amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.phone {
  position: absolute; right: -12px; bottom: 0; width: 210px; border-radius: 26px; padding: 10px;
  background: #0b0f14; box-shadow: var(--shadow-lg); border: 1px solid #2a313c;
}
.phone-screen { background: #f3f4f6; color: #101828; border-radius: 18px; padding: 16px 14px 18px; }
.phone-screen .small { color: #475467; }
.stk { background: #fff; border-radius: 12px; padding: 12px; margin-top: 10px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); font-size: 12px; }
.stk b { display: block; font-size: 13px; margin-bottom: 4px; }
.stk .pin { margin-top: 8px; border: 1px solid #d0d5dd; border-radius: 6px; padding: 6px; letter-spacing: 4px; color: #98a2b3; }
.stk .ok { margin-top: 8px; background: #0e7a4b; color: #fff; text-align: center; border-radius: 6px; padding: 6px; font-weight: 600; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { padding: 24px; }
.feature .icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 16px; }
.feature .icon svg { width: 20px; height: 20px; }
.feature p { color: var(--text-2); font-size: 14px; margin-top: 6px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: step; }
.step { position: relative; padding-top: 52px; }
.step::before {
  counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0;
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink); font-weight: 700;
}
.step p { color: var(--text-2); font-size: 15px; margin-top: 6px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.checks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 10px; color: var(--text-2); }
.checks li::before { content: "✓"; color: var(--brand); font-weight: 700; }
.sms { max-width: 360px; margin: 0 auto; display: grid; gap: 10px; }
.bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: 12px 14px; font-size: 14px; box-shadow: var(--shadow); }
.bubble .from { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }

.cta-band { background: var(--brand); color: var(--brand-ink); border-radius: 20px; padding: 48px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.cta-band h2 { font-size: 28px; font-weight: 700; }
.cta-band p { opacity: .85; margin-top: 6px; }
.cta-band .btn { margin-left: auto; background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }
.site-footer { padding: 32px 0 48px; color: var(--muted); font-size: 14px; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer-brand { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.footer-brand .logo-lockup { align-items: flex-start; }
.footer-brand .logo { background-position: left center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-links a { padding: 6px 0; }
.footer-base { margin-top: 20px; font-size: 13px; }
.footer-base::before { content: ""; display: block; border-top: 1px solid var(--border); margin-bottom: 16px; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.social-links a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  transition: background .15s, color .15s, transform .15s;
}
.social-links a:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-1px); }
.social-links a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.social-links svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .social-links a { transition: none; } .social-links a:hover { transform: none; } }
@media (max-width: 640px) {
  .site-footer { padding: 32px 0 36px; text-align: center; }
  .footer-inner { flex-direction: column; align-items: center; gap: 22px; }
  .footer-brand { justify-items: center; }
  .footer-brand .logo-lockup { align-items: center; }
  .footer-brand .logo { background-position: center; }
  .footer-logo .logo { height: 44px; }
  .social-links { justify-content: center; margin-top: 10px; }
  .footer-links { flex-direction: column; align-items: center; gap: 2px; }
  .footer-links a { padding: 8px 12px; }
}

@media (max-width: 900px) {
  .hero, .split { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding-top: 40px; }
  .features, .steps { grid-template-columns: 1fr; }
  .site-nav .links { display: none; }
  .site-nav .inner { justify-content: space-between; }
  .section { padding: 56px 0; }
  .section-head h2 { font-size: 26px; }
  .cta-band { padding: 32px 24px; }
  .cta-band .btn { margin-left: 0; }
  .mock-window { margin-right: 48px; }
  .phone { right: 0; width: 170px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Forms pages, tabs, toolbars --------------------------------------------- */

/* Single-form pages: heading and form centred together in one column. */
.form-page { max-width: 640px; margin: 0 auto; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.field-check { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.field-check input { width: 18px; height: 18px; accent-color: var(--brand); }
.field-check label { margin: 0; }
.field-check .helptext, .field-check .errorlist { grid-column: 2; margin: 0; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); filter: brightness(.92); }
.btn.text-danger { color: var(--danger); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.toolbar form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar input, .toolbar select { width: auto; min-width: 0; padding: 7px 10px; font-size: 13px; }
.toolbar input[type=search] { width: 220px; max-width: 100%; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs a { padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.tabs a:hover { background: var(--surface-2); text-decoration: none; }
.tabs a.active { background: var(--brand-soft); color: var(--brand); }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.prop-card { display: block; padding: 18px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.prop-card:hover { text-decoration: none; border-color: var(--brand); box-shadow: var(--shadow-lg); }
.prop-card .meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.prop-card .stats { display: flex; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--text-2); }
.prop-card .stats b { display: block; font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }

.steps-list { list-style: none; margin: 0; padding: 0; }
.steps-list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-bottom: 1px solid var(--border); }
.steps-list li:last-child { border-bottom: 0; }
.steps-list .dot { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--surface-2); color: var(--muted); }
.steps-list li.done .dot { background: var(--brand); color: var(--brand-ink); }
.steps-list li.current { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.steps-list li.done h3 { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border); }
.steps-list .body { flex: 1; min-width: 0; }
.steps-list .body p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.table select { width: auto; min-width: 180px; padding: 6px 10px; font-size: 13px; }
.prop-card .stats b.text-danger { color: var(--danger); }

/* ---- Reports ---------------------------------------------------------------- */

.table tfoot td { border-top: 2px solid var(--border); background: var(--surface-2); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sw-billed, .bar.billed { background: color-mix(in srgb, var(--brand) 30%, var(--surface-2)); }
.sw-collected, .bar.collected { background: var(--brand); }
.trend { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 200px; align-items: end; }
.trend-col { display: flex; flex-direction: column; height: 100%; }
.trend .bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--border); }
.trend .bar { width: 38%; max-width: 18px; min-height: 2px; border-radius: 4px 4px 0 0; }
.trend-label { text-align: center; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---- Printable documents ------------------------------------------------------- */

.print-page { background: var(--surface-2); }
.print-toolbar { display: flex; align-items: center; gap: 10px; max-width: 820px; margin: 0 auto; padding: 16px; }
.doc { max-width: 820px; margin: 0 auto 40px; background: #fff; color: #101828; padding: 40px 44px; border-radius: 12px; box-shadow: var(--shadow); }
.doc .muted { color: #667085; }
.doc .table th { background: #f2f4f7; color: #667085; }
.doc .table td, .doc .table th { border-color: #e4e7ec; padding: 9px 10px; }
/* Printed documents are white paper: always the light logo, and print it (backgrounds often aren't). */
html:root .doc .logo { background-image: url("../img/logo-transparent.2ac56bc0e580.png"); aspect-ratio: 977 / 294; height: 48px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 2px solid #101828; margin-bottom: 24px; }
.doc-title { text-align: right; }
.doc-title h1 { font-size: 28px; letter-spacing: .02em; text-transform: uppercase; }
.doc-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; margin: 0 0 24px; }
.doc-meta dt { font-size: 12px; color: #667085; text-transform: uppercase; letter-spacing: .04em; }
.doc-meta dd { margin: 2px 0 0; font-weight: 500; }
.doc-total { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 14px 16px; background: #f2f4f7; border-radius: 8px; font-size: 15px; }
.doc-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.receipt-amount { text-align: center; padding: 20px; margin-bottom: 24px; border: 1px dashed #d0d5dd; border-radius: 10px; }
.receipt-amount .big { font-size: 34px; font-weight: 700; color: #0e7a4b; font-variant-numeric: tabular-nums; }
.doc-foot { margin-top: 32px; padding-top: 14px; border-top: 1px solid #e4e7ec; }

@media print {
  .no-print { display: none !important; }
  body, .print-page { background: #fff; }
  .doc { box-shadow: none; padding: 0; margin: 0; max-width: none; border-radius: 0; }
  @page { margin: 16mm; }
}
@media (max-width: 600px) { .doc { padding: 24px 18px; border-radius: 0; } }

/* ---- Row actions, voided rows, timeline ----------------------------------------------- */

.row-actions { display: flex; gap: 10px; margin-top: 2px; font-size: 12px; }
.row-actions a { color: var(--muted); }
.row-actions a:hover { color: var(--brand); }
.voided-row td { color: var(--muted); }
.timeline { list-style: none; margin: 0; padding: 4px 18px 14px; }
.timeline li { position: relative; padding: 10px 0 10px 18px; border-left: 2px solid var(--border); }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }


/* ---- Theme switch ------------------------------------------------------------------------ */

.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); }
.theme-switch button {
  display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 99px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.theme-switch svg { width: 15px; height: 15px; }
.sidebar-footer { flex-wrap: wrap; }
.sidebar-footer .theme-switch { order: 3; width: 100%; justify-content: space-between; }
.sidebar-footer .theme-switch button { flex: 1; }


/* ---- Message threads ------------------------------------------------------------------------ */

.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bubble-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.bubble-msg.mine { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--brand-soft); }
.bubble-msg .who-line { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.bubble-msg .body { font-size: 14px; overflow-wrap: anywhere; }

/* ---- Announcements ------------------------------------------------------------------------ */

.notice-card { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 3px solid var(--border); }
.notice-card.pinned { border-left-color: var(--brand); background: var(--brand-soft); }
.notice-card p { margin: 6px 0 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.checkbox-list > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; }
.checkbox-list label { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 400; color: var(--text); }
.checkbox-list input { width: 16px; height: 16px; accent-color: var(--brand); }

/* ---- Phones ----------------------------------------------------------------------------- */

/* Desktop: the drawer is just the sidebar's contents. Phones: a top bar with a hamburger button that
   slides the menu in from the left over a dimmed page (app.js handles opening and closing). */
.drawer { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 4px; }
.drawer .nav { overflow-y: auto; }
.drawer .nav-bottom { flex: none; overflow: visible; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.drawer .nav-bottom + .sidebar-footer { margin-top: 8px; }
.nav-toggle, .drawer-head, .nav-backdrop { display: none; }
.logout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .sidebar {
    position: sticky; top: 0; z-index: 40; height: 64px; flex-direction: row; align-items: center; gap: 8px;
    padding: 0 12px 0 10px; border-right: 0; border-bottom: 1px solid var(--border);
    background: var(--surface); box-shadow: 0 1px 3px rgb(16 24 40 / .04);
  }
  .sidebar > .brand { padding: 0; margin-right: auto; }
  .sidebar > .brand .logo { height: 44px; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow);
    transition: background .15s ease, border-color .15s ease;
  }
  .nav-toggle:hover, .nav-toggle:focus-visible { background: var(--surface-2); border-color: var(--brand); }
  .nav-toggle:active { transform: scale(.96); }
  .nav-toggle svg, .nav-close svg { width: 24px; height: 24px; }
  .nav-toggle-dot {
    position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
  }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 50; background: rgb(15 23 42 / .45);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .drawer {
    position: fixed; top: 0; bottom: 0; right: 0; z-index: 60; width: min(86vw, 320px);
    padding: 8px 14px 16px; background: var(--surface); box-shadow: -10px 0 40px rgb(0 0 0 / .25);
    border-radius: 18px 0 0 18px;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
  }
  .sidebar.nav-open .drawer { transform: none; visibility: visible; transition: transform .25s ease; }
  .sidebar.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .drawer .nav { overflow: visible; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
  .drawer-head { position: sticky; top: -8px; z-index: 1; margin: -8px -14px 0; padding: 6px 8px 6px 18px; background: var(--surface); border-bottom: 1px solid var(--border); border-top-left-radius: 18px; }
  .drawer-title { font-weight: 650; font-size: 16px; }
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); cursor: pointer;
  }
  .nav-close:hover { background: var(--surface-2); }
  .nav a { padding: 11px 10px; font-size: 15px; }
  .sidebar-footer { margin-top: 12px; }
  .logout-label { position: static; width: auto; height: auto; clip: auto; }
  body.nav-locked { overflow: hidden; }

  /* Page headers: actions get a row of their own, with buttons sharing it evenly. */
  .page-header { align-items: flex-start; }
  .page-header .actions { margin-left: 0; width: 100%; }
  .page-header .actions > .btn, .page-header .actions > form, .page-header .actions > a { flex: 1 1 auto; }
  .page-header .actions .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .nav-backdrop { transition: none !important; }
}

/* Tables become one card per row: the first cell is the title, the rest are "label: value" lines,
   so the important right-hand columns (balance, amount, actions) are never off-screen.
   app.js copies each column's heading into data-label. */
@media (max-width: 640px) {
  table.table.stack thead { display: none; }
  table.table.stack, table.table.stack tbody, table.table.stack tfoot,
  table.table.stack tr, table.table.stack td { display: block; width: 100%; }
  table.table.stack tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  table.table.stack tr:last-child { border-bottom: 0; }
  table.table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 3px 0; border: 0; text-align: right; white-space: normal; }
  table.table.stack td::before { content: attr(data-label); flex: none; color: var(--muted); font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em; text-align: left; }
  table.table.stack td > .cell-value { min-width: 0; overflow-wrap: anywhere; }
  table.table.stack td.blank { display: none; }  /* e.g. "Charged" on a payment line */
  table.table.stack td:first-child { display: block; text-align: left; padding-bottom: 6px; }
  table.table.stack td:first-child::before { content: none; }
  table.table.stack td[data-label=""]::before { content: none; }
  table.table.stack td[data-label=""] { justify-content: flex-end; }
  table.table.stack tbody tr:hover td { background: none; }
  table.table.stack tfoot tr { background: var(--surface-2); }

  /* Home page header: everything on one line. */
  .site-nav .inner { gap: 8px; padding: 8px 12px; }
  .site-nav .row { flex-wrap: nowrap; gap: 4px !important; }
  .site-nav .btn { padding: 7px 10px; font-size: 13px; }
  .site-nav .logo { height: 34px; }
}

/* ---- Legal pages --------------------------------------------------------------------------- */

.legal { max-width: 780px; margin: 0 auto; padding: 8px 16px 48px; }
.prose { padding: 32px 36px; line-height: 1.65; }
.prose h1 { font-size: 28px; margin-bottom: 4px; }
.prose h2 { font-size: 18px; margin: 28px 0 8px; }
.prose p, .prose ul { margin: 0 0 12px; color: var(--text-2); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--text); }
.legal-links { text-align: center; margin-top: 18px; }
@media (max-width: 640px) { .prose { padding: 22px 18px; } }