/* ============================================================
   ZenGrid — Global CSS (zen- prefixed, no scoping needed)
   Uses CSS Grid layout for flexible columns and frozen support.
   All classes prefixed with zen-grid- to avoid conflicts.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────────
   UNLAYERED coexistence guards — host apps ship unlayered global
   resets (button {}, a {}) which beat ANY @layer rule per the CSS
   spec. These minimal re-assertions of the load-bearing button
   chrome (compound specificity button.zen-*) guarantee correct
   render regardless of what loads alongside ZenithUI. Everything
   else in this file lives in @layer zenith-components below.
   ───────────────────────────────────────────────────────────────── */
button.zen-grid-toolbar-btn,
button.zen-grid-pager-btn,
button.zen-grid-filter-menu-btn {
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-action);
    background: var(--zen-bg-surface, #FFFFFF);
    color: var(--zen-text-primary, #111827);
    font-family: inherit;
    cursor: pointer;
}

button.zen-grid-filter-menu-btn--apply {
    background: var(--zen-accent, #4F7FFF);
    color: #FFFFFF;
}

@layer zenith-components {


/* === Grid Container === */
.zen-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zen-card-border);
    border-radius: var(--zen-radius-card);
    box-shadow: var(--zen-elev-card);
    overflow: hidden;
    font-family: var(--zen-font-family, system-ui, sans-serif);
    font-size: var(--zen-font-size-base, 0.8125rem);
    color: var(--zen-text-primary, #111827);
    background: var(--zen-bg-surface, #FFFFFF);
}

/* === Row layout via CSS Grid === */
.zen-grid-row {
    display: grid;
    grid-template-columns: var(--zen-grid-columns, 1fr);
    /* stretch (not center): cells fill the row height so divider lines stay aligned with multi-line cells */
    align-items: stretch;
    min-height: var(--zen-row-height, 36px);
}

/* === Density variants === */
.zen-grid--compact .zen-grid-row {
    min-height: var(--zen-row-height-compact, 28px);
}
.zen-grid--relaxed .zen-grid-row {
    min-height: var(--zen-row-height-relaxed, 44px);
}

/* === Header === */
.zen-grid-header {
    position: sticky;
    top: 0;
    z-index: var(--zen-z-sticky, 100);
    /* Reserve the same scrollbar gutter as the body so column tracks stay aligned
       in browsers with classic (space-taking) scrollbars. Overlay scrollbars
       reserve 0 on both, so alignment holds everywhere. */
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Column captions speak the data voice: mono caps (Material stays sans). */
.zen-grid-header-row {
    background: var(--zen-bg-sunken);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
    font-family: var(--zen-font-family-mono);
    font-weight: var(--zen-font-weight-semibold, 600);
    font-size: var(--zen-font-size-xs, 0.625rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--zen-text-tertiary);
}

[data-zen-skin="material"] .zen-grid-header-row {
    font-family: var(--zen-font-family);
    font-weight: var(--zen-font-weight-medium, 500);
    font-size: var(--zen-font-size-sm, 0.75rem);
}

/* === Cells === */
.zen-grid-cell {
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zen-grid-cell--header {
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--zen-space-1, 0.25rem);
}

.zen-grid-cell--sortable {
    cursor: pointer;
}

.zen-grid-cell--sortable:hover {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
}

.zen-grid-cell--center {
    text-align: center;
    justify-content: center;
}

/* Numeric columns: mono + tabular-nums, the suite's data-figures mark. */
.zen-grid-cell--right {
    text-align: right;
    justify-content: flex-end;
    font-family: var(--zen-font-family-mono);
    font-variant-numeric: tabular-nums;
}

.zen-grid-header-row .zen-grid-cell--right {
    font-family: inherit;
}

.zen-grid-cell--checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--zen-space-2, 0.5rem);
}

.zen-grid-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Sort indicators === */
.zen-grid-sort-icon {
    font-size: 0.6rem;
    color: var(--zen-accent);
    flex-shrink: 0;
}

/* === Body === */
.zen-grid-body {
    overflow-y: auto;
    flex: 1;
    /* Flex items refuse to shrink below their content by default (min-height: auto);
       without this, a fixed grid Height is ignored and the body grows to its full
       content height — which breaks virtualization's scroll viewport. */
    min-height: 0;
    scrollbar-gutter: stable;
}

/* === Row states === */
.zen-grid-row:not(.zen-grid-header-row) {
    border-bottom: 1px solid var(--zen-border-muted, #ECEEF2);
    transition: background-color var(--zen-transition-fast, 100ms ease);
}

.zen-grid-row--hoverable:hover {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
}

.zen-grid-row--selected {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
}

.zen-grid-row--selected:hover {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.2));
}

.zen-grid-row--expanded {
    background: var(--zen-bg-muted, #F0F2F5);
}

.zen-grid-row--focused {
    outline: none;
    box-shadow: inset var(--zen-focus-shadow);
}

.zen-grid-cell--selected {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.12));
}

