:root {
  --bg: #f4efe7;
  --surface: rgba(255, 250, 243, 0.92);
  --surface-strong: #fffdf8;
  --sidebar: #153243;
  --sidebar-accent: #1e4f68;
  --text: #1d2a33;
  --muted: #6b7780;
  --line: rgba(21, 50, 67, 0.12);
  --primary: #c96c3a;
  --primary-soft: rgba(201, 108, 58, 0.14);
  --success: #3e8b63;
  --warning: #d8a129;
  --danger: #c45454;
  --shadow: 0 18px 45px rgba(31, 41, 51, 0.12);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --month-tabs-offset: 48px;
  --menu-toggle-top: 8px;
  --menu-toggle-left-open: 350px;
  --menu-toggle-left-closed: 12px;
}

* {
  box-sizing: border-box;
}

/* Remove number-input spinner arrows everywhere (all pages, all fields). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(201, 108, 58, 0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(21, 50, 67, 0.12), transparent 24%),
    linear-gradient(135deg, #f8f3eb 0%, #efe6d9 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px 1fr;
  transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-shell.sidebar-hidden {
  grid-template-columns: 0 1fr;
}

/* In drawer mode the sidebar is position:fixed (out of the grid flow), so the
   main content would AUTO-PLACE into the collapsed first column and squeeze to
   a sliver — pin it to the full-width second track explicitly. */
.app-shell.sidebar-hidden .main {
  grid-column: 2;
}

.sidebar {
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-accent) 100%);
  color: #f7f8f9;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

/* AUTO-HIDE (unpinned) mode: the shell keeps the sidebar column collapsed the
   whole time — the content NEVER re-lays-out — and the sidebar becomes a fixed
   DRAWER that slides over the content with a pure transform (GPU-composited,
   no layout work per frame — animating the grid column re-laid-out the whole
   report table every frame and felt laggy). Pinning docks it back into the
   grid (a one-time layout change). */
.app-shell.sidebar-hidden .sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 236px;
  z-index: 60;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-shell.sidebar-hidden.sidebar-overlay-open .sidebar {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 14px 38px rgba(19, 33, 42, 0.3);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 10px;
}

.app-version-label {
  align-self: flex-start;
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 4px 0;
  padding: 2px 7px;
  border: 1px solid rgba(247, 248, 249, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(247, 248, 249, 0.7);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd8b6 0%, #c96c3a 100%);
  color: #13212a;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.brand-text h1,
.brand-text p {
  margin: 0;
}

.brand-text h1 {
  font-size: 0.9rem;
}

.brand-text p {
  font-size: 0.68rem;
  color: rgba(247, 248, 249, 0.72);
}

.nav-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(247, 248, 249, 0.58);
  margin: 10px 0 6px;
}

.employee-switcher-card {
  margin: 2px 0 8px;
  padding: 5px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Single-row "Access: <name>" (was a two-row head + auth block). */
.employee-switcher-line {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.employee-switcher-line strong {
  font-size: 0.72rem;
  color: #fff8ef;
}

.employee-switcher-line span {
  font-size: 0.7rem;
  color: rgba(255, 248, 239, 0.74);
  overflow: hidden;
  text-overflow: ellipsis;
}

.employee-switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.employee-switcher-head strong {
  font-size: 0.78rem;
  color: #fff8ef;
}

.employee-switcher-head span {
  font-size: 0.68rem;
  color: rgba(255, 248, 239, 0.72);
}

.employee-switcher-select {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.96);
  color: #173648;
  padding: 8px 12px;
}

.employee-switcher-auth {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.employee-switcher-auth span {
  font-size: 0.68rem;
  color: rgba(255, 248, 239, 0.74);
}

.employee-signout-btn {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #fff8ef;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.74rem;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 12px;
  color: rgba(247, 248, 249, 0.9);
  transition: background 0.2s ease, transform 0.2s ease;
  font-size: 0.84rem;
}

.nav-link:hover,
.nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}

.employee-locked-control {
  cursor: not-allowed !important;
  opacity: 0.78;
}

.nav-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
}

.sidebar-card {
  margin-top: 26px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-card h3,
.sidebar-card p {
  margin: 0;
}

.sidebar-card h3 {
  font-size: 1rem;
}

.sidebar-card p {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(247, 248, 249, 0.78);
}

.main {
  padding: 10px 12px;
  width: 100%;
  max-width: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  border: 0;
  background: var(--surface-strong);
  color: var(--text);
  width: 42px;
  height: 32px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  font-weight: 700;
  position: fixed;
  top: var(--menu-toggle-top);
  left: var(--menu-toggle-left-open);
  /* Above the auto-hide sidebar drawer (z 60) so the pin button stays clickable. */
  z-index: 70;
  transition: left 0.24s ease, transform 0.24s ease;
}

.app-shell.sidebar-hidden .menu-toggle {
  left: var(--menu-toggle-left-closed);
}

/* The sidebar is a pure auto-hide drawer on desktop (left edge reveals, moving
   away hides instantly) — no pinning, so the chevron only exists on mobile,
   where it opens/closes the overlay sidebar. */
@media (min-width: 901px) {
  .menu-toggle {
    display: none;
  }
}

body:not([data-page="report"]) .menu-toggle,
body[data-page="report"] .menu-toggle {
  top: 5px;
  left: 206px;
  width: 25px;
  height: 19px;
  min-height: 19px;
  padding: 0;
  border-radius: 6px;
  font-size: 0.4rem;
  box-sizing: border-box;
}

.menu-toggle .menu-toggle-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.page-heading h2,
.page-heading p {
  margin: 0;
}

.page-heading h2 {
  font-size: 1.7rem;
  margin-bottom: 6px;
}

.page-heading p {
  color: var(--muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


.search-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  min-width: 240px;
  color: var(--muted);
}

.action-btn {
  border: 0;
  border-radius: 16px;
  padding: 12px 18px;
  background: var(--primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.action-btn.danger {
  background: var(--danger);
  color: #fff;
}

body[data-page="tenant-database"] .content-grid {
  display: block;
}

body[data-page="lease"] .content-grid {
  display: block;
}

body[data-page="admin"] .content-grid {
  display: block;
}

body[data-page="vacate"] .content-grid {
  display: block;
}

.employee-access-panel {
  min-height: 220px;
}

.employee-access-empty {
  border: 1px dashed rgba(24, 52, 68, 0.14);
  border-radius: 18px;
  padding: 28px 22px;
  color: #5f7482;
  background: rgba(255, 255, 255, 0.56);
}

.admin-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
}

.admin-side-card,
.admin-editor-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(227, 209, 189, 0.9);
  border-radius: 22px;
  padding: 16px;
}

.admin-side-head,
.admin-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-side-head h4,
.admin-editor-head h4 {
  margin: 0;
}

.admin-editor-head p,
.admin-header p {
  margin: 4px 0 0;
}

.admin-editor-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-save-status {
  min-width: 170px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6d7e8a;
}

.admin-save-status.success {
  color: #2b7a57;
}

.admin-save-status.error {
  color: #c45454;
}

.admin-summary-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-summary-chip {
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(227, 209, 189, 0.9);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-summary-chip strong {
  font-size: 1rem;
}

.admin-summary-chip span {
  font-size: 0.72rem;
  color: #6d7e8a;
}

.admin-employee-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-employee-item {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(227, 209, 189, 0.9);
  background: #fffdf9;
}

.admin-employee-item > div {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.admin-employee-item .admin-drag-handle {
  flex: 0 0 auto;
  cursor: grab;
  color: rgba(11, 11, 11, 0.35);
  font-size: 0.85rem;
  letter-spacing: -2px;
  user-select: none;
}

.admin-employee-item.dragging {
  opacity: 0.45;
}

.admin-employee-item.active {
  border-color: #d77a37;
  box-shadow: 0 10px 24px rgba(215, 122, 55, 0.16);
}

.admin-employee-item strong,
.admin-permission-table strong {
  display: block;
}

.admin-employee-item span,
.admin-permission-table span {
  font-size: 0.76rem;
  color: #6d7e8a;
}

.admin-employee-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(26, 58, 76, 0.08);
  color: #1a3a4c !important;
  text-transform: capitalize;
}

.admin-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 16px;
}

.admin-password-wrap {
  position: relative;
}

.admin-password-wrap input {
  padding-right: 46px;
}

.admin-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(21, 50, 67, 0.06);
  color: #44606f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-password-toggle:hover {
  background: rgba(215, 122, 55, 0.12);
  color: #c96c3a;
}

.admin-password-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(215, 122, 55, 0.12);
}

.admin-password-toggle.active {
  background: rgba(215, 122, 55, 0.14);
  color: #c96c3a;
}

.admin-password-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.admin-notes-field {
  grid-column: 1 / -1;
}

.admin-permission-table-wrap {
  overflow-x: auto;
}

.admin-permission-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-permission-table th,
.admin-permission-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(227, 209, 189, 0.7);
  vertical-align: top;
}

.admin-permission-table th {
  text-align: left;
  font-size: 0.78rem;
  color: #5e7280;
}

.admin-permission-table th:last-child,
.admin-permission-table td:last-child {
  text-align: right;
}

.admin-permission-table th:last-child {
  padding-right: 18px;
}

.admin-permission-table select {
  min-width: 116px;
  height: 34px;
  padding: 0 30px 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(21, 50, 67, 0.14);
  background-color: rgba(255, 252, 247, 0.98);
  color: #173648;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: capitalize;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(23, 54, 72, 0.8) 50%),
    linear-gradient(135deg, rgba(23, 54, 72, 0.8) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 10px) calc(50% - 2px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 3px 10px rgba(21, 50, 67, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  margin-left: auto;
}

.admin-permission-table select:hover {
  border-color: rgba(215, 122, 55, 0.4);
  box-shadow: 0 5px 14px rgba(215, 122, 55, 0.08);
}

.admin-permission-table select:focus {
  outline: none;
  border-color: rgba(215, 122, 55, 0.65);
  box-shadow: 0 0 0 3px rgba(215, 122, 55, 0.12);
}

.admin-permission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-permission-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(227, 209, 189, 0.7);
  border-radius: 10px;
  background: #fffdf9;
}

.admin-permission-card strong,
.admin-permission-card span {
  display: block;
}

.admin-permission-card strong {
  overflow: hidden;
  color: #173648;
  font-size: 0.78rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-permission-card span {
  overflow: hidden;
  margin-top: 2px;
  color: #6d7e8a;
  font-size: 0.66rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-permission-card select {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 24px 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(21, 50, 67, 0.14);
  background-color: rgba(255, 252, 247, 0.98);
  color: #173648;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: capitalize;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.audit-log-panel {
  gap: 12px;
}

.audit-log-header {
  align-items: start;
  gap: 14px;
  justify-content: space-between;
}

.audit-log-title-block {
  min-width: 0;
}

.audit-log-title-block p {
  max-width: 760px;
}

.audit-log-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 8px;
  min-width: 360px;
}

.audit-log-summary-chip {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(19, 55, 74, 0.05);
  border: 1px solid rgba(19, 55, 74, 0.08);
}

.audit-log-summary-chip strong,
.audit-log-summary-chip span {
  display: block;
}

.audit-log-summary-chip strong {
  font-size: 1.15rem;
  color: #173648;
  line-height: 1.1;
}

.audit-log-summary-chip span {
  margin-top: 2px;
  font-size: 0.7rem;
  color: #6f8291;
}

.audit-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(227, 209, 189, 0.72);
}

.audit-log-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.audit-log-tab {
  border: 1px solid rgba(19, 55, 74, 0.12);
  background: #fff;
  color: #4e6577;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  line-height: 1;
}

.audit-log-tab.active {
  background: #d9783d;
  border-color: #d9783d;
  color: #fff8ef;
}

.audit-log-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  flex: 1 1 520px;
}

.audit-log-filters .field-group {
  flex: 0 0 auto;
}

.audit-log-filters .field-group select {
  width: 180px;
}

#audit-log-search {
  width: 480px;
  max-width: 100%;
}

.audit-log-filters .audit-log-archive {
  flex: 1 1 260px;
  min-width: 240px;
}

.audit-log-filters .audit-log-user-filter select {
  width: 160px;
}

.audit-log-archive {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-log-archive-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(227, 209, 189, 0.72);
}

.audit-log-archive-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(19, 55, 74, 0.08);
}

.audit-log-archive-name {
  font-weight: 600;
  color: #2c4a5e;
}

.audit-log-archive-meta {
  color: #4e6577;
  font-size: 0.82rem;
  margin-right: auto;
}

.audit-log-archive-select {
  flex: 1 1 320px;
  max-width: 560px;
}

.audit-log-table-wrap {
  border: 1px solid rgba(19, 55, 74, 0.08);
  border-radius: 16px;
  overflow: auto;
  background: rgba(255, 253, 250, 0.92);
  box-shadow: 0 8px 18px rgba(28, 38, 46, 0.035);
}

.audit-log-table {
  width: 100%;
  min-width: 1500px;
  border-collapse: collapse;
}

.audit-log-table th,
.audit-log-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(227, 209, 189, 0.55);
  vertical-align: top;
  text-align: left;
}

.audit-log-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f6efe6;
  color: #6b7f8d;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.audit-log-table tbody tr:hover {
  background: rgba(255, 248, 238, 0.88);
}

.audit-log-table tbody tr:last-child td {
  border-bottom: 0;
}

.audit-log-cell-primary {
  color: #173648;
  font-size: 0.8rem;
  line-height: 1.28;
  word-break: break-word;
  /* The app-wide `th, td { white-space: nowrap }` rule is inherited into these
     divs and silently blocks ALL wrapping — without this reset, long names just
     overflow across the neighboring columns. */
  white-space: normal;
}

.audit-log-cell-secondary {
  margin-top: 2px;
  color: #7a8d9b;
  font-size: 0.7rem;
  line-height: 1.2;
}

.audit-log-stacked-label {
  display: inline-block;
  line-height: 1.1;
}

.audit-log-col-time {
  min-width: 140px;
}

.audit-log-col-num {
  width: 34px;
  white-space: nowrap;
  text-align: right;
}

.audit-log-show-more {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 12px 0 4px;
}

.audit-log-col-before,
.audit-log-col-after {
  min-width: 140px;
  width: 140px;
}

.audit-log-badge {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(19, 55, 74, 0.08);
  color: #4f6575;
  line-height: 1;
}

.audit-log-badge.subtle {
  background: rgba(19, 55, 74, 0.05);
  color: #708290;
}

.audit-log-badge.building,
.audit-log-badge.reset {
  background: rgba(217, 163, 61, 0.18);
  color: #9a6d18;
}

.audit-log-badge.receipt {
  background: rgba(78, 130, 187, 0.18);
  color: #315d8b;
}

.audit-log-badge.lease {
  background: rgba(47, 155, 105, 0.18);
  color: #2c7b57;
}

.audit-log-badge.archive,
.audit-log-badge.tenant {
  background: rgba(215, 100, 86, 0.18);
  color: #9f4f44;
}

.audit-log-badge.admin {
  background: rgba(110, 95, 170, 0.18);
  color: #6851a6;
}

.audit-log-change {
  border-radius: 10px;
  padding: 5px 8px;
  min-height: 28px;
  font-size: 0.78rem;
  line-height: 1.22;
  word-break: break-word;
}

.audit-log-change.before {
  background: #fff2ef;
  border: 1px solid #f2ccc4;
}

.audit-log-change.after {
  background: #eef8f1;
  border: 1px solid #cfe7d6;
}

.audit-log-col-details {
  min-width: 260px;
  width: 260px;
  max-width: 320px;
}

/* Tenant and Building names wrap BETWEEN words only — never inside a word
   (mid-word breaks look corrupted in Arabic, where letters connect). The column
   widens just enough to fit the longest single word; multi-word names wrap onto
   extra lines. The table wrapper scrolls horizontally, so the extra width is fine. */
.audit-log-col-tenant {
  width: 170px;
  min-width: 170px;
}

.audit-log-col-tenant .audit-log-cell-primary,
.audit-log-col-building .audit-log-cell-primary {
  word-break: normal;
  overflow-wrap: normal;
}

.audit-log-col-building {
  width: 110px;
  min-width: 110px;
}

.audit-log-col-unit {
  width: 80px;
  max-width: 80px;
}

.audit-log-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  max-height: calc(1.22em * 3);
}

@media (max-width: 1200px) {
  .audit-log-header {
    align-items: start;
  }

  .audit-log-summary-strip {
    width: 100%;
    min-width: 0;
  }

  .audit-log-filters {
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr);
  }
}

@media (max-width: 760px) {
  .audit-log-toolbar {
    align-items: stretch;
  }

  .audit-log-filters {
    grid-template-columns: 1fr;
  }

  .audit-log-summary-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }
}

body[data-page="auth"] {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(228, 156, 101, 0.28), transparent 32%),
    radial-gradient(circle at bottom right, rgba(23, 54, 72, 0.22), transparent 28%),
    linear-gradient(180deg, #f7efe5 0%, #f2ece3 100%);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-card {
  width: min(440px, 100%);
  padding: 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(227, 209, 189, 0.9);
  box-shadow: 0 24px 60px rgba(40, 63, 78, 0.12);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.auth-brand h1,
.auth-brand p {
  margin: 0;
}

.auth-brand h1 {
  font-size: 1.4rem;
}

.auth-brand p {
  margin-top: 4px;
  color: #6b7d89;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-error {
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(215, 100, 86, 0.12);
  color: #9d3e31;
  font-size: 0.86rem;
}

.auth-submit {
  width: 100%;
  justify-content: center;
}

.tenant-database-panel {
  padding: 18px;
}

.tenant-database-header h3 {
  margin-bottom: 4px;
}

.tenant-database-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tenant-database-pending-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.tenant-database-pending-card {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid var(--line);
}

.tenant-database-pending-card small,
.tenant-database-pending-card strong,
.tenant-database-pending-card span {
  display: block;
}

.tenant-database-pending-card small,
.tenant-database-pending-card span {
  color: var(--muted);
}

.tenant-database-pending-card small {
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.tenant-database-pending-card strong {
  font-size: 1.14rem;
  margin-bottom: 4px;
}

.tenant-database-pending-card span {
  font-size: 0.77rem;
  line-height: 1.4;
}

.tenant-database-kpi {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.9);
  border: 1px solid var(--line);
}

.tenant-database-kpi small,
.tenant-database-kpi strong {
  display: block;
}

.tenant-database-kpi small {
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.tenant-database-kpi strong {
  font-size: 1.28rem;
}

.tenant-database-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(170px, 0.8fr) minmax(210px, 1fr) minmax(170px, 0.8fr);
  gap: 10px;
  margin-bottom: 14px;
}

.tenant-database-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.7fr);
  gap: 14px;
  align-items: start;
}

.tenant-database-list-wrap,
.tenant-database-detail {
  background: rgba(255, 253, 248, 0.84);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  min-height: 560px;
}

.tenant-database-list-head,
.tenant-database-detail-head,
.tenant-database-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tenant-database-list-head {
  margin-bottom: 12px;
}

.tenant-database-list-head h4,
.tenant-database-detail-head h4,
.tenant-database-history-head h5 {
  margin: 0;
}

.tenant-database-list-head span,
.tenant-database-detail-head p,
.tenant-database-history-head p {
  color: var(--muted);
  font-size: 0.82rem;
}

/* "Added <date>" line under the tenant name — when this tenant was first added. */
.tenant-database-detail-head p.tenant-database-detail-created {
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #8a97a0;
  letter-spacing: 0.01em;
}

.tenant-database-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 210px);
  overflow: auto;
  padding-right: 2px;
}

.tenant-database-result {
  width: 100%;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: #fffdf8;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.tenant-database-result.active {
  border-color: rgba(201, 108, 58, 0.45);
  box-shadow: 0 10px 24px rgba(201, 108, 58, 0.12);
  background: rgba(201, 108, 58, 0.07);
}

.tenant-database-result-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tenant-database-result-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tenant-database-result-copy strong,
.tenant-database-result-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-database-result-copy strong {
  font-size: 0.93rem;
}

.tenant-database-result-copy span {
  color: var(--muted);
  font-size: 0.77rem;
}

.tenant-database-similar-note {
  color: #b46235 !important;
  font-weight: 600;
}

.tenant-database-result-badge,
.tenant-database-status-pill,
.tenant-database-receipt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tenant-database-status-pill.delete-action {
  background: rgba(196, 84, 84, 0.12);
  color: var(--danger);
  border: 1px solid rgba(196, 84, 84, 0.18);
  font-size: 0.67rem;
  padding: 4px 8px;
  cursor: pointer;
}

.tenant-database-result-badge.active,
.tenant-database-status-pill.active {
  background: rgba(62, 139, 99, 0.14);
  color: #2f7a55;
}

.tenant-database-result-badge.ex,
.tenant-database-status-pill.ex {
  background: rgba(201, 108, 58, 0.14);
  color: #b46235;
}

.tenant-database-result-badge.archived,
.tenant-database-status-pill.archived {
  background: rgba(21, 50, 67, 0.1);
  color: #46616f;
}

.tenant-database-result-badge.payment,
.tenant-database-status-pill.payment {
  background: rgba(216, 161, 41, 0.12);
  color: #9e7415;
}

.tenant-database-result-badge.payment.paid,
.tenant-database-status-pill.payment.paid {
  background: rgba(62, 139, 99, 0.14);
  color: #2f7a55;
}

.tenant-database-result-badge.payment.unpaid,
.tenant-database-status-pill.payment.unpaid {
  background: rgba(216, 161, 41, 0.14);
  color: #946d16;
}

.tenant-database-result-badge.payment.partial,
.tenant-database-status-pill.payment.partial {
  background: rgba(192, 122, 33, 0.14);
  color: #9a5c14;
}

.tenant-database-result-badge.payment.late,
.tenant-database-status-pill.payment.late {
  background: rgba(196, 84, 84, 0.18);
  color: #9f2f2f;
  border: 1px solid rgba(196, 84, 84, 0.28);
}

/* "No Receipt": active tenant with rent due but no receipt entered yet.
   Neutral grey so it doesn't read as an overdue/unpaid balance. */
.tenant-database-result-badge.payment.no-receipt,
.tenant-database-status-pill.payment.no-receipt {
  background: rgba(108, 123, 131, 0.14);
  color: #5b6b73;
  border: 1px solid rgba(108, 123, 131, 0.24);
}

.tenant-database-result-badge.insured,
.tenant-database-status-pill.insured {
  background: rgba(67, 132, 201, 0.12);
  color: #2f6899;
}

.tenant-database-result-badge.planned,
.tenant-database-status-pill.planned {
  background: rgba(124, 113, 197, 0.12);
  color: #5f54a5;
}

/* Same orange as the Report's Move Out badge (.move-out-badge). */
.tenant-database-result-badge.move-out,
.tenant-database-status-pill.move-out {
  background: rgba(212, 118, 55, 0.16);
  color: #a4560f;
}

/* Tenant DB: editable unit note (the same row-notes the Report page shows). */
.tenant-database-note-edit-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.tenant-database-note-edit-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(21, 50, 67, 0.18);
  border-radius: 8px;
  background: #fffdf8;
  font: inherit;
  font-size: 0.74rem;
}

.tenant-database-note-edit-row .action-btn {
  flex: 0 0 auto;
}

/* Vacant Portfolio card: donut + vacancy list on the left, the month's Report
   notes filling the previously-empty right side. */
.vacant-card-split {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.vacant-card-main {
  flex: 0 0 340px;
  min-width: 0;
}

.vacant-card-notes {
  flex: 1 1 auto;
  min-width: 0;
}

.vacant-card-notes h5 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #56707f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vacant-card-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.vacant-card-note-item {
  border: 1px solid rgba(21, 50, 67, 0.1);
  border-radius: 10px;
  background: #fffaf3;
  padding: 7px 10px;
}

.vacant-card-note-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.vacant-card-note-meta strong {
  font-size: 0.7rem;
  color: #173648;
}

.vacant-card-note-meta span {
  font-size: 0.66rem;
  color: #708492;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vacant-card-note-text {
  margin-top: 2px;
  font-size: 0.7rem;
  color: #33505f;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .vacant-card-split {
    flex-direction: column;
  }
  .vacant-card-main {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Insurance Returned column: a non-zero value is money OUT of the bank. */
.calc-value.insurance-returned-value {
  color: #a4560f;
  font-weight: 700;
}

/* Report ex-tenant view: the Unit column mirrors the Tenant Tracker's Units
   column — the unit value with the building name stacked below it. */
.live-preview-extenant-table .ex-unit-cell input[data-field="unit"] {
  display: block;
  margin: 0 auto;
}

.live-preview-extenant-table .ex-unit-building-label {
  display: block;
  color: #708492;
  font-size: 0.64rem;
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}

/* In the Tenant DB detail the Move Out pill is a BUTTON: clicking it completes
   the scheduled move-out immediately (mid-month unit turnover). */
button.tenant-database-status-pill.move-out {
  border: 1px solid rgba(212, 118, 55, 0.4);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
}

button.tenant-database-status-pill.move-out:hover {
  background: rgba(212, 118, 55, 0.3);
}

.tenant-database-result-badge.owner,
.tenant-database-status-pill.owner,
.tenant-database-receipt-badge.owner {
  background: rgba(114, 127, 148, 0.12);
  color: #536173;
}

.tenant-database-result-badge.owner.current,
.tenant-database-status-pill.owner.current {
  background: rgba(62, 139, 99, 0.1);
  color: #2f7a55;
}

.tenant-database-result-badge.owner.pending,
.tenant-database-status-pill.owner.pending,
.tenant-database-receipt-badge.owner {
  background: rgba(201, 108, 58, 0.12);
  color: #b46235;
}

.tenant-database-result-badge.owner.ex,
.tenant-database-status-pill.owner.ex {
  background: rgba(201, 108, 58, 0.14);
  color: #b46235;
}

.tenant-database-result-badge.owner.archived,
.tenant-database-status-pill.owner.archived {
  background: rgba(21, 50, 67, 0.1);
  color: #46616f;
}

.tenant-database-detail-head {
  margin-bottom: 12px;
}

.tenant-database-detail-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tenant-database-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.tenant-database-info-card,
.tenant-database-note-card {
  padding: 11px 12px;
  border-radius: 14px;
  background: #fffdf8;
  border: 1px solid rgba(21, 50, 67, 0.08);
}

.tenant-database-info-card small,
.tenant-database-note-card small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 4px;
}

.tenant-database-info-card strong,
.tenant-database-note-card strong {
  font-size: 0.88rem;
  line-height: 1.45;
  word-break: break-word;
}

.tenant-database-note-card {
  margin-bottom: 12px;
}

/* Scheduled (future) contract change — pending until its month opens. */
.tenant-database-scheduled-card {
  background: #fff8ec;
  border-color: rgba(193, 127, 23, 0.35);
}

/* Header: icon + title + one-line explanation. */
.tenant-database-scheduled-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tenant-database-scheduled-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.tenant-database-scheduled-head-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tenant-database-scheduled-head-text strong {
  color: #7a5410;
  font-size: 0.9rem;
}
.tenant-database-scheduled-head-text span {
  color: #9a7a3d;
  font-size: 0.72rem;
}

.tenant-database-scheduled-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

/* Each scheduled change is its own panel: an "Effective from <month>" strip
   plus labeled value boxes so every number is clearly named. */
.tenant-database-scheduled-item {
  border: 1px solid rgba(193, 127, 23, 0.28);
  border-radius: 8px;
  background: #fffdf8;
  padding: 6px 8px;
}
.tenant-database-scheduled-when {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.tenant-database-scheduled-when-label {
  color: #9a7a3d;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.tenant-database-scheduled-when strong {
  color: #6b4a0e;
  font-size: 0.92rem;
}
.tenant-database-scheduled-cancel {
  margin-left: auto;
  align-self: center;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #b23b3b;
  background: #fff;
  border: 1px solid rgba(178, 59, 59, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tenant-database-scheduled-cancel:hover {
  background: #b23b3b;
  color: #fff;
}
.tenant-database-scheduled-fields {
  /* Each field hugs its own content (no 1fr stretch) so the four boxes stay
     compact and left-aligned instead of spanning the full width. */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.tenant-database-scheduled-field {
  flex: 0 0 auto;
}
.tenant-database-scheduled-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: #fdf4e3;
  border: 1px solid rgba(193, 127, 23, 0.18);
}
.tenant-database-scheduled-field small {
  color: #9a7a3d;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.tenant-database-scheduled-field strong {
  color: #3a2c10;
  font-size: 0.78rem;
  white-space: nowrap;
}
/* The period date-range is longer — let it use a slightly smaller font so all
   four fields (incl. Contract Period) sit on the first row. */
.tenant-database-scheduled-period strong {
  font-size: 0.7rem;
}

/* Canceled scheduled-change card in the Receipt History — the SAME layout as the
   pending (amber) card, recolored red so it reads as "this never took effect".
   The applied card reuses the amber classes unchanged. */
body[data-page="tenant-database"] .tenant-database-note-card.tenant-database-scheduled-card-canceled {
  background: #fdf1f1;
  border-color: rgba(178, 59, 59, 0.35);
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-head-text strong {
  color: #9a2e2e;
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-head-text span {
  color: #b06a6a;
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-item {
  border-color: rgba(178, 59, 59, 0.28);
  background: #fffafa;
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-when-label {
  color: #b06a6a;
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-when strong {
  color: #6a1f1f;
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-field {
  background: #fbe6e6;
  border-color: rgba(178, 59, 59, 0.2);
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-field small {
  color: #b06a6a;
}
.tenant-database-scheduled-card-canceled .tenant-database-scheduled-field strong {
  color: #4a1f1f;
}

/* Receipt-History MESSAGE (e.g. "scheduled contract change applied"). NOT a
   receipt — a distinct info strip, no number/amount/actions. */
.tenant-database-receipt-message {
  /* Same footprint as a normal receipt item (padding / radius / min-height) so
     it reads as an equal row in the list — just a dashed amber "message" style
     instead of a receipt card. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  min-height: 72px;
  box-sizing: border-box;
  border: 1px dashed rgba(193, 127, 23, 0.45);
  border-radius: 14px;
  background: #fff8ec;
}
.tenant-database-receipt-message-badge {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f3e2c3;
  color: #7a5410;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}
.tenant-database-receipt-message-text {
  color: #5c4a2a;
  font-size: 0.78rem;
  line-height: 1.35;
}
.tenant-database-receipt-message-text strong {
  color: #3a2c10;
}
/* Canceled-before-applying variant — red dashed so it reads as "never happened". */
.tenant-database-receipt-message.tenant-database-receipt-message-canceled {
  border-color: rgba(178, 59, 59, 0.45);
  background: #fdf1f1;
}
.tenant-database-receipt-message-canceled .tenant-database-receipt-message-badge {
  background: #f6d6d6;
  color: #9a2e2e;
}
.tenant-database-receipt-message-canceled .tenant-database-receipt-message-text {
  color: #6a3535;
}
.tenant-database-receipt-message-canceled .tenant-database-receipt-message-text strong {
  color: #4a1f1f;
}

/* "Show more receipts" pager button under the Receipt History list. */
.tenant-database-receipt-show-more {
  width: 100%;
  margin-top: 2px;
  padding: 9px 12px;
  border: 1px dashed rgba(21, 50, 67, 0.22);
  border-radius: 12px;
  background: #fbfaf6;
  color: #2b4a5a;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tenant-database-receipt-show-more:hover {
  background: #f1efe7;
  border-color: rgba(21, 50, 67, 0.4);
}
.tenant-database-receipt-show-more span {
  font-weight: 500;
  color: var(--muted, #6b7b83);
}

/* Editable Phone card (multiple numbers) */
.tenant-database-phone-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.tenant-database-phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tenant-database-phone-row input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 8px;
  font: inherit;
  font-size: 0.86rem;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(21, 50, 67, 0.18);
  border-radius: 8px;
}

.tenant-database-phone-row input:focus {
  outline: none;
  border-color: rgba(21, 50, 67, 0.45);
}

.tenant-database-phone-remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(196, 64, 50, 0.12);
  color: #b23a2c;
  font-size: 17px;
  line-height: 1;
}

.tenant-database-phone-remove:hover {
  background: rgba(196, 64, 50, 0.2);
}

.tenant-database-phone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tenant-database-phone-add {
  background: transparent;
  border: 1px dashed rgba(21, 50, 67, 0.3);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--muted);
}

.tenant-database-phone-add:hover:not([disabled]) {
  border-color: rgba(21, 50, 67, 0.5);
  color: inherit;
}

.tenant-database-phone-add[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.tenant-database-phone-save {
  padding: 5px 14px;
  font-size: 0.8rem;
}

/* Duo lease: display-only second tenant card (collapsible) */
/* Second tenant (duo lease): a collapsible dropdown shown UNDER the info grid. */
.tenant-database-second-tenant {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(21, 50, 67, 0.1);
  background: #fffdf8;
}

.tenant-database-second-tenant > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
}

.tenant-database-second-tenant > summary::-webkit-details-marker {
  display: none;
}

.tenant-database-second-tenant-label {
  display: flex;
  flex-direction: column;
}

.tenant-database-second-tenant-label small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 4px;
}

.tenant-database-second-tenant-label strong {
  font-size: 0.88rem;
}

.tenant-database-second-tenant-chevron {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  opacity: 0.55;
  transition: transform 0.15s ease;
}

.tenant-database-second-tenant[open] .tenant-database-second-tenant-chevron {
  transform: rotate(180deg);
}

/* Inner content reuses the main info-grid + info-card look (consistent boxes);
   this class only adds the gap below the summary. */
.tenant-database-second-tenant-grid {
  margin-top: 12px;
}

.tenant-database-contract-editor {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: #fffdf8;
}

.tenant-database-contract-summary {
  display: block;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tenant-database-contract-summary::-webkit-details-marker {
  display: none;
}

.tenant-database-contract-summary .tenant-database-history-head.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.tenant-database-contract-toggle {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.tenant-database-contract-toggle::before,
.tenant-database-contract-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: #b46235;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, opacity 160ms ease;
}

.tenant-database-contract-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.tenant-database-contract-editor[open] .tenant-database-contract-toggle::after {
  opacity: 0;
}

.tenant-database-history-head.compact {
  margin-bottom: 12px;
}

.tenant-database-contract-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* Duo second-tenant fields live in a wrapper so they can be toggled as a group;
   display:contents lets their field-groups flow as normal grid cells when shown. */
.tenant-contract-duo-fields:not([hidden]) {
  display: contents;
}

.tenant-database-contract-insurance {
  grid-column: 1 / -1;
}

.tenant-database-contract-actions {
  display: flex;
  align-items: end;
}

.tenant-database-history-head {
  margin-bottom: 10px;
}

.tenant-database-receipt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tenant-database-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.tenant-database-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.tenant-database-section-heading h5 {
  margin: 0;
}

.tenant-database-section-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.tenant-database-repair-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 8px 10px;
  max-width: 920px;
}

.tenant-database-repair-span-2 {
  grid-column: 1 / -1;
}

.tenant-database-repair-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tenant-database-receipt-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: #fffdf8;
}

.tenant-database-receipt-item.deleted {
  border-color: rgba(185, 72, 72, 0.22);
  background: rgba(255, 241, 241, 0.96);
}

.tenant-database-receipt-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Internal receipt comment: shown in the receipt info only, never on the print. */
.tenant-database-receipt-comment {
  color: var(--muted);
  font-style: italic;
}

.tenant-database-receipt-vacant-note {
  color: #5f6870;
  font-weight: 600;
}

.tenant-database-receipt-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tenant-database-receipt-copy span {
  color: var(--muted);
  font-size: 0.78rem;
  word-break: break-word;
}

.tenant-database-receipt-badge {
  background: rgba(201, 108, 58, 0.12);
  color: #b46235;
}

.tenant-database-receipt-badge.payment-state.paid {
  background: rgba(62, 139, 99, 0.14);
  color: #2f7a55;
}

.tenant-database-receipt-badge.payment-state.unpaid {
  background: rgba(216, 161, 41, 0.14);
  color: #946d16;
}

.tenant-database-receipt-badge.payment-state.partial {
  background: rgba(192, 122, 33, 0.14);
  color: #9a5c14;
}

/* Fully-vacant month: a receipt/batch-return row whose whole rent is offset by the
   Vacant deduction (Actual Rent 0). Reuses the grey "status-vacant" look. */
.tenant-database-receipt-badge.payment-state.vacant {
  background: rgba(232, 234, 237, 0.92);
  color: #5f6870;
}

.tenant-database-receipt-badge.payment-state.late {
  background: rgba(196, 84, 84, 0.18);
  color: #9f2f2f;
  border: 1px solid rgba(196, 84, 84, 0.28);
}

.tenant-database-receipt-badge.payment-state.extra {
  background: rgba(78, 130, 187, 0.14);
  color: #315d8b;
}

.tenant-database-receipt-badge.payment-state.deleted {
  background: rgba(185, 72, 72, 0.16);
  color: #9f2f2f;
  border: 1px solid rgba(185, 72, 72, 0.28);
}

.tenant-database-receipt-badge.fully-covered {
  background: rgba(34, 139, 64, 0.18);
  color: #166534;
  border: 1px solid rgba(34, 139, 64, 0.35);
  font-weight: 600;
}

/* Ex-tenant waiver (forgiven debt). Fully Waived = whole month forgiven (purple,
   settled); Partially Waived = part forgiven (amber, still partly owed). */
.tenant-database-receipt-badge.fully-waived {
  background: rgba(124, 58, 173, 0.16);
  color: #6b21a8;
  border: 1px solid rgba(124, 58, 173, 0.32);
  font-weight: 600;
}

.tenant-database-receipt-badge.partially-waived {
  background: rgba(147, 109, 22, 0.14);
  color: #946d16;
  border: 1px solid rgba(147, 109, 22, 0.3);
  font-weight: 600;
}

.tenant-database-receipt-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.tenant-database-receipt-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* Shown in place of the Edit button on the Tenant Database page for ex-tenant
   receipts (which are edited on the Ex-Tenant page instead). */
.tenant-database-receipt-edit-note {
  font-size: 0.66rem;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
}

.tenant-database-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.tenant-database-empty.large {
  min-height: 360px;
  display: grid;
  place-items: center;
}

.ex-tenant-manual-card {
  margin-bottom: 14px;
}

.ex-tenant-manual-grid,
.ex-tenant-receipt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ex-tenant-manual-notes,
.ex-tenant-receipt-details {
  grid-column: span 2;
}

.ex-tenant-manual-card textarea,
.ex-tenant-manual-card input,
.ex-tenant-manual-card select {
  background: #fffdf8;
}

.lease-panel {
  padding: 18px;
}

.lease-editor-shell {
  display: grid;
  gap: 16px;
}

.lease-page-tabs {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
}

.lease-page-tab {
  border: 1px solid rgba(21, 50, 67, 0.1);
  background: rgba(255, 252, 247, 0.82);
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.lease-page-tab.active {
  background: rgba(216, 120, 53, 0.14);
  color: #9d532a;
  border-color: rgba(216, 120, 53, 0.24);
}

.lease-editor-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(21, 50, 67, 0.96) 0%, rgba(38, 83, 103, 0.96) 100%);
  color: #f8f2ea;
  box-shadow: 0 18px 34px rgba(21, 50, 67, 0.18);
}

.lease-editor-banner-copy h4,
.lease-editor-banner-copy p {
  margin: 0;
}

.lease-editor-kicker {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(248, 242, 234, 0.92);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lease-editor-banner-copy h4 {
  font-size: 1.34rem;
  line-height: 1.25;
}

.lease-editor-banner-copy p {
  margin-top: 8px;
  color: rgba(248, 242, 234, 0.76);
  max-width: 58ch;
  line-height: 1.6;
}

.lease-editor-banner-meta {
  display: grid;
  gap: 10px;
}

.lease-editor-meta-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lease-editor-meta-card small,
.lease-editor-meta-card strong {
  display: block;
}

.lease-editor-meta-card small {
  font-size: 0.72rem;
  color: rgba(248, 242, 234, 0.68);
  margin-bottom: 5px;
}

.lease-editor-meta-card strong {
  font-size: 0.96rem;
  line-height: 1.45;
}

.lease-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.6fr);
  gap: 14px;
  align-items: start;
}

.lease-side-card,
.lease-form-card {
  background: rgba(255, 251, 245, 0.96);
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(25, 42, 54, 0.06);
}

.lease-tab-lease .lease-editor-shell,
.lease-tab-incoming .lease-editor-shell {
  gap: 0;
}

.lease-tab-lease .lease-editor-header,
.lease-tab-incoming .lease-editor-header {
  display: block;
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 14px;
}

.lease-tab-lease .lease-editor-header .lease-editor-kicker,
.lease-tab-lease .lease-editor-header-chips,
.lease-tab-incoming .lease-editor-header .lease-editor-kicker,
.lease-tab-incoming .lease-editor-header-chips {
  display: none;
}

.lease-tab-lease .lease-editor-header h4,
.lease-tab-incoming .lease-editor-header h4 {
  font-size: 1rem;
  margin-top: 0;
}

.lease-tab-lease .lease-editor-header p,
.lease-tab-incoming .lease-editor-header p {
  margin-top: 4px;
  max-width: none;
}

.lease-tab-lease .lease-editor-sections,
.lease-tab-incoming .lease-editor-sections {
  gap: 0;
}

.lease-tab-lease .lease-editor-section,
.lease-tab-incoming .lease-editor-section {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.lease-tab-lease .lease-editor-section-head,
.lease-tab-incoming .lease-editor-section-head {
  display: none;
}

.lease-tab-lease .lease-attachments-card,
.lease-tab-incoming .lease-attachments-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(21, 50, 67, 0.08);
}

.lease-tab-lease .lease-actions,
.lease-tab-incoming .lease-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  margin-top: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lease-tab-lease .lease-actions-copy,
.lease-tab-incoming .lease-actions-copy {
  display: none;
}

.lease-tab-editor .lease-editor-banner,
.lease-tab-editor .lease-editor-header,
.lease-tab-editor .lease-editor-section:not(.lease-editor-section-notes),
.lease-tab-editor .lease-attachments-card {
  display: none;
}

.lease-tab-lease .lease-editor-section-notes {
  display: none;
}

.lease-tab-editor .lease-editor-shell {
  gap: 0;
}

.lease-tab-editor .lease-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  width: 100%;
}

.lease-tab-editor .lease-side-card {
  display: none;
}

.lease-tab-editor .lease-form-card {
  padding: 16px;
  width: 100%;
}

.lease-tab-editor .lease-editor-sections {
  gap: 0;
  width: 100%;
}

.lease-tab-editor .lease-editor-section-notes {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  width: 100%;
}

.lease-tab-editor .lease-editor-lease-picker {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.lease-tab-editor .lease-editor-lease-picker-head h5,
.lease-tab-editor .lease-editor-lease-picker-head p {
  margin: 0;
}

.lease-tab-editor .lease-editor-lease-picker-head p {
  margin-top: 4px;
  color: var(--muted);
}

.lease-tab-editor .lease-editor-lease-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.lease-tab-editor .lease-editor-lease-picker-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Buttons that sit directly under their related editor field (New/Delete under
   Lease, Save Name under Lease Name, Move Up/Down under Order). */
.lease-editor-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.lease-editor-field-actions .action-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 0.76rem;
  line-height: 1.2;
}

.lease-tab-editor .lease-notes-field {
  margin: 0;
}

.lease-tab-editor .lease-notes-toolbar {
  position: static;
}

.lease-tab-editor .lease-notes-editor {
  min-height: 760px;
}

.lease-tab-editor .lease-actions {
  justify-content: flex-end;
  padding: 0;
  margin-top: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lease-tab-editor .lease-actions-copy {
  display: none;
}

.lease-side-head h4 {
  margin: 0 0 4px;
}

.lease-side-head p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.lease-picker-grid,
.lease-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

/* Forces the next field-group onto a new grid row (e.g. duo second-tenant
   fields start below the first tenant's row). */
.lease-form-rowbreak {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  padding: 0;
}

.lease-unit-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lease-unit-chip {
  padding: 12px 13px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(247, 241, 232, 0.7) 0%, rgba(255, 253, 249, 0.95) 100%);
  border: 1px solid rgba(21, 50, 67, 0.08);
}

.lease-unit-chip small,
.lease-unit-chip strong {
  display: block;
}

.lease-unit-chip small {
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 4px;
}

.lease-unit-chip strong {
  font-size: 0.9rem;
}

.lease-notes-field {
  grid-column: 1 / -1;
}

.lease-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(21, 50, 67, 0.08);
  margin-bottom: 16px;
}

.lease-editor-header h4,
.lease-editor-header p,
.lease-editor-section-head h5,
.lease-editor-section-head p {
  margin: 0;
}

.lease-editor-header h4 {
  font-size: 1.18rem;
  margin-top: 4px;
}

.lease-editor-header p {
  margin-top: 6px;
  color: var(--muted);
  max-width: 52ch;
}

.lease-editor-header-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lease-editor-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(201, 108, 58, 0.12);
  border: 1px solid rgba(201, 108, 58, 0.18);
  color: #9d532a;
  font-size: 0.8rem;
  font-weight: 700;
}

.lease-editor-sections {
  display: grid;
  gap: 14px;
}

.lease-editor-section {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.96) 0%, rgba(250, 244, 236, 0.72) 100%);
  border: 1px solid rgba(21, 50, 67, 0.07);
}

