/* Estilos para el botón "+" de añadir campo (estilo Airtable) */
.add-field-column {
    background: var(--rz-base-100);
    border-left: 1px dashed var(--rz-base-300);
}

.add-field-btn {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.add-field-btn:hover {
    opacity: 1;
}

.add-field-column:hover .add-field-btn {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEMA FIELD LIST - Estilo Airtable para configuración de campos
   ═══════════════════════════════════════════════════════════════════════════ */

.schema-field-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.schema-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.schema-field-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--rz-base-background-color);
    border-bottom: 1px solid var(--rz-base-200);
    transition: background-color 0.15s ease;
}

.schema-field-item:hover {
    background: var(--rz-base-100);
}

.schema-field-item:last-of-type {
    border-bottom: none;
}

.schema-field-drag-handle {
    cursor: grab;
    color: var(--rz-text-disabled-color);
    padding: 0.25rem;
    border-radius: var(--rz-border-radius);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.schema-field-drag-handle:hover {
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-200);
}

.schema-field-drag-handle:active {
    cursor: grabbing;
}

.schema-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--rz-border-radius);
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.schema-field-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.schema-field-name {
    font-weight: 500;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schema-field-type {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    text-transform: capitalize;
}

.schema-field-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.schema-field-item:hover .schema-field-actions {
    opacity: 1;
}

.schema-add-field-row {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--rz-base-100);
    color: var(--rz-primary);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s ease;
    border-top: 1px dashed var(--rz-base-300);
}

.schema-add-field-row:hover {
    background: var(--rz-primary-lighter);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIELD TYPES GRID - Grid de tipos de campo disponibles
   ═══════════════════════════════════════════════════════════════════════════ */

.field-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
}

.field-type-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.field-type-chip:hover {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.field-type-chip .rzi {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SMARTSHEET-STYLE GRID STYLES
   Inline cell editing experience similar to Smartsheet/Airtable
   ═══════════════════════════════════════════════════════════════════════════ */

/* Cells look editable - subtle hover effect */
.smartsheet-grid .rz-data-row td {
    cursor: cell;
    transition: background-color 0.1s ease;
}

.smartsheet-grid .rz-data-row:not(.rz-state-highlight) td:hover {
    background-color: var(--rz-base-200);
}

/* Active/editing row highlight */
.smartsheet-grid .rz-data-row.rz-state-highlight {
    background-color: var(--rz-primary-lighter) !important;
}

.smartsheet-grid .rz-data-row.rz-state-highlight td {
    cursor: text;
}

/* Compact cell content */
.smartsheet-grid .rz-cell-data {
    min-height: 32px;
    display: flex;
    align-items: center;
}

/* Edit mode inputs - cleaner look */
.smartsheet-grid .rz-data-row.rz-state-highlight .rz-textbox,
.smartsheet-grid .rz-data-row.rz-state-highlight .rz-dropdown,
.smartsheet-grid .rz-data-row.rz-state-highlight .rz-calendar,
.smartsheet-grid .rz-data-row.rz-state-highlight .rz-spinner {
    border-radius: 2px;
    min-height: 28px;
}

.smartsheet-grid .rz-data-row.rz-state-highlight input {
    padding: 0.25rem 0.5rem;
}

/* Frozen action column styling */
.smartsheet-grid td.rz-frozen-cell-right {
    background-color: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-grid-cell-border);
}

.smartsheet-grid .rz-data-row.rz-state-highlight td.rz-frozen-cell-right {
    background-color: var(--rz-primary-lighter);
}

/* Boolean checkbox centering */
.smartsheet-grid .rz-checkbox {
    justify-content: center;
}

/* Rating stars */
.smartsheet-grid .rz-rating {
    gap: 0.1rem;
}

/* Badge styling in cells */
.smartsheet-grid .rz-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

/* Header styling */
.smartsheet-grid .rz-datatable-thead th {
    background-color: var(--rz-base-200);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Row number column (if present) */
.smartsheet-grid td:first-child {
    color: var(--rz-text-tertiary-color);
    font-size: 0.75rem;
}

/* Loading overlay */
.smartsheet-grid .rz-datatable-loading-overlay {
    background-color: rgba(255, 255, 255, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELL-LEVEL EDITING - Double-click inline editing
   ═══════════════════════════════════════════════════════════════════════════ */

/* Editable cell wrapper */
.cell-content {
    width: 100%;
    min-height: 28px;
    display: flex;
    align-items: center;
    padding: 2px 4px;
    border-radius: 2px;
}

/* Hover effect on editable cells */
.cell-content.cell-editable {
    cursor: cell;
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

.cell-content.cell-editable:hover {
    background-color: var(--rz-base-200);
}

/* Cell in edit mode - blue focus ring */
.cell-editor {
    width: 100%;
    padding: 0;
}

.cell-editor .cell-input {
    min-height: 28px !important;
    border-radius: 2px !important;
}

.cell-editor .rz-textbox,
.cell-editor .rz-spinner,
.cell-editor .rz-dropdown {
    box-shadow: 0 0 0 2px var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

.cell-editor .rz-calendar .rz-inputtext {
    box-shadow: 0 0 0 2px var(--rz-primary) !important;
    border-color: var(--rz-primary) !important;
}

/* Textarea editor - larger */
.cell-editor-textarea .rz-textarea {
    min-height: 60px;
    resize: vertical;
}

/* Boolean checkbox centering */
.cell-editor-bool {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rating editor */
.cell-editor-rating {
    display: flex;
    align-items: center;
}

/* Dropdown in cell - ensure proper dropdown width */
.cell-dropdown.rz-dropdown {
    width: 100% !important;
}

.cell-dropdown .rz-dropdown-panel {
    min-width: 150px;
}

/* Saving state - subtle animation */
.cell-saving {
    opacity: 0.7;
    pointer-events: none;
}

.cell-saving::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: cell-saving-shimmer 1s infinite;
}

@keyframes cell-saving-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Empty cell placeholder */
.cell-content:empty::after,
.cell-content .cell-empty {
    content: '-';
    color: var(--rz-text-disabled-color);
    font-style: italic;
}

/* Type-specific cell styling */
.cell-type-boolean {
    justify-content: center;
}

.cell-type-integer,
.cell-type-decimal,
.cell-type-currency {
    font-family: var(--rz-body-font-family);
    font-variant-numeric: tabular-nums;
}

.cell-type-date,
.cell-type-datetime {
    font-size: 0.875rem;
}

.cell-type-url a,
.cell-type-email a,
.cell-type-phone a {
    color: var(--rz-primary);
    text-decoration: none;
}

.cell-type-url a:hover,
.cell-type-email a:hover,
.cell-type-phone a:hover {
    text-decoration: underline;
}

/* Truncate long text */
.cell-type-text span,
.cell-type-textarea span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ──────────────────────────────────────────────────────────
   Grouped view (manual renderer, read-only)
   ────────────────────────────────────────────────────────── */
.grouped-view-root {
    padding: 0.5rem;
    overflow: auto;
    height: 100%;
}

.grouped-section {
    margin-bottom: 1rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    overflow: hidden;
}

.grouped-section.grouped-level-1 {
    margin-left: 1rem;
}

.grouped-section.grouped-level-2 {
    margin-left: 2rem;
}

.grouped-header {
    padding: 0.5rem 1rem;
    background: var(--rz-base-100);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grouped-header .grouped-field {
    color: var(--rz-text-secondary-color);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.grouped-header .count-badge {
    margin-left: auto;
    background: var(--rz-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.grouped-rows {
    background: var(--rz-base);
}

.grouped-table {
    width: 100%;
    border-collapse: collapse;
}

.grouped-table th,
.grouped-table td {
    padding: 0.35rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--rz-base-200);
    font-size: 0.85rem;
}

.grouped-table th {
    background: var(--rz-base-50);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIVOT TABLE - Excel-style cross-tab renderer (read-only view).
   ═══════════════════════════════════════════════════════════════════════════ */

.pivot-wrapper {
    overflow: auto;
    max-height: 100%;
    padding: 0.25rem;
}

.pivot-table {
    width: auto;
    border-collapse: collapse;
    font-size: 0.78rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.pivot-table th,
.pivot-table td {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--rz-base-200);
    text-align: right;
    white-space: nowrap;
    height: 24px;
    box-sizing: border-box;
}

.pivot-table th {
    background: var(--rz-base-100);
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
    font-size: 0.76rem;
}

.pivot-table th.pivot-row-header {
    text-align: left;
    background: var(--rz-base-50);
    font-weight: 500;
    position: sticky;
    left: 0;
    z-index: 1;
    font-size: 0.78rem;
    max-width: 240px;
}

.pivot-table th.pivot-corner {
    background: var(--rz-base-200);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
}

.pivot-table .pivot-col-header {
    background: var(--rz-base-100);
    max-width: 140px;
}

.pivot-table .pivot-total-row {
    background: var(--rz-primary-lighter);
    font-weight: 700;
}

.pivot-table .pivot-total-col {
    background: var(--rz-primary-lighter);
    font-weight: 700;
}

.pivot-table .pivot-grand-total {
    background: var(--rz-primary);
    color: white;
    font-weight: 700;
}

.pivot-table .pivot-rowfield-names th {
    background: var(--rz-base-200);
    font-style: italic;
}

/* ── Pivot collapse / expand toggles ─────────────────────────────────────── */
.pivot-row-header-content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pivot-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--rz-base-400);
    border-radius: 2px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.pivot-toggle:hover {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border-color: var(--rz-primary);
}

.pivot-toggle-placeholder {
    border: none;
    background: transparent;
    cursor: default;
    visibility: hidden;
}

/* ── Pivot drill-through (leaf "Show details") ───────────────────────────── */
.pivot-detail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--rz-text-tertiary-color);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.pivot-detail-toggle:hover {
    color: var(--rz-primary);
}

.pivot-detail-row > th,
.pivot-detail-row > td {
    background: var(--rz-base-background-color);
    font-style: italic;
    color: var(--rz-text-secondary-color);
    font-size: 0.74rem;
    height: 22px;
}

.pivot-detail-row > th.pivot-row-header {
    font-weight: 400;
}

.pivot-detail-bullet {
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.pivot-row-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pivot-table .pivot-row-group > .pivot-row-header {
    background: var(--rz-base-100);
    font-weight: 600;
}

.pivot-table td.pivot-subtotal {
    background: var(--rz-base-100);
    font-weight: 600;
}

/* Ensure the row headers stay sticky at every level. */
.pivot-table-collapsible th.pivot-row-header {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* ── Compact layout (Power BI-style) ──────────────────────────────────────
   A single row-header column shared across every row-field level; hierarchy
   is conveyed via padding-left based on the node level (see data-level).
   The toggle (+/-) and placeholder keep the same column-aligned look.
*/
.pivot-table.layout-compact th.pivot-row-header-compact {
    text-align: left;
    min-width: 220px;
    max-width: 360px;
}

.pivot-table.layout-compact .pivot-row-label-compact {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.pivot-table.layout-compact .pivot-row-label-compact[data-level="0"] {
    padding-left: 0.4rem;
    font-weight: 600;
}

.pivot-table.layout-compact .pivot-row-label-compact[data-level="1"] {
    padding-left: 1.3rem;
    font-weight: 500;
}

.pivot-table.layout-compact .pivot-row-label-compact[data-level="2"] {
    padding-left: 2.2rem;
}

.pivot-table.layout-compact .pivot-row-label-compact[data-level="3"] {
    padding-left: 3.1rem;
}

.pivot-table.layout-compact .pivot-row-label-compact[data-level="4"] {
    padding-left: 4.0rem;
}

.pivot-table.layout-compact .pivot-row-label-compact[data-level="5"] {
    padding-left: 4.9rem;
}

/* Deeper levels inherit the inline style calc — the data-level attrs above
   are just overrides when the attribute-selector matches; every node also
   carries an inline padding-left so levels > 5 keep indenting. */

/* ═══════════════════════════════════════════════════════════════════════════
   SAVED VIEW SELECTOR — dropdown clipping fix inside .smartsheet-toolbar.
   The default Radzen dropdown leaves too little vertical breathing room
   inside our 36px-tall toolbar; the label ends up clipped top/bottom.
   ═══════════════════════════════════════════════════════════════════════════ */
.smartsheet-toolbar .rz-dropdown {
    min-height: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
}

.smartsheet-toolbar .rz-dropdown .rz-dropdown-label {
    line-height: 26px;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smartsheet-toolbar .rz-dropdown .rz-dropdown-trigger {
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLE VIEW EDITOR DIALOG — Excel-style pivot field pane
   ═══════════════════════════════════════════════════════════════════════════ */

.view-editor-dialog-excel {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1rem;
    min-height: 420px;
    max-height: 60vh;
}

/* Wider pivot workspace when hosted inside the DetailDialogLayout main area. */
.view-editor-dialog-excel-lg {
    grid-template-columns: 280px 1fr;
    min-height: 460px;
    max-height: 62vh;
}

/* ── Sidebar fields (label + control) ──────────────────────────────────────── */
.view-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.view-editor-field:last-child {
    margin-bottom: 0;
}

.view-editor-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rz-text-tertiary-color);
    margin: 0;
}

.view-editor-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--rz-text-color);
    cursor: pointer;
}

.view-editor-inline-check span {
    -webkit-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ── Help box in the sidebar ──────────────────────────────────────────────── */
.view-editor-help-box {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: rgba(var(--rz-info-rgb, 66, 133, 244) / 0.08);
    border: 1px solid rgba(var(--rz-info-rgb, 66, 133, 244) / 0.25);
    border-radius: 8px;
}

.view-editor-help-text {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--rz-text-secondary-color);
}

/* ── Grid ready-to-save placeholder ───────────────────────────────────────── */
.view-editor-grid-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 3rem 1.5rem;
    background: var(--rz-base-50);
    border: 1px dashed var(--rz-base-300);
    border-radius: 12px;
    min-height: 240px;
}

.view-editor-fields-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    min-height: 0;
}

.view-editor-panel-title {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--rz-text-secondary-color);
    margin: 0;
}

.view-editor-fields-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-right: 0.25rem;
}

.view-editor-field-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    cursor: grab;
    -webkit-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.view-editor-field-chip:hover {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
}

.view-editor-field-chip:active {
    cursor: grabbing;
}

.view-editor-field-icon {
    color: var(--rz-primary);
    flex-shrink: 0;
    font-size: 1rem;
}

.view-editor-field-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--rz-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-editor-field-type {
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    text-transform: capitalize;
    flex-shrink: 0;
}

.view-editor-fields-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.5rem 0.5rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    text-align: center;
}

/* ── Zones (right panel) ─────────────────────────────────────────────────── */
.view-editor-zones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
}

.view-editor-zone {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-background-color);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.view-editor-zone[data-drag-over="true"] {
    border-color: var(--rz-primary);
    border-style: dashed;
    background: var(--rz-primary-lighter);
}

.view-editor-zone-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-300);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.view-editor-zone-header .rzi {
    color: var(--rz-primary);
}

.view-editor-zone-count {
    margin-left: auto;
    font-size: 0.7rem;
    background: var(--rz-base-300);
    color: var(--rz-text-color);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: normal;
}

.view-editor-zone-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.6rem 0.75rem;
    min-height: 56px;
}

.view-editor-zone[data-empty="true"] .view-editor-zone-body {
    background-image: repeating-linear-gradient(
        45deg,
        var(--rz-base-50),
        var(--rz-base-50) 6px,
        transparent 6px,
        transparent 12px
    );
    align-items: center;
    justify-content: center;
}

.view-editor-zone-hint {
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    font-style: italic;
}

.view-editor-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 0.4rem 0.75rem;
    background: var(--rz-primary-lighter);
    border: 1px solid var(--rz-primary);
    border-radius: 18px;
    font-size: 0.85rem;
    color: var(--rz-text-color);
    cursor: grab;
    -webkit-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    min-height: 38px;
}

