/* PbTreeGrid (P0 spike). Separate from pb-controls.css so the grid and the controls phase never edit the same file.
   Design: ProBook.Workspace AI/work/runtime/treegrid-study/10-pbtreegrid-design.md §2.3-2.5. */

.pb-grid {
    /* Grid tokens default to the shared --pb-* theme tokens (pb-controls.css), so one theme change restyles every grid. */
    --pb-grid-line: var(--pb-border, #d9dde3);
    --pb-grid-head-bg: var(--pb-readonly-surface, #f3f5f8);
    --pb-grid-surface: var(--pb-surface, #fff);
    --pb-grid-text: var(--pb-text, #212529);
    --pb-grid-focus: var(--pb-accent, #2563eb);
    --pb-grid-row-focus: #eef4ff;
    --pb-grid-guide: #9aa3ae;
    display: grid;
    grid-template-rows: auto 1fr auto;
    position: relative;
    border: 1px solid var(--pb-grid-line);
    font-size: 13px;
    line-height: var(--pb-grid-row);
    background: var(--pb-grid-surface);
    color: var(--pb-grid-text);
    outline: none;
    overflow: hidden;
}

.pb-grid:focus-visible { box-shadow: 0 0 0 2px var(--pb-grid-focus); }

/* Grid items must not grow to their content width (CSS grid min-width:auto), or the middle pane never scrolls. */
/* One column: every section sits in column 1, so the loading panel, which shares the body's row, lies over the body
   (sections with a row but no column would otherwise be auto-placed side by side in new columns) */
.pb-grid { grid-template-columns: minmax(0, 1fr); }
.pb-grid > * { min-width: 0; grid-column: 1; }

/* Header, body and the horizontal bar reserve the same vertical-scrollbar gutter (scrollbar-gutter: stable), so the
   frozen right columns line up with their header whatever the scrollbar width. */
/* Header */
.pb-grid__head { display: flex; overflow: hidden; scrollbar-gutter: stable; background: var(--pb-grid-head-bg); border-bottom: 1px solid var(--pb-grid-line); font-weight: 600; }
.pb-grid__head-pane { display: flex; flex: none; position: relative; z-index: 1; background: var(--pb-grid-head-bg); }
.pb-grid__head-pane--left { width: var(--pb-grid-left); border-right: 1px solid var(--pb-grid-line); }
.pb-grid__head-pane--right { width: var(--pb-grid-right); border-left: 1px solid var(--pb-grid-line); }
.pb-grid__head-pane--middle { flex: 1 1 auto; overflow: hidden; display: block; z-index: 0; }
/* As wide as its columns (not the visible width), so the lines across the headers and the filter row reach the last
   column when scrolled to the right */
.pb-grid__band { position: relative; will-change: transform; white-space: nowrap; width: max-content; min-width: 100%; }
.pb-grid__head-row, .pb-grid__group-row { display: flex; }
.pb-grid__group { flex: none; box-sizing: border-box; padding: 0 6px; border-right: 1px solid var(--pb-grid-line); border-bottom: 1px solid var(--pb-grid-line); overflow: hidden; text-overflow: ellipsis; height: var(--pb-grid-row); }
.pb-grid__hcell { display: flex; align-items: center; gap: 4px; flex: none; box-sizing: border-box; padding: 0 6px; border-right: 1px solid var(--pb-grid-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: var(--pb-grid-row); cursor: pointer; user-select: none; }

/* Body: one vertical scroller, three panes */
.pb-grid__body { scrollbar-gutter: stable; position: relative; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.pb-grid__canvas { position: relative; width: 100%; }
.pb-grid__pane { position: absolute; top: 0; height: 100%; overflow: hidden; contain: layout paint; }
.pb-grid__pane--left { left: 0; width: var(--pb-grid-left); border-right: 1px solid var(--pb-grid-line); background: var(--pb-grid-surface); z-index: 1; }
.pb-grid__pane--right { right: 0; width: var(--pb-grid-right); border-left: 1px solid var(--pb-grid-line); background: var(--pb-grid-surface); z-index: 1; }
.pb-grid__pane--middle { left: var(--pb-grid-left); right: var(--pb-grid-right); }
.pb-grid__window { position: absolute; top: 0; left: 0; will-change: transform; }
.pb-grid__row { display: flex; height: var(--pb-grid-row); white-space: nowrap; contain: layout style; }
.pb-grid__cblock { display: flex; flex: none; }
.pb-grid__row--focus { background: var(--pb-grid-row-focus); }
.pb-grid__cell { flex: none; box-sizing: border-box; padding: 0 6px; height: var(--pb-grid-row); border-right: 1px solid var(--pb-grid-line); border-bottom: 1px solid var(--pb-grid-line); overflow: hidden; text-overflow: ellipsis; }
.pb-grid__cell--num { text-align: right; font-variant-numeric: tabular-nums; }
.pb-grid__cell--focus { outline: 2px solid var(--pb-grid-focus); outline-offset: -2px; }

/* Tree cell: guides (inline SVG), toggle box, text - one fixed shape */
.pb-grid__cell--tree { display: flex; align-items: center; padding-left: 2px; }
.pb-grid__guides { flex: none; display: block; }
.pb-grid__guides path { stroke: var(--pb-grid-guide); stroke-width: 1; stroke-dasharray: 1 2; fill: none; }
.pb-grid__toggle { flex: none; position: relative; box-sizing: border-box; width: 11px; height: 11px; margin: 0 4px 0 2px; border: 1px solid #8a94a3; background: #fff; cursor: pointer; }
.pb-grid__toggle::before, .pb-grid__toggle::after { content: ""; position: absolute; background: #3b4452; }
.pb-grid__toggle::before { left: 2px; right: 2px; top: 4px; height: 1px; }
.pb-grid__toggle::after { top: 2px; bottom: 2px; left: 4px; width: 1px; }
.pb-grid__toggle--open::after { display: none; }
.pb-grid__toggle--none { border-color: transparent; background: transparent; cursor: default; }
.pb-grid__toggle--none::before, .pb-grid__toggle--none::after { display: none; }
.pb-grid__text { overflow: hidden; text-overflow: ellipsis; }

/* The middle pane's horizontal scrollbar under the body */
/* The bar leaves the vertical scrollbar's width as a margin, not a reserved gutter: Chrome measures a gutter-reserving bar's
   scroll range without the gutter, so it stopped that many pixels short and the rows' right edge never came into view */
.pb-grid__hscroll { margin-left: var(--pb-grid-left); margin-right: calc(var(--pb-grid-right) + var(--pb-sbw, 0px)); overflow-x: scroll; overflow-y: hidden; scrollbar-gutter: auto; height: 17px; border-top: 1px solid var(--pb-grid-line); }

/* Sorting */
.pb-grid__htext { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }
.pb-grid__cell--num .pb-grid__htext { text-align: right; }
.pb-grid__sort { flex: none; font-size: 10px; color: var(--pb-grid-focus); }
.pb-grid__hcell--sorted { color: #1e3a8a; }

/* Frozen header cells fill the header's full height (the middle may have a group band), labels on the bottom line,
   so every column's label lines up with its values. */
.pb-grid__head-pane--left, .pb-grid__head-pane--right { align-items: stretch; }
.pb-grid__head-pane--left .pb-grid__hcell, .pb-grid__head-pane--right .pb-grid__hcell { height: auto; align-items: flex-end; padding-bottom: calc((var(--pb-grid-row) - 1.2em) / 2); line-height: 1.2em; }

/* ---- P1 chrome: toolbar, header rows, filter row, row menu, selection, popups, footer (design §2.8) ---- */
/* Each section has its own row, so a grid without a toolbar or footer (features off) keeps the body in the 1fr row. */
.pb-grid__toolbar { grid-row: 1; }
.pb-grid__head { grid-row: 2; }
.pb-grid__body { grid-row: 3; }
.pb-grid__hscroll { grid-row: 4; }
.pb-grid__footer { grid-row: 5; }
.pb-grid__row--failed { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--pb-grid-required) 10%, transparent) 8px 16px); }
.pb-grid__finput--invalid { border-color: var(--pb-grid-required); background: color-mix(in srgb, var(--pb-grid-required) 8%, var(--pb-grid-surface)); }
.pb-grid { grid-template-rows: auto auto 1fr auto auto; --pb-grid-sel: rgba(37, 99, 235, 0.14); --pb-grid-required: var(--pb-required, #dc2626); --pb-grid-muted: var(--pb-muted, #6b7280); }
.pb-grid__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--pb-grid-line); background: var(--pb-grid-head-bg); flex-wrap: nowrap; }
.pb-grid__toolbar-left, .pb-grid__toolbar-right { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.pb-grid__btn { border: 1px solid transparent; background: transparent; padding: 2px 8px; height: 26px; border-radius: 4px; cursor: pointer; color: inherit; font: inherit; }
.pb-grid__btn:hover:not(:disabled, [aria-disabled="true"]) { background: rgba(0,0,0,0.06); border-color: var(--pb-grid-line); }
.pb-grid__btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: default; }
.pb-grid__btn--level { min-width: 26px; padding: 2px 6px; border-color: var(--pb-grid-line); }
.pb-grid__levels { display: inline-flex; gap: 2px; margin-left: 6px; }
.pb-grid__search { height: 26px; padding: 0 8px; border: 1px solid var(--pb-grid-line); border-radius: 4px; min-width: 220px; margin-left: 8px; }
.pb-grid__head-rows { display: flex; flex-direction: column; height: 100%; }
.pb-grid__head-rows > .pb-grid__head-row { flex: 1 1 auto; align-items: stretch; }
.pb-grid__head-rows > .pb-grid__head-row > .pb-grid__hcell { height: auto; align-items: flex-end; padding-bottom: calc((var(--pb-grid-row) - 1.2em) / 2); line-height: 1.2em; }
.pb-grid__hcell { position: relative; }
.pb-grid__hcell--sortable { cursor: pointer; }
.pb-grid__required { color: var(--pb-grid-required); margin-right: 2px; }
.pb-grid__resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.pb-grid__corner { cursor: pointer; }
.pb-grid__filter-row { display: flex; border-top: 1px solid var(--pb-grid-line); font-weight: normal; }
.pb-grid__fcell { flex: none; box-sizing: border-box; height: calc(var(--pb-grid-row) + 4px); padding: 2px 3px; border-right: 1px solid var(--pb-grid-line); display: flex; align-items: center; gap: 2px; }
.pb-grid__finput { flex: 1 1 auto; min-width: 0; height: 22px; box-sizing: border-box; padding: 0 4px; border: 1px solid var(--pb-grid-line); border-radius: 3px; font: inherit; font-size: 12px; background: var(--pb-grid-surface); color: inherit; }
.pb-grid__fclear { border: none; background: transparent; cursor: pointer; padding: 0 3px; color: var(--pb-grid-muted); }
.pb-grid__menu { flex: none; box-sizing: border-box; height: var(--pb-grid-row); border-right: 1px solid var(--pb-grid-line); border-bottom: 1px solid var(--pb-grid-line); cursor: pointer; position: relative; }
.pb-grid__menu::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -2px 0 0 -4px; border: 4px solid transparent; border-top-color: var(--pb-grid-muted); }
.pb-grid__menu:hover { background: rgba(0,0,0,0.06); }
.pb-grid__cell--sel { background: var(--pb-grid-sel); }
.pb-grid__row--selected .pb-grid__menu { background: var(--pb-grid-sel); }
.pb-grid__cell--center { text-align: center; }
.pb-grid__tick { color: #16a34a; }
.pb-grid__cell--image { padding: 2px; }
.pb-grid__img { display: block; height: calc(var(--pb-grid-row) - 4px); width: 100%; object-fit: contain; background: #f3f4f6; }
.pb-grid__img-text { display: inline-flex; align-items: center; justify-content: center; height: calc(var(--pb-grid-row) - 4px); aspect-ratio: 1; border-radius: 50%; background: #d1d5db; color: #374151; font-size: 0.75em; font-weight: 600; }
.pb-grid__row--loading .pb-grid__cell { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: pb-grid-shimmer 1.2s infinite linear; }
@keyframes pb-grid-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.pb-grid__row--context .pb-grid__cell { color: var(--pb-grid-muted); }
/* Inactive rows are greyed out, as in XtGrid (5.0:1 text contrast); selected, changed and invalid cells keep their colours */
.pb-grid__row--inactive .pb-grid__cell:not(.pb-grid__cell--sel):not(.pb-grid__cell--changed):not(.pb-grid__cell--invalid),
.pb-grid__row--inactive:not(.pb-grid__row--selected):not(.pb-grid__row--invalid) .pb-grid__menu { background: var(--pb-grid-inactive-surface, #eeeeee); color: var(--pb-grid-inactive-text, #5f666d); }
.pb-grid__popup { line-height: 1.4; /* not the grid's row line height */ position: absolute; z-index: 20; min-width: 200px; max-height: 360px; overflow: auto; background: var(--pb-grid-surface); color: var(--pb-grid-text); border: 1px solid var(--pb-grid-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 4px; display: flex; flex-direction: column; gap: 2px; font-weight: normal; }
.pb-grid__menuitem { display: flex; justify-content: space-between; gap: 16px; text-align: left; border: none; background: transparent; padding: 4px 10px; line-height: 1.4; border-radius: 4px; cursor: pointer; font: inherit; color: inherit; }
.pb-grid__menuitem:hover:not(:disabled) { background: var(--pb-grid-sel); }
.pb-grid__menuitem:disabled { opacity: 0.45; cursor: default; }
.pb-grid__shortcut, .pb-grid__menuempty { color: var(--pb-grid-muted); }
.pb-grid__chooser-item { display: block; padding: 3px 8px; white-space: nowrap; cursor: pointer; }
.pb-grid__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; border-top: 1px solid var(--pb-grid-line); background: var(--pb-grid-head-bg); }
.pb-grid__pager { display: inline-flex; border: 1px solid var(--pb-grid-line); border-radius: 4px; }
.pb-grid__btn--page { border-radius: 0; min-width: 30px; }
.pb-grid__status { flex: 1 1 auto; color: var(--pb-grid-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-grid__count { white-space: nowrap; }

/* ---- Activity indicator: only while the user waits (design: first rows, or a row expanded before its children came) ---- */
.pb-grid__loading { grid-row: 3; align-self: center; justify-self: center; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--pb-grid-line); border-radius: 8px; background: var(--pb-grid-surface); color: var(--pb-grid-text); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); pointer-events: none; font-weight: normal; }
.pb-grid__spinner { display: inline-block; flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 3px solid var(--pb-grid-line); border-top-color: var(--pb-grid-focus); border-radius: 50%; animation: pb-grid-spin 0.8s linear infinite; }
/* A row expanded before its children arrived: a small spinner where its expander was */
.pb-grid__toggle--waiting { border: none; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.pb-grid__toggle--waiting::before, .pb-grid__toggle--waiting::after { display: none; }
.pb-grid__spinner--row { width: 11px; height: 11px; border-width: 2px; }
/* Refresh: an icon in the header's right corner, spinning while the refresh runs */
.pb-grid__btn--icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; }
.pb-grid__icon { display: inline-block; width: 16px; height: 16px; }
.pb-grid__icon--refresh { background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.pb-grid__btn--refresh.is-busy .pb-grid__icon--refresh { animation: pb-grid-spin 0.9s linear infinite; }
/* Data loading behind the rows on screen: a small pulsing icon at the right of the footer */
.pb-grid__bgload { display: inline-flex; align-items: center; flex: none; margin-left: 8px; color: var(--pb-grid-focus); }
.pb-grid__bgload-icon { display: inline-block; width: 14px; height: 14px; background: currentColor; animation: pb-grid-pulse 1s ease-in-out infinite alternate; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E") center / contain no-repeat; }
.pb-grid__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@keyframes pb-grid-pulse { from { opacity: 1; } to { opacity: 0.25; } }
@keyframes pb-grid-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pb-grid__spinner, .pb-grid__btn--refresh.is-busy .pb-grid__icon--refresh { animation-duration: 2.4s; }
    .pb-grid__bgload-icon { animation-duration: 2.4s; }
}

/* ---- P2 editing (design §5, §7, §8): edit toolbar, changed / invalid cells, row markers, cell editor, form panel,
   row drag. Errors use the shared invalid tokens (pb-controls.css), so the grid's red is the app's red. ---- */
.pb-grid { grid-template-rows: auto auto auto 1fr auto auto; --pb-grid-invalid-border: var(--pb-invalid-border, #e4707c); --pb-grid-invalid-surface: var(--pb-invalid-surface, #fef7f8); --pb-grid-invalid-text: var(--pb-invalid-text, #dc3545); --pb-grid-changed: #fff7d6; --pb-grid-changed-mark: #e0a800; --pb-grid-added-mark: #2e9e4f; }
.pb-grid__editbar { grid-row: 2; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-bottom: 1px solid var(--pb-grid-line); background: var(--pb-grid-surface); flex-wrap: wrap; font-weight: normal; }
.pb-grid__head { grid-row: 3; }
.pb-grid__body, .pb-grid__loading { grid-row: 4; }
.pb-grid__hscroll { grid-row: 5; }
.pb-grid__footer { grid-row: 6; }
.pb-grid__editbar .pb-grid__btn { border-color: var(--pb-grid-line); }
.pb-grid__btn--primary:not(:disabled, [aria-disabled="true"]) { background: var(--pb-grid-focus); border-color: var(--pb-grid-focus); color: #fff; }
.pb-grid__btn--primary:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--pb-grid-focus) 85%, #000); }
.pb-grid__editbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.pb-grid__pending { color: var(--pb-grid-muted); }
.pb-grid__errnav { display: inline-flex; gap: 2px; }
.pb-grid__errnav.has-errors .pb-grid__btn--errors { color: var(--pb-grid-invalid-text); border-color: var(--pb-grid-invalid-border); background: var(--pb-grid-invalid-surface); font-weight: 600; }

.pb-grid__cell--changed { background: var(--pb-grid-changed); }
.pb-grid__cell--invalid { background: var(--pb-grid-invalid-surface); box-shadow: inset 0 0 0 2px var(--pb-grid-invalid-text); color: var(--pb-grid-invalid-text); }
/* An empty required cell says what it needs (a new row shows at once what must be filled in) */
.pb-grid__cell--missing::after { content: "Required"; color: var(--pb-grid-invalid-text); font-style: italic; font-weight: 600; }
.pb-grid__row--changed .pb-grid__menu { box-shadow: inset 4px 0 0 var(--pb-grid-changed-mark); }
.pb-grid__row--added .pb-grid__menu { box-shadow: inset 4px 0 0 var(--pb-grid-added-mark); }
.pb-grid__row--invalid .pb-grid__menu { box-shadow: inset 4px 0 0 var(--pb-grid-invalid-border); background: var(--pb-grid-invalid-surface); }

/* The editor covers its own cell only: its ring is drawn inside the cell, never over the cells beside it */
.pb-grid__editor { position: absolute; z-index: 15; box-sizing: border-box; background: var(--pb-grid-surface); box-shadow: inset 0 0 0 2px var(--pb-grid-focus); font-weight: normal; }
.pb-grid__editor.is-invalid { box-shadow: inset 0 0 0 2px var(--pb-grid-invalid-border); }
/* A picker's or a list's editor opens over the cells below, as a dropdown does, so it keeps its shadow */
.pb-grid__editor.has-component, .pb-grid__editor:has(.pb-grid__editor-list, textarea, .pb-grid__editor-error) { box-shadow: inset 0 0 0 2px var(--pb-grid-focus), 0 4px 12px rgba(0,0,0,0.15); }
.pb-grid__editor.is-invalid:has(.pb-grid__editor-error) { box-shadow: inset 0 0 0 2px var(--pb-grid-invalid-border), 0 4px 12px rgba(0,0,0,0.15); }
.pb-grid__editor-input { display: block; width: 100%; box-sizing: border-box; height: var(--pb-grid-row); border: none; outline: none; padding: 0 6px; font: inherit; color: inherit; background: transparent; }
textarea.pb-grid__editor-input { height: 80px; line-height: 1.3; padding: 4px 6px; resize: vertical; }
.pb-grid__editor-error { padding: 2px 6px; font-size: 12px; line-height: 1.3; color: var(--pb-grid-invalid-text); background: var(--pb-grid-invalid-surface); white-space: normal; }

.pb-grid__menuhead { padding: 4px 10px; font-weight: 600; color: var(--pb-grid-muted); }
.pb-grid__menuitem.is-error { color: var(--pb-grid-invalid-text); white-space: normal; }
.pb-grid__menuitem.is-muted { color: var(--pb-grid-muted); }
.pb-grid__notice { padding: 3px 10px; color: var(--pb-grid-muted); white-space: normal; }
.pb-grid__history, .pb-grid__errlist, .pb-grid__picker { display: flex; flex-direction: column; gap: 2px; max-width: 560px; }
.pb-grid__picker .pb-grid__finput { margin: 2px 6px 4px; }

.pb-grid__form { position: absolute; z-index: 12; top: 0; right: 0; bottom: 0; width: min(360px, 90%); overflow: auto; background: var(--pb-grid-surface); border-left: 1px solid var(--pb-grid-line); box-shadow: -6px 0 18px rgba(0,0,0,0.12); padding: 8px 12px; line-height: 1.4; font-weight: normal; }
.pb-grid__form-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pb-grid__form-head strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-grid__form-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pb-grid__form-field label { font-size: 12px; color: var(--pb-grid-muted); }
.pb-grid__form-field .pb-grid__finput { width: 100%; box-sizing: border-box; }
.pb-grid__form-field textarea.pb-grid__finput { min-height: 70px; }
.pb-grid__form-field.is-changed .pb-grid__finput { background: var(--pb-grid-changed); }
.pb-grid__form-field.is-invalid .pb-grid__finput { border-color: var(--pb-grid-invalid-border); background: var(--pb-grid-invalid-surface); }
.pb-grid__form-field.is-invalid label, .pb-grid__form-error, .pb-grid__form-rowerror { color: var(--pb-grid-invalid-text); }
.pb-grid__form-error { font-size: 12px; }
.pb-grid__form-rowerror { margin-bottom: 8px; padding: 4px 8px; background: var(--pb-grid-invalid-surface); border: 1px solid var(--pb-grid-invalid-border); border-radius: 4px; }
.pb-grid__form-value { min-height: 1.4em; color: var(--pb-grid-muted); }

.pb-grid[data-pb-edit="1"] .pb-grid__menu { cursor: pointer; } /* a click opens the row menu; press and hold picks the row up */
.pb-grid.is-row-hold, .pb-grid.is-row-hold * { cursor: grabbing !important; user-select: none; }
.pb-grid__row--hold .pb-grid__cell, .pb-grid__row--hold .pb-grid__menu { background: color-mix(in srgb, var(--pb-grid-focus) 16%, transparent); box-shadow: inset 0 1px 0 var(--pb-grid-focus), inset 0 -1px 0 var(--pb-grid-focus); }
.pb-grid.is-row-drag, .pb-grid.is-row-drag * { cursor: grabbing !important; user-select: none; }
.pb-grid__row--drop { background: color-mix(in srgb, var(--pb-grid-focus) 18%, transparent) !important; box-shadow: inset 0 -2px 0 var(--pb-grid-focus); }
.pb-grid.is-drop-top .pb-grid__head { box-shadow: inset 0 -3px 0 var(--pb-grid-focus); }
.pb-grid__ghost { position: absolute; z-index: 30; pointer-events: none; padding: 4px 8px; border-radius: 4px; background: var(--pb-grid-text); color: var(--pb-grid-surface); font-size: 12px; line-height: 1.3; font-weight: normal; white-space: nowrap; }
.pb-grid__editor-input.pb-grid__editor-list { height: auto; max-height: 260px; padding: 2px 0; overflow-y: auto; }
.pb-grid__editor-list option { padding: 3px 8px; line-height: 1.4; }
/* The chosen option is white on the accent colour, readable whether or not the list has the focus */
.pb-grid__editor-list option:checked { box-shadow: inset 0 0 0 100px var(--pb-grid-focus); color: #fff !important; }
/* In an editable grid the row handle is a grip (drag to move; click for the row's actions) */
.pb-grid[data-pb-edit] .pb-grid__menu::after { margin: 0; left: 4px; top: 50%; width: 8px; height: 14px; transform: translateY(-50%); border: 0; background: radial-gradient(circle, var(--pb-grid-muted) 1.2px, transparent 1.6px) 0 0 / 4px 4px; opacity: 0.7; }
/* The row menu caret stays beside the grip: the grip drags the row, a click opens the row menu */
.pb-grid[data-pb-edit] .pb-grid__menu::before { content: ""; position: absolute; right: 4px; top: 50%; margin-top: -2px; border: 4px solid transparent; border-top-color: var(--pb-grid-muted); }
.pb-grid[data-pb-edit="1"] .pb-grid__menu:hover::after { opacity: 1; }
.pb-grid[data-pb-edit="1"] .pb-grid__cell--tree { cursor: text; }
.pb-grid__editor.has-prefix { display: flex; align-items: center; flex-wrap: wrap; }
.pb-grid__editor.has-prefix .pb-grid__editor-input { flex: 1 1 40px; width: auto; min-width: 40px; }
.pb-grid__editor-prefix { padding-left: 6px; opacity: 0.6; white-space: nowrap; user-select: none; }
.pb-grid__editor.has-prefix .pb-grid__editor-error { flex-basis: 100%; }
.pb-grid__menusep { height: 1px; margin: 4px 6px; background: var(--pb-grid-line); }
.pb-grid__prefix { opacity: 0.55; }
.pb-grid__formdialog { position: static; font-weight: normal; line-height: normal; }

/* Leaving the page with unsaved changes: the app's own dialog (not the browser's) over a dimmed page */
.pb-grid__leave-backdrop { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); font-weight: normal; line-height: 1.45; white-space: normal; animation: pb-grid-fade 0.12s ease-out; }
.pb-grid__leave { width: min(540px, 100%); box-sizing: border-box; padding: 22px 24px 18px; border: 1px solid var(--pb-grid-line); border-radius: 10px; background: var(--pb-grid-surface); color: var(--pb-grid-text); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); animation: pb-grid-rise 0.14s ease-out; }
.pb-grid__leave-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pb-grid__leave-head h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.pb-grid__leave-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--pb-grid-changed-mark) 22%, transparent); color: var(--pb-grid-changed-mark); font-weight: 700; font-size: 16px; }
.pb-grid__leave p { margin: 0 0 6px; font-size: 14px; }
.pb-grid__leave-hint { color: var(--pb-grid-muted); }
.pb-grid__leave-error { margin-top: 10px !important; padding: 8px 10px; border-radius: 6px; background: var(--pb-grid-invalid-surface); color: var(--pb-grid-invalid-text); border: 1px solid var(--pb-grid-invalid-border); }
.pb-grid__leave-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pb-grid__leave-actions .pb-grid__btn { height: 34px; padding: 0 14px; border-color: var(--pb-grid-line); }
/* The Save question: one line per kind of change, the number right-aligned; a kind with none is muted */
.pb-grid__save-ask { width: min(400px, 100%); }
.pb-grid__save-icon { background: color-mix(in srgb, var(--pb-grid-focus) 18%, transparent); color: var(--pb-grid-focus); }
.pb-grid__save-counts { margin: 4px 0 8px; padding: 0; }
.pb-grid__save-count { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 2px; border-bottom: 1px solid var(--pb-grid-line); font-size: 14px; }
.pb-grid__save-count:last-child { border-bottom: 0; }
.pb-grid__save-count dt { font-weight: normal; }
.pb-grid__save-count dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-grid__save-count.is-zero { color: var(--pb-grid-muted); }
.pb-grid__save-count.is-zero dd { font-weight: normal; }
.pb-grid__btn--danger:not(:disabled, [aria-disabled="true"]) { color: var(--pb-grid-invalid-text); border-color: var(--pb-grid-invalid-border); }
.pb-grid__btn--danger:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--pb-grid-invalid-border) 15%, transparent); }
@keyframes pb-grid-fade { from { opacity: 0; } }
@keyframes pb-grid-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pb-grid__leave-backdrop, .pb-grid__leave { animation: none; } }
.pb-grid__lookup-list { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--pb-grid-line); background: var(--pb-grid-surface); }
.pb-grid__lookup-option { padding: 3px 8px; line-height: 1.4; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-grid__lookup-option:hover { background: var(--pb-grid-sel); }
.pb-grid__lookup-option.is-active { box-shadow: inset 0 0 0 100px var(--pb-grid-focus); color: #fff; }
.pb-grid__lookup-option.is-current { font-weight: 600; }
.pb-grid__lookup-note { padding: 3px 8px; line-height: 1.4; opacity: 0.7; }
.pb-grid__lookup-note.is-error { color: var(--pb-grid-invalid-text); opacity: 1; }
.pb-grid__lookup-more { cursor: pointer; text-decoration: underline; }
/* A hosted component editor (a standard dropdown): wide enough for its text, no form margins */
/* It sits in the row like the other cell editors: the row's height, no floating label (the column header names it),
   no box of its own (the editor's focus outline is the box) */
.pb-grid__editor.has-component { min-width: 320px; padding: 0; }
.pb-grid__editor-host .pb-field { margin: 0; padding-top: 0; --pb-box-height: var(--pb-grid-row); }
.pb-grid__editor-host .col { padding: 0; }
.pb-grid__editor-host .pb-field__label { display: none; }
.pb-grid__editor-host .pb-field__box { border: 0; border-radius: 0; box-shadow: none; background: var(--pb-grid-surface); }
.pb-grid__editor-host .pb-field__input { padding: 0 6px; }
/* Its list is as wide as its longest entry (up to the window), so entries do not wrap */
.pb-grid__editor-host .pb-popup { width: max-content !important; min-width: 320px; max-width: min(720px, calc(100vw - 16px)) !important; }
.pb-grid__editor-host .pb-popup { line-height: 1.35; } /* not the grid's row line height */
.pb-grid__editor-host .pb-popup .pb-option { white-space: nowrap; min-height: 28px; padding: 4px 10px; }

/* A dialog whose header holds its actions (OK, Cancel) instead of a close ×: the header spans the dialog (the theme
   keeps 20% free for the ×) and the buttons sit at its right */
.e-dialog.pb-dialog--header-actions .e-dlg-header { width: 100%; overflow: visible; }
.e-dialog.pb-dialog--header-actions .e-dlg-header-content { padding-top: 10px; padding-bottom: 10px; }

/* ---- One header row (user direction 2026-10-11): icon buttons like the app's other grids, editing tools first, the
   search behind a magnifying glass. Icons are masks drawn in the button's text colour, so they follow the theme. ---- */
.pb-grid__toolbar { padding: 3px 8px; gap: 6px; font-weight: normal; }
.pb-grid__toolbar .pb-grid__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 0; white-space: nowrap; }
.pb-grid__toolbar .pb-grid__btn:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, currentColor 10%, transparent); }
.pb-grid__toolbar .pb-grid__btn--icon { width: 30px; padding: 0; justify-content: center; }
.pb-grid__toolbar .pb-grid__btn--primary:not(:disabled, [aria-disabled="true"]) { background: var(--pb-grid-focus); color: #fff; }
.pb-grid__toolbar .pb-grid__btn--primary:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--pb-grid-focus) 85%, #000); }
.pb-grid__btn--menu:not(.pb-grid__btn--icon)::after { content: ""; flex: none; margin-top: 3px; border: 4px solid transparent; border-top-color: currentColor; opacity: 0.7; }
.pb-grid__searchbox { display: inline-flex; align-items: center; position: relative; }
.pb-grid__searchbox::before { content: ""; position: absolute; left: 8px; width: 16px; height: 16px; background: currentColor; opacity: 0.6; pointer-events: none; -webkit-mask: var(--pb-grid-ico-search) center / contain no-repeat; mask: var(--pb-grid-ico-search) center / contain no-repeat; }
.pb-grid__searchbox .pb-grid__search { height: 30px; margin: 0; padding-left: 30px; width: 240px; min-width: 0; background: var(--pb-grid-surface); color: inherit; font: inherit; animation: pb-grid-grow 0.15s ease-out; }
@keyframes pb-grid-grow { from { width: 30px; opacity: 0.4; } }
.pb-grid__errnav.has-errors .pb-grid__btn--errors { border: 1px solid var(--pb-grid-invalid-border); }

/* A load running behind rows already on screen (Load, Refresh): a bar moving along under the header */
.pb-grid__head { position: relative; }
.pb-grid__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: 3; overflow: hidden; background: color-mix(in srgb, var(--pb-grid-focus) 18%, transparent); pointer-events: none; }
.pb-grid__progress::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--pb-grid-focus); animation: pb-grid-progress 1.1s ease-in-out infinite; }
@keyframes pb-grid-progress { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .pb-grid__progress::before { animation-duration: 3s; } .pb-grid__searchbox .pb-grid__search { animation: none; } }

.pb-grid { --pb-grid-ico-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E"); --pb-grid-ico-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --pb-grid-ico-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11l3 3v13H5z'/%3E%3Cpath d='M8 4v5h7V4'/%3E%3Cpath d='M8 20v-6h8v6'/%3E%3C/svg%3E"); --pb-grid-ico-discard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); --pb-grid-ico-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); --pb-grid-ico-redo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H10a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E"); --pb-grid-ico-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --pb-grid-ico-columns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='7' height='16' rx='1'/%3E%3Crect x='14' y='4' width='7' height='16' rx='1'/%3E%3C/svg%3E"); --pb-grid-ico-excel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8.5 8l7 8M15.5 8l-7 8'/%3E%3C/svg%3E"); --pb-grid-ico-filter-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h14l-5.5 7v6l-3 2v-8z'/%3E%3Cpath d='M16 14l5 5M21 14l-5 5'/%3E%3C/svg%3E"); --pb-grid-ico-export: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M7 8l5-5 5 5'/%3E%3Cpath d='M4 15v5h16v-5'/%3E%3C/svg%3E"); --pb-grid-ico-import: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 15v5h16v-5'/%3E%3C/svg%3E"); --pb-grid-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); --pb-grid-ico-save-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 6H3a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h15a1 1 0 0 0 1-1v-6.5'/%3E%3Cpath d='M2 10.5h8.5M7.5 10.5V21'/%3E%3Cpath d='M13 1.5h7l2.5 2.5v7.5H13z'/%3E%3Cpath d='M15.5 1.5v3h4v-3M15.5 11.5V8.5h4.5v3'/%3E%3C/svg%3E"); --pb-grid-ico-remove-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); --pb-grid-ico-errors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); --pb-grid-ico-error-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); --pb-grid-ico-error-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); --pb-grid-ico-levels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v15h4M5 11h4'/%3E%3Cpath d='M12 5h8M12 11h8M12 18h8'/%3E%3C/svg%3E"); }
.pb-grid__btn--add::before, .pb-grid__btn--save::before, .pb-grid__btn--discard::before, .pb-grid__btn--undo::before, .pb-grid__btn--redo::before, .pb-grid__btn--history::before, .pb-grid__btn--columns::before, .pb-grid__btn--excel::before, .pb-grid__btn--filter-clear::before, .pb-grid__btn--export::before, .pb-grid__btn--import::before, .pb-grid__btn--search::before, .pb-grid__btn--save-layout::before, .pb-grid__btn--remove-layout::before, .pb-grid__btn--errors::before, .pb-grid__btn--error-prev::before, .pb-grid__btn--error-next::before, .pb-grid__btn--levels::before, .pb-grid__toolbar .pb-grid__btn--refresh::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pb-grid-ico) center / contain no-repeat; mask: var(--pb-grid-ico) center / contain no-repeat; }
.pb-grid__btn--add { --pb-grid-ico: var(--pb-grid-ico-add); }
.pb-grid__btn--save { --pb-grid-ico: var(--pb-grid-ico-save); }
.pb-grid__btn--discard { --pb-grid-ico: var(--pb-grid-ico-discard); }
.pb-grid__btn--undo { --pb-grid-ico: var(--pb-grid-ico-undo); }
.pb-grid__btn--redo { --pb-grid-ico: var(--pb-grid-ico-redo); }
.pb-grid__btn--history { --pb-grid-ico: var(--pb-grid-ico-history); }
.pb-grid__btn--columns { --pb-grid-ico: var(--pb-grid-ico-columns); }
.pb-grid__btn--excel { --pb-grid-ico: var(--pb-grid-ico-excel); }
.pb-grid__btn--filter-clear { --pb-grid-ico: var(--pb-grid-ico-filter-clear); }
.pb-grid__btn--export { --pb-grid-ico: var(--pb-grid-ico-export); }
.pb-grid__btn--import { --pb-grid-ico: var(--pb-grid-ico-import); }
.pb-grid__btn--search { --pb-grid-ico: var(--pb-grid-ico-search); }
.pb-grid__btn--save-layout { --pb-grid-ico: var(--pb-grid-ico-save-layout); }
.pb-grid__btn--remove-layout { --pb-grid-ico: var(--pb-grid-ico-remove-layout); }
.pb-grid__btn--errors { --pb-grid-ico: var(--pb-grid-ico-errors); }
.pb-grid__btn--error-prev { --pb-grid-ico: var(--pb-grid-ico-error-prev); }
.pb-grid__btn--error-next { --pb-grid-ico: var(--pb-grid-ico-error-next); }
.pb-grid__btn--levels { --pb-grid-ico: var(--pb-grid-ico-levels); }
.pb-grid__toolbar .pb-grid__btn--refresh { --pb-grid-ico: var(--pb-grid-ico-refresh); }
.pb-grid__toolbar .pb-grid__icon--refresh { display: none; }
.pb-grid__toolbar .pb-grid__btn--refresh.is-busy::before { animation: pb-grid-spin 0.9s linear infinite; }
/* Kept to one line: while the search box is open, or on a narrow grid, the secondary buttons show their icon only
   (their name stays as the tooltip); Add, Save and Cancel keep their labels */
