/* 
 * Compact Windows 10 Inspired CSS Framework
 * A lightweight CSS library with reduced padding for dense desktop applications
 * Designed for enterprise web applications with Windows 10 Fluent Design look and feel
 */

/* ----------------- CSS Reset ----------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ----------------- Variables ----------------- */
:root {
  /* Colors - Windows 10 Fluent Design */
  --dx-primary: #0078d4;
  --dx-primary-light: #e3f2fd;
  --dx-primary-dark: #106ebe;
  --dx-primary-hover: #106ebe;
  --dx-primary-pressed: #005a9e;
  --dx-secondary: #605e5c;
  --dx-secondary-light: #f3f2f1;
  --dx-success: #107c10;
  --dx-danger: #d13438;
  --dx-warning: #ff8c00;
  --dx-info: #0078d4;
  --dx-light: #faf9f8;
  --dx-dark: #323130;
  --dx-text: #323130;
  --dx-text-muted: #605e5c;
  --dx-border: #e1dfdd;
  --dx-disabled: #f3f2f1;
  --dx-accent: #0078d4;

  /* Surfaces and backgrounds */
  --dx-surface: #ffffff;
  --dx-surface-alt: #faf9f8;
  --dx-surface-secondary: #f3f2f1;
  --dx-surface-tertiary: #edebe9;
  --dx-surface-card: #ffffff;
  
  /* Typography - Windows 10 Segoe UI */
  --dx-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --dx-font-size-base: 13px;
  --dx-font-size-sm: 11px;
  --dx-font-size-lg: 14px;
  --dx-font-size-xl: 16px;
  --dx-font-weight-normal: 400;
  --dx-font-weight-semibold: 600;
  --dx-line-height: 1.3;

  /* Compact Spacing - Reduced for desktop density */
  --dx-spacing-1: 2px;
  --dx-spacing-2: 4px;
  --dx-spacing-3: 6px;
  --dx-spacing-4: 8px;
  --dx-spacing-5: 10px;
  --dx-spacing-6: 12px;
  --dx-spacing-8: 16px;

  /* Borders and radius */
  --dx-border-radius: 2px;
  --dx-border-radius-lg: 4px;
  --dx-border-width: 1px;
  --dx-focus-ring: 0 0 0 1px rgba(0, 120, 212, 0.4);

  /* Compact Components */
  --dx-input-height: 24px;
  --dx-btn-height: 24px;
  --dx-btn-padding-x: 8px;
  --dx-navbar-height: 36px;
  
  /* Elevation and shadows */
  --dx-shadow-2: 0 1px 3px rgba(0, 0, 0, 0.11), 0 1px 2px rgba(0, 0, 0, 0.13);
  --dx-shadow-4: 0 2px 4px rgba(0, 0, 0, 0.11), 0 2px 8px rgba(0, 0, 0, 0.13);
  --dx-shadow-8: 0 4px 8px rgba(0, 0, 0, 0.11), 0 4px 16px rgba(0, 0, 0, 0.13);
  --dx-shadow-16: 0 8px 16px rgba(0, 0, 0, 0.11), 0 8px 32px rgba(0, 0, 0, 0.13);
  
  /* Animation and transitions */
  --dx-transition-fast: 0.1s cubic-bezier(0.1, 0.9, 0.2, 1);
  --dx-transition-normal: 0.2s cubic-bezier(0.1, 0.9, 0.2, 1);
  --dx-transition-slow: 0.3s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* ----------------- Base ----------------- */
html {
  font-size: 13px;
  font-family: var(--dx-font-family);
  line-height: var(--dx-line-height);
  color: var(--dx-text);
}

body {
  background-color: var(--dx-surface-alt);
  margin: 0;
  padding: var(--dx-spacing-3);
  font-weight: var(--dx-font-weight-normal);
}

/* ----------------- Typography ----------------- */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--dx-spacing-4);
  font-weight: var(--dx-font-weight-semibold);
  line-height: 1.2;
}

h1 { font-size: 1.75rem; font-weight: 100; margin-bottom: var(--dx-spacing-5); }
h2 { font-size: 1.5rem; font-weight: 300; margin-bottom: var(--dx-spacing-4); }
h3 { font-size: 1.25rem; font-weight: 400; margin-bottom: var(--dx-spacing-4); }
h4 { font-size: 1.125rem; font-weight: var(--dx-font-weight-semibold); }
h5 { font-size: 1rem; font-weight: var(--dx-font-weight-semibold); }
h6 { font-size: 0.875rem; font-weight: var(--dx-font-weight-semibold); }

p {
  margin-bottom: var(--dx-spacing-4);
  margin-top: 0;
}

/* ----------------- Navbar - Compact Windows 10 Style ----------------- */
.dx-navbar {
  background: var(--dx-surface);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  height: var(--dx-navbar-height);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: var(--dx-shadow-2);
  padding: 0 var(--dx-spacing-4);
  backdrop-filter: blur(20px);
}

.dx-navbar-static {
  position: static;
  margin-bottom: var(--dx-spacing-4);
}

.dx-navbar-brand {
  font-size: var(--dx-font-size-lg);
  font-weight: var(--dx-font-weight-semibold);
  color: var(--dx-accent);
  padding: 0 var(--dx-spacing-4);
  margin-right: var(--dx-spacing-4);
}

.dx-navbar-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--dx-spacing-1);
}

.dx-nav-item {
  display: inline-flex;
  align-items: center;
}

