/* UI v3 lane U1 (impl-plan §11 B1a, D-25, D-27, D-28): List Report sheets, grid geometry per
   density, the selection column, the row menu and its «…» column, status words in dense lists and
   the journal pages. Loaded after styles.css (its §9 holds the grid component); tokens only. */

/* List sheet: the card is flattened into the white page; the frame (table and footer) hugs its
   rows and the toolbar sits above it. */
.main-column:has(> .page.page-fill) { background: var(--bg-surface); }
.card.list-sheet { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.list-sheet > .data-grid { border: 0; border-radius: 0; background: transparent; }
.list-sheet .data-grid-toolbar { padding: 6px 0; }
.list-sheet .data-grid > .table-wrap { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--bg-surface); }
.list-sheet .data-grid-footer { border: 1px solid var(--border-hairline); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--bg-subtle); }
.page-fill .list-toolbar { margin-bottom: 0; }
.list-search.has-grid-search { display: flex; align-items: center; gap: 4px; }
.list-search.has-grid-search .grid-search.input { flex: 1 1 auto; }

/* (i) beside the search: the fields it searches, the grid's keys */
.grid-help > .grid-help-button { width: var(--control-sm); height: var(--control-sm); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.grid-help > .grid-help-button:hover, .grid-help[open] > .grid-help-button { background: var(--bg-hover); color: var(--text-primary); }
.grid-help > .grid-help-text { left: 0; right: auto; display: grid; gap: 4px; width: max-content; max-width: min(400px, 80vw); padding: 8px 12px; }
.grid-help-text .grid-help-note, .grid-help-text .grid-help-fields { color: var(--text-primary); }
/* A search in the tabs row (Rechnungen, Lieferantenrechnungen) puts the (i) at the right edge of the
   page: its popover opens to the left, inside the window. */
.list-search .grid-help > .grid-help-text { left: auto; right: 0; }

/* Standard: 32 px rows (§25 cell padding 7 + 18 + 6 + 1) and a 32 px header. */
.data-grid.grid-standard .data-grid-table thead th { padding: 8px 10px; }
.data-grid.grid-standard .grid-sort { width: calc(100% + 20px); min-height: 32px; margin: -8px -10px; padding: 8px 10px; }
.data-grid.grid-standard .data-grid-table .grid-filter-row th { padding: 0 10px 6px; }

/* Selection column, 36 px, outside the column definitions */
.data-grid .data-grid-table :is(th.grid-select-col, td.grid-select-cell) { width: 36px; padding: 0 0 0 12px; }
.data-grid-table :is(th.grid-select-col, td.grid-select-cell) input { display: block; width: 15px; height: 15px; margin: 0; accent-color: var(--primary); cursor: pointer; }
/* The header box sits on the labels' centre line, not on the header's bottom border. */
.data-grid-table th.grid-select-col { vertical-align: middle; }

/* «…» column, 44 px: the row menu (D-28), muted until the row is hovered */
.list-grid th.col-act, .journal-table th.col-act, .journal-table th:nth-child(9) { width: 44px; }
.data-grid .data-grid-table td.row-actions.col-act, .data-table td.row-actions.col-act { padding: 1px 6px; text-align: center; overflow: visible; }
.col-act .row-menu-button.btn { min-width: 28px; min-height: 24px; color: var(--text-muted); }
.col-act .row-menu-button.btn:hover, .col-act .row-menu[open] > .row-menu-button { background: var(--bg-hover); color: var(--text-primary); }
.row-menu .menu-item > kbd, .grid-context-menu .menu-item > kbd { margin-left: auto; }
.grid-context-menu > .menu-list { min-width: 220px; }
/* A long generic entry (e.g. Ablage «Datensatz öffnen: RE-… · Kunde») ends in «…» inside the menu
   (max 360 px) instead of running past it; symbol and key hint keep their size. */
.grid-context-menu .menu-item { min-width: 0; }
.grid-context-menu .menu-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grid-context-menu .menu-item > :is(svg, kbd) { flex-shrink: 0; }

/* List grids: fixed columns and one line per row; amounts, status and «…» keep their width. */
table.list-grid { table-layout: fixed; }
.list-grid th.col-date { width: 100px; }
.list-grid th.col-status { width: 140px; }
.list-grid th.num { width: 124px; }
.list-grid.catalog-table th.num { width: 14%; }
.list-grid th.col-rev { width: 92px; }
/* «Gültig bis» / «Valable jusqu'au» (Offerten): wider than a date; above the date token of u5-scale-layout.css. */
.list-grid th.col-date.col-valid { width: 140px; }
.list-grid th.col-type { width: 150px; }
.list-grid th.col-uid { width: 140px; }
.list-grid th.col-ref { width: 22%; }
.list-grid th.col-time { width: 184px; }
.list-grid th.col-user { width: 170px; }
.list-grid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-grid td.num { overflow: visible; }

/* Status words in dense lists (D-25, C1-P1-7): a dot and the word; only Entwurf, Überfällig and
   errors keep their tint. The word is never the colour alone. */
.list-grid .status-badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; line-height: 18px; }
.list-grid .status-badge::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: var(--radius-full); background: currentColor; vertical-align: middle; }
.list-grid .status-badge:not(.status-draft, .status-overdue, .status-invalid) { padding-left: 0; background: transparent; box-shadow: none; }

