/* Query — searchable/filterable DATA GRID (views/_query.js). Sortable headers + per-column filter row +
   numbered pager. Filter dropdowns are the compact Select2 combobox (no checkbox rail). */
.dg { display: flex; flex-direction: column; min-height: 0; }

/* toolbar */
.dg-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-7); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.dg-count { font-size: var(--fs-base); color: var(--text); font-variant-numeric: tabular-nums; text-transform: capitalize; }
.dg-count .dg-load { color: var(--muted); font-size: var(--fs-xs); text-transform: none; }
.dg-tools { display: flex; align-items: center; gap: var(--sp-8); }
.dg-clear { background: none; border: none; color: var(--muted); font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
.dg-clear:hover { color: var(--text); }
.dg-psz { display: inline-flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.dg-psz > .sel2 { width: 4.625rem; }

/* the grid */
.dg-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 0.0625rem solid var(--border); border-radius: var(--r-xl); background: var(--panel); }
.dg-table { width: 100%; min-width: 38.75rem; border-collapse: collapse; font-size: var(--fs-base); table-layout: fixed; }

/* header row (sortable) */
.dg-h th { text-align: left; padding: 0.5625rem 0.6875rem; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); background: var(--panel-2); border-bottom: 0.0625rem solid var(--border);
  white-space: nowrap; user-select: none; position: sticky; top: 0; z-index: 1; }
.dg-h th[role="button"] { cursor: pointer; }
.dg-h th[role="button"]:hover { color: var(--accent); }
.dg-caret { margin-left: var(--sp-3); font-size: var(--fs-micro); }

/* filter row */
.dg-f th { padding: 0.3125rem 0.4375rem; background: var(--panel); border-bottom: 0.0625rem solid var(--border); vertical-align: top; }
.dg-fin { width: 100%; box-sizing: border-box; background: var(--bg); border: 0.0625rem solid var(--border); color: var(--text);
  border-radius: var(--r-md); padding: 0.3125rem var(--sp-5); font-size: var(--fs-sm); }
.dg-fin:focus { border-color: var(--accent); }
.dg-fcr { display: flex; gap: var(--sp-3); }
.dg-fnum { flex: 1 1 auto; width: 50%; min-width: 0; }
.dg-fnum .ui-num { width: 100%; box-sizing: border-box; text-align: center; font-variant-numeric: tabular-nums; }
.dg-npc-seg { flex: 0 0 auto; }
.dg-npc-seg > button { flex: 0 0 auto; padding: var(--sp-3) 0.6875rem; }

