/* Synctab global theme tokens */
:root,
html[data-theme="light"] {
    color-scheme: light;
    --app-bg: #f5f7fb;
    --app-surface: #ffffff;
    --app-surface-alt: #f8fafc;
    --app-hover: #eef5ff;
    --app-border: #e6e8ee;
    --app-text: #0f172a;
    --app-text-muted: #64748b;
    --app-primary: #2473de;
    --app-primary-hover: #1d4ed8;
    --app-primary-soft: #eff6ff;
    --app-shadow: 0 10px 30px rgba(2, 6, 23, .08);
    --app-input-bg: #ffffff;
    --app-table-head-bg: #f1f6ff;
    --app-success: #10b981;
    --app-warning: #f59e0b;
    --app-danger: #ef4444;

    /* Compatibility with existing Synctab CSS variables */
    --bg: var(--app-bg);
    --card: var(--app-surface);
    --border: var(--app-border);
    --text: var(--app-text);
    --letra: #192967;
    --muted: var(--app-text-muted);
    --accent: var(--app-primary);
    --accent-weak: rgba(36, 115, 222, .12);
    --primary-color: var(--app-primary);
    --principal-color: var(--app-primary);
    --hover-color: #3b82f6;
    --border-color: rgba(36, 115, 222, .35);
    --primary-oscuro: #192967;
    --color-gris: #f8f9fa;
    --color-oscuro: rgba(0, 0, 0, .1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #020813;
    --app-surface: #061224;
    --app-surface-alt: #0c1e38;
    --app-hover: #0c1e38;
    --app-border: #16253b;
    --app-text: #e2e8f0;
    --app-text-muted: #93a4bb;
    --app-primary: #505bf9;
    --app-primary-hover: #737dfa;
    --app-primary-soft: rgba(80, 91, 249, .16);
    --app-shadow: 0 18px 42px rgba(0, 0, 0, .28);
    --app-input-bg: #020813;
    --app-table-head-bg: #020813;
    --app-success: #10b981;
    --app-warning: #f59e0b;
    --app-danger: #ef4444;

    /* Compatibility with existing Synctab CSS variables */
    --bg: var(--app-bg);
    --card: var(--app-surface);
    --border: var(--app-border);
    --text: var(--app-text);
    --letra: var(--app-text);
    --muted: var(--app-text-muted);
    --accent: var(--app-primary);
    --accent-weak: rgba(80, 91, 249, .18);
    --primary-color: var(--app-primary);
    --principal-color: var(--app-primary);
    --hover-color: var(--app-primary-hover);
    --border-color: rgba(80, 91, 249, .35);
    --primary-oscuro: var(--app-text);
    --color-gris: var(--app-surface);
    --color-oscuro: rgba(226, 232, 240, .14);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.app.app-light {
    background:
        radial-gradient(circle at top left, rgba(80, 91, 249, .12), transparent 34rem),
        var(--app-bg);
    color: var(--app-text);
}

body,
.app-topbar,
.app-sidebar,
.footer,
.card,
.modal-content,
.dropdown-menu,
.page-header,
.form-control,
.form-select,
.table {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

html[data-theme="dark"] .app-topbar,
html[data-theme="dark"] .footer {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .app-content,
html[data-theme="dark"] main {
    background: transparent;
    color: var(--app-text);
}

html[data-theme="dark"] .app-sidebar {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

html[data-theme="dark"] .app-sidebar .nav-link,
html[data-theme="dark"] .app-sidebar .nav-toggle,
html[data-theme="dark"] .app-sidebar .nav-sublink,
html[data-theme="dark"] .app-sidebar .nav-label,
html[data-theme="dark"] .app-sidebar .nav-icon,
html[data-theme="dark"] .app-sidebar .caret,
html[data-theme="dark"] .app-sidebar .text-primary {
    color: #ffffff !important;
}

html[data-theme="dark"] .app-sidebar .nav-section {
    color: rgba(255, 255, 255, .68);
}

html[data-theme="dark"] .app-sidebar .nav-link:hover,
html[data-theme="dark"] .app-sidebar .nav-link:focus,
html[data-theme="dark"] .app-sidebar .nav-sublink:hover,
html[data-theme="dark"] .app-sidebar .nav-sublink:focus {
    background: rgba(255, 255, 255, .08);
    color: #ffffff !important;
}

html[data-theme="dark"] .app-sidebar .nav-link.active,
html[data-theme="dark"] .app-sidebar .nav-group.open > .nav-toggle {
    background: rgba(255, 255, 255, .12);
    color: #ffffff !important;
}

html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .user-btn {
    background: var(--app-surface-alt);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    box-shadow: var(--app-shadow);
}

html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .user-btn:hover {
    background: var(--app-hover);
}

html[data-theme="dark"] .icon-btn i,
html[data-theme="dark"] .topbar-actions .icon-btn i {
    color: var(--app-text) !important;
}

html[data-theme="dark"] .text-primary,
html[data-theme="dark"] a {
    color: var(--app-primary-hover) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted {
    color: var(--app-text-muted) !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card-home,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .chart-container,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--app-text);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--app-hover);
    color: var(--app-text);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .input-group-text {
    background: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .table,
html[data-theme="dark"] table {
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] thead,
html[data-theme="dark"] th {
    background: var(--app-table-head-bg);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] td,
html[data-theme="dark"] th {
    border-color: var(--app-border);
}

html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(255, 255, 255, .025);
    color: var(--app-text);
}

html[data-theme="dark"] .btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary);
}

html[data-theme="dark"] .btn-primary:hover {
    background-color: var(--app-primary-hover) !important;
    border-color: var(--app-primary-hover);
}

html[data-theme="dark"] .page-header {
    background: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .page-header__title {
    color: var(--app-text);
}

html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .page-header__subtitle {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .page-header__icon {
    background: var(--app-primary-soft);
    border-color: rgba(80, 91, 249, .35);
    color: var(--app-primary-hover);
}

html[data-theme="dark"] .page-header::before {
    background: linear-gradient(180deg, var(--app-primary), #00d2ff);
}

html[data-theme="dark"] .footer a {
    color: var(--app-primary-hover) !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--app-border);
}

html[data-theme="dark"] .alert {
    border-color: var(--app-border);
}

/* DevExtreme / DevExpress dark visual bridge */
html[data-theme="dark"] .dx-widget,
html[data-theme="dark"] .dx-datagrid,
html[data-theme="dark"] .dx-pivotgrid,
html[data-theme="dark"] .dx-treeview,
html[data-theme="dark"] .dx-toolbar,
html[data-theme="dark"] .dx-popup-content,
html[data-theme="dark"] .dx-overlay-content,
html[data-theme="dark"] .dx-card {
    background-color: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid,
html[data-theme="dark"] .dx-pivotgrid,
html[data-theme="dark"] .dx-popup-wrapper > .dx-overlay-content {
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-datagrid-headers,
html[data-theme="dark"] .dx-datagrid-headers .dx-datagrid-table .dx-row > td,
html[data-theme="dark"] .dx-pivotgrid-horizontal-headers,
html[data-theme="dark"] .dx-pivotgrid-vertical-headers,
html[data-theme="dark"] .dx-pivotgrid-fields-area {
    background-color: var(--app-table-head-bg);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-datagrid-rowsview,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row,
html[data-theme="dark"] .dx-pivotgrid-area,
html[data-theme="dark"] .dx-pivotgrid-area-data {
    background-color: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-alt > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-alt {
    background-color: rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row:hover > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row:hover,
html[data-theme="dark"] .dx-list-item.dx-state-hover,
html[data-theme="dark"] .dx-treeview-item.dx-state-hover {
    background-color: var(--app-hover);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid .dx-row > td,
html[data-theme="dark"] .dx-pivotgrid .dx-area-description-cell,
html[data-theme="dark"] .dx-pivotgrid td {
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-texteditor,
html[data-theme="dark"] .dx-texteditor-container,
html[data-theme="dark"] .dx-dropdowneditor-input-wrapper,
html[data-theme="dark"] .dx-checkbox-icon {
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-texteditor-input,
html[data-theme="dark"] .dx-placeholder,
html[data-theme="dark"] .dx-searchbox .dx-texteditor-input {
    color: var(--app-text);
}

html[data-theme="dark"] .dx-placeholder::before {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .dx-button,
html[data-theme="dark"] .dx-pager,
html[data-theme="dark"] .dx-pages,
html[data-theme="dark"] .dx-page {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-search-panel,
html[data-theme="dark"] .dx-header-filter-menu,
html[data-theme="dark"] .dx-menu-base,
html[data-theme="dark"] .dx-context-menu {
    background-color: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-state-focused,
html[data-theme="dark"] .dx-state-active {
    border-color: var(--app-primary);
}

html[data-theme="dark"] .dx-link,
html[data-theme="dark"] .dx-icon {
    color: var(--app-primary-hover);
}

/* ── DataGrid: filter row ─────────────────────────────────────── */
html[data-theme="dark"] .dx-datagrid-filter-row,
html[data-theme="dark"] .dx-datagrid-filter-row .dx-editor-cell,
html[data-theme="dark"] .dx-datagrid-filter-row > td {
    background-color: var(--app-surface-alt);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-datagrid-filter-row .dx-texteditor,
html[data-theme="dark"] .dx-datagrid-filter-row .dx-texteditor-input {
    background-color: var(--app-input-bg);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-filter-row .dx-menu,
html[data-theme="dark"] .dx-datagrid-filter-row .dx-menu-item,
html[data-theme="dark"] .dx-datagrid-filter-row .dx-menu-item-content {
    background-color: var(--app-surface-alt);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .dx-datagrid-filter-row .dx-editor-cell .dx-state-focused {
    background-color: rgba(80, 91, 249, .12);
}

/* ── DataGrid: search panel + highlight ──────────────────────── */
html[data-theme="dark"] .dx-datagrid-search-panel {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-datagrid-search-panel .dx-texteditor-input {
    background-color: var(--app-input-bg);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-search-text {
    background-color: rgba(80, 91, 249, .30);
    color: var(--app-text);
}

/* ── DataGrid: header filter icons + popup ────────────────────── */
html[data-theme="dark"] .dx-datagrid .dx-header-filter,
html[data-theme="dark"] .dx-datagrid .dx-header-filter-empty {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .dx-header-filter-menu,
html[data-theme="dark"] .dx-header-filter-menu .dx-overlay-content,
html[data-theme="dark"] .dx-header-filter-menu .dx-popup-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-header-filter-menu .dx-list-item,
html[data-theme="dark"] .dx-header-filter-menu .dx-list-item-content,
html[data-theme="dark"] .dx-header-filter-menu .dx-list {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-header-filter-menu .dx-list-item.dx-state-hover,
html[data-theme="dark"] .dx-header-filter-menu .dx-list-item.dx-list-item-selected {
    background-color: var(--app-hover);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-header-filter-menu .dx-checkbox-icon {
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-header-filter-menu .dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
}

html[data-theme="dark"] .dx-header-filter-menu .dx-popup-title {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

/* ── DataGrid: selected row + focused row ────────────────────── */
html[data-theme="dark"] .dx-datagrid-rowsview .dx-selection.dx-row > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td {
    background-color: rgba(80, 91, 249, .18);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused) {
    background-color: rgba(80, 91, 249, .24);
    color: var(--app-text);
    border-color: rgba(80, 91, 249, .45);
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td.dx-focused {
    background-color: rgba(80, 91, 249, .35);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-row-focused.dx-data-row {
    box-shadow: inset 3px 0 0 var(--app-primary);
}

/* ── DataGrid: column chooser popup ─────────────────────────── */
html[data-theme="dark"] .dx-datagrid-column-chooser .dx-overlay-content,
html[data-theme="dark"] .dx-datagrid-column-chooser .dx-popup-content,
html[data-theme="dark"] .dx-datagrid-column-chooser .dx-popup-title {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-column-chooser .dx-treeview,
html[data-theme="dark"] .dx-datagrid-column-chooser .dx-treeview-item,
html[data-theme="dark"] .dx-datagrid-column-chooser .dx-treeview-item-content {
    background-color: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-column-chooser .dx-treeview-item.dx-state-hover {
    background-color: var(--app-hover);
}

html[data-theme="dark"] .dx-datagrid-column-chooser .dx-checkbox-icon {
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
}

/* ── DataGrid: pager + toolbar ───────────────────────────────── */
html[data-theme="dark"] .dx-datagrid-header-panel,
html[data-theme="dark"] .dx-datagrid-header-panel .dx-toolbar {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-pager {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-pager .dx-page-index,
html[data-theme="dark"] .dx-pager .dx-page-size,
html[data-theme="dark"] .dx-pager .dx-navigate-button,
html[data-theme="dark"] .dx-pager .dx-info {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .dx-pager .dx-page.dx-selection {
    background-color: var(--app-primary);
    color: #ffffff;
    border-color: var(--app-primary);
}

/* ── DataGrid: general popup (context menus, dropdowns) ──────── */
html[data-theme="dark"] .dx-popup-wrapper .dx-overlay-content,
html[data-theme="dark"] .dx-popup-wrapper .dx-popup-title,
html[data-theme="dark"] .dx-popup-wrapper .dx-popup-content,
html[data-theme="dark"] .dx-popup-wrapper .dx-popup-bottom {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-context-menu .dx-menu-item,
html[data-theme="dark"] .dx-context-menu .dx-menu-item-content,
html[data-theme="dark"] .dx-context-menu .dx-menu-item-text {
    background-color: var(--app-surface);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-context-menu .dx-menu-item.dx-state-hover > .dx-menu-item-content {
    background-color: var(--app-hover);
}

html[data-theme="dark"] .dx-list,
html[data-theme="dark"] .dx-list-item,
html[data-theme="dark"] .dx-list-item-content {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-scrollable-container,
html[data-theme="dark"] .dx-scrollbar-vertical .dx-scrollable-scroll,
html[data-theme="dark"] .dx-scrollbar-horizontal .dx-scrollable-scroll {
    background-color: rgba(255, 255, 255, .12);
}

/* ── PivotGrid: headers, data area, totals ────────────────────── */
html[data-theme="dark"] .dx-pivotgrid .dx-column-header,
html[data-theme="dark"] .dx-pivotgrid .dx-data-header,
html[data-theme="dark"] .dx-pivotgrid .dx-area-description-cell.dx-pivotgrid-background,
html[data-theme="dark"] .dx-pivotgrid-background {
    background-color: var(--app-surface-alt);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-pivotgrid-area-data td {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-pivotgrid .dx-grandtotal,
html[data-theme="dark"] .dx-pivotgrid .dx-total {
    background-color: var(--app-surface-alt);
    color: var(--app-text);
    font-weight: 700;
}

html[data-theme="dark"] .dx-pivotgrid .dx-row-total > td,
html[data-theme="dark"] .dx-pivotgrid .dx-col-total > td {
    background-color: rgba(80, 91, 249, .10);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-pivotgrid td.dx-state-hover {
    background-color: var(--app-hover);
    cursor: pointer;
}

html[data-theme="dark"] .dx-pivotgrid td.dx-pivotgrid-expanded,
html[data-theme="dark"] .dx-pivotgrid td.dx-pivotgrid-collapsed {
    color: var(--app-primary-hover);
}

/* ── PivotGrid: field panel ───────────────────────────────────── */
html[data-theme="dark"] .dx-pivotgrid .dx-pivotgrid-fields-area-head,
html[data-theme="dark"] .dx-pivotgrid .dx-area-fields {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text-muted);
}

html[data-theme="dark"] .dx-pivotgrid .dx-area-field,
html[data-theme="dark"] .dx-pivotgrid .dx-area-field-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-pivotgrid .dx-area-field.dx-state-hover,
html[data-theme="dark"] .dx-pivotgrid .dx-area-field.dx-state-focused {
    background-color: var(--app-hover);
    border-color: var(--app-primary);
    color: var(--app-text);
}

/* ── PivotGrid: field chooser popup ───────────────────────────── */
html[data-theme="dark"] .dx-pivotgridfieldchooser,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-popup-content,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-popup-title,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-overlay-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-list,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-list-item,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-list-item-content {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-list-item.dx-state-hover {
    background-color: var(--app-hover);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-list-item.dx-list-item-selected {
    background-color: rgba(80, 91, 249, .18);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-header,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-area-caption {
    background-color: var(--app-surface-alt);
    color: var(--app-text-muted);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-area-field,
html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-area-field-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-pivotgridfieldchooser .dx-area-field.dx-state-hover {
    background-color: var(--app-hover);
    border-color: var(--app-primary);
}

/* ── TagBox / SelectBox / DropDownList ────────────────────────── */
html[data-theme="dark"] .dx-tagbox .dx-tag,
html[data-theme="dark"] .dx-tagbox .dx-tag-content {
    background-color: rgba(80, 91, 249, .22);
    color: var(--app-text);
    border-color: rgba(80, 91, 249, .40);
}

html[data-theme="dark"] .dx-tagbox .dx-tag-remove-button {
    color: var(--app-text-muted);
}

html[data-theme="dark"] .dx-tagbox .dx-tag-remove-button:hover {
    color: var(--app-danger);
}

html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-overlay-content,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-popup-content {
    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-list-item-checkbox .dx-checkbox-icon {
    background-color: var(--app-input-bg);
    border-color: var(--app-border);
}

html[data-theme="dark"] .dx-checkbox-checked .dx-checkbox-icon,
html[data-theme="dark"] .dx-checkbox-indeterminate .dx-checkbox-icon {
    background-color: var(--app-primary);
    border-color: var(--app-primary);
    color: #ffffff;
}

/* ── General: focus outline, loading indicator ────────────────── */
html[data-theme="dark"] .dx-datagrid .dx-state-focused > .dx-editor-cell,
html[data-theme="dark"] .dx-datagrid .dx-editor-cell.dx-focused .dx-texteditor {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 2px rgba(80, 91, 249, .25);
}

html[data-theme="dark"] .dx-loadindicator-segment-inner,
html[data-theme="dark"] .dx-loadpanel-indicator .dx-loadindicator-segment-inner {
    background-color: var(--app-primary);
}

html[data-theme="dark"] .dx-loadpanel-content,
html[data-theme="dark"] .dx-loadpanel-content-wrapper {
    background-color: var(--app-surface-alt);
    border-color: var(--app-border);
    color: var(--app-text);
}

html[data-theme="dark"] .dx-datagrid-nodata,
html[data-theme="dark"] .dx-pivotgrid-nodata {
    color: var(--app-text-muted);
}