/* Styles for src/routes/payment.tsx pages. Same tokens as app.css and finance.css. */

.pay-flow { margin: .9rem 0 1rem; }
.pay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pay-actions .inline-form { display: inline-flex; margin: 0; }
td.r .pay-actions { justify-content: flex-end; }
.pay-file-name { word-break: break-all; }

/* File checks */
.pay-checks { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; gap: .4rem; }
.pay-checks li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; }
.pay-checks .dot { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; font-size: .72rem; font-weight: 700; margin-top: 1px; }
.pay-checks li.ok .dot { background: var(--ok-bg); color: var(--ok); }
.pay-checks li.warn .dot { background: var(--warn-bg); color: var(--warn); }
.pay-checks li.bad .dot { background: var(--bad-bg); color: var(--bad); }
.pay-checks li.bad { color: var(--bad); }

.kpis-file { grid-template-columns: repeat(3, 1fr); margin-bottom: 1rem; }
.kpis-file .kpi-value { font-size: 1rem; overflow-wrap: anywhere; }
.file-panel .panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.file-preview pre { overflow-x: auto; background: var(--surface-2); padding: 12px; border-radius: 8px; font: 12px/16px ui-monospace, Menlo, Consolas, monospace; margin: .5rem 0 0; white-space: pre; }

/* Bank choice */
.pay-bank { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pay-bank label { margin-bottom: .25rem; }
.fmt-list { margin: .4rem 0 .6rem; }

/* Tables */
.pay-tx td input, .pay-tx td select { min-width: 0; width: 100%; max-width: 12rem; font: inherit; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.pay-tx tfoot td { font-weight: 600; }
.pay-recon td:last-child { font-weight: 600; }

/* Admin: banks & formats */
.bank-table input:not([type=checkbox]) { width: 100%; min-width: 5rem; font: inherit; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.bank-table td { vertical-align: middle; }
.fmt-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.fmt-chip { display: inline-flex; gap: .35rem; align-items: center; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; color: var(--text); background: var(--surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.fmt-chip:hover { border-color: var(--accent); text-decoration: none; }
.fmt-chip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-weight: 600; }
.fmt-chip.off { opacity: .65; }
.spec-editor { font: 12px/16px ui-monospace, Menlo, Consolas, monospace; min-height: 16rem; white-space: pre; overflow: auto; }

@media (max-width: 720px) {
  .kpis-file { grid-template-columns: 1fr 1fr; }
  .pay-bank { grid-template-columns: 1fr; }
  .pay-tx td input, .pay-tx td select { max-width: 60%; }
  .bank-table input:not([type=checkbox]) { max-width: 60%; }
}