/* Shared DataGrid styles: Razor and JavaScript DOM engines. */
.dgx-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    color: var(--dgx-text);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

/* Pass the transaction shell's remaining height through page/tab wrappers. */
.transaction-grid-layout,
.transaction-grid-fill,
.transaction-grid-pane {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.dgx-scroll {
    width: 100%;
    height: 100%;
    max-height: 100%;
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border: 1px solid var(--dgx-border);
    border-radius: var(--dgx-border-radius);
    background: var(--dgx-surface);
    box-shadow: 0 2px 8px var(--acme-overlay-05);
}

.dgx-row.taxable .dgx-cell,
.dgx-js-row.taxable .dgx-js-cell {
    color: var(--taxable-color) !important;
}

.dgx-row.non-taxable .dgx-cell,
.dgx-js-row.non-taxable .dgx-js-cell {
    color: var(--non-taxable-color) !important;
}

.dgx-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 100%;
}

.dgx-header {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, var(--dgx-header-start), var(--dgx-header-end));
    color: var(--dgx-header-text);
    border-bottom: 1px solid var(--dgx-border-soft);
    border-right: 1px solid var(--dgx-border-soft);
    padding: 0.35rem 0.45rem;
    font-size: 0.875rem;
    text-transform: capitalize;
    white-space: nowrap;
    font-weight: bold;
    height: calc(var(--dgx-row-height) + 0.05rem);
    min-height: calc(var(--dgx-row-height) + 0.05rem);
    line-height: 1.2;
}

.dgx-header-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dgx-required-indicator {
    margin-left: 0.2rem;
    color: var(--acme-color-danger);
    font-weight: 800;
}

.dgx-column-resizer {
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    width: 7px;
    z-index: 12;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.dgx-column-resizer:hover,
.dgx-column-resizer.dgx-column-resizer-active {
    background: color-mix(in srgb, var(--dgx-active-outline) 55%, transparent);
}

/* Combined sticky logic with fixed width consistency */
.dgx-shell .sticky-left {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--dgx-surface);
    box-shadow: 2px 0 4px var(--acme-overlay-05);
    width: 48px; /* Synced with row number width */
    min-width: 48px;
}

.dgx-shell .sticky-right {
    position: sticky;
    right: 0;
    z-index: 5;
    background: var(--dgx-surface);
    box-shadow: -2px 0 4px var(--acme-overlay-05);
    width: 48px;
    min-width: 48px;
}

.dgx-row-number-head,
.dgx-row-number {
    width: 48px;
    text-align: center;
    color: var(--dgx-text-muted);
    background: var(--dgx-surface-alt);
    font-weight: 700;
}

.dgx-cell {
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid var(--dgx-border-soft);
    border-right: 1px solid var(--dgx-border-soft);
    padding: 0;
    height: var(--dgx-row-height);
    min-width: 0;
    vertical-align: middle;
    background: var(--dgx-surface);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: var(--dgx-row-height);
}

.dgx-table .dgx-virtual-spacer td {
    padding: 0;
    border: 0;
    background: transparent;
}

/* Hover effects */
.dgx-row:hover:not(.dgx-row-active) > .dgx-cell {
    background: var(--dgx-row-hover);
}

.dgx-row:hover:not(.dgx-row-active) .sticky-left,
.dgx-row:hover:not(.dgx-row-active) .sticky-right {
    background: var(--dgx-row-hover);
}

/* Row Active State - Uses safe inside shadows instead of breaking layout layout layout border geometry */
.dgx-row-active > .dgx-cell {
    background: var(--dgx-active-bg, var(--bg-light)) !important;
}

.dgx-row-active > .dgx-cell:first-child {
    box-shadow: inset 2px 0 0 var(--dgx-active-outline);
}

.dgx-row-active > .dgx-cell:last-child {
    box-shadow: inset -2px 0 0 var(--dgx-active-outline);
}

/* Escape states */
.dgx-shell-escape-single .dgx-row-escape-single > .dgx-cell,
.dgx-shell-escape-single .dgx-row-active > .dgx-cell {
    background: var(--acme-color-surface-hover) !important;
}

.dgx-shell-escape-single .dgx-row-escape-single > .dgx-cell:first-child,
.dgx-shell-escape-single .dgx-row-active > .dgx-cell:first-child {
    box-shadow: inset 3px 0 0 var(--dgx-active-outline);
}

.dgx-shell-escape-double {
    outline: 1px solid var(--dgx-active-outline);
    outline-offset: 2px;
}

.dgx-cell-lookup {
    overflow: visible;
}

/* Fixed focus accessibility rules */
.dgx-shell .dgx-cell:focus-visible {
    outline: 1px solid var(--dgx-active-outline);
    outline-offset: -2px;
    z-index: 3;
}

.dgx-shell .dgx-row:not(.dgx-row-escape-single) > .dgx-cell-active {
    box-shadow: inset 0 0 0 1px var(--dgx-active-outline) !important;
    background: var(--dgx-active-bg) !important;
    border-radius: var(--dgx-border-radius);
    z-index: 3;
}

