/* =====================================================================
 * HOMECARE — Billing & Statement (M05 PART 02)
 * ---------------------------------------------------------------------
 * Mobile-first presentation for #/my-unit/billing: current statement
 * hero (period, status, total due, safe Pay-now placeholder), the
 * charge breakdown (IPL, electricity/water meter-reading blocks, other
 * charges, adjustments, totals), the statement history rows and the
 * in-page statement detail. Also styles the Billing entry card rendered
 * inside My Unit (kept here so styles/my-unit.css stays untouched).
 * Token-only styling, 44px touch targets where interactive, long
 * values wrap (overflow-wrap), no horizontal overflow, small-screen
 * compaction.
 * =================================================================== */

.hc-billing-page {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-4);
  padding-bottom: var(--hc-space-6);
}

/* ---- Page heading --------------------------------------------------- */

.hc-billing-heading h2 {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-2xl);
  font-weight: var(--hc-font-weight-bold);
  letter-spacing: var(--hc-letter-tight);
}

.hc-billing-heading p {
  margin-top: var(--hc-space-1);
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

/* ---- Context hero (matches the My Unit / Asset Passport pattern) ----- */

.hc-billing-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hc-space-3);
  padding: var(--hc-space-4);
  background: var(--hc-bg-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-sm);
}

.hc-billing-hero__main {
  min-width: 0;
}

.hc-billing-hero__eyebrow {
  color: var(--hc-text-faint);
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hc-billing-hero__property {
  margin-top: var(--hc-space-1);
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-billing-hero__location {
  margin-top: 2px;
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

.hc-billing-hero__note {
  display: flex;
  align-items: flex-start;
  gap: var(--hc-space-2);
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

.hc-billing-hero__note-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- My Unit entry card (rendered inside My Unit) -------------------- */

.hc-billing-entry {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  min-height: var(--hc-touch-target, 44px);
  padding: var(--hc-space-3) var(--hc-space-4);
  background: var(--hc-bg-surface);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-lg);
  box-shadow: var(--hc-shadow-sm);
  text-decoration: none;
  color: inherit;
}

.hc-billing-entry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--hc-radius-md);
  background: var(--hc-primary-50, var(--hc-bg-muted));
  color: var(--hc-primary-600, var(--hc-text-muted));
}

.hc-billing-entry__icon .hc-icon {
  width: 20px;
  height: 20px;
}

.hc-billing-entry__main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hc-billing-entry__title {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
}

.hc-billing-entry__text {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
  overflow-wrap: anywhere;
}

.hc-billing-entry__chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--hc-text-faint);
}

/* ---- Sections -------------------------------------------------------- */

.hc-billing-section {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
}

.hc-billing-region {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
}

/* ---- Current statement hero card ------------------------------------- */

.hc-billing-current {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-4);
}

.hc-billing-current__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hc-space-3);
}

.hc-billing-current__main {
  min-width: 0;
}

.hc-billing-current__eyebrow {
  color: var(--hc-text-faint);
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hc-billing-current__period {
  margin-top: var(--hc-space-1);
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-xl);
  font-weight: var(--hc-font-weight-bold);
  overflow-wrap: anywhere;
}

.hc-billing-current__dates {
  margin-top: 2px;
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

.hc-billing-current__due {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-1);
  padding: var(--hc-space-4);
  border-radius: var(--hc-radius-md);
  background: var(--hc-navy-800);
  color: var(--hc-text-inverse);
}

.hc-billing-current__due-label {
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.hc-billing-current__due-amount {
  font-size: var(--hc-font-size-2xl);
  font-weight: var(--hc-font-weight-bold);
  letter-spacing: var(--hc-letter-tight);
  overflow-wrap: anywhere;
}

.hc-billing-current__due-date {
  font-size: var(--hc-font-size-sm);
  opacity: 0.85;
}

.hc-billing-current__pay {
  margin-top: var(--hc-space-3);
  min-height: var(--hc-touch-target, 44px);
}

.hc-billing-current__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--hc-space-3);
  margin: 0;
}

