/* ==========================================================================
   טבלת מעקב — work board (#/grid). Reads the design tokens from app.css.
   Prefix: gx-. Desktop: sticky-header table with windowed rows; phones: cards.
   ========================================================================== */

:root {
  --gx-row-h: 64px;
  --gx-head-h: 40px;
  --gx-line: color-mix(in srgb, var(--border) 70%, transparent);
  --gx-head-bg: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  --gx-hover: color-mix(in srgb, var(--primary) 6%, var(--surface));
  --gx-focus-bg: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --gx-note: #e53935;
  --gx-chip-ink: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gx-note: #ff6f60; --gx-hover: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
}
:root[data-theme="dark"] { --gx-note: #ff6f60; --gx-hover: color-mix(in srgb, var(--primary) 12%, var(--surface)); }

/* the board wants the full width of the content area */
.content:has(.gx-page) { max-width: none; }
.gx-page { gap: 14px; }
.gx-page .page-head .sub .num { direction: ltr; unicode-bidi: isolate; }

/* ---- tabs ------------------------------------------------------------------ */
.gx-agency-tabs { margin-top: -4px; }
.gx-work-tabs { border-bottom: 0; margin: 2px -4px -6px; }
.gx-work-tabs .tab { min-height: 40px; padding: 8px 12px; font-size: 14px; }

/* ---- toolbar --------------------------------------------------------------- */
.gx-toolbar { padding: 12px 16px 6px; display: flex; flex-direction: column; gap: 6px; }
.gx-toolbar-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gx-search { position: relative; flex: 1 1 260px; max-width: 460px; display: flex; align-items: center; }
.gx-search > .icon { position: absolute; inset-inline-start: 12px; color: var(--muted); pointer-events: none; }
.gx-search .input { padding-inline-start: 38px; padding-inline-end: 38px; }
.gx-search .gsearch-kbd { position: absolute; inset-inline-end: 10px; }
.gx-search .gx-clear { position: absolute; inset-inline-end: 6px; }
.gx-arch { font-size: 13.5px; color: var(--ink-2); }

/* ---- totals bar ------------------------------------------------------------ */
.gx-totals { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13.5px; color: var(--ink-2); padding: 0 4px; margin-top: -4px; }
.gx-totals b { color: var(--ink); }
.gx-totals .money { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.gx-totals .money.pos { color: var(--success); }
.gx-totals .sep { color: var(--faint); }

/* ---- board (desktop) --------------------------------------------------------- */
.gx-wrap { position: relative; }
.gx-ghost { position: absolute; width: 0; height: 0; pointer-events: none; visibility: hidden; }
.gx-board { overflow: hidden; }
.gx-scroll { overflow: auto; position: relative; direction: rtl; scrollbar-gutter: stable; }
/* div "table": header row + body rows laid out with the same grid template (--gx-cols is set inline from the column widths) */
.gx-table { min-width: 100%; font-size: 13px; }
.gx-head, .gx-row { display: grid; grid-template-columns: var(--gx-cols); }
.gx-head {
  position: sticky; top: 0; z-index: 3; height: var(--gx-head-h);
  background: var(--gx-head-bg); border-bottom: 1px solid var(--border);
}
.gx-th {
  display: flex; align-items: center; color: var(--ink-2); font-weight: 600; font-size: 12.5px; text-align: start;
  padding: 0 8px; border-inline-start: 1px solid var(--gx-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  user-select: none; background: var(--gx-head-bg); min-width: 0;
}
.gx-th:last-child { border-inline-start: 0; }
.gx-th.sortable { cursor: pointer; }
.gx-th.sortable:hover { color: var(--ink); }
.gx-th .th-inner { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gx-th .sort-ind { opacity: 0.35; flex: none; }
.gx-th.sorted { color: var(--ink); }
.gx-th.sorted .sort-ind { opacity: 1; color: var(--primary); }
.gx-th.gx-sticky { position: sticky; z-index: 4; }
.gx-th.align-end, .gx-td.align-end { justify-content: flex-end; text-align: end; }
.gx-th.align-center, .gx-td.align-center { justify-content: center; text-align: center; }

.gx-td { display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--gx-line); border-inline-start: 1px solid var(--gx-line); overflow: hidden; min-width: 0; }
.gx-td > * { min-width: 0; }
.gx-td:last-child { border-inline-start: 0; }
.gx-body { position: relative; }
.gx-row { position: absolute; top: 0; right: 0; left: 0; height: var(--gx-row-h); cursor: pointer; outline: none; contain: strict; }
/* while an inline editor is open the row may overflow (a growing "חוסרים" textarea sits over the rows below) */
.gx-row.editing { contain: layout style; z-index: 6; }
.gx-row.editing .gx-td.editing { overflow: visible; align-items: flex-start; padding-top: 6px; }
.gx-row.editing .gx-td.editing .gx-stack { width: 100%; }
.gx-td.editing .textarea.gx-editor { width: 100%; min-width: 160px; box-shadow: var(--shadow-lg); position: relative; z-index: 7; }
.gx-panel-row { position: absolute; right: 0; left: 0; }
.gx-row.odd .gx-td { background: var(--surface); }
.gx-row.even .gx-td { background: var(--surface-2); }
.gx-row:hover .gx-td { background: var(--gx-hover); }
.gx-row:focus-visible .gx-td { box-shadow: inset 0 0 0 2px var(--focus); }
.gx-row.expanded .gx-td { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-bottom-color: transparent; }
.gx-row.focused .gx-td { background: var(--gx-focus-bg) !important; animation: gx-flash 1.2s ease-in-out 2; }
@keyframes gx-flash { 50% { background-color: color-mix(in srgb, var(--accent) 34%, var(--surface)); } }
.gx-row.archived .gx-name b { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.gx-row.lite { grid-template-columns: var(--gx-cols); }
.gx-row.lite .gx-td { border-inline-start: 0; }
.gx-row.lite .gx-name b { color: var(--ink-2); }
.gx-row.skel { cursor: default; }
.gx-row.skel .gx-td { background: var(--surface); }
.gx-td.gx-sticky { position: sticky; z-index: 2; box-shadow: -1px 0 0 0 var(--border); }
.gx-empty { padding: 30px 20px; background: var(--surface); position: sticky; right: 0; width: min(100%, var(--gx-view-w, 100%)); }
.gx-row.expanded .gx-chev { transform: rotate(180deg); }

/* client cell */
.gx-client { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.gx-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; }
.gx-name b { color: var(--ink); font-weight: 600; min-width: 0; }
.gx-name .badge { flex: none; }
.gx-chev { color: var(--muted); flex: none; transition: transform 0.15s; }
.gx-open { color: var(--muted); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; flex: none; opacity: 0; transition: opacity 0.12s; }
.gx-row:hover .gx-open, .gx-row:focus-within .gx-open, .gx-card .gx-open { opacity: 1; }
.gx-open:hover { background: var(--surface-3); color: var(--primary); }
.gx-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; white-space: nowrap; }
.gx-sub .phone-link { font-size: 12px; gap: 3px; }
.gx-sub .phone-link .tel { color: var(--ink-2); }
.gx-sub .phone-link .wa { width: 22px; height: 22px; }
.gx-dot { color: var(--faint); }

/* inline chip buttons */
.gx-inline { border: 0; background: none; padding: 2px; border-radius: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 100%; text-align: start; cursor: pointer; }
.gx-inline:hover { background: var(--surface-3); }
.gx-inline .pill { max-width: 100%; }
.gx-raw { font-size: 11.5px; color: var(--muted); max-width: 100%; line-height: 1.25; }
.gx-card-raw { display: flex; gap: 5px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; overflow-wrap: anywhere; }
.gx-card-raw .icon { color: var(--muted); flex: none; margin-top: 2px; }
.gx-editor { min-width: 0; max-width: 100%; }
.gx-td.editing .gx-editor, .gx-card .gx-editor { width: 100%; }
select.gx-editor.sm { height: 32px; padding-inline-start: 8px; }
input.gx-editor.sm { height: 32px; padding: 0 8px; }

.gx-inq {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2);
  font-weight: 700; font-size: 12.5px; display: inline-grid; place-items: center; cursor: pointer; font-variant-numeric: tabular-nums;
}
.gx-inq:hover { border-color: var(--primary); color: var(--primary); }
.gx-inq.none { color: var(--faint); border-style: dashed; font-weight: 400; }
.gx-inq.c-gray { background: var(--c-gray-soft); color: var(--c-gray); border-color: transparent; }
.gx-inq.c-blue { background: var(--c-blue-soft); color: var(--c-blue); border-color: transparent; }
.gx-inq.c-amber { background: var(--c-amber-soft); color: var(--c-amber); border-color: transparent; }
.gx-inq.c-green { background: var(--c-green-soft); color: var(--c-green); border-color: transparent; }

.gx-td.c-reps { padding: 0 4px; }
.gx-reps { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; }
.gx-rep { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 0 3px; border-radius: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; max-width: 100%; min-width: 0; line-height: 1.4; height: 18px; }
.gx-rep:hover { background: var(--surface-3); color: var(--ink); }
.gx-rep .l { font-weight: 700; color: var(--ink-2); flex: none; }
.gx-rep .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-rep .icon { flex: none; }
.gx-rep.rep-sent { color: var(--c-amber); }
.gx-rep.rep-received { color: var(--c-green); }
.gx-rep.rep-none { color: var(--faint); }
.gx-rep.rep-none .l { color: var(--muted); }
.gx-rep.rep-none .icon { opacity: 0.6; }

.gx-miss { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; border: 0; background: var(--c-red-soft); color: var(--c-red); font-size: 12px; font-weight: 500; max-width: 100%; cursor: pointer; }
.gx-miss span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-miss .icon { flex: none; }
.gx-miss:hover { filter: brightness(0.96); }
.gx-miss.empty { background: transparent; color: var(--faint); border: 1px dashed var(--border); font-weight: 400; opacity: 0; }
.gx-row:hover .gx-miss.empty, .gx-row:focus-within .gx-miss.empty, .gx-card .gx-miss.empty { opacity: 1; }
.gx-miss.empty:hover { color: var(--ink-2); border-color: var(--border-strong); }

/* per-year strip */
.gx-years { display: flex; gap: 3px; align-items: stretch; min-width: 0; }
.gx-years { gap: 2px; }
.gx-ychip {
  position: relative; overflow: hidden; flex: 1 1 0; min-width: 34px; max-width: 48px; height: 42px; border-radius: 7px; border: 1px solid transparent; padding: 3px 2px 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; background: var(--surface-2); color: var(--gx-chip-ink);
  font-size: 10.5px; line-height: 1.2; transition: transform 0.1s, box-shadow 0.1s;
}
.gx-ychip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.gx-ychip.active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.gx-ychip .y { font-weight: 700; font-size: 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.gx-ychip .a { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; max-width: 100%; overflow: hidden; text-overflow: clip; white-space: nowrap; letter-spacing: -0.02em; }
.gx-ychip.st-none { background: transparent; border-style: dashed; border-color: var(--border); }
.gx-ychip.st-none .y { color: var(--faint); font-weight: 500; }
.gx-ychip.st-open { background: var(--surface-3); color: var(--ink-2); }
.gx-ychip.st-open .a { font-weight: 400; color: var(--muted); }
.gx-ychip.st-missing_docs { background: var(--c-red-soft); color: var(--c-red); }
.gx-ychip.st-in_progress { background: var(--c-blue-soft); color: var(--c-blue); }
.gx-ychip.st-submitted { background: var(--c-yellow-soft); color: var(--c-yellow); }
.gx-ychip.st-received { background: var(--c-green-soft); color: var(--c-green); }
.gx-ychip.st-no_refund, .gx-ychip.st-not_relevant { background: var(--c-gray-soft); color: var(--c-gray); opacity: 0.85; }
.gx-ychip[class*="cc-"]::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; pointer-events: none; }
.gx-ychip.has-note::before { content: ''; position: absolute; top: 3px; left: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gx-note); box-shadow: 0 0 0 1.5px var(--surface); }
.gx-years.lg .gx-ychip { flex: none; width: 52px; height: 46px; }
.gx-years.lg .gx-ychip .a { font-size: 12px; }

/* stacked two-line cells (status + missing, money, dates) */
.gx-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.gx-stack.nums { gap: 2px; width: 100%; }
.gx-stack.nums > span { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; line-height: 1.35; }
.gx-stack.nums small { font-size: 11px; color: var(--muted); flex: none; }
.gx-stack.nums b { font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.gx-stack.nums b.muted { font-weight: 400; }
.gx-stack .gx-miss { height: 20px; font-size: 11.5px; padding: 0 8px; }
.gx-stack .gx-miss.empty { height: 20px; }
.gx-agency { color: var(--muted); max-width: 90px; }

/* money / dates */
.gx-table .money { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-weight: 500; }
.gx-table .money.pos, .gx-card-nums .money.pos, .gx-stack.nums b.pos { color: var(--success); }
.gx-table .money.muted { font-weight: 400; }
.gx-due { color: var(--danger); font-weight: 600; }
.gx-notes { font-size: 12.5px; color: var(--ink-2); }
.gx-drive { display: inline-grid; }

/* legend */
.gx-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-2); background: var(--surface-2); }
.gx-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 5px; vertical-align: -2px; position: relative; overflow: hidden; }
.gx-legend i.st-received { background: var(--c-green-soft); box-shadow: inset 0 0 0 1px var(--c-green-fill); }
.gx-legend i.st-submitted { background: var(--c-yellow-soft); box-shadow: inset 0 0 0 1px var(--c-yellow-fill); }
.gx-legend i.st-in_progress { background: var(--c-blue-soft); box-shadow: inset 0 0 0 1px var(--c-blue-fill); }
.gx-legend i.st-missing_docs { background: var(--c-red-soft); box-shadow: inset 0 0 0 1px var(--c-red-fill); }
.gx-legend i.st-no_refund { background: var(--c-gray-soft); box-shadow: inset 0 0 0 1px var(--c-gray-fill); }
.gx-legend i.xl { background: var(--surface); border: 1px solid var(--border); }
.gx-legend i.xl::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: var(--xl-green, #00c853); }
.gx-legend i.note { background: var(--surface); border: 1px solid var(--border); }
.gx-legend i.note::before { content: ''; position: absolute; top: 1px; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--gx-note); }