.view-editor-zone-chip:active {
    cursor: grabbing;
}

.view-editor-zone-chip > .rzi {
    color: var(--rz-primary);
    font-size: 0.95rem;
}

.view-editor-zone-chip-name {
    font-weight: 500;
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-editor-zone-chip-agg {
    min-height: 32px;
    height: 32px;
    min-width: 90px;
    font-size: 0.8rem;
}

.view-editor-zone-chip-agg .rz-dropdown,
.view-editor-zone-chip-agg.rz-dropdown {
    min-height: 32px;
    height: 32px;
    font-size: 0.8rem;
    line-height: 1.2;
}

.view-editor-zone-chip-agg .rz-dropdown .rz-dropdown-trigger,
.view-editor-zone-chip-agg.rz-dropdown .rz-dropdown-trigger {
    height: 30px;
}

.view-editor-zone-chip-agg .rz-dropdown-label,
.view-editor-zone-chip-agg.rz-dropdown .rz-dropdown-label {
    padding: 0 0.5rem;
    line-height: 30px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-editor-zone-chip-filter {
    min-height: 32px;
    height: 32px;
    min-width: 120px;
    font-size: 0.8rem;
}

.view-editor-zone-chip-filter input,
.view-editor-zone-chip-filter.rz-textbox {
    min-height: 32px;
    height: 32px;
    padding: 0 0.5rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

.view-editor-zone-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    padding: 0;
}

.view-editor-zone-chip-remove:hover {
    background: var(--rz-danger);
    color: white;
}

.view-editor-zone-chip-remove .rzi {
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA TABLES SHELL (rail + side panel)
   Layout building blocks for the Smartsheet-style shell:
     [ grid (flex:1) | side-panel (var width) | rail (48px, always visible) ]
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-shell {
    /* Flex-grow inside .data-layout so the shell always fills the width
       the sidebar leaves free. Without flex:1 the shell would collapse to
       content width and either overlay or leave a gap next to the sidebar. */
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: hidden;
}

.dt-shell-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ── Icon rail (vertical, always 48px) ────────────────────────────────── */
.dt-rail {
    flex: 0 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    background: var(--rz-base-50);
    border-left: 1px solid var(--rz-base-200);
    border-right: 1px solid var(--rz-base-200);
    overflow-y: auto;
}

.dt-rail-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--rz-base-200);
}

.dt-rail-group:last-child {
    border-bottom: none;
}

.dt-rail-btn {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dt-rail-btn:hover:not([disabled]) {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.dt-rail-btn.active {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.dt-rail-btn.active::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--rz-primary);
    border-radius: 0 2px 2px 0;
}

.dt-rail-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Side panel (to the left of the rail, between grid and rail) ──────── */
.dt-side-panel {
    flex: 0 0 var(--panel-width, 400px);
    min-width: 320px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    background: var(--rz-base-background-color);
    border-left: 1px solid var(--rz-base-200);
    position: relative;
    animation: dt-slide-in 200ms ease-out;
}

@keyframes dt-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Panel header mirrors .smartsheet-toolbar so the rail panels feel like a
   second toolbar strip glued to the right side of the grid — same height,
   same muted background, same border, same divider rhythm. Title is kept
   small-caps tracking to read as a section label instead of a page title. */
.dt-side-panel-header {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    background: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-200);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
}

.dt-side-panel-title {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-side-panel-header > .rzi {
    color: var(--rz-primary);
    font-size: 16px !important;
}

.dt-side-panel-header .close-btn {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    padding: 0.25rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dt-side-panel-header .close-btn:hover {
    background: var(--rz-base-200);
    color: var(--rz-text-color);
}

.dt-side-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
}

/* Chat body variant: the docked FloatingChat already owns the padding, the
   scroll container and its own toolbar-like header, so the surrounding wrapper
   must behave as a transparent slot instead of adding a second padding + its
   own scroll. We detect this via :has() so only the AI rail panel gets the
   override — other panels keep the default spacing. */
.dt-side-panel-body:has(> .floating-chat-container) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Docked chat chrome overrides: strip the position:fixed popover look so the
   chat flows inside the rail panel slot. Header is retouched to match the
   Excel-style toolbar aesthetic (flat bg, smaller height, subtle bottom
   border) instead of the floating widget's card chrome. */
.dt-docked-chat {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    inset: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--rz-base-background-color);
}

.dt-docked-chat .floating-chat-header {
    min-height: 34px;
    padding: 3px 8px;
    background: var(--rz-base-50);
    border-bottom: 1px solid var(--rz-base-200);
}

.dt-docked-chat .floating-chat-header .rz-text {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rz-text-secondary-color);
}

.dt-docked-chat .floating-chat-header .rz-button {
    height: 28px;
    min-width: 28px;
}

.dt-side-panel-footer {
    flex: 0 0 auto;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--rz-base-200);
    background: var(--rz-base-50);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.dt-side-panel-resizer {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 1;
}

.dt-side-panel-resizer:hover {
    background: var(--rz-primary);
}

/* ── Stub panels ('Coming soon') ──────────────────────────────────────── */
.dt-panel-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.dt-panel-stub .dt-panel-stub-icon {
    font-size: 3rem;
    color: var(--rz-text-disabled-color);
}

.dt-panel-stub .dt-panel-stub-title {
    font-weight: 600;
    color: var(--rz-text-color);
    font-size: 1rem;
}

.dt-panel-stub .dt-panel-stub-caption {
    font-size: 0.8125rem;
    max-width: 260px;
}

/* ── Mobile: bottom sheet ────────────────────────────────────────────── */
@media (max-width: 960px) {
    .dt-side-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 10vh;
        flex: none;
        width: auto !important;
        max-width: none;
        z-index: 1000;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
        animation: dt-slide-up 200ms ease-out;
        border-left: none;
        border-top: 1px solid var(--rz-base-200);
    }

    @keyframes dt-slide-up {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .dt-side-panel-resizer {
        display: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Inline Group-By popover (Popovers/GroupByPopover.razor)
   Lightweight floating builder anchored to the toolbar button. Backdrop
   catches outside clicks; the card itself stops propagation.
   ═══════════════════════════════════════════════════════════════════════════ */
.dt-group-by-popover-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1050;
}

.dt-group-by-popover {
    position: fixed;
    z-index: 1200;
    min-width: 340px;
    background: var(--rz-panel-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    animation: dt-group-by-fade 120ms ease-out;
}

@keyframes dt-group-by-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dt-group-by-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-200);
}

.dt-group-by-popover-title {
    font-weight: 600;
    font-size: 0.85rem;
}

.dt-group-by-popover-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0.15rem;
    display: inline-flex;
    align-items: center;
    color: var(--rz-text-tertiary-color);
}

.dt-group-by-popover-close:hover {
    color: var(--rz-text-color);
}

.dt-group-by-popover-body {
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 320px;
    overflow-y: auto;
}

.dt-group-by-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.dt-group-by-select {
    height: 30px;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-input-background-color);
    font-size: 0.82rem;
    padding: 0 0.4rem;
}

