/* ============================================================================
   THEME SYSTEM -- System / Light / Dark
   ============================================================================
   Every color in this file is a variable, never a literal hex, so a theme
   switch is just re-pointing these tokens -- nothing else in the file needs
   to know a dark mode exists. Three ways this can resolve, checked in this
   order by the cascade:
     1. :root                                     -- light (the default/fallback)
     2. @media (prefers-color-scheme: dark)        -- "System" mode, when the
        guarded by :root:not([data-theme="light"])    OS itself is set to dark
        AND the user hasn't explicitly forced light
     3. :root[data-theme="dark"]                   -- explicit "Dark" choice,
        wins over the OS setting either way
   public/app.js's theme switcher only ever sets/clears the `data-theme`
   attribute on <html>; it never touches these values directly.

   Every pairing below was verified against WCAG 2.2 (Section 508's own
   standard) with a real contrast-ratio script, not eyeballed: 4.5:1 for
   normal text (SC 1.4.3), 3:1 for large text and UI component boundaries
   like focus rings/input borders (SC 1.4.11). See the color pairs actually
   used together, so a variable's name always implies what it's meant to sit
   on -- e.g. --ok is only ever text ON --ok-bg, never on --card directly. */
:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e3e6ee;        /* decorative dividers only (cards, table rows) */
  --input-border: #8b95a5;  /* form controls -- meets the 3:1 UI-boundary minimum a merely-decorative divider doesn't need to */
  --text: #1c2233;
  --muted: #5b6472;
  --placeholder: #8791a1;

  --brand: #4f46e5;              /* text/icon/border accent */
  --brand-dark: #3730a3;         /* text accent on a tinted/pending background, or on white */
  --brand-solid: #4f46e5;        /* solid button/tab fill -- always paired with --brand-contrast text, so it does NOT need to change between themes */
  --brand-solid-hover: #4338ca;
  --brand-contrast: #ffffff;
  --brand-glow: rgba(79, 70, 229, 0.35);  /* button hover/focus "glow" ring -- same theme-invariant reasoning as --brand-solid (a fixed accent, not a readability-critical text color) */
  --brand-tint: rgba(79, 70, 229, 0.08);  /* faint hover-background wash for an outlined/ghost button -- lighter version of --brand-glow, same fixed color */

  --ok: #15803d;
  --ok-bg: #ecfdf3;
  --ok-solid: #15803d;  /* solid fills paired with a white knob/icon (e.g. the toggle switch) -- theme-invariant, same reasoning as --brand-solid */
  --warn: #92400e;
  --warn-bg: #fffaeb;
  --warn-text: #92400e;    /* same role as --warn, but paired with --card instead of --warn-bg (e.g. the spam-signal list) */
  --err: #b91c1c;
  --err-bg: #fef2f2;
  --err-solid: #b91c1c;  /* solid fills paired with white text (e.g. error toasts) -- theme-invariant, same reasoning as --brand-solid/--ok-solid */
  --err-glow: rgba(185, 28, 28, 0.35);  /* danger-button hover/active glow -- same theme-invariant reasoning as --brand-glow */
  --err-tint: rgba(185, 28, 28, 0.08);  /* faint hover-background wash for a danger button -- lighter version of --err-glow, same fixed color */
  --pending-bg: #eef2ff;
  --pending-text: #3730a3;
  --pending-border: #c7d2fe;
  --neutral-bg: #f3f4f6;
  --neutral-text: #4b5563;

  --step-email-bg: #dbeafe; --step-email-fg: #1d4ed8;
  --step-wait-bg: #fef3c7;  --step-wait-fg: #92400e;
  --step-task-bg: #ede9fe;  --step-task-fg: #6d28d9;
  --step-linkedin-bg: #cffafe; --step-linkedin-fg: #0e7490;

  /* Dashboard chart palette -- a fixed 6-color qualitative set, deliberately defined ONLY here
     (never touched by either dark-mode block below), same theme-invariant reasoning as
     --brand-solid/--ok-solid/--err-solid just above: a chart segment's color is its whole meaning
     (which workflow, which account), so it must stay the exact same color in both themes or a
     legend/segment pairing would silently go wrong the moment someone switches theme. chart-1/2/3
     deliberately reuse --brand-solid/--ok-solid/--err-solid rather than picking new hex values, so
     a chart's "send" (indigo) / "opened" (green) / "failed" (red) always visually matches every
     OTHER use of those same colors elsewhere in the app (badges, buttons, toasts). chart-4 is a
     fresh, fixed amber rather than reusing --warn, since --warn itself is NOT theme-invariant (it
     shifts hue between light/dark) -- exactly the property a chart color can't have.  */
  --chart-1: #4f46e5;
  --chart-2: #15803d;
  --chart-3: #b91c1c;
  --chart-4: #b45309;
  --chart-5: #0e7490;
  --chart-6: #7e22ce;

  --switch-off: #d1d5db;
  --overlay-bg: rgba(15, 18, 30, 0.5);
  --shadow-sm: 0 8px 24px rgba(0,0,0,0.15);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.3);
  /* Toast/popover are always a dark chip with white text, in EITHER theme --
     a small, deliberately theme-invariant surface (like a tooltip), so it
     never has to fight for contrast against whatever the page background
     currently is. */
  --toast-bg: #1c2233; --toast-text: #ffffff;
  --popover-bg: #1c2233; --popover-text: #ffffff;
  --code-bg: #f1f2f6;
  --help-banner-bg: #fffaeb; --help-banner-text: #7a4a04;
  --help-banner-border: #f3d9a4; --help-banner-btn-border: #d9b45a;

  /* A blue focus indicator (not the brand indigo) is deliberate -- it's the
     same convention the U.S. federal design system (USWDS) uses, so a focus
     ring is never confused with a plain brand-colored accent elsewhere on
     the page. */
  --focus: #2563eb;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1117;
    --card: #161b22;
    --border: #30363d;
    --input-border: #6b7280;
    --text: #e6edf3;
    --muted: #9aa4b2;
    --placeholder: #6b7280;

    --brand: #a5b4fc;
    --brand-dark: #c7d2fe;

    --ok: #4ade80;
    --ok-bg: #0f2a1a;
    --warn: #fbbf24;
    --warn-bg: #2e2408;
    --warn-text: #fbbf24;
    --err: #f87171;
    --err-bg: #2d1414;
    --pending-bg: #1e2240;
    --pending-text: #c7d2fe;
    --pending-border: #4b4a8a;
    --neutral-bg: #21262d;
    --neutral-text: #a8b0bb;

    --step-email-bg: #16324a; --step-email-fg: #7db8f7;
    --step-wait-bg: #3a2c0d;  --step-wait-fg: #f4b942;
    --step-task-bg: #2a1f47;  --step-task-fg: #c4a4f7;
    --step-linkedin-bg: #0e3a3f; --step-linkedin-fg: #67e8f9;

    --switch-off: #3a3f4b;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
    --code-bg: #1c212b;
    --help-banner-bg: #2a2008; --help-banner-text: #f4b942;
    --help-banner-border: #5c4a17; --help-banner-btn-border: #7a611c;

    --focus: #60a5fa;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --card: #161b22;
  --border: #30363d;
  --input-border: #6b7280;
  --text: #e6edf3;
  --muted: #9aa4b2;
  --placeholder: #6b7280;

  --brand: #a5b4fc;
  --brand-dark: #c7d2fe;

  --ok: #4ade80;
  --ok-bg: #0f2a1a;
  --warn: #fbbf24;
  --warn-bg: #2e2408;
  --warn-text: #fbbf24;
  --err: #f87171;
  --err-bg: #2d1414;
  --pending-bg: #1e2240;
  --pending-text: #c7d2fe;
  --pending-border: #4b4a8a;
  --neutral-bg: #21262d;
  --neutral-text: #a8b0bb;

  --step-email-bg: #16324a; --step-email-fg: #7db8f7;
  --step-wait-bg: #3a2c0d;  --step-wait-fg: #f4b942;
  --step-task-bg: #2a1f47;  --step-task-fg: #c4a4f7;
  --step-linkedin-bg: #0e3a3f; --step-linkedin-fg: #67e8f9;

  --switch-off: #3a3f4b;
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
  --code-bg: #1c212b;
  --help-banner-bg: #2a2008; --help-banner-text: #f4b942;
  --help-banner-border: #5c4a17; --help-banner-btn-border: #7a611c;

  --focus: #60a5fa;
  color-scheme: dark;
}

