/* Working-screen styles (bank payments, sign-off, accounts to review, collections, audit log, CAIS). Shared look-and-feel lives in styles.css. */

/* ---- shared bits used by several working screens ------------------------------------------------ */
/* A count on a tab or heading is information, not an alarm: neutral gold. Red (.bad) is only for failures. */
.tabcount { background: var(--gold-bg); color: var(--gold-ink); }
.tabcount.bad { background: var(--red-bg); color: var(--red); }
/* "money in" beside an amount: quiet blue-grey. "money out" is the plain grey .tag. Never red - money out is not a problem. */
.tag.tag-in { background: var(--info-bg); color: var(--info); }

/* A label and date box beside a button (Home's "Export as at", the Direct Debit activity date) stay on one line. */
.inlineform label { margin: 0; white-space: nowrap; }
.inlineform input[type="date"] { width: auto; margin: 0; }
.head-actions .inlineform { flex-wrap: nowrap; gap: 8px; }

/* One empty-state pattern (partials/empty_state.ejs): what the list is, why it is empty, what to do. */
.emptystate { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.emptystate .es-what { font-family: var(--font-head); font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.emptystate p { margin: 0 0 6px; color: var(--ink-2); max-width: 680px; }
.emptystate .es-next { color: var(--ink); }
td.es-cell { padding: 14px; }
td.es-cell .emptystate { box-shadow: none; border-style: dashed; }

/* The same four headline figures on Home and All accounts. Four tiles share the row evenly. */
.headline-tiles { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- Bank payments ------------------------------------------------------------------------------- */
/* overflow visible so the "More" menu can drop over the rows below it; on a narrow window the menu opens in the flow instead. */
.tablecard.bank-card { overflow: visible; }
.bank-table tbody.bl { border-top: 1px solid var(--line-2); scroll-margin-top: 76px; }
.bank-table tbody.bl:first-of-type { border-top: none; }
.bank-table tbody.bl > tr > td { border-bottom: none; }
.bank-table tbody.bl > tr.bl-act > td { padding-top: 0; padding-bottom: 14px; }
.bank-table tbody.bl > tr:hover { background: transparent; }
.bank-table .bl-desc { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-table tr.bl-note > td { padding-bottom: 4px; }
.bl-msg { margin: 2px 0 0; }
.bl-end { margin-top: 14px; scroll-margin-top: 76px; }
.bl-note-once { margin: 0 0 10px; }
.bl-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bl-row .acct-pick { flex: 1 1 280px; min-width: 200px; max-width: 420px; margin: 0; }
.bl-row input { margin-top: 0; width: auto; }
.bl-row .acct-pick { width: auto; }
.bl-row .bl-amount { width: 110px; flex: 0 0 110px; text-align: right; font-variant-numeric: tabular-nums; }
.bl-hint { flex: 1 1 100%; }
.bl-menu > summary { padding: 8px 13px; }
.bl-extra { margin-top: 8px; }
.bl-extra:empty { display: none; }
.bl-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; margin-top: 6px; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r-sm); }
.bl-panel[hidden] { display: none; }
.bl-panel .bl-row input[type="text"] { margin-top: 0; }
.bl-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.split-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.split-live { text-align: right; font-variant-numeric: tabular-nums; }
.split-bbb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 400; margin: 0; }
.split-bbb input[type="checkbox"] { width: auto; margin: 0; }
.split-bbb input[type="number"] { width: 70px; margin: 0; }
.split-rows { display: flex; flex-direction: column; gap: 6px; }
.split-row { display: flex; gap: 6px; align-items: center; }
.split-row .sp-ref { flex: 1; min-width: 0; margin: 0; }
.split-row .sp-amount { width: 110px; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.split-paste label { margin-bottom: 8px; }
.split-paste textarea { font-family: var(--mono); font-size: 13px; }
.split-msg { padding: 8px 11px; border-radius: var(--r-sm); background: var(--amber-bg); color: var(--amber); font-size: 13px; font-weight: 600; }
/* On a narrow window each payment stacks (date, account, amount, payer, then its controls) so the Match button is
   never pushed off the edge, and the More menu opens in the flow instead of floating. */
@media (max-width: 760px) {
  .bank-table .bl-menu .menu-list { position: static; box-shadow: none; margin-top: 6px; }
  .bank-table, .bank-table tbody, .bank-table tr, .bank-table td { display: block; width: 100%; }
  .bank-table thead { display: none; }
  .bank-table tr.bl-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 12px 12px 0; }
  .bank-table tr.bl-line > td { width: auto; padding: 0; }
  .bank-table tr.bl-line > td:nth-child(3) { flex: 1 1 100%; order: 3; }
  .bank-table tr.bl-line > td:nth-child(4) { order: 2; margin-left: auto; text-align: right; }
  .bank-table tr.bl-act > td, .bank-table tr.bl-note > td { padding: 8px 12px 14px; }
}

/* ---- Sign-off ------------------------------------------------------------------------------------ */
/* (uses the shared table and form styles; nothing of its own) */

/* ---- Accounts to review ---------------------------------------------------------------------------- */
.alert-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 14px; }
.alert-tools .statfilter { margin: 0; }
button.statfilter-chip { font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.alert-small { margin: 0; font-weight: 600; font-size: 13px; }
.alerts-table .alert-why { min-width: 220px; max-width: 320px; }
.alerts-table .refund-form { display: flex; gap: 6px; align-items: center; }
.alerts-table .refund-form input { width: 160px; min-width: 0; margin: 0; }
.alerts-table .alert-actions form { display: block; margin: 0 0 6px; }
.alerts-table .alert-actions form:last-child { margin-bottom: 0; }
.alerts-table .alert-why .small { margin-top: 4px; color: var(--ink-2); }
.alerts-table td { vertical-align: top; }

/* ---- Daily collections ------------------------------------------------------------------------------ */
/* Ready to post is a job to do: a quiet gold bar. Only failures use red. */
.collbar.ready { background: var(--gold-bg); }
.collbar.ready strong { color: var(--gold-ink); }
/* "Failed Direct Debits, all books": above the tabs. A red edge only when there is something to collect again. */
.failed-all { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.failed-all.has-failures { border-left-color: var(--red); }
.failed-all .fa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.failed-all h2 { font-size: 16px; }
.failed-all .fa-none { margin: 0; color: var(--muted); }
.failed-all .fa-err { margin: 0 0 8px; color: var(--amber); font-weight: 600; }

/* ---- Credit reporting: the four month-end steps ------------------------------------------------------------ */
.cais-step { margin-top: 22px; }
.cais-step > h2 { font-size: 17px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.cais-step .stepn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 13px/1 var(--font-body); align-self: center; }
.cais-step .stepsub { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--muted); }
.cais-step .tabcount { align-self: center; }

/* ---- Audit log ------------------------------------------------------------------------------------------- */
.audit-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 16px; }
.audit-filters label { margin: 0; }
.audit-filters input, .audit-filters select { width: auto; min-width: 150px; }
.audit-filter-btns { display: flex; gap: 8px; }
.audit-detail { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .audit-detail { max-width: 220px; } }