/* ProjectTelemetry — Leadership org chart (#/leadership) */
.ld-wrap { max-width: 1100px; margin: 0 auto; padding: 4px 2px 40px; }
.ld-load, .ld-empty { padding: 40px; text-align: center; color: var(--ink-soft, #667); }
.ld-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 6px 2px 16px; flex-wrap: wrap; }
.ld-head h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--ink, #111827); }
.ld-head p { font-size: 13px; color: var(--ink-soft, #667); margin: 4px 0 0; }
.ld-tabs { display: flex; gap: 6px; }
.ld-tab { padding: 7px 13px; border: 1px solid var(--bd, #d1d5db); background: var(--card, #fff); border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink, #111827); }
.ld-tab.on { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }
.ld-projpick { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ld-projpick label { font-size: 12px; color: var(--ink-soft, #667); }
.ld-projpick select, .ld-assign-row select { padding: 8px 10px; border: 1px solid var(--bd, #d1d5db); border-radius: 8px; font-size: 13px; background: var(--card, #fff); color: var(--ink, #111827); }
.ld-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .ld-cols { grid-template-columns: repeat(2, 1fr); } }
.ld-col { background: var(--bg, #f9fafb); border: 1px solid var(--bd, #e5e7eb); border-radius: 12px; padding: 10px; min-height: 80px; }
.ld-col-hd { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--accent, #2563eb); margin-bottom: 8px; }
.ld-col-empty { color: var(--ink-faint, #9ca3af); font-size: 13px; text-align: center; padding: 10px 0; }
.ld-card { display: flex; align-items: center; gap: 8px; background: var(--card, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 10px; padding: 8px 9px; margin-bottom: 7px; }
.ld-av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent, #2563eb); color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ld-card-b { flex: 1; min-width: 0; }
.ld-card-n { font-size: 13px; font-weight: 600; color: var(--ink, #111827); }
.ld-card-m { font-size: 11px; color: var(--ink-soft, #667); text-transform: capitalize; }
.ld-x { border: none; background: none; color: var(--ink-soft, #9ca3af); font-size: 18px; cursor: pointer; line-height: 1; }
.ld-assign { background: var(--card, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 12px; padding: 14px; }
.ld-assign-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft, #667); margin-bottom: 9px; }
.ld-assign-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ld-assign-row select { flex: 1; min-width: 150px; }
.ld-roll { background: var(--card, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.ld-roll-hd { font-size: 14px; font-weight: 700; color: var(--ink, #111827); margin-bottom: 8px; }
.ld-roll-row { font-size: 13px; padding: 3px 0; color: var(--ink, #111827); }
.ld-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--bg, #eef2ff); color: var(--accent, #2563eb); font-size: 11px; font-weight: 600; margin-right: 4px; }
.ld-soft { color: var(--ink-soft, #667); }

/* ============================================================
 * Enterprise org-chart builder (Leadership ▸ Enterprise)
 * Visible, drag-and-drop company tree. Namespaced .oc-*.
 * ============================================================ */
.oc-wrap { max-width: 1320px; margin: 0 auto; padding: 4px 2px 60px; }
.oc-scopebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 12px; }
.oc-scopebar label { font-size: 12px; color: var(--ink-soft, #667); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.oc-scopebar label .ti { font-size: 15px; }
.oc-scopebar select { padding: 8px 10px; border: 1px solid var(--bd, #d1d5db); border-radius: 8px; font-size: 13px; background: var(--white, #fff); color: var(--ink, #111); }
.oc-scope-hint { font-size: 12px; color: var(--ink-faint, #9ca3af); }
.oc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--white, #fff); border: 1px solid var(--bd, #d1d5db); border-radius: 11px;
  padding: 8px 11px; margin-bottom: 14px; }
.oc-hint { font-size: 12px; color: var(--ink-soft, #667); display: inline-flex; align-items: center; gap: 5px; }
.oc-hint .ti { font-size: 15px; }

/* two-pane: palette + canvas */
.oc-stage { display: grid; grid-template-columns: 248px 1fr; gap: 14px; align-items: start; }
.oc-stage.noedit, .oc-stage.oc-collapsed { grid-template-columns: 1fr; }
@media (max-width: 900px) { .oc-stage { grid-template-columns: 1fr; } }

.oc-palette { background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 12px;
  padding: 12px; position: sticky; top: 12px; max-height: calc(100vh - 130px); overflow-y: auto; }
.oc-pal-h { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft, #667); margin-bottom: 9px; }
.oc-icon-btn { border: none; background: transparent; color: var(--ink-faint, #9ca3af); cursor: pointer; padding: 2px; display: inline-flex; border-radius: 6px; }
.oc-icon-btn:hover { color: var(--accent, #4F46E5); background: var(--bg2, #f0f0f0); }
.oc-icon-btn .ti { font-size: 17px; }
.oc-search { width: 100%; padding: 8px 10px; border: 1px solid var(--bd, #d1d5db); border-radius: 8px;
  background: var(--bg2, #f6f6f6); color: var(--ink, #111); font-size: 12.5px; margin-bottom: 10px; }
.oc-pg { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-faint, #9ca3af); margin: 12px 2px 7px; }
.oc-pg-empty { font-size: 12.5px; color: var(--ink-soft, #667); padding: 8px 2px; }

.oc-chip { display: flex; align-items: center; gap: 8px; background: var(--bg2, #f6f6f6);
  border: 1px solid var(--bd, #e5e7eb); border-radius: 9px; padding: 6px 8px; margin-bottom: 7px; cursor: grab; }
.oc-chip:hover { border-color: var(--accent, #4F46E5); }
.oc-chip.oc-dragging { opacity: .45; }
.oc-grip { color: var(--ink-faint, #9ca3af); display: inline-flex; }
.oc-grip .ti { font-size: 15px; }

/* avatar / kind glyph */
.oc-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex: 0 0 auto; color: #fff; background: var(--accent, #4F46E5); }
.oc-av.card { background: transparent; color: var(--accent, #4F46E5); border: 2px dashed var(--bd, #94A3B8); }
.oc-av.div { border-radius: 8px; background: #0E9F6E; }
.oc-av.proj { border-radius: 8px; background: #2563EB; }
.oc-av.grp { border-radius: 8px; background: var(--ink-soft, #64748B); }
.oc-av .ti { font-size: 15px; }

.oc-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.oc-who .oc-n { font-size: 12.5px; font-weight: 650; color: var(--ink, #111); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-who .oc-sub { font-size: 11px; color: var(--ink-soft, #667); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-kick { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint, #9ca3af); }
.oc-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.oc-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 999px; }
.oc-tag.seat { background: var(--accent-bg, #EEF2FF); color: var(--accent, #4F46E5); }
.oc-tag.lead { background: var(--accent, #4F46E5); color: #fff; }
.oc-node.oc-lead { border-color: color-mix(in srgb, var(--accent, #4F46E5) 55%, var(--bd)); }
.oc-tag.card { background: transparent; color: var(--ink-faint, #9ca3af); border: 1px solid var(--bd, #e5e7eb); }

/* canvas + tree */
.oc-canvas { position: relative; overflow: hidden; background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb);
  border-radius: 12px; min-height: 560px; height: calc(100vh - 210px); cursor: grab; touch-action: none; }
/* stop text-selection / long-press callout while dragging boxes — every platform
   (PC Chrome/Edge/Firefox/Safari, Android, iPad): standard + all vendor prefixes */
.oc-canvas, .oc-chip { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; }
.oc-canvas.oc-grabbing { cursor: grabbing; }
.oc-pan { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; padding: 8px; }
/* pan/zoom controls */
.oc-zoomctl { position: absolute; right: 14px; top: 14px; z-index: 6; display: flex; flex-direction: column;
  background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 11px; overflow: hidden; box-shadow: var(--shadow); }
.oc-zoomctl button { width: 39px; height: 37px; border: none; background: transparent; color: var(--ink-soft, #667);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.oc-zoomctl button .ti { font-size: 17px; }
.oc-zoomctl button + button { border-top: 1px solid var(--bd, #eee); }
.oc-zoomctl button:hover { background: var(--bg2, #f0f0f0); color: var(--ink, #111); }
.oc-zoomctl .oc-zoom-lbl { font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* floating re-open tab when the palette is collapsed */
.oc-pal-reopen { position: absolute; left: 10px; top: 10px; z-index: 6; width: 34px; height: 34px;
  border: 1px solid var(--bd, #e5e7eb); background: var(--white, #fff); color: var(--ink-soft, #667); border-radius: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.oc-pal-reopen:hover { color: var(--accent, #4F46E5); border-color: var(--accent, #4F46E5); }
.oc-pal-reopen .ti { font-size: 18px; }
.oc-blank { text-align: center; color: var(--ink-faint, #9ca3af); padding: 60px 20px; }
.oc-blank .ti { font-size: 34px; opacity: .6; }
.oc-blank p { margin: 8px 0 0; font-size: 13.5px; }

.oc-tree, .oc-tree ul { list-style: none; margin: 0; padding: 0; }
.oc-tree { display: flex; justify-content: center; gap: 8px; min-width: max-content; }
.oc-tree ul { display: flex; justify-content: center; padding-top: 26px; position: relative; }
.oc-tree li { position: relative; padding: 26px 12px 0; display: flex; flex-direction: column; align-items: center; }
/* connectors between a parent and its children */
.oc-tree li::before, .oc-tree li::after { content: ""; position: absolute; top: 0; width: 50%; height: 26px; border-top: 2px solid var(--bd, #B9C3D6); }
.oc-tree li::before { right: 50%; border-right: 2px solid var(--bd, #B9C3D6); }
.oc-tree li::after { left: 50%; }
.oc-tree li:first-child::before, .oc-tree li:last-child::after { border: 0; }
.oc-tree li:last-child::before { border-right: 2px solid var(--bd, #B9C3D6); border-radius: 0 7px 0 0; }
.oc-tree li:first-child::after { border-left: 2px solid var(--bd, #B9C3D6); border-radius: 7px 0 0 0; }
.oc-tree ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 26px; border-left: 2px solid var(--bd, #B9C3D6); }
.oc-tree li:only-child { padding-top: 26px; }
.oc-tree li:only-child::before, .oc-tree li:only-child::after { display: none; }
/* roots are independent trees, side by side — no connector above them */
.oc-tree > li { padding-top: 0; }
.oc-tree > li::before, .oc-tree > li::after { display: none; }

/* the node card */
.oc-node { position: relative; display: flex; align-items: center; gap: 9px; min-width: 188px; max-width: 240px;
  background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 11px; padding: 9px 11px;
  box-shadow: 0 1px 2px rgba(21,32,53,.05); }
.oc-node[draggable="true"] { cursor: grab; }
.oc-node:hover { border-color: var(--accent, #4F46E5); }
.oc-node.oc-over { border-color: var(--accent, #4F46E5); box-shadow: 0 0 0 3px var(--accent-bg, #EEF2FF); }
.oc-node.oc-dragging { opacity: .45; }
.oc-node.oc-mine { box-shadow: 0 0 0 2px var(--accent, #4F46E5); }
.oc-node::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.oc-node.division { background: #E7F7F0; border-color: #A7E3CC; }
.oc-node.division::before { background: #0E9F6E; }
.oc-node.division .oc-n { color: var(--ink, #111); }
.oc-node.project { background: #E8F0FE; border-style: dashed; border-color: #A9C6F5; }
.oc-node.project::before { background: #2563EB; }
.oc-node.group { background: var(--bg2, #f6f6f6); }
.oc-node.group::before { background: var(--ink-soft, #64748B); }

.oc-acts { display: flex; align-items: center; gap: 2px; margin-left: 2px; }
.oc-act { width: 24px; height: 24px; border: 1px solid transparent; background: transparent; border-radius: 6px;
  color: var(--ink-faint, #9ca3af); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.oc-act:hover { background: var(--bg2, #f0f0f0); color: var(--ink, #111); border-color: var(--bd, #e5e7eb); }
.oc-act.oc-del:hover { color: #B91C1C; border-color: #FCA5A5; background: #FEF2F2; }
.oc-act .ti { font-size: 14px; }

/* ── View toggle (Tree ⇄ Cards) ── */
.oc-viewtoggle { display: inline-flex; margin-left: auto; border: 1px solid var(--bd, #e5e7eb); border-radius: 8px; overflow: hidden; }
.oc-viewtoggle button { border: none; background: var(--white, #fff); color: var(--ink-soft, #667); font-size: 12px; font-weight: 600; padding: 6px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.oc-viewtoggle button + button { border-left: 1px solid var(--bd, #e5e7eb); }
.oc-viewtoggle button.on { background: var(--accent, #4F46E5); color: #fff; }
.oc-viewtoggle .ti { font-size: 15px; }

/* ── Compact Cards view ── */
.oc-cardswrap { position: relative; overflow: auto; background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb);
  border-radius: 12px; min-height: 560px; height: calc(100vh - 210px); padding: 10px; }
.oc-cards-inner { min-width: max-content; }
.oc-crow { display: flex; align-items: center; gap: 9px; background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb);
  border-radius: 9px; padding: 6px 9px; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(21,32,53,.05); }
.oc-crow[draggable="true"] { cursor: grab; }
.oc-crow:hover { border-color: var(--accent, #4F46E5); }
.oc-crow.oc-over { border-color: var(--accent, #4F46E5); box-shadow: 0 0 0 3px var(--accent-bg, #EEF2FF); }
.oc-crow.oc-dragging { opacity: .45; }
.oc-crow.oc-mine { box-shadow: 0 0 0 2px var(--accent, #4F46E5); }
.oc-crow.division { background: #E7F7F0; border-color: #A7E3CC; }
.oc-crow.project { background: #E8F0FE; border-style: dashed; border-color: #A9C6F5; }
.oc-crow.group { background: var(--bg2, #f6f6f6); }
.oc-crow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.oc-crow-name { font-size: 13px; font-weight: 650; color: var(--ink, #111); white-space: nowrap; }
.oc-crow-sub { font-size: 11px; color: var(--ink-soft, #667); white-space: nowrap; }
.oc-crow-tags { display: inline-flex; align-items: center; gap: 5px; }
.oc-crow .oc-acts { margin-left: 2px; }

/* ── Timecard-permission indicator on supervisors ── */
.oc-auth { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; }
.oc-auth .ti { font-size: 14px; }
.oc-auth.ok { color: #059669; background: #ECFDF5; }
.oc-auth.off { color: var(--ink-faint, #9ca3af); background: var(--bg2, #f0f0f0); }

/* Dark mode (blueprint): division/project boxes carry hardcoded LIGHT tints, so the
   light ink was unreadable. Give them dark tints in blueprint so text reads. */
[data-theme="blueprint"] .oc-node.division, [data-theme="blueprint"] .oc-crow.division { background: #12291F; border-color: #245640; }
[data-theme="blueprint"] .oc-node.project,  [data-theme="blueprint"] .oc-crow.project  { background: #152743; border-color: #2E4C70; }
[data-theme="blueprint"] .oc-auth.ok { background: #0E2A20; }

/* ── Permission facets (row of little icons on a supervisor) ── */
.oc-facets { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.oc-facet { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px;
  color: var(--ink-faint, #9ca3af); background: var(--bg2, #f0f0f0); }
.oc-facet .ti { font-size: 12px; }
.oc-facet.on { color: #059669; background: #ECFDF5; }
[data-theme="blueprint"] .oc-facet.on { background: #0E2A20; }
.oc-facets-nologin { opacity: .5; }
.oc-crow .oc-facets { margin-top: 0; }

/* ── Per-user permission panel (modal) ── */
#oc-perm-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(9,14,25,.5); padding: 20px; }
.oc-perm-card { background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 14px; width: min(560px, 96vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,.2)); }
.oc-perm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--bd, #e5e7eb); }
.oc-perm-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink, #111); display: flex; align-items: center; gap: 7px; }
.oc-perm-x { border: none; background: none; font-size: 24px; line-height: 1; color: var(--ink-soft, #667); cursor: pointer; }
.oc-perm-scroll { overflow-y: auto; padding: 14px 16px 18px; }
.oc-perm-note { font-size: 12.5px; color: var(--ink-soft, #667); background: var(--accent-bg, #EEF2FF); border-radius: 8px; padding: 9px 11px; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; }
.oc-perm-note.ro { background: var(--bg2, #f6f6f6); }
.oc-perm-cat { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint, #9ca3af); margin: 14px 0 6px; }
.oc-perm-row { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--bd, #eee); }
.oc-perm-main { flex: 1; min-width: 0; }
.oc-perm-lbl { font-size: 13px; font-weight: 600; color: var(--ink, #111); }
.oc-perm-desc { font-size: 11.5px; color: var(--ink-soft, #667); margin-top: 1px; }
.oc-perm-src { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 999px; margin-left: 5px; }
.oc-perm-src.role { background: var(--bg2, #f0f0f0); color: var(--ink-soft, #667); }
.oc-perm-src.grant { background: #ECFDF5; color: #059669; }
.oc-perm-src.revoke { background: #FEF2F2; color: #B91C1C; }
.oc-perm-sw { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 11px; background: var(--bd, #ccc); cursor: pointer; margin-top: 1px; }
.oc-perm-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.oc-perm-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.oc-perm-sw.on { background: var(--accent, #4F46E5); }
.oc-perm-sw.on .oc-perm-knob { transform: translateX(16px); }
.oc-perm-sw.locked { opacity: .45; cursor: not-allowed; }
.oc-permbtn:hover { color: var(--accent, #4F46E5); }

/* ── Move / Undo / Redo control cluster (top-left of the canvas) ── */
.oc-canvasctl { position: absolute; left: 14px; top: 14px; z-index: 6; display: flex; gap: 3px;
  background: var(--white, #fff); border: 1px solid var(--bd, #e5e7eb); border-radius: 11px; padding: 3px; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1)); }
.oc-canvasctl button { width: 34px; height: 34px; border: none; background: transparent; color: var(--ink-soft, #667); border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.oc-canvasctl button .ti { font-size: 17px; }
.oc-canvasctl button:hover:not(:disabled) { background: var(--bg2, #f0f0f0); color: var(--ink, #111); }
.oc-canvasctl button:disabled { opacity: .4; cursor: default; }
.oc-canvasctl #oc-move.on { background: var(--accent, #4F46E5); color: #fff; }
/* move-tool affordance */
.oc-movable { cursor: pointer !important; }
.oc-node.oc-movable:hover, .oc-crow.oc-movable:hover { border-color: var(--accent, #4F46E5); box-shadow: 0 0 0 3px var(--accent-bg, #EEF2FF); }
.oc-node.oc-movesrc, .oc-crow.oc-movesrc { border-color: var(--accent, #4F46E5); box-shadow: 0 0 0 2px var(--accent, #4F46E5); }