/* ============================================================
   Restitution (participant payment schedule + history) page.
   Structure in @layer layout, paint in @layer design. Content-named
   classes only — no legacy/appearance names, no hardcoded color.
   Reuses .app-screen and .btn/.btn--primary/.btn--outline from
   elements.css. See docs/FRONTEND-ARCHITECTURE.md.
   ============================================================ */

@layer layout {
  .restitution__intro { display: grid; gap: var(--mea-space-1); }

  /* Cards / sections share a common block rhythm. */
  .balance, .payment-action, .schedule, .history, .restitution-empty {
    display: grid; gap: var(--mea-space-4);
    padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl);
  }

  /* Balance summary: three figures side by side, stacking when cramped. */
  .balance__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mea-space-3); margin: 0; }
  .balance__item { display: grid; gap: var(--mea-space-1); align-content: start; }
  .balance__amount { margin: 0; }
  .balance__note, .balance__label { margin: 0; }
  @container (max-width: 28rem) { .balance__figures { grid-template-columns: 1fr; } }

  .payment-action { justify-items: center; text-align: center; }
  .payment-action__note { margin: 0; }

  /* Schedule table: full-width, readable rows. */
  .schedule__table { inline-size: 100%; border-collapse: collapse; }
  .schedule__table th, .schedule__table td {
    padding: var(--mea-space-3) var(--mea-space-4); text-align: start;
  }

  .payment-status { display: inline-flex; align-items: center; gap: var(--mea-space-1);
                    padding: var(--mea-space-1) var(--mea-space-3); border-radius: var(--mea-radius-pill);
                    white-space: nowrap; }

  /* Payment history: one row per paid item. */
  .history__list { display: grid; gap: var(--mea-space-3); margin: 0; padding: 0; list-style: none; }
  .history__entry { display: grid; grid-template-columns: 1fr auto; gap: var(--mea-space-3);
                    align-items: center; padding-block: var(--mea-space-2); }
  .history__details { display: grid; gap: var(--mea-space-1); }
  .history__amount, .history__meta { margin: 0; }
  .history__check { display: inline-flex; align-items: center; justify-content: center;
                    inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--mea-radius-circle); }

  .restitution-empty { justify-items: center; text-align: center; gap: var(--mea-space-3);
                       padding-block: var(--mea-space-8); }
  .restitution-empty__icon, .restitution-empty__message { margin: 0; }

  /* Payment dialog — fixed overlay centring a constrained card. */
  .payment-dialog-overlay { position: fixed; inset: 0; display: grid; place-items: center;
                            padding: var(--mea-space-4); z-index: var(--mea-z-modal); }
  .payment-dialog { inline-size: 100%; max-inline-size: 27.5rem; display: grid;
                    border-radius: var(--mea-radius-2xl); overflow: hidden; }
  .payment-dialog__header { display: flex; align-items: center; justify-content: space-between;
                            gap: var(--mea-space-3); padding: var(--mea-space-4) var(--mea-space-5); }
  .payment-dialog__title { margin: 0; }
  .payment-dialog__close { display: inline-flex; align-items: center; justify-content: center;
                           inline-size: 2rem; block-size: 2rem; padding: 0; border: 0;
                           border-radius: var(--mea-radius-circle); cursor: pointer; }
  .payment-dialog__body { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); }
  .field { display: grid; gap: var(--mea-space-2); }
  .field__input { inline-size: 100%; min-height: var(--t-target-min, 44px);
                  padding: var(--mea-space-3); border-radius: var(--mea-radius-md); }
  .payment-dialog__hint, .payment-dialog__error { margin: 0; }
  .payment-dialog__actions { display: flex; justify-content: flex-end; gap: var(--mea-space-3);
                             margin-block-start: var(--mea-space-2); }
}

@layer design {
  .restitution__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                        font-weight: var(--mea-w-bold); color: var(--t-text); }
  .restitution__subtitle { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .balance, .payment-action, .schedule, .history, .restitution-empty {
    background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-sm);
  }

  .balance__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text-muted); }
  .balance__amount { font-size: var(--mea-text-2xl); font-weight: var(--mea-w-extrabold);
                     line-height: var(--mea-lh-tight); color: var(--t-text); }
  .balance__amount--paid { color: var(--t-success); }
  .balance__amount--owed { color: var(--t-warning); }
  .balance__note { font-size: var(--mea-text-xs); color: var(--t-text-muted); }

  .payment-action__note { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  .schedule__title, .history__title {
    font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
    font-weight: var(--mea-w-bold); color: var(--t-text);
  }
  .schedule__table { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .schedule__table th { font-weight: var(--mea-w-semibold); color: var(--t-text-muted); }
  .schedule__table tbody tr + tr { border-block-start: 1px solid var(--t-border); }
  .schedule__amount { font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .schedule__method { color: var(--t-text-muted); }

  .payment-status { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); }
  .payment-status--paid { background: var(--t-bg-recessed); color: var(--t-success-text); }
  .payment-status--due { background: var(--t-bg-recessed); color: var(--t-accent); }
  .payment-status--overdue { background: var(--t-bg-recessed); color: var(--t-error-text); }

  .history__amount { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .history__meta { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .history__check { background: var(--t-success); color: var(--t-accent-text);
                    font-size: var(--mea-text-sm); font-weight: var(--mea-w-bold); }

  .restitution-empty__icon { font-size: var(--mea-text-hero); line-height: 1; }
  .restitution-empty__message { font-size: var(--mea-text-md); color: var(--t-text-secondary); }

  .payment-dialog-overlay { background: var(--t-bg-active); }
  .payment-dialog { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                    box-shadow: var(--mea-shadow-lg); }
  .payment-dialog__header { border-block-end: 1px solid var(--t-border); }
  .payment-dialog__title { font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
                           font-weight: var(--mea-w-bold); color: var(--t-text); }
  .payment-dialog__close { background: transparent; color: var(--t-text-muted);
                           font-size: var(--mea-text-xl); line-height: 1; }
  .payment-dialog__close:hover { color: var(--t-text); }

  .field__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); color: var(--t-text); }
  .field__input { background: var(--t-bg-elevated); color: var(--t-text);
                  border: 1px solid var(--t-border); font-size: var(--mea-text-md); }
  .field__input:focus { outline: none; border-color: var(--t-border-focus); }

  .payment-dialog__hint { font-size: var(--mea-text-sm); color: var(--t-text-muted); }
  .payment-dialog__error { font-size: var(--mea-text-sm); color: var(--t-error-text); }
}