/* SC 2.3.3 (best practice): don't animate/transition for anyone who's asked
   the OS not to. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

* { box-sizing: border-box; }

/* SC 2.4.7: every interactive element gets a visible, consistent focus ring
   on keyboard navigation -- mouse/touch activation doesn't trigger
   :focus-visible, so this never adds a ring to a plain click. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
/* The native `hidden` attribute must always win over any component's own `display` rule (e.g.
   .bulk-bar sets display:flex) -- without this, an author stylesheet rule silently overrides the
   browser's default [hidden]{display:none}, so toggling `.hidden = true` in JS stops actually
   hiding the element even though nothing looks wrong in the markup. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  /* Deliberately --brand-solid/-hover, NOT --brand/--brand-dark -- those two lighten in dark
     mode (they're meant for text sitting ON a dark page background), which would turn this
     into an unreadable pale-lavender bar with white text. The header itself always stays a
     vivid, theme-invariant indigo band, same as a solid button. */
  background: linear-gradient(90deg, var(--brand-solid), var(--brand-solid-hover));
  color: var(--brand-contrast);
  padding: 20px 32px;
  position: relative;
}
header h1 { margin: 0 0 4px; font-size: 20px; }
header p { margin: 0; opacity: 0.85; font-size: 13px; }

/* "?" help mode -- fixed top-right of the header, always reachable regardless of scroll */
.help-fab {
  position: absolute; top: 14px; right: 20px; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.15); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
}
.help-fab:hover { background: rgba(255,255,255,0.28); }

/* who is signed in: top right of the header, to the left of the round buttons */
.user-chip {
  position: absolute; top: 14px; right: 190px; height: 34px; max-width: 300px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 17px;
  border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.15); color: #fff; font-size: 13px;
}
.user-chip[hidden] { display: none; }
.user-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.user-chip-role { flex: none; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,0.25); }
.user-chip-role:empty { display: none; }
@media (max-width: 760px) { .user-chip { top: 56px; right: 20px; max-width: calc(100% - 40px); } header { padding-bottom: 54px; } }
.help-fab.active { background: var(--card); color: var(--brand-dark); border-color: var(--card); }

