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

/* ── 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:#fff; 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; }

/* ── 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; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--bd); background:var(--bg2); }
.vmb-board-col-title { font-size:11px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vmb-board-badge { background:var(--ink); color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:20px; flex-shrink:0; }
.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; 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); text-transform:capitalize; }

/* ── Employee profile modal ──────────────────────────────── */
.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; }
.vmb-hint-bar { display:flex; align-items:center; gap:6px; }
.vmb-cf-row { display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--bg); border:1px solid var(--bd); border-radius:5px; }