{"version":3,"file":"datagrid.css.cjs","names":[],"sources":["../../../src/inputs/datagrid/datagrid.css?inline"],"sourcesContent":["@layer refine.base {\n  :host {\n    /* ── Datagrid-specific token overrides on top of tableBaseMixin ─────── */\n    --_row-hover-bg: var(--datagrid-row-hover-bg, color-mix(in oklch, var(--color-contrast-500) 5%, transparent));\n    --_row-selected-bg: var(--datagrid-row-selected-bg, color-mix(in oklch, var(--_accent) 10%, transparent));\n    --_row-selected-border: var(--datagrid-row-selected-border, var(--_accent));\n  }\n\n  /* ── Scroll wrapper ───────────────────────────────────────────────────────── */\n\n  .dg-scroll {\n    max-height: var(--datagrid-max-height, none);\n    overflow: auto;\n  }\n\n  /* ── Table ────────────────────────────────────────────────────────────────── */\n\n  .dg-table {\n    width: 100%;\n    font-size: var(--_font-size);\n    table-layout: auto;\n    border-collapse: collapse;\n  }\n\n  /* ── Head ─────────────────────────────────────────────────────────────────── */\n\n  .dg-head {\n    position: sticky;\n    top: 0;\n    z-index: 2;\n    background: var(--_header-bg);\n    box-shadow: inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n  }\n\n  .dg-th {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-500);\n    text-align: start;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    user-select: none;\n    border-right: var(--border) solid var(--_border-color);\n\n    &[data-align='center'] {\n      text-align: center;\n    }\n\n    &[data-align='right'] {\n      text-align: right;\n    }\n\n    &:has(.dg-sort-btn) {\n      padding: 0;\n    }\n  }\n\n  .dg-sort-btn {\n    --button-padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    --button-font-size: var(--text-xs);\n    --button-font-weight: var(--font-semibold);\n    --button-color: var(--color-contrast-500);\n    --button-justify: flex-start;\n\n    height: 100%;\n  }\n\n  .dg-th[data-align='center'] .dg-sort-btn {\n    --button-justify: center;\n  }\n\n  .dg-th[data-align='right'] .dg-sort-btn {\n    --button-justify: flex-end;\n  }\n\n  :host(:dir(rtl)) .dg-th,\n  :dir(rtl) .dg-th {\n    border-right: none;\n    border-left: var(--border) solid var(--_border-color);\n  }\n\n  .dg-th:last-child,\n  .dg-th.dg-th-check,\n  .dg-th.dg-th-expand,\n  .dg-th.dg-th-last {\n    border-right: none;\n  }\n\n  :host(:dir(rtl)) .dg-th:last-child,\n  :host(:dir(rtl)) .dg-th.dg-th-check,\n  :host(:dir(rtl)) .dg-th.dg-th-expand,\n  :host(:dir(rtl)) .dg-th.dg-th-last,\n  :dir(rtl) .dg-th:last-child,\n  :dir(rtl) .dg-th.dg-th-check,\n  :dir(rtl) .dg-th.dg-th-expand,\n  :dir(rtl) .dg-th.dg-th-last {\n    border-left: none;\n  }\n\n  .dg-th-inner {\n    position: relative;\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .dg-th[aria-sort]:has(.dg-sort-btn:hover):not(:has(.dg-sort-btn[aria-disabled='true'])) {\n    background: color-mix(in oklch, var(--color-contrast-900) 5%, transparent);\n  }\n\n  .dg-th[aria-sort='ascending'] .dg-sort-icon,\n  .dg-th[aria-sort='descending'] .dg-sort-icon {\n    color: var(--_accent);\n  }\n\n  /* Select-all checkbox cell */\n  .dg-th-check {\n    width: var(--size-5);\n    min-width: var(--size-5);\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n  }\n\n  .dg-th-check,\n  .dg-td-check {\n    vertical-align: middle;\n    text-align: center;\n  }\n\n  .dg-td.dg-td-check {\n    padding: var(--size-1) 0 0;\n  }\n\n  /* ore-checkbox used for select-all and row checkboxes — label-less, compact */\n  .dg-check {\n    display: inline-flex;\n    gap: 0;\n    align-items: center;\n    justify-content: center;\n    min-height: 0;\n    cursor: pointer;\n  }\n\n  /* ── Body rows ────────────────────────────────────────────────────────────── */\n\n  .dg-body .dg-tr {\n    border-block-end: var(--border) solid var(--_border-color);\n    transition: background var(--transition-fast);\n  }\n\n  .dg-body .dg-tr:hover:not([data-disabled], [aria-selected='true']) {\n    background: var(--_row-hover-bg);\n  }\n\n  /* ── Selection ─────────────────────────────────────────────────────────────── */\n\n  .dg-body .dg-tr[aria-selected='true'] {\n    background: var(--_row-selected-bg);\n  }\n\n  .dg-body .dg-tr[data-selectable] {\n    cursor: pointer;\n    outline: none;\n  }\n\n  .dg-body .dg-tr[data-selectable]:focus-visible {\n    box-shadow: inset 0 0 0 2px var(--_row-selected-border);\n  }\n\n  .dg-body .dg-tr[data-disabled] {\n    pointer-events: none;\n    opacity: 0.45;\n  }\n\n  /* Striped rows */\n  :host([striped]) .dg-body .dg-tr:nth-child(even) {\n    background: var(--_stripe-bg);\n  }\n\n  :host([striped]) .dg-body .dg-tr:nth-child(even)[aria-selected='true'] {\n    background: var(--_row-selected-bg);\n  }\n\n  /* ── Body cells ────────────────────────────────────────────────────────────── */\n\n  .dg-td {\n    max-width: var(--datagrid-cell-max-width, 32ch);\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    color: var(--color-contrast-800);\n    white-space: nowrap;\n    border-right: var(--border) solid var(--_border-color);\n\n    &[data-align='center'] {\n      text-align: center;\n    }\n\n    &[data-align='right'] {\n      text-align: right;\n    }\n  }\n\n  :host(:dir(rtl)) .dg-td,\n  :dir(rtl) .dg-td {\n    border-right: none;\n    border-left: var(--border) solid var(--_border-color);\n  }\n\n  .dg-td:last-child,\n  .dg-td.dg-td-check,\n  .dg-td.dg-td-expand,\n  .dg-td.dg-td-last {\n    border-right: none;\n  }\n\n  :host(:dir(rtl)) .dg-td:last-child,\n  :host(:dir(rtl)) .dg-td.dg-td-check,\n  :host(:dir(rtl)) .dg-td.dg-td-expand,\n  :host(:dir(rtl)) .dg-td.dg-td-last,\n  :dir(rtl) .dg-td:last-child,\n  :dir(rtl) .dg-td.dg-td-check,\n  :dir(rtl) .dg-td.dg-td-expand,\n  :dir(rtl) .dg-td.dg-td-last {\n    border-left: none;\n  }\n\n  /* ── Empty state ──────────────────────────────────────────────────────────── */\n\n  .dg-empty {\n    padding: var(--size-12) var(--_cell-padding-x);\n    font-size: var(--text-sm);\n    color: var(--color-contrast-400);\n    text-align: center;\n  }\n\n  .dg-empty-content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-4);\n    align-items: center;\n    justify-content: center;\n  }\n\n  .dg-empty-actions {\n    margin-top: var(--size-2);\n  }\n\n  /* ── Controls bar (tabs + action row) ───────────────────────────────────── */\n\n  .dg-controls {\n    display: flex;\n    gap: var(--size-3);\n    align-items: center;\n    justify-content: space-between;\n    height: var(--size-8);\n    padding: var(--size-1-5) var(--_cell-padding-x);\n    background: var(--_header-bg);\n    border-block-end: var(--border) solid var(--_border-color);\n  }\n\n  /* ── Tab system (left) ───────────────────────────────────────────────────── */\n\n  .dg-tabs {\n    display: flex;\n    flex: 1;\n    gap: var(--size-1);\n    align-items: center;\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .dg-tab {\n    --button-padding: var(--size-0-5) var(--size-2-5);\n    --button-font-size: var(--text-xs);\n    --button-color: var(--color-contrast-500);\n\n    flex: 1;\n    min-width: 0;\n  }\n\n  .dg-tab--active {\n    --button-color: var(--color-contrast-900);\n    --button-bg: color-mix(in oklch, var(--color-contrast-500) 10%, transparent);\n    --button-border-color: var(--_border-color);\n    --button-border: var(--border);\n\n    font-weight: var(--font-semibold);\n  }\n\n  /* ── Action bar (right) ──────────────────────────────────────────────────── */\n\n  .dg-actions {\n    display: flex;\n    flex-shrink: 0;\n    gap: var(--size-0-5);\n    align-items: center;\n  }\n\n  /* ── Shared icon button — used by action bar, search-expand clear, popover header icons ── */\n\n  .dg-action-divider {\n    display: inline-block;\n    flex-shrink: 0;\n    width: var(--border);\n    height: var(--size-4);\n    margin-inline: var(--size-1);\n    background: var(--_border-color);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .dg-filter {\n    display: block;\n    width: 100%;\n  }\n\n  /* ── Search toggle (rightmost action) ───────────────────────────────────── */\n\n  .dg-search {\n    display: flex;\n    flex-direction: row-reverse;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  .dg-search-input {\n    --input-height: var(--size-7);\n    display: block;\n    flex-shrink: 0;\n    width: 0;\n    overflow: hidden;\n    opacity: 0;\n    transition:\n      width var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .dg-search--open .dg-search-input {\n    width: 12rem;\n    overflow: visible;\n    opacity: 1;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dg-search-input {\n      transition: none;\n    }\n  }\n\n  /* ── ore-popover: action popover wrapper ─────────────────────────────────── */\n\n  .dg-action-popover {\n    display: inline-flex;\n  }\n\n  /* ── Popover content: shared header row ─────────────────────────────────── */\n\n  .dg-pop-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--size-3) var(--size-3) var(--size-2);\n  }\n\n  .dg-pop-title {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-600);\n    letter-spacing: 0.02em;\n  }\n\n  /* ── Sort / Group by popover content ────────────────────────────────────── */\n\n  .dg-pop-sort {\n    display: flex;\n    flex-direction: column;\n    padding-block-end: var(--size-2);\n  }\n\n  .dg-pop-sort-row {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-1) var(--size-3);\n  }\n\n  .dg-pop-select {\n    --select-min-width: var(--size-20);\n\n    flex: 2;\n  }\n\n  .dg-pop-dir-select {\n    --select-min-width: var(--size-10);\n\n    flex: 1;\n  }\n\n  /* ── Filter popover content ──────────────────────────────────────────────── */\n\n  .dg-pop-filter {\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Field picker: select columns to add filter rules. */\n  .dg-pop-filter-fields {\n    padding: 0 var(--size-3) var(--size-3);\n  }\n\n  /* ── Filter rules section ────────────────────────────────────────────────── */\n\n  .dg-pop-filter-rules {\n    padding-block-start: var(--size-1);\n    border-block-start: var(--border) solid var(--_border-color);\n\n    &[hidden] {\n      display: none;\n    }\n  }\n\n  .dg-pop-filter-rule {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-2);\n    padding: var(--size-2) var(--size-3);\n  }\n\n  .dg-pop-filter-rule-header {\n    display: flex;\n    gap: var(--size-1-5);\n    align-items: center;\n  }\n\n  .dg-pop-filter-field {\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-800);\n    white-space: nowrap;\n  }\n\n  .dg-pop-filter-op-select {\n    --select-min-width: 0;\n    --select-height: var(--size-6);\n    --select-font-size: var(--text-2xs);\n    --select-padding-x: var(--size-1-5);\n\n    flex: 1;\n    min-width: 6rem;\n  }\n\n  .dg-pop-col-item {\n    --button-radius: var(--rounded-md);\n\n    justify-content: flex-start;\n  }\n\n  .dg-pop-col-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--size-1);\n    max-width: 25rem;\n    padding: var(--size-3);\n  }\n\n  /* ── Footer / pagination bar ─────────────────────────────────────────────── */\n\n  .dg-footer {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    padding: var(--size-2) var(--_cell-padding-x);\n    font-size: var(--text-xs);\n    color: var(--color-contrast-500);\n    background: var(--_header-bg);\n  }\n\n  .dg-footer-info {\n    white-space: nowrap;\n  }\n\n  .dg-footer-end {\n    display: flex;\n    gap: var(--size-2);\n    align-items: center;\n    width: fit-content;\n    margin-inline-start: auto;\n  }\n\n  .dg-page-size-wrap {\n    flex-shrink: 0;\n    width: 5rem;\n  }\n\n  .dg-page-size-select {\n    --select-min-width: 0;\n    --select-height: var(--size-7);\n    --select-font-size: var(--text-xs);\n    --select-padding-x: var(--size-2);\n  }\n\n  .dg-pagination {\n    display: flex;\n    gap: var(--size-1);\n    align-items: center;\n  }\n\n  :host(:dir(rtl)) .dg-page-btn,\n  :dir(rtl) .dg-page-btn {\n    transform: scaleX(-1);\n  }\n\n  .dg-page-btn {\n    --button-color: var(--color-contrast-600);\n    --button-radius: var(--rounded-md);\n\n    width: var(--size-7);\n    height: var(--size-7);\n  }\n\n  .dg-page-btn:hover {\n    --button-color: var(--color-contrast-900);\n    --button-bg: var(--color-contrast-300);\n  }\n\n  .dg-page-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.35;\n  }\n\n  .dg-page-label {\n    padding-inline: var(--size-1);\n    white-space: nowrap;\n  }\n\n  /* ── Column resize handle (F4) ───────────────────────────────────────────── */\n\n  .dg-col-resize {\n    position: absolute;\n    inset-block: calc(var(--_cell-padding-y) * -1);\n    inset-inline-end: calc((var(--_cell-padding-x) + var(--border) + 2px) * -1);\n    width: var(--size-1);\n    cursor: col-resize;\n    user-select: none;\n    background: transparent;\n    border-radius: var(--rounded);\n    transition: background var(--transition-fast);\n  }\n\n  .dg-col-resize:hover,\n  .dg-col-resize:active {\n    background: var(--_accent, var(--color-contrast-300));\n  }\n\n  /* ── Cell keyboard focus (ARIA grid roving tabindex) ─────────────────────── */\n\n  .dg-td:focus-visible,\n  .dg-th:focus-visible {\n    outline: 2px solid var(--_row-selected-border);\n    outline-offset: -2px;\n  }\n\n  /* ── Row expansion ────────────────────────────────────────────────────────── */\n\n  .dg-tr-expanded .dg-td-expanded {\n    padding: var(--_cell-padding-y) var(--_cell-padding-x);\n    border: none;\n\n    /* Paint background + bottom separator via box-shadow so it is\n       direction-agnostic and covers the host outer border on both sides. */\n    box-shadow:\n      inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-600) 4%, var(--_bg, transparent)),\n      inset 0 calc(var(--border) * -1) 0 var(--_border-color);\n  }\n\n  .dg-tr-expanded:last-child .dg-td-expanded {\n    box-shadow: inset 0 0 0 9999px color-mix(in oklch, var(--color-contrast-900) 4%, var(--_bg, transparent));\n  }\n\n  .dg-tr:has(+ .dg-tr-expanded) {\n    border-block-end: none;\n  }\n\n  .dg-th-expand,\n  .dg-td-expand {\n    width: var(--size-8);\n    min-width: var(--size-8);\n    padding-block: var(--size-1) 0;\n    padding-inline: 0 var(--size-2);\n    text-align: center;\n    white-space: nowrap;\n    border-right: none;\n    border-left: none;\n  }\n\n  .dg-expand-btn {\n    --button-color: var(--color-contrast-500);\n    --button-radius: var(--rounded-sm);\n\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  .dg-expand-btn:hover {\n    --button-color: var(--color-contrast-900);\n  }\n\n  .dg-expand-btn:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  /* ── Loading overlay ──────────────────────────────────────────────────────── */\n\n  .dg-loading-overlay {\n    position: absolute;\n    inset: 0;\n    z-index: 3;\n    display: none;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in oklch, var(--_bg, white) 40%, transparent);\n    backdrop-filter: blur(1px);\n  }\n\n  :host([loading]) .dg-loading-overlay {\n    display: flex;\n  }\n\n  :host([loading]) .dg-scroll table {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  .dg-spin {\n    animation: dg-spin 1s linear infinite;\n  }\n\n  @keyframes dg-spin {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"mappings":""}