/* ═══════════════════════════════════════════════════════════════════════════
   FT Data Table — institutional grid chrome (overrides Radzen DataGrid)
   Scope: .hud-layout / .ft-radzen-scope / .hud-shell / .ft-data-table
   Tokens: --ft-table-*, --ft-color-*, --ft-space-*, --ft-radius-*, density
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shell ─── */

.ft-data-table,
.hud-layout .rz-data-grid,
.hud-layout .rz-datatable,
.ft-radzen-scope .rz-data-grid,
.ft-radzen-scope .rz-datatable,
.hud-shell .rz-data-grid,
.hud-shell .rz-datatable {
    --ft-dt-primary-soft: color-mix(in srgb, var(--ft-color-primary) 10%, transparent);
    --ft-dt-primary-mid: color-mix(in srgb, var(--ft-color-primary) 18%, transparent);
    --ft-dt-primary-line: color-mix(in srgb, var(--ft-color-primary) 28%, transparent);
    background: var(--ft-color-bg-surface) !important;
    border: 1px solid var(--ft-table-border) !important;
    border-radius: var(--ft-radius-md) !important;
    color: var(--ft-color-text-primary) !important;
    overflow: hidden;
    box-shadow: var(--ft-shadow-sm);
}

.ft-data-table-shell {
    position: relative;
    background: var(--ft-color-bg-surface);
    border: 1px solid var(--ft-table-border);
    border-radius: var(--ft-radius-md);
    box-shadow: var(--ft-shadow-sm);
    overflow: hidden;
}

.ft-data-table-shell > .rz-data-grid,
.ft-data-table-shell > .rz-datatable {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ft-data-table-shell__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ft-space-3);
    padding: var(--ft-space-3) var(--ft-space-4);
    background: var(--ft-table-filter-bg, var(--ft-color-bg-inset));
    border-bottom: 1px solid var(--ft-table-border);
}

.ft-data-table-shell__toolbar-title {
    margin: 0;
    font-size: var(--ft-font-size-sm);
    font-weight: var(--ft-font-weight-semibold);
    color: var(--ft-color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ft-data-table-shell__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ft-space-2);
    margin-left: auto;
}

/* ─── Header (sticky) ─── */

.hud-layout .rz-grid-table thead th,
.hud-layout .rz-datatable thead th,
.hud-layout .rz-data-grid .rz-data-grid-header-cell,
.ft-radzen-scope .rz-grid-table thead th,
.ft-radzen-scope .rz-data-grid .rz-data-grid-header-cell,
.hud-shell .rz-grid-table thead th,
.ft-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--ft-table-header-bg) !important;
    color: var(--ft-color-text-secondary) !important;
    border-color: var(--ft-table-border) !important;
    border-bottom: 1px solid var(--ft-color-border-strong) !important;
    font-size: var(--ft-font-size-xs) !important;
    font-weight: var(--ft-font-weight-semibold) !important;
    letter-spacing: 0.06em;
    padding: var(--ft-table-header-py) var(--ft-table-cell-px) !important;
    white-space: nowrap;
    box-shadow: var(--ft-table-sticky-shadow);
}

