/* ============================================
   Data grid — the workbench chrome around <xm-data-table>.

   This file styles ONLY the chrome: the in-frame toolbar, the setup and
   column-menu panels, the segmented density control, and the no-matches body.
   Everything inside the table itself — cells, headers, pinning, totals, rails —
   is xm-data-table's (ADR 0034) and is not restyled from here.

   One surface family, as everywhere else (AD-13): surface* with on-surface ink.
   The frame is a hairline box; regions inside it are separated by hairlines and
   a surface-container raise, never by a shadow and never by a status hue
   (AD-11). The single coral accent marks the active view's drift dot and a
   checked menu row.

   BEM block: `data-grid`. Registered in scripts/check-bem.sh STRICT_BLOCKS.
   Elements: __toolbar, __search, __search-icon, __search-input, __match-count,
   __icon-button, __chip, __dot, __spacer, __loading, __segmented, __segment,
   __body, __panel, __panel-head, __panel-title, __panel-meta, __panel-label,
   __panel-note, __row, __row-icon, __row-label, __row-check, __row-hint,
   __row-delete, __separator, __save, __save-input, __empty, __empty-eyebrow,
   __empty-title, __empty-text, __empty-meta, __setup, __column-menu.
   Modifiers: --fill, --full, __chip--on, __chip--primary, __row--on, __row--disabled,
   __segment--on.
   ============================================ */

/* Square, not rounded. The grid is a workbench that fills whatever panel holds
   it, and the rounding belongs to that panel; a radius here also forces a
   rounded clip layer, and the browser drops subpixel text rendering inside one. */
.data-grid {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--data-table-body, var(--md-sys-color-surface-container));
  overflow: hidden;
}

/* `fill` is only half done by handing it to the table: the table's own
   height: 100% resolves against THIS frame, so the frame has to take the host's
   height first. The host is inline by default, which is why it needs blockifying
   too — a consumer that makes it a flex item gets that for free, one that does
   not would otherwise see the fill silently do nothing. */
:host([fill]) {
  display: block;
}

.data-grid--fill {
  height: 100%;
}

/* Full page lifts the whole frame out of the document flow rather than growing
   it in place — a workbench you have expanded should not push the page around
   under it. */
.data-grid--full {
  position: fixed;
  inset: var(--s-4);
  z-index: 60;
  box-shadow: var(--md-sys-elevation-level5);
}

.data-grid__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------- Toolbar ----------
   Inside the frame, above the sticky header, so the controls travel with the
   table wherever it is embedded instead of belonging to the page around it. */
.data-grid__toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-1-5);
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: var(--s-1-5) calc(var(--s-2) - 1px);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
}

.data-grid__spacer {
  flex: 1 1 auto;
}

/* The trailing cluster carries its own, wider gap: density and full-page are a
   pair of view controls, set apart from search and setup rather than beside
   them. It takes the remaining width so the pair stays at the right edge. */
.data-grid__trailing {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2-5);
  flex: 1 1 140px;
  min-width: 0;
}

/* Dense chrome marks itself with typographic glyphs rather than icons: at 9–11px
   a drawn icon carries no more meaning than the character does, and the glyph
   sits on the text baseline the rest of the row is already using. */
.data-grid__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-family: var(--xm-typescale-mono-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.data-grid__search {
  display: flex;
  align-items: center;
  gap: var(--s-1-5);
  flex: 0 1 287px;
  min-width: 148px;
  block-size: var(--s-6);
  box-sizing: border-box;
  padding: 0 var(--s-1-5) 0 calc(var(--s-2) - 1px);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--xm-shape-corner-dense-sm);
  background: var(--md-sys-color-surface);
}

.data-grid__search:focus-within {
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

.data-grid__search-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
}

.data-grid__search-input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-family: var(--xm-typescale-grid-control-font);
  font-size: var(--xm-typescale-grid-control-size);
  font-weight: var(--xm-typescale-grid-control-weight);
  line-height: var(--xm-typescale-grid-control-line-height);
}

.data-grid__search-input::placeholder {
  color: var(--xm-color-on-surface-soft);
}

.data-grid__match-count {
  flex: 0 0 auto;
  color: var(--xm-color-on-surface-soft);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons ---------- */
.data-grid__icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  appearance: none;
  padding: var(--s-1);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.data-grid__icon-button:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.data-grid__icon-button:active {
  box-shadow: var(--xm-elevation-pressed);
}

.data-grid__icon-button:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-grid__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s-1) + 1px);
  flex: 0 0 auto;
  appearance: none;
  block-size: var(--s-5);
  box-sizing: border-box;
  padding: 0 var(--s-1-5);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--xm-shape-corner-dense-sm);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family: var(--xm-typescale-grid-control-font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.data-grid__chip:hover {
  background: var(--md-sys-color-surface-container-high);
}

.data-grid__chip:active {
  box-shadow: var(--xm-elevation-pressed);
}

.data-grid__chip:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-grid__chip--tight {
  padding: 0 calc(var(--s-1) + 1px);
}

.data-grid__chip--wide {
  padding: 0 calc(var(--s-1-5) + 1px);
}

.data-grid__chip--on {
  border-color: color-mix(
    in oklab,
    var(--md-sys-color-primary) 52%,
    transparent
  );
  background: color-mix(
    in oklab,
    var(--md-sys-color-primary) 12%,
    var(--md-sys-color-surface)
  );
  color: var(--md-sys-color-on-surface);
}

.data-grid__chip--on:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-primary) 18%,
    var(--md-sys-color-surface)
  );
}

.data-grid__chip--primary {
  border-color: transparent;
  background: var(--xm-color-primary-fill);
  color: var(--md-sys-color-on-primary);
}

