/* BluGrid 0.4.0. Set --bluui-* tokens on the host or an ancestor.
   Button appearance comes from the consumer's BluUITheme. */
.blu-grid, .blu-grid-shell, .blu-grid-edit-toolbar, .blu-grid-column-panel, .blu-grid-view-toolbar {
  --blu-primary: var(--bluui-primary, #4f46e5);
  --blu-surface: var(--bluui-surface, #fff);
  --blu-surface-muted: var(--bluui-surface-muted, #f8fafc);
  --blu-text: var(--bluui-text, #182230);
  --blu-text-muted: var(--bluui-text-muted, #64748b);
  --blu-border: var(--bluui-border, #e2e8f0);
  --blu-row-border: var(--bluui-row-border, #eef0f4);
  --blu-control-border: var(--bluui-control-border, #cbd5e1);
  --blu-selected: var(--bluui-selected, #e0e7ff);
  --blu-hover: var(--bluui-hover, #f8faff);
  --blu-changed: var(--bluui-changed, #f5f3ff);
  --blu-danger: var(--bluui-danger, #b42318);
  --blu-radius: var(--bluui-radius, 10px);
  --blu-control-radius: var(--bluui-control-radius, 6px);
  --blu-font: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --blu-font-size: var(--bluui-grid-font-size, 14px);
  --blu-header-font-size: var(--bluui-grid-header-font-size, 12px);
  --blu-focus-shadow: var(--bluui-focus-shadow, 0 0 0 3px rgb(79 70 229 / 16%));
  --blu-menu-shadow: var(--bluui-menu-shadow, 0 8px 24px rgb(15 23 42 / 12%));
  width: 100%; min-width: 0; box-sizing: border-box;
  font-family: var(--blu-font);
}
.blu-grid .blu-grid-number { text-align: right; font-variant-numeric: tabular-nums; }
.blu-grid .blu-grid-number-header .ag-header-cell-label { justify-content: flex-end; }
.blu-grid .blu-grid-number-header .ag-cell-label-container { gap: 6px; }
.blu-grid .blu-grid-boolean { color: var(--blu-text-muted); }
.blu-grid .ag-root-wrapper { box-shadow: 0 1px 3px rgb(15 23 42 / 3%); }
.blu-grid .ag-header-cell-text { letter-spacing: .01em; }
.blu-grid .ag-cell { font-variant-numeric: tabular-nums; }
.blu-grid .ag-row.blu-grid-row-changed { background-color: var(--blu-changed); }
.blu-grid .ag-row.blu-grid-row-changed.ag-row-selected { background-color: var(--blu-selected); }
.blu-grid .ag-row.blu-grid-row-changed::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--blu-primary); pointer-events: none;
}
.blu-grid .blu-grid-cell-changed {
  font-weight: 600; text-decoration: underline dotted var(--blu-primary); text-underline-offset: 5px;
}
.blu-grid .blu-grid-editor {
  width: 100%; min-width: 0; height: 100%; box-sizing: border-box; padding: 0 12px;
  border: 2px solid var(--blu-primary); border-radius: var(--blu-control-radius); background: var(--blu-surface);
  color: var(--blu-text); font: inherit; outline: none;
}
.blu-grid select.blu-grid-editor {
  appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; padding-inline-end: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--blu-text-muted) 50%),
    linear-gradient(135deg, var(--blu-text-muted) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.blu-grid .blu-grid-editor[aria-invalid="true"] { border-color: var(--blu-danger); }
.blu-grid .blu-grid-datetime-editor {
  width: 340px; max-width: calc(100vw - 32px); padding: 12px;
  display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;
  border: 1px solid var(--blu-border); border-radius: var(--blu-radius);
  background: var(--blu-surface); box-shadow: var(--blu-menu-shadow); color: var(--blu-text);
}
.blu-grid .blu-grid-datetime-editor .blu-grid-editor { height: 40px; flex: none; }
.blu-grid .blu-grid-datetime-editor [hidden] { display: none; }
.blu-grid .blu-grid-editor-zone { color: var(--blu-text-muted); font-size: 12px; line-height: 1.4; }
.blu-grid-edit-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 8px; border: 1px solid var(--blu-border);
  border-inline-start: 3px solid var(--blu-primary); border-radius: var(--blu-radius);
  background: var(--blu-surface); color: var(--blu-text); font-size: var(--blu-font-size);
}
.blu-grid-edit-toolbar[hidden] { display: none; }
.blu-grid-edit-count {
  display: inline-flex; align-items: center; margin-inline-end: auto; padding: 6px 10px;
  border-radius: var(--blu-control-radius); background: var(--blu-changed); font-weight: 600; line-height: 1.4;
}
.blu-grid-edit-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; min-width: 0; margin-inline-start: auto;
}

/* Grid frame and shared toolbar. Native Button Blocks retain their behavior;
   their generated wrappers size to content inside this component only. */
.blu-grid-shell { border:1px solid var(--blu-border); border-radius:var(--blu-radius); background:var(--blu-surface); box-shadow:0 2px 6px rgb(15 23 42 / 3%); }
.blu-grid-shell .ag-root-wrapper { border:0; box-shadow:none; border-radius:0 0 var(--blu-radius) var(--blu-radius); }
.blu-grid-view-toolbar { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; position:relative; padding:12px; margin:0; min-height:56px; font-size:13px; color:var(--blu-text-muted); border-bottom:1px solid var(--blu-border); border-radius:var(--blu-radius) var(--blu-radius) 0 0; background:var(--blu-surface); overflow:visible; }
.blu-grid-edit-actions > [data-block], .blu-grid-view-toolbar > [data-block], .blu-grid-column-actions > [data-block] { width:auto; min-width:0; flex:0 0 auto; }
.blu-grid-view-trigger,.blu-grid-view-actions { width:auto; min-width:0; flex:0 1 auto; }
.blu-grid-view-actions,.blu-grid-view-actions > [data-block],.blu-grid-view-actions > [data-container] { display:flex; align-items:center; flex-wrap:wrap; gap:8px; width:auto; }
.blu-grid-view-toolbar button,.blu-grid-column-popover button,.blu-grid-edit-actions button { box-sizing:border-box; min-height:34px; height:34px; padding:6px 11px; font-size:12px; line-height:20px; border-radius:7px; gap:7px; white-space:nowrap; }
.blu-grid-view-trigger button { display:inline-flex; align-items:center; justify-content:center; background:var(--blu-surface); color:var(--blu-text); border:1px solid var(--blu-border); box-shadow:none; }
.blu-grid-view-trigger button:hover,.blu-grid-view-trigger button[aria-expanded="true"] { background:var(--blu-selected); color:var(--blu-primary); border-color:var(--blu-primary); }
.blu-grid-search { display:flex; align-items:center; flex:1 1 250px; width:auto; min-width:0; gap:8px; margin-inline-end:auto; }
.blu-grid-search input { flex:1 1 200px; width:100%; min-width:100px; max-width:300px; box-sizing:border-box; height:34px; margin:0; border:1px solid var(--blu-border); border-radius:7px; background:var(--blu-surface-muted); font:inherit; font-size:13px; padding:7px 11px; }
.blu-grid-search > [data-block] { flex:0 0 auto; width:auto; }
.blu-grid-view-message,.blu-grid-control-message { font-size:12px; color:var(--blu-text-muted); overflow-wrap:anywhere; }
.blu-grid-view-message:empty { display:none; }
.blu-grid-column-error,.blu-grid-tools-error { color:var(--blu-danger,#b42318); font-size:12px; line-height:1.5; margin:4px 0; overflow-wrap:anywhere; }

/* Column settings: one clear hierarchy, a scrolling options body, and a stable
   footer. Position and available height are supplied by column-panel.js. */
.blu-grid-column-panel { background:var(--blu-surface); border:1px solid var(--blu-border); border-radius:12px; box-sizing:border-box; color:var(--blu-text); }
.blu-grid-column-popover { position:absolute; inset-inline-end:0; top:calc(100% + 8px); z-index:40; display:flex; flex-direction:column; gap:0; width:360px; max-width:calc(100vw - 32px); padding:18px; margin:0; box-shadow:0 12px 40px rgb(15 23 42 / 16%),0 2px 8px rgb(15 23 42 / 5%); text-align:start; overflow:auto; }
.blu-grid-column-title { display:block; margin:0 0 5px; color:var(--blu-text); font-size:15px; font-weight:650; line-height:1.4; }
.blu-grid-column-hint { display:block; margin-bottom:16px; color:var(--blu-text-muted); font-size:12px; line-height:1.55; }
.blu-grid-display-options { display:grid; gap:12px; padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid var(--blu-border); }
.blu-grid-preference-heading { color:var(--blu-text-muted); font-size:10px; font-weight:650; letter-spacing:.11em; line-height:1.5; }
.blu-grid-tool-field { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; font-weight:500; }
.blu-grid-tool-select { appearance:none; -webkit-appearance:none; box-sizing:border-box; min-width:105px; height:32px; margin:0; border:1px solid var(--blu-border); border-radius:6px; background:var(--blu-surface) var(--blu-grid-select-arrow) no-repeat right 9px center / 12px; color:var(--blu-text); font:inherit; font-size:12px; line-height:18px; padding:6px 26px 6px 10px; cursor:pointer; }
.blu-grid-tool-field select { width:145px; }
.blu-grid-floating-toggle { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--blu-text); cursor:pointer; }
.blu-grid-floating-toggle input,.blu-grid-preference-column input[type="checkbox"],.blu-grid-details__selection { appearance:none; -webkit-appearance:none; width:16px; height:16px; min-width:16px; margin:0; border:1px solid var(--blu-control-border,#cbd5e1); border-radius:4px; background:var(--blu-surface,#fff); cursor:pointer; }
.blu-grid-floating-toggle input:checked,.blu-grid-preference-column input[type="checkbox"]:checked,.blu-grid-details__selection:checked { border-color:var(--blu-primary,#4f46e5); background:var(--blu-primary,#4f46e5) var(--blu-grid-checkbox-tick) no-repeat center / 12px; }
.blu-grid-tool-buttons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.blu-grid-tool-buttons > button:last-child { grid-column:1 / -1; }
.blu-grid-preference-columns { display:grid; gap:3px; }
.blu-grid-preference-columns > .blu-grid-preference-heading { margin-bottom:5px; }
.blu-grid-preference-column { display:grid; grid-template-columns:minmax(0,1fr) 105px; align-items:center; gap:12px; min-height:40px; padding:4px 0; border-bottom:1px solid var(--blu-row-border); }
.blu-grid-preference-column:last-child { border-bottom:0; }
.blu-grid-preference-column label { display:flex; align-items:center; gap:9px; margin:0; font-size:12px; font-weight:400; color:var(--blu-text); cursor:pointer; }
.blu-grid-column-list { min-height:0; max-height:280px; overflow:auto; }
.blu-grid-column-choice { display:flex; align-items:center; gap:9px; min-height:36px; font-size:12px; }
.blu-grid-column-actions { display:flex; flex-wrap:wrap; gap:8px; flex:none; padding-top:14px; margin-top:14px; border-top:1px solid var(--blu-border); }
.blu-grid-column-command-grid { display:grid; gap:8px; width:100%; }
.blu-grid-column-command-row { display:flex; gap:8px; width:100%; }
.blu-grid-column-command-row > .blu-grid-column-command-slot { flex:1 1 0; min-width:0; width:0; }
.blu-grid-column-command-slot > [data-block] { display:block; width:100%; }
.blu-grid-column-command-slot button { width:100%; }
.blu-grid-column-end { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; width:auto; min-width:0; max-width:100%; margin-inline-start:auto; }
.blu-grid-column-done,.blu-grid-column-done > [data-block] { width:auto; min-width:0; flex:0 0 auto; }
.blu-grid-column-end .blu-grid-view-message { flex-basis:100%; }
.blu-grid-view-toolbar [hidden],.blu-grid-column-popover[hidden],.blu-grid-tools-error[hidden] { display:none; }

/* Selection and bulk editing use one compact command strip. Application
   commands are visually secondary until records have been selected. */
.blu-grid-selection-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; background:var(--blu-surface-muted,#f8fafc); border-bottom:1px solid var(--blu-border,#e2e8f0); }
.has-selection .blu-grid-selection-tools { background:var(--bluui-primary-soft, #f7f7ff); }
.blu-grid-selection-count { display:inline-flex; align-items:center; min-width:78px; margin-inline-end:4px; font-size:12px; font-weight:500; color:var(--blu-text-muted,#64748b); }
.has-selection .blu-grid-selection-count { color:var(--blu-primary,#4f46e5); font-weight:650; }
.blu-grid-tool-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; appearance:none; box-sizing:border-box; border:1px solid var(--blu-border,#dbe3ee); border-radius:6px; padding:6px 10px; height:32px; min-height:32px; background:var(--blu-surface,#fff); color:var(--blu-text,#334155); font:inherit; font-size:12px; line-height:18px; cursor:pointer; }
.blu-grid-tool-button:hover:not(:disabled) { background:var(--blu-hover,#f8faff); border-color:var(--bluui-primary-border, #b8bcf5); color:var(--blu-primary,#4f46e5); }
.blu-grid-tool-button:disabled { opacity:.45; cursor:default; }
.blu-grid-shell .blu-grid-edit-toolbar { margin:0; padding:10px 12px; border-width:0 0 1px 3px; border-radius:0; background:var(--bluui-primary-soft, #faf8ff); }
.blu-grid-edit-count { padding:4px 8px; font-size:12px; }
.blu-grid-icon { display:block; width:16px; height:16px; flex:0 0 16px; pointer-events:none; }

/* Table chrome and native AG Grid pagination share the toolbar proportions. */
.blu-grid .ag-header { border-bottom:1px solid var(--blu-border); }
.blu-grid .ag-header-cell { font-weight:600; }
.blu-grid .ag-header-row-column-filter { background:var(--blu-surface); }
.blu-grid .ag-floating-filter-input { min-width:0; }
/* The header identifies each filter; remove the redundant search glyph so it
   cannot overlap the browser-native date segments. */
.blu-grid .ag-floating-filter-input .ag-input-field-search-icon { display:none; }
.blu-grid .ag-floating-filter-input input { height:30px; min-height:30px; padding-inline:9px; border-radius:6px; border-color:var(--blu-border); background:var(--blu-surface-muted); font-size:12px; }
.blu-grid .ag-floating-filter-button-button { width:24px; height:28px; border-radius:5px; color:var(--blu-text-muted); }
.blu-grid .ag-floating-filter-button-button:hover { background:var(--blu-selected); color:var(--blu-primary); }
.blu-grid .ag-paging-panel { display:flex; align-items:center; min-height:56px; height:auto; padding:10px 14px; border-top:1px solid var(--blu-border); background:var(--blu-surface); color:var(--blu-text-muted); font-size:12px; gap:12px; }
/* AG Grid 36 wraps its visible pagination controls in this content element. */
.blu-grid .ag-paging-panel-content { display:flex; align-items:center; flex-wrap:wrap; width:100%; min-width:0; gap:12px; }
.blu-grid .ag-paging-page-size { margin:0; gap:8px; }
.blu-grid .ag-paging-row-summary-panel { margin-inline-start:auto; margin-inline-end:8px; gap:5px; }
.blu-grid .ag-paging-page-summary-panel { gap:7px; margin:0; }
.blu-grid .ag-paging-button { display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; margin:0; border:1px solid var(--blu-border); border-radius:6px; background:var(--blu-surface); color:var(--blu-text); }
.blu-grid .ag-paging-button:hover:not(.ag-disabled) { color:var(--blu-primary); border-color:var(--blu-primary); background:var(--blu-hover); }
.blu-grid .ag-paging-button.ag-disabled { opacity:.35; background:var(--blu-surface-muted); }
.blu-grid .ag-paging-panel .ag-picker-field-wrapper { min-height:30px; height:30px; border:1px solid var(--blu-border); border-radius:6px; background:var(--blu-surface); box-shadow:none; }
.blu-grid .ag-paging-panel .ag-text-field-input { width:40px; height:30px; min-height:30px; margin:0; padding:4px; border:1px solid var(--blu-border); border-radius:6px; font-size:12px; text-align:center; background:var(--blu-surface-muted); }

/* Row commands use an icon button and an owned popover outside the scrolling
   viewport. The renderer removes its menu/listeners when recycled or destroyed. */
.blu-grid-row-actions { display:inline-flex; align-items:center; justify-content:center; height:100%; }
.blu-grid-row-action-trigger { display:inline-flex; align-items:center; justify-content:center; width:30px; height:28px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--blu-text-muted,#64748b); cursor:pointer; vertical-align:middle; }
.blu-grid-row-action-trigger:hover,.blu-grid-row-action-trigger[aria-expanded="true"] { border-color:var(--blu-border,#dbe3ee); background:var(--blu-surface-muted,#f8fafc); color:var(--blu-primary,#4f46e5); }
.blu-grid-row-menu { position:fixed; z-index:10000; box-sizing:border-box; width:210px; padding:6px; border:1px solid var(--bluui-border,#dbe3ee); border-radius:10px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#334155); box-shadow:0 10px 32px rgb(15 23 42 / 15%); font-family:var(--bluui-font,Inter,ui-sans-serif,system-ui,sans-serif); }
.blu-grid-row-menu__title { display:block; padding:8px 10px; color:var(--bluui-text-muted,#64748b); font-size:9px; font-weight:650; letter-spacing:.1em; }
.blu-grid-row-menu__item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:6px; background:transparent; color:inherit; font:inherit; font-size:12px; text-align:start; cursor:pointer; }
.blu-grid-row-menu__item:hover,.blu-grid-row-menu__item:focus-visible { background:var(--bluui-surface-muted, #eef2ff); color:var(--bluui-primary,#4f46e5); outline:none; }
.blu-grid-row-menu__item:disabled { opacity:.4; cursor:default; }

/* Expanded record: a quiet summary header, then readable labeled values.
   Content scrolls within the configured detail height; records still count once. */
.blu-grid-detail-toggle { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:5px; width:26px; height:26px; padding:0; color:var(--bluui-text-muted,#64748b); cursor:pointer; vertical-align:middle; }
.blu-grid-detail-toggle:hover { background:var(--bluui-selected,#e0e7ff); color:var(--bluui-primary,#4f46e5); }
.blu-grid-details { box-sizing:border-box; display:flex; flex-direction:column; height:100%; background:var(--bluui-surface-muted,#f8fafc); color:var(--bluui-text,#334155); border-block:1px solid var(--bluui-border,#dbe3ee); border-inline-start:3px solid var(--bluui-primary,#4f46e5); }
.blu-grid-details__header { display:flex; align-items:center; gap:12px; flex:0 0 57px; padding:0 16px; background:var(--bluui-surface,#fff); border-bottom:1px solid var(--bluui-border,#dbe3ee); }
.blu-grid-details__title { display:grid; gap:2px; flex:1; min-width:0; }
.blu-grid-details__eyebrow { color:var(--bluui-primary,#4f46e5); font-size:9px; font-weight:650; letter-spacing:.1em; line-height:1.4; }
.blu-grid-details__title strong { overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:600; line-height:1.5; }
.blu-grid-details__fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 24px; overflow:auto; margin:0; padding:18px 22px; }
.blu-grid-details__field { min-width:0; }
.blu-grid-details__field dt { color:var(--bluui-text-muted,#64748b); font-size:11px; line-height:1.4; margin-bottom:5px; }
.blu-grid-details__field dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.5; font-weight:500; }

/* Optional cell renderers use BluUI's restrained semantic colors. */
.blu-grid-cell-badge { display:inline-flex; align-items:center; max-width:100%; padding:2px 9px; line-height:22px; border-radius:999px; font-size:12px; background:var(--bluui-surface-muted, #f1f5f9); color:var(--bluui-text-muted, #475569); }
.blu-grid-cell-action { border:0; background:transparent; color:var(--bluui-primary,#4f46e5); font:inherit; cursor:pointer; padding:4px 8px; border-radius:6px; }
.blu-grid-cell-action:hover { background:var(--bluui-surface-muted, #eef2ff); }
.blu-grid-cell-action:disabled,.blu-grid-detail-toggle:disabled,.blu-grid-row-action-trigger:disabled { opacity:.45; cursor:default; }
.blu-grid-cell-progress { width:100%; height:10px; accent-color:var(--bluui-primary,#4f46e5); }
.blu-grid-tool-button:focus-visible,.blu-grid-tool-select:focus-visible,.blu-grid-row-action-trigger:focus-visible,.blu-grid-detail-toggle:focus-visible,.blu-grid-view-toolbar button:focus-visible,.blu-grid-column-popover button:focus-visible,.blu-grid-floating-toggle input:focus-visible,.blu-grid-preference-column input[type="checkbox"]:focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:2px; }

/* Small screens keep commands and page navigation usable without shrinking
   their touch targets; the grid itself retains horizontal scrolling. */
@media (max-width:700px) {
  .blu-grid-search { flex-basis:100%; }
  .blu-grid-search input { max-width:none; }
  .blu-grid .ag-paging-panel { flex-wrap:wrap; gap:10px; padding:10px; }
  .blu-grid .ag-paging-row-summary-panel { margin-inline-start:auto; }
  .blu-grid .ag-paging-page-summary-panel { margin-inline-start:auto; }
  .blu-grid-selection-tools { gap:6px; }
  .blu-grid-column-popover { width:min(360px,calc(100vw - 32px)); }
}

/* Inline mask icons follow the button color without a font or HTTP request. */
.blu-grid-shell,.blu-grid-column-panel,.blu-grid-details { --blu-grid-select-arrow:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2364748b%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E"); --blu-grid-checkbox-tick:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l4%204L19%206%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command::before,.blu-grid-view-trigger button::before { content:""; display:inline-block; flex:0 0 15px; width:15px; height:15px; border:0; border-radius:0; background:currentColor; mask:var(--blu-grid-command-icon) center / contain no-repeat; -webkit-mask:var(--blu-grid-command-icon) center / contain no-repeat; }
.blu-grid-command--columns{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%20M9%204v16%20M15%204v16%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--search{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%2017a6.5%206.5%200%201%200%200-13%206.5%206.5%200%200%200%200%2013%20M16%2016l4%204%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--download{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12%20M7%2010l5%205%205-5%20M4%2016v4h16v-4%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--save{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h12l4%204v14H3V3z%20M7%203v6h10V3%20M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--restore{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011a9%209%200%201%201%202%207%20M3%204v7h7%20M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--reset{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2010a8%208%200%201%201%201%208%20M4%204v6h6%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--check{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012l4%204L19%206%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-command--close{ --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012%20M18%206L6%2018%22%2F%3E%3C%2Fsvg%3E"); }
.blu-grid-view-trigger button { --blu-grid-command-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%20M9%204v16%20M15%204v16%22%2F%3E%3C%2Fsvg%3E"); }


/* Business rules use the shared ComponentColor palette as BluUI components.
   Cell rules use a restrained tint; the existing draft marker remains visible. */
/* Apply semantic row colors to the Quartz row surface in BluGrid 0.5.
   explicitly; selection and unsaved-change backgrounds keep precedence. */
.blu-grid .ag-row[class*="blu-grid-row-tone--"]:not(.ag-row-selected):not(.blu-grid-row-changed) {
  background-color: var(--ag-row-background-color);
}

/* A pinned summary is separate from data rows, selection, editing and CSV.
   Its scope stays beside the label so a page total cannot look like a grand total. */
.blu-grid .ag-floating-bottom { border-top: 1px solid var(--blu-border); }
.blu-grid .ag-row-pinned { background: var(--blu-surface-muted); font-weight: 600; }
.blu-grid .ag-row-pinned .ag-cell { display: flex; align-items: center; }
.blu-grid .ag-row-pinned .blu-grid-number { justify-content: flex-end; }
.blu-grid .ag-row-pinned .blu-grid-summary-label {
  white-space: pre-line;
  line-height: 18px;
  font-size: 11px;
  color: var(--blu-text-muted);
}
.blu-grid .ag-row-pinned .blu-grid-summary-label::first-line {
  color: var(--blu-text);
  font-size: 12px;
}

/* Presets stay softly tinted so selection and draft indicators remain clear. */
.blu-grid-cell-badge--default, .blu-grid .blu-grid-cell-tone--default { background:var(--bluui-color-default-soft,#f5f5f5); color:var(--bluui-color-default-text,rgba(0, 0, 0, 0.88)); }
.blu-grid .blu-grid-row-tone--default { --ag-row-background-color:var(--bluui-color-default-soft,#f5f5f5); }
.blu-grid-cell-badge--primary, .blu-grid .blu-grid-cell-tone--primary { background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); }
.blu-grid .blu-grid-row-tone--primary { --ag-row-background-color:var(--bluui-color-primary-soft,#eef2ff); }
.blu-grid-cell-badge--secondary, .blu-grid .blu-grid-cell-tone--secondary { background:var(--bluui-color-secondary-soft,#e2e8f0); color:var(--bluui-color-secondary-text,#334155); }
.blu-grid .blu-grid-row-tone--secondary { --ag-row-background-color:var(--bluui-color-secondary-soft,#e2e8f0); }
.blu-grid-cell-badge--success, .blu-grid .blu-grid-cell-tone--success { background:var(--bluui-color-success-soft,#f6ffed); color:var(--bluui-color-success-text,#52c41a); }
.blu-grid .blu-grid-row-tone--success { --ag-row-background-color:var(--bluui-color-success-soft,#f6ffed); }
.blu-grid-cell-badge--processing, .blu-grid .blu-grid-cell-tone--processing { background:var(--bluui-color-processing-soft,#e6f4ff); color:var(--bluui-color-processing-text,#1677ff); }
.blu-grid .blu-grid-row-tone--processing { --ag-row-background-color:var(--bluui-color-processing-soft,#e6f4ff); }
.blu-grid-cell-badge--warning, .blu-grid .blu-grid-cell-tone--warning { background:var(--bluui-color-warning-soft,#fffbe6); color:var(--bluui-color-warning-text,#faad14); }
.blu-grid .blu-grid-row-tone--warning { --ag-row-background-color:var(--bluui-color-warning-soft,#fffbe6); }
.blu-grid-cell-badge--error, .blu-grid .blu-grid-cell-tone--error { background:var(--bluui-color-error-soft,#fff2f0); color:var(--bluui-color-error-text,#ff4d4f); }
.blu-grid .blu-grid-row-tone--error { --ag-row-background-color:var(--bluui-color-error-soft,#fff2f0); }
.blu-grid-cell-badge--danger, .blu-grid .blu-grid-cell-tone--danger { background:var(--bluui-color-danger-soft,#fff2f0); color:var(--bluui-color-danger-text,#ff4d4f); }
.blu-grid .blu-grid-row-tone--danger { --ag-row-background-color:var(--bluui-color-danger-soft,#fff2f0); }
.blu-grid-cell-badge--magenta, .blu-grid .blu-grid-cell-tone--magenta { background:var(--bluui-color-magenta-soft,#fff0f6); color:var(--bluui-color-magenta-text,#c41d7f); }
.blu-grid .blu-grid-row-tone--magenta { --ag-row-background-color:var(--bluui-color-magenta-soft,#fff0f6); }
.blu-grid-cell-badge--red, .blu-grid .blu-grid-cell-tone--red { background:var(--bluui-color-red-soft,#fff1f0); color:var(--bluui-color-red-text,#cf1322); }
.blu-grid .blu-grid-row-tone--red { --ag-row-background-color:var(--bluui-color-red-soft,#fff1f0); }
.blu-grid-cell-badge--volcano, .blu-grid .blu-grid-cell-tone--volcano { background:var(--bluui-color-volcano-soft,#fff2e8); color:var(--bluui-color-volcano-text,#d4380d); }
.blu-grid .blu-grid-row-tone--volcano { --ag-row-background-color:var(--bluui-color-volcano-soft,#fff2e8); }
.blu-grid-cell-badge--orange, .blu-grid .blu-grid-cell-tone--orange { background:var(--bluui-color-orange-soft,#fff7e6); color:var(--bluui-color-orange-text,#d46b08); }
.blu-grid .blu-grid-row-tone--orange { --ag-row-background-color:var(--bluui-color-orange-soft,#fff7e6); }
.blu-grid-cell-badge--gold, .blu-grid .blu-grid-cell-tone--gold { background:var(--bluui-color-gold-soft,#fffbe6); color:var(--bluui-color-gold-text,#d48806); }
.blu-grid .blu-grid-row-tone--gold { --ag-row-background-color:var(--bluui-color-gold-soft,#fffbe6); }
.blu-grid-cell-badge--lime, .blu-grid .blu-grid-cell-tone--lime { background:var(--bluui-color-lime-soft,#fcffe6); color:var(--bluui-color-lime-text,#7cb305); }
.blu-grid .blu-grid-row-tone--lime { --ag-row-background-color:var(--bluui-color-lime-soft,#fcffe6); }
.blu-grid-cell-badge--green, .blu-grid .blu-grid-cell-tone--green { background:var(--bluui-color-green-soft,#f6ffed); color:var(--bluui-color-green-text,#389e0d); }
.blu-grid .blu-grid-row-tone--green { --ag-row-background-color:var(--bluui-color-green-soft,#f6ffed); }
.blu-grid-cell-badge--cyan, .blu-grid .blu-grid-cell-tone--cyan { background:var(--bluui-color-cyan-soft,#e6fffb); color:var(--bluui-color-cyan-text,#08979c); }
.blu-grid .blu-grid-row-tone--cyan { --ag-row-background-color:var(--bluui-color-cyan-soft,#e6fffb); }
.blu-grid-cell-badge--blue, .blu-grid .blu-grid-cell-tone--blue { background:var(--bluui-color-blue-soft,#e6f4ff); color:var(--bluui-color-blue-text,#0958d9); }
.blu-grid .blu-grid-row-tone--blue { --ag-row-background-color:var(--bluui-color-blue-soft,#e6f4ff); }
.blu-grid-cell-badge--geekblue, .blu-grid .blu-grid-cell-tone--geekblue { background:var(--bluui-color-geekblue-soft,#f0f5ff); color:var(--bluui-color-geekblue-text,#1d39c4); }
.blu-grid .blu-grid-row-tone--geekblue { --ag-row-background-color:var(--bluui-color-geekblue-soft,#f0f5ff); }
.blu-grid-cell-badge--purple, .blu-grid .blu-grid-cell-tone--purple { background:var(--bluui-color-purple-soft,#f9f0ff); color:var(--bluui-color-purple-text,#531dab); }
.blu-grid .blu-grid-row-tone--purple { --ag-row-background-color:var(--bluui-color-purple-soft,#f9f0ff); }

/* Native select/date controls follow the same resolved appearance as Quartz. */
.blu-grid { --ag-browser-color-scheme:inherit; color-scheme:inherit; }

/* Keep paging commands reachable at 320 CSS pixels / 400% zoom. */
@media (max-width: 600px) {
  .blu-grid .ag-paging-page-summary-panel { flex-wrap: wrap; justify-content: center; max-width: 100%; min-width: 0; white-space: normal; }
  .blu-grid .ag-paging-row-summary-panel { flex-wrap: wrap; max-width: 100%; }
}

/* Form boundaries must remain visible in both modes (WCAG non-text contrast). */
.blu-grid-search input,
.blu-grid-tool-select,
.blu-grid .ag-floating-filter-input input,
.blu-grid .ag-paging-panel .ag-picker-field-wrapper,
.blu-grid .ag-paging-panel .ag-text-field-input {
  border-color: var(--blu-control-border);
}

/* Advanced column adjustments stay tucked beneath each column's main controls. */
.blu-grid-column-adjust { grid-column:1 / -1; min-width:0; padding-bottom:6px; }
.blu-grid-column-adjust summary { cursor:pointer; min-height:28px; display:list-item; margin-left:16px; color:var(--blu-text-muted); font-size:12px; }
.blu-grid-column-adjust summary:focus-visible { outline:2px solid var(--blu-primary); outline-offset:2px; }
.blu-grid-column-adjust-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:6px 0; }
.blu-grid-column-adjust-fields label { display:flex; flex-direction:column; align-items:stretch; gap:6px; min-width:0; }
.blu-grid-column-adjust-fields input,.blu-grid-column-adjust-fields select { width:100%; min-width:0; }
.blu-grid-column-adjust-fields input:focus-visible { outline:2px solid var(--blu-primary); outline-offset:2px; }