.hud-layout .rz-grid-table thead th .rz-column-title,
.hud-layout .rz-data-grid .rz-data-grid-header-cell .rz-column-title,
.ft-radzen-scope .rz-column-title {
    color: var(--ft-color-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.hud-layout .rz-sortable-column-icon,
.hud-layout .rz-grid-table th .rzi,
.ft-radzen-scope .rz-sortable-column-icon {
    color: var(--ft-color-text-muted) !important;
    opacity: 0.75;
}

.hud-layout .rz-grid-table th:hover,
.hud-layout .rz-datatable thead th:hover,
.ft-radzen-scope .rz-grid-table th:hover {
    background: color-mix(in srgb, var(--ft-color-primary) 8%, var(--ft-table-header-bg)) !important;
}

.hud-layout .rz-grid-table th[aria-sort="ascending"] .rz-sortable-column-icon,
.hud-layout .rz-grid-table th[aria-sort="descending"] .rz-sortable-column-icon,
.ft-radzen-scope .rz-grid-table th[aria-sort="ascending"] .rz-sortable-column-icon,
.ft-radzen-scope .rz-grid-table th[aria-sort="descending"] .rz-sortable-column-icon {
    color: var(--ft-color-primary) !important;
    opacity: 1;
}

/* ─── Body rows ─── */

.hud-layout .rz-grid-table tbody td,
.hud-layout .rz-datatable tbody td,
.ft-radzen-scope .rz-grid-table tbody td,
.hud-shell .rz-grid-table tbody td,
.ft-data-table tbody td {
    background: transparent !important;
    border-color: var(--ft-color-border-subtle, var(--ft-table-border)) !important;
    border-bottom: 1px solid var(--ft-color-border-subtle, var(--ft-table-border)) !important;
    color: var(--ft-color-text-primary) !important;
    font-size: var(--ft-font-size-sm) !important;
    padding: var(--ft-table-cell-py) var(--ft-table-cell-px) !important;
    vertical-align: middle !important;
    line-height: 1.45;
}

/* Kill leftover dark Radzen card chrome on tokenized pages */
.ft-radzen-scope .rz-card {
    background: var(--ft-color-bg-surface) !important;
    border: 1px solid var(--ft-color-border) !important;
    color: var(--ft-color-text-primary) !important;
    box-shadow: var(--ft-shadow-sm, none) !important;
}

.hud-layout .rz-grid-table tbody tr:nth-child(even) td,
.ft-radzen-scope .rz-grid-table tbody tr:nth-child(even) td,
.ft-data-table tbody tr:nth-child(even) td {
    background: var(--ft-table-row-alt) !important;
}

.hud-layout .rz-grid-table tbody tr:hover td,
.hud-layout .rz-datatable tbody tr:hover td,
.ft-radzen-scope .rz-grid-table tbody tr:hover td,
.hud-shell .rz-grid-table tbody tr:hover td,
.ft-data-table tbody tr:hover td {
    background: var(--ft-table-row-hover) !important;
}

.hud-layout .rz-grid-table tbody tr.rz-state-highlight td,
.ft-radzen-scope .rz-grid-table tbody tr.rz-state-highlight td {
    background: color-mix(in srgb, var(--ft-color-primary) 10%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--ft-color-primary);
}

.hud-layout .rz-grid-table .rz-cell-data,
.ft-radzen-scope .rz-grid-table .rz-cell-data {
    color: var(--ft-color-text-primary) !important;
}

/* ─── Filter row — unified institutional bar (kill Radzen clutter) ─── */

.hud-layout .rz-grid-table thead .rz-cell-filter,
.hud-layout .rz-grid-table thead .rz-cell-filter-content,
.hud-layout .rz-data-grid .rz-cell-filter,
.hud-layout .rz-data-grid .rz-cell-filter-content,
.hud-layout .rz-filter-row,
.hud-layout .rz-advanced-filter,
.ft-radzen-scope .rz-cell-filter,
.ft-radzen-scope .rz-cell-filter-content,
.ft-radzen-scope .rz-filter-row {
    background: var(--ft-table-filter-bg, var(--ft-color-bg-inset)) !important;
    border-color: var(--ft-table-filter-border, var(--ft-table-border)) !important;
    min-height: var(--ft-table-filter-height);
    padding: var(--ft-space-1) var(--ft-space-2) !important;
}

.hud-layout .rz-cell-filter-content,
.ft-radzen-scope .rz-cell-filter-content {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    min-height: var(--ft-table-filter-height);
}

.hud-layout .rz-cell-filter-content .rz-textbox,
.hud-layout .rz-cell-filter-content input.rz-inputtext,
.hud-layout .rz-filter .rz-textbox,
.ft-radzen-scope .rz-cell-filter-content .rz-textbox,
.ft-radzen-scope .rz-cell-filter-content input.rz-inputtext {
    height: calc(var(--ft-table-filter-height) - 0.35rem) !important;
    min-height: calc(var(--ft-table-filter-height) - 0.35rem) !important;
    background: var(--ft-color-bg-input) !important;
    border: 1px solid var(--ft-search-border) !important;
    border-radius: var(--ft-radius-sm) !important;
    color: var(--ft-color-text-primary) !important;
    font-size: var(--ft-font-size-sm) !important;
    padding: 0 var(--ft-space-2) !important;
    box-shadow: none !important;
}

.hud-layout .rz-cell-filter-content .rz-textbox::placeholder,
.hud-layout .rz-cell-filter-content input.rz-inputtext::placeholder,
.ft-radzen-scope .rz-cell-filter-content input::placeholder {
    color: var(--ft-color-text-muted) !important;
    opacity: 0.85;
}

.hud-layout .rz-cell-filter-content .rz-textbox:focus,
.hud-layout .rz-cell-filter-content input.rz-inputtext:focus,
.ft-radzen-scope .rz-cell-filter-content input:focus {
    border-color: var(--ft-search-focus-border) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ft-color-primary) 16%, transparent) !important;
    outline: none !important;
}

