/**
 * DevExtreme Fluent Theme - Custom CSS Variables
 * Public API: --dxds-* variables are stable and upgrade-safe
 * 
 * Theme Combinations:
 * 1. Light + Compact (default)
 * 2. Light + Normal
 * 3. Dark + Compact
 * 4. Dark + Normal
 * 
 * Documentation: 
 * https://docs.devexpress.com/Blazor/405705/styling-and-themes/fluent-theme-customization/fluent-css-variables
 */

/* ============================================
   LIGHT THEME - COMPACT & NORMAL (Default)
   Base variables for both compact and normal
   ============================================ */
:root {
  /* Neutral Colors (Backgrounds, Surfaces, Text) */
  --dxds-neutral-10: #fafafa;   /* Lightest background */
  --dxds-neutral-20: #f5f5f5;   /* Surface */
  --dxds-neutral-30: #eeeeee;   /* Hover surface */
  --dxds-neutral-40: #e0e0e0;   /* Border */
  --dxds-neutral-250: #1a1a1a;  /* Primary text */
  --dxds-neutral-200: #333333;  /* Secondary text */
  --dxds-neutral-150: #666666;  /* Tertiary text */
  
  /* Primary Colors (Brand/Accent) */
  --dxds-primary-80: #0078d4;   /* Primary action */
  --dxds-primary-100: #005a9e;  /* Primary hover */
  
  /* Spacing - COMPACT (smaller spacing) */
  --dxds-spacing-XS: 4px;
  --dxds-spacing-S: 8px;
  --dxds-spacing-M: 12px;
  --dxds-spacing-L: 16px;
  --dxds-spacing-XL: 20px;
}

/* ============================================
   DARK THEME - COMPACT (.dx-swatch-additional-dark)
   VS Code Dark Theme colors
   ============================================ */
.dx-swatch-additional-dark {
  /* Neutral Colors - VS Code Dark Theme */
  --dxds-neutral-10: #252526;   /* Main background (VS Code dark) */
  --dxds-neutral-20: #2d2d2d;   /* Surface (slightly lighter) */
  --dxds-neutral-30: #3e3e42;   /* Hover surface */
  --dxds-neutral-40: #404040;   /* Border */
  --dxds-neutral-250: #e6e6e6;  /* Primary text */
  --dxds-neutral-200: #cccccc;  /* Secondary text */
  --dxds-neutral-150: #999999;  /* Tertiary text */
  
  /* Primary Colors (Keep default or customize) */
  --dxds-primary-80: #0078d4;
  --dxds-primary-100: #005a9e;
  
  /* Success, Warning, Danger (Optional overrides) */
  --dxds-success-80: #6a9955;
  --dxds-warning-80: #ce9178;
  --dxds-danger-80: #f48771;
  
  /* Spacing - COMPACT (same as light) */
  --dxds-spacing-XS: 4px;
  --dxds-spacing-S: 8px;
  --dxds-spacing-M: 12px;
  --dxds-spacing-L: 16px;
  --dxds-spacing-XL: 20px;
}

/* ============================================
   LIGHT THEME - NORMAL (Larger spacing)
   Applied when compact theme is disabled
   ============================================ */
body:not(.compact-theme) {
  /* Spacing - NORMAL (larger spacing) */
  --dxds-spacing-XS: 8px;
  --dxds-spacing-S: 12px;
  --dxds-spacing-M: 16px;
  --dxds-spacing-L: 24px;
  --dxds-spacing-XL: 32px;
  
  /* Optional: Larger font sizes for normal theme */
  --dxds-font-size-base: 14px;
  --dxds-font-size-small: 12px;
  --dxds-font-size-large: 16px;
}

/* ============================================
   DARK THEME - NORMAL (Larger spacing)
   Dark theme with normal spacing
   ============================================ */
body.dx-swatch-additional-dark:not(.compact-theme) {
  /* Same colors as dark compact */
  /* Spacing - NORMAL (larger spacing) */
  --dxds-spacing-XS: 8px;
  --dxds-spacing-S: 12px;
  --dxds-spacing-M: 16px;
  --dxds-spacing-L: 24px;
  --dxds-spacing-XL: 32px;
  
  /* Optional: Larger font sizes for normal theme */
  --dxds-font-size-base: 14px;
  --dxds-font-size-small: 12px;
  --dxds-font-size-large: 16px;
}

/* ============================================
   LAYOUT UTILITIES (Using DevExtreme Variables)
   Responsive flex layouts without inline styles
   ============================================ */

/* Container - Full height flex column */
.dx-container-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  flex: 1;
  min-height: 0; /* Critical for flex children to shrink properly */
}

/* Top Panel - Filters and actions area (Removed - using dx-toolbar directly) */

/* Flex Row - Horizontal layout with gap (nowrap for filters) */
.dx-flex-row {
  display: flex;
  align-items: center;
  gap: var(--dxds-spacing-S);
  flex-wrap: nowrap;
  overflow-x: auto; /* Responsive: scroll on small screens */
}

/* Force DevExtreme components to inline in flex rows */
.dx-flex-row > dx-select-box,
.dx-flex-row > dx-text-box,
.dx-flex-row > dx-button {
  flex-shrink: 0;
}

.dx-flex-row dx-select-box,
.dx-flex-row dx-text-box {
  display: inline-block !important;
}

/* Form Container - Scrollable content area */
.dx-form-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--dxds-spacing-L);
}

/* Form Actions - Bottom action bar */
.dx-form-actions {
  padding: var(--dxds-spacing-L);
  border-top: 1px solid var(--dxds-neutral-40);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--dxds-spacing-S);
}

/* ============================================
   COMPONENT-SPECIFIC OVERRIDES (Minimal!)
   Only use if CSS variables don't cover it
   ============================================ */

/* DataGrid - Use CSS variables */
.dx-datagrid {
  background-color: var(--dxds-neutral-10);
  color: var(--dxds-neutral-250);
}

.dx-datagrid .dx-row {
  background-color: var(--dxds-neutral-10);
}

.dx-datagrid .dx-row:hover {
  background-color: var(--dxds-neutral-20);
}

.dx-datagrid .dx-header-row {
  background-color: var(--dxds-neutral-20);
  color: var(--dxds-neutral-250);
}

/* TreeView - Use CSS variables */
.dx-treeview {
  background-color: var(--dxds-neutral-10);
  color: var(--dxds-neutral-250);
}

.dx-treeview-item:hover {
  background-color: var(--dxds-neutral-20);
}

.dx-treeview-item-selected {
  background-color: var(--dxds-neutral-30);
}

/* ACE Editor - Use CSS variables */
.ace_editor {
  background-color: var(--dxds-neutral-10) !important;
  color: var(--dxds-neutral-250) !important;
}

.ace_gutter {
  background-color: var(--dxds-neutral-20) !important;
  color: var(--dxds-neutral-150) !important;
}

/* Scrollbars - Use CSS variables */
::-webkit-scrollbar-track {
  background-color: var(--dxds-neutral-10);
}

::-webkit-scrollbar-thumb {
  background-color: var(--dxds-neutral-40);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--dxds-neutral-150);
}