/* DataGrid dressing — Shell-owned, split out of shared.css (Sprint 9.5 Story 22,
   architecture/SHARED-CSS-LAYER-SPLIT.md). Our own .app-* grid vocabulary only — a rule keyed on an
   .e-* (Syncfusion) or B3.CRUD-internal selector belongs in shared-vendor.css instead, even when it
   is fixing the look of a grid. Linked once in App.razor's <head>, reaching every Blick's DOM the
   same way shared.css already did. */

/* ── B3.CRUD.UI.Components DataGrid: filter-bar search-button icon invisible (grey-on-grey) ──────────────
   Root cause proven live (Playwright network + computed-style trace against a running CCP.Shell, not just
   reading source): Syncfusion.Blazor.Themes 31.1.17's bootstrap5.css sets `.e-btn { background: #6c757d;
   color: #fff }` for the filter bar's per-column search button, which is correct — but that same theme
   file also has `.e-grid .e-gridheader .e-icons:not(...) { color: #6c757d }`, meant for the plain (no
   background) sort/filter arrow icons that live directly in the column header. Syncfusion structurally
   nests the filter-bar row (.e-filterbar) inside .e-gridheader too, so this second, more specific rule
   (targets the <span> directly, beating the <button>'s inherited white) repaints the search icon the same
   grey as its own button background — the icon is still there, just invisible against itself. This is a
   theme-package defect (missing a :not(.e-btn-icon) exclusion), not a missing asset, wrong path, or
   anything of ours — restore the intended inherited (white) color for icons that sit inside a filter-bar
   button, leaving every other themed header icon untouched. `!important` is required: Syncfusion's own
   rule carries five `:not(.class)` exclusions, each counting as a class for specificity, so it outweighs
   any plain selector of ours short of matching that same chain — verified live, a same-specificity rule
   here left the icon still grey-on-grey. */
.e-grid .e-gridheader .e-filterbar .e-btn .e-icons {
    color: inherit !important;
}

/* ── Grid fit (Duane's rule, 2026-08-28): a grid never
   widens the page. No stylesheet anywhere caps a grid at its container, so any column whose minimum content
   width can't compress — the Boolean IsActive filter-bar's dropdown-plus-button pair, an editable grid's
   built-in command buttons — pushes the whole table past .content's width (app.css; formerly an 80rem cap, removed 2026-10-06) and the PAGE
   overflows, since there is no internal scrollbar to absorb it. The page column stays owned by .content
   (app.css) — this rule caps the grid at whatever width .content already gives it and scrolls internally
   instead. Verified against Materials, all five Product Options tab grids (both broken before this rule) and
   /inventory/stock (already fit, confirmed unaffected).
   Will's grid-measurement sweep (2026-09-01, approvals card #234) found two of this rule's original five lines
   inert and removed them here: `.e-gridheader`/`.e-gridcontent` are Syncfusion's outer WRAPPER elements — their
   scrollWidth always equals their clientWidth, so an overflow-x:auto on THEM never had anything to scroll and
   never did anything. The actual scrolling element in both header and body is Syncfusion's own INNER
   `.e-headercontent` / `.e-content` (each already carries its own inline `overflow: auto` from Syncfusion
   itself, unconditionally, whether or not that grid ever overflows) — that inline styling is what every
   working horizontal scroll on every grid has been running on the whole time, not this rule. max-width:100%
   below is the half of this rule that is load-bearing and stays. ── */
.content .e-grid {
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   Grids & Add/Edit dialogs — Sprint 8.5 (Duane's spec, architecture/DESIGN-SYSTEM-GRIDS-AND-
   DIALOGS.md §2, Francie 2026-09-01). Widens the boundary the two Syncfusion-literal blocks
   above declared ("four states only, not a sweep") to every `.e-*` / EditOne surface reachable
   from the 21 `<DataGrid>` instances and their Add/Edit dialogs: grid toolbar, header, filter
   bar, rows, command column, pager, dialog chrome, dialog form, dialog footer. Still enumerated,
   not a sweep — anything not listed below (Gantt, scheduler, tree-grid) stays untouched. One
   Shell-owned layer, cascades to all 21 grids; no per-screen or per-Blick copy (DESIGN-SYSTEM.md §4.32). ── */

/* ── Grid toolbar (Add / CSV Export / Print) — spec §4. Transparent strip; buttons styled as
   the house secondary/outline button (Buttons/Default Button.png): surface fill, 1px border,
   radius, hover tint. Add is not promoted to a solid primary here — the AISv2 solid "Add
   Customer" button lives in the page header, a screen-level choice outside this layer. ── */
.e-grid .e-toolbar {
    background: var(--brand-surface);
    border: none;
    border-bottom: 1px solid var(--brand-border);
}
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn {
    background: var(--brand-surface) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-md) !important;
    color: var(--brand-text) !important;
    gap: var(--brand-space-2);
}
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-icons,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn .e-tbar-btn-text {
    color: inherit;
}
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn.e-btn:hover {
    background: var(--brand-primary-light) !important;
    border-color: var(--brand-border) !important;
}

