/* =====================================================================
   CRM DESIGN SYSTEM · v1.0 · tokens + components
   One file. Copy it into any project. Rebrand by editing LAYER 1 only.

   LAYER 1  Brand inputs      ← the only place a brand lives
   LAYER 2  Derived scales    ← computed from Layer 1, never edit by hand
   LAYER 3  Semantic roles    ← what components use (light + dark)
   LAYER 4  Components        ← read Layer 3 only, never Layer 1/2
   ===================================================================== */

/* ---------------------------------------------------------------------
   LAYER 1 · BRAND INPUTS
   Default brand = AltLeads, measured from crm.altleads.com (#2E7FBF).
   To rebrand: convert your brand hex to OKLch (oklch.com) and paste
   L / C / H below. Swap fonts. Pick a radius. That is the whole job.
   --------------------------------------------------------------------- */
:root {
  --brand-h: 246.4;          /* hue 0–360                                 */
  --brand-c: 0.125;          /* chroma 0–0.25 (how vivid)                 */
  --brand-l: 0.578;          /* lightness of the brand swatch itself      */
  --action-l: 0.52;          /* lightness of filled buttons — keep ≤0.55  */
  --on-action: oklch(1 0 0); /* text on filled buttons; use dark for
                                very light brands (yellow, lime)          */
  --neutral-c: 0.012;        /* how much brand hue tints the greys        */

  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --radius-base: 8px;        /* every radius is a multiple of this        */
  --density: 1;              /* 0.82 compact · 1 default · 1.18 roomy     */
}

/* ---------------------------------------------------------------------
   LAYER 2 · DERIVED SCALES  (fixed lightness steps → any hue passes AA)
   --------------------------------------------------------------------- */
:root {
  /* brand ramp */
  --brand-50:  oklch(0.975 calc(var(--brand-c) * 0.12) var(--brand-h));
  --brand-100: oklch(0.945 calc(var(--brand-c) * 0.26) var(--brand-h));
  --brand-200: oklch(0.890 calc(var(--brand-c) * 0.48) var(--brand-h));
  --brand-300: oklch(0.800 calc(var(--brand-c) * 0.75) var(--brand-h));
  --brand-400: oklch(0.690 calc(var(--brand-c) * 0.95) var(--brand-h));
  --brand-500: oklch(var(--brand-l) var(--brand-c) var(--brand-h));
  --brand-600: oklch(var(--action-l) var(--brand-c) var(--brand-h));
  --brand-700: oklch(calc(var(--action-l) - 0.07) calc(var(--brand-c) * 0.95) var(--brand-h));
  --brand-800: oklch(0.380 calc(var(--brand-c) * 0.80) var(--brand-h));
  --brand-900: oklch(0.300 calc(var(--brand-c) * 0.60) var(--brand-h));

  /* neutral ramp — tinted by brand hue so greys belong to the brand */
  --n-0:   oklch(1 0 0);
  --n-25:  oklch(0.985 calc(var(--neutral-c) * 0.5) var(--brand-h));
  --n-50:  oklch(0.968 var(--neutral-c) var(--brand-h));
  --n-100: oklch(0.945 var(--neutral-c) var(--brand-h));
  --n-200: oklch(0.915 var(--neutral-c) var(--brand-h));
  --n-300: oklch(0.870 var(--neutral-c) var(--brand-h));
  --n-400: oklch(0.780 var(--neutral-c) var(--brand-h));
  --n-500: oklch(0.640 var(--neutral-c) var(--brand-h));
  --n-600: oklch(0.540 var(--neutral-c) var(--brand-h));
  --n-700: oklch(0.440 var(--neutral-c) var(--brand-h));
  --n-800: oklch(0.320 var(--neutral-c) var(--brand-h));
  --n-900: oklch(0.210 var(--neutral-c) var(--brand-h));
  --n-950: oklch(0.160 var(--neutral-c) var(--brand-h));

  /* status hues are FIXED — meaning must not change with the brand */
  --h-success: 155; --h-warning: 70; --h-danger: 28; --h-info: var(--brand-h);

  /* data-viz categorical — equal lightness, spaced hues */
  --dv-1: oklch(0.60 0.13 var(--brand-h));
  --dv-2: oklch(0.66 0.12 165);
  --dv-3: oklch(0.72 0.13 75);
  --dv-4: oklch(0.58 0.13 305);
  --dv-5: oklch(0.62 0.15 28);
  --dv-6: oklch(0.66 0.09 210);

  /* type scale — size / line-height */
  --fs-display: 28px;  --lh-display: 34px;
  --fs-title: 20px;    --lh-title: 28px;
  --fs-heading: 16px;  --lh-heading: 24px;
  --fs-body: 14px;     --lh-body: 22px;
  --fs-ui: 13px;       --lh-ui: 20px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-overline: 11px; --lh-overline: 16px;   /* uppercase labels only */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* space — 4px base */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* radius — multiples of the brand input */
  --r-sm: calc(var(--radius-base) * 0.5);
  --r-md: var(--radius-base);
  --r-lg: calc(var(--radius-base) * 1.5);
  --r-xl: calc(var(--radius-base) * 2);
  --r-pill: 999px;

  /* sizing — scaled by density */
  --ctl-sm: calc(28px * var(--density));
  --ctl-md: calc(32px * var(--density));
  --ctl-lg: calc(40px * var(--density));
  --row-h:  calc(44px * var(--density));
  --icon-sm: 14px; --icon-md: 16px; --icon-lg: 20px;

  /* motion */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* layers */
  --z-sticky: 10; --z-chrome: 50; --z-pop: 100; --z-panel: 200;
  --z-dialog: 300; --z-toast: 400;

  /* app shell — chrome budget: first data row ≤ 160px from the top */
  --shell-nav: 232px; --shell-nav-mini: 60px;
  --shell-top: 56px; --toolbar-h: 48px; --thead-h: 40px;
}

