/* =============================================================================
   OrganicSystem — Global portal / overlay theme catch-all (FINAL)
   Body-portaled DX/Bootstrap menus, modals, tooltips, calendars, lists.
   Token-driven only. Load AFTER popup + dropdown + selection sheets.
   ============================================================================= */

/* Master contract: overlays inherit active theme classes stamped by os-theme.js */
html.os-theme-dark,
html[data-theme="dark"],
body.os-theme-dark,
body[data-theme="dark"] {
  color-scheme: dark;
}

html.os-theme-light,
html[data-theme="light"],
body.os-theme-light,
body[data-theme="light"] {
  color-scheme: light;
}

/*
  Catch-all for ANY DevExtreme overlay content (dropdown, popup, popover,
  tooltip, load panel chrome, context menu) — even when class markers are missing.
  Does not change layout, z-index, or behavior.
*/
html[data-theme] .dx-overlay-wrapper > .dx-overlay-content,
html[data-theme] .dx-overlay-content.dx-popup-normal,
html[data-theme] .dx-overlay-content.dx-popup-draggable,
html[data-theme] .dx-overlay-content.dx-dropdowneditor-overlay,
html[data-theme] .dx-overlay-content.dx-context-menu,
html[data-theme] .dx-tooltip-wrapper .dx-overlay-content,
html[data-theme] .dx-popover-wrapper .dx-overlay-content,
html[data-theme] .dx-loadpanel-content,
.os-theme-dark.dx-overlay-wrapper > .dx-overlay-content,
.os-theme-dark.dx-overlay-content,
.os-theme-light.dx-overlay-wrapper > .dx-overlay-content,
.os-theme-light.dx-overlay-content {
  background-color: var(--os-modal-bg, var(--os-color-popup, var(--os-color-surface))) !important;
  color: var(--os-text, var(--os-color-text)) !important;
  border-color: var(--os-border, var(--os-color-border)) !important;
}

/* Opened dropdown / list / lookup surfaces inside any overlay */
html[data-theme] .dx-overlay-wrapper .dx-popup-content,
html[data-theme] .dx-overlay-wrapper .dx-list,
html[data-theme] .dx-overlay-wrapper .dx-scrollable,
html[data-theme] .dx-overlay-wrapper .dx-scrollable-content,
html[data-theme] .dx-overlay-wrapper .dx-treeview,
html[data-theme] .dx-overlay-wrapper .dx-menu-items-container {
  background-color: var(--os-dropdown-bg, var(--os-color-dropdown, var(--os-color-surface))) !important;
  color: var(--os-dropdown-text, var(--os-color-text)) !important;
  border-color: var(--os-dropdown-border, var(--os-color-border)) !important;
}

html[data-theme] .dx-overlay-wrapper .dx-list-item,
html[data-theme] .dx-overlay-wrapper .dx-list-item-content,
html[data-theme] .dx-overlay-wrapper .dx-treeview-item,
html[data-theme] .dx-overlay-wrapper .dx-menu-item,
html[data-theme] .dx-overlay-wrapper .dx-menu-item-text {
  color: var(--os-dropdown-text, var(--os-color-text)) !important;
}

html[data-theme] .dx-overlay-wrapper .dx-list-item.dx-state-hover,
html[data-theme] .dx-overlay-wrapper .dx-list-item.dx-state-focused,
html[data-theme] .dx-overlay-wrapper .dx-menu-item.dx-state-hover,
html[data-theme] .dx-overlay-wrapper .dx-treeview-item.dx-state-hover {
  background-color: var(--os-dropdown-hover, var(--os-popup-selection-hover-bg)) !important;
  color: var(--os-dropdown-text, var(--os-color-text)) !important;
}

html[data-theme] .dx-overlay-wrapper .dx-list-item.dx-list-item-selected,
html[data-theme] .dx-overlay-wrapper .dx-list-item.dx-state-selected {
  background-color: var(--os-dropdown-selected, var(--os-popup-selection-selected-bg)) !important;
  color: var(--os-dropdown-text, var(--os-color-text)) !important;
}

