/* ----------------------------------------------------------------------
   Inveroi Property Management — shared styles
   Brand: deep navy #0f1f3d, gold accent #c9a14a, warm cream background
   Typography: Playfair Display (serif headings) + Inter (sans body)
---------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700;800&display=swap");

:root {
  --brand: #0f1f3d;
  --brand-2: #1a3461;
  --accent: #c9a14a;
  --accent-2: #b88a36;
  --bg: #f6f3ec;
  --card: #ffffff;
  --text: #1a1f2e;
  --muted: #6c7280;
  --line: #e6e2d6;
  --danger: #b3261e;
  --success: #1f7a4e;
  --warn: #b07a13;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(15,31,61,0.04), 0 8px 24px rgba(15,31,61,0.06);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
}

/* Eyebrow text — small uppercase gold tag above section headings */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.eyebrow::before { content: "— "; }

/* Editorial section title (used inside cards) */
.section-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--brand);
  margin: 0 0 16px;
  line-height: 1.15;
}

* { box-sizing: border-box; }
html, body { margin: 0; max-width: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}
/* Defensive: no media can blow out its container width */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
input, textarea, select { max-width: 100%; }
/* Break long unbreakable strings (URLs, emails, IBANs) so they don't widen the page */
p, h1, h2, h3, h4, td, .small, .muted, .lead, .doc-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}
a { color: var(--brand); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--danger); margin: 8px 0 0; }
.success-msg { color: var(--success); margin: 8px 0 0; }

/* ---------- Login ---------- */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(201,161,74,0.22), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(26,52,97,0.55), transparent 60%),
    linear-gradient(135deg, #0a172e 0%, #14264a 100%);
  position: relative;
  overflow: hidden;
}
.login-body::before {
  /* Decorative gold corner rule */
  content: "";
  position: absolute; top: 28px; left: 28px;
  width: 60px; height: 60px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  opacity: 0.6;
}
.login-body::after {
  content: "";
  position: absolute; bottom: 28px; right: 28px;
  width: 60px; height: 60px;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  opacity: 0.6;
}
.login-card {
  background: var(--card);
  width: min(440px, 92vw);
  padding: 40px 36px 32px;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  position: relative;
  border-top: 3px solid var(--accent);
}
.brand { text-align: center; margin-bottom: 22px; }
.brand h1 { margin: 6px 0 0; color: var(--brand); letter-spacing: 0.5px; font-family: var(--serif); }
.brand .tagline {
  display: block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: 4px;
  text-transform: uppercase; color: var(--accent); margin-top: 8px;
}
.brand .since {
  display: block;
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--muted); margin-top: 2px;
}
.brand-logo {
  width: 64px; height: 64px; margin: 0 auto;
  background: var(--brand); color: var(--accent);
  display: grid; place-items: center;
  border-radius: 14px; font-weight: 800; font-size: 32px;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 1px;
  border: 2px solid var(--accent);
}
.brand-full {
  display: block; width: 200px; max-width: 80%; height: auto; margin: 0 auto 8px;
}
.logo-mark {
  width: 38px; height: 38px; border-radius: 8px; display: block;
}
.login-card form { display: grid; gap: 14px; margin-top: 14px; }
.login-card label {
  display: grid; gap: 6px;
  font-size: 10px; color: var(--muted);
  font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
}
.login-card input,
.login-card button {
  padding: 13px 14px; border-radius: 2px; border: 1.5px solid #c8c2ad;
  font-size: 15px; font-family: var(--sans);
}
.login-card input {
  background: #fbfaf4;
  color: var(--brand);
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
}
.login-card input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(201,161,74,0.18); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px !important; }
.pw-wrap .pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; padding: 4px 8px; cursor: pointer;
  font-size: 16px; letter-spacing: 0; text-transform: none;
  color: var(--muted); margin: 0;
}
.pw-wrap .pw-toggle:hover { color: var(--accent); background: transparent; }

/* WhatsApp button (login page — full width green pill) */
.wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; padding: 13px 14px; border-radius: 2px;
  background: #25D366; color: #fff; font-weight: 600;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.wa-btn:hover { background: #1ebe57; color: #fff; }
.wa-btn .wa-ico { width: 18px; height: 18px; flex-shrink: 0; }

