/* close-recs styles (Month-End Close / drill). Uses the tokens in app.css. */
/* Review pages: #/close-bankrec, #/close-tieout, #/close-bs, #/close-funds, #/close-variance. Prefix: cr- */

.cr-intro { margin-top: 16px; max-width: 700px; font-size: 16px; }
.cr-time { color: var(--muted); }
.cr-sample { margin-top: 8px; font-size: 12px; color: var(--muted); }
.cr-callout { margin-top: 20px; padding: 12px 16px; max-width: 720px; background: var(--subtle); border-radius: var(--radius); font-size: 15px; }
.cr-after { margin-left: 24px; margin-top: 12px; }
.cr-je-link { margin-top: 16px; font-size: 15px; }
.cr-je-link a { font-weight: 600; text-underline-offset: 4px; }
.step-panel > .cr-je-link.cr-after { margin-left: 24px; }

/* Choice questions */
.cr-q { margin-top: 28px; max-width: 720px; }
.cr-q:first-child { margin-top: 0; }
.cr-q-prompt { font-weight: 600; margin-bottom: 10px; }

/* Account tabs (same look as the Easy / Medium / Hard links on the bank rec) */
.cr-tabs { display: flex; gap: 24px; font-size: 15px; }
.cr-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 15px; }
.cr-tab:hover { color: var(--ink); }
.cr-tab[aria-selected=true] { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cr-tab .icon { color: var(--good); }
.cr-panel { margin-top: 8px; }

/* Reconcile */
.cr-rec-summary { margin-top: 0; }
.cr-rec-body { margin-top: 32px; }
.cr-open-list { list-style: none; margin: 0; padding: 0; max-width: 560px; border-top: 1px solid var(--line); font-size: 15px; }
.cr-open-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.cr-open-list .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-report { margin-top: 40px; }
.cr-report h2 { margin-bottom: 4px; }
.cr-report-sub { margin: 0 0 12px !important; font-size: 14px; }
.rec-report tr.cr-tie-ok td { color: var(--good); font-weight: 600; }
.rec-report tr.cr-tie-bad td { color: var(--bad); font-weight: 600; }
.cr-next { margin-top: 24px; }

/* Documents side by side */
.cr-docs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 880px; align-items: start; }
.cr-doc-sheet .table-scroll { margin-top: 12px; }
.cr-doc-table { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 14px; }
.cr-doc-table th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 4px 0 6px; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.cr-doc-table th.num { text-align: right; padding-left: 12px; }
.cr-doc-table td.num { padding-left: 12px; }
.cr-doc-table tfoot td { font-weight: 700; border-top: 1px solid var(--ink); border-bottom: 0; padding-top: 8px; }