/* Sticky right group: data-grid.js marks the trailing amount and «…» cells when the grid
   scrolls sideways (e.g. with more columns shown through «Ansicht»). */
.data-grid-table .grid-sticky-right { position: sticky; z-index: 1; background: var(--bg-surface); }
.data-grid-table thead .grid-sticky-right { z-index: 3; background: var(--surface-2); }
.data-grid.grid-compact .data-grid-table tbody tr:nth-child(even) > .grid-sticky-right { background: var(--zebra); }
.data-grid-table tbody tr:hover > .grid-sticky-right { background: var(--hover); }
.data-grid-table tr.is-selected > .grid-sticky-right { background: var(--selection); }
/* Each sticky cell is its own stacking context: the cell whose row menu is open (the «…» or a
   right-click) lifts above the sticky cells of the following rows, else they cover its menu. */
.data-grid-table td.grid-sticky-right:has(> .row-menu[open]) { z-index: 5; }

/* Tägliche Aufgaben (Liste): the Fällig date and its «n Tage überfällig» badge on one line. */
.worklist-table th:nth-child(4) { width: 232px; }

/* XML-Dateiarchiv (MWST): active once its table carries «list-grid vat-archive-grid» (renderVatReturns,
   routed by the coordinator). Fixed columns keep Vorbereitung in view (gridOverflowX 0 from 1280 px, de
   and fr); Geschäftsreferenz and Prüfnotiz share the rest and clip with their tooltip. */
.vat-archive-grid th:nth-child(1) { width: 172px; }
.vat-archive-grid th:nth-child(3) { width: 132px; }
.vat-archive-grid th:nth-child(4) { width: 200px; }
.vat-archive-grid th:nth-child(5) { width: 124px; }
.vat-archive-grid th:nth-child(6) { width: 150px; }

/* Tab counters count without the grid's own filters: quiet while the grid filters. */
.status-tabs.is-grid-filtered a span { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-hairline); }

/* User menu: Dichte (Kompakt | Standard) */
.density-row .segmented .btn { min-height: 26px; padding: 2px 9px; font-size: var(--text-xs); line-height: var(--lh-xs); }

/* Journal: search and pager in the section head, pages by entry; rows follow the density. */
.journal-head { flex-wrap: wrap; }
.journal-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.journal-tools .field.search { flex: 0 1 320px; min-width: 220px; }
.journal-tools .field.search > .input { min-height: var(--control-sm); height: var(--control-sm); padding: 3px 8px 3px 28px; font-size: var(--text-sm); background: var(--paper) var(--icon-search) no-repeat 8px center / 14px; }
.journal-pager .select { width: auto; min-height: var(--control-sm); height: var(--control-sm); padding: 2px 26px 2px 8px; font-size: var(--text-xs); }
.journal-table th:nth-child(2) { width: 96px; }
html[data-density="compact"] .journal-table th { padding: 5px 8px 6px; }
html[data-density="compact"] .journal-table td { padding: 5px 8px 4px; }
html[data-density="compact"] .journal-table td.row-actions { padding-top: 1px; padding-bottom: 1px; }

@media (forced-colors: active) {
  .filter-chip, .filter-chip-clear, .grid-choice { border-color: CanvasText; }
  .filter-chip-group.is-active .filter-chip, .grid-choice[aria-pressed="true"] { forced-color-adjust: none; background: SelectedItem; color: SelectedItemText; }
  .list-grid .status-badge::before { background: CanvasText; }
}