/* body */
.dg-row { border-bottom: 0.0625rem solid var(--border-soft); cursor: pointer; }
.dg-row:last-child { border-bottom: none; }
.dg-row:hover { background: rgba(var(--accent-rgb), .06); }
.dg-row td { padding: 0.5625rem 0.6875rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-name { font-size: var(--fs-base); }
.dg-row:hover .dg-name { color: var(--accent); }
.dg-npc-tag { font-size: var(--fs-micro); letter-spacing: .05em; color: var(--muted); border: 0.0625rem solid var(--border); border-radius: var(--r-sm); padding: 0 var(--sp-2); vertical-align: middle; }
.dg-r { text-align: right; }
td.dg-c-cr { font-family: var(--font-mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.dg-empty { padding: 2.75rem var(--sp-7); text-align: center; color: var(--muted); font-style: italic; }

/* column widths (table-layout: fixed) */
.dg-c-name { width: auto; }   /* takes the leftover; the fixed columns below stay small enough to guarantee it space */
.dg-c-src { width: 9.875rem; }
.dg-c-cr { width: 8.75rem; }   /* two CR-notation bound selects (sweep 2026-08-07) */
.dg-c-type { width: 7rem; }
.dg-c-size { width: 5.75rem; }
.dg-c-env { width: 8.875rem; }
.dg-c-gear { width: 2.75rem; text-align: center; }
.dg-gear { color: var(--muted); text-decoration: none; font-size: var(--fs-md); display: inline-block; }
.dg-gear:hover { color: var(--accent); }
.dg-pick { color: var(--accent); font-size: var(--fs-md); line-height: 1; }
.dg-row.dg-picked { background: rgba(var(--accent-rgb), .1); }
.dg-row.dg-picked .dg-name { color: var(--accent); }
.dg-row.dg-sel { background: rgba(var(--accent-rgb), .16); box-shadow: inset 0.1875rem 0 0 var(--accent); }
.dg-row.dg-sel .dg-name { color: var(--accent); }

/* footer / pager */
.dg-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-7); margin-top: var(--sp-7); flex-wrap: wrap; }
.dg-range { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.dg-pager { display: flex; gap: var(--sp-2); align-items: center; }
.dg-pager button, .dg-pg { min-width: 1.875rem; height: 1.875rem; padding: 0 var(--sp-4); border: 0.0625rem solid var(--border); background: var(--panel-2);
  color: var(--text); border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.dg-pager button:hover:not(:disabled), .dg-pg:hover { border-color: var(--accent); }
.dg-pager button:disabled { opacity: .4; cursor: default; }
.dg-pg.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.dg-pg-e { padding: 0 var(--sp-2); color: var(--muted); }

/* Spec-driven columns (one grid for every record type — 2026-07-17) */
.dg-c-level { width: 5.25rem; }
.dg-c-school, .dg-c-rarity, .dg-c-category, .dg-c-class_id, .dg-c-book { width: 9.375rem; }
.dg-c-page_start { width: 3.625rem; }
.dg-flex { width: auto; }
td.dg-flex { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }

/* CR bounds: two compact KIT Selects side by side (sweep 2026-08-07). The caret is decorative
   at this width — dropping it leaves room for the value + clear ✕ to both read. */
.dg-fcr-cr { display: flex; gap: var(--sp-2); }
.dg-fcr-cr .sel2 { width: 4.2rem; min-width: 4.2rem; }
.dg-fcr-cr .sel2-value { padding-left: var(--sp-3); padding-right: 0; }
.dg-fcr-cr .sel2-caret { display: none; }
.dg-fcr-cr .sel2-single { overflow: visible; }

/* ── Grid settings (the ⚙ popover): which columns, how many rows ──────────────
   Per-user + per-category, so a shape you chose for monsters doesn't follow you to spells.
   Both knobs are kit Selects — a column list is a MULTI-SELECT, never a rail of checkboxes. */
.dg-setbtn { min-width: 2rem; padding: var(--sp-3) var(--sp-4); }
.dg-setpop .tf-popmenu { width: 17rem; }
.dg-settings { display: flex; flex-direction: column; gap: var(--sp-5); }
.dg-set-row { display: flex; flex-direction: column; gap: var(--sp-2); }
.dg-set-reset { align-self: flex-start; }
.dg-hidn { font: var(--fs-2xs)/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
/* While a category switch is in flight the grid still shows the OLD spec — the settings would
   edit the wrong columns, so the gear waits for the new one (a beat, not a spinner). */
.dg-setpop-wait { pointer-events: none; opacity: .45; }
/* Column ORDER — the same ▲▼ move idiom as the adventures board and the initiative ribbon
   (those are ACTIONS, not a selection control). */
.dg-order { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.dg-order li { display: flex; align-items: center; gap: var(--sp-3); }
.dg-order-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sm); }
.dg-order .btn-mini { padding: 0.0625rem 0.4375rem; line-height: 1.1; }
.dg-set-seg { align-self: stretch; }

/* Density — row padding only; nothing reflows but the rows themselves. */
.dg-compact .dg-table td, .dg-compact .dg-table th { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.dg-roomy .dg-table td, .dg-roomy .dg-table th { padding-top: var(--sp-6); padding-bottom: var(--sp-6); }