/* Kindra AI Custom AG-Grid Theme Overrides */
/* This file must load AFTER vendor/ag-grid.css to override the defaults */

/* Use !important to ensure our colors override ag-grid defaults */
.ag-theme-quartz {
  /* Map our CSS variables to AG-Grid theme variables */
  --ag-background-color: var(--color-background) !important;
  --ag-foreground-color: var(--color-foreground) !important;
  --ag-header-background-color: var(--color-surface) !important;
  --ag-header-foreground-color: var(--color-headline) !important;
  --ag-odd-row-background-color: var(--color-surface) !important;
  --ag-border-color: var(--color-surface-border) !important;
  --ag-accent-color: var(--color-primary) !important;
  --ag-font-family: 'Atkinson Hyperlegible', sans-serif !important;
  --ag-font-size: 14px !important;
  --ag-spacing: 8px !important;
  
  /* Additional theme variables for better integration */
  --ag-row-hover-color: var(--color-surface-alt) !important;
  --ag-selected-row-background-color: var(--color-surface-alt) !important;
  --ag-range-selection-background-color: var(--color-surface-alt-2) !important;
  --ag-header-column-resize-handle-color: var(--color-primary) !important;
  --ag-input-border-color: var(--color-surface-border) !important;
  
  /* Override specific color variables */
  --ag-chrome-background-color: var(--color-background) !important;
  --ag-panel-background-color: var(--color-background) !important;
  --ag-modal-overlay-background-color: rgba(0, 0, 0, 0.4) !important;
  --ag-header-cell-hover-background-color: var(--color-surface-alt) !important;
  --ag-header-cell-moving-background-color: var(--color-surface-alt-2) !important;
  
  /* Row striping */
  --ag-row-background-color: var(--color-background) !important;
  --ag-even-row-background-color: var(--color-background) !important;
  
  /* Selection - all selection states should use our colors */
  --ag-range-selection-border-color: var(--color-primary) !important;
  --ag-row-selection-background-color: var(--color-surface-alt) !important;
  --ag-range-selection-background-color: var(--color-surface-alt-2) !important;
  --ag-range-selection-highlight-color: var(--color-primary) !important;
  --ag-selected-row-background-color: var(--color-surface-alt) !important;
  --ag-range-header-highlight-color: var(--color-primary) !important;
  
  /* Hover states - use semantic hover highlight color */
  --ag-row-hover-color: var(--color-hover-highlight) !important;
  --ag-column-hover-color: var(--color-hover-highlight) !important;
  --ag-header-cell-hover-background-color: var(--color-hover-highlight) !important;
  
  /* Focus states - use primary color instead of blue */
  --ag-input-focus-border-color: var(--color-primary) !important;
  --ag-input-focus-box-shadow: 0 0 0 3px rgba(125, 91, 166, 0.2) !important; /* Purple glow */
  --ag-input-error-focus-box-shadow: 0 0 0 3px rgba(216, 58, 82, 0.2) !important; /* Error color glow */
  --ag-focused-cell-border-color: var(--color-primary) !important;
  
  /* Active/selected states */
  --ag-selected-tab-underline-color: var(--color-primary) !important;
  --ag-side-button-selected-background-color: var(--color-surface-alt) !important;
  --ag-minichart-selected-chart-color: var(--color-primary) !important;
  --ag-minichart-selected-page-color: var(--color-primary) !important;
  
  /* Checkbox and input colors */
  --ag-checkbox-background-color: var(--color-background) !important;
  --ag-checkbox-checked-color: var(--color-primary) !important;
  --ag-checkbox-indeterminate-color: var(--color-primary) !important;
  --ag-checkbox-unchecked-color: var(--color-surface-border) !important;
  
  /* Icons */
  --ag-icon-font-color: var(--color-foreground) !important;
  
  /* Text colors */
  --ag-text-color: var(--color-foreground) !important;
  --ag-header-text-color: var(--color-headline) !important;
  --ag-cell-text-color: var(--color-body) !important;
  --ag-data-color: var(--color-body) !important;
  --ag-disabled-foreground-color: var(--color-muted) !important;
  
  /* Chip/pill colors */
  --ag-chip-background-color: var(--color-surface) !important;
  --ag-chip-border-color: var(--color-surface-border) !important;
  
  /* Advanced filter pills */
  --ag-advanced-filter-column-pill-color: var(--color-primary) !important;
  --ag-advanced-filter-option-pill-color: var(--color-secondary) !important;
  --ag-advanced-filter-value-pill-color: var(--color-tertiary) !important;
  --ag-advanced-filter-join-pill-color: var(--color-surface-alt) !important;
  
  /* Button colors */
  --ag-filter-panel-apply-button-background-color: var(--color-primary) !important;
  --ag-filter-panel-apply-button-color: #ffffff !important;
  
  /* Menu and panel backgrounds */
  --ag-control-panel-background-color: var(--color-background) !important;
  --ag-filter-panel-card-subtle-color: var(--color-surface) !important;
  --ag-filter-panel-card-subtle-hover-color: var(--color-surface-alt) !important;
  
  /* Borders */
  --ag-borders: solid 1px var(--color-surface-border) !important;
  --ag-borders-input: solid 1px var(--color-surface-border) !important;
  --ag-borders-input-invalid: solid 1px var(--color-error) !important;
  --ag-borders-secondary: solid 1px var(--color-surface-border) !important;
  --ag-borders-side-button: none !important;
  
  /* Cell borders */
  --ag-cell-horizontal-border: solid 1px var(--color-surface-border) !important;
  --ag-header-column-separator-color: var(--color-surface-border) !important;
  
  /* Search/find highlighting - use full coral for visibility */
  --ag-find-match-background-color: var(--color-tertiary) !important; /* Full coral */
  --ag-find-match-color: #ffffff !important; /* White text on coral background */
  --ag-find-active-match-background-color: var(--color-primary) !important; /* African Violet for active */
  --ag-find-active-match-color: #ffffff !important;
  
  /* Value change highlighting */
  --ag-value-change-value-highlight-background-color: var(--color-success) !important;
  
  /* Invalid/error states */
  --ag-full-row-invalid-background-color: var(--color-error) !important;
  
  /* Make sure font family is applied throughout */
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

/* Ensure font is used in all ag-grid elements */
.ag-theme-quartz .ag-root-wrapper,
.ag-theme-quartz .ag-root,
.ag-theme-quartz .ag-header,
.ag-theme-quartz .ag-cell,
.ag-theme-quartz .ag-group-cell {
  font-family: 'Atkinson Hyperlegible', sans-serif !important;
}

/* Fix autoHeight minimum height issue - removes default 150px min-height */
/* Horizontal scroll shadows use layered gradients: covers move with content */
/* (local), shadows stay fixed (scroll) and show when content extends beyond */
.ag-theme-quartz .ag-center-cols-viewport {
  min-height: unset !important;
  background-image:
    linear-gradient(to right, var(--color-background), var(--color-background)),
    linear-gradient(to left, var(--color-background), var(--color-background)),
    linear-gradient(to right, var(--color-surface-border), transparent),
    linear-gradient(to left, var(--color-surface-border), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 30px 100%, 30px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
  background-repeat: no-repeat;
}