/* AxGrid (Components/Grid): the common Hub-backed list. Same chrome and type scale as the PMS boards (PbcaMgmtBoardTheme /
   PmsTheme): every color is a theme-bridge --app-* token, so switching the XAF theme restyles the grid. */

.ax-grid {
    --axg-fs: var(--app-font-size-base);
    --axg-fs-sm: calc(var(--axg-fs) * .857);
    --axg-accent: var(--app-primary);
    --axg-row-hover: color-mix(in srgb, var(--app-primary) 5%, var(--app-surface));
    --axg-row-selected: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface));
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* XAF's toolbar row is empty on a board host, so the grid supplies the gap below the tabs. */
    padding-top: 12px;
    min-width: 0;
    font-family: var(--app-font-family);
    font-size: var(--axg-fs);
    color: var(--app-fg);
}

.ax-grid .axg-icon { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- Toolbar: actions, search, export; columns and refresh on the right, as in XAF. ---------- */
.ax-grid .axg-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ax-grid .axg-toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 2px; }

.ax-grid .axg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 32px; padding: 0 12px; box-sizing: border-box; border-radius: 4px; cursor: pointer; white-space: nowrap;
    background: var(--app-surface); color: var(--app-fg); border: 1px solid var(--app-border);
    font: inherit; font-size: var(--axg-fs); font-weight: 500;
    transition: background-color .12s ease, border-color .12s ease;
}
.ax-grid .axg-btn:hover:not(:disabled) { background: var(--app-surface-soft); border-color: var(--axg-accent); }
.ax-grid .axg-btn:focus-visible:not(:disabled) { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--axg-accent) 30%, transparent); }
.ax-grid .axg-btn:disabled { opacity: .55; cursor: default; }
.ax-grid .axg-btn .axg-icon { color: var(--axg-accent); }
.ax-grid .axg-xaf-btn { padding: 6px 8px; }
.ax-grid .axg-btn-primary { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.ax-grid .axg-btn-primary .axg-icon { color: #fff; }
.ax-grid .axg-btn-danger { color: var(--app-danger); }
.ax-grid .axg-btn-danger:hover:not(:disabled) { background: var(--app-danger-soft); border-color: var(--app-danger); }
.ax-grid .axg-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--app-primary) 88%, #000); border-color: var(--app-primary); }

.ax-grid .axg-search { position: relative; display: flex; align-items: center; }
.ax-grid .axg-search-btn {
    position: absolute; right: 1px; top: 1px; bottom: 1px; width: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-left: 1px solid var(--app-border); border-radius: 0 3px 3px 0; background: transparent; color: var(--app-muted); cursor: pointer;
}
.ax-grid .axg-search-btn:hover { color: var(--axg-accent); background: color-mix(in srgb, var(--axg-accent) 8%, transparent); }
.ax-grid .axg-search-btn .axg-icon { width: 14px; height: 14px; }
.ax-grid .axg-search input {
    width: 260px; min-height: 32px; padding: 0 38px 0 10px; box-sizing: border-box; outline: none;
    border: 1px solid var(--app-border); border-radius: 4px;
    background: var(--app-surface); color: var(--app-fg); font: inherit; font-size: var(--axg-fs);
}
/* Decorative left icon (live-filter boxes such as Reports config). */
.ax-grid .axg-search-icon { position: absolute; left: 10px; display: inline-flex; color: var(--app-muted); pointer-events: none; }
.ax-grid .axg-search-icon .axg-icon { width: 14px; height: 14px; }
.ax-grid .axg-search-icon + input { padding: 0 10px 0 32px; }
.ax-grid .axg-search input::placeholder { color: var(--app-muted); }
.ax-grid .axg-search input:focus { border-color: var(--axg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--axg-accent) 20%, transparent); }

/* Export menu. */
.ax-grid .axg-menu { position: relative; }
.ax-grid .axg-menu-list {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 170px;
    display: flex; flex-direction: column; padding: 4px; border-radius: 6px;
    background: var(--app-surface); border: 1px solid var(--app-border);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--app-fg) 14%, transparent);
}
.ax-grid .axg-menu-list button {
    padding: 7px 10px; text-align: left; cursor: pointer; border: none; border-radius: 4px;
    background: none; color: var(--app-fg); font: inherit; font-size: var(--axg-fs);
}
.ax-grid .axg-menu-list button:hover { background: var(--app-surface-soft); color: var(--axg-accent); }