/* Giving tie-out */
.cr-tieout { max-width: 640px; }
.cr-tieout tfoot td { border-top: 1px solid var(--ink); }
.cr-batch-table tbody th { padding: 10px 12px 10px 0; vertical-align: top; text-align: left; color: var(--ink); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line-soft); min-width: 140px; }
.cr-batch-table .cr-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.cr-batch-table .cr-where { color: var(--muted); font-size: 13px; white-space: nowrap; }
.cr-batch-table tr.cr-pair-top > * { border-top: 1px solid var(--line); }
.cr-batch-table td.cr-none { color: #A3AAAF; font-size: 13px; }
.cr-batches { max-width: 960px; }

/* Balance sheet tie-out */
.cr-bs-sheet { margin-top: 40px; }
.cr-sheet-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 8px; }
.cr-sheet-head .sheet-title { margin-bottom: 0; }
.cr-count { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-bs-table tr.cr-current td { background: var(--subtle); }
.cr-bs-table td.cr-tie { width: 48px; text-align: center; }
.cr-bs-table td.cr-tie .icon { justify-content: center; }
.cr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.cr-acct-count { font-size: 13px; font-weight: 600; color: var(--muted); }
.cr-acct { font-size: 18px; margin-top: 2px; }
.cr-facts { margin: 12px 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 15px; }
.cr-facts div { display: contents; }
.cr-facts dt { color: var(--muted); }
.cr-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.form-grid.cr-one { grid-template-columns: minmax(0, 240px); margin-top: 20px; }
.cr-work .actions { margin-top: 20px; }
.cr-work .cr-q, .cr-work .cr-q:first-child { margin-top: 24px; }

/* Funds */
.cr-soa, .cr-rf { max-width: 720px; }
.cr-rf .cell-note { font-weight: 400; }
td.cr-end { font-weight: 600; }
.cr-tracker { max-width: 600px; }
.cr-tracker tr.cr-sub-total td { font-weight: 600; border-top: 1px solid var(--line); }
.cr-tracker tfoot td { font-weight: 700; }

/* Variance */
.cr-var-table .cr-acct-cell, .cr-mom-table .cr-acct-cell { min-width: 210px; }
.cr-var-table tr.cr-flagged td { background: var(--subtle); }
.cr-var-table tr.cr-flagged td:first-child { font-weight: 600; }
.cr-var-table tfoot td { font-weight: 600; }
.cr-var-table .check-cell { width: 56px; }
.cr-explain { margin-top: 36px; }
.cr-explain:first-child { margin-top: 0; }
.cr-detail { margin-top: 12px; max-width: 880px; }
.cr-detail summary { cursor: pointer; font-size: 15px; width: max-content; max-width: 100%; text-decoration: underline; text-decoration-color: #C3C9CD; text-underline-offset: 4px; }
.cr-detail summary:hover { text-decoration-color: var(--ink); }
.cr-detail[open] summary { margin-bottom: 8px; }
.cr-detail .sheet { font-size: 13px; }
.cr-mom-table .input-cell select { width: 300px; }
.cr-mom-table td.coding { min-width: 220px; max-width: 340px; white-space: normal; }
.cr-notes { display: block; width: 100%; max-width: 780px; height: auto; min-height: 320px; padding: 12px 14px; line-height: 1.55; font-size: 14px; resize: vertical; }
.cr-copied { color: var(--good); font-size: 14px; }

@media (max-width: 900px) {
  .cr-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .cr-tabs { gap: 20px; }
  .cr-docs-2 { grid-template-columns: minmax(0, 1fr); }
  .form-grid.cr-one { grid-template-columns: minmax(0, 1fr); }
  .cr-mom-table .input-cell select { width: 230px; }
  .cr-after { margin-left: 0; }
  .cr-notes { min-height: 420px; font-size: 13px; }
}

/* Live difference next to the Finish button (the summary figures scroll away on a long list) */
.cr-live-diff { font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cr-live-diff strong { color: var(--ink); margin-left: 4px; }
.cr-live-diff.zero strong { color: var(--good); }

/* Phone: tables with inputs stack into one labeled card per row, so the input or checkbox stays on screen */
@media (max-width: 720px) {
  .cr-stack thead { display: none; }
  .cr-stack, .cr-stack tbody, .cr-stack tfoot { display: block; width: 100%; }
  .cr-stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
  .cr-stack td { padding: 0 !important; border: 0 !important; min-width: 0 !important; text-align: left !important; white-space: normal; }
  .cr-stack td.cr-lead { grid-column: 1 / -1; font-weight: 600; }
  .cr-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
  .cr-stack td:empty:not([data-label]) { display: none; }
  .cr-stack .input-cell input, .cr-stack .input-cell select { width: 100% !important; height: 40px; }
  .cr-stack td.num .cell-note { text-align: left; }
  .cr-stack tr.group-row { display: block; padding: 20px 0 6px; border-bottom: 1px solid var(--line); }
  .cr-stack tr.group-row td { font-size: 13px; }
  .cr-stack tfoot tr:first-child { border-top: 1px solid var(--ink); }
  .cr-stack tfoot tr:first-child td { border-top: 0 !important; }
  .cr-stack tr.row-bad, .cr-stack tr.cr-flagged, .cr-stack tr.cr-current { padding: 12px; border-radius: var(--radius); border-bottom-color: transparent; }
  .cr-stack tr.row-bad { background: var(--bad-bg); }
  .cr-stack tr.cr-flagged, .cr-stack tr.cr-current { background: var(--subtle); }
  .cr-stack tr.row-bad td, .cr-stack tr.cr-flagged td, .cr-stack tr.cr-current td { background: none !important; }

  .cr-var-table tbody tr:not(.group-row) { grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; }
  .cr-var-table td.cr-lead { grid-column: 1 / 4; }
  .cr-var-table td.cr-flag { grid-column: 4; grid-row: 1 / span 3; align-self: center; width: auto; }

  .cr-rf tr { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lead lead" "beg end" "gifts spent"; }
  .cr-rf td.cr-lead { grid-area: lead; }
  .cr-rf .cr-c-beg { grid-area: beg; }
  .cr-rf .cr-c-end { grid-area: end; }
  .cr-rf .cr-c-gifts { grid-area: gifts; }
  .cr-rf .cr-c-spent { grid-area: spent; }

  .cr-bs-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)) 32px; grid-template-areas: "lead lead tie" "books support tie" "src src src"; }
  .cr-bs-table td.cr-lead { grid-area: lead; }
  .cr-bs-table .cr-c-books { grid-area: books; }
  .cr-bs-table .cr-c-support { grid-area: support; }
  .cr-bs-table .cr-c-src { grid-area: src; font-size: 13px; }
  .cr-bs-table td.cr-tie { grid-area: tie; align-self: center; width: auto; }

  .cr-mom-table td.cr-why { grid-column: 1 / -1; }
  .cr-mom-table td.coding { max-width: none; }
}