.dx-nav-item a {
  color: var(--dx-text);
  text-decoration: none;
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  height: calc(var(--dx-navbar-height) - 8px);
  display: flex;
  align-items: center;
  transition: background-color var(--dx-transition-fast);
  border-radius: var(--dx-border-radius);
  font-weight: var(--dx-font-weight-normal);
  font-size: var(--dx-font-size-base);
}

.dx-nav-item a:hover {
  background-color: var(--dx-surface-secondary);
}

.dx-nav-item.dx-active a {
  color: var(--dx-accent);
  background-color: var(--dx-primary-light);
  font-weight: var(--dx-font-weight-semibold);
}

.dx-navbar-actions {
  margin-left: auto;
  padding: 0 var(--dx-spacing-3);
  display: flex;
  gap: var(--dx-spacing-2);
}

/* ----------------- Form Controls - Compact Windows 10 Style ----------------- */
.dx-form-group {
  margin-bottom: var(--dx-spacing-4);
}

.dx-label {
  display: block;
  margin-bottom: var(--dx-spacing-2);
  font-weight: var(--dx-font-weight-semibold);
  font-size: var(--dx-font-size-base);
  color: var(--dx-text);
}

.dx-input, .dx-select {
  display: block;
  width: 100%;
  height: var(--dx-input-height);
  padding: 0 var(--dx-spacing-3);
  font-size: var(--dx-font-size-base);
  line-height: var(--dx-line-height);
  color: var(--dx-text);
  background-color: var(--dx-surface);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius);
  transition: border-color var(--dx-transition-fast), box-shadow var(--dx-transition-fast);
  margin: var(--dx-spacing-1) 0;
  font-family: var(--dx-font-family);
}

.dx-input:focus, .dx-select:focus {
  border-color: var(--dx-accent);
  outline: none;
  box-shadow: var(--dx-focus-ring);
}

.dx-input:hover, .dx-select:hover {
  border-color: var(--dx-text-muted);
}

.dx-input::placeholder {
  color: var(--dx-text-muted);
}

.dx-input:disabled, .dx-select:disabled {
  background-color: var(--dx-disabled);
  color: var(--dx-text-muted);
  cursor: not-allowed;
  border-color: var(--dx-border);
}

.dx-select {
  padding-right: var(--dx-spacing-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23605e5c' d='M5 6L0 1h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--dx-spacing-3) center;
  background-size: 10px 6px;
  appearance: none;
  cursor: pointer;
}

.dx-checkbox, .dx-radio {
  display: flex;
  align-items: center;
  margin-bottom: var(--dx-spacing-3);
  padding: var(--dx-spacing-1) 0;
}

.dx-checkbox-input, .dx-radio-input {
  margin-right: var(--dx-spacing-3);
}

.dx-checkbox-label, .dx-radio-label {
  font-size: var(--dx-font-size-base);
  cursor: pointer;
  color: var(--dx-text);
}

/* Compact Windows 10 checkbox styling */
.dx-checkbox-input {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dx-text-muted);
  border-radius: var(--dx-border-radius);
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 var(--dx-spacing-2) 0 0;
  background-color: var(--dx-surface);
  transition: all var(--dx-transition-fast);
}

.dx-checkbox-input:hover {
  border-color: var(--dx-accent);
}

.dx-checkbox-input:checked {
  background-color: var(--dx-accent);
  border-color: var(--dx-accent);
}

.dx-checkbox-input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.dx-checkbox-input:focus {
  box-shadow: var(--dx-focus-ring);
}

/* Compact Windows 10 radio styling */
.dx-radio-input {
  position: relative;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dx-text-muted);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 var(--dx-spacing-2) 0 0;
  background-color: var(--dx-surface);
  transition: all var(--dx-transition-fast);
}

.dx-radio-input:hover {
  border-color: var(--dx-accent);
}

.dx-radio-input:checked {
  border-color: var(--dx-accent);
}

.dx-radio-input:checked::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dx-accent);
}

.dx-radio-input:focus {
  box-shadow: var(--dx-focus-ring);
}

/* ----------------- Buttons - Compact Windows 10 Fluent Style ----------------- */
.dx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dx-btn-height);
  padding: 0 var(--dx-btn-padding-x);
  font-size: var(--dx-font-size-base);
  font-weight: var(--dx-font-weight-semibold);
  font-family: var(--dx-font-family);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius);
  background-color: var(--dx-surface);
  color: var(--dx-text);
  transition: all var(--dx-transition-fast);
  margin: var(--dx-spacing-1) var(--dx-spacing-2) var(--dx-spacing-1) 0;
  text-decoration: none;
  box-shadow: var(--dx-shadow-2);
}

.dx-btn:focus {
  outline: none;
  box-shadow: var(--dx-focus-ring);
}

.dx-btn:hover {
  background-color: var(--dx-surface-secondary);
  border-color: var(--dx-text-muted);
  box-shadow: var(--dx-shadow-4);
}

.dx-btn:active {
  background-color: var(--dx-surface-tertiary);
  box-shadow: var(--dx-shadow-2);
  transform: translateY(1px);
}

.dx-btn:disabled {
  opacity: 0.6;
  background-color: var(--dx-disabled);
  border-color: var(--dx-border);
  color: var(--dx-text-muted);
  pointer-events: none;
  box-shadow: none;
}

.dx-btn-primary {
  color: white;
  background-color: var(--dx-primary);
  border-color: var(--dx-primary);
}

.dx-btn-primary:hover {
  background-color: var(--dx-primary-hover);
  border-color: var(--dx-primary-hover);
}

