/* =============================================================================
   OrganicSystem — Popup / Lookup / MultiSelect selection chrome
   Shared ERP-style checkbox layout for DevExtreme overlays + in-grid selection.
   Theme tokens only — no hardcoded page-specific colors beyond overlay ink.
   ============================================================================= */

:root {
  --os-popup-checkbox-size: 18px;
  --os-popup-checkbox-column-width: 48px;
  --os-popup-list-checkbox-column-width: 52px;
  --os-popup-checkbox-border: rgba(0, 0, 0, 0.54);
  --os-popup-checkbox-checked-bg: var(--os-color-primary, #2f6fed);
  --os-popup-checkbox-checked-fg: var(--os-btn-text-on-fill);
  --os-popup-selection-hover-bg: color-mix(in srgb, var(--os-color-primary, #2f6fed) 12%, var(--os-color-form-control-bg));
  --os-popup-selection-selected-bg: color-mix(in srgb, var(--os-color-primary, #2f6fed) 18%, var(--os-color-form-control-bg));
  --os-popup-selection-ink: var(--os-color-input-text);
  --os-popup-surface: var(--os-color-form-control-bg);
  --os-popup-border: var(--os-color-form-border);
}

html[data-theme="dark"] {
  --os-surface-checkbox-border: rgba(255, 255, 255, 0.65);
  --os-surface-checkbox-checked-fg: var(--os-color-primary-light);
  /* Dark overlays — light ink */
  --os-popup-checkbox-border: rgba(255, 255, 255, 0.55);
  --os-popup-checkbox-checked-bg: var(--os-color-primary);
  --os-popup-checkbox-checked-fg: var(--os-color-text-inverse);
  --os-popup-selection-hover-bg: color-mix(in srgb, var(--os-color-primary) 18%, var(--os-color-surface));
  --os-popup-selection-selected-bg: color-mix(in srgb, var(--os-color-primary) 28%, var(--os-color-surface));
  --os-popup-selection-ink: var(--os-color-text);
  --os-popup-surface: var(--os-color-popup);
  --os-popup-border: var(--os-color-border);
}

/* ---------- Shared overlay hosts ---------- */
.dx-dropdowneditor-overlay,
.dx-header-filter-menu,
.dx-overlay-wrapper.dx-dropdowneditor-overlay,
.dx-overlay-wrapper[class*="-dropdown"],
.dx-overlay-wrapper[class*="-popup"]:has(.dx-list),
.dx-overlay-wrapper[class*="-popup"]:has(.dx-datagrid),
.dx-overlay-wrapper[class*="-popup"]:has(.dx-treeview) {
  --os-popup-local-ink: var(--os-popup-selection-ink);
}

/* ---------- List / TagBox / MultiSelect checkboxes ---------- */
.dx-list-item-before-bag.dx-list-select-checkbox-container,
.dx-list-item-before-bag.dx-list-select-radiobutton-container,
.dx-dropdowneditor-overlay .dx-list-item-before-bag.dx-list-select-checkbox-container,
.dx-header-filter-menu .dx-list-item-before-bag.dx-list-select-checkbox-container,
[class*="-dropdown"] .dx-list-item-before-bag.dx-list-select-checkbox-container,
[class*="-popup"] .dx-list-item-before-bag.dx-list-select-checkbox-container {
  width: var(--os-popup-list-checkbox-column-width) !important;
  min-width: var(--os-popup-list-checkbox-column-width) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  overflow: visible !important;
}

.dx-list-item-before-bag .dx-list-select-checkbox,
.dx-list-item-before-bag .dx-list-select-radiobutton,
.dx-dropdowneditor-overlay .dx-list-item-before-bag .dx-list-select-checkbox,
.dx-header-filter-menu .dx-list-item-before-bag .dx-list-select-checkbox,
[class*="-dropdown"] .dx-list-item-before-bag .dx-list-select-checkbox,
[class*="-popup"] .dx-list-item-before-bag .dx-list-select-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-inline-start: 12px !important;
  margin-inline-end: 0 !important;
  float: none !important;
  vertical-align: middle !important;
}

.dx-list-select-all,
.dx-dropdownlist-popup-wrapper .dx-list-select-all,
.dx-dropdowneditor-overlay .dx-list-select-all,
.dx-header-filter-menu .dx-list-select-all {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  min-height: 2rem;
  padding-inline: 0.65rem !important;
  box-sizing: border-box;
}

.dx-list-select-all-checkbox,
.dx-list-select-all .dx-checkbox {
  flex: 0 0 auto;
  margin: 0 !important;
}

.dx-list-select-all-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-list .dx-list-item,
.dx-dropdowneditor-overlay .dx-list .dx-list-item,
.dx-header-filter-menu .dx-list .dx-list-item {
  min-height: var(--os-list-item-min-height, 30px);
  align-items: center;
  box-sizing: border-box;
}

.dx-list .dx-list-item-content,
.dx-dropdowneditor-overlay .dx-list .dx-list-item-content,
.dx-header-filter-menu .dx-list .dx-list-item-content {
  padding-inline-start: 0.35rem !important;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
}

/* Entire row is the hit target; hover / selected states */
.dx-list.dx-list-select-decorator-enabled .dx-list-item,
.dx-dropdowneditor-overlay .dx-list .dx-list-item,
.dx-header-filter-menu .dx-list .dx-list-item,
[class*="-dropdown"] .dx-list .dx-list-item,
[class*="-popup"] .dx-list .dx-list-item {
  cursor: pointer;
}

.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-hover,
.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused,
.dx-dropdowneditor-overlay .dx-list .dx-list-item.dx-state-hover,
.dx-dropdowneditor-overlay .dx-list .dx-list-item.dx-state-focused,
.dx-header-filter-menu .dx-list .dx-list-item.dx-state-hover,
.dx-header-filter-menu .dx-list .dx-list-item.dx-state-focused {
  background-color: var(--os-popup-selection-hover-bg) !important;
}

.dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-list-item-selected,
.dx-dropdowneditor-overlay .dx-list .dx-list-item.dx-list-item-selected,
.dx-header-filter-menu .dx-list .dx-list-item.dx-list-item-selected {
  background-color: var(--os-popup-selection-selected-bg) !important;
}

/* ---------- Checkbox glyph size + theme colors (overlays) ---------- */
.dx-dropdowneditor-overlay .dx-checkbox-icon,
.dx-header-filter-menu .dx-checkbox-icon,
.dx-overlay-wrapper[class*="-dropdown"] .dx-checkbox-icon,
.dx-overlay-wrapper[class*="-popup"] .dx-checkbox-icon,
.dx-list-select-checkbox .dx-checkbox-icon,
.dx-list-select-all-checkbox .dx-checkbox-icon,
.dx-select-checkbox .dx-checkbox-icon {
  width: var(--os-popup-checkbox-size) !important;
  height: var(--os-popup-checkbox-size) !important;
  font-size: var(--os-popup-checkbox-size) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Unchecked: visible border on light popup surfaces */
.dx-dropdowneditor-overlay .dx-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
.dx-header-filter-menu .dx-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
.dx-overlay-wrapper[class*="-dropdown"] .dx-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
.dx-overlay-wrapper[class*="-popup"] .dx-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
.dx-list-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
.dx-list-select-all-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon {
  background-color: var(--os-popup-surface) !important;
  border: 2px solid var(--os-popup-checkbox-border) !important;
  color: transparent !important;
}

.dx-dropdowneditor-overlay .dx-checkbox-checked .dx-checkbox-icon,
.dx-header-filter-menu .dx-checkbox-checked .dx-checkbox-icon,
.dx-overlay-wrapper[class*="-dropdown"] .dx-checkbox-checked .dx-checkbox-icon,
.dx-overlay-wrapper[class*="-popup"] .dx-checkbox-checked .dx-checkbox-icon,
.dx-list-select-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.dx-list-select-all-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.dx-select-checkbox.dx-checkbox-checked .dx-checkbox-icon,
.dx-dropdowneditor-overlay .dx-checkbox-indeterminate .dx-checkbox-icon,
.dx-header-filter-menu .dx-checkbox-indeterminate .dx-checkbox-icon,
.dx-list-select-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon,
.dx-list-select-all-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon,
.dx-select-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
  background-color: var(--os-popup-checkbox-checked-bg) !important;
  border-color: var(--os-popup-checkbox-checked-bg) !important;
  color: var(--os-popup-checkbox-checked-fg) !important;
}

/* ---------- Grid selection column (lookups + in-page) ---------- */
.dx-datagrid-headers .dx-command-select,
.dx-datagrid-rowsview .dx-command-select,
.dx-datagrid .dx-command-select,
.dx-dropdowneditor-overlay .dx-command-select,
.dx-overlay-wrapper[class*="-dropdown"] .dx-command-select,
.dx-overlay-wrapper[class*="-popup"] .dx-command-select {
  width: var(--os-popup-checkbox-column-width) !important;
  min-width: var(--os-popup-checkbox-column-width) !important;
  max-width: var(--os-popup-checkbox-column-width) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.dx-datagrid-headers .dx-command-select .dx-select-checkbox,
.dx-datagrid-rowsview .dx-command-select .dx-select-checkbox,
.dx-dropdowneditor-overlay .dx-command-select .dx-select-checkbox,
.dx-overlay-wrapper[class*="-dropdown"] .dx-command-select .dx-select-checkbox,
.dx-overlay-wrapper[class*="-popup"] .dx-command-select .dx-select-checkbox {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Compact grid rows: do not clip the checkbox */
.dx-datagrid-rowsview .dx-data-row > td.dx-command-select,
.dx-datagrid-headers .dx-header-row > td.dx-command-select {
  overflow: visible !important;
  max-height: none !important;
}

/* ---------- TreeView selection ---------- */
.dx-treeview-item-with-checkbox > .dx-checkbox,
.dx-treeview-select-all-item .dx-checkbox,
.dx-dropdowneditor-overlay .dx-treeview-item-with-checkbox > .dx-checkbox,
.dx-header-filter-menu .dx-treeview-item-with-checkbox > .dx-checkbox {
  margin-inline-end: 0.4rem;
  vertical-align: middle;
}

.dx-treeview-item-with-checkbox .dx-treeview-item {
  padding-inline-start: 0.15rem;
}

/* ---------- Search box inside selection popups ---------- */
.dx-dropdowneditor-overlay .dx-list-search,
.dx-header-filter-menu .dx-list-search,
.dx-dropdowneditor-overlay .dx-texteditor,
.dx-header-filter-menu .dx-texteditor,
[class*="-dropdown"] .dx-list-search,
[class*="-popup"] .dx-list-search {
  margin: 0.35rem 0.5rem;
}

.dx-dropdowneditor-overlay .dx-list-search .dx-texteditor-input,
.dx-header-filter-menu .dx-list-search .dx-texteditor-input {
  padding-inline-start: 2rem !important;
}

/* ---------- Bootstrap modal selection lists ---------- */
.modal .form-check,
.dropdown-menu .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  margin: 0;
}

.modal .form-check-input,
.dropdown-menu .form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0;
  flex-shrink: 0;
  border-color: var(--os-popup-checkbox-border);
  background-color: var(--os-popup-surface);
}

.modal .form-check-input:checked,
.dropdown-menu .form-check-input:checked {
  background-color: var(--os-popup-checkbox-checked-bg);
  border-color: var(--os-popup-checkbox-checked-bg);
}

.modal .form-check-label,
.dropdown-menu .form-check-label {
  color: var(--os-color-text, inherit);
  line-height: 1.3;
}

/* ---------- Dark theme: in-page grid checkboxes on dark rows ---------- */
html[data-theme="dark"] .dx-datagrid-rowsview .dx-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-headers .dx-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon {
  background-color: transparent !important;
  border: 2px solid var(--os-surface-checkbox-border, rgba(255, 255, 255, 0.65)) !important;
  color: transparent !important;
}

html[data-theme="dark"] .dx-datagrid-rowsview .dx-select-checkbox.dx-checkbox-checked .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-headers .dx-select-checkbox.dx-checkbox-checked .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-select-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon,
html[data-theme="dark"] .dx-datagrid-headers .dx-select-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
  background-color: var(--os-popup-checkbox-checked-bg) !important;
  border-color: var(--os-popup-checkbox-checked-bg) !important;
  color: var(--os-popup-checkbox-checked-fg) !important;
}

/* Overlay grids must keep light-surface checkbox styling (override dark row rules) */
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] .dx-header-filter-menu .dx-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] [class*="-dropdown"] .dx-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] [class*="-popup"] .dx-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-list-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] .dx-header-filter-menu .dx-list-select-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] .dx-dropdowneditor-overlay .dx-list-select-all-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon,
html[data-theme="dark"] .dx-header-filter-menu .dx-list-select-all-checkbox:not(.dx-checkbox-checked):not(.dx-checkbox-indeterminate) .dx-checkbox-icon {
  background-color: var(--os-popup-surface) !important;
  border: 2px solid var(--os-popup-checkbox-border) !important;
  color: transparent !important;
}

/* Touch-friendly hit area without shrinking the column */
@media (pointer: coarse) {
  :root {
    --os-popup-checkbox-size: 20px;
    --os-popup-checkbox-column-width: 52px;
    --os-popup-list-checkbox-column-width: 56px;
    --os-list-item-min-height: 32px;
  }

  .dx-list .dx-list-item,
  .dx-list-select-all {
    min-height: var(--os-list-item-min-height, 32px);
  }
}