.dt-group-by-field {
    flex: 1 1 auto;
    min-width: 120px;
}

.dt-group-by-dir {
    width: 110px;
    flex: 0 0 110px;
}

.dt-group-by-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--rz-base-300);
    background: transparent;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rz-text-tertiary-color);
}

.dt-group-by-remove:hover {
    background: var(--rz-danger-lighter);
    border-color: var(--rz-danger);
    color: var(--rz-danger);
}

.dt-group-by-add {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px dashed var(--rz-base-300);
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--rz-primary);
}

.dt-group-by-add:hover:not(:disabled) {
    background: var(--rz-primary-lighter);
}

.dt-group-by-add:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.dt-group-by-popover-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--rz-base-200);
}

.dt-group-by-save-view,
.dt-group-by-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--rz-base-300);
    background: transparent;
    border-radius: 4px;
    padding: 0.35rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
}

.dt-group-by-save-view:hover:not(:disabled) {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.dt-group-by-save-view:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.dt-group-by-close-btn:hover {
    background: var(--rz-base-100);
}

/* Wrapper so the popover can anchor absolutely relative to the toolbar button. */
.dt-group-by-anchor {
    position: relative;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI CHAT PANEL — "Ask the table"  (C15)
   Panel scoped to the DynamicTableAgent. All colors pulled from theme.css
   vars so the panel follows the portal palette without hex hardcoding.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-ai-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.5rem;
}

.dt-ai-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0.5rem;
}

.dt-ai-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--rz-text-secondary-color);
}

.dt-ai-empty-icon {
    display: block;
    font-size: 36px;
    margin-bottom: 0.5rem;
    color: var(--rz-primary);
    opacity: 0.75;
}

.dt-ai-empty-text {
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 24rem;
    margin: 0 auto;
}

.dt-ai-msg {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.45;
    max-width: 100%;
    word-wrap: break-word;
}

.dt-ai-msg-user {
    align-self: flex-end;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary-darker, var(--rz-text-color));
    border: 1px solid var(--rz-primary-light);
    max-width: 85%;
}

.dt-ai-msg-user .dt-ai-user-bubble {
    white-space: pre-wrap;
}

.dt-ai-msg-assistant {
    align-self: flex-start;
    background: var(--rz-base-50);
    color: var(--rz-text-color);
    border: 1px solid var(--rz-base-200);
    max-width: 95%;
}

.dt-ai-suggested-view-card {
    margin-top: 0.5rem;
    border: 1px dashed var(--rz-primary);
    background: var(--rz-base-background-color);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.dt-ai-suggested-view-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--rz-primary);
}

.dt-ai-suggested-view-title .rzi {
    font-size: 18px;
}

.dt-ai-suggested-view-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--rz-text-color);
}

.dt-ai-suggested-view-type {
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-300);
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dt-ai-suggested-view-fields {
    width: 100%;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.dt-ai-suggested-view-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
}

.dt-ai-footer {
    border-top: 1px solid var(--rz-base-200);
    padding: 0.5rem 0.5rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    background: var(--rz-base-background-color);
    position: sticky;
    bottom: 0;
}

.dt-ai-footer-meta {
    display: flex;
    justify-content: flex-end;
}

.dt-ai-tokens {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
}

.dt-ai-input-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.dt-ai-input {
    flex: 1;
    resize: vertical;
    min-height: 60px;
    max-height: 160px;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    color: var(--rz-text-color);
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.dt-ai-input:focus {
    outline: none;
    border-color: var(--rz-primary);
    box-shadow: 0 0 0 3px var(--rz-primary-lighter);
}

.dt-ai-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.dt-ai-send {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KANBAN VIEW
   Board-style renderer with drag-drop cards between columns. Colors come from
   theme.css vars exclusively — no hardcoded hex values.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-kanban-wrapper {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    padding: 1rem;
    background: var(--rz-base-50);
    min-height: 100%;
    align-items: flex-start;
}

.dt-kanban-column {
    flex-shrink: 0;
    width: 280px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    padding: 0.75rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dt-kanban-column.drag-over {
    background: var(--rz-primary-lighter);
    border-color: var(--rz-primary);
}

.dt-kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--rz-text-color);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rz-base-200);
    margin-bottom: 0.5rem;
}

.dt-kanban-column-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.dt-kanban-column-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.dt-kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    flex: 1;
    min-height: 40px;
}

.dt-kanban-column-empty {
    height: 28px;
}

.dt-kanban-card {
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    padding: 0.6rem;
    cursor: grab;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.dt-kanban-card:hover {
    border-color: var(--rz-primary);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.dt-kanban-card:active {
    cursor: grabbing;
}

.dt-kanban-card.dragging {
    opacity: 0.5;
}

.dt-kanban-card-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--rz-text-color);
    margin-bottom: 0.3rem;
}

.dt-kanban-color-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--rz-primary);
    flex-shrink: 0;
}

.dt-kanban-card-field {
    display: flex;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    line-height: 1.4;
}

.dt-kanban-card-field-label {
    color: var(--rz-text-tertiary-color);
    flex-shrink: 0;
}

.dt-kanban-card-field-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-kanban-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    gap: 0.75rem;
}

.dt-kanban-empty .empty-icon {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE VIEW
   Simplified Gantt. Columns computed via CSS grid + --dt-timeline-col-width
   variable set inline so zoom controls change the cell width without inline
   <style> blocks. All colors go through theme variables.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-timeline-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    background: var(--rz-base-background-color);
    overflow: hidden;
}

.dt-timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--rz-base-50);
    flex-shrink: 0;
}

.dt-timeline-zoom-btn {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--rz-base-300);
    border-radius: 4px;
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dt-timeline-zoom-btn:hover {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

.dt-timeline-zoom-btn.active {
    background: var(--rz-primary);
    border-color: var(--rz-primary);
    color: var(--rz-base-background-color);
}

.dt-timeline-today-label {
    margin-left: auto;
    color: var(--rz-text-tertiary-color);
    font-size: 0.78rem;
}

.dt-timeline-scroll {
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.dt-timeline-grid {
    display: grid;
    width: max-content;
}

.dt-timeline-group-label {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 200px;
    background: var(--rz-base-50);
    color: var(--rz-text-color);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--rz-base-200);
    border-bottom: 1px solid var(--rz-base-100);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-timeline-header-corner {
    background: var(--rz-base-100);
    font-weight: 600;
    z-index: 3;
    border-bottom: 1px solid var(--rz-base-300);
    min-height: 32px;
}

.dt-timeline-header-cell {
    border-right: 1px solid var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-300);
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
    font-size: 0.72rem;
    text-align: center;
    padding: 0.35rem 0.15rem;
    white-space: nowrap;
    overflow: hidden;
}

.dt-timeline-header-cell.today {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-weight: 600;
}

.dt-timeline-row-track {
    position: relative;
    height: 40px;
    border-bottom: 1px solid var(--rz-base-100);
    background: var(--rz-base-background-color);
}

.dt-timeline-bar {
    position: absolute;
    top: 6px;
    height: 28px;
    background: var(--rz-primary);
    color: var(--rz-base-background-color);
    border-radius: 4px;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 500;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: outline 0.15s ease, transform 0.05s ease;
}

.dt-timeline-bar:hover {
    outline: 2px solid var(--rz-primary-dark);
}

.dt-timeline-bar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-timeline-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--rz-danger);
    z-index: 1;
    pointer-events: none;
}

.dt-timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    gap: 0.75rem;
}

.dt-timeline-empty .empty-icon {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR VIEW
   Month grid (7 columns × 6 rows). Colors come from theme.css vars exclusively.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-calendar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    background: var(--rz-base-background-color);
    outline: none;
}

.dt-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--rz-base-50);
    flex-shrink: 0;
}

.dt-calendar-toolbar-left,
.dt-calendar-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 120px;
}

.dt-calendar-toolbar-right {
    justify-content: flex-end;
}

.dt-calendar-nav-btn {
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-background-color);
    color: var(--rz-text-secondary-color);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dt-calendar-nav-btn:hover {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    border-color: var(--rz-primary);
}

.dt-calendar-month-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--rz-text-color);
    text-transform: capitalize;
}

.dt-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    flex: 1;
    background: var(--rz-base-background-color);
    overflow: auto;
    gap: 0;
}

.dt-calendar-dayname {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-100);
    border-bottom: 1px solid var(--rz-base-200);
    text-transform: capitalize;
}

.dt-calendar-day {
    border: 1px solid var(--rz-base-100);
    min-height: 100px;
    padding: 0.35rem;
    overflow: hidden;
    background: var(--rz-base-background-color);
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dt-calendar-day:hover {
    background: var(--rz-base-50);
}

.dt-calendar-day.today {
    background: var(--rz-primary-lighter);
}

.dt-calendar-day.other-month {
    opacity: 0.4;
}

.dt-calendar-day-number {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--rz-text-color);
    margin-bottom: 0.1rem;
}

.dt-calendar-event {
    display: block;
    padding: 0.15rem 0.35rem;
    margin-bottom: 0.1rem;
    border-radius: 3px;
    font-size: 0.72rem;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dt-calendar-event:hover {
    background: var(--rz-primary);
    color: var(--rz-base-background-color);
}

.dt-calendar-more {
    font-size: 0.72rem;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    padding: 0 0.35rem;
}

.dt-calendar-more:hover {
    color: var(--rz-primary);
}

.dt-calendar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    gap: 0.75rem;
}

.dt-calendar-empty .empty-icon {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAP VIEW
   Leaflet-based map renderer (<MapRenderer.razor>). The container fills its
   parent; markers are tinted via color field using `.dt-map-marker span`.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    min-height: 360px;
}

.dt-map-container {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border-radius: 8px;
    border: 1px solid var(--rz-base-200);
    overflow: hidden;
    background: var(--rz-base-100);
}

.dt-map-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dt-map-marker span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--rz-base-background-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.dt-map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    gap: 0.75rem;
}

.dt-map-empty .empty-icon {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GALLERY VIEW
   Responsive card grid (<GalleryRenderer.razor>). Cards fit minmax(220px, 1fr)
   with a 16:9 top image, optional title and up to 3 key/value subtitles.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-gallery-wrapper {
    padding: 1rem;
    overflow-y: auto;
    height: 100%;
    box-sizing: border-box;
}

.dt-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.dt-gallery-card {
    display: flex;
    flex-direction: column;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.dt-gallery-card:hover {
    border-color: var(--rz-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.dt-gallery-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--rz-base-100);
}

.dt-gallery-card-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--rz-text-tertiary-color);
    font-size: 0.75rem;
}

.dt-gallery-card-image-placeholder .rz-icon {
    font-size: 2rem;
    opacity: 0.6;
}

.dt-gallery-card-body {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dt-gallery-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-gallery-card-subtitle {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
    display: flex;
    gap: 0.25rem;
    align-items: baseline;
    overflow: hidden;
}

.dt-gallery-card-subtitle-key {
    font-weight: 500;
    color: var(--rz-text-tertiary-color);
    flex-shrink: 0;
}

.dt-gallery-card-subtitle-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    gap: 0.75rem;
}

