/*
 * Gravity UI - DevExpress Blazor Integration CSS
 *
 * This file provides CSS overrides to integrate DevExpress Blazor components
 * with the Gravity UI Design System, ensuring visual consistency across
 * hybrid component implementations.
 *
 * Purpose:
 * - Maps DevExpress CSS variables to Gravity UI design tokens
 * - Overrides DevExpress component styles to match Gravity UI appearance
 * - Provides dark mode support for DevExpress components
 * - Maintains DevExpress functionality while adopting Gravity UI aesthetics
 *
 * Usage:
 * Include this CSS file in applications that use both Gravity UI components
 * and DevExpress Blazor components to ensure visual consistency.
 *
 * Static Asset Path:
 * When consumed from the Gravity UI Components library, this file is available at:
 * _content/GravityUI.Components/css/gravity-devexpress-integration.css
 *
 * Integration:
 * <link href="_content/GravityUI.Components/css/gravity-devexpress-integration.css" rel="stylesheet" />
 *
 * Note: This file only overrides DevExpress styles - it does not define new
 * Gravity UI classes or modify core Gravity UI design system files.
 */

/* ================================
 * COLOR SYSTEM MAPPING
 * Map DevExpress CSS variables to Gravity UI design tokens
 * ================================ */

:root {
  /* Primary Brand Colors */
  --dx-color-primary: var(--gravity-brand-primary);
  --dx-color-primary-hover: var(--gravity-brand-primary-hover);
  --dx-color-primary-active: var(--gravity-brand-primary-active);

  /* Text Colors */
  --dx-color-text: var(--gravity-text-primary);
  --dx-color-text-secondary: var(--gravity-text-secondary);

  /* Border Colors */
  --dx-color-border: var(--gravity-border-color);

  /* Background Colors */
  --dx-color-background: var(--gravity-bg-primary);
  --dx-color-background-hover: var(--gravity-bg-hover);
}

/* ================================
 * FORM COMPONENTS
 * DevExpress form controls styled with Gravity UI design tokens
 * ================================ */

/* Gravity Form Layout wrapper for DevExpress components */
.gravity-dx-form {
  width: 100%;
  font-family: var(--gravity-font-family-primary);
}

.gravity-dx-form .dx-formlayout {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Ensure proper spacing for nested form layouts */
.gravity-form-layout .gravity-dx-form {
  margin: 0;
  padding: 0;
}

/* Vertically center form items when FormLayoutVerticalAlign.Center is set */
.gravity-form-layout-valign-center .dxbl-row {
  align-items: center;
}

.dx-formlayout {
  font-family: var(--gravity-font-family);
}

.dx-formlayout-group-caption {
  font-size: var(--gravity-font-size-h4);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
  margin-bottom: var(--gravity-space-3);
  border-bottom: 1px solid var(--gravity-border-color);
  padding-bottom: var(--gravity-space-2);
}

.dx-formlayout-item-caption {
  font-size: var(--gravity-font-size-body);
  font-weight: var(--gravity-font-weight-medium);
  color: var(--gravity-text-secondary);
  margin-bottom: var(--gravity-space-1);
}

.dx-formlayout-item {
  margin-bottom: var(--gravity-space-4);
}

/* Form Input Controls */
.dx-formlayout .dx-textbox,
.dx-formlayout .dx-combobox,
.dx-formlayout .dx-dateedit {
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-md);
  padding: var(--gravity-space-2) var(--gravity-space-3);
  font-size: var(--gravity-font-size-body);
  transition: var(--gravity-transition-base);
}

.dx-formlayout .dx-textbox:focus,
.dx-formlayout .dx-combobox:focus,
.dx-formlayout .dx-dateedit:focus {
  border-color: var(--gravity-brand-primary);
  box-shadow: var(--gravity-focus-ring);
  outline: none;
}

/* ================================
 * CHART COMPONENTS
 * DevExpress charts with Gravity UI color palette and typography
 * ================================ */

.dx-chart {
  font-family: var(--gravity-font-family);
}

.dx-chart-title {
  font-size: var(--gravity-font-size-h3);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

.dx-chart-axis-label {
  font-size: var(--gravity-font-size-small);
  color: var(--gravity-text-secondary);
}

.dx-chart-legend {
  font-size: var(--gravity-font-size-body);
  color: var(--gravity-text-primary);
}

/* Chart Color Palette - Using Gravity UI semantic colors */
.dx-chart-series-0 { color: var(--gravity-brand-primary); }
.dx-chart-series-1 { color: var(--gravity-success); }
.dx-chart-series-2 { color: var(--gravity-warning); }
.dx-chart-series-3 { color: var(--gravity-danger); }
.dx-chart-series-4 { color: var(--gravity-info); }

/* Chart Tooltips */
.dx-chart-tooltip {
  background: var(--gravity-bg-primary);
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-md);
  box-shadow: var(--gravity-shadow-lg);
  padding: var(--gravity-space-2) var(--gravity-space-3);
  font-size: var(--gravity-font-size-small);
}