.hc-billing-fact {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hc-billing-fact dt {
  color: var(--hc-text-faint);
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hc-billing-fact dd {
  margin: 0;
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

/* ---- Charge breakdown ------------------------------------------------ */

.hc-billing-card-title {
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-base);
  font-weight: var(--hc-font-weight-bold);
}

.hc-billing-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
}

.hc-billing-charges {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
}

.hc-billing-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hc-space-3);
  min-width: 0;
}

.hc-billing-row__main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hc-billing-row__label {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-billing-row__note {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
  overflow-wrap: anywhere;
}

.hc-billing-row__amount {
  flex-shrink: 0;
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* Utility meter-reading block (electricity / water) */

.hc-billing-utility {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
  padding: var(--hc-space-3);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  background: var(--hc-bg-muted, var(--hc-bg-surface));
}

.hc-billing-utility__head {
  display: flex;
  align-items: center;
  gap: var(--hc-space-2);
}

.hc-billing-utility__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--hc-radius-md);
  background: var(--hc-bg-surface);
  border: 1px solid var(--hc-border);
  color: var(--hc-primary-600, var(--hc-text-muted));
}

.hc-billing-utility__name {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  min-width: 0;
  flex: 1;
}

.hc-billing-utility__amount {
  flex-shrink: 0;
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.hc-billing-utility__reads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--hc-space-2) var(--hc-space-3);
  margin: 0;
}

.hc-billing-utility__read {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hc-billing-utility__read dt {
  color: var(--hc-text-faint);
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hc-billing-utility__read dd {
  margin: 0;
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Totals ladder */

.hc-billing-totals {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
  margin: 0;
  padding-top: var(--hc-space-3);
  border-top: 1px solid var(--hc-border);
}

.hc-billing-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hc-space-3);
}

.hc-billing-total dt {
  color: var(--hc-text-muted);
  min-width: 0;
  overflow-wrap: anywhere;
}

.hc-billing-total dd {
  margin: 0;
  flex-shrink: 0;
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.hc-billing-total--due {
  padding: var(--hc-space-2) 0;
}

.hc-billing-total--due dt,
.hc-billing-total--due dd {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-bold);
  font-size: var(--hc-font-size-base);
}

.hc-billing-note {
  margin: 0;
}

/* ---- Statement history ----------------------------------------------- */

.hc-billing-history {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-1);
  margin: 0;
  padding: var(--hc-space-2);
  list-style: none;
}

.hc-billing-history__item {
  display: flex;
  align-items: center;
  gap: var(--hc-space-3);
  width: 100%;
  min-height: var(--hc-touch-target, 44px);
  padding: var(--hc-space-3);
  background: transparent;
  border: none;
  border-radius: var(--hc-radius-md);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.hc-billing-history__item:hover {
  background: var(--hc-bg-muted, rgba(13, 46, 84, 0.04));
}

.hc-billing-history__item:focus-visible {
  outline: 2px solid var(--hc-focus, var(--hc-primary-600));
  outline-offset: 2px;
}

.hc-billing-history__main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hc-billing-history__period {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-billing-history__meta {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

.hc-billing-history__side {
  display: flex;
  align-items: flex-end;
  gap: var(--hc-space-2);
  flex-shrink: 0;
}

.hc-billing-history__amount {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.hc-billing-history__chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--hc-text-faint);
}

/* ---- In-page statement detail ---------------------------------------- */

.hc-billing-detail {
  gap: var(--hc-space-3);
}

.hc-billing-back {
  align-self: flex-start;
  min-height: var(--hc-touch-target, 44px);
}

/* ---- M06 PART 02 — mock Pay Now flow (modal/sheet) ------------------- */

.hc-payment-flow {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
  min-width: 0;
}

.hc-payment-step,
.hc-payment-error-card {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-3);
  min-width: 0;
}

.hc-payment-step__title {
  margin: 0;
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-base);
  font-weight: var(--hc-font-weight-bold);
}

.hc-payment-step__hint,
.hc-payment-amount__hint {
  margin: 0;
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
}

.hc-payment-methods {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.hc-payment-method-list {
  display: flex;
  flex-direction: column;
  gap: var(--hc-space-2);
  min-width: 0;
}

.hc-payment-method {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--hc-space-3);
  min-height: var(--hc-touch-target, 44px);
  min-width: 0;
  padding: var(--hc-space-3);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  background: var(--hc-bg-surface);
  cursor: pointer;
}