/* WhatsApp icon button (owner/admin topbar — small circular) */
.wa-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #25D366; color: #fff; margin: 0 4px;
  text-decoration: none; transition: background 0.15s;
}
.wa-link:hover { background: #1ebe57; color: #fff; }
.wa-link svg { width: 18px; height: 18px; }

/* Email icon (topbar) */
.help-link {
  background: transparent; border: 1px solid rgba(201,161,74,0.55);
  color: var(--accent); padding: 6px 8px; border-radius: 6px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  min-height: 0;
}
.help-link:hover { background: rgba(201,161,74,0.18); color: var(--accent); }
.help-link svg { width: 18px; height: 18px; display: block; }

.mail-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--brand); margin: 0 4px;
  text-decoration: none; transition: background 0.15s;
}
.mail-link:hover { background: #b88a36; color: var(--brand); }
.mail-link svg { width: 18px; height: 18px; }

/* Telegram icon (topbar) */
.tg-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #0088cc; color: #fff; margin: 0 4px;
  text-decoration: none; transition: background 0.15s;
}
.tg-link:hover { background: #006ba6; color: #fff; }
.tg-link svg { width: 18px; height: 18px; }

/* Login page contact buttons row */
.contact-row {
  display: flex; gap: 8px; justify-content: center; margin-top: 14px;
}
.contact-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  color: #fff; text-decoration: none;
  transition: transform 0.12s, opacity 0.12s;
}
.contact-btn:hover { transform: translateY(-2px); opacity: 0.92; }
.contact-btn svg { width: 24px; height: 24px; }
.contact-btn.mail { background: var(--accent); color: var(--brand); }
.contact-btn.tg { background: #0088cc; }
.contact-btn.wa { background: #25D366; }
.login-card button {
  background: var(--brand); color: #fff; border: none; cursor: pointer;
  font-weight: 600; margin-top: 8px;
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  padding: 15px;
}
.login-card button:hover { background: var(--accent); color: var(--brand); }

/* ---------- App shell ---------- */
.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
header.topbar {
  background: var(--brand);
  color: #fff;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 2px solid var(--accent);
}
header.topbar .logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(201,161,74,0.18); color: var(--accent);
  display: grid; place-items: center; border: 1px solid var(--accent);
  font-weight: 800; font-family: Georgia, "Times New Roman", serif;
}
header.topbar h1 {
  font-family: var(--serif);
  font-size: 20px; margin: 0; font-weight: 700; letter-spacing: 2px;
}
header.topbar h1 .sub {
  color: var(--accent); font-weight: 400; margin-left: 8px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
}
header.topbar .spacer { flex: 1; }
header.topbar .user { font-size: 13px; opacity: 0.9; }
header.topbar button.link {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
header.topbar button.link:hover { background: rgba(201,161,74,0.18); border-color: var(--accent); }

main.content { padding: 22px; max-width: 1200px; margin: 0 auto; width: 100%; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex; gap: 0; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  /* Horizontal scroll when there are too many tabs to fit (admin now has 14+) */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  white-space: nowrap;
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tabs button {
  background: transparent; border: none; padding: 12px 16px; cursor: pointer;
  font-size: 11px; color: var(--muted); border-bottom: 2px solid transparent;
  font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
  flex: 0 0 auto; white-space: nowrap;
}
.tabs button:hover { color: var(--brand); }
.tabs button.active { color: var(--brand); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* `hidden` attribute always wins on tab buttons/panels (used to hide tabs that don't apply
   to the current owner, e.g. common-expenses-only owners don't see Dashboard/Income/etc.) */
.tabs button[hidden], .tab-panel[hidden] { display: none !important; }

/* ---------- Cards & grids ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px;
  margin-bottom: 22px;
  border-top: 2px solid var(--accent);
}
.card h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: 24px; font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.3px;
  padding-bottom: 14px;
  position: relative;
  line-height: 1.15;
}
.card h2::after {
  content: "";
  position: absolute; bottom: 0; left: 0;
  width: 44px; height: 2px; background: var(--accent);
}
.card .lead { color: var(--muted); margin-top: -8px; margin-bottom: 18px; font-size: 14px; }
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Hero strip — used at top of owner overview for editorial welcome */
.hero-strip {
  background: linear-gradient(135deg, #0f1f3d 0%, #1a3461 60%, #224078 100%);
  color: #fff; padding: 36px 36px 32px;
  border-radius: 4px; margin-bottom: 24px;
  position: relative; overflow: hidden;
  border-top: 2px solid var(--accent);
}
.hero-strip::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(201,161,74,0.25) 0%, transparent 60%);
  pointer-events: none;
}
.hero-strip .eyebrow { color: var(--accent); }
.hero-strip h1 {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  margin: 4px 0 8px; line-height: 1.1; letter-spacing: 0.2px;
}
.hero-strip p { margin: 0; opacity: 0.85; max-width: 580px; font-size: 14px; }

/* Stat tile — big serif numbers, taken from inveroi.com "Real numbers" section */
.stat-tile {
  background: var(--card); padding: 22px 22px 20px;
  border-radius: 4px; border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  text-align: left;
}
.stat-tile .num {
  font-family: var(--serif); font-weight: 700;
  font-size: 38px; color: var(--brand); line-height: 1; letter-spacing: -0.5px;
}
.stat-tile .label {
  display: block; margin-top: 8px;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
  font-weight: 600;
}
.stat-tile .delta { font-size: 12px; color: var(--accent-2); margin-top: 6px; }

.property-tile {
  background: var(--card);
  padding: 22px 24px 20px;
  border-radius: 4px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
  position: relative;
}
.property-tile.clickable { cursor: pointer; }
.property-tile.clickable:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(15,31,61,0.10);
  border-top-color: var(--brand);
}
.property-tile.clickable::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform 0.2s ease;
}
.property-tile.clickable:hover::after { transform: scaleX(1); }
.property-tile h3 {
  margin: 4px 0 6px;
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  color: var(--brand); line-height: 1.2;
}
.property-tile p { margin: 2px 0; color: var(--muted); font-size: 13px; }
.property-tile .tile-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
  color: var(--accent); display: block;
}
.property-tile .tile-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.property-tile .tile-meta .view {
  font-weight: 600; letter-spacing: 1.5px; color: var(--accent);
  text-transform: uppercase; font-size: 11px;
}

/* ---------- Tables ---------- */
table.data {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
/* Wide admin tables (Owners, Invoices, etc.) scroll horizontally inside the card
   so the right-side action buttons stay reachable instead of getting cut off.
   The card itself stays put; only the table scrolls. */
.card { overflow-x: auto; }
.card table.data { min-width: 100%; }

table.data th, table.data td {
  text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line);
}
table.data th {
  color: var(--muted); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 2px;
  padding-bottom: 10px; border-bottom: 1.5px solid var(--brand);
}
table.data tr:hover td { background: #fbfaf4; }
table.data .actions { text-align: right; white-space: nowrap; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
}
.badge.paid { background: #e1f3ea; color: var(--success); }
.badge.unpaid { background: #fff3df; color: var(--warn); }
.badge.overdue { background: #fde6e4; color: var(--danger); }
.badge.booking { background: rgba(15,31,61,0.08); color: var(--brand); }
.badge.maintenance { background: rgba(201,161,74,0.18); color: var(--accent-2); }

/* ---------- Buttons ---------- */
button, .btn {
  background: var(--brand); color: #fff;
  border: none; border-radius: 2px;
  padding: 11px 20px; font-size: 11px; cursor: pointer; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  font-family: var(--sans);
  transition: background 0.15s, color 0.15s;
  text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--accent); color: var(--brand); }
button.ghost, .btn.ghost {
  background: transparent; color: var(--brand); border: 1px solid var(--brand);
}
button.ghost:hover, .btn.ghost:hover { background: var(--brand); color: #fff; }
button.gold, .btn.gold { background: var(--accent); color: var(--brand); }
button.gold:hover, .btn.gold:hover { background: var(--brand); color: var(--accent); }
button.danger { background: var(--danger); }
button.danger:hover { background: #8a1c16; color: #fff; }
button.small, .btn.small { padding: 6px 12px; font-size: 10px; letter-spacing: 1.5px; }

/* ---------- Forms ---------- */
form.form-grid { display: grid; gap: 10px; }
form.form-grid label { display: grid; gap: 3px; font-size: 13px; color: var(--muted); }
form.form-grid input,
form.form-grid select,
form.form-grid textarea {
  padding: 9px 11px; border-radius: 7px; border: 1px solid var(--line);
  font-size: 14px; font-family: inherit; background: #fff;
}
form.form-grid textarea { min-height: 70px; resize: vertical; }
form.form-grid .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Calendar ---------- */
.calendar-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.calendar-header h3 { margin: 0; flex: 1; font-size: 15px; }
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; background: var(--line); padding: 4px; border-radius: var(--radius);
}
.calendar-grid .dow {
  background: var(--bg); padding: 6px; text-align: center;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px;
}
.calendar-grid .day {
  background: var(--card); min-height: 84px; padding: 4px 6px; font-size: 12px;
  position: relative;
}
.calendar-grid .day.other { background: #fafbf9; color: var(--muted); }
.calendar-grid .day.today .date { background: var(--brand); color: #fff; }
.calendar-grid .day .date {
  display: inline-block; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 50%; font-weight: 600; font-size: 12px;
}
.calendar-grid .day .evt {
  display: block; margin-top: 3px; padding: 2px 5px; border-radius: 4px;
  font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer;
}
.calendar-grid .day .evt.booking { background: rgba(15,31,61,0.1); color: var(--brand); border-left: 2px solid var(--brand); }
.calendar-grid .day .evt.maintenance { background: rgba(201,161,74,0.18); color: var(--accent-2); border-left: 2px solid var(--accent); }

.calendar-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.calendar-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.calendar-legend .swatch.booking { background: rgba(15,31,61,0.4); }
.calendar-legend .swatch.maintenance { background: var(--accent); }
.calendar-legend .swatch.building { background: #1f7a4e; }
.badge.meeting, .badge.inspection { background: rgba(31,122,78,0.15); color: #1f7a4e; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: none; align-items: center; justify-content: center; z-index: 50;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff; border-radius: 12px; padding: 22px;
  width: min(540px, 92vw); max-height: 90vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal h2 { margin-top: 0; color: var(--brand); font-size: 17px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ---------- Payment info ---------- */
.pay-options { display: grid; gap: 12px; }
.pay-option {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 14px 16px;
  background: #fbfaf4;
  border-left: 3px solid var(--accent);
}
.pay-option h4 { margin: 0 0 4px; color: var(--brand); font-size: 14px; }
.pay-option p, .pay-option a { margin: 2px 0; font-size: 13px; }

@media (max-width: 640px) {
  main.content { padding: 14px; }
  .calendar-grid .day { min-height: 60px; }
  form.form-grid .row { grid-template-columns: 1fr; }
}

/* ---------- v2 additions ---------- */
.lang-switch-fixed {
  position: fixed; top: 16px; right: 16px; z-index: 100;
  display: flex; gap: 4px;
}
.lang-switch-fixed button {
  background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 10px; font-size: 10px; letter-spacing: 1.5px; font-weight: 600;
  cursor: pointer; border-radius: 2px; font-family: var(--sans);
}
.lang-switch-fixed button:hover { background: var(--accent); color: var(--brand); border-color: var(--accent); }

.lang-switch { display: flex; gap: 4px; }
.lang-switch button {
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 9px; font-size: 10px; letter-spacing: 1.5px; font-weight: 600;
  cursor: pointer; border-radius: 2px; font-family: var(--sans);
}
.lang-switch button.active { background: var(--accent); color: var(--brand); border-color: var(--accent); }

/* Photo gallery */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-grid .photo-cell {
  position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--line);
}
.photo-grid .photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid .photo-cell .photo-del {
  position: absolute; top: 6px; right: 6px;
  background: rgba(15,31,61,0.7); color: #fff; border: none; padding: 3px 7px;
  font-size: 10px; cursor: pointer; border-radius: 2px;
}
.photo-hero {
  aspect-ratio: 16/7; overflow: hidden; border-radius: 4px; margin-bottom: 16px;
  background: linear-gradient(135deg, #0f1f3d, #1a3461);
}
.photo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.property-tile .tile-photo {
  aspect-ratio: 16/9; overflow: hidden; margin: -22px -24px 14px -24px;
  background: linear-gradient(135deg, #0f1f3d, #1a3461);
}
.property-tile .tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Documents list */
.doc-list { display: grid; gap: 8px; }
.doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; background: #fbfaf4;
}
.doc-row .doc-name { flex: 1; font-size: 13px; }
.doc-row .doc-meta { font-size: 11px; color: var(--muted); }

/* Maintenance */
.maint-list { display: grid; gap: 12px; }
.maint-card {
  border: 1px solid var(--line); border-radius: 4px; padding: 16px;
  background: #fff; border-left: 3px solid var(--accent);
}
.maint-card.status-new { border-left-color: var(--danger); }
.maint-card.status-in_progress { border-left-color: var(--warn); }
.maint-card.status-resolved { border-left-color: var(--success); opacity: 0.7; }
.maint-card h4 { margin: 0 0 4px; font-family: var(--serif); color: var(--brand); }
.maint-card p { margin: 4px 0; font-size: 13px; }
.maint-card .meta { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }
.maint-card img { max-width: 200px; border-radius: 4px; margin-top: 8px; display: block; }

/* iCal feed box */
.ical-box {
  border: 1px dashed var(--accent); padding: 12px 14px; border-radius: 4px;
  background: #fbfaf4; display: flex; align-items: center; gap: 10px; margin-top: 10px;
}
.ical-box input { flex: 1; border: none; background: transparent; font-family: monospace; font-size: 12px; color: var(--brand); }
.ical-box input:focus { outline: none; }

/* Capability badges (admin) */
.cap-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cap-badge {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.cap-badge.on { background: #e1f3ea; color: var(--success); }
.cap-badge.off { background: #fff3df; color: var(--warn); }

/* File-upload input */
.file-upload {
  display: inline-block; padding: 10px 16px; border: 1px dashed var(--line);
  background: #fbfaf4; cursor: pointer; border-radius: 4px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--muted);
}
.file-upload:hover { border-color: var(--accent); color: var(--brand); }
.file-upload input { display: none; }

/* ----------------------------------------------------------------------
   Asset reporting dashboard — KPI cards, charts, breakdown
---------------------------------------------------------------------- */
.grid.kpi-row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px; }
.kpi-row .stat-tile { border-top: 3px solid var(--accent); }
.kpi-income { border-top-color: var(--success) !important; }
.kpi-expense { border-top-color: var(--warn) !important; }
.kpi-net { border-top-color: var(--brand) !important; }
.kpi-net.negative .num { color: var(--danger); }
.kpi-maint { border-top-color: var(--accent-2) !important; }
.kpi-bookings { border-top-color: var(--brand-2) !important; }

/* Monthly bar chart */
.bar-chart {
  display: flex; align-items: flex-end; gap: 14px;
  height: 220px; padding: 16px 4px 0; margin-top: 8px;
  border-bottom: 1px solid var(--line); overflow-x: auto;
}
.bar-chart .bar-col {
  flex: 1 0 44px; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end;
}
.bar-chart .bars {
  display: flex; align-items: flex-end; gap: 4px; height: 100%; width: 100%;
  justify-content: center;
}
.bar-chart .bar {
  width: 16px; min-height: 2px; border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}
.bar-chart .bar.inc { background: var(--success); }
.bar-chart .bar.exp { background: var(--warn); }
.bar-chart .bar-label {
  margin-top: 8px; font-size: 11px; color: var(--muted); white-space: nowrap;
}
.chart-legend {
  display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.chart-legend .swatch.inc { background: var(--success); }
.chart-legend .swatch.exp { background: var(--warn); }

/* ----------------------------------------------------------------------
   CRM — toolbar, kanban, modal, activity log
---------------------------------------------------------------------- */
.crm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.kanban {
  display: grid; grid-auto-flow: column;
  /* Wider columns + minimum width per column so each stage gets room to breathe. */
  grid-auto-columns: minmax(320px, 1fr);
  gap: 16px; overflow-x: auto; padding-bottom: 10px;
}
.kanban-col {
  background: #fbfaf4; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column;
  /* Taller columns so multiple deals stack visibly before scrolling. */
  min-height: 480px;
  max-height: 75vh;
}
.kanban-col-body { overflow-y: auto; }
.kanban-col.dragover { background: rgba(201,161,74,0.12); border-color: var(--accent); }
.kanban-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--brand);
}
.kanban-col-body { display: flex; flex-direction: column; gap: 8px; padding: 10px; flex: 1; }
.kanban-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 10px 12px; cursor: grab; transition: transform .12s, box-shadow .12s;
}
.kanban-card:hover { box-shadow: 0 4px 14px rgba(15,31,61,0.08); transform: translateY(-1px); }
.kanban-card.dragging { opacity: 0.5; }
.kanban-card.paid { border-left-color: var(--success); }
.kanban-card.overdue { border-left-color: var(--danger); }
.kanban-card-title { font-weight: 600; color: var(--brand); margin-bottom: 4px; }
.kanban-card-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--text); }

/* Modal overlay */
.modal {
  position: fixed; inset: 0; background: rgba(15,31,61,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal[hidden] { display: none; }
.modal-card {
  background: var(--card); border-radius: var(--radius); padding: 24px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 48px rgba(15,31,61,0.3); position: relative;
}
.modal-card h3 { margin: 0 0 14px; font-family: var(--serif); color: var(--brand); }
.modal-close {
  position: absolute; top: 10px; right: 14px; background: transparent; border: none;
  font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px;
}
.modal-close:hover { color: var(--brand); }

/* Activity timeline */
.activity-log { display: flex; flex-direction: column; gap: 8px; }
.activity-item {
  background: #fbfaf4; border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 12px; font-size: 13px;
}
.activity-head {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px;
}
.activity-head button { margin-left: auto; }

/* AI assistant chat */
.chat-log {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 180px; max-height: 420px; overflow-y: auto;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fbfaf4; margin-bottom: 12px;
}
.chat-msg {
  max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: 14px;
  line-height: 1.45; white-space: pre-wrap;
}
.chat-msg.user { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 4px; }

/* ----------------------------------------------------------------------
   Onboarding spotlight tour
---------------------------------------------------------------------- */
.onboard { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.onboard[hidden] { display: none; }
.onboard-overlay {
  position: fixed; inset: 0; z-index: 1101;
  background: rgba(15,31,61,0.45);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  pointer-events: auto;
}
.onboard-popover {
  position: fixed; z-index: 1103;
  background: var(--card); border-radius: var(--radius);
  width: min(360px, calc(100vw - 32px));
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(15,31,61,0.45);
  border-top: 4px solid var(--accent);
  pointer-events: auto;
  transition: top .25s ease, left .25s ease;
}
.onboard-popover.center {
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
}
.onboard-popover h3 {
  font-family: var(--serif); color: var(--brand);
  margin: 6px 0 10px; line-height: 1.2; font-size: 20px;
}
.onboard-popover p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text); }
.onboard-close {
  position: absolute; top: 6px; right: 10px; background: transparent;
  border: none; font-size: 24px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 4px 8px;
}
.onboard-close:hover { color: var(--brand); }
.onboard-dots {
  display: flex; gap: 6px; justify-content: center; margin: 0 0 14px;
}
.onboard-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background .2s, transform .2s;
}
.onboard-dot.on { background: var(--accent); transform: scale(1.3); }
.onboard-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
.onboard-actions button { min-height: 38px; padding: 8px 16px; }

/* The highlighted target: raised above the blurred overlay, with a gold glow ring */
.tour-highlight {
  position: relative;
  z-index: 1102 !important;
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(201,161,74,0.55);
  background: var(--card);
  transition: outline-color .2s, box-shadow .2s;
}

/* Replay-tour button on the welcome hero */
.link-on-hero {
  background: transparent; border: 1px solid rgba(201,161,74,0.55);
  color: var(--accent); padding: 6px 14px; border-radius: 4px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  cursor: pointer; margin-top: 14px;
}
.link-on-hero:hover { background: rgba(201,161,74,0.18); }

@media (max-width: 720px) {
  /* On phones, the popover docks to the bottom of the screen — always visible */
  .onboard-popover {
    top: auto !important;
    left: 12px !important; right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important; max-width: none !important;
    transform: none !important;
  }
  .onboard-popover.center {
    top: 50% !important; left: 12px !important; right: 12px !important;
    bottom: auto !important; transform: translateY(-50%) !important;
  }
  .tour-highlight { outline-offset: 4px; }
}

/* ----------------------------------------------------------------------
   Mobile / phone view (≤ 720px). Keeps desktop unchanged.
   Goals: thumb-friendly taps, sticky navigation, scroll-safe tables,
   full-screen modals, iPhone notch (safe-area-inset) support.
---------------------------------------------------------------------- */
@media (max-width: 720px) {
  body { font-size: 14px; }

  /* Lock every major shell container to the screen width so nothing can ever push past it */
  .shell, main.content, header.topbar, .tabs, .tab-panel, .card { max-width: 100vw; width: 100%; }
  .shell { min-width: 0; }

  /* Topbar: smaller, wraps, hide the 3 contact icons + sign-out label to leave room for navigation */
  header.topbar { padding: 10px 12px; gap: 8px; flex-wrap: wrap; min-width: 0; }
  header.topbar .logo-mark { width: 28px; height: 28px; }
  header.topbar h1 { font-size: 15px; letter-spacing: 1px; flex: 1; min-width: 0; }
  header.topbar h1 .sub { display: none; }
  header.topbar .spacer { display: none; }
  header.topbar .user { display: none; }
  header.topbar .lang-switch button { padding: 4px 6px; font-size: 11px; min-height: 34px; min-width: 34px; }
  /* Theme toggle: compact on mobile so the topbar fits one row */
  header.topbar .theme-toggle { min-height: 34px !important; min-width: 34px !important; padding: 4px 8px !important; font-size: 13px !important; }
  /* Global search: on phones it drops to its own row instead of crushing the topbar */
  header.topbar .global-search-wrap { order: 10; flex: 1 0 100%; margin: 6px 0 0; max-width: none; }
  /* Hide the contact buttons on phones — they're available on the login page; reduces topbar congestion */
  header.topbar .mail-link, header.topbar .tg-link, header.topbar .wa-link { display: none; }
  header.topbar button.link { padding: 5px 10px; font-size: 12px; min-height: 34px; min-width: 0; }

  /* Tabs: horizontal scroll instead of wrapping or overflowing */
  .tabs {
    overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
    -webkit-overflow-scrolling: touch; margin-bottom: 16px;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    padding: 10px 12px; font-size: 10px; letter-spacing: 1.5px;
    flex: 0 0 auto;
  }

  /* Layout */
  main.content { padding: 12px; }
  .card { padding: 16px; }
  .grid { gap: 12px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
  .grid.kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-tile { padding: 14px; }
  .stat-tile .num { font-size: 22px; }
  .hero-strip { padding: 18px; }
  .hero-strip h1 { font-size: 22px; line-height: 1.2; }

  /* Tables: horizontal scroll on phones so cells don't get crushed */
  table.data {
    display: block; overflow-x: auto; white-space: nowrap;
    -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  table.data thead, table.data tbody, table.data tr { width: max-content; min-width: 100%; }
  table.data th, table.data td { padding: 8px 10px; }

  /* Forms */
  form.form-grid .row { grid-template-columns: 1fr; gap: 10px; }
  input, select, textarea { font-size: 16px; } /* iOS zooms <16px inputs on focus */

  /* Calendar */
  .calendar-header { flex-wrap: wrap; gap: 6px; }
  .calendar-grid .day { min-height: 50px; padding: 4px; font-size: 11px; }
  .calendar-grid .day .date { font-size: 11px; }

  /* Dashboard filter bar */
  .filter-bar { gap: 8px; padding: 10px 12px; }
  .filter-bar label { width: 100%; }
  .filter-bar select, .filter-bar input { min-width: 0; width: 100%; }

  /* Monthly chart */
  .bar-chart { height: 180px; gap: 8px; }
  .bar-chart .bar { width: 12px; }
  .bar-chart .bar-col { flex: 1 0 36px; }

  /* CRM */
  .crm-toolbar { gap: 6px; }
  .crm-toolbar button { padding: 6px 10px; font-size: 11px; }
  .kanban { grid-auto-columns: 78vw; }   /* one column at a time, swipeable */

  /* Modals */
  .modal { padding: 10px; align-items: flex-start; }
  .modal-card { padding: 18px; max-height: 92vh; margin-top: 10px; }

  /* Maintenance cards (admin quote + status) */
  .maint-card .row { grid-template-columns: 1fr !important; }

  /* Photo / doc list */
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-row { flex-wrap: wrap; gap: 6px; }

  /* iCal copy box */
  .ical-box { flex-wrap: wrap; }
  .ical-box input { width: 100%; min-width: 0; }

  /* AI chat */
  .chat-msg { max-width: 92%; font-size: 13px; }
  .chat-log { min-height: 240px; max-height: 60vh; }
  .chat-input input { font-size: 16px; }

  /* Building & property cards: their inline labels get a bit cramped — let them wrap */
  .unit-row { grid-template-columns: 1fr !important; }

  /* Pay options: stack and look like buttons */
  .pay-options { grid-template-columns: 1fr; }

  /* Login page */
  .login-body main { padding: 20px 16px; }

  /* Capability badges row */
  .cap-row { gap: 6px; }
  .cap-badge { font-size: 9px; padding: 3px 8px; }

  /* ---------- Bigger tap targets (M10) ----------
     Google & Apple both recommend ≥44×44 px for a comfortable thumb hit.
     Enforced globally on mobile so buttons, list rows, and inline action
     icons stop being fiddly. */
  button, .btn, a.button, input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 44px; min-width: 44px;
    padding: 12px 18px;
    line-height: 1.2;
  }
  button.small, .btn.small {
    min-height: 40px; min-width: 40px;
    padding: 10px 14px; font-size: 11px;
  }
  /* Icon-only buttons (📋, ✏️, 🗑️ etc.) — keep them square not stretched */
  button.icon, .btn.icon { min-height: 44px; min-width: 44px; padding: 10px; }

  /* Form controls need finger-friendly height too */
  form.form-grid input,
  form.form-grid select,
  form.form-grid textarea,
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="url"], input[type="password"], input[type="date"], input[type="time"], select {
    min-height: 44px; padding: 12px 14px;
  }
  form.form-grid textarea { min-height: 88px; }

  /* Checkbox & radio — hitbox around them */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px; margin: 8px;
  }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) { min-height: 44px; align-items: center; }

  /* Tab bar buttons — need to be tappable, not tiny */
  .tabs button { min-height: 44px; padding: 12px 14px; }

  /* Language switcher — small but still 40px minimum */
  header.topbar .lang-switch button { min-height: 40px; min-width: 40px; padding: 8px 10px; font-size: 12px; }

  /* Any inline action icon in a table (edit/delete/copy buttons) */
  table.data td button, table.data td a { min-height: 40px; min-width: 40px; }

  /* Table rows themselves — comfortable row height for tapping */
  table.data th, table.data td { padding: 12px 12px; }

  /* Anchor links used as buttons — give them a proper hit area */
  .card a.btn, .card a.button { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 18px; }

  /* Details/summary — expandable rows get a bigger tap zone */
  summary { min-height: 44px; padding: 12px 4px; display: flex; align-items: center; }
}

/* Extra-small phones */
@media (max-width: 400px) {
  header.topbar h1 { font-size: 13px; }
  .grid.kpi-row { grid-template-columns: 1fr; }
  .tabs button { padding: 9px 10px; }
  .kanban { grid-auto-columns: 84vw; }
}

/* ----------------------------------------------------------------------
   Mobile functionality layer: sticky nav, sticky table cols, full-screen
   modals, fat tap targets, iPhone safe-area-inset support, no text-select
   on long-press for tap UI, smoother scrolling.
---------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Honour iPhone notch / Android nav area */
  header.topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  main.content {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* Sticky tab strip so you can always switch context without scrolling up */
  .tabs {
    position: sticky; top: 0; z-index: 50;
    background: var(--bg);
    margin: 0 0 16px;          /* no negative margin — keeps within viewport on any device */
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 8px -8px rgba(15,31,61,0.2);
    max-width: 100%;
  }

  /* Tables: keep the first column visible while you swipe through the others */
  table.data th:first-child, table.data td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--card);
    box-shadow: 2px 0 4px -2px rgba(15,31,61,0.08);
  }
  table.data thead th { background: var(--card); }

  /* Fat tap targets — primary buttons & form controls */
  button:not(.small):not(.ghost):not(.link):not(.modal-close):not(.tabs button):not(.lang-switch button),
  .btn:not(.small) {
    min-height: 44px; padding: 10px 16px;
  }
  .small { min-height: 36px; }
  input:not([type=checkbox]):not([type=radio]),
  select, textarea {
    min-height: 44px; padding: 10px 12px;
  }
  textarea { min-height: 80px; }
  /* Tab buttons readable + tappable */
  .tabs button { min-height: 40px; }

  /* Modals: full-screen on phones for easy form filling */
  .modal { padding: 0; align-items: stretch; }
  .modal-card {
    width: 100%; max-width: 100%; height: 100vh; max-height: 100vh;
    border-radius: 0; padding: 18px;
    padding-top: max(48px, calc(18px + env(safe-area-inset-top)));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .modal-close { top: max(8px, env(safe-area-inset-top)); right: 14px; font-size: 32px; padding: 8px 12px; }

  /* Stop UI buttons being selected when long-pressing for drag */
  .kanban-card, .tabs button, .badge, .stat-tile {
    -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: rgba(201,161,74,0.18);
  }
  /* Smoother horizontal scrolling everywhere */
  .tabs, .kanban, table.data { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

  /* Forms: stack action buttons full-width for clear tap targets */
  .form-grid > div > button[type=submit] { width: 100%; }

  /* Property/building card heading wraps neatly */
  .property-tile h3, .maint-card h4 { word-break: break-word; }

  /* Maintenance & appointment list cards: stack inputs vertically */
  .maint-card .row { gap: 8px; }

  /* Buildings: the inline mgmt-fee row wraps */
  #propertiesList label { flex-wrap: wrap; }

  /* ---------- Calendar polish on phone ---------- */
  .calendar-header { flex-wrap: wrap; gap: 8px; align-items: center; }
  .calendar-header h3 { flex: 1; text-align: center; font-size: 16px; margin: 0; }
  .calendar-header > select { order: 99; width: 100%; min-height: 40px; }
  .calendar-grid { gap: 1px; }
  .calendar-grid .dow {
    font-size: 9px; letter-spacing: 1px; padding: 4px 0;
  }
  .calendar-grid .day {
    min-height: 64px; padding: 3px; font-size: 11px;
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
  }
  .calendar-grid .day .date { font-size: 11px; font-weight: 700; }
  .calendar-grid .day .evt {
    display: block; padding: 1px 4px; font-size: 9px; line-height: 1.2;
    border-radius: 3px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .calendar-grid .day.today .date { color: var(--accent); }
  .calendar-legend { font-size: 11px; flex-wrap: wrap; gap: 12px; }

  /* ---------- Invoices: card-style rows instead of cramped tables ---------- */
  #invoicesTable, #openInvoicesTable, #propInvoicesTable, #expenseInvoicesTable {
    display: block; overflow: visible; white-space: normal;
  }
  #invoicesTable thead, #openInvoicesTable thead, #propInvoicesTable thead, #expenseInvoicesTable thead { display: none; }
  #invoicesTable tbody, #openInvoicesTable tbody, #propInvoicesTable tbody, #expenseInvoicesTable tbody {
    display: block; width: 100%; min-width: 0;
  }
  #invoicesTable tr, #openInvoicesTable tr, #propInvoicesTable tr, #expenseInvoicesTable tr {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 14px;
    background: var(--card);
    width: 100%; min-width: 0;
    white-space: normal;
  }
  #invoicesTable td, #openInvoicesTable td, #propInvoicesTable td, #expenseInvoicesTable td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border: none;
    text-align: left; gap: 8px;
    white-space: normal; word-break: break-word;
  }
  /* Number cell becomes the card title */
  #invoicesTable td:first-child, #openInvoicesTable td:first-child, #propInvoicesTable td:first-child, #expenseInvoicesTable td:first-child {
    position: static; box-shadow: none; background: transparent;
    font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--brand);
    border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 4px;
    justify-content: flex-start;
  }
  /* Actions row: full width, buttons spread */
  #invoicesTable td.actions, #openInvoicesTable td.actions, #propInvoicesTable td.actions, #expenseInvoicesTable td.actions {
    justify-content: flex-end; gap: 8px; padding-top: 10px; margin-top: 4px;
    flex-wrap: wrap; border-top: 1px solid var(--line);
  }
  #invoicesTable td.actions .btn, #propInvoicesTable td.actions .btn, #expenseInvoicesTable td.actions .btn {
    flex: 1 1 auto; min-width: 110px; text-align: center;
  }
  /* Status select in admin row stays compact */
  #invoicesTable td select { min-height: 36px; min-width: 110px; }
  /* Empty cells (placeholders) hide on mobile */
  #invoicesTable td:empty, #openInvoicesTable td:empty, #propInvoicesTable td:empty, #expenseInvoicesTable td:empty { display: none; }

  /* ---------- Income / Expense / Tenants: same card-style rows on mobile ---------- */
  #incomeTable, #expenseTable, #tenantsTable {
    display: block; overflow: visible; white-space: normal;
  }
  #incomeTable thead, #expenseTable thead, #tenantsTable thead { display: none; }
  #incomeTable tbody, #expenseTable tbody, #tenantsTable tbody {
    display: block; width: 100%; min-width: 0;
  }
  #incomeTable tr, #expenseTable tr, #tenantsTable tr {
    display: flex; flex-direction: column; gap: 4px;
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 14px;
    background: var(--card);
    width: 100%; min-width: 0;
    white-space: normal;
    cursor: default;
  }
  #incomeTable td, #expenseTable td, #tenantsTable td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border: none;
    text-align: left; gap: 8px;
    white-space: normal; word-break: break-word;
  }
  /* First cell becomes the card title (Date for income/expense, Tenant name for tenants) */
  #incomeTable td:first-child,
  #expenseTable td:first-child,
  #tenantsTable td:first-child {
    position: static; box-shadow: none; background: transparent;
    font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--brand);
    border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 4px;
    justify-content: flex-start;
  }
  /* Action cells (admin Delete buttons) get their own row with breathing room */
  #incomeTable td.actions, #expenseTable td.actions, #tenantsTable td.actions {
    justify-content: flex-end; gap: 8px; padding-top: 10px; margin-top: 4px;
    border-top: 1px solid var(--line); flex-wrap: wrap;
  }
  /* Inline status select / approved checkbox stays compact */
  #incomeTable td select, #expenseTable td select { min-height: 36px; min-width: 110px; }
  #expenseTable td input[type=checkbox] { width: 22px; height: 22px; }
  /* Hide empty cells that would otherwise leave a blank line */
  #incomeTable td:empty, #expenseTable td:empty, #tenantsTable td:empty { display: none; }
}
.chat-input { display: flex; gap: 8px; }
.chat-input input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; font-size: 14px; }

