.residents-page {
  --resident-field: #fff;
  --resident-ink: #374151;
  --resident-edge: #d1d5db;
  --resident-neutral: #f3f4f6;
  --resident-paid-fill: #ecfdf3;
  --resident-paid-ink: #166534;
  --resident-paid-edge: #86cfa0;
  --resident-calculated-fill: #fff9db;
  --resident-calculated-ink: #79520b;
  --resident-calculated-edge: #d5ad35;
  --resident-partial-fill: #fff0e3;
  --resident-partial-ink: #9a3412;
  --resident-partial-edge: #e99b63;
}
html.dark .residents-page,
html.crm-glass .residents-page {
  --resident-field: var(--dk-input-opaque, #182432);
  --resident-ink: var(--dk-text-primary, #edf5fa);
  --resident-edge: var(--dk-border-strong, #506275);
  --resident-neutral: var(--dk-surface-3, #283746);
  --resident-paid-fill: #25443c;
  --resident-paid-ink: #a5efcd;
  --resident-paid-edge: #559c7e;
  --resident-calculated-fill: #45422b;
  --resident-calculated-ink: #ffe3a1;
  --resident-calculated-edge: #a18c49;
  --resident-partial-fill: #4c382e;
  --resident-partial-ink: #ffc69f;
  --resident-partial-edge: #ba8058;
}
html.crm-violet:not(.dark) .residents-page {
  --resident-field: var(--slate-card-solid, #fff);
  --resident-ink: var(--slate-ink, #263245);
  --resident-edge: var(--slate-edge, #dfe5ef);
  --resident-neutral: var(--slate-field, #f3f6fb);
  --resident-paid-fill: var(--violet-success-fill, #e5f6ef);
  --resident-paid-ink: #08765b;
  --resident-paid-edge: #8ccbb5;
  --resident-calculated-fill: var(--violet-warning-fill, #fff5df);
  --resident-calculated-ink: #80550c;
  --resident-calculated-edge: #d7b866;
  --resident-partial-fill: #fff0e3;
  --resident-partial-ink: #9a3412;
  --resident-partial-edge: #e99b63;
}
.residents-page [data-payment-status="paid"] {
  --resident-status-fill: var(--resident-paid-fill);
  --resident-status-ink: var(--resident-paid-ink);
  --resident-status-edge: var(--resident-paid-edge);
}
.residents-page [data-payment-status="calculated"] {
  --resident-status-fill: var(--resident-calculated-fill);
  --resident-status-ink: var(--resident-calculated-ink);
  --resident-status-edge: var(--resident-calculated-edge);
}
.residents-page [data-payment-status="partial"] {
  --resident-status-fill: var(--resident-partial-fill);
  --resident-status-ink: var(--resident-partial-ink);
  --resident-status-edge: var(--resident-partial-edge);
}
.residents-page .resident-payment-row[data-payment-status]:not([data-payment-status="unmarked"]) {
  background: var(--resident-status-fill) !important;
}
.residents-page .resident-payment-row.resident-payment-dirty { box-shadow: inset 3px 0 #60a5fa; }
.residents-page .resident-payment-select {
  max-width: 100%;
  width: 218px;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--resident-status-edge, var(--resident-edge)) !important;
  border-radius: 8px;
  background: var(--resident-field) !important;
  color: var(--resident-status-ink, var(--resident-ink)) !important;
  font-size: 12px;
  font-weight: 500;
}
.residents-page .resident-payment-select:focus-visible {
  outline: 2px solid var(--resident-status-edge, #60a5fa);
  outline-offset: 2px;
}
.residents-page .resident-payment-select option {
  background: var(--resident-field);
  color: var(--resident-ink);
}
.resident-payment-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12px; }
.residents-page .resident-payment-legend > span {
  border: 1px solid var(--resident-status-edge, var(--resident-edge));
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--resident-status-fill, var(--resident-neutral)) !important;
  color: var(--resident-status-ink, var(--resident-ink)) !important;
}
.residents-page .resident-payment-notice {
  margin: 0 0 16px;
  color: var(--resident-partial-ink) !important;
  font-size: 12px;
  line-height: 1.5;
}
/* Explicit breakpoints keep the table and cards visible with retained release CSS. */
.residents-page .resident-desktop-table,
.residents-page .resident-desktop-search { display: none !important; }
.residents-page .resident-mobile-list { display: block !important; }
.residents-page .resident-mobile-only { display: flex !important; }
@media (min-width: 768px) {
  .residents-page .resident-desktop-table,
  .residents-page .resident-desktop-search { display: block !important; }
  .residents-page .resident-mobile-list,
  .residents-page .resident-mobile-only { display: none !important; }
  .residents-page .resident-summary { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .residents-page .resident-summary { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .residents-page .resident-payment-select { min-height: 44px; }
  .resident-payment-legend { gap: 6px; }
}