.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;
}
.residents-page .resident-share { margin-top: 10px; text-align: left; }
.residents-page .resident-share-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.residents-page .resident-share-button,
.residents-page .resident-share-chat,
.residents-page .resident-share-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--resident-paid-edge); background: var(--resident-field); color: var(--resident-paid-ink);
}
.residents-page .resident-share-button:hover:not(:disabled) { background: var(--resident-paid-fill); }
.residents-page .resident-share-button:disabled { opacity: .65; cursor: default; }
.residents-page .resident-share-button:focus-visible,
.residents-page .resident-share-chat:focus-visible { outline: 2px solid var(--resident-paid-ink); outline-offset: 2px; }
.residents-page .resident-share-chat { border-color: transparent; padding: 6px; }
.residents-page .resident-share-status { display: block; margin-top: 4px; font-size: 11px; color: var(--resident-paid-ink); }
.residents-page .resident-share-notice { position: relative; margin-top: 8px; max-width: 420px; padding: 12px 32px 12px 12px; border: 1px solid var(--resident-edge); border-radius: 10px; background: var(--resident-field); color: var(--resident-ink); font-size: 12px; line-height: 1.5; }
.residents-page .resident-share-notice p { margin: 0 0 8px; }
.residents-page .resident-share-notice pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 8px 0; user-select: text; }
.residents-page .resident-share-notice summary { cursor: pointer; }
.residents-page .resident-share-dismiss { position: absolute; right: 4px; top: 4px; padding: 5px; color: var(--resident-ink); }
.residents-page .resident-share-copy { margin-top: 8px; }
@media (max-width: 767px) {
  .residents-page .resident-share-button, .residents-page .resident-share-chat { min-height: 44px; }
}
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 > button {
  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;
  min-height: 36px;
  cursor: pointer;
  transition: box-shadow 150ms, border-color 150ms;
}
.residents-page .resident-payment-legend > button:hover {
  border-color: var(--resident-status-ink, var(--resident-ink));
}
.residents-page .resident-payment-legend > button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px currentColor;
  border-color: currentColor;
  font-weight: 600;
}
.residents-page .resident-payment-legend > button:focus-visible,
.residents-page .resident-payment-filter-result > button:focus-visible {
  outline: 2px solid var(--resident-status-ink, var(--resident-ink));
  outline-offset: 3px;
}
.residents-page .resident-payment-filter-result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--resident-ink);
}
.residents-page .resident-payment-filter-result > button {
  min-height: 36px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.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; }
  .residents-page .resident-payment-legend > button,
  .residents-page .resident-payment-filter-result > button { min-height: 44px; }
}