/* ================================
 * PIE CHART COMPONENTS
 * ================================ */

.dx-piechart {
  font-family: var(--gravity-font-family);
}

.dx-piechart-title {
  font-size: var(--gravity-font-size-h3);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

/* ================================
 * TAG BOX COMPONENT
 * ================================ */

.dx-tagbox {
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-md);
  font-family: var(--gravity-font-family);
}

.dx-tagbox-tag {
  background: var(--gravity-bg-secondary);
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-sm);
  padding: var(--gravity-space-1) var(--gravity-space-2);
  font-size: var(--gravity-font-size-small);
  color: var(--gravity-text-primary);
  margin: var(--gravity-space-1);
}

.dx-tagbox-tag-remove-button {
  color: var(--gravity-text-tertiary);
  margin-left: var(--gravity-space-1);
}

.dx-tagbox-tag-remove-button:hover {
  color: var(--gravity-danger);
}

/* ================================
 * POPUP AND MODAL COMPONENTS
 * ================================ */

.dx-popup-wrapper {
  font-family: var(--gravity-font-family);
}

.dx-popup-title {
  background: var(--gravity-bg-primary);
  border-bottom: 1px solid var(--gravity-border-color);
  padding: var(--gravity-space-4);
  font-size: var(--gravity-font-size-h3);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

.dx-popup-content {
  background: var(--gravity-bg-primary);
  padding: var(--gravity-space-4);
}

.dx-popup-bottom {
  background: var(--gravity-bg-secondary);
  border-top: 1px solid var(--gravity-border-color);
  padding: var(--gravity-space-3) var(--gravity-space-4);
}

/* ================================
 * BUTTON COMPONENTS
 * DevExpress buttons within form layouts and popups
 * ================================ */

.dx-button {
  border-radius: var(--gravity-radius-md);
  font-family: var(--gravity-font-family);
  font-weight: var(--gravity-font-weight-medium);
  padding: var(--gravity-space-2) var(--gravity-space-4);
  transition: var(--gravity-transition-base);
}

.dx-button-mode-contained.dx-button-default {
  background: var(--gravity-brand-primary);
  color: var(--gravity-text-on-primary);
  border: none;
}

.dx-button-mode-contained.dx-button-default:hover {
  background: var(--gravity-brand-primary-hover);
}

.dx-button-mode-outlined {
  background: transparent;
  border: 1px solid var(--gravity-border-color);
  color: var(--gravity-text-primary);
}

.dx-button-mode-outlined:hover {
  background: var(--gravity-bg-hover);
}

/* ================================
 * LOADING INDICATOR
 * ================================ */

.dx-loadindicator-wrapper {
  background: var(--gravity-bg-overlay);
}

.dx-loadindicator-content {
  color: var(--gravity-brand-primary);
}

/* ================================
 * SCROLLBAR STYLING
 * ================================ */

.dx-scrollable-scrollbar {
  background: var(--gravity-bg-tertiary);
  border-radius: var(--gravity-radius-sm);
}

.dx-scrollable-scroll {
  background: var(--gravity-text-tertiary);
  border-radius: var(--gravity-radius-sm);
}

.dx-scrollable-scroll:hover {
  background: var(--gravity-text-secondary);
}

/* ================================
 * DROPDOWN AND COMBOBOX COMPONENTS
 * ================================ */

.dx-dropdowneditor-dropdown {
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-md);
  box-shadow: var(--gravity-shadow-lg);
  background: var(--gravity-bg-primary);
}

.dx-list-item {
  padding: var(--gravity-space-2) var(--gravity-space-3);
  font-size: var(--gravity-font-size-body);
  color: var(--gravity-text-primary);
  transition: var(--gravity-transition-base);
}

.dx-list-item:hover {
  background: var(--gravity-bg-hover);
}

.dx-list-item.dx-list-item-selected {
  background: var(--gravity-brand-primary);
  color: var(--gravity-text-on-primary);
}

/* ================================
 * DATA GRID COMPONENTS
 * ================================ */

.dx-datagrid {
  font-family: var(--gravity-font-family);
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-lg);
}

.dx-datagrid-headers {
  background: var(--gravity-bg-secondary);
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
}

.dx-datagrid-rowsview .dx-row {
  border-bottom: 1px solid var(--gravity-border-color);
}

.dx-datagrid-rowsview .dx-row:hover {
  background: var(--gravity-bg-hover);
}

/* ================================
 * ANIMATION TIMING
 * Use Gravity UI animation timing functions
 * ================================ */

.dx-overlay-wrapper {
  animation-duration: var(--gravity-duration-normal);
  animation-timing-function: var(--gravity-ease-out);
}

.dx-popup-wrapper {
  animation-duration: var(--gravity-duration-normal);
  animation-timing-function: var(--gravity-ease-out);
}

/* ================================
 * FORM LAYOUT ITEM HELP TEXT
 * Contextual help text beneath form fields
 * ================================ */