.dgx-cell-error {
    box-shadow: inset 3px 0 0 var(--dgx-error-accent);
    background: var(--dgx-error-bg);
}

.dgx-cell-active.dgx-cell-error {
    box-shadow: inset 3px 0 0 var(--dgx-error-accent), inset 0 0 0 1px var(--dgx-active-outline) !important;
}

.dgx-cell-readonly,
.dgx-readonly-head {
    background: var(--dgx-surface-alt);
}

.dgx-cell-disabled {
    background: var(--dgx-disabled-bg) !important;
    color: var(--dgx-disabled-text);
}

.dgx-value {
    display: block;
    box-sizing: border-box;
    padding: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    min-height: var(--dgx-row-height);
    line-height: var(--dgx-row-height);
}

.dgx-input[aria-invalid="true"] {
    box-shadow: inset 3px 0 0 var(--dgx-error-accent) !important;
    background: var(--dgx-error-bg) !important;
}

.dgx-input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 0.2rem 0.5rem;
    font: inherit;
    color: inherit;
    min-height: var(--dgx-row-height);
    min-width: 0;
    line-height: 1.5;
    font-size: 0.9rem;
    border-radius: 0.2rem;
    box-sizing: border-box;
    opacity: 1;
}

/*
 * Grid editors also carry Bootstrap's form-control classes. Keep global
 * form-control sizing and input:focus rules from changing cell geometry or
 * applying the application's danger-colored form focus state while editing.
 */
.dgx-shell .dgx-input.form-control {
    width: 100% !important;
    height: 100% !important;
    min-height: var(--dgx-row-height) !important;
    max-height: 100% !important;
    padding: 0.2rem 0.5rem !important;
    border: 0 !important;
    border-radius: var(--dgx-border-radius) !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--dgx-text);
    -webkit-text-fill-color: var(--dgx-text);
    opacity: 1;
}

.dgx-shell .dgx-input.form-control:focus,
.dgx-shell .dgx-input.form-control:focus-visible {
    border: 0 !important;
    outline: 1px solid var(--dgx-active-outline) !important;
    outline-offset: -1px;
    box-shadow: none !important;
    background: var(--dgx-surface) !important;
    color: var(--dgx-text) !important;
    -webkit-text-fill-color: var(--dgx-text);
}

.dgx-shell .dgx-input.form-control:disabled {
    background: transparent !important;
    color: var(--dgx-disabled-text) !important;
    -webkit-text-fill-color: var(--dgx-disabled-text);
    cursor: not-allowed;
}

.dgx-shell .dgx-input.form-control[aria-invalid="true"] {
    background: var(--dgx-error-bg) !important;
    box-shadow: inset 3px 0 0 var(--dgx-error-accent) !important;
}

.dgx-shell .dgx-input.form-control[aria-invalid="true"]:focus,
.dgx-shell .dgx-input.form-control[aria-invalid="true"]:focus-visible {
    outline-color: var(--dgx-error-accent) !important;
}

.dgx-input-readonly {
    color: var(--dgx-text);
    cursor: default;
}

.dgx-input:disabled {
    color: var(--dgx-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.dgx-input-check {
    width: 1rem;
    height: 1rem;
    margin: 0 0.6rem;
}

.dgx-lookup-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dgx-lookup-popup {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 25;
    max-height: var(--dgx-row-lookup-height);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--dgx-active-outline) 24%, var(--dgx-popup-border));
    border-radius: max(var(--dgx-border-radius), 6px);
    background: var(--dgx-popup-bg);
    box-shadow: var(--dgx-popup-shadow);
    padding: 0.35rem;
    scrollbar-width: thin;
}

.dgx-lookup-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    border: 0;
    border-radius: var(--dgx-border-radius);
    background: transparent;
    color: var(--dgx-text);
    min-height: 2.25rem;
    padding: 0.45rem 0.6rem;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--acme-transition-fast), box-shadow var(--acme-transition-fast), color var(--acme-transition-fast);
}

.dgx-lookup-option:hover,
.dgx-lookup-option:focus-visible,
.dgx-lookup-option.dgx-lookup-option-active {
    background: color-mix(in srgb, var(--dgx-active-outline) 10%, var(--dgx-popup-bg));
    box-shadow: inset 3px 0 0 var(--dgx-active-outline);
    outline: 1px solid color-mix(in srgb, var(--dgx-active-outline) 38%, transparent);
    outline-offset: -1px;
}

.dgx-lookup-option.dgx-lookup-option-selected {
    background: color-mix(in srgb, var(--dgx-active-outline) 15%, var(--dgx-popup-bg));
    box-shadow: inset 3px 0 0 var(--dgx-active-outline);
    font-weight: 650;
}

.dgx-lookup-option:active {
    background: color-mix(in srgb, var(--dgx-active-outline) 20%, var(--dgx-popup-bg));
}

.dgx-lookup-option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dgx-lookup-option-value {
    flex: 0 0 auto;
    color: var(--dgx-text-muted);
    font-size: 0.75rem;
    line-height: 1;
    padding: 0.22rem 0.4rem;
    border: 1px solid var(--dgx-border-soft);
    border-radius: var(--acme-radius-pill);
    background: color-mix(in srgb, var(--acme-color-surface-muted) 72%, var(--dgx-popup-bg));
}

