/* budget-import: the statement panel with its preview, the ledger table, the split editor and the lists. */
.bi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--matrix-space-12) var(--matrix-space-16); margin-bottom: var(--matrix-space-12); min-width: 0; }
.bi-field { display: grid; gap: 4px; align-content: start; min-width: 0; } /* min-width 0: Firefox otherwise sizes the cell to the control and widens the page at 320 px */
.bi-field[hidden] { display: none; }
.bi-field label { font-weight: 600; font-size: var(--matrix-type-control); }
.bi-field select, .bi-field input { width: 100%; box-sizing: border-box; }
.bi-field input.bi-number { max-width: 8em; }
.bi-hint { margin: 0; font-size: var(--matrix-type-control); }
.bi-hint:empty, .bi-summary:empty { display: none; }
.bi-summary { margin: var(--matrix-space-8) 0; }
.bi-summary p { margin: 0 0 4px; }
.bi-heading { margin: var(--matrix-space-16) 0 var(--matrix-space-8); font-size: var(--matrix-type-item-title); }
.bi-notice { margin: var(--matrix-space-8) 0; }
.bi-undo { margin: 0; }
/* a button that cannot be pressed looks it (the shared sheet styles this for the main button only) */
#options .matrix-secondary:disabled { background: var(--matrix-disabled-background); color: var(--matrix-disabled-text); border-color: transparent; cursor: not-allowed; }
.bi-no-file { display: block; padding: var(--matrix-space-8) 0; }
.bi-undo[hidden] { display: none; }
.option-group .option-group { margin-bottom: var(--matrix-space-12); }
/* a long legend wraps inside its group: Safari kept one at its full width when the window was made narrow, and the page scrolled sideways */
#options legend { max-width: min(100%, calc(100vw - 7rem)); box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; } /* the window's own width as well: Safari does not hold a legend to a share of its group after the window is resized */

.bi-scroll { overflow-x: auto; min-width: 0; max-width: 100%; margin: var(--matrix-space-8) 0; border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); }
.bi-scroll[hidden] { display: none; }
.bi-scroll:focus-visible { outline: 3px solid var(--matrix-focus); outline-offset: 2px; }
.bi-scroll > p { margin: var(--matrix-space-12); }
.bi-table { width: 100%; border-collapse: collapse; font-size: var(--matrix-type-table); font-variant-numeric: tabular-nums; }
.bi-table caption { text-align: left; padding: var(--matrix-space-8); color: var(--matrix-muted); font-size: var(--matrix-type-control); }
.bi-table th, .bi-table td { padding: 6px var(--matrix-space-8); border-top: 1px solid var(--matrix-border); text-align: left; vertical-align: top; }
.bi-table thead th { font-weight: 600; background: var(--matrix-surface-subtle); white-space: nowrap; }
.bi-table .bi-amount { text-align: right; white-space: nowrap; font-family: var(--matrix-font-mono); }
.bi-table .bi-description { overflow-wrap: anywhere; min-width: 10em; }
.bi-table .bi-unread td { background: var(--matrix-warning-background); color: var(--matrix-text); }
.bi-table .bi-current td { background: var(--matrix-surface-subtle); }
.bi-table .bi-date { white-space: nowrap; }
.bi-what, .bi-account { display: block; }
.bi-account { font-size: var(--matrix-type-caption); }
.bi-choices { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--matrix-space-8); }
.bi-table select { min-width: 9em; max-width: 14em; }
.bi-source { font-size: var(--matrix-type-caption); white-space: nowrap; }

.bi-list { margin: var(--matrix-space-8) 0; padding-left: 1.2em; }
.bi-list:empty { display: none; }
.bi-list li { margin-top: var(--matrix-space-8); overflow-wrap: anywhere; }
.bi-part { display: flex; flex-wrap: wrap; align-items: center; gap: var(--matrix-space-8); margin-top: var(--matrix-space-8); }
.bi-part-name { font-weight: 600; min-width: 4em; }
.bi-part select { min-width: 10em; max-width: 100%; }
.matrix-ui .bi-money { font-family: var(--matrix-font-mono); max-width: 12em; }
.bi-file-label { cursor: pointer; }
#bi-open:focus-visible + .bi-file-label { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
#bi-ledger:focus-visible, #bi-pairs:focus-visible, #bi-rules:focus-visible, #bi-imports:focus-visible { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }

/* narrow screens: each row of a table becomes a small card, so nothing scrolls sideways and no reason is out of sight */
@media (max-width: 640px) {
  .bi-table, .bi-table tbody, .bi-table tr, .bi-table td, .bi-table caption { display: block; }
  .bi-table thead { display: none; } /* out of the layout: clipped from view it still made the page 438 px wide in Safari */
  .bi-table tr { padding: var(--matrix-space-8); border-top: 1px solid var(--matrix-border); }
  .bi-table td { border-top: 0; padding: 2px 0; overflow-wrap: anywhere; }
  .bi-table td:empty { display: none; }
  .bi-table .bi-amount { text-align: left; }
  .bi-table .bi-unread td, .bi-table .bi-current td { background: none; }
  .bi-table tr.bi-unread { background: var(--matrix-warning-background); color: var(--matrix-text); }
  .bi-table tr.bi-current { background: var(--matrix-surface-subtle); }
  .bi-preview-table td:first-child::before { content: "Line "; }
  .bi-ledger-table td:first-child::before { content: "Row "; }
  .bi-table select { max-width: 100%; }
}