/* Actions dropdown (AxActionsMenu): XAF's custom actions, icon + caption, greyed when their selection rule is not met. */
.ax-grid .axg-menu-backdrop { position: fixed; inset: 0; z-index: 19; background: transparent; }
.ax-grid .axg-actions-list { min-width: 240px; }
.ax-grid .axg-menu-list .axg-action-item { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ax-grid .axg-action-icon { display: inline-flex; width: 16px; justify-content: center; color: var(--app-muted); }
.ax-grid .axg-menu-list .axg-action-item:hover .axg-action-icon { color: var(--axg-accent); }
.ax-grid .axg-menu-list .axg-action-item:disabled { opacity: .45; cursor: default; }
.ax-grid .axg-menu-list .axg-action-item:disabled:hover { background: none; color: var(--app-fg); }
/* A choice action's items (AxActionGroup), indented under its caption. */
.ax-grid .axg-action-caret { margin-left: auto; display: inline-flex; transform: rotate(-90deg); transition: transform .15s; }
.ax-grid .axg-action-caret.is-open { transform: rotate(0deg); }
.ax-grid .axg-action-group { display: flex; flex-direction: column; padding-left: 26px; }

/* ---------- Column chooser: show/hide, drag to reorder, Group by, Reset layout. ---------- */
.ax-grid .axg-xaf-btn.is-active { color: var(--axg-accent); background: var(--app-primary-soft); }
.ax-grid .axg-chooser {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 290px; max-width: calc(100vw - 32px);
    display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;
    background: var(--app-surface); border: 1px solid var(--app-border);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--app-fg) 16%, transparent);
}
.ax-grid .axg-chooser-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 12px 14px; border-bottom: 1px solid var(--app-border);
}
.ax-grid .axg-chooser-title { font-weight: 600; }
.ax-grid .axg-link-plain {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: var(--axg-fs-sm); font-weight: 500; color: var(--axg-accent);
}
.ax-grid .axg-link-plain:hover:not(:disabled) { text-decoration: underline; }
.ax-grid .axg-link-plain:disabled { color: var(--app-muted); cursor: default; }
.ax-grid .axg-chooser-list { list-style: none; margin: 0; padding: 6px 0; max-height: 340px; overflow-y: auto; }
.ax-grid .axg-chooser-item {
    display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 8px; cursor: grab; user-select: none;
    border-top: 2px solid transparent;
}
.ax-grid .axg-chooser-item:hover { background: var(--app-surface-soft); }
.ax-grid .axg-chooser-item:focus-visible { outline: 2px solid var(--axg-accent); outline-offset: -2px; }
.ax-grid .axg-chooser-item.is-dragging { opacity: .45; }
.ax-grid .axg-chooser-item label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.ax-grid .axg-chooser-item input[type="checkbox"] { accent-color: var(--axg-accent); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.ax-grid .axg-grip { display: inline-flex; color: var(--app-muted); }
.ax-grid .axg-grip .axg-icon { width: 14px; height: 14px; }
.ax-grid .axg-chooser-foot { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--app-border); }
.ax-grid .axg-chooser-foot label { font-size: var(--axg-fs-sm); color: var(--app-muted); }
.ax-grid .axg-chooser-foot select {
    width: 100%; min-height: 32px; padding: 0 8px; box-sizing: border-box; border-radius: 4px; outline: none;
    border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-fg); font: inherit; font-size: var(--axg-fs);
}
.ax-grid .axg-chooser-foot select:focus { border-color: var(--axg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--axg-accent) 20%, transparent); }

/* ---------- Tabs: underlined strip with counts (PmsTabs). ---------- */
.ax-grid .axg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--app-border); }
.ax-grid .axg-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; margin-bottom: -1px; cursor: pointer; background: none;
    border: none; border-bottom: 2px solid transparent;
    color: var(--app-muted); font: inherit; font-size: var(--axg-fs); font-weight: 500;
}
.ax-grid .axg-tab:hover { color: var(--axg-accent); }
.ax-grid .axg-tab-active { color: var(--axg-accent); border-bottom-color: var(--axg-accent); font-weight: 600; }
.ax-grid .axg-tab-count {
    min-width: 20px; padding: 0 7px; border-radius: 999px; box-sizing: border-box; text-align: center;
    font-size: var(--axg-fs-sm); font-weight: 600; line-height: 1.6;
    background: var(--app-surface-soft); color: var(--app-muted);
}
.ax-grid .axg-tab-active .axg-tab-count { background: var(--app-primary-soft); color: var(--axg-accent); }
.ax-grid .axg-tab-count.is-pending { visibility: hidden; }