.gravity-form-item-help-text {
  font-size: var(--gravity-font-size-caption);
  color: var(--gravity-text-secondary);
  margin-top: var(--gravity-space-1);
  line-height: var(--gravity-line-height-tight);
}

/* Center content and help text within form item when CenterContent=true */
.gravity-form-item-center {
  text-align: center;
}

/* ================================
 * DARK MODE SUPPORT
 * Override variables for dark theme compatibility
 * ================================ */

/* Dark mode - application uses html[data-theme="dark"] via themeManager.
 * Also include prefers-color-scheme as fallback for users without an explicit choice. */
[data-theme="dark"] {
  --dx-color-background: var(--gravity-bg-primary);
  --dx-color-text: var(--gravity-text-primary);
  --dx-color-border: var(--gravity-border-color);
}

[data-theme="dark"] .dx-chart,
[data-theme="dark"] .dx-piechart {
  background: var(--gravity-bg-primary);
}

[data-theme="dark"] .dx-chart-tooltip {
  background: var(--gravity-bg-elevated);
  border-color: var(--gravity-border-color);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-popup-wrapper,
[data-theme="dark"] .dxbl-popup,
[data-theme="dark"] .dxbl-dropdown {
  background: var(--gravity-bg-primary);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-popup-title {
  background: var(--gravity-bg-primary);
  border-color: var(--gravity-border-color);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dx-popup-content {
  background: var(--gravity-bg-primary);
  color: var(--gravity-text-primary);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dx-color-background: var(--gravity-bg-primary);
    --dx-color-text: var(--gravity-text-primary);
    --dx-color-border: var(--gravity-border-color);
  }
}

/* ================================
 * GRAVITY NUMBER INPUT - DevExpress Override
 * Fix button group sizing that gets affected by DevExpress button styles
 * ================================ */

/* Stretch wrapper so button group matches input height */
.gravity-number-input-wrapper.gravity-number-input-with-buttons {
  align-items: stretch;
}

/* Compact buttons that flex to fill available height */
.gravity-number-button-group .gravity-number-button {
  flex: 1;
  padding: 0 0.375rem;  /* Component-specific: compact spacing for stacked buttons */
  min-height: 0;
}

/* Smaller icons for compact button group */
.gravity-number-button-group .gravity-number-button .gravity-icon {
  width: 12px;   /* Component-specific: extra-small icons for compact number buttons */
  height: 12px;
}

/* Fix button borders for stacked layout */
.gravity-number-button-group .gravity-number-button:first-child {
  border-bottom: none;
}

.gravity-number-button-group .gravity-number-button:last-child {
  margin-top: 0;
}

/* ================================
 * GRAVITY DATE PICKER - DevExpress DxDateEdit Integration
 * Style DxDateEdit to match Gravity UI design system
 *
 * CRITICAL: Use form-specific tokens from tokens.css:
 * - --gravity-form-element-height: 36px
 * - --gravity-form-element-padding-x: 12px
 * - --gravity-form-element-padding-y: 9px
 * - --gravity-input-radius: 4px
 * - --gravity-input-font-size: 14px
 * - --gravity-input-line-height: 18px
 * - --gravity-input-border-color: #6A7070
 * ================================ */

/* Wrapper for Gravity DatePicker using DxDateEdit */
.gravity-dx-datepicker {
  width: 100%;
}

/* GravityDateTimePicker: flex wrapper that places the datepicker and timezone label inline */
.gravity-datetimepicker-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* When inside the flex wrapper, let the datepicker be a flex child
   that shares space with the inline timezone label */
.gravity-datetimepicker-wrapper .gravity-dx-datepicker {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Timezone abbreviation label displayed inline next to the picker */
.gravity-datetimepicker-wrapper .gravity-timezone-label {
  flex: 0 0 auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gravity-text-secondary, #6b7280);
  white-space: nowrap;
  user-select: none;
}

/* Style the DxDateEdit input to match Gravity form inputs */
.gravity-dx-datepicker .dxbl-edit {
  width: 100%;
}

/* UNIFIED BORDER APPROACH:
 * Put the border on the dxbl-text-edit wrapper, not individual elements.
 * This ensures input, clear button (×), and calendar button all appear
 * as one unified control with a single border around the whole thing.
 * Height uses --gravity-form-element-height (44px for WCAG touch target compliance)
 */
.gravity-dx-datepicker .dxbl-text-edit {
  display: flex;
  align-items: stretch;
  height: var(--gravity-form-element-height);
  border: var(--gravity-input-border-width) solid var(--gravity-input-border-color);
  border-radius: var(--gravity-input-radius);
  background-color: var(--gravity-bg-primary);
  box-sizing: border-box;
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
  overflow: hidden;
}

/* Focus state on wrapper */
.gravity-dx-datepicker .dxbl-text-edit:focus-within {
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gravity-border-focus) 20%, transparent);
}

/* Hover state on wrapper */
.gravity-dx-datepicker .dxbl-text-edit:hover:not(:focus-within) {
  border-color: var(--gravity-border-focus);
}

/* Disabled state on wrapper */
.gravity-dx-datepicker.gravity-dx-datepicker-disabled .dxbl-text-edit {
  background-color: var(--gravity-input-disabled-bg);
  border-color: var(--gravity-input-disabled-border);
  cursor: not-allowed;
}

/* Style the actual input element - NO border, as wrapper has it */
.gravity-dx-datepicker .dxbl-text-edit-input {
  flex: 1;
  height: 100%;
  padding: var(--gravity-form-element-padding-y) var(--gravity-form-element-padding-x);
  border: none;
  border-radius: var(--gravity-input-radius) 0 0 var(--gravity-input-radius);
  font-size: var(--gravity-input-font-size);
  line-height: var(--gravity-input-line-height);
  font-family: var(--gravity-font-family-primary);
  background-color: transparent;
  color: var(--gravity-text-primary);
  box-sizing: border-box;
}

.gravity-dx-datepicker .dxbl-text-edit-input::placeholder {
  color: var(--gravity-text-muted);
  opacity: 1;
}

.gravity-dx-datepicker .dxbl-text-edit-input:focus {
  outline: none;
}

.gravity-dx-datepicker .dxbl-text-edit-input:disabled {
  background-color: transparent;
  color: var(--gravity-input-disabled-text);
  cursor: not-allowed;
}

/* Clear button (×) - NO border, inside the wrapper */
.gravity-dx-datepicker .dxbl-edit-btn-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--gravity-text-secondary);
  cursor: pointer;
  transition: color var(--gravity-transition-fast);
}

