/* Theme only: no changes to layout, spacing, breakpoints, visibility or controls. */
:root {
  --ink: #202b3b;
  --muted: #687588;
  --green: #008b87;
  --mint: #edf7f6;
  --cream: #f6f9fa;
  --line: #e0e5eb;
  --shadow: 0 2px 8px rgba(32, 43, 59, .035);
  --theme-font: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-family: var(--theme-font);
  background: #f7f9fb;
}

/* The existing horizontal header and navigation retain their exact geometry. */
.topbar { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.brand { color: var(--ink); }
.brand span, .page-heading h1, .card-head h2, .dialog-head h2,
.forecast h2, .summary-item .value, .kpi .value { font-family: var(--theme-font); }
.brand span { color: var(--green); }
.brand small { color: var(--muted); border-left-color: var(--line); }
.brand-logo { display: block; flex: 0 0 176px; width: 176px; height: 42px; overflow: hidden; }
.brand-logo-image { display: block; width: 352px; max-width: none; height: auto; transform: translate(-83px, -15px); }
.auth-brand .brand-logo { display: block; flex: 0 0 auto; width: 220px; height: 50px; overflow: hidden; margin-bottom: 2px; }
.auth-brand .brand-logo-image { display: block; width: 440px; max-width: none; height: auto; transform: translate(-103px, -18px); }
.topbar nav a { color: var(--muted); }
.topbar nav a.active { color: var(--green); border-bottom-color: var(--green); }
.topbar nav a:hover { color: var(--green); background-color: #f1f8f7; }
.eyebrow { color: var(--green); }

/* Reuse the approved decorative image inside the existing heading, not a new banner row. */
.dashboard-heading {
  background-color: #fff;
  background-image: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.97) 26%, rgba(255,255,255,.35) 53%, rgba(255,255,255,.38) 66%, rgba(255,255,255,.98) 88%), url('/vom/property-banner.webp');
  background-size: cover;
  background-position: center, center 48%;
}
.dashboard-heading h1, .dashboard-heading .muted, .dashboard-heading .eyebrow {
  text-shadow: 0 0 8px #fff, 0 0 3px #fff;
}
.card, .table-card, .forecast-table, .kpi-summary { background-color: #fff; border-color: var(--line); }
.summary-icon { color: var(--green); background: #eef7f6; }
.summary-item .label { color: #566174; font-weight: 500; }
.summary-item .value { color: var(--ink); font-weight: 600; }
.tenant-avatar { color: var(--green); background: #edf7f6; }
.note { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.note-mark { color: var(--green); background: var(--mint); }
.forecast-table tbody tr:hover { background: #f2f8f8; }
.forecast-table tfoot th { background: #f3f8f8; }
.forecast-status.repayment { color: #007b77; border-color: #add4d1; background: #f6fbfa; }
.forecast-status.repayment i { background: var(--green); }
.forecast-status.credit { color: var(--red); border-color: #e5c2be; background: #fff7f6; }
.forecast-status.credit i { background: var(--red); }
th { background: #f7f9fb; color: #627085; }
td { border-bottom-color: #e9edf1; }
label, .tenant-checks legend, .consumption-heading, .consumption-meter-head { color: #59667a; }
input, select, textarea, button { font-family: var(--theme-font); }
.button, .small, input, select, .remove-advance, .excel-filter summary,
.excel-filter-menu, .category-toggle { border-color: #cfd7df; }
input:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--mint); }
.primary, .actions .import-action, .actions .export-action { background: var(--green); border-color: var(--green); color: #fff; }
.primary:hover, .actions .import-action:hover, .actions .export-action:hover { background: #007b77; border-color: #007b77; }
.icon { background: #f0f4f7; color: var(--muted); }
dialog { box-shadow: 0 24px 80px #202b3b33; }
dialog::backdrop { background: #202b3b88; }
.excel-filter-menu { box-shadow: 0 8px 24px #202b3b1f; }
.message-detail { background: #f7f9fb; }
#toast { background: #007b77; }
.sort-handle:focus-visible, .allocation-add-hint:focus-visible { outline-color: var(--green); }