/* =========================================================================
   ApexPOS - Accounting
   -------------------------------------------------------------------------
   Additive. Everything the accounting screens need that the app's own
   stylesheet did not already have: a table foot, subtotal rows, and figures
   that line up under each other.

   Deleting this file and its <link> leaves the rest of the app untouched.
   ========================================================================= */

/* Figures read down a column, so they have to be the same width per digit
   and sit against the same right edge. This is the whole reason a printed
   ledger is legible. */
.panel table td.num,
.panel table th.num,
.modal table td.num,
.modal table th.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A subtotal or a section heading inside a table. */
.panel table tr.is-total > td {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}
.panel table tr.is-total > td strong { color: var(--ink); }

/* The closing line. app.css styles thead and tbody but never had a tfoot to
   style, because until now nothing in the app added anything up. */
.panel table tfoot td {
  border-top: 2px solid var(--line);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* The journal editor. Four columns and a delete button have to fit inside a
   dialog, so the account picker gives up the width the figures need. */
.modal table input[inputmode='decimal'] {
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  width: 100%;
}
.modal table select { min-width: 0; width: 100%; max-width: 100%; }
.modal table th:first-child,
.modal table td:first-child { width: 40%; min-width: 150px; }
.modal table td { padding-left: 6px; padding-right: 6px; }

/* The journal lists each entry's postings under its description, small. On a
   phone that line would otherwise push the amount column off the screen. */
@media (max-width: 700px) {
  .panel table td .tiny.muted { display: block; max-width: 46ch; }
}