/* Tables / grids inside popups & lookup overlays */
html[data-theme] .dx-overlay-wrapper .dx-datagrid,
html[data-theme] .dx-overlay-wrapper .dx-datagrid-headers,
html[data-theme] .dx-overlay-wrapper .dx-datagrid-rowsview,
html[data-theme] .modal .dx-datagrid,
html[data-theme] .modal-content .dx-datagrid {
  background-color: var(--os-table-bg, var(--os-color-grid)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

html[data-theme] .dx-overlay-wrapper .dx-datagrid-headers .dx-header-row > td,
html[data-theme] .modal .dx-datagrid-headers .dx-header-row > td {
  background-color: var(--os-table-header, var(--os-color-grid-header)) !important;
  color: var(--os-table-header-text, var(--os-color-grid-header-text)) !important;
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

html[data-theme] .dx-overlay-wrapper .dx-datagrid-rowsview .dx-data-row > td,
html[data-theme] .modal .dx-datagrid-rowsview .dx-data-row > td {
  background-color: var(--os-table-row, var(--os-color-grid-body)) !important;
  color: var(--os-table-text, var(--os-color-text)) !important;
  border-color: var(--os-table-border, var(--os-color-border)) !important;
}

html[data-theme] .dx-overlay-wrapper .dx-datagrid-rowsview .dx-data-row:hover > td,
html[data-theme] .modal .dx-datagrid-rowsview .dx-data-row:hover > td {
  background-color: var(--os-table-row-hover, var(--os-color-grid-hover)) !important;
}

/* Calendar / date picker body */
html[data-theme] .dx-datebox-wrapper .dx-calendar,
html[data-theme] .dx-overlay-wrapper .dx-calendar,
html[data-theme] .dx-calendar {
  background-color: var(--os-color-calendar-bg, var(--os-color-popup)) !important;
  color: var(--os-color-calendar-cell-text, var(--os-color-text)) !important;
  border-color: var(--os-color-calendar-border, var(--os-color-border)) !important;
}

/* Bootstrap / app portaled menus & dialogs */
html[data-theme] .dropdown-menu,
html[data-theme] .dropdown-menu.show,
html[data-theme] .popover,
html[data-theme] .tooltip .tooltip-inner,
html[data-theme] .modal-content,
html[data-theme] .offcanvas,
html[data-theme] .os-export-progress-modal,
html[data-theme] .os-confirm-dialog,
html[data-theme] .swal2-popup {
  background-color: var(--os-modal-bg, var(--os-color-modal, var(--os-color-surface))) !important;
  color: var(--os-text, var(--os-color-text)) !important;
  border-color: var(--os-border, var(--os-color-border)) !important;
}

html[data-theme] .modal-header,
html[data-theme] .offcanvas-header {
  background-color: var(--os-popup-header-bg, var(--os-modal-bg, var(--os-color-modal))) !important;
  color: var(--os-popup-header-fg, var(--os-text, var(--os-color-text))) !important;
  border-color: var(--os-border, var(--os-color-border)) !important;
}

html[data-theme] .modal-footer,
html[data-theme] .offcanvas-footer {
  background-color: var(--os-popup-footer-bg, var(--os-surface-secondary, var(--os-color-surface-muted))) !important;
  color: var(--os-text, var(--os-color-text)) !important;
  border-color: var(--os-border, var(--os-color-border)) !important;
}

html[data-theme] .modal-backdrop,
html[data-theme] .offcanvas-backdrop,
html[data-theme] .dx-overlay-shader,
html[data-theme] .os-export-progress-overlay {
  --bs-backdrop-bg: #000;
  background-color: var(--os-modal-overlay, var(--os-color-overlay)) !important;
}

/* Form controls inside any portal */
html[data-theme] .dx-overlay-wrapper .dx-texteditor,
html[data-theme] .dx-overlay-wrapper .dx-texteditor-input,
html[data-theme] .modal .form-control,
html[data-theme] .modal .form-select,
html[data-theme] .modal-content .form-control,
html[data-theme] .modal-content .form-select {
  background-color: var(--os-input-bg, var(--os-color-form-control-bg)) !important;
  color: var(--os-input-text, var(--os-color-input-text)) !important;
  border-color: var(--os-input-border, var(--os-color-form-border)) !important;
}

/* Native <select> opened list follows color-scheme; closed control uses tokens */
html[data-theme] select,
html[data-theme] select.form-select,
html[data-theme] .form-select {
  background-color: var(--os-input-bg, var(--os-color-form-control-bg));
  color: var(--os-input-text, var(--os-color-input-text));
  border-color: var(--os-input-border, var(--os-color-form-border));
  color-scheme: inherit;
}

/* Scrollbars in portals */
html[data-theme] .dx-overlay-wrapper .dx-scrollable-container,
html[data-theme] .dropdown-menu,
html[data-theme] .modal-body,
html[data-theme] .os-export-progress-modal {
  scrollbar-width: thin;
  scrollbar-color: var(--os-scroll-thumb, color-mix(in srgb, var(--os-color-text) 40%, transparent))
    var(--os-scroll-track, transparent);
}

html[data-theme] .dx-overlay-wrapper .dx-scrollable-container::-webkit-scrollbar,
html[data-theme] .dropdown-menu::-webkit-scrollbar,
html[data-theme] .modal-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme] .dx-overlay-wrapper .dx-scrollable-container::-webkit-scrollbar-thumb,
html[data-theme] .dropdown-menu::-webkit-scrollbar-thumb,
html[data-theme] .modal-body::-webkit-scrollbar-thumb {
  background: var(--os-scroll-thumb, color-mix(in srgb, var(--os-color-text) 40%, transparent));
  border-radius: 8px;
}

html[data-theme] .dx-overlay-wrapper .dx-scrollable-container::-webkit-scrollbar-track,
html[data-theme] .dropdown-menu::-webkit-scrollbar-track,
html[data-theme] .modal-body::-webkit-scrollbar-track {
  background: var(--os-scroll-track, transparent);
}

/* Do not paint the invisible overlay host itself */
html[data-theme] .dx-overlay-wrapper.dx-state-invisible > .dx-overlay-content {
  /* keep themed for when it becomes visible; no layout change */
}