.help-banner {
  background: var(--help-banner-bg); color: var(--help-banner-text); border-bottom: 1px solid var(--help-banner-border);
  padding: 8px 32px; font-size: 13px; font-weight: 600; text-align: center;
}
.help-banner button {
  margin-left: 10px; border: 1px solid var(--help-banner-btn-border); background: var(--card); color: var(--help-banner-text);
  border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Deliberately theme-invariant (fixed hex, not a --var that shifts between light/dark) -- this
   needs to read as "something unusual and privileged is happening" identically in every theme,
   the same reasoning --chart-4/--brand-solid are fixed rather than following --warn's own
   light/dark hue shift. Only ever used here. */
.impersonation-banner {
  background: #92400e; color: #fff7ed; border-bottom: 1px solid #78350f;
  padding: 8px 32px; font-size: 13px; font-weight: 600; text-align: center;
}
.impersonation-banner button {
  margin-left: 10px; border: 1px solid #fff7ed; background: transparent; color: #fff7ed;
  border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.impersonation-banner button:hover { background: rgba(255,255,255,0.15); }

/* While armed, make it visually obvious that clicking anything is now a "what's this" lookup,
   not the element's normal action. */
body.help-mode-active, body.help-mode-active * { cursor: help !important; }

.help-popover {
  display: none; position: fixed; z-index: 100; width: 300px; max-width: calc(100vw - 24px);
  background: var(--popover-bg); color: var(--popover-text); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; line-height: 1.5; box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  cursor: auto;
}
.help-popover.show { display: block; }
.help-popover-close {
  float: right; border: none; background: none; color: rgba(255,255,255,0.7); font-size: 16px;
  line-height: 1; cursor: pointer; margin-left: 8px;
}
.help-popover-close:hover { color: #fff; }
.help-popover-body { clear: both; }

.help-target-flash { outline: 3px solid var(--warn) !important; outline-offset: 2px; border-radius: 4px; }

/* Draws the eye to a section that just became relevant after an action (upload -> mapping step,
   a newly-created workflow/account's own editor opening) -- brand-colored, not the warning-colored
   help-target-flash above, since this means "your next step is here," not "here's some help text." */
.next-step-highlight { animation: nextStepPulse 1.8s ease-out; }
@keyframes nextStepPulse {
  0% { box-shadow: 0 0 0 4px var(--brand-glow); }
  70% { box-shadow: 0 0 0 4px var(--brand-glow); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Active/Draft toggle switch (Workflows table) */
.switch { position: relative; display: inline-block; width: 38px; height: 22px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--switch-off); transition: 0.15s; border-radius: 999px;
}
.switch .slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff; transition: 0.15s; border-radius: 50%;
}
.switch input:checked + .slider { background: var(--ok-solid); }
.switch input:checked + .slider::before { transform: translateX(16px); }

/* "⋯" row actions dropdown menu (Workflows table) -- same single-instance-on-body pattern as
   .help-popover, and the same visibility-via-class-only rule (see showWorkflowActionsMenu). */
.actions-menu {
  display: none; position: fixed; z-index: 90; min-width: 150px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-sm); padding: 6px; flex-direction: column;
}
.actions-menu.show { display: flex; }
.actions-menu button {
  border: none; background: none; text-align: left; padding: 7px 10px; border-radius: 6px;
  font-size: 13px; cursor: pointer; color: var(--text);
}
.actions-menu button:hover { background: var(--bg); }
.actions-menu button.danger { color: var(--err); }
.actions-menu-btn { font-weight: 700; padding: 4px 10px; line-height: 1; }

/* Theme menu (#themeMenu) reuses .actions-menu wholesale -- this just adds a checkmark next to
   whichever of System/Light/Dark is currently active, for sighted users (aria-checked already
   covers screen readers on its own). */
#themeMenu button[aria-checked="true"] { color: var(--brand); font-weight: 700; }
#themeMenu button[aria-checked="true"]::after { content: " ✓"; }

/* Clickable metric numbers in the Workflows table (Not Sent / Scheduled / Finished / Paused /
   Rejected) that open the drill-down modal below. */
.metric-link {
  border: none; background: none; padding: 0; font: inherit; color: var(--brand); cursor: pointer;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px;
}
.metric-link:hover { text-decoration-color: var(--brand); }

/* Workflow metric drill-down modal */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: var(--overlay-bg); z-index: 200;
  align-items: center; justify-content: center; padding: 24px;
}
.modal-overlay.show { display: flex; }
.modal-card {
  background: var(--card); border-radius: 12px; padding: 20px; width: 100%; max-width: 820px;
  max-height: 85vh; overflow: auto; box-shadow: var(--shadow-lg);
}

nav.tabs {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
nav.tabs button {
  border: none;
  background: transparent;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
nav.tabs button.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

main { padding: 24px 32px 60px; max-width: 1500px; margin: 0 auto; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 16px; }
.card h3 { font-size: 14px; margin: 18px 0 8px; }
.muted { color: var(--muted); font-size: 13px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=number], input[type=password], input[type=tel], textarea, select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
textarea { resize: vertical; min-height: 90px; }
.field { margin-bottom: 12px; }

/* Every button variant below gets the same three-part "this is clickable" feedback on hover --
   a glowing ring (box-shadow, since the solid variant has no real border to recolor), a border-
   color shift for the outlined variants (secondary/danger/ghost), and a faint background wash --
   plus a slightly tighter glow + a 1px press-down on :active for real tactile feedback. Reported
   directly: the outlined variants (Generate/View/Delete and friends) had NO hover state at all
   before this, which read as a "dead" button even though it was fully clickable. The transition
   is intentionally short (0.12-0.15s) so it reads as responsive, not sluggish, and the global
   prefers-reduced-motion override further up this file already neutralizes it for anyone who's
   asked to skip animations -- no extra guard needed here. */
button.btn {
  background: var(--brand-solid);
  color: var(--brand-contrast);
  border: 1px solid transparent;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
button.btn:hover { background: var(--brand-solid-hover); box-shadow: 0 0 0 3px var(--brand-glow); }
button.btn:active { background: var(--brand-solid-hover); box-shadow: 0 0 0 2px var(--brand-glow); transform: translateY(1px); }
button.btn.secondary { background: var(--card); color: var(--brand); border: 1px solid var(--brand); }
button.btn.secondary:hover { background: var(--brand-tint); border-color: var(--brand-solid); box-shadow: 0 0 0 3px var(--brand-glow); }
button.btn.secondary:active { background: var(--brand-tint); border-color: var(--brand-solid); box-shadow: 0 0 0 2px var(--brand-glow); transform: translateY(1px); }
button.btn.danger { background: var(--card); color: var(--err); border: 1px solid var(--err); }
button.btn.danger:hover { background: var(--err-tint); border-color: var(--err-solid); box-shadow: 0 0 0 3px var(--err-glow); }
button.btn.danger:active { background: var(--err-tint); border-color: var(--err-solid); box-shadow: 0 0 0 2px var(--err-glow); transform: translateY(1px); }
button.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
button.btn.ghost:hover { color: var(--brand); background: var(--brand-tint); border-color: var(--brand-solid); box-shadow: 0 0 0 3px var(--brand-glow); }
button.btn.ghost:active { color: var(--brand); background: var(--brand-tint); border-color: var(--brand-solid); box-shadow: 0 0 0 2px var(--brand-glow); transform: translateY(1px); }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* A disabled button still matches :hover/:active in CSS (the browser doesn't stop those pseudo-
   classes just because the element can't be clicked), so every glow/transform/color shift above
   needs an explicit disabled override back to that variant's own plain resting state -- otherwise
   a merely-hovered disabled button would glow as if it were genuinely clickable. */
button.btn:disabled:hover, button.btn:disabled:active { background: var(--brand-solid); box-shadow: none; transform: none; }
button.btn.secondary:disabled:hover, button.btn.secondary:disabled:active { background: var(--card); border-color: var(--brand); box-shadow: none; transform: none; }
button.btn.danger:disabled:hover, button.btn.danger:disabled:active { background: var(--card); border-color: var(--err); box-shadow: none; transform: none; }
button.btn.ghost:disabled:hover, button.btn.ghost:disabled:active { color: var(--muted); background: transparent; border-color: var(--border); box-shadow: none; transform: none; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.pending { background: var(--pending-bg); color: var(--pending-text); }
.badge.sent, .badge.completed, .badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.failed { background: var(--err-bg); color: var(--err); }
.badge.stopped { background: var(--neutral-bg); color: var(--neutral-text); }
.badge.active { background: var(--ok-bg); color: var(--ok); }
.badge.draft { background: var(--neutral-bg); color: var(--neutral-text); }
.badge.warmup { background: var(--warn-bg); color: var(--warn); }
.badge.campaign { background: var(--pending-bg); color: var(--pending-text); }
.badge.health-error { background: var(--err-bg); color: var(--err); }

/* Send log: keep the short, fixed-format columns (timestamp, type badge, step, status badge,
   counts) to one line each -- only Contact/Workflow/Message are left free to wrap if they're
   ever genuinely long, and Message is truncated to a few words anyway (see .msg-toggle below). */
#logsTable td:nth-child(1), #logsTable td:nth-child(2), #logsTable td:nth-child(5),
#logsTable td:nth-child(6), #logsTable td:nth-child(8), #logsTable td:nth-child(9) {
  white-space: nowrap;
}
.msg-toggle {
  border: none; background: none; padding: 0 2px; margin-left: 2px; cursor: pointer;
  color: var(--brand); font-weight: 700; font-size: 13px; line-height: 1;
}
.msg-toggle:hover { text-decoration: underline; }

.icon-row { display: flex; gap: 5px; flex-wrap: nowrap; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--input-border); border-radius: 7px; background: var(--card);
  color: var(--text); font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.icon-btn:hover { background: var(--pending-bg); border-color: var(--brand-solid); box-shadow: 0 0 0 3px var(--brand-glow); }
.icon-btn:active { background: var(--pending-bg); border-color: var(--brand-solid); box-shadow: 0 0 0 2px var(--brand-glow); transform: translateY(1px); }
.icon-btn.danger:hover { background: var(--err-bg); border-color: var(--err-solid); box-shadow: 0 0 0 3px var(--err-glow); }
.icon-btn.danger:active { background: var(--err-bg); border-color: var(--err-solid); box-shadow: 0 0 0 2px var(--err-glow); transform: translateY(1px); }
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn:disabled:hover, .icon-btn:disabled:active { background: var(--card); border-color: var(--input-border); box-shadow: none; transform: none; }

.wf-step-actions { display: flex; gap: 5px; flex-shrink: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.list-badge { display: inline-block; background: var(--pending-bg); color: var(--pending-text); border-radius: 999px; padding: 2px 9px; font-size: 12px; margin: 1px 3px 1px 0; }
select.compact-multiselect { font-size: 12px; padding: 4px; min-width: 140px; }

/* Sortable table headers (click to sort, e.g. the Send log) */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable .sort-arrow { display: inline-block; width: 10px; opacity: 0.35; }
th.sortable.sort-active .sort-arrow { opacity: 1; color: var(--brand); }

/* Per-column search/filter row directly under the header row */
tr.column-filter-row th { padding: 4px 8px; border-bottom: 1px solid var(--border); background: var(--bg); }
tr.column-filter-row input, tr.column-filter-row select {
  width: 100%; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: normal;
  padding: 4px 6px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--card); color: var(--text);
}

.dns-record { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; max-width: 100%; overflow-wrap: anywhere; }
.dns-record .dns-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.dns-record .dns-type { flex-shrink: 0; font-weight: 700; font-size: 12px; background: var(--pending-bg); color: var(--pending-text); padding: 1px 8px; border-radius: 999px; }
.dns-record .dns-value { font-family: monospace; font-size: 12.5px; background: var(--code-bg); border-radius: 6px; padding: 8px; word-break: break-all; overflow-wrap: anywhere; }
.dns-record .dns-note { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-all; overflow-wrap: anywhere; }

.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--pending-bg); border: 1px solid var(--pending-border); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 12px;
}
.bulk-bar span { font-weight: 600; font-size: 13px; color: var(--pending-text); }
#contactsTable th:first-child, #contactsTable td:first-child { width: 32px; text-align: center; }
/* A custom field's value can be arbitrarily long in real data (e.g. Apollo's "Technologies" column
   is a comma-separated list that can run to several thousand characters for a well-instrumented
   company) -- left unconstrained, a single such cell wraps across dozens/hundreds of lines and
   blows up that one row's height to the point the table looks broken (huge blank-looking gaps
   between what are actually just short, top-aligned neighboring cells). Truncate with an ellipsis
   and rely on the title attribute (set alongside this class, see renderContactsPage() in app.js)
   for the full value on hover -- nothing is lost, just not force-displayed inline. */
#contactsTable td.cf-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Same convention as .cf-cell above, applied to the Tasks tab's LinkedIn column -- a real, reported
   bug: a long matched profile slug (e.g. "in/gabriel-robledo-cloud-digital-advocate-951ba814") had no
   width constraint at all, so it wrapped onto a second line and pushed the 🔄/✏️ icon buttons down
   with it, breaking that one row's height/alignment relative to every other row (and shifting again
   whenever the column filter changed which rows were visible). The link itself stays a real <a href>
   underneath -- clicking anywhere on the truncated/ellipsized text (including the "…" itself, which
   is just how the browser renders the overflow, not a separate element) still opens the full real
   URL; the untruncated value is also available via the same title-attribute-on-hover convention
   .cf-cell already uses. display:inline-block is required for max-width+text-overflow to apply to an
   inline <a> at all; flex-shrink:0 keeps it from being squeezed by its own row's flex container
   instead of truncating on its own terms. */
.linkedin-url-cell { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; text-align: center; }
.stat.clickable { cursor: pointer; transition: border-color 0.15s, transform 0.1s; }
.stat.clickable:hover { border-color: var(--brand); }
.stat.clickable:active { transform: scale(0.98); }
.stat .num { font-size: 24px; font-weight: 700; }
.stat .label { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Dashboard tab: hand-rolled charts (no charting library -- see CLAUDE.md) ----------
   Two real SVG shapes (gauge, donut -- geometry that's genuinely awkward in plain CSS) plus
   CSS-flex-based bar charts (horizontal AND vertical) for everything else, same theme-invariant
   --chart-N palette throughout so a color always means the same series everywhere on this tab. */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dash-card h3 { margin: 0 0 12px; font-size: 14px; }
.dash-card-wide { grid-column: 1 / -1; }

.gauge-row { display: flex; gap: 16px; flex-wrap: wrap; }
.gauge-wrap { flex: 1 1 200px; text-align: center; }
.gauge-value { font-size: 26px; font-weight: 700; margin-top: -8px; }
.gauge-label { font-size: 12px; color: var(--muted); }

.donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut-legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.donut-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

/* Horizontal bar rows (workflow/account comparison, warm-up progress, funnel stages) -- a plain
   labeled track + one or more proportional fills, entirely CSS width percentages, no SVG needed. */
.bar-row { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; padding: 4px; border-radius: 6px; }
.bar-row .bar-row-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar-row-value { text-align: right; color: var(--muted); font-size: 12px; }
.bar-track { position: relative; height: 14px; background: var(--border); border-radius: 999px; overflow: hidden; display: flex; }
.bar-fill { height: 100%; }
/* Dashboard chart drill-down (Dashboard/Admin Dashboard tabs only) -- a data-click attribute means
   this element navigates somewhere on click (see dashClickAttr() in app.js and each dashboard's own
   delegated click listener). Donut segments are SVG <circle> strokes, so :hover opacity is the only
   affordance that reads well there; bar rows get the same left-border-highlight+background treatment
   `.stat.clickable` uses, for one consistent "this is clickable" visual language across the tab. */
[data-click] { cursor: pointer; }
circle[data-click] { transition: opacity 0.15s; }
circle[data-click]:hover { opacity: 0.75; }
.bar-row[data-click]:hover, .bar-fill[data-click]:hover { background: var(--pending-bg); }
.donut-legend div[data-click]:hover { color: var(--brand); }
.vbar-col[data-click]:hover { background: var(--pending-bg); border-radius: 4px; }

/* Vertical bar chart (daily trend) -- one flex column per day, two thin bars per column growing
   up from a shared baseline via align-items:flex-end, heights set inline as percentages of the
   14-day max so the chart is always scaled to its own data. */
.vbar-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.vbar-col-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.vbar-col-bars .vbar { width: 40%; max-width: 14px; border-radius: 2px 2px 0 0; min-height: 1px; }
.vbar-col-label { font-size: 10px; color: var(--muted); margin-top: 4px; white-space: nowrap; }

.progress-row { margin: 10px 0; }
.progress-row .progress-row-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.progress-row .progress-row-top .muted { color: var(--muted); }

/* Step-type icon library -- one small rounded-square badge per step "kind" (soft pastel
   background + a matching line-icon color), reused everywhere a step's type is shown (the
   workflow diagram, the sequence editor). Change a color/icon here and it updates everywhere. */
.step-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; }
.step-icon svg { width: 16px; height: 16px; }
.step-icon-sm { width: 20px; height: 20px; border-radius: 6px; }
.step-icon-sm svg { width: 12px; height: 12px; }
.step-icon-email { background: var(--step-email-bg); color: var(--step-email-fg); }
.step-icon-wait { background: var(--step-wait-bg); color: var(--step-wait-fg); }
.step-icon-task { background: var(--step-task-bg); color: var(--step-task-fg); }
.step-icon-linkedin { background: var(--step-linkedin-bg); color: var(--step-linkedin-fg); }

.workflow-diagram { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding: 8px 0 16px; }
.wf-node { background: var(--pending-bg); border: 1px solid var(--pending-border); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--pending-text); white-space: nowrap; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wf-node-step { cursor: help; } /* hints that hovering a step node (unlike the trigger node) reveals its subject/title in a tooltip */
.wf-arrow { color: var(--muted); font-size: 13px; white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wf-arrow-main { display: flex; align-items: center; gap: 4px; }
.wf-wait { background: var(--card); border: 1px dashed var(--border); border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--muted); }
.wf-stats { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; }

.email-block { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.email-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.email-block-head strong { font-size: 14px; }

.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--toast-bg); color: var(--toast-text);
  padding: 12px 18px; border-radius: 8px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; max-width: 360px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--err-solid); }
.toast.success { background: var(--ok-solid); }

.steps-list { padding-left: 18px; }
.steps-list li { margin-bottom: 8px; font-size: 13.5px; }

/* One shared flat, underlined tab family (requested directly, matching a reference screenshot of
   a CRM-style tab bar) -- used everywhere this app has a tab or sub-tab switcher, replacing what
   used to be a rounded-pill look for .provider-tabs/.subtab-nav (Gmail/Outlook/Zoho/Other, the
   Contacts tab's Upload/Add-manually toggle, Admin's tabs, this editor's own Receive-in-Inbox/
   Outbox choice) so every tab group in the app reads as the same visual language, not a mix of
   pill buttons in some places and underlined tabs in others. .wizard-tabs (the Email Account
   editor's own 4 OUTER tabs, a step-by-step sequence) shares this exact same look but slightly
   larger/bolder, plus a numbered badge -- since it's the primary/outer level of navigation, one
   step up from every .provider-tabs/.subtab-nav here, which are all secondary/nested choices. */
.provider-tabs, .subtab-nav, .wizard-tabs { display: flex; margin-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.provider-tabs, .subtab-nav { gap: 20px; }
.wizard-tabs { gap: 28px; margin-bottom: 18px; }
.provider-tabs button, .subtab-nav button, .wizard-tabs button {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 10px 2px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.provider-tabs button, .subtab-nav button { font-size: 13px; }
.wizard-tabs button { font-size: 14px; }
.provider-tabs button:hover:not(.active), .subtab-nav button:hover:not(.active), .wizard-tabs button:hover:not(.active) { color: var(--text); }
.provider-tabs button.active, .subtab-nav button.active, .wizard-tabs button.active { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.wizard-tabs button.active { font-weight: 700; }
.provider-panel, .subtab-panel { display: none; }
.provider-panel.active, .subtab-panel.active { display: block; }

/* The step number -- a plain sequence indicator (do these roughly in order), NOT a progress
   tracker -- so it never tries to show "done"/"current"/"upcoming" state, just which tab is which.
   Only .wizard-tabs uses this; every .provider-tabs/.subtab-nav group shares the same flat look
   above with no number, since those are unordered/either-or choices, not a sequence to work through. */
.wizard-step-badge {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--neutral-bg); color: var(--neutral-text);
}
.wizard-tabs button.active .wizard-step-badge { background: var(--brand-solid); color: var(--brand-contrast); }

code.inline { background: var(--code-bg); color: var(--text); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; word-break: break-all; overflow-wrap: anywhere; }

/* ---------- LinkedIn To-Do (Assisted outreach) ---------- */
.li-guide-list { margin: 0; padding-left: 18px; }
.li-guide-list li { margin: 3px 0; }
.li-meter-row { margin: 8px 0; }
.li-meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 3px; }
.li-bar { height: 12px; background: var(--border); border-radius: 999px; overflow: hidden; }
.li-bar-fill { height: 100%; border-radius: 999px; background: var(--ok-solid); }
.li-bar-fill.warn { background: var(--chart-4); }
.li-bar-fill.over, .li-bar-fill.blocked { background: var(--err-solid); }
.li-item { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--card); }
.li-item textarea.li-text { width: 100%; min-height: 80px; resize: vertical; }
.li-counter { margin-top: 4px; }
.li-counter.li-over { color: var(--err); font-weight: 600; }
.li-warn { color: var(--err); font-size: 13px; margin: 6px 0 0; }
.li-status { font-size: 13px; margin: 6px 0 0; min-height: 1em; }
.li-status.warn { color: var(--warn-text); }
.li-status.over, .li-status.blocked { color: var(--err); font-weight: 600; }
.li-pace { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--pending-bg); color: var(--pending-text); font-size: 14px; }