.hc-payment-method:hover {
  background: var(--hc-bg-muted, rgba(13, 46, 84, 0.04));
}

.hc-payment-method:focus-within,
.hc-payment-method__input:focus-visible {
  outline: 2px solid var(--hc-focus, var(--hc-primary-600));
  outline-offset: 2px;
}

.hc-payment-method__input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.25rem;
  accent-color: var(--hc-primary-600, var(--hc-color-primary-strong));
}

.hc-payment-method__body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.hc-payment-method__label {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-payment-method__note {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-sm);
  overflow-wrap: anywhere;
}

.hc-payment-method__check {
  flex: 0 0 auto;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--hc-bg-muted, transparent);
}

.hc-payment-method__input:checked ~ .hc-payment-method__check {
  background: var(--hc-success-600, #15803d);
}

.hc-payment-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hc-space-2);
  min-width: 0;
  margin: 0;
}

.hc-payment-detail > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hc-space-3);
  min-width: 0;
}

.hc-payment-detail dt {
  color: var(--hc-text-muted);
  font-size: var(--hc-font-size-xs);
  font-weight: var(--hc-font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.hc-payment-detail dd {
  flex-shrink: 0;
  margin: 0;
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right;
}

.hc-payment-amount {
  display: grid;
  gap: var(--hc-space-1);
  min-width: 0;
}

.hc-payment-amount__label {
  color: var(--hc-text-strong);
  font-weight: var(--hc-font-weight-semibold);
}

.hc-payment-amount-row {
  display: flex;
  align-items: stretch;
  gap: var(--hc-space-2);
  min-width: 0;
}

.hc-payment-amount__input {
  min-width: 0;
  flex: 1;
  min-height: var(--hc-touch-target, 44px);
}

.hc-payment-warning {
  margin: 0;
  padding: var(--hc-space-3);
  border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  background: var(--hc-bg-muted, rgba(13, 46, 84, 0.04));
  color: var(--hc-text-base);
  font-size: var(--hc-font-size-sm);
  overflow-wrap: anywhere;
}

.hc-payment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hc-space-2);
  min-width: 0;
}

.hc-payment-action {
  min-height: var(--hc-touch-target, 44px);
}

.hc-payment-error {
  margin: 0;
  color: var(--hc-danger-600, #b42318);
  font-size: var(--hc-font-size-sm);
  font-weight: var(--hc-font-weight-semibold);
  overflow-wrap: anywhere;
}

.hc-payment-error-card {
  padding: var(--hc-space-4);
  border: 1px solid var(--hc-danger-border, rgba(180, 35, 24, 0.35));
  border-radius: var(--hc-radius-md);
  background: var(--hc-danger-50, rgba(180, 35, 24, 0.06));
}

.hc-payment-error-card__title {
  margin: 0;
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-base);
  font-weight: var(--hc-font-weight-bold);
}

.hc-payment-error-card__message {
  margin: 0;
  color: var(--hc-text-base);
}

.hc-payment-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hc-space-3);
  min-width: 0;
  text-align: center;
}

.hc-payment-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--hc-success-50, rgba(21, 128, 61, 0.1));
  color: var(--hc-success-600, #15803d);
}

.hc-payment-success__icon .hc-icon {
  width: 28px;
  height: 28px;
}

.hc-payment-success__title {
  margin: 0;
  color: var(--hc-text-strong);
  font-size: var(--hc-font-size-lg);
  font-weight: var(--hc-font-weight-bold);
}

.hc-payment-success__lead {
  margin: 0;
  color: var(--hc-text-muted);
  overflow-wrap: anywhere;
}

.hc-payment-success .hc-payment-detail {
  width: 100%;
}

/* ---- Small-screen compaction ----------------------------------------- */

@media (max-width: 359px) {
  .hc-billing-hero,
  .hc-billing-current__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hc-billing-history__side {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hc-space-1);
  }

  .hc-billing-utility__reads {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  }

  .hc-billing-current__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .hc-payment-amount-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hc-payment-detail > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .hc-payment-detail dd {
    text-align: left;
  }

  .hc-payment-actions {
    flex-direction: column;
    align-items: stretch;
  }
}