/* Hide odd clear/X/dash filter chrome; keep functional clear as subtle icon */
.hud-layout .rz-cell-filter .rz-grid-filter-clear,
.hud-layout .rz-cell-filter .rz-clear,
.hud-layout .rz-cell-filter-content > .rzi:not(.rzi-search):not([class*="arrow"]),
.ft-radzen-scope .rz-cell-filter .rz-grid-filter-clear {
    color: var(--ft-color-text-muted) !important;
    opacity: 0.55;
    font-size: 0.95rem !important;
}

.hud-layout .rz-cell-filter .rz-grid-filter-clear:hover,
.ft-radzen-scope .rz-cell-filter .rz-grid-filter-clear:hover {
    color: var(--ft-color-primary) !important;
    opacity: 1;
}

/* Kill dark skeleton bars under light theme */
.hud-layout .rz-skeleton,
.hud-layout .rz-datatable-loading,
.ft-radzen-scope .rz-skeleton {
    background: var(--ft-color-bg-inset-soft) !important;
}

.hud-layout .rz-datatable-emptymessage,
.hud-layout .rz-datatable-emptymessage-row > td,
.ft-radzen-scope .rz-datatable-emptymessage-row > td {
    background: var(--ft-color-bg-surface) !important;
    color: var(--ft-color-text-muted) !important;
    padding: var(--ft-space-7) var(--ft-space-4) !important;
    text-align: center;
}

/* ─── Badges / pills in cells ─── */

.hud-layout .rz-grid-table .rz-badge,
.hud-layout .rz-grid-table .hud-pill,
.hud-layout .rz-grid-table .ft-badge,
.hud-layout .rz-grid-table .status-badge,
.ft-radzen-scope .rz-grid-table .rz-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 1.5rem;
    padding: 0.15rem 0.65rem !important;
    border-radius: 999px !important;
    font-size: var(--ft-font-size-xs) !important;
    font-weight: var(--ft-font-weight-semibold) !important;
    line-height: 1.2;
    vertical-align: middle;
}

.hud-layout .rz-badge.rz-badge-success,
.ft-radzen-scope .rz-badge.rz-badge-success {
    background: var(--ft-badge-success-bg) !important;
    color: var(--ft-badge-success-text) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-success) 35%, transparent);
}

.hud-layout .rz-badge.rz-badge-danger,
.ft-radzen-scope .rz-badge.rz-badge-danger {
    background: var(--ft-badge-danger-bg) !important;
    color: var(--ft-badge-danger-text) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-danger) 35%, transparent);
}

.hud-layout .rz-badge.rz-badge-warning,
.ft-radzen-scope .rz-badge.rz-badge-warning {
    background: var(--ft-badge-warning-bg) !important;
    color: var(--ft-badge-warning-text) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-warning) 35%, transparent);
}

.hud-layout .rz-badge.rz-badge-info,
.hud-layout .rz-badge.rz-badge-primary,
.ft-radzen-scope .rz-badge.rz-badge-info {
    background: var(--ft-badge-primary-bg) !important;
    color: var(--ft-badge-primary-text) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-primary) 30%, transparent);
}

