/* rx-acct.css - Accounting and Finance: only what the shared module styles do not already cover. */
.ac-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-amt.is-neg { color: var(--bad); }
.ac-void td { opacity: .55; }
.ac-period { display: contents; }
/* everything in a section's panel that is not a full-width table keeps off the panel's edge */
#acBox .dtr__body > :not(table):not(.inv-tablewrap) { margin: 12px 14px; }
#acBox .dtr__body > .ux-note + .inv-tablewrap, #acBox .dtr__body > .inv-stats + .inv-tablewrap { margin-top: 4px; }
@media (max-width: 760px), (orientation: portrait) { #acBox .dtr__body > :not(table):not(.inv-tablewrap) { margin: 10px 2px; } }
.ac-date { min-width: 0; width: 150px; }
/* drop-downs size to their longest choice, so no text is cut off */
#acTools .ux-tools__pick { flex: 0 0 auto; min-width: 130px; max-width: 100%; }
#acTools .ux-tools__pick.ac-date { flex: 0 1 150px; }
.ac-stmtwrap { overflow-x: auto; }
.ac-stmtwrap .ac-stmt caption { white-space: normal; min-width: 12em; }

/* statements: label left, amount right, headings and totals set apart */
.ac-stmt { width: 100%; max-width: 760px; }
.ac-stmt caption { text-align: left; font-weight: 500; padding: 4px 0 10px; }
.ac-stmt td { padding-top: 6px; padding-bottom: 6px; }
.ac-stmt .ac-in { padding-left: 28px; color: var(--ink2); }
.ac-head td { font-weight: 500; padding-top: 16px; border-bottom: 0; }
.ac-grp td { font-size: 12px; color: var(--ink2); padding-left: 16px; border-bottom: 0; }
.ac-sub td { font-weight: 500; border-top: 1px solid var(--line); }
.ac-total td, .ac-grand td { font-weight: 500; border-top: 1px solid var(--line-hover); }
.ac-grand td { font-size: 1.05em; font-weight: 600; color: var(--ink, #fff); }
.ac-short td { color: var(--bad); }
.ac-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ac-neg { color: var(--bad); }
.ac-link { color: inherit; text-decoration: underline; text-decoration-color: var(--ac-text); text-underline-offset: 3px; }
.ac-grand .ac-amt.is-neg { color: var(--bad); }
.dtr-t tr.ac-grand td { border-top: 1px solid var(--line-hover); }


.ac-prob > span { display: block; }
.ac-details { margin-top: 4px; font-size: 12px; color: var(--ink2); }
.ac-details summary { cursor: pointer; width: max-content; }
.ac-details code { display: block; margin-top: 4px; white-space: pre-wrap; word-break: break-word; font-size: 11.5px; }
/* the 12-month profit and loss: wide, scrolls sideways inside its box, account names stay in view */
.ac-stmt.ac-p12 { max-width: none; min-width: 1100px; font-size: 13px; }
.ac-p12 th, .ac-p12 td { white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.ac-p12 th:first-child, .ac-p12 td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card-solid, #1f2128); min-width: 200px; white-space: normal; }
.ac-match-verdict { margin: 4px 0; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); }
.ac-match-verdict:empty { display: none; }
.ac-match-verdict.is-good { border-color: rgba(155, 227, 176, .5); }
.ac-match-verdict.is-bad { border-color: var(--accent); }
/* custom reports: the picker bar and the row editor */
.ac-layoutbar { align-items: flex-end; }
.ac-layoutbar .ux-f { flex: 1 1 260px; }
.ac-lyrows { display: grid; gap: 10px; margin-bottom: 10px; }
.ac-lyrow { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); }
.ac-lyrow > .ac-row { align-items: center; }
.ac-lyrow > .ac-row > .ux-in { flex: 1 1 160px; min-width: 0; }
.ac-lyrow select[multiple] { width: 100%; }
/* month-end: the periods strip, closed or open */
.ac-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.ac-periods .ac-pstat { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; }
.ac-periods .ac-pstat small { font-size: 11px; color: var(--ink2); }
.ac-periods .ac-pstat.is-closed small { color: #9be3b0; }
.ac-periods .ac-pstat.is-current { border-color: var(--accent); }
.ac-hist { display: flex; justify-content: flex-start; margin: -4px 0 10px; }
/* the Overview dashboard: ratio strip, points worth a look, and the chart cards (two across, one on phones) */
.ac-ratios { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ac-ratio { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: help; }
.ac-ratio span { display: block; font-size: 12px; color: var(--ink2); }
.ac-ratio b { display: block; margin-top: 2px; font-size: 17px; font-weight: 400; font-variant-numeric: tabular-nums; }
.ac-ratio__sp { display: block; margin-top: 4px; max-width: 100%; }
.ac-signals { padding: 14px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.ac-signals h3 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.ac-signals ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ac-signals li { position: relative; padding-left: 18px; line-height: 1.45; }
.ac-signals li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #9be3b0; }
.ac-signals li.is-bad::before { background: #ff9c92; }   /* the shared status colours (rx-charts.js): bad */
.ac-signals li.ac-link { cursor: pointer; }
.ac-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); grid-auto-flow: dense; gap: 14px; }
.ac-dash > .ac-wide { grid-column: 1 / -1; }
.ac-dash--wait { min-height: 320px; }   /* room kept for the charts while they draw, so the page does not jump */
@media (max-width: 760px), (orientation: portrait) { .ac-dash { grid-template-columns: 1fr; } }

/* journal entry lines: account, debit, credit, note, remove */
.ac-lines { display: grid; gap: 8px; margin-bottom: 8px; }
.ac-line { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
.ac-line--prj { grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.3fr) auto; }
@media (max-width: 760px), (orientation: portrait) {
  .ac-line { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .ac-line > select, .ac-line > input[type="text"] { grid-column: 1 / -1; }
  .ac-date { width: auto; flex: 1 1 130px; }
  #acTools .ux-tools__pick { flex: 1 1 40%; min-width: 0; }
  #acTools .ux-tools__pick.ac-date { flex: 1 1 40%; }
}

/* cash and bank cards */
.ac-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ac-card { text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.ac-card:hover, .ac-card:focus-visible { border-color: var(--line-hover); }
.ac-card span { display: block; font-size: 12px; color: var(--ink2); }
.ac-card b { display: block; margin: 2px 0; font-size: 22px; font-weight: 300; }
.ac-card small { font-size: 11px; color: var(--ink2); }
.ac-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
/* reconcile: room between the dates, the totals, the tip, the import and the list */
.ac-recon > * + * { margin-top: 14px; }
.ac-recon .ac-row .ux-f { flex: 1 1 240px; }
/* on phones every Accounting form is one field per row, so labels and placeholders are not cut */
@media (max-width: 760px), (orientation: portrait) {
  body[data-manual="accounting"] .dtr-form--two { grid-template-columns: 1fr !important; }
  body[data-manual="accounting"] .dtr-form--two > * { grid-column: auto !important; }
}
.ac-cardbar { position: relative; display: flex; justify-content: flex-end; margin-bottom: -4px; }   /* the Choose cards button above the chart cards */
/* month-end checklist: the links to other sections and modules are easy to tap on a phone */
.ac-fix { display: inline-flex; align-items: center; text-decoration: none; }
@media (pointer: coarse), (max-width: 760px) { .ac-fix { min-height: 40px; } }