/* ===================== TANSI SHEETS ===================== */
/* ==========================================================================
   TANSI SHEETS — a small spreadsheet that lives on a record
   The Table tab on a CRM opportunity. Themed with the rest of the app via
   .mud-theme-light/.mud-theme-dark (ours, not Mud's) and the MudBlazor
   palette CSS variables. Prefix gx- throughout; nothing here collides with
   other app classes.
   ========================================================================== */

/* fills: eight tints, each with a readable ink, both themes selected */
:root{
  --gx-slate-bg:#eef1f5; --gx-slate-ink:#414a57;
  --gx-blue-bg:#e3f0fb;  --gx-blue-ink:#12537f;
  --gx-green-bg:#e4f6ec; --gx-green-ink:#0f6b3f;
  --gx-amber-bg:#fdf1dc; --gx-amber-ink:#8a5300;
  --gx-red-bg:#fdeae8;   --gx-red-ink:#a3271d;
  --gx-violet-bg:#f2ecfd;--gx-violet-ink:#5f2596;
  --gx-teal-bg:#dff6f2;  --gx-teal-ink:#0b6b55;
  --gx-pink-bg:#fceaf2;  --gx-pink-ink:#9b2560;
  --gx-gut:56px;
}
.mud-theme-dark{
  --gx-slate-bg:#232a34; --gx-slate-ink:#c2ccd9;
  --gx-blue-bg:#12303f;  --gx-blue-ink:#7cc9ec;
  --gx-green-bg:#123020; --gx-green-ink:#6fd79c;
  --gx-amber-bg:#2e2411; --gx-amber-ink:#f0bf6a;
  --gx-red-bg:#331b18;   --gx-red-ink:#ff9b90;
  --gx-violet-bg:#241a33;--gx-violet-ink:#d5b6ff;
  --gx-teal-bg:#10322c;  --gx-teal-ink:#6ce5cd;
  --gx-pink-bg:#331926;  --gx-pink-ink:#f2a3c6;
}

/* design tokens, mapped onto the Tansi/Mud palette and scoped to the grid
   so nothing leaks onto the rest of the page */
.gx{
  --surface: var(--mud-palette-surface);
  --surface-2: var(--mud-palette-background-gray);
  --surface-3: var(--mud-palette-action-default-hover);
  --border: var(--mud-palette-lines-default);
  --border-strong: var(--mud-palette-lines-inputs);
  --text: var(--mud-palette-text-primary);
  --text-2: var(--mud-palette-text-secondary);
  --text-3: var(--mud-palette-text-secondary);   /* never text-disabled: it fails AA on body text */
  --primary: var(--mud-palette-primary);
  --primary-ink: var(--mud-palette-primary-darken);
  --primary-soft: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
  --primary-hover: var(--mud-palette-primary-darken);
  --on-primary: var(--mud-palette-primary-text);
  --danger: var(--mud-palette-error);
  --font: inherit;
  --radius-lg: 10px;
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
}
.mud-theme-dark .gx{ --primary-ink: var(--mud-palette-primary-lighten); }

.gx{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
  overflow:hidden;display:flex;flex-direction:column;min-height:0}

/* ---------- sheet tabs ---------- */
.gx-tabs{display:flex;align-items:stretch;gap:2px;padding:7px 8px 0;background:var(--surface-2);
  border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:thin}
.gx-tab{display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid transparent;
  border-bottom:0;border-radius:9px 9px 0 0;background:transparent;color:var(--text-2);
  font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;position:relative;top:1px}
.gx-tab:hover{background:var(--surface-3);color:var(--text)}
.gx-tab[aria-selected="true"]{background:var(--surface);border-color:var(--border);color:var(--text)}
.gx-tab .gx-dot{width:8px;height:8px;border-radius:99px;flex:none}
.gx-tab .gx-n{font-size:11px;color:var(--text-3);font-weight:600}
.gx-tabadd{align-self:center;margin-left:4px;flex:none}

/* ---------- toolbar ---------- */
.gx-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid var(--border);
  background:var(--surface);flex-wrap:wrap}
.gx-sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex:none}
.gx-b{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 9px;border-radius:7px;
  border:1px solid transparent;background:transparent;color:var(--text-2);font-size:12.5px;
  font-weight:650;cursor:pointer;white-space:nowrap}
