/* =============================================================================
 * LOCKED � Diaco DS Grid CSS (FE18 / design-system/GRID_CONTRACT.md)
 * Single source for ALL panel CRUD grids.
 * Do NOT copy cell/fit/toolbar rules into rich-live-*.js page styles.
 * Change only with #data-grid sample + Founder path + verify scripts.
 * ============================================================================= */

/* =========================================================
   Data Grid � toolbar, exports, table frame (UX16)
   ========================================================= */

.ds-grid {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  /* clip only table scroll — pager dropdown must not be cut off */
  overflow: visible;
  isolation: isolate;
}

/* ---- Toolbar ---- */
.ds-grid__toolbar {
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid var(--border);
}
/* An action cluster embedded in the grid toolbar is part of the same row.
   The generic rlx toolbar reserves space below standalone toolbars; keeping
   that margin here shifts its buttons upward relative to search/filter
   controls even though the parent row is center-aligned. */
.ds-grid__toolbar > .rlx-toolbar {
  align-items: center;
  margin-block-end: 0;
}
.ds-grid__toolbar > .rlx-toolbar > .btn.ghost:is(:hover, :focus-visible) {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
}
/* C2 empty chrome � controls stay visible but inert */
.ds-grid__toolbar.is-empty-chrome button:disabled,
.ds-grid__toolbar.is-empty-chrome input:disabled,
.ds-grid__toolbar.is-empty-chrome .btn.is-disabled,
.ds-grid__toolbar.is-empty-chrome .ds-grid__export-btn:disabled,
.ds-grid__toolbar.is-empty-chrome .ds-grid__cols-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.3);
  pointer-events: none;
  box-shadow: none;
}
/* Toolbar controls: fixed-ish widths — not full-bleed on desktop */
.ds-grid__toolbar .ds-dropdown {
  width: auto;
  flex: 0 0 auto;
}
.ds-grid__toolbar .ds-dropdown--compact {
  min-width: 160px;
  max-width: 200px;
}

/* Icon wrappers — SVG centered, not background-image */
.ds-grid__search-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 340px;
  display: flex;
  align-items: center;
}
.ds-grid__select-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 148px;
}
.ds-grid__select-wrap--sm { min-width: 128px; }

.ds-grid__field-icon {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-faint);
  pointer-events: none;
  z-index: 1;
}
.ds-grid__field-icon svg { display: block; }
.ds-grid__search-clear {
  position: absolute;
  inset-inline-end: 10px;
  inset-block-start: 50%;
  inset-block-end: auto;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 2;
}
.ds-grid__search-clear:hover { color: var(--text); background: var(--surface-soft); }
.ds-grid__search-clear[hidden], .ds-grid__field-icon[hidden] { display: none !important; }
.ds-grid__search-clear,
.ds-grid__search-clear:hover,
.ds-grid__search-clear:focus-visible { cursor: pointer; }

.ds-grid__search {
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  padding-inline-end: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  box-sizing: border-box;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  background-image: none;
}
.ds-grid__search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.ds-grid__search:has(+ .ds-grid__search-clear:not([hidden])) { padding-inline-end: 38px; }
.ds-grid__search::placeholder { color: var(--text-faint); font-weight: 400; }
.ds-grid__search:hover {
  border-color: var(--border-strong);
}
.ds-grid__search:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

/* Custom select — chevron via wrapper icon */
.ds-grid__select {
  width: 100%;
  min-height: 40px;
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 14px;
  padding-inline-end: 38px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  background-image: none;
}
.ds-grid__select:hover {
  border-color: color-mix(in srgb, var(--brand-500) 35%, var(--border));
  background: color-mix(in srgb, var(--brand-500) 4%, var(--surface));
}
.ds-grid__select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 20%, transparent);
}

/* ---- Column visibility picker ---- */
.ds-grid__cols-wrap {
  position: relative;
  margin-inline-start: auto;
}

.ds-grid__cols-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.ds-grid__cols-btn svg { flex-shrink: 0; opacity: .75; }

.ds-grid__cols-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface-2);
}

.ds-grid__cols-btn.is-open,
.ds-grid__cols-btn[aria-expanded="true"] {
  border-color: var(--brand-400);
  color: var(--brand-700);
  background: color-mix(in srgb, var(--brand-100) 60%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 18%, transparent);
}

.ds-grid__cols-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.ds-grid__cols-panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: min(260px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--text) 12%, transparent);
  overflow: hidden;
  animation: dsPopIn .18s ease;
}

.ds-grid__cols-head {
  padding: 12px 14px 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.ds-grid__cols-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.ds-grid__cols-list li + li { margin-top: 4px; }

.ds-grid__col-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s ease;
}

.ds-grid__col-opt:hover { background: var(--surface-2); }

.ds-grid__col-opt input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-500);
  cursor: pointer;
  flex-shrink: 0;
}

.ds-grid__cols-foot {
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* ---- Export pills — pastel hover; collapse to menu when row is too narrow ---- */
.ds-grid__exports {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-inline-start: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  position: relative;
}

.ds-grid__exports-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 0 1 auto;
}

.ds-grid__exports-inline.is-measure {
  position: absolute;
  visibility: hidden;
  width: max-content;
  flex: none;
  pointer-events: none;
  inset-inline-start: 0;
  top: 0;
}

