/* AG Grid (community 35) in the design system: header labels, cells, and the Excel-style column filter.
   Load after components.css, with js/grid/theme.js (the grid's colours, from the tokens) and
   js/grid/filters.js (the filter popup, built from .filter-menu / .filter-sort / .search-box /
   .option-list / .filter-footer). Tokens only. */

/* --- Headers and cells ------------------------------------------------------------------------ */

/* Grid headers read like .table heads: small uppercase mono labels. */
.ag-header-cell-text {
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
/* The filter button keeps its distance from the label, also in right-aligned (number) headers. */
.ag-cell-label-container {
  gap: calc(var(--spacing) * 1.5);
}
/* A grid inside a flush card fills it edge to edge. */
.data-grid {
  width: 100%;
}
.card-flush > .data-grid {
  border: 0;
}
.ag-cell .btn-icon {
  vertical-align: middle;
}
.ag-cell .row-actions {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  height: 100%;
}
/* A badge longer than its column ends in an ellipsis. */
.ag-cell .badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
/* Numbers line up by their digits. */
.ag-right-aligned-cell,
.cell-number {
  font-variant-numeric: tabular-nums;
}

/* --- Loading, empty and error overlays (theme.js) ------------------------------------------ */

/* Skeleton rows fill the body from the top, like the rows they stand in for. */
.ag-overlay-loading-wrapper {
  align-items: flex-start;
  background: var(--card);
}
.grid-overlay-skeleton {
  align-self: stretch;
  width: 100%;
}
.grid-overlay-empty {
  width: 100%;
  max-width: calc(var(--spacing) * 120);
  padding: calc(var(--spacing) * 4);
  pointer-events: auto;
}
.grid-overlay-empty .empty-state {
  border: 0;
  white-space: normal;
}
/* An auto-height grid keeps room for its overlay (and only then, so a short list stays short). */
.ag-root-wrapper:has(.ag-overlay:not(.ag-hidden)) .ag-layout-auto-height .ag-center-cols-viewport,
.ag-root-wrapper:has(.ag-overlay:not(.ag-hidden)) .ag-layout-auto-height .ag-center-cols-container {
  min-height: calc(var(--spacing) * 60);
}

/* Rows of a server grid still on their way show a skeleton bar, not "Loading…" with a spinner. */
.ag-row-loading .ag-loading {
  display: flex;
  align-items: center;
  height: 100%;
}
.ag-row-loading .ag-loading > * {
  display: none;
}
.ag-row-loading .ag-loading::before {
  content: "";
  width: 60%;
  height: calc(var(--spacing) * 3.5);
  border-radius: var(--radius-md);
  background: var(--muted);
  animation: skeleton-pulse 2s var(--ease-in-out) infinite;
}

/* The paging bar: small muted text, no page buttons for a single page, and none at all while an overlay
   (loading, empty, failed) stands in for the rows. */
.ag-paging-panel {
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}
.is-single-page .ag-paging-page-summary-panel {
  display: none;
}
.ag-root-wrapper:has(.ag-overlay:not(.ag-hidden)) .ag-paging-panel {
  display: none;
}

/* --- The popup ---------------------------------------------------------------------------- */

.excel-filter {
  max-width: calc(100vw - var(--spacing) * 8);
}
.excel-filter .filter-sort {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--spacing) * 1);
  border-bottom: 1px solid var(--line);
}
.excel-filter .filter-sort[hidden] {
  display: none;
}
.excel-filter .search-box {
  flex: none;
  max-width: none;
}
.excel-filter .option-list {
  margin: 0;
}
.excel-filter .option-all {
  margin: 0;
}
.excel-filter .option > span {
  min-width: 0;
}
.excel-filter .option input[type="checkbox"] {
  flex: none;
}
.excel-filter .option-all:has(input:focus-visible),
.excel-filter .option:has(input:focus-visible) {
  background: var(--muted);
}
.excel-filter-values > .option-all[hidden] {
  display: none;
}
.excel-filter-empty {
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 1.5);
}
.excel-filter-note {
  margin: 0;
}
.excel-filter .filter-footer .btn[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

/* Number / date conditions: a collapsible "Number filters" section above the value list. */
.excel-filter-condition[hidden] {
  display: none;
}
.excel-filter-condition {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.excel-filter-condition > summary {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2.5);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--muted-foreground);
  list-style: none;
  cursor: pointer;
}
.excel-filter-condition > summary::-webkit-details-marker {
  display: none;
}
.excel-filter-condition > summary::after {
  content: "";
  width: calc(var(--spacing) * 1.5);
  height: calc(var(--spacing) * 1.5);
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--default-transition-duration);
}
.excel-filter-condition[open] > summary::after {
  transform: rotate(-135deg);
}
.excel-filter-condition > summary:hover,
.excel-filter-condition > summary:focus-visible {
  background: var(--muted);
  color: var(--foreground);
  outline: none;
}
.excel-filter-condition-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: 0 calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5);
}
.excel-filter-range {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.excel-filter-range > .input {
  flex: 1 1 0;
  min-width: 0;
}
.excel-filter-range > [hidden] {
  display: none;
}

/* --- Column headers ------------------------------------------------------------------------ */

/* A filtered column: the filter button and the header text carry the brand ink. */
.ag-header-cell-filtered .ag-header-cell-filter-button,
.ag-header-cell-filtered .ag-header-cell-filter-button .ag-icon,
.ag-header-cell-filtered .ag-filter-icon,
.ag-header-cell-filtered .ag-filter-icon .ag-icon {
  color: var(--brand-ink);
  opacity: 1;
}
.ag-header-cell-filtered .ag-header-cell-text {
  color: var(--foreground);
}
.ag-header-cell-filter-button:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring-field);
}