.ax-grid .axg-summary { font-size: var(--axg-fs-sm); color: var(--app-muted); }

.ax-grid .axg-error {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 4px;
    color: var(--app-danger); background: var(--app-danger-soft); border: 1px solid var(--app-danger-border);
}
.ax-grid .axg-link { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--axg-accent); text-decoration: underline; }

/* ---------- Grid: PMS table look on top of the DevExpress theme. ---------- */
.ax-grid .axg-grid { font-size: var(--axg-fs); }

/* Loading: XafLoading overlays the host; the rows fade instead of flashing empty. */
.ax-grid .axg-grid-host { position: relative; min-width: 0; }
.ax-grid .axg-grid-host .axg-grid .dxbl-grid-table tbody { transition: opacity .18s ease; }
.ax-grid .axg-grid-host.is-busy .axg-grid .dxbl-grid-table tbody { opacity: .45; }
.ax-grid .axg-grid-host.is-busy .axg-grid,
.ax-grid .axg-grid-host.is-first-load .axg-grid { pointer-events: none; }
/* First load: a steady box with headers only (no "no data" flash), then the rows fade in once. */
.ax-grid .axg-grid-host.is-first-load { min-height: 360px; }
.ax-grid .axg-grid-host.is-first-load .axg-grid .dxbl-grid-table tbody { opacity: 0; }

/* XAF's loader centres on its box, which is the middle of a long table (often off screen after paging from the
   bottom). On a reload the overlay still covers and dims the list, but the spinner sits in the centre of the screen.
   Not on the first load: the box is then a short placeholder, and a list further down a detail view (household
   members, assets, logs) would otherwise put its spinner over the record on screen until it had loaded. */
.ax-grid .axg-grid-host.is-busy:not(.is-first-load) > .xaf-loading.show > .xaf-loading-content {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* Export progress inside the Export button: a small spinner in the theme's primary color. */
.ax-grid .axg-spinner {
    width: 14px; height: 14px; flex: 0 0 auto; box-sizing: border-box; border-radius: 50%;
    border: 2px solid var(--app-primary); border-right-color: transparent;
    animation: axg-spin .75s linear infinite;
}
@keyframes axg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .ax-grid .axg-spinner { animation-duration: 2s; }
}
@media (prefers-reduced-motion: reduce) {
    .ax-grid .axg-grid-host .axg-grid .dxbl-grid-table tbody { transition: none; }
}

/* site.css centers every grid cell app-wide; AxGrid reads left to right like the PMS lists. */
.ax-grid .axg-grid.dxbl-grid .dxbl-grid-table td:not(.dxbl-grid-selection-cell) { text-align: left !important; }
.ax-grid .axg-grid.dxbl-grid .dxbl-grid-table th:not(.dxbl-grid-selection-cell) .dxbl-grid-header-content {
    justify-content: flex-start !important; text-align: left !important;
}
.ax-grid .axg-grid.dxbl-grid .dxbl-grid-table td.axg-end { text-align: right !important; }
.ax-grid .axg-grid.dxbl-grid .dxbl-grid-table th.axg-end .dxbl-grid-header-content { justify-content: flex-end !important; text-align: right !important; }

.ax-grid .axg-grid .dxbl-grid-table thead th {
    background: var(--app-surface-soft); color: var(--app-fg);
    font-size: var(--axg-fs); font-weight: 600; padding-top: 9px; padding-bottom: 9px;
}
.ax-grid .axg-grid .dxbl-grid-table tbody td { padding: 9px 10px; vertical-align: middle; font-size: var(--axg-fs); }
.ax-grid .axg-grid .dxbl-grid-table tbody tr.axg-row-open { cursor: pointer; }
.ax-grid .axg-grid .dxbl-grid-table tbody tr:hover > td { background: var(--axg-row-hover); }
.ax-grid .axg-grid .dxbl-grid-table tbody tr.dxbl-grid-selected-row > td { background: var(--axg-row-selected); }
.ax-grid .axg-grid input[type="checkbox"] { accent-color: var(--axg-accent); }