.dt-gallery-empty .empty-icon {
    font-size: 3rem;
    color: var(--rz-text-tertiary-color);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI FIELDS (Smart columns)
   Read-only cells whose value is generated by the SmartColumnProcessor. The
   cell is visually distinct (primary italic) and always leads with the
   `auto_awesome` icon so users can tell it isn't raw data.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-ai-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--rz-primary);
    font-style: italic;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ss-ai-icon {
    font-size: 1rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.ss-ai-pending {
    color: var(--rz-text-tertiary-color);
    font-style: italic;
    animation: ss-ai-pulse 1.5s ease-in-out infinite;
}

.ss-ai-error {
    color: var(--rz-danger);
    font-style: italic;
}

@keyframes ss-ai-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INLINE ANALYTICS (C22)

   Toolbar toggle + mini sparklines (SVG) on group headers + conditional
   heatmap gradient on numeric cells. Colors reuse Radzen theme variables
   via color-mix; nothing is hard-coded.
   ═══════════════════════════════════════════════════════════════════════════ */

.ss-btn.dt-insights-toggle.active {
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
}

.ss-sparkline {
    display: inline-block;
    width: 80px;
    height: 20px;
    vertical-align: middle;
    margin-left: 0.5rem;
    stroke: var(--rz-primary);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.ss-sparkline polyline {
    fill: none;
    stroke: inherit;
    stroke-width: inherit;
}

/* Heatmap cells keep a subtle border so the gradient doesn't visually merge
   with the neighbour. Text stays legible because the gradient targets alpha
   and the cell background already defers to color-mix in oklab. */
.supersheet-cell.ss-heatmap-cell {
    transition: background 120ms ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KPI BAR (C22)
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-kpi-bar {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rz-base-200);
    background: var(--rz-base-50);
    overflow-x: auto;
}

.dt-kpi-card {
    flex: 1;
    min-width: 120px;
    padding: 0.5rem 0.75rem;
    background: var(--rz-base-50);
    border-radius: 6px;
    border-left: 3px solid var(--rz-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dt-kpi-card.variant-success {
    border-left-color: var(--rz-success);
}

.dt-kpi-card.variant-danger {
    border-left-color: var(--rz-danger);
}

.dt-kpi-label {
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rz-text-color);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIEW EDITOR — KPI ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.view-editor-kpis .view-editor-kpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.view-editor-kpi-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.view-editor-kpi-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.view-editor-hint {
    color: var(--rz-text-tertiary-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.dt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--rz-base-300);
    background: var(--rz-base-50);
    color: var(--rz-text-secondary-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.dt-icon-btn:hover {
    background: var(--rz-base-100);
    color: var(--rz-text-color);
}

.dt-icon-btn.dt-icon-btn-danger:hover {
    background: var(--rz-danger-lighter);
    color: var(--rz-danger);
    border-color: var(--rz-danger-lighter);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI IMPORT ASSISTANT (C23)

   Inline reasoning surfaced by the import dialog so users can tell why the
   agent suggested a given field type. The column editor row is flex-based and
   the reasoning sits under the text box.
   ═══════════════════════════════════════════════════════════════════════════ */

.import-col-name {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.import-col-reasoning {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--rz-text-tertiary-color);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-col-reasoning i.rzi {
    color: var(--rz-primary);
    font-size: 0.9rem;
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXPORT MENU (C23)
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-export-wrapper {
    position: relative;
    display: inline-flex;
}

.dt-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 0.25rem;
    gap: 0.1rem;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    z-index: 30;
}

.dt-export-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: none;
    background: transparent;
    color: var(--rz-text-color);
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    font-size: 0.85rem;
}

.dt-export-item:hover {
    background: var(--rz-base-100);
}

.dt-export-item i.rzi {
    font-size: 1rem;
    color: var(--rz-primary);
}

.dt-export-item[disabled] {
    opacity: 0.55;
    cursor: wait;
}



/* ═══════════════════════════════════════════════════════════════════════════
   PUBLIC SHARE — tokens + public endpoint (C24)
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-public-share-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dt-public-share-item {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: var(--rz-base-50);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
}

.dt-public-share-url {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    background: var(--rz-base-100);
    border: 1px solid var(--rz-base-200);
    border-radius: 4px;
    font-family: var(--rz-font-family-monospace, ui-monospace, Consolas, monospace);
    font-size: 0.8rem;
    color: var(--rz-text-color);
    word-break: break-all;
}

.dt-public-share-url-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-public-share-copy-btn {
    flex-shrink: 0;
}

.dt-public-share-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.dt-public-share-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--rz-primary-lighter);
    color: var(--rz-primary);
    font-size: 0.7rem;
    font-weight: 500;
}

.dt-public-share-badge.warn {
    background: var(--rz-warning-lighter);
    color: var(--rz-warning);
}

.dt-public-share-badge.muted {
    background: var(--rz-base-100);
    color: var(--rz-text-secondary-color);
}

.dt-public-share-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.375rem;
}

.dt-public-share-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--rz-base-50);
    border: 1px dashed var(--rz-base-300);
    border-radius: var(--rz-border-radius);
    margin-top: 0.5rem;
}

/* ───── Public anonymous page (/public/dynamic-tables/{token}) ───── */

.dt-public-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--rz-base-50);
}

.dt-public-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    background: var(--rz-card-background-color);
    border-bottom: 1px solid var(--rz-base-200);
}

.dt-public-header-icon {
    font-size: 1.25rem;
    color: var(--rz-primary);
}

.dt-public-header-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rz-text-color);
}

.dt-public-header-sub {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color);
}

.dt-public-body {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow: auto;
}

.dt-public-footer {
    padding: 0.625rem 1.25rem;
    border-top: 1px solid var(--rz-base-200);
    background: var(--rz-card-background-color);
    font-size: 0.7rem;
    color: var(--rz-text-secondary-color);
    text-align: center;
}

.dt-public-expired,
.dt-public-invalid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    color: var(--rz-danger);
    text-align: center;
}

.dt-public-expired i.rzi,
.dt-public-invalid i.rzi {
    font-size: 3rem;
    opacity: 0.75;
}

.dt-public-password-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 360px;
    margin: 4rem auto;
    padding: 1.25rem;
    background: var(--rz-card-background-color);
    border: 1px solid var(--rz-base-200);
    border-radius: var(--rz-border-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.dt-public-password-form h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--rz-text-color);
    text-align: center;
}

.dt-public-password-form .rz-message,
.dt-public-password-error {
    color: var(--rz-danger);
    font-size: 0.8rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OFFLINE — PWA banner (C25)
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--rz-warning-lighter);
    color: var(--rz-warning);
    border-bottom: 2px solid var(--rz-warning);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    z-index: 1200;
}

.dt-offline-banner.dt-offline-banner--active {
    display: flex;
}

.dt-offline-banner i.rzi {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A11Y FOCUS — WCAG 2.1 AA visible focus ring (C26)
   ───────────────────────────────────────────────────────────────────────────
   Standardized focus outline across the dynamic-tables surfaces so keyboard
   users always know where they are. Uses :focus-visible so mouse users don't
   see the ring when they click.
   ═══════════════════════════════════════════════════════════════════════════ */

.dt-focus-visible:focus-visible,
.dt-rail-btn:focus-visible,
.dt-side-panel-header .close-btn:focus-visible,
.dt-kanban-card:focus-visible,
.dt-gallery-card:focus-visible,
.dt-timeline-row:focus-visible,
.dt-calendar-day:focus-visible,
.dt-public-share-copy-btn:focus-visible,
.cmd-palette-item:focus-visible,
.dt-offline-banner a:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Announce live-region updates (presence, AI, automations) without visually
   interfering — paired with role="status" / aria-live="polite" in the markup. */
.dt-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;
}

/* Ensure :focus-visible outlines are not hidden behind neighbouring panels. */
.dt-side-panel,
.dt-rail,
.dt-cmd-palette {
    isolation: isolate;
}

/* NOTE: all previous .rz-popup / .rz-menu / .rz-menuitem / .rz-dropdown-panel /
   .rz-dialog overrides were removed on purpose. Radzen's Material base +
   theme.css tenant customisation already provide consistent chrome for
   popups, menus, dropdowns and dialogs. Fighting those with !important
   blocks was the root cause of the "letra se sale del desplegable" and
   "caja dentro de caja" bugs. If a specific surface needs a bespoke
   look, scope the rule to that component (e.g. a wrapper class) —
   never target raw .rz-* classes globally. */

/* ═══════════════════════════════════════════════════════════════════════════
   Column context menu (Smartsheet-style) — replaces Radzen ContextMenuService
   for column headers in SuperSheet. Scoped class prefix .ss-col-ctx-* keeps
   the rules isolated from the generic .rz-menu base.
   ─────────────────────────────────────────────────────────────────────────── */

.ss-col-ctx-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: transparent;
}

.ss-col-ctx-menu {
    /* position:absolute within the fixed overlay — immune to ancestor transforms */
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    min-width: 260px;
    padding: 4px 0;
    font-size: 13px;
    color: #24292f;
    -webkit-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

.ss-col-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: inherit;
    font: inherit;
    line-height: 1.4;
}

.ss-col-ctx-item:hover:not(.disabled) {
    background: #f6f8fa;
}

.ss-col-ctx-item:focus-visible {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
}

.ss-col-ctx-item.disabled {
    color: #8c959f;
    cursor: default;
    pointer-events: none;
}

.ss-col-ctx-item.danger {
    color: #cf222e;
}

.ss-col-ctx-item.danger:hover:not(.disabled) {
    background: #fff1f0;
}

.ss-col-ctx-item.danger.disabled {
    color: #d9a6aa;
}

.ss-col-ctx-icon {
    /* Font handled by .rzi — do not re-declare font-family */
    font-size: 16px;
    color: #57606a;
    width: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.ss-col-ctx-item.danger .ss-col-ctx-icon {
    color: #cf222e;
}

.ss-col-ctx-item.disabled .ss-col-ctx-icon {
    color: #8c959f;
}

.ss-col-ctx-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-col-ctx-separator {
    height: 1px;
    background: #d0d7de;
    margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Column editor panel (inline, slide-in from right) — replaces the modal
   AddFieldDialog when editing an existing column via the context menu.
   ─────────────────────────────────────────────────────────────────────────── */

.column-editor-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #d0d7de;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08);
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.column-editor-panel.open {
    transform: translateX(0);
}

.column-editor-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #d0d7de;
    flex-shrink: 0;
}

.column-editor-panel-header-icon {
    font-family: 'Material Icons Round', 'Material Icons', 'Material Symbols Rounded';
    font-size: 18px;
    color: var(--rz-primary);
}

.column-editor-panel-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #24292f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.column-editor-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #57606a;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.column-editor-panel-close:hover {
    background: #f6f8fa;
}

.column-editor-panel-close .rzi {
    font-size: 18px;
}

.column-editor-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.column-editor-panel-footer {
    border-top: 1px solid #d0d7de;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}

.column-editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.column-editor-label {
    font-size: 12px;
    font-weight: 600;
    color: #57606a;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.column-editor-help {
    font-size: 11px;
    color: var(--rz-text-secondary-color);
}

.column-editor-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 0.5rem;
    background: #f6f8fa;
}

.column-editor-option-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.column-editor-option-row input[type="text"] {
    flex: 1;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 13px;
    background: #fff;
    color: #24292f;
}

.column-editor-option-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #57606a;
    padding: 2px;
    display: inline-flex;
    align-items: center;
}

.column-editor-option-remove:hover {
    color: #cf222e;
}

