/* All other admin screens (Company Info, Monthly Close, Lookup, Year-End, Taxes, Status, Help). Builds on the tokens in styles.css. */

/* ---- Shared screen pieces --------------------------------------------------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.page-head-text { min-width: 0; flex: 1 1 320px; }
.page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.page-title .badge { font-size: 12px; letter-spacing: 0; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.page-actions button svg, .card-actions button svg, .modal-foot button svg, .bk-actions button svg,
.inbox-actions button svg, .row button svg { width: 16px; height: 16px; flex: none; }
.card-title .badge, .card-title .note-pill { margin-left: 6px; vertical-align: 1px; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
td.wrap { min-width: 220px; overflow-wrap: anywhere; }

/* Fields: a label, the control, an optional one-line hint */
.field { min-width: 0; }
.field > label { margin-top: 14px; }
span.field-hint, div.field-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.card-head + .grid > .field:nth-child(-n+2) > label,
.card-head + .grid-3 > .field:nth-child(-n+3) > label,
.card-head + .field > label { margin-top: 0; }

/* "How this works": the longer explanation, folded away */
details.how { margin-top: 14px; font-size: 13px; }
details.how > summary {
  display: inline-flex; align-items: center; gap: 6px; list-style: none;
  font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer;
}
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s ease;
}
details.how[open] > summary::before { transform: rotate(45deg); }
details.how > summary:hover { color: var(--accent-ink); }
.how-body { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--ink-dim); line-height: 1.55; }
.how-body p { margin: 0; }
.how-body p + p, .how-body ul + p { margin-top: 8px; }

/* Friendly empty state: an icon, one line, one action */
.empty-state:not(:has(> .es-title)) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 24px 16px; text-align: center; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px dashed var(--line-strong);
}
.empty-state:not(:has(> .es-title)) p { margin: 0; max-width: 460px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.empty-state:not(:has(> .es-title)) .icon-bubble { width: 44px; height: 44px; }

/* A file row: tinted icon, name, size */
.file-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-xs);
  background: var(--c-soft, var(--accent-tint)); color: var(--c, var(--accent));
}
.file-ic svg { width: 16px; height: 16px; }
.file-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.file-name { min-width: 0; color: var(--head); font-weight: 500; overflow-wrap: anywhere; }
.file-row .badge { flex: none; }
td.file-x { width: 1%; text-align: right; white-space: nowrap; }
.files-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 13px; }
.files-head b { color: var(--head); }
.filetable tr:hover td { background: transparent; }

/* Small inline "nothing here" lines with an icon */
.docs-none, .notes-none, .bank-none, .bk-none {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 0;
  font-size: 13.5px; color: var(--muted);
}
.docs-none svg, .notes-none svg, .bank-none svg { width: 18px; height: 18px; flex: none; color: var(--faint); }

/* Card footer: the primary action, with its message beside or under it */
.card-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}
.foot-msg { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.foot-msg:empty { display: none; }
.card-msg { margin-top: 12px; font-size: 13px; }
.card-msg:empty { display: none; }
.card-msg b { color: var(--head); font-variant-numeric: tabular-nums; }

/* Numbered steps (Monthly Close side card, Help, Year-End next steps) */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.steps > li { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.steps > li > div { min-width: 0; }
.steps > li b { color: var(--head); }
.steps .step-t { display: block; }
.steps > li > div > span { display: block; color: var(--muted); font-size: 13px; }
.step-n {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}

/* Tables that scroll inside their card, with a sticky header */
.table-wrap {
  position: relative; overflow: auto; -webkit-overflow-scrolling: touch; max-height: 520px;
  border: 1px solid var(--card-border); border-radius: var(--radius-md); background: var(--surface);
}
.table-wrap.flat { max-height: none; }
.table-wrap table { min-width: 100%; }
.table-wrap thead th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); }
.table-wrap thead th:first-child, .table-wrap thead th:last-child { border-radius: 0; }
.report-table td { vertical-align: middle; }
.report-table tr.total td, .report-table tfoot td {
  font-weight: 600; color: var(--head); background: var(--surface-2); border-top: 1px solid var(--line-strong);
}
.report-table tr.sub td { color: var(--muted); font-style: normal; }
.journal-table td.memo { min-width: 200px; color: var(--ink-dim); }
.journal-table td:first-child, .glacct .report-table td:first-child { white-space: nowrap; }
.journal-table td:nth-child(2), .journal-table td:nth-child(4) { min-width: 150px; }
.line-tag {
  display: inline-flex; align-items: center; padding: 1px 7px; margin-right: 4px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500; white-space: nowrap; background: var(--accent-tint); color: var(--accent-ink);
}