.lease-editor-section-head {
  margin-bottom: 12px;
}

.lease-editor-section-head h5 {
  font-size: 0.98rem;
}

.lease-editor-section-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.lease-editor-section-notes {
  padding-bottom: 18px;
}

.lease-notes-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  position: sticky;
  top: 8px;
  z-index: 20;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.98) 0%, rgba(250, 245, 237, 0.95) 100%);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(21, 50, 67, 0.08);
}

.lease-notes-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 12px;
  background: rgba(255, 252, 247, 0.62);
}

.lease-notes-toolbar-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.lease-notes-tool {
  border: 1px solid rgba(21, 50, 67, 0.1);
  background: rgba(255, 252, 247, 0.76);
  color: #66757f;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.lease-notes-tool.active {
  background: rgba(216, 120, 53, 0.14);
  color: var(--accent);
  border-color: rgba(216, 120, 53, 0.24);
}

.lease-notes-toolbar select {
  min-width: 92px;
  border-radius: 10px;
  border: 1px solid rgba(21, 50, 67, 0.1);
  padding: 6px 10px;
  background: rgba(255, 252, 247, 0.76);
  font: inherit;
}

.lease-notes-editor {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 18px;
  font: inherit;
  background: rgba(255, 253, 249, 0.98);
  color: #44545f;
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
  line-height: 1.8;
  overflow: auto;
  white-space: pre-wrap;
}

.lease-notes-editor:focus {
  outline: none;
  border-color: rgba(21, 50, 67, 0.14);
  box-shadow: 0 0 0 4px rgba(21, 50, 67, 0.06);
}

.lease-notes-editor:empty::before {
  content: attr(data-placeholder);
  color: rgba(21, 50, 67, 0.42);
}

.lease-notes-editor hr {
  border: 0;
  border-top: 1px solid rgba(21, 50, 67, 0.28);
  margin: 14px 0;
}

.lease-notes-editor .lease-signature-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  margin: 28px 0 0;
  text-align: center;
}

.lease-notes-editor .lease-signature-col {
  min-height: 80px;
}

.lease-notes-editor .lease-signature-title {
  display: block;
  margin-bottom: 16px;
  font-size: 1.05em;
  font-weight: 700;
}

.lease-notes-editor .lease-signature-role {
  display: block;
  font-size: 1.05em;
  font-weight: 700;
}

.lease-form-card .receipts-view-field {
  background: rgba(243, 238, 230, 0.92);
  border-color: rgba(21, 50, 67, 0.08);
  color: var(--muted);
}

.lease-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.lease-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 252, 247, 0.58);
  border: 1px solid rgba(21, 50, 67, 0.06);
}

body[data-page="lease"] .lease-panel .field-group input,
body[data-page="lease"] .lease-panel .field-group select,
body[data-page="lease"] .lease-panel .field-group textarea,
body[data-page="lease"] .lease-panel .field-group input,
body[data-page="lease"] .lease-panel .field-group select,
body[data-page="lease"] .lease-panel .field-group textarea {
  background: rgba(255, 252, 247, 0.78);
  border-color: rgba(21, 50, 67, 0.08);
  color: #60707a;
}

body[data-page="lease"] .lease-side-card,
body[data-page="lease"] .lease-form-card,
body[data-page="lease"] .lease-side-card,
body[data-page="lease"] .lease-form-card {
  border-radius: 18px;
  padding: 14px;
}

body[data-page="lease"] .lease-panel,
body[data-page="lease"] .lease-panel {
  padding: 14px;
}

body[data-page="lease"] .panel-header.lease-header,
body[data-page="lease"] .panel-header.lease-header {
  margin-bottom: 10px;
}

body[data-page="lease"] .lease-layout,
body[data-page="lease"] .lease-layout {
  gap: 10px;
}

body[data-page="lease"] .lease-side-head h4,
body[data-page="lease"] .lease-side-head h4 {
  margin-bottom: 2px;
  font-size: 0.88rem;
}

body[data-page="lease"] .lease-side-head p,
body[data-page="lease"] .lease-side-head p {
  margin-bottom: 10px;
  font-size: 0.74rem;
  line-height: 1.25;
}

body[data-page="lease"] .lease-picker-grid,
body[data-page="lease"] .lease-form-grid,
body[data-page="lease"] .lease-picker-grid,
body[data-page="lease"] .lease-form-grid {
  gap: 5px 9px;
}

body[data-page="lease"] .lease-panel .field-group label,
body[data-page="lease"] .lease-panel .field-group label {
  font-size: 0.74rem;
  margin-bottom: 1px;
}

body[data-page="lease"] .lease-panel .field-group input,
body[data-page="lease"] .lease-panel .field-group select,
body[data-page="lease"] .lease-panel .field-group textarea,
body[data-page="lease"] .lease-panel .field-group input,
body[data-page="lease"] .lease-panel .field-group select,
body[data-page="lease"] .lease-panel .field-group textarea {
  min-height: 44px;
  padding: 9px 13px;
  font-size: 0.82rem;
  border-radius: 14px;
}

body[data-page="lease"] .lease-panel .lease-picker-grid select,
body[data-page="lease"] .lease-panel .lease-picker-grid select {
  font-size: 0.78rem;
}

body[data-page="lease"] .lease-panel .receipts-view-field,
body[data-page="lease"] .lease-panel .receipts-view-field {
  font-size: 0.8rem;
}

body[data-page="lease"] .lease-panel .action-btn,
body[data-page="lease"] .lease-panel .action-btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.78rem;
  border-radius: 14px;
}

body[data-page="lease"] .lease-form-card .lease-form-grid,
body[data-page="lease"] .lease-form-card .lease-form-grid {
  gap: 4px 9px;
}

body[data-page="lease"] .lease-unit-summary,
body[data-page="lease"] .lease-unit-summary {
  gap: 8px;
  margin-top: 10px;
}

body[data-page="lease"] .lease-unit-chip,
body[data-page="lease"] .lease-unit-chip {
  padding: 9px 11px;
  border-radius: 14px;
}

body[data-page="lease"] .lease-unit-chip small,
body[data-page="lease"] .lease-unit-chip small {
  margin-bottom: 2px;
  font-size: 0.68rem;
}

body[data-page="lease"] .lease-unit-chip strong,
body[data-page="lease"] .lease-unit-chip strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

body[data-page="lease"] .lease-form-card .field-group label,
body[data-page="lease"] .lease-form-card .field-group label {
  font-size: 0.72rem;
  margin-bottom: 0;
}

body[data-page="lease"] .lease-form-card .field-group input,
body[data-page="lease"] .lease-form-card .field-group select,
body[data-page="lease"] .lease-form-card .field-group textarea,
body[data-page="lease"] .lease-form-card .field-group input,
body[data-page="lease"] .lease-form-card .field-group select,
body[data-page="lease"] .lease-form-card .field-group textarea {
  height: 31px;
  min-height: 31px;
  padding: 2px 10px;
  font-size: 0.78rem;
  line-height: 1.1;
}

body[data-page="lease"] .lease-form-card .lease-file-list,
body[data-page="lease"] .lease-form-card .lease-file-list {
  gap: 6px;
  margin-top: 8px;
}

body[data-page="lease"] .lease-form-card .lease-file-item,
body[data-page="lease"] .lease-form-card .lease-file-item {
  padding: 8px 10px;
  border-radius: 12px;
}

body[data-page="lease"] .lease-form-card .lease-file-item span,
body[data-page="lease"] .lease-form-card .lease-file-item span {
  font-size: 0.72rem;
}

body[data-page="lease"] .lease-tab-lease .lease-attachments-card,
body[data-page="lease"] .lease-tab-lease .lease-attachments-card {
  margin-top: 10px;
  padding-top: 10px;
}

body[data-page="lease"] .lease-tab-lease .lease-actions,
body[data-page="lease"] .lease-tab-lease .lease-actions {
  gap: 8px;
  margin-top: 10px;
}

body[data-page="lease"] .lease-panel .field-group input[readonly],
body[data-page="lease"] .lease-panel .field-group select:disabled,
body[data-page="lease"] .lease-panel .field-group textarea[readonly],
body[data-page="lease"] .lease-panel .lease-notes-tool:disabled,
body[data-page="lease"] .lease-panel .lease-notes-toolbar select:disabled,
body[data-page="lease"] .lease-panel [data-lease-files]:disabled,
body[data-page="lease"] .lease-panel .field-group input[readonly],
body[data-page="lease"] .lease-panel .field-group select:disabled,
body[data-page="lease"] .lease-panel .field-group textarea[readonly],
body[data-page="lease"] .lease-panel .lease-notes-tool:disabled,
body[data-page="lease"] .lease-panel .lease-notes-toolbar select:disabled,
body[data-page="lease"] .lease-panel [data-lease-files]:disabled {
  opacity: 0.8;
  cursor: default;
}

body[data-page="lease"] .lease-panel .field-group input:focus,
body[data-page="lease"] .lease-panel .field-group select:focus,
body[data-page="lease"] .lease-panel .field-group textarea:focus,
body[data-page="lease"] .lease-panel .field-group input:focus,
body[data-page="lease"] .lease-panel .field-group select:focus,
body[data-page="lease"] .lease-panel .field-group textarea:focus {
  border-color: rgba(21, 50, 67, 0.14);
  box-shadow: 0 0 0 3px rgba(21, 50, 67, 0.06);
}

.lease-file-item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.lease-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(21, 50, 67, 0.06) 0%, rgba(201, 108, 58, 0.08) 100%);
  border: 1px solid rgba(21, 50, 67, 0.08);
}

.lease-actions-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lease-actions-copy strong {
  font-size: 0.96rem;
}

.lease-actions-copy span {
  color: var(--muted);
  font-size: 0.82rem;
}

.lease-actions-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.lease-empty-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(192, 108, 54, 0.28);
  border-radius: 8px;
  background: rgba(192, 108, 54, 0.08);
  color: #8a4b1f;
  font-size: 0.82rem;
  font-weight: 700;
}

.vacate-guide {
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.vacate-guide strong,
.vacate-guide p {
  display: block;
}

.vacate-guide strong {
  margin-bottom: 2px;
  font-size: 0.82rem;
  line-height: 1.2;
}

.vacate-guide p {
  margin: 0;
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.3;
}

.vacate-preview-field {
  grid-column: 1 / -1;
}

.vacate-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.vacate-history-panel {
  margin-top: 14px;
}

body[data-page="vacate"] .vacate-panel .lease-side-card,
body[data-page="vacate"] .vacate-panel .lease-form-card {
  border-radius: 18px;
  padding: 14px;
}

body[data-page="vacate"] .vacate-panel .lease-side-head h4 {
  margin-bottom: 2px;
  font-size: 0.88rem;
}

body[data-page="vacate"] .vacate-panel .lease-side-head p {
  margin-bottom: 10px;
  font-size: 0.74rem;
  line-height: 1.25;
}

body[data-page="vacate"] .vacate-panel .lease-picker-grid,
body[data-page="vacate"] .vacate-panel .vacate-form-grid {
  gap: 10px 12px;
}

body[data-page="vacate"] .vacate-panel .field-group label {
  font-size: 0.74rem;
  margin-bottom: 4px;
}

body[data-page="vacate"] .vacate-panel .field-group input,
body[data-page="vacate"] .vacate-panel .field-group select,
body[data-page="vacate"] .vacate-panel .field-group textarea {
  min-height: 44px;
  padding: 9px 13px;
  font-size: 0.82rem;
  border-radius: 14px;
}

body[data-page="vacate"] .vacate-panel .lease-picker-grid select {
  font-size: 0.78rem;
}

body[data-page="vacate"] .vacate-panel .receipts-view-field {
  font-size: 0.8rem;
}

body[data-page="vacate"] .vacate-panel .vacate-actions {
  gap: 8px;
  margin-top: 12px;
}

body[data-page="vacate"] .vacate-panel .action-btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.78rem;
  border-radius: 14px;
}

@media (max-width: 1080px) {
  .lease-editor-banner,
  .lease-layout {
    grid-template-columns: 1fr;
  }

  .lease-editor-header,
  .lease-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lease-editor-header-chips,
  .lease-actions-buttons {
    justify-content: flex-start;
  }
}

.tenant-database-attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.tenant-database-attachment-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(212, 118, 55, 0.16);
}

.tenant-database-attachment-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tenant-database-attachment-upload:has(input:disabled) {
  opacity: 0.66;
  cursor: wait;
}

.tenant-database-attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: #fffdf8;
}

.tenant-database-attachment-item strong,
.tenant-database-attachment-item span {
  display: block;
}

.tenant-database-attachment-item span {
  color: var(--muted);
  font-size: 0.78rem;
}

.tenant-database-attachment-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tenant-database-attachment-link,
.tenant-database-attachment-rename,
.tenant-database-attachment-delete {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.tenant-database-attachment-link {
  color: var(--accent);
}

.tenant-database-attachment-rename {
  color: var(--muted);
}

.tenant-database-attachment-delete {
  color: #c45b4f;
}

.reconciliation-toolbar {
  grid-template-columns: minmax(260px, 1.5fr) minmax(210px, 1fr) minmax(170px, 0.9fr);
}

.reconciliation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.reconciliation-section {
  padding: 14px;
  border-radius: 18px;
  background: #fffdf8;
  border: 1px solid rgba(21, 50, 67, 0.08);
}

.reconciliation-warning {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: rgba(255, 245, 214, 0.72);
  border: 1px solid rgba(216, 161, 41, 0.28);
}

.reconciliation-warning strong {
  color: #7e5a09;
}

.reconciliation-warning span {
  color: #7a6330;
  font-size: 0.82rem;
}

@media (max-width: 1180px) {
  .tenant-database-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tenant-database-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .tenant-database-layout {
    grid-template-columns: 1fr;
  }

  .reconciliation-grid {
    grid-template-columns: 1fr;
  }

  .lease-layout {
    grid-template-columns: 1fr;
  }

  .tenant-database-list-wrap,
  .tenant-database-detail {
    min-height: auto;
  }

  .tenant-database-info-grid,
  .tenant-database-repair-grid,
  .ex-tenant-manual-grid,
  .ex-tenant-receipt-grid,
  .reconciliation-toolbar,
  .lease-picker-grid,
  .lease-form-grid,
  .lease-unit-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .tenant-database-kpis,
  .tenant-database-toolbar,
  .tenant-database-info-grid,
  .tenant-database-repair-grid,
  .tenant-database-contract-grid,
  .ex-tenant-manual-grid,
  .ex-tenant-receipt-grid,
  .reconciliation-toolbar,
  .lease-picker-grid,
  .lease-form-grid,
  .lease-unit-summary {
    grid-template-columns: 1fr;
  }

  .tenant-database-receipt-item {
    flex-direction: column;
  }

  .tenant-database-receipt-meta {
    align-items: flex-start;
  }

  .tenant-database-receipt-actions {
    justify-content: flex-start;
  }
}

.content-grid {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.hero-card,
.panel,
.stat-card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.hero-card {
  padding: 24px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  overflow: hidden;
}

.hero-copy h3,
.hero-copy p {
  margin: 0;
}

.hero-copy h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.hero-copy p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 60ch;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tag {
  padding: 9px 14px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
}

.hero-metrics {
  display: grid;
  gap: 14px;
}

.metric-tile {
  padding: 18px;
  background: linear-gradient(135deg, rgba(21, 50, 67, 0.96), rgba(30, 79, 104, 0.92));
  color: white;
  border-radius: 20px;
}

.metric-tile strong {
  display: block;
  font-size: 1.7rem;
  margin-top: 8px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.stat-card {
  padding: 22px;
}

.stat-card span {
  display: block;
  color: var(--muted);
  margin-bottom: 10px;
}

.stat-card strong {
  font-size: 1.8rem;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

.panel {
  padding: 10px;
  width: 100%;
  min-width: 0;
}

.panel-header {
  display: block;
  margin-bottom: 12px;
  padding: 6px 0 8px;
}

.panel-header h3,
.panel-header p {
  margin: 0;
}

.panel-header p {
  color: var(--muted);
  margin-top: 6px;
}

.backup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
}

.backup-card {
  border: 1px solid rgba(203, 186, 161, 0.45);
  border-radius: 18px;
  background: rgba(255, 251, 245, 0.92);
  padding: 18px;
}

.backup-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a7a52;
  margin-bottom: 10px;
  font-weight: 700;
}

.backup-text {
  margin: 0 0 12px;
  color: #5f5a53;
  line-height: 1.5;
}

.backup-code {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fffdf9;
  border: 1px solid rgba(203, 186, 161, 0.45);
  color: #443d34;
  font-size: 0.86rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.backup-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.backup-button {
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  padding: 11px 16px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.backup-button:disabled {
  opacity: 0.65;
  cursor: progress;
}

.backup-status {
  color: #6b7780;
  font-size: 0.9rem;
}

.backup-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #5f5a53;
}

.backup-history .backup-list li {
  margin-bottom: 6px;
}

.backup-history .backup-list li strong {
  display: block;
  color: #3a352f;
}

.backup-history-path {
  display: block;
  font-size: 0.78rem;
  color: #8a847c;
  word-break: break-all;
}

.receipts-grid {
  align-items: start;
}

.receipts-custom-panel {
  margin-top: 18px;
}

.receipts-form-grid {
  margin-bottom: 16px;
}

/* Tenant Row pickers hold Arabic-first labels ("<unit> - <name> - Current
   Tenant - K.D x") — RTL with the tenant rows right-aligned; only the
   "Choose tenant row" placeholder keeps its centered look. */
select[data-receipts-paid-previous-row],
select[data-receipts-prepaid-row],
select[data-receipts-insurance-row],
select[data-receipts-unpaid-from-before-row],
select[data-receipts-custom-row] {
  direction: rtl;
  text-align: right;
}

select[data-receipts-paid-previous-row]:has(option:checked[value=""]),
select[data-receipts-prepaid-row]:has(option:checked[value=""]),
select[data-receipts-insurance-row]:has(option:checked[value=""]),
select[data-receipts-unpaid-from-before-row]:has(option:checked[value=""]),
select[data-receipts-custom-row]:has(option:checked[value=""]) {
  text-align: center;
}

select[data-receipts-paid-previous-row] option,
select[data-receipts-prepaid-row] option,
select[data-receipts-insurance-row] option,
select[data-receipts-unpaid-from-before-row] option,
select[data-receipts-custom-row] option {
  text-align: right;
}

select[data-receipts-paid-previous-row] option[value=""],
select[data-receipts-prepaid-row] option[value=""],
select[data-receipts-insurance-row] option[value=""],
select[data-receipts-unpaid-from-before-row] option[value=""],
select[data-receipts-custom-row] option[value=""] {
  text-align: center;
}

.receipts-summary {
  display: grid;
  gap: 4px;
  margin: 6px 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 250, 243, 0.92);
  border: 1px solid rgba(21, 50, 67, 0.1);
}

.receipts-summary strong {
  font-size: 0.95rem;
}

.receipts-summary span {
  color: var(--muted);
  font-size: 0.84rem;
}

.receipts-preview-list {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  margin-bottom: 14px;
  padding-right: 4px;
}

.receipts-list-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: rgba(255, 251, 245, 0.95);
}

.receipts-list-item-total {
  border-color: rgba(21, 50, 67, 0.14);
  background: rgba(250, 244, 233, 0.98);
}

.receipts-list-item-total .receipts-list-copy strong {
  color: var(--text);
}

.receipts-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 10px;
}

.receipts-list-copy {
  display: grid;
  gap: 0;
  min-width: 0;
}

.receipts-list-head strong {
  flex: 0 1 auto;
  min-width: 0;
}

.receipts-list-item strong,
.receipts-list-item span {
  display: block;
}

.receipts-list-item span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

.receipts-list-meta {
  display: block;
  margin-top: 0;
}

.receipts-list-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  justify-content: flex-end;
  width: 368px;
}

.receipts-list-field {
  display: grid;
  gap: 4px;
  align-content: start;
  margin-top: 0;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(21, 50, 67, 0.05);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
}

.receipts-list-field small {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.1;
  text-align: center;
}

.receipts-list-field input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.3;
  text-align: center;
}

.receipts-list-field input:focus {
  outline: none;
}

.receipts-list-field input[type="number"]::-webkit-outer-spin-button,
.receipts-list-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.receipts-list-field input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.receipts-list-field-readonly input {
  color: #6d767d;
  cursor: default;
}

.receipts-list-field-contract {
  width: 116px;
}

.receipts-list-field-discount {
  width: 108px;
}

.receipts-list-field-actual-rent {
  width: 128px;
}

.receipts-history-list {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

.receipts-history-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: 14px;
  margin-bottom: 14px;
}

.receipts-history-hero-copy {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(214, 192, 164, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 252, 247, 0.98), rgba(248, 239, 226, 0.92));
}

.receipts-history-hero-copy .backup-text {
  margin-bottom: 0;
}

.receipts-history-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.receipts-history-stat {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(214, 192, 164, 0.32);
  background: rgba(255, 252, 247, 0.94);
}

.receipts-history-stat strong {
  font-size: 1rem;
  line-height: 1.15;
  color: var(--text);
}

.receipts-history-stat span {
  color: var(--muted);
  font-size: 0.76rem;
}

.receipts-history-toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.receipts-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: rgba(255, 251, 245, 0.95);
}

.receipts-history-item.deleted {
  border-color: rgba(185, 72, 72, 0.22);
  background: rgba(255, 242, 242, 0.98);
}

.receipts-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.receipts-history-item-rich {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
}

.receipts-history-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.receipts-history-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.receipts-history-primary-line {
  color: var(--text) !important;
}

.receipts-history-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.receipts-history-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(214, 192, 164, 0.34);
  background: rgba(246, 239, 228, 0.9);
  color: #5f6670;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.receipts-history-pill-warm {
  background: rgba(212, 118, 55, 0.12);
  border-color: rgba(212, 118, 55, 0.24);
  color: var(--primary);
}

.receipts-history-pill-muted {
  background: rgba(230, 239, 244, 0.76);
  border-color: rgba(66, 102, 122, 0.16);
  color: #406075;
}

.receipts-history-pill-danger {
  background: rgba(255, 236, 236, 0.92);
  border-color: rgba(196, 84, 84, 0.28);
  color: #b24343;
}

.receipts-history-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.receipts-history-info-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(214, 192, 164, 0.22);
  background: rgba(255, 251, 245, 0.92);
}