/* ── Column headers — spec §4: muted label pairing (same as .app-field-list dt), no vertical
   column rules, active-sort caret carries brand primary. ── */
.e-grid .e-columnheader .e-headercell {
    border-bottom: 1px solid var(--brand-border-strong);
}
.e-grid .e-columnheader .e-headercelldiv {
    color: var(--brand-text-muted);
    font-weight: var(--brand-font-weight-medium);
    font-size: var(--brand-font-size-sm);
}
.e-grid .e-columnheader .e-sortfilterdiv {
    color: var(--brand-text-subtle);
}
.e-grid .e-columnheader .e-headercell.e-ascending .e-sortfilterdiv,
.e-grid .e-columnheader .e-headercell.e-descending .e-sortfilterdiv {
    color: var(--brand-primary);
}

/* ── Filter row inputs — spec §4. The search-icon-invisible fix above (line ~806) stays; this
   adds the rounded-input + focus-ring treatment Fields.png specifies. ── */
.e-grid .e-filterbar input.e-input {
    border: 1px solid var(--brand-border) !important;
    border-radius: var(--brand-radius-md) !important;
    background: var(--brand-surface);
}
.e-grid .e-filterbar input.e-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 25%, transparent);
}

/* ── Rows — spec §4: roomier vertical padding, no alternating fill (none in AISv2 — hover
   carries the scan affordance instead). Selection/focus rules above (line ~845, ~849) stay. ── */
.e-grid .e-rowcell {
    padding-top: var(--brand-space-3);
    padding-bottom: var(--brand-space-3);
    border-bottom: 1px solid var(--brand-border);
}
.e-grid .e-row:hover .e-rowcell {
    background: var(--brand-primary-light);
}
/* A grid row carrying theme.css's warning class (GridRowSpecification.CssClassForRow, e.g. an overdue bill) tints its cells the way a hand-built .app-table row does; the second rule keeps a warm tone on hover. */
.e-grid .e-row.app-table__row--warning .e-rowcell {
    background-color: var(--brand-warning-bg);
}
.e-grid .e-row.app-table__row--warning:hover .e-rowcell {
    background-color: var(--brand-warning-mid-bg);
}

/* ── Actions column icon buttons — spec §4 (Icon Left.png sizing; `title` tooltips are already
   the existing convention on every custom command, e.g. Products.razor/Quotes.razor, and are
   untouched here). Syncfusion's built-in Edit/Delete command buttons render `.e-btn.e-flat`
   with an `e-edit`/`e-delete` icon class inside the Actions column's `.e-unboundcell`; custom
   commands (GridCustomCommandSpecification) render the same shape. ── */
.e-grid .e-unboundcell .e-btn.e-flat {
    color: var(--brand-text-muted) !important;
    min-width: 40px;
    min-height: 40px;
}
/* Hover, keyboard focus and press: the house hover tint behind a dark glyph, so Edit and trash stay readable and
   still match each other. Syncfusion's own hover paints the icon white and its focus fills the button grey
   (measured on the Materials grid, 2026-10-05: white glyph on a light box on hover, grey glyph on grey on focus),
   so the glyph, fill and border are all declared here, and the icon child inherits the button's colour. */
.e-grid .e-unboundcell .e-btn.e-flat:hover,
.e-grid .e-unboundcell .e-btn.e-flat:focus,
.e-grid .e-unboundcell .e-btn.e-flat:focus-visible,
.e-grid .e-unboundcell .e-btn.e-flat:active {
    color: var(--brand-primary-hover) !important;
    background: var(--brand-primary-lighter) !important;
    border-color: transparent !important;
}
.e-grid .e-unboundcell .e-btn.e-flat:hover .e-icons,
.e-grid .e-unboundcell .e-btn.e-flat:hover .e-btn-icon,
.e-grid .e-unboundcell .e-btn.e-flat:focus .e-icons,
.e-grid .e-unboundcell .e-btn.e-flat:focus .e-btn-icon,
.e-grid .e-unboundcell .e-btn.e-flat:focus-visible .e-icons,
.e-grid .e-unboundcell .e-btn.e-flat:focus-visible .e-btn-icon,
.e-grid .e-unboundcell .e-btn.e-flat:active .e-icons,
.e-grid .e-unboundcell .e-btn.e-flat:active .e-btn-icon {
    color: inherit !important;
}
.e-grid .e-unboundcell .e-btn.e-flat:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-primary) 50%, transparent) !important; /* the house focus ring (theme.css .btn-primary:focus-visible) */
}
.e-grid .e-unboundcell .e-btn.e-flat.e-edit:hover,
.e-grid .e-unboundcell .e-btn.e-flat .e-delete {
    color: var(--brand-text-muted);
}