.zen-grid-cell--focused {
    box-shadow: inset var(--zen-focus-shadow);
    border-radius: var(--zen-radius-control);
}

/* === Batch editing change indicators === */
.zen-grid-row--modified {
    border-left: 3px solid var(--zen-warning, #E8A317);
}

.zen-grid-row--added {
    border-left: 3px solid var(--zen-success, #22C55E);
}

.zen-grid-row--deleted {
    border-left: 3px solid var(--zen-danger, #EF4444);
    opacity: 0.5;
    text-decoration: line-through;
}

.zen-grid-cell--modified {
    background: var(--zen-warning-muted, rgba(232, 163, 23, 0.08));
}

/* Screen reader only — visually hidden but accessible */
.zen-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Striped rows (via parent modifier) === */
.zen-grid--striped .zen-grid-row:nth-child(even):not(.zen-grid-header-row) {
    background: var(--zen-bg-muted, #F0F2F5);
}

/* Bordered variant — adds cell borders */
.zen-grid--bordered .zen-grid-cell {
    border-right: 1px solid var(--zen-border, #E2E5EC);
}
.zen-grid--bordered .zen-grid-cell:last-child {
    border-right: none;
}
.zen-grid--bordered .zen-grid-row {
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
}

/* === Footer row (aggregates) === */
.zen-grid-footer-row {
    background: var(--zen-bg-sunken);
    border-top: 2px solid var(--zen-border-strong);
    font-weight: var(--zen-font-weight-semibold, 600);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-variant-numeric: tabular-nums;
}

.zen-grid-cell--footer {
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zen-grid-aggregate-label {
    color: var(--zen-text-muted, #6B7280);
    margin-right: var(--zen-space-1, 0.25rem);
}

/* === Column Resize === */
.zen-grid-resize-handle {
    position: absolute;
    top: 0;
    right: -2px;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 10;
}

.zen-grid-resize-handle:hover,
.zen-grid--resizing .zen-grid-resize-handle {
    background: var(--zen-accent, #4F7FFF);
    opacity: 0.4;
}

/* === Column Reorder === */
.zen-grid-cell--dragging {
    opacity: 0.5;
}

.zen-grid-cell--drag-over {
    border-left: 2px solid var(--zen-accent, #4F7FFF);
}

/* === Editing === */
.zen-grid-row--editing {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.05));
}

.zen-grid-cell--editing {
    padding: var(--zen-space-1, 0.25rem);
}

.zen-grid-edit-input {
    width: 100%;
    height: calc(var(--zen-control-h) - 4px);
    padding: 0 var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-accent, #4F7FFF);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    color: var(--zen-text-primary, #111827);
    font-family: inherit;
    font-size: inherit;
    outline: none;
    box-sizing: border-box;
}

.zen-grid-edit-input:focus {
    box-shadow: var(--zen-focus-shadow);
}

.zen-grid-edit-input--invalid {
    border-color: var(--zen-danger, #EF4444);
}

.zen-grid-edit-input--invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-danger) 25%, transparent);
}

.zen-grid-edit-error {
    display: block;
    font-size: 0.65rem;
    color: var(--zen-danger, #EF4444);
    margin-top: 2px;
    line-height: 1;
}

/* === Group rows === */
.zen-grid-group-header {
    display: flex;
    align-items: center;
    min-height: var(--zen-row-height, 36px);
    background: var(--zen-bg-sunken);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--zen-transition-fast, 100ms ease);
}

.zen-grid-group-header:hover {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.08));
}

.zen-grid-group-header--expanded {
    border-bottom-color: var(--zen-accent, #4F7FFF);
}

.zen-grid-group-header-content {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2, 0.5rem);
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    font-weight: var(--zen-font-weight-semibold, 600);
    font-size: var(--zen-font-size-sm, 0.75rem);
}

.zen-grid-group-toggle {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--zen-text-muted, #6B7280);
}

.zen-grid-group-title {
    color: var(--zen-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.zen-grid-group-key {
    color: var(--zen-text-primary, #111827);
}

.zen-grid-group-count {
    color: var(--zen-text-tertiary);
    font-weight: var(--zen-font-weight-normal, 400);
    font-family: var(--zen-font-family-mono);
    font-variant-numeric: tabular-nums;
}

.zen-grid-group-footer {
    display: flex;
    align-items: center;
    min-height: var(--zen-row-height, 36px);
    background: var(--zen-bg-sunken);
    border-bottom: 1px solid var(--zen-border-muted, #ECEEF2);
    font-size: var(--zen-font-size-sm, 0.75rem);
    color: var(--zen-text-muted, #6B7280);
    font-variant-numeric: tabular-nums;
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-3, 0.75rem);
}

/* === Detail row === */
.zen-grid-detail-row {
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
    background: var(--zen-bg-muted, #F0F2F5);
}

.zen-grid-detail-content {
    padding: var(--zen-space-4, 1rem);
}

/* === Empty and Loading states === */
.zen-grid-empty,
.zen-grid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--zen-space-10, 2.5rem) var(--zen-space-4, 1rem);
    color: var(--zen-text-muted, #6B7280);
}

/* === Checkbox === */
.zen-grid-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--zen-accent, #4F7FFF);
}

/* === Pager === */
.zen-grid-footer {
    border-top: 1px solid var(--zen-border, #E2E5EC);
    background: var(--zen-bg-sunken);
}

.zen-grid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    font-size: var(--zen-font-size-sm, 0.75rem);
    color: var(--zen-text-tertiary);
    gap: var(--zen-space-3, 0.75rem);
}

.zen-grid-pager-info {
    white-space: nowrap;
    font-family: var(--zen-font-family-mono);
    font-variant-numeric: tabular-nums;
}

.zen-grid-pager-buttons {
    display: flex;
    align-items: center;
    gap: var(--zen-space-1, 0.25rem);
}

.zen-grid-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--zen-control-h) - 4px);
    height: calc(var(--zen-control-h) - 4px);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-action);
    background: var(--zen-bg-surface, #FFFFFF);
    color: var(--zen-text-primary, #111827);
    cursor: pointer;
    font-size: var(--zen-font-size-sm, 0.75rem);
    transition: all var(--zen-transition-fast, 100ms ease);
}

.zen-grid-pager-btn:hover:not(:disabled) {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
    border-color: var(--zen-accent, #4F7FFF);
}

.zen-grid-pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.zen-grid-pager-current {
    padding: 0 var(--zen-space-2, 0.5rem);
    font-weight: var(--zen-font-weight-medium, 500);
    font-family: var(--zen-font-family-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.zen-grid-pager-size {
    height: calc(var(--zen-control-h) - 4px);
    padding: 0 var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-surface, #FFFFFF);
    color: var(--zen-text-primary, #111827);
    font-size: var(--zen-font-size-sm, 0.75rem);
    cursor: pointer;
}

/* ============================================================
   Responsive Column Hiding
   Columns with data-zen-priority get hidden at breakpoints.
   Priority 1 = hidden last, Priority 3 = hidden first.
   ============================================================ */

/* Tablets and below: hide priority 3+ columns */
@media (max-width: 1024px) {
    .zen-grid-cell[data-zen-responsive="3"],
    .zen-grid-cell--header[data-zen-responsive="3"],
    .zen-grid-cell--filter[data-zen-responsive="3"] {
        display: none;
    }
}

/* Mobile landscape: hide priority 2+ columns */
@media (max-width: 768px) {
    .zen-grid-cell[data-zen-responsive="2"],
    .zen-grid-cell--header[data-zen-responsive="2"],
    .zen-grid-cell--filter[data-zen-responsive="2"],
    .zen-grid-cell[data-zen-responsive="3"],
    .zen-grid-cell--header[data-zen-responsive="3"],
    .zen-grid-cell--filter[data-zen-responsive="3"] {
        display: none;
    }

    /* Stack pager on mobile */
    .zen-grid-pager {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Mobile portrait: hide priority 1+ columns */
@media (max-width: 480px) {
    .zen-grid-cell[data-zen-responsive="1"],
    .zen-grid-cell--header[data-zen-responsive="1"],
    .zen-grid-cell--filter[data-zen-responsive="1"],
    .zen-grid-cell[data-zen-responsive="2"],
    .zen-grid-cell--header[data-zen-responsive="2"],
    .zen-grid-cell--filter[data-zen-responsive="2"],
    .zen-grid-cell[data-zen-responsive="3"],
    .zen-grid-cell--header[data-zen-responsive="3"],
    .zen-grid-cell--filter[data-zen-responsive="3"] {
        display: none;
    }
}
.zen-grid-filter-row {
    background: var(--zen-bg-surface, #FFFFFF);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
    /* Root-level sibling of the scrolling body — reserve the same scrollbar gutter
       as header/body so its column tracks stay aligned (see .zen-grid-header). */
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* Aggregates row is also a root-level sibling of the scrolling body. */
.zen-grid-footer-row {
    overflow: hidden;
    scrollbar-gutter: stable;
}

.zen-grid-cell--filter {
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-2, 0.5rem);
}

.zen-grid-filter-input {
    width: 100%;
    height: calc(var(--zen-control-h) - 4px);
    padding: 0 var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    color: var(--zen-text-primary, #111827);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-family: inherit;
    outline: none;
    transition: border-color var(--zen-transition-fast, 100ms ease);
    box-sizing: border-box;
}

.zen-grid-filter-input:focus {
    border-color: var(--zen-accent, #4F7FFF);
    box-shadow: var(--zen-focus-shadow);
}

.zen-grid-filter-input::placeholder {
    color: var(--zen-text-disabled, #D1D5DB);
}

.zen-grid-filter-input[type="date"] {
    cursor: pointer;
}

select.zen-grid-filter-input {
    cursor: pointer;
    appearance: auto;
}

.zen-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
    background: var(--zen-bg-surface, #FFFFFF);
    gap: var(--zen-space-3, 0.75rem);
    flex-wrap: wrap;
}

.zen-grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--zen-space-3, 0.75rem);
    flex: 1;
    min-width: 0;
}

.zen-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2, 0.5rem);
    flex-shrink: 0;
}

.zen-grid-toolbar-title {
    font-size: var(--zen-font-size-md, 0.875rem);
    font-weight: var(--zen-font-weight-semibold, 600);
    color: var(--zen-text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zen-grid-toolbar-search-input {
    height: calc(var(--zen-control-h) - 4px);
    padding: 0 var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    color: var(--zen-text-primary, #111827);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-family: inherit;
    outline: none;
    min-width: 160px;
    transition: border-color var(--zen-transition-fast, 100ms ease);
}

.zen-grid-toolbar-search-input:focus {
    border-color: var(--zen-accent, #4F7FFF);
    box-shadow: var(--zen-focus-shadow);
}

.zen-grid-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1, 0.25rem);
    height: calc(var(--zen-control-h) - 4px);
    padding: 0 var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-action);
    background: var(--zen-bg-surface, #FFFFFF);
    color: var(--zen-text-primary, #111827);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--zen-transition-fast, 100ms ease);
}

.zen-grid-toolbar-btn:hover {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
    border-color: var(--zen-accent, #4F7FFF);
}

[data-zen-skin="material"] .zen-grid-toolbar-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: var(--zen-font-weight-medium, 500);
}

/* Column chooser dropdown */
.zen-grid-column-chooser {
    position: relative;
}

.zen-grid-column-chooser-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--zen-z-dropdown, 1000) - 1);
}

.zen-grid-column-chooser-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--zen-space-1, 0.25rem);
    padding: var(--zen-space-2, 0.5rem);
    background: var(--zen-bg-elevated, #FFFFFF);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    z-index: var(--zen-z-dropdown, 1000);
    min-width: 180px;
    max-height: 300px;
    overflow-y: auto;
}

.zen-grid-column-chooser-item {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2, 0.5rem);
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-2, 0.5rem);
    font-size: var(--zen-font-size-sm, 0.75rem);
    cursor: pointer;
    border-radius: var(--zen-radius-control);
    white-space: nowrap;
}

.zen-grid-column-chooser-item:hover {
    background: var(--zen-bg-muted, #F0F2F5);
}

/* Material skin — grid inputs adopt the filled-field anatomy. */
[data-zen-skin="material"] .zen-grid-filter-input,
[data-zen-skin="material"] .zen-grid-toolbar-search-input {
    border-color: transparent;
    border-radius: var(--zen-radius-control) var(--zen-radius-control) 0 0;
    background: var(--zen-bg-muted);
    box-shadow: inset 0 -1px 0 0 var(--zen-line);
}
[data-zen-skin="material"] .zen-grid-filter-input:focus,
[data-zen-skin="material"] .zen-grid-toolbar-search-input:focus {
    border-color: transparent;
    box-shadow: inset 0 -2px 0 0 var(--zen-accent);
}

/* === Filter menu icon in header === */
.zen-grid-filter-icon {
    background: none;
    border: none;
    color: var(--zen-text-muted, #6B7280);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.6rem;
    line-height: 1;
    opacity: 0.4;
    transition: opacity var(--zen-transition-fast, 100ms ease);
    margin-left: auto;
}

.zen-grid-cell--header:hover .zen-grid-filter-icon {
    opacity: 0.8;
}

.zen-grid-filter-icon--active {
    opacity: 1;
    color: var(--zen-accent, #4F7FFF);
}

/* === Filter menu popup === */
.zen-grid-filter-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.zen-grid-filter-menu {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9999;
    background: var(--zen-bg, #FFFFFF);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    min-width: 260px;
    max-width: 320px;
    animation: zen-scale-in 100ms ease;
}

.zen-grid-filter-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
}

.zen-grid-filter-menu-title {
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-weight: var(--zen-font-weight-semibold, 600);
    color: var(--zen-text, #1A1D23);
}

.zen-grid-filter-menu-close {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--zen-text-muted, #6B7280);
    cursor: pointer;
    line-height: 1;
}

.zen-grid-filter-menu-body {
    padding: var(--zen-space-3, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-3, 0.75rem);
}

.zen-grid-filter-menu-label {
    display: block;
    font-size: var(--zen-font-size-xs, 0.625rem);
    font-weight: var(--zen-font-weight-medium, 500);
    color: var(--zen-text-muted, #6B7280);
    margin-bottom: 2px;
}

.zen-grid-filter-menu-select,
.zen-grid-filter-menu-input {
    width: 100%;
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    background: var(--zen-bg-sunken);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-family: inherit;
    box-sizing: border-box;
}

.zen-grid-filter-menu-select:focus,
.zen-grid-filter-menu-input:focus {
    outline: none;
    border-color: var(--zen-accent, #4F7FFF);
    box-shadow: var(--zen-focus-shadow);
}

.zen-grid-filter-menu-unique-list {
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    padding: var(--zen-space-1, 0.25rem);
}

.zen-grid-filter-menu-unique-item {
    display: flex;
    align-items: center;
    gap: var(--zen-space-1, 0.25rem);
    padding: 2px var(--zen-space-1, 0.25rem);
    font-size: var(--zen-font-size-xs, 0.625rem);
    cursor: pointer;
    border-radius: 2px;
}

.zen-grid-filter-menu-unique-item:hover {
    background: var(--zen-bg-muted, #F0F2F5);
}

.zen-grid-filter-menu-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--zen-space-2, 0.5rem);
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    border-top: 1px solid var(--zen-border, #E2E5EC);
}

.zen-grid-filter-menu-btn {
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-3, 0.75rem);
    border-radius: var(--zen-radius-action);
    font-size: var(--zen-font-size-xs, 0.625rem);
    font-weight: var(--zen-font-weight-medium, 500);
    cursor: pointer;
    border: 1px solid transparent;
}

.zen-grid-filter-menu-btn--clear {
    background: var(--zen-bg-muted, #F0F2F5);
    color: var(--zen-text, #1A1D23);
    border-color: var(--zen-border, #E2E5EC);
}

.zen-grid-filter-menu-btn--apply {
    background: var(--zen-accent, #4F7FFF);
    color: #FFFFFF;
}

.zen-grid-filter-menu-btn--apply:hover {
    background: var(--zen-accent-hover, #3D6BEB);
}

/* === View presets panel === */
.zen-grid-presets {
    position: relative;
}

.zen-grid-presets-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 9999;
    background: var(--zen-bg, #FFFFFF);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    min-width: 220px;
    padding: var(--zen-space-2, 0.5rem);
}

.zen-grid-presets-save {
    display: flex;
    gap: var(--zen-space-1, 0.25rem);
    margin-bottom: var(--zen-space-2, 0.5rem);
}

.zen-grid-presets-input {
    flex: 1;
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-2, 0.5rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    font-size: var(--zen-font-size-xs, 0.625rem);
    font-family: inherit;
}

.zen-grid-presets-save-btn {
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-2, 0.5rem);
    background: var(--zen-accent, #4F7FFF);
    color: #FFFFFF;
    border: none;
    border-radius: var(--zen-radius-action);
    font-size: var(--zen-font-size-xs, 0.625rem);
    cursor: pointer;
}

.zen-grid-presets-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.zen-grid-presets-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zen-grid-presets-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zen-space-1, 0.25rem) var(--zen-space-2, 0.5rem);
    border-radius: var(--zen-radius-control);
}

.zen-grid-presets-item:hover {
    background: var(--zen-bg-muted, #F0F2F5);
}

.zen-grid-presets-item-name {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--zen-font-size-sm, 0.75rem);
    color: var(--zen-text, #1A1D23);
    text-align: left;
    flex: 1;
    padding: 0;
}

.zen-grid-presets-item-delete {
    background: none;
    border: none;
    color: var(--zen-text-muted, #6B7280);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 2px;
}

.zen-grid-presets-item-delete:hover {
    color: var(--zen-danger, #EF4444);
}

.zen-grid-presets-empty {
    font-size: var(--zen-font-size-xs, 0.625rem);
    color: var(--zen-text-muted, #6B7280);
    text-align: center;
    padding: var(--zen-space-2, 0.5rem);
}

/* === Column bands (header groups) === */
.zen-grid-band-row {
    background: var(--zen-bg-muted, #F0F2F5);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
}

.zen-grid-cell--band {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--zen-row-height, 36px) * 0.75);
    font-size: var(--zen-font-size-xs, 0.625rem);
    font-weight: var(--zen-font-weight-semibold, 600);
    color: var(--zen-text-muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid var(--zen-border, #E2E5EC);
}

.zen-grid-cell--band:last-child {
    border-right: none;
}

.zen-grid-band-text {
    padding: 0 var(--zen-space-2, 0.5rem);
}

/* === Context menu === */
.zen-grid-context-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.zen-grid-context-menu {
    background: var(--zen-bg, #FFFFFF);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-menu);
    box-shadow: var(--zen-elev-overlay);
    min-width: 160px;
    padding: var(--zen-space-1, 0.25rem) 0;
    animation: zen-scale-in 80ms ease;
}

/* === Infinite scroll sentinel === */
.zen-grid-scroll-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    color: var(--zen-text-muted, #6B7280);
    font-size: var(--zen-font-size-sm, 0.75rem);
}

/* === Group panel (drag-to-group drop zone) === */
.zen-grid-group-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--zen-space-2, 0.5rem);
    min-height: 36px;
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    background: var(--zen-bg-sunken);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
    transition: background-color var(--zen-transition-fast, 100ms ease),
                border-color var(--zen-transition-fast, 100ms ease);
}

.zen-grid-group-panel--drag-over {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
    border-color: var(--zen-accent, #4F7FFF);
    border-style: dashed;
}

.zen-grid-group-panel-hint {
    color: var(--zen-text-muted, #6B7280);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-style: italic;
}

.zen-grid-group-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--zen-space-1, 0.25rem);
    padding: 2px var(--zen-space-2, 0.5rem);
    background: var(--zen-bg, #FFFFFF);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-full, 9999px);
    font-size: var(--zen-font-size-xs, 0.625rem);
    font-weight: var(--zen-font-weight-medium, 500);
    cursor: grab;
    user-select: none;
}

.zen-grid-group-chip-text {
    color: var(--zen-text, #1A1D23);
}

.zen-grid-group-chip-remove {
    background: none;
    border: none;
    color: var(--zen-text-muted, #6B7280);
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 50%;
}

.zen-grid-group-chip-remove:hover {
    color: var(--zen-danger, #EF4444);
    background: var(--zen-danger-muted, rgba(239, 68, 68, 0.1));
}

.zen-grid-group-panel-clear {
    background: none;
    border: none;
    color: var(--zen-text-muted, #6B7280);
    font-size: var(--zen-font-size-xs, 0.625rem);
    cursor: pointer;
    text-decoration: underline;
    padding: 2px var(--zen-space-1, 0.25rem);
}

.zen-grid-group-panel-clear:hover {
    color: var(--zen-danger, #EF4444);
}

/* === Popup edit dialog === */
.zen-grid-popup-overlay {
    position: fixed;
    inset: 0;
    background: var(--zen-overlay, rgba(0, 0, 0, 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: zen-fade-in 150ms ease;
}

.zen-grid-popup {
    background: var(--zen-bg-elevated);
    border-radius: var(--zen-radius-card);
    box-shadow: var(--zen-elev-overlay);
    min-width: 400px;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: zen-scale-in 150ms ease;
    font-family: var(--zen-font-family);
}

.zen-grid-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--zen-space-4, 1rem) var(--zen-space-5, 1.25rem);
    border-bottom: 1px solid var(--zen-border, #E2E5EC);
}

.zen-grid-popup-title {
    margin: 0;
    font-size: var(--zen-font-size-md, 0.875rem);
    font-weight: var(--zen-font-weight-semibold, 600);
    color: var(--zen-text, #1A1D23);
}

.zen-grid-popup-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--zen-text-muted, #6B7280);
    cursor: pointer;
    padding: var(--zen-space-1, 0.25rem);
    border-radius: var(--zen-radius-action);
    line-height: 1;
}

.zen-grid-popup-close:hover {
    background: var(--zen-bg-muted, #F0F2F5);
    color: var(--zen-text, #1A1D23);
}

.zen-grid-popup-body {
    padding: var(--zen-space-5, 1.25rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-4, 1rem);
}

.zen-grid-popup-field {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1, 0.25rem);
}

.zen-grid-popup-label {
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-weight: var(--zen-font-weight-medium, 500);
    color: var(--zen-text-muted, #6B7280);
}

.zen-grid-popup-input {
    width: 100%;
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-3, 0.75rem);
    border: 1px solid var(--zen-border, #E2E5EC);
    border-radius: var(--zen-radius-control);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-family: inherit;
    color: var(--zen-text-primary, #111827);
    background: var(--zen-bg-sunken);
    transition: border-color var(--zen-transition-fast, 100ms ease),
                box-shadow var(--zen-transition-fast, 100ms ease);
    box-sizing: border-box;
}

.zen-grid-popup-input:focus {
    outline: none;
    border-color: var(--zen-accent, #4F7FFF);
    box-shadow: var(--zen-focus-shadow);
}

.zen-grid-popup-input--invalid {
    border-color: var(--zen-danger, #EF4444);
}

.zen-grid-popup-input--invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-danger) 25%, transparent);
}

.zen-grid-popup-error {
    font-size: 0.65rem;
    color: var(--zen-danger, #EF4444);
    line-height: 1.2;
}

.zen-grid-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--zen-space-2, 0.5rem);
    padding: var(--zen-space-3, 0.75rem) var(--zen-space-5, 1.25rem);
    border-top: 1px solid var(--zen-border, #E2E5EC);
}

.zen-grid-popup-btn {
    padding: var(--zen-space-2, 0.5rem) var(--zen-space-4, 1rem);
    border-radius: var(--zen-radius-action);
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-weight: var(--zen-font-weight-medium, 500);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--zen-transition-fast, 100ms ease);
}

[data-zen-skin="material"] .zen-grid-popup-btn {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.zen-grid-popup-btn--cancel {
    background: var(--zen-bg-muted, #F0F2F5);
    color: var(--zen-text, #1A1D23);
    border-color: var(--zen-border, #E2E5EC);
}

.zen-grid-popup-btn--cancel:hover {
    background: var(--zen-border, #E2E5EC);
}

.zen-grid-popup-btn--save {
    background: var(--zen-accent, #4F7FFF);
    color: #FFFFFF;
}

.zen-grid-popup-btn--save:hover {
    background: var(--zen-accent-hover, #3D6BEB);
}

.zen-grid-popup-btn--save:active {
    background: var(--zen-accent-active);
}

/* === Grid Action Buttons === */
.zen-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zen-space-1, 4px);
    padding: 0 var(--zen-space-1, 4px);
    height: calc(var(--zen-row-height, 36px) - 10px);
    min-width: calc(var(--zen-row-height, 36px) - 10px);
    border: none;
    border-radius: var(--zen-radius-action);
    background: transparent;
    color: var(--zen-text-secondary, #374151);
    cursor: pointer;
    font-size: var(--zen-font-size-sm, 0.75rem);
    font-family: inherit;
    line-height: 1;
    transition: background var(--zen-transition-fast, 100ms ease),
                color var(--zen-transition-fast, 100ms ease);
    flex-shrink: 0;
}

.zen-grid-action:hover {
    background: var(--zen-bg-muted, #F0F2F5);
    color: var(--zen-text-primary, #111827);
}

.zen-grid-action:active {
    background: var(--zen-border, #E2E5EC);
}

.zen-grid-action:focus-visible {
    outline: none;
    box-shadow: var(--zen-focus-shadow);
}

.zen-grid-action--primary {
    color: var(--zen-accent, #4F7FFF);
}

.zen-grid-action--primary:hover {
    background: var(--zen-accent-muted, rgba(79, 127, 255, 0.1));
    color: var(--zen-accent-hover, #3B6EEE);
}

.zen-grid-action--danger {
    color: var(--zen-danger, #EF4444);
}

.zen-grid-action--danger:hover {
    background: var(--zen-danger-muted, rgba(239, 68, 68, 0.1));
    color: var(--zen-danger, #DC2626);
}

.zen-grid-action--disabled,
.zen-grid-action:disabled {
    color: var(--zen-text-disabled, #D1D5DB);
    cursor: not-allowed;
    pointer-events: none;
}

.zen-grid-action__icon {
    flex-shrink: 0;
    display: inline-flex;
}

/* Icons render inside a .zen-grid-action__icon wrapper (a ZenIcons fill glyph or a
   built-in stroke fallback). Size them to the compact 16px action footprint. */
.zen-grid-action__icon > svg {
    display: block;
    width: 16px;
    height: 16px;
}

.zen-grid-action__label {
    white-space: nowrap;
}

@keyframes zen-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zen-scale-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Reduced motion — overlay enter animations become instant. */
@media (prefers-reduced-motion: reduce) {
    .zen-grid-filter-menu,
    .zen-grid-context-menu,
    .zen-grid-popup-overlay,
    .zen-grid-popup {
        animation-duration: 0.01ms;
    }
}

} /* @layer zenith-components */