/* ============================================================================
   AVFX CRM — DATA GRID
   ----------------------------------------------------------------------------
   Default density: 36px rows, 13px cells. Header AND filter row are sticky.
   Compact (30px) and comfortable (44px) are available from the top bar.
   The first two columns are pinned so you can always see whose row you are on
   while scrolled sideways across 21 columns.

   The grid NEVER becomes cards at any window size (ADR-0002).
   ========================================================================== */

avfx-data-grid { display: block; min-block-size: 0; flex: 1; }

.g {
  display: flex; flex-direction: column;
  block-size: 100%; min-block-size: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --- ACTIVE FILTER CHIPS ------------------------------------------------- */

.g__chips {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border-subtle);
  background: var(--color-surface-sunken);
}
.g__chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  max-inline-size: 260px; block-size: 22px;
  padding-inline: var(--space-4) var(--space-3);
  font-size: var(--fs-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-full);
  color: var(--color-text-primary);
}
.g__chip:hover { background: var(--color-primary-subtle); }
.g__chip svg { inline-size: 11px; block-size: 11px; opacity: .6; }
.g__chip__k { color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.g__chip__k::after { content: ":"; }
.g__chip--clear { border-style: dashed; border-color: var(--color-border-strong); color: var(--color-text-secondary); padding-inline: var(--space-4); }

/* --- SCROLL AREA ---------------------------------------------------------
   Both directions scroll here. There is no card fallback at any width.    */

.g__scroll { position: relative; flex: 1; min-block-size: 0; overflow: auto; }

.g__table { inline-size: max-content; min-inline-size: 100%; table-layout: fixed; }

/* --- HEADER AND FILTER ROW — both sticky -------------------------------- */

.g__head th, .g__filters td {
  position: sticky; z-index: var(--z-sticky);
  background: var(--color-surface-sunken);
}
.g__head th  { inset-block-start: 0; block-size: var(--grid-head-h); }
.g__filters td { inset-block-start: var(--grid-head-h); padding: var(--space-3) var(--space-3); }

.g__head th {
  padding-inline: var(--cell-pad-x);
  font-size: var(--fs-2xs); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-secondary);
  text-align: start; white-space: nowrap;
  border-block-end: 1px solid var(--color-border);
  user-select: none;
}
.g__head th[aria-sort] { cursor: pointer; }
.g__head th[aria-sort]:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.g__filters td { border-block-end: 1px solid var(--color-border); }

.g__h { display: flex; align-items: center; gap: var(--space-3); }
.g__sort { display: inline-flex; align-items: center; gap: 1px; flex: none; }
.g__sort svg { inline-size: 12px; block-size: 12px; }
.g__sort.is-on { color: var(--color-primary); }
.g__sort b {
  font-size: 9px; font-weight: var(--fw-bold);
  min-inline-size: 12px; block-size: 12px; line-height: 12px; text-align: center;
  background: var(--color-primary); color: var(--color-on-accent); border-radius: var(--radius-full);
}

/* --- PINNED COLUMNS ------------------------------------------------------ */

.g__c.is-pinned { position: sticky; z-index: 1; background: var(--color-surface); }
.g__head th.is-pinned, .g__filters td.is-pinned { z-index: calc(var(--z-sticky) + 1); background: var(--color-surface-sunken); }
.g__r:hover .g__c.is-pinned { background: var(--color-surface-hover); }

/* The separating shadow appears only once you actually scroll sideways. */
.g__scroll.is-scrolled-x .g__c.is-pinned:last-of-type,
.g__scroll.is-scrolled-x th.is-pinned + th:not(.is-pinned) { box-shadow: none; }
.g__scroll.is-scrolled-x .is-pinned { box-shadow: var(--pin-shadow); }

/* --- ROWS AND CELLS ------------------------------------------------------ */

.g__r { block-size: var(--row-h); }
.g__r:hover { background: var(--color-surface-hover); }
.g__r:hover td { background: var(--color-surface-hover); }
.g__r:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.g__r + .g__r td { border-block-start: 1px solid var(--color-border-subtle); }

