@layer components {
  .info-grid {
    display: grid;
    gap: var(--inline-space);
  }

  .info-item {
    display: flex;
    gap: var(--inline-space-half);
    align-items: center;
  }

  .info-item strong {
    color: var(--color-ink-darker);
    font-weight: 600;
  }

  .info-item span {
    color: var(--color-ink-medium);
  }

  .customer {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-double);
  }

  .customer__info {
    margin-bottom: var(--block-space);
  }

  .customer__loans {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--block-space);
  }

  .section-header h2 {
    margin: 0;
    font-size: var(--text-medium);
    font-weight: 600;
  }

  .loans-list {
    display: grid;
    gap: var(--block-space);
  }

  .loan-summary {
    padding: var(--block-space);
  }

  .form-container {
    max-width: 600px;
    margin: 0 auto;
  }

  .payment {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .event--loan,
  .event--payment,
  .event--person {
    --card-color: var(--color-selected);
    padding: var(--block-space);
    border-left: 4px solid var(--color-selected);
  }

  .event--loan {
    --card-color: var(--color-blue-dark);
    border-left-color: var(--color-blue-dark);
  }

  .event--payment {
    --card-color: var(--color-green-dark);
    border-left-color: var(--color-green-dark);
  }

  .event--person {
    --card-color: var(--color-aqua-dark);
    border-left-color: var(--color-aqua-dark);
  }

  .dialog__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--block-space);
  }

  .dialog__title {
    margin: 0;
    font-size: var(--text-medium);
    font-weight: 600;
  }

  .dialog__body {
    padding: var(--block-space);
  }

  .step-indicator {
    display: block;
    margin-bottom: var(--block-space);
    padding: var(--inline-space);
    background: var(--color-selected-light);
    border-radius: var(--btn-border-radius);
    color: var(--color-ink-darker);
    font-weight: 600;
    text-align: center;
  }

  .collateral-fields {
    border: 2px dashed var(--color-ink-lighter);
    border-radius: var(--btn-border-radius);
    padding: var(--block-space);
    margin-top: var(--block-space);
    background: var(--color-canvas);
  }

  .collateral-fields::before {
    content: "Collateral Items";
    display: block;
    margin-bottom: var(--block-space-half);
    font-weight: 600;
    color: var(--color-ink-dark);
  }

  .form__field-group {
    display: flex;
    gap: var(--inline-space);
  }

  .form__field-group .form__field {
    flex: 1;
  }
}