/* Statements: two clean columns, subtle totals */
.panel.stmt, .stmt-card .stmt, .stmt { max-width: none; }
.stmt .head {
  margin: 18px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.stmt .head:first-child { margin-top: 0; }
.stmt .line { padding: 7px 0; font-size: 13.5px; color: var(--ink); }
.stmt .line > span:first-child { min-width: 0; }
.stmt .line > span:last-child { color: var(--head); }
.stmt .line.sub > span:last-child { color: var(--muted); }
.stmt .neg, .kpi-v .neg, .report-table .neg { color: var(--red); }
.stmt .line.total { margin-top: 2px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--head); }
.stmt .line.gap { margin-top: 10px; }
.stmt .line.grand {
  margin-top: 12px; padding: 11px 14px; border: 0; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--head); font-weight: 700; font-size: 14.5px;
}
.stmt .line.grand > span:last-child { color: var(--head); }
.stmt-check {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px;
  font-size: 13px; color: var(--muted);
}
.card-grid > .panel.stmt-card, .report-grid > .panel { display: flex; flex-direction: column; }

/* Section heading inside a card */
.sub-head { margin: 20px 0 8px; font-size: 14px; font-weight: 600; color: var(--head); }

/* Status-type line: a badge and a sentence */
.state-line { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.state-line .badge { flex: none; margin-top: 1px; }

/* Collapsible cards (General Ledger, client "what you owe") */
details.fold-card > summary.gl-top { align-items: flex-start; }
details.fold-card > summary.gl-top::before { margin-top: 7px; }
details.fold-card[open] > summary.gl-top::before { margin-top: 3px; }
.fold-title { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 600; color: var(--head); }
.fold-title .badge { font-size: 12px; font-weight: 500; }
.fold-desc { font-size: 13px; font-weight: 400; color: var(--muted); }
.fold-body { margin-top: 16px; }
.gl-list { display: flex; flex-direction: column; gap: 8px; }
.gl-title-row { display: flex; align-items: center; gap: 8px; }
.owed-more { margin-top: 10px; }

/* Flag rows: a coloured dot and one sentence */
.flag-list { display: flex; flex-direction: column; gap: 8px; }
.flag-list .flag {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2);
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.flag-list .flag > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.flag-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--info); }
.flag-list .flag.warn { background: var(--warning-soft); border-color: var(--warning-border); }
.flag-list .flag.warn .flag-dot { background: var(--warning); }
.flag-list .flag.crit { background: var(--danger-soft); border-color: var(--danger-border); }
.flag-list .flag.crit .flag-dot { background: var(--danger); }
.flag-list .flag.ok { background: var(--success-soft); border-color: var(--success-border); }
.flag-list .flag.ok .flag-dot { background: var(--success); }
.flag-list .flag.info .flag-dot { background: var(--info); }