/* ─── Row action button group ─── */

.ft-row-actions,
.hud-layout .rz-grid-table td .rz-stack.rz-horizontal,
.ft-radzen-scope .rz-grid-table td .rz-stack.rz-horizontal {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: var(--ft-table-action-gap) !important;
}

.hud-layout .rz-grid-table .rz-button,
.hud-layout .rz-grid-table .rz-button.rz-button-sm,
.hud-layout .rz-grid-table .rz-button.rz-button-xs,
.hud-layout .rz-grid-table .rz-button.rz-button-md,
.ft-radzen-scope .rz-grid-table .rz-button {
    min-width: var(--ft-table-action-size) !important;
    min-height: var(--ft-table-action-size) !important;
    height: var(--ft-table-action-size) !important;
    padding: 0 var(--ft-space-2) !important;
    border-radius: var(--ft-radius-sm) !important;
    font-size: var(--ft-font-size-xs) !important;
    font-weight: var(--ft-font-weight-semibold) !important;
    box-shadow: none !important;
    transition: background var(--ft-transition-fast), border-color var(--ft-transition-fast), color var(--ft-transition-fast);
}

.hud-layout .rz-grid-table .rz-button.rz-button-icon-only,
.ft-radzen-scope .rz-grid-table .rz-button.rz-button-icon-only {
    width: var(--ft-table-action-size) !important;
    padding: 0 !important;
}

.hud-layout .rz-grid-table .rz-button .rzi,
.ft-radzen-scope .rz-grid-table .rz-button .rzi {
    font-size: 1.1rem !important;
    margin: 0 !important;
}

.hud-layout .rz-grid-table .rz-button.rz-light,
.hud-layout .rz-grid-table .rz-button.rz-secondary,
.hud-layout .rz-grid-table .rz-button.rz-button-light,
.ft-radzen-scope .rz-grid-table .rz-button.rz-light,
.ft-radzen-scope .rz-grid-table .rz-button.rz-secondary {
    background: var(--ft-btn-secondary-bg) !important;
    border: 1px solid var(--ft-color-border) !important;
    color: var(--ft-btn-secondary-text) !important;
}

.hud-layout .rz-grid-table .rz-button.rz-light:hover,
.hud-layout .rz-grid-table .rz-button.rz-secondary:hover,
.ft-radzen-scope .rz-grid-table .rz-button.rz-light:hover {
    border-color: var(--ft-color-border-strong) !important;
    background: color-mix(in srgb, var(--ft-color-primary) 12%, transparent) !important;
    color: var(--ft-color-primary) !important;
}

.hud-layout .rz-grid-table .rz-button.rz-primary,
.ft-radzen-scope .rz-grid-table .rz-button.rz-primary {
    background: var(--ft-btn-secondary-bg) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-primary) 35%, transparent) !important;
    color: var(--ft-color-primary) !important;
}

.hud-layout .rz-grid-table .rz-button.rz-success,
.ft-radzen-scope .rz-grid-table .rz-button.rz-success {
    background: var(--ft-color-success-bg) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-success) 35%, transparent) !important;
    color: var(--ft-color-success-text) !important;
}

.hud-layout .rz-grid-table .rz-button.rz-warning,
.ft-radzen-scope .rz-grid-table .rz-button.rz-warning {
    background: var(--ft-color-warning-bg) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-warning) 35%, transparent) !important;
    color: var(--ft-color-warning-text) !important;
}

.hud-layout .rz-grid-table .rz-button.rz-danger,
.ft-radzen-scope .rz-grid-table .rz-button.rz-danger {
    background: var(--ft-color-danger-bg) !important;
    border: 1px solid color-mix(in srgb, var(--ft-color-danger) 35%, transparent) !important;
    color: var(--ft-color-danger-text) !important;
}

.hud-layout .rz-grid-table .rz-button:hover,
.ft-radzen-scope .rz-grid-table .rz-button:hover {
    filter: brightness(1.03);
}

