/* =========================================================================
   ПЛАТЕЖИ (админ, /admin/payments): сводка, поиск, карточки родителей,
   список прошедших занятий со снятием с оплаты (больничный).
   ========================================================================= */
@layer sections {
  .pay-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }

  .pay-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
  .pay-search__field { position: relative; flex: 1; }
  .pay-search__field i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.8125rem; pointer-events: none; }
  .pay-search__field .form-input { padding-left: 2.5rem; }

  .pay-list { display: flex; flex-direction: column; gap: 0.75rem; }
  .pay-card { padding: 1.125rem 1.25rem; scroll-margin-top: 5rem; }
  .pay-card--debt { border-left: 4px solid var(--terracotta-deep); }
  .pay-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
  .pay-card__who strong { display: block; font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; }
  .pay-card__children { font-size: 0.84375rem; color: var(--muted); }
  .pay-badge { flex: 0 0 auto; padding: 0.25rem 0.625rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
  .pay-badge--debt { background: var(--terracotta-tint); color: var(--terracotta-deep); }
  .pay-badge--ok { background: var(--ok-soft); color: var(--ok); }

  .pay-card__stats {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 0.875rem;
  }
  .pay-card__stats > div {
    padding: 0.375rem 0.625rem; border-radius: 0.625rem;
    background: var(--paper-2);
    display: flex; flex-direction: column;
  }
  .pay-card__stats dt { font-size: 0.65625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  .pay-card__stats dd { font-size: 0.875rem; font-weight: 700; color: var(--ink); }

  .pay-card__form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .pay-card__form .pay-card__amount { flex: 0 0 9rem; }
  .pay-card__form .form-input:not(.pay-card__amount) { flex: 1 1 12rem; min-width: 0; }

  /* ── Прошедшие занятия ── */
  .pay-lessons { margin-top: 0.875rem; border-top: 1px dashed var(--paper-line); padding-top: 0.75rem; }
  .pay-lessons > summary {
    display: flex; align-items: center; gap: 0.75rem;
    cursor: pointer; list-style: none;
    font-size: 0.84375rem; font-weight: 700; color: var(--ink-2);
    padding: 0.25rem 0;
  }
  .pay-lessons > summary::-webkit-details-marker { display: none; }
  .pay-lessons > summary i:first-child { color: var(--terracotta-deep); margin-right: 0.25rem; }
  .pay-lessons__hint { font-size: 0.75rem; font-weight: 700; color: var(--lavender-deep); background: var(--lavender-soft); padding: 0.125rem 0.5rem; border-radius: 999px; }
  .pay-lessons__chev { margin-left: auto; font-size: 0.6875rem; color: var(--muted); transition: transform var(--dur) var(--ease-clay); }
  .pay-lessons[open] .pay-lessons__chev { transform: rotate(180deg); }

  .pay-lessons__form { margin-top: 0.625rem; }
  .pay-lessons__list { display: flex; flex-direction: column; gap: 0.375rem; max-height: 26rem; overflow-y: auto; padding-right: 0.125rem; }
  .pay-lesson {
    display: grid;
    grid-template-columns: 1.75rem 6rem minmax(0, 1fr) auto;
    align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--paper-2);
    border: 1px solid transparent;
  }
  .pay-lesson:has(input:checked) { border-color: var(--terracotta); background: var(--terracotta-tint); }
  .pay-lesson--excused { background: var(--lavender-soft); }
  .pay-lesson--excused .pay-lesson__what b,
  .pay-lesson--excused .pay-lesson__what span { text-decoration: line-through; text-decoration-color: rgba(126, 108, 168, 0.6); }
  .pay-lesson__check { display: grid; place-items: center; cursor: pointer; color: var(--lavender-deep); }
  .pay-lesson__check input { width: 1.125rem; height: 1.125rem; accent-color: var(--terracotta); cursor: pointer; }
  .pay-lesson__when, .pay-lesson__what { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
  .pay-lesson__when b, .pay-lesson__what b { font-size: 0.84375rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pay-lesson__when span, .pay-lesson__what span { font-size: 0.75rem; color: var(--muted); }
  .pay-lesson__state { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; }

  .pay-tag { padding: 0.1875rem 0.5rem; border-radius: 999px; font-size: 0.71875rem; font-weight: 700; white-space: nowrap; }
  .pay-tag--paid { background: var(--ok-soft); color: var(--ok); }
  .pay-tag--unpaid { background: var(--terracotta-tint); color: var(--terracotta-deep); }
  .pay-tag--excused { background: rgba(255, 255, 255, 0.7); color: var(--lavender-deep); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
  .pay-lesson__undo {
    display: inline-flex; align-items: center; gap: 0.3125rem;
    padding: 0.25rem 0.625rem; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700;
    background: var(--white); border: 1px solid rgba(126, 108, 168, 0.35); color: var(--lavender-deep);
  }
  .pay-lesson__undo:hover { background: var(--lavender-deep); color: #fff; }

  .pay-lessons__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
  .pay-lessons__actions .form-input { flex: 1 1 12rem; min-width: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}

@layer responsive {
  @media (max-width: 600px) {
    .pay-summary { grid-template-columns: 1fr; }
    .pay-search { flex-direction: column; }
    .pay-card { padding: 1rem; }
    .pay-card__form .pay-card__amount,
    .pay-card__form .form-input,
    .pay-card__form .btn { flex: 1 1 100%; }
    .pay-lesson { grid-template-columns: 1.75rem minmax(0, 1fr) minmax(0, 1.4fr); }
    .pay-lesson__state { grid-column: 2 / -1; justify-content: flex-start; }
    .pay-lessons__actions .btn { flex: 1 1 100%; }
  }
}