.receipts-history-info-row small {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.receipts-history-info-row span {
  margin-top: 0;
  color: var(--text);
  font-size: 0.77rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.receipts-history-copy strong,
.receipts-history-copy span {
  display: block;
}

.receipts-history-copy span {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.receipts-history-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex-shrink: 0;
}

.receipts-history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.receipts-batch-return-item {
  align-items: flex-start;
  flex-wrap: wrap;
}

/* Month-over-month trend arrow on the dashboard money table ("money tool").
   Shown inline next to each money figure, starting from the Contract column. */
.dash-money-td {
  white-space: nowrap;
}

.dash-money-trend {
  font-size: 0.62rem;
  line-height: 1;
  margin-left: 2px;
  vertical-align: middle;
  pointer-events: none;
}

.dash-money-trend.up {
  color: #2f9b69;
}

.dash-money-trend.down {
  color: #c0392b;
}

.dash-money-trend.flat {
  color: #9aa4a9;
}

/* Money-table row hover highlight: tint the building row the cursor is over so
   it's easy to read a single building across all the money columns. Same soft
   amber the other data tables use on hover (.table-shell tbody tr:hover). */
.dashboard-table tbody tr:hover td {
  background: rgba(255, 239, 208, 0.98);
}

/* Money-table PINNED row: clicking a building row makes its highlight stick
   (click again to unpin; several rows can be pinned). A stronger amber than the
   hover tint, defined AFTER the hover rule so a pinned row keeps its color even
   while other rows are hovered. */
.dashboard-table tbody tr.dash-money-row {
  cursor: pointer;
}
.dashboard-table tbody tr.dash-money-row-pinned td {
  background: rgba(255, 221, 158, 0.98);
}

/* Vacate marker: a departed tenant's payment shown in the Old Tenant Credit /
   Old Insurance column for the vacated month only. Informational, not a real
   credit, so it reads in a muted, italic style. */
input.departed-tenant-marker,
.calc-value.departed-tenant-marker {
  font-style: italic;
  color: #9a6b2f;
  background: rgba(212, 118, 55, 0.08);
}

.receipts-batch-return-total {
  margin-top: 8px;
  background: rgba(21, 50, 67, 0.05);
  border: 1px solid rgba(21, 50, 67, 0.12);
  border-radius: 14px;
}

.receipts-batch-return-total-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.receipts-batch-return-total-copy strong {
  font-size: 0.9rem;
  color: var(--ink, #15323f);
}

.receipts-batch-return-total-copy span {
  font-size: 0.7rem;
  color: var(--muted, #6b7b83);
}

.receipts-batch-return-total .receipts-batch-return-field {
  text-align: center;
}

.receipts-batch-return-total .receipts-batch-return-field small {
  text-align: center;
}

.receipts-batch-return-total .receipts-batch-return-total-value {
  padding: 2px 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink, #15323f);
  text-align: center;
}

.receipts-batch-return-total .receipts-batch-return-total-value.is-danger {
  color: #c0392b;
}

.receipts-batch-return-total-spacer {
  flex: 0 0 auto;
  width: 24px;
}

.receipts-batch-return-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  padding: 6px 8px;
  border: 1px solid rgba(212, 118, 55, 0.16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(253, 245, 237, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.receipts-batch-return-field {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
}

.receipts-batch-return-field small {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.05;
}

.receipts-batch-return-controls select,
.receipts-batch-return-controls input,
.receipts-batch-return-extra-tender select,
.receipts-batch-return-extra-tender input {
  min-width: 0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.82rem;
}
.receipts-batch-return-extra-tender .receipts-batch-return-field {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 0 0 auto;
}
.receipts-batch-return-extra-tender .receipts-batch-return-field small {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.05;
}

.receipts-batch-return-field-total-unpaid,
.receipts-batch-return-field-old-due,
.receipts-batch-return-field-contract,
.receipts-batch-return-field-actual-rent,
.receipts-batch-return-field-amount {
  width: 72px;
}

.receipts-batch-return-field-discount,
.receipts-batch-return-field-vacant {
  width: 60px;
}


.receipts-batch-return-field-method {
  width: 86px;
}

.receipts-batch-return-field-reference {
  width: 110px;
}

.receipts-batch-return-add-tender,
.receipts-batch-return-remove-tender {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 2px;
  font-size: 0.95rem;
  font-weight: 700;
  border: 1px solid #cdd3da;
  background: #f4f6f9;
  color: #1f2937;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: end;
  margin-bottom: 1px;
}
.receipts-batch-return-add-tender:hover:not(:disabled),
.receipts-batch-return-remove-tender:hover:not(:disabled) {
  background: #e6ecf3;
}
.receipts-batch-return-add-tender:disabled,
.receipts-batch-return-remove-tender:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.receipts-batch-return-remove-tender {
  border-color: #e8b4b4;
  background: #fdf2f2;
  color: #b91c1c;
}
.receipts-batch-return-remove-tender:hover:not(:disabled) {
  background: #fbdcdc;
}

.receipts-batch-return-extra-tenders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  margin-top: 4px;
}
.receipts-batch-return-extra-tenders:empty {
  display: none;
}
.receipts-batch-return-extra-tender {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 8px;
  border: 1px solid rgba(212, 118, 55, 0.16);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(253, 245, 237, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.receipts-batch-return-controls input[type="number"]::-webkit-outer-spin-button,
.receipts-batch-return-controls input[type="number"]::-webkit-inner-spin-button,
.receipts-batch-return-extra-tender input[type="number"]::-webkit-outer-spin-button,
.receipts-batch-return-extra-tender input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.receipts-batch-return-controls input[type="number"],
.receipts-batch-return-extra-tender input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.tenant-database-repair-grid input[type="number"]::-webkit-outer-spin-button,
.tenant-database-repair-grid input[type="number"]::-webkit-inner-spin-button,
.tenant-database-contract-grid input[type="number"]::-webkit-outer-spin-button,
.tenant-database-contract-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tenant-database-repair-grid input[type="number"],
.tenant-database-contract-grid input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Lease page (tenant / company / duo / handover forms): hide number spinners. */
.lease-form-grid input[type="number"]::-webkit-outer-spin-button,
.lease-form-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lease-form-grid input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.receipts-batch-return-item .receipts-history-copy strong {
  line-height: 1.35;
}

body[data-page^="receipts"] .receipts-batch-return-title {
  flex-wrap: nowrap;
}

body[data-page^="receipts"] .receipts-batch-return-title strong {
  white-space: nowrap;
}

.receipts-batch-return-item .receipts-history-copy span {
  line-height: 1.45;
}

.receipts-month-checks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 2px;
}

.receipts-month-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
}

.receipts-history-meta strong {
  font-size: 0.9rem;
}

.receipts-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 251, 245, 0.95);
  border: 1px dashed rgba(21, 50, 67, 0.16);
  color: var(--muted);
}

.status-pill {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
}

.status-success {
  background: rgba(62, 139, 99, 0.15);
  color: var(--success);
}

.status-warning {
  background: rgba(216, 161, 41, 0.16);
  color: #9b700a;
}

.status-danger {
  background: rgba(196, 84, 84, 0.14);
  color: var(--danger);
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-sticky-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  margin-top: 12px;
  width: 100%;
}

.table-header-shell {
  position: sticky;
  top: var(--month-tabs-offset);
  z-index: 7;
  display: block;
  overflow: hidden;
  margin-bottom: 1px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 14px;
  background: #faf5ed;
  box-shadow: 0 2px 8px rgba(31, 41, 51, 0.08);
}

.table-header-grid {
  display: grid;
  width: max-content;
  background: #faf5ed;
  will-change: transform;
}

.table-shell {
  position: relative;
  overflow: visible;
  border-radius: 22px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 247, 240, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  width: max-content;
  min-width: 100%;
}

.table-shell table {
  border-top: 0;
}

.switcher-block {
  display: grid;
  gap: 18px;
}

.switcher-section h3 {
  margin: 6px 0 14px;
  font-size: 1.1rem;
}

.switcher-label {
  font-size: 0.78rem;
  color: #7c5a27;
  letter-spacing: 0.08em;
}

.switcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.switcher-grid-areas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

[data-building-cards] {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
}

[data-building-cards] .switcher-card {
  width: 100%;
  min-width: 0;
}

.switcher-card {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(201, 108, 58, 0.24);
  background: rgba(255, 251, 245, 0.95);
  cursor: pointer;
}

.switcher-card.active {
  border-color: #c96c3a;
  box-shadow: inset 0 0 0 1px rgba(201, 108, 58, 0.25);
  background: rgba(252, 245, 236, 0.98);
}

.switcher-card small,
.switcher-card span {
  display: block;
}

.switcher-card small {
  font-size: 0.72rem;
  color: #7c5a27;
  margin-bottom: 2px;
}

.switcher-card strong {
  font-size: 0.95rem;
}

.switcher-card span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.dashboard-panel {
  display: grid;
  gap: 10px;
}

.dashboard-header {
  margin-bottom: 2px;
}

.dashboard-compact {
  padding: 4px;
}

.dashboard-months {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dashboard-month-chip {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 251, 245, 0.92);
  color: var(--text);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.dashboard-month-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-kpi-card,
.dashboard-card {
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 247, 240, 0.96));
  box-shadow: 0 12px 30px rgba(31, 41, 51, 0.06);
}

/* Errors box: status mismatches across Report / Tenant DB / Receipt. */
.dashboard-errors-card {
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* Errors header: title block on the left, a small Refresh button on the right. */
.dashboard-errors-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-refresh-mini {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 0.72rem;
  min-height: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.dashboard-errors-card.has-errors {
  border: 1px solid rgba(196, 84, 84, 0.45);
  background: linear-gradient(180deg, rgba(255, 250, 249, 0.98), rgba(252, 244, 243, 0.96));
}
.dashboard-errors-empty {
  padding: 8px 4px;
  color: #2f7a55;
  font-size: 0.85rem;
}
.dashboard-errors-table {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.dashboard-errors-row {
  display: grid;
  grid-template-columns: 1.7fr 1.7fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
}
.dashboard-errors-head {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  color: var(--muted, #6b7b83);
}
.dashboard-errors-row:not(.dashboard-errors-head):nth-child(odd) {
  background: rgba(21, 50, 67, 0.03);
}
.dashboard-errors-tenant {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-errors-row .err-odd {
  color: #9f2f2f;
  font-weight: 700;
  background: rgba(196, 84, 84, 0.16);
  border-radius: 6px;
  padding: 1px 6px;
  justify-self: start;
}
.dashboard-errors-receipt-cell {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2px;
  min-width: 0;
}
.dashboard-errors-receipt-nos {
  font-size: 0.7rem;
  color: #6b7c86;
  line-height: 1.3;
  word-break: break-word;
}

.dashboard-kpi-card {
  padding: 10px 12px;
  display: grid;
  gap: 3px;
}

.dashboard-kpi-card small {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a6a41;
}

.dashboard-kpi-card strong {
  font-size: 1.18rem;
  line-height: 1;
}

.dashboard-kpi-card span {
  color: var(--muted);
  font-size: 0.72rem;
}

.dashboard-kpi-card.bank {
  background: linear-gradient(135deg, rgba(226, 243, 234, 0.96), rgba(246, 252, 247, 0.98));
}

.dashboard-kpi-card.due {
  background: linear-gradient(135deg, rgba(255, 236, 226, 0.98), rgba(255, 249, 245, 0.98));
}

.dashboard-kpi-card.occupied {
  background: linear-gradient(135deg, rgba(232, 241, 253, 0.98), rgba(249, 251, 255, 0.98));
}

.dashboard-kpi-card.late {
  background: linear-gradient(135deg, rgba(255, 232, 228, 0.98), rgba(255, 247, 244, 0.98));
}

.dashboard-kpi-card.ex {
  background: linear-gradient(135deg, rgba(243, 236, 228, 0.98), rgba(255, 251, 246, 0.98));
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dashboard-card {
  padding: 10px 12px;
}

.dashboard-card-head {
  margin-bottom: 7px;
}

.dashboard-card-head h4 {
  margin: 0;
  font-size: 0.84rem;
}

.dashboard-card-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.dashboard-donut-layout {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

/* Center the bar charts vertically — the card stretches to match the taller
   Vacant card next to it, so the charts sit in the middle of the leftover space. */
.dashboard-status-card {
  display: flex;
  flex-direction: column;
}

.dashboard-status-card .dashboard-status-split {
  margin-top: auto;
  margin-bottom: auto;
}

/* Two horizontal bar charts (Payments + Tenant Status) side by side in one card
   the same size as the Vacant card. */
.dashboard-status-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.dashboard-status-group {
  display: grid;
  gap: 8px;
}

.dashboard-status-group-title {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #6b7b83);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.dashboard-status-group-title em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink, #15323f);
}

.dashboard-status-group + .dashboard-status-group {
  border-left: 1px solid rgba(21, 50, 67, 0.08);
  padding-left: 14px;
}

/* "Future Action" — a third bar chart that sits centered BELOW the Payments /
   Tenant Status pair, separated by a divider line. */
.dashboard-status-future {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(21, 50, 67, 0.08);
  display: flex;
  justify-content: center;
}
.dashboard-status-future .dashboard-status-group {
  width: 100%;
  max-width: 340px;
}

.dashboard-bar-chart {
  display: grid;
  gap: 7px;
}

.dashboard-bar-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.dashboard-bar-label {
  font-size: 0.62rem;
  color: var(--ink, #15323f);
  line-height: 1.05;
}

.dashboard-bar-track {
  height: 8px;
  border-radius: 6px;
  background: rgba(21, 50, 67, 0.07);
  overflow: hidden;
}

.dashboard-bar-fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  min-width: 2px;
}

.dashboard-bar-value {
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 16px;
  text-align: right;
  color: var(--ink, #15323f);
}

.dashboard-donut-wrap {
  display: grid;
  place-items: center;
}

.dashboard-donut {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(21, 50, 67, 0.08);
}

.dashboard-donut-hole {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 252, 247, 0.98);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(21, 50, 67, 0.06);
}

.dashboard-donut-hole strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1;
}

.dashboard-donut-hole span {
  display: block;
  font-size: 0.58rem;
  color: var(--muted);
  margin-top: 2px;
}

.dashboard-legend {
  display: grid;
  gap: 6px;
}

.dashboard-legend-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.dashboard-legend-item strong,
.dashboard-legend-item span {
  display: block;
}

.dashboard-legend-item strong {
  font-size: 0.8rem;
  line-height: 1.05;
}

.dashboard-legend-item span {
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 2px;
}

.dashboard-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dashboard-legend-dot.paid {
  background: #2f9b69;
}

.dashboard-legend-dot.unpaid {
  background: #d9a33d;
}

.dashboard-legend-dot.late {
  background: #d76456;
}

.dashboard-legend-dot.ex {
  background: #9a8168;
}

.dashboard-legend-dot.noreceipt {
  background: #6c7b83;
}

.dashboard-legend-dot.partial {
  background: #3d7fb8;
}

.dashboard-legend-dot.extra {
  background: #8a6fb0;
}

.dashboard-legend-dot.active {
  background: #2f9b69;
}

.dashboard-legend-dot.upcoming {
  background: #4a6288;
}

.dashboard-legend-dot.handover {
  background: #9a5d1f;
}

.dashboard-legend-dot.vacant {
  background: #4e82bb;
}

.dashboard-legend-dot.occupied-soft {
  background: #b7cce6;
}

.dashboard-mini-building-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.dashboard-mini-building-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255, 251, 245, 0.92);
  border: 1px solid rgba(21, 50, 67, 0.06);
  font-size: 0.72rem;
}

.dashboard-main-grid.compact .dashboard-card,
.dashboard-bottom-grid.compact .dashboard-card {
  min-width: 0;
}

.dashboard-status-chart,
.dashboard-vacant-chart {
  display: grid;
  gap: 12px;
}

.dashboard-bar-row {
  display: grid;
  gap: 7px;
}

.dashboard-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.dashboard-bar-meta strong {
  font-size: 0.92rem;
}

.dashboard-bar-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(21, 50, 67, 0.08);
}

.dashboard-bar-fill {
  height: 100%;
  border-radius: 999px;
}

.dashboard-bar-fill.paid {
  background: linear-gradient(90deg, #2c9d67, #6dc89a);
}

.dashboard-bar-fill.unpaid {
  background: linear-gradient(90deg, #d7a33a, #f0c764);
}

.dashboard-bar-fill.late {
  background: linear-gradient(90deg, #d56456, #f08d80);
}

.dashboard-bar-fill.ex {
  background: linear-gradient(90deg, #7d6a5a, #b49a82);
}

.dashboard-bar-fill.vacant {
  background: linear-gradient(90deg, #4c7fb8, #89acd7);
}

.dashboard-preview-list {
  display: grid;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.dashboard-list-card.late-preview {
  background:
    linear-gradient(180deg, rgba(255, 249, 247, 0.98), rgba(255, 243, 239, 0.96));
}

.dashboard-list-card.unpaid-preview {
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(255, 247, 232, 0.96));
}

.dashboard-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 251, 245, 0.92);
  border: 1px solid rgba(21, 50, 67, 0.07);
}

.dashboard-preview-item strong,
.dashboard-preview-item span {
  display: block;
}

.dashboard-preview-item span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

.dashboard-preview-amount {
  flex-shrink: 0;
  font-weight: 700;
  color: #9e5d2d;
  font-size: 0.74rem;
}

.dashboard-empty {
  padding: 14px;
  border-radius: 14px;
  border: 1px dashed rgba(21, 50, 67, 0.16);
  color: var(--muted);
  background: rgba(255, 251, 245, 0.9);
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.dashboard-table th,
.dashboard-table td {
  padding: 6px 7px;
  border-bottom: 1px solid rgba(21, 50, 67, 0.08);
  text-align: left;
}

.dashboard-table th {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #647789;
}

.dashboard-table td {
  font-size: 0.72rem;
}

.dashboard-table tfoot th {
  padding: 7px;
  border-top: 1px solid rgba(21, 50, 67, 0.16);
  border-bottom: 0;
  background: rgba(250, 244, 236, 0.95);
  color: #25313a;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: left;
}

body[data-page="dashboard"] .content-grid {
  gap: 8px;
}

body[data-page="dashboard"] .panel-header h3 {
  font-size: 0.9rem;
}

body[data-page="dashboard"] .panel-header p {
  font-size: 0.68rem;
}

@media (max-width: 1180px) {
  .dashboard-kpis,
  .dashboard-main-grid,
  .dashboard-bottom-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .dashboard-kpis,
  .dashboard-main-grid,
  .dashboard-bottom-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-donut-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .dashboard-kpi-card strong {
    font-size: 1.55rem;
  }

  .dashboard-card,
  .dashboard-kpi-card {
    padding: 14px;
  }
}

.month-tabs-sticky {
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 8px 0 10px;
  background: linear-gradient(180deg, rgba(248, 243, 235, 0.98), rgba(248, 243, 235, 0.94));
  backdrop-filter: blur(10px);
}

.month-tabs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.month-tab-shell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 251, 245, 0.92);
  border: 1px solid rgba(21, 50, 67, 0.12);
}

.month-tab-shell.active {
  background: rgba(252, 242, 230, 0.95);
  border-color: rgba(201, 108, 58, 0.24);
}

.month-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  cursor: pointer;
}

.month-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.month-tab-action {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #6b4e30;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ledger-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 110px 120px 128px 92px 92px;
  gap: 8px;
  margin-top: 22px;
  margin-bottom: 14px;
  align-items: center;
}

.ledger-search,
.ledger-select,
.ledger-btn,
.ledger-chip {
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(21, 50, 67, 0.16);
  background: #fffaf3;
  color: var(--text);
  font: inherit;
  box-shadow: 0 2px 8px rgba(31, 41, 51, 0.04);
}

.ledger-search,
.ledger-select {
  padding: 0 14px;
}

.ledger-btn,
.ledger-chip {
  cursor: pointer;
}

.ledger-chip {
  padding: 0;
  text-align: center;
}

.ledger-btn {
  padding: 0 16px;
  font-weight: 500;
}

.tenant-match {
  background: rgba(216, 161, 41, 0.24);
  border-color: rgba(216, 161, 41, 0.55) !important;
}

.table-shell table {
  min-width: 1600px;
  width: 1600px;
  background: transparent;
}

th,
td {
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(21, 50, 67, 0.08);
  vertical-align: middle;
  white-space: nowrap;
}

th {
  color: #5b6a74;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
  background: #faf5ed;
  white-space: normal;
  line-height: 1.16;
  box-shadow: inset 0 -1px 0 rgba(21, 50, 67, 0.08);
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-shell thead th {
  position: static;
  box-sizing: border-box;
  padding: 6px 10px;
  vertical-align: middle;
  border-right: 1px solid rgba(21, 50, 67, 0.06);
  background: #faf5ed;
  box-shadow:
    inset 0 -1px 0 rgba(21, 50, 67, 0.08),
    0 1px 0 rgba(250, 245, 237, 0.98);
}

.table-shell thead {
  display: none;
}

.archive-table-shell thead {
  display: table-header-group;
}

.vacant-table-shell thead {
  display: none;
}

.vacant-table-shell table {
  min-width: 1760px;
  width: 1760px;
}

.vacant-table-shell td {
  padding: 10px 12px;
  font-size: 0.94rem;
}

body[data-page="vacant"] .panel-header {
  margin-bottom: 6px;
  padding: 2px 0 4px;
}

body[data-page="expired-contract"] .panel-header {
  margin-bottom: 2px;
  padding: 0 0 1px;
}

/* Compact building filter under the Expired Contract title (left side) —
   deliberately much smaller than the Unit/Floor pill so the dense page keeps
   its scale. */
.expired-contract-building-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

/* Sync-health warning: shown by app-storage-runtime.js when unsynced changes
   are stuck (repeated push failures) — silence is never success. */
.sync-health-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #b3261e;
  color: #ffffff;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.expired-contract-building-filter span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.expired-contract-building-filter select {
  min-height: 26px;
  max-width: 190px;
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(21, 50, 67, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
}

body[data-page="tenant-database"] .main {
  padding: 8px 10px;
}

body[data-page="tenant-database"] .page-heading h2 {
  font-size: 1.15rem;
  margin-bottom: 2px;
}

body[data-page="tenant-database"] .panel-header {
  margin-bottom: 4px;
  padding: 2px 0 4px;
}

body[data-page="tenant-database"] .panel {
  padding: 8px;
}

body[data-page="tenant-database"] .panel-header h3 {
  font-size: 0.86rem;
}

body[data-page="tenant-database"] .panel-header p {
  font-size: 0.72rem;
}

body[data-page="vacant"] .panel-header h3 {
  font-size: 0.92rem;
}

body[data-page="expired-contract"] .panel-header h3 {
  font-size: 0.76rem;
}

body[data-page="vacant"] .panel-header p {
  font-size: 0.76rem;
}

body[data-page="expired-contract"] .panel-header p {
  font-size: 0.63rem;
}

body[data-page="vacant"] .month-tabs {
  gap: 5px;
  margin-top: 4px;
  margin-bottom: 6px;
}

body[data-page="vacant"] .month-tab {
  padding: 5px 10px;
  font-size: 0.8rem;
}

.vacant-table-shell th {
  padding: 5px 6px;
  font-size: 0.58rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

.vacant-table-shell td {
  padding: 6px 7px;
  font-size: 0.76rem;
}

.vacant-table-shell td:nth-child(1) {
  min-width: 130px;
}

.vacant-table-shell td:nth-child(2) {
  min-width: 95px;
}

.vacant-table-shell td:nth-child(3) {
  min-width: 120px;
}

.vacant-table-shell td:nth-child(4) {
  min-width: 80px;
}

.vacant-table-shell td:nth-child(5) {
  min-width: 90px;
}

.vacant-table-shell td:nth-child(6) {
  min-width: 260px;
}

.vacant-table-shell td:nth-child(7),
.vacant-table-shell td:nth-child(9) {
  min-width: 130px;
}

.vacant-table-shell td:nth-child(8) {
  min-width: 98px;
}

.vacant-table-shell td:nth-child(10) {
  min-width: 92px;
}

.vacant-table-shell td:nth-child(11),
.vacant-table-shell td:nth-child(12),
.vacant-table-shell td:nth-child(14) {
  min-width: 88px;
  text-align: center;
}

.vacant-table-shell td:nth-child(13) {
  min-width: 138px;
}

.archive-table-shell table {
  min-width: 100%;
  width: 100%;
}

.due-table-shell table {
  min-width: 1400px;
  width: max(100%, 1400px);
}

.archive-table-shell thead th {
  display: table-cell;
  position: static;
  padding: 10px 12px;
}

.section-row td {
  font-weight: 700;
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(21, 50, 67, 0.14);
}

.contract-group-30 td {
  background: rgba(255, 244, 214, 0.82);
}

.contract-group-60 td {
  background: rgba(255, 248, 228, 0.82);
}

.contract-group-90 td {
  background: rgba(250, 244, 235, 0.82);
}

.contract-group-expired td {
  background: rgba(250, 224, 224, 0.86);
}

.section-row.contract-group-30 td {
  background: rgba(237, 194, 102, 0.28);
  color: #8b5d07;
}

.section-row.contract-group-60 td {
  background: rgba(236, 207, 141, 0.24);
  color: #8a6920;
}

.section-row.contract-group-90 td {
  background: rgba(224, 203, 171, 0.24);
  color: #745838;
}

.section-row.contract-group-expired td {
  background: rgba(225, 118, 118, 0.18);
  color: #8a3030;
}

.contract-group-renewed td {
  background: rgba(223, 244, 228, 0.82);
}

.section-row.contract-group-renewed td {
  background: rgba(140, 198, 150, 0.24);
  color: #2f6b3c;
}

.due-group-late td {
  background: rgba(248, 224, 224, 0.82);
}

.due-group-unpaid td {
  background: rgba(255, 245, 210, 0.82);
}

.due-group-ex-late td {
  background: rgba(242, 229, 229, 0.84);
}

.due-group-ex-unpaid td {
  background: rgba(248, 241, 220, 0.82);
}

.section-row.due-group-late td {
  background: rgba(225, 118, 118, 0.18);
  color: #8a3030;
}

.section-row.due-group-unpaid td {
  background: rgba(237, 194, 102, 0.24);
  color: #8b5d07;
}

.section-row.due-group-ex-late td {
  background: rgba(209, 161, 161, 0.2);
  color: #7b3c3c;
}

.section-row.due-group-ex-unpaid td {
  background: rgba(224, 203, 171, 0.24);
  color: #745838;
}

.due-table-shell {
  border-radius: 18px;
  overflow: hidden;
}

.due-table-shell table {
  min-width: 100%;
  width: 100%;
}

body[data-page="due"] .panel-header {
  margin-bottom: 6px;
  padding: 2px 0 4px;
}

body[data-page="due"] .panel-header h3 {`r`n  font-size: 0.82rem;`r`n}

body[data-page="due"] .panel-header p {`r`n  font-size: 0.7rem;`r`n}

body[data-page="due"] .month-tabs {`r`n  gap: 5px;`r`n  margin-top: 2px;`r`n  margin-bottom: 4px;`r`n}

body[data-page="due"] .month-tab {`r`n  padding: 4px 9px;`r`n  font-size: 0.74rem;`r`n}

body[data-page="report"] .main,
body[data-page="due"] .main,
body[data-page="vacant"] .main,
body[data-page="tenant-tracker"] .main {
  width: 100%;
  max-width: none;
  padding: 14px 16px;
}

body[data-page="expired-contract"] .main {
  width: 100%;
  max-width: none;
  padding: 9px 11px;
}

body[data-page="report"] .panel,
body[data-page="due"] .panel,
body[data-page="vacant"] .panel,
body[data-page="tenant-tracker"] .panel {
  width: 100%;
}

body[data-page="report"] .table-shell,
body[data-page="report"] .table-header-shell,
body[data-page="due"] .table-shell,
body[data-page="vacant"] .table-shell,
body[data-page="tenant-tracker"] .table-shell,
body[data-page="due"] .table-header-shell,
body[data-page="vacant"] .table-header-shell {
  width: 100%;
  max-width: 100%;
}

body[data-page="report"] .table-sticky-wrap,
body[data-page="due"] .due-table-shell table,
body[data-page="vacant"] .vacant-table-shell table {
  min-width: 100%;
}

body[data-page="report"] .table-sticky-wrap,
body[data-page="report"] .table-header-shell,
body[data-page="report"] .table-shell {
  max-width: 100%;
}

body[data-page="report"] .table-shell {
  width: 100%;
  min-width: 0;
}

body[data-page="report"] .table-shell table {
  width: max(100%, 1820px);
  min-width: 1820px;
}

body[data-page="vacant"] .table-sticky-wrap,
body[data-page="vacant"] .table-header-shell,
body[data-page="vacant"] .vacant-table-shell {
  max-width: 100%;
}

body[data-page="vacant"] .table-sticky-wrap {
  overflow-x: visible;
}

body[data-page="vacant"] .vacant-table-shell {
  width: 100%;
  min-width: 0;
}

body[data-page="vacant"] .vacant-table-shell table {
  width: 100%;
  min-width: 0;
}

body[data-page="tenant-tracker"] .content-grid {
  display: block;
}

.tenant-tracker-panel {
  gap: 12px;
}

.tracker-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.tracker-title-block {
  min-width: 0;
}

.tracker-title-block p {
  max-width: 760px;
}

.tracker-summary-strip {
  /* All 6 totals on ONE line (user pick 2026-07-16). */
  display: grid;
  grid-template-columns: repeat(6, minmax(86px, 1fr));
  gap: 6px;
  min-width: 560px;
}

.tracker-summary-chip {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(19, 55, 74, 0.05);
  border: 1px solid rgba(19, 55, 74, 0.08);
}

.tracker-summary-chip strong,
.tracker-summary-chip span {
  display: block;
}

.tracker-summary-chip strong {
  font-size: 1.12rem;
  color: #173648;
  line-height: 1.1;
}

.tracker-summary-chip span {
  margin-top: 2px;
  font-size: 0.7rem;
  color: #6f8291;
}

.tracker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(227, 209, 189, 0.72);
  margin-bottom: 4px;
}

.tenant-tracker-month-tabs {
  margin: 0;
}

.tracker-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1 1 520px;
}

.tracker-filter-select {
  min-width: 200px;
}

.tracker-search-input {
  min-width: 320px;
  max-width: 520px;
}

.tracker-live-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.tracker-live-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(19, 55, 74, 0.05);
  color: #5f7382;
  font-size: 0.76rem;
}

.tracker-live-strip strong {
  color: #173648;
  font-size: 0.9rem;
}

body[data-page="tenant-tracker"] .tenant-tracker-wrap {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.tracker-grid-shell {
  margin-top: 8px;
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(19, 55, 74, 0.08);
  border-radius: 16px;
  background: rgba(255, 253, 250, 0.92);
  box-shadow: 0 8px 18px rgba(28, 38, 46, 0.035);
  overflow: hidden;
}

.tracker-grid {
  --tracker-grid-columns:
    84px
    64px
    minmax(180px, 1.55fr)
    minmax(84px, 0.72fr)
    minmax(54px, 0.45fr)
    repeat(var(--tracker-name-columns, 8), minmax(82px, 1fr))
    42px;
  display: grid;
  grid-template-columns: var(--tracker-grid-columns);
  width: max(100%, var(--tracker-grid-min-width, 1260px));
  min-width: var(--tracker-grid-min-width, 1260px);
}

.tracker-grid-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(246, 239, 230, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(227, 209, 189, 0.72);
  box-shadow: 0 8px 14px rgba(28, 38, 46, 0.06);
}

.tracker-grid-body {
  width: 100%;
}

.tracker-grid-row {
  border-bottom: 1px solid rgba(227, 209, 189, 0.55);
  background: rgba(255, 255, 255, 0.72);
}

.tracker-grid-row:hover {
  background: rgba(255, 248, 238, 0.88);
}

.tracker-grid-row:last-child {
  border-bottom: 0;
}

.tracker-grid-row[hidden],
.tracker-empty-state[hidden] {
  display: none !important;
}

.tracker-grid-cell {
  min-width: 0;
  padding: 5px 6px;
  font-size: 0.72rem;
  align-self: stretch;
  box-sizing: border-box;
}

.tracker-grid-head > .tracker-grid-cell:nth-child(1),
.tracker-grid-head > .tracker-grid-cell:nth-child(2),
.tracker-grid-head > .tracker-grid-cell:nth-child(3) {
  background: rgba(240, 228, 214, 0.95);
}

.tracker-grid-row > .tracker-grid-cell:nth-child(1),
.tracker-grid-row > .tracker-grid-cell:nth-child(2),
.tracker-grid-row > .tracker-grid-cell:nth-child(3) {
  background: rgba(252, 248, 242, 0.88);
  border-right: 1px solid rgba(227, 209, 189, 0.45);
}

.tracker-grid-heading {
  padding: 8px 8px;
  color: #6b7f8d;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-align: center;
}

.tracker-grid-heading-center,
.tracker-grid-cell-center {
  text-align: center;
}

.tracker-empty-state {
  padding: 14px 16px;
  color: #708492;
  font-size: 0.78rem;
}

.tracker-unit-cell strong,
.tracker-unit-cell span,
.tracker-floor-cell strong,
.tracker-tenant-cell strong {
  display: block;
}

.tracker-unit-cell strong,
.tracker-floor-cell strong,
.tracker-tenant-cell strong {
  color: #173648;
  font-size: 0.78rem;
  line-height: 1.2;
}

.tracker-unit-cell,
.tracker-floor-cell,
.tracker-grid-head > .tracker-grid-cell:nth-child(1),
.tracker-grid-head > .tracker-grid-cell:nth-child(2) {
  white-space: nowrap;
}

.tracker-floor-cell,
.tracker-unit-cell,
.tracker-grid-head > .tracker-grid-cell:nth-child(2) {
  text-align: center;
}

.tracker-tenant-cell {
  text-align: right;
}

.tracker-floor-cell,
.tracker-tenant-cell {
  display: flex;
  align-items: center;
}

.tracker-floor-cell {
  justify-content: center;
}

.tracker-tenant-cell {
  justify-content: flex-end;
}

.tracker-tenant-cell strong,
.tracker-floor-cell strong {
  width: 100%;
}

.tracker-unit-cell span {
  color: #708492;
  font-size: 0.64rem;
  line-height: 1.15;
}

.tracker-floor-cell strong {
  white-space: nowrap;
}

.tracker-grid input[data-tenant-tracker-paci],
.tracker-grid input[data-tenant-tracker-name] {
  width: 100%;
  min-height: 26px;
  padding: 3px 7px;
  border-radius: 9px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font-size: 0.7rem;
  line-height: 1.15;
  min-width: 0;
}

.tracker-paci-cell input[data-tenant-tracker-paci] {
  text-align: center;
}

.tracker-name-cell input[data-tenant-tracker-name]::placeholder {
  color: #8595a1;
}

/* Typed (Arabic) names read right-aligned; the "Name N" placeholder keeps its
   normal left alignment (:placeholder-shown = the field is still empty). */
.tracker-name-cell input[data-tenant-tracker-name] {
  text-align: right;
}

.tracker-name-cell input[data-tenant-tracker-name]:placeholder-shown {
  text-align: left;
}

/* Owner badge under a name: which tenant held the unit when the name was
   written (first 3 words). Lets old names survive a turnover while staying
   attributable. */
.tracker-name-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}

.tracker-name-owner-badge {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: right;
  font-size: 0.55rem;
  line-height: 1.1;
  padding: 0 3px;
  border-radius: 4px;
  color: #5b6b76;
  background: rgba(21, 50, 67, 0.06);
}

/* Green = the name belongs to the unit's CURRENT tenant; orange = an OLDER
   tenant (kept until removed manually). */
.tracker-name-owner-badge.owner-current {
  color: #2f6b3c;
  background: rgba(140, 198, 150, 0.28);
}

.tracker-name-owner-badge.owner-older {
  color: #8a5a1f;
  background: rgba(233, 168, 84, 0.26);
}

.tracker-owner-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  color: var(--muted);
  white-space: nowrap;
}

.tracker-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tracker-legend-dot.legend-current {
  background: #59a86c;
}

.tracker-legend-dot.legend-older {
  background: #e9a854;
  margin-left: 8px;
}

.tracker-summary-chip-current strong {
  color: #2f6b3c;
}

.tracker-summary-chip-older strong {
  color: #8a5a1f;
}

.calc-value.tracker-people-count {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  min-height: 26px;
  font-size: 0.7rem;
  line-height: 1;
  margin: 0 auto;
  padding: 0 !important;
  background: rgba(247, 242, 234, 0.92);
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 10px;
  box-sizing: border-box;
}

body[data-page="tenant-tracker"] .month-tabs {
  gap: 5px;
}

@media (max-width: 1250px) {
  .tracker-panel-header {
    flex-direction: column;
  }

  .tracker-summary-strip {
    min-width: 0;
    width: 100%;
  }

  .tracker-grid {
    width: max(100%, 1160px);
    min-width: 1160px;
  }
}

@media (max-width: 860px) {
  .tracker-toolbar {
    align-items: stretch;
  }

  .tracker-filter-bar {
    justify-content: stretch;
  }

  .tracker-filter-select,
  .tracker-search-input {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .tracker-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tracker-grid {
    width: max(100%, 1040px);
    min-width: 1040px;
  }
}

body[data-page="tenant-tracker"] .month-tab {
  padding: 2px 7px;
  font-size: 0.6rem;
}

body[data-page="tenant-tracker"] {
  background: #eef1f3;
}

body[data-page="tenant-tracker"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="tenant-tracker"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="tenant-tracker"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="tenant-tracker"] .content-grid {
  gap: 8px;
}

body[data-page="tenant-tracker"] .tenant-tracker-panel {
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="tenant-tracker"] .tracker-panel-header {
  gap: 8px;
  margin-bottom: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="tenant-tracker"] .tracker-title-block h3 {
  margin-bottom: 0;
  font-size: 0.98rem;
}

body[data-page="tenant-tracker"] .tracker-title-block p {
  display: none;
}

body[data-page="tenant-tracker"] .tracker-summary-strip {
  /* All 6 totals on ONE line (user pick 2026-07-16). */
  grid-template-columns: repeat(6, minmax(78px, 1fr));
  gap: 6px;
  min-width: 520px;
}

body[data-page="tenant-tracker"] .tracker-summary-chip {
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="tenant-tracker"] .tracker-summary-chip strong {
  color: #25313a;
  font-size: 0.98rem;
}

body[data-page="tenant-tracker"] .tracker-summary-chip span {
  margin-top: 1px;
  color: #56636c;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="tenant-tracker"] .tracker-toolbar {
  gap: 7px;
  margin-bottom: 0;
  padding: 8px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="tenant-tracker"] .tenant-tracker-month-tabs {
  gap: 4px;
}

body[data-page="tenant-tracker"] .month-tab-shell {
  border-radius: 5px;
}

body[data-page="tenant-tracker"] .month-tab {
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 0.66rem;
}

body[data-page="tenant-tracker"] .tracker-filter-bar {
  gap: 7px;
}

body[data-page="tenant-tracker"] .tracker-filter-select,
body[data-page="tenant-tracker"] .tracker-search-input {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.74rem;
  line-height: 1.1;
}

body[data-page="tenant-tracker"] .tracker-filter-select {
  min-width: 170px;
}

body[data-page="tenant-tracker"] .tracker-search-input {
  min-width: 280px;
}

body[data-page="tenant-tracker"] .tracker-live-strip {
  gap: 5px;
  margin-bottom: 0;
}

body[data-page="tenant-tracker"] .tracker-live-strip span {
  gap: 4px;
  padding: 4px 7px;
  border-radius: 5px;
  background: #ffffff;
  border: 1px solid rgba(73, 88, 98, 0.14);
  color: #56636c;
  font-size: 0.66rem;
}

body[data-page="tenant-tracker"] .tracker-live-strip strong {
  color: #25313a;
  font-size: 0.78rem;
}

body[data-page="tenant-tracker"] .tracker-grid-shell {
  margin-top: 7px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="tenant-tracker"] .tracker-grid {
  --tracker-grid-columns:
    66px
    72px
    minmax(150px, 1.35fr)
    minmax(76px, 0.65fr)
    minmax(42px, 0.35fr)
    repeat(var(--tracker-name-columns, 8), minmax(72px, 1fr))
    42px;
  width: max(100%, var(--tracker-grid-min-width, 1080px));
  min-width: var(--tracker-grid-min-width, 1080px);
}

body[data-page="tenant-tracker"] .tracker-grid-head {
  background: #eef1f3;
  border-bottom-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="tenant-tracker"] .tracker-grid-row {
  background: #ffffff;
  border-bottom-color: rgba(73, 88, 98, 0.11);
}

body[data-page="tenant-tracker"] .tracker-grid-row:hover {
  background: #f8fafb;
}

body[data-page="tenant-tracker"] .tracker-grid-stacked-row {
  grid-auto-rows: minmax(32px, auto);
}

body[data-page="tenant-tracker"] .tracker-row-span-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body[data-page="tenant-tracker"] .tracker-paci-cell {
  align-items: stretch;
}

body[data-page="tenant-tracker"] .tracker-grid-cell-center.tracker-row-span-cell {
  align-items: center;
}

body[data-page="tenant-tracker"] .tracker-grid-extra-row {
  background: #fbfcfd;
}

body[data-page="tenant-tracker"] .tracker-grid-extra-row:hover {
  background: #f7f9fa;
}

body[data-page="tenant-tracker"] .tracker-grid-cell {
  padding: 4px 5px;
  font-size: 0.66rem;
}

body[data-page="tenant-tracker"] .tracker-grid-heading {
  padding: 5px;
  color: #56636c;
  font-size: 0.56rem;
  letter-spacing: 0;
}

body[data-page="tenant-tracker"] .tracker-grid-head > .tracker-grid-cell:nth-child(1),
body[data-page="tenant-tracker"] .tracker-grid-head > .tracker-grid-cell:nth-child(2),
body[data-page="tenant-tracker"] .tracker-grid-head > .tracker-grid-cell:nth-child(3) {
  background: #e4e9ec;
}

body[data-page="tenant-tracker"] .tracker-grid-row > .tracker-grid-cell:nth-child(1),
body[data-page="tenant-tracker"] .tracker-grid-row > .tracker-grid-cell:nth-child(2),
body[data-page="tenant-tracker"] .tracker-grid-row > .tracker-grid-cell:nth-child(3),
body[data-page="tenant-tracker"] .tracker-grid-row > .tracker-grid-cell:nth-child(4),
body[data-page="tenant-tracker"] .tracker-grid-row > .tracker-grid-cell:nth-child(5) {
  background: #fbfcfd;
  border-right-color: rgba(73, 88, 98, 0.12);
}

body[data-page="tenant-tracker"] .tracker-unit-cell strong,
body[data-page="tenant-tracker"] .tracker-floor-cell strong,
body[data-page="tenant-tracker"] .tracker-tenant-cell strong {
  color: #25313a;
  font-size: 0.66rem;
}

body[data-page="tenant-tracker"] .tracker-unit-cell span {
  color: #64717a;
  font-size: 0.56rem;
}

body[data-page="tenant-tracker"] .tracker-grid input[data-tenant-tracker-paci],
body[data-page="tenant-tracker"] .tracker-grid input[data-tenant-tracker-name] {
  min-height: 24px;
  padding: 2px 6px;
  border-radius: 5px;
  border-color: rgba(73, 88, 98, 0.2);
  background: #ffffff;
  font-size: 0.64rem;
}

.tracker-name-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.tracker-extra-cell {
  background: #fbfcfd;
}

.tracker-extra-label {
  display: flex;
  align-items: center;
  color: #697984;
  font-size: 0.62rem;
  font-weight: 700;
  background: #fbfcfd;
}

.tracker-name-action {
  width: 18px;
  min-width: 18px;
  height: 20px;
  border: 1px solid rgba(192, 108, 54, 0.32);
  border-radius: 5px;
  background: #fff8f1;
  color: #9b5527;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.tracker-name-action:hover {
  background: #f9eadc;
}

.tracker-name-action.danger {
  border-color: rgba(197, 78, 84, 0.34);
  background: #fff5f5;
  color: #b94a50;
}

.app-message-overlay[hidden] {
  display: none;
}

.app-message-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: rgba(15, 28, 38, 0.42);
  backdrop-filter: blur(1px);
}

/* Busy overlay: spinner + message painted BEFORE heavy synchronous work
   (e.g. invalidating a receipt) so the tab never looks frozen. */
.app-busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(15, 28, 38, 0.42);
  backdrop-filter: blur(1px);
}

.app-busy-overlay[hidden] {
  display: none;
}

.app-busy-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border: 1px solid rgba(204, 213, 220, 0.9);
  border-radius: 12px;
  background: #fffefa;
  box-shadow: 0 22px 48px rgba(20, 34, 44, 0.22);
}

.app-busy-text {
  font-size: 0.92rem;
  font-weight: 600;
  color: #23414f;
}

.app-busy-spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 3px solid rgba(176, 124, 56, 0.25);
  border-top-color: #b07c38;
  border-radius: 50%;
  animation: app-busy-spin 0.8s linear infinite;
}

@keyframes app-busy-spin {
  to {
    transform: rotate(360deg);
  }
}

.app-message-card {
  width: min(360px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(204, 213, 220, 0.9);
  border-radius: 12px;
  background: #fffefa;
  box-shadow: 0 22px 48px rgba(20, 34, 44, 0.22);
  text-align: center;
}

.app-message-card strong {
  font-size: 0.95rem;
}

.app-message-card span {
  color: #647483;
  font-size: 0.78rem;
  line-height: 1.4;
  /* alert() messages use \n\n paragraph breaks — keep them as line breaks. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}

.app-message-card .action-btn {
  min-height: 30px;
  padding: 6px 16px;
  border-radius: 7px;
}

.app-message-input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(21, 50, 67, 0.2);
  border-radius: 8px;
  text-align: center;
}

.app-message-input:focus {
  outline: none;
  border-color: var(--accent);
}

.app-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 50, 67, 0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: app-loading-spin 0.8s linear infinite;
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.app-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.app-confirm-actions .action-btn {
  min-width: 96px;
}

body[data-page="tenant-tracker"] .calc-value.tracker-people-count {
  width: 28px;
  min-width: 28px;
  min-height: 24px;
  border-radius: 5px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.16);
  font-size: 0.64rem;
}

body[data-page="tenant-tracker"] .tracker-empty-state {
  padding: 12px 8px;
  font-size: 0.74rem;
}

@media (max-width: 1250px) {
  body[data-page="tenant-tracker"] .tracker-summary-strip {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 860px) {
  body[data-page="tenant-tracker"] .tracker-filter-select,
  body[data-page="tenant-tracker"] .tracker-search-input {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  body[data-page="tenant-tracker"] .tracker-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.due-redesign-panel {
  display: grid;
  gap: 10px;
}

.due-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.due-summary-chip {
  min-width: 100px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: rgba(255, 251, 245, 0.92);
}

/* Late / Unpaid tenant-count chips, tinted to match the status colours. */
.due-summary-chip.late {
  border-color: rgba(196, 84, 84, 0.4);
  background: rgba(252, 242, 241, 0.95);
}

.due-summary-chip.late strong {
  color: #c0392b;
}

.due-summary-chip.unpaid {
  border-color: rgba(201, 145, 58, 0.4);
  background: rgba(253, 248, 240, 0.95);
}

.due-summary-chip.unpaid strong {
  color: #b9772b;
}

.due-summary-chip strong,
.due-summary-chip span {
  display: block;
}

.due-summary-chip strong {
  font-size: 0.92rem;
}

.due-summary-chip span {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 2px;
}

.due-building-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.due-building-card {
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 16px;
  background: rgba(255, 251, 245, 0.95);
  box-shadow: 0 10px 22px rgba(31, 41, 51, 0.06);
  padding: 10px;
  min-width: 0;
}

.due-building-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.due-building-card-header h4,
.due-building-card-header p {
  margin: 0;
}

.due-building-card-header h4 {
  font-size: 0.88rem;
}

.due-building-card-header p {
  margin-top: 3px;
  font-size: 0.66rem;
  color: var(--muted);
}

.due-building-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.due-badge {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.due-badge.late {
  background: rgba(215, 100, 86, 0.12);
  color: #ab4f43;
}

.due-badge.unpaid {
  background: rgba(216, 161, 41, 0.14);
  color: #946d16;
}

.due-badge.ex {
  background: rgba(124, 106, 90, 0.12);
  color: #6f5d50;
}

.due-building-table-wrap {
  overflow-x: auto;
}

.due-print-date {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.due-building-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  /* Fixed layout = every building card uses identical column widths, so the
     Tenant column no longer stretches to its longest name and the Status column
     lines up vertically across all cards. */
  table-layout: fixed;
}

/* Identical column widths for every Due table (sum = 100%). */
.due-building-table th:nth-child(1) { width: 8%; }   /* Unit */
.due-building-table th:nth-child(2) { width: 35%; }  /* Tenant */
.due-building-table th:nth-child(3) { width: 12%; }  /* Status */
.due-building-table th:nth-child(4) { width: 11%; }  /* From Before */
.due-building-table th:nth-child(5) { width: 11%; }  /* Paid Prev */
.due-building-table th:nth-child(6) { width: 11%; }  /* Unpaid */
.due-building-table th:nth-child(7) { width: 12%; }  /* Total */

/* Long tenant names WRAP onto extra lines (row grows taller) so the full name is
   always visible, instead of being cut off — while the fixed column widths keep
   every Status column aligned across cards. */
.due-building-table tbody td:nth-child(2) {
  white-space: normal;
  vertical-align: top;
}

.due-building-table tbody td:nth-child(2) strong,
.due-building-table tbody td:nth-child(2) span {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.due-building-table th,
.due-building-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(21, 50, 67, 0.06);
  font-size: 0.66rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.due-building-table thead th {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #647786;
  background: rgba(255, 252, 247, 0.98);
}

.due-building-table thead th:nth-child(n + 4) {
  text-align: center;
}

.due-building-table tbody td:nth-child(n + 4),
.due-building-table tfoot td:nth-child(n + 2) {
  text-align: center;
}

.due-building-table tbody td:nth-child(2) strong,
.due-building-table tbody td:nth-child(2) span {
  display: block;
}

.due-building-table tbody td:nth-child(2) span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.6rem;
}

.due-building-table tfoot td {
  font-weight: 700;
  background: rgba(248, 243, 235, 0.95);
}

.due-row-late td {
  background: rgba(255, 239, 236, 0.7);
}

.due-row-unpaid td {
  background: rgba(255, 248, 226, 0.72);
}

.due-tenant-name-row {
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

/* Name takes ALL the free space (and wraps); the history badges are pushed to
   the cell's right edge so they line up across rows — reads like their own
   aligned slot without any visible column. */
.due-tenant-name-row > strong {
  flex: 1 1 auto;
  min-width: 0;
}

.due-tenant-name-row > .due-history-arrow {
  flex: 0 0 auto;
}

.due-history-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  color: #fff;
}

.due-history-arrow.late {
  background: #c0392b;
}

.due-history-arrow.unpaid {
  background: #2e7d32;
}

/* Beat the table's generic ".due-building-table td:nth-child(2) span" rule, which
   otherwise paints the count grey and shrinks it. */
.due-building-table tbody td:nth-child(2) span.due-history-arrow {
  display: inline-flex;
  vertical-align: middle;
  color: #fff;
  margin-top: 0;
  font-size: 11px;
}

.due-row-ex td {
  background: rgba(245, 239, 234, 0.88);
}

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

.vacant-redesign-panel {
  display: grid;
  gap: 10px;
}

.vacant-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vacant-summary-chip {
  min-width: 84px;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(21, 50, 67, 0.08);
  background: rgba(255, 251, 245, 0.92);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vacant-summary-chip strong,
.vacant-summary-chip span {
  display: block;
}

.vacant-summary-chip strong {
  font-size: 0.82rem;
}

.vacant-summary-chip span {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 2px;
}

.dash-sort-arrow {
  border: none;
  background: none;
  padding: 0 0 0 3px;
  margin: 0;
  font-size: 0.55rem;
  line-height: 1;
  color: rgba(11, 11, 11, 0.30);
  cursor: pointer;
  vertical-align: middle;
}

.dash-sort-arrow:hover {
  color: rgba(11, 11, 11, 0.65);
}

.dash-sort-arrow.active {
  color: #d77a37;
}

.vacant-type-add option {
  color: #1c1c1a;
  font-weight: 600;
}

.vacant-filter-chip {
  min-width: 170px;
}

.vacant-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.vacant-type-toggle {
  border: 1px solid rgba(21, 50, 67, 0.16);
  background: #ffffff;
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.7rem;
  cursor: pointer;
}

.vacant-type-toggle.active {
  background: #153243;
  border-color: #153243;
  color: #ffffff;
}

.vacant-type-add {
  border: 1px dashed rgba(21, 50, 67, 0.28);
  background: #ffffff;
  color: var(--muted);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  max-width: 90px;
}

.vacant-building-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.vacant-building-card {
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 16px;
  background: rgba(255, 251, 245, 0.95);
  box-shadow: 0 10px 22px rgba(31, 41, 51, 0.06);
  padding: 10px;
  min-width: 0;
}

.vacant-building-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.vacant-building-card-header h4,
.vacant-building-card-header p {
  margin: 0;
}

.vacant-building-card-header h4 {
  font-size: 0.88rem;
}

.vacant-building-card-header p {
  margin-top: 3px;
  font-size: 0.66rem;
  color: var(--muted);
}

.vacant-building-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.vacant-badge {
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.vacant-badge.empty {
  background: rgba(78, 130, 187, 0.12);
  color: #4e82bb;
}

.vacant-badge.planned {
  background: rgba(201, 108, 58, 0.12);
  color: #a95f33;
}

.vacant-building-table-wrap {
  overflow-x: auto;
}

.vacant-building-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.vacant-building-table th,
.vacant-building-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(21, 50, 67, 0.06);
  font-size: 0.66rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.vacant-building-table thead th {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #647786;
  background: rgba(255, 252, 247, 0.98);
}

.vacant-building-table thead th:last-child {
  text-align: center;
}

.vacant-building-table tbody td:nth-child(1) strong,
.vacant-building-table tbody td:nth-child(1) span {
  display: block;
}

.vacant-building-table tbody td:nth-child(1) span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.6rem;
}

.vacant-building-table tbody td:nth-child(n + 5),
.vacant-building-table tfoot td:last-child {
  text-align: center;
}

.vacant-building-table tfoot td {
  font-weight: 700;
  background: rgba(248, 243, 235, 0.95);
}

.vacant-row-empty td {
  background: rgba(240, 247, 255, 0.7);
}

.vacant-row-planned td {
  background: rgba(255, 246, 234, 0.8);
}

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

.due-table-shell thead th {`r`n  padding: 4px 5px;`r`n  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #647786;
  background: rgba(255, 252, 247, 0.96);
  border-bottom: 1px solid rgba(21, 50, 67, 0.08);
  line-height: 1;
}

.due-table-shell tbody td {`r`n  padding: 4px 5px;`r`n  font-size: 0.68rem;
  border-bottom: 1px solid rgba(21, 50, 67, 0.06);
}

$178px;
}

$156px;
}

$158px;
}

$1148px;
}

.due-table-shell td:nth-child(4) {
  text-align: right;
}

$160px;
}