/* Maintenance quote box (owner side) */
.quote-box {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--accent);
  border-radius: var(--radius); background: #fbfaf4;
}
.quote-box strong { color: var(--brand); }
.quote-box p { margin: 6px 0; font-size: 14px; }
.quote-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Inline-editable table cells (admin Owners table — edit email/phone in place) */
.inline-edit {
  background: transparent; border: 1px solid transparent;
  padding: 6px 10px; font: inherit; font-size: 13px;
  width: 100%; min-width: 140px; color: var(--text);
  border-radius: 4px;
  transition: border-color .15s, background .15s;
}
.inline-edit:hover { border-color: var(--line); background: #fbfaf4; }
.inline-edit:focus { outline: none; border-color: var(--accent); background: #fff; }
.inline-edit.saved { border-color: var(--success); background: rgba(31,122,78,0.06); }
.inline-edit.failed { border-color: var(--danger); background: rgba(179,38,30,0.06); }

/* Global search in admin topbar */
.global-search-wrap { position: relative; flex: 1; max-width: 420px; margin: 0 18px; }
.global-search-wrap input {
  width: 100%; padding: 8px 14px; border: 1px solid var(--line); background: #fff;
  border-radius: 4px; font: inherit; font-size: 14px;
}
.global-search-wrap input:focus { outline: none; border-color: var(--accent); }
#globalSearchResults {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); max-height: 70vh; overflow-y: auto; z-index: 1000;
}
.search-empty { padding: 12px 16px; color: #999; font-size: 13px; }
.search-group { border-bottom: 1px solid var(--line); }
.search-group:last-child { border-bottom: 0; }
.search-group-title {
  padding: 6px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent);
  background: #fbfaf4;
}
.search-result {
  display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px;
  width: 100%; padding: 8px 14px; border: none; background: transparent;
  text-align: left; cursor: pointer; border-bottom: 1px solid #f5f3ec;
}
.search-result:hover { background: #fbfaf4; }
.search-result:last-child { border-bottom: 0; }
.search-icon { font-size: 18px; text-align: center; }
.search-body { display: flex; flex-direction: column; min-width: 0; }
.search-title { font-weight: 600; color: var(--brand); font-size: 14px; }
.search-sub { font-size: 12px; color: #777; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin inbox / command center */
.inbox-section { background: #fbfaf4; padding: 14px 16px; margin-bottom: 14px; border-radius: 4px; }
.inbox-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.inbox-item:last-child { border-bottom: 0; }
.inbox-icon { font-size: 22px; text-align: center; }
.inbox-title { font-weight: 600; color: var(--brand); }
.inbox-context { margin-top: 2px; }

/* Buildings tab — small clickable tiles at the top of the list */
.building-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.building-tile {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 10px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  font-family: inherit;
}
.building-tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.building-tile.active { border-color: var(--brand); background: #fbfaf4; box-shadow: 0 0 0 2px var(--accent) inset; }
.building-tile-icon { font-size: 28px; line-height: 1; }
.building-tile-name { font-weight: 700; color: var(--brand); font-size: 14px; }
.building-tile-meta { font-size: 11px; color: #777; }

/* Bank-transfer lines — value + inline copy icon */
.bank-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.bank-line .bank-val { font-family: ui-monospace, Menlo, Consolas, monospace; user-select: all; }
.bank-line .copy-btn { padding: 2px 8px; font-size: 14px; line-height: 1; margin-left: auto; }

/* Committee accounts (assigned by admin via Buildings tab): hide the owner-management tabs
   and their panels entirely. Server injects `committee-only-view` class on <body>. */
body.committee-only-view .tabs button[data-tab="overview"],
body.committee-only-view .tabs button[data-tab="dashboard"],
body.committee-only-view .tabs button[data-tab="income"],
body.committee-only-view .tabs button[data-tab="expense"],
body.committee-only-view .tabs button[data-tab="tenants"],
body.committee-only-view .tabs button[data-tab="fees"],
body.committee-only-view .tabs button[data-tab="assistant"],
body.committee-only-view #tab-overview,
body.committee-only-view #tab-dashboard,
body.committee-only-view #tab-income,
body.committee-only-view #tab-expense,
body.committee-only-view #tab-tenants,
body.committee-only-view #tab-fees,
body.committee-only-view #tab-assistant { display: none !important; }

/* Offline banner — shown whenever navigator.onLine is false */
#offlineBanner {
  position: sticky; top: 0; z-index: 9998;
  background: #b07a13; color: #fff; padding: 8px 16px;
  text-align: center; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
#offlineBanner strong { font-weight: 700; }

/* Admin impersonation banner — stays pinned at the top of the owner portal */
#impersonationBanner {
  position: sticky; top: 0; z-index: 9999;
  background: linear-gradient(180deg, #dc2626, #b91c1c); color: #fff;
  padding: 10px 18px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  font-size: 14px;
}
#impersonationBanner strong { font-weight: 700; }
#impersonationBanner #stopImpersonateBtn { white-space: nowrap; }
body.has-impersonation-banner { padding-top: 0; }

/* Owners table — compact 4-column layout */
#ownersTable th.actions-col { text-align: right; }
#ownersTable td.owner-cell .o-name { font-weight: 600; }
#ownersTable td.owner-cell .o-user { margin-top: 2px; }
#ownersTable td.contact-cell { line-height: 1.4; max-width: 220px; word-break: break-word; }
#ownersTable td.contact-cell a { color: var(--brand); text-decoration: none; }
#ownersTable td.contact-cell a:hover { text-decoration: underline; }
#ownersTable td.actions { text-align: right; white-space: nowrap; }
#ownersTable td.actions > * { margin-left: 4px; vertical-align: middle; }
#ownersTable td.actions > *:first-child { margin-left: 0; }

/* Password column: monospace value + tight inline buttons */
.pw-cell { white-space: nowrap; }
.pw-cell .pw-value {
  display: inline-block; min-width: 90px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  letter-spacing: 0.5px; padding: 4px 8px; background: #fbfaf4;
  border: 1px solid var(--line); border-radius: 3px; vertical-align: middle;
  user-select: all;
}
.pw-cell button.small { padding: 4px 8px; margin-left: 4px; vertical-align: middle; }

/* Narrow screens: stack actions and let table scroll horizontally */
@media (max-width: 900px) {
  #ownersTable { font-size: 13px; }
  #ownersTable td.actions { white-space: normal; }
  #ownersTable td.actions > * { margin: 2px; }
}

/* Info callout (explanatory note) */
.info-callout {
  border-left: 3px solid var(--accent); background: #fbfaf4;
  padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px; line-height: 1.5; color: var(--text); margin: 8px 0 4px;
}
.info-callout strong { color: var(--brand); }

/* Dashboard filter bar */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.filter-bar label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.filter-bar select, .filter-bar input {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 2px;
  font-size: 14px; color: var(--text); background: #fff; min-width: 160px;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

/* Expense breakdown bars */
.breakdown-list { display: grid; gap: 14px; margin-top: 8px; }
.breakdown-row { display: grid; gap: 6px; }
.breakdown-head { display: flex; justify-content: space-between; font-size: 13px; }
.breakdown-head .cat { font-weight: 600; color: var(--brand); }
.breakdown-head .amt { color: var(--muted); }
.breakdown-track { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.breakdown-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }

/* ==================================================================
   Dark mode (M15)
   ================================================================== */
[data-theme="dark"] {
  --brand: #6b8fd0;             /* softer navy that reads on dark bg */
  --brand-2: #86a5df;
  --accent: #d4b26a;             /* gold — kept warm but slightly desaturated */
  --accent-2: #b88a36;
  --bg: #0d1220;                 /* deep near-black navy */
  --card: #172236;               /* raised surface */
  --text: #e6ebf5;               /* soft off-white */
  --muted: #8a95a9;
  --line: #26324a;               /* subtle divider */
  --danger: #ea6863;
  --success: #4bbf85;
  --warn: #d19c3d;
  --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
}

/* Surface overrides for spots that hardcoded near-white backgrounds */
[data-theme="dark"] .pw-cell .pw-value,
[data-theme="dark"] .stat-tile,
[data-theme="dark"] form.form-grid input,
[data-theme="dark"] form.form-grid select,
[data-theme="dark"] form.form-grid textarea,
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: #1e2b45; color: var(--text); border-color: var(--line);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #6b7691; }

/* Cards / inset panels that hardcoded #fbfaf4 in inline styles */
[data-theme="dark"] .card { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
[data-theme="dark"] [style*="background:#fbfaf4"],
[data-theme="dark"] [style*="background: #fbfaf4"] { background: #1e2b45 !important; color: var(--text) !important; border-color: var(--line) !important; }
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] { background: #172236 !important; color: var(--text) !important; }

/* Buttons — keep gold accent readable but soften navy */
[data-theme="dark"] button, [data-theme="dark"] .btn { background: #2a3a5c; color: #eef1f8; }
[data-theme="dark"] button:hover, [data-theme="dark"] .btn:hover { background: var(--accent); color: #1a1f2e; }
[data-theme="dark"] button.gold, [data-theme="dark"] .btn.gold { background: var(--accent); color: #1a1f2e; }
[data-theme="dark"] button.danger { background: #7f2a25; color: #fff; }
[data-theme="dark"] button.ghost, [data-theme="dark"] .btn.ghost { background: transparent; color: var(--brand); border-color: var(--brand); }

/* Topbar reads on dark */
[data-theme="dark"] header.topbar { background: #0a1024; border-bottom: 1px solid var(--line); }
[data-theme="dark"] header.topbar h1, [data-theme="dark"] header.topbar h1 .sub { color: #eef1f8; }

/* Tabs */
[data-theme="dark"] .tabs { border-bottom-color: var(--line); }
[data-theme="dark"] .tabs button { color: var(--muted); }
[data-theme="dark"] .tabs button:hover { color: var(--accent); }
[data-theme="dark"] .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Tables */
[data-theme="dark"] table.data th { background: #1e2b45; color: var(--text); border-color: var(--line); }
[data-theme="dark"] table.data td { border-color: var(--line); }
[data-theme="dark"] table.data tr:hover td { background: #1a2540; }
[data-theme="dark"] .data-table th { background: #1e2b45; color: var(--text); }
[data-theme="dark"] .data-table td { border-color: var(--line); }

/* Badges */
[data-theme="dark"] .badge { filter: brightness(0.9) saturate(1.1); }
[data-theme="dark"] .badge.paid { background: rgba(75,191,133,0.18); color: #6ed69f; }
[data-theme="dark"] .badge.unpaid { background: rgba(209,156,61,0.20); color: #e8b555; }
[data-theme="dark"] .badge.overdue { background: rgba(234,104,99,0.18); color: #f28a86; }
[data-theme="dark"] .badge.booking { background: rgba(107,143,208,0.20); color: #a7c1ee; }
[data-theme="dark"] .badge.maintenance { background: rgba(212,178,106,0.18); color: #e6c680; }

/* Calendar */
[data-theme="dark"] .calendar-grid .day { background: var(--card); border-color: var(--line); color: var(--text); }
[data-theme="dark"] .calendar-grid .day.today { background: rgba(212,178,106,0.15); }
[data-theme="dark"] .calendar-grid .day.other-month { background: #131b2e; color: #4a5675; }

/* Modals & tooltips */
[data-theme="dark"] .modal { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .modal-card { background: var(--card); color: var(--text); border-color: var(--line); }

/* Chat bubbles */
[data-theme="dark"] .chat-msg.user { background: #2a3a5c; color: #eef1f8; }
[data-theme="dark"] .chat-msg.bot { background: #1e2b45; color: var(--text); }

/* Login page glow adjusts to darker glass */
[data-theme="dark"] .login-body { background:
  radial-gradient(1200px 600px at 15% 0%, rgba(212,178,106,0.18), transparent 60%),
  radial-gradient(1200px 600px at 85% 100%, rgba(107,143,208,0.14), transparent 60%),
  #0a1024;
}
[data-theme="dark"] .login-card { background: var(--card); color: var(--text); }

/* Details / summary widgets */
[data-theme="dark"] details { background: #1a2540; border-color: var(--line); color: var(--text); }
[data-theme="dark"] summary { color: var(--text); }

/* Anchor text stays readable */
[data-theme="dark"] a { color: var(--accent); }
[data-theme="dark"] a:hover { color: #e6c680; }

/* The toggle button itself (topbar) */
.theme-toggle {
  background: transparent !important; border: 1px solid var(--line) !important;
  color: var(--brand) !important; min-width: 40px !important; min-height: 40px !important;
  padding: 6px 10px !important; border-radius: 999px !important;
  font-size: 15px !important; letter-spacing: 0 !important;
}
.theme-toggle:hover { background: var(--accent) !important; color: var(--brand) !important; border-color: var(--accent) !important; }
[data-theme="dark"] .theme-toggle { color: #eef1f8 !important; border-color: var(--line) !important; }
[data-theme="dark"] .theme-toggle:hover { background: var(--accent) !important; color: #1a1f2e !important; }