/* ---------------------------------------------------------------------
   LAYER 3 · SEMANTIC ROLES — components read ONLY these
   --------------------------------------------------------------------- */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg-page:     var(--n-25);
  --bg-surface:  var(--n-0);
  --bg-raised:   var(--n-0);
  --bg-subtle:   var(--n-50);
  --bg-hover:    var(--n-50);
  --bg-pressed:  var(--n-100);
  --bg-selected: var(--brand-50);
  --bg-selected-hover: var(--brand-100);
  --bg-inverse:  var(--n-900);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-focus:  var(--brand-500);

  --text:          var(--n-900);   /* 16:1 on surface   */
  --text-2:        var(--n-700);   /* 8:1  — secondary  */
  --text-3:        var(--n-600);   /* 5:1  — tertiary, still AA */
  --text-disabled: var(--n-400);
  --text-inverse:  var(--n-0);
  --text-link:     var(--brand-700);
  --icon:          var(--n-600);

  --action:        var(--brand-600);
  --action-hover:  var(--brand-700);
  --action-pressed:var(--brand-800);
  --action-soft:   var(--brand-50);
  --action-soft-fg:var(--brand-700);

  --success-fg: oklch(0.48 0.12 var(--h-success));
  --success-bg: oklch(0.965 0.03 var(--h-success));
  --success-bd: oklch(0.87 0.06 var(--h-success));
  --success-dot:oklch(0.62 0.15 var(--h-success));
  --warning-fg: oklch(0.49 0.11 var(--h-warning));
  --warning-bg: oklch(0.970 0.04 var(--h-warning));
  --warning-bd: oklch(0.88 0.08 var(--h-warning));
  --warning-dot:oklch(0.76 0.15 var(--h-warning));
  --danger-fg:  oklch(0.50 0.17 var(--h-danger));
  --danger-bg:  oklch(0.965 0.025 var(--h-danger));
  --danger-bd:  oklch(0.87 0.07 var(--h-danger));
  --danger-dot: oklch(0.60 0.19 var(--h-danger));
  --info-fg:    var(--brand-700);
  --info-bg:    var(--brand-50);
  --info-bd:    var(--brand-200);
  --info-dot:   var(--brand-500);
  --neutral-dot:var(--n-500);

  --shadow-1: 0 1px 2px oklch(0.2 0.02 var(--brand-h) / 0.06);
  --shadow-2: 0 6px 16px -4px oklch(0.2 0.03 var(--brand-h) / 0.14), 0 2px 4px oklch(0.2 0.02 var(--brand-h) / 0.06);
  --shadow-3: 0 24px 48px -12px oklch(0.2 0.04 var(--brand-h) / 0.28);
  --scrim: oklch(0.2 0.02 var(--brand-h) / 0.36);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-page:     oklch(0.165 var(--neutral-c) var(--brand-h));
  --bg-surface:  oklch(0.200 var(--neutral-c) var(--brand-h));
  --bg-raised:   oklch(0.240 var(--neutral-c) var(--brand-h));
  --bg-subtle:   oklch(0.230 var(--neutral-c) var(--brand-h));
  --bg-hover:    oklch(0.255 var(--neutral-c) var(--brand-h));
  --bg-pressed:  oklch(0.290 var(--neutral-c) var(--brand-h));
  --bg-selected: oklch(0.290 calc(var(--brand-c) * 0.45) var(--brand-h));
  --bg-selected-hover: oklch(0.330 calc(var(--brand-c) * 0.5) var(--brand-h));
  --bg-inverse:  oklch(0.940 var(--neutral-c) var(--brand-h));

  --border:        oklch(0.300 var(--neutral-c) var(--brand-h));
  --border-strong: oklch(0.380 var(--neutral-c) var(--brand-h));
  --border-focus:  oklch(0.720 var(--brand-c) var(--brand-h));

  --text:          oklch(0.960 var(--neutral-c) var(--brand-h));
  --text-2:        oklch(0.820 var(--neutral-c) var(--brand-h));
  --text-3:        oklch(0.700 var(--neutral-c) var(--brand-h));
  --text-disabled: oklch(0.480 var(--neutral-c) var(--brand-h));
  --text-inverse:  oklch(0.180 var(--neutral-c) var(--brand-h));
  --text-link:     oklch(0.780 calc(var(--brand-c) * 0.9) var(--brand-h));
  --icon:          oklch(0.720 var(--neutral-c) var(--brand-h));

  --action:        var(--brand-600);
  --action-hover:  var(--brand-700);  /* darker, so white text never loses contrast */
  --action-pressed:var(--brand-800);
  --action-soft:   oklch(0.290 calc(var(--brand-c) * 0.45) var(--brand-h));
  --action-soft-fg:oklch(0.840 calc(var(--brand-c) * 0.7) var(--brand-h));

  --success-fg: oklch(0.80 0.12 var(--h-success));
  --success-bg: oklch(0.27 0.045 var(--h-success));
  --success-bd: oklch(0.38 0.07 var(--h-success));
  --warning-fg: oklch(0.84 0.12 var(--h-warning));
  --warning-bg: oklch(0.28 0.045 var(--h-warning));
  --warning-bd: oklch(0.40 0.07 var(--h-warning));
  --danger-fg:  oklch(0.78 0.13 var(--h-danger));
  --danger-bg:  oklch(0.27 0.05 var(--h-danger));
  --danger-bd:  oklch(0.40 0.09 var(--h-danger));
  --info-fg:    oklch(0.82 calc(var(--brand-c) * 0.8) var(--brand-h));
  --info-bg:    oklch(0.28 calc(var(--brand-c) * 0.4) var(--brand-h));
  --info-bd:    oklch(0.40 calc(var(--brand-c) * 0.6) var(--brand-h));

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --shadow-2: 0 8px 20px -4px oklch(0 0 0 / 0.55);
  --shadow-3: 0 24px 56px -12px oklch(0 0 0 / 0.7);
  --scrim: oklch(0 0 0 / 0.55);
}

