.data-grid-scroll { max-width: 100%; overflow: auto; border: 1px solid var(--line, #81928b); border-radius: .6rem; }
table[data-grid] { width: 100%; border-collapse: collapse; font-size: .9rem; text-align: left; }
table[data-grid] caption { text-align: left; font-weight: 700; padding: .8rem; }
table[data-grid] th, table[data-grid] td { padding: .65rem .8rem; border-bottom: 1px solid var(--line, #81928b); vertical-align: middle; min-width: 6.5rem; white-space: nowrap; }
table[data-grid] td.grid-text { min-width: 12rem; max-width: 28rem; white-space: normal; overflow-wrap: anywhere; }
table[data-grid] th { position: sticky; top: 0; background: var(--panel, var(--surface, #fff)); z-index: 1; font-size: .85rem; text-transform: none; letter-spacing: normal; }
table[data-grid] tbody tr:nth-child(even) { background: color-mix(in srgb, currentColor 4%, transparent); }
table[data-grid] tbody tr:hover { background: color-mix(in srgb, currentColor 9%, transparent); }
table[data-grid] [hidden] { display: none !important; }
table[data-grid] .data-grid-sort { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
table[data-grid] input, table[data-grid] select { min-width: 7rem; width: 100%; min-height: 2.5rem; padding: .4rem .5rem; font: inherit; }
table[data-grid] input[type=checkbox] { display: block; min-width: 1.2rem; width: 1.2rem; min-height: 1.2rem; margin: 0; }
table[data-grid] .data-grid-filters label { display: block; white-space: normal; }
table[data-grid] td[data-sort] { font-variant-numeric: tabular-nums; }
.data-grid-toolbar, .data-grid-footer { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: .9rem 0; }
.data-grid-toolbar > input { flex: 1 1 14rem; width: auto; min-width: 0; }
.data-grid-toolbar > label { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.data-grid-toolbar select { width: auto; min-height: 2.5rem; padding: .4rem; }
.data-grid-toolbar button, .data-grid-footer button, .data-grid-toolbar summary { min-height: 2.75rem; box-sizing: border-box; }
.data-grid-toolbar button, .data-grid-footer button { padding: .45rem .9rem; }
.data-grid-footer > span { flex: 1 1 12rem; }
.data-grid-footer > label { display: inline-flex; align-items: center; gap: .65rem; }
.data-grid-footer button:disabled { cursor: default; opacity: .5; }
.data-grid-scroll:focus-visible, .data-grid-sort:focus-visible { outline: 3px solid var(--brand, #c89b3c); outline-offset: 2px; }
.data-grid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; min-width: 10rem; }
.data-grid-actions a { white-space: nowrap; }
table[data-grid] th:first-child, table[data-grid] td:first-child { min-width: 7.25rem; width: 7.25rem; }
.data-grid-selection-heading { display: inline-flex; align-items: center; gap: .55rem; }
.data-grid-selection-heading input[type=checkbox] { flex: 0 0 auto; }
.grid-list-selection input[type=checkbox] { width: 1.2rem; min-height: 1.2rem; margin: .5rem; }
.data-grid-dialog { width: min(36rem, calc(100vw - 2rem)); max-height: 85vh; border: 1px solid var(--line, #81928b); border-radius: 1rem; padding: 1.5rem; background: var(--panel, var(--surface, #fff)); color: var(--text, inherit); }
.data-grid-dialog::backdrop { background: #0009; }
.data-grid-dialog ul { max-height: 35vh; overflow: auto; }
.data-grid-dialog .data-grid-actions { margin-top: 1rem; }
.data-grid-dialog > label { display: block; margin-top: .75rem; }
.data-grid-dialog > label input { display: block; width: 100%; box-sizing: border-box; padding: .6rem; }
.data-grid-columns { position: relative; }
.data-grid-columns summary { cursor: pointer; display: flex; align-items: center; padding: .65rem .85rem; border: 1px solid var(--line, #81928b); border-radius: .65rem; white-space: nowrap; }
.data-grid-columns > div { position: absolute; z-index: 5; top: 100%; left: 0; min-width: 15rem; padding: 1rem; border: 1px solid var(--line, #81928b); border-radius: .5rem; background: var(--panel, var(--surface, #fff)); color: var(--text, inherit); box-shadow: 0 8px 24px #0003; }
.data-grid-columns label { display: flex; align-items: center; gap: .5rem; margin-block: .4rem; }
.data-grid-columns input[type=checkbox] { width: 1.2rem; min-height: 1.2rem; margin: 0; }
.data-grid-column-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .35rem; margin-block: .35rem; }
.data-grid-column-choice > label { min-width: 0; margin: 0; }
.data-grid-column-move { display: inline-grid; place-items: center; width: 2rem; min-height: 2rem; padding: 0; border: 1px solid var(--line, #81928b); border-radius: .4rem; background: transparent; color: inherit; cursor: pointer; }
.data-grid-column-move:disabled { opacity: .35; cursor: default; }
.workspace-heading { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.workspace-heading h1 { margin: .3rem 0; }
.workspace-heading p { margin: .3rem 0; }
.data-grid-view-switch { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.data-grid-view-switch button[aria-pressed=true] { outline: 2px solid currentColor; outline-offset: 2px; }
.data-grid-view-switch { align-items: end; gap: 1rem; padding: .75rem 0; }
.data-grid-view-switch label { display: grid; gap: .5rem; min-width: 11rem; margin: 0 .5rem; }
.data-grid-columns > div { max-height: 60vh; overflow: auto; }
.data-grid-columns label:has(input:not([type=checkbox])), .data-grid-columns label:has(select) { display: grid; gap: .3rem; }
.data-grid-columns input:not([type=checkbox]), .data-grid-columns select { box-sizing: border-box; width: 100%; min-width: 0; padding: .5rem; }
.grid-row-menu summary { list-style: none; cursor: pointer; font-size: 1.4rem; text-align: center; border: 1px solid var(--line, #81928b); border-radius: .5rem; width: 2.5rem; }
.grid-row-menu-items { min-width: 12rem; padding: .6rem; background: var(--panel, var(--surface, #fff)); border: 1px solid var(--line, #81928b); border-radius: .5rem; }
.grid-row-menu-items a, .grid-row-menu-items button { display: block; width: 100%; min-height: 2.75rem; box-sizing: border-box; margin: 0; padding: .65rem .75rem; border: 0; border-radius: .55rem; color: inherit; background: transparent; text-align: left; font: inherit; text-decoration: none; white-space: normal; cursor: pointer; }
.grid-row-menu-items a:hover, .grid-row-menu-items button:hover, .grid-row-menu-items a:focus-visible, .grid-row-menu-items button:focus-visible { background: color-mix(in srgb, currentColor 9%, transparent); }
.grid-row-menu-items .button, .grid-row-menu-items .button-secondary, .grid-row-menu-items .button-small { min-height: 2.75rem !important; margin: 0 !important; padding: .65rem .75rem !important; border: 0; box-shadow: none; color: inherit !important; background: transparent !important; }
.grid-row-menu-items .data-grid-actions { display: block; }
.grid-row-menu-items[popover] { position: fixed; inset: auto; margin: 0; color: inherit; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow: auto; box-shadow: 0 8px 28px #0005; }
table[data-grid] tr > :last-child[data-grid-skip], table[data-grid] tbody tr:not([data-grid-empty]) > td:last-child { position: sticky; right: 0; min-width: 3.5rem; background: var(--panel, var(--surface, #fff)); }
.grid-inline-trigger { border: 0; background: transparent; color: inherit; font: inherit; cursor: text; padding: .2rem; text-align: left; min-width: 2.75rem; min-height: 2.75rem; }
.grid-inline-trigger:hover, .grid-inline-trigger:focus-visible { outline: 1px solid currentColor; border-radius: .2rem; }
.grid-inline-editor { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 22rem; }
.grid-inline-editor [role=alert] { white-space: normal; width: 100%; }
.grid-side-panel { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(48rem, 94vw); max-width: 94vw; box-sizing: border-box; border: 0; border-left: 1px solid var(--line, #81928b); padding: 1.2rem; color: var(--text, inherit); background: var(--panel, var(--surface, #fff)); }
.grid-side-panel::backdrop { background: #0006; }
.grid-side-panel > header { position: sticky; top: -1.2rem; z-index: 4; background: var(--panel, var(--surface, #fff)); padding: .75rem 0; display: flex; justify-content: space-between; gap: 1rem; }
.grid-side-panel > header { align-items: center; }
.grid-side-panel > header button { min-height: var(--control-height, 48px); padding: 0 1rem; flex: 0 0 auto; border: 1px solid var(--line, #81928b); border-radius: .75rem; background: var(--panel, var(--surface, #fff)); color: inherit; font: inherit; cursor: pointer; }
.grid-side-panel .form-layout, .grid-side-panel .permission-grid { grid-template-columns: 1fr; }
.grid-side-panel .page-heading { margin-block: 1rem; }
.grid-side-panel .form-aside { position: static; }
.grid-side-panel input, .grid-side-panel select, .grid-side-panel textarea { max-width: 100%; box-sizing: border-box; }
.grid-date-range { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.grid-date-range label { display: flex; align-items: center; gap: .4rem; }
.grid-date-range input { width: 10rem; min-height: 2.5rem; padding: .4rem; }
.data-grid-toolbar[hidden] { display: none; }
.grid-view-controls { display: grid; gap: .6rem; }
.data-grid-toolbar > select { max-width: 12rem; }
@media (max-width: 760px) {
  .data-grid-toolbar { align-items: stretch; }
  .data-grid-toolbar > input { flex-basis: 100%; }
  .data-grid-toolbar > select, .data-grid-toolbar > .data-grid-columns { flex: 1 1 10rem; max-width: none; }
  .data-grid-toolbar > .data-grid-columns > summary { justify-content: space-between; }
}
/* Keep native links/controls independent; Enter opens a focused data row. */
table[data-grid] .grid-openable-row { cursor: pointer; }
table[data-grid] .grid-openable-row:hover { background: var(--ee-surface-alt, rgba(100, 140, 160, .12)); }
table[data-grid] .grid-openable-row:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
#grid-print-export { display: none; }
/* Responsive overview: no duplicate DOM or independent mobile data source. */
table[data-grid].grid-compact { display: block; }
table[data-grid].grid-compact thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
table[data-grid].grid-compact tbody { display: block; }
table[data-grid].grid-compact tbody tr { display: flex; flex-direction: column; border-bottom: 2px solid var(--line, #81928b); padding: .5rem; }
table[data-grid].grid-compact tbody td { position: static; display: flex; align-items: start; gap: .75rem; width: auto; min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; border: 0; }
table[data-grid].grid-compact tbody td::before { content: attr(data-grid-label) / ""; flex: 0 0 36%; font-weight: 600; }
table[data-grid].grid-compact tbody td.grid-compact-control { align-items: center; }
table[data-grid].grid-compact tbody [data-grid-empty] td::before { content: none; }
table[data-grid].grid-compact .grid-inline-trigger { overflow-wrap: anywhere; min-width: 0; }
@media print {
  body:has(#grid-print-export) > :not(#grid-print-export) { display: none !important; }
  body:has(#grid-print-export) { display: block !important; margin: 0 !important; padding: 0 !important; background: white !important; color: black !important; }
  #grid-print-export { display: block; font: 9pt sans-serif; color: black; }
  #grid-print-export table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  #grid-print-export th, #grid-print-export td { border: 1px solid #777; padding: 4pt; overflow-wrap: anywhere; white-space: normal; color: black; background: white; }
  #grid-print-export thead { display: table-header-group; }
  #grid-print-export tr { break-inside: avoid; }
}