.dx-btn-primary:active {
  background-color: var(--dx-primary-pressed);
  border-color: var(--dx-primary-pressed);
}

.dx-btn-secondary {
  color: var(--dx-text);
  background-color: var(--dx-surface-secondary);
  border-color: var(--dx-border);
}

.dx-btn-secondary:hover {
  background-color: var(--dx-surface-tertiary);
}

.dx-btn-success {
  color: white;
  background-color: var(--dx-success);
  border-color: var(--dx-success);
}

.dx-btn-success:hover {
  background-color: #0e6e0e;
  border-color: #0e6e0e;
}

.dx-btn-danger {
  color: white;
  background-color: var(--dx-danger);
  border-color: var(--dx-danger);
}

.dx-btn-danger:hover {
  background-color: #b02e31;
  border-color: #b02e31;
}

.dx-btn-sm {
  height: 20px;
  font-size: var(--dx-font-size-sm);
  padding: 0 var(--dx-spacing-2);
}

.dx-btn-lg {
  height: 32px;
  font-size: var(--dx-font-size-lg);
  padding: 0 var(--dx-spacing-5);
}

.dx-btn-icon {
  width: var(--dx-btn-height);
  padding: 0;
}

.dx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Button groups */
.dx-btn-group {
  display: flex;
  gap: var(--dx-spacing-2);
  margin: var(--dx-spacing-2) 0;
}

.dx-btn-group .dx-btn {
  margin: 0;
}

/* ----------------- Cards - Compact Windows 10 Fluent Style ----------------- */
.dx-card {
  background-color: var(--dx-surface-card);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius-lg);
  box-shadow: var(--dx-shadow-2);
  margin: var(--dx-spacing-4) 0;
  overflow: hidden;
}

.dx-card:hover {
  box-shadow: var(--dx-shadow-4);
  transition: box-shadow var(--dx-transition-normal);
}

.dx-card-header {
  padding: var(--dx-spacing-3) var(--dx-spacing-4);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  background-color: var(--dx-surface-alt);
  font-weight: var(--dx-font-weight-semibold);
  font-size: var(--dx-font-size-base);
}

.dx-card-body {
  padding: var(--dx-spacing-4);
}

.dx-card-footer {
  padding: var(--dx-spacing-3) var(--dx-spacing-4);
  border-top: var(--dx-border-width) solid var(--dx-border);
  background-color: var(--dx-surface-alt);
}

/* ----------------- Data Grid - Compact Windows 10 Style ----------------- */
.dx-grid-container {
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius-lg);
  background-color: var(--dx-surface);
  overflow: hidden;
  margin: var(--dx-spacing-4) 0;
  box-shadow: var(--dx-shadow-2);
}

.dx-grid-header {
  display: flex;
  background-color: var(--dx-surface-alt);
  font-weight: var(--dx-font-weight-semibold);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  font-size: var(--dx-font-size-base);
}

.dx-grid-header-cell {
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  border-right: var(--dx-border-width) solid var(--dx-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.dx-grid-header-cell:last-child {
  border-right: none;
}

.dx-grid-row {
  display: flex;
  border-bottom: var(--dx-border-width) solid var(--dx-surface-secondary);
  transition: background-color var(--dx-transition-fast);
}

.dx-grid-row:nth-child(even) {
  background-color: var(--dx-surface-alt);
}

.dx-grid-row:hover {
  background-color: var(--dx-primary-light);
}

.dx-grid-row.dx-selected {
  background-color: rgba(0, 120, 212, 0.1);
  border-color: var(--dx-accent);
}

.dx-grid-cell {
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  border-right: var(--dx-border-width) solid var(--dx-surface-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  font-size: var(--dx-font-size-base);
}

.dx-grid-cell:last-child {
  border-right: none;
}

/* ----------------- Tabs - Compact Windows 10 Style ----------------- */
.dx-tabs {
  display: flex;
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  background-color: var(--dx-surface);
  margin: var(--dx-spacing-4) 0 0 0;
  gap: var(--dx-spacing-1);
}

.dx-tab {
  padding: var(--dx-spacing-2) var(--dx-spacing-4);
  cursor: pointer;
  border: var(--dx-border-width) solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  background-color: transparent;
  transition: all var(--dx-transition-fast);
  border-radius: var(--dx-border-radius) var(--dx-border-radius) 0 0;
  font-weight: var(--dx-font-weight-normal);
  color: var(--dx-text-muted);
  font-size: var(--dx-font-size-base);
}

.dx-tab:hover {
  background-color: var(--dx-surface-secondary);
  color: var(--dx-text);
}

.dx-tab.dx-active {
  background-color: var(--dx-surface);
  border-color: var(--dx-border);
  border-bottom-color: var(--dx-surface);
  position: relative;
  color: var(--dx-accent);
  font-weight: var(--dx-font-weight-semibold);
}

.dx-tab-content {
  padding: var(--dx-spacing-4);
  border: var(--dx-border-width) solid var(--dx-border);
  border-top: none;
  background-color: var(--dx-surface);
  margin-bottom: var(--dx-spacing-4);
  border-radius: 0 0 var(--dx-border-radius-lg) var(--dx-border-radius-lg);
}

/* ----------------- Dialog - Compact Windows 10 Style ----------------- */
.dx-dialog-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: var(--dx-spacing-6);
  animation: fadeIn var(--dx-transition-normal);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dx-dialog {
  background-color: var(--dx-surface);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius-lg);
  box-shadow: var(--dx-shadow-16);
  width: 100%;
  max-width: 500px;
  animation: slideIn var(--dx-transition-normal);
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dx-dialog-header {
  padding: var(--dx-spacing-3) var(--dx-spacing-4);
  background-color: var(--dx-surface-alt);
  font-weight: var(--dx-font-weight-semibold);
  font-size: var(--dx-font-size-base);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--dx-border-radius-lg) var(--dx-border-radius-lg) 0 0;
}

.dx-dialog-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--dx-text-muted);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dx-border-radius);
  transition: all var(--dx-transition-fast);
}

