/* _content/BouwNet.Blazor.Server/Editors/PurchaseOrderWorkspace/PurchaseOrderWorkspace.razor.rz.scp.css */
/* Layout of the Bestellingen work screen. Colours, sizes and type come from the shared style
   layer (wwwroot/css/bn-theme.css) through its --bn-* tokens; nothing is hard-coded here. Scoped to
   this component via Blazor CSS isolation, so it cannot leak into other screens. Design anchor:
   _docs/design/werkscherm-bestellingen.dc.html, artboard "Bestellingen". */

.bn-po-workspace[b-2ugqivc9v2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--bn-text-primary);
    font-size: var(--bn-cell-font-size);
}

/* --- header row: actions only, right-aligned --- */
.bn-po-header[b-2ugqivc9v2] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 34px;
}

.bn-po-actions[b-2ugqivc9v2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.bn-po-badge[b-2ugqivc9v2] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bn-input-bg);
    color: var(--bn-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

/* bn-icon-plus has no icon library backing it (DxButton.IconCssClass renders the class on the
   icon's own element - DevExpress docs, "DxButtonBase.IconCssClass") - a text glyph instead of an
   asset, so no new hardcoded image. Only this button gets an icon; the other two stay text-only. */
.bn-po-header[b-2ugqivc9v2]  .bn-icon-plus::before {
    content: "+";
    font-weight: 600;
    margin-right: 0.3rem;
}

/* --- filter bar: label + control pairs on one line, search box on the right --- */
.bn-po-filterbar[b-2ugqivc9v2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bn-header-bg);
    border: 1px solid var(--bn-hairline-outer);
    border-radius: 6px;
}

