/* The four ledger reports (ui/ledger-reports.js): Balance Sheet, Trial Balance, Account Balances and the General Ledger, in Wave's look (survey, Reports). Page rules
   only: the panel, the tabs, the Export menu, the tables' base and the status line live in app.css and reports.css (this file is loaded after them). Sizes by token
   name, hover only on a fine pointer, press feedback on what is pressed (the same matrix as app.css), nothing longer than 300 ms, and app.css switches every
   transition off for reduced motion. The grey (--rep-grey) and the pale blue (--rep-col) are declared in reports.css on .rep-filters and .rep-body. */

/* ---- The strip above the Balance Sheet: Cash and Bank + To be received - To be paid out = Net. The figures sit side by side with the operator between, stacked on a phone. ---- */
.strip.led-eq .led-op{flex:none;align-self:center;padding:0 2px;font-size:var(--type-l);font-weight:700;line-height:1;color:var(--text-secondary)}
.strip.led-eq .stat .big{overflow-wrap:anywhere}
.strip.led-eq .stat .big.led-neg{color:var(--flag)}
@media (min-width:720px){
  .strip.led-eq{flex-wrap:nowrap}
  .strip.led-eq .stat{flex:1 1 0;padding:16px 18px}
}
@media (max-width:719px){
  .strip.led-eq .led-op{align-self:center;padding:0;height:20px}
}

/* ---- The error band: a red triangle and one sentence, above a table whose identity failed. The skipped band is the same band with a list: the documents that are not in the figures. ---- */
.led-error,.led-skip{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--bad-bg);color:var(--text-primary);overflow-wrap:anywhere}
.led-error{font-weight:600}
.led-skip{align-items:flex-start}
.led-skip .tri{margin-top:6px}
.led-skip-t{min-width:0}
.led-skip-h{font-weight:600}
.led-skip ul{margin:6px 0 0;padding:0;list-style:none}
.led-skip li{padding:2px 0}

/* ---- The tables. A row has the name at the left (a link to the account's General Ledger, with Wave's small icon) and the figures at the right in tabular digits. ---- */
.table.led{width:100%;border-collapse:collapse}
.table.led td{color:var(--text-primary);font-size:var(--type-m)}
/* A name breaks between words, and inside a word only when the word alone is wider than the column (break-word, not anywhere: "anywhere" lets the column shrink until a
   word like "Uncategorized" is cut in two). The last word and the icon are one piece (.led-end) so the icon never sits alone on a line. */