.dx-dialog-close:hover {
  background-color: var(--dx-surface-secondary);
  color: var(--dx-text);
}

.dx-dialog-body {
  padding: var(--dx-spacing-4);
}

.dx-dialog-footer {
  padding: var(--dx-spacing-3) var(--dx-spacing-4);
  border-top: var(--dx-border-width) solid var(--dx-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--dx-spacing-2);
  background-color: var(--dx-surface-alt);
  border-radius: 0 0 var(--dx-border-radius-lg) var(--dx-border-radius-lg);
}

/* Modern Windows 10 Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--dx-surface-secondary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--dx-text-muted);
  border-radius: 5px;
  border: 2px solid var(--dx-surface-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--dx-text);
}

::-webkit-scrollbar-corner {
  background: var(--dx-surface-secondary);
}

/* ----------------- Progress Bar - Compact Windows 10 Style ----------------- */
.dx-progress {
  display: flex;
  height: 3px;
  background-color: var(--dx-surface-secondary);
  border-radius: 2px;
  margin: var(--dx-spacing-2) 0;
  overflow: hidden;
}

.dx-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: transparent;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
  transition: width var(--dx-transition-slow);
  background-color: var(--dx-accent);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.dx-progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%
  );
  animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Primary blue progress bar */
.dx-progress-bar.dx-primary {
  background-color: var(--dx-primary);
}

/* Success green progress bar */
.dx-progress-bar.dx-success {
  background-color: var(--dx-success);
}

/* Danger red progress bar */
.dx-progress-bar.dx-danger,
.dx-progress-bar.bg-danger {
  background-color: var(--dx-danger) !important;
}

/* Warning orange progress bar */  
.dx-progress-bar.dx-warning {
  background-color: var(--dx-warning);
}

/* Info progress bar */
.dx-progress-bar.dx-info {
  background-color: var(--dx-info);
}

/* Progress bar with text */
.dx-progress.dx-progress-labeled {
  height: 16px;
}

.dx-progress.dx-progress-labeled .dx-progress-bar {
  font-size: var(--dx-font-size-sm);
  color: white;
  font-weight: var(--dx-font-weight-semibold);
}

/* Small and large progress variants */
.dx-progress.dx-progress-sm {
  height: 2px;
}

.dx-progress.dx-progress-lg {
  height: 6px;
}

/* ----------------- Compact Windows 10 AG Grid Theme ----------------- */
.ag-theme-win10 {
  /* Core colors - Windows 10 palette */
  --ag-foreground-color: var(--dx-text);
  --ag-background-color: var(--dx-surface);
  --ag-header-foreground-color: var(--dx-text);
  --ag-header-background-color: var(--dx-surface-alt);
  --ag-odd-row-background-color: var(--dx-surface);
  --ag-even-row-background-color: var(--dx-surface-alt);
  --ag-border-color: var(--dx-border);
  --ag-row-border-color: var(--dx-surface-secondary);
  
  /* Interaction colors */
  --ag-row-hover-color: var(--dx-primary-light);
  --ag-selected-row-background-color: rgba(0, 120, 212, 0.1);
  --ag-range-selection-background-color: rgba(0, 120, 212, 0.2);
  --ag-range-selection-border-color: var(--dx-accent);
  
  /* Typography */
  --ag-font-family: var(--dx-font-family);
  --ag-font-size: var(--dx-font-size-base);
  
  /* Compact Layout */
  --ag-cell-horizontal-padding: var(--dx-spacing-2);
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-height: 100%;
  --ag-header-column-separator-width: 1px;
  --ag-header-column-separator-color: var(--dx-border);
  --ag-header-height: 28px;
  --ag-row-height: 24px;
  
  /* Controls */
  --ag-icon-size: 14px;
  --ag-checkbox-background-color: var(--dx-surface);
  --ag-checkbox-checked-color: var(--dx-accent);
  --ag-checkbox-border-radius: var(--dx-border-radius);
  
  /* Inputs */
  --ag-input-border-color: var(--dx-border);
  --ag-input-border-color-hover: var(--dx-text-muted);
  --ag-input-disabled-border-color: var(--dx-border);
  --ag-input-disabled-background-color: var(--dx-disabled);
}

/* Header styling */
.ag-theme-win10 .ag-header {
  border-bottom: var(--dx-border-width) solid var(--ag-border-color);
  background-color: var(--ag-header-background-color);
  font-weight: var(--dx-font-weight-semibold);
}

.ag-theme-win10 .ag-header-cell {
  padding-left: var(--ag-cell-horizontal-padding);
  padding-right: var(--ag-cell-horizontal-padding);
  border-right: var(--dx-border-width) solid var(--ag-header-column-separator-color);
}

.ag-theme-win10 .ag-header-cell:last-child {
  border-right: none;
}

/* Row styling */
.ag-theme-win10 .ag-row {
  border-bottom: var(--dx-border-width) solid var(--ag-row-border-color);
  transition: background-color var(--dx-transition-fast);
}