.gravity-dx-datepicker .dxbl-edit-btn-clear:hover {
  color: var(--gravity-text-primary);
}

/* Calendar dropdown button - NO outer border, separator line on left */
.gravity-dx-datepicker .dxbl-edit-btn-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 44px;
  border: none;
  border-left: var(--gravity-input-border-width) solid var(--gravity-input-border-color);
  border-radius: 0 calc(var(--gravity-input-radius) - 1px) calc(var(--gravity-input-radius) - 1px) 0;
  background-color: var(--gravity-bg-secondary);
  color: var(--gravity-text-secondary);
  transition: background-color var(--gravity-transition-fast), color var(--gravity-transition-fast);
  box-sizing: border-box;
}

.gravity-dx-datepicker .dxbl-edit-btn-dropdown:hover:not(:disabled) {
  background-color: var(--gravity-bg-muted);
  color: var(--gravity-text-primary);
}

.gravity-dx-datepicker .dxbl-edit-btn-dropdown:disabled {
  background-color: var(--gravity-input-disabled-bg);
  color: var(--gravity-input-disabled-text);
  cursor: not-allowed;
}

/* Calendar popup styling */
.dxbl-calendar {
  font-family: var(--gravity-font-family);
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-lg);
  box-shadow: var(--gravity-shadow-lg);
}

.dxbl-calendar-header {
  background: var(--gravity-bg-secondary);
  border-bottom: 1px solid var(--gravity-border-color);
}

.dxbl-calendar-day.dxbl-selected {
  background: var(--gravity-brand-primary);
  color: var(--gravity-text-on-primary);
}

.dxbl-calendar-day:hover:not(.dxbl-selected):not(.dxbl-disabled) {
  background: var(--gravity-bg-hover);
}

.dxbl-calendar-day.dxbl-today {
  font-weight: var(--gravity-font-weight-semibold);
  border: 1px solid var(--gravity-brand-primary);
}

/* Dark mode support for date picker - applied when the app sets data-theme="dark".
 * The app's themeManager uses an explicit toggle on the html element, so we target
 * that attribute directly rather than @media (prefers-color-scheme: dark) which
 * only fires when the OS is in dark mode. */
[data-theme="dark"] .gravity-dx-datepicker .dxbl-text-edit {
  background: var(--gravity-bg-primary);
  border-color: var(--gravity-border-color);
}

[data-theme="dark"] .gravity-dx-datepicker .dxbl-text-edit-input {
  color: var(--gravity-text-primary);
  background-color: transparent;
}

[data-theme="dark"] .gravity-dx-datepicker .dxbl-text-edit-input::placeholder {
  color: var(--gravity-text-muted);
}