.data-grid__chip--primary:hover {
  background: var(--xm-color-primary-pressed);
}

/* The layout has drifted from the saved view. A dot, not a word, because it
   sits on a 20px control — the tooltip carries the sentence. */
.data-grid__dot {
  display: block;
  inline-size: var(--s-1-5);
  block-size: var(--s-1-5);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
}

.data-grid__loading {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1-5);
  flex: 0 0 auto;
  color: var(--xm-color-on-surface-soft);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Density ---------- */
.data-grid__segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--s-0-5);
  flex: 0 0 auto;
  block-size: var(--s-6);
  box-sizing: border-box;
  padding: var(--s-0-5);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--xm-shape-corner-dense-lg);
  background: var(--md-sys-color-surface);
}

.data-grid__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  inline-size: var(--s-5-5);
  block-size: var(--s-4-5);
  padding: 0;
  border: 0;
  border-radius: var(--xm-shape-corner-dense-md);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

/* The named icon primitives are light-DOM elements, so the .ds-icon rule that
   blocks their <svg> out lives in a stylesheet that cannot reach inside this
   shadow root. A flex wrapper does the same job locally. */
.data-grid__segment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.data-grid__segment-icon svg {
  display: block;
}

.data-grid__segment:hover {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
}

.data-grid__segment:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-grid__segment--on {
  background: var(--xm-color-primary-fill);
  color: var(--md-sys-color-on-primary);
}

.data-grid__segment--on:hover {
  background: var(--xm-color-primary-pressed);
  color: var(--md-sys-color-on-primary);
}

/* ---------- Panels (setup + column menu) ----------
   The popover owns the surface, the border and the elevation; this is only the
   list inside it. */
.data-grid__panel {
  display: flex;
  flex-direction: column;
  min-inline-size: 208px;
  max-inline-size: 288px;
}

.data-grid__panel-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  margin-block-end: var(--s-1);
}

.data-grid__panel-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--md-sys-color-inverse-on-surface);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 600;
}

.data-grid__panel-meta,
.data-grid__panel-note {
  flex: 0 0 auto;
  color: var(--xm-color-inverse-on-surface-muted);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
}

.data-grid__panel-note {
  padding: var(--s-1) var(--s-2);
}

.data-grid__panel-label {
  padding: var(--s-1-5) var(--s-2) var(--s-1);
  color: var(--xm-color-inverse-on-surface-muted);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.data-grid__separator {
  block-size: 1px;
  margin: var(--s-1) var(--s-1);
  background: var(--md-sys-color-outline-variant);
}

.data-grid__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  inline-size: 100%;
  box-sizing: border-box;
  appearance: none;
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-inverse-on-surface);
  font-family: var(--md-sys-typescale-label-medium-font);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.data-grid__row:hover {
  background: color-mix(
    in oklab,
    var(--md-sys-color-inverse-on-surface) 9%,
    transparent
  );
}

.data-grid__row:focus-visible {
  outline: none;
  box-shadow: var(--xm-state-focus-ring);
}

.data-grid__row--on {
  color: var(--md-sys-color-primary);
}

/* Impossible actions are DISABLED, not removed: a menu whose rows move around
   depending on state has to be re-read every time it opens. */
.data-grid__row--disabled {
  color: var(--xm-color-inverse-on-surface-disabled);
  cursor: default;
}

.data-grid__row--disabled:hover {
  background: transparent;
}

.data-grid__row-icon,
.data-grid__row-check,
.data-grid__row-delete {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: inherit;
}

.data-grid__row-icon {
  color: var(--xm-color-inverse-on-surface-muted);
}

.data-grid__row--on .data-grid__row-icon,
.data-grid__row-check {
  color: var(--md-sys-color-primary);
}

.data-grid__row--disabled .data-grid__row-icon {
  color: var(--xm-color-inverse-on-surface-disabled);
}

.data-grid__row-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-grid__row-hint {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--xm-color-inverse-on-surface-muted);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
}

.data-grid__row-delete {
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--xm-color-inverse-on-surface-muted);
  cursor: pointer;
}

.data-grid__row-delete:hover {
  color: var(--md-sys-color-inverse-on-surface);
}

.data-grid__save {
  display: flex;
  align-items: center;
  gap: var(--s-1-5);
  padding: var(--s-1) var(--s-2) var(--s-1);
}

.data-grid__save-input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  box-sizing: border-box;
  padding: var(--s-1) var(--s-1-5);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: transparent;
  color: var(--md-sys-color-inverse-on-surface);
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
}

.data-grid__save-input::placeholder {
  color: var(--xm-color-inverse-on-surface-muted);
}

.data-grid__save-input:focus-visible {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--xm-state-focus-ring);
}

.data-grid__save .data-grid__chip {
  background: transparent;
  color: var(--md-sys-color-inverse-on-surface);
}

/* ---------- No matches ----------
   A search that matched nothing is a different state from a table with no data,
   and it names the query rather than reporting an absence of records. */
.data-grid__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1-5);
  flex: 1 1 auto;
  justify-content: center;
  padding: var(--s-6);
  background: var(--md-sys-color-surface-container-lowest);
  text-align: center;
}

.data-grid__empty-eyebrow,
.data-grid__empty-meta {
  color: var(--xm-color-on-surface-soft);
  font-family: var(--xm-typescale-mono-font);
  font-size: var(--md-sys-typescale-label-small-size);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.data-grid__empty-meta {
  letter-spacing: 0.08em;
  text-transform: none;
  margin-block-start: var(--s-2);
}

.data-grid__empty-title {
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  letter-spacing: -0.01em;
}

.data-grid__empty-text {
  max-inline-size: 42ch;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-wrap: pretty;
}

.data-grid__empty .data-grid__chip {
  margin-block-start: var(--s-2);
}