/* Organization Structure — org chart editor. Ported from the supplied
   design spec; classes are os-prefixed so they never collide with
   common.css or another module's CSS (same reasoning as roadmap.css/
   user_management.css keeping their own scoped class names). */
:root{
  --os-ink:#1a2332; --os-ink-soft:#3a4453; --os-muted:#7b8794;
  --os-line:#e3e8ec; --os-line-soft:#eef1f3; --os-card:#ffffff;
  --os-green:#15803d; --os-green-soft:#e8f3ec; --os-green-line:#d7e9de;
  --os-gold:#c08a2d; --os-gold-soft:#fbf3e2; --os-gold-line:#eccf93;
  --os-red:#b3382c; --os-red-soft:#fbeae8;
  --os-td:#1d5fb4; --os-td-soft:#e8f0fa; --os-td-line:#c7dcf1;
  --os-pe:#7647b8; --os-pe-soft:#f1ebfa; --os-pe-line:#ddccf2;
  --os-br4:#0d9488; --os-br4-soft:#e6f7f5; --os-br4-line:#b9e8e2;
  --os-br5:#c2410c; --os-br5-soft:#fdeee5; --os-br5-line:#f6cba6;
  --os-shadow:0 1px 2px rgba(26,35,50,.04),0 6px 16px rgba(26,35,50,.06);
  --os-shadow-hover:0 2px 4px rgba(26,35,50,.06),0 14px 30px rgba(26,35,50,.12);
}
.main{font-family:'DM Sans',system-ui,sans-serif}