.bn-po-filter[b-2ugqivc9v2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.bn-po-filter-label[b-2ugqivc9v2] {
    color: var(--bn-text-secondary);
    font-size: var(--bn-column-header-font-size);
    font-weight: var(--bn-column-header-font-weight);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* flex: 0 0 auto - without it these DxComboBox/DxTextBox wrappers (rendered as flex items
   themselves) stretch to fill the row and wrap onto their own lines instead of sitting on one
   line at their fixed width (live, 2026-09-02: the search box grew to full width and the whole
   bar wrapped to ~80px tall). */
.bn-po-filterbar[b-2ugqivc9v2]  .bn-po-filter-werf { width: 300px; flex: 0 0 auto; }
.bn-po-filterbar[b-2ugqivc9v2]  .bn-po-filter-supplier { width: 220px; flex: 0 0 auto; }
.bn-po-filterbar[b-2ugqivc9v2]  .bn-po-filter-status { width: 160px; flex: 0 0 auto; }

.bn-po-filter-spacer[b-2ugqivc9v2] { flex: 1 1 auto; }

.bn-po-filterbar[b-2ugqivc9v2]  .bn-po-search { width: 240px; flex: 0 0 auto; }

.bn-po-empty-hint[b-2ugqivc9v2] {
    color: var(--bn-text-secondary);
    font-style: italic;
    margin: 0.25rem 0 0;
}

/* --- grid: compact, single-line rows, right-aligned numbers --- */
/* Scoped to data rows only (tr[data-visible-index], the attribute DevExpress stamps on a data
   row) - the earlier, unscoped "table.dxbl-grid-table td" selector also clipped the summary
   footer cell with an ellipsis ("Totaal: 58…." - live, 2026-09-02).
   F1 (live, 2026-09-02): a normal data row measured 29px (26px from this rule's own
   --bn-row-height-compact + a 4px DevExpress cell-wrapper padding this rule cannot reach), while
   the edit row (tr.dxbl-grid-edit-row, not covered by tr[data-visible-index] alone) and the
   new-item strip (tr.dxbl-grid-edit-new-item-row) measured 26px - a visible jump the moment a row
   is focused/edited. calc(--bn-row-height-compact + 3px) = 29px matches the normal row's rendered
   height instead of fighting the DevExpress-owned 4px, and applying it to all three row kinds
   keeps every row the same height. */
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid table.dxbl-grid-table tr[data-visible-index] > td,
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid table.dxbl-grid-table tr.dxbl-grid-edit-row > td,
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid table.dxbl-grid-table tr.dxbl-grid-edit-new-item-row > td {
    height: calc(var(--bn-row-height-compact) + 3px);
    padding-top: 0;
    padding-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* F1: the in-place editor (dxbl-input-editor, measured 28px tall) must fit inside the 29px row
   above instead of growing it - min-height:0 overrides the editor's own default min-height, which
   otherwise wins over a smaller height on this element. */
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid-edit-row dxbl-input-editor,
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid-edit-new-item-row dxbl-input-editor,
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid-edit-row .dxbl-text-edit,
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid-edit-new-item-row .dxbl-text-edit {
    height: calc(var(--bn-row-height-compact) + 3px);
    min-height: 0;
}

/* Footer (TotalSummary) cell: full text, never clipped. TextAlignment="Right" on the Bedrag
   column already right-aligns its footer cell (DevExpress docs, DxGridColumn.TextAlignment -
   applies to data AND footer cells). */
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid table.dxbl-grid-table tr.dxbl-grid-footer-row > td {
    white-space: nowrap;
    overflow: visible;
}

/* Grid_CustomizeElement stamps this class on the focused row (DevExpress docs,
   "DxGrid.CustomizeElement", "Change Focus and Selection Color": Grid.IsRowFocused). Overrides
   DevExpress' own (loud orange) focused-row background with the design's soft accent surface;
   !important matches the docs' own guidance for overriding a component's predefined, more
   specific rule. Also forces the text colour: DevExpress' own focused-row foreground is a light
   colour meant for the orange background, which reads as near-white on our peach surface (live,
   2026-09-02). The status pill (.bn-state-*) and the material "..." button
   (.bn-material-search-btn) keep their own colour regardless - a child element's own explicit
   color rule always wins over an ancestor's inherited value, !important or not. Covers both a
   focused data row and the new-item row in edit, which gets the same tint. */
.bn-po-workspace[b-2ugqivc9v2]  .bn-row-focused > td {
    background-color: var(--bn-accent-surface) !important;
    color: var(--bn-text-primary) !important;
}

/* F2 (live, 2026-09-02, revised 2026-09-02): centers the Status/Material cell content vertically
   - table cells centre their content on vertical-align, unlike inline elements. This alone used to
   be defeated in the row under edit, because Grid_CustomizeElement also stamped "bn-state-<state>"
   on this same td: bn-theme.css's ".bn-state-*" rule (display:inline-block, padding,
   border-radius, ...) turned the TD ITSELF into a pill - inline-block even in normal rows,
   shrunk to the pill's own width instead of the 110px column - which is also why vertical-align
   never visibly centered its content and the edit row specifically misbehaved (root-caused live by
   the coordinator; see the comment on Grid_CustomizeElement in the .razor). Two earlier,
   CSS-only attempts to fix the symptom here (a flex wrapper, then an inline-flex td) are gone -
   removing the stamping in Grid_CustomizeElement is the actual fix, this rule alone is enough now
   that the td is a normal table-cell in every row state. */
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid td.bn-col-State,
.bn-po-workspace[b-2ugqivc9v2]  .dxbl-grid td.bn-col-Material {
    vertical-align: middle;
}

.bn-material-cell[b-2ugqivc9v2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
}

.bn-material-cell-text[b-2ugqivc9v2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Subtle "…" search button: icon-sized, no primary colour. */
.bn-material-cell[b-2ugqivc9v2]  .bn-material-search-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 0.35rem;
    line-height: 18px;
    color: var(--bn-text-tertiary);
}

/* Strip only the browser's default button chrome. font/background/colour must NOT be reset here:
   this scoped rule loads after wwwroot/css/bn-theme.css and its own selector is more specific than
   ".bn-state-<state>", so a blanket "background: inherit; font: inherit" here would win and the
   pill silently lost its colour and pill shape (live, 2026-09-02) - bn-theme.css's ".bn-state-*"
   rule (display/padding/border-radius/font-size/font-weight/line-height/background/color) is the
   only thing allowed to style those. */
/* F2 (live, 2026-09-02): bn-theme.css's ".bn-state-*" line-height (19.2px, from its own
   line-height:1.6) and padding (1px 8px) sit the 21px pill 5px from the cell's top and 0 from the
   bottom - baseline alignment, not centering. line-height/padding/vertical-align on the button are
   allowed here (only background/color/border-radius/font-size/font-weight stay bn-theme.css's,
   per the comment above); this scoped rule is more specific (Blazor CSS isolation adds a scope
   attribute) than bn-theme.css's plain ".bn-state-<value>" class selector, so it wins without
   !important - same reasoning already used for .bn-row-focused above. */
.bn-state-pill-btn[b-2ugqivc9v2] {
    appearance: none;
    border: 0;
    font-family: inherit;   /* the UA button font; size/weight/colour/background come from .bn-state-* in bn-theme.css */
    cursor: pointer;
    vertical-align: middle;
    line-height: 18px;
    padding: 0 8px;
}

/* --- popups --- */
.bn-status-popup-error[b-2ugqivc9v2],
.bn-po-save-error[b-2ugqivc9v2] {
    color: var(--bn-state-backorder-fg);
    margin-bottom: 0.5rem;
}

/* Positive counterpart of .bn-po-save-error above - reuses the "toegekomen" (arrived/done) state's
   colour token rather than a new hardcoded one, same reasoning as .bn-po-footerbar-warning below. */
.bn-po-info-message[b-2ugqivc9v2] {
    color: var(--bn-state-toegekomen-fg);
    margin-bottom: 0.5rem;
}

/* --- Bestelbon opstellen popup (spec §3.4): one row per supplier group --- */
.bn-bon-rows[b-2ugqivc9v2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.bn-bon-row[b-2ugqivc9v2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bn-hairline-outer);
}

.bn-bon-row-supplier[b-2ugqivc9v2] {
    flex: 1 1 auto;
    font-weight: 600;
}

.bn-bon-row-count[b-2ugqivc9v2],
.bn-bon-row-amount[b-2ugqivc9v2] {
    flex: 0 0 auto;
    color: var(--bn-text-secondary);
    white-space: nowrap;
}

.bn-bon-popup[b-2ugqivc9v2]  .bn-bon-row-date {
    flex: 0 0 auto;
    width: 160px;
}

.bn-status-popup-field[b-2ugqivc9v2] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

/* F3 (live, 2026-09-02): overflow-y:auto turns the body into the scroll container once MaxHeight
   (see the DxPopup markup comment) caps the popup's height - the common case (PageSize 10) needs
   no scrolling at a 768px viewport, but the footer (Toevoegen/Annuleren) stays reachable even when
   it does. */
.bn-material-lookup[b-2ugqivc9v2]  .dxbl-popup-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
}

.bn-material-lookup-search[b-2ugqivc9v2] { width: 100%; }

/* F4a: short Dutch hint shown only in add mode, under the search box. */
.bn-material-lookup-hint[b-2ugqivc9v2] {
    color: var(--bn-text-secondary);
    font-size: var(--bn-column-header-font-size);
    margin: 0;
}

.bn-material-lookup-grid[b-2ugqivc9v2] {
    flex: 1 1 auto;
    min-height: 0;
}

/* --- footer bar: checkboxes left, total right (spec B, legacy frmBestellingen bottom bar) ---
   Same visual language as the filter bar (.bn-po-filterbar above): --bn-header-bg surface,
   --bn-hairline-outer border, --bn-text-secondary for the checkbox labels. */
.bn-po-footerbar[b-2ugqivc9v2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: var(--bn-header-bg);
    border: 1px solid var(--bn-hairline-outer);
    border-radius: 6px;
}

.bn-po-footerbar-left[b-2ugqivc9v2] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.bn-po-footerbar[b-2ugqivc9v2]  .bn-po-footerbar-checkbox {
    color: var(--bn-text-secondary);
}

/* Right-hand cluster: A1's out-of-filter warning (when shown) sits left of the total, both inside
   the same flex item so the outer bar keeps its plain two-child space-between layout. */
.bn-po-footerbar-right[b-2ugqivc9v2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* A1: reuses the existing "backorder" state colour token - no new hardcoded colour. */
.bn-po-footerbar-warning[b-2ugqivc9v2] {
    color: var(--bn-state-backorder-fg);
    white-space: nowrap;
}

.bn-po-footerbar-total[b-2ugqivc9v2] {
    font-weight: 600;
    white-space: nowrap;
}

/* --- "Uit stock nemen" popup (spec §3.4) --- */
.bn-stocktake-rows[b-2ugqivc9v2] { display: flex; flex-direction: column; gap: 4px; max-height: 45vh; overflow-y: auto; }
.bn-stocktake-row[b-2ugqivc9v2] { display: grid; grid-template-columns: 90px 1fr 1fr 80px 80px 110px; gap: 8px; align-items: center; }
.bn-stocktake-head[b-2ugqivc9v2] { font-weight: 600; color: var(--bn-text-muted, #666); }
.bn-stocktake-total[b-2ugqivc9v2] { margin-top: 8px; text-align: right; }
/* _content/BouwNet.Blazor.Server/Editors/StockOverview/StockOverview.razor.rz.scp.css */
.bn-stock-overview[b-zurav61sau] { display: flex; flex-direction: column; gap: 8px; }
.bn-stock-toolbar[b-zurav61sau] { display: flex; align-items: center; gap: 16px; }
.bn-stock-count[b-zurav61sau] { color: var(--bn-text-muted, #666); margin-left: auto; }
.bn-stock-counting-hint[b-zurav61sau] { color: var(--bn-text-muted, #666); font-size: 0.85rem; }
.bn-stock-error[b-zurav61sau] { color: #b3261e; }
.bn-stock-message[b-zurav61sau] { color: var(--bn-text-muted, #666); }
[b-zurav61sau] .bn-stock-counted { max-width: 96px; }
/* _content/BouwNet.Blazor.Server/Editors/VerrekeningWorkspace/VerrekeningWorkspace.razor.rz.scp.css */
/* Layout of the Verrekening work screen. Colours/sizes/type come from the shared style layer
   (wwwroot/css/bn-theme.css) via its --bn-* tokens, except the four tint colours (--vw-*), which
   are this screen's own design tokens (design anchor: _docs/design/verrekening-werkscherm.dc.html,
   legend swatches) - scoped to .bn-vw-workspace so they cannot leak into other screens. Scoped via
   Blazor CSS isolation (::deep needed to reach DevExpress' own rendered DOM inside DxGrid/DxPopup -
   the "::deep! scoped css op DevExpress-children" lesson from the workspace-engineer skill). */

.bn-vw-workspace[b-g06s4ub2rp] {
    --vw-aann: #fdf4e7;    /* EP aannemer / % aann. */
    --vw-vord: #eef5f4;    /* EP vordering */
    --vw-vorig: #f8f1ea;   /* Vorige per. */
    --vw-huidig: #eff5ed;  /* Huidige per. */

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--bn-text-primary);
    font-size: var(--bn-cell-font-size);
}

/* --- header row: actions only, right-aligned (XAF shows the DashboardView caption already) --- */
.bn-vw-header[b-g06s4ub2rp] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 34px;
}

.bn-vw-actions[b-g06s4ub2rp] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.bn-vw-badge[b-g06s4ub2rp] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--bn-input-bg);
    color: var(--bn-accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

/* --- filter bar: werf, klant, "alle klanten" checkbox, spacer, zoekbox --- */
.bn-vw-filterbar[b-g06s4ub2rp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bn-header-bg);
    border: 1px solid var(--bn-hairline-outer);
    border-radius: 6px;
}

.bn-vw-filter[b-g06s4ub2rp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.bn-vw-filter-label[b-g06s4ub2rp] {
    color: var(--bn-text-secondary);
    font-size: var(--bn-column-header-font-size);
    font-weight: var(--bn-column-header-font-weight);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* flex: 0 0 auto - without it these DxComboBox/DxTextBox wrappers stretch to fill the row and wrap
   onto their own line instead of sitting on one line at their own width (same F-note as
   PurchaseOrderWorkspace.razor.css). */
.bn-vw-filterbar[b-g06s4ub2rp]  .bn-vw-filter-werf { width: 280px; flex: 0 0 auto; }
.bn-vw-filterbar[b-g06s4ub2rp]  .bn-vw-filter-quote { width: 220px; flex: 0 0 auto; }
.bn-vw-filterbar[b-g06s4ub2rp]  .bn-vw-filter-checkbox { color: var(--bn-text-secondary); flex: 0 0 auto; }

.bn-vw-filter-spacer[b-g06s4ub2rp] { flex: 1 1 auto; }

.bn-vw-filterbar[b-g06s4ub2rp]  .bn-vw-search { width: 220px; flex: 0 0 auto; }

.bn-vw-empty-hint[b-g06s4ub2rp] {
    color: var(--bn-text-secondary);
    font-style: italic;
    margin: 0.25rem 0 0;
}

.bn-vw-save-error[b-g06s4ub2rp] {
    color: var(--bn-state-backorder-fg);
    margin-bottom: 0.5rem;
}

/* --- tint columns (task-2-brief §2): stamped via Grid_CustomizeElement's bn-col-<FieldName>
   markers, same mechanism as PurchaseOrderWorkspace's bn-col-State/bn-col-Material. --- */
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ContractorUnitPrice,
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ContractorDiscountPercent {
    background-color: var(--vw-aann);
}

.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ClaimUnitPrice {
    background-color: var(--vw-vord);
}

.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ClaimedQuantityPrevious {
    background-color: var(--vw-vorig);
    cursor: pointer; /* correctiepopup via dubbelklik (task-2-brief §4) */
}

.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ClaimedQuantityCurrent {
    background-color: var(--vw-huidig);
}

/* "grijs" read-only/berekende kolommen (design's .calc: gedempte tekstkleur, geen achtergrondtint -
   Klant/App zijn identifier-kolommen, Rest/Huidig €/Tot. uitgev. € zijn berekende kolommen).
   Final-fix eindreview (item H): the App column's FieldName is VerrekeningRow.ApartmentNumber, not
   QuoteNumber (which doesn't exist as a grid column at all) - that selector never matched anything. */
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-CustomerName,
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ApartmentNumber,
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-Rest,
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-CurrentPeriodAmount,
.bn-vw-workspace[b-g06s4ub2rp]  .dxbl-grid td.bn-col-ExecutedAmount {
    color: var(--bn-text-secondary);
}

/* --- footer bar: legenda links, periode-totalen rechts (task-2-brief §6) --- */
.bn-vw-footerbar[b-g06s4ub2rp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: var(--bn-header-bg);
    border: 1px solid var(--bn-hairline-outer);
    border-radius: 6px;
}

.bn-vw-legend[b-g06s4ub2rp] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.bn-vw-legend-item[b-g06s4ub2rp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bn-text-secondary);
    font-size: var(--bn-column-header-font-size);
    white-space: nowrap;
}

.bn-vw-swatch[b-g06s4ub2rp] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--bn-hairline-outer);
    display: inline-block;
}

.bn-vw-swatch-aann[b-g06s4ub2rp] { background: var(--vw-aann); }
.bn-vw-swatch-vord[b-g06s4ub2rp] { background: var(--vw-vord); }
.bn-vw-swatch-vorig[b-g06s4ub2rp] { background: var(--vw-vorig); }
.bn-vw-swatch-huidig[b-g06s4ub2rp] { background: var(--vw-huidig); }
.bn-vw-swatch-calc[b-g06s4ub2rp] { background: var(--bn-panel); }

.bn-vw-footerbar-total[b-g06s4ub2rp] {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- popups --- */
.bn-vw-popup-field[b-g06s4ub2rp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.bn-vw-close-rows[b-g06s4ub2rp] {
    display: flex;
    flex-direction: column;
    margin: 14px 0 4px 0;
}

.bn-vw-close-row[b-g06s4ub2rp] {
    display: flex;
    justify-content: space-between;
    font-size: var(--bn-cell-font-size);
    padding: 7px 0;
    border-bottom: 1px solid var(--bn-hairline-row);
    font-variant-numeric: tabular-nums;
}

.bn-vw-close-row-last[b-g06s4ub2rp] {
    border-bottom: none;
}

.bn-vw-close-warning[b-g06s4ub2rp] {
    margin-top: 10px;
    background: var(--bn-accent-surface);
    border: 1px solid var(--bn-hairline-outer);
    border-radius: 5px;
    padding: 10px 12px;
    font-size: var(--bn-column-header-font-size);
    line-height: 1.5;
    color: var(--bn-text-secondary);
}

/* Rapportenpopup (task-4-brief): één rapportknop per rij, vol op de popupbreedte - geen
   rasterlayout nodig voor zes items. */
.bn-vw-reports-list[b-g06s4ub2rp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bn-vw-reports-list[b-g06s4ub2rp]  .bn-vw-report-btn {
    width: 100%;
    justify-content: flex-start;
}
/* _content/BouwNet.Blazor.Server/Editors/WeekPlanningWorkspace/WeekPlanningWorkspace.razor.rz.scp.css */
.bn-wp[b-dn5ofzewnc] { display: flex; flex-direction: column; gap: 8px; }
.bn-wp-toolbar[b-dn5ofzewnc] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bn-wp-week[b-dn5ofzewnc] { font-weight: 600; min-width: 210px; text-align: center; }
.bn-wp-sep[b-dn5ofzewnc] { flex: 0 0 1px; align-self: stretch; background: var(--bs-border-color, #dee2e6); margin: 0 4px; }

/* Fix round 2 (a): bn-wp-icon-prev/-next have no icon library backing them (the "oi" open-iconic
   font is not loaded in this app - a plain IconCssClass rendered as an empty square) - same trick as
   PurchaseOrderWorkspace's bn-icon-plus: the class is only a carrier, the glyph comes from ::before.
   ::deep is required - Blazor CSS isolation does not reach DevExpress' own rendered DOM inside
   DxButton (xaf-blazor-custom-workspace-engineer skill / VerrekeningWorkspace.razor.css's own note). */
.bn-wp-toolbar[b-dn5ofzewnc]  .bn-wp-icon-prev::before { content: "\2039"; font-weight: 700; }
.bn-wp-toolbar[b-dn5ofzewnc]  .bn-wp-icon-next::before { content: "\203A"; font-weight: 700; }

/* Fix round 2 (b): Width= alone did not stop the Date/Werf editors from stretching to fill the flex
   row - DevExpress' own editor CSS grows them. CssClass + ::deep width/flex is the pattern already
   proven in VerrekeningWorkspace's/PurchaseOrderWorkspace's filter bars (.bn-vw-filter-werf etc.). */
.bn-wp-toolbar[b-dn5ofzewnc]  .bn-wp-date { width: 140px; flex: 0 0 auto; }
.bn-wp-toolbar[b-dn5ofzewnc]  .bn-wp-filter-werf { width: 260px; flex: 0 0 auto; }

.bn-wp-error[b-dn5ofzewnc] { color: #b3261e; }
.bn-wp-message[b-dn5ofzewnc] { color: var(--bs-success, #146c43); }
.bn-wp-group[b-dn5ofzewnc] { font-weight: 600; }
.bn-wp-cell[b-dn5ofzewnc] { padding: 2px 4px; min-height: 32px; }
.bn-wp-text[b-dn5ofzewnc] { font-weight: 600; }
.bn-wp-note[b-dn5ofzewnc] { font-size: .8em; opacity: .8; }
.bn-wp-dim[b-dn5ofzewnc] { opacity: .35; }
.bn-wp-hit[b-dn5ofzewnc] { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -2px; }
.bn-wp-muted[b-dn5ofzewnc] { font-style: italic; color: var(--bn-text-muted, #666); }

/* Task 6: a cell a Planner can click into (WP-03) gets a pointer cursor and a focus ring - the same
   visual affordance a form editor gets, even though this div is not a real XAF editor. Read-only users
   never get bn-wp-editable (CellCss only adds it when _canEdit), so nothing here is misleading for
   them. */
.bn-wp-editable[b-dn5ofzewnc] { cursor: pointer; }
.bn-wp-editable:focus[b-dn5ofzewnc] { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -2px; }
.bn-wp-cell-editing[b-dn5ofzewnc] { padding: 0; min-height: 32px; display: flex; align-items: center; }
.bn-wp-cell-editing[b-dn5ofzewnc]  .dxbl-combo-box { width: 100%; }

.bn-wp-popup-field[b-dn5ofzewnc] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bn-wp-popup-field label[b-dn5ofzewnc] { font-weight: 600; font-size: .9em; }
.bn-wp-popup-days[b-dn5ofzewnc] { display: flex; flex-wrap: wrap; gap: 10px; }
.bn-wp-popup-day[b-dn5ofzewnc] { display: flex; align-items: center; gap: 4px; font-weight: 400; }