[data-theme="dark"] .gravity-dx-datepicker .dxbl-edit-btn-dropdown {
  background: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-color);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .gravity-dx-datepicker .dxbl-edit-btn-dropdown:hover:not(:disabled) {
  background: var(--gravity-bg-hover);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .gravity-dx-datepicker .dxbl-edit-btn-clear {
  color: var(--gravity-text-secondary);
}

/* Calendar popup and time section - rendered to document body by DevExpress,
 * so rules must target the popup directly (not scoped under .gravity-dx-datepicker). */
[data-theme="dark"] .dxbl-calendar,
[data-theme="dark"] .dxbl-date-edit-dropdown,
[data-theme="dark"] .dxbl-date-edit-popup,
[data-theme="dark"] .dxbl-time-edit,
[data-theme="dark"] .dxbl-time-picker,
[data-theme="dark"] .dxbl-time-edit-dropdown {
  background: var(--gravity-bg-primary);
  border-color: var(--gravity-border-color);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dxbl-calendar-header,
[data-theme="dark"] .dxbl-calendar-footer {
  background: var(--gravity-bg-secondary);
  border-color: var(--gravity-border-color);
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dxbl-calendar-day,
[data-theme="dark"] .dxbl-calendar-day-header {
  color: var(--gravity-text-primary);
}

[data-theme="dark"] .dxbl-calendar-day.dxbl-calendar-other-month,
[data-theme="dark"] .dxbl-calendar-day.dxbl-disabled {
  color: var(--gravity-text-muted);
}

[data-theme="dark"] .dxbl-calendar-day:hover:not(.dxbl-selected):not(.dxbl-disabled) {
  background: var(--gravity-bg-hover);
}

[data-theme="dark"] .dxbl-calendar-day.dxbl-selected {
  background: var(--gravity-brand-primary);
  color: var(--gravity-text-on-primary);
}

[data-theme="dark"] .dxbl-time-edit-spin,
[data-theme="dark"] .dxbl-spin-edit {
  background: var(--gravity-bg-primary);
  color: var(--gravity-text-primary);
  border-color: var(--gravity-border-color);
}

[data-theme="dark"] .dxbl-btn,
[data-theme="dark"] .dxbl-button {
  color: var(--gravity-text-primary);
}

/* DxDateEdit dropdown dialog — DevExpress renders this via a custom <dxbl-popup-portal>
 * element portaled to document body. Its default theme uses hardcoded near-white
 * backgrounds set via very high-specificity selectors like:
 *   .dxbl-dropdown > .dxbl-dropdown-dialog.dxbl-edit-dropdown > .dxbl-edit-dropdown-body
 * Rather than chase the specificity war with matching selectors (which can break
 * when DevExpress updates internals), use !important on the theme-swap overrides.
 * This is intentional and scoped strictly to the dark theme. */
[data-theme="dark"] .dxbl-dropdown-dialog,
[data-theme="dark"] .dxbl-dropdown-dialog.dxbl-edit-dropdown,
[data-theme="dark"] .dxbl-edit-dropdown,
[data-theme="dark"] .dxbl-dropdown-body,
[data-theme="dark"] .dxbl-edit-dropdown-body,
[data-theme="dark"] .dxbl-edit-dropdown-footer,
[data-theme="dark"] .dxbl-modal-body,
[data-theme="dark"] .dxbl-modal-content,
[data-theme="dark"] .dxbl-popup.dxbl-edit-dropdown {
  background-color: var(--gravity-bg-primary) !important;
  border-color: var(--gravity-border-color) !important;
  color: var(--gravity-text-primary) !important;
}

/* Tab strip inside the date/time dropdown (Date/Time tabs) */
[data-theme="dark"] .dxbl-date-time-edit-tabs,
[data-theme="dark"] .dxbl-tabs-content,
[data-theme="dark"] .dxbl-tabs-tablist,
[data-theme="dark"] .dxbl-tabs-tablist ul,
[data-theme="dark"] .dxbl-tabs-tablist li,
[data-theme="dark"] .dxbl-tabs-item {
  background-color: var(--gravity-bg-primary) !important;
  color: var(--gravity-text-primary) !important;
  border-color: var(--gravity-border-color) !important;
}

/* Time picker rollers — the up/down scrolling number columns in DxDateEdit's time section.
 * Roller items are anchor tags inside `.dxbl-roller`. */
[data-theme="dark"] .dxbl-roller,
[data-theme="dark"] .dxbl-roller-container,
[data-theme="dark"] .dxbl-roller-wrapper,
[data-theme="dark"] .dxbl-date-time-edit-tabs .dxbl-roller {
  background-color: var(--gravity-bg-primary) !important;
  color: var(--gravity-text-primary) !important;
}

[data-theme="dark"] .dxbl-roller a,
[data-theme="dark"] .dxbl-roller-item,
[data-theme="dark"] .dxbl-edit-dropdown .dxbl-roller a {
  background-color: var(--gravity-bg-primary) !important;
  color: var(--gravity-text-secondary) !important;
}

[data-theme="dark"] .dxbl-roller a.dxbl-roller-selected-item,
[data-theme="dark"] .dxbl-roller-item.dxbl-roller-selected-item,
[data-theme="dark"] .dxbl-roller a:hover,
[data-theme="dark"] .dxbl-roller-item:hover {
  color: var(--gravity-text-primary) !important;
  background-color: var(--gravity-bg-hover) !important;
}

[data-theme="dark"] .dxbl-roller-before,
[data-theme="dark"] .dxbl-roller-after {
  background-color: var(--gravity-bg-primary) !important;
  color: var(--gravity-text-primary) !important;
  border-color: var(--gravity-border-color) !important;
}

/* Dropdown footer buttons (OK/Cancel). The default dxbl-btn-secondary uses white text
 * which creates white-on-white in dark mode. */
[data-theme="dark"] .dxbl-edit-dropdown-footer .dxbl-btn,
[data-theme="dark"] .dxbl-edit-dropdown-footer .dxbl-btn-secondary,
[data-theme="dark"] .dxbl-dropdown-dialog .dxbl-btn,
[data-theme="dark"] .dxbl-dropdown-dialog .dxbl-btn-secondary {
  background-color: var(--gravity-bg-secondary) !important;
  color: var(--gravity-text-primary) !important;
  border-color: var(--gravity-border-color) !important;
}

[data-theme="dark"] .dxbl-edit-dropdown-footer .dxbl-btn:hover:not(:disabled),
[data-theme="dark"] .dxbl-edit-dropdown-footer .dxbl-btn-secondary:hover:not(:disabled),
[data-theme="dark"] .dxbl-dropdown-dialog .dxbl-btn:hover:not(:disabled) {
  background-color: var(--gravity-bg-hover) !important;
  color: var(--gravity-text-primary) !important;
}

/* Calendar surface inside the dropdown */
[data-theme="dark"] .dxbl-calendar,
[data-theme="dark"] .dxbl-date-time-edit-calendar,
[data-theme="dark"] .dxbl-calendar-content {
  background-color: var(--gravity-bg-primary) !important;
  color: var(--gravity-text-primary) !important;
  border-color: var(--gravity-border-color) !important;
}

[data-theme="dark"] .dxbl-calendar-header,
[data-theme="dark"] .dxbl-calendar-footer {
  background-color: var(--gravity-bg-secondary) !important;
  color: var(--gravity-text-primary) !important;
  border-color: var(--gravity-border-color) !important;
}

[data-theme="dark"] .dxbl-calendar-week-number {
  color: var(--gravity-text-muted) !important;
}

[data-theme="dark"] .dxbl-calendar-days-of-week,
[data-theme="dark"] .dxbl-calendar-days-of-week td {
  background-color: var(--gravity-bg-secondary) !important;
  color: var(--gravity-text-secondary) !important;
}

[data-theme="dark"] .dxbl-calendar-day,
[data-theme="dark"] .dxbl-calendar-cell {
  background-color: transparent !important;
  color: var(--gravity-text-primary) !important;
}

[data-theme="dark"] .dxbl-calendar-day.dxbl-calendar-not-current-view {
  color: var(--gravity-text-muted) !important;
}

[data-theme="dark"] .dxbl-calendar-day.dxbl-calendar-selected,
[data-theme="dark"] .dxbl-calendar-day.dxbl-calendar-selected span,
[data-theme="dark"] .dxbl-calendar-cell.dxbl-calendar-selected {
  background-color: var(--gravity-brand-primary) !important;
  color: var(--gravity-text-on-primary) !important;
}

[data-theme="dark"] .dxbl-calendar-day:hover:not(.dxbl-calendar-selected):not(.dxbl-disabled) {
  background-color: var(--gravity-bg-hover) !important;
}

/* Calendar day cells wrap the number in an inner <a> that carries its own hardcoded
 * white background. Transparent-fy the anchor so the parent td's color shows through. */
[data-theme="dark"] .dxbl-calendar-day > a,
[data-theme="dark"] .dxbl-calendar-day a,
[data-theme="dark"] .dxbl-calendar-cell > a,
[data-theme="dark"] .dxbl-calendar-cell a {
  background-color: transparent !important;
  color: inherit !important;
}

[data-theme="dark"] .dxbl-calendar-day.dxbl-calendar-selected > a,
[data-theme="dark"] .dxbl-calendar-day.dxbl-calendar-selected a,
[data-theme="dark"] .dxbl-calendar-cell.dxbl-calendar-selected a {
  background-color: var(--gravity-brand-primary) !important;
  color: var(--gravity-text-on-primary) !important;
}

/* ================================
 * GRAVITY CURRICULUM TREE
 * DxTreeList with curriculum-specific styling
 * ================================ */

/* Tree container with border and rounded corners */
.gravity-curriculum-tree {
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-md);
  overflow: hidden;
  background: var(--gravity-bg-primary);
}

/* Style the DxTreeList within the container */
.gravity-curriculum-tree .gravity-dx-treelist {
  border: none;
  font-family: var(--gravity-font-family);
}

/* Alternating row colors for readability */
.gravity-curriculum-tree .dx-treelist-rowsview .dx-row:nth-child(even) {
  background: var(--gravity-bg-secondary);
}

/* Tree row hover state */
.gravity-curriculum-tree .dx-treelist-rowsview .dx-row:hover {
  background: var(--gravity-bg-hover);
}

/* Tree row selection state */
.gravity-curriculum-tree .dx-treelist-rowsview .dx-row.dx-selection {
  background: var(--gravity-brand-primary-light);
}

/* Tree node content container — single line: number + description */
.gravity-tree-node-content {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: var(--gravity-space-2);
  padding: var(--gravity-space-1) 0;
}

/* Primary description text */
.gravity-tree-node-description {
  font-weight: var(--gravity-font-weight-medium);
  color: var(--gravity-text-primary);
  line-height: var(--gravity-line-height-normal);
}

/* Extended description text (secondary) */
.gravity-tree-node-extended {
  font-size: var(--gravity-text-sm);
  color: var(--gravity-text-secondary);
  font-style: italic;
  line-height: var(--gravity-line-height-tight);
}

/* Level-specific visual differentiation */

/* Level 1 (root): Bold, larger text */
.gravity-curriculum-tree .dx-treelist-rowsview tr[data-level="1"] .gravity-tree-node-description,
.gravity-curriculum-tree .dx-treelist-rowsview .level-1 .gravity-tree-node-description {
  font-weight: var(--gravity-font-weight-semibold);
  font-size: var(--gravity-text-base);
}

/* Level 2: Medium weight */
.gravity-curriculum-tree .dx-treelist-rowsview tr[data-level="2"] .gravity-tree-node-description,
.gravity-curriculum-tree .dx-treelist-rowsview .level-2 .gravity-tree-node-description {
  font-weight: var(--gravity-font-weight-medium);
  font-size: var(--gravity-text-sm);
}

/* Level 3 (leaf): Normal weight, smaller text */
.gravity-curriculum-tree .dx-treelist-rowsview tr[data-level="3"] .gravity-tree-node-description,
.gravity-curriculum-tree .dx-treelist-rowsview .level-3 .gravity-tree-node-description {
  font-weight: var(--gravity-font-weight-normal);
  font-size: var(--gravity-text-sm);
}

/* Expand/collapse icons styling */
.gravity-curriculum-tree .dx-treelist-expanded .dx-treelist-icon-container .dx-treelist-collapsed-icon,
.gravity-curriculum-tree .dx-treelist-collapsed .dx-treelist-icon-container .dx-treelist-expanded-icon {
  color: var(--gravity-text-secondary);
}

.gravity-curriculum-tree .dx-treelist-expanded .dx-treelist-icon-container .dx-treelist-collapsed-icon:hover,
.gravity-curriculum-tree .dx-treelist-collapsed .dx-treelist-icon-container .dx-treelist-expanded-icon:hover {
  color: var(--gravity-brand-primary);
}

/* Header row styling */
.gravity-curriculum-tree .dx-treelist-headers {
  background: var(--gravity-bg-secondary);
  border-bottom: 1px solid var(--gravity-border-color);
}

.gravity-curriculum-tree .dx-treelist-headers .dx-header-row td {
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
  padding: var(--gravity-space-2) var(--gravity-space-3);
}

/* Cell padding — no borders between cells */
.gravity-curriculum-tree .dx-treelist-rowsview td {
  padding: var(--gravity-space-2) var(--gravity-space-3);
  vertical-align: middle;
  border-bottom: none;
}

/* Question count text in tree */
.gravity-tree-question-count {
  font-size: var(--gravity-font-size-sm);
  color: var(--gravity-text-secondary);
  white-space: nowrap;
}

/* Checkbox column alignment */
.gravity-curriculum-tree .dx-treelist-rowsview td:first-child {
  text-align: center;
}

/* Expand/collapse all toggle button in tree header
   Sized to match DevExpress's row-level expand buttons (44px) for horizontal alignment */
.gravity-tree-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  margin-left: -2px;
  border: none;
  border-radius: var(--gravity-radius-sm);
  background: transparent;
  color: var(--gravity-text-secondary);
  cursor: pointer;
  transition: background-color var(--gravity-transition-fast), color var(--gravity-transition-fast);
}

.gravity-tree-expand-toggle:hover {
  background: var(--gravity-bg-hover);
  color: var(--gravity-text-primary);
}

.gravity-tree-expand-toggle:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 2px;
}