/* ---- topbar ---- */
.os-topbar{display:flex;align-items:center;gap:14px;padding:18px 26px;background:var(--os-ink);color:#fff}
.os-brand{display:flex;align-items:center;gap:11px}
.os-brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#22a35a,var(--os-green));display:grid;place-items:center;font-weight:700;color:#fff;font-size:15px}
.os-brand-name{font-weight:600;letter-spacing:.2px;font-size:15px}
.os-brand-sub{font-size:12px;color:#9fb0bd;margin-top:1px}
.os-spacer{flex:1}
.os-crumb{font-size:12.5px;color:#9fb0bd;display:flex;align-items:center;gap:6px}
.os-crumb .ic{width:13px;height:13px}
.os-saving{font-family:'DM Mono',monospace;font-size:11px;color:#f0c568;background:rgba(240,197,104,.12);border:1px solid rgba(240,197,104,.35);padding:2px 9px;border-radius:20px;margin-right:6px;opacity:0;transition:opacity .15s ease}
.os-saving.show{opacity:1}

/* ---- toolbar ---- */
.os-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 26px;background:var(--os-card);border-bottom:1px solid var(--os-line)}
.os-toolbar h1{font-size:15px;margin:0;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:9px;color:var(--os-ink)}
.os-toolbar h1 .ic{color:var(--os-green);width:18px;height:18px}
.os-legend{display:flex;gap:14px;align-items:center;margin-right:6px;flex-wrap:wrap}
.os-legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--os-muted);font-family:'DM Mono',monospace;white-space:nowrap}
.os-legend .dot{width:9px;height:9px;border-radius:3px;flex:none}
.os-btn{border:1px solid var(--os-line);background:#fff;color:var(--os-ink-soft);font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:500;padding:7px 12px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease}
.os-btn .ic{width:15px;height:15px}
.os-btn:hover{border-color:var(--os-green);color:var(--os-green);background:var(--os-green-soft)}
.os-btn:disabled{opacity:.45;cursor:default;pointer-events:none}
.os-btn.os-primary{background:var(--os-green);border-color:var(--os-green);color:#fff}
.os-btn.os-primary:hover{background:#136b34}
.os-btn.os-danger{color:var(--os-red)}
.os-btn.os-danger:hover{border-color:var(--os-red);background:var(--os-red-soft);color:var(--os-red)}
.os-btn.os-active{background:var(--os-green);border-color:var(--os-green);color:#fff}
.os-zoomwrap{display:flex;align-items:center;border:1px solid var(--os-line);border-radius:8px;overflow:hidden}
.os-zoomwrap button{border:0;background:#fff;padding:7px 9px;cursor:pointer;color:var(--os-ink-soft);display:grid;place-items:center}
.os-zoomwrap button:hover{background:var(--os-green-soft);color:var(--os-green)}
.os-zoomwrap .ic{width:15px;height:15px}
.os-zoomwrap span{font-family:'DM Mono',monospace;font-size:12px;padding:0 9px;color:var(--os-muted);min-width:42px;text-align:center}

/* ---- canvas ---- */
.os-scroll{overflow:auto;height:calc(100vh - 66px - 59px);padding:46px 40px 80px}
.os-stage{position:relative;width:max-content;min-width:100%;margin:0 auto;transform-origin:top center;transition:transform .2s ease}
.os-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.os-links path{fill:none;stroke:var(--os-line);stroke-width:1.6}
.os-links path.os-dash{stroke-dasharray:6 5;stroke:#aab6c0}

.os-tree,.os-children{display:flex;flex-direction:column;align-items:center}
.os-row{display:flex;align-items:flex-start;gap:34px;justify-content:center}
.os-node-wrap{display:flex;flex-direction:column;align-items:center;position:relative}
.os-gap{height:46px}

/* ---- node card ---- */
.os-node{position:relative;background:var(--os-card);width:262px;border-radius:13px;box-shadow:var(--os-shadow);border:1px solid var(--os-line);overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;--br:var(--os-green);--br-soft:var(--os-green-soft);--br-line:var(--os-green-line)}
.os-node:hover{box-shadow:var(--os-shadow-hover);transform:translateY(-2px)}
.os-node .os-cap{height:4px;background:var(--br)}
.os-node .os-avatar{background:var(--br-soft);color:var(--br);border-color:var(--br-line)}
.os-node .os-foot .os-badge{background:var(--br-soft);color:var(--br)}
.os-node .os-foot:hover{background:var(--br-soft);color:var(--br)}
.os-node.os-br-td{--br:var(--os-td);--br-soft:var(--os-td-soft);--br-line:var(--os-td-line)}
.os-node.os-br-pe{--br:var(--os-pe);--br-soft:var(--os-pe-soft);--br-line:var(--os-pe-line)}
.os-node.os-br-4{--br:var(--os-br4);--br-soft:var(--os-br4-soft);--br-line:var(--os-br4-line)}
.os-node.os-br-5{--br:var(--os-br5);--br-soft:var(--os-br5-soft);--br-line:var(--os-br5-line)}
.os-node.os-vacant{border:1.5px dashed var(--br);background:#fefefd}
.os-node.os-vacant .os-cap{background:repeating-linear-gradient(135deg,var(--br) 0 6px,var(--br-soft) 6px 12px)}
.os-node.os-vacant .os-avatar{background:#fff;border:1.5px dashed var(--br);color:var(--br)}
.os-node.os-vacant .os-meta .os-nm{color:var(--os-muted);font-style:italic}
.os-node.os-vacant .os-vac-tag{color:var(--br);background:#fff;border:1px dashed var(--br)}
.os-node.os-vacant .os-foot .os-badge{background:var(--br-soft);color:var(--br)}

.os-node-body{display:flex;align-items:center;gap:13px;padding:15px 16px 13px}
.os-avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;font-size:14px;font-family:'DM Mono',monospace;border:1px solid #d7e9de}
.os-avatar .ic{width:20px;height:20px}
.os-meta{min-width:0;flex:1}
.os-meta .os-nm{font-weight:600;font-size:15px;line-height:1.2;color:var(--os-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-meta .os-tt{font-size:12.5px;color:var(--os-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-vac-tag{display:inline-block;margin-top:6px;font-family:'DM Mono',monospace;font-size:10.5px;font-weight:500;color:var(--os-gold);background:var(--os-gold-soft);border:1px solid var(--os-gold-line);padding:1px 7px;border-radius:5px;letter-spacing:.4px;text-transform:uppercase}
.os-asg-tag{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;color:var(--os-ink-soft);background:#f2f5f7;border:1px dashed #aab6c0;padding:1px 7px;border-radius:5px;letter-spacing:.3px;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-asg-tag .ic{width:11px;height:11px;flex:none}

.os-foot{border-top:1px solid var(--os-line-soft);padding:9px 14px;display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;color:var(--os-ink-soft);user-select:none;transition:background .15s ease}
.os-foot .ic{width:16px;height:16px;transition:transform .2s ease}
.os-node.os-collapsed .os-foot .ic.os-chev{transform:rotate(-90deg)}
.os-foot .os-rc{font-family:'DM Mono',monospace}
.os-foot .os-badge{margin-left:auto;font-family:'DM Mono',monospace;font-size:11px;padding:1px 8px;border-radius:20px;font-weight:500}

/* ---- edit-mode node actions ---- */
.os-node-actions{position:absolute;top:8px;right:8px;display:none;gap:4px;z-index:5}
body.os-editing .os-node:hover .os-node-actions{display:flex}
body.os-editing .os-team:hover .os-node-actions{display:flex}
.os-na{width:26px;height:26px;border-radius:7px;border:1px solid var(--os-line);background:rgba(255,255,255,.96);color:var(--os-ink-soft);cursor:pointer;display:grid;place-items:center;transition:all .12s ease;box-shadow:0 1px 3px rgba(26,35,50,.12)}
.os-na .ic{width:14px;height:14px}
.os-na:hover{border-color:var(--os-green);color:var(--os-green);background:var(--os-green-soft)}
.os-na.os-del:hover{border-color:var(--os-red);color:var(--os-red);background:var(--os-red-soft)}

/* ---- team card ---- */
.os-team{background:var(--os-card);width:262px;border-radius:13px;border:1px solid var(--os-line);box-shadow:var(--os-shadow);overflow:hidden;position:relative;--br:var(--os-green);--br-soft:var(--os-green-soft);--br-line:var(--os-green-line);border-top:3px solid var(--br)}
.os-team.os-br-td{--br:var(--os-td);--br-soft:var(--os-td-soft);--br-line:var(--os-td-line)}
.os-team.os-br-pe{--br:var(--os-pe);--br-soft:var(--os-pe-soft);--br-line:var(--os-pe-line)}
.os-team.os-br-4{--br:var(--os-br4);--br-soft:var(--os-br4-soft);--br-line:var(--os-br4-line)}
.os-team.os-br-5{--br:var(--os-br5);--br-soft:var(--os-br5-soft);--br-line:var(--os-br5-line)}
.os-team-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;background:#fafbfb;border-bottom:1px solid var(--os-line-soft)}
.os-team-head .os-lbl{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:1px;color:var(--os-muted);text-transform:uppercase}
.os-team-head .os-cnt{font-family:'DM Mono',monospace;font-size:12px;color:var(--os-ink-soft);background:#eef1f3;border-radius:20px;padding:0 8px}
.os-member{display:flex;align-items:center;gap:11px;padding:11px 15px}
.os-member + .os-member{border-top:1px solid var(--os-line-soft)}
.os-member .os-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:600;font-family:'DM Mono',monospace;background:var(--br-soft);color:var(--br);border:1px solid var(--br-line)}
.os-member .os-nm{font-size:13.5px;font-weight:500;line-height:1.15}
.os-member .os-rl{font-size:11.5px;color:var(--os-muted);margin-top:2px}
.os-member .os-asg{display:inline-flex;align-items:center;gap:3px;margin-top:3px;font-family:'DM Mono',monospace;font-size:9.5px;font-weight:500;color:var(--os-ink-soft);background:#f2f5f7;border:1px dashed #b9c4cd;padding:0 6px;border-radius:4px;letter-spacing:.3px;text-transform:uppercase}
.os-member .os-asg .ic{width:10px;height:10px}
.os-member.os-vac .os-av{background:#fff;border:1.5px dashed var(--br);color:var(--br)}
.os-member.os-vac .os-nm{color:var(--os-muted);font-style:italic}
.os-team .os-node-actions{top:7px;right:44px}

.os-team.os-assigned{border-style:dashed;border-color:#aab6c0;border-top:1px solid #aab6c0;background:#fbfcfd;box-shadow:none}
.os-team.os-assigned .os-team-head{background:#f4f6f8}
.os-team.os-assigned .os-team-head .os-lbl{color:var(--os-ink-soft)}
.os-team.os-assigned .os-member .os-av{background:#eef1f3;color:var(--os-ink-soft);border:1px dashed #b9c4cd}
.os-team.os-assigned .os-member .os-fr{font-size:10.5px;color:var(--os-muted);margin-top:2px;font-style:italic}

/* ---- tooltip ---- */
.os-tip{position:fixed;z-index:60;background:var(--os-ink);color:#fff;font-size:12px;padding:6px 10px;border-radius:6px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.os-tip.os-show{opacity:1;transform:translateY(0)}

/* ---- modal ---- */
.os-overlay{position:fixed;inset:0;background:rgba(26,35,50,.45);z-index:80;display:none;align-items:flex-start;justify-content:center;padding:60px 20px;overflow:auto}
.os-overlay.os-show{display:flex}
.os-modal{background:#fff;border-radius:14px;width:460px;max-width:100%;box-shadow:0 24px 70px rgba(26,35,50,.28);overflow:hidden}
.os-modal-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--os-line-soft)}
.os-modal-head .ic{width:18px;height:18px;color:var(--os-green)}
.os-modal-head h2{margin:0;font-size:15px;font-weight:600;flex:1;color:var(--os-ink)}
.os-x{border:0;background:none;cursor:pointer;color:var(--os-muted);display:grid;place-items:center;padding:4px;border-radius:6px}
.os-x .ic{width:16px;height:16px}
.os-x:hover{background:var(--os-line-soft);color:var(--os-ink)}
.os-modal-body{padding:18px 20px;max-height:62vh;overflow:auto}
.os-modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--os-line-soft);background:#fafbfb}
.os-field{margin-bottom:13px}
.os-field label{display:block;font-size:12px;font-weight:500;color:var(--os-ink-soft);margin-bottom:5px;letter-spacing:.2px}
.os-field input[type=text],.os-field select{width:100%;border:1px solid var(--os-line);border-radius:8px;padding:8px 11px;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--os-ink);background:#fff}
.os-field input:focus,.os-field select:focus{outline:2px solid var(--os-green);outline-offset:0;border-color:var(--os-green)}
.os-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--os-ink-soft);cursor:pointer;user-select:none}
.os-check input{accent-color:var(--os-green);width:15px;height:15px}
.os-fieldrow{display:flex;gap:10px}
.os-fieldrow .os-field{flex:1}
.os-sect{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--os-muted);margin:16px 0 9px;display:flex;align-items:center;gap:8px}
.os-sect::after{content:"";flex:1;height:1px;background:var(--os-line-soft)}
.os-mrow{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.os-mrow input,.os-mrow select{flex:1;min-width:110px;border:1px solid var(--os-line);border-radius:8px;padding:7px 10px;font-family:'DM Sans',sans-serif;font-size:13px}
.os-mrow input:focus,.os-mrow select:focus{outline:2px solid var(--os-green);border-color:var(--os-green)}
.os-mrow .os-rm{border:1px solid var(--os-line);background:#fff;border-radius:8px;width:32px;height:32px;flex:none;display:grid;place-items:center;color:var(--os-muted);cursor:pointer}
.os-mrow .os-rm .ic{width:15px;height:15px}
.os-mrow .os-rm:hover{color:var(--os-red);border-color:var(--os-red);background:var(--os-red-soft)}
.os-addline{width:100%;border:1px dashed var(--os-line);background:none;border-radius:8px;padding:8px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--os-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.os-addline .ic{width:16px;height:16px}
.os-addline:hover{border-color:var(--os-green);color:var(--os-green);background:var(--os-green-soft)}
.os-hint{font-size:11.5px;color:var(--os-muted);margin-top:4px}
.os-delete-msg{font-size:13.5px;margin:0 0 12px;color:var(--os-ink)}

/* ---- user picker (occupant search) ---- */
.os-picker{position:relative}
.os-picker-results{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--os-line);border-radius:8px;box-shadow:var(--os-shadow-hover);max-height:220px;overflow:auto;z-index:10;display:none}
.os-picker-results.os-show{display:block}
.os-picker-result{padding:8px 11px;cursor:pointer;font-size:13px}
.os-picker-result:hover,.os-picker-result.os-active{background:var(--os-green-soft);color:var(--os-green)}
.os-picker-result .os-pr-email{font-size:11.5px;color:var(--os-muted)}
.os-picker-result.os-empty{color:var(--os-muted);cursor:default}
.os-picker-result.os-empty:hover{background:none;color:var(--os-muted)}
.os-picker-selected{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--os-ink-soft)}
.os-picker-selected:empty{display:none}
.os-picker-selected .os-clear{border:1px solid var(--os-line);background:#fff;border-radius:6px;width:22px;height:22px;display:grid;place-items:center;cursor:pointer;color:var(--os-muted)}
.os-picker-selected .os-clear:hover{color:var(--os-red);border-color:var(--os-red)}

/* ---- toast ---- */
.os-toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,16px);z-index:90;background:var(--os-ink);color:#fff;font-size:13px;padding:10px 16px;border-radius:9px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.os-toast.os-show{opacity:1;transform:translate(-50%,0)}
.os-toast .ic{width:16px;height:16px;color:#4ade80}

.ic{display:inline-block;vertical-align:middle;stroke:currentColor}
.hidden{display:none}

@media (prefers-reduced-motion:reduce){.os-stage,.os-foot .ic{transition:none!important}}
@media (max-width:640px){
  .os-scroll{padding:30px 16px 60px}
  .os-legend{display:none}
  .os-topbar,.os-toolbar{padding:12px 16px}
  .os-modal{width:100%}
}