/* Payment attachments — check photos, receipts, confirmations */
.payatt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.payatt-tile { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; }
.payatt-tile:hover { border-color: #cfd8e3; box-shadow: 0 4px 14px rgba(16, 24, 40, .07); }
.payatt-thumb { display: block; aspect-ratio: 16 / 10; background: #eef2f7; position: relative; }
.payatt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.payatt-doc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--blue, #1f5fae); }
.payatt-doc b { font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.payatt-tile figcaption { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payatt-tile figcaption b { color: var(--ink); font-size: 13.5px; }
.payatt-tile figcaption small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.payatt-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: flex-start; }
.payatt-acts .btn { margin-left: -6px; }
.payatt-acts .btn + details .btn { margin-left: 0; }
.payatt-danger { color: var(--red) !important; }
.payatt-danger:hover { background: var(--red-50) !important; }
.payatt-del { width: auto; }
.payatt-del > summary { list-style: none; cursor: pointer; }
.payatt-del > summary::-webkit-details-marker { display: none; }
.payatt-del[open] { flex-basis: 100%; }
.payatt-del[open] > summary { background: var(--red-50); }
.payatt-confirm { margin-top: 8px; padding: 12px; border: 1px solid #f5c2c2; background: #fff8f8; border-radius: 10px; }
.payatt-confirm p { margin: 0 0 10px; font-size: 12.5px; color: #7a2727; line-height: 1.45; }
.payatt-confirm p b { color: #b92f2f; }
.payatt-confirm .lbl { font-size: 12px; }
.payatt-confirm code { background: #fde3e3; color: #b92f2f; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.payatt-confirm input { margin-top: 6px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.payatt-confirm .btn[disabled] { opacity: .45; cursor: not-allowed; }

.payatt-pick { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1.5px dashed #c5d2e2; border-radius: 12px; background: #f7f9fc; cursor: pointer; transition: border-color .15s, background .15s; font-weight: 400; }
.payatt-pick:hover, .payatt-pick:focus-within { border-color: var(--blue, #1f5fae); background: #f1f6fd; }
.payatt-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.payatt-pick-ic { width: 38px; height: 38px; border-radius: 10px; background: #e3edfa; color: var(--blue, #1f5fae); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.payatt-pick b { display: block; color: var(--ink); font-size: 13.5px; }
.payatt-pick small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.payatt-pick.has-files { border-style: solid; border-color: var(--green, #1f9d55); background: #f2fbf5; }
.payatt-drop > label:first-child { display: flex; align-items: center; gap: 6px; }
.payatt-count { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #eef3fb; color: var(--blue, #1f5fae); font: 600 11px/1.6 var(--font, inherit); vertical-align: 1px; }

@media (max-width: 640px) {
  .payatt-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .payatt-up .row { flex-direction: column; }
  .payatt-up select, .payatt-up .btn { width: 100% !important; height: 44px; }
  .payatt-acts .btn { height: 32px; }
  .payatt-confirm input { font-size: 16px; }
}
@media (max-width: 380px) { .payatt-grid { grid-template-columns: 1fr; } }
.payatt-lbl { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.payatt-lbl .muted { font-weight: 400; font-size: 12px; flex-basis: 100%; }
@media (min-width: 641px) { .payatt-lbl .muted { flex-basis: auto; } }
/* stat values with a small sub-line (e.g. "29 tenants") stay tidy on phones */
.stat-v small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; white-space: nowrap; }
@media (max-width: 640px) { .stat-v small { display: block; margin-left: 0; margin-top: 2px; } }