/* ---------- Cells: a primary line with a muted line under it. ---------- */
.ax-grid .axg-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.35; }
.ax-grid .axg-cell-end { align-items: flex-end; }
.ax-grid .axg-cell-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 600; }
.ax-grid .axg-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ax-grid .axg-cell-sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: var(--axg-fs-sm); font-weight: 400; color: var(--app-muted); }
.ax-grid .axg-cell-sub .axg-icon { width: 12px; height: 12px; }
.ax-grid .axg-strong { font-weight: 600; }
.ax-grid .axg-accent { color: var(--axg-accent); font-weight: 500; }
.ax-grid .axg-note { font-style: italic; }
.ax-grid .axg-wrap { overflow-wrap: anywhere; }
.ax-grid .axg-tags-stack { flex-direction: column; align-items: flex-start; }
.ax-grid .axg-meta { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.ax-grid .axg-meta .axg-icon { width: 12px; height: 12px; color: var(--app-primary); }
.ax-grid .axg-cell-sub .axg-meta .axg-icon { color: var(--app-muted); }

/* Profile completion bar. */
.ax-grid .axg-progress { display: flex; align-items: center; gap: 8px; }
.ax-grid .axg-progress-track { flex: 0 1 110px; height: 5px; border-radius: 999px; background: var(--app-surface-hover); overflow: hidden; }
.ax-grid .axg-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--app-primary); transition: width .25s ease; }
.ax-grid .axg-progress-text { font-size: var(--axg-fs-sm); color: var(--app-muted); min-width: 34px; }
.ax-grid .axg-empty { color: var(--app-muted); }

/* No rows: a centered message instead of DevExpress's left-pushed icon. */
.ax-grid .axg-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 40px 16px; box-sizing: border-box; text-align: center; color: var(--app-muted);
}
.ax-grid .axg-empty-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 4px;
    border-radius: 50%; background: var(--app-surface-soft); color: var(--app-muted);
}
.ax-grid .axg-empty-icon .axg-icon { width: 20px; height: 20px; }
.ax-grid .axg-empty-title { font-size: var(--axg-fs); font-weight: 600; color: var(--app-fg); }
.ax-grid .axg-empty-text { font-size: var(--axg-fs-sm); }
.ax-grid .axg-empty-state .axg-btn { margin-top: 6px; }
.ax-grid .axg-soon { color: var(--app-danger); font-weight: 600; }

/* Status pills (PMS .pl-badge): tone = a theme semantic color. */
.ax-grid .axg-pill {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    font-size: var(--axg-fs-sm); font-weight: 600; line-height: 1.6;
}
.ax-grid .axg-tone-neutral { background: var(--app-surface-soft); color: var(--app-muted); box-shadow: inset 0 0 0 1px var(--app-border); }
.ax-grid .axg-tone-accent { background: var(--app-primary-soft); color: var(--app-primary); }
.ax-grid .axg-tone-success { background: var(--app-success-soft); color: var(--app-success); }
.ax-grid .axg-tone-warning { background: var(--app-warning-soft); color: var(--app-warning); }
.ax-grid .axg-tone-danger { background: var(--app-danger-soft); color: var(--app-danger); }

/* Category tags (types, programs, bedrooms): quieter than pills, square-ish like XAF chips. */
.ax-grid .axg-tag {
    display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; white-space: nowrap;
    font-size: var(--axg-fs-sm); font-weight: 500; line-height: 1.6;
    background: var(--app-primary-soft); color: var(--app-primary);
}
.ax-grid .axg-tag-neutral { background: var(--app-surface-soft); color: var(--app-fg); box-shadow: inset 0 0 0 1px var(--app-border); }

/* Long text cut to four lines; the full text is in the title. */
.ax-grid .axg-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* In-place row edit: icon buttons, inputs and the error line. */
.ax-grid .axg-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 1px solid transparent; border-radius: 4px; background: none; color: var(--app-muted); cursor: pointer;
}
.ax-grid .axg-icon-btn:hover:not(:disabled) { background: var(--app-surface-soft); color: var(--axg-accent); }
.ax-grid .axg-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--axg-accent) 30%, transparent); }
.ax-grid .axg-icon-btn:disabled { opacity: .45; cursor: default; }
.ax-grid .axg-icon-btn-primary { color: var(--axg-accent); border-color: var(--app-border); }
.ax-grid .axg-edit-actions { display: inline-flex; align-items: center; gap: 4px; }
.ax-grid .axg-edit { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ax-grid .axg-edit-input {
    width: 100%; min-height: 30px; padding: 4px 8px; box-sizing: border-box; outline: none;
    border: 1px solid var(--app-border); border-radius: 4px;
    background: var(--app-surface); color: var(--app-fg); font: inherit; font-size: var(--axg-fs);
}
.ax-grid textarea.axg-edit-input { resize: vertical; }
.ax-grid .axg-edit-input:focus { border-color: var(--axg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--axg-accent) 20%, transparent); }
.ax-grid .axg-edit-error { font-size: var(--axg-fs-sm); color: var(--app-danger); }
.ax-grid .axg-grid .dxbl-grid-table tbody tr.axg-row-editing > td { background: var(--axg-row-selected); }