.ag-theme-win10 .ag-row:hover {
  background-color: var(--ag-row-hover-color);
}

.ag-theme-win10 .ag-row-selected {
  background-color: var(--ag-selected-row-background-color);
}

/* Cell styling */
.ag-theme-win10 .ag-cell {
  line-height: 22px;
  border-right: var(--dx-border-width) solid var(--ag-row-border-color);
  padding-left: var(--ag-cell-horizontal-padding);
  padding-right: var(--ag-cell-horizontal-padding);
}

.ag-theme-win10 .ag-cell:last-child {
  border-right: none;
}

/* Grid outline */
.ag-theme-win10.ag-root {
  border: var(--dx-border-width) solid var(--ag-border-color);
  border-radius: var(--dx-border-radius-lg);
  box-shadow: var(--dx-shadow-2);
}

/* Buttons in grid */
.ag-theme-win10 button {
  background-color: var(--dx-surface);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius);
  padding: var(--dx-spacing-1) var(--dx-spacing-2);
  font-family: var(--dx-font-family);
  font-size: var(--dx-font-size-base);
  color: var(--dx-text);
  transition: all var(--dx-transition-fast);
  height: 20px;
}

.ag-theme-win10 button:hover {
  background-color: var(--dx-surface-secondary);
  border-color: var(--dx-text-muted);
}

.ag-theme-win10 .ag-standard-button {
  background-color: var(--dx-primary);
  border-color: var(--dx-primary);
  color: white;
}

.ag-theme-win10 .ag-standard-button:hover {
  background-color: var(--dx-primary-hover);
  border-color: var(--dx-primary-hover);
}

/* Menu and filter styling */
.ag-theme-win10 .ag-menu {
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius-lg);
  box-shadow: var(--dx-shadow-8);
  background-color: var(--dx-surface);
}

.ag-theme-win10 .ag-menu-header {
  background-color: var(--dx-surface-alt);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
}

/* Checkbox styling */
.ag-theme-win10 .ag-checkbox-input-wrapper {
  border: 2px solid var(--dx-text-muted);
  border-radius: var(--dx-border-radius);
  width: 14px;
  height: 14px;
  background-color: var(--dx-surface);
}

.ag-theme-win10 .ag-checkbox-input-wrapper.ag-checked {
  background-color: var(--dx-accent);
  border-color: var(--dx-accent);
}

.ag-theme-win10 .ag-checkbox-input-wrapper.ag-checked::after {
  color: white;
}

/* Focus styling */
.ag-theme-win10 .ag-cell-focus {
  border: 1px solid var(--dx-accent) !important;
  outline: none;
}

/* ----------------- Compact Utilities ----------------- */
.dx-flex { display: flex; }
.dx-flex-col { flex-direction: column; }
.dx-justify-start { justify-content: flex-start; }
.dx-justify-end { justify-content: flex-end; }
.dx-justify-center { justify-content: center; }
.dx-justify-between { justify-content: space-between; }
.dx-justify-around { justify-content: space-around; }
.dx-items-start { align-items: flex-start; }
.dx-items-end { align-items: flex-end; }
.dx-items-center { align-items: center; }
.dx-items-stretch { align-items: stretch; }
.dx-wrap { flex-wrap: wrap; }

.dx-gap-1 { gap: var(--dx-spacing-1); }
.dx-gap-2 { gap: var(--dx-spacing-2); }
.dx-gap-3 { gap: var(--dx-spacing-3); }
.dx-gap-4 { gap: var(--dx-spacing-4); }

/* Form layouts */
.dx-form-row {
  display: flex;
  gap: var(--dx-spacing-4);
  margin-bottom: var(--dx-spacing-4);
}

.dx-form-col {
  flex: 1;
}

/* Grid utilities */
.dx-grid {
  display: grid;
  gap: var(--dx-spacing-4);
  margin: var(--dx-spacing-4) 0;
}

.dx-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.dx-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dx-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dx-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.dx-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.dx-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Container */
.dx-container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: var(--dx-spacing-4);
}

.dx-container-fluid {
  width: 100%;
  padding: var(--dx-spacing-4);
}

/* Compact margin and padding utilities */
.dx-mt-1 { margin-top: var(--dx-spacing-1); }
.dx-mt-2 { margin-top: var(--dx-spacing-2); }
.dx-mt-3 { margin-top: var(--dx-spacing-3); }
.dx-mt-4 { margin-top: var(--dx-spacing-4); }
.dx-mt-5 { margin-top: var(--dx-spacing-5); }
.dx-mt-6 { margin-top: var(--dx-spacing-6); }

.dx-mb-1 { margin-bottom: var(--dx-spacing-1); }
.dx-mb-2 { margin-bottom: var(--dx-spacing-2); }
.dx-mb-3 { margin-bottom: var(--dx-spacing-3); }
.dx-mb-4 { margin-bottom: var(--dx-spacing-4); }
.dx-mb-5 { margin-bottom: var(--dx-spacing-5); }
.dx-mb-6 { margin-bottom: var(--dx-spacing-6); }

.dx-ml-1 { margin-left: var(--dx-spacing-1); }
.dx-ml-2 { margin-left: var(--dx-spacing-2); }
.dx-ml-3 { margin-left: var(--dx-spacing-3); }
.dx-ml-4 { margin-left: var(--dx-spacing-4); }
.dx-ml-5 { margin-left: var(--dx-spacing-5); }
.dx-ml-6 { margin-left: var(--dx-spacing-6); }