$158px;
  text-align: center;
}

$168px;
  text-align: center;
}

$1112px;
}

.due-table-shell tfoot td {`r`n  padding: 5px 6px;`r`n  font-weight: 700;`r`n  background: rgba(250, 245, 237, 0.95);`r`n  font-size: 0.66rem;`r`n}

.due-table-shell .section-row td {`r`n  padding: 4px 5px;`r`n  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.archive-table-shell tbody tr:not(.section-row):hover td {
  background: rgba(255, 244, 220, 0.96);
}

.archive-table-shell tfoot td {
  display: table-cell;
}

body[data-page="tenant-database"] .archive-table-shell table {
  min-width: 1240px;
  width: max(100%, 1240px);
}

body[data-page="tenant-database"] .archive-table-shell thead th {
  padding: 5px 7px;
  font-size: 0.56rem;
  line-height: 1.05;
}

body[data-page="tenant-database"] .archive-table-shell tbody td {
  padding: 5px 7px;
  font-size: 0.72rem;
  line-height: 1.1;
}

body[data-page="tenant-database"] .archive-table-shell tfoot td {
  padding: 5px 7px;
  font-size: 0.68rem;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(1) {
  min-width: 96px;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(2),
body[data-page="tenant-database"] .archive-table-shell td:nth-child(3),
body[data-page="tenant-database"] .archive-table-shell td:nth-child(4),
body[data-page="tenant-database"] .archive-table-shell td:nth-child(5) {
  min-width: 64px;
  text-align: center;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(6) {
  min-width: 150px;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(7) {
  min-width: 88px;
  text-align: center;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(8) {
  min-width: 94px;
  text-align: right;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(9) {
  min-width: 140px;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(10) {
  min-width: 118px;
  text-align: center;
}

body[data-page="tenant-database"] .archive-table-shell td:nth-child(11) {
  min-width: 128px;
}

body[data-page="expired-contract"] .archive-table-shell thead th {
  padding: 4px 5px;
  font-size: 0.54rem;
  line-height: 1;
}

body[data-page="expired-contract"] .archive-table-shell tbody td {
  /* Sized so ~27 rows fit a screen (user pick 2026-07-16). */
  padding: 5px 6px;
  font-size: 0.72rem;
  line-height: 1.05;
}

body[data-page="expired-contract"] .archive-table-shell tfoot td {
  padding: 4px 6px;
  font-size: 0.69rem;
}

body[data-page="expired-contract"] .archive-table-shell .section-row td {
  padding: 3px 6px;
  font-size: 0.61rem;
  letter-spacing: 0.03em;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(1) {
  min-width: 92px;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(2),
body[data-page="expired-contract"] .archive-table-shell td:nth-child(3) {
  min-width: 54px;
  text-align: center;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(4) {
  min-width: 148px;
  text-align: right;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(5),
body[data-page="expired-contract"] .archive-table-shell td:nth-child(6) {
  min-width: 88px;
  text-align: center;
}

/* Columns 7-13: Contract Amount, Discount, Actual Rent, Days Left, Comment,
   Status, Renewal (the old indices predate the Discount / Actual Rent / Days
   Left columns — the Comment input had fallen back to the big global input
   style, which is what made every row tall). */
body[data-page="expired-contract"] .archive-table-shell td:nth-child(7),
body[data-page="expired-contract"] .archive-table-shell td:nth-child(8),
body[data-page="expired-contract"] .archive-table-shell td:nth-child(9) {
  min-width: 58px;
  text-align: center;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(10) {
  min-width: 90px;
  text-align: center;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(11) {
  min-width: 104px;
  max-width: 150px;
}

body[data-page="expired-contract"] .archive-table-shell input[data-contract-comment] {
  min-width: 0;
  width: 100%;
  padding: 1px 5px;
  min-height: 19px;
  font-size: 0.62rem;
  border-radius: 5px;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(12) {
  min-width: 56px;
  text-align: center;
}

body[data-page="expired-contract"] .archive-table-shell td:nth-child(13) {
  min-width: 132px;
  text-align: center;
}

body[data-page="expired-contract"] .contract-renew-btn,
body[data-page="expired-contract"] .contract-renew-undo {
  padding: 3px 8px;
  font-size: 0.64rem;
  border-radius: 5px;
  white-space: nowrap;
}

body[data-page="expired-contract"] .contract-renew-undo {
  margin-left: 4px;
  opacity: 0.85;
}

body[data-page="expired-contract"] .contract-renewed-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(140, 198, 150, 0.26);
  color: #2f6b3c;
  font-size: 0.62rem;
  font-weight: 600;
  white-space: nowrap;
}

body[data-page="expired-contract"] .contract-renew-hint {
  color: rgba(21, 50, 67, 0.5);
  font-size: 0.62rem;
}

.table-shell thead::after {
  content: "";
  display: table-row;
  height: 10px;
}

.table-shell thead th:last-child {
  border-right: 0;
}

.table-header-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 10px 10px;
  text-align: center;
  color: #607284;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  background: #faf5ed;
  border-right: 1px solid rgba(21, 50, 67, 0.1);
  box-shadow: inset 0 -1px 0 rgba(21, 50, 67, 0.08);
}

.table-header-cell:last-child {
  border-right: 0;
}

.table-shell thead .th-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  line-height: 1.16;
  text-align: center;
  width: 100%;
}

th .th-wrap {
  display: inline-block;
}

.table-shell tbody td:nth-child(n + 8),
.table-shell tfoot td:nth-child(n + 9) {
  text-align: center;
}

td {
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.72);
}

.table-shell tbody tr:hover td {
  background: rgba(255, 239, 208, 0.98);
}

tfoot td {
  font-weight: 700;
  background: linear-gradient(180deg, rgba(246, 236, 224, 0.92), rgba(243, 231, 217, 0.96));
  color: #6f5333;
  border-top: 1px solid rgba(201, 108, 58, 0.14);
  white-space: nowrap;
  width: 1%;
}

.table-shell tfoot input[data-footer-calc] {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

.table-shell input,
.table-shell textarea {
  width: 100%;
  min-width: 64px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 252, 247, 0.96);
  color: var(--text);
  font: inherit;
  min-height: 38px;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85);
}

.table-shell input[type="text"] {
  min-width: 140px;
}

.table-shell input:focus,
.table-shell textarea:focus,
.table-shell select:focus {
  outline: none;
  border-color: rgba(201, 108, 58, 0.55);
  box-shadow: 0 0 0 3px rgba(201, 108, 58, 0.1);
}

.table-shell .field-invalid {
  border-color: rgba(196, 84, 84, 0.75);
  background: rgba(255, 242, 242, 0.96);
  box-shadow: 0 0 0 2px rgba(196, 84, 84, 0.12);
  color: #8a3030;
}

.lease-form-card .field-invalid {
  border-color: rgba(196, 84, 84, 0.75) !important;
  background: rgba(255, 242, 242, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(196, 84, 84, 0.12) !important;
  color: #8a3030 !important;
}

.table-shell tr.active-row td {
  background: rgba(255, 228, 184, 0.98);
}

.table-shell input::placeholder,
.table-shell textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.table-shell input[type="number"] {
  width: 68px;
  min-width: 68px;
  text-align: center;
  -moz-appearance: textfield;
}

.table-shell input[type="number"]::-webkit-outer-spin-button,
.table-shell input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.table-shell input[readonly] {
  background: rgba(243, 238, 230, 0.88);
  color: #6d767d;
}

.table-shell .ex-tenant-muted {
  background: rgba(243, 238, 230, 0.92);
  color: #6d767d;
}

.table-shell select.ex-tenant-muted,
.table-shell textarea.ex-tenant-muted,
.table-shell input.ex-tenant-muted {
  background: rgba(243, 238, 230, 0.92);
  color: #6d767d;
}

.table-shell .calc-value.ex-tenant-muted {
  background: rgba(243, 238, 230, 0.92);
  color: #6d767d;
}

.table-shell input[data-field="contractAmount"] {
  width: auto;
  min-width: 72px;
}

.calc-value {
  display: inline-block;
  min-width: 68px;
  padding: 7px 10px;
  border-radius: 10px;
  color: #36454f;
  text-align: center;
  background: rgba(247, 242, 234, 0.72);
}

.calc-value.status-paid {
  background: rgba(202, 236, 214, 0.9);
  color: #2f6a43;
}

.calc-value.status-unpaid {
  background: rgba(255, 239, 191, 0.95);
  color: #8a6a00;
}

.calc-value.status-late {
  background: rgba(248, 215, 215, 0.9);
  color: #8a3030;
}

.calc-value.status-extra {
  background: rgba(230, 219, 255, 0.95);
  color: #5f3aa8;
}

.calc-value.status-vacant {
  background: rgba(232, 234, 237, 0.92);
  color: #5f6870;
}

.calc-value.status-upcoming {
  background: rgba(222, 231, 246, 0.95);
  color: #4a6288;
}

.calc-value.status-handover {
  background: rgba(248, 229, 207, 0.95);
  color: #9a5d1f;
}

.calc-value.status-partial {
  background: rgba(215, 232, 248, 0.92);
  color: #2d5f86;
}

.calc-value.status-neutral {
  background: rgba(247, 242, 234, 0.72);
  color: #36454f;
}

/* "No Receipt": an unbilled tenant (no receipt yet) — neutral grey so it does
   not read as an overdue/unpaid balance. Matches the Tenant Database badge. */
.calc-value.status-no-receipt {
  background: rgba(108, 123, 131, 0.14);
  color: #5b6b73;
}

/* Paid via advance credit — "Prepaid" / "Prepaid Before". Money-wise identical
   to Paid; the navy tint just marks WHERE the payment came from. */
.calc-value.status-prepaid {
  background: rgba(21, 39, 96, 0.16);
  color: #152760;
}

/* Pending end-of-month vacate: tenant is still normal this month, leaving
   next. Sits on the right side of the Notes cell (notes-system-col). */
.move-out-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(212, 118, 55, 0.16);
  border: 1px solid rgba(212, 118, 55, 0.35);
  color: #a4560f;
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

body[data-page="report"] .move-out-badge {
  padding: 0 5px;
  font-size: 0.48rem;
}

.table-shell input[data-field="notes"] {
  width: 180px;
  min-width: 180px;
}

.notes-cell {
  display: grid;
  gap: 4px;
}

.notes-helper {
  color: rgba(96, 114, 132, 0.72);
  font-size: 12px;
  line-height: 1.2;
}

.preview-state-label {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(21, 50, 67, 0.08);
  color: #5a6773;
  font-size: 11px;
  font-weight: 700;
}

.preview-state-label.pending {
  background: rgba(201, 108, 58, 0.12);
  color: #a05a25;
}

.pending-handover-row .preview-state-label.pending {
  max-width: 100%;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-state-label.owner {
  background: rgba(62, 139, 99, 0.1);
  color: #2f7a55;
}

.preview-state-label.inline {
  padding: 3px 6px;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
}

.unit-ref-cell {
  /* Slimmed: the cell now shows only the row number (full ref on hover) —
     sized to fit a 2-digit number and nothing more. */
  min-width: 28px;
  width: 28px;
  max-width: 28px;
  padding-left: 2px;
  padding-right: 2px;
  vertical-align: middle;
  text-align: center;
}

/* Report page: Unit Ref column hidden — Floor/Unit already locate the row.
   Collapsed to a 2px sliver instead of display:none so the footer colspans
   still count the column and the floating header's width measurement (which
   needs > 0px) keeps every other column aligned. Scoped to thead/tbody so the
   footer's colspan "Footer Total" label cell is untouched. */
body[data-page="report"] .table-shell table thead th:first-child,
body[data-page="report"] .table-shell table tbody td.unit-ref-cell {
  width: 2px;
  min-width: 2px;
  max-width: 2px;
  padding: 0;
  overflow: hidden;
}

body[data-page="report"] .table-shell table thead th:first-child > *,
body[data-page="report"] .table-shell table tbody td.unit-ref-cell > * {
  display: none;
}

body[data-page="report"] .table-header-shell .table-header-cell:first-child {
  visibility: hidden;
  padding: 0;
  overflow: hidden;
}

.preview-unit-ref-labels {
  display: grid;
  justify-items: start;
  gap: 3px;
  margin-top: 4px;
}

.unit-id-toggle {
  font-size: 0.8em;
}

.archive-helper {
  display: block;
  margin-top: 4px;
  color: rgba(164, 108, 36, 0.88);
  font-size: 12px;
  line-height: 1.2;
}

.table-shell input[data-field="floor"] {
  width: auto;
  min-width: 3ch;
  text-align: right;
}

.table-shell input[data-field="unit"] {
  width: auto;
  min-width: 4ch;
  text-align: right;
}

.table-shell input[data-field="tenantName"] {
  width: auto;
  min-width: 24ch;
}

.table-shell textarea[data-field="tenantName"] {
  display: block;
  width: auto;
  min-width: 24ch;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  padding: 4px 6px;
  line-height: 1.2;
  min-height: 38px;
  font: inherit;
  border: 1px solid rgba(21, 50, 67, 0.12);
  border-radius: 10px;
  background: rgba(255, 252, 247, 0.96);
  color: var(--text);
}

.table-shell input[data-field="vacant"] {
  width: 82px;
  min-width: 82px;
}

.table-shell input[data-field="january"] {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.tenant-inline {
  display: block;
  min-width: 24ch;
}

.tenant-display-value {
  display: block;
  min-width: 24ch;
  padding: 8px 6px;
  line-height: 1.3;
  color: var(--text);
  text-align: right;
  white-space: pre-wrap;
  word-break: break-word;
}

.pending-handover-row td {
  background: rgba(243, 238, 230, 0.58);
  vertical-align: middle;
}

.table-shell tbody tr.pending-handover-row:hover td {
  background: rgba(243, 238, 230, 0.64);
}

.pending-handover-row .unit-id-toggle,
.pending-handover-row .tenant-display-value,
.pending-handover-row input:not([data-field="prepaid"]),
.pending-handover-row select,
.pending-handover-row .calc-value {
  background: rgba(243, 238, 230, 0.92);
  color: #6d767d;
}

.pending-handover-row .tenant-display-value {
  color: rgba(96, 105, 115, 0.92);
}

.pending-handover-row .unit-id-toggle {
  opacity: 0.72;
}

.pending-handover-unit-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pending-handover-unit-suffix {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(96, 105, 115, 0.86);
}

.pending-handover-prepaid {
  background: rgba(255, 252, 247, 0.96) !important;
  color: var(--text) !important;
}

.pending-handover-row input[data-field="insuranceCurrent"],
.pending-handover-row input[data-field="insurancePrevious"] {
  background: rgba(255, 252, 247, 0.96) !important;
  color: var(--text) !important;
}

.pending-handover-status {
  opacity: 0.88;
  background: rgba(248, 229, 207, 0.95) !important;
  color: #9a5d1f !important;
  font-size: 9px;
  line-height: 1;
}

.pending-handover-complete-btn {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(201, 108, 58, 0.3);
  border-radius: 4px;
  background: rgba(201, 108, 58, 0.12);
  color: #9a5d1f;
  padding: 1px 4px;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.pending-handover-complete-btn:hover {
  background: rgba(201, 108, 58, 0.2);
}

.pending-handover-cancel-btn {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(73, 88, 98, 0.22);
  border-radius: 4px;
  background: rgba(73, 88, 98, 0.08);
  color: #53616c;
  padding: 1px 4px;
  font-size: 8px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

.pending-handover-cancel-btn:hover {
  background: rgba(73, 88, 98, 0.14);
}

.tenant-meta input {
  width: 100%;
  min-width: 0;
  font-size: 0.82rem;
  padding: 5px 7px;
}

.tenant-detail-row td {
  background: rgba(247, 242, 234, 0.9);
  padding: 12px 14px;
}

.tenant-detail-inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 220px));
  gap: 10px;
}

.inline-detail-field {
  display: grid;
  gap: 4px;
}

.inline-detail-field span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6f7b84;
}

.table-shell input[data-field="contractStart"],
.table-shell input[data-field="contractEnd"] {
  width: 125px;
  min-width: 125px;
  max-width: 125px;
}

.table-shell select {
  width: 98px;
  min-width: 98px;
  padding: 7px 10px;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 252, 247, 0.96);
  color: var(--text);
  font: inherit;
}

.table-shell select[data-field="contractPreset"] {
  width: 98px;
  min-width: 98px;
  max-width: 98px;
}

.table-actions {
  display: flex;
  gap: 6px;
}

.table-btn {
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 252, 247, 0.96);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 10px;
  font: inherit;
  cursor: pointer;
}

body[data-page="tenant-database"] .table-btn {
  padding: 5px 8px;
  font-size: 0.7rem;
}

.table-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.table-shell tr.new-row td {
  background: rgba(243, 243, 241, 0.92);
}

.table-shell tr.planned-vacate-row td {
  background: rgba(255, 243, 191, 0.78);
}

/* Ex-tenant report: fully settled row (no Total Unpaid left — paid and/or
   waived). Placed after planned-vacate so the green wins when both apply. */
.table-shell tr.ex-tenant-settled td {
  background: rgba(62, 139, 99, 0.16);
}

/* The injected Waiver column value when something was actually forgiven. */
.table-shell .calc-value.ex-waiver-value {
  color: #6b21a8;
  font-weight: 600;
}

.new-id {
  font-weight: 700;
  color: #9b700a;
}

.unit-id-toggle {
  /* Plain text now (the tenant-meta toggle button was removed) — no pointer. */
  cursor: default;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}


.stack-list {
  display: grid;
  gap: 12px;
}

.list-item {
  padding: 16px;
  border-radius: 18px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
}

.list-item strong,
.list-item span {
  display: block;
}

.list-item span {
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.55;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.placeholder-card {
  min-height: 180px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.94), rgba(246, 238, 227, 0.95));
  border: 1px solid var(--line);
  border-radius: 22px;
}

.placeholder-card h4,
.placeholder-card p {
  margin: 0;
}

.placeholder-card p {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.field-group {
  display: grid;
  gap: 8px;
}

/* `display: grid` above would otherwise override the hidden attribute (used by
   the ex-tenant Waiver field, which only shows while editing a receipt). */
.field-group[hidden] {
  display: none;
}

.field-group label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--text);
  font: inherit;
}

.field-group textarea {
  min-height: 120px;
  resize: vertical;
}

body[data-page="lease"] .lease-form-card .field-group input,
body[data-page="lease"] .lease-form-card .field-group select,
body[data-page="lease"] .lease-form-card .field-group textarea,
body[data-page="lease"] .lease-form-card .field-group input,
body[data-page="lease"] .lease-form-card .field-group select,
body[data-page="lease"] .lease-form-card .field-group textarea {
  height: 31px;
  min-height: 31px;
  padding: 2px 10px;
  font-size: 0.78rem;
  line-height: 1.1;
}

body[data-page="lease"] .lease-form-card .field-group textarea,
body[data-page="lease"] .lease-form-card .field-group textarea {
  height: auto;
  min-height: 72px;
  padding-top: 8px;
  padding-bottom: 8px;
}

body[data-page="lease"],
body[data-page="lease"] {
  background: #eef1f3;
}

body[data-page="lease"] .main,
body[data-page="lease"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="lease"] .topbar,
body[data-page="lease"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="lease"] .page-heading h2,
body[data-page="lease"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="lease"] .content-grid,
body[data-page="lease"] .content-grid {
  gap: 8px;
}

body[data-page="lease"] .lease-panel,
body[data-page="lease"] .lease-panel {
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="lease"] .panel-header.lease-header,
body[data-page="lease"] .panel-header.lease-header {
  min-height: 0;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="lease"] .panel-header.lease-header h3,
body[data-page="lease"] .panel-header.lease-header h3 {
  font-size: 0.98rem;
}

body[data-page="lease"] .panel-header.lease-header p,
body[data-page="lease"] .panel-header.lease-header p {
  display: none;
}

body[data-page="lease"] .lease-page-tabs,
body[data-page="lease"] .lease-page-tabs {
  gap: 4px;
  margin: 0 0 7px;
  padding: 3px;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(73, 88, 98, 0.16);
  border-radius: 8px;
  background: #e9edf0;
}

body[data-page="lease"] .lease-page-tab,
body[data-page="lease"] .lease-page-tab {
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border-color: transparent;
  color: #495862;
  font-size: 0.74rem;
}

body[data-page="lease"] .lease-page-tab.active,
body[data-page="lease"] .lease-page-tab.active {
  background: #ffffff;
  color: #153243;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 1px 3px rgba(25, 42, 54, 0.08);
}

body[data-page="lease"] .lease-editor-shell,
body[data-page="lease"] .lease-editor-shell {
  gap: 8px;
}

body[data-page="lease"] .lease-editor-banner,
body[data-page="lease"] .lease-editor-banner {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.72fr);
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: none;
}

body[data-page="lease"] .lease-editor-kicker,
body[data-page="lease"] .lease-editor-kicker {
  margin-bottom: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.62rem;
}

body[data-page="lease"] .lease-editor-banner-copy h4,
body[data-page="lease"] .lease-editor-banner-copy h4 {
  font-size: 0.96rem;
}

body[data-page="lease"] .lease-editor-banner-copy p,
body[data-page="lease"] .lease-editor-banner-copy p {
  margin-top: 3px;
  font-size: 0.72rem;
  line-height: 1.35;
}

body[data-page="lease"] .lease-editor-banner-meta,
body[data-page="lease"] .lease-editor-banner-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body[data-page="lease"] .lease-editor-meta-card,
body[data-page="lease"] .lease-editor-meta-card {
  padding: 7px 9px;
  border-radius: 8px;
}

body[data-page="lease"] .lease-editor-meta-card small,
body[data-page="lease"] .lease-editor-meta-card small {
  margin-bottom: 2px;
  font-size: 0.62rem;
}

body[data-page="lease"] .lease-editor-meta-card strong,
body[data-page="lease"] .lease-editor-meta-card strong {
  font-size: 0.76rem;
  line-height: 1.2;
}

body[data-page="lease"] .lease-layout,
body[data-page="lease"] .lease-layout {
  grid-template-columns: minmax(245px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-page="lease"] .lease-side-card,
body[data-page="lease"] .lease-form-card,
body[data-page="lease"] .lease-side-card,
body[data-page="lease"] .lease-form-card {
  padding: 9px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="lease"] .lease-side-head h4,
body[data-page="lease"] .lease-side-head h4 {
  font-size: 0.8rem;
}

body[data-page="lease"] .lease-side-head p,
body[data-page="lease"] .lease-side-head p {
  margin-bottom: 6px;
  font-size: 0.68rem;
}

body[data-page="lease"] .lease-picker-grid,
body[data-page="lease"] .lease-picker-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

body[data-page="lease"] .lease-form-grid,
body[data-page="lease"] .lease-form-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 5px 7px;
}

body[data-page="lease"] .lease-tab-lease .lease-form-grid,
body[data-page="lease"] .lease-tab-incoming .lease-form-grid,
body[data-page="lease"] .lease-tab-lease .lease-form-grid,
body[data-page="lease"] .lease-tab-incoming .lease-form-grid {
  grid-template-columns: repeat(6, minmax(110px, 1fr));
}

body[data-page="lease"] .lease-unit-summary,
body[data-page="lease"] .lease-unit-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

body[data-page="lease"] .lease-unit-chip,
body[data-page="lease"] .lease-unit-chip {
  min-height: 42px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #f3f6f7;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="lease"] .lease-unit-chip small,
body[data-page="lease"] .lease-unit-chip small {
  font-size: 0.6rem;
  text-transform: uppercase;
}

body[data-page="lease"] .lease-unit-chip strong,
body[data-page="lease"] .lease-unit-chip strong {
  font-size: 0.74rem;
}

body[data-page="lease"] .lease-editor-header,
body[data-page="lease"] .lease-editor-header {
  margin-bottom: 7px;
  padding-bottom: 7px;
  gap: 8px;
}

body[data-page="lease"] .lease-editor-header h4,
body[data-page="lease"] .lease-editor-header h4 {
  margin-top: 0;
  font-size: 0.86rem;
}

body[data-page="lease"] .lease-editor-header p,
body[data-page="lease"] .lease-editor-header p {
  display: none;
}

body[data-page="lease"] .lease-editor-chip,
body[data-page="lease"] .lease-editor-chip {
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 0.68rem;
}

body[data-page="lease"] .lease-editor-sections,
body[data-page="lease"] .lease-editor-sections {
  gap: 7px;
}

body[data-page="lease"] .lease-editor-section,
body[data-page="lease"] .lease-editor-section {
  padding: 9px;
  border-radius: 8px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.13);
}

body[data-page="lease"] .lease-editor-section-head,
body[data-page="lease"] .lease-editor-section-head {
  margin-bottom: 6px;
}

body[data-page="lease"] .lease-editor-section-head h5,
body[data-page="lease"] .lease-editor-section-head h5 {
  font-size: 0.8rem;
}

body[data-page="lease"] .lease-editor-section-head p,
body[data-page="lease"] .lease-editor-section-head p {
  display: none;
}

body[data-page="lease"] .lease-panel .field-group label,
body[data-page="lease"] .lease-form-card .field-group label,
body[data-page="lease"] .lease-panel .field-group label,
body[data-page="lease"] .lease-form-card .field-group label {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
}

body[data-page="lease"] .lease-panel .field-group input,
body[data-page="lease"] .lease-panel .field-group select,
body[data-page="lease"] .lease-panel .field-group textarea,
body[data-page="lease"] .lease-form-card .field-group input,
body[data-page="lease"] .lease-form-card .field-group select,
body[data-page="lease"] .lease-form-card .field-group textarea,
body[data-page="lease"] .lease-panel .field-group input,
body[data-page="lease"] .lease-panel .field-group select,
body[data-page="lease"] .lease-panel .field-group textarea,
body[data-page="lease"] .lease-form-card .field-group input,
body[data-page="lease"] .lease-form-card .field-group select,
body[data-page="lease"] .lease-form-card .field-group textarea {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.74rem;
  line-height: 1.1;
}

body[data-page="lease"] .lease-form-card .field-group textarea,
body[data-page="lease"] .lease-form-card .field-group textarea {
  min-height: 58px;
  padding-top: 6px;
  padding-bottom: 6px;
}

body[data-page="lease"] .lease-tab-lease .lease-attachments-card,
body[data-page="lease"] .lease-tab-lease .lease-attachments-card {
  margin-top: 7px;
  padding-top: 7px;
}

body[data-page="lease"] .lease-file-list,
body[data-page="lease"] .lease-file-list {
  gap: 4px;
  margin-top: 5px;
}

body[data-page="lease"] .lease-file-item,
body[data-page="lease"] .lease-file-item {
  padding: 5px 7px;
  border-radius: 6px;
}

body[data-page="lease"] .lease-actions,
body[data-page="lease"] .lease-actions {
  gap: 6px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="lease"] .lease-actions-buttons,
body[data-page="lease"] .lease-actions-buttons {
  gap: 6px;
}

body[data-page="lease"] .lease-panel .action-btn,
body[data-page="lease"] .lease-panel .action-btn {
  min-height: 29px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
}

body[data-page="lease"] .lease-editor-lease-picker,
body[data-page="lease"] .lease-editor-lease-picker {
  gap: 6px;
  margin-bottom: 7px;
  padding: 8px;
  border-radius: 8px;
  background: #f7f9fa;
}

body[data-page="lease"] .lease-editor-lease-picker-head h5,
body[data-page="lease"] .lease-editor-lease-picker-head h5 {
  font-size: 0.8rem;
}

body[data-page="lease"] .lease-editor-lease-picker-head p,
body[data-page="lease"] .lease-editor-lease-picker-head p {
  display: none;
}

body[data-page="lease"] .lease-editor-lease-picker-grid,
body[data-page="lease"] .lease-editor-lease-picker-grid {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 7px;
}

body[data-page="lease"] .lease-editor-lease-picker-actions,
body[data-page="lease"] .lease-editor-lease-picker-actions {
  gap: 6px;
}

body[data-page="lease"] .lease-notes-toolbar,
body[data-page="lease"] .lease-notes-toolbar {
  gap: 5px;
  margin-bottom: 6px;
  padding: 6px;
  border-radius: 8px;
  background: #f2f5f6;
}

body[data-page="lease"] .lease-notes-toolbar-group,
body[data-page="lease"] .lease-notes-toolbar-group {
  gap: 4px;
  padding: 3px;
  border-radius: 7px;
}

body[data-page="lease"] .lease-notes-tool,
body[data-page="lease"] .lease-notes-tool {
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 0.68rem;
}

body[data-page="lease"] .lease-notes-toolbar select,
body[data-page="lease"] .lease-notes-toolbar select {
  min-width: 78px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 0.7rem;
}

body[data-page="lease"] .lease-notes-editor,
body[data-page="lease"] .lease-notes-editor {
  min-height: 360px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  line-height: 1.55;
}

body[data-page="lease"] .lease-tab-editor .lease-notes-editor,
body[data-page="lease"] .lease-tab-editor .lease-notes-editor {
  width: 100%;
  min-height: 610px;
}

body[data-page="lease"] .lease-tab-editor,
body[data-page="lease"] .lease-tab-editor {
  width: 100%;
}

body[data-page="lease"] .lease-tab-editor .lease-editor-shell,
body[data-page="lease"] .lease-tab-editor .lease-layout,
body[data-page="lease"] .lease-tab-editor .lease-form-card,
body[data-page="lease"] .lease-tab-editor .lease-editor-sections,
body[data-page="lease"] .lease-tab-editor .lease-editor-section-notes,
body[data-page="lease"] .lease-tab-editor .lease-editor-shell,
body[data-page="lease"] .lease-tab-editor .lease-layout,
body[data-page="lease"] .lease-tab-editor .lease-form-card,
body[data-page="lease"] .lease-tab-editor .lease-editor-sections,
body[data-page="lease"] .lease-tab-editor .lease-editor-section-notes {
  width: 100%;
  max-width: none;
}

body[data-page="lease"] .lease-tab-editor .lease-layout,
body[data-page="lease"] .lease-tab-editor .lease-layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="lease"] .lease-tab-editor .lease-form-card,
body[data-page="lease"] .lease-tab-editor .lease-form-card {
  padding: 8px;
}

body[data-page="lease"] .lease-tab-editor .lease-notes-field,
body[data-page="lease"] .lease-tab-editor .lease-notes-field {
  width: 100%;
}

@media (max-width: 1180px) {
  body[data-page="lease"] .lease-layout,
  body[data-page="lease"] .lease-layout {
    grid-template-columns: minmax(210px, 0.5fr) minmax(0, 1fr);
  }

  body[data-page="lease"] .lease-form-grid,
  body[data-page="lease"] .lease-tab-lease .lease-form-grid,
  body[data-page="lease"] .lease-tab-incoming .lease-form-grid,
  body[data-page="lease"] .lease-form-grid,
  body[data-page="lease"] .lease-tab-lease .lease-form-grid,
  body[data-page="lease"] .lease-tab-incoming .lease-form-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="lease"] .lease-layout,
  body[data-page="lease"] .lease-layout,
  body[data-page="lease"] .lease-editor-banner,
  body[data-page="lease"] .lease-editor-banner {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="lease"] .lease-form-grid,
  body[data-page="lease"] .lease-tab-lease .lease-form-grid,
  body[data-page="lease"] .lease-tab-incoming .lease-form-grid,
  body[data-page="lease"] .lease-form-grid,
  body[data-page="lease"] .lease-tab-lease .lease-form-grid,
  body[data-page="lease"] .lease-tab-incoming .lease-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="lease"] .lease-editor-banner-meta,
  body[data-page="lease"] .lease-editor-banner-meta,
  body[data-page="lease"] .lease-unit-summary,
  body[data-page="lease"] .lease-unit-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

body[data-page="tenant-database"] {
  background: #eef1f3;
}

body[data-page="tenant-database"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="tenant-database"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="tenant-database"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="tenant-database"] .content-grid {
  gap: 8px;
}

body[data-page="tenant-database"] .tenant-database-panel {
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="tenant-database"] .tenant-database-header {
  min-height: 0;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="tenant-database"] .tenant-database-header h3 {
  font-size: 0.98rem;
  margin-bottom: 0;
}

body[data-page="tenant-database"] .tenant-database-header p {
  display: none;
}

body[data-page="tenant-database"] .tenant-database-kpis {
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

body[data-page="tenant-database"] .tenant-database-pending-actions {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

body[data-page="tenant-database"] .tenant-database-kpi,
body[data-page="tenant-database"] .tenant-database-pending-card {
  min-height: 50px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="tenant-database"] .tenant-database-kpi small,
body[data-page="tenant-database"] .tenant-database-pending-card small {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="tenant-database"] .tenant-database-kpi strong,
body[data-page="tenant-database"] .tenant-database-pending-card strong {
  margin-bottom: 0;
  color: #25313a;
  font-size: 0.98rem;
  line-height: 1.1;
}

body[data-page="tenant-database"] .tenant-database-pending-card span {
  margin-top: 2px;
  font-size: 0.64rem;
  line-height: 1.2;
}

body[data-page="tenant-database"] .tenant-database-toolbar {
  grid-template-columns: minmax(280px, 1.5fr) repeat(4, minmax(130px, 0.7fr));
  gap: 7px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(73, 88, 98, 0.14);
  border-radius: 9px;
  background: #ffffff;
}

body[data-page="tenant-database"] .tenant-database-toolbar .field-group label,
body[data-page="tenant-database"] .tenant-database-contract-grid .field-group label,
body[data-page="tenant-database"] .tenant-database-repair-grid .field-group label {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
}

body[data-page="tenant-database"] .tenant-database-toolbar input,
body[data-page="tenant-database"] .tenant-database-toolbar select,
body[data-page="tenant-database"] .tenant-database-contract-grid input,
body[data-page="tenant-database"] .tenant-database-contract-grid select,
body[data-page="tenant-database"] .tenant-database-repair-grid input,
body[data-page="tenant-database"] .tenant-database-repair-grid select {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.74rem;
  line-height: 1.1;
}

body[data-page="tenant-database"] .tenant-database-layout {
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-page="tenant-database"] .tenant-database-list-wrap,
body[data-page="tenant-database"] .tenant-database-detail {
  min-height: calc(100vh - 210px);
  padding: 9px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="tenant-database"] .tenant-database-list-head,
body[data-page="tenant-database"] .tenant-database-detail-head,
body[data-page="tenant-database"] .tenant-database-history-head {
  gap: 8px;
}

body[data-page="tenant-database"] .tenant-database-list-head {
  margin-bottom: 6px;
}

body[data-page="tenant-database"] .tenant-database-detail-head {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.12);
}

body[data-page="tenant-database"] .tenant-database-list-head h4,
body[data-page="tenant-database"] .tenant-database-detail-head h4,
body[data-page="tenant-database"] .tenant-database-history-head h5,
body[data-page="tenant-database"] .tenant-database-section-heading h5 {
  font-size: 0.82rem;
}

body[data-page="tenant-database"] .tenant-database-list-head span,
body[data-page="tenant-database"] .tenant-database-detail-head p,
body[data-page="tenant-database"] .tenant-database-history-head p,
body[data-page="tenant-database"] .tenant-database-section-heading p {
  font-size: 0.68rem;
  line-height: 1.25;
}

body[data-page="tenant-database"] .tenant-database-list {
  gap: 5px;
  max-height: calc(100vh - 252px);
}

body[data-page="tenant-database"] .tenant-database-result {
  gap: 7px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="tenant-database"] .tenant-database-result.active {
  border-color: rgba(201, 108, 58, 0.5);
  background: rgba(201, 108, 58, 0.1);
  box-shadow: 0 1px 5px rgba(201, 108, 58, 0.18);
}

body[data-page="tenant-database"] .tenant-database-result-copy {
  gap: 1px;
}

body[data-page="tenant-database"] .tenant-database-result-copy strong {
  font-size: 0.78rem;
}

body[data-page="tenant-database"] .tenant-database-result-copy span {
  font-size: 0.66rem;
}

body[data-page="tenant-database"] .tenant-database-result-badges,
body[data-page="tenant-database"] .tenant-database-detail-badges,
body[data-page="tenant-database"] .tenant-database-receipt-top {
  gap: 4px;
}

body[data-page="tenant-database"] .tenant-database-result-badge,
body[data-page="tenant-database"] .tenant-database-status-pill,
body[data-page="tenant-database"] .tenant-database-receipt-badge {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.62rem;
}

body[data-page="tenant-database"] .tenant-database-status-pill.delete-action {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.62rem;
}

body[data-page="tenant-database"] .tenant-database-info-grid {
  grid-template-columns: repeat(8, minmax(92px, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

/* The Notes box spans TWO columns (one box tall, two boxes wide) so there's
   room to read/write the note. */
body[data-page="tenant-database"] .tenant-database-notes-card {
  grid-column: span 2;
}

body[data-page="tenant-database"] .tenant-database-info-card,
body[data-page="tenant-database"] .tenant-database-note-card,
body[data-page="tenant-database"] .tenant-database-contract-editor,
body[data-page="tenant-database"] .tenant-database-receipt-item,
body[data-page="tenant-database"] .tenant-database-attachment-item {
  padding: 6px 7px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="tenant-database"] .tenant-database-info-card small,
body[data-page="tenant-database"] .tenant-database-note-card small {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="tenant-database"] .tenant-database-info-card strong,
body[data-page="tenant-database"] .tenant-database-note-card strong {
  font-size: 0.74rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body[data-page="tenant-database"] .tenant-database-note-card,
body[data-page="tenant-database"] .tenant-database-contract-editor {
  margin-bottom: 7px;
}

body[data-page="tenant-database"] .tenant-database-contract-grid {
  /* Six EQUAL-width columns so every field is the same width and the first row
     ends cleanly with Contract Preset. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
  align-items: end;
}

body[data-page="tenant-database"] .tenant-database-contract-insurance {
  grid-column: auto;
}

body[data-page="tenant-database"] .tenant-database-contract-actions {
  align-items: end;
}

body[data-page="tenant-database"] .tenant-database-contract-actions .action-btn {
  min-height: 28px;
  padding: 5px 10px;
  white-space: nowrap;
}

body[data-page="tenant-database"] .tenant-database-history-head {
  margin-bottom: 6px;
}

body[data-page="tenant-database"] .tenant-database-receipt-list {
  gap: 5px;
}

body[data-page="tenant-database"] .tenant-database-receipt-item {
  align-items: center;
  gap: 8px;
}

body[data-page="tenant-database"] .tenant-database-receipt-copy {
  gap: 1px;
}

body[data-page="tenant-database"] .tenant-database-receipt-copy span {
  font-size: 0.68rem;
}

body[data-page="tenant-database"] .tenant-database-receipt-meta {
  gap: 5px;
  font-size: 0.7rem;
}

body[data-page="tenant-database"] .tenant-database-receipt-actions {
  gap: 5px;
}

body[data-page="tenant-database"] .tenant-database-detail .action-btn {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
}

body[data-page="tenant-database"] .tenant-database-attachment-list {
  gap: 5px;
  margin-bottom: 8px;
}

body[data-page="tenant-database"] .tenant-database-attachment-upload {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
}

body[data-page="tenant-database"] .tenant-database-attachment-item {
  gap: 8px;
}

body[data-page="tenant-database"] .tenant-database-attachment-item strong,
body[data-page="tenant-database"] .tenant-database-attachment-item span {
  font-size: 0.7rem;
}

body[data-page="tenant-database"] .tenant-database-attachment-link,
body[data-page="tenant-database"] .tenant-database-attachment-rename,
body[data-page="tenant-database"] .tenant-database-attachment-delete {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 0.68rem;
}

body[data-page="tenant-database"] .tenant-database-section {
  margin-top: 8px;
  padding-top: 8px;
}

body[data-page="tenant-database"] .tenant-database-section-heading {
  margin-bottom: 7px;
}

body[data-page="tenant-database"] .tenant-database-repair-grid,
body[data-page="ex-tenant"] .tenant-database-repair-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  max-width: none;
}

body[data-page="tenant-database"] .tenant-database-repair-span-2,
body[data-page="ex-tenant"] .tenant-database-repair-span-2 {
  grid-column: span 2;
}

body[data-page="tenant-database"] .tenant-database-repair-actions {
  gap: 6px;
  margin-top: 7px;
}

body[data-page="tenant-database"] .tenant-database-empty {
  padding: 12px 8px;
  font-size: 0.76rem;
}

body[data-page="ex-tenant"] {
  background: #eef1f3;
}

body[data-page="ex-tenant"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="ex-tenant"] .topbar {
  min-height: 42px;
  margin-bottom: 7px;
}

body[data-page="ex-tenant"] .page-heading h2 {
  font-size: 1.02rem;
}

body[data-page="ex-tenant"] .content-grid {
  gap: 7px;
}

body[data-page="ex-tenant"] .tenant-database-panel {
  padding: 8px;
  border-radius: 8px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 18px rgba(25, 42, 54, 0.055);
}

body[data-page="ex-tenant"] .tenant-database-header {
  min-height: 0;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="ex-tenant"] .tenant-database-header h3 {
  margin-bottom: 0;
  font-size: 0.96rem;
}

body[data-page="ex-tenant"] .tenant-database-header p {
  display: none;
}

body[data-page="ex-tenant"] .tenant-database-kpis {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

body[data-page="ex-tenant"] .tenant-database-kpi {
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="ex-tenant"] .tenant-database-kpi small {
  margin-bottom: 2px;
  color: #59646d;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="ex-tenant"] .tenant-database-kpi strong {
  color: #26323b;
  font-size: 0.9rem;
  line-height: 1.1;
}

body[data-page="ex-tenant"] .tenant-database-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 0.28fr);
  gap: 7px;
  margin-bottom: 7px;
  padding: 7px;
  border: 1px solid rgba(73, 88, 98, 0.14);
  border-radius: 7px;
  background: #ffffff;
}

body[data-page="ex-tenant"] .field-group label {
  margin-bottom: 2px;
  color: #59646d;
  font-size: 0.64rem;
  font-weight: 700;
}

body[data-page="ex-tenant"] input,
body[data-page="ex-tenant"] select,
body[data-page="ex-tenant"] textarea {
  min-height: 27px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 0.72rem;
  line-height: 1.15;
}

body[data-page="ex-tenant"] textarea {
  min-height: 48px;
}

body[data-page="ex-tenant"] .ex-tenant-add-panel {
  margin-bottom: 7px;
  padding: 0;
  border-radius: 7px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="ex-tenant"] .ex-tenant-add-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 9px;
  cursor: pointer;
  color: #25313a;
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

body[data-page="ex-tenant"] .ex-tenant-add-summary::-webkit-details-marker {
  display: none;
}

body[data-page="ex-tenant"] .ex-tenant-add-summary span:last-child {
  color: #6c7882;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="ex-tenant"] .ex-tenant-add-summary::after {
  content: "+";
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #eef2f4;
  color: #4c5b66;
  font-size: 0.86rem;
  line-height: 1;
}

body[data-page="ex-tenant"] .ex-tenant-add-panel[open] .ex-tenant-add-summary::after {
  content: "-";
}

body[data-page="ex-tenant"] .ex-tenant-manual-grid,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  padding: 0 9px 8px;
}

body[data-page="ex-tenant"] .ex-tenant-manual-notes,
body[data-page="ex-tenant"] .ex-tenant-receipt-details {
  grid-column: span 2;
}

body[data-page="ex-tenant"] .ex-tenant-add-panel .lease-action-row {
  margin: 0;
  padding: 0 9px 9px;
}

body[data-page="ex-tenant"] .tenant-database-layout {
  grid-template-columns: minmax(260px, 0.3fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-page="ex-tenant"] .tenant-database-list-wrap,
body[data-page="ex-tenant"] .tenant-database-detail {
  min-height: calc(100vh - 205px);
  padding: 8px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="ex-tenant"] .tenant-database-list-head,
body[data-page="ex-tenant"] .tenant-database-detail-head,
body[data-page="ex-tenant"] .tenant-database-history-head,
body[data-page="ex-tenant"] .tenant-database-section-head {
  gap: 8px;
  margin-bottom: 6px;
}

body[data-page="ex-tenant"] .tenant-database-list-head h4,
body[data-page="ex-tenant"] .tenant-database-detail-head h3,
body[data-page="ex-tenant"] .tenant-database-history-head h5,
body[data-page="ex-tenant"] .tenant-database-section-head h4 {
  margin-bottom: 0;
  font-size: 0.82rem;
  line-height: 1.15;
}

body[data-page="ex-tenant"] .tenant-database-list-head span,
body[data-page="ex-tenant"] .tenant-database-detail-head p,
body[data-page="ex-tenant"] .tenant-database-history-head p,
body[data-page="ex-tenant"] .tenant-database-section-head span {
  font-size: 0.66rem;
  line-height: 1.2;
}

body[data-page="ex-tenant"] .tenant-database-list {
  gap: 4px;
  max-height: calc(100vh - 248px);
}

body[data-page="ex-tenant"] .tenant-record-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(73, 88, 98, 0.14);
  border-radius: 6px;
  background: #fbfcfd;
  cursor: pointer;
}

body[data-page="ex-tenant"] .tenant-record-card.selected {
  border-color: rgba(201, 108, 58, 0.46);
  background: #fff9f4;
}

body[data-page="ex-tenant"] .tenant-record-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

body[data-page="ex-tenant"] .tenant-record-copy strong {
  color: #25313a;
  font-size: 0.78rem;
  line-height: 1.16;
}

body[data-page="ex-tenant"] .tenant-record-copy span {
  color: #59646d;
  font-size: 0.66rem;
  line-height: 1.2;
}

body[data-page="ex-tenant"] .tenant-record-badges,
body[data-page="ex-tenant"] .tenant-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

body[data-page="ex-tenant"] .tenant-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #eef2f4;
  color: #4c5b66;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
}

body[data-page="ex-tenant"] .tenant-badge.ex,
body[data-page="ex-tenant"] .tenant-badge.unpaid {
  background: rgba(201, 108, 58, 0.12);
  color: #a45f28;
}

body[data-page="ex-tenant"] .tenant-badge.active {
  background: rgba(56, 146, 96, 0.12);
  color: #2d7f54;
}

body[data-page="ex-tenant"] .tenant-badge.archived {
  background: rgba(86, 100, 112, 0.12);
  color: #55616b;
}

body[data-page="ex-tenant"] .tenant-database-detail-head {
  align-items: flex-start;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.12);
}

body[data-page="ex-tenant"] .tenant-database-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

body[data-page="ex-tenant"] .tenant-detail-stat,
body[data-page="ex-tenant"] .tenant-database-notes,
body[data-page="ex-tenant"] .tenant-database-receipts,
body[data-page="ex-tenant"] .tenant-database-note-card,
body[data-page="ex-tenant"] .tenant-database-receipt-item {
  padding: 6px 7px;
  border: 1px solid rgba(73, 88, 98, 0.14);
  border-radius: 6px;
  background: #fbfcfd;
}

.ex-tenant-detail-input {
  width: 100%;
  border: 1px solid rgba(73, 88, 98, 0.28);
  border-radius: 6px;
  padding: 3px 6px;
  font: inherit;
  font-weight: 600;
  background: #ffffff;
  color: #25313a;
}

.ex-tenant-detail-input[readonly] {
  background: #f1f4f6;
  color: #5b6b73;
}

.ex-tenant-detail-save {
  margin-top: 5px;
  min-height: 22px;
  padding: 2px 10px;
  font-size: 0.62rem;
}

body[data-page="ex-tenant"] .tenant-detail-stat small,
body[data-page="ex-tenant"] .tenant-database-notes small {
  display: block;
  margin-bottom: 2px;
  color: #59646d;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="ex-tenant"] .tenant-detail-stat strong,
body[data-page="ex-tenant"] .tenant-database-notes p {
  margin: 0;
  color: #25313a;
  font-size: 0.72rem;
  line-height: 1.2;
}

body[data-page="ex-tenant"] .tenant-database-notes,
body[data-page="ex-tenant"] .tenant-database-note-card,
body[data-page="ex-tenant"] .tenant-database-receipts {
  margin-bottom: 7px;
}

body[data-page="ex-tenant"] .tenant-database-note-card .lease-action-row {
  margin-top: 6px;
}

body[data-page="ex-tenant"] .tenant-database-receipt-list {
  gap: 5px;
}

body[data-page="ex-tenant"] .tenant-database-receipt-item {
  gap: 8px;
}

body[data-page="ex-tenant"] .tenant-database-receipt-copy span {
  font-size: 0.66rem;
}

body[data-page="ex-tenant"] .tenant-database-receipt-badge {
  min-height: 18px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.6rem;
}

body[data-page="ex-tenant"] .action-btn {
  min-height: 27px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 0.68rem;
}

@media (max-width: 1180px) {
  body[data-page="tenant-database"] .tenant-database-toolbar,
  body[data-page="tenant-database"] .tenant-database-kpis,
  body[data-page="tenant-database"] .tenant-database-pending-actions,
  body[data-page="tenant-database"] .tenant-database-info-grid,
  body[data-page="tenant-database"] .tenant-database-contract-grid,
  body[data-page="tenant-database"] .tenant-database-repair-grid,
  body[data-page="ex-tenant"] .tenant-database-kpis,
  body[data-page="ex-tenant"] .ex-tenant-manual-grid,
  body[data-page="ex-tenant"] .ex-tenant-receipt-grid,
  body[data-page="ex-tenant"] .tenant-database-repair-grid,
  body[data-page="ex-tenant"] .tenant-database-detail-grid {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="tenant-database"] .tenant-database-layout,
  body[data-page="tenant-database"] .tenant-database-toolbar,
  body[data-page="tenant-database"] .tenant-database-kpis,
  body[data-page="tenant-database"] .tenant-database-pending-actions,
  body[data-page="tenant-database"] .tenant-database-info-grid,
  body[data-page="tenant-database"] .tenant-database-contract-grid,
  body[data-page="tenant-database"] .tenant-database-repair-grid,
  body[data-page="ex-tenant"] .tenant-database-layout,
  body[data-page="ex-tenant"] .tenant-database-toolbar,
  body[data-page="ex-tenant"] .tenant-database-kpis,
  body[data-page="ex-tenant"] .ex-tenant-manual-grid,
  body[data-page="ex-tenant"] .ex-tenant-receipt-grid,
  body[data-page="ex-tenant"] .tenant-database-repair-grid,
  body[data-page="ex-tenant"] .tenant-database-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="tenant-database"] .tenant-database-repair-span-2 {
    grid-column: auto;
  }

  body[data-page="ex-tenant"] .ex-tenant-manual-notes,
  body[data-page="ex-tenant"] .ex-tenant-receipt-details {
    grid-column: auto;
  }
}

body[data-page="vacate"] .vacate-panel .field-group input,
body[data-page="vacate"] .vacate-panel .field-group select,
body[data-page="vacate"] .vacate-panel .field-group textarea {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 0.8rem;
}

body[data-page="vacate"],
body[data-page="due"],
body[data-page="vacant"],
body[data-page="expired-contract"] {
  background: #eef1f3;
}

body[data-page="vacate"] .main,
body[data-page="due"] .main,
body[data-page="vacant"] .main,
body[data-page="expired-contract"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="vacate"] .topbar,
body[data-page="due"] .topbar,
body[data-page="vacant"] .topbar,
body[data-page="expired-contract"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="vacate"] .page-heading h2,
body[data-page="due"] .page-heading h2,
body[data-page="vacant"] .page-heading h2,
body[data-page="analytics"] .page-heading h2,
body[data-page="expired-contract"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="vacate"] .content-grid,
body[data-page="due"] .content-grid,
body[data-page="vacant"] .content-grid,
body[data-page="expired-contract"] .content-grid {
  gap: 8px;
}

body[data-page="vacate"] .vacate-panel,
body[data-page="due"] .due-redesign-panel,
body[data-page="vacant"] .vacant-redesign-panel,
body[data-page="expired-contract"] .panel {
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="vacate"] .panel-header,
body[data-page="due"] .panel-header,
body[data-page="vacant"] .panel-header,
body[data-page="expired-contract"] .panel-header {
  min-height: 0;
  margin-bottom: 6px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="vacate"] .panel-header h3,
body[data-page="due"] .panel-header h3,
body[data-page="vacant"] .panel-header h3,
body[data-page="expired-contract"] .panel-header h3 {
  margin-bottom: 0;
  font-size: 0.98rem;
}

body[data-page="vacate"] .panel-header p,
body[data-page="due"] .panel-header p,
body[data-page="vacant"] .panel-header p,
body[data-page="expired-contract"] .panel-header p {
  display: none;
}

body[data-page="vacate"] .lease-layout {
  grid-template-columns: minmax(245px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-page="vacate"] .lease-side-card,
body[data-page="vacate"] .lease-form-card {
  padding: 9px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="vacate"] .lease-side-head h4 {
  margin-bottom: 2px;
  font-size: 0.8rem;
}

body[data-page="vacate"] .lease-side-head p,
body[data-page="vacate"] .vacate-guide p {
  margin-bottom: 6px;
  font-size: 0.68rem;
  line-height: 1.25;
}

body[data-page="vacate"] .lease-picker-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

body[data-page="vacate"] .vacate-form-grid {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 5px 7px;
}

body[data-page="vacate"] .vacate-panel .field-group label {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
}

body[data-page="vacate"] .vacate-panel .field-group input,
body[data-page="vacate"] .vacate-panel .field-group select,
body[data-page="vacate"] .vacate-panel .field-group textarea {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.74rem;
  line-height: 1.1;
}

body[data-page="vacate"] .lease-unit-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

body[data-page="vacate"] .lease-unit-chip {
  min-height: 42px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #f3f6f7;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="vacate"] .lease-unit-chip small {
  margin-bottom: 2px;
  font-size: 0.6rem;
  text-transform: uppercase;
}

body[data-page="vacate"] .lease-unit-chip strong {
  font-size: 0.74rem;
  line-height: 1.2;
}

body[data-page="vacate"] .vacate-actions {
  gap: 6px;
  margin-top: 7px;
}

body[data-page="vacate"] .vacate-panel .action-btn,
body[data-page="vacate"] .receipts-history-meta .action-btn {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
}

body[data-page="vacate"] .vacate-guide {
  margin-bottom: 6px;
}

body[data-page="vacate"] .vacate-guide strong {
  font-size: 0.72rem;
}

body[data-page="vacate"] .vacate-history-panel {
  margin-top: 8px;
}

body[data-page="vacate"] .receipts-summary,
body[data-page="vacate"] .receipts-history-item {
  padding: 7px 8px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="vacate"] .receipts-history-list {
  gap: 5px;
}

body[data-page="vacate"] .receipts-history-copy strong,
body[data-page="vacate"] .receipts-history-meta strong {
  font-size: 0.74rem;
}

body[data-page="vacate"] .receipts-history-copy span,
body[data-page="vacate"] .receipts-summary span {
  font-size: 0.66rem;
}

body[data-page="due"] .month-tabs,
body[data-page="vacant"] .month-tabs {
  gap: 4px;
  margin: 0 0 7px;
}

body[data-page="due"] .month-tab,
body[data-page="vacant"] .month-tab {
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 0.66rem;
}

body[data-page="due"] .due-summary-strip,
body[data-page="vacant"] .vacant-summary-strip {
  gap: 6px;
  margin-bottom: 7px;
}

body[data-page="due"] .due-summary-chip,
body[data-page="vacant"] .vacant-summary-chip {
  min-width: 92px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="due"] .due-summary-chip strong,
body[data-page="vacant"] .vacant-summary-chip strong {
  color: #25313a;
  font-size: 0.98rem;
  line-height: 1.1;
}

body[data-page="due"] .due-summary-chip span,
body[data-page="vacant"] .vacant-summary-chip span {
  margin-top: 1px;
  color: #56636c;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="due"] .due-building-grid,
body[data-page="vacant"] .vacant-building-grid {
  gap: 8px;
}

body[data-page="due"] .due-building-card,
body[data-page="vacant"] .vacant-building-card {
  padding: 8px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="due"] .due-building-card-header,
body[data-page="vacant"] .vacant-building-card-header {
  gap: 8px;
  margin-bottom: 6px;
}

body[data-page="due"] .due-building-card-header h4,
body[data-page="vacant"] .vacant-building-card-header h4 {
  font-size: 0.82rem;
}

body[data-page="due"] .due-building-card-header p,
body[data-page="vacant"] .vacant-building-card-header p {
  display: none;
}

body[data-page="due"] .due-building-badges,
body[data-page="vacant"] .vacant-building-badges {
  gap: 4px;
}

body[data-page="due"] .due-badge,
body[data-page="vacant"] .vacant-badge {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.62rem;
}

body[data-page="due"] .due-building-table-wrap,
body[data-page="vacant"] .vacant-building-table-wrap,
body[data-page="expired-contract"] .archive-table-shell {
  border-radius: 8px;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="due"] .due-building-table,
body[data-page="vacant"] .vacant-building-table,
body[data-page="expired-contract"] .archive-table-shell table {
  font-size: 0.68rem;
  background: #ffffff;
}

body[data-page="due"] .due-building-table th,
body[data-page="due"] .due-building-table td,
body[data-page="vacant"] .vacant-building-table th,
body[data-page="vacant"] .vacant-building-table td,
body[data-page="expired-contract"] .archive-table-shell th,
body[data-page="expired-contract"] .archive-table-shell td {
  padding: 4px 5px;
  border-bottom-color: rgba(73, 88, 98, 0.11);
  line-height: 1.1;
}

body[data-page="due"] .due-building-table thead th,
body[data-page="vacant"] .vacant-building-table thead th,
body[data-page="expired-contract"] .archive-table-shell thead th {
  background: #eef1f3;
  color: #56636c;
  font-size: 0.56rem;
  letter-spacing: 0;
}

body[data-page="due"] .due-building-table tbody td:nth-child(2) strong,
body[data-page="vacant"] .vacant-building-table tbody td:nth-child(1) strong {
  font-size: 0.68rem;
}

body[data-page="due"] .due-building-table tbody td:nth-child(2) span,
body[data-page="vacant"] .vacant-building-table tbody td:nth-child(1) span {
  font-size: 0.58rem;
}

body[data-page="due"] .due-building-table tfoot td,
body[data-page="vacant"] .vacant-building-table tfoot td,
body[data-page="expired-contract"] .archive-table-shell tfoot td {
  padding: 5px;
  background: #eef1f3;
  font-size: 0.64rem;
}

body[data-page="expired-contract"] .archive-table-shell {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

body[data-page="expired-contract"] .archive-table-shell table {
  width: max(100%, 1080px);
  min-width: 1080px;
}

body[data-page="expired-contract"] .archive-table-shell .section-row td {
  padding: 4px 5px;
  font-size: 0.62rem;
}

body[data-page="expired-contract"] .archive-table-shell input[data-contract-notes] {
  height: 26px;
  min-height: 26px;
  padding: 2px 6px;
  border-radius: 5px;
  border-color: rgba(73, 88, 98, 0.2);
  background: #ffffff;
  font-size: 0.64rem;
}

@media (max-width: 1180px) {
  body[data-page="vacate"] .lease-layout,
  body[data-page="due"] .due-building-grid,
  body[data-page="vacant"] .vacant-building-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="vacate"] .vacate-form-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="vacate"] .vacate-form-grid,
  body[data-page="vacate"] .lease-unit-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

body[data-page^="receipts"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page^="receipts"] .panel {
  padding: 8px;
}

body[data-page^="receipts"] .panel-header {
  margin-bottom: 8px;
  padding: 2px 0 4px;
}

body[data-page^="receipts"] .panel-header h3 {
  font-size: 0.92rem;
}

body[data-page^="receipts"] .panel-header p {
  font-size: 0.72rem;
}

body[data-page^="receipts"] .receipts-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

body[data-page^="receipts"] .receipts-grid > .backup-card:nth-child(1),
body[data-page^="receipts"] .receipts-grid > .backup-card:nth-child(2) {
  display: flex;
  flex-direction: column;
  height: 610px;
}

body[data-page^="receipts"] [data-receipts-batch-print] {
  align-self: flex-start;
  width: auto;
}

body.batch-print-loading-active {
  cursor: wait;
}

.batch-print-loading-overlay[hidden] {
  display: none;
}

.batch-print-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: rgba(15, 28, 38, 0.56);
  backdrop-filter: blur(2px);
}

.batch-print-loading-card {
  width: min(360px, calc(100vw - 32px));
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid rgba(204, 213, 220, 0.9);
  border-radius: 8px;
  background: #fffaf4;
  color: #263642;
  text-align: center;
  box-shadow: 0 18px 48px rgba(18, 38, 50, 0.22);
}

.batch-print-loading-card strong {
  font-size: 0.95rem;
}

.batch-print-loading-card span {
  color: #647483;
  font-size: 0.78rem;
}

.batch-print-loading-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid #eadfd4;
  border-top-color: #d06b35;
  border-radius: 999px;
  animation: batch-print-loading-spin 0.8s linear infinite;
}

@keyframes batch-print-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

body[data-page^="receipts"] .receipts-custom-panel {
  margin-top: 12px;
}

body[data-page^="receipts"] .backup-card,
body[data-page^="receipts"] .receipts-custom-panel {
  padding: 14px;
  border-radius: 16px;
}

body[data-page^="receipts"] .backup-label {
  font-size: 0.68rem;
  margin-bottom: 8px;
}

body[data-page^="receipts"] .backup-text {
  margin-bottom: 10px;
  font-size: 0.78rem;
  line-height: 1.4;
}

body[data-page^="receipts"] .receipts-form-grid,
body[data-page^="receipts"] .form-grid {
  gap: 12px;
}


/* Batch Print top row: the single-building dropdowns on one baseline-aligned row.
   (The "All Buildings" create control was removed 2026-07-11.) */
.receipts-batch-top-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: flex-end;
  margin-bottom: 10px;
}

.receipts-batch-top-row .receipts-batch-compact-grid {
  flex: 0 1 auto;
  margin: 0;
}

body[data-page="receipts-batch-print"] .receipts-batch-compact-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: end;
  gap: 12px !important;
}

body[data-page="receipts-batch-return"] .receipts-batch-compact-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: end;
  gap: 12px !important;
}

body[data-page="receipts-batch-print"] .receipts-batch-compact-grid .field-group {
  display: inline-grid;
  width: max-content !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body[data-page="receipts-batch-return"] .receipts-batch-compact-grid .field-group {
  display: inline-grid;
  width: max-content !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body[data-page="receipts-batch-print"] .receipts-batch-compact-grid .field-group input,
body[data-page="receipts-batch-print"] .receipts-batch-compact-grid .field-group select {
  width: auto;
}

body[data-page="receipts-batch-return"] .receipts-batch-compact-grid .field-group input,
body[data-page="receipts-batch-return"] .receipts-batch-compact-grid .field-group select {
  width: auto;
}

/* Export-to-Excel sits on the far right of the Building/Month row, bottom-aligned
   with the dropdowns (the row is a flex container with align-items:end). */
body[data-page="receipts-batch-return"] .receipts-batch-compact-grid [data-receipts-batch-return-export] {
  margin-left: auto;
  align-self: end;
  flex: 0 0 auto;
}

body[data-page="receipts-batch-print"] [data-receipts-batch-building] {
  width: 18ch;
  min-width: 18ch;
}

body[data-page="receipts-batch-return"] [data-receipts-batch-return-building] {
  width: 18ch;
  min-width: 18ch;
}

body[data-page="receipts-batch-print"] [data-receipts-batch-month] {
  width: 10ch;
  min-width: 10ch;
}

body[data-page="receipts-batch-return"] [data-receipts-batch-return-month] {
  width: 10ch;
  min-width: 10ch;
}

body[data-page^="receipts"] .receipts-history-compact-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: end;
  gap: 12px !important;
}

body[data-page^="receipts"] .receipts-history-compact-grid .field-group {
  display: inline-grid;
  width: max-content !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

body[data-page^="receipts"] .receipts-history-compact-grid .field-group input,
body[data-page^="receipts"] .receipts-history-compact-grid .field-group select {
  width: auto;
}

body[data-page^="receipts"] [data-receipts-history-building] {
  width: 18ch;
  min-width: 18ch;
}

body[data-page="receipts-batch-print"] [data-receipts-batch-year] {
  width: 7ch;
  min-width: 7ch;
}

body[data-page^="receipts"] .field-group {
  gap: 5px;
}

body[data-page^="receipts"] .field-group label {
  font-size: 0.76rem;
}

body[data-page^="receipts"] .field-group input,
body[data-page^="receipts"] .field-group select,
body[data-page^="receipts"] .field-group textarea {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
}

body[data-page^="receipts"] .receipts-view-field {
  background: rgba(243, 238, 230, 0.92);
  color: #6d767d;
  border-color: rgba(21, 50, 67, 0.1);
  cursor: default;
}

body[data-page^="receipts"] .receipts-view-field-danger {
  color: #c77c7c;
  border-color: rgba(199, 124, 124, 0.22);
  background: rgba(255, 241, 241, 0.9);
}

/* Overpaid (Extra) — the Total Unpaid field shows the over-collected amount in
   parentheses, e.g. (181.2). Green to read as a credit, not an outstanding debt. */
body[data-page^="receipts"] .receipts-view-field-extra {
  color: #5a8f6b;
  border-color: rgba(90, 143, 107, 0.22);
  background: rgba(238, 248, 241, 0.9);
}

body[data-page^="receipts"] .receipts-card-paid-previous {
  border-color: rgba(196, 84, 84, 0.28);
}

body[data-page^="receipts"] .receipts-paid-previous-summary,
body[data-page^="receipts"] .receipts-paid-previous-queue {
  margin: 0 0 12px;
}

body[data-page^="receipts"] .receipts-paid-previous-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

body[data-page^="receipts"] .receipts-paid-previous-summary-grid span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 0.74rem;
}

body[data-page^="receipts"] .receipts-paid-previous-summary-grid strong {
  font-size: 0.72rem;
  color: #7a5a5a;
}

body[data-page^="receipts"] .receipts-paid-previous-queue-list {
  display: grid;
  gap: 8px;
}

body[data-page^="receipts"] .receipts-paid-previous-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(196, 84, 84, 0.12);
}

body[data-page^="receipts"] .receipts-paid-previous-queue-item.is-active {
  border-color: rgba(212, 118, 55, 0.3);
  background: rgba(255, 244, 235, 0.92);
}

body[data-page^="receipts"] .receipts-paid-previous-queue-copy,
body[data-page^="receipts"] .receipts-paid-previous-queue-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body[data-page^="receipts"] .receipts-paid-previous-queue-copy strong,
body[data-page^="receipts"] .receipts-paid-previous-queue-meta strong {
  font-size: 0.8rem;
}

body[data-page^="receipts"] .receipts-paid-previous-queue-copy span,
body[data-page^="receipts"] .receipts-paid-previous-queue-meta span {
  font-size: 0.72rem;
  color: #6d767d;
}

body[data-page^="receipts"] .receipts-card-prepaid {
  border-color: rgba(62, 139, 99, 0.28);
}

body[data-page^="receipts"] .receipts-card-custom {
  width: 100%;
  max-width: none;
}

body[data-page^="receipts"] .receipts-card-history {
  width: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  body[data-page="receipts-batch-print"] .receipts-batch-compact-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="receipts-batch-return"] .receipts-batch-compact-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page^="receipts"] .receipts-history-compact-grid {
    display: grid !important;
    grid-template-columns: 1fr;
  }

  body[data-page="receipts-batch-print"] .receipts-batch-compact-grid .field-group input,
  body[data-page="receipts-batch-print"] .receipts-batch-compact-grid .field-group select {
    width: 100%;
  }

  body[data-page="receipts-batch-return"] .receipts-batch-compact-grid .field-group input,
  body[data-page="receipts-batch-return"] .receipts-batch-compact-grid .field-group select {
    width: 100%;
  }

  body[data-page^="receipts"] .receipts-history-compact-grid .field-group input,
  body[data-page^="receipts"] .receipts-history-compact-grid .field-group select {
    width: 100%;
  }

}

body[data-page^="receipts"] .receipts-summary {
  gap: 3px;
  margin: 4px 0 10px;
  padding: 10px 12px;
}

body[data-page^="receipts"] .receipts-summary strong {
  font-size: 0.84rem;
}

body[data-page^="receipts"] .receipts-summary span {
  font-size: 0.74rem;
}

body[data-page="receipts-batch-print"] .receipts-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(180px, 1fr) 140px;
  align-items: end;
}

body[data-page="receipts-batch-print"] .receipts-batch-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

body[data-page="receipts-batch-print"] .receipts-batch-actions .action-btn {
  white-space: nowrap;
}

@media (max-width: 980px) {
  body[data-page="receipts-batch-print"] .receipts-form-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page^="receipts"] .receipts-month-checks {
  gap: 8px;
  padding: 4px 0 2px;
}

body[data-page^="receipts"] .receipts-month-checks label {
  font-size: 0.76rem;
}

body[data-page^="receipts"] .receipts-history-list {
  gap: 6px;
  max-height: none;
  overflow: visible;
}

body[data-page^="receipts"] .receipts-history-item {
  padding: 8px 10px;
  border-radius: 10px;
  gap: 10px;
}

body[data-page^="receipts"] .receipts-history-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

body[data-page^="receipts"] .receipts-history-hero-copy {
  padding: 12px 14px;
  border-radius: 14px;
}

body[data-page^="receipts"] .receipts-history-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body[data-page^="receipts"] .receipts-history-stat {
  padding: 10px 12px;
  border-radius: 12px;
}

body[data-page^="receipts"] .receipts-history-stat strong {
  font-size: 0.84rem;
}

body[data-page^="receipts"] .receipts-history-stat span {
  font-size: 0.66rem;
}

body[data-page^="receipts"] .receipts-history-toolbar {
  gap: 8px;
  margin-bottom: 8px;
}

body[data-page^="receipts"] .receipts-history-item-rich {
  padding: 12px;
  border-radius: 14px;
  gap: 12px;
}

body[data-page^="receipts"] .receipts-history-main {
  gap: 10px;
}

body[data-page^="receipts"] .receipts-history-title-row {
  gap: 8px;
}

body[data-page^="receipts"] .receipts-history-pill {
  min-height: 22px;
  padding: 4px 8px;
  font-size: 0.62rem;
}

body[data-page^="receipts"] .receipts-history-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

body[data-page^="receipts"] .receipts-history-info-row {
  padding: 8px 9px;
  border-radius: 10px;
}

body[data-page^="receipts"] .receipts-history-info-row small {
  font-size: 0.56rem;
}

body[data-page^="receipts"] .receipts-history-info-row span {
  font-size: 0.68rem;
  line-height: 1.25;
}

body[data-page^="receipts"] .receipts-batch-return-controls {
  gap: 5px;
  padding: 6px;
  border-radius: 12px;
}

body[data-page^="receipts"] .receipts-batch-return-field {
  gap: 3px;
}

body[data-page^="receipts"] .receipts-batch-return-field small {
  font-size: 0.6rem;
}

body[data-page^="receipts"] .receipts-batch-return-controls select,
body[data-page^="receipts"] .receipts-batch-return-controls input {
  font-size: 0.75rem;
  min-height: 30px;
  padding: 4px 7px;
}

body[data-page^="receipts"] .receipts-batch-return-item {
  padding: 7px 10px;
  gap: 8px;
}

body[data-page^="receipts"] .receipts-batch-return-item.is-focused {
  border-color: rgba(201, 108, 58, 0.42);
  box-shadow: 0 8px 20px rgba(201, 108, 58, 0.12);
  background: rgba(201, 108, 58, 0.06);
}

body[data-page^="receipts"] .receipts-batch-return-item .receipts-history-copy {
  gap: 2px;
}

body[data-page^="receipts"] .receipts-batch-return-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-page^="receipts"] .receipts-batch-return-item .receipts-history-copy strong {
  font-size: 0.78rem;
}

body[data-page^="receipts"] .receipts-batch-return-item .receipts-history-copy span {
  font-size: 0.68rem;
  line-height: 1.28;
}

body[data-page^="receipts"] .receipts-batch-return-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page^="receipts"] .receipts-batch-return-badges .tenant-database-receipt-badge.payment-state.late {
  background: rgba(196, 84, 84, 0.2);
  color: #962f2f;
  border: 1px solid rgba(196, 84, 84, 0.3);
}

body[data-page^="receipts"] .receipts-batch-return-item .action-btn.secondary {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.75rem;
}

body[data-page^="receipts"] .receipts-batch-return-item-locked {
  opacity: 0.58;
  background: rgba(243, 238, 230, 0.92);
}

body[data-page^="receipts"] .receipts-batch-return-item-locked .receipts-batch-return-controls select,
body[data-page^="receipts"] .receipts-batch-return-item-locked .receipts-batch-return-controls input,
body[data-page^="receipts"] .receipts-batch-return-item-locked .receipts-batch-return-controls button {
  opacity: 0.7;
  cursor: not-allowed;
}

body[data-page^="receipts"] .receipts-batch-return-lock-note {
  color: var(--primary);
  font-weight: 600;
}

body[data-page^="receipts"] .receipts-history-copy span {
  font-size: 0.66rem;
  line-height: 1.2;
}

body[data-page^="receipts"] .receipts-history-meta strong {
  font-size: 0.76rem;
}

body[data-page^="receipts"] .receipts-history-copy {
  gap: 2px;
}

body[data-page^="receipts"] .receipts-history-copy strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

body[data-page^="receipts"] .receipts-history-meta {
  gap: 6px;
}

body[data-page^="receipts"] .receipts-history-actions {
  gap: 6px;
}

body[data-page^="receipts"] .receipts-history-actions .action-btn {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
}

body[data-page^="receipts"] .receipts-preview-list {
  gap: 8px;
  margin-bottom: 10px;
}

body[data-page^="receipts"] [data-receipts-batch-list],
body[data-page^="receipts"] [data-receipts-batch-return-list] {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

body[data-page^="receipts"] .receipts-list-item {
  padding: 10px 12px;
}

body[data-page^="receipts"] .receipts-list-item strong {
  font-size: 0.76rem;
}

body[data-page^="receipts"] .receipts-list-head {
  gap: 8px;
}

body[data-page^="receipts"] .receipts-list-fields {
  gap: 6px;
}

body[data-page^="receipts"] .receipts-list-field {
  padding: 5px 7px;
  font-size: 0.66rem;
}

body[data-page^="receipts"] .receipts-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

body[data-page^="receipts"] .receipts-subnav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 600;
}

body[data-page^="receipts"] .receipts-subnav-link.active {
  background: rgba(212, 118, 55, 0.14);
  border-color: rgba(212, 118, 55, 0.32);
  color: var(--primary);
}

body[data-page^="receipts"] .receipts-grid.receipts-grid-focus {
  grid-template-columns: minmax(320px, 1fr);
  align-items: start;
}

body[data-page^="receipts"] .receipts-grid.receipts-grid-focus > .backup-card {
  height: auto;
}

body[data-page^="receipts"] .receipts-grid.receipts-grid-focus .receipts-card-history {
  grid-column: 1 / -1;
  order: 2;
}

/* Print History card is hidden on the Batch Return page only (kept in the DOM so the
   receipts page setup still binds historyList / historySummary). */
body[data-page^="receipts"] .receipts-card-history.receipts-card-history-hidden {
  display: none;
}

body[data-page^="receipts"] .receipts-card-print-history .receipts-history-hero {
  display: block;
  margin-bottom: 6px;
}

body[data-page^="receipts"] .receipts-card-print-history .receipts-history-hero-copy {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page^="receipts"] .receipts-card-print-history .receipts-history-stats {
  display: none;
}

body[data-page^="receipts"] .receipts-card-print-history .receipts-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body[data-page^="receipts"] .receipts-card-print-history .receipts-history-meta {
  justify-items: end;
}

body[data-page="receipts"] .content-grid,
body[data-page="receipts"] .panel,
body[data-page="receipts"] .receipts-grid,
body[data-page="receipts"] .receipts-card-history {
  width: 100%;
  max-width: none;
}

body[data-page="receipts"] .receipts-grid.receipts-grid-focus {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="receipts"] .receipts-card-history {
  padding: 16px 18px;
}

body[data-page="receipts"] .receipts-history-list {
  gap: 6px;
}

body[data-page="receipts"] .receipts-history-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}

body[data-page="receipts"] .receipts-history-copy {
  gap: 2px;
}

body[data-page="receipts"] .receipts-history-copy strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

body[data-page="receipts"] .receipts-history-copy span {
  font-size: 0.66rem;
  line-height: 1.2;
}

body[data-page="receipts"] .receipts-history-meta {
  gap: 6px;
}

body[data-page="receipts"] .receipts-history-meta strong {
  font-size: 0.76rem;
}

body[data-page="receipts"] .receipts-history-actions {
  gap: 6px;
}

body[data-page="receipts"] .receipts-history-actions .action-btn {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
}

body[data-page="receipts"] .receipts-history-hero {
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
}

body[data-page="receipts"] .receipts-history-item-rich {
  padding: 16px 18px;
  border-radius: 16px;
}

@media (max-width: 980px) {
  .receipts-history-hero {
    grid-template-columns: 1fr;
  }

  .receipts-history-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .receipts-history-item-rich {
    grid-template-columns: 1fr;
  }

  .receipts-history-meta {
    justify-items: start;
  }

  .receipts-history-actions {
    justify-content: flex-start;
  }

  .receipts-history-pills {
    justify-content: flex-start;
  }

  .receipts-history-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .receipts-history-stats,
  .receipts-history-info-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page="receipts"] .receipts-list-item span,
body[data-page="receipts"] .receipts-empty {
  font-size: 0.7rem;
}

body[data-page="receipts"] .action-btn {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.76rem;
}

body[data-page^="receipts"] {
  background: #eef1f3;
}

body[data-page^="receipts"] .main {
  padding: 7px 9px;
}

body[data-page^="receipts"] .topbar {
  min-height: 36px;
  margin-bottom: 6px;
}

body[data-page^="receipts"] .page-heading h2 {
  font-size: 0.84rem;
}

body[data-page^="receipts"] .content-grid {
  gap: 6px;
}

body[data-page^="receipts"] .panel {
  padding: 6px;
  border-radius: 8px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page^="receipts"] .panel-header {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom-color: rgba(73, 88, 98, 0.14);
}

body[data-page^="receipts"] .panel-header h3 {
  font-size: 0.78rem;
}

body[data-page^="receipts"] .panel-header p {
  display: none;
}

body[data-page^="receipts"] .receipts-subnav {
  gap: 4px;
  margin-bottom: 6px;
}

body[data-page^="receipts"] .receipts-subnav-link {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.6rem;
}

body[data-page^="receipts"] .receipts-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 7px;
}