.ds-grid__exports-inline[hidden],
.ds-grid__exports-compact[hidden] {
  display: none !important;
}

.ds-grid__exports-compact {
  flex: 0 0 auto;
  width: auto;
  min-width: 112px;
  max-width: 140px;
}

#ds-grid-fit-cols {
  flex: 0 0 auto;
}

.ds-grid__export-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  transition:
    color .28s ease,
    border-color .28s ease,
    background-color .28s ease,
    box-shadow .28s ease,
    transform .18s ease;
}
.ds-grid__export-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity .28s ease;
}
.ds-grid__export-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, .12);
}
.ds-grid__export-btn:hover::before {
  opacity: 1;
}
[data-grid-export="excel"]::before {
  background: linear-gradient(145deg, color-mix(in srgb, var(--pastel-mint) 75%, #fff), color-mix(in srgb, var(--pastel-mint) 45%, var(--surface)));
}
[data-grid-export="excel"]:hover {
  color: #1c6f53;
  border-color: color-mix(in srgb, var(--pastel-mint) 50%, var(--brand-500));
  box-shadow: 0 6px 18px -8px rgba(44, 120, 115, .22);
}
[data-grid-export="csv"]::before {
  background: linear-gradient(145deg, color-mix(in srgb, var(--pastel-sky) 75%, #fff), color-mix(in srgb, var(--pastel-sky) 45%, var(--surface)));
}
[data-grid-export="csv"]:hover {
  color: #255a86;
  border-color: color-mix(in srgb, var(--pastel-sky) 50%, #3b82c4);
  box-shadow: 0 6px 18px -8px rgba(59, 130, 196, .22);
}
[data-grid-export="pdf"]::before {
  background: linear-gradient(145deg, color-mix(in srgb, var(--pastel-peach) 78%, #fff), color-mix(in srgb, var(--pastel-peach) 48%, var(--surface)));
}
[data-grid-export="pdf"]:hover {
  color: #9a5a2b;
  border-color: color-mix(in srgb, var(--pastel-peach) 55%, #e8955f);
  box-shadow: 0 6px 18px -8px rgba(232, 149, 95, .24);
}
[data-grid-export="print"]::before {
  background: linear-gradient(145deg, color-mix(in srgb, var(--pastel-lilac) 75%, #fff), color-mix(in srgb, var(--pastel-lilac) 45%, var(--surface)));
}
[data-grid-export="print"]:hover {
  color: #5a45a8;
  border-color: color-mix(in srgb, var(--pastel-lilac) 50%, #8b74e0);
  box-shadow: 0 6px 18px -8px rgba(139, 116, 224, .22);
}
.ds-grid__export-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .1);
}
.ds-grid__export-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
}

#ds-grid-add {
  flex-shrink: 0;
  border-radius: 12px;
  min-height: 36px;
  padding-inline: 18px;
}

/* ---- Bulk bar (visible only when rows selected) ---- */
.ds-grid__bulk {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 18%, var(--border));
  animation: dsGridBulkIn .28s ease both;
}

.ds-grid__bulk[hidden] {
  display: none !important;
}

@keyframes dsGridBulkIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ds-grid__bulk-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-600);
  flex-shrink: 0;
}

.ds-grid__bulk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.ds-grid__bulk-btn {
  white-space: nowrap;
}

/* ---- Table frame ---- */
.ds-grid__frame {
  border-top: none;
  overflow: visible;
  border-radius: 0;
}

/* Horizontal scroll when table min-width exceeds viewport */
.ds-grid__hscroll {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.ds-grid__hscroll::-webkit-scrollbar { height: 6px; }
.ds-grid__hscroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* Vertical scroll — body only; head band stays fixed above.
 * `hidden` is coerced to `auto` by the CSS overflow-axis rules when the other
 * axis is auto, which creates a second horizontal scrollbar in Chromium.
 * `clip` makes the body a strict non-owner of horizontal scrolling; C5's
 * outer hscroll remains the single horizontal scroll owner for every grid. */
.ds-grid__scroll {
  position: relative;
  z-index: 2;
  max-height: 380px;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  /* C5: only .ds-grid__hscroll owns horizontal scroll � no second X track here */
  scrollbar-gutter: stable;
}
.ds-grid__scroll::-webkit-scrollbar { width: 6px; }
.ds-grid__scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

.ds-grid__body {
  margin-top: 0;
}

.ds-grid__cell-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.35;
}
.ds-grid__cell-stack b {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-grid__cell-stack span {
  color: var(--text-muted, #8491a5);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Matrix grid — every row shares --ds-grid-cols (set in JS).
 * The matrix width already includes the vertical-scrollbar gutter in ds-grid.js.
 * Header, body and footer therefore use the exact same matrix width and column
 * template; adding band padding here would compensate the gutter twice.
 */
.ds-grid__matrix {
  width: 100%;
  min-width: 720px;
  font-size: 12.5px;
  --ds-grid-cols: 40px 1fr 108px;
  --ds-grid-vscroll-gutter: 0px;
}

.ds-grid__head-band {
  position: relative;
  z-index: 1;
  background: var(--surface-2);
  box-sizing: border-box;
  padding-inline-end: var(--ds-grid-vscroll-gutter);
}

.ds-grid__row {
  display: grid;
  grid-template-columns: var(--ds-grid-cols);
  width: 100%;
  min-width: 0;
}

.ds-grid__row > .ds-grid__cell {
  box-sizing: border-box;
  min-width: 0;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell--body {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell--body .chip {
  white-space: nowrap;
}

/* FE16 � primary + meta cell contract (default stacked; nowrap = one line) */
.ds-grid__cell-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}

.ds-grid__cell-primary {
  font-weight: 700;
  min-width: 0;
  max-width: 100%;
}

.ds-grid__cell-meta {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted, #8491a5);
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell-stack {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell-primary {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell-meta {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .78;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell-meta::before {
  content: "�";
  margin-inline-end: 6px;
  opacity: .55;
}

/* Some descriptive identity columns must remain title-over-meta even when the
   rest of the matrix is switched to compact one-line mode. */
.ds-grid__matrix.is-nowrap .ds-grid__cell-stack--always {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ds-grid__matrix.is-nowrap .ds-grid__cell-stack--always :is(.ds-grid__cell-primary, .ds-grid__cell-meta) {
  flex: none;
  max-width: 100%;
}
.ds-grid__matrix.is-nowrap .ds-grid__cell-stack--always .ds-grid__cell-meta::before {
  content: none;
}

/* Fit / ????? toggle active */
.ds-grid__export-btn.is-fit-active,
#ds-grid-fit-cols.is-fit-active,
[data-rld-fit-cols].is-fit-active {
  background: color-mix(in srgb, var(--brand-500) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-500) 40%, var(--border));
  color: var(--brand-700, #1f5c57);
  font-weight: 700;
}

/* Extra chip tones used by grid cells (FE16) */
.ds-grid .chip.sky,
.chip.sky { background: var(--pastel-sky, #e8f1ff); color: #2f6fed; }
.ds-grid .chip.slate,
.chip.slate { background: #eef1f6; color: #5b6475; }
.ds-grid .chip.lilac,
.chip.lilac { background: var(--pastel-lilac, #efe9ff); color: #6d50d4; }
.ds-grid .chip.peach,
.chip.peach { background: var(--pastel-peach, #ffe8d6); color: #c46920; }

/* Legacy table fallback (other demos) */
.ds-grid__table {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12.5px;
}

.ds-grid__table th,
.ds-grid__table td,
.ds-grid__cell {
  box-sizing: border-box;
}

.ds-grid__cell--head {
  position: relative;
  padding-block: 11px;
  padding-inline: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: start;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  border-inline-end: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}

.ds-grid__row--head > .ds-grid__cell--head:last-child,
.ds-grid__table thead th:last-child { border-inline-end: none; }

/*
 * Footer/totals band (GRID_CONTRACT.md C11) � a third row-band, sibling to
 * head-band and scroll, INSIDE .ds-grid__matrix so it inherits --ds-grid-cols
 * from the same ancestor (CSS custom properties cascade regardless of DOM
 * position) � zero JS width-calc changes needed for column alignment.
 * Sits OUTSIDE .ds-grid__scroll (which owns vertical overflow) so the totals
 * row stays permanently visible below the scrolling body, mirroring how
 * .ds-grid__head-band stays fixed above it. The parent matrix already owns
 * scrollbar-width compensation, so this band must not add another gutter.
 */
.ds-grid__foot-band {
  position: relative;
  z-index: 1;
  background: var(--surface-2);
  box-sizing: border-box;
  border-top: 1px solid var(--border-strong);
}

.ds-grid__cell--foot {
  position: relative;
  padding-block: 10px;
  padding-inline: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-align: start;
  border-inline-end: 1px solid var(--border);
  box-sizing: border-box;
}

.ds-grid__row--foot > .ds-grid__cell--foot:last-child { border-inline-end: none; }

.ds-grid__table.is-col-sized {
  table-layout: fixed;
}

.ds-grid__table.is-nowrap tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-grid__table.is-nowrap tbody td .chip {
  white-space: nowrap;
}

.ds-grid__table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 11px;
  padding-inline: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: start;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  border-inline-end: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.ds-grid__table thead th:last-child { border-inline-end: none; }

.ds-grid__th-sort {
  position: relative;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

/* Grid inside th — never on th itself (breaks table row layout) */
.ds-grid__th-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  min-width: 0;
}

.ds-grid__th-label {
  grid-column: 1;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: start;
}

.ds-grid__sort {
  grid-column: 2;
  grid-row: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  font-size: 10px;
  line-height: 1;
  opacity: .45;
  transition: opacity .2s ease, color .2s ease;
}

.ds-grid__th-num .ds-grid__th-label {
  text-align: end;
}

.ds-grid__col-resize {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}

.ds-grid__col-resize::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--border);
  opacity: 1;
  transition: opacity .15s ease, background .15s ease;
}

.ds-grid__col-resize.is-active::after,
.ds-grid__col-resize:hover::after,
.ds-grid__col-resize:focus-visible::after {
  opacity: 1;
  background: var(--brand-500);
  width: 2px;
  inset-inline-end: 0;
}

body.is-grid-col-resizing,
body.is-grid-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.ds-grid__matrix.is-col-resizing {
  pointer-events: auto;
}

.ds-grid__matrix.is-col-resizing .ds-grid__col-resize.is-active {
  z-index: 5;
}

.ds-grid__th-sort:hover {
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-2));
  color: var(--brand-600);
}
.ds-grid__th-sort.is-sorted {
  color: var(--brand-600);
  background: color-mix(in srgb, var(--brand-500) 6%, var(--surface-2));
}
.ds-grid__th-sort.is-sorted .ds-grid__sort { opacity: 1; color: var(--brand-500); }

.ds-grid__th-num,
.ds-grid__table td.ds-num { text-align: end; }

/* Explicit center (rings/sparks/status) must win over numeric th/td defaults */
.ds-grid__th-num[data-align="center"],
.ds-grid__cell--body.ds-num[data-align="center"],
.ds-grid__table td.ds-num[data-align="center"] {
  text-align: center;
}

.ds-grid__matrix .ds-grid__cell--head[data-align="center"],
.ds-grid__matrix .ds-grid__cell--body[data-align="center"],
.ds-grid__table thead th[data-align="center"],
.ds-grid__table tbody td[data-align="center"] {
  text-align: center;
}

.ds-grid__matrix .ds-grid__cell--head[data-align="end"],
.ds-grid__matrix .ds-grid__cell--body[data-align="end"],
.ds-grid__table thead th[data-align="end"],
.ds-grid__table tbody td[data-align="end"] {
  text-align: end;
}

.ds-grid__matrix .ds-grid__cell--head[data-align="start"],
.ds-grid__matrix .ds-grid__cell--body[data-align="start"],
.ds-grid__table thead th[data-align="start"],
.ds-grid__table tbody td[data-align="start"] {
  text-align: start;
}

.ds-grid__cell--body {
  padding-block: 11px;
  padding-inline: 12px;
  border-bottom: none;
  border-inline-end: 1px solid var(--border);
  vertical-align: middle;
  background: var(--surface);
  transition: background .15s ease;
}

/* Some read-only consumers keep the structural final cell while configuring
 * actionsWidth: 0. Its padding would otherwise overflow the zero-width track
 * and manufacture a horizontal scrollbar inside the vertical body scroller. */
.ds-grid__row > .ds-grid__cell--body:last-child:empty {
  padding-inline: 0;
  overflow: clip;
  border-inline-end: 0;
}

/* Field displays / status must stay one line once column is fitted */
.ds-grid__cell--body .ds-metric,
.ds-grid__cell--body .ds-metric--status,
.ds-grid__cell--body .ds-fd,
.ds-grid__cell--body .ds-inline-row,
.ds-grid__cell--body .chip {
  white-space: nowrap;
  flex-wrap: nowrap;
}

.ds-grid__matrix.is-nowrap .ds-grid__cell--body .ds-fd,
.ds-grid__matrix.is-nowrap .ds-grid__cell--body .ds-metric {
  max-width: none;
}

/* Money / numeric: after autofit, prefer clip over ellipsis on the unit side */
.ds-grid__matrix.is-nowrap .ds-grid__cell--body:has(.ds-fd--money),
.ds-grid__matrix.is-nowrap .ds-grid__cell--body:has(.ds-metric--value),
.ds-grid__matrix.is-nowrap .ds-grid__cell--body:has(.ds-metric--pct),
.ds-grid__matrix.is-nowrap .ds-grid__th-num + .ds-grid__cell--body,
.ds-grid__matrix.is-nowrap .ds-grid__cell--body.ds-num {
  text-overflow: clip;
}

/* Offscreen host for dblclick / ? autofit measuring real cell HTML */
.ds-grid__fit-measure {
  position: absolute;
  inset-inline-start: -99999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  max-width: none;
  padding: 0;
  margin: 0;
  font: 400 12.5px Vazirmatn, system-ui, sans-serif;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.ds-grid__fit-measure-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  max-width: none;
}

/* Autofit measures nowrap layout (primary � meta on one line), not stacked */
.ds-grid__fit-measure .ds-grid__cell-stack,
.ds-grid__fit-measure-inner--stack .ds-grid__cell-stack {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  max-width: none;
  min-width: max-content;
  width: max-content;
  overflow: visible;
}

.ds-grid__fit-measure .ds-grid__cell-primary,
.ds-grid__fit-measure .ds-grid__cell-meta {
  max-width: none !important;
  min-width: max-content;
  overflow: visible !important;
  text-overflow: clip;
  white-space: nowrap;
}

.ds-grid__fit-measure .ds-grid__cell-primary {
  font-weight: 700;
  font-size: 12.5px;
}

.ds-grid__fit-measure .ds-grid__cell-meta {
  font-size: 11px;
  font-weight: 400;
}

/* Measure at full cell size � .ds-fd catalog uses 0.9em which under-fits */
.ds-grid__fit-measure .ds-fd {
  font-size: 12.5px;
  line-height: 1.2;
}

.ds-grid__fit-measure .ds-fd--money,
.ds-grid__fit-measure .ds-metric {
  font-weight: 600;
}

.ds-grid__fit-measure .ds-fd--money small {
  font-size: 0.75em;
  font-weight: 500;
  margin-inline-start: 0.2rem;
  white-space: nowrap;
}

.ds-grid__body .ds-grid__row:not(.ds-grid__row--head) {
  border-bottom: 1px solid var(--border);
}
.ds-grid__row > .ds-grid__cell--body:last-child,
.ds-grid__table tbody td:last-child { border-inline-end: none; }

.ds-grid__row:hover .ds-grid__cell--body,
.ds-grid__table tbody tr:hover td {
  background: color-mix(in srgb, var(--brand-500) 4%, var(--surface));
}
.ds-grid__row.is-selected .ds-grid__cell--body,
.ds-grid__table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface));
}

/* A row only advertises clickability when clicking the row itself does
   something: the grid kit opens it (rld-grid-row-open-enabled), or the row
   declares it with the shared markers. Rows whose only actions are their
   buttons keep the normal cursor so the pointer never misleads. */
.ds-grid__row {
  cursor: default;
  transition: background .15s ease;
}
.rld-grid-row-open-enabled .ds-grid__body .ds-grid__row:not(.ds-grid__row--head),
.ds-grid__row[data-clickable],
.ds-grid__row[data-href],
.ds-grid__row[data-route],
.ds-grid__row[tabindex="0"] {
  cursor: pointer;
}
/* Status-only rows on the communication-channels page do not navigate or
   open a detail view, so they must not advertise clickability. */
.rld-chn-grid .ds-grid__body .ds-grid__row {
  cursor: default;
}
.rld-chn-grid .ds-grid__body .ds-grid__row button,
.rld-chn-grid .ds-grid__body .ds-grid__row a,
.rld-chn-grid .ds-grid__body .ds-grid__row [role="button"] {
  cursor: pointer;
}
.rld-stg-grid .ds-grid__body .ds-grid__row {
  cursor: default;
}
.rld-stg-grid .ds-grid__body .ds-grid__row :is(button, a, [role="button"]):not(:disabled) {
  cursor: pointer;
}
.rld-stg-grid .ds-grid__body .ds-grid__row button:disabled {
  cursor: not-allowed;
}
.rld-afcg-grid--crm-questionnaires .ds-grid__body .ds-grid__row {
  cursor: default;
}
.rld-afcg-grid--crm-questionnaires .ds-grid__body .ds-grid__row :is(button, a, [role="button"]):not(:disabled) {
  cursor: pointer;
}
.rld-afcg-grid--crm-questionnaires .ds-grid__body .ds-grid__row button:disabled {
  cursor: not-allowed;
}
.rld-stg-grid .ds-grid__hscroll.is-content-fit,
.rld-afcg-grid--crm-questionnaires .ds-grid__hscroll.is-content-fit {
  overflow-x: hidden;
  scrollbar-width: none;
}
.rld-stg-grid .ds-grid__hscroll.is-content-fit::-webkit-scrollbar,
.rld-afcg-grid--crm-questionnaires .ds-grid__hscroll.is-content-fit::-webkit-scrollbar {
  display: none;
}
.ds-grid__row.is-row-focus .ds-grid__cell--body,
.ds-grid__table tbody tr.is-row-focus td {
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
  outline: 2px solid color-mix(in srgb, var(--brand-500) 25%, transparent);
  outline-offset: -2px;
}

.ds-grid__table tbody td {
  padding-block: 11px;
  padding-inline: 12px;
  border-bottom: 1px solid var(--border);
  border-inline-end: 1px solid var(--border);
  vertical-align: middle;
  background: var(--surface);
  transition: background .15s ease;
}
.ds-grid__table tbody td:last-child { border-inline-end: none; }
.ds-grid__table tbody tr:hover td {
  background: color-mix(in srgb, var(--brand-500) 4%, var(--surface));
}
.ds-grid__table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface));
}

.ds-grid__table tbody tr {
  cursor: pointer;
  transition: background .15s ease;
}
.ds-grid__table tbody tr.is-row-focus td {
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
  outline: 2px solid color-mix(in srgb, var(--brand-500) 25%, transparent);
  outline-offset: -2px;
}

.ds-grid__th-check,
.ds-grid__td-check {
  text-align: center;
  cursor: pointer;
}
.ds-grid__td-check input[type="checkbox"],
.ds-grid__th-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand-500);
  cursor: pointer;
  vertical-align: middle;
}

.ds-grid__th-rownum,
.ds-grid__td-rownum {
  text-align: center;
  white-space: nowrap;
  padding-inline: 6px;
}
.ds-grid__th-rownum {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.ds-grid__td-rownum {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Simple table — clickable rows */
.ds-table-clickable .rui-table tbody tr {
  cursor: pointer;
  transition: background .15s ease;
}
.ds-table-clickable .rui-table tbody tr:hover td,
.ds-table-clickable .rui-table tbody tr.is-row-focus td {
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface));
}
.ds-table-clickable .rui-table tbody tr:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

.ds-grid__th-actions {
  text-align: center;
}

.ds-grid__row-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ds-grid__row-actions:has(.ds-tip:hover),
.ds-grid__row-actions:has(.ds-tip:focus-within),
.ds-grid__td-actions:has(.ds-tip:hover),
.ds-grid__td-actions:has(.ds-tip:focus-within) {
  z-index: 50;
}

.rld-grid-row-open-enabled .ds-grid__body .ds-grid__row:not(.ds-grid__row--head) {
  cursor: pointer;
}

.rld-grid-row-open-enabled .ds-grid__body .ds-grid__row:not(.ds-grid__row--head):hover {
  background: color-mix(in srgb, var(--brand-500, #0d9488) 5%, var(--surface, #fff));
}

.rld-grid-row-open-enabled .ds-grid__body .ds-grid__row:not(.ds-grid__row--head):active {
  background: color-mix(in srgb, var(--brand-500, #0d9488) 8%, var(--surface, #fff));
}

.ds-grid__cell--body:has(.ds-grid__row-actions),
.ds-grid__cell--body.ds-grid__td-actions {
  overflow: visible;
}

.ds-grid__row:hover .ds-grid__cell--body:has(.ds-grid__row-actions),
.ds-grid__row:focus-within .ds-grid__cell--body:has(.ds-grid__row-actions),
.ds-grid__row:hover .ds-grid__cell--body.ds-grid__td-actions,
.ds-grid__row:focus-within .ds-grid__cell--body.ds-grid__td-actions {
  z-index: 3;
}

.ds-grid__row-btn {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--brand-500) 18%, var(--border));
  border-radius: 10px;
  background: var(--surface);
  font-size: 0;
  line-height: 0;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  place-content: center;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .15s ease, box-shadow .22s ease;
}

/* Shared Material icon surface (sample + panel). Prefer .ds-ico / .ds-grid__ico from DsIcons. */
.ds-ico,
.ds-grid__ico {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.2em;
  flex-shrink: 0;
  fill: currentColor;
  color: inherit;
}
.ds-ico--sm { width: 14px; height: 14px; }
.ds-ico--md { width: 18px; height: 18px; }
.ds-ico--lg { width: 22px; height: 22px; }
.ds-ico--xl { width: 28px; height: 28px; }

/* L18 � semantic icon tones (content/concept). Chrome chevrons stay muted. */
.ds-ico-tone-sky,
[data-ds-icon-tone="sky"] { color: #3b5998; }
.ds-ico-tone-mint,
[data-ds-icon-tone="mint"] { color: #0f766e; }
.ds-ico-tone-green,
[data-ds-icon-tone="green"] { color: #2f8a5e; }
.ds-ico-tone-amber,
[data-ds-icon-tone="amber"] { color: #c46920; }
.ds-ico-tone-lilac,
[data-ds-icon-tone="lilac"] { color: #6d50d4; }
.ds-ico-tone-rose,
[data-ds-icon-tone="rose"] { color: #b14458; }
.ds-ico-tone-peach,
[data-ds-icon-tone="peach"] { color: #c46920; }
.ds-ico-tone-slate,
[data-ds-icon-tone="slate"] { color: #64748b; }

/*
 * The tone belongs to the glyph, not only to its host.  Several page-level
 * components set `color` on their SVG/Material icon with a more specific
 * selector; keep the Design System's semantic tone authoritative so a rose
 * risk icon cannot render navy inside a rose pastel tile.
 */
.ds-ico[data-tone="sky"], [data-ds-icon-tone="sky"] > :is(.ds-ico,.material-symbols-rounded) { color: #3b5998 !important; }
.ds-ico[data-tone="mint"], [data-ds-icon-tone="mint"] > :is(.ds-ico,.material-symbols-rounded) { color: #0f766e !important; }
.ds-ico[data-tone="green"], [data-ds-icon-tone="green"] > :is(.ds-ico,.material-symbols-rounded) { color: #2f8a5e !important; }
.ds-ico[data-tone="amber"], [data-ds-icon-tone="amber"] > :is(.ds-ico,.material-symbols-rounded) { color: #c46920 !important; }
.ds-ico[data-tone="lilac"], [data-ds-icon-tone="lilac"] > :is(.ds-ico,.material-symbols-rounded) { color: #6d50d4 !important; }
.ds-ico[data-tone="rose"], [data-ds-icon-tone="rose"] > :is(.ds-ico,.material-symbols-rounded) { color: #b14458 !important; }
.ds-ico[data-tone="peach"], [data-ds-icon-tone="peach"] > :is(.ds-ico,.material-symbols-rounded) { color: #c46920 !important; }
.ds-ico[data-tone="slate"], [data-ds-icon-tone="slate"] > :is(.ds-ico,.material-symbols-rounded) { color: #64748b !important; }

/*
 * Filled primary actions use a dark brand surface, so their glyphs inherit
 * the same high-contrast foreground as the label. Semantic content tones are
 * for standalone icons and pastel tiles, not icons embedded in CTA buttons.
 */
.btn.primary :is(.ds-ico, .ds-grid__ico, .material-symbols-rounded),
.btn.primary [data-ds-icon-tone] > :is(.ds-ico, .ds-grid__ico, .material-symbols-rounded) {
  color: #fff !important;
}

/* Soft tile behind a content icon (optional host) */
.ds-ico-tile {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  background: color-mix(in srgb, currentColor 14%, var(--surface, #fff));
  color: inherit;
}
.ds-ico-tile .ds-ico { width: 16px; height: 16px; color: inherit; }
.ds-ico-tile.ds-ico-tone-sky,
.ds-ico-tile[data-ds-icon-tone="sky"] { color: #3b5998; background: var(--pastel-sky, #b8d4f1); }
.ds-ico-tile.ds-ico-tone-mint,
.ds-ico-tile[data-ds-icon-tone="mint"] { color: #0f766e; background: var(--pastel-mint, #b8e6d3); }
.ds-ico-tile.ds-ico-tone-green,
.ds-ico-tile[data-ds-icon-tone="green"] { color: #2f8a5e; background: var(--pastel-mint, #b8e6d3); }
.ds-ico-tile.ds-ico-tone-amber,
.ds-ico-tile[data-ds-icon-tone="amber"] { color: #c46920; background: var(--pastel-peach, #ffe4cc); }
.ds-ico-tile.ds-ico-tone-lilac,
.ds-ico-tile[data-ds-icon-tone="lilac"] { color: #6d50d4; background: var(--pastel-lilac, #ddd6fe); }
.ds-ico-tile.ds-ico-tone-rose,
.ds-ico-tile[data-ds-icon-tone="rose"] { color: #b14458; background: var(--pastel-rose, #f5c2c7); }
.ds-ico-tile.ds-ico-tone-peach,
.ds-ico-tile[data-ds-icon-tone="peach"] { color: #c46920; background: var(--pastel-peach, #ffe4cc); }
.ds-ico-tile.ds-ico-tone-slate,
.ds-ico-tile[data-ds-icon-tone="slate"] { color: #64748b; background: #eef1f6; }

.kpi-icon .ds-ico,
.ds-principle__icon .ds-ico,
.live-icon .ds-ico,
.rui-empty__icon .ds-ico {
  width: 1.35em;
  height: 1.35em;
  vertical-align: middle;
}

/* Toolbar / field icons by function (L18) */
.ds-grid__field-icon { color: #3b5998; }
.ds-grid__cols-btn .ds-ico,
.ds-grid__cols-btn [data-ds-icon],
.ds-grid__cols-btn svg { color: #0f766e; opacity: 1; }
[data-ds-icon]:empty::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
}

.ds-grid__row-btn .ds-grid__ico-host,
.ds-grid__row-btn [data-ds-icon] {
  display: grid;
  place-items: center;
  place-content: center;
  width: 18px;
  height: 18px;
  line-height: 0;
}
.ds-grid__row-btn .ds-grid__ico,
.ds-grid__row-btn .ds-ico,
.ds-grid__row-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0;
  vertical-align: 0;
  color: color-mix(in srgb, var(--brand-600, #0d9488) 82%, var(--pastel-sky, #bae6fd));
  flex-shrink: 0;
}

.ds-grid__row-btn:hover {
  background: color-mix(in srgb, var(--pastel-mint, #a7f3d0) 28%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-500) 42%, var(--border));
  box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--brand-500) 35%, transparent);
  transform: translateY(-1px);
}

.ds-grid__row-btn:hover .ds-grid__ico {
  color: var(--brand-600, #0d9488);
}

.ds-grid__row-btn--danger .ds-grid__ico {
  color: color-mix(in srgb, #e11d48 75%, var(--pastel-rose, #fecdd3));
}

.ds-grid__row-btn--danger:hover {
  background: color-mix(in srgb, var(--pastel-rose, #fecdd3) 35%, var(--surface));
  border-color: color-mix(in srgb, #e11d48 45%, var(--border));
}

.ds-grid__row-btn--danger:hover .ds-grid__ico {
  color: #e11d48;
}

.ds-grid__empty {
  padding: 32px 16px;
  background: var(--surface);
}

/* ---- Pagination ---- */
.ds-grid__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: 12px;
  color: var(--text-muted);
  overflow: visible;
  position: relative;
  z-index: 4;
  min-width: 0;
}
.ds-grid__pager-ctrls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.ds-grid__pager-meta {
  display: flex;
  align-items: center;
  /* RTL: flex-start anchors meta next to page buttons — flex-end pushed dropdown into clipped left edge */
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-inline-start: auto;
  overflow: visible;
}
.ds-grid__pager-info {
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
  overflow: visible;
}
.ds-grid__pagesize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: default;
  flex: 0 0 auto;
}
.ds-grid__pagesize-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-grid__pagesize .ds-dropdown {
  width: 68px;
  flex: 0 0 68px;
  min-width: 68px;
  max-width: 68px;
  box-sizing: border-box;
}
.ds-dropdown--pager {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.ds-dropdown--pager .ds-dropdown__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding-inline: 22px 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
}
.ds-dropdown--pager .ds-dropdown__value {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-dropdown--pager .ds-dropdown__chev {
  position: absolute;
  inset-inline-start: 5px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.ds-dropdown--pager.is-open .ds-dropdown__chev {
  transform: translateY(-50%) rotate(180deg);
}
.ds-dropdown--pager .ds-dropdown__menu {
  inset-inline: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.ds-dropdown--pager .ds-dropdown__option {
  white-space: nowrap;
  text-align: center;
  justify-content: center;
}
.ds-dropdown--pager .ds-dropdown__option.is-selected::after {
  content: none;
  display: none;
}
.ds-grid__pager .ds-dropdown--dropup.is-open {
  z-index: 60;
}
.ds-grid__pg-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ds-grid__pg-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--brand-500) 40%, var(--border));
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
  color: var(--brand-600);
}
.ds-grid__pg-btn.is-active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--brand-500) 55%, transparent);
}
.ds-grid__pg-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .ds-grid__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ds-grid__search-wrap {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }
  .ds-grid__toolbar .ds-dropdown {
    width: 100%;
    max-width: none;
  }
  .ds-grid__exports {
    width: 100%;
    margin-inline-start: 0;
    flex-wrap: nowrap;
  }
  .ds-grid__toolbar .btn.primary,
  #ds-grid-add { width: 100%; }
  .ds-grid__pager {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .ds-grid__pager-ctrls {
    justify-content: center;
  }
  .ds-grid__pager-meta {
    justify-content: space-between;
    margin-inline-start: 0;
    flex-wrap: wrap;
    gap: 8px;
  }
}

[data-theme="dark"] .ds-grid__search,
[data-theme="dark"] .ds-grid__select,
[data-theme="dark"] .ds-grid__export-btn {
  background-color: var(--surface);
}
[data-theme="dark"] [data-grid-export="excel"]:hover { color: #7ecfaa; }
[data-theme="dark"] [data-grid-export="csv"]:hover { color: #8ec5ef; }
[data-theme="dark"] [data-grid-export="pdf"]:hover { color: #f5c98a; }
[data-theme="dark"] [data-grid-export="print"]:hover { color: #c4b5fd; }

/* ==========================================================================
   Loading skeleton — RFC-0078 W3 ([perf-gzip-always-on])
   --------------------------------------------------------------------------
   UX27 requires a skeleton "هم‌شکلِ نهایی" (shaped like the final content), not
   a spinner and not a layout jump. Built HERE, in the Design System's own grid
   stylesheet, rather than per page: `ar-skeleton` (asset-registry.js) and
   `c360a-skeleton` (c360-assets.js) are page-local reinventions of this exact
   pattern, which DESIGN_SYSTEM_MANDATE forbids. Every grid mounted through
   RldDsGridKit picks this up with no page-side CSS.

   Note on scope: design-system/design-system.css defines a `.ds-skeleton`
   token, but the panel does not load that file (it is the DS showcase page's
   own stylesheet) — index.html loads assets/css/ds-*.css. These rules are the
   grid-shaped member of the same family, deliberately reusing main.css's
   existing `shimmer` keyframe instead of declaring a second one.
   ========================================================================== */
.ds-grid__skeleton-row {
  /* Exactly what .ds-grid__row does — the live column template lives in
     --ds-grid-cols on .ds-grid__matrix (set by ds-grid.js's applyLayout), so
     the skeleton lines up cell-for-cell with the header already on screen and
     the real rows replace it with no reflow. */
  display: grid;
  grid-template-columns: var(--ds-grid-cols);
  width: 100%;
  min-width: 0;
}
.ds-grid__skeleton-cell {
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-height: 44px;
  border-block-end: 1px solid var(--border, #e6eaf0);
  min-width: 0;
}
.ds-grid__skeleton-bar {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 11px;
  border-radius: 6px;
  background: var(--surface-2, #f1f4f8);
  background-image: linear-gradient(
    90deg,
    var(--surface-2, #f1f4f8) 0%,
    var(--surface, #fff) 40%,
    var(--surface-2, #f1f4f8) 80%
  );
  background-size: 1000px 100%;
  animation: shimmer 1.6s linear infinite;
}
/* Vary the widths so the block reads as text, not as a progress bar. */
.ds-grid__skeleton-row:nth-child(odd) .ds-grid__skeleton-cell:nth-child(3n) .ds-grid__skeleton-bar { max-width: 96px; }
.ds-grid__skeleton-row:nth-child(even) .ds-grid__skeleton-cell:nth-child(2n) .ds-grid__skeleton-bar { max-width: 120px; }

/* The toolbar stays visible but inert while loading — same reasoning as
   syncGridChrome()'s empty state: there is no useful click on search/filter/
   export until there are rows. Descendant selector, not compound: the kit puts
   `rld-grid-loading` on the page's outer wrapper (the element it is handed at
   mount time), which is an ANCESTOR of .ds-grid, never .ds-grid itself. */
.rld-grid-loading .ds-grid__toolbar { opacity: .55; pointer-events: none; }
/* Sorting/paging the rows we already had, while their replacement is still in
   flight, is what let stale data be presented as final — so the header and
   pager are inert for the same window. */
.rld-grid-loading .ds-grid__head-band,
.rld-grid-loading .ds-grid__pager { pointer-events: none; opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .ds-grid__skeleton-bar { animation: none; }
}

[data-theme="dark"] .ds-grid__skeleton-bar {
  background-image: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    color-mix(in srgb, var(--brand-500, #2c7873) 14%, var(--surface)) 40%,
    var(--surface-2) 80%
  );
}

/* Async export progress bar — RFC-0078 W4 band 6 ([perf-gzip-always-on]).
   Rendered inside the shared DsModal body while a large export builds. */
.rld-export-progress { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; }
.rld-export-progress__track {
  height: 10px; border-radius: 999px; background: var(--surface-2, #f1f4f8);
  overflow: hidden;
}
.rld-export-progress__fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500, #2c7873), var(--brand-400, #3fa89f));
  transition: width .4s ease;
}
.rld-export-progress__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted, #8491a5); font-weight: 700;
}