/* ─── Paginator ─── */

.hud-layout .rz-paginator,
.hud-layout .rz-pager,
.ft-radzen-scope .rz-paginator,
.ft-radzen-scope .rz-pager {
    background: var(--ft-color-bg-elevated) !important;
    border: 1px solid var(--ft-table-border) !important;
    border-top: none !important;
    color: var(--ft-color-text-secondary) !important;
    padding: var(--ft-space-2) var(--ft-space-4) !important;
    font-size: var(--ft-font-size-xs) !important;
}

.hud-layout .rz-paginator-element,
.hud-layout .rz-paginator-page,
.ft-radzen-scope .rz-paginator-element {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--ft-color-text-secondary) !important;
    border-radius: var(--ft-radius-sm) !important;
    min-width: 2rem;
    transition: all var(--ft-transition-fast);
}

.hud-layout .rz-paginator-element:hover:not(.rz-state-disabled),
.hud-layout .rz-paginator-page:hover {
    background: color-mix(in srgb, var(--ft-color-primary) 10%, transparent) !important;
    border-color: var(--ft-color-border) !important;
    color: var(--ft-color-primary) !important;
}

.hud-layout .rz-paginator-page.rz-state-active,
.hud-layout .rz-pager-element.rz-state-active,
.ft-radzen-scope .rz-paginator-page.rz-state-active {
    background: color-mix(in srgb, var(--ft-color-primary) 16%, transparent) !important;
    border-color: var(--ft-color-border-strong) !important;
    color: var(--ft-color-primary) !important;
    box-shadow: none !important;
}

.hud-layout .rz-paginator-summary,
.ft-radzen-scope .rz-paginator-summary {
    color: var(--ft-color-text-muted) !important;
}

/* ─── Frozen cells ─── */

.hud-layout .rz-frozen-cell,
.ft-radzen-scope .rz-frozen-cell {
    background: var(--ft-color-bg-elevated) !important;
    box-shadow: 2px 0 8px color-mix(in srgb, var(--ft-color-text-primary) 8%, transparent);
}

/* ─── Native / custom HTML tables ─── */

.ft-data-table table,
.hud-layout .ft-data-table,
.hud-layout .ft-hud-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.hud-layout .ft-data-table th,
.hud-layout .ft-hud-table thead th,
.hud-layout .ft-data-table__ th {
    background: var(--ft-table-header-bg) !important;
    color: var(--ft-color-text-secondary) !important;
    font-size: var(--ft-font-size-xs) !important;
    font-weight: var(--ft-font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--ft-table-header-py) var(--ft-table-cell-px) !important;
    border-bottom: 1px solid var(--ft-color-border-strong);
}

.hud-layout .ft-data-table td,
.hud-layout .ft-hud-table tbody td {
    padding: var(--ft-table-cell-py) var(--ft-table-cell-px) !important;
    border-bottom: 1px solid var(--ft-table-border) !important;
    color: var(--ft-color-text-primary);
    font-size: var(--ft-font-size-sm);
}

.hud-layout .ft-data-table tbody tr:hover,
.hud-layout .ft-hud-table tbody tr:hover,
.hud-layout .ft-data-table__row:hover {
    background: var(--ft-table-row-hover) !important;
}

/* ─── Density already driven by --ft-table-* tokens on html[data-ft-density] ─── */

/* ─── Card wrappers that host grids ─── */

.hud-layout .hud-card:has(.rz-data-grid),
.hud-layout .hud-card:has(.rz-datatable),
.hud-layout .ft-bracket-card:has(.rz-data-grid) {
    padding: 0 !important;
    overflow: hidden;
}

.hud-layout .hud-card:has(.rz-data-grid) > .hud-panel-title,
.hud-layout .hud-card:has(.rz-datatable) > div:first-child:has(.hud-panel-title) {
    padding: var(--ft-space-4);
    margin: 0;
    border-bottom: 1px solid var(--ft-table-border);
    background: var(--ft-table-filter-bg, var(--ft-color-bg-inset));
}