.dx-mr-1 { margin-right: var(--dx-spacing-1); }
.dx-mr-2 { margin-right: var(--dx-spacing-2); }
.dx-mr-3 { margin-right: var(--dx-spacing-3); }
.dx-mr-4 { margin-right: var(--dx-spacing-4); }
.dx-mr-5 { margin-right: var(--dx-spacing-5); }
.dx-mr-6 { margin-right: var(--dx-spacing-6); }

.dx-p-1 { padding: var(--dx-spacing-1); }
.dx-p-2 { padding: var(--dx-spacing-2); }
.dx-p-3 { padding: var(--dx-spacing-3); }
.dx-p-4 { padding: var(--dx-spacing-4); }
.dx-p-5 { padding: var(--dx-spacing-5); }
.dx-p-6 { padding: var(--dx-spacing-6); }

.dx-pt-1 { padding-top: var(--dx-spacing-1); }
.dx-pt-2 { padding-top: var(--dx-spacing-2); }
.dx-pt-3 { padding-top: var(--dx-spacing-3); }
.dx-pt-4 { padding-top: var(--dx-spacing-4); }
.dx-pt-5 { padding-top: var(--dx-spacing-5); }
.dx-pt-6 { padding-top: var(--dx-spacing-6); }

.dx-pb-1 { padding-bottom: var(--dx-spacing-1); }
.dx-pb-2 { padding-bottom: var(--dx-spacing-2); }
.dx-pb-3 { padding-bottom: var(--dx-spacing-3); }
.dx-pb-4 { padding-bottom: var(--dx-spacing-4); }
.dx-pb-5 { padding-bottom: var(--dx-spacing-5); }
.dx-pb-6 { padding-bottom: var(--dx-spacing-6); }

.dx-pl-1 { padding-left: var(--dx-spacing-1); }
.dx-pl-2 { padding-left: var(--dx-spacing-2); }
.dx-pl-3 { padding-left: var(--dx-spacing-3); }
.dx-pl-4 { padding-left: var(--dx-spacing-4); }
.dx-pl-5 { padding-left: var(--dx-spacing-5); }
.dx-pl-6 { padding-left: var(--dx-spacing-6); }

.dx-pr-1 { padding-right: var(--dx-spacing-1); }
.dx-pr-2 { padding-right: var(--dx-spacing-2); }
.dx-pr-3 { padding-right: var(--dx-spacing-3); }
.dx-pr-4 { padding-right: var(--dx-spacing-4); }
.dx-pr-5 { padding-right: var(--dx-spacing-5); }
.dx-pr-6 { padding-right: var(--dx-spacing-6); }

.dx-px-1 { padding-left: var(--dx-spacing-1); padding-right: var(--dx-spacing-1); }
.dx-px-2 { padding-left: var(--dx-spacing-2); padding-right: var(--dx-spacing-2); }
.dx-px-3 { padding-left: var(--dx-spacing-3); padding-right: var(--dx-spacing-3); }
.dx-px-4 { padding-left: var(--dx-spacing-4); padding-right: var(--dx-spacing-4); }
.dx-px-5 { padding-left: var(--dx-spacing-5); padding-right: var(--dx-spacing-5); }
.dx-px-6 { padding-left: var(--dx-spacing-6); padding-right: var(--dx-spacing-6); }

.dx-py-1 { padding-top: var(--dx-spacing-1); padding-bottom: var(--dx-spacing-1); }
.dx-py-2 { padding-top: var(--dx-spacing-2); padding-bottom: var(--dx-spacing-2); }
.dx-py-3 { padding-top: var(--dx-spacing-3); padding-bottom: var(--dx-spacing-3); }
.dx-py-4 { padding-top: var(--dx-spacing-4); padding-bottom: var(--dx-spacing-4); }
.dx-py-5 { padding-top: var(--dx-spacing-5); padding-bottom: var(--dx-spacing-5); }
.dx-py-6 { padding-top: var(--dx-spacing-6); padding-bottom: var(--dx-spacing-6); }

/* Color utilities */
.dx-text-primary { color: var(--dx-primary); }
.dx-text-success { color: var(--dx-success); }
.dx-text-danger { color: var(--dx-danger); }
.dx-text-warning { color: var(--dx-warning); }
.dx-text-info { color: var(--dx-info); }
.dx-text-muted { color: var(--dx-text-muted); }
.dx-text-dark { color: var(--dx-dark); }

.dx-bg-light { background-color: var(--dx-light); }
.dx-bg-primary-light { background-color: var(--dx-primary-light); }
.dx-bg-surface { background-color: var(--dx-surface); }
.dx-bg-surface-alt { background-color: var(--dx-surface-alt); }

/* Border utilities */
.dx-border { border: var(--dx-border-width) solid var(--dx-border); }
.dx-border-0 { border: none; }
.dx-border-top { border-top: var(--dx-border-width) solid var(--dx-border); }
.dx-border-bottom { border-bottom: var(--dx-border-width) solid var(--dx-border); }
.dx-border-left { border-left: var(--dx-border-width) solid var(--dx-border); }
.dx-border-right { border-right: var(--dx-border-width) solid var(--dx-border); }

.dx-rounded { border-radius: var(--dx-border-radius); }
.dx-rounded-lg { border-radius: var(--dx-border-radius-lg); }
.dx-rounded-0 { border-radius: 0; }