.column-editor-add-option {
    background: none;
    border: 1px dashed #d0d7de;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    color: #57606a;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.column-editor-add-option:hover {
    border-color: var(--rz-primary);
    color: var(--rz-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DataTables page styles (extracted from DataTables.razor inline <style>)
   ═══════════════════════════════════════════════════════════════════════════ */    .data-layout {
        display: flex;
        /* Fill the full width the parent body lets us have. Without an
           explicit width: 100% some browsers compute a min-content size
           for the flex container, which leaves a visible gap on the right
           when the shell's grid + panel + rail total is narrower than the
           viewport. */
        width: calc(100% + 2rem);
        /* Subtract the MainLayout header (64px) AND the `rz-p-4` vertical
           padding (1rem top + 1rem bottom) that would otherwise overflow
           when we bleed out horizontally. The result is the exact space
           between the header bottom and the viewport bottom. */
        height: calc(100vh - 64px - 2rem);
        overflow: hidden;
        /* MainLayout wraps @@Body in a `rz-p-4` (1rem padding on every side)
           so text-heavy pages breathe. DynamicTables is a full-bleed data
           surface: sidebar + grid + rail panel must reach the real viewport
           edges. Neutralize the ancestor horizontal padding with a negative
           margin so the shell can claim the extra ~32px of horizontal real
           estate the user explicitly flagged as missing. Vertical negative
           margin matches the width compensation above so nothing overflows
           the viewport on the y axis. */
        margin: -1rem;
    }

    /* Sidebar */
    .data-sidebar {
        /* `flex: 0 0 280px` is the explicit equivalent of the former
           width/min-width pair and, critically, adds `flex-shrink: 0` so
           the sidebar never squeezes below 280px even when the grid grows
           to hold a very wide data set. */
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        background: var(--rz-base-background-color);
        border-right: 1px solid var(--rz-base-200);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .sidebar-header {
        padding: 1rem;
        border-bottom: 1px solid var(--rz-base-200);
    }
    
    .sidebar-search {
        padding: 0.5rem 1rem;
    }
    
    .table-list {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }
    
    .table-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        margin-bottom: 2px;
    }
    
    .table-item:hover {
        background: var(--rz-base-100);
    }
    
    .table-item.active {
        background: var(--rz-primary-lighter);
        color: var(--rz-primary);
    }
    
    .table-item .table-icon {
        font-size: 1.25rem;
        opacity: 0.7;
    }
    
    .table-item.active .table-icon {
        opacity: 1;
    }
    
    .table-item .table-info {
        flex: 1;
        min-width: 0;
    }
    
    .table-item .table-name {
        font-weight: 500;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .table-item .table-count {
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
    }
    
    .table-item.active .table-count {
        color: var(--rz-primary);
        opacity: 0.8;
    }

    .table-item.archived {
        opacity: 0.55;
    }

    .table-item.archived .table-name {
        text-decoration: line-through;
    }

    .sidebar-footer {
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--rz-base-200);
    }
    
    /* Main content.
       Inside .dt-shell (a flex row containing the grid, the optional side
       panel and the icon rail) the grid must flex-shrink below its content
       so that opening a panel physically narrows the grid instead of pushing
       it off-screen or overlaying it. `min-width: 0` is mandatory for flex
       children that host a scrolling Radzen data grid — without it the flex
       algorithm refuses to go below the grid's intrinsic content width.
       `width: 100%` + no lateral padding/margin are also mandatory — any
       trailing padding leaks visually as a gap between the grid and the
       side panel when the user opens the rail. */
    .data-main {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--rz-base-100);
        /* Defensive: paint nothing outside this box, including shadows. */
        padding: 0;
        margin: 0;
    }

    .main-toolbar {
        padding: 0.75rem 1.25rem;
        background: var(--rz-base-background-color);
        border-bottom: 1px solid var(--rz-base-200);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        /* The saved-views RadzenSplitButton and the group-by popover render
           their dropdowns as direct descendants of the toolbar. `.data-main`
           above us has `overflow: hidden` (required so the grid does not bleed
           into the side panel) and `.main-content` has `overflow: auto` (so
           it scrolls). Without an explicit stacking context the popup ends up
           clipped behind the scrollable grid. Promoting the toolbar into its
           own stacking context with a z-index higher than the grid keeps the
           dropdowns floating on top. */
        position: relative;
        z-index: 30;
        /* Popups inside the toolbar must not be clipped by the toolbar box
           itself. Overflow visible is safe here because the toolbar does not
           scroll horizontally — it wraps onto the next line when tight. */
        overflow: visible;
    }

    /* Every toolbar group is a positioning anchor for its own popup (group-by,
       split-button dropdown, color picker) so z-index applied downstream
       actually takes effect. */
    .main-toolbar .toolbar-group {
        position: relative;
    }

    /* Radzen renders RadzenSplitButton's dropdown and RadzenMenu popups inline
       next to their trigger. Force those popups above anything else the
       toolbar could overlap, including the grid header row (which uses the
       theme's own z-index for sticky headers). */
    .main-toolbar .rz-menu,
    .main-toolbar .rz-popup,
    .main-toolbar .rz-splitbutton-menu {
        z-index: 1001 !important;
    }

    .main-content {
        flex: 1 1 auto;
        min-width: 0;
        /* Fill the full width the flex-row gives us — the Radzen grid and
           the SuperSheet both measure themselves against their parent, so a
           missing `width: 100%` here leaks as visible dead space on the
           right side of the grid when the side panel is open. */
        width: 100%;
        overflow: auto;
        padding: 0;
        margin: 0;
        /* Explicit low z-index so the grid scroll container can never stack
           above the toolbar's saved-views popup. Without this the browser's
           auto-stacking picks the DOM order and the grid wins. */
        position: relative;
        z-index: 1;
    }

    /* SuperSheet root must fill its slot. The component's own CSS gives it
       height:100% but leaves width implicit, which is fine in most contexts
       but fails inside deeply-nested flex layouts when the surrounding
       shell tries to shrink (e.g. the DynamicTables rail panel opening).
       Pin the width explicitly so the grid always tracks .main-content. */
    .main-content > .supersheet-container {
        width: 100%;
        min-width: 0;
    }
    
    /* Empty state */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 3rem;
        text-align: center;
    }
    
    .empty-icon {
        font-size: 4rem;
        color: var(--rz-text-disabled-color);
        margin-bottom: 1.5rem;
    }
    
    /* Quick create form */
    .quick-create {
        padding: 1rem;
        background: var(--rz-base-100);
        border-radius: 8px;
        margin: 0.5rem;
        border: 1px dashed var(--rz-base-300);
    }
    
    /* Table grid styles */
    .airtable-grid {
        background: var(--rz-base-background-color);
        height: 100%;
    }
    
    .field-header {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-weight: 600;
        font-size: 0.8125rem;
    }
    
    .field-header-icon {
        font-size: 1rem;
        opacity: 0.6;
    }
    
    .add-field-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.15s ease;
    }
    
    .add-field-header:hover {
        opacity: 1;
    }
    
    /* Cell editing styles (Excel pure style - invisible until focused) */
    .cell-editor {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 26px;
    }
    
    .cell-editor .cell-input {
        width: 100%;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 2px 0 !important;
        font-size: inherit;
        font-family: inherit;
        min-height: 24px;
    }
    
    /* Remove Radzen component wrapper borders inside cell editors */
    .cell-editor .cell-input.rz-textbox,
    .cell-editor .cell-input .rz-inputtext,
    .cell-editor .cell-input .rz-spinner,
    .cell-editor .cell-input .rz-dropdown,
    .cell-editor .cell-input .rz-datepicker,
    .cell-editor .cell-input .rz-calendar {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
    }
    
    .cell-editor .cell-input:focus {
        border: none !important;
        box-shadow: none !important;
    }
    
    /* La celda activa muestra un borde azul suave */
    .cell-editing td {
        background: var(--rz-primary-lighter) !important;
    }
    
    .cell-editor-textarea {
        min-height: 60px;
    }
    
    .cell-editor-bool {
        justify-content: center;
    }
    
    .cell-editor-rating {
        justify-content: flex-start;
    }
    
    .cell-dropdown .rz-dropdown {
        width: 100%;
    }
    
    /* Column filter header */
    .column-filter-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }
    
    .column-filter-header .rz-dropdown {
        font-size: 0.75rem;
        min-height: 24px;
    }
    
    /* Read-only cell display */
    .cell-value {
        padding: 4px 0;
        min-height: 24px;
        cursor: pointer;
        width: 100%;
    }
    
    .cell-value:hover {
        background: rgba(var(--rz-primary-rgb), 0.05);
        border-radius: 2px;
    }
    
    .rz-data-grid .rz-data-row td {
        padding: 4px 8px !important;
        vertical-align: middle;
    }
    
    /* Smartsheet/Excel style grid */
    .smartsheet-grid .rz-data-grid-header {
        background: var(--rz-base-100);
        border-bottom: 2px solid var(--rz-base-300);
    }
    
    .smartsheet-grid .rz-data-grid-header th {
        font-weight: 600;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        background: var(--rz-base-100);
    }
    
    .smartsheet-grid .rz-data-row:hover {
        background: rgba(var(--rz-primary-rgb), 0.04);
    }
    
    .smartsheet-grid .rz-data-row td {
        border-right: 1px solid var(--rz-base-200);
    }
    
    .smartsheet-grid .rz-data-row td:last-child {
        border-right: none;
    }
    
    /* Row number column (Excel style) */
    .row-number-column {
        background: var(--rz-base-100) !important;
        border-right: 2px solid var(--rz-base-300) !important;
    }
    
    .row-number {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        font-weight: 500;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Editable cell hover indicator */
    .cell-editable {
        cursor: cell;
        min-height: 26px;
        padding: 2px 4px;
        border-radius: 2px;
        transition: background 0.1s ease;
    }
    
    .cell-editable:hover {
        background: rgba(var(--rz-primary-rgb), 0.06);
    }
    
    /* Selected column highlight */
    .column-selected {
        background: rgba(var(--rz-primary-rgb), 0.08) !important;
    }
    
    .column-header-selected {
        background: rgba(var(--rz-primary-rgb), 0.12) !important;
        border-bottom: 2px solid var(--rz-primary) !important;
    }
    
    .column-header-selected .column-menu-btn {
        opacity: 1 !important;
        color: var(--rz-primary) !important;
    }
    
    /* Selected row highlight */
    .row-selected td {
        background: rgba(var(--rz-primary-rgb), 0.1) !important;
    }
    
    /* Cell with formatting */
    .cell-bold { font-weight: 700; }
    .cell-italic { font-style: italic; }
    .cell-underline { text-decoration: underline; }
    .cell-strikethrough { text-decoration: line-through; }
    .cell-align-left { text-align: left; }
    .cell-align-center { text-align: center; }
    .cell-align-right { text-align: right; }
    
    /* Cell background colors */
    .cell-bg-yellow { background: #fff9c4 !important; }
    .cell-bg-green { background: #c8e6c9 !important; }
    .cell-bg-blue { background: #bbdefb !important; }
    .cell-bg-red { background: #ffcdd2 !important; }
    .cell-bg-orange { background: #ffe0b2 !important; }
    .cell-bg-purple { background: #e1bee7 !important; }
    .cell-bg-pink { background: #f8bbd9 !important; }
    
    /* Cell text colors */
    .cell-text-red { color: #c62828; }
    .cell-text-green { color: #2e7d32; }
    .cell-text-blue { color: #1565c0; }
    .cell-text-orange { color: #ef6c00; }
    .cell-text-purple { color: #6a1b9a; }
    
    /* Conditional formatting indicators */
    .cell-cf-bar {
        position: relative;
    }
    .cell-cf-bar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--cf-color, var(--rz-primary));
        width: var(--cf-percent, 0%);
    }
    
    /* Active cell indicator (Excel style thin border) */
    .cell-active {
        outline: 2px solid var(--rz-primary) !important;
        outline-offset: -2px;
        z-index: 1;
        position: relative;
    }

    /* Context menu styling */
    .rz-menu-item {
        font-size: 0.875rem;
    }
    
    .rz-menu-item .rzi {
        margin-right: 0.5rem;
    }
    
    /* Excel-style toolbar - aligned with the SuperSheet .ss-toolbar so the two
       bars read as one continuous Smartsheet-style strip (same height, dividers,
       padding, background) without requiring a component-wide refactor. */
    .smartsheet-toolbar {
        background: var(--rz-base-50);
        border-bottom: 1px solid var(--rz-base-200);
        padding: 3px 8px;
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .smartsheet-toolbar::-webkit-scrollbar {
        height: 4px;
    }
    
    .toolbar-separator {
        width: 1px;
        height: 20px;
        background: var(--rz-base-300);
        margin: 0 3px;
        flex-shrink: 0;
    }

    /* Presence avatar stack in the toolbar (live users on the table). */
    .dt-presence-stack {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0 .125rem;
        cursor: pointer;
    }
    .dt-presence-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        border: 2px solid var(--rz-base-background-color);
        margin-left: -6px;
        flex-shrink: 0;
    }
    .dt-presence-avatar:first-child { margin-left: 0; }
    .dt-presence-more {
        background: var(--rz-base-400);
        color: var(--rz-text-color);
    }
    
    .smartsheet-toolbar .rz-button {
        font-size: 0.8125rem;
        min-width: 28px;
        height: 28px;
        padding: 0 0.25rem;
    }
    
    .smartsheet-toolbar .rz-button .rzi {
        font-size: 1.125rem;
    }
    
    .smartsheet-toolbar .rz-dropdown {
        font-size: 0.75rem;
        height: 28px;
    }
    
    .smartsheet-toolbar .rz-splitbutton {
        height: 28px;
    }
    
    .smartsheet-toolbar .rz-splitbutton-toggle, 
    .smartsheet-toolbar .rz-splitbutton-button {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 0.25rem;
    }
    
    .smartsheet-toolbar .rz-textbox {
        height: 28px;
        font-size: 0.75rem;
    }
    
    .smartsheet-toolbar .toolbar-group {
        display: flex;
        align-items: center;
        gap: 0.0625rem;
        flex-shrink: 0;
    }
    
    .smartsheet-toolbar .font-selector {
        width: 90px;
    }
    
    .smartsheet-toolbar .font-size-selector {
        width: 50px;
    }
    
    /* Color picker button in toolbar */
    .color-picker-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 6px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .color-picker-btn:hover {
        background: rgba(var(--rz-primary-rgb), 0.08);
    }
    
    .color-picker-btn .color-bar {
        width: 18px;
        height: 3px;
        border-radius: 1px;
    }

    .toolbar-group .rz-colorpicker {
        width: auto !important;
        height: auto !important;
    }

    .toolbar-group .rz-colorpicker-trigger {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .toolbar-group .rz-colorpicker-value {
        display: none !important;
    }

    /* Format toolbar removed - merged into smartsheet-toolbar */
    .format-toolbar {
        display: none;
    }

    /* Smartsheet-style column headers */
    .smartsheet-header {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        cursor: pointer;
        min-height: 32px;
        position: relative;
        transition: background 0.15s;
    }
    
    .smartsheet-header:hover {
        background: rgba(var(--rz-primary-rgb), 0.04);
    }
    
    /* Drag handle for reordering columns */
    .smartsheet-header .drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 100%;
        cursor: grab;
        color: var(--rz-text-disabled-color);
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.15s;
    }
    
    .smartsheet-header:hover .drag-handle {
        opacity: 1;
    }
    
    .smartsheet-header .drag-handle:active {
        cursor: grabbing;
    }
    
    .smartsheet-header .drag-handle .rzi {
        font-size: 0.875rem;
    }
    
    .smartsheet-header .header-content {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        overflow: hidden;
        flex: 1;
        padding: 0 0.25rem;
    }
    
    .smartsheet-header .field-type-icon {
        font-size: 0.875rem;
        color: var(--rz-text-tertiary-color);
        flex-shrink: 0;
    }
    
    .smartsheet-header .field-name {
        font-weight: 600;
        font-size: 0.8125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .smartsheet-header .required-mark {
        color: var(--rz-danger);
        flex-shrink: 0;
        font-weight: bold;
    }
    
    .smartsheet-header .header-actions {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        flex-shrink: 0;
        margin-left: auto;
        padding-right: 0.25rem;
    }
    
    .smartsheet-header .filter-indicator {
        color: var(--rz-primary);
        display: flex;
        align-items: center;
    }
    
    .smartsheet-header .filter-indicator .rzi {
        font-size: 0.875rem;
    }
    
    .smartsheet-header .column-menu-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 4px;
        color: var(--rz-text-tertiary-color);
        display: flex;
        align-items: center;
        opacity: 0;
        transition: opacity 0.15s, background 0.15s, color 0.15s;
    }
    
    .smartsheet-header:hover .column-menu-btn {
        opacity: 1;
    }
    
    .smartsheet-header .column-menu-btn:hover {
        background: var(--rz-base-200);
        color: var(--rz-text-color);
    }
    
    .smartsheet-header .column-menu-btn .rzi {
        font-size: 1rem;
    }
    
    /* Column selection - header and all cells in column */
    .smartsheet-header.column-header-selected {
        background: rgba(var(--rz-primary-rgb), 0.2) !important;
        box-shadow: inset 0 -3px 0 0 var(--rz-primary) !important;
    }
    
    .smartsheet-grid .cell-content.column-selected,
    .rz-data-grid .cell-content.column-selected {
        background: rgba(var(--rz-primary-rgb), 0.12) !important;
        box-shadow: inset 2px 0 0 0 var(--rz-primary), inset -2px 0 0 0 var(--rz-primary) !important;
    }
    
    /* First and last cell in selected column - add top/bottom borders */
    .smartsheet-grid .rz-data-row:first-child .cell-content.column-selected {
        box-shadow: inset 2px 0 0 0 var(--rz-primary), inset -2px 0 0 0 var(--rz-primary), inset 0 2px 0 0 var(--rz-primary) !important;
    }
    
    .smartsheet-grid .rz-data-row:last-child .cell-content.column-selected {
        box-shadow: inset 2px 0 0 0 var(--rz-primary), inset -2px 0 0 0 var(--rz-primary), inset 0 -2px 0 0 var(--rz-primary) !important;
    }
    
    /* Row selection column */
    .row-select-column {
        background: var(--rz-base-100) !important;
    }
    
    /* Column footer aggregations */
    .column-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0.25rem 0.5rem;
        min-height: 24px;
        cursor: pointer;
        font-size: 0.75rem;
    }
    
    .column-footer:hover {
        background: var(--rz-base-100);
    }
    
    .column-footer .agg-hint {
        color: var(--rz-text-disabled-color);
        font-weight: 600;
    }
    
    .column-footer .agg-value {
        display: flex;
        gap: 0.25rem;
        font-weight: 500;
    }
    
    .column-footer .agg-label {
        color: var(--rz-text-tertiary-color);
        font-size: 0.6875rem;
    }
    
    /* Selection indicator in toolbar */
    .selection-indicator {
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        padding: 0 0.5rem;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       CARD VIEW - Vista de tarjetas estilo Smartsheet
       ═══════════════════════════════════════════════════════════════════════════ */
    .card-view-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        padding: 1rem;
        background: var(--rz-base-background-color);
    }

    .record-card {
        background: var(--rz-panel-background-color);
        border: 1px solid var(--rz-border-color);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
        cursor: pointer;
        overflow: hidden;
    }

    .record-card:hover {
        border-color: var(--rz-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .record-card.selected {
        border-color: var(--rz-primary);
        background: var(--rz-primary-lighter);
    }

    .record-card .card-header {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--rz-base-300);
        border-bottom: 1px solid var(--rz-border-color);
    }

    .record-card .card-title {
        flex: 1;
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--rz-text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .record-card .card-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .record-card .card-field {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .record-card .field-label {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .record-card .field-value {
        font-size: 0.875rem;
        color: var(--rz-text-color);
    }

    .record-card .card-footer {
        display: flex;
        justify-content: flex-end;
        padding: 0.5rem 1rem;
        border-top: 1px solid var(--rz-border-color);
        background: var(--rz-base-200);
    }

    .record-card.add-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 180px;
        border: 2px dashed var(--rz-border-color);
        background: transparent;
        color: var(--rz-text-tertiary-color);
    }

    .record-card.add-card:hover {
        border-color: var(--rz-primary);
        background: var(--rz-primary-lighter);
    }

    .record-card.add-card .add-label {
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: var(--rz-text-secondary-color);
    }

    @media (max-width: 1024px) {
        .data-layout {
            flex-direction: column;
            /* Keep the horizontal bleed-out in mobile too; the Radzen body
               padding still applies even on small viewports and the table
               picker + cards need the full width to stay legible. */
            width: calc(100% + 2rem);
            height: auto;
            min-height: calc(100dvh - 5rem);
            margin: -1rem;
        }

        .data-sidebar {
            /* Override the desktop `flex: 0 0 280px` so the sidebar can
               collapse to full-width in the mobile picker drawer. */
            flex: 0 0 auto;
            display: none;
            width: 100%;
            min-width: 0;
            max-height: min(55dvh, 420px);
            border-right: none;
            border-bottom: 1px solid var(--rz-base-200);
        }

        .data-sidebar.mobile-open {
            display: flex;
        }

        .data-main {
            min-height: 0;
            overflow: visible;
        }

        .main-content {
            overflow: visible;
            min-height: 0;
        }

        .smartsheet-toolbar {
            position: sticky;
            top: 0;
            z-index: 5;
        }

        .card-view-container {
            grid-template-columns: 1fr;
            gap: 0.75rem;
            padding: 0.75rem;
        }

        .record-card .card-header {
            align-items: flex-start;
            gap: 0.5rem;
        }

        .record-card .card-title {
            white-space: normal;
        }

        .record-card .card-footer {
            justify-content: stretch;
        }

        .record-card .card-footer .rz-button {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .smartsheet-toolbar {
            padding: 0.375rem 0.5rem;
        }

        .smartsheet-toolbar .toolbar-group:first-child span {
            max-width: 120px !important;
        }

        .sidebar-header,
        .sidebar-search,
        .sidebar-footer {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .quick-create {
            margin: 0.5rem 0.75rem;
        }

        .schema-view {
            padding: 0.75rem !important;
        }

        .empty-state {
            padding: 1.5rem 1rem;
        }
    }

/* ============================================================================
 * Migrated from DataTables.razor inline <style> block (refactor)
 * ============================================================================ */
    .data-layout {
        display: flex;
        /* Fill the full width the parent body lets us have. Without an
           explicit width: 100% some browsers compute a min-content size
           for the flex container, which leaves a visible gap on the right
           when the shell's grid + panel + rail total is narrower than the
           viewport. */
        width: calc(100% + 2rem);
        /* Subtract the MainLayout header (64px) AND the `rz-p-4` vertical
           padding (1rem top + 1rem bottom) that would otherwise overflow
           when we bleed out horizontally. The result is the exact space
           between the header bottom and the viewport bottom. */
        height: calc(100vh - 64px - 2rem);
        overflow: hidden;
        /* MainLayout wraps @@Body in a `rz-p-4` (1rem padding on every side)
           so text-heavy pages breathe. DynamicTables is a full-bleed data
           surface: sidebar + grid + rail panel must reach the real viewport
           edges. Neutralize the ancestor horizontal padding with a negative
           margin so the shell can claim the extra ~32px of horizontal real
           estate the user explicitly flagged as missing. Vertical negative
           margin matches the width compensation above so nothing overflows
           the viewport on the y axis. */
        margin: -1rem;
    }

    /* Sidebar */
    .data-sidebar {
        /* `flex: 0 0 280px` is the explicit equivalent of the former
           width/min-width pair and, critically, adds `flex-shrink: 0` so
           the sidebar never squeezes below 280px even when the grid grows
           to hold a very wide data set. */
        flex: 0 0 280px;
        width: 280px;
        min-width: 280px;
        background: var(--rz-base-background-color);
        border-right: 1px solid var(--rz-base-200);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .sidebar-header {
        padding: 1rem;
        border-bottom: 1px solid var(--rz-base-200);
    }
    
    .sidebar-search {
        padding: 0.5rem 1rem;
    }
    
    .table-list {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem;
    }
    
    .table-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.75rem;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        margin-bottom: 2px;
    }
    
    .table-item:hover {
        background: var(--rz-base-100);
    }
    
    .table-item.active {
        background: var(--rz-primary-lighter);
        color: var(--rz-primary);
    }
    
    .table-item .table-icon {
        font-size: 1.25rem;
        opacity: 0.7;
    }
    
    .table-item.active .table-icon {
        opacity: 1;
    }
    
    .table-item .table-info {
        flex: 1;
        min-width: 0;
    }
    
    .table-item .table-name {
        font-weight: 500;
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .table-item .table-count {
        font-size: 0.75rem;
        color: var(--rz-text-secondary-color);
    }
    
    .table-item.active .table-count {
        color: var(--rz-primary);
        opacity: 0.8;
    }

    .table-item.archived {
        opacity: 0.55;
    }

    .table-item.archived .table-name {
        text-decoration: line-through;
    }

    .sidebar-footer {
        padding: 0.75rem 1rem;
        border-top: 1px solid var(--rz-base-200);
    }
    
    /* Main content.
       Inside .dt-shell (a flex row containing the grid, the optional side
       panel and the icon rail) the grid must flex-shrink below its content
       so that opening a panel physically narrows the grid instead of pushing
       it off-screen or overlaying it. `min-width: 0` is mandatory for flex
       children that host a scrolling Radzen data grid — without it the flex
       algorithm refuses to go below the grid's intrinsic content width.
       `width: 100%` + no lateral padding/margin are also mandatory — any
       trailing padding leaks visually as a gap between the grid and the
       side panel when the user opens the rail. */
    .data-main {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--rz-base-100);
        /* Defensive: paint nothing outside this box, including shadows. */
        padding: 0;
        margin: 0;
    }

    .main-toolbar {
        padding: 0.75rem 1.25rem;
        background: var(--rz-base-background-color);
        border-bottom: 1px solid var(--rz-base-200);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        /* The saved-views RadzenSplitButton and the group-by popover render
           their dropdowns as direct descendants of the toolbar. `.data-main`
           above us has `overflow: hidden` (required so the grid does not bleed
           into the side panel) and `.main-content` has `overflow: auto` (so
           it scrolls). Without an explicit stacking context the popup ends up
           clipped behind the scrollable grid. Promoting the toolbar into its
           own stacking context with a z-index higher than the grid keeps the
           dropdowns floating on top. */
        position: relative;
        z-index: 30;
        /* Popups inside the toolbar must not be clipped by the toolbar box
           itself. Overflow visible is safe here because the toolbar does not
           scroll horizontally — it wraps onto the next line when tight. */
        overflow: visible;
    }

    /* Every toolbar group is a positioning anchor for its own popup (group-by,
       split-button dropdown, color picker) so z-index applied downstream
       actually takes effect. */
    .main-toolbar .toolbar-group {
        position: relative;
    }

    /* Radzen renders RadzenSplitButton's dropdown and RadzenMenu popups inline
       next to their trigger. Force those popups above anything else the
       toolbar could overlap, including the grid header row (which uses the
       theme's own z-index for sticky headers). */
    .main-toolbar .rz-menu,
    .main-toolbar .rz-popup,
    .main-toolbar .rz-splitbutton-menu {
        z-index: 1001 !important;
    }

    .main-content {
        flex: 1 1 auto;
        min-width: 0;
        /* Fill the full width the flex-row gives us — the Radzen grid and
           the SuperSheet both measure themselves against their parent, so a
           missing `width: 100%` here leaks as visible dead space on the
           right side of the grid when the side panel is open. */
        width: 100%;
        overflow: auto;
        padding: 0;
        margin: 0;
        /* Explicit low z-index so the grid scroll container can never stack
           above the toolbar's saved-views popup. Without this the browser's
           auto-stacking picks the DOM order and the grid wins. */
        position: relative;
        z-index: 1;
    }

    /* SuperSheet root must fill its slot. The component's own CSS gives it
       height:100% but leaves width implicit, which is fine in most contexts
       but fails inside deeply-nested flex layouts when the surrounding
       shell tries to shrink (e.g. the DynamicTables rail panel opening).
       Pin the width explicitly so the grid always tracks .main-content. */
    .main-content > .supersheet-container {
        width: 100%;
        min-width: 0;
    }
    
    /* Empty state */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 3rem;
        text-align: center;
    }
    
    .empty-icon {
        font-size: 4rem;
        color: var(--rz-text-disabled-color);
        margin-bottom: 1.5rem;
    }
    
    /* Quick create form */
    .quick-create {
        padding: 1rem;
        background: var(--rz-base-100);
        border-radius: 8px;
        margin: 0.5rem;
        border: 1px dashed var(--rz-base-300);
    }
    
    /* Table grid styles */
    .airtable-grid {
        background: var(--rz-base-background-color);
        height: 100%;
    }
    
    .field-header {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-weight: 600;
        font-size: 0.8125rem;
    }
    
    .field-header-icon {
        font-size: 1rem;
        opacity: 0.6;
    }
    
    .add-field-header {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        cursor: pointer;
        opacity: 0.5;
        transition: opacity 0.15s ease;
    }
    
    .add-field-header:hover {
        opacity: 1;
    }
    
    /* Cell editing styles (Excel pure style - invisible until focused) */
    .cell-editor {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 26px;
    }
    
    .cell-editor .cell-input {
        width: 100%;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 2px 0 !important;
        font-size: inherit;
        font-family: inherit;
        min-height: 24px;
    }
    
    /* Remove Radzen component wrapper borders inside cell editors */
    .cell-editor .cell-input.rz-textbox,
    .cell-editor .cell-input .rz-inputtext,
    .cell-editor .cell-input .rz-spinner,
    .cell-editor .cell-input .rz-dropdown,
    .cell-editor .cell-input .rz-datepicker,
    .cell-editor .cell-input .rz-calendar {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
    }
    
    .cell-editor .cell-input:focus {
        border: none !important;
        box-shadow: none !important;
    }
    
    /* La celda activa muestra un borde azul suave */
    .cell-editing td {
        background: var(--rz-primary-lighter) !important;
    }
    
    .cell-editor-textarea {
        min-height: 60px;
    }
    
    .cell-editor-bool {
        justify-content: center;
    }
    
    .cell-editor-rating {
        justify-content: flex-start;
    }
    
    .cell-dropdown .rz-dropdown {
        width: 100%;
    }
    
    /* Column filter header */
    .column-filter-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
    }
    
    .column-filter-header .rz-dropdown {
        font-size: 0.75rem;
        min-height: 24px;
    }
    
    /* Read-only cell display */
    .cell-value {
        padding: 4px 0;
        min-height: 24px;
        cursor: pointer;
        width: 100%;
    }
    
    .cell-value:hover {
        background: rgba(var(--rz-primary-rgb), 0.05);
        border-radius: 2px;
    }
    
    .rz-data-grid .rz-data-row td {
        padding: 4px 8px !important;
        vertical-align: middle;
    }
    
    /* Smartsheet/Excel style grid */
    .smartsheet-grid .rz-data-grid-header {
        background: var(--rz-base-100);
        border-bottom: 2px solid var(--rz-base-300);
    }
    
    .smartsheet-grid .rz-data-grid-header th {
        font-weight: 600;
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        background: var(--rz-base-100);
    }
    
    .smartsheet-grid .rz-data-row:hover {
        background: rgba(var(--rz-primary-rgb), 0.04);
    }
    
    .smartsheet-grid .rz-data-row td {
        border-right: 1px solid var(--rz-base-200);
    }
    
    .smartsheet-grid .rz-data-row td:last-child {
        border-right: none;
    }
    
    /* Row number column (Excel style) */
    .row-number-column {
        background: var(--rz-base-100) !important;
        border-right: 2px solid var(--rz-base-300) !important;
    }
    
    .row-number {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        font-weight: 500;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Editable cell hover indicator */
    .cell-editable {
        cursor: cell;
        min-height: 26px;
        padding: 2px 4px;
        border-radius: 2px;
        transition: background 0.1s ease;
    }
    
    .cell-editable:hover {
        background: rgba(var(--rz-primary-rgb), 0.06);
    }
    
    /* Selected column highlight */
    .column-selected {
        background: rgba(var(--rz-primary-rgb), 0.08) !important;
    }
    
    .column-header-selected {
        background: rgba(var(--rz-primary-rgb), 0.12) !important;
        border-bottom: 2px solid var(--rz-primary) !important;
    }
    
    .column-header-selected .column-menu-btn {
        opacity: 1 !important;
        color: var(--rz-primary) !important;
    }
    
    /* Selected row highlight */
    .row-selected td {
        background: rgba(var(--rz-primary-rgb), 0.1) !important;
    }
    
    /* Cell with formatting */
    .cell-bold { font-weight: 700; }
    .cell-italic { font-style: italic; }
    .cell-underline { text-decoration: underline; }
    .cell-strikethrough { text-decoration: line-through; }
    .cell-align-left { text-align: left; }
    .cell-align-center { text-align: center; }
    .cell-align-right { text-align: right; }
    
    /* Cell background colors */
    .cell-bg-yellow { background: #fff9c4 !important; }
    .cell-bg-green { background: #c8e6c9 !important; }
    .cell-bg-blue { background: #bbdefb !important; }
    .cell-bg-red { background: #ffcdd2 !important; }
    .cell-bg-orange { background: #ffe0b2 !important; }
    .cell-bg-purple { background: #e1bee7 !important; }
    .cell-bg-pink { background: #f8bbd9 !important; }
    
    /* Cell text colors */
    .cell-text-red { color: #c62828; }
    .cell-text-green { color: #2e7d32; }
    .cell-text-blue { color: #1565c0; }
    .cell-text-orange { color: #ef6c00; }
    .cell-text-purple { color: #6a1b9a; }
    
    /* Conditional formatting indicators */
    .cell-cf-bar {
        position: relative;
    }
    .cell-cf-bar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: var(--cf-color, var(--rz-primary));
        width: var(--cf-percent, 0%);
    }
    
    /* Active cell indicator (Excel style thin border) */
    .cell-active {
        outline: 2px solid var(--rz-primary) !important;
        outline-offset: -2px;
        z-index: 1;
        position: relative;
    }

    /* Context menu styling */
    .rz-menu-item {
        font-size: 0.875rem;
    }
    
    .rz-menu-item .rzi {
        margin-right: 0.5rem;
    }
    
    /* Excel-style toolbar - aligned with the SuperSheet .ss-toolbar so the two
       bars read as one continuous Smartsheet-style strip (same height, dividers,
       padding, background) without requiring a component-wide refactor. */
    .smartsheet-toolbar {
        background: var(--rz-base-50);
        border-bottom: 1px solid var(--rz-base-200);
        padding: 3px 8px;
        min-height: 34px;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .smartsheet-toolbar::-webkit-scrollbar {
        height: 4px;
    }
    
    .toolbar-separator {
        width: 1px;
        height: 20px;
        background: var(--rz-base-300);
        margin: 0 3px;
        flex-shrink: 0;
    }

    /* Presence avatar stack in the toolbar (live users on the table). */
    .dt-presence-stack {
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 0 .125rem;
        cursor: pointer;
    }
    .dt-presence-avatar {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 600;
        border: 2px solid var(--rz-base-background-color);
        margin-left: -6px;
        flex-shrink: 0;
    }
    .dt-presence-avatar:first-child { margin-left: 0; }
    .dt-presence-more {
        background: var(--rz-base-400);
        color: var(--rz-text-color);
    }
    
    .smartsheet-toolbar .rz-button {
        font-size: 0.8125rem;
        min-width: 28px;
        height: 28px;
        padding: 0 0.25rem;
    }
    
    .smartsheet-toolbar .rz-button .rzi {
        font-size: 1.125rem;
    }
    
    .smartsheet-toolbar .rz-dropdown {
        font-size: 0.75rem;
        height: 28px;
    }
    
    .smartsheet-toolbar .rz-splitbutton {
        height: 28px;
    }
    
    .smartsheet-toolbar .rz-splitbutton-toggle, 
    .smartsheet-toolbar .rz-splitbutton-button {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 0.25rem;
    }
    
    .smartsheet-toolbar .rz-textbox {
        height: 28px;
        font-size: 0.75rem;
    }
    
    .smartsheet-toolbar .toolbar-group {
        display: flex;
        align-items: center;
        gap: 0.0625rem;
        flex-shrink: 0;
    }
    
    .smartsheet-toolbar .font-selector {
        width: 90px;
    }
    
    .smartsheet-toolbar .font-size-selector {
        width: 50px;
    }
    
    /* Color picker button in toolbar */
    .color-picker-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 6px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .color-picker-btn:hover {
        background: rgba(var(--rz-primary-rgb), 0.08);
    }
    
    .color-picker-btn .color-bar {
        width: 18px;
        height: 3px;
        border-radius: 1px;
    }

    .toolbar-group .rz-colorpicker {
        width: auto !important;
        height: auto !important;
    }

    .toolbar-group .rz-colorpicker-trigger {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .toolbar-group .rz-colorpicker-value {
        display: none !important;
    }

    /* Format toolbar removed - merged into smartsheet-toolbar */
    .format-toolbar {
        display: none;
    }

    /* Smartsheet-style column headers */
    .smartsheet-header {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0;
        cursor: pointer;
        min-height: 32px;
        position: relative;
        transition: background 0.15s;
    }
    
    .smartsheet-header:hover {
        background: rgba(var(--rz-primary-rgb), 0.04);
    }
    
    /* Drag handle for reordering columns */
    .smartsheet-header .drag-handle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 100%;
        cursor: grab;
        color: var(--rz-text-disabled-color);
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.15s;
    }
    
    .smartsheet-header:hover .drag-handle {
        opacity: 1;
    }
    
    .smartsheet-header .drag-handle:active {
        cursor: grabbing;
    }
    
    .smartsheet-header .drag-handle .rzi {
        font-size: 0.875rem;
    }
    
    .smartsheet-header .header-content {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        overflow: hidden;
        flex: 1;
        padding: 0 0.25rem;
    }
    
    .smartsheet-header .field-type-icon {
        font-size: 0.875rem;
        color: var(--rz-text-tertiary-color);
        flex-shrink: 0;
    }
    
    .smartsheet-header .field-name {
        font-weight: 600;
        font-size: 0.8125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .smartsheet-header .required-mark {
        color: var(--rz-danger);
        flex-shrink: 0;
        font-weight: bold;
    }
    
    .smartsheet-header .header-actions {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        flex-shrink: 0;
        margin-left: auto;
        padding-right: 0.25rem;
    }
    
    .smartsheet-header .filter-indicator {
        color: var(--rz-primary);
        display: flex;
        align-items: center;
    }
    
    .smartsheet-header .filter-indicator .rzi {
        font-size: 0.875rem;
    }
    
    .smartsheet-header .column-menu-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 4px;
        color: var(--rz-text-tertiary-color);
        display: flex;
        align-items: center;
        opacity: 0;
        transition: opacity 0.15s, background 0.15s, color 0.15s;
    }
    
    .smartsheet-header:hover .column-menu-btn {
        opacity: 1;
    }
    
    .smartsheet-header .column-menu-btn:hover {
        background: var(--rz-base-200);
        color: var(--rz-text-color);
    }
    
    .smartsheet-header .column-menu-btn .rzi {
        font-size: 1rem;
    }
    
    /* Column selection - header and all cells in column */
    .smartsheet-header.column-header-selected {
        background: rgba(var(--rz-primary-rgb), 0.2) !important;
        box-shadow: inset 0 -3px 0 0 var(--rz-primary) !important;
    }
    
    .smartsheet-grid .cell-content.column-selected,
    .rz-data-grid .cell-content.column-selected {
        background: rgba(var(--rz-primary-rgb), 0.12) !important;
        box-shadow: inset 2px 0 0 0 var(--rz-primary), inset -2px 0 0 0 var(--rz-primary) !important;
    }
    
    /* First and last cell in selected column - add top/bottom borders */
    .smartsheet-grid .rz-data-row:first-child .cell-content.column-selected {
        box-shadow: inset 2px 0 0 0 var(--rz-primary), inset -2px 0 0 0 var(--rz-primary), inset 0 2px 0 0 var(--rz-primary) !important;
    }
    
    .smartsheet-grid .rz-data-row:last-child .cell-content.column-selected {
        box-shadow: inset 2px 0 0 0 var(--rz-primary), inset -2px 0 0 0 var(--rz-primary), inset 0 -2px 0 0 var(--rz-primary) !important;
    }
    
    /* Row selection column */
    .row-select-column {
        background: var(--rz-base-100) !important;
    }
    
    /* Column footer aggregations */
    .column-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0.25rem 0.5rem;
        min-height: 24px;
        cursor: pointer;
        font-size: 0.75rem;
    }
    
    .column-footer:hover {
        background: var(--rz-base-100);
    }
    
    .column-footer .agg-hint {
        color: var(--rz-text-disabled-color);
        font-weight: 600;
    }
    
    .column-footer .agg-value {
        display: flex;
        gap: 0.25rem;
        font-weight: 500;
    }
    
    .column-footer .agg-label {
        color: var(--rz-text-tertiary-color);
        font-size: 0.6875rem;
    }
    
    /* Selection indicator in toolbar */
    .selection-indicator {
        font-size: 0.8125rem;
        color: var(--rz-text-secondary-color);
        padding: 0 0.5rem;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       CARD VIEW - Vista de tarjetas estilo Smartsheet
       ═══════════════════════════════════════════════════════════════════════════ */
    .card-view-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        padding: 1rem;
        background: var(--rz-base-background-color);
    }

    .record-card {
        background: var(--rz-panel-background-color);
        border: 1px solid var(--rz-border-color);
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
        cursor: pointer;
        overflow: hidden;
    }

    .record-card:hover {
        border-color: var(--rz-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .record-card.selected {
        border-color: var(--rz-primary);
        background: var(--rz-primary-lighter);
    }

    .record-card .card-header {
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--rz-base-300);
        border-bottom: 1px solid var(--rz-border-color);
    }

    .record-card .card-title {
        flex: 1;
        font-weight: 600;
        font-size: 0.9375rem;
        color: var(--rz-text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .record-card .card-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .record-card .card-field {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .record-card .field-label {
        font-size: 0.75rem;
        color: var(--rz-text-tertiary-color);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .record-card .field-value {
        font-size: 0.875rem;
        color: var(--rz-text-color);
    }

    .record-card .card-footer {
        display: flex;
        justify-content: flex-end;
        padding: 0.5rem 1rem;
        border-top: 1px solid var(--rz-border-color);
        background: var(--rz-base-200);
    }

    .record-card.add-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 180px;
        border: 2px dashed var(--rz-border-color);
        background: transparent;
        color: var(--rz-text-tertiary-color);
    }

    .record-card.add-card:hover {
        border-color: var(--rz-primary);
        background: var(--rz-primary-lighter);
    }

    .record-card.add-card .add-label {
        margin-top: 0.5rem;
        font-size: 0.875rem;
        color: var(--rz-text-secondary-color);
    }

    @media (max-width: 1024px) {
        .data-layout {
            flex-direction: column;
            /* Keep the horizontal bleed-out in mobile too; the Radzen body
               padding still applies even on small viewports and the table
               picker + cards need the full width to stay legible. */
            width: calc(100% + 2rem);
            height: auto;
            min-height: calc(100dvh - 5rem);
            margin: -1rem;
        }

        .data-sidebar {
            /* Override the desktop `flex: 0 0 280px` so the sidebar can
               collapse to full-width in the mobile picker drawer. */
            flex: 0 0 auto;
            display: none;
            width: 100%;
            min-width: 0;
            max-height: min(55dvh, 420px);
            border-right: none;
            border-bottom: 1px solid var(--rz-base-200);
        }

        .data-sidebar.mobile-open {
            display: flex;
        }

        .data-main {
            min-height: 0;
            overflow: visible;
        }

        .main-content {
            overflow: visible;
            min-height: 0;
        }

        .smartsheet-toolbar {
            position: sticky;
            top: 0;
            z-index: 5;
        }

        .card-view-container {
            grid-template-columns: 1fr;
            gap: 0.75rem;
            padding: 0.75rem;
        }

        .record-card .card-header {
            align-items: flex-start;
            gap: 0.5rem;
        }

        .record-card .card-title {
            white-space: normal;
        }

        .record-card .card-footer {
            justify-content: stretch;
        }

        .record-card .card-footer .rz-button {
            width: 100%;
        }
    }

    @media (max-width: 768px) {
        .smartsheet-toolbar {
            padding: 0.375rem 0.5rem;
        }

        .smartsheet-toolbar .toolbar-group:first-child span {
            max-width: 120px !important;
        }

        .sidebar-header,
        .sidebar-search,
        .sidebar-footer {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }

        .quick-create {
            margin: 0.5rem 0.75rem;
        }

        .schema-view {
            padding: 0.75rem !important;
        }

        .empty-state {
            padding: 1.5rem 1rem;
        }
    }

/* ── HierarchyOnboardingBanner ───────────────────────────────────────────── */
.dt-hierarchy-onboarding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    margin: 0;
    background: var(--rz-info-lighter, rgba(33, 150, 243, 0.08));
    border-bottom: 1px solid var(--rz-info-light, rgba(33, 150, 243, 0.2));
    color: var(--rz-text-color);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.dt-hierarchy-onboarding-text {
    flex: 1;
    min-width: 0;
}

.dt-hierarchy-onboarding-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--rz-text-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dt-hierarchy-onboarding-close:hover {
        background: rgba(0, 0, 0, 0.04);
        color: var(--rz-text-color);
    }