/* ============================================================
   ProjectTelemetry — VMB Module Styles
   assets/vmb.css
   ============================================================ */

/* Touch drag (assets/touch-dnd.js): on a press-hold the shim owns the
   gesture, so suppress the iOS text-selection / callout magnifier on the
   draggable cards. Non-touch behaviour is unchanged. */
.vmb-tree-row[draggable], .vmb-player-card[draggable] {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}

/* ── Layout ──────────────────────────────────────────────── */
.vmb-wrap { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.vmb-header { display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--bg2); border-bottom:1px solid var(--bd); flex-shrink:0; flex-wrap:wrap; }
.vmb-tabs  { display:flex; gap:2px; }
.vmb-tab-btn { padding:6px 14px; font-size:12px; font-weight:600; border:1.5px solid var(--bd); border-radius:5px; background:var(--bg); color:var(--ink-soft); cursor:pointer; font-family:Raleway,sans-serif; display:flex; align-items:center; gap:5px; }
.vmb-tab-btn.on { background:var(--ink); color:var(--white); border-color:var(--ink); }
.vmb-tab-btn:hover:not(.on) { background:var(--bg2); color:var(--ink); }
.vmb-header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.vmb-search { padding:6px 10px; border:1.5px solid var(--bd); border-radius:5px; font-size:12px; font-family:Raleway,sans-serif; background:var(--bg); color:var(--ink); width:180px; }
.vmb-filter-sel { padding:6px 8px; border:1.5px solid var(--bd); border-radius:5px; font-size:11px; font-family:Raleway,sans-serif; background:var(--bg); color:var(--ink); cursor:pointer; }
.vmb-body  { flex:1; overflow-y:auto; padding:14px; }
.vmb-loading { display:flex; align-items:center; justify-content:center; padding:60px 0; color:var(--ink-faint); }
.vmb-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; text-align:center; color:var(--ink-faint); gap:10px; }
.vmb-empty i { font-size:36px; opacity:.4; }
.vmb-empty p { font-size:13px; line-height:1.5; }

/* ── Roster grid ─────────────────────────────────────────── */
.vmb-roster-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:10px; }

