/* payments pages. */

/* list */
.pay-toolbar { flex-wrap: nowrap; }
.pay-toolbar .chips { flex: 1 1 auto; }
.period-select { width: auto; min-height: 36px; padding: 5px 10px; flex: none; font-weight: 600; }
.pay-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .pay-kpis { grid-template-columns: minmax(0, 1fr); } }
.pay-who { display: flex; gap: 12px; align-items: flex-start; min-width: 240px; }
.pay-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--muted-bg); color: var(--text2); }
.pay-icon.big { width: 42px; height: 42px; border-radius: 12px; }
.pay-icon.good { background: var(--good-bg); color: var(--good); }
.pay-icon.bad { background: var(--bad-bg); color: var(--bad); }
.pay-icon.info { background: var(--info-bg); color: var(--info); }
.pill-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.money.struck, .struck { text-decoration: line-through; color: var(--text2); }

/* "What do you want to record?" */
.record-choices { display: flex; flex-direction: column; gap: 8px; }
.record-choice { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #F6F8FB; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.record-choice:hover { border-color: var(--line-strong); background: var(--muted-bg); }
.record-choice b { display: block; }

/* form */
.pay-form { padding-bottom: 4px; }
.chosen { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #F3F6FC; border: 1px solid #DDE6F5; }
.chosen-name { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.navy-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex: none; }
.who-scroll { max-height: 440px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 0 -4px; padding: 0 4px; }
.who-rows { border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; }
.who-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: none; border: 0; text-align: left; cursor: pointer; min-height: 54px; }
.who-row + .who-row { border-top: 1px solid var(--line); }
.who-row:hover, .who-row:focus-visible { background: #F7F9FD; }
.who-row b { overflow-wrap: anywhere; }
.choice-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: #F6F8FB; font-weight: 700; cursor: pointer; text-align: left; }
.choice-tile:hover { background: var(--muted-bg); }
.expense-choices { margin-top: 8px; gap: 8px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cat-tile { border: 1px solid var(--line-strong); background: #F6F8FB; border-radius: 10px; padding: 9px 12px; font-weight: 600; cursor: pointer; text-align: left; min-height: 40px; }
.cat-tile:hover { background: var(--muted-bg); }
.cat-tile.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cat-tile.more { color: var(--blue); }
@media (max-width: 520px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; }
.cat-row { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; }
.cat-row:hover { background: var(--info-bg); }
.cat-row.on { background: var(--navy); color: #fff; }
.cat-row.on .opt-sub { color: #D4DEF0; }
.mode-row { width: 100%; }
.mode-row .seg { flex: 1 0 auto; }

/* allocation rows */
.alloc-rows { display: flex; flex-direction: column; }
.alloc-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.alloc-row:has(.alloc-tick) { grid-template-columns: 22px minmax(0, 1fr) 180px; }
.alloc-row:last-child { border-bottom: 0; }
.alloc-tick { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--navy); }
.alloc-what { display: flex; flex-direction: column; min-width: 0; }
.alloc-what a { text-decoration: none; }
.alloc-what a:hover { text-decoration: underline; }
.alloc-input > label { font-size: 12px; }
@media (max-width: 560px) {
  .alloc-row { grid-template-columns: minmax(0, 1fr); }
  .alloc-row:has(.alloc-tick) { grid-template-columns: 22px minmax(0, 1fr); }
  .alloc-row:has(.alloc-tick) .alloc-input { grid-column: 2; }
}
.alloc-summary { border-top: 1px solid var(--line); padding-top: 4px; }
.applied-lines { display: flex; flex-direction: column; }
.applied-line { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.applied-line:last-child { border-bottom: 0; }
.applied-line a { text-decoration: none; }
.applied-line a:hover { text-decoration: underline; }
.applied-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }

/* Save, always in reach */
.save-bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -4px 18px rgba(15, 23, 42, .08); }
.save-bar .grow { flex: 1 1 200px; }
@media (max-width: 520px) { .save-bar .btn { flex: 1 1 auto; } }

/* detail */
.pay-hero { display: flex; gap: 14px; align-items: flex-start; }
.pay-amount { font-size: 30px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; margin: 2px 0; }

/* A phone sees the amount under the name, since the table's amount column is off to the side. */
.phone-only { display: none; }
@media (max-width: 600px) {
  .phone-only { display: block; margin-top: 2px; }
  .pay-toolbar { flex-wrap: wrap; }
  .pay-toolbar .chips { flex: 1 1 100%; }
}