/* juribooks-responsive-fixes-v1.css — phone layout fixes (2026-10-03).
 *
 * Found by sweeping every screen at 390px (tests/responsive-sweep.mjs):
 * 13 screens (Billing & Collections: WIP, Timesheets, Receivables Ledger; and
 * Payment Voucher, VAT, WHT, Bank Loans, Fixed Assets, Investments, Budget,
 * Decision Tools, Client Trust, AI Insights) had fields, tabs or panels running off
 * the right edge of the screen, cut off rather than scrollable. Tablet and
 * desktop widths were already clean and are not touched.
 *
 * Causes, all layout-only:
 *   1. form panels lay fields out in fixed 3-4 column grids written inline
 *      (style="grid-template-columns:1fr 1fr 150px 150px") that never collapse;
 *   2. the ledger-reconciliation banner (.balrow) is an inline-flex row that
 *      cannot wrap, so each phrase became a sliver or ran off-screen;
 *   3. a few cards hold fixed-width content with no scroll container.
 * !important is needed only where the value being corrected is an INLINE
 * style, which no ordinary rule can override. Presentation only.
 */
@media (max-width: 640px) {
  /* 1. any inline multi-column grid inside a screen collapses to one column */
  .main .view [style*="grid-template-columns"],
  .main .view .far-form {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .main .view [style*="grid-column:span"],
  .main .view [style*="grid-column: span"] {
    grid-column: auto !important;
  }
  .main .view .pf { min-width: 0; flex-wrap: wrap; }
  .main .view .pf > input,
  .main .view .pf > select,
  .main .view .pf > textarea { max-width: 100%; min-width: 0; }

  /* 2. reconciliation / status banners wrap as ordinary text */
  .main .view .balrow {
    display: flex !important;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 2px 6px;
    white-space: normal;
  }
  .main .view .balrow > * { min-width: 0; }

  /* 2b. control rows (VAT / WHT report-type tabs): children may shrink, and a
     tab strip scrolls sideways inside itself instead of widening the page */
  .main .view .jb-control-row > * { min-width: 0; max-width: 100%; }
  .main .view .jb-control-row > div[style*="flex-wrap"] { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: thin; }
  .main .view .rtabs { max-width: 100%; overflow-x: auto; }

  /* 3. a card never pushes the page wider; wide content scrolls inside it */
  .main .view .card { max-width: 100%; min-width: 0; overflow-x: auto; }
  .main .view .card > table { min-width: 100%; }
}

/* Fixed-asset schedule (all widths): long asset-class names in the column
   headings ("COMPUTER EQUIPMENT", "FUNITURES & FITTINGS") were kept on one
   line in spaced capitals and ran into the neighbouring columns. They now
   wrap within their own column, bottom-aligned above the figures. */
.ppe-tbl thead tr:first-child th {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  letter-spacing: .02em !important;
  line-height: 1.25 !important;
  vertical-align: bottom;
  min-width: 90px;
}

/* VAT schedules (2026-10-04): long column headings ("Purchase Amount (VAT
   Exclusive)", "Date of Transaction") wrap inside their column. */
#view-vat .vat-tbl thead th {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.25 !important;
  vertical-align: bottom;
}
#view-wht .vat-tbl thead th {
  white-space: normal !important;
  overflow-wrap: break-word;
  line-height: 1.25 !important;
  vertical-align: bottom;
}

/* Sort arrows (2026-10-04): the faint up/down arrow on every column heading
   confused users. It now appears only when the pointer is over a heading
   (to show the column can be sorted) or when that column is sorted. */
/* (visibility, not opacity: sharp-type-v5 forces .view span to opacity 1) */
.sort-ind { visibility: hidden; }
th:hover > .sort-ind, .sort-ind.on { visibility: visible; }
@media (hover: none) { .sort-ind:not(.on) { display: none !important; } }
/* number boxes inside a table: figures sit off the edge, in tabular digits */
.tb-tbl td.r input, .tb-tbl td.num input { text-align: right; padding-left: 10px; padding-right: 10px; font-variant-numeric: tabular-nums; }