/* ---- Company Info ------------------------------------------------------------- */
.ci-form { display: contents; }
/* The form is display:contents, so its cards are the grid's items — give them the grid-item rules. */
.ci-form > .panel { margin-bottom: 0; min-width: 0; }
.ci-form > .span-all { grid-column: 1 / -1; }
.ci-card .grid, .ci-card .grid-3 { row-gap: 2px; }
.ci-card select, .ci-card input { width: 100%; }
.addr-wrap { position: relative; }
.ci-more { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ci-more > summary { font-size: 13.5px; }
.ci-more > .grid, .ci-more > .grid-3 { margin-top: 4px; }
.ci-more-note { margin: 8px 0 0; }
.ci-login-row { flex-wrap: nowrap; gap: 8px; }
.ci-login-row input { flex: 1 1 auto; min-width: 0; }
.ci-login-row button { flex: none; }
.ci-msg:not(:empty) { margin-top: 10px; font-size: 13px; }
.save-bar .ci-msg:not(:empty) { margin-top: 0; }
.tp-email { margin: 0 0 12px; }
.temppw[hidden] { display: none; }

/* Sticky save bar under the Company Info cards */
.save-bar {
  position: sticky; bottom: 16px; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 14px;
  margin-top: var(--gap); padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.save-bar #pmsg { margin-right: auto; }

/* The sales-tax estimate */
.taxbox { margin-top: 16px; padding: 16px 18px; }
.tax-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tax-top .badge { flex: none; }
.taxbox details.how { margin-top: 10px; }
.taxbox .how-body { background: var(--surface); }
.taxbox .taxnotes { margin: 0 0 8px; }
.tax-empty { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.tax-empty svg { width: 18px; height: 18px; flex: none; }

/* ---- Monthly Close -------------------------------------------------------------- */
.close-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--gap); align-items: start; }
.close-layout > .panel { margin-bottom: 0; min-width: 0; }
.close-side { position: sticky; top: calc(var(--topbar-h) + 20px); }
.mo-select { width: auto; min-width: 140px; }
.yr-input { width: 96px; }
.dropzone:not(.send-drop) { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.icon-bubble.dz-ic { margin-bottom: 8px; }
.icon-bubble.dz-ic svg { width: 20px; height: 20px; }
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone.compact { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 18px; text-align: left; }
.dropzone.compact .dz-ic { margin: 0; }
.dropzone.compact .dz-sub { margin-top: 2px; }
#attachedDocs:not(:empty), #draftBanner:not(:empty) { margin-bottom: 14px; }
#draftBanner .draft-banner { margin-top: 0; }
.note-label { margin-top: 22px; }
.notice.on-file, .notice.offer { margin: 0 0 10px; line-height: 1.5; }
.offer-acts { margin-top: 4px; }
.attached-docs .md-table { background: transparent; }

/* ---- The review screen ---------------------------------------------------------- */
.back-link {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px -4px; padding: 2px 6px 2px 2px;
  background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
}
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: var(--accent-ink); background: var(--accent-tint); }
.review-kpis { margin-bottom: var(--gap); }
.review-head + .draft-banner { margin: 0 0 var(--gap); }

.check-line { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-bottom: 8px;
  border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.5; color: var(--ink);
  background: var(--info-soft); border: 1px solid var(--info-border); }
.check-line b { color: var(--head); font-variant-numeric: tabular-nums; }
.check-ic { display: inline-flex; flex: none; margin-top: 1px; color: var(--info); }
.check-ic svg { width: 18px; height: 18px; }
.check-line.ok { background: var(--success-soft); border-color: var(--success-border); }
.check-line.ok .check-ic { color: var(--success); }
.check-line.bad { background: var(--danger-soft); border-color: var(--danger-border); }
.check-line.bad .check-ic { color: var(--danger); }
.inv-row {
  display: grid; grid-template-columns: auto 160px minmax(0, 1fr); align-items: center; gap: 6px 14px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.card-head + .inv-row { margin-top: 0; padding-top: 0; border-top: 0; }
.inv-row label { margin: 0; }
.inv-row .field-hint { margin: 0; }
.inv-input { text-align: right; font-variant-numeric: tabular-nums; }

/* The transactions table: fixed columns, each control fits its column */
.tx-wrap { max-height: min(640px, 72vh); }
#txtable { table-layout: fixed; min-width: 1000px; }
#txtable th { font-size: 12px; }
#txtable th:nth-child(1) { width: 118px; }
#txtable th:nth-child(3) { width: 104px; }
#txtable th:nth-child(4) { width: 150px; }
#txtable th:nth-child(5) { width: 164px; }
#txtable th:nth-child(6) { width: 160px; }
#txtable th:nth-child(7) { width: 66px; }
#txtable th:nth-child(8) { width: 48px; }
#txtable td { padding: 5px 4px; vertical-align: top; border-bottom-color: var(--line); }
#txtable td:first-child { padding-left: 8px; }
/* Cells read like a clean table; the box shows on hover and while editing. */
#txtable .txe {
  width: 100%; min-width: 0; margin: 0; min-height: 34px; padding: 6px 8px; font-size: 13px;
  border-color: transparent; background-color: transparent; box-shadow: none;
}
#txtable .txe:hover:not(:disabled):not(:focus) { border-color: var(--line-strong); background-color: var(--input-bg); }
#txtable .txe:focus { border-color: var(--accent); background-color: var(--input-bg); box-shadow: var(--focus-ring); }
#txtable select.txe { min-width: 0; padding-right: 26px; background-position: right 4px center; background-size: 16px; text-overflow: ellipsis; }
#txtable td.tx-desc .txe { color: var(--head); font-weight: 500; }
#txtable .paidcell select.txe { border-color: var(--line-strong); background-color: var(--input-bg); }
#txtable .txe-num { text-align: right; font-variant-numeric: tabular-nums; }
#txtable .txe-date { padding-left: 6px; padding-right: 4px; }
#txtable td.tx-desc .txe { text-overflow: ellipsis; }
#txtable td.tx-del { text-align: center; }
#txtable .paidcell { min-width: 0; }
#txtable .paid-ask { max-width: none; }
#txtable tr.tx-dup td { opacity: 0.55; }
#txtable tr.tx-dup:hover td { opacity: 0.85; }
#txtable td.tx-empty { padding: 20px 12px; text-align: center; }
button.ghost.txdel.icon-btn {
  --btn-h: 34px; width: 34px; padding: 0; color: var(--faint);
  background: transparent; border-color: transparent; box-shadow: none;
}
button.ghost.txdel.icon-btn:hover:not(:disabled) { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-border); }
button.ghost.txdel.icon-btn svg { width: 16px; height: 16px; }
.tx-tags { margin-top: 4px; }
.tx-tag {
  display: inline-flex; max-width: 100%; padding: 1px 8px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 500; line-height: 18px; white-space: normal;
  background: var(--surface-3); color: var(--ink-dim);
}
#txtable td .note-pill { max-width: 100%; white-space: normal; }