.gx-b:hover{background:var(--surface-2);color:var(--text)}
.gx-b[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary-ink);border-color:var(--primary)}
.gx-b:disabled{opacity:.4;cursor:not-allowed}
.gx-b svg{flex:none}
.gx-b--icon{padding:0;width:30px;justify-content:center}
.gx-b--pri{background:var(--primary);color:var(--on-primary)}
.gx-b--pri:hover{background:var(--primary-hover);color:var(--on-primary)}
.gx-search{height:30px;border:1px solid var(--border);border-radius:7px;background:var(--surface);
  color:var(--text);font-size:12.5px;padding:0 10px;min-width:150px}
.gx-count{font-size:11.5px;color:var(--text-3);font-weight:650;margin-left:auto;white-space:nowrap}
.gx-status{font-size:11.5px;color:var(--text-3);margin-left:auto}

/* ---------- empty state ---------- */
.gx-empty{padding:22px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- grid ---------- */
.gx-scroll{overflow:auto;flex:1 1 auto;min-height:0;max-height:62vh;position:relative}
.gx-grid{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px;min-width:100%}
.gx-grid th,.gx-grid td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:0;vertical-align:top;background:var(--surface)}
.gx-grid thead th{position:sticky;top:0;z-index:3;background:var(--surface-2);
  border-bottom:1px solid var(--border-strong)}
.gx-gut{width:var(--gx-gut);min-width:var(--gx-gut);position:sticky;left:0;z-index:2;
  background:var(--surface-2)!important;text-align:center}
.gx-grid thead .gx-gut{z-index:4}
.gx-frozen{position:sticky;left:var(--gx-gut);z-index:2}
.gx-grid thead .gx-frozen{z-index:4}
.gx-frozen:after,.gx-gut:after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:1px;
  background:var(--border-strong)}

.gx-hd{display:flex;align-items:center;gap:6px;padding:0 6px 0 9px;height:34px;position:relative}
.gx-hd .gx-ty{color:var(--text-3);flex:none;display:flex}
.gx-hd .gx-nm{font-size:11.5px;font-weight:800;letter-spacing:.3px;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left;
  background:none;border:0;padding:0;cursor:pointer}
.gx-hd .gx-mn{opacity:0;flex:none;width:20px;height:20px;border-radius:5px;border:0;background:transparent;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center}
th:hover .gx-hd .gx-mn,.gx-hd .gx-mn:focus-visible{opacity:1}
.gx-hd .gx-mn:hover{background:var(--surface-3);color:var(--text)}
.gx-rs{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:5}
.gx-rs:hover{background:var(--primary);opacity:.35}

.gx-rn{height:100%;display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;padding:0 2px;min-height:32px}
.gx-exp{width:20px;height:20px;border:0;background:transparent;color:var(--text-3);border-radius:4px;
  cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .12s}
tr:hover .gx-exp,.gx-exp:focus-visible,.gx-exp:focus{opacity:1}
.gx-exp:hover{background:var(--surface-3);color:var(--primary-ink)}

.gx-cell{min-height:32px;padding:7px 9px;outline:none;overflow:hidden;position:relative;
  display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0;cursor:cell}
.gx-cell[data-a="right"]{text-align:right}
.gx-cell[data-a="center"]{text-align:center}
.gx-cell.b{font-weight:800}
.gx-cell.i{font-style:italic}
.gx-cell.gx-conflict{box-shadow:inset 0 0 0 2px var(--mud-palette-warning)}
/* the selection wash is an overlay, not a background, so a cell fill the user
   just applied is still visible underneath while the range is live */
td.gx-inrange{box-shadow:inset 0 0 0 999px rgba(10,114,143,.11)}
td.gx-sel{box-shadow:inset 0 0 0 2px var(--primary);z-index:1}
td.gx-sel.gx-inrange{box-shadow:inset 0 0 0 2px var(--primary),inset 0 0 0 999px rgba(10,114,143,.11)}
.mud-theme-dark td.gx-inrange{box-shadow:inset 0 0 0 999px rgba(74,206,242,.15)}
.mud-theme-dark td.gx-sel.gx-inrange{box-shadow:inset 0 0 0 2px var(--primary),inset 0 0 0 999px rgba(74,206,242,.15)}
.gx-num-v{font-variant-numeric:tabular-nums}
.gx-trunc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gx-ro{color:var(--text-2)}

.gx-editor{width:100%;height:100%;min-height:32px;border:0;outline:none;padding:6px 8px;
  font:inherit;color:var(--text);background:var(--surface);resize:none;display:block}