/* Shadow utilities */
.dx-shadow-none { box-shadow: none; }
.dx-shadow-2 { box-shadow: var(--dx-shadow-2); }
.dx-shadow-4 { box-shadow: var(--dx-shadow-4); }
.dx-shadow-8 { box-shadow: var(--dx-shadow-8); }
.dx-shadow-16 { box-shadow: var(--dx-shadow-16); }

/* Display utilities */
.dx-d-none { display: none; }
.dx-d-block { display: block; }
.dx-d-inline { display: inline; }
.dx-d-inline-block { display: inline-block; }
.dx-d-flex { display: flex; }
.dx-d-grid { display: grid; }

/* Text utilities */
.dx-text-left { text-align: left; }
.dx-text-center { text-align: center; }
.dx-text-right { text-align: right; }
.dx-text-nowrap { white-space: nowrap; }
.dx-text-truncate { 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.dx-font-weight-normal { font-weight: var(--dx-font-weight-normal); }
.dx-font-weight-semibold { font-weight: var(--dx-font-weight-semibold); }

/* Button container with compact spacing */
.dx-btn-container {
  display: flex;
  gap: var(--dx-spacing-2);
  margin: var(--dx-spacing-3) 0;
  flex-wrap: wrap;
}

/* Compact spacer utilities */
.dx-spacer-sm { margin: var(--dx-spacing-2) 0; }
.dx-spacer-md { margin: var(--dx-spacing-4) 0; }
.dx-spacer-lg { margin: var(--dx-spacing-6) 0; }

/* Center utilities */
.dx-center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: var(--dx-spacing-6);
}

/* ----------------- Compact Windows 10 Specific Components ----------------- */

/* Compact Toggle Switch */
.dx-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: var(--dx-spacing-2) 0;
}

.dx-toggle-input {
  position: relative;
  appearance: none;
  width: 36px;
  height: 18px;
  background-color: var(--dx-surface-secondary);
  border: 2px solid var(--dx-border);
  border-radius: 9px;
  outline: none;
  cursor: pointer;
  transition: all var(--dx-transition-fast);
  margin-right: var(--dx-spacing-3);
}

.dx-toggle-input::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background-color: var(--dx-text-muted);
  border-radius: 50%;
  transition: all var(--dx-transition-fast);
}

.dx-toggle-input:checked {
  background-color: var(--dx-accent);
  border-color: var(--dx-accent);
}

.dx-toggle-input:checked::before {
  transform: translateX(18px);
  background-color: white;
}

.dx-toggle-input:focus {
  box-shadow: var(--dx-focus-ring);
}

.dx-toggle-label {
  font-size: var(--dx-font-size-base);
  color: var(--dx-text);
}

/* Compact Info Bar */
.dx-info-bar {
  display: flex;
  align-items: center;
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  border-radius: var(--dx-border-radius);
  margin: var(--dx-spacing-2) 0;
  font-size: var(--dx-font-size-base);
  border-left: 3px solid;
}

.dx-info-bar.dx-info {
  background-color: rgba(0, 120, 212, 0.1);
  border-left-color: var(--dx-info);
  color: var(--dx-text);
}

.dx-info-bar.dx-success {
  background-color: rgba(16, 124, 16, 0.1);
  border-left-color: var(--dx-success);
  color: var(--dx-text);
}

.dx-info-bar.dx-warning {
  background-color: rgba(255, 140, 0, 0.1);
  border-left-color: var(--dx-warning);
  color: var(--dx-text);
}

.dx-info-bar.dx-danger {
  background-color: rgba(209, 52, 56, 0.1);
  border-left-color: var(--dx-danger);
  color: var(--dx-text);
}

/* Compact Badge */
.dx-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px var(--dx-spacing-2);
  font-size: var(--dx-font-size-sm);
  font-weight: var(--dx-font-weight-semibold);
  border-radius: 8px;
  line-height: 1;
  min-width: 16px;
  height: 16px;
}

.dx-badge.dx-primary {
  background-color: var(--dx-primary);
  color: white;
}

.dx-badge.dx-success {
  background-color: var(--dx-success);
  color: white;
}

.dx-badge.dx-danger {
  background-color: var(--dx-danger);
  color: white;
}

.dx-badge.dx-warning {
  background-color: var(--dx-warning);
  color: var(--dx-text);
}

.dx-badge.dx-secondary {
  background-color: var(--dx-surface-secondary);
  color: var(--dx-text);
}

/* Compact Alert */
.dx-alert {
  padding: var(--dx-spacing-3);
  border-radius: var(--dx-border-radius-lg);
  margin: var(--dx-spacing-3) 0;
  border-left: 3px solid;
  display: flex;
  align-items: flex-start;
  gap: var(--dx-spacing-2);
}

.dx-alert.dx-info {
  background-color: rgba(0, 120, 212, 0.1);
  border-left-color: var(--dx-info);
  color: var(--dx-text);
}

.dx-alert.dx-success {
  background-color: rgba(16, 124, 16, 0.1);
  border-left-color: var(--dx-success);
  color: var(--dx-text);
}

.dx-alert.dx-warning {
  background-color: rgba(255, 140, 0, 0.1);
  border-left-color: var(--dx-warning);
  color: var(--dx-text);
}

.dx-alert.dx-danger {
  background-color: rgba(209, 52, 56, 0.1);
  border-left-color: var(--dx-danger);
  color: var(--dx-text);
}

.dx-alert-title {
  font-weight: var(--dx-font-weight-semibold);
  margin-bottom: var(--dx-spacing-1);
}