/* Supporting reports */
.aging-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.aging-side h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }

/* Documents + rebuild */
.rebuild { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.rb-foot { margin-top: 14px; }
.rb-foot .foot-msg { flex-basis: 100%; }

/* Bills from last month: still owed when the month before closed — where each stands, or the question */
.carried-list { display: flex; flex-direction: column; }
.carried-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) 7.5em minmax(0, 1.7fr); gap: 8px 20px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.carried-row:first-child { padding-top: 2px; border-top: 0; }
.carried-row:last-child { padding-bottom: 0; }
.carried-name { font-weight: 600; color: var(--head); overflow-wrap: anywhere; }
.carried-meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.carried-amt { padding-top: 1px; font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; }
.carried-state { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.carried-state .badge { max-width: 100%; white-space: normal; }
.carried-q { font-size: 13.5px; font-weight: 600; color: var(--head); }
.carried-why { font-size: 12.5px; line-height: 1.45; }
.carried-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.carried-acts button { --btn-h: 32px; padding: 4px 12px; font-size: 13px; }
.carried-when { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 500;
  color: var(--muted); }
.carried-when input { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.carried-foot { margin-top: 12px; }
.carried-card .notice { margin-top: 0; }
.carried-hint { margin-top: 10px; font-size: 12.5px; }
.carried-notice { margin: 0 0 12px; }
.carried-orphan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-bottom: 12px; }
.carried-orphan span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.carried-orphan button { --btn-h: 32px; padding: 4px 12px; font-size: 13px; }

/* Closing */
.close-card { border-color: rgba(var(--accent-rgb), 0.35); }
.close-card.is-closed { border-color: var(--success-border); }
.close-card .card-head { margin-bottom: 14px; }
.close-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.close-row #cmsg:empty { display: none; }
.close-card .emailstatus { margin: 0; }

/* Notes panel */
.note-add { margin-top: 16px; }
.note-add > label { margin-top: 0; }
.note-add-row { margin-top: 10px; }

/* ---- Year-End & Taxes charts -------------------------------------------------------- */
.report-charts > .panel { display: flex; flex-direction: column; }
.report-charts .chart-box:not(.sm) { flex: 1 1 0; height: auto; min-height: 260px; }
/* A row of figures at the top of a screen sits a gap above the cards under it. */
#app > .kpis { margin-bottom: var(--gap); }
.donut-wrap { display: flex; flex-direction: column; gap: 16px; }
.donut-card .chart-box.sm { height: 190px; }
.donut-card .donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.donut-card .donut-legend li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 6px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.donut-card .donut-legend li:last-child { border-bottom: 0; }
.donut-card .dl-name { min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-card .dl-pct { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.donut-card .dl-v { color: var(--head); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Status ------------------------------------------------------------------------ */
.ytd-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.closed-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; }
.card-head + .closed-list { margin-top: 0; }
.bk-actions { margin-bottom: 14px; }
.bk-head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bkrow { gap: 10px; }
.bkrow .file-ic { width: 30px; height: 30px; }
.bk-n { flex: 1 1 auto; }
.bk-s { margin-left: 0; }
button.ghost.bk-dl.icon-btn { --btn-h: 32px; width: 32px; padding: 0; }
button.ghost.bk-dl.icon-btn svg { width: 16px; height: 16px; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.plan-chip { padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--card-border); font-size: 13px; }
.plan-chip b { color: var(--head); }
.promo-form { margin-top: 0; }
.promo-row { margin: 12px 0; }
#promoArea[hidden] { display: none; }
.danger-zone { border-color: var(--danger-border); }
.danger-zone .card-head { margin-bottom: 0; }
.danger-zone .card-title { color: var(--danger-ink); }
#mfaBody .state-line + .help, #mfaBody .state-line + .row, #mfaBody .state-line + .notice { margin-top: 12px; }
#mfaBody .notice + .row { margin-top: 12px; }

/* ---- Lookup -------------------------------------------------------------------------- */
.lookup-bar { margin: 0 0 12px; }
.lookup-field { position: relative; flex: 1 1 auto; min-width: 0; }
.lookup-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--faint); pointer-events: none; }
.lookup-ic svg { width: 18px; height: 18px; }
.lookup-field .lookup-input { width: 100%; padding-left: 42px; }
.lookup-bar button { flex: none; min-height: 44px; }
.lookup-examples { margin-top: 14px; }
.lk-kpis { margin-bottom: 4px; }
.lk-bycat { margin-top: 14px; }
.lk-didyoumean { margin: 0 0 var(--gap); }
.lk-doc .file-ic { width: 36px; height: 36px; }

/* ---- Help ---------------------------------------------------------------------------- */
.help-grid { align-items: start; }
.drop-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.drop-list li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 13.5px; line-height: 1.5; }
.drop-list li > div { min-width: 0; }
.drop-list li b { display: block; color: var(--head); }
.drop-list li span { color: var(--muted); }