body[data-page^="receipts"] .receipts-grid > .backup-card:nth-child(1),
body[data-page^="receipts"] .receipts-grid > .backup-card:nth-child(2) {
  height: auto;
  min-height: 0;
}

body[data-page^="receipts"] .backup-card,
body[data-page^="receipts"] .receipts-custom-panel,
body[data-page^="receipts"] .receipts-card-history {
  padding: 8px;
  border-radius: 8px;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page^="receipts"] .backup-label {
  margin-bottom: 4px;
  color: #56636c;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
}

body[data-page^="receipts"] .backup-text {
  margin-bottom: 7px;
  font-size: 0.66rem;
  line-height: 1.25;
}

body[data-page^="receipts"] .receipts-form-grid,
body[data-page^="receipts"] .form-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
}

body[data-page^="receipts"] .field-group {
  gap: 3px;
}

body[data-page^="receipts"] .receipts-paid-previous-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body[data-page^="receipts"] .receipts-paid-previous-extra-tenders {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

/* Match the main form grid so the split Amount/Method line up under the
   original Amount Paid / Payment Method fields at the exact same width. */
body[data-page^="receipts"] .receipts-paid-previous-extra-tender {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  align-items: end;
}

body[data-page^="receipts"] .receipts-paid-previous-extra-tender .field-group {
  gap: 3px;
  min-width: 0;
}

body[data-page^="receipts"] .receipts-paid-previous-extra-tender .field-group span {
  color: #56636c;
  font-size: 0.6rem;
  font-weight: 700;
}

body[data-page^="receipts"] .receipts-paid-previous-remove-tender {
  justify-self: start;
  align-self: end;
  width: auto;
  padding: 6px 12px;
}

/* Collapsible split-payment / installment breakdown toggled by a down arrow. */
.receipts-tender-details,
.tenant-database-receipt-tender-details {
  margin-top: 4px;
}

.receipts-tender-summary,
.tenant-database-receipt-tender-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary, #c96c3a);
  padding: 2px 8px;
  border: 1px solid rgba(212, 118, 55, 0.3);
  border-radius: 999px;
  user-select: none;
}