/* LinkedIn bot (Guided and Autonomous modes) */
.li-mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.li-mode-card { display: block; border: 1px solid var(--input-border); border-radius: 10px; padding: 10px 12px; background: var(--card); cursor: pointer; }
.li-mode-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); }
.li-mode-card input { margin-right: 6px; }
.li-mode-card .muted { display: block; margin-top: 4px; font-size: 13px; }
.li-ack { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--err); border-radius: 10px; background: var(--card); }
.li-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 6px 0; }
.li-check input { margin-top: 3px; }

/* Tasks tab: LinkedIn budget strip and the card shown inside a task row */
.li-strip { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.task-linkedin-detail .li-item { margin: 4px 0; }

/* The LinkedIn Connection Agreement: a long text the person scrolls to the end of before they can accept. */
.li-agree-box { max-height: 340px; overflow-y: auto; margin: 10px 0 6px; padding: 14px 16px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--card); line-height: 1.5; font-size: 0.95em; }
.li-agree-box h4 { margin: 14px 0 4px; }
.li-agree-box h4:first-child { margin-top: 0; }
.li-agree-box p { margin: 6px 0; }
.li-agree-hint { font-size: 0.9em; margin: 0 0 6px; }
.li-agree-hint.done { color: var(--ok); }

/* The Workflows table's % Complete column. */
.wf-progress { display: flex; flex-direction: column; gap: 2px; min-width: 96px; }
.wf-progress-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.wf-progress-bar span { display: block; height: 100%; background: var(--brand-solid); }
.wf-progress.ending .wf-progress-bar span { background: var(--chart-4); }
.wf-progress.completed .wf-progress-bar span { background: var(--ok-solid); }
.wf-progress .muted { font-size: 0.82em; }