@media print {
  .grid-select-col, .grid-select-cell, .col-act, .grid-help, .grid-chips, .journal-tools, .grid-context-menu { display: none !important; }
  .page.page-fill { display: block; height: auto; min-height: 0; padding: 0; }
  .page-fill > .list-sheet, .page-fill > .list-sheet > .data-grid { display: block; }
  .page-fill > .list-sheet > .data-grid > .table-wrap { overflow: visible; max-height: none; border: 0; }
  .main-column:has(> .page.page-fill) { background: none; }
  table.list-grid { table-layout: auto; }
  .list-grid td { white-space: normal; overflow: visible; }
}

/* Closed popovers of the grid and the row menus take no box (no layout, not counted as boxes). */
.data-grid details.menu:not([open]) > .menu-list, .row-menu:not([open]) > .menu-list, .grid-help:not([open]) > .grid-help-text { display: none; }

/* Prüfprotokoll rows stay at the density's height: the summary and the closed disclosure share
   the 18 px line. */
.audit-grid td.audit-detail > .audit-summary, .audit-grid td.audit-detail > .audit-details:not([open]) { vertical-align: top; }
.audit-grid .audit-details:not([open]) summary { min-height: 0; line-height: 18px; vertical-align: top; }

/* Office widths below 1366 px: the toolbar keeps one line (shorter search, chips and «Ansicht»). */
@media (max-width: 1365px) {
  .grid-search.input { flex-basis: 200px; width: 200px; }
  .filter-chip { max-width: 150px; }
  .grid-view-menu > .menu-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .grid-view-menu > .menu-button { width: var(--control-sm); padding: 0; }
  /* Beleg sub-text: truncates, then hides (§11 B1a step 4); it stays searchable (data-grid-search). */
  .document-grid .doc-reference { display: none; }
}

/* A lazily built row menu shows no empty box before its entries arrive. */
.row-menu[open] > .menu-list:empty { display: none; }

/* B1b list sums (docs/server-wave-client.md; D-07: the server sums, the browser only shows them): the
   sum row in the grid's foot stays at the bottom of the scrolling list, under the amount columns;
   the label names the rows and what is not in the sum. Ink, never red (D-03). */
.data-grid-table tfoot .grid-sum-row > :is(th, td) { position: sticky; bottom: 0; z-index: 2; padding: 7px 10px 6px; border-top: 1px solid var(--line-strong); border-bottom: 0; background: var(--bg-subtle); color: var(--text-primary); font-size: var(--table-text); font-weight: var(--weight-semibold); vertical-align: middle; white-space: nowrap; }
.data-grid-table tfoot .grid-sum-row > th.grid-sum-label { overflow: hidden; text-overflow: ellipsis; text-align: left; }
.data-grid-table tfoot .grid-sum-row > td.grid-sum-value { text-align: right; font-variant-numeric: tabular-nums; }
.grid-sum-note { margin-left: 10px; color: var(--text-muted); font-weight: var(--weight-regular); }
.grid-sum-row.is-busy > .grid-sum-label .grid-sum-text { color: var(--text-muted); font-weight: var(--weight-regular); }
.data-grid-table tfoot .grid-sum-row > .grid-sticky-right { z-index: 4; }
/* Journal: the sum of the listed entries (all pages) under the entry count. */
.journal-head .list-sum-line { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--text-sm); }
.journal-head .list-sum-line strong { color: var(--text-primary); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.journal-head .list-sum-line .grid-sum-note { margin-left: 8px; }
/* Invoice detail: the payment reference (S72b1) with its copy button on one line. */
/* In a narrow side card the reference and its button move below the label as one unit (never out of the card). */
.meta-row.payment-reference-row { flex-wrap: wrap; row-gap: 2px; align-items: center; }
.payment-reference { display: inline-flex; flex: none; align-items: center; gap: 4px; max-width: 100%; margin-left: auto; }
.payment-reference > strong { white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.payment-reference > .btn.btn-small { flex: none; min-height: 24px; min-width: 26px; padding: 2px 5px; }

@media print {
  .data-grid-table tfoot .grid-sum-row > :is(th, td) { position: static; background: none; }
  .payment-reference > .btn { display: none !important; }
}