/* Action confirmation (AxConfirmDialog); closes only through its buttons. */
.ax-grid .axg-dialog-backdrop {
    position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: color-mix(in srgb, var(--app-fg) 35%, transparent);
}
.ax-grid .axg-dialog {
    width: 460px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 8px; overflow: hidden;
    background: var(--app-surface); color: var(--app-fg); border: 1px solid var(--app-border);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--app-fg) 22%, transparent);
}
.ax-grid .axg-dialog-head { padding: 14px 16px; border-bottom: 1px solid var(--app-border); }
.ax-grid .axg-dialog-title { font-weight: 600; }
.ax-grid .axg-dialog-body { padding: 16px; overflow-y: auto; line-height: 1.5; white-space: pre-line; }
/* A picker that holds a list (Link): wider, and its text is not pre-line. */
.ax-grid .axg-dialog.axg-dialog-wide { width: 760px; }
.ax-grid .axg-dialog.axg-dialog-wide .axg-dialog-body { white-space: normal; }
.ax-grid .axg-dialog-field { display: flex; flex-direction: column; gap: 6px; }
.ax-grid .axg-dialog-field label { font-weight: 500; }
.ax-grid .axg-dialog-field select {
    min-height: 32px; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--app-border); border-radius: 4px;
    background: var(--app-surface); color: var(--app-fg); font: inherit; font-size: var(--axg-fs);
}
.ax-grid .axg-dialog-foot {
    display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--app-border); background: var(--app-surface-soft);
}

/* A combined column filtered on any of its fields: a dot after the caption. */
.ax-grid .axg-grid .dxbl-grid-table th.axg-filter-on .dxbl-grid-header-caption::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: middle;
    border-radius: 50%; background: var(--app-primary);
}

/* Combined column filter menu (AxGridFilterMenu). DevExpress hosts it in its own popup, outside .ax-grid. */
.axg-cf {
    display: flex; flex-direction: column; gap: 12px; width: 280px; max-width: calc(100vw - 48px); padding: 4px 2px;
    font-family: var(--app-font-family); font-size: var(--app-font-size-base); color: var(--app-fg);
}
.axg-cf-part { display: flex; flex-direction: column; gap: 6px; }
.axg-cf-part + .axg-cf-part { padding-top: 10px; border-top: 1px solid var(--app-border); }
.axg-cf-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.axg-cf-title { font-weight: 600; }
.axg-cf-link {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; font-size: calc(var(--app-font-size-base) * .857); font-weight: 500; color: var(--app-primary);
}
.axg-cf-link:hover { text-decoration: underline; }
.axg-cf-note { font-size: calc(var(--app-font-size-base) * .857); color: var(--app-muted); }
.axg-cf-input {
    width: 100%; min-height: 30px; padding: 0 8px; box-sizing: border-box; outline: none;
    border: 1px solid var(--app-border); border-radius: 4px;
    background: var(--app-surface); color: var(--app-fg); font: inherit;
}
.axg-cf-input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 20%, transparent); }
.axg-cf-list { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; }
.axg-cf-option { display: flex; align-items: center; gap: 8px; padding: 3px 2px; cursor: pointer; border-radius: 4px; }
.axg-cf-option:hover { background: var(--app-surface-soft); }
.axg-cf-option input[type="checkbox"] { accent-color: var(--app-primary); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.axg-cf-range { display: flex; align-items: center; gap: 6px; }
.axg-cf-range > .axg-cf-input, .axg-cf-range > .axg-cf-date { flex: 1 1 0; min-width: 0; }
/* Contains / Does not contain beside a text filter: sized to its words. */
.axg-cf-range > .axg-cf-op { flex: 0 0 auto; width: auto; padding-right: 4px; cursor: pointer; }
.axg-cf-dash { color: var(--app-muted); }
.axg-cf-foot { display: flex; justify-content: flex-end; }

@media (max-width: 640px) {
    .ax-grid .axg-search { flex: 1 1 100%; }
    .ax-grid .axg-search input { width: 100%; }
}