/* ---- Modals -------------------------------------------------------------------------- */
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-head .card-title { font-size: 17px; }
.modal-x { flex: none; }
.modal-head + label { margin-top: 0; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.modal-foot > .help { margin-right: auto; }
.modal-wide { max-width: 600px; }
.em-body { min-height: 150px; }
.bin-list { display: flex; flex-direction: column; gap: 8px; }
.bin-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 12px 14px; border: 1px solid var(--card-border); border-radius: var(--radius-sm);
}
.bin-main { display: flex; flex-direction: column; min-width: 0; }
.bin-main b { color: var(--head); overflow-wrap: anywhere; }
.bin-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.modal .notice { margin-top: 14px; }

/* ---- Inbox + bank panels (inside the dashboard's cards) -------------------------------- */
.inbox-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 14px;
  border-left: 1px solid var(--card-border);
}
.inbox-item > .file-ic { grid-row: span 2; }
.inbox-actions { grid-column: 2; }
.inbox-meta { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.inbox-heic { margin: 8px 0 0; font-size: 12.5px; }
.inbox-pick .my-pick select { min-height: 36px; }
.inbox-clear { margin: 0; }
.inbox-done-list li .badge { white-space: normal; }
.inbox-done-name { color: var(--head); font-weight: 500; }
.bank-status { margin-bottom: 12px; }
.bank-lines .notice { margin: 0 0 10px; }
.bank-lines-none { padding: 6px 0; }
.bank-load-error { margin-top: 10px; }

/* ---- Responsive ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .close-layout { grid-template-columns: minmax(0, 1fr) 260px; }
}
@media (max-width: 980px) {
  .close-layout { grid-template-columns: minmax(0, 1fr); }
  .close-side { position: static; }
}
@media (max-width: 820px) {
  .page-head { margin-bottom: 16px; }
  .page-title { font-size: 21px; }
  .page-actions { width: 100%; }
  .save-bar { position: static; box-shadow: none; }
  .inv-row { grid-template-columns: minmax(0, 1fr) 150px; }
  .inv-row .field-hint { grid-column: 1 / -1; }
  .aging-grid { grid-template-columns: minmax(0, 1fr); }
  .table-wrap { max-height: 460px; }
  .tx-wrap { max-height: 70vh; }
  .carried-row { grid-template-columns: minmax(0, 1fr) auto; }
  .carried-state { grid-column: 1 / -1; }
  .carried-acts button { --btn-h: 38px; }
  #txtable { min-width: 960px; }
  .card-grid > .span-all, .ci-form > .span-all { grid-column: auto; }
  .report-charts .chart-box:not(.sm) { flex: none; height: 240px; min-height: 0; }
}
@media (max-width: 430px) {
  .page-actions > button { flex: 1 1 auto; }
  .card-actions { width: 100%; }
  .card-actions > button { flex: 1 1 auto; }
  .card-actions .mo-select { flex: 1 1 auto; }
  .ci-login-row { flex-wrap: wrap; }
  .ci-login-row button { flex: 1 1 100%; }
  .save-bar button { flex: 1 1 100%; }
  .card-foot > button, .close-row > button { flex: 1 1 100%; }
  .carried-state { align-items: stretch; }
  .carried-state .badge { align-self: flex-start; }
  .carried-acts button { flex: 1 1 calc(50% - 4px); min-width: 0; white-space: normal; line-height: 1.25; }
  .carried-acts button[data-answer="clear"] { flex: 0 0 auto; min-width: 96px; }
  .carried-when { flex: 1 1 100%; }
  .carried-when input { flex: 1 1 auto; min-width: 0; }
  .inv-row { grid-template-columns: minmax(0, 1fr); }
  .dropzone.compact { flex-direction: column; align-items: flex-start; }
  .stmt .line.grand { font-size: 14px; padding: 10px 12px; }
  .bin-acts { width: 100%; }
  .bin-acts button { flex: 1 1 auto; }
  .modal-foot button { flex: 1 1 auto; }
  .lookup-bar { flex-wrap: wrap; }
  .lookup-bar button { flex: 1 1 100%; }
  .donut-legend li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dl-pct { display: none; }
  .inbox-item { grid-template-columns: minmax(0, 1fr); }
  .inbox-item > .file-ic { display: none; }
  .inbox-actions { grid-column: 1; }
  .inbox-pick { flex: 1 1 100%; }
  .inbox-pick .my-pick { display: flex; flex-wrap: nowrap; width: 100%; }
  .inbox-actions .inbox-pick select { flex: 1 1 0; min-width: 0; }
}

/* A card that is only its header (e.g. "This month is closed") needs no gap under it. */
.panel > .card-head:last-child { margin-bottom: 0; }

/* Remove-a-file buttons stay quiet until pointed at. */
td.file-x button.ghost.icon-btn { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }
td.file-x button.ghost.icon-btn:hover:not(:disabled) { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger-border); }
td.file-x button.ghost.icon-btn svg { width: 16px; height: 16px; }