.table.led th.name,.table.led td.name{padding-left:12px;overflow-wrap:break-word}
.led-end{white-space:nowrap}
.table.led th.num,.table.led td.num{padding-left:12px;padding-right:12px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table.led th.led-when,.table.led td.led-when{padding-left:12px;padding-right:0;width:1%;white-space:nowrap}
.table.led td .ext{width:14px;height:14px;margin:0 0 -2px 6px;flex:none}
.table.led td.name a.rowlink{overflow-wrap:break-word}
/* a group band (Assets, Liabilities & Equity, Income) and, in a Details tab, a section label inside it */
.table.led tr.led-band td.led-band{height:40px;padding:0 12px;background:var(--rep-grey);font-weight:700;border-bottom:0}
.table.led tr.led-sect td.led-sect{height:36px;padding:0 12px;font-weight:700;color:var(--text-secondary);border-bottom:0}
.table.led.led-flat td{height:48px;min-height:48px}
.table.led.led-flat tr.led-row td.name,.table.led.led-flat tr.led-plain td.name,.table.led.led-flat tr.led-sub td.name{padding-left:24px}
.table.led tr.led-sub td,.table.led tr.led-total td{font-weight:700}
.table.led tr.led-total td{border-top:1px solid var(--text-tertiary)}
.table.led tr.led-total.led-grand td{border-top:3px double var(--text-tertiary)}
.table.led tr.led-total td a.rowlink{font-weight:700}

/* ---- The General Ledger: a band per account (its name, then "Under: Asset > Cash and Bank"), a starting row, the lines, an ending row. It scrolls sideways on a narrow screen. ---- */
.led-acct{font-weight:700}
.led-under{margin-left:12px;font-weight:400;font-size:var(--type-xs);color:var(--text-secondary)}
.table.led.led-gl{min-width:600px}
.table.led.led-gl td.name{min-width:160px}
.table.led.led-gl tr.led-row td.name,.table.led.led-gl tr.led-plain td.name,.table.led.led-gl tr.led-total td.name{padding-left:12px}
.table.led.led-gl tr.led-plain td.name{color:var(--text-secondary)}
.rep-scroll.led-wide{overflow-x:auto}

/* ---- Account Balances: six columns, so the figures are the small size on a desktop and a row is two lines on a phone ---- */
@media (min-width:960px){
  .table.led.led-stack td{height:48px;min-height:48px}
  .table.led.led-ab td.num,.table.led.led-ab th.num{padding-left:8px;padding-right:8px}
  .table.led.led-ab td.num{font-size:var(--type-s)}
}

/* ---- Tags: a button that opens a list of check boxes ---- */
.led-tags{width:240px}
.led-pick{display:block}
.led-pick-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:var(--hit);padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-inset);color:var(--text-primary);text-align:left;transition:border-color 120ms var(--ease),transform 140ms var(--ease)}
.led-pick-btn:active{transform:matrix(.97,0,0,.97,0,0)}
.led-pick-btn[disabled]{background:var(--bg-panel-2);color:var(--text-secondary);cursor:default}
.led-pick-btn[aria-expanded=true]{border-color:var(--accent)}
.led-pick-btn:focus-visible{outline-offset:0;border-color:var(--accent)}
.led-pick-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.led-pick-btn .caret{flex:none}
.led-pick-list{left:0;right:auto;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 2 * var(--gutter)))}
.led-pick-row{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:var(--radius-xs);cursor:pointer;overflow-wrap:anywhere;transition:background 120ms var(--ease)}
.led-pick-row input{flex:none;width:22px;height:22px;min-height:0;padding:0;accent-color:var(--accent)}
@media (hover:hover) and (pointer:fine){.led-pick-row:hover{background:var(--accent-soft)}}
.rep-row .led-w{width:200px}

/* ---- Phone ---- */
@media (max-width:959px){
  /* Balance Sheet, Trial Balance and the General Ledger keep their columns on a phone (two or three figures fit; the General Ledger scrolls): the shared
     phone rule that turns every table into cards is undone for them */
  .table.led.led-flat{display:table}
  .table.led.led-flat tbody{display:table-row-group}
  .table.led.led-flat thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:table-header-group}
  .table.led.led-flat tr{display:table-row;padding:0;border-bottom:0}
  .table.led.led-flat td{display:table-cell;height:48px;min-height:48px;padding:0 12px;border-bottom:1px solid var(--divider);vertical-align:middle}
  .table.led.led-flat td.num{text-align:right;padding:0 12px}
  .table.led.led-flat td.name,.table.led.led-flat td.led-when{padding:0 12px}
  .table.led.led-flat tr.led-row td.name,.table.led.led-flat tr.led-plain td.name,.table.led.led-flat tr.led-sub td.name{padding-left:20px}
  .table.led.led-flat.led-gl tr.led-row td.name,.table.led.led-flat.led-gl tr.led-plain td.name,.table.led.led-flat.led-gl tr.led-total td.name{padding-left:12px}
  .table.led.led-flat tr.led-band td.led-band,.table.led.led-flat tr.led-sect td.led-sect{display:table-cell;padding:0 12px;border-bottom:0}
  .table.led.led-flat tr.led-total td{border-top:1px solid var(--text-tertiary)}
  .table.led.led-flat tr.led-total.led-grand td{border-top:3px double var(--text-tertiary)}
  /* Account Balances: the name on a line of its own, then the five figures with their labels, three and two */
  .table.led.led-stack td.name{grid-column:1 / -1;padding-left:0}
  .table.led.led-stack tr.led-band{padding:0;border-bottom:0}
  .table.led.led-stack tr.led-band td.led-band{grid-column:1 / -1;display:flex;align-items:center;height:40px;padding:0 12px}
  .table.led.led-stack td.num{white-space:normal;padding:0;text-align:left}
  .table.led.led-stack tr.led-total{border-top:1px solid var(--text-tertiary)}
  .led-tags{width:100%}
  .rep-row .led-w{width:auto}
  .led-pick-list{width:100%}
  .led-pick-row{min-height:44px}
}