.dgx-lookup-option-clear {
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--dgx-border-soft);
    border-radius: var(--dgx-border-radius) var(--dgx-border-radius) 0 0;
    color: var(--acme-color-danger);
    font-weight: 650;
}

.dgx-lookup-option-clear:hover,
.dgx-lookup-option-clear:focus-visible,
.dgx-lookup-option-clear.dgx-lookup-option-active {
    background: color-mix(in srgb, var(--acme-color-danger) 9%, var(--dgx-popup-bg));
    box-shadow: inset 3px 0 0 var(--acme-color-danger);
    outline-color: color-mix(in srgb, var(--acme-color-danger) 38%, transparent);
}

@media (max-width: 576px), (pointer: coarse) {
    .dgx-lookup-option {
        min-height: 2.75rem;
        padding: 0.6rem 0.7rem;
    }
}

.dgx-empty-row > .dgx-cell {
    height: calc(var(--dgx-row-height) + 12px);
}

.dgx-empty {
    text-align: center;
    padding: 0;
    color: transparent;
    background: var(--dgx-surface);
}

.dgx-sales-theme .dgx-scroll {
    box-shadow: 0 2px 8px var(--acme-overlay-05);
}

.dgx-sales-theme .dgx-header {
    background: linear-gradient(180deg, var(--dgx-header-start), var(--dgx-header-end));
    color: var(--dgx-header-text);
}

.dgx-sales-theme .dgx-row-active > .dgx-cell,
.dgx-sales-theme .dgx-row-active .sticky-left,
.dgx-sales-theme .dgx-row-active .sticky-right {
    background: var(--acme-color-surface-soft) !important;
}

.dgx-cell.text-end,
.dgx-cell.text-end .dgx-value,
.dgx-cell.text-end .dgx-input,
.dgx-header.text-end {
    text-align: right !important;
}

.dgx-cell.text-center,
.dgx-cell.text-center .dgx-value,
.dgx-cell.text-center .dgx-input,
.dgx-header.text-center {
    text-align: center !important;
}

.dgx-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bs-danger);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.dgx-delete:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.dgx-sales-theme .dgx-cell-active {
    box-shadow: inset 0 0 0 1px var(--dgx-active-outline) !important;
}

/* JavaScript DOM recycling layout (visual states use shared dgx-* classes above). */
.dgx-js-engine {
    width: 100%;
    height: 100%;
    min-height: calc(var(--dgx-row-height) + var(--dgx-row-height) + 12px + 0.05rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--dgx-text);
    position: relative;
}

.dgx-js-host {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    flex: 1 1 0;
    min-height: calc(var(--dgx-row-height) + var(--dgx-row-height) + 12px + 0.05rem);
    min-width: 0;
    box-sizing: border-box;
    overflow: auto;
    border: 1px solid var(--dgx-border);
    border-radius: var(--dgx-border-radius);
    background: var(--dgx-surface);
    box-shadow: 0 2px 8px var(--acme-overlay-05);
    contain: layout paint style;
    scrollbar-gutter: stable both-edges;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.dgx-js-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    min-width: 100%;
    height: calc(var(--dgx-row-height) + 0.05rem);
    min-height: calc(var(--dgx-row-height) + 0.05rem);
}

.dgx-js-body {
    position: relative;
    min-width: 100%;
}

.dgx-js-row {
    position: absolute;
    left: 0;
    display: grid;
    min-width: 100%;
    height: var(--dgx-row-height);
}

.dgx-js-empty-row {
    height: calc(var(--dgx-row-height) + 4px);
    cursor: pointer;
}

.dgx-js-empty-row > .dgx-js-cell {
    height: calc(var(--dgx-row-height) + 4px);
}

body.dgx-column-resizing,
body.dgx-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.dgx-js-header > .dgx-header.sticky-left,
.dgx-js-header > .dgx-header.sticky-right {
    top: 0;
    z-index: 15;
    background: linear-gradient(180deg, var(--dgx-header-start), var(--dgx-header-end));
    color: var(--dgx-header-text);
}

.dgx-js-host .dgx-cell-lookup {
    z-index: 5;
}

.dgx-js-cell.dgx-js-cell-editing {
    padding: 0;
    overflow: visible;
}

.dgx-js-host .dgx-js-editor {
    color: var(--dgx-text) !important;
    caret-color: var(--dgx-text);
    background: var(--dgx-surface) !important;
    -webkit-text-fill-color: var(--dgx-text);
    opacity: 1;
}

.dgx-js-cell.dgx-js-cell-input {
    padding: 0;
}

/* Preserve the Razor renderer's validation and native checkbox appearance. */
.dgx-js-host .dgx-cell-error {
    background: var(--dgx-error-bg) !important;
}

.dgx-js-host .dgx-js-editor-check {
    width: 1rem;
    height: 1rem;
    min-height: 1rem;
    margin: 0 0.6rem;
    padding: 0;
    appearance: auto;
}

.dgx-js-host .dgx-js-empty-row[aria-disabled="true"] {
    cursor: not-allowed;
}