/* Tree toolbar — positioned above DxTreeList to survive @key recreation */
.gravity-tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gravity-space-1) var(--gravity-space-3);
  padding-left: 7px; /* Match DxTreeList cell padding-left for alignment */
  background: var(--gravity-bg-secondary);
  border-bottom: 1px solid var(--gravity-border-color);
}

.gravity-tree-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-1);
}

.gravity-tree-toolbar-left .gravity-checkbox-wrapper {
  margin-bottom: 0;
  flex-shrink: 0;
}

.gravity-tree-toolbar-label {
  font-weight: var(--gravity-font-weight-semibold);
  color: var(--gravity-text-primary);
  font-size: var(--gravity-text-sm);
}

.gravity-tree-toolbar-right {
  display: flex;
  align-items: center;
}

/* Hide column headers when toolbar replaces them */
.gravity-dx-treelist-no-headers .dxbl-grid-header-row {
  display: none;
}

/* DxTreeList: align expand chevron vertically with cell content.
   DevExpress renders the expand-controls-container as a float:left div (height ~40px)
   and the cell text as a bare text node sibling. The text flows at the top of the cell
   while the floated container occupies 40px, causing vertical misalignment.
   Fix: use flexbox on the td to make the floated container and text node align as
   flex items. Flex layout neutralizes float (CSS spec: floats are ignored in flex). */