.pb-grid__toolbar { container: pb-grid-toolbar / inline-size; }
.pb-grid__toolbar.is-searching .pb-grid__btn:not(.pb-grid__btn--add, .pb-grid__btn--save, .pb-grid__btn--discard, .pb-grid__btn--more, .pb-grid__layouts) { font-size: 0; gap: 0; }
.pb-grid__toolbar.is-searching .pb-grid__btn--menu:not(.pb-grid__btn--add, .pb-grid__btn--more, .pb-grid__layouts)::after { display: none; }
.pb-grid__toolbar.is-searching .pb-grid__layouts-label { display: none; }
@container pb-grid-toolbar (max-width: 1150px) {
    .pb-grid__btn:not(.pb-grid__btn--add, .pb-grid__btn--save, .pb-grid__btn--discard, .pb-grid__btn--more, .pb-grid__layouts) { font-size: 0; gap: 0; }
    .pb-grid__btn--menu:not(.pb-grid__btn--add, .pb-grid__btn--more, .pb-grid__layouts)::after { display: none; }
    .pb-grid__layouts-label { display: none; }
}
.pb-grid__searchbox .pb-grid__search { width: 220px; }
/* Export: a click gives Excel, the arrow beside it lists the formats */
.pb-grid__split { display: inline-flex; align-items: center; }
.pb-grid__toolbar .pb-grid__split .pb-grid__btn--export, .pb-grid__toolbar .pb-grid__split .pb-grid__btn--levels { padding-right: 4px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pb-grid__toolbar .pb-grid__split .pb-grid__btn--export-menu, .pb-grid__toolbar .pb-grid__split .pb-grid__btn--levels-menu { width: 18px; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pb-grid__toolbar .pb-grid__split .pb-grid__btn.pb-grid__btn--export-menu::after, .pb-grid__toolbar .pb-grid__split .pb-grid__btn.pb-grid__btn--levels-menu::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; opacity: 0.7; display: block; }
/* Footer (user direction 2026-10-11): the row count; for server-paged rows a pager of clear, large buttons in one group */
.pb-grid__footer { padding: 6px 8px; min-height: 34px; }
.pb-grid__count { color: var(--pb-grid-muted); white-space: nowrap; }
.pb-grid__pager { display: inline-flex; border: 1px solid var(--pb-grid-line); border-radius: 4px; overflow: hidden; }
.pb-grid__pager .pb-grid__btn--page { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0; border: 0; border-radius: 0; }
.pb-grid__pager .pb-grid__btn--page + .pb-grid__btn--page { border-left: 1px solid var(--pb-grid-line); }
.pb-grid__pager .pb-grid__btn--page:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, currentColor 10%, transparent); }
.pb-grid__pager .pb-grid__btn--page::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pb-grid-ico) center / contain no-repeat; mask: var(--pb-grid-ico) center / contain no-repeat; }
.pb-grid__btn--page-first { --pb-grid-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 6l-6 6 6 6M18 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.pb-grid__btn--page-prev { --pb-grid-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.pb-grid__btn--page-next { --pb-grid-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.pb-grid__btn--page-last { --pb-grid-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l6 6-6 6M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
/* Sort marker (user direction 2026-10-11): an arrow with bars at the heading's right, not a triangle */
.pb-grid__sort { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; padding-left: 4px; font-size: 10px; font-weight: 600; color: var(--pb-grid-focus); }
.pb-grid__sort.is-asc::before, .pb-grid__sort.is-desc::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--pb-grid-sort-ico) center / contain no-repeat; mask: var(--pb-grid-sort-ico) center / contain no-repeat; }
.pb-grid__sort.is-asc { --pb-grid-sort-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20V4M3 8l4-4 4 4'/%3E%3Cpath d='M14 6h3M14 12h5M14 18h7'/%3E%3C/svg%3E"); }
.pb-grid__sort.is-desc { --pb-grid-sort-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3 16l4 4 4-4'/%3E%3Cpath d='M14 6h7M14 12h5M14 18h3'/%3E%3C/svg%3E"); }
.pb-grid__htext { overflow: hidden; text-overflow: ellipsis; }
/* Editing not started yet (EditingPending, rows still loading): the row handles show, dimmed, so nothing appears later */
.pb-grid[data-pb-edit="wait"] .pb-grid__menu::after, .pb-grid[data-pb-edit="wait"] .pb-grid__menu::before { opacity: 0.35; }
/* Dropping beside a row (its top or bottom edge): a line between the rows, the dragged row goes on that row's level */
.pb-grid__row--drop-before .pb-grid__cell, .pb-grid__row--drop-before .pb-grid__menu { box-shadow: inset 0 3px 0 var(--pb-grid-focus); }
.pb-grid__row--drop-after .pb-grid__cell, .pb-grid__row--drop-after .pb-grid__menu { box-shadow: inset 0 -3px 0 var(--pb-grid-focus); }
/* The grid's tooltip (pb-grid.js attachTips): beside the pointer, not under it. On the page body, so it is not clipped */
/* The tip is placed in the dialog the grid sits in (pb-grid.js, layerOf), so a dialog's own z-index never covers it */
.pb-grid__tip { position: fixed; z-index: 10000; max-width: 360px; padding: 4px 8px; border-radius: 4px; background: #2b2f36; color: #f3f4f6; font-size: 12px; line-height: 1.35; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); pointer-events: none; white-space: normal; }
.pb-grid__tip[hidden] { display: none; }
/* An error's tip (a cell marked invalid): the inputs' error colours, bordered so it stands out on a dark page too */
.pb-grid__tip--error { background: var(--pb-invalid-surface, #fef7f8); color: var(--pb-invalid-text, #dc3545); border: 1px solid var(--pb-invalid-border, #e4707c); font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
/* Moving a column: its header dims, a line shows where it goes */
.pb-grid.is-col-drag, .pb-grid.is-col-drag * { cursor: grabbing !important; user-select: none; }
.pb-grid__hcell--moving { opacity: 0.45; }
.pb-grid__hcell--drop-before { box-shadow: inset 3px 0 0 var(--pb-grid-focus); }
.pb-grid__hcell--drop-after { box-shadow: inset -3px 0 0 var(--pb-grid-focus); }
/* The layout controls as one group: save icon, the saved layouts, remove */
.pb-grid__layoutbar { display: inline-flex; align-items: center; gap: 2px; }
/* The Save Layout dialog (as today's grids): the name in an outlined box with its label on the border, then the scopes */
.pb-grid__layoutdialog { width: min(380px, 100%); }
.pb-grid__layoutdialog h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; }
.pb-grid__fieldset { position: relative; display: block; margin: 0 0 10px; }
.pb-grid__legend { position: absolute; top: -8px; left: 10px; padding: 0 4px; background: var(--pb-grid-surface); color: var(--pb-grid-muted); font-size: 12px; line-height: 16px; }
.pb-grid__layoutname { width: 100%; box-sizing: border-box; height: 42px; padding: 8px 12px 6px; border: 1px solid var(--pb-grid-line); border-radius: 6px; background: var(--pb-grid-surface); color: inherit; font: inherit; font-size: 14px; }
.pb-grid__layoutname:focus { outline: none; border-color: var(--pb-grid-focus); box-shadow: 0 0 0 1px var(--pb-grid-focus); }
.pb-grid__fieldset:focus-within .pb-grid__legend { color: var(--pb-grid-focus); }
.pb-grid__fieldset.is-invalid .pb-grid__layoutname { border-color: var(--pb-grid-invalid-border); }
.pb-grid__layoutscope { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; cursor: pointer; }
.pb-grid__layoutscope:has(input:disabled) { opacity: 0.5; cursor: default; }
/* The search box's clear button, inside the box on the right; the browser's own is hidden */
.pb-grid__searchbox .pb-grid__search { padding-right: 28px; }
.pb-grid__searchbox .pb-grid__search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.pb-grid__search-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; opacity: 0.65; cursor: pointer; }
.pb-grid__search-clear::before { content: ""; position: absolute; inset: 4px; background: currentColor; -webkit-mask: var(--pb-grid-ico-discard) center / contain no-repeat; mask: var(--pb-grid-ico-discard) center / contain no-repeat; }
.pb-grid__search-clear:hover, .pb-grid__search-clear:focus-visible { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
/* Search hits: a matching row has a mark at its start and a light tint; the words are highlighted in its text */
/* Fixed colours, the word drawn as a shadow (a reader that darkens light backgrounds, such as Dark Reader, keeps shadows): a yellow word, a light yellow row with a mark at its start */
.pb-grid__row--hit .pb-grid__cell, .pb-grid__row--hit .pb-grid__menu { background-color: rgba(250, 204, 21, 0.10); }
.pb-grid__row--hit .pb-grid__menu, .pb-grid__pane--left .pb-grid__row--hit .pb-grid__cell:first-child { box-shadow: inset 3px 0 0 #eab308; }
mark.pb-grid__hit { padding: 0 1px; border-radius: 2px; background-color: transparent; color: inherit; font-weight: 600; box-shadow: inset 0 0 0 100px rgba(234, 179, 8, 0.45), 0 0 0 1px rgba(234, 179, 8, 0.7); }
/* Headings on several lines (HeaderLines > 1, or a column's HeaderWrap): a fixed header height; the headings that wrap are clamped to those lines, the others stay on one line */
.pb-grid--wrap-head .pb-grid__hcell { height: calc(var(--pb-grid-head-lines) * 1.25em + 10px); align-items: center; padding-top: 0; padding-bottom: 0; line-height: 1.25em; }
.pb-grid--wrap-head .pb-grid__head-pane--left .pb-grid__hcell, .pb-grid--wrap-head .pb-grid__head-pane--right .pb-grid__hcell { height: auto; min-height: calc(var(--pb-grid-head-lines) * 1.25em + 10px); align-items: center; padding-bottom: 0; }
.pb-grid--wrap-head .pb-grid__hcell--wrap .pb-grid__htext { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--pb-grid-head-lines); line-clamp: var(--pb-grid-head-lines); }
/* A wrapping cell (PbGridColumn.Wrap): as many lines as the row holds, then "…" */
.pb-grid__cell--wrap { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--pb-grid-cell-lines); line-clamp: var(--pb-grid-cell-lines); line-height: 16px; padding-top: 4px; }
/* The dialog's buttons as today's Save Layout dialog colours them, filled with a shadow (a reader that darkens light backgrounds keeps shadows) */
.pb-grid__layoutdialog .pb-grid__layoutdialog-save:not(:disabled) { box-shadow: inset 0 0 0 100px #0d6efd; border-color: #0d6efd; color: #fff; }
.pb-grid__layoutdialog .pb-grid__layoutdialog-save:hover:not(:disabled) { box-shadow: inset 0 0 0 100px #0b5ed7; border-color: #0b5ed7; color: #fff; }
.pb-grid__layoutdialog .pb-grid__layoutdialog-cancel:not(:disabled) { box-shadow: inset 0 0 0 100px #6c757d; border-color: #6c757d; color: #fff; }
.pb-grid__layoutdialog .pb-grid__layoutdialog-cancel:hover:not(:disabled) { box-shadow: inset 0 0 0 100px #5c636a; border-color: #5c636a; color: #fff; }
/* A column being moved: an outline the size of its header cell follows the pointer along the header row */
.pb-grid__colghost { position: absolute; z-index: 30; pointer-events: none; box-sizing: border-box; display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 2px dashed var(--pb-grid-focus); border-radius: 3px; background: color-mix(in srgb, var(--pb-grid-surface) 80%, transparent); color: var(--pb-grid-text); font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
/* A heading centred in its header cell (PbGridColumn.HeaderAlign) */
.pb-grid__hcell--center .pb-grid__htext { text-align: center; }
/* The layouts: a button showing the chosen one, opening a list with a heart on each (the filled one is the default) */
.pb-grid__toolbar .pb-grid__layouts { display: inline-flex; align-items: center; gap: 6px; text-align: left; cursor: pointer; }
.pb-grid__layouts-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-grid__layouts::after { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; opacity: 0.6; -webkit-mask: var(--pb-grid-ico-error-next) center / contain no-repeat; mask: var(--pb-grid-ico-error-next) center / contain no-repeat; transform: rotate(90deg); }
.pb-grid__layoutlist { display: flex; flex-direction: column; min-width: 220px; max-height: 320px; overflow-y: auto; }
.pb-grid__layoutitem { display: flex; align-items: center; gap: 4px; border-radius: 4px; }
.pb-grid__layoutitem:hover { background: rgba(0,0,0,0.06); }
.pb-grid__layoutitem--active .pb-grid__layoutpick { font-weight: 600; }
.pb-grid__layoutpick { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 5px 10px; cursor: pointer; }
.pb-grid__fav { position: relative; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: 0.55; }
.pb-grid__fav::before { content: ""; position: absolute; inset: 5px; background: currentColor; -webkit-mask: var(--pb-grid-ico-heart) center / contain no-repeat; mask: var(--pb-grid-ico-heart) center / contain no-repeat; }
.pb-grid__fav:hover, .pb-grid__fav:focus-visible { opacity: 1; }
/* The default's heart, filled red (the fill is a shadow, which Dark Reader leaves alone) */
.pb-grid__fav--on { opacity: 1; }
.pb-grid__fav--on::before { background: transparent; box-shadow: inset 0 0 0 100px #e11d48; -webkit-mask-image: var(--pb-grid-ico-heart-on); mask-image: var(--pb-grid-ico-heart-on); }
.pb-grid { --pb-grid-ico-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-8.6C1.6 8.4 3.4 5 6.8 5c2 0 3.4 1.1 5.2 3 1.8-1.9 3.2-3 5.2-3 3.4 0 5.2 3.4 3.8 6.4C19 15.6 12 20 12 20z'/%3E%3C/svg%3E"); --pb-grid-ico-heart-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-8.6C1.6 8.4 3.4 5 6.8 5c2 0 3.4 1.1 5.2 3 1.8-1.9 3.2-3 5.2-3 3.4 0 5.2 3.4 3.8 6.4C19 15.6 12 20 12 20z'/%3E%3C/svg%3E"); }
/* Save Layout over an existing layout: the dialog asks before Replace */
.pb-grid__layoutconfirm { margin: 8px 0 0; padding: 8px 10px; border-radius: 4px; font-size: 13px; line-height: 1.4; border-left: 3px solid #d97706; box-shadow: inset 0 0 0 100px rgba(217,119,6,.12); }
/* No columns pinned right: the empty right pane draws no edge */
.pb-grid--no-right .pb-grid__head-pane--right, .pb-grid--no-right .pb-grid__pane--right { border-left: 0; width: 0; }
/* The row menu: a solid chevron, as the app's other grids show theirs (open-iconic chevron-bottom), at their size */
.pb-grid { --pb-grid-ico-row-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.5 5.5 3.5 3.5 8 8 12.5 3.5 14.5 5.5 8 12z'/%3E%3C/svg%3E"); }
.pb-grid__menu::after, .pb-grid[data-pb-edit] .pb-grid__menu::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: 0; transform: translate(-50%, -50%); border: 0; background: currentColor; opacity: 0.8; -webkit-mask: var(--pb-grid-ico-row-menu) center / contain no-repeat; mask: var(--pb-grid-ico-row-menu) center / contain no-repeat; }
.pb-grid[data-pb-edit] .pb-grid__menu::before { display: none; }
.pb-grid__menu:hover::after { opacity: 1; }

/* Rows that could not load: the grid shows only the page's message, in the middle, with none of its controls (LoadError) */
.pb-grid--failed .pb-grid__body, .pb-grid--failed .pb-grid__hscroll { visibility: hidden; }
.pb-grid__failed { grid-row: 1 / -1; grid-column: 1 / -1; align-self: center; justify-self: center; z-index: 6; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100% - 32px)); padding: 14px 20px; border: 1px solid var(--pb-grid-invalid-border); border-radius: 8px; background: var(--pb-grid-invalid-surface); color: var(--pb-grid-invalid-text); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); font-weight: 600; overflow-wrap: anywhere; }
.pb-grid__failed-icon { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--pb-grid-ico-errors) center / contain no-repeat; mask: var(--pb-grid-ico-errors) center / contain no-repeat; }

/* The page's help button (Help), at the right-hand end of the toolbar */
.pb-grid__help { display: inline-flex; align-items: center; }
/* Column filter button (heading) and the column filter panel: Excel's filter, values to tick and conditions with And / Or and brackets */
.pb-grid { --pb-grid-ico-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E"); --pb-grid-ico-funnel-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E"); }
.pb-grid__hfilter { flex: none; align-self: center; width: 20px; height: 20px; padding: 0; margin: 0 -2px 0 2px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--pb-grid-muted); cursor: pointer; opacity: 0.6; display: inline-flex; align-items: center; justify-content: center; }
.pb-grid__hfilter::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--pb-grid-ico-funnel) center / contain no-repeat; mask: var(--pb-grid-ico-funnel) center / contain no-repeat; }
.pb-grid__hcell:hover .pb-grid__hfilter, .pb-grid__hfilter:focus-visible { opacity: 1; }
.pb-grid__hfilter:hover { background: var(--pb-grid-sel); color: var(--pb-grid-text); }
.pb-grid__hfilter.is-on { opacity: 1; color: var(--pb-grid-focus); }
.pb-grid__hfilter.is-on::before { -webkit-mask-image: var(--pb-grid-ico-funnel-on); mask-image: var(--pb-grid-ico-funnel-on); }
.pb-grid__hfilter.is-open { opacity: 1; border-color: var(--pb-grid-focus); }
.pb-grid__finput--built { cursor: pointer; color: var(--pb-grid-focus); font-style: italic; }
.pb-grid__fpopup { position: fixed; z-index: 1000; left: 0; top: 0; width: min(440px, calc(100vw - 16px)); display: flex; flex-direction: column; overflow: hidden; line-height: 1.4; font-weight: normal; white-space: normal; background: var(--pb-grid-surface); color: var(--pb-grid-text); border: 1px solid var(--pb-grid-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); cursor: default; }
.pb-fpanel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.pb-fpanel__title { padding: 8px 12px 4px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-fpanel__tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--pb-grid-line); }
.pb-fpanel__tab { border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--pb-grid-muted); font: inherit; padding: 6px 10px; cursor: pointer; }
.pb-fpanel__tab.is-on { color: var(--pb-grid-text); border-bottom-color: var(--pb-grid-focus); font-weight: 600; }
.pb-fpanel__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.pb-fpanel__search, .pb-fpanel__value, .pb-fpanel__op, .pb-fpanel__logic { font: inherit; color: inherit; background: var(--pb-grid-surface); border: 1px solid var(--pb-grid-line); border-radius: 4px; padding: 3px 6px; min-width: 0; box-sizing: border-box; }
.pb-fpanel__search { width: 100%; }
.pb-fpanel__value.is-invalid { border-color: var(--pb-grid-invalid-border); background: var(--pb-grid-invalid-surface); }
.pb-fpanel__list { display: flex; flex-direction: column; max-height: 240px; overflow: auto; border: 1px solid var(--pb-grid-line); border-radius: 4px; padding: 4px; }
.pb-fpanel__check { display: flex; align-items: center; gap: 6px; padding: 1px 2px; cursor: pointer; white-space: nowrap; }
.pb-fpanel__check span { overflow: hidden; text-overflow: ellipsis; }
.pb-fpanel__check--all, .pb-fpanel__check--blank { font-style: italic; }
.pb-fpanel__note { font-size: 0.9em; color: var(--pb-grid-muted); }
.pb-fpanel__group { display: flex; flex-direction: column; gap: 4px; }
.pb-fpanel__group--nested { border: 1px solid var(--pb-grid-line); border-left: 3px solid var(--pb-grid-focus); border-radius: 4px; padding: 6px 6px 6px 8px; background: var(--pb-grid-sel); }
.pb-fpanel__grouphead { display: flex; align-items: center; gap: 6px; }
.pb-fpanel__grouphead .pb-fpanel__remove { margin-left: auto; }
.pb-fpanel__item { display: flex; flex-direction: column; gap: 4px; }
.pb-fpanel__join { font-size: 0.85em; font-weight: 600; text-transform: uppercase; color: var(--pb-grid-muted); padding-left: 2px; }
.pb-fpanel__cond { display: flex; align-items: center; gap: 4px; }
.pb-fpanel__op { flex: 0 1 46%; }
.pb-fpanel__cond .pb-fpanel__value { flex: 1 1 0; }
.pb-fpanel__and { color: var(--pb-grid-muted); }
.pb-fpanel__remove { flex: none; width: 24px; height: 24px; border: none; border-radius: 4px; background: transparent; color: var(--pb-grid-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.pb-fpanel__remove:hover:not(:disabled) { background: var(--pb-grid-sel); color: var(--pb-grid-invalid-text); }
.pb-fpanel__remove:disabled { opacity: 0.3; cursor: default; }
.pb-fpanel__add { display: flex; gap: 12px; }
.pb-fpanel__link { border: none; background: transparent; padding: 2px 0; font: inherit; color: var(--pb-grid-focus); cursor: pointer; }
.pb-fpanel__link:hover { text-decoration: underline; }
.pb-fpanel__summary { padding: 6px 12px; border-top: 1px solid var(--pb-grid-line); color: var(--pb-grid-muted); font-size: 0.9em; overflow-wrap: anywhere; }
.pb-fpanel__summary.is-error { color: var(--pb-grid-invalid-text); }
.pb-fpanel__foot { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--pb-grid-line); }
.pb-fpanel__btn { font: inherit; padding: 4px 12px; border: 1px solid var(--pb-grid-line); border-radius: 4px; background: var(--pb-grid-surface); color: inherit; cursor: pointer; }
.pb-fpanel__btn--clear { margin-right: auto; }
.pb-fpanel__btn--primary { background: var(--pb-grid-focus); border-color: var(--pb-grid-focus); color: #fff; }
.pb-fpanel__btn:disabled { opacity: 0.5; cursor: default; }
.pb-fpanel__groups { display: flex; flex-direction: column; gap: 6px; }
.pb-fpanel__groupjoin { align-self: flex-start; font: inherit; font-weight: 600; font-size: 0.9em; color: var(--pb-grid-focus); background: var(--pb-grid-surface); border: 1px solid var(--pb-grid-focus); border-radius: 4px; padding: 1px 4px; }
/* A column the grid cannot edit (in a grid that edits): the read-only field surface (pb-controls.css), muted text */
/* The grey's top edge can land on the device pixel of the row line above (at a browser zoom such as 110%) and paint
   over it, so the cell draws that line again over its own grey */
.pb-grid__cell--readonly:not(.pb-grid__cell--sel):not(.pb-grid__cell--changed):not(.pb-grid__cell--invalid) { background: var(--pb-readonly-surface, #f8f9fa); color: var(--pb-grid-muted); box-shadow: inset 0 1px 0 var(--pb-grid-line); }
/* The filter box's list button (a column picked from a list): its entries to tick */
.pb-grid__fdrop { flex: none; width: 18px; height: 22px; padding: 0; border: 1px solid var(--pb-grid-line); border-radius: 3px; background: var(--pb-grid-surface); color: var(--pb-grid-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pb-grid__fdrop::before { content: ""; width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--pb-grid-ico-row-menu) center / contain no-repeat; mask: var(--pb-grid-ico-row-menu) center / contain no-repeat; }
.pb-grid__fdrop:hover, .pb-grid__fdrop.is-open { color: var(--pb-grid-text); border-color: var(--pb-grid-focus); }
/* No vertical scrollbar needed: no gutter kept for one (pb-grid.js), so the rows reach the grid's right edge */
.pb-grid--no-vbar .pb-grid__head, .pb-grid--no-vbar .pb-grid__body, .pb-grid--no-vbar .pb-grid__hscroll, .pb-grid--no-vbar .pb-grid__filter-row { scrollbar-gutter: auto; }
.pb-grid.is-row-copy, .pb-grid.is-row-copy * { cursor: copy !important; }
/* A Yes / No filter with no filter: "Search ..." in the placeholder's colour, as the other filter boxes show */
.pb-grid__finput--empty { color: var(--pb-grid-muted); }
.pb-grid__finput--empty option { color: var(--pb-grid-text); }
/* A heading's second line (SubHeader): under the heading, lighter, e.g. "Original Title" under "Title" */
.pb-grid .pb-grid__hcell .pb-grid__htext.pb-grid__htext--sub { display: flex; flex-direction: column; justify-content: center; white-space: normal; overflow: hidden; line-height: 1.25; -webkit-line-clamp: unset; line-clamp: unset; }
.pb-grid__htext--sub > .pb-grid__hsub { font-weight: normal; color: var(--pb-grid-muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; }

/* Import (every grid the same): a small dialog in the middle of the page, Download Template and a drop area */
.pb-grid__import { width: min(520px, 100%); box-sizing: border-box; padding: 16px 18px 18px; border: 1px solid var(--pb-grid-line); border-radius: 10px; background: var(--pb-grid-surface); color: var(--pb-grid-text); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); animation: pb-grid-rise 0.14s ease-out; }
.pb-grid__import-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pb-grid__import-head h2 { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-grid__import-template { flex: none; height: 32px; padding: 0 14px; border: 1px solid #0b74c4; border-radius: 4px; background: #0b74c4; color: #fff; font-weight: 600; cursor: pointer; }
.pb-grid__import-template:hover { background: #095e9f; }
.pb-grid__import-close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 4px; background: transparent; color: var(--pb-grid-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.pb-grid__import-close:hover { background: var(--pb-grid-hover, rgba(0, 0, 0, 0.06)); color: var(--pb-grid-text); }
.pb-grid__import-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px; padding: 16px; border: 2px dashed var(--pb-grid-line); border-radius: 8px; background: color-mix(in srgb, var(--pb-grid-text) 4%, transparent); text-align: center; cursor: pointer; }
.pb-grid__import-drop:hover, .pb-grid__import-drop:focus-visible, .pb-grid__import-drop.is-over { border-color: #0b74c4; background: color-mix(in srgb, #0b74c4 8%, transparent); outline: none; }
.pb-grid__import-drop.is-busy { cursor: progress; opacity: 0.7; }
.pb-grid__import-drop-text { font-size: 14px; }
.pb-grid__import-drop-hint { font-size: 12px; color: var(--pb-grid-muted); font-style: italic; }
/* The file's own problems, listed before anything is imported: a line each, then fix the file or import the rest */
.pb-grid__import:has(.pb-grid__import-problems) { width: min(640px, 100%); }
.pb-grid__import-problems-head { margin: 0 0 10px; font-size: 14px; }
.pb-grid__import-problems-list { max-height: min(50vh, 360px); overflow: auto; margin: 0 0 14px; padding: 0; list-style: none; border: 1px solid var(--pb-grid-invalid-border); border-radius: 8px; background: var(--pb-grid-invalid-surface); }
.pb-grid__import-problems-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 10px; font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--pb-grid-invalid-border) 35%, transparent); }
.pb-grid__import-problems-list li:first-child { border-top: 0; }
.pb-grid__import-problems-line { min-width: 56px; color: var(--pb-grid-muted); font-variant-numeric: tabular-nums; }
.pb-grid__import-problems-code { min-width: 90px; font-weight: 600; color: var(--pb-grid-invalid-text); }
.pb-grid__import-problems-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* As Download Template: the grid's own button hover (a light grey) would leave its white text unreadable */
.pb-grid__import-problems-fix { background: #0b74c4; border-color: #0b74c4; color: #fff; font-weight: 600; }
.pb-grid__import-problems-fix:hover:not(:disabled, [aria-disabled="true"]) { background: #095e9f; border-color: #095e9f; color: #fff; }

/* The import's review screen: the grid over the whole browser window (above the app's header and its profile menu at
   10000, below the toasts at 20000), with the tree pages' edge gap on the sides and bottom and a little more at the top,
   a branded title bar and Close; it goes back into the page when every imported row is saved or the user closes it */
.pb-grid.pb-grid--import-review { position: fixed !important; inset: 10px 2px 2px 2px !important; z-index: 10500; width: auto !important; height: auto !important; grid-template-rows: auto auto auto auto 1fr auto auto; background: var(--pb-grid-surface); box-shadow: 0 0 0 100vmax var(--pb-review-backdrop, var(--pb-grid-surface)); }
/* Its title bar first, the grid's own rows one further down */
.pb-grid--import-review > .pb-grid__review { grid-row: 1; position: relative; z-index: 7; }
.pb-grid--import-review > .pb-grid__toolbar { grid-row: 2; }
.pb-grid--import-review > .pb-grid__editbar { grid-row: 3; }
.pb-grid--import-review > .pb-grid__head { grid-row: 4; }
.pb-grid--import-review > .pb-grid__body, .pb-grid--import-review > .pb-grid__loading { grid-row: 5; }
.pb-grid--import-review > .pb-grid__hscroll { grid-row: 6; }
.pb-grid--import-review > .pb-grid__footer { grid-row: 7; }
.pb-grid__review-bar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--pb-review-bar-bg, #0c4a6e); color: #fff; }
.pb-grid__review-logo { flex: none; height: 30px; width: auto; }
.pb-grid__review-title { flex: none; margin: 0; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.35); font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.pb-grid__review-title:first-child { padding-left: 0; border-left: 0; }
.pb-grid__review-hint { flex: 1 1 auto; color: rgba(255, 255, 255, 0.85); font-size: 13px; }
.pb-grid__review-btn { flex: none; height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 4px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.pb-grid__review-btn:hover { background: rgba(255, 255, 255, 0.15); }
.pb-grid__review-btn--danger { border-color: #dc2626; background: #dc2626; color: #fff; }
.pb-grid__review-btn--danger:hover { background: #b91c1c; }
.pb-grid__review-warning { padding: 6px 14px; border-bottom: 1px solid #f59e0b; background: #fffbeb; color: #92400e; font-size: 13px; }
/* The import's review screen (as the CBS import showed it): the status of each row, a changed row with its original
   under it as one group, the chips and steps, the choice for the rows the file leaves out, and the summary */
.pb-grid__status { font-weight: 600; font-size: 0.92em; }
.pb-grid__status--new { color: #166534; background: #dcfce7; }
.pb-grid__status--modified { color: #92400e; background: #fde68a; }
.pb-grid__status--unchanged { color: var(--pb-grid-muted); font-weight: normal; }
.pb-grid__status--not-in-import { color: #475569; font-weight: normal; font-style: italic; }
.pb-grid__status--original { color: var(--pb-grid-muted); font-weight: normal; font-style: italic; }
.pb-grid--import-review .pb-grid__row--changed:not(.pb-grid__row--selected) { background: #fffbeb; }
.pb-grid--import-review .pb-grid__row--added:not(.pb-grid__row--selected) { background: #f0fdf4; }
.pb-grid__status--inactive { color: #9a3412; background: #ffedd5; }
/* A row of the file left out of the import (row menu): greyed and struck through, not saved */
.pb-grid__status--left-out { color: var(--pb-grid-muted); font-weight: normal; font-style: italic; }
.pb-grid--import-review .pb-grid__row--leftout { color: var(--pb-grid-muted); background: #f8fafc; }
.pb-grid--import-review .pb-grid__row--leftout .pb-grid__cell:not(.pb-grid__status):not(.pb-grid__action) { text-decoration: line-through; }
.pb-grid__chip--left-out.is-on { background: #f1f5f9; border-color: #cbd5e1; }
.pb-grid__action { font-weight: 600; font-size: 0.92em; }
/* Status and Action only say what a row is and what Save does: they cannot be clicked */
.pb-grid--import-review .pb-grid__status, .pb-grid--import-review .pb-grid__action { cursor: default; user-select: none; }
.pb-grid__action--none { color: var(--pb-grid-muted); font-weight: normal; }
.pb-grid__action--blocked { color: var(--pb-grid-invalid-text); }
/* What the row will do once its errors are fixed: marked, so it is plain that it is not saved yet */
/* Each action's icon: a small badge before its name */
.pb-grid__action--add::before, .pb-grid__action--update::before, .pb-grid__action--inactive::before, .pb-grid__action--active::before {
    display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px;
    border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; font-style: normal;
}
.pb-grid__action--add::before { content: "+"; background: #16a34a; font-size: 13px; }
/* A drawn pencil with no circle: a slash in a circle reads as "no entry", which the text pencil looked like */
.pb-grid__action--update::before { content: ""; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d97706' d='M11.3 1.6a1.4 1.4 0 0 1 2 0l1.1 1.1a1.4 1.4 0 0 1 0 2L5.6 13.5 1.8 14.2l.7-3.8z'/%3E%3Cpath fill='%23d97706' d='M1 15h14v1H1z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.pb-grid__import-problems-copy, .pb-grid__import-problems-download { order: -1; border: 1px solid var(--pb-grid-line); }
.pb-grid__action--inactive::before { content: "\2298\FE0E"; background: #64748b; font-size: 12px; }
.pb-grid__action--active::before { content: "\21BA\FE0E"; background: #0d9488; font-size: 11px; }
/* A row with errors: a warning in place of the icon, until they are fixed */
.pb-grid__action.pb-grid__action--blocked::before { content: "\26A0\FE0E"; background: transparent; color: var(--pb-grid-invalid-text); font-size: 12px; width: auto; margin-right: 5px; border-radius: 0; }
.pb-grid__action--none { text-align: center; }
/* A changed row and its original under it are one group (as the CBS import drew them): a line closes the group, the
   changed row's menu and code are drawn across both rows (moved down half a row, over the original's, with no line
   between, so the code sits in the middle of the two), and clicking either row outlines the two together */
.pb-grid__row--paired { position: relative; z-index: 1; }
.pb-grid__row--original { position: relative; background: #f1f5f9; color: var(--pb-grid-muted); font-style: italic; box-shadow: inset 0 -2px 0 var(--pb-grid-line); }
/* The merged cells fill both rows (the original's are blank under them), their content in the middle */
.pb-grid__row--paired .pb-grid__pairhead { position: relative; z-index: 2; height: calc(var(--pb-grid-row) * 2); line-height: calc(var(--pb-grid-row) * 2); }
:where(.pb-grid__row--paired .pb-grid__pairhead) { background: inherit; }
/* A changed cell and what it was stand out from their rows: the new value amber and bold, the original's value violet
   and struck through (never red: red is for errors only) */
.pb-grid--import-review .pb-grid__cell--changed { background: #fde68a; font-weight: 600; }
.pb-grid__cell--was { text-decoration: line-through; text-decoration-color: #7c3aed; color: #5b21b6; background: #ede9fe; }
.pb-grid__cell--pairtail { background: transparent; }
/* The selected row (or a changed row and its original, together) is outlined so it stands out: a strong border outside
   the cells' own borders, with a white margin between them (over the edge of the rows above and below, so no cell
   border is covered). A pair's outline is drawn once, by the changed row, round both rows and above their merged
   cells; the left pane draws the left side, the middle pane the right */
.pb-grid--import-review { --pb-review-pair: #2563eb; --pb-review-gap: var(--pb-grid-surface, #fff); }
.pb-grid__row--paired.pb-grid__row--focus::after,
.pb-grid__row--paired:has(+ .pb-grid__row--original.pb-grid__row--focus)::after,
.pb-grid--import-review .pb-grid__row--focus:not(.pb-grid__row--paired):not(.pb-grid__row--original)::after {
    content: ""; position: absolute; inset: -5px 0; pointer-events: none; z-index: 5;
    border: 3px solid var(--pb-review-pair); box-shadow: inset 0 0 0 3px var(--pb-review-gap);
}
.pb-grid__row--paired.pb-grid__row--focus::after,
.pb-grid__row--paired:has(+ .pb-grid__row--original.pb-grid__row--focus)::after { bottom: calc(-1 * var(--pb-grid-row) - 5px); }
/* The outlined row is drawn over its neighbours (a changed row next to it too), whose edge its outline covers */
/* Space above and below the outlined row (or pair) that its outline fills, so it covers none of the rows next to it */
.pb-grid--import-review .pb-grid__row--focus:not(.pb-grid__row--original),
.pb-grid--import-review .pb-grid__row--paired:has(+ .pb-grid__row--original.pb-grid__row--focus) { margin-top: 6px; }
.pb-grid--import-review .pb-grid__row--focus:not(.pb-grid__row--paired):not(.pb-grid__row--original),
.pb-grid--import-review .pb-grid__row--paired.pb-grid__row--focus + .pb-grid__row--original,
.pb-grid--import-review .pb-grid__row--original.pb-grid__row--focus { margin-bottom: 6px; }
/* Room under the last row for that space and its outline (a pane ends where its rows end) */
.pb-grid--import-review .pb-grid__pane { height: calc(100% + 14px); }
.pb-grid--import-review .pb-grid__row--focus,
.pb-grid--import-review .pb-grid__row--paired:has(+ .pb-grid__row--original.pb-grid__row--focus) { position: relative; z-index: 2; }
/* An original clicked stays under its changed row, whose merged cells and outline cover both */
.pb-grid--import-review .pb-grid__row--original.pb-grid__row--focus { z-index: auto; }
.pb-grid--import-review .pb-grid__pane--left .pb-grid__row::after { border-right: 0 !important; border-top-left-radius: 8px; border-bottom-left-radius: 8px; box-shadow: inset 0 2px 0 var(--pb-review-gap), inset 0 -2px 0 var(--pb-review-gap); }
.pb-grid--import-review .pb-grid__pane--middle .pb-grid__row::after { right: 0; border-left: 0 !important; border-top-right-radius: 8px; border-bottom-right-radius: 8px; box-shadow: inset 0 2px 0 var(--pb-review-gap), inset 0 -2px 0 var(--pb-review-gap); }
/* The clicked cell stands out inside the outlined row */
.pb-grid--import-review .pb-grid__cell--focus { position: relative; z-index: 4; }
.pb-grid__menu--none { cursor: default; background: transparent; }
.pb-grid__menu--none::before, .pb-grid__menu--none::after { display: none; }
.pb-grid__cell--wascol { color: #64748b; font-style: italic; background: #f1f5f9; text-decoration: line-through; }
.pb-grid__errtext { color: var(--pb-grid-invalid-text); }
.pb-grid__review-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--pb-grid-line); background: var(--pb-grid-surface); font-size: 13px; }
.pb-grid__chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border: 1px solid var(--pb-grid-line); border-radius: 4px; background: var(--pb-grid-surface); cursor: pointer; user-select: none; white-space: nowrap; }
.pb-grid__chip input { margin: 0; }
.pb-grid__chip--new.is-on { background: #dcfce7; border-color: #86efac; }
.pb-grid__chip--modified.is-on { background: #fde68a; border-color: #fbbf24; }
.pb-grid__chip--inactive.is-on { background: #ffedd5; border-color: #fdba74; }
.pb-grid__chip--not-in-import.is-on { background: #e2e8f0; border-color: #cbd5e1; }
.pb-grid__chip--unchanged.is-on { background: #eef2ff; border-color: #c7d2fe; }
.pb-grid__chip--errors.is-on { background: var(--pb-grid-invalid-surface); border-color: var(--pb-grid-invalid-border); }
.pb-grid__step { height: 26px; padding: 0 9px; border: 1px solid var(--pb-grid-line); border-radius: 4px; background: var(--pb-grid-surface); color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.pb-grid__step--up::before { content: "▲"; margin-right: 5px; font-size: 0.75em; }
.pb-grid__step--down::before { content: "▼"; margin-right: 5px; font-size: 0.75em; }
.pb-grid__step--error { color: #b91c1c; border-color: #fca5a5; }
.pb-grid__step[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.pb-grid__review-compare { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.pb-grid__review-compare select { height: 26px; border: 1px solid var(--pb-grid-line); border-radius: 4px; background: var(--pb-grid-surface); color: inherit; font: inherit; }
.pb-grid__review-read { margin-left: auto; color: var(--pb-grid-muted); white-space: nowrap; }
.pb-grid__review-kept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--pb-grid-line); background: #f1f5f9; font-size: 13px; }
.pb-grid__review-radio { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--pb-grid-line); border-radius: 4px; background: var(--pb-grid-surface); cursor: pointer; }
.pb-grid__review-radio.is-on { border-color: #0b74c4; background: #e0f2fe; }
.pb-grid__review-radio.is-off { opacity: 0.5; cursor: not-allowed; }
.pb-grid__review-btn--save { border-color: #22c55e; background: #16a34a; color: #fff; }
.pb-grid__review-btn--save:hover { background: #15803d; }
.pb-grid__review-summary { position: absolute; top: 50%; left: 50%; z-index: 30; transform: translate(-50%, -50%); width: min(460px, calc(100% - 32px)); box-sizing: border-box; padding: 16px 18px; border: 1px solid var(--pb-grid-line); border-radius: 8px; background: var(--pb-grid-surface); color: var(--pb-grid-text); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); font-weight: normal; line-height: 1.45; white-space: normal; }
.pb-grid__review-summary h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.pb-grid__review-summary p { margin: 0 0 8px; font-size: 13px; }
.pb-grid__review-summary-errors { padding: 8px 10px; border-radius: 6px; background: #fef9c3; color: #713f12; }
.pb-grid__review-summary-actions { display: flex; justify-content: flex-end; }

/* ---- One toolbar line, a footer that reports (user decision 2026-10-18) ----
   The toolbar has a fixed height and never wraps: its groups (Edit, History, View) sit side by side with a thin line
   between them, and what does not fit is moved into More by pb-grid.js (data-off on the tool, data-more on the toolbar),
   measured before the browser paints, so the grid does not jump. */
.pb-grid__toolbar { box-sizing: border-box; height: 37px; overflow: hidden; }
.pb-grid__toolbar-left, .pb-grid__toolbar-right { flex: none; }
.pb-grid__toolgroup { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.pb-grid__toolgroup:empty { display: none; }
.pb-grid__toolgroup ~ .pb-grid__toolgroup:not([data-off])::before { content: ""; flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--pb-grid-line); }
.pb-grid__toolbar [data-off] { display: none !important; }
.pb-grid__toolbar .pb-grid__btn--more { display: none; }
.pb-grid__toolbar[data-more] .pb-grid__btn--more { display: inline-flex; }
/* Layout: the layout shown, its name cut short when long */
.pb-grid__toolbar .pb-grid__layouts { max-width: 240px; }
.pb-grid__layouts-label { color: var(--pb-grid-muted); }
.pb-grid__layouts-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pb-grid__layoutlist { display: flex; flex-direction: column; gap: 2px; }

/* Footer: the message (left), the rows to show and the errors (middle), the counts (right) */
.pb-grid__footer { min-width: 0; }
.pb-grid__footer .pb-grid__status { flex: 1 1 0; min-width: 0; font-weight: normal; font-size: inherit; } /* not the import status column's cells */
.pb-grid__message { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--pb-grid-text); }
.pb-grid__message-icon { flex: none; font-weight: 700; }
.pb-grid__message--ok .pb-grid__message-icon { color: var(--pb-grid-added-mark); }
.pb-grid__message--problem .pb-grid__message-icon { color: var(--pb-grid-invalid-text); }
.pb-grid__message-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A message fades after six seconds; the pointer on it holds it (the text stays for the screen reader) */
.pb-grid__message.is-fading { animation: pb-grid-message-fade 6.6s ease-in forwards; }
.pb-grid__message.is-fading:hover { animation-play-state: paused; }
@keyframes pb-grid-message-fade { 0%, 91% { opacity: 1; } 100% { opacity: 0; } }
.pb-grid__footer-edit { display: flex; align-items: center; gap: 12px; flex: none; }
.pb-grid__showrows { display: inline-flex; align-items: center; gap: 4px; }
.pb-grid__showrows-label { color: var(--pb-grid-muted); }
.pb-grid__chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border: 1px solid var(--pb-grid-line); border-radius: 12px; background: var(--pb-grid-surface); color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
.pb-grid__chip:hover:not(.is-on) { background: color-mix(in srgb, currentColor 8%, var(--pb-grid-surface)); }
.pb-grid__chip.is-on { border-color: var(--pb-grid-focus); background: color-mix(in srgb, var(--pb-grid-focus) 14%, var(--pb-grid-surface)); font-weight: 600; }
.pb-grid__chip-count { min-width: 16px; padding: 0 5px; border-radius: 8px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 0.9em; text-align: center; }
.pb-grid__chip--errors .pb-grid__chip-count { color: var(--pb-grid-invalid-text); }
.pb-grid__footer .pb-grid__btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; white-space: nowrap; }
.pb-grid__footer .pb-grid__btn--icon { width: 26px; padding: 0; justify-content: center; }
.pb-grid__footer .pb-grid__pager .pb-grid__btn--page { height: 30px; width: 36px; }
.pb-grid__selcount { color: var(--pb-grid-muted); }