/* Household requests module (lib/household-approvals.js), mounted on the Registry page. */
.hh-req { margin: 0 0 var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border, #d9d4c7); border-radius: var(--radius-md, 8px); background: var(--color-surface, #fff); overflow-x: auto; }
.hh-req__title { font-size: var(--font-size-lg, 1.125rem); margin: 0 0 var(--space-1); }
.hh-req__actions { white-space: nowrap; }
.status-pill { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.status-pill--pending { background: #FEF3C7; color: #92400E; }
.status-pill--approved { background: #DCFCE7; color: #116830; }
.status-pill--rejected { background: #FEE2E2; color: #B91C1C; }

/* Under 768px each request is a stacked card: household, address, status, requested date, then the actions. */
@media (max-width: 767px) {
  .hh-req { overflow-x: visible; }
  #hhReqTable, #hhReqTable tbody, #hhReqTable tr, #hhReqTable td { display: block; width: 100%; }
  #hhReqTable[hidden] { display: none; }
  #hhReqTable thead { display: none; }
  #hhReqTable tr { padding: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--color-border, #d9d4c7); border-radius: var(--radius-sm, 6px); background: var(--color-bg, #fff); }
  #hhReqTable td { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  #hhReqTable td[data-label]::before { content: attr(data-label); flex: none; color: var(--color-text-secondary, #5B544A); font-size: var(--font-size-sm, .875rem); text-align: left; }
  #hhReqTable td.hh-req__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); white-space: normal; padding-top: var(--space-2); }
  #hhReqTable td.hh-req__actions:empty { display: none; }
  #hhReqTable td.hh-req__actions .btn { flex: 1 1 140px; min-height: 44px; }
}

/* Today summary block (mountSummary). While it shows, the "Nothing is waiting" line must not. */
.hh-sum { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border, #d9d4c7); border-left: 6px solid #B45309; border-radius: var(--radius-sm, 6px); background: #FFFBEB; }
.hh-sum__text { margin: 0; }
.hh-sum .btn { text-decoration: none; }
body.hh-summary-on #todayEmpty { display: none !important; }