/*
 * 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;
}

.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: 0 0 0 3px rgba(59, 130, 246, 0.1);
  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: white;
  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: rgba(255, 255, 255, 0.9);
}

.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: white;
}

/* ================================
 * 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: 0.3s;
  animation-timing-function: var(--gravity-ease-out);
}

.dx-popup-wrapper {
  animation-duration: 0.3s;
  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: 0.75rem;
  color: var(--gravity-text-secondary, #6b7280);
  margin-top: 0.25rem;
  line-height: 1.4;
}

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

@media (prefers-color-scheme: dark) {
  :root {
    --dx-color-background: #1f2937;
    --dx-color-text: #f3f4f6;
    --dx-color-border: #4b5563;
  }

  .dx-chart,
  .dx-piechart {
    background: #1f2937;
  }

  .dx-chart-tooltip {
    background: #374151;
    border-color: #4b5563;
    color: #f3f4f6;
  }

  .dx-popup-wrapper {
    background: #1f2937;
  }

  .dx-popup-title {
    background: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
  }

  .dx-popup-content {
    background: #1f2937;
    color: #f3f4f6;
  }
}