.dxbl-grid-tree-node-expand-controls-cell {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
}

/* No results message when search matches nothing */
.gravity-tree-no-results {
  padding: var(--gravity-space-6) var(--gravity-space-4);
  text-align: center;
  color: var(--gravity-text-secondary);
  font-size: var(--gravity-text-sm);
}

/* Legacy: Topic header with inline checkbox (kept for backwards compatibility) */
.gravity-tree-topic-header {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-3);
  padding-left: var(--gravity-space-3);
  flex-wrap: nowrap;
}

.gravity-tree-topic-header .gravity-checkbox-wrapper {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* Search filter in topic column header */
.gravity-tree-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Search icon (magnifying glass) via pseudo-element */
.gravity-tree-search::before {
  content: "";
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.gravity-tree-search-input {
  height: 28px;
  width: 180px;
  padding: var(--gravity-space-1) var(--gravity-space-3) var(--gravity-space-1) var(--gravity-space-7);
  padding-right: var(--gravity-space-7);
  font-size: var(--gravity-text-sm);
  font-family: var(--gravity-font-family);
  border: 1px solid var(--gravity-border-color);
  border-radius: var(--gravity-radius-sm);
  background: var(--gravity-bg-primary);
  color: var(--gravity-text-primary);
  outline: none;
  transition: border-color var(--gravity-transition-fast), box-shadow var(--gravity-transition-fast);
}

.gravity-tree-search-input::placeholder {
  color: var(--gravity-text-tertiary);
}

.gravity-tree-search-input:focus {
  border-color: var(--gravity-border-focus);
  box-shadow: 0 0 0 2px var(--gravity-focus-ring);
}

.gravity-tree-search-clear {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--gravity-radius-sm);
  background: transparent;
  color: var(--gravity-text-secondary);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: background-color var(--gravity-transition-fast), color var(--gravity-transition-fast);
}

.gravity-tree-search-clear:hover {
  background: var(--gravity-bg-hover);
  color: var(--gravity-text-primary);
}

.gravity-tree-search-clear:focus-visible {
  outline: 2px solid var(--gravity-border-focus);
  outline-offset: 1px;
}

/* Topic cell with inline checkbox - WCAG compliant (24x24 touch target) */
.gravity-tree-topic-cell {
  display: flex;
  align-items: center;
  gap: var(--gravity-space-1);
}

.gravity-tree-topic-cell .gravity-checkbox-wrapper.gravity-checkbox-inline {
  margin-bottom: 0;
  flex-shrink: 0;
  align-self: center;
}

/* Vertically center tree cell content with expand chevrons and checkboxes.
   Must match DevExpress specificity: .dxbl-grid .dxbl-grid-table > tbody > tr > td */
.gravity-dx-treelist .dxbl-grid-table > tbody > tr > td {
  vertical-align: middle;
  border-bottom: none;
}

.gravity-tree-topic-cell .gravity-tree-node-content {
  flex: 1;
  min-width: 0; /* Allow text wrapping */
}

/* Legacy checkbox cell centering (kept for backwards compatibility) */
.gravity-tree-checkbox-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Checkbox column styling */
.gravity-tree-checkbox-column {
  vertical-align: middle;
}

/* Remove bottom margin from checkboxes in tree cells */
.gravity-tree-checkbox-cell .gravity-checkbox-wrapper {
  margin-bottom: 0;
}

/* Dark mode support for curriculum tree */
@media (prefers-color-scheme: dark) {
  .gravity-curriculum-tree {
    background: var(--gravity-bg-primary);
    border-color: var(--gravity-border-color);
  }

  .gravity-curriculum-tree .dx-treelist-headers {
    background: var(--gravity-bg-secondary);
    border-color: var(--gravity-border-color);
  }

  .gravity-curriculum-tree .dx-treelist-rowsview .dx-row:hover {
    background: var(--gravity-bg-hover);
  }

  .gravity-tree-node-description {
    color: var(--gravity-text-primary);
  }

  .gravity-tree-node-extended {
    color: var(--gravity-text-secondary);
  }
}

/* ================================
 * CURRICULUM TREE - MODAL CONTAINER
 * ================================
 * Provides a scrollable container for the curriculum tree
 * when displayed inside a modal dialog. Uses design token
 * spacing and maintains consistent scroll behavior.
 */
.gravity-curriculum-tree-modal-container {
  max-height: 400px;
  overflow-y: auto;
}