/* ---------------------------------------------------------------------
   LAYER 4 · COMPONENTS
   Rule: hover moves the BACKGROUND, never dims the text.
   Rule: every focusable thing shows :focus-visible.
   --------------------------------------------------------------------- */
.ds, .ds * { box-sizing: border-box; }
.ds {
  font-family: var(--font-ui); font-size: var(--fs-ui); line-height: var(--lh-ui);
  color: var(--text); background: var(--bg-page);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased;
}
.ds :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-sm); }
.num, .ds td.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }

/* type utilities */
.t-display { font: var(--fw-semibold) var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: -0.02em; }
.t-title   { font: var(--fw-semibold) var(--fs-title)/var(--lh-title) var(--font-display); letter-spacing: -0.01em; }
.t-heading { font: var(--fw-semibold) var(--fs-heading)/var(--lh-heading) var(--font-ui); letter-spacing: -0.005em; }
.t-body    { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); }
.t-ui      { font: var(--fw-regular) var(--fs-ui)/var(--lh-ui) var(--font-ui); }
.t-caption { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--text-2); }
.t-overline{ font: var(--fw-semibold) var(--fs-overline)/var(--lh-overline) var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }

/* icon */
.icon { width: var(--icon-md); height: var(--icon-md); flex: 0 0 auto; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon.sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon.lg { width: var(--icon-lg); height: var(--icon-lg); }

/* button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--ctl-md); padding: 0 var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text);
  font: var(--fw-medium) var(--fs-ui)/1 var(--font-ui); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.btn .icon { color: var(--icon); }
.btn:hover { background: var(--bg-hover); border-color: var(--n-400); }
.btn:active { background: var(--bg-pressed); transform: translateY(0.5px); }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn.primary .icon { color: currentColor; }
.btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--on-action); }
.btn.primary:active { background: var(--action-pressed); border-color: var(--action-pressed); }
.btn.soft { background: var(--action-soft); border-color: transparent; color: var(--action-soft-fg); }
.btn.soft .icon { color: currentColor; }
.btn.soft:hover { background: var(--bg-selected-hover); color: var(--action-soft-fg); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn.danger { background: var(--bg-surface); border-color: var(--danger-bd); color: var(--danger-fg); }
.btn.danger .icon { color: currentColor; }
.btn.danger:hover { background: var(--danger-bg); color: var(--danger-fg); }
.btn.sm { height: var(--ctl-sm); padding: 0 var(--sp-2); gap: 6px; font-size: var(--fs-caption); }
.btn.lg { height: var(--ctl-lg); padding: 0 var(--sp-4); font-size: var(--fs-body); }
.btn.icon-only { width: var(--ctl-md); padding: 0; }
.btn.sm.icon-only { width: var(--ctl-sm); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--bg-subtle); border-color: var(--border); color: var(--text-disabled); cursor: not-allowed; transform: none; }
.btn:disabled .icon { color: var(--text-disabled); }
.kbd { display: inline-flex; align-items: center; height: 18px; min-width: 18px; padding: 0 5px; justify-content: center;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm);
  font: var(--fw-medium) 11px/1 var(--font-mono); color: var(--text-2); background: var(--bg-surface); }

/* form fields */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-2); }
.field .hint { font-size: var(--fs-caption); color: var(--text-3); }
.field .error { font-size: var(--fs-caption); color: var(--danger-fg); display: flex; gap: 6px; align-items: center; }
.input { display: flex; align-items: center; gap: var(--sp-2); height: var(--ctl-md); padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); color: var(--text);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); min-width: 0; }
.input .icon { color: var(--icon); }
.input input, .input select { all: unset; flex: 1; min-width: 0; font: inherit; color: var(--text); }
.input input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--n-400); }
.input:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--bg-selected-hover); }
.input.invalid { border-color: var(--danger-dot); }
.input.invalid:focus-within { box-shadow: 0 0 0 3px var(--danger-bg); }
.input.disabled { background: var(--bg-subtle); border-color: var(--border); color: var(--text-disabled); }
.input.disabled input { color: var(--text-disabled); }