.receipts-tender-summary::-webkit-details-marker,
.tenant-database-receipt-tender-summary::-webkit-details-marker {
  display: none;
}

.receipts-tender-summary::after,
.tenant-database-receipt-tender-summary::after {
  content: "▾";
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

details[open] > .receipts-tender-summary::after,
details[open] > .tenant-database-receipt-tender-summary::after {
  transform: rotate(180deg);
}

/* Split-payment breakdown sub-rows (display only) shown under a receipt. */
.receipts-tender-breakdown,
.tenant-database-receipt-tenders {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 5px 8px;
  border-left: 2px solid rgba(212, 118, 55, 0.4);
  background: rgba(212, 118, 55, 0.06);
  border-radius: 6px;
}

.receipts-tender-line,
.tenant-database-receipt-tender {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--text);
}

.receipts-tender-method,
.tenant-database-receipt-tender-method {
  color: #6d767d;
}

.receipts-tender-amount,
.tenant-database-receipt-tender-amount {
  font-weight: 700;
  white-space: nowrap;
  margin-left: auto;
}

.receipts-voucher-btn,
.tenant-database-voucher-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(212, 118, 55, 0.4);
  background: rgba(255, 255, 255, 0.7);
  color: var(--primary, #c96c3a);
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.receipts-voucher-btn:hover,
.tenant-database-voucher-btn:hover {
  background: rgba(212, 118, 55, 0.12);
}

/* A voided ("Invalid") -P payment stays visible but reads as struck out and is
   dropped from the settled total; the toggle button flips to a green "Valid". */
.receipts-tender-line-invalid .receipts-tender-method,
.receipts-tender-line-invalid .receipts-tender-amount,
.tenant-database-receipt-tender-invalid .tenant-database-receipt-tender-method,
.tenant-database-receipt-tender-invalid .tenant-database-receipt-tender-amount {
  text-decoration: line-through;
  opacity: 0.55;
}

.receipts-voucher-btn-invalid,
.tenant-database-voucher-btn-invalid {
  border-color: rgba(192, 57, 43, 0.4);
  color: #c0392b;
}

.receipts-voucher-btn-invalid:hover,
.tenant-database-voucher-btn-invalid:hover {
  background: rgba(192, 57, 43, 0.12);
}

.receipts-voucher-btn-restore,
.tenant-database-voucher-btn-restore {
  border-color: rgba(39, 138, 80, 0.45);
  color: #1f8a4c;
}

.receipts-voucher-btn-restore:hover,
.tenant-database-voucher-btn-restore:hover {
  background: rgba(39, 138, 80, 0.12);
}

/* Payment-entry editor dialog form. */
.app-payment-entry-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 4px;
  text-align: left;
}

.app-payment-entry-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #56636c;
}

.app-payment-entry-form input,
.app-payment-entry-form select {
  padding: 6px 9px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  font-size: 0.85rem;
}

.app-payment-entry-form input[type="number"]::-webkit-outer-spin-button,
.app-payment-entry-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.app-payment-entry-form input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

body[data-page^="receipts"] .field-group label {
  color: #56636c;
  font-size: 0.6rem;
  font-weight: 700;
}

body[data-page="receipts-unpaid-from-before"] .receipts-unpaid-from-before-details-field {
  grid-column: 1 / span 2;
}

body[data-page^="receipts"] .field-group input,
body[data-page^="receipts"] .field-group select,
body[data-page^="receipts"] .field-group textarea {
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  border-color: rgba(73, 88, 98, 0.22);
  font-size: 0.72rem;
}

body[data-page^="receipts"] .receipts-batch-compact-grid,
body[data-page^="receipts"] .receipts-history-compact-grid {
  gap: 6px !important;
}

body[data-page^="receipts"] .receipts-summary {
  margin: 4px 0 6px;
  padding: 6px 8px;
  border-radius: 7px;
}

body[data-page^="receipts"] .receipts-summary strong {
  font-size: 0.7rem;
}

body[data-page^="receipts"] .receipts-summary span {
  font-size: 0.62rem;
}

body[data-page^="receipts"] .receipts-preview-list,
body[data-page^="receipts"] .receipts-history-list,
body[data-page^="receipts"] .receipts-paid-previous-queue-list {
  gap: 5px;
  margin-bottom: 6px;
}

body[data-page^="receipts"] .receipts-list-item,
body[data-page^="receipts"] .receipts-history-item,
body[data-page^="receipts"] .receipts-paid-previous-queue-item {
  padding: 6px 8px;
  border-radius: 7px;
}

body[data-page^="receipts"] .receipts-list-head,
body[data-page^="receipts"] .receipts-history-title-row {
  gap: 6px;
}

body[data-page^="receipts"] .receipts-list-item strong,
body[data-page^="receipts"] .receipts-history-copy strong,
body[data-page^="receipts"] .receipts-paid-previous-queue-copy strong,
body[data-page^="receipts"] .receipts-paid-previous-queue-meta strong {
  font-size: 0.68rem;
  line-height: 1.15;
}

body[data-page^="receipts"] .receipts-list-item span,
body[data-page^="receipts"] .receipts-history-copy span,
body[data-page^="receipts"] .receipts-paid-previous-queue-copy span,
body[data-page^="receipts"] .receipts-paid-previous-queue-meta span,
body[data-page^="receipts"] .receipts-empty {
  font-size: 0.6rem;
  line-height: 1.2;
}

body[data-page^="receipts"] .receipts-list-fields {
  gap: 5px;
}

body[data-page^="receipts"] .receipts-list-field {
  gap: 1px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.6rem;
}

body[data-page^="receipts"] .receipts-list-field input {
  min-height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 0.66rem;
  line-height: 1.1;
}

body[data-page^="receipts"] .receipts-list-field small {
  line-height: 1;
  margin: 0;
}

body[data-page^="receipts"] .receipts-history-hero {
  gap: 6px;
  margin-bottom: 6px;
}

body[data-page^="receipts"] .receipts-history-hero-copy,
body[data-page^="receipts"] .receipts-history-item-rich {
  padding: 8px;
  border-radius: 8px;
}

body[data-page^="receipts"] .receipts-history-stats {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 6px;
}

body[data-page^="receipts"] .receipts-history-stat,
body[data-page^="receipts"] .receipts-history-info-row {
  padding: 6px 7px;
  border-radius: 7px;
}

body[data-page^="receipts"] .receipts-history-stat strong,
body[data-page^="receipts"] .receipts-history-meta strong {
  font-size: 0.68rem;
}

body[data-page^="receipts"] .receipts-history-stat span,
body[data-page^="receipts"] .receipts-history-info-row span {
  font-size: 0.6rem;
}

body[data-page^="receipts"] .receipts-history-info-grid {
  gap: 5px;
}

body[data-page^="receipts"] .receipts-history-pill,
body[data-page^="receipts"] .tenant-database-receipt-badge {
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.56rem;
}

body[data-page^="receipts"] .receipts-batch-return-item {
  flex-wrap: wrap;
}

body[data-page^="receipts"] .receipts-batch-return-extra-tenders {
  flex-basis: 100%;
  width: 100%;
  align-items: flex-end;
  margin-top: -10px;
  gap: 2px;
}

body[data-page^="receipts"] .receipts-batch-return-extra-tender {
  gap: 3px;
  padding: 4px;
  border-radius: 7px;
}

body[data-page^="receipts"] .receipts-batch-return-extra-tender .receipts-batch-return-field small {
  display: none;
}

body[data-page^="receipts"] .receipts-batch-return-extra-tender select,
body[data-page^="receipts"] .receipts-batch-return-extra-tender input {
  min-height: 23px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.66rem;
  line-height: 1.1;
}

body[data-page^="receipts"] .receipts-batch-return-controls {
  gap: 3px;
  padding: 4px;
  border-radius: 7px;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
  width: max-content;
  max-width: 100%;
}

body[data-page^="receipts"] .receipts-batch-return-controls select,
body[data-page^="receipts"] .receipts-batch-return-controls input {
  min-height: 23px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.66rem;
  line-height: 1.1;
}

body[data-page^="receipts"] .receipts-batch-return-field {
  gap: 1px;
}

body[data-page^="receipts"] .receipts-batch-return-field small {
  font-size: 0.54rem;
  line-height: 1;
}

body[data-page^="receipts"] .receipts-batch-return-field-finalize {
  width: 116px;
}

body[data-page^="receipts"] .receipts-batch-return-field-total-unpaid,
body[data-page^="receipts"] .receipts-batch-return-field-old-due,
body[data-page^="receipts"] .receipts-batch-return-field-contract,
body[data-page^="receipts"] .receipts-batch-return-field-discount,
body[data-page^="receipts"] .receipts-batch-return-field-actual-rent,
body[data-page^="receipts"] .receipts-batch-return-field-amount,
body[data-page^="receipts"] .receipts-batch-return-field-vacant,
body[data-page^="receipts"] .receipts-batch-return-field-reference,
body[data-page^="receipts"] .receipts-batch-return-field-method {
  width: 62px;
}

body[data-page^="receipts"] .receipts-batch-return-field-method select {
  font-size: 0.58rem;
}

body[data-page^="receipts"] .action-btn,
body[data-page="receipts"] .action-btn,
body[data-page^="receipts"] .receipts-history-actions .action-btn,
body[data-page^="receipts"] .receipts-batch-return-item .action-btn.secondary {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.66rem;
}

@media (max-width: 1180px) {
  body[data-page^="receipts"] .receipts-form-grid,
  body[data-page^="receipts"] .form-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page^="receipts"] .receipts-grid,
  body[data-page^="receipts"] .receipts-form-grid,
  body[data-page^="receipts"] .form-grid,
  body[data-page^="receipts"] .receipts-history-stats,
  body[data-page^="receipts"] .receipts-history-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="receipts-unpaid-from-before"] .receipts-unpaid-from-before-details-field {
    grid-column: auto;
  }
}

.full-span {
  grid-column: 1 / -1;
}

.footer-note {
  margin-top: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 0.9rem;
}

@media (max-width: 1080px) {
  .hero-card,
  .panel-grid,
  .stats-grid,
  .placeholder-grid,
  .form-grid,
  .switcher-grid,
  .switcher-grid-areas {
    grid-template-columns: 1fr;
  }

  .ledger-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 236px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    z-index: 10;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    flex-wrap: wrap;
  }

  .search-box {
    min-width: 0;
    flex: 1;
  }
}

.unit-floor-panel {
  display: grid;
  gap: 14px;
}

/* Destructive row action (admin-only Delete Row) — reads RED. */
.table-btn.danger {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.45);
  color: #b7351f;
  font-weight: 700;
}

.table-btn.danger:hover {
  background: rgba(192, 57, 43, 0.2);
}

/* Deleted rows list under the building's Total row (Unit/Floor page). */
.unit-floor-deleted-rows {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(192, 57, 43, 0.06);
  border: 1px dashed rgba(192, 57, 43, 0.35);
  display: grid;
  gap: 6px;
}

.unit-floor-deleted-rows h4 {
  margin: 0 0 2px;
  font-size: 0.74rem;
  color: #b7351f;
}

.unit-floor-deleted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.74rem;
  color: #4a3a34;
}

.unit-floor-deleted-row small {
  color: #8a6f66;
}

/* "ADD ROW +" at the end of the building's table (Unit/Floor page). */
.unit-floor-add-row-end {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.unit-floor-add-row-end .action-btn {
  min-width: 180px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.unit-floor-tab-row {
  display: flex;
  gap: 10px;
}

.unit-floor-tab {
  min-width: 110px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.unit-floor-tab.active {
  background: linear-gradient(135deg, #173b55, #214d6c);
  color: #fff;
  border-color: transparent;
}

.unit-floor-tab-panel {
  display: none;
}

.unit-floor-tab-panel.active {
  display: block;
}

.unit-floor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.unit-floor-toolbar-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.unit-floor-toolbar-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.unit-floor-toolbar-side input {
  width: 320px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(21, 50, 67, 0.06);
}

.unit-floor-select {
  min-width: 210px;
}

.unit-floor-select select {
  min-height: 42px;
  padding: 8px 12px;
}

.unit-floor-select-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(21, 50, 67, 0.08);
  box-shadow: 0 8px 20px rgba(21, 50, 67, 0.05);
}

.unit-floor-select-inline span {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.unit-floor-select-inline select {
  min-width: 210px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
}

.unit-floor-month-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unit-floor-month-chip {
  border: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  cursor: pointer;
  font-size: 0.84rem;
}

.unit-floor-month-chip.active {
  background: var(--sidebar);
  color: #fff;
  border-color: transparent;
}

.unit-floor-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(21, 50, 67, 0.05);
  border: 1px solid rgba(21, 50, 67, 0.08);
  font-size: 0.84rem;
}

.unit-floor-summary-strip span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

.unit-floor-groups {
  display: grid;
  gap: 12px;
}

.unit-floor-group {
  border: 1px solid rgba(21, 50, 67, 0.08);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 253, 248, 0.92);
}

.unit-floor-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.unit-floor-group-head h4,
.unit-floor-group-head p {
  margin: 0;
}

.unit-floor-group-head p {
  color: var(--muted);
  font-size: 0.82rem;
}

.unit-floor-table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(21, 50, 67, 0.08);
}

.unit-floor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  background: rgba(255, 255, 255, 0.72);
}

.unit-floor-table th,
.unit-floor-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(21, 50, 67, 0.07);
  white-space: nowrap;
  line-height: 1.2;
}

.unit-floor-table thead th {
  background: rgba(245, 239, 230, 0.96);
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}

.unit-floor-table th:nth-child(1),
.unit-floor-table td:nth-child(1) {
  width: 96px;
}

.unit-floor-table th:nth-child(2),
.unit-floor-table td:nth-child(2) {
  width: 96px;
}

.unit-floor-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Units tab: highlight a row as the mouse moves over it, and keep it highlighted
   (stuck) while any field inside it has focus / is being edited (:focus-within).
   The focused row gets a stronger tint + a left accent bar so "stuck" reads as active. */
[data-unit-floor-tab-panel="units"] .unit-floor-table tbody tr:hover td,
[data-unit-floor-tab-panel="schedule"] .unit-floor-table tbody tr:hover td {
  background: rgba(201, 108, 58, 0.12);
}

[data-unit-floor-tab-panel="units"] .unit-floor-table tbody tr:focus-within td,
[data-unit-floor-tab-panel="schedule"] .unit-floor-table tbody tr:focus-within td {
  background: rgba(201, 108, 58, 0.2);
}

[data-unit-floor-tab-panel="units"] .unit-floor-table tbody tr:focus-within td:first-child,
[data-unit-floor-tab-panel="schedule"] .unit-floor-table tbody tr:focus-within td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

/* Batch Print + Batch Return rows: highlight as the cursor moves over a row, and keep it
   highlighted (with an accent bar) while a field in that row is being edited — same feel as
   the Unit/Floor tabs. The Total / summary row is excluded. */
.receipts-list-item:not(.receipts-list-item-total):hover,
.receipts-batch-return-item:not(.receipts-batch-return-total):hover {
  background: rgba(201, 108, 58, 0.12);
}

.receipts-list-item:not(.receipts-list-item-total):focus-within,
.receipts-batch-return-item:not(.receipts-batch-return-total):focus-within {
  background: rgba(201, 108, 58, 0.2);
  box-shadow: inset 3px 0 0 var(--primary);
}

.unit-floor-table tfoot td {
  padding: 8px 8px;
  text-align: left;
  border-top: 1px solid rgba(21, 50, 67, 0.12);
  background: rgba(245, 239, 230, 0.9);
  white-space: nowrap;
  line-height: 1.2;
  font-size: 0.72rem;
  font-weight: 700;
}

.unit-floor-cell-input {
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  display: inline-block;
  padding: 4px 6px;
  border: 1px solid rgba(21, 50, 67, 0.14);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  line-height: 1.25;
  min-height: 30px;
  text-align: center;
}

.unit-floor-cell-input[type="number"]::-webkit-outer-spin-button,
.unit-floor-cell-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.unit-floor-cell-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.unit-floor-cell-input:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(21, 50, 67, 0.22);
}

.unit-floor-cell-input:focus {
  outline: none;
  border-color: rgba(201, 108, 58, 0.45);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 2px rgba(201, 108, 58, 0.12);
}

.table-actions-preview {
  justify-content: flex-start;
}

.unit-floor-tenant-cell {
  display: grid;
  gap: 0;
}

.unit-floor-tenant-cell strong {
  font-size: 0.76rem;
  line-height: 1.15;
}

.unit-floor-tenant-cell span {
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.1;
}

.unit-floor-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.66rem;
  background: rgba(21, 50, 67, 0.06);
}

.unit-floor-amount-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  padding: 4px 8px;
  border: 1px solid rgba(21, 50, 67, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  line-height: 1.15;
  text-align: center;
}

.unit-floor-table .table-btn {
  min-height: 0;
  padding: 4px 7px;
  border-radius: 8px;
  font-size: 0.68rem;
  line-height: 1.1;
}

.unit-floor-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unit-floor-status.status-vacant {
  background: rgba(78, 130, 187, 0.12);
  color: #3c6999;
}

.unit-floor-status.status-upcoming {
  background: rgba(97, 126, 173, 0.14);
  color: #4e6792;
}

.unit-floor-status.status-handover {
  background: rgba(222, 168, 93, 0.16);
  color: #9a5d1f;
}

.unit-floor-status.status-paid {
  background: rgba(62, 139, 99, 0.14);
  color: #2d7650;
}

.unit-floor-status.status-unpaid,
.unit-floor-status.status-partial {
  background: rgba(216, 161, 41, 0.16);
  color: #9f7612;
}

.unit-floor-status.status-late {
  background: rgba(196, 84, 84, 0.14);
  color: #a84242;
}

.unit-floor-status.status-ex-tenant {
  background: rgba(154, 129, 104, 0.15);
  color: #7f6750;
}