/* ── Pager current-page fill — spec §4: "reuse .list-pager/.list-search, no fork" is a layout
   precedent (theme.css's .list-pager is flex/spacing-only, no colour swatch to copy), so the
   colour values below are the literal token mapping the spec table gives: current page
   --brand-primary fill / white text, hover --brand-primary-light. `!important` for the same
   same-specificity-tie reason as the block above (Syncfusion's own bootstrap5.css loads after
   shared.css in App.razor).
   e-currentitem's color/background/radius are set ONLY here; shared-vendor.css's block still governs
   e-currentitem's border-right-color and focus ring, which this one leaves alone.
   ⚠ Syncfusion's current-page "1" is ONE <a class="e-link e-numericitem e-spacing e-currentitem">, so it also
   matches shared-vendor.css's `.e-pager .e-numericitem` / `.e-spacing` text-colour rule (--brand-primary-hover
   !important), which loads AFTER this file and wins any same-specificity tie — the number rendered dark on the
   blue chip on every grid. The `.e-numericitem.e-currentitem` compound selectors below are one class heavier than
   the vendor rules they must beat, on purpose; do not shorten them back to `.e-currentitem` alone.
   The hand-built `.list-pager__page` buttons carry the same mapping in CCP.UI.Components/wwwroot/list-pager.css; change the two together. ── */
.e-pager .e-currentitem, .e-pager .e-currentitem:hover,
.e-pager .e-numericitem.e-currentitem, .e-pager .e-numericitem.e-currentitem:hover {
    background: var(--brand-primary) !important;
    color: var(--brand-text-on-brand) !important;
    border-radius: var(--brand-radius-md) !important;
}
.e-pager .e-numericitem:not(.e-currentitem):hover {
    background: var(--brand-primary-light) !important;
    border-radius: var(--brand-radius-md) !important;
}

/* ── Grid empty / loading — spec §6. Wording stays Syncfusion's; only the look changes. ── */
.e-grid .e-emptyrow td {
    color: var(--brand-text-muted);
    padding: var(--brand-space-5) !important;
    text-align: center;
}
.e-grid .e-spinner-pane .e-path-circle {
    stroke: var(--brand-primary);
}

/* ── Grid identifying-column link (.app-grid-link) ───────────────────────────────────────────────────────
   git show bf30f9a2:backlog/MOCKUP-SPEC-QUOTE-DETAILS.md §6 (Duane, 2026-09-01, Brian's ruling): in any grid of records, the record's
   identifying column (FriendlyID or display name) renders as a real navigating <a> to that record's detail
   page — a cell styled as a link that does nothing is a dead affordance. Delivered via DataGrid's
   GridColumnTemplateSpecifications (ProductOptions.razor:248-258 precedent). Written once here, joins the
   published app-* class list, rather than per-Blick — a Blick never depends on a sibling Blick's project
   (BD-BLOCK-PACKAGING-1), but this Shell-owned stylesheet reaches every Blick's DOM regardless.
   Identical treatment to the breadcrumb link (.app-breadcrumb a above) — one link vocabulary app-wide. */
.app-grid-link {
    color: var(--brand-primary);
    text-decoration: none;
    /* review_arthur-2026-09-02-customer-screens.md defect 3: the grid's own ClipMode.EllipsisWithTooltip only
       truncates a plain declared column's own text node against .e-rowcell — a GridColumnTemplateSpecifications
       cell (this link) is custom content Syncfusion never assumes it should clip, so without an ellipsis
       treatment of its own the link's text cuts mid-glyph at the cell edge instead. Declared here, once, so
       every .app-grid-link consumer (ProductOptions.razor, CustomerDirectory.razor) gets it identically. */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-grid-link:hover,
.app-grid-link:focus-visible {
    color: var(--brand-primary-hover);
    text-decoration: underline;
}

/* ── Grid cell secondary line (.app-grid-cell__sub) ──────────────────────────────────────────────────────
   git show 4fab9021:architecture/MOCKUP-SPEC-CUSTOMER-DIRECTORY-GRID.md §2.7: a composed grid cell renders its supporting value on a
   second, muted line under the value the column is declared on. Written once here beside .app-grid-link,
   joining the published app-* class list, rather than per-Blick — a Blick never depends on a sibling
   Blick's project (BD-BLOCK-PACKAGING-1), but this Shell-owned stylesheet reaches every Blick's DOM. */
.app-grid-cell__sub {
    display: block;
    color: var(--brand-text-muted);
    font-size: var(--brand-font-size-sm);
}