.dx-alert-close {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--dx-text-muted);
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--dx-border-radius);
  transition: all var(--dx-transition-fast);
}

.dx-alert-close:hover {
  background-color: var(--dx-surface-secondary);
  color: var(--dx-text);
}

/* Compact Dropdown */
.dx-dropdown {
  position: relative;
  display: inline-block;
}

.dx-dropdown-toggle {
  background-color: var(--dx-surface);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius);
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--dx-spacing-2);
  transition: all var(--dx-transition-fast);
  font-size: var(--dx-font-size-base);
  color: var(--dx-text);
  height: var(--dx-input-height);
}

.dx-dropdown-toggle:hover {
  background-color: var(--dx-surface-secondary);
  border-color: var(--dx-text-muted);
}

.dx-dropdown-toggle:focus {
  outline: none;
  box-shadow: var(--dx-focus-ring);
}

.dx-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--dx-surface);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius-lg);
  box-shadow: var(--dx-shadow-8);
  min-width: 150px;
  padding: var(--dx-spacing-1) 0;
  z-index: 1000;
  margin-top: var(--dx-spacing-1);
  backdrop-filter: blur(20px);
}

.dx-dropdown-item {
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  cursor: pointer;
  transition: background-color var(--dx-transition-fast);
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-size: var(--dx-font-size-base);
  color: var(--dx-text);
}

.dx-dropdown-item:hover {
  background-color: var(--dx-surface-secondary);
}

.dx-dropdown-divider {
  height: 1px;
  background-color: var(--dx-border);
  margin: var(--dx-spacing-1) 0;
}

/* Compact List Group */
.dx-list-group {
  background-color: var(--dx-surface);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius-lg);
  overflow: hidden;
  margin: var(--dx-spacing-3) 0;
}

.dx-list-group-item {
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  transition: background-color var(--dx-transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--dx-font-size-base);
}

.dx-list-group-item:last-child {
  border-bottom: none;
}

.dx-list-group-item:hover {
  background-color: var(--dx-surface-secondary);
}

.dx-list-group-item.dx-active {
  background-color: var(--dx-primary-light);
  color: var(--dx-accent);
  font-weight: var(--dx-font-weight-semibold);
}

/* Compact Pagination */
.dx-pagination {
  display: flex;
  align-items: center;
  gap: var(--dx-spacing-1);
  margin: var(--dx-spacing-3) 0;
}

.dx-pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--dx-spacing-2);
  border: var(--dx-border-width) solid var(--dx-border);
  border-radius: var(--dx-border-radius);
  background-color: var(--dx-surface);
  color: var(--dx-text);
  text-decoration: none;
  transition: all var(--dx-transition-fast);
  cursor: pointer;
  font-size: var(--dx-font-size-base);
}

.dx-pagination-item:hover {
  background-color: var(--dx-surface-secondary);
  border-color: var(--dx-text-muted);
}

.dx-pagination-item.dx-active {
  background-color: var(--dx-accent);
  border-color: var(--dx-accent);
  color: white;
  font-weight: var(--dx-font-weight-semibold);
}

.dx-pagination-item.dx-disabled {
  color: var(--dx-text-muted);
  cursor: not-allowed;
  background-color: var(--dx-disabled);
  border-color: var(--dx-border);
}

.dx-pagination-item.dx-disabled:hover {
  background-color: var(--dx-disabled);
  border-color: var(--dx-border);
}

/* Compact Spinner/Loading */
.dx-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dx-surface-secondary);
  border-radius: 50%;
  border-top-color: var(--dx-accent);
  animation: dx-spin 1s ease-in-out infinite;
}

@keyframes dx-spin {
  to { transform: rotate(360deg); }
}

.dx-spinner-sm {
  width: 12px;
  height: 12px;
  border-width: 1px;
}

.dx-spinner-lg {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

/* Loading overlay */
.dx-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
}

/* Compact Sidebar */
.dx-sidebar {
  background-color: var(--dx-surface);
  border-right: var(--dx-border-width) solid var(--dx-border);
  height: 100vh;
  width: 200px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  overflow-y: auto;
  transition: transform var(--dx-transition-normal);
}

.dx-sidebar.dx-collapsed {
  transform: translateX(-100%);
}

.dx-sidebar-header {
  padding: var(--dx-spacing-3);
  border-bottom: var(--dx-border-width) solid var(--dx-border);
  background-color: var(--dx-surface-alt);
  font-weight: var(--dx-font-weight-semibold);
  font-size: var(--dx-font-size-base);
}

.dx-sidebar-nav {
  padding: var(--dx-spacing-2) 0;
}

.dx-sidebar-nav-item {
  display: block;
  padding: var(--dx-spacing-2) var(--dx-spacing-3);
  color: var(--dx-text);
  text-decoration: none;
  transition: background-color var(--dx-transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: var(--dx-font-size-base);
}

.dx-sidebar-nav-item:hover {
  background-color: var(--dx-surface-secondary);
}

.dx-sidebar-nav-item.dx-active {
  background-color: var(--dx-primary-light);
  color: var(--dx-accent);
  font-weight: var(--dx-font-weight-semibold);
  border-right: 2px solid var(--dx-accent);
}

/* Main content with sidebar */
.dx-main-content {
  margin-left: 200px;
  padding: var(--dx-spacing-3);
  transition: margin-left var(--dx-transition-normal);
}

.dx-main-content.dx-sidebar-collapsed {
  margin-left: 0;
}

.dx-w-full {
  width: 100%;
}