.unit-floor-empty {
  padding: 20px 16px;
  text-align: center;
  border-radius: 16px;
  border: 1px dashed rgba(21, 50, 67, 0.16);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.65);
}

@media (max-width: 1200px) {
  .unit-floor-toolbar,
  .unit-floor-toolbar-main,
  .unit-floor-toolbar-side {
    flex-direction: column;
    align-items: stretch;
  }

  .unit-floor-toolbar-side input,
  .unit-floor-select {
    width: 100%;
    min-width: 0;
  }
}

body[data-page="unit-floor"] {
  background: #eef1f3;
}

body[data-page="unit-floor"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="unit-floor"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="unit-floor"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="unit-floor"] .content-grid {
  gap: 8px;
}

body[data-page="unit-floor"] .unit-floor-panel {
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="unit-floor"] .unit-floor-tab-row {
  gap: 4px;
  padding: 3px;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(73, 88, 98, 0.16);
  border-radius: 8px;
  background: #e9edf0;
}

body[data-page="unit-floor"] .unit-floor-tab {
  min-width: 82px;
  min-height: 27px;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border-color: transparent;
  color: #495862;
  font-size: 0.74rem;
}

body[data-page="unit-floor"] .unit-floor-tab.active {
  background: #ffffff;
  color: #153243;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 1px 3px rgba(25, 42, 54, 0.08);
}

body[data-page="unit-floor"] .unit-floor-toolbar {
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(73, 88, 98, 0.14);
  border-radius: 9px;
  background: #ffffff;
}

body[data-page="unit-floor"] .unit-floor-toolbar-main,
body[data-page="unit-floor"] .unit-floor-toolbar-side {
  gap: 7px;
}

body[data-page="unit-floor"] .unit-floor-select-inline {
  gap: 6px;
  padding: 3px 6px;
  border-radius: 7px;
  background: #f7f9fa;
  border-color: rgba(73, 88, 98, 0.14);
  box-shadow: none;
}

body[data-page="unit-floor"] .unit-floor-select-inline span {
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="unit-floor"] .unit-floor-select-inline select,
body[data-page="unit-floor"] .unit-floor-toolbar-side input {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.74rem;
  line-height: 1.1;
  box-shadow: none;
}

body[data-page="unit-floor"] .unit-floor-select-inline select {
  min-width: 180px;
}

body[data-page="unit-floor"] .unit-floor-toolbar-side input {
  width: 260px;
}

body[data-page="unit-floor"] .unit-floor-toolbar-side .action-btn {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.7rem;
}

body[data-page="unit-floor"] .unit-floor-month-chip-row {
  gap: 4px;
}

body[data-page="unit-floor"] .unit-floor-month-chip {
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 5px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  color: #495862;
  font-size: 0.68rem;
}

body[data-page="unit-floor"] .unit-floor-month-chip.active {
  background: #153243;
  color: #ffffff;
}

body[data-page="unit-floor"] .unit-floor-summary-strip {
  gap: 5px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.14);
  font-size: 0.72rem;
}

body[data-page="unit-floor"] .unit-floor-summary-strip span {
  padding: 3px 6px;
  border-radius: 5px;
  background: #f3f6f7;
}

body[data-page="unit-floor"] .unit-floor-groups {
  gap: 8px;
}

body[data-page="unit-floor"] .unit-floor-group {
  padding: 8px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="unit-floor"] .unit-floor-table-wrap {
  border-radius: 8px;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="unit-floor"] .unit-floor-table {
  font-size: 0.68rem;
  background: #ffffff;
}

body[data-page="unit-floor"] .unit-floor-table th,
body[data-page="unit-floor"] .unit-floor-table td {
  padding: 4px 5px;
  border-bottom-color: rgba(73, 88, 98, 0.11);
  line-height: 1.1;
}

body[data-page="unit-floor"] .unit-floor-table thead th {
  background: #eef1f3;
  color: #56636c;
  font-size: 0.58rem;
  letter-spacing: 0;
}

body[data-page="unit-floor"] .unit-floor-table tfoot td {
  padding: 5px;
  background: #eef1f3;
  font-size: 0.64rem;
}

body[data-page="unit-floor"] .unit-floor-table th:nth-child(1),
body[data-page="unit-floor"] .unit-floor-table td:nth-child(1),
body[data-page="unit-floor"] .unit-floor-table th:nth-child(2),
body[data-page="unit-floor"] .unit-floor-table td:nth-child(2) {
  width: 74px;
}

body[data-page="unit-floor"] .unit-floor-cell-input {
  /* Match the read-only amount boxes (.unit-floor-amount-field: 58px wide,
     20px tall) so the editable money fields (contract/discount/vacant) sit at
     the same size as every other field in the row. */
  width: 58px;
  min-width: 58px;
  max-width: 58px;
  min-height: 20px;
  padding: 2px 4px;
  border-radius: 5px;
  font-size: 0.68rem;
}

/* Floor / Unit text inputs share ONE fixed width so the columns line up row to
   row (they used to size to their content, which made every row different).
   90px fits the longest labels like "السرداب" and "ملحق 1" at this font size. */
body[data-page="unit-floor"] .unit-floor-cell-input[data-unit-floor-field] {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

body[data-page="unit-floor"] .unit-floor-tenant-cell strong {
  font-size: 0.68rem;
}

body[data-page="unit-floor"] .unit-floor-tenant-cell span {
  font-size: 0.6rem;
}

body[data-page="unit-floor"] .unit-floor-status {
  min-width: 50px;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 0.58rem;
}

body[data-page="unit-floor"] .unit-floor-amount-field {
  min-width: 58px;
  padding: 3px 5px;
  border-radius: 5px;
  background: #fbfcfd;
  font-size: 0.64rem;
}

body[data-page="unit-floor"] .unit-floor-table .table-btn {
  min-height: 24px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.6rem;
}

body[data-page="unit-floor"] .unit-floor-row-actions {
  gap: 4px;
}

body[data-page="unit-floor"] .unit-floor-empty {
  padding: 12px 8px;
  border-radius: 8px;
  font-size: 0.76rem;
}

@media (max-width: 1200px) {
  body[data-page="unit-floor"] .unit-floor-toolbar,
  body[data-page="unit-floor"] .unit-floor-toolbar-main,
  body[data-page="unit-floor"] .unit-floor-toolbar-side {
    align-items: stretch;
  }

  body[data-page="unit-floor"] .unit-floor-toolbar-side input,
  body[data-page="unit-floor"] .unit-floor-select-inline select {
    width: 100%;
    min-width: 0;
  }
}

.buildings-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.buildings-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.buildings-summary-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.buildings-summary-chip {
  min-width: 130px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.buildings-summary-chip strong {
  font-size: 1.1rem;
}

.buildings-summary-chip span {
  color: var(--muted);
  font-size: 0.82rem;
}

.buildings-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.buildings-side-card,
.buildings-editor-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  padding: 18px;
}

.buildings-side-head,
.buildings-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.buildings-side-head h4,
.buildings-editor-head h4 {
  margin: 0;
}

.buildings-editor-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.buildings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 65vh;
  overflow: auto;
}

.buildings-list-item {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.buildings-list-item.active {
  border-color: rgba(18, 147, 235, 0.35);
  background: rgba(18, 147, 235, 0.08);
}

.buildings-list-item strong,
.buildings-list-item span {
  display: block;
}

.buildings-list-item span {
  color: var(--muted);
  font-size: 0.83rem;
}

.buildings-list-badge {
  min-width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(18, 147, 235, 0.12);
  color: #0d6eb6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  padding: 11px 0 0;
  font-size: 0.95rem;
}

.buildings-form-grid {
  gap: 14px;
}

.buildings-form-layout {
  display: block;
}

.buildings-form-grid label small {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
}

.buildings-key-input[readonly] {
  background: rgba(17, 24, 39, 0.05);
  border-color: rgba(21, 50, 67, 0.1);
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

.buildings-help-strip {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.buildings-help-strip span {
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.05);
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--muted);
}

.buildings-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

body[data-page="buildings"] .content-grid {
  display: block;
}

body[data-page="unit-floor"] .buildings-panel {
  gap: 8px;
}

body[data-page="unit-floor"] .buildings-header {
  align-items: center;
  gap: 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="unit-floor"] .buildings-header h3 {
  margin: 0;
  font-size: 0.92rem;
}

body[data-page="unit-floor"] .buildings-header p {
  display: none;
}

body[data-page="unit-floor"] .buildings-summary-strip {
  gap: 6px;
}

body[data-page="unit-floor"] .buildings-summary-chip {
  min-width: 92px;
  padding: 7px 10px;
  border-radius: 8px;
  gap: 1px;
  background: #ffffff;
}

body[data-page="unit-floor"] .buildings-summary-chip strong {
  font-size: 0.86rem;
  line-height: 1.05;
}

body[data-page="unit-floor"] .buildings-summary-chip span {
  font-size: 0.58rem;
  line-height: 1.1;
}

body[data-page="unit-floor"] .buildings-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

body[data-page="unit-floor"] .buildings-side-card,
body[data-page="unit-floor"] .buildings-editor-card {
  padding: 9px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="unit-floor"] .buildings-editor-card {
  padding: 12px;
}

body[data-page="unit-floor"] .buildings-side-head,
body[data-page="unit-floor"] .buildings-editor-head {
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

body[data-page="unit-floor"] .buildings-side-head h4,
body[data-page="unit-floor"] .buildings-editor-head h4 {
  font-size: 0.78rem;
}

body[data-page="unit-floor"] .buildings-editor-head p {
  display: none;
}

body[data-page="unit-floor"] .buildings-side-head .action-btn,
body[data-page="unit-floor"] .buildings-editor-head .action-btn,
body[data-page="unit-floor"] .buildings-actions .action-btn {
  min-height: 27px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.68rem;
}

body[data-page="unit-floor"] .buildings-list {
  gap: 6px;
  max-height: calc(100vh - 210px);
}

body[data-page="unit-floor"] .buildings-list-item {
  min-height: 56px;
  padding: 7px 8px;
  border-radius: 8px;
  gap: 8px;
}

body[data-page="unit-floor"] .buildings-list-item strong {
  font-size: 0.68rem;
  line-height: 1.05;
}

body[data-page="unit-floor"] .buildings-list-item span {
  margin-top: 2px;
  font-size: 0.58rem;
  line-height: 1.1;
}

body[data-page="unit-floor"] .buildings-list-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  border-radius: 8px;
  padding: 0;
  font-size: 0.72rem;
  line-height: 1;
  text-align: center;
}

body[data-page="unit-floor"] .buildings-form-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 11px;
}

body[data-page="unit-floor"] .buildings-form-grid .field-group {
  gap: 4px;
}

body[data-page="unit-floor"] .buildings-form-grid label {
  color: #56636c;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
}

body[data-page="unit-floor"] .buildings-form-grid label small {
  margin-left: 4px;
  font-size: 0.6rem;
}

body[data-page="unit-floor"] .buildings-form-grid input,
body[data-page="unit-floor"] .buildings-form-grid select {
  height: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 7px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.82rem;
  line-height: 1.1;
}

body[data-page="unit-floor"] .buildings-key-input[readonly] {
  background: #eef1f3;
}

body[data-page="unit-floor"] .buildings-help-strip {
  margin-top: 10px;
  gap: 7px;
}

body[data-page="unit-floor"] .buildings-help-strip span {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.66rem;
  line-height: 1.1;
}

body[data-page="unit-floor"] .buildings-actions {
  margin-top: 9px;
}

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

  body[data-page="unit-floor"] .buildings-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body[data-page="backup"],
body[data-page="activity"],
body[data-page="admin"],
body[data-page="ex-tenant"] {
  background: #eef1f3;
}

body[data-page="backup"] .main,
body[data-page="activity"] .main,
body[data-page="admin"] .main,
body[data-page="ex-tenant"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="backup"] .topbar,
body[data-page="activity"] .topbar,
body[data-page="admin"] .topbar,
body[data-page="ex-tenant"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="backup"] .page-heading h2,
body[data-page="activity"] .page-heading h2,
body[data-page="admin"] .page-heading h2,
body[data-page="ex-tenant"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="backup"] .content-grid,
body[data-page="activity"] .content-grid,
body[data-page="admin"] .content-grid,
body[data-page="ex-tenant"] .content-grid {
  display: block;
  gap: 8px;
}

body[data-page="backup"] .panel,
body[data-page="activity"] .panel,
body[data-page="admin"] .panel,
body[data-page="ex-tenant"] .panel {
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="backup"] .panel-header,
body[data-page="activity"] .panel-header,
body[data-page="admin"] .panel-header,
body[data-page="ex-tenant"] .panel-header {
  min-height: 0;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="backup"] .panel-header h3,
body[data-page="activity"] .panel-header h3,
body[data-page="admin"] .panel-header h3,
body[data-page="ex-tenant"] .panel-header h3 {
  margin-bottom: 0;
  font-size: 0.98rem;
}

body[data-page="backup"] .panel-header p,
body[data-page="activity"] .panel-header p,
body[data-page="admin"] .panel-header p,
body[data-page="ex-tenant"] .panel-header p {
  display: none;
}

body[data-page="backup"] .action-btn,
body[data-page="activity"] .action-btn,
body[data-page="admin"] .action-btn,
body[data-page="ex-tenant"] .action-btn,
body[data-page="backup"] .backup-button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
}

body[data-page="backup"] .backup-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 8px;
}

body[data-page="backup"] .backup-card {
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="backup"] .backup-label {
  margin-bottom: 6px;
  color: #56636c;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
}

body[data-page="backup"] .backup-text {
  display: none;
}

body[data-page="backup"] .backup-actions {
  gap: 8px;
  margin-bottom: 8px;
}

body[data-page="backup"] .backup-status,
body[data-page="backup"] .backup-list {
  color: #56636c;
  font-size: 0.72rem;
  line-height: 1.25;
}

body[data-page="backup"] .backup-code {
  max-height: 92px;
  padding: 8px 10px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.16);
  color: #25313a;
  font-size: 0.72rem;
  line-height: 1.3;
  overflow: auto;
}

body[data-page="backup"] .backup-list {
  margin-top: 8px;
  padding-left: 16px;
}

body[data-page="activity"] .audit-log-panel {
  gap: 7px;
}

body[data-page="activity"] .audit-log-header {
  gap: 8px;
}

body[data-page="activity"] .audit-log-summary-strip {
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 6px;
  min-width: 300px;
}

body[data-page="activity"] .audit-log-summary-chip {
  padding: 6px 8px;
  border-radius: 7px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="activity"] .audit-log-summary-chip strong {
  color: #25313a;
  font-size: 0.92rem;
}

body[data-page="activity"] .audit-log-summary-chip span {
  font-size: 0.62rem;
}

body[data-page="activity"] .audit-log-toolbar {
  gap: 7px;
  padding: 7px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.14);
}

/* One row: Action | Building | Search | Old Audit Logs (Archive) dropdown +
   its inline download | user tabs. */
body[data-page="activity"] .audit-log-filters {
  grid-template-columns: 150px 150px 150px auto;
  gap: 7px;
  flex: 0 0 auto;
}

body[data-page="activity"] .audit-log-toolbar {
  flex-wrap: nowrap;
  align-items: flex-end;
}

body[data-page="activity"] .audit-log-tabs {
  flex: 0 0 auto;
}

/* The archive download sits INLINE on the toolbar row, right after the Old
   Audit Logs button — collapses to nothing while hidden. */
/* Archive dropdown sits in the SAME toolbar line as the Building filter and
   the user tabs (user rule 2026-07-18): always visible, one option per frozen
   archive file (newest first, older below), wide enough that the full date
   range + entry count always show. */
body[data-page="activity"] .audit-log-archive {
  flex: 0 1 auto;
  min-width: 0;
}

body[data-page="activity"] .audit-log-archive-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="activity"] .audit-log-archive-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 380px;
  max-width: 560px;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(73, 88, 98, 0.22);
  font-size: 0.78rem;
}

body[data-page="activity"] .audit-log-archive-empty {
  font-size: 0.78rem;
  color: #708290;
}

body[data-page="activity"] .audit-log-archive-row .action-btn {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 0.62rem;
  white-space: nowrap;
}

/* Push the user tabs to the far right so the inline download never crowds them. */
body[data-page="activity"] .audit-log-tabs {
  margin-inline-start: auto;
}

body[data-page="activity"] .audit-log-filters .field-group label {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
}

body[data-page="activity"] .audit-log-filters select,
body[data-page="activity"] .audit-log-filters input {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  border-color: rgba(73, 88, 98, 0.22);
  font-size: 0.74rem;
}

body[data-page="activity"] .audit-log-tabs {
  gap: 4px;
}

body[data-page="activity"] .audit-log-tab {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.66rem;
}

body[data-page="activity"] .audit-log-table-wrap {
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

/* Fixed layout makes columns obey the header widths below exactly — in auto
   layout the browser hands spare width to the longest column (Tenant), which is
   why long names never wrapped. Spare width now goes to Details (the only column
   without a width). Names still wrap between words only, never mid-word, so
   connected Arabic letters are never split. */
body[data-page="activity"] .audit-log-table {
  table-layout: fixed;
  min-width: 1280px;
}

body[data-page="activity"] .audit-log-table th:nth-child(1) { width: 34px; }   /* # */
body[data-page="activity"] .audit-log-table th:nth-child(2) { width: 145px; }  /* Time (12h + AM/PM) */
body[data-page="activity"] .audit-log-table th:nth-child(3) { width: 70px; }   /* User */
body[data-page="activity"] .audit-log-table th:nth-child(4) { width: 105px; }  /* Action */
body[data-page="activity"] .audit-log-table th:nth-child(5) { width: 80px; }   /* Group */
body[data-page="activity"] .audit-log-table th:nth-child(6) { width: 150px; }  /* Tenant */
body[data-page="activity"] .audit-log-table th:nth-child(7) { width: 100px; }  /* Building */
body[data-page="activity"] .audit-log-table th:nth-child(8) { width: 70px; }   /* Unit */
body[data-page="activity"] .audit-log-table th:nth-child(9) { width: 95px; }   /* Month */
body[data-page="activity"] .audit-log-table th:nth-child(10) { width: 105px; } /* Field */
body[data-page="activity"] .audit-log-table th:nth-child(11) { width: 110px; } /* Before */
body[data-page="activity"] .audit-log-table th:nth-child(12) { width: 110px; } /* After */

body[data-page="activity"] .audit-log-table th,
body[data-page="activity"] .audit-log-table td {
  padding: 5px 6px;
  vertical-align: middle;
}

/* Content follows its own script: Arabic values (tenant names, before/after
   text) read right-aligned RTL, English/numeric values stay left. */
body[data-page="activity"] .audit-log-table .audit-log-cell-primary,
body[data-page="activity"] .audit-log-table .audit-log-cell-secondary,
body[data-page="activity"] .audit-log-table .audit-log-change {
  unicode-bidi: plaintext;
  text-align: start;
}

body[data-page="activity"] .audit-log-table th {
  background: #eef1f3;
  color: #56636c;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
}

body[data-page="activity"] .audit-log-cell-primary {
  color: #25313a;
  font-size: 0.66rem;
  line-height: 1.2;
}

body[data-page="activity"] .audit-log-cell-secondary,
body[data-page="activity"] .audit-log-badge {
  font-size: 0.58rem;
}

body[data-page="activity"] .audit-log-badge {
  padding: 3px 6px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

body[data-page="activity"] .audit-log-change {
  min-height: 24px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 0.64rem;
}

body[data-page="activity"] .audit-log-col-time {
  min-width: 145px;
}

body[data-page="activity"] .audit-log-col-before,
body[data-page="activity"] .audit-log-col-after {
  min-width: 110px;
  width: 110px;
}

body[data-page="activity"] .audit-log-col-details {
  min-width: 210px;
  width: 210px;
}

body[data-page="activity"] .audit-log-col-tenant {
  width: 150px;
  min-width: 150px;
}

body[data-page="activity"] .audit-log-col-building {
  width: 95px;
  min-width: 95px;
}

body[data-page="activity"] .audit-log-col-unit {
  width: 70px;
  max-width: 70px;
}

body[data-page="admin"] .admin-panel {
  gap: 8px;
}

body[data-page="admin"] .admin-header {
  align-items: center;
  gap: 8px;
}

body[data-page="admin"] .admin-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 6px;
}

body[data-page="admin"] .admin-summary-chip {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 7px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="admin"] .admin-summary-chip strong {
  color: #25313a;
  font-size: 0.92rem;
}

body[data-page="admin"] .admin-summary-chip span {
  font-size: 0.62rem;
}

body[data-page="admin"] .admin-layout {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 8px;
}

body[data-page="admin"] .admin-side-card,
body[data-page="admin"] .admin-editor-card {
  padding: 9px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="admin"] .admin-side-head,
body[data-page="admin"] .admin-editor-head {
  gap: 8px;
  margin-bottom: 7px;
}

body[data-page="admin"] .admin-side-head h4,
body[data-page="admin"] .admin-editor-head h4 {
  font-size: 0.82rem;
}

body[data-page="admin"] .admin-editor-head p {
  font-size: 0.68rem;
}

body[data-page="admin"] .admin-employee-list {
  gap: 5px;
}

body[data-page="admin"] .admin-employee-item {
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="admin"] .admin-employee-item strong,
body[data-page="admin"] .admin-permission-table strong {
  color: #25313a;
  font-size: 0.72rem;
}

body[data-page="admin"] .admin-employee-item span,
body[data-page="admin"] .admin-permission-table span {
  font-size: 0.62rem;
}

body[data-page="admin"] .admin-employee-badge {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.58rem !important;
}

body[data-page="admin"] .admin-form-grid {
  gap: 6px 8px;
  margin-bottom: 8px;
}

body[data-page="admin"] .admin-form-grid .field-group label {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
}

body[data-page="admin"] .admin-form-grid input,
body[data-page="admin"] .admin-form-grid textarea,
body[data-page="admin"] .admin-form-grid select {
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  border-color: rgba(73, 88, 98, 0.22);
  font-size: 0.74rem;
}

/* The Receipt Months dropdown sits in the grid like any other half-width field
   instead of stretching tall/wide. */
body[data-page="admin"] .admin-form-grid select {
  width: 100%;
  max-width: 100%;
}

body[data-page="admin"] .admin-form-grid textarea {
  min-height: 52px;
}

body[data-page="admin"] .admin-password-toggle {
  width: 24px;
  height: 24px;
  right: 6px;
}

body[data-page="admin"] .admin-permission-table th,
body[data-page="admin"] .admin-permission-table td {
  padding: 5px 7px;
}

body[data-page="admin"] .admin-permission-table th {
  color: #56636c;
  font-size: 0.6rem;
  letter-spacing: 0.03em;
}

body[data-page="admin"] .admin-permission-table select {
  min-width: 96px;
  height: 26px;
  padding: 0 24px 0 8px;
  border-radius: 6px;
  font-size: 0.68rem;
}

body[data-page="admin"] .admin-permission-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

body[data-page="admin"] .admin-permission-card {
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="admin"] .admin-permission-card strong {
  color: #25313a;
  font-size: 0.7rem;
}

body[data-page="admin"] .admin-permission-card span {
  font-size: 0.58rem;
}

body[data-page="admin"] .admin-permission-card select {
  height: 26px;
  padding: 0 22px 0 7px;
  border-radius: 6px;
  font-size: 0.66rem;
}

body[data-page="admin"] .admin-actions {
  margin-top: 8px;
}

body[data-page="ex-tenant"] .tenant-database-kpis {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}

body[data-page="ex-tenant"] .tenant-database-kpi {
  min-height: 50px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="ex-tenant"] .tenant-database-kpi small {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

body[data-page="ex-tenant"] .tenant-database-kpi strong {
  color: #25313a;
  font-size: 0.98rem;
  line-height: 1.1;
}

body[data-page="ex-tenant"] .tenant-database-toolbar {
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 0.35fr);
  gap: 7px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(73, 88, 98, 0.14);
  border-radius: 9px;
  background: #ffffff;
}

body[data-page="ex-tenant"] .tenant-database-toolbar .field-group label,
body[data-page="ex-tenant"] .ex-tenant-manual-card .field-group label,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid .field-group label {
  margin-bottom: 2px;
  color: #56636c;
  font-size: 0.66rem;
  font-weight: 700;
}

body[data-page="ex-tenant"] .tenant-database-toolbar input,
body[data-page="ex-tenant"] .tenant-database-toolbar select,
body[data-page="ex-tenant"] .ex-tenant-manual-card input,
body[data-page="ex-tenant"] .ex-tenant-manual-card select,
body[data-page="ex-tenant"] .ex-tenant-manual-card textarea,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid input,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid select,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid textarea {
  height: 28px;
  min-height: 28px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.22);
  color: #25313a;
  font-size: 0.74rem;
  line-height: 1.1;
}

body[data-page="ex-tenant"] .ex-tenant-manual-card textarea,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid textarea {
  min-height: 52px;
}

body[data-page="ex-tenant"] .ex-tenant-manual-card {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

body[data-page="ex-tenant"] .ex-tenant-manual-grid,
body[data-page="ex-tenant"] .ex-tenant-receipt-grid {
  gap: 6px 8px;
}

body[data-page="ex-tenant"] .tenant-database-layout {
  grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-page="ex-tenant"] .tenant-database-list-wrap,
body[data-page="ex-tenant"] .tenant-database-detail {
  min-height: calc(100vh - 260px);
  padding: 9px;
  border-radius: 9px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="ex-tenant"] .tenant-database-list-head,
body[data-page="ex-tenant"] .tenant-database-detail-head,
body[data-page="ex-tenant"] .tenant-database-history-head {
  gap: 8px;
}

body[data-page="ex-tenant"] .tenant-database-list-head {
  margin-bottom: 6px;
}

body[data-page="ex-tenant"] .tenant-database-detail-head {
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.12);
}

body[data-page="ex-tenant"] .tenant-database-list-head h4,
body[data-page="ex-tenant"] .tenant-database-detail-head h4,
body[data-page="ex-tenant"] .tenant-database-history-head h5 {
  font-size: 0.82rem;
}

body[data-page="ex-tenant"] .tenant-database-list-head span,
body[data-page="ex-tenant"] .tenant-database-detail-head p,
body[data-page="ex-tenant"] .tenant-database-history-head p {
  font-size: 0.68rem;
  line-height: 1.25;
}

body[data-page="ex-tenant"] .tenant-database-list {
  gap: 5px;
}

body[data-page="ex-tenant"] .tenant-database-result {
  padding: 7px 8px;
  border-radius: 7px;
}

body[data-page="ex-tenant"] .tenant-database-result-copy strong,
body[data-page="ex-tenant"] .tenant-database-info-card strong,
body[data-page="ex-tenant"] .tenant-database-receipt-item strong {
  color: #25313a;
  font-size: 0.72rem;
}

body[data-page="ex-tenant"] .tenant-database-result-copy span,
body[data-page="ex-tenant"] .tenant-database-info-card small,
body[data-page="ex-tenant"] .tenant-database-receipt-item span,
body[data-page="ex-tenant"] .tenant-database-empty {
  font-size: 0.64rem;
}

body[data-page="ex-tenant"] .tenant-database-info-grid {
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 6px;
}

body[data-page="ex-tenant"] .tenant-database-info-card,
body[data-page="ex-tenant"] .tenant-database-note-card,
body[data-page="ex-tenant"] .tenant-database-receipt-item {
  padding: 7px 8px;
  border-radius: 7px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="ex-tenant"] .tenant-database-status-pill,
body[data-page="ex-tenant"] .tenant-database-result-badge,
body[data-page="ex-tenant"] .tenant-database-receipt-badge {
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.58rem;
}

@media (max-width: 1120px) {
  body[data-page="admin"] .admin-layout,
  body[data-page="ex-tenant"] .tenant-database-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="backup"] .backup-grid,
  body[data-page="ex-tenant"] .tenant-database-kpis,
  body[data-page="ex-tenant"] .tenant-database-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="backup"] .main,
  body[data-page="activity"] .main,
  body[data-page="admin"] .main,
  body[data-page="ex-tenant"] .main {
    padding: 8px;
  }

  body[data-page="activity"] .audit-log-header,
  body[data-page="admin"] .admin-header {
    align-items: stretch;
  }

  body[data-page="activity"] .audit-log-summary-strip,
  body[data-page="admin"] .admin-summary-strip,
  body[data-page="admin"] .admin-permission-grid,
  body[data-page="activity"] .audit-log-filters,
  body[data-page="ex-tenant"] .tenant-database-toolbar {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  body[data-page="backup"] .backup-grid,
  body[data-page="admin"] .admin-form-grid,
  body[data-page="ex-tenant"] .tenant-database-kpis,
  body[data-page="ex-tenant"] .tenant-database-info-grid,
  body[data-page="ex-tenant"] .ex-tenant-manual-grid,
  body[data-page="ex-tenant"] .ex-tenant-receipt-grid {
    grid-template-columns: 1fr;
  }
}

body[data-page="ex-tenant"] .tenant-database-panel {
  padding: 8px;
  border-radius: 8px;
}

body[data-page="ex-tenant"] .tenant-database-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 0.28fr);
  gap: 7px;
  margin-bottom: 7px;
  padding: 7px;
  border-radius: 7px;
}

body[data-page="ex-tenant"] .ex-tenant-add-panel {
  margin-bottom: 7px;
  padding: 0;
  border-radius: 7px;
  background: #ffffff;
}

body[data-page="ex-tenant"] .ex-tenant-add-panel .ex-tenant-manual-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px;
  padding: 0 9px 8px;
}

body[data-page="ex-tenant"] .ex-tenant-add-panel .ex-tenant-manual-notes {
  grid-column: span 2;
}

body[data-page="ex-tenant"] .tenant-database-layout {
  grid-template-columns: minmax(260px, 0.3fr) minmax(0, 1fr);
  gap: 8px;
}

body[data-page="ex-tenant"] .tenant-database-list-wrap,
body[data-page="ex-tenant"] .tenant-database-detail {
  min-height: calc(100vh - 205px);
  padding: 8px;
  border-radius: 8px;
}

body[data-page="ex-tenant"] .tenant-database-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 5px;
  margin-bottom: 7px;
}

@media (max-width: 1120px) {
  body[data-page="ex-tenant"] .tenant-database-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="ex-tenant"] .ex-tenant-add-panel .ex-tenant-manual-grid,
  body[data-page="ex-tenant"] .tenant-database-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="ex-tenant"] .tenant-database-toolbar,
  body[data-page="ex-tenant"] .ex-tenant-add-panel .ex-tenant-manual-grid,
  body[data-page="ex-tenant"] .tenant-database-detail-grid {
    grid-template-columns: 1fr;
  }

  body[data-page="ex-tenant"] .ex-tenant-add-panel .ex-tenant-manual-notes {
    grid-column: auto;
  }
}

body[data-page="dashboard"],
body[data-page="report"] {
  background: #eef1f3;
}

body[data-page="dashboard"] .main,
body[data-page="report"] .main {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
}

body[data-page="dashboard"] .topbar,
body[data-page="report"] .topbar {
  min-height: 46px;
  margin-bottom: 8px;
}

body[data-page="dashboard"] .page-heading h2,
body[data-page="report"] .page-heading h2 {
  font-size: 1.05rem;
}

body[data-page="dashboard"] .content-grid,
body[data-page="report"] .content-grid {
  gap: 8px;
}

body[data-page="dashboard"] .panel,
body[data-page="report"] .panel {
  padding: 8px;
  border-radius: 10px;
  background: #f8fafb;
  border-color: rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="dashboard"] .panel-header,
body[data-page="report"] .panel-header {
  min-height: 0;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(73, 88, 98, 0.14);
}

body[data-page="dashboard"] .panel-header h3,
body[data-page="report"] .panel-header h3 {
  margin-bottom: 0;
  color: #25313a;
  font-size: 0.98rem;
}

body[data-page="dashboard"] .panel-header p,
body[data-page="report"] .panel-header p {
  display: none;
}

body[data-page="report"] .main {
  padding: 7px 9px;
}

body[data-page="report"] .topbar {
  min-height: 36px;
  margin-bottom: 6px;
}

body[data-page="report"] .page-heading h2 {
  font-size: 0.84rem;
}

body[data-page="report"] .content-grid {
  gap: 6px;
}

body[data-page="report"] .panel {
  padding: 6px;
  border-radius: 8px;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="report"] .panel-header {
  position: sticky;
  top: 0;
  z-index: 23;
  margin-bottom: 4px;
  padding-bottom: 4px;
  background: #f8fafb;
}

body[data-page="report"] .panel-header h3 {
  font-size: 0.78rem;
}

body[data-page="dashboard"] .dashboard-panel {
  gap: 7px;
}

body[data-page="dashboard"] .dashboard-months {
  gap: 4px;
  /* Pin the month tabs while scrolling down the dashboard, same as the report
     page's sticky month tabs. The page (window) is the scroll container and no
     ancestor clips overflow, so a plain sticky pins them to the viewport top. */
  position: sticky;
  top: 0;
  z-index: 20;
  align-self: start;
  padding: 6px 0 8px;
  margin-bottom: 0;
  background: #f8fafb;
}

body[data-page="dashboard"] .dashboard-month-chip {
  height: 25px;
  padding: 0 8px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  color: #25313a;
  font-size: 0.66rem;
}

body[data-page="dashboard"] .dashboard-month-chip.active {
  background: #25313a;
  border-color: #25313a;
  color: #ffffff;
}

body[data-page="dashboard"] .dashboard-kpis {
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 6px;
}

body[data-page="dashboard"] .dashboard-kpi-card,
body[data-page="dashboard"] .dashboard-card {
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="dashboard"] .dashboard-kpi-card {
  min-height: 50px;
  padding: 7px 9px;
}

body[data-page="dashboard"] .dashboard-kpi-card small {
  color: #56636c;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

body[data-page="dashboard"] .dashboard-kpi-card strong {
  color: #25313a;
  font-size: 0.98rem;
  line-height: 1.1;
}

body[data-page="dashboard"] .dashboard-kpi-card span {
  font-size: 0.64rem;
}

body[data-page="dashboard"] .dashboard-main-grid,
body[data-page="dashboard"] .dashboard-bottom-grid {
  gap: 8px;
}

body[data-page="dashboard"] .dashboard-card {
  padding: 8px;
}

body[data-page="dashboard"] .dashboard-card-head {
  margin-bottom: 6px;
}

body[data-page="dashboard"] .dashboard-card-head h4 {
  color: #25313a;
  font-size: 0.78rem;
}

body[data-page="dashboard"] .dashboard-card-head p {
  display: none;
}

body[data-page="dashboard"] .dashboard-donut-layout {
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
}

body[data-page="dashboard"] .dashboard-donut {
  width: 82px;
  height: 82px;
}

body[data-page="dashboard"] .dashboard-donut-hole {
  width: 50px;
  height: 50px;
  background: #ffffff;
}

body[data-page="dashboard"] .dashboard-donut-hole strong {
  font-size: 0.78rem;
}

body[data-page="dashboard"] .dashboard-donut-hole span {
  font-size: 0.52rem;
}

body[data-page="dashboard"] .dashboard-legend {
  gap: 4px;
}

body[data-page="dashboard"] .dashboard-legend-item {
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 6px;
}

body[data-page="dashboard"] .dashboard-legend-dot {
  width: 8px;
  height: 8px;
}

body[data-page="dashboard"] .dashboard-legend-item strong,
body[data-page="dashboard"] .dashboard-bar-meta strong,
body[data-page="dashboard"] .dashboard-preview-item strong {
  color: #25313a;
  font-size: 0.68rem;
}

body[data-page="dashboard"] .dashboard-legend-item span,
body[data-page="dashboard"] .dashboard-preview-item span,
body[data-page="dashboard"] .dashboard-table td {
  font-size: 0.62rem;
}

body[data-page="dashboard"] .dashboard-status-chart,
body[data-page="dashboard"] .dashboard-vacant-chart,
body[data-page="dashboard"] .dashboard-preview-list {
  gap: 5px;
}

body[data-page="dashboard"] .dashboard-bar-row {
  gap: 4px;
}

body[data-page="dashboard"] .dashboard-bar-meta {
  gap: 8px;
  font-size: 0.68rem;
}

body[data-page="dashboard"] .dashboard-bar-track {
  height: 8px;
}

body[data-page="dashboard"] .dashboard-preview-item {
  padding: 6px 7px;
  border-radius: 6px;
  background: #fbfcfd;
  border-color: rgba(73, 88, 98, 0.14);
}

body[data-page="dashboard"] .dashboard-preview-amount {
  color: #25313a;
  font-size: 0.66rem;
}

body[data-page="dashboard"] .dashboard-table th,
body[data-page="dashboard"] .dashboard-table td {
  padding: 5px 6px;
}

body[data-page="dashboard"] .dashboard-table th {
  color: #56636c;
  font-size: 0.58rem;
  letter-spacing: 0.03em;
}

/* Money tool: centre the count columns (Occupied, Vacant, Late, Unpaid = cols 2-5)
   while the money columns keep their default alignment. */
body[data-page="dashboard"] .dashboard-table thead th:nth-child(n+2):nth-child(-n+5),
body[data-page="dashboard"] .dashboard-table tbody td:nth-child(n+2):nth-child(-n+5),
body[data-page="dashboard"] .dashboard-table tfoot th:nth-child(n+2):nth-child(-n+5) {
  text-align: center;
}

body[data-page="report"] .switcher-block {
  gap: 8px;
}

body[data-page="report"] .switcher-section h3 {
  margin: 1px 0 4px;
  color: #25313a;
  font-size: 0.62rem;
}

body[data-page="report"] .switcher-grid,
body[data-page="report"] [data-building-cards] {
  gap: 6px;
}

body[data-page="report"] .switcher-card {
  min-height: 38px;
  padding: 5px 6px;
  border-radius: 6px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="report"] .switcher-card.active {
  background: #fbfcfd;
  border-color: rgba(37, 49, 58, 0.45);
  box-shadow: inset 0 0 0 1px rgba(37, 49, 58, 0.18);
}

body[data-page="report"] .switcher-card small {
  margin-bottom: 1px;
  color: #56636c;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
}

body[data-page="report"] .switcher-card strong {
  color: #25313a;
  font-size: 0.56rem;
}

body[data-page="report"] .switcher-card span {
  margin-top: 2px;
  font-size: 0.52rem;
}

body[data-page="report"] .month-tabs-sticky {
  position: sticky;
  top: 28px;
  z-index: 22;
  padding: 3px 0 4px;
  background: #f8fafb;
  backdrop-filter: none;
}

body[data-page="report"] .month-tabs {
  gap: 4px;
  margin-top: 0;
  margin-bottom: 4px;
}

body[data-page="report"] .month-tab-shell {
  padding: 2px;
  border-radius: 6px;
}

body[data-page="report"] .month-tab {
  min-height: 20px;
  padding: 3px 6px;
  border-radius: 5px;
  font-size: 0.52rem;
}

body[data-page="report"] .ledger-toolbar {
  position: sticky;
  top: 56px;
  z-index: 21;
  /* search | units | planned-date | planned-btn | A | color | statuses |
     Excel | Print — the unit dropdown moved next to the search and the
     Planned Vacate tool sits before A (user rule 2026-07-17); the search
     track shrank to make room. */
  grid-template-columns: minmax(90px, 1fr) 84px 96px 78px 34px 92px 96px 52px 68px;
  gap: 5px;
  margin: 4px 0 6px;
  align-items: center;
  /* The toolbar is STICKY — margin disappears once it pins under the month
     tabs while scrolling. The gap lives as internal top padding instead (the
     background covers it), so the search row keeps its air in both states. */
  padding: 16px 0 6px;
  background: #f8fafb;
}

body[data-page="report"] .ledger-planned-date {
  padding: 0 4px;
}

body[data-page="report"] .planned-vacate-btn {
  padding: 0 4px;
}

.ledger-planned-date:disabled,
.planned-vacate-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #eef1f3;
}

