/* ============================================
   DevExtreme Matrix Theme v1.0
   Estilo visual inspirado en rd-matrix-table:
   bordes limpios 1px, headers gray-50, font 0.78rem,
   padding 6px 10px, sin row-alternation,
   hover sutil gray-50, focus indigo tint.

   USO: agregar clase "dx-matrix-theme" al contenedor
   padre del DataGrid/TreeList.
   ============================================ */

/* ─── Base: font + size global ─── */
.dx-matrix-theme .dx-datagrid {
    font-family: var(--font-family-base, inherit);
    font-size: 0.78rem;
    color: var(--color-gray-700, #4a5568);
}

/* ─── Header cells ─── */
.dx-matrix-theme .dx-datagrid-headers td {
    background: var(--color-gray-50, #f7fafc) !important;
    padding: 6px 10px !important;
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
}

/* Stack header: text on top, indicators below — prevents truncation on narrow columns */
.dx-matrix-theme .dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-gray-700, #4a5568);
    line-height: 1.3;
    white-space: normal;
    display: block;
    overflow: visible;
    text-overflow: clip;
}

.dx-matrix-theme .dx-datagrid-headers .dx-sort-indicator,
.dx-matrix-theme .dx-datagrid-headers .dx-header-filter {
    font-size: 0.65rem;
    color: var(--color-gray-400, #a0aec0);
}

/* Indicators row below the text */
.dx-matrix-theme .dx-datagrid-headers .dx-column-indicators {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    margin-left: 0;
    float: none !important;
}

/* Force header cell content to stack vertically (text then indicators) */
.dx-matrix-theme .dx-datagrid-headers .dx-header-row > td .dx-cell-focus-disabled,
.dx-matrix-theme .dx-datagrid-headers .dx-header-row > td > .dx-datagrid-text-content + .dx-column-indicators {
    display: flex;
}

.dx-matrix-theme .dx-datagrid-headers .dx-header-row > td {
    vertical-align: middle;
}

/* ─── Data cells ─── */
.dx-matrix-theme .dx-datagrid .dx-row > td {
    padding: 6px 10px !important;
    font-size: 0.78rem;
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
    color: var(--color-gray-700, #4a5568);
}

/* ─── Disable row alternation (clean white rows) ─── */
.dx-matrix-theme .dx-datagrid-rowsview .dx-row-alt > td {
    background-color: transparent !important;
}

/* ─── Hover: subtle gray-50 ─── */
.dx-matrix-theme .dx-datagrid .dx-data-row.dx-state-hover > td {
    background-color: var(--color-gray-50, #f7fafc) !important;
    color: var(--color-gray-800, #2d3748);
}

/* ─── Focused row: indigo tint (matches rd-matrix-cell.has-data) ─── */
.dx-matrix-theme .dx-datagrid .dx-row-focused > td {
    background-color: rgba(102, 126, 234, 0.06) !important;
    color: var(--color-gray-900, #1a202c);
}

.dx-matrix-theme .dx-datagrid .dx-row-focused.dx-data-row > td {
    border-color: rgba(102, 126, 234, 0.15) !important;
}

/* ─── Fixed columns: white bg ─── */
.dx-matrix-theme .dx-datagrid-content-fixed .dx-datagrid-table {
    background: var(--color-white, #fff);
}

.dx-matrix-theme .dx-datagrid-content-fixed .dx-row-focused > td {
    background-color: rgba(102, 126, 234, 0.06) !important;
}

.dx-matrix-theme .dx-datagrid-content-fixed .dx-data-row.dx-state-hover > td {
    background-color: var(--color-gray-50, #f7fafc) !important;
}

/* ─── Filter row ─── */
.dx-matrix-theme .dx-datagrid-filter-row td {
    padding: 3px 6px !important;
    background: var(--color-white, #fff) !important;
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
}

.dx-matrix-theme .dx-datagrid-filter-row .dx-texteditor-input {
    font-size: 0.75rem;
    padding: 3px 6px;
    min-height: 24px;
}

.dx-matrix-theme .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor {
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: 3px;
}

.dx-matrix-theme .dx-datagrid-filter-row .dx-menu-item-content .dx-icon {
    font-size: 0.72rem;
    color: var(--color-gray-400, #a0aec0);
}

/* ─── Group rows ─── */
.dx-matrix-theme .dx-datagrid .dx-group-row > td {
    background: var(--color-gray-50, #f7fafc) !important;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--color-gray-700, #4a5568);
    padding: 5px 10px !important;
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
}

/* ─── Header panel (group panel, search, column chooser) ─── */
.dx-matrix-theme .dx-datagrid-header-panel {
    padding: 6px 10px;
    border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
    background: var(--color-white, #fff);
}

.dx-matrix-theme .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: auto;
    min-height: 30px;
}

.dx-matrix-theme .dx-datagrid-group-panel .dx-group-panel-message {
    font-size: 0.72rem;
    color: var(--color-gray-400, #a0aec0);
    padding: 4px 0;
}

.dx-matrix-theme .dx-datagrid-group-panel .dx-group-panel-item {
    font-size: 0.75rem;
    padding: 2px 8px;
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: 4px;
    background: var(--color-gray-50, #f7fafc);
    color: var(--color-gray-700, #4a5568);
}

/* ─── Search panel ─── */
.dx-matrix-theme .dx-datagrid-search-panel {
    margin-left: auto;
}

.dx-matrix-theme .dx-datagrid-search-panel .dx-texteditor-input {
    font-size: 0.75rem;
    padding: 4px 8px;
    min-height: 26px;
}

/* ─── Pager ─── */
.dx-matrix-theme .dx-datagrid .dx-pager {
    font-size: 0.75rem;
    padding: 6px 10px;
    border-top: 1px solid var(--color-gray-200, #e2e8f0);
}

.dx-matrix-theme .dx-datagrid .dx-pager .dx-pages .dx-page {
    font-size: 0.72rem;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
}

.dx-matrix-theme .dx-datagrid .dx-pager .dx-page-sizes .dx-page-size {
    font-size: 0.72rem;
    min-width: 26px;
    height: 24px;
    line-height: 24px;
}

/* ─── Selection checkbox compact ─── */
.dx-matrix-theme .dx-datagrid .dx-select-checkbox {
    font-size: 0.72rem;
}

/* ─── Column chooser button ─── */
.dx-matrix-theme .dx-datagrid .dx-column-chooser-button .dx-icon {
    font-size: 0.82rem;
}

/* ─── Export button ─── */
.dx-matrix-theme .dx-datagrid .dx-datagrid-export-button .dx-icon {
    font-size: 0.82rem;
}

/* ─── Scrollbar refinement ─── */
.dx-matrix-theme .dx-datagrid .dx-scrollbar-vertical .dx-scrollable-scroll {
    width: 6px;
}

.dx-matrix-theme .dx-datagrid .dx-scrollbar-horizontal .dx-scrollable-scroll {
    height: 6px;
}

/* ─── No data / empty state ─── */
.dx-matrix-theme .dx-datagrid .dx-datagrid-nodata {
    font-size: 0.88rem;
    color: var(--color-gray-500, #718096);
    padding: 48px 24px;
    text-align: center;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ─── Summary row (total/group) ─── */
.dx-matrix-theme .dx-datagrid .dx-datagrid-total-footer > td {
    padding: 5px 10px !important;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-gray-50, #f7fafc);
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
    color: var(--color-gray-800, #2d3748);
}

/* ─── Outer border: clean 1px ─── */
.dx-matrix-theme .dx-datagrid {
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
}

/* Remove DevExtreme's extra border artifacts */
.dx-matrix-theme .dx-datagrid .dx-datagrid-borders > .dx-datagrid-headers,
.dx-matrix-theme .dx-datagrid .dx-datagrid-borders > .dx-datagrid-rowsview {
    border: none;
}

/* ─── Command columns (edit/delete links) ─── */
.dx-matrix-theme .dx-datagrid .dx-command-edit .dx-link {
    font-size: 0.75rem;
    color: var(--palette-blue-primary, #4a90e2);
}

.dx-matrix-theme .dx-datagrid .dx-command-edit .dx-link:hover {
    color: var(--color-blue-700, #2b6cb0);
}

/* ─── Adaptive detail row (responsive columns) ─── */
.dx-matrix-theme .dx-datagrid .dx-adaptive-detail-row .dx-field-item-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-gray-600, #718096);
}

.dx-matrix-theme .dx-datagrid .dx-adaptive-detail-row .dx-field-item-content {
    font-size: 0.78rem;
}

/* ═══════════════════════════════════════════
   TreeList: equivalent overrides
   ═══════════════════════════════════════════ */

.dx-matrix-theme .dx-treelist {
    font-family: var(--font-family-base, inherit);
    font-size: 0.78rem;
    color: var(--color-gray-700, #4a5568);
}

/* Headers */
.dx-matrix-theme .dx-treelist-headers td {
    background: var(--color-gray-50, #f7fafc) !important;
    padding: 6px 10px !important;
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
}

.dx-matrix-theme .dx-treelist-headers .dx-treelist-text-content {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-gray-700, #4a5568);
    line-height: 1.3;
    white-space: normal;
    display: block;
    overflow: visible;
    text-overflow: clip;
}

.dx-matrix-theme .dx-treelist-headers .dx-sort-indicator,
.dx-matrix-theme .dx-treelist-headers .dx-header-filter {
    font-size: 0.65rem;
    color: var(--color-gray-400, #a0aec0);
}

.dx-matrix-theme .dx-treelist-headers .dx-column-indicators {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    margin-left: 0;
    float: none !important;
}

.dx-matrix-theme .dx-treelist-headers .dx-header-row > td {
    vertical-align: middle;
}

/* Data cells */
.dx-matrix-theme .dx-treelist .dx-row > td {
    padding: 6px 10px !important;
    font-size: 0.78rem;
    border: 1px solid var(--color-gray-200, #e2e8f0) !important;
    color: var(--color-gray-700, #4a5568);
}

/* Row alt disabled */
.dx-matrix-theme .dx-treelist-rowsview .dx-row-alt > td {
    background-color: transparent !important;
}

/* Hover */
.dx-matrix-theme .dx-treelist .dx-data-row.dx-state-hover > td {
    background-color: var(--color-gray-50, #f7fafc) !important;
}

/* Focus */
.dx-matrix-theme .dx-treelist .dx-row-focused > td {
    background-color: rgba(102, 126, 234, 0.06) !important;
    color: var(--color-gray-900, #1a202c);
}

.dx-matrix-theme .dx-treelist .dx-row-focused.dx-data-row > td {
    border-color: rgba(102, 126, 234, 0.15) !important;
}

/* Fixed columns */
.dx-matrix-theme .dx-treelist-content-fixed .dx-treelist-table {
    background: var(--color-white, #fff);
}

/* Expand/collapse icons */
.dx-matrix-theme .dx-treelist .dx-treelist-icon-container {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
}

.dx-matrix-theme .dx-treelist .dx-treelist-collapsed,
.dx-matrix-theme .dx-treelist .dx-treelist-expanded {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-width: 18px;
    min-height: 18px;
    margin-right: 2px;
}

.dx-matrix-theme .dx-treelist .dx-treelist-expanded .dx-icon {
    color: var(--palette-blue-primary, #4a90e2);
}

/* Outer border */
.dx-matrix-theme .dx-treelist {
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
}