/**
 * @file agGridStyles.css
 * @description Custom AG Grid styles for Recce data grids
 *
 * Provides header layout customization to ensure proper flex alignment:
 * - Header cells use flex layout with items centered vertically
 * - Labels aligned to the left
 * - Actions (menu, sort icons) aligned to the right
 * - Sticky headers when scrolling vertically
 *
 * Uses CSS custom properties from global.css for theme-aware colors.
 */

/* AG Grid Viewport - uses theme-aware background */
.ag-body-viewport,
.ag-center-cols-viewport {
  background-color: var(--recce-bg-muted);
}

/* Sticky header - stays visible when scrolling vertically */
.ag-header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Header cell flex layout */
.ag-header-cell-comp-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Header label takes available space and aligns left */
.ag-header-cell-label {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Sort icons stay with the label */
.ag-header-cell-label .ag-sort-indicator-container {
  margin-left: 4px;
}

/* Actions container (menu button, etc.) aligned right */
.ag-header-cell-menu-button {
  margin-left: auto;
}

/* Ensure header icons don't shrink */
.ag-header-icon {
  flex-shrink: 0;
}

/* AG Grid custom styles for query views */

/* Header hover behavior for pin/key icons */
.grid-header:hover .pin-icon {
  display: block;
}

.grid-header:hover .key-icon {
  display: block;
}

/* Context menu visibility on row hover */
.ag-row:hover .row-context-menu {
  visibility: visible;
  width: auto;
}

/* Cell overflow for context menu */
.cell-show-context-menu {
  overflow: visible;
}

/**
 * Schema diff color palette
 * Uses CSS custom properties for theme-aware colors
 */

/* Light mode (default) */
:root,
.light {
  --schema-color-added: rgb(204 255 216);
  --schema-color-added-hover: rgb(193 246 205);
  --schema-color-added-active: rgb(166 242 184);
  --schema-color-removed: rgb(255 215 213);
  --schema-color-removed-hover: rgb(246 195 193);
  --schema-color-removed-active: rgb(242 170 166);
  --schema-color-normal: #ffffff;
  --schema-color-normal-hover: rgb(241 241 241);
  --schema-color-normal-active: rgb(230 230 230);
  --schema-color-reordered: rgb(255 173 21);
  --schema-color-reordered-hover: rgb(249 164 6);
  --schema-color-reordered-active: rgb(224 147 6);
}

/* Dark mode */
.dark {
  --schema-color-added: rgb(26 77 26);
  --schema-color-added-hover: rgb(34 97 34);
  --schema-color-added-active: rgb(42 117 42);
  --schema-color-removed: rgb(92 31 31);
  --schema-color-removed-hover: rgb(112 41 41);
  --schema-color-removed-active: rgb(132 51 51);
  --schema-color-normal: #262626;
  --schema-color-normal-hover: rgb(64 64 64);
  --schema-color-normal-active: rgb(82 82 82);
  --schema-color-reordered: rgb(180 83 9);
  --schema-color-reordered-hover: rgb(146 64 14);
  --schema-color-reordered-active: rgb(120 53 15);
}

/* Row backgrounds must be applied to cells because rows use display:contents */
.row-added {
  background-color: var(--schema-color-added);
}

.row-added:hover,
.row-added[aria-selected="true"],
.row-added.ag-row-selected {
  background-color: var(--schema-color-added-hover);
}

.row-added[aria-selected="true"]:hover,
.row-added.ag-row-selected:hover {
  background-color: var(--schema-color-added-active);
}

.row-removed {
  background-color: var(--schema-color-removed);
}

.row-removed:hover,
.row-removed[aria-selected="true"],
.row-removed.ag-row-selected {
  background-color: var(--schema-color-removed-hover);
}

.row-removed[aria-selected="true"]:hover,
.row-removed.ag-row-selected:hover {
  background-color: var(--schema-color-removed-active);
}

.row-normal {
  background-color: var(--schema-color-normal);
}

.row-normal:hover,
.row-normal[aria-selected="true"],
.row-normal.ag-row-selected {
  background-color: var(--schema-color-normal-hover);
}

.row-normal[aria-selected="true"]:hover,
.row-normal.ag-row-selected:hover {
  background-color: var(--schema-color-normal-active);
}

.row-selectable {
  cursor: pointer;
}

/* for general column */

.schema-column[aria-selected="true"] {
  outline: none;
  outline-offset: 0;
}

.schema-column-index {
  text-align: right;
  filter: brightness(0.95);
}

/* for reorder-index and type-change column */

/* Type change badges for merged type column */
.type-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  line-height: 1.2;
}

.type-badge-removed {
  background-color: var(--schema-color-removed);
  margin-right: 4px;
}

.type-badge-added {
  background-color: var(--schema-color-added);
}

.column-index-reordered {
  background-color: var(--schema-color-reordered);
}

.row-normal:hover .column-index-reordered,
.row-normal[aria-selected="true"] .column-index-reordered,
.row-normal.ag-row-selected .column-index-reordered {
  background-color: var(--schema-color-reordered-hover);
}

.row-normal[aria-selected="true"]:hover .column-index-reordered,
.row-normal.ag-row-selected:hover .column-index-reordered {
  background-color: var(--schema-color-reordered-active);
}


/*# sourceMappingURL=state-DOUPNifc.css.map*/