/* The setup checklist and the plain "what is next" line on the LinkedIn bot panel. */
.li-progress { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.li-progress li { color: var(--muted); font-size: 0.92em; }
.li-progress li.done { color: var(--ok); }
.li-progress li.next { color: var(--text); font-weight: 600; }
.li-progress-mark { display: inline-block; width: 1.2em; }
.li-next-text { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--brand); background: var(--card); }

/* ---- Site footer (app, login and public pages), Support tab, public legal pages ---- */
footer.foot { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 16px 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
footer.foot a { color: var(--muted); }
footer.foot a:hover, footer.foot a:focus-visible { color: var(--brand); }

.nav-count { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--err-solid); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.nav-count[hidden] { display: none; }

.ticket-form { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.ticket-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.ticket-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.ticket-row:first-child { border-top: 0; }
.ticket-title { font-weight: 600; margin-bottom: 4px; }
.badge.ticket-open { background: var(--pending-bg); color: var(--pending-text); }
.badge.ticket-in_progress { background: var(--warn-bg); color: var(--warn); }
.badge.ticket-awaiting_user { background: var(--warn-bg); color: var(--warn); }
.badge.ticket-resolved { background: var(--ok-bg); color: var(--ok); }
.badge.ticket-closed { background: var(--neutral-bg); color: var(--neutral-text); }
.ticket-thread { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ticket-msg { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.ticket-msg.admin { border-left: 3px solid var(--brand); }
.ticket-msg.system { font-size: 13px; color: var(--muted); background: transparent; border-style: dashed; }
.ticket-who { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ticket-body { white-space: pre-wrap; overflow-wrap: anywhere; }

body.site-doc { min-height: 100vh; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--card); color: var(--text); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.doc-wrap { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 22px 0 8px; border-bottom: 1px solid var(--border); }
.doc-logo { font-size: 20px; font-weight: 700; color: var(--text); text-decoration: none; }
.doc-top nav { display: flex; gap: 16px; }
.doc-top nav a { color: var(--brand-dark); }
main.doc { max-width: none; padding: 20px 0 8px; line-height: 1.6; }
main.doc h1 { margin: 8px 0 4px; }
main.doc h2 { margin: 26px 0 6px; font-size: 18px; }
main.doc ul { padding-left: 22px; }
main.doc li { margin: 4px 0; }
main.doc a { color: var(--brand-dark); }
main.doc .step { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; background: var(--card); }
main.doc code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }

/* ---- Candidates tab ---- */
.table-wrap { overflow-x: auto; }
.stat.clickable[data-cstatus] { cursor: pointer; }
.cand-search { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-items: end; }
.cand-search label, .cand-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.cand-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.cand-block { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cand-sub { border: 1px dashed var(--border); border-radius: 8px; padding: 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.cand-sub.grid-3 { display: grid; grid-template-columns: 2fr 2fr 1fr auto; align-items: end; }
.cand-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text); font-size: 12px; margin: 1px 3px 1px 0; }
.cand-chip.matched { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.cand-chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.cand-checks { display: flex; flex-direction: column; gap: 6px; }
.cand-checks label { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.cand-notes { border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 12px; margin: 12px 0 0; }
.cand-notes ul { margin: 4px 0 0; padding-left: 20px; }
.cand-results { list-style: none; padding: 0; margin: 10px 0 0; }
.cand-results li { border-left: 4px solid var(--border); padding: 6px 10px; margin: 6px 0; background: var(--bg); border-radius: 0 6px 6px 0; }
.cand-results li.ok { border-left-color: var(--ok); }
.cand-results li.warn { border-left-color: var(--warn); }
.cand-results li.bad { border-left-color: var(--err); }
.cand-timeline { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.cand-act { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--bg); }
.cand-act-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }
.badge.cand-available { background: var(--ok-bg); color: var(--ok); }
.badge.cand-submitted, .badge.cand-interviewing { background: var(--pending-bg); color: var(--pending-text); }
.badge.cand-placed { background: var(--ok-bg); color: var(--ok); }
.badge.cand-on_hold { background: var(--warn-bg); color: var(--warn); }
.badge.cand-not_available { background: var(--neutral-bg); color: var(--neutral-text); }
.badge.cand-rejected, .badge.cand-k-rejection, .badge.cand-k-flag { background: var(--err-bg); color: var(--err); }
.badge.cand-no_show { background: var(--warn-bg); color: var(--warn); }
.cand-flag-banner { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--err); background: var(--err-bg); color: var(--err); }
.cand-flag-banner.proxy { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.cand-flag-banner button.btn.ghost, .cand-flag-banner button.btn { color: var(--text); margin-top: 6px; } /* a button inside the coloured banner keeps normal text contrast in both themes */
.cand-flag-note { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); }
.flag-badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--err-bg); color: var(--err); }
.badge.cand-tagged, .badge.cand-p-tagged, .badge.cand-p-submitted, .badge.cand-p-interviewing, .badge.cand-p-selected { background: var(--pending-bg); color: var(--pending-text); }
.badge.cand-p-active, .badge.cand-p-completed { background: var(--ok-bg); color: var(--ok); }
.badge.cand-p-dropped { background: var(--neutral-bg); color: var(--neutral-text); }
.badge.cand-k-note, .badge.cand-k-call, .badge.cand-k-email, .badge.cand-k-interview { background: var(--pending-bg); color: var(--pending-text); }
.badge.cand-k-status, .badge.cand-k-cv, .badge.cand-k-project, .badge.cand-k-system, .badge.cand-k-document { background: var(--neutral-bg); color: var(--neutral-text); }
.bar-row.wide { grid-template-columns: minmax(120px, 220px) 1fr 100px; }
@media (max-width: 640px) { .cand-sub.grid-3 { grid-template-columns: 1fr; } }

/* ---- CV templates ---- */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.tpl-card { display: flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.tpl-card.is-default { border-color: var(--brand); }
.tpl-swatch { width: 10px; flex: none; }
.tpl-card-body { padding: 10px 12px; min-width: 0; }
.tpl-asset { display: grid; grid-template-columns: 120px 150px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); }
.tpl-asset:first-child { border-top: 0; }
.tpl-asset-thumb img { max-width: 150px; max-height: 60px; border: 1px solid var(--border); border-radius: 4px; background: #ffffff; }
.cand-inline-check { flex-direction: row !important; align-items: center; font-weight: 400 !important; }
@media (max-width: 640px) { .tpl-asset { grid-template-columns: 1fr; } }

/* ---- CTC / ECTC with a small currency dropdown beside each amount ---- */
.cand-form .cand-ctc, .cand-ctc { display: flex; gap: 8px; align-items: flex-end; }
.cand-ctc > label:first-child { flex: 1; min-width: 0; }
.cand-ccy { flex: none; width: 4.6rem; font-size: 11px; }
.cand-ccy select { padding-left: 6px; padding-right: 4px; }

/* ---- benefits quick-add ---- */
.cand-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.cand-suggest-btn { border: 1px dashed var(--input-border); background: transparent; color: var(--text); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.cand-suggest-btn:hover, .cand-suggest-btn:focus-visible { background: var(--brand-tint); border-color: var(--brand); }

/* ---- candidates, round 3: bulk bar, steps, checklist, compare, formats ---- */
.cand-nav-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.cand-bulkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid var(--brand); background: var(--brand-tint); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.cand-bulkbar select { width: auto; max-width: 200px; }
.cand-bulkbar .cand-bulk-count { font-weight: 700; }
.cand-checklist { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cand-checklist li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cand-checklist .cand-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--input-border); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.cand-checklist li.done .cand-check { background: var(--ok-solid); border-color: var(--ok-solid); color: var(--brand-contrast); }
.cand-checklist li.done .cand-check-text { text-decoration: line-through; opacity: 0.7; }
.cand-reject-banner { border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 12px; margin: 12px 0 0; overflow-wrap: anywhere; }
.cand-reject-banner.earlier { border-color: var(--border); background: var(--bg); color: var(--text); }
.cand-reject-box { border-color: var(--warn); }
.cand-steps { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 14px; }
.cand-step { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cand-step-head { display: flex; align-items: center; gap: 8px; }
.cand-preview { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--bg); max-width: 760px; }
.cand-preview-frame { display: block; width: 100%; height: 720px; border: 1px solid var(--border); background: #ffffff; }
.cand-preview img { display: block; max-width: 100%; height: auto; background: #ffffff; border: 1px solid var(--border); }
.cand-hint summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-top: 6px; }
table.cand-compare td, table.cand-compare th { vertical-align: top; }
table.cand-compare .cmp-list { margin: 0; padding-left: 16px; }
table.cand-compare tr.cmp-same td { color: var(--muted); }
table.cand-compare .cmp-choices { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
table.cand-compare .cmp-choices label { display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.cand-pending-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.cand-bulk-zip { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tpl-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.tpl-start { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.tpl-start h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.tpl-review { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 16px; margin-top: 8px; align-items: start; }
.tpl-review-side { display: flex; flex-direction: column; gap: 12px; }
.tpl-live { border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: var(--bg); min-height: 120px; }
.tpl-live img { display: block; width: 100%; height: auto; background: #ffffff; }
.tpl-learned-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; align-items: end; }
.tpl-badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--neutral-bg); color: var(--neutral-text); margin-right: 4px; }
details.card > summary { cursor: pointer; }
@media (max-width: 760px) { .tpl-review { grid-template-columns: 1fr; } }

/* ---- projects: dashboard, funnel, project list, pipeline stepper ---- */
.proj-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.proj-two > .card { margin-bottom: 0; min-width: 0; }
.stat.proj-kpi { cursor: pointer; }
.stat.proj-kpi .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.proj-attn { display: flex; flex-wrap: wrap; gap: 10px; }
.proj-attn button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; text-align: left; font: inherit; min-width: 150px; }
.proj-attn button:hover, .proj-attn button:focus-visible { border-color: var(--brand); }
.proj-attn button .num { display: block; font-size: 22px; font-weight: 700; }
.proj-attn button.warn { border-color: var(--warn); background: var(--warn-bg); }
.proj-funnel { display: flex; flex-direction: column; gap: 14px; }
.proj-frow { display: grid; grid-template-columns: 170px 1fr 150px; gap: 12px; align-items: center; }
.proj-frow .label { font-weight: 600; }
.proj-frow .label small { display: block; font-weight: 400; color: var(--muted); }
.proj-fbar { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: var(--neutral-bg); border: 1px solid var(--border); }
.proj-fbar .seg { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #ffffff; min-width: 0; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.proj-fbar .seg:hover, .proj-fbar .seg:focus-visible { filter: brightness(1.12); outline: 2px solid var(--brand); outline-offset: -2px; }
.proj-fbar .seg.pos { background: var(--ok-solid); }
.proj-fbar .seg.neg { background: var(--err-solid); }
.proj-fbar .seg.wait { background: #b7791f; }
.proj-fbar .seg.flow { background: var(--brand-solid); }
.proj-fbar .seg.dim { background: #6b7280; }
.proj-frow .side { font-size: 12px; color: var(--muted); }
.proj-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.proj-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.proj-legend i.pos { background: var(--ok-solid); } .proj-legend i.neg { background: var(--err-solid); } .proj-legend i.wait { background: #b7791f; } .proj-legend i.flow { background: var(--brand-solid); } .proj-legend i.dim { background: #6b7280; }
table.proj-matrix td, table.proj-matrix th { text-align: center; }
table.proj-matrix td:first-child, table.proj-matrix th:first-child { text-align: left; }
table.proj-matrix tr.proj-sub th { font-size: 11px; font-weight: 600; color: var(--muted); }
table.proj-matrix .num-link { cursor: pointer; color: var(--brand); font-weight: 700; background: transparent; border: 0; font: inherit; padding: 0 4px; }
table.proj-matrix .num-link:hover { text-decoration: underline; }
.proj-weekly { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 6px; }
.proj-weekly .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; }
.proj-weekly .bar { width: 100%; background: var(--brand-solid); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.proj-weekly .bar.second { background: var(--ok-solid); width: 40%; position: absolute; bottom: 0; left: 30%; border-radius: 3px 3px 0 0; }
.proj-weekly .lbl { font-size: 10px; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.proj-weekly .val { font-size: 11px; font-weight: 700; }
.proj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.proj-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.proj-card .code { font-weight: 700; color: var(--brand); }
.proj-card .pos-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.badge.proj-active { background: var(--ok-bg); color: var(--ok); }
.badge.proj-on_hold { background: var(--warn-bg); color: var(--warn); }
.badge.proj-closed { background: var(--neutral-bg); color: var(--neutral-text); }
.pos-card { border: 1px dashed var(--border); border-radius: 8px; padding: 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.pos-card.saved { border-style: solid; }
.brief-grid { display: grid; grid-template-columns: 160px 1fr; gap: 4px 12px; margin: 8px 0; }
.brief-grid dt { font-weight: 600; color: var(--muted); }
.brief-grid dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.pipe-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 10px 0; }
button.pipe-step { font: inherit; text-align: left; cursor: pointer; color: inherit; width: 100%; }
button.pipe-step:hover { box-shadow: 0 0 0 2px var(--brand-glow); }
.pipe-card { margin-bottom: 12px; }
.pipe-step { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--bg); font-size: 13px; min-width: 0; }
.pipe-step .name { font-weight: 700; display: block; }
.pipe-step .state { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 700; }
.pipe-step.pos { border-color: var(--ok); } .pipe-step.pos .state { color: var(--ok); }
.pipe-step.neg { border-color: var(--err); } .pipe-step.neg .state { color: var(--err); }
.pipe-step.now { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-glow); } .pipe-step.now .state { color: var(--brand); }
.pipe-step.off { opacity: 0.55; }
.pipe-step .meta { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; }
.pipe-step .notes { display: block; margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pipe-next { border: 1px solid var(--brand); background: var(--brand-tint); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pipe-tag { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pipe-tag .code { font-weight: 700; color: var(--brand); }
.cand-sum { overflow-x: auto; }
.cand-sum table { width: 100%; max-width: 720px; border-collapse: collapse; }
.cand-sum td { border: 1px solid var(--border); padding: 5px 8px; vertical-align: top; overflow-wrap: anywhere; }
.cand-sum td.empty { background: var(--warn-bg); }
.team-invite-link { display: block; width: 100%; margin: 6px 0; }
@media (max-width: 1100px) { .pipe-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .proj-frow { grid-template-columns: 1fr; } .pipe-steps { grid-template-columns: 1fr 1fr; } .brief-grid { grid-template-columns: 1fr; } }
/* a sourcing team member does not get these */
/* data-owner-only: management only. data-head-ok on top of it: management and the sourcing Head. data-approver-only: not for a teammate. */
/* a BU head (body.role-bu) has management's authority over hiring, so none of this hides from them; data-no-bu hides what belongs to the account owner only */
body.role-sourcing:not(.role-bu) #candTemplatesTab, body.role-sourcing:not(.role-bu) #candPlacementsTabBtn { display: none !important; }
body.role-sourcing:not(.role-head):not(.role-bu) #candDeleteBtn, body.role-sourcing:not(.role-head):not(.role-bu) [data-ctabopen="cv"] { display: none !important; }
body.role-sourcing:not(.role-bu) [data-owner-only]:not([data-head-ok]) { display: none !important; }
body.role-sourcing:not(.role-head):not(.role-bu) [data-owner-only][data-head-ok], body.role-sourcing:not(.role-head):not(.role-bu) [data-approver-only] { display: none !important; }
body.role-head [data-sourcing-only], body.role-bu [data-sourcing-only] { display: none !important; }
body.role-bu [data-no-bu] { display: none !important; }
@media (max-width: 760px) { .proj-weekly .col:not(:nth-child(3n)) .lbl { visibility: hidden; } }
.pos-card label { display: flex; flex-direction: column; gap: 4px; }
.team-creds { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; user-select: all; }

/* a saved position is one compact row; the form opens when it is clicked */
.pos-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin: 6px 0; background: var(--card); }
.pos-row:hover { border-color: var(--brand); }
.pos-row-main { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; text-align: left; background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 6px 0; }
.pos-row-main .chev { color: var(--brand); width: 12px; }
.pos-row-bits { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.pos-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* rate card, project commercials, budget lights (see COMMERCIALS_DESIGN.md) */
[data-sourcing-only] { display: none; }
body.role-sourcing:not(.role-head):not(.role-bu) [data-sourcing-only] { display: block !important; }
.comm-light { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.comm-light::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #6b7280; display: inline-block; }
.comm-light.green::before { background: var(--ok-solid); }
.comm-light.amber::before { background: #b7791f; }
.comm-light.red::before { background: var(--err-solid); }
.comm-light.gray::before { background: #6b7280; }
.comm-light.green { color: var(--ok); } .comm-light.amber { color: #b7791f; } .comm-light.red { color: var(--err); } .comm-light.gray { color: var(--muted); }
.comm-panel { border: 1px solid var(--border); border-left-width: 5px; border-radius: 10px; padding: 10px 12px; margin: 10px 0; background: var(--card); display: flex; flex-direction: column; gap: 6px; }
.comm-panel.green { border-left-color: var(--ok-solid); } .comm-panel.amber { border-left-color: #b7791f; } .comm-panel.red { border-left-color: var(--err-solid); } .comm-panel.gray { border-left-color: #6b7280; }
.comm-panel .comm-nums { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.comm-panel .comm-nums b { font-weight: 700; }
.comm-note { font-size: 12px; color: var(--muted); }
button.comm-num { background: transparent; border: 0; padding: 0; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline dotted; cursor: pointer; }
.comm-steps { width: 100%; border-collapse: collapse; }
.comm-steps td, .comm-steps th { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.comm-steps td.v { white-space: nowrap; font-weight: 700; text-align: right; }
.comm-steps tr.total td { background: var(--brand-tint); }
.rc-section { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 12px 0; }
.rc-grid-wrap { overflow-x: auto; }
.rc-grid { border-collapse: collapse; min-width: 760px; width: 100%; }
.rc-grid th, .rc-grid td { border: 1px solid var(--border); padding: 6px; vertical-align: middle; }
.rc-grid input[type="number"] { width: 64px; }
.rc-grid input.rc-role-name { width: 100%; min-width: 170px; }
.rc-grid input.rc-band-label { width: 84px; }
.rc-cell { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rc-cell.na input[type="number"] { opacity: 0.35; }
.rc-fx-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; flex-wrap: wrap; }
.rc-fx-row input[type="text"] { width: 70px; text-transform: uppercase; } .rc-fx-row input[type="number"] { width: 110px; }
.rc-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.rc-tabs button.active { background: var(--brand-tint); border-color: var(--brand); }
.sub-fields { width: 100%; border-collapse: collapse; }
.sub-fields td, .sub-fields th { border: 1px solid var(--border); padding: 5px 8px; vertical-align: middle; text-align: left; }
.sub-fields input[type="text"] { width: 100%; min-width: 160px; }
.sub-fields tr.off td { opacity: 0.55; }
.cand-extras { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.cand-extras label { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; max-width: 520px; }
.budget-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.budget-line .amount { font-weight: 700; }

/* the sourcing team: who works on what, and the assignment chips (HIRING_V2_DESIGN.md) */
.asg-member { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--card); }
.asg-member.off { opacity: 0.6; }
.asg-load { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0; font-size: 13px; color: var(--muted); }
.asg-load b { color: var(--text); }
.asg-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.asg-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; background: var(--bg); }
.asg-chip.held { border-color: var(--warn); background: var(--warn-bg); }
.asg-x { border: 0; background: transparent; color: var(--brand); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 2px 6px; border-radius: 6px; }
.asg-x:hover { background: var(--brand-tint); }
.asg-list { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--card); }
.asg-group { margin-bottom: 10px; }
.asg-check { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-weight: 400; }
.role-note { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--brand); background: var(--brand-tint); }
.role-note strong { display: block; margin-bottom: 2px; }
.role-note p { margin: 0; }

/* team performance on the projects dashboard */
.srch-person { padding: 8px 0; border-bottom: 1px solid var(--border); }
.srch-person:last-child { border-bottom: 0; }
.srch-bar { display: grid; grid-template-columns: 130px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; margin-top: 3px; }
.srch-label { color: var(--muted); }
.srch-track { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.srch-track i { display: block; height: 100%; border-radius: 99px; background: var(--brand-solid); }
.srch-track i.pos { background: var(--ok-solid); }
.srch-n { text-align: right; font-weight: 700; }
.cand-chip.held { border-color: var(--warn); background: var(--warn-bg); }
.cand-chip .unassigned { color: var(--warn); }