/* The unit picked in the All-units dropdown — the Planned Vacate target. */
tr.planned-vacate-target-row td,
tr.planned-vacate-target-row td input {
  background-color: #fff3d6;
}

body[data-page="report"] .ledger-search,
body[data-page="report"] .ledger-select,
body[data-page="report"] .ledger-btn {
  height: 24px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: none;
  font-size: 0.58rem;
}

body[data-page="report"] .ledger-search,
body[data-page="report"] .ledger-select {
  padding: 0 8px;
}

body[data-page="report"] .ledger-btn {
  padding: 0 8px;
  font-weight: 600;
}

body[data-page="report"] .table-header-shell,
body[data-page="report"] .table-shell {
  border-radius: 8px;
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
  box-shadow: none;
}

body[data-page="report"] .table-header-shell {
  position: sticky;
  /* Follows the toolbar's stuck bottom: 56px (month tabs) + 46px toolbar
     (24px controls + 16px top / 6px bottom padding) + 3px gap. */
  top: 105px;
  z-index: 20;
  margin-bottom: 0;
  padding: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
}

body[data-page="report"] .table-header-grid {
  width: 100%;
}

body[data-page="report"] .table-header-cell {
  min-height: 32px;
  padding: 4px 3px;
  font-size: 0.52rem;
  line-height: 1.08;
}

body[data-page="report"] .table-header-cell .th-wrap {
  min-height: 0;
  line-height: 1.08;
}

body[data-page="report"] .table-shell {
  overflow: visible;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body[data-page="report"] .table-shell table {
  width: 100%;
  min-width: 1680px;
  table-layout: fixed;
}

body[data-page="report"] .table-sticky-wrap {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

body[data-page="report"] .table-sticky-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

body[data-page="report"] .table-header-grid {
  width: max-content;
}

body[data-page="report"] .table-shell th,
body[data-page="report"] .table-shell td {
  /* 5px vertical padding around the 20px controls ≈ 30px rows. */
  padding: 5px 2px;
  font-size: 0.56rem;
  overflow: hidden;
  text-overflow: clip;
}

body[data-page="report"] .table-shell th {
  background: #eef1f3;
  color: #56636c;
  font-size: 0.52rem;
  letter-spacing: 0.02em;
}

body[data-page="report"] .table-shell th:nth-child(4),
body[data-page="report"] .table-shell td:nth-child(4) {
  width: 7.5%;
  overflow: visible;
}

body[data-page="report"] .table-shell th:nth-child(2),
body[data-page="report"] .table-shell td:nth-child(2),
body[data-page="report"] .table-shell th:nth-child(3),
body[data-page="report"] .table-shell td:nth-child(3) {
  overflow: visible;
}

body[data-page="report"] .table-shell th:nth-child(7),
body[data-page="report"] .table-shell td:nth-child(7) {
  overflow: visible;
}

body[data-page="report"] .table-shell td:nth-child(2),
body[data-page="report"] .table-shell td:nth-child(3) {
  position: relative;
  padding-left: 6px;
  padding-right: 6px;
}

body[data-page="report"] .table-shell td:nth-child(2)::before,
body[data-page="report"] .table-shell td:nth-child(3)::before {
  content: none;
}

body[data-page="report"] .preview-unit-ref-labels {
  display: none;
}

body[data-page="report"] .table-shell th:nth-child(5),
body[data-page="report"] .table-shell td:nth-child(5),
body[data-page="report"] .table-shell th:nth-child(6),
body[data-page="report"] .table-shell td:nth-child(6) {
  width: 4.7%;
  overflow: visible;
}

/* The money columns (Contract Amount … Old Tenants & Fees, columns 8–21) are a
   fixed 65px each; Floor / Unit / Status keep their previous 78px (Unit Ref
   keeps its own special sizing). Notes (the last column, colspan 2) carries NO
   width — with table-layout: fixed it is the only elastic column, so it
   absorbs ALL the leftover room. The real thead is display:none (the sticky
   header clone replaces it), so fixed layout reads these widths from the first
   BODY row — the td selectors are the ones that actually size the columns. */
body[data-page="report"] .table-shell thead th:nth-child(7),
body[data-page="report"] .table-shell tbody td:nth-child(7) {
  width: 78px;
}

/* Floor / Unit narrowed from the old 78px (autofit inputs inside are 38/50px
   plus the 6px cell padding each side). */
body[data-page="report"] .table-shell thead th:nth-child(2),
body[data-page="report"] .table-shell tbody td:nth-child(2) {
  width: 54px;
}

body[data-page="report"] .table-shell thead th:nth-child(3),
body[data-page="report"] .table-shell tbody td:nth-child(3) {
  width: 66px;
}

/* Amount columns 8..22 (Contract Amount → Old Tenants & Fees, including the
   Insurance Returned column at 21) share one fixed width; Notes stays the
   elastic column. */
body[data-page="report"] .table-shell thead th:nth-child(n+8):nth-child(-n+22),
body[data-page="report"] .table-shell tbody td:nth-child(n+8):nth-child(-n+22) {
  width: 65px;
}

/* Small window: drop the forced 1680px table and compress the columns + the
   Notes fonts, so the WHOLE table — Notes included — fits the window without
   horizontal scrolling or zooming out. Notes stays the elastic column. */
@media screen and (max-width: 1780px) {
  body[data-page="report"] .table-shell table {
    min-width: 100%;
  }

  body[data-page="report"] .table-shell thead th:nth-child(n+8):nth-child(-n+22),
  body[data-page="report"] .table-shell tbody td:nth-child(n+8):nth-child(-n+22) {
    width: 58px;
  }

  body[data-page="report"] .table-shell thead th:nth-child(7),
  body[data-page="report"] .table-shell tbody td:nth-child(7) {
    width: 66px;
  }

  body[data-page="report"] .table-shell th:nth-child(4),
  body[data-page="report"] .table-shell td:nth-child(4) {
    width: 7%;
  }

  body[data-page="report"] .table-shell th:nth-child(5),
  body[data-page="report"] .table-shell td:nth-child(5),
  body[data-page="report"] .table-shell th:nth-child(6),
  body[data-page="report"] .table-shell td:nth-child(6) {
    width: 4.4%;
  }

  /* Autofit stamps inline pixel widths sized for the roomy layout — force the
     controls to follow their (now narrower) columns instead. */
  body[data-page="report"] .table-shell input[data-autofit],
  body[data-page="report"] .table-shell .calc-value[data-autofit] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-page="report"] .notes-cell {
    font-size: 0.5rem;
  }

  body[data-page="report"] .notes-system-col {
    flex: 0 0 106px;
    width: 106px;
  }

  body[data-page="report"] .notes-system-col .notes-helper {
    font-size: 0.42rem;
  }
}

/* Field annotations (the toolbar "A" tool). The fill lives on the td; the
   control inside goes transparent so the color reads through. */
.ledger-btn.annotate-toggle {
  min-width: 34px;
  font-weight: 700;
}

.ledger-btn.annotate-toggle.annotate-active {
  background: #153243;
  border-color: #153243;
  color: #fff;
}

.ledger-select.annotate-color {
  min-width: 96px;
}

/* The highlight lives INSIDE the field's own border (fill on the control
   itself, never on the whole cell). Computed pills (.calc-value — Actual
   Rent, Unpaid, Total Unpaid, Status…) get the SAME in-field look as inputs
   like Current Month. Only a control-less cell falls back to a cell fill. */
body[data-page="report"] .table-shell tbody td[data-annotation] input,
body[data-page="report"] .table-shell tbody td[data-annotation] select,
body[data-page="report"] .table-shell tbody td[data-annotation] textarea,
body[data-page="report"] .table-shell tbody td[data-annotation] .calc-value,
body[data-page="report"] .table-shell tbody td[data-annotation] .tenant-display-value {
  background: var(--annotation-fill, rgba(255, 214, 79, 0.45));
}

body[data-page="report"] .table-shell tbody td[data-annotation]:not(:has(input, select, textarea, .calc-value, .tenant-display-value)) {
  background: var(--annotation-fill, rgba(255, 214, 79, 0.45));
}

body[data-page="report"] .table-shell tbody td[data-annotation="yellow"] {
  --annotation-fill: rgba(255, 214, 79, 0.48);
}

body[data-page="report"] .table-shell tbody td[data-annotation="green"] {
  --annotation-fill: rgba(129, 199, 132, 0.45);
}

body[data-page="report"] .table-shell tbody td[data-annotation="blue"] {
  --annotation-fill: rgba(100, 181, 246, 0.42);
}

body[data-page="report"] .table-shell tbody td[data-annotation="red"] {
  --annotation-fill: rgba(239, 154, 154, 0.5);
}

body[data-page="report"] .table-shell tbody td[data-annotation="purple"] {
  --annotation-fill: rgba(186, 148, 217, 0.45);
}

body[data-page="report"] .table-shell textarea[data-field="tenantName"],
body[data-page="report"] .table-shell input[data-field="tenantName"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  color: #25313a;
  line-height: 1.15;
  text-overflow: clip;
}

/* Tighter rows: the tenant name's 8px top/bottom padding was the row-height
   driver (35px rows around 20px controls). 3px brings rows to ~26px. To revert
   to the old airy spacing, delete this rule (the base .tenant-display-value
   padding of 8px 6px takes over again). */
body[data-page="report"] .table-shell .tenant-display-value {
  padding-top: 3px;
  padding-bottom: 3px;
}

body[data-page="report"] .archive-helper {
  margin-top: 1px;
  font-size: 0.5rem;
  line-height: 1.05;
  color: rgba(164, 108, 36, 0.78);
}

body[data-page="report"] .table-shell input[data-field="floor"],
body[data-page="report"] .table-shell input[data-field="unit"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 auto;
  border: 1px solid rgba(73, 88, 98, 0.24);
  background: #f4f1eb !important;
  box-shadow: none;
  text-align: center;
  /* Match the Units page (LTR/normal) so a mixed value like "سرداب 1" keeps the
     number on the SAME side as the Units page — RTL/plaintext here flipped the
     number to the wrong side on the Report only. */
  direction: ltr;
  unicode-bidi: normal;
  padding-left: 4px;
  padding-right: 4px;
}

body[data-page="report"] .table-shell .calc-value[data-field="status"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 6px);
  min-width: 0 !important;
  max-width: calc(100% - 6px);
  box-sizing: border-box;
  margin: 0 auto;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 4px;
}

body[data-page="report"] .table-shell input[data-field="contractStart"],
body[data-page="report"] .table-shell input[data-field="contractEnd"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  text-align: center;
  text-overflow: clip;
}

/* Snug date columns: hide the native calendar-picker icon so the column fits just
   the date text (dd/mm/yyyy) with no extra spacing. Dates remain typeable. */
body[data-page="report"] .table-shell input[data-field="contractStart"]::-webkit-calendar-picker-indicator,
body[data-page="report"] .table-shell input[data-field="contractEnd"]::-webkit-calendar-picker-indicator {
  display: none;
}

body[data-page="report"] .table-shell select[data-field="contractPreset"] {
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
  padding-left: 2px;
  padding-right: 2px;
  background-image: none;
}

body[data-page="report"] .table-shell input[data-field="contractStart"],
body[data-page="report"] .table-shell input[data-field="contractEnd"],
body[data-page="report"] .table-shell select[data-field="contractPreset"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.1;
}

body[data-page="report"] .table-shell th:nth-child(8),
body[data-page="report"] .table-shell td:nth-child(8) {
  overflow: visible;
}

body[data-page="report"] .table-shell input[data-field="contractAmount"] {
  display: block;
  width: calc(100% - 5px) !important;
  min-width: 0 !important;
  max-width: calc(100% - 5px) !important;
  min-height: 20px;
  height: 20px;
  margin: 0 auto;
  padding-left: 2px;
  padding-right: 2px;
  line-height: 1;
  text-align: center;
}

body[data-page="report"] .table-shell input[data-field="discount"],
body[data-page="report"] .table-shell input[data-field="vacant"],
body[data-page="report"] .table-shell input[data-field="unpaidFromBefore"],
body[data-page="report"] .table-shell input[data-field="prepaidFromBefore"],
body[data-page="report"] .table-shell input[data-field="january"],
body[data-page="report"] .table-shell input[data-field="paidPrevious"],
body[data-page="report"] .table-shell input[data-field="prepaid"],
body[data-page="report"] .table-shell input[data-field="insuranceCurrent"],
body[data-page="report"] .table-shell input[data-field="insurancePrevious"],
body[data-page="report"] .table-shell input[data-field="oldCurrentMonth"],
body[data-page="report"] .table-shell input[data-field="oldTenantCredit"],
body[data-page="report"] .table-shell input[data-field="oldTenantDuePaid"],
body[data-page="report"] .table-shell input[data-field="oldInsurance"],
body[data-page="report"] .table-shell .calc-value[data-field="insuranceReturned"],
body[data-page="report"] .table-shell .calc-value[data-field="actualRent"],
body[data-page="report"] .table-shell .calc-value[data-field="unpaid"],
body[data-page="report"] .table-shell .calc-value[data-field="totalUnpaid"],
body[data-page="report"] .table-shell .calc-value[data-field="fees"],
body[data-page="report"] .table-shell .calc-value[data-field="oldTenantsFees"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 5px) !important;
  min-width: 0 !important;
  max-width: calc(100% - 5px) !important;
  min-height: 20px;
  height: 20px;
  margin: 0 auto;
  padding-left: 2px;
  padding-right: 2px;
  line-height: 1;
  text-align: center;
}

body[data-page="report"] .table-shell input,
body[data-page="report"] .table-shell select,
body[data-page="report"] .table-shell textarea,
body[data-page="report"] .calc-value {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 20px;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 0.55rem;
}

body[data-page="report"] .table-shell th:nth-child(25),
body[data-page="report"] .table-shell td:nth-child(25) {
  overflow: visible;
}

body[data-page="report"] .notes-cell,
body[data-page="report"] .table-shell input[data-field="notes"] {
  width: 100%;
  min-width: 0;
}

body[data-page="report"] .notes-cell {
  gap: 1px;
}

/* Notes = ONE field box again (the old field look), but with the SYSTEM
   messages sitting INSIDE it as badges on the right. A vertical line divides
   the writing area (left) from the system-badge area (right) so you can see
   how much room your own text has. The right strip is a FIXED width sized for
   the longest current system message (TEMPORARY — once the messages are made
   shorter we drop the reserved strip + the divider line). */
body[data-page="report"] .notes-cell-split {
  display: flex;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  min-height: 20px;
  border: 1px solid rgba(73, 88, 98, 0.18);
  border-radius: 4px;
  background: #faf7f0;
  overflow: hidden;
}
body[data-page="report"] .notes-user-col {
  flex: 1 1 auto;
  min-width: 0;
  /* Slim vertical padding so the Notes box matches the other fields' 20px height. */
  padding: 1px 4px;
}
body[data-page="report"] .notes-system-col {
  flex: 0 0 150px;
  width: 150px;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  padding: 1px 4px;
  /* the divider line — lives INSIDE the field (temporary marker). */
  border-left: 1px solid rgba(73, 88, 98, 0.3);
}
/* The note is typed straight into the cell — the CELL is the field box, so
   the input itself stays borderless/transparent inside it. The user column is
   itself a flex row so the input always stretches to the full free width
   (width:100% alone collapsed to min-content via circular flex sizing). */
body[data-page="report"] .notes-user-col,
.notes-user-col {
  display: flex;
  align-items: center;
}

body[data-page="report"] .notes-cell-split .notes-edit-input,
.notes-cell-split .notes-edit-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 16px;
  padding: 0;
  font: inherit;
  color: inherit;
}

body[data-page="report"] .notes-cell-split .notes-edit-input:focus,
.notes-cell-split .notes-edit-input:focus {
  outline: none;
}

/* Inside the split cell the note is plain text — the CELL is the field now,
   so drop the note's own box border/background/padding. */
body[data-page="report"] .notes-cell-split .notes-display-value {
  border: none;
  background: transparent;
  padding: 0;
  min-height: 0;
}
/* System messages render as small badges in the right strip. They may wrap for
   now (until they are shortened). */
body[data-page="report"] .notes-system-col .notes-helper {
  display: inline-block;
  max-width: 100%;
  background: #eef3ff;
  color: #1c3d8f;
  border: 1px solid #c7d6ff;
  border-radius: 8px;
  padding: 0 5px;
  font-size: 0.46rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-align: right;
  text-overflow: clip;
}

/* The tenant's own note (written in Tenant DB — "Shows on every month's Report
   row") renders as a proper field ABOVE the system labels (Planned Vacate /
   pending schedule notes), so those never hide it. Long text WRAPS downward
   like the Tenant column — the fixed table layout keeps the column width put. */
.notes-cell .notes-display-value {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 20px;
  padding: 3px 4px;
  border: 1px solid rgba(73, 88, 98, 0.18);
  border-radius: 4px;
  background: #faf7f0;
  color: #25313a;
  font-size: 0.55rem;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  unicode-bidi: plaintext;
  text-align: start;
}

body[data-page="report"] .notes-helper {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #7b8790;
  font-size: 0.48rem;
  font-weight: 600;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="report"] .table-shell input[data-field="notes"] {
  width: 100%;
  max-width: none;
  padding-left: 3px;
  padding-right: 3px;
}

body[data-page="report"] .table-shell tfoot td {
  height: 20px;
  padding: 2px 3px;
  font-size: 0.52rem;
  width: auto;
  box-sizing: border-box;
  color: #6f5333;
  background: #f4eadc;
  border: 0 !important;
  box-shadow: none;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
}

body[data-page="report"] .table-shell tfoot td:first-child {
  text-align: left;
  font-weight: 700;
}

body[data-page="report"] .table-shell tfoot td:empty {
  color: transparent;
  background: #f4eadc;
  border-color: transparent;
}

body[data-page="report"] .table-shell tfoot input[data-footer-calc] {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  min-height: 18px;
  padding: 1px 3px;
  border-radius: 4px;
  font-size: 0.52rem;
  border: 0 !important;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.5);
}

body[data-page="report"] .table-shell tfoot tr {
  box-shadow: inset 0 -1px 0 #111111;
}

body[data-page="report"] .main .action-btn,
body[data-page="report"] .main button {
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 5px;
  font-size: 0.56rem;
}

body[data-page="report"] .pending-handover-row .pending-handover-cancel-btn {
  min-height: 0;
  height: auto;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 8px;
  line-height: 1;
}

body[data-page="report"] .pending-handover-row .pending-handover-complete-btn {
  min-height: 0;
  height: auto;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 8px;
  line-height: 1;
}

@media (max-width: 1180px) {
  body[data-page="dashboard"] .dashboard-kpis,
  body[data-page="dashboard"] .dashboard-main-grid,
  body[data-page="dashboard"] .dashboard-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="dashboard"] .main,
  body[data-page="report"] .main {
    padding: 8px;
  }

  body[data-page="dashboard"] .dashboard-kpis,
  body[data-page="dashboard"] .dashboard-main-grid,
  body[data-page="dashboard"] .dashboard-bottom-grid,
  body[data-page="dashboard"] .dashboard-donut-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="dashboard"] .dashboard-card,
  body[data-page="dashboard"] .dashboard-kpi-card {
    padding: 8px;
  }
}

/* ===== Buildings tab: Area Group + button ===== */
.buildings-area-group-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.buildings-area-group-row select {
  flex: 1;
  min-width: 0;
}
.buildings-area-group-add,
.buildings-area-group-remove-inline {
  flex-shrink: 0;
  width: 36px;
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid #cdd3da;
  background: #f4f6f9;
  color: #1f2937;
  border-radius: 6px;
  cursor: pointer;
}
.buildings-area-group-add:hover {
  background: #e6ecf3;
}
.buildings-area-group-remove-inline {
  border-color: #e8b4b4;
  background: #fdf2f2;
  color: #b91c1c;
}
.buildings-area-group-remove-inline:hover:not(:disabled) {
  background: #fbdcdc;
}
.buildings-area-group-remove-inline:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.buildings-area-hint {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 0.78em;
  line-height: 1.3;
}

/* Keep each field at its natural height instead of stretching to match the
   tallest sibling — otherwise Row Count gets visually taller than fields with
   helper text. */
.buildings-form-grid .field-group {
  align-self: start;
}
.buildings-form-grid .field-group input,
.buildings-form-grid .field-group select {
  align-self: start;
}

/* ===== Buildings list + Area Groups reorder ===== */
.buildings-list-section {
  margin-bottom: 10px;
}
.buildings-list-splitter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin: 4px 0 6px;
  background: linear-gradient(to right, rgba(44, 108, 240, 0.10), rgba(44, 108, 240, 0));
  border-left: 3px solid #2c6cf0;
  border-radius: 2px;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3a8a;
  font-weight: 600;
}
.buildings-list-splitter-name {
  flex: 1;
}
.buildings-list-splitter-count {
  background: rgba(44, 108, 240, 0.15);
  color: #1f3a8a;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.92em;
  font-weight: 700;
}

.buildings-list-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-bottom: 4px;
}
.buildings-list-row .buildings-list-item {
  flex: 1;
  margin-bottom: 0;
}
.buildings-list-reorder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.buildings-reorder-btn {
  width: 22px;
  height: 18px;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
  border: 1px solid #cdd3da;
  background: #f4f6f9;
  color: #1f2937;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.buildings-reorder-btn:hover:not(:disabled) {
  background: #e6ecf3;
}
.buildings-reorder-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.buildings-area-group-manager {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3e6ea;
}
.buildings-area-group-manager h4 {
  margin: 0 0 4px;
  font-size: 0.92rem;
}
.buildings-area-group-hint {
  margin: 0 0 8px;
  color: #6b7280;
  font-size: 0.78em;
}
.buildings-area-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.buildings-area-group-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #f8fafb;
  border: 1px solid #e3e6ea;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 0.85em;
}
.buildings-area-group-name {
  flex: 1;
  font-weight: 500;
}
.buildings-area-group-count {
  color: #6b7280;
  font-size: 0.82em;
  background: #eef0f3;
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 4px;
}
.buildings-area-group-item .buildings-list-reorder {
  flex-direction: row;
}
.buildings-area-group-item.is-pseudo {
  background: #fff5e6;
  border-color: #f3c884;
  font-style: italic;
}
.buildings-area-group-item.is-pseudo .buildings-area-group-name {
  color: #92400e;
}

/* ===== Scheduled discount changes (Unit/Floor → Schedule tab) ===== */
.unit-floor-table.discount-schedule-table td.discount-schedule-tenant-cell {
  white-space: normal;
  width: 264px;
  min-width: 264px;
  max-width: 264px;
  vertical-align: middle;
  padding-right: 32px;
  box-sizing: border-box;
}
.discount-schedule-tenant-text {
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.discount-schedule-current-cell {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
/* Center the number/changes columns (header + the cells that hold the values).
   `.unit-floor-table td` sets text-align:left at specificity (0,1,1), which
   beats a lone class, so qualify these with the table + td to actually win. */
.unit-floor-table.discount-schedule-table thead th:nth-child(4),
.unit-floor-table.discount-schedule-table thead th:nth-child(5),
.unit-floor-table.discount-schedule-table thead th:nth-child(6),
.unit-floor-table.discount-schedule-table thead th:nth-child(7),
.unit-floor-table.discount-schedule-table thead th:nth-child(9),
.unit-floor-table.discount-schedule-table td.discount-schedule-current-cell,
.unit-floor-table.discount-schedule-table td.discount-schedule-chips-cell {
  text-align: center;
}
/* Floor / Unit reuse the Units table input-box look but are display-only on
   the Schedule tab, so suppress the editable hover/focus affordance. */
.discount-schedule-table .unit-floor-cell-input[readonly] {
  cursor: default;
}
.discount-schedule-table .unit-floor-cell-input[readonly]:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(21, 50, 67, 0.14);
}
.discount-schedule-empty {
  color: #9aa3af;
  font-style: italic;
}
.discount-schedule-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef3ff;
  color: #1c3d8f;
  border: 1px solid #c7d6ff;
  border-radius: 12px;
  padding: 1px 4px 1px 8px;
  margin: 1px 3px 1px 0;
  font-size: inherit;
  white-space: nowrap;
}

/* Units-tab "Scheduled changes" column: the pending discount change
   (month → new value). Centered + sized like the Schedule tab's column.
   Selector carries the table class so it beats .unit-floor-table th/td. */
.unit-floor-table th.unit-floor-schedule-head,
.unit-floor-table td.unit-floor-schedule-cell {
  text-align: center;
  width: 140px;
}
.unit-floor-table td.unit-floor-schedule-cell {
  white-space: normal;
}
.unit-floor-discount-schedule-note {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #eef3ff;
  color: #1c3d8f;
  border: 1px solid #c7d6ff;
  border-radius: 10px;
  padding: 1px 7px;
  margin: 1px 2px 1px 0;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
}
.unit-floor-schedule-empty {
  color: #9aa4ad;
}
.discount-schedule-chip-remove {
  background: transparent;
  border: none;
  color: #1c3d8f;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
  padding: 0 2px;
}
.discount-schedule-chip-remove:hover {
  color: #c0392b;
}
.discount-schedule-add-form {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
}
.discount-schedule-month-select,
.discount-schedule-value-input {
  padding: 3px 6px;
  font-size: 0.88em;
  border: 1px solid #cdd3da;
  border-radius: 4px;
}
.discount-schedule-value-input {
  width: 78px;
  -moz-appearance: textfield;
}
.discount-schedule-value-input::-webkit-outer-spin-button,
.discount-schedule-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.discount-schedule-submit {
  padding: 3px 10px;
  font-size: 0.85em;
  background: #2c6cf0;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.discount-schedule-submit:hover {
  background: #1f53c0;
}


/* ===== Page print button + print layout (Due / Vacant) ===== */
.page-print-btn {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid rgba(21, 50, 67, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.page-print-btn:hover {
  background: #fff;
  border-color: rgba(201, 108, 58, 0.4);
}

/* Month tabs on the left, Print button pinned to the right, on one row. */
.due-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.due-tabs-row .month-tabs {
  margin: 0;
  flex: 1 1 auto;
}
.due-tabs-row .page-print-btn {
  align-self: center;
  margin-left: auto;
  flex: 0 0 auto;
}
/* Excel sits right next to Print (Excel-green), not pushed apart by auto
   margin — only the row's own small gap separates them. */
.due-tabs-row .due-xlsx-btn {
  margin-left: 0;
}
.due-xlsx-btn {
  background: #1f7a44;
  border-color: #1f7a44;
  color: #fff;
}
.due-xlsx-btn:hover {
  background: #1a6a3b;
  border-color: #1a6a3b;
  color: #fff;
}

@page {
  margin: 10mm;
}

@media print {
  /* Print only the page content, stacked, with every building on its own row. */
  .sidebar,
  [data-sidebar],
  .menu-toggle,
  .page-print-btn,
  .month-tabs {
    display: none !important;
  }
  .app-shell { display: block !important; }
  .content-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .due-building-grid,
  .vacant-building-grid { display: block !important; }
  .due-building-card,
  .vacant-building-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    margin-bottom: 10px;
  }
  .due-building-table-wrap,
  .vacant-building-table-wrap { overflow: visible !important; }
  .due-building-table,
  .vacant-building-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Compact print: smaller text and tighter gaps so more fits per page. */
  .due-redesign-panel,
  .vacant-redesign-panel { gap: 5px !important; }
  .due-redesign-panel .panel-header h3,
  .vacant-redesign-panel .panel-header h3 { font-size: 0.95rem !important; }
  .due-redesign-panel .subtitle,
  .vacant-redesign-panel .subtitle { font-size: 0.58rem !important; }
  .due-summary-strip,
  .vacant-summary-strip { gap: 4px !important; margin: 0 !important; }
  .due-summary-chip,
  .vacant-summary-chip { padding: 4px 6px !important; min-width: 0 !important; border-radius: 7px !important; }
  .due-summary-chip strong,
  .vacant-summary-chip strong { font-size: 0.72rem !important; }
  .due-summary-chip span,
  .vacant-summary-chip span { font-size: 0.55rem !important; margin-top: 0 !important; }
  .due-building-card,
  .vacant-building-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 5px 6px !important;
    margin-bottom: 5px !important;
  }
  .due-building-card-header,
  .vacant-building-card-header { margin-bottom: 3px !important; gap: 6px !important; }
  .due-building-card-header h4,
  .vacant-building-card-header h4 { font-size: 0.74rem !important; }
  .due-building-card-header p,
  .vacant-building-card-header p { font-size: 0.56rem !important; margin-top: 1px !important; }
  .due-badge,
  .vacant-badge { padding: 2px 5px !important; font-size: 0.52rem !important; }
  .due-building-table th,
  .due-building-table td,
  .vacant-building-table th,
  .vacant-building-table td { padding: 2px 5px !important; font-size: 0.58rem !important; }
  .due-building-table thead th,
  .vacant-building-table thead th { font-size: 0.5rem !important; }
}

/* ===== Analytics page ===== */
.analytics-panel .panel-heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.analytics-kpis {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .analytics-kpis {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.analytics-kpi {
  padding: 5px 10px 6px;
  gap: 1px;
}

.analytics-kpi small {
  font-size: 0.6rem;
  letter-spacing: 0.03em;
}

.analytics-kpi strong {
  font-size: 1rem;
  line-height: 1.15;
}

.analytics-delta {
  font-size: 0.66rem;
  margin-top: 1px;
}

.analytics-kpi {
  border-top: 3px solid var(--analytics-accent, #2a78d6);
}

.analytics-delta {
  display: block;
  margin-top: 4px;
  font-size: 0.74rem;
  font-weight: 600;
}

.analytics-delta.good { color: #006300; }
.analytics-delta.bad { color: #d03b3b; }
.analytics-delta.flat { color: #898781; }

.analytics-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

@media (max-width: 860px) {
  .analytics-chart-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.analytics-chart-card {
  background: #fcfcfb;
  border: 1px solid rgba(11, 11, 11, 0.10);
  border-radius: 10px;
  padding: 12px 14px;
}

.analytics-chart-card h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: #52514e;
  display: flex;
  align-items: center;
  gap: 7px;
}

.analytics-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.analytics-wide {
  margin-top: 14px;
}

.analytics-line-chart {
  width: 100%;
  height: auto;
  display: block;
}

.analytics-grid {
  stroke: #e1e0d9;
  stroke-width: 1;
}

.analytics-axis-label {
  fill: #898781;
  font-size: 10px;
}

.analytics-point-label {
  fill: #52514e;
  font-size: 10px;
  font-weight: 600;
}

.analytics-hit { cursor: pointer; }

.analytics-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: 170px 1fr 110px;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
}

.analytics-bar-name {
  color: #52514e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.analytics-bar-track {
  display: block;
  height: 18px;
  background: transparent;
}

.analytics-bar-fill {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  min-width: 3px;
}

.analytics-bar-value {
  text-align: right;
  color: #0b0b0b;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.analytics-empty {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 8px 0;
}

.analytics-tooltip {
  position: fixed;
  z-index: 9999;
  background: #0b0b0b;
  color: #ffffff;
  font-size: 0.75rem;
  padding: 5px 9px;
  border-radius: 6px;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (max-width: 720px) {
  .analytics-bar-row {
    grid-template-columns: 110px 1fr 90px;
  }
}

.analytics-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.analytics-building-picker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #52514e;
  white-space: nowrap;
}

.analytics-building-picker select {
  min-width: 190px;
  max-width: 280px;
  padding: 5px 8px;
  border: 1px solid rgba(11, 11, 11, 0.18);
  border-radius: 7px;
  font-size: 0.8rem;
  background: #fcfcfb;
}

.analytics-building-line .analytics-line-stroke {
  stroke: var(--line-color);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.analytics-building-line.is-context .analytics-line-stroke {
  stroke-width: 1.4;
  opacity: 0.55;
}

.analytics-building-line .analytics-line-hover {
  stroke: transparent;
  stroke-width: 10;
  cursor: pointer;
}

.analytics-building-line.is-hover .analytics-line-stroke {
  stroke-width: 3;
  opacity: 1;
}

.analytics-building-line.is-context.is-hover .analytics-line-stroke {
  stroke: #52514e;
}

.analytics-line-label {
  font-size: 10px;
  font-weight: 600;
}

.analytics-multiline-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: #898781;
}

.analytics-metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1000px) {
  .analytics-metric-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The ranking card fills its row: bars distribute over the full height so
   there is never a dead gap under a short list. */
.analytics-metric-row .analytics-chart-card {
  display: flex;
  flex-direction: column;
}

.analytics-metric-row .analytics-bars {
  flex: 1;
  justify-content: space-between;
}

/* Analytics: the cool white "office" theme, matching Tenant Database. */
body[data-page="analytics"] {
  background: #eef1f3;
}

body[data-page="analytics"] .analytics-panel {
  background: #f8fafb;
  border-radius: 10px;
  border: 1px solid rgba(73, 88, 98, 0.18);
  box-shadow: 0 8px 20px rgba(25, 42, 54, 0.06);
}

body[data-page="analytics"] .dashboard-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(73, 88, 98, 0.16);
  border-top: 3px solid var(--analytics-accent, #2a78d6);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(25, 42, 54, 0.05);
}

body[data-page="analytics"] .dashboard-kpi-card small {
  color: #52616b;
}

body[data-page="analytics"] .analytics-chart-card {
  background: #ffffff;
  border-color: rgba(73, 88, 98, 0.16);
}

.analytics-crosshair {
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0.65;
  pointer-events: none;
}

.analytics-crosshair-dot {
  pointer-events: none;
}

/* Administration collapsible sidebar group (Backup / Audit Log / Admin). */
.nav-group-toggle {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.nav-group-caret {
  margin-left: auto;
  font-size: 0.72rem;
  opacity: 0.8;
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The class display must not defeat the hidden attribute — this is what
   collapses the group. */
.nav-group-items[hidden] {
  display: none;
}

.nav-sub-link {
  padding-left: 26px;
  font-size: 0.92em;
}

.nav-sub-icon {
  opacity: 0.7;
}