/* checkbox / radio / switch */
.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; color: var(--text); min-height: 24px; }
.check input { appearance: none; margin: 0; width: 16px; height: 16px; border: 1.5px solid var(--n-400);
  border-radius: var(--r-sm); background: var(--bg-surface); display: grid; place-content: center; flex: 0 0 16px;
  transition: background var(--dur-1), border-color var(--dur-1); cursor: pointer; }
.check input[type="radio"] { border-radius: 50%; }
.check input:hover { border-color: var(--brand-500); }
.check input:checked { background: var(--action); border-color: var(--action); }
.check input[type="checkbox"]:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--on-action);
  border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.check input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-action); }
.switch { appearance: none; margin: 0; width: 32px; height: 18px; border-radius: var(--r-pill); background: var(--n-400);
  position: relative; cursor: pointer; transition: background var(--dur-2) var(--ease-out); flex: 0 0 32px; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--n-0); box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-out); }
.switch:checked { background: var(--action); }
.switch:checked::after { transform: translateX(14px); }

/* segmented control + tabs */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r-md); background: var(--bg-pressed); height: var(--ctl-md); }
.seg button { all: unset; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--sp-3);
  border-radius: calc(var(--r-md) - 2px); font-weight: var(--fw-medium); color: var(--text-2); cursor: pointer; }