textarea.gx-editor{min-height:74px}

/* chips */
.gx-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:99px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-chips{display:flex;flex-wrap:wrap;gap:4px}
.gx-check{width:17px;height:17px;accent-color:var(--primary)}
.gx-link{color:var(--primary-ink);text-decoration:underline}

/* conflict badge — offscreen label plus a small dot on the cell */
.gx-conf{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:0;cursor:pointer;
  background:var(--mud-palette-warning);color:var(--mud-palette-warning-text);font-weight:800;font-size:11px;line-height:16px;padding:0}
.gx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* .gx-cell already carries position:relative (see above) so the badge and
   sr-only suffix anchor to the cell, not the row */

/* footer */
.gx-foot{display:flex;align-items:center;gap:10px;padding:8px 10px;border-top:1px solid var(--border);
  background:var(--surface-2);flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.gx-grid tfoot td,.gx-grid tfoot th{background:var(--surface-2);font-weight:800;
  border-top:2px solid var(--border-strong);position:sticky;bottom:0;z-index:2}
.gx-grid tfoot .gx-gut{z-index:3}
.gx-sum{padding:7px 9px;font-size:12px;font-variant-numeric:tabular-nums}
.gx-sumlbl{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text-3);margin-right:4px}

/* ---------- popup menu ---------- */
.gx-menu{position:fixed;z-index:60;min-width:216px;max-height:min(70vh,520px);overflow:auto;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:11px;
  box-shadow:var(--shadow-md);padding:6px}
.gx-menu h4{margin:0;padding:7px 10px 5px;font-size:10.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text-3)}
.gx-mi{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:0;border-radius:7px;
  background:none;color:var(--text);font-size:13px;text-align:left;cursor:pointer}
.gx-mi:hover,.gx-mi:focus-visible{background:var(--surface-2)}
.gx-mi[aria-checked="true"]{background:var(--primary-soft);color:var(--primary-ink);font-weight:700}
.gx-mi .gx-k{margin-left:auto;font-size:10.5px;color:var(--text-3);font-family:ui-monospace,Menlo,monospace}
.gx-mi.gx-danger{color:var(--danger)}
.gx-msep{height:1px;background:var(--border);margin:5px 4px}
.gx-rulehint{font-size:11.5px;color:var(--text-3);line-height:1.6;margin:0 0 12px}
.gx-sw{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:6px 8px 8px}
.gx-sw button{height:26px;border-radius:6px;border:1px solid var(--border);cursor:pointer;font-size:10px;
  font-weight:800;display:grid;place-items:center}
.gx-sw button[aria-pressed="true"]{outline:2px solid var(--primary);outline-offset:1px}

/* ---------- record drawer ---------- */
.gx-rec{position:fixed;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--surface);
  border-left:1px solid var(--border-strong);box-shadow:-10px 0 34px rgba(16,24,40,.14);
  z-index:70;display:flex;flex-direction:column}
.mud-theme-dark .gx-rec{box-shadow:-10px 0 34px rgba(0,0,0,.5)}
.gx-rec header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.gx-rec header h3{margin:0;font-size:15px;font-weight:800}
.gx-rec .gx-body{padding:14px 16px;overflow:auto;flex:1}
.gx-fld{margin-bottom:14px}
.gx-fld > label,.gx-fld > .gx-lb{display:block;font-size:11px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.gx-fld input[type="text"],.gx-fld input[type="number"],.gx-fld input[type="date"],
.gx-fld select,.gx-fld textarea{width:100%;padding:8px 10px;border:1px solid var(--border-strong);
  border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:13.5px}
.gx-fld textarea{min-height:86px;resize:vertical}
.gx-scrim{position:fixed;inset:0;background:rgba(16,24,40,.28);z-index:69}
.mud-theme-dark .gx-scrim{background:rgba(0,0,0,.5)}

.gx-hint{font-size:11.5px;color:var(--text-3);line-height:1.6;padding:10px 12px;
  border-top:1px solid var(--border);background:var(--surface-2)}
.gx-hint kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;font-weight:700;
  background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;
  border-radius:4px;padding:1px 5px;color:var(--text-2)}

/* ---------- focus ---------- */
/* WCAG: never remove this ring, even inside the sticky gutter/header cells */
.gx td[tabindex="0"]:focus{outline:2px solid var(--primary);outline-offset:-2px}