/* ── Player card ─────────────────────────────────────────── */
.vmb-player-card { background:var(--white); border:1px solid var(--bd); border-radius:var(--radius); padding:12px; cursor:default; transition:box-shadow .15s, border-color .15s; }
.vmb-player-card:hover { box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.08)); border-color:var(--accent); }
.vmb-player-card.selected { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-bg); }
.vmb-player-card.vmb-compact { padding:8px 10px; }
.vmb-player-card.vmb-dragging { opacity:.5; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.vmb-card-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:8px; }
.vmb-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; font-family:Raleway,sans-serif; }
.vmb-compact .vmb-avatar { width:28px; height:28px; font-size:11px; }
.vmb-card-info { flex:1; min-width:0; }
.vmb-card-name { font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmb-compact .vmb-card-name { font-size:12px; }
.vmb-card-meta { display:flex; align-items:center; gap:5px; margin-top:3px; flex-wrap:wrap; }
.vmb-cls-badge { font-size:9px; font-weight:800; background:var(--accent-bg); color:var(--accent); padding:1px 5px; border-radius:3px; letter-spacing:.04em; }
.vmb-trade { font-size:10px; color:var(--ink-faint); }
.vmb-card-indicators { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.vmb-cert-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.vmb-cert-dot.green  { background:#22C55E; }
.vmb-cert-dot.yellow { background:#EAB308; }
.vmb-cert-dot.red    { background:#EF4444; }
.vmb-card-project { font-size:10px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; margin-bottom:8px; border-top:1px solid var(--bd); padding-top:7px; }
.vmb-card-project.unassigned { color:var(--ink-faint); font-style:italic; }
.vmb-card-actions { display:flex; gap:5px; flex-wrap:wrap; }

/* ── Small buttons ───────────────────────────────────────── */
.vmb-btn-sm { padding:3px 9px; font-size:10px; font-weight:600; border:1.5px solid var(--bd); border-radius:4px; background:var(--bg); color:var(--ink-soft); cursor:pointer; font-family:Raleway,sans-serif; display:inline-flex; align-items:center; gap:3px; }
.vmb-btn-sm:hover { background:var(--bg2); color:var(--ink); }
.vmb-btn-sm.vmb-btn-accent { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.vmb-btn-sm.vmb-btn-accent:hover { background:var(--accent); color:#fff; }
.vmb-btn-sm.vmb-btn-danger { border-color:#FCA5A5; color:#DC2626; background:#FEF2F2; }
.vmb-btn-sm.vmb-btn-danger:hover { background:#DC2626; color:#fff; }

/* ── Seat / access pills (promote-to-seat) ───────────────── */
.vmb-seat-pill { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.vmb-seat-active  { background:#DCFCE7; color:#065F46; }
.vmb-seat-pending { background:#FEF3C7; color:#92400E; }
.vmb-seat-revoked { background:#FEE2E2; color:#991B1B; }
.vmb-seat-none    { background:var(--bg2); color:var(--ink-soft); }

/* At-a-glance seat/login chip on employee cards */
.vmb-seat-chip { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; line-height:1.4; }
.vmb-seat-chip i { font-size:11px; }
.vmb-seat-chip.on  { background:#DCFCE7; color:#065F46; }
.vmb-seat-chip.mid { background:#FEF3C7; color:#92400E; }
.vmb-seat-chip.off { background:var(--bg2); color:var(--ink-faint); font-weight:600; }

/* ── Board ───────────────────────────────────────────────── */
.vmb-board-wrap { display:flex; gap:10px; overflow-x:auto; padding-bottom:12px; min-height:400px; align-items:flex-start; }
.vmb-board-col { flex-shrink:0; width:240px; background:var(--bg); border:1px solid var(--bd); border-radius:8px; overflow:hidden; }
.vmb-pool-col { border-color:var(--accent); background:var(--accent-bg); }
.vmb-board-col-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--bd); background:var(--bg2); }
.vmb-board-col-title { flex:1; min-width:0; font-size:11px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmb-board-badge { background:var(--ink); color:var(--white); font-size:9px; font-weight:700; padding:1px 6px; border-radius:20px; flex-shrink:0; }
.vmb-board-add { flex-shrink:0; width:24px; height:24px; padding:0; border:1px solid var(--bd); background:var(--white); color:var(--accent); border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.vmb-board-add:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
/* In-zone "Add employee (search)" button — sits right in the drag-drop column. */
.vmb-board-addrow { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:8px; border:1px dashed var(--accent); background:var(--accent-bg); color:var(--accent); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
.vmb-board-addrow:hover { background:var(--accent); color:#fff; }
.vmb-board-addrow i { font-size:15px; }
.vmb-board-cards { padding:8px; display:flex; flex-direction:column; gap:6px; min-height:120px; }
.vmb-board-cards.vmb-drop-active { background:var(--accent-bg); }
.vmb-drop-hint { font-size:10px; color:var(--ink-faint); text-align:center; padding:12px 6px; border:2px dashed var(--bd); border-radius:5px; display:flex; align-items:center; justify-content:center; gap:4px; }
.vmb-board-cards.vmb-drop-active .vmb-drop-hint { border-color:var(--accent); color:var(--accent); }

/* ── Certifications dashboard ────────────────────────────── */
.vmb-cert-section { margin-bottom:20px; }
.vmb-cert-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px; }
.vmb-cert-table { width:100%; border-collapse:collapse; font-size:12px; }
.vmb-cert-table th { text-align:left; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); padding:6px 10px; border-bottom:2px solid var(--bd); }
.vmb-cert-table td { padding:8px 10px; border-bottom:1px solid var(--bd); vertical-align:top; }
.vmb-cert-table tr:hover td { background:var(--bg); }
.vmb-expired-row td { background:#FEF2F2; }

/* ── Project team view ───────────────────────────────────── */
.vmb-project-team { padding:4px; }
.vmb-team-actions { display:flex; align-items:center; gap:var(--ctl-gap,8px); flex-wrap:wrap; margin-bottom:14px; }
.vmb-composition { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.vmb-comp-item { display:flex; align-items:baseline; gap:4px; background:var(--bg2); border:1px solid var(--bd); border-radius:5px; padding:4px 10px; }
.vmb-comp-num { font-size:16px; font-weight:700; color:var(--ink); font-family:JetBrains Mono,monospace; }
.vmb-comp-lbl { font-size:10px; color:var(--ink-soft); }

/* ── Employee profile modal ──────────────────────────────── */
/* Width lives here, not inline on the element.
 *
 * It previously carried style="max-width:680px", which did not just violate
 * the no-inline-geometry rule -- it made the modal NARROWER than the design
 * system's own cap (design-system.css allows .cp-modal min(96vw,720px)), and
 * inline wins over a stylesheet. So the profile was squeezed 40px below the
 * standard default, which is what pushed the certification table's
 * "Importance" / "Status" columns onto two lines.
 *
 * Two classes deliberately: design-system.css loads LAST and unlayered, so a
 * single-class .vmb-emp-modal would tie on specificity and LOSE to .cp-modal.
 * Written vmb-first so it does not read as a module redeclaring a primitive
 * (tools/check-ui.sh matches a line STARTING with .cp-modal).
 *
 * min(,96vw) keeps it inside a phone viewport, matching how design-system.css
 * caps every modal. */
.vmb-emp-modal.cp-modal { width: min(820px, 96vw); max-width: min(820px, 96vw); }

/* Columns that must never wrap. The cert table's headers are uppercase with
 * letter-spacing, so "IMPORTANCE" is far wider than it reads, and values like
 * "Informational" break onto a second line the moment the table is squeezed.
 * Applied per-cell rather than to the table, because the Certification column
 * holds long names + issuing body and genuinely needs to wrap. */
.vmb-cert-table .vmb-cert-nw { white-space: nowrap; }

/* ── Cert review: the chrome indicator ──────────────────── */
/* Sits in .vmb-header-actions on every tab. The button itself is the shared
 * .btn-ghost .btn-sm primitive — this adds no geometry to it, only the count
 * pill it carries. */
.vmb-pc-btn { position: relative; }
.vmb-pc-count {
  display: inline-block; margin-left: 6px; min-width: 17px;
  padding: 1px 5px; border-radius: 9px;
  background: var(--bd); color: var(--ink-soft);
  font-size: 10px; font-weight: 700; line-height: 1.5; text-align: center;
}
/* Something is actually waiting. --warn is defined once in :root and is not
 * redefined for the dark theme, so it reads on both surfaces. */
.vmb-pc-count.on { background: var(--warn); color: #fff; }

/* ── Cert review queue ──────────────────────────────────── */
/* Wider than a confirm dialog: each row carries a name, a cert, a date and
 * three controls. Two classes for the same specificity reason as
 * .vmb-emp-modal -- design-system.css loads last and would win a tie. */
.vmb-pcq-modal.cp-modal { width: min(760px, 96vw); max-width: min(760px, 96vw); }
.vmb-pcq-reason-modal.cp-modal { width: min(460px, 96vw); max-width: min(460px, 96vw); }
.vmb-pcq-n { font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-left: 6px; }

.vmb-pcq-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--bd);
}
.vmb-pcq-all { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.vmb-pcq-selN { font-size: 11px; font-weight: 700; color: var(--accent); }
.vmb-pcq-spacer { flex: 1 1 auto; }

.vmb-pcq-list { display: flex; flex-direction: column; gap: 6px; }
/* The row is a <label> so clicking anywhere on it toggles the checkbox; the
 * per-row buttons stop propagation (see data-pcq-stop in vmb.js). */
.vmb-pcq-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); cursor: pointer;
  background: var(--bg2); border: 1px solid var(--bd); border-radius: 7px;
}
.vmb-pcq-row:hover { border-color: var(--accent); }
.vmb-pcq-row.sel { background: var(--accent-bg); border-color: var(--accent); }
.vmb-pcq-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.vmb-pcq-who { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vmb-pcq-trade { font-size: 10px; font-weight: 400; color: var(--ink-faint); }
.vmb-pcq-what { font-size: 11px; color: var(--ink-soft); }

/* ── Cert Alerts: the count, and its focused modal ───────── */
/* The List tab's count, as a button. Looks like the old bold number it
 * replaces (so nothing moves) but reads as pressable. Geometry stays minimal
 * on purpose — this sits inside a dense table row, not a toolbar. */
.vmb-ca-btn {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--warn);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
}
.vmb-ca-btn:hover { color: var(--danger); }
.vmb-ca-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Narrower than the profile modal: this is one short list, not a record. The
 * two-class form is required for the same reason as .vmb-emp-modal above --
 * design-system.css loads last and would otherwise win the tie. */
.vmb-ca-modal.cp-modal { width: min(560px, 96vw); max-width: min(560px, 96vw); }

.vmb-ca-sec { margin-bottom: var(--sp-4); }
.vmb-ca-sec:last-child { margin-bottom: 0; }
.vmb-ca-sec-t {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-faint); margin-bottom: var(--sp-2);
}
/* Says out loud why this section's items are not in the badge's number. */
.vmb-ca-sec-n { font-weight: 400; text-transform: none; letter-spacing: 0; }

.vmb-ca-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: 6px;
  background: var(--bg2); border: 1px solid var(--bd); border-radius: 7px;
}
.vmb-ca-row:last-child { margin-bottom: 0; }
.vmb-ca-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.vmb-ca-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.vmb-ca-meta { font-size: 11px; color: var(--ink-soft); }

/* Severity as TEXT colour on a token surface, not a pale hardcoded fill.
 * --danger / --warn / --pos are defined once in :root and are not redefined
 * for the dark theme, so they stay legible on both backgrounds -- which the
 * older #FEE2E2-style badges in this module do not. */
.vmb-ca-sev { font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.vmb-ca-exp  { color: var(--danger); }
.vmb-ca-soon { color: var(--warn); }
.vmb-ca-ok   { color: var(--ink-soft); }

.vmb-profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vmb-profile-field label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:3px; }
.vmb-profile-field span { font-size:13px; color:var(--ink); }
.vmb-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px; }

/* ── Hierarchy tree (org-wide and per-project) ───────────────── */
.vmb-hint-bar { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-soft); background:var(--accent-bg); border:1px solid var(--bd); border-radius:6px; padding:8px 12px; margin-bottom:12px; }
.vmb-tree-wrap { display:flex; flex-direction:column; gap:4px; }
.vmb-tree-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--white); border:1px solid var(--bd); border-radius:6px; cursor:grab; transition:background .12s, border-color .12s; position:relative; }
.vmb-tree-row:hover { border-color:var(--accent); }
.vmb-tree-row:active { cursor:grabbing; }
.vmb-tree-line { position:absolute; left:-14px; top:50%; width:12px; height:1px; background:var(--bd); }
.vmb-tree-info { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.vmb-tree-name { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; }
.vmb-tree-branch { font-size:10px; color:var(--ink-faint); display:flex; align-items:center; gap:3px; margin-left:auto; }
.vmb-tree-drop-top { margin-top:8px; padding:14px; border:2px dashed var(--bd); border-radius:6px; text-align:center; font-size:11px; color:var(--ink-faint); display:flex; align-items:center; justify-content:center; gap:6px; }

/* ── Project hierarchy + Unassigned pool rail (unified crew engine) ── */
.vmb-pt-layout { display:flex; gap:14px; align-items:flex-start; margin-top:10px; }
.vmb-pt-board { flex:1; min-width:0; display:flex; flex-direction:row; gap:12px; align-items:flex-start; }
.vmb-pt-board > .pth-stage, .vmb-pt-board > .vmb-tree-wrap { flex:1; min-width:0; }
.vmb-pt-side { flex:0 0 258px; width:258px; display:flex; flex-direction:column; gap:10px; align-self:stretch; }
.vmb-pt-pool { width:100%; background:var(--bg); border:1px solid var(--bd); border-radius:8px; display:flex; flex-direction:column; overflow:hidden; max-height:calc(100vh - 300px); }
.vmb-pt-pool.collapsed .vmb-pt-pool-body { display:none; }
.vmb-pt-pool.drop-hot { border-color:var(--accent); background:var(--accent-bg); }

/* Horizontal collapse — the rails shrink to thin strips so the graph gets the
   width back (matters on iPad). Both the Unassigned rail and the tray collapse. */
.vmb-pt-side, .vmb-pt-bench { transition:flex-basis .16s ease, width .16s ease; }
.vmb-pt-side.collapsed { flex-basis:42px; width:42px; }
.vmb-pt-side.collapsed .vmb-pt-pool { max-height:none; }
.vmb-pt-side.collapsed .vmb-pt-pool-body { display:none; }
.vmb-pt-side.collapsed .vmb-pt-pool-head { flex-direction:column; align-items:center; gap:8px; padding:9px 4px; border-bottom:none; }
.vmb-pt-side.collapsed .vmb-pt-pool-title { display:none; }
.vmb-pt-side.collapsed .vmb-pt-pool-count { margin-left:0; }
.vmb-pt-bench.collapsed { flex-basis:38px; width:38px; }
.vmb-pt-bench.collapsed .vmb-pt-bench-list { display:none; }
.vmb-pt-bench.collapsed .vmb-pt-bench-head { flex-direction:column; align-items:center; gap:8px; padding:9px 3px; border-bottom:none; }
.vmb-pt-bench.collapsed .vmb-pt-bench-label, .vmb-pt-bench.collapsed .vmb-pt-bench-ic { display:none; }
.vmb-pt-bench.collapsed .vmb-pt-bench-count { margin-left:0; }
.vmb-pt-bench-toggle { background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:2px; display:inline-flex; flex-shrink:0; }
.vmb-pt-bench-toggle:hover { color:var(--ink); }
/* Seated-user marker (a key) shown next to a name on tight surfaces. */
.vmb-seat-mark { color:var(--accent); font-size:12px; vertical-align:middle; }

/* "No supervisor" tray — small panel docked in the TOP-LEFT of the chart itself,
   so unplaced-but-assigned crew read as on-the-project. Scrolls after ~5-6 cards. */
.vmb-pt-bench { flex:0 0 196px; width:196px; align-self:flex-start; background:var(--white); border:1.5px dashed var(--bd); border-radius:8px; overflow:hidden; }
.vmb-pt-bench.drop-hot { border-color:var(--accent); border-style:solid; background:var(--accent-bg); }
.vmb-pt-bench-head { display:flex; align-items:center; gap:5px; padding:6px 9px; border-bottom:1px solid var(--bd); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); background:var(--bg); }
.vmb-pt-bench-head i { font-size:14px; color:var(--ink-faint); }
.vmb-pt-bench-count:not(:empty) { margin-left:auto; font-weight:700; color:var(--ink-faint); background:var(--white); border:1px solid var(--bd); border-radius:999px; padding:0 7px; }
.vmb-pt-bench-list { display:flex; flex-direction:column; gap:4px; padding:7px; max-height:230px; overflow-y:auto; }
.vmb-pt-bench.empty .vmb-pt-bench-list { padding:7px 9px; }
.vmb-bench-empty { font-size:10.5px; line-height:1.35; color:var(--ink-faint); }

/* "Create group" — an action button sized to match the Rows/Chart tab buttons
   (tablet-friendly tap target), accent-filled so it stands out. */
.pth-newgroup { font:inherit; font-size:12px; font-weight:600; padding:6px 13px; border:1px solid var(--accent); border-radius:8px; background:var(--accent); color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; -webkit-user-select:none; user-select:none; }
.pth-newgroup i { font-size:15px; }
.pth-newgroup:hover { filter:brightness(1.06); }
.pth-newgroup:active { transform:translateY(1px); }

/* ── Cosmetic group / label boxes (transparent — no lead) ──────── */
/* Chart view: a group is a labeled dashed container card; its members hang under it. */
/* No text-selection on any draggable card/box/chip — dragging shouldn't highlight text. */
.pth-card, .pth-group, .vmb-tree-row, .vmb-tree-grouphdr, .vmb-pool-chip { -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.pth-card.pth-group { display:flex; align-items:center; gap:6px; background:var(--bg); border:1.5px dashed var(--accent); border-radius:8px; padding:8px 10px; min-height:auto; cursor:grab; }
.pth-card.pth-group:active { cursor:grabbing; }
.vmb-tree-grouphdr { cursor:grab; }
.vmb-tree-grouphdr:active { cursor:grabbing; }
.pth-group-label { font-size:12px; font-weight:800; color:var(--ink); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pth-group-label i { color:var(--accent); }
.pth-group-count { font-size:10px; font-weight:700; color:var(--ink-faint); background:var(--white); border:1px solid var(--bd); border-radius:999px; padding:0 6px; }
.pth-group-acts { margin-left:auto; display:inline-flex; gap:2px; opacity:0; transition:opacity .12s; }
.pth-card.pth-group:hover .pth-group-acts { opacity:1; }
.pth-group-btn { background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:2px 3px; display:inline-flex; font-size:13px; }
.pth-group-btn:hover { color:var(--accent); }
.pth-node.pth-drop-hot .pth-group { border-style:solid; background:var(--accent-bg); }
/* Rows view: a group is a labeled header with its members indented beneath. */
.vmb-tree-grouphdr { display:flex; align-items:center; gap:7px; padding:6px 10px; margin-top:8px; background:var(--bg); border:1.5px dashed var(--accent); border-radius:6px; }
.vmb-tree-grouphdr.grp-drop-hot { border-style:solid; background:var(--accent-bg); }
.vmb-tree-grouphdr i { color:var(--accent); }
.vmb-tree-groupname { font-size:12px; font-weight:800; color:var(--ink); }
.vmb-tree-groupcount { font-size:10px; font-weight:700; color:var(--ink-faint); background:var(--white); border:1px solid var(--bd); border-radius:999px; padding:0 6px; }
.vmb-tree-groupacts { margin-left:auto; display:inline-flex; gap:4px; }
.vmb-tree-groupempty { font-size:11px; color:var(--ink-faint); padding:6px 10px; border:1px dashed var(--bd); border-radius:6px; margin-top:4px; }
.vmb-tree-groupempty.grp-drop-hot { border-color:var(--accent); background:var(--accent-bg); }
.vmb-pt-pool-head { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--bd); }
.vmb-pt-pool-toggle { background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:2px; display:inline-flex; }
.vmb-pt-pool-toggle:hover { color:var(--ink); }
.vmb-pt-pool-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
.vmb-pt-pool-count { margin-left:auto; font-size:11px; font-weight:700; color:var(--ink-faint); background:var(--white); border:1px solid var(--bd); border-radius:999px; padding:1px 8px; }
.vmb-pt-pool-body { display:flex; flex-direction:column; gap:8px; padding:10px; overflow:hidden; flex:1; min-height:0; }
.vmb-pt-pool-search { width:100%; padding:6px 9px; font-size:12px; border:1px solid var(--bd); border-radius:6px; background:var(--white); color:var(--ink); }
.vmb-pt-pool-search:focus { outline:none; border-color:var(--accent); }
.vmb-pt-pool-chips { display:flex; flex-wrap:wrap; gap:4px; }
.vmb-pool-tier { font-family:Raleway,sans-serif; font-size:10px; font-weight:600; line-height:1; padding:4px 7px; border-radius:999px; border:1px solid var(--bd); background:var(--white); color:var(--ink-faint); cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.vmb-pool-tier:hover { border-color:var(--ink-faint); color:var(--ink-soft); }
.vmb-pool-tier.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.vmb-pool-tier b { font-weight:800; }
.vmb-pt-pool-list { display:flex; flex-direction:column; gap:4px; overflow-y:auto; flex:1; min-height:0; }
.vmb-pool-chip { display:flex; align-items:center; gap:7px; padding:5px 7px; background:var(--white); border:1px solid var(--bd); border-radius:6px; cursor:grab; transition:border-color .12s; }
.vmb-pool-chip:hover { border-color:var(--accent); }
.vmb-pool-chip:active { cursor:grabbing; }
.vmb-pool-grip { color:var(--ink-faint); display:inline-flex; font-size:13px; }
.vmb-pool-who { display:flex; flex-direction:column; min-width:0; }
.vmb-pool-n { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmb-pool-r { font-size:10px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmb-pool-empty { padding:18px 10px; text-align:center; font-size:11px; color:var(--ink-faint); }
.pth-node.pth-drop-hot .pth-card { outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:820px) { .vmb-pt-layout { flex-direction:column; } .vmb-pt-side { width:100%; flex-basis:auto; } .vmb-pt-pool { max-height:340px; } .vmb-pt-board { flex-direction:column; } .vmb-pt-bench { flex-basis:auto; width:100%; } .vmb-pt-bench-list { max-height:190px; } }
.vmb-hint-bar { display:flex; align-items:center; gap:6px; }
.vmb-cf-row { display:flex; align-items:center; gap:6px; padding:6px 8px; background:var(--bg); border:1px solid var(--bd); border-radius:5px; }
.vmb-cf-chip { flex:0 0 auto; font-family:Raleway,sans-serif; font-size:10px; font-weight:600; line-height:1; letter-spacing:.02em; padding:4px 7px; border-radius:999px; border:1px solid var(--bd); background:var(--surface,#fff); color:var(--ink-faint); cursor:pointer; transition:background .12s,color .12s,border-color .12s; }
.vmb-cf-chip:hover { border-color:var(--ink-faint); color:var(--ink-soft); }
.vmb-cf-chip.on { background:var(--accent,#2f6fed); border-color:var(--accent,#2f6fed); color:#fff; }
.vmb-cf-chip[data-cf-toggle="protected"].on { background:#b4531f; border-color:#b4531f; }
.vmb-cf-chip:disabled { opacity:.5; cursor:default; }
.vmb-cf-cb { display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.vmb-cf-cb input { margin:0; }

/* ── List view (sortable data table) ─────────────────────────── */
.vmb-list-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.vmb-list-toolbar input { padding:6px 10px; border:1.5px solid var(--bd); border-radius:5px; font-size:12px; font-family:Raleway,sans-serif; background:var(--bg); color:var(--ink); width:220px; }
.vmb-dt-wrap { overflow-x:auto; border:1px solid var(--bd); border-radius:8px; }
.vmb-dt { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
.vmb-dt-th { text-align:left; padding:8px 12px; background:var(--bg2); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); cursor:pointer; user-select:none; border-bottom:2px solid var(--bd); position:sticky; top:0; }
.vmb-dt-th:hover { color:var(--accent); background:var(--accent-bg); }
.vmb-dt td { padding:7px 12px; border-bottom:1px solid var(--bd); color:var(--ink); }
.vmb-dt-row { cursor:pointer; }
.vmb-dt-row:hover td { background:var(--bg); }
/* Sort header: pinned-category chip (category columns rotate a value to top). */
.vmb-th-pin { display:inline-block; margin-left:4px; padding:1px 6px; border-radius:20px; background:var(--accent); color:#fff; font-size:9px; font-weight:700; text-transform:none; letter-spacing:0; vertical-align:middle; }
/* Any employee name rendered as a jump-to-card link — plain text, just clickable */
.vmb-emp-link { cursor:pointer; color:inherit; text-decoration:none; }
/* Multi-select column */
.vmb-dt-checkth, .vmb-dt-checktd { width:34px; text-align:center; padding-left:8px; padding-right:8px; }
.vmb-dt-checkth input, .vmb-dt-checktd input { cursor:pointer; width:15px; height:15px; }
/* Row status tints — subtle, badge in the Status column still carries the label. */
.vmb-dt-row.vmb-st-terminated td { color:var(--ink-faint); background:rgba(31,41,55,.07); }
.vmb-dt-row.vmb-st-suspended  td { background:rgba(220,38,38,.06); }
.vmb-dt-row.vmb-st-on_leave   td { background:rgba(217,119,6,.06); }
.vmb-dt-row.vmb-st-laid_off   td { background:rgba(37,99,235,.05); }
.vmb-dt-row.vmb-st-inactive   td { color:var(--ink-faint); }
.vmb-dt-row.vmb-st-probationary td { background:rgba(124,58,237,.05); }
/* Frozen identity columns — checkbox + First/Last name stay put during
   horizontal scroll so you never lose which employee's row you're on. Sticky
   `left` offsets are set from real column widths in vmb.js (vmbFreezeColumns).
   Placed AFTER the status tints so the opaque backing wins over them (equal
   specificity) and scrolled cells never bleed through on tinted rows. */
.vmb-dt td.vmb-frz, .vmb-dt th.vmb-frz { position:sticky; z-index:1; }
.vmb-dt th.vmb-frz { top:0; z-index:3; background:var(--bg2); }
.vmb-dt th.vmb-frz:hover { background:var(--accent-bg); }
.vmb-dt td.vmb-frz { background:var(--bg); }
/* Frozen First/Last (and checkbox) cells must still carry the row's status tint —
   but OPAQUELY, so scrolled cells can't bleed through underneath. Layer the same
   tint the row uses over the solid base. (inactive has no tint, only faint text,
   which already reaches the frozen cells via the .vmb-st-inactive td colour rule.) */
.vmb-dt-row.vmb-st-terminated   td.vmb-frz { background:linear-gradient(rgba(31,41,55,.07),rgba(31,41,55,.07)),var(--bg); }
.vmb-dt-row.vmb-st-suspended    td.vmb-frz { background:linear-gradient(rgba(220,38,38,.06),rgba(220,38,38,.06)),var(--bg); }
.vmb-dt-row.vmb-st-on_leave     td.vmb-frz { background:linear-gradient(rgba(217,119,6,.06),rgba(217,119,6,.06)),var(--bg); }
.vmb-dt-row.vmb-st-laid_off     td.vmb-frz { background:linear-gradient(rgba(37,99,235,.05),rgba(37,99,235,.05)),var(--bg); }
.vmb-dt-row.vmb-st-probationary td.vmb-frz { background:linear-gradient(rgba(124,58,237,.05),rgba(124,58,237,.05)),var(--bg); }
.vmb-dt .vmb-frz-edge { border-right:1px solid var(--bd); box-shadow:2px 0 5px -3px rgba(0,0,0,.25); }
/* ── Column arranging (patch 684) ─────────────────────────────
   Drag a heading sideways to move a column, like a spreadsheet. The order
   is shared across the whole org, so it lives behind a lock — these rules
   are the lock's two states and the drag affordances. Colour and state
   only: the lock button's geometry is the shared .btn-ghost/.btn-sm
   primitive, and the headings keep .vmb-dt-th's own metrics. */
.vmb-list-tbspacer { margin-left:auto; }
.vmb-col-lock.is-open { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
/* The standing reminder that this is everyone's table, visible for as long
   as the lock is open — not a toast that fires once and is gone. */
.vmb-col-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:8px 12px; background:var(--accent-bg); border:1.5px solid var(--accent); border-radius:8px; font-size:11.5px; color:var(--ink); flex-wrap:wrap; }
.vmb-col-bar > i { color:var(--accent); font-size:15px; }
.vmb-col-bar span { flex:1; min-width:200px; }
/* Arrange mode: the heading is a grip, not a sort button. */
.vmb-dt-th.vmb-col-grip { cursor:grab; color:var(--ink); background:var(--accent-bg); }
.vmb-dt-th.vmb-col-grip:hover { color:var(--accent); }
.vmb-dt-th.vmb-col-dragging { opacity:.45; cursor:grabbing; }
.vmb-col-gripicon { margin-right:4px; vertical-align:middle; opacity:.55; font-size:12px; }
/* Where it will land. An inset shadow rather than a border, so the insertion
   line can't change a sticky heading's width mid-drag and shunt the rest of
   the row sideways while the user is aiming at it. */
.vmb-dt-th.vmb-col-drop-l { box-shadow:inset 3px 0 0 0 var(--accent); }
.vmb-dt-th.vmb-col-drop-r { box-shadow:inset -3px 0 0 0 var(--accent); }
/* Bulk action bar */
.vmb-list-bulk { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding:8px 12px; background:var(--accent-bg); border:1.5px solid var(--accent); border-radius:8px; flex-wrap:wrap; }
.vmb-list-bulk.hidden { display:none; }
.vmb-bulk-count { font-size:12px; color:var(--ink); }
.vmb-bulk-count b { font-size:13px; }
/* ── Certs directory (capability view) ───────────────────────── */
.vmb-cert-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vmb-cert-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1.5px solid var(--bd); border-radius:20px; background:var(--bg); color:var(--ink-soft); font-size:12px; font-weight:600; font-family:Raleway,sans-serif; cursor:pointer; transition:border-color .12s,color .12s,background .12s; }
.vmb-cert-chip:hover { border-color:var(--accent); color:var(--accent); }
.vmb-cert-chip.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.vmb-chip-n { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:rgba(0,0,0,.08); font-size:10px; font-weight:700; }
.vmb-cert-chip.on .vmb-chip-n { background:rgba(255,255,255,.28); }
.vmb-chip-warn { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:#FFEDD5; color:#C2410C; font-size:10px; font-weight:700; }
.vmb-cert-summary { margin:12px 0 8px; font-size:12px; color:var(--ink-soft); }
.vmb-mini-chip { display:inline-block; padding:1px 7px; border-radius:20px; background:var(--bg-soft,rgba(0,0,0,.05)); border:1px solid var(--bd); font-size:10.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.vmb-cert-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); cursor:pointer; white-space:nowrap; }
.vmb-cert-toggle input { width:15px; height:15px; cursor:pointer; }
.vmb-empty.sm { padding:28px 12px; }

/* ── Project cert readiness ──────────────────────────────────── */
.vmb-cert-req-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.vmb-cert-req-title { display:inline-flex; align-items:center; gap:7px; font-family:Raleway,sans-serif; font-weight:700; font-size:15px; color:var(--ink); }
.vmb-cert-req-title i { color:var(--accent); }
.vmb-cert-req-chips { display:flex; flex-wrap:wrap; gap:6px; }
.vmb-cert-req-chip { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; background:var(--bg-soft,rgba(0,0,0,.05)); border:1px solid var(--bd); font-size:11px; font-weight:600; color:var(--ink-soft); }
.vmb-cert-req-head #vmb-cert-reqs-edit { margin-left:auto; }
.vmb-cert-kpis { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 4px; }
.vmb-cert-kpi { flex:1; min-width:96px; padding:12px 14px; border:1px solid var(--bd); border-radius:10px; background:var(--bg); display:flex; flex-direction:column; gap:2px; }
.vmb-cert-kpi-n { font-size:24px; font-weight:800; font-family:Raleway,sans-serif; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.vmb-cert-kpi-l { font-size:11px; color:var(--ink-faint); font-weight:600; }
.vmb-cert-kpi.ok   { border-color:#A7F3D0; } .vmb-cert-kpi.ok   .vmb-cert-kpi-n { color:#059669; }
.vmb-cert-kpi.warn { border-color:#FED7AA; } .vmb-cert-kpi.warn .vmb-cert-kpi-n { color:#C2410C; }
.vmb-cert-kpi.bad  { border-color:#FCA5A5; } .vmb-cert-kpi.bad  .vmb-cert-kpi-n { color:#DC2626; }
.vmb-cert-row-gap td { background:rgba(220,38,38,.045); }
.vmb-cert-sugg { margin-top:18px; border:1px solid var(--bd); border-radius:10px; padding:12px 14px; background:var(--bg); }
.vmb-cert-sugg.empty { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-faint); }
.vmb-cert-sugg-head { display:flex; align-items:center; gap:7px; font-weight:700; font-size:12.5px; color:var(--ink); margin-bottom:10px; }
.vmb-cert-sugg-head i { color:#059669; }
.vmb-cert-sugg-list { display:flex; flex-direction:column; gap:6px; }
.vmb-cert-sugg-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border-radius:8px; background:var(--bg-soft,rgba(0,0,0,.03)); }
.vmb-cert-sugg-meta { display:block; font-size:11px; color:var(--ink-faint); margin-top:1px; }
.vmb-cert-req-opts { display:flex; flex-direction:column; gap:2px; max-height:340px; overflow-y:auto; margin-top:6px; }
.vmb-cert-req-opt { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--ink); }
.vmb-cert-req-opt:hover { background:var(--bg-soft,rgba(0,0,0,.04)); }
.vmb-cert-req-opt input { width:16px; height:16px; cursor:pointer; }
.vmb-cert-req-opt span:first-of-type { flex:1; }
.vmb-cert-req-opt-n { font-size:11px; color:var(--ink-faint); }
.vmb-modal-sub { font-size:12.5px; color:var(--ink-soft); margin:0 0 12px; line-height:1.5; }
/* .btn-xs sizing now in design-system.css */
/* Hard-delete gate */
.vmb-del-ack { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink); margin-top:14px; cursor:pointer; line-height:1.4; }
.vmb-del-ack input { margin-top:1px; width:15px; height:15px; cursor:pointer; }
.vmb-del-word { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-soft); margin-top:12px; }
.vmb-del-word input { padding:8px 10px; border:1.5px solid #FCA5A5; border-radius:6px; font-size:14px; font-family:ui-monospace,monospace; letter-spacing:.15em; background:var(--bg); color:var(--ink); }
.vmb-del-word input:focus { outline:none; border-color:#DC2626; }

/* ── Alerts tab ───────────────────────────────────────────────── */
/* .vmb-cert-section already styled above (shared with Certifications tab) */

/* ── Legal & HR document thumbnails ──────────────────────────── */
.vmb-doc-thumb { display:flex; flex-direction:column; align-items:center; gap:4px; width:80px; padding:10px 6px; border:1px solid var(--bd); border-radius:8px; text-decoration:none; color:var(--ink); font-size:10px; text-align:center; background:var(--bg); transition:border-color .12s; }
.vmb-doc-thumb:hover { border-color:var(--accent); color:var(--accent); }
.vmb-doc-thumb-empty { color:var(--ink-faint); cursor:default; }
.vmb-doc-up { display:inline-flex; align-items:center; gap:3px; margin-top:4px; font-size:9px; padding:2px 5px; border:1px solid var(--bd); border-radius:5px; cursor:pointer; color:var(--ink-faint); background:var(--panel,transparent); transition:border-color .12s,color .12s; }
.vmb-doc-up:hover { border-color:var(--accent); color:var(--accent); }

/* ── Onboarding status pill ──────────────────────────────────── */
.vmb-ob-pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; }
.vmb-ob-pill.ok { background:rgba(5,150,105,.12); color:#059669; }
.vmb-ob-pill.pending { background:rgba(217,119,6,.12); color:#B45309; }

/* ── HR dashboard quick-jump search ──────────────────────────── */
.vmb-list-toolbar { position:relative; }
/* ── Add-Crew picker: search + type chips + multi-select browsable list ── */
.vmb-ac { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.vmb-ac-bar { display:flex; align-items:center; gap:10px; }
.vmb-ac-search { flex:1; box-sizing:border-box; }
.vmb-ac-allbr { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; cursor:pointer; }
.vmb-ac-chips { display:flex; flex-wrap:wrap; gap:5px; }
.vmb-ac-chip { font:inherit; font-size:11px; font-weight:600; padding:4px 9px; border:1px solid var(--bd); border-radius:999px; background:var(--bg2); color:var(--ink-soft); cursor:pointer; }
.vmb-ac-chip b { color:var(--ink); font-weight:700; }
.vmb-ac-chip.on { background:var(--ink); border-color:var(--ink); color:var(--white); }
.vmb-ac-chip.on b { color:var(--white); }
.vmb-ac-list { max-height:44vh; overflow-y:auto; border:1px solid var(--bd); border-radius:10px; background:var(--white); }
.vmb-ac-row { display:flex; align-items:center; gap:9px; padding:7px 10px; border-bottom:1px solid var(--bd); cursor:pointer; }
.vmb-ac-row:last-child { border-bottom:none; }
.vmb-ac-row:hover { background:var(--bg2); }
.vmb-ac-row.sel { background:var(--accent-bg); }
.vmb-ac-cb { width:16px; height:16px; flex:0 0 auto; cursor:pointer; }
.vmb-ac-av { width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:var(--accent); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.vmb-ac-who { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.vmb-ac-nm { font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmb-ac-meta { font-size:11px; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmb-ac-tier { font-size:10px; font-weight:700; color:var(--ink-soft); background:var(--bg2); border:1px solid var(--bd); border-radius:5px; padding:2px 6px; white-space:nowrap; flex:0 0 auto; }
.vmb-ac-count { font-size:12px; font-weight:600; color:var(--ink-soft); }
.vmb-assign-empty { padding:14px; font-size:12px; color:var(--ink-faint); text-align:center; }

.vmb-hr-search-results { display:none; position:absolute; top:100%; left:0; right:0; margin-top:4px; background:var(--white); border:1px solid var(--bd); border-radius:8px; box-shadow:var(--shadow-md); max-height:280px; overflow-y:auto; z-index:20; }
.vmb-hr-search-results.open { display:block; }
.vmb-hr-search-row { padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--bd); }
.vmb-hr-search-row:last-child { border-bottom:none; }
.vmb-hr-search-row:hover { background:var(--accent-bg); }
.vmb-hr-search-name { display:block; font-size:12px; font-weight:700; color:var(--ink); }
.vmb-hr-search-meta { display:block; font-size:10px; color:var(--ink-faint); margin-top:1px; }
.vmb-hr-search-empty { padding:12px; font-size:12px; color:var(--ink-faint); text-align:center; }

/* ── View-mode segmented control (project Team tab: Grid/List/Hierarchy) ── */
.vmb-view-seg { display:flex; gap:1px; margin-left:auto; background:var(--bd); border-radius:6px; overflow:hidden; }
.vmb-view-seg-btn { display:flex; align-items:center; gap:5px; padding:6px 12px; font-size:11px; font-weight:600; color:var(--ink-soft); background:var(--bg2); cursor:pointer; border:none; font-family:Raleway,sans-serif; white-space:nowrap; }
.vmb-view-seg-btn i { font-size:13px; }
.vmb-view-seg-btn:hover { color:var(--ink); }
.vmb-view-seg-btn.on { background:var(--ink); color:var(--white); }


/* ── Employee-card compensation block ── */
.vmb-comp-block .field input, .vmb-comp-block .field select { width:100%; }
.vmb-comp-agg { font-size:12.5px; color:var(--ink-soft); background:var(--bg2,#F8FAFC); border:1px solid var(--bd); border-radius:8px; padding:7px 11px; margin:10px 0 4px; }
.vmb-comp-agg b { color:var(--accent,#4F46E5); }
.vmb-comp-sec { font-size:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--ink-faint); margin:12px 0 6px; }
.vmb-comp-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; }
@media (max-width:560px){ .vmb-comp-grid { grid-template-columns:1fr 1fr; } }

/* Equipment held, on the board card. Silent at zero (see equipDot) so the
   indicator row stays worth reading. */
.vmb-equip-dot { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:700;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  padding:1px 6px; border-radius:999px; line-height:1.5; }
.vmb-equip-dot .ti { font-size:12px; }