.seg button:hover { color: var(--text); background: var(--bg-hover); }
.seg button[aria-pressed="true"] { background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-1); }
.tabs { display: flex; gap: var(--sp-5); border-bottom: 1px solid var(--border); }
.tab { all: unset; display: inline-flex; align-items: center; gap: 6px; height: 40px; cursor: pointer;
  color: var(--text-2); font-weight: var(--fw-medium); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--action); font-weight: var(--fw-semibold); }
.tab .count { font-size: var(--fs-caption); color: var(--text-3); font-weight: var(--fw-regular); }

/* chips (filters) */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--bg-surface); font-size: var(--fs-caption); color: var(--text); white-space: nowrap; }
.chip b { font-weight: var(--fw-semibold); }
.chip .k { color: var(--text-3); }
.chip .x { all: unset; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--icon); }
.chip .x:hover { background: var(--bg-pressed); color: var(--text); }
.chip.add { border-style: dashed; padding: 0 10px; color: var(--text-2); cursor: pointer; background: transparent; }
.chip.add:hover { background: var(--bg-hover); color: var(--text); }

/* status — DOT for state, BADGE for a block, TAG for a verification */
.status { display: inline-flex; align-items: center; gap: 7px; color: var(--text); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral-dot); flex: 0 0 8px; }
.status.success::before { background: var(--success-dot); }
.status.warning::before { background: var(--warning-dot); }
.status.danger::before  { background: var(--danger-dot); }
.status.info::before    { background: var(--info-dot); }
.status.empty { color: var(--text-3); }
.status.empty::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--n-400); }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: var(--r-sm);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); border: 1px solid; white-space: nowrap; }
.badge .icon { width: 12px; height: 12px; stroke-width: 2.2; }
/* DECIDED (user, 1 Oct 2026): text inside a tinted box reads like all other text.
   The hue lives in the background and the icon, never in the words. */
.badge.neutral { background: var(--bg-subtle); color: var(--text); border-color: var(--border); }
.badge.success { background: var(--success-bg); color: var(--text); border-color: var(--success-bd); }
.badge.success .icon { color: var(--success-fg); }
.badge.warning { background: var(--warning-bg); color: var(--text); border-color: var(--warning-bd); }
.badge.warning .icon { color: var(--warning-fg); }
.badge.danger  { background: var(--danger-bg);  color: var(--text);  border-color: var(--danger-bd); }
.badge.danger .icon { color: var(--danger-fg); }
.badge.info    { background: var(--info-bg);    color: var(--text);    border-color: var(--info-bd); }
.badge.info .icon { color: var(--info-fg); }
.count-pill { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--action); color: var(--on-action); font-size: 11px; font-weight: var(--fw-bold); }