.g__c {
  padding-inline: var(--cell-pad-x);
  font-size: var(--fs-xs);
  color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.g__c.is-end { text-align: end; }
.g__c.num { font-variant-numeric: tabular-nums; }

/* --- CELL CONTENT PATTERNS ----------------------------------------------- */

.g-name { display: flex; align-items: center; gap: var(--space-4); min-inline-size: 0; }
.g-name__t { min-inline-size: 0; line-height: 1.15; }
.g-name__n { display: block; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; }
.g-name__id { display: block; font-size: var(--fs-3xs); color: var(--color-text-tertiary); letter-spacing: .03em; }

.g-act {
  display: grid; place-items: center;
  inline-size: 24px; block-size: 24px; border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
}
.g-act svg { inline-size: 13px; block-size: 13px; }
.g-act:hover { background: var(--color-primary-subtle); color: var(--color-primary); }

.g-copy {
  display: inline-flex; align-items: center; gap: var(--space-3);
  max-inline-size: 100%; border-radius: var(--radius-xs);
}
.g-copy > span { overflow: hidden; text-overflow: ellipsis; }
.g-copy svg { inline-size: 11px; block-size: 11px; opacity: 0; color: var(--color-text-tertiary); flex: none; }
.g-copy:hover svg { opacity: 1; }

.g-muted { color: var(--color-text-tertiary); }
.g-time  { font-variant-numeric: tabular-nums; }

/* --- STATES --------------------------------------------------------------
   Skeleton matches the real layout. Never a spinner.                      */

.g__sk {
  display: block; block-size: 9px; border-radius: var(--radius-xs);
  background: linear-gradient(90deg,
    var(--color-surface-sunken) 25%,
    color-mix(in srgb, var(--color-surface-sunken) 55%, var(--color-border)) 50%,
    var(--color-surface-sunken) 75%);
  background-size: 400% 100%;
  animation: g-shimmer 1.4s ease-in-out infinite;
}
@keyframes g-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .g__sk { animation: none; } }

.g__state {
  padding: var(--space-11) var(--space-8);
  text-align: center; color: var(--color-text-secondary);
}
.g__state svg { inline-size: 32px; block-size: 32px; color: var(--color-text-tertiary); stroke-width: 1.5; margin-inline: auto; }
.g__state h3 { margin-block: var(--space-5) var(--space-3); font-size: var(--fs-md); color: var(--color-text-primary); }
.g__state p { max-inline-size: 44ch; margin-inline: auto; margin-block-end: var(--space-5); font-size: var(--fs-sm); }

/* Refreshing: old rows stay readable, dimmed, rather than being blanked. */
.g__overlay {
  position: absolute; inset: 0; z-index: 2;
  background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  cursor: progress;
}

/* --- FOOTER AND PAGINATION ----------------------------------------------- */

.g__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  flex: none; min-block-size: 38px;
}
.g__foot__l { display: flex; align-items: center; gap: var(--space-5); }
.g__size { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-2xs); color: var(--color-text-secondary); }
.g__size select {
  block-size: var(--ctl-h-xs); padding-inline: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: var(--fs-2xs); cursor: pointer;
}
.g__range { font-size: var(--fs-2xs); color: var(--color-text-secondary); }
.g__took  { font-size: var(--fs-3xs); color: var(--color-text-tertiary); }

.g__pager { display: flex; align-items: center; gap: var(--space-2); }
.g__pg {
  display: grid; place-items: center;
  inline-size: var(--ctl-h-xs); block-size: var(--ctl-h-xs);
  border-radius: var(--radius-sm); color: var(--color-text-secondary);
}
.g__pg:not(:disabled):hover { background: var(--color-surface); color: var(--color-text-primary); }
.g__pg:disabled { opacity: .3; }
.g__pg svg { inline-size: 14px; block-size: 14px; }
.g__pgn { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-2xs); color: var(--color-text-secondary); margin-inline: var(--space-3); }
.g__pgn input {
  inline-size: 46px; block-size: var(--ctl-h-xs); text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); font-size: var(--fs-2xs);
}
.g__pgn input::-webkit-outer-spin-button, .g__pgn input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- COLUMN CHOOSER ------------------------------------------------------ */

.cc { inline-size: 268px; display: flex; flex-direction: column; max-block-size: 420px; }
.cc__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  border-block-end: 1px solid var(--color-border-subtle);
}
.cc__head span { font-size: var(--fs-3xs); font-weight: var(--fw-normal); color: var(--color-text-tertiary); }
.cc__body { overflow-y: auto; padding: var(--space-2); flex: 1; }
.cc__row { display: flex; align-items: center; gap: var(--space-2); }
.cc__row .fx-check { flex: 1; min-inline-size: 0; }
.cc__move { display: flex; opacity: 0; }
.cc__row:hover .cc__move, .cc__move:focus-within { opacity: 1; }
.cc__move button {
  display: grid; place-items: center;
  inline-size: 20px; block-size: 20px; border-radius: var(--radius-xs);
  color: var(--color-text-tertiary);
}
.cc__move button:not(:disabled):hover { background: var(--color-surface-hover); color: var(--color-text-primary); }
.cc__move button:disabled { opacity: .25; }
.cc__move svg { inline-size: 12px; block-size: 12px; }
.cc__foot { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--color-border-subtle); background: var(--color-surface-sunken); }