/* ---- expanded panel ---------------------------------------------------------- */
.gx-panel-row { background: color-mix(in srgb, var(--primary) 3%, var(--surface)); border-bottom: 2px solid var(--primary-soft); cursor: default; width: 100%; }
/* the panel row spans the whole (possibly wider than the viewport) table: keep the panel inside the visible width */
.gx-panel-row .gx-panel { position: sticky; right: 0; width: min(100%, var(--gx-view-w, 100%)); box-sizing: border-box; }
.gx-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: 18px; padding: 14px 18px 18px; cursor: default; direction: rtl; text-align: start; font-size: 13.5px; border-inline-start: 3px solid var(--primary); background: color-mix(in srgb, var(--primary) 3%, var(--surface)); }
.gx-panel h3 { font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--ink); }
.gx-panel h3 .icon { color: var(--primary); }
.gx-panel h3 .count { background: var(--surface-3); color: var(--ink-2); border-radius: 999px; font-size: 11.5px; padding: 1px 7px; font-weight: 500; }
.gx-panel-main, .gx-panel-side { min-width: 0; }
.gx-filings { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gx-filing { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.gx-filing-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gx-yearchips { display: flex; gap: 4px; flex-wrap: wrap; }
.gx-ychip-mini { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-soft-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-filing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px 10px; }
.gx-filing-grid small, .gx-card-nums small, .gx-raw-box small { display: block; font-size: 11.5px; color: var(--muted); }
.gx-filing-grid b { font-weight: 600; }
.gx-filing-grid .money, .gx-filing-grid .num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.gx-filing-grid .money.pos { color: var(--success); }
.gx-delta { font-size: 11.5px; font-weight: 500; margin-inline-start: 4px; direction: ltr; unicode-bidi: isolate; }
.gx-delta.pos { color: var(--success); }
.gx-delta.neg { color: var(--danger); }
.gx-delta.zero { color: var(--muted); }
.gx-filing-notes { font-size: 12.5px; color: var(--ink-2); white-space: pre-wrap; }
.gx-ref { font-size: 11px; direction: ltr; text-align: end; unicode-bidi: plaintext; }
.gx-yearlist { display: flex; flex-direction: column; gap: 4px; }
.gx-yearline { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; }
.gx-yearline .money { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-weight: 500; min-width: 70px; text-align: end; }
.gx-raw-box { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 13px; }
.gx-actions { display: flex; flex-direction: column; gap: 12px; }
.gx-action { display: flex; flex-direction: column; gap: 5px; }
.gx-action .select.sm { width: 100%; }
.gx-action .input.sm { flex: 1; min-width: 0; }
.gx-recent { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.gx-recent li { padding: 4px 8px; border-radius: 6px; background: var(--surface-2); }
.gx-recent li .muted { font-size: 11.5px; margin-inline-end: 4px; }

/* ---- popups (column chooser) --------------------------------------------------- */
.gx-popup { position: absolute; top: calc(100% + 6px); z-index: 60; min-width: 240px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px 12px; animation: pop 0.15s ease-out; }
.gx-popup.align-end { inset-inline-start: 0; }
.gx-popup.align-start { inset-inline-end: 0; }
.gx-popup-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 13.5px; }
.gx-checklist { display: flex; flex-direction: column; gap: 6px; }
.gx-checklist .checkbox { font-size: 13.5px; min-height: 28px; }

/* ---- sheet view (dense, Excel-like, read-only except year cells) ------------------- */
:root {
  --gx-xl-head: #dbe8f6; --gx-xl-head-ink: #17324d; --gx-xl-line: #cfd8dc; --gx-xl-ink: #10201f;
  --gx-xl-green: #b9f6ca; --gx-xl-yellow: #fff59d; --gx-xl-sub: #fff9c4; --gx-xl-cyan: #b2ebf2; --gx-xl-red: #ffcdd2; --gx-xl-blue: #cfe2f3; --gx-xl-gray: #e3e8ea;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gx-xl-head: #1c3550; --gx-xl-head-ink: #cfe2f3; --gx-xl-line: #2b3f42; --gx-xl-green: #9be7b2; --gx-xl-yellow: #f3e37a; --gx-xl-sub: #e9dd8a; --gx-xl-cyan: #96dde6; --gx-xl-red: #f3b3b8; --gx-xl-blue: #b7cde3; --gx-xl-gray: #3a4a4e; }
}
:root[data-theme="dark"] { --gx-xl-head: #1c3550; --gx-xl-head-ink: #cfe2f3; --gx-xl-line: #2b3f42; --gx-xl-green: #9be7b2; --gx-xl-yellow: #f3e37a; --gx-xl-sub: #e9dd8a; --gx-xl-cyan: #96dde6; --gx-xl-red: #f3b3b8; --gx-xl-blue: #b7cde3; --gx-xl-gray: #3a4a4e; }
.gx-view { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.gx-view button { border: 0; background: none; height: 40px; padding: 0 12px; color: var(--ink-2); font-weight: 500; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.gx-view button + button { border-inline-start: 1px solid var(--border-strong); }
.gx-view button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.gx-sheet-wrap { overflow: auto; max-height: calc(100vh - 330px); min-height: 320px; direction: rtl; }
.gx-sheet { border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: auto; min-width: 100%; }
.gx-sheet th, .gx-sheet td { border-bottom: 1px solid var(--gx-xl-line); border-inline-start: 1px solid var(--gx-xl-line); padding: 2px 6px; white-space: nowrap; height: 30px; vertical-align: middle; text-align: start; }
.gx-sheet th { position: sticky; top: 0; z-index: 3; background: var(--gx-xl-head); color: var(--gx-xl-head-ink); font-weight: 700; font-size: 12px; }
.gx-sheet th.y { min-width: 58px; text-align: center; }
.gx-sheet th.nm, .gx-sheet td.nm { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; }
.gx-sheet td.c, .gx-sheet th.c { text-align: center; }
.gx-sheet td.n, .gx-sheet th.n { width: 34px; text-align: center; color: var(--muted); background: var(--surface-2); }
.gx-sheet tbody tr:nth-child(even) td { background: var(--surface-2); }
.gx-sheet tbody tr:nth-child(odd) td { background: var(--surface); }
.gx-sheet tbody tr:hover td:not([class*="xl-"]) { background: var(--gx-hover); }
.gx-sheet .s1, .gx-sheet .s2 { position: sticky; z-index: 2; }
.gx-sheet .s1 { right: 34px; width: 170px; min-width: 170px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gx-sheet .s2 { right: 204px; width: 90px; min-width: 90px; box-shadow: -1px 0 0 0 var(--border-strong); }
.gx-legend i.xl-fill { border: 1px solid rgba(0, 0, 0, 0.08); }
.gx-sheet th.s1, .gx-sheet th.s2, .gx-sheet th.n { z-index: 4; }
.gx-sheet td.n, .gx-sheet th.n { position: sticky; right: 0; z-index: 2; }
.gx-sheet .s1 a { color: var(--ink); }
.gx-sheet td.wrap { white-space: normal; min-width: 150px; max-width: 220px; line-height: 1.25; font-size: 12px; }
.gx-sheet td.wrap .clamp-2 { max-height: 30px; }
.gx-sheet td.rep { max-width: 96px; overflow: hidden; }
.gx-sheet td.flag { text-align: center; font-weight: 700; }
.gx-sheet td.f-missing { color: var(--c-red); }
.gx-sheet td.f-none { color: var(--muted); font-weight: 400; }
.gx-sheet td.y { position: relative; text-align: center; cursor: pointer; min-width: 58px; font-weight: 500; }
.gx-sheet td.y:hover { outline: 2px solid var(--primary); outline-offset: -2px; }
.gx-sheet td[class*="xl-"] { color: var(--gx-xl-ink) !important; }
.gx-sheet td.xl-green { background: var(--gx-xl-green) !important; }
.gx-sheet td.xl-yellow { background: var(--gx-xl-yellow) !important; }
.gx-sheet td.xl-sub { background: var(--gx-xl-sub) !important; }
.gx-sheet td.xl-cyan { background: var(--gx-xl-cyan) !important; }
.gx-sheet td.xl-red { background: var(--gx-xl-red) !important; }
.gx-sheet td.xl-blue { background: var(--gx-xl-blue) !important; }
.gx-sheet td.xl-gray { background: var(--gx-xl-gray) !important; color: var(--muted) !important; }
.gx-sheet td.b { font-weight: 700; }
.gx-sheet td.has-note::after, .gx-sheet td i.note { content: ''; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--gx-note); }
.gx-sheet td.c { position: relative; }
.gx-sheet-more { padding: 10px; text-align: center; position: sticky; right: 0; }

/* ---- phones: cards ------------------------------------------------------------ */
.gx-cards { display: flex; flex-direction: column; gap: 10px; }
.gx-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.gx-card.focused { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.gx-card.expanded { border-color: var(--primary); }
.gx-card-head { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.gx-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gx-card-title b { font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-card .gx-sub { font-size: 13px; flex-wrap: wrap; white-space: normal; }
.gx-card .gx-sub .phone-link .wa { width: 32px; height: 32px; }
.gx-card .gx-open { margin-inline-start: auto; width: 32px; height: 32px; }
.gx-card-chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gx-card-chips .gx-rep { height: 30px; padding: 0 8px; background: var(--surface-2); font-size: 12.5px; }
.gx-card-chips .gx-inq { width: 30px; height: 30px; }
.gx-card-chips .gx-miss { height: 30px; max-width: 100%; }
.gx-card-chips .gx-miss.empty { opacity: 1; }
.gx-card-years { overflow-x: auto; margin: 0 -14px; padding: 2px 14px; scrollbar-width: none; }
.gx-card-years::-webkit-scrollbar { display: none; }
.gx-card-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; font-size: 13px; }
.gx-card-nums span { display: flex; flex-direction: column; min-width: 0; }
.gx-card-nums b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-card-nums .money, .gx-card-nums .num { direction: ltr; unicode-bidi: isolate; text-align: start; }
.gx-card-panel { border-top: 1px solid var(--border); }
.gx-card-panel .gx-panel { grid-template-columns: minmax(0, 1fr); padding: 12px 14px 16px; border-inline-start: 0; }

@media (max-width: 1180px) {
  .gx-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .gx-page .page-actions .btn { flex: 1 1 auto; }
  .gx-toolbar { padding: 10px 12px 4px; }
  .gx-search { max-width: none; flex: 1 1 100%; }
  .gx-work-tabs .tab { min-height: 42px; }
  .gx-totals { font-size: 13px; }
  .gx-ychip { width: 52px; height: 46px; }
  .gx-ychip .a { font-size: 12px; }
  .gx-inq, .gx-rep, .gx-miss { min-height: 30px; }
}