/* avatar + company glyph */
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 11px; font-weight: var(--fw-semibold); background: var(--brand-100); color: var(--brand-800); }
.glyph { width: 28px; height: 28px; border-radius: var(--r-md); display: grid; place-items: center; flex: 0 0 auto;
  font: var(--fw-semibold) 11px/1 var(--font-ui); letter-spacing: 0.02em; border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-2); }

/* record cell — the anchor of every CRM row */
.rec { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rec-body { display: flex; flex-direction: column; min-width: 0; }
.rec-name { font-weight: var(--fw-semibold); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-name:hover { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.rec-meta { font-size: var(--fs-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* table */
.table-wrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--thead-h); padding: 0 var(--sp-3); text-align: left;
  background: var(--bg-surface); border-bottom: 1px solid var(--border); white-space: nowrap;
  font: var(--fw-medium) var(--fs-caption)/1 var(--font-ui); color: var(--text-2); }
.table td { height: var(--row-h); padding: 0 var(--sp-3); border-bottom: 1px solid var(--border); color: var(--text-2);
  white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-1) var(--ease-out); }
.table tbody tr:hover td { background: var(--bg-hover); }
.table tbody tr[aria-selected="true"] td { background: var(--bg-selected); }
.table tbody tr[aria-selected="true"]:hover td { background: var(--bg-selected-hover); }
.table tr.blocked td { color: var(--text-3); }
.table .col-check { width: 40px; padding-right: 0; }
.table .col-act { width: 1%; text-align: right; }

/* surfaces */
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.popover { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: 6px; }
.menu-item { all: unset; display: flex; align-items: center; gap: var(--sp-2); height: var(--ctl-md); padding: 0 var(--sp-2);
  border-radius: var(--r-md); color: var(--text); cursor: pointer; width: 100%; box-sizing: border-box; }
.menu-item:hover { background: var(--bg-hover); }
.menu-item .icon { color: var(--icon); }
.menu-item .kbd { margin-left: auto; }
.menu-item.danger { color: var(--danger-fg); }
.menu-item.danger .icon { color: currentColor; }
.menu-item.danger:hover { background: var(--danger-bg); }
.menu-sep { height: 1px; background: var(--border); margin: 4px -6px; }
.dialog { background: var(--bg-raised); border-radius: var(--r-xl); box-shadow: var(--shadow-3); border: 1px solid var(--border); overflow: hidden; }
.dialog-head { padding: var(--sp-5) var(--sp-6) var(--sp-2); }
.dialog-body { padding: 0 var(--sp-6) var(--sp-5); }
.dialog-foot { padding: var(--sp-3) var(--sp-6); display: flex; justify-content: flex-end; gap: var(--sp-2); border-top: 1px solid var(--border); background: var(--bg-subtle); }
.toast { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 10px 10px 14px; border-radius: var(--r-lg);
  background: var(--bg-inverse); color: var(--text-inverse); box-shadow: var(--shadow-2); font-weight: var(--fw-medium); }
.toast .icon { color: var(--success-dot); }
.toast .btn.ghost { color: var(--text-inverse); }
.toast .btn.ghost:hover { background: oklch(1 0 0 / 0.12); color: var(--text-inverse); }
[data-theme="dark"] .toast .btn.ghost:hover { background: oklch(0 0 0 / 0.08); }
.tooltip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--r-md);
  background: var(--bg-inverse); color: var(--text-inverse); font-size: var(--fs-caption); box-shadow: var(--shadow-2); }
.tooltip .kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .8; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-6); }
.empty .icon-wrap { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--bg-subtle); display: grid; place-items: center; color: var(--icon); margin-bottom: var(--sp-1); }

/* skeleton */
.skel { display: block; height: 10px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--bg-pressed), var(--bg-subtle), var(--bg-pressed));
  background-size: 200% 100%; animation: skel 1.4s var(--ease-in-out) infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .ds *, .ds *::before, .ds *::after { transition-duration: 0ms !important; animation: none !important; }
}