:root{
  --p:hsl(214,90%,42%); --p-10:hsla(214,90%,42%,.10); --p-50:hsla(214,90%,42%,.5);
  --text:hsl(214,35%,15%); --text-2:hsla(214,30%,20%,.66); --text-3:hsla(214,25%,25%,.45);
  --c-5:hsla(214,30%,20%,.05); --c-10:hsla(214,30%,20%,.09); --c-20:hsla(214,30%,20%,.16);
  --bg:#fff; --bg-2:#f6f8fb;
  --ok:hsl(145,65%,33%); --warn:hsl(35,90%,40%); --err:hsl(3,72%,48%);
  --r:8px; --sh:0 1px 2px hsla(214,30%,20%,.08), 0 4px 12px hsla(214,30%,20%,.06);
  --navh:44px; --draww:124px;
  --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f);color:var(--text);background:var(--bg-2);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--p);text-decoration:none}

/* ---------- navbar ---------- */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--navh);z-index:30;display:flex;align-items:center;gap:12px;
  padding:0 16px;background:var(--bg);border-bottom:1px solid var(--c-10)}
.drawer-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:36px;padding:0 8px;
  background:none;border:none;border-radius:var(--r);cursor:pointer}
.drawer-toggle span{display:block;height:2px;background:var(--text-2);border-radius:2px}
.drawer-toggle:hover{background:var(--c-5)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:26px;height:26px;font-size:13px;border-radius:7px;background:var(--p);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none}
.brand-title{font-weight:600;line-height:1.1}
.brand-sub{font-size:11px;color:var(--text-3);line-height:1.2}
.navbar-spacer{flex:1}
.view-title{margin-left:16px;font-weight:600;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-menu{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:99px;background:var(--c-5);white-space:nowrap}
.user-avatar{width:22px;height:22px;border-radius:50%;background:var(--p);color:#fff;font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.user-name{font-size:13px;color:var(--text-2)}

/* ---------- layout ---------- */
.layout{display:flex;min-height:100%;padding-top:var(--navh)}
.drawer{position:fixed;top:var(--navh);bottom:0;left:0;width:var(--draww);background:var(--bg);
  border-right:1px solid var(--c-10);padding:8px 6px;font-size:12px;display:flex;flex-direction:column;gap:2px;z-index:25;overflow-y:auto}
.drawer-section{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:4px 8px 6px}
.menu-item{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:var(--r);color:var(--text-2);font-weight:500;line-height:1.25}
.menu-item svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu-item:hover{background:var(--c-5);color:var(--text)}
.menu-item.active{background:var(--p-10);color:var(--p);font-weight:600}
.drawer-foot{margin-top:auto;padding:8px;font-size:10px;color:var(--text-3);border-top:1px solid var(--c-10)}
.scrim{display:none;position:fixed;inset:var(--navh) 0 0 0;background:hsla(214,30%,15%,.4);z-index:24}
.content{flex:1;margin-left:var(--draww);padding:14px 18px 40px;min-width:0}

/* ---------- common ---------- */
.page-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:22px;font-weight:600;margin:0}
.page-sub{color:var(--text-3);font-size:13px;margin-top:4px}
.card{background:var(--bg);border:1px solid var(--c-10);border-radius:12px;box-shadow:var(--sh)}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--c-10)}
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--c-20);
  background:var(--bg);color:var(--text-2);border-radius:var(--r);font:500 13px var(--f);cursor:pointer}
.btn:hover{background:var(--c-5);color:var(--text)}
.btn.primary{background:var(--p);border-color:var(--p);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.field{position:relative;display:flex;align-items:center}
.field input,.field select{height:32px;padding:0 10px;border:1px solid var(--c-20);border-radius:var(--r);
  font:400 13px var(--f);color:var(--text);background:var(--bg);outline:none}
.field input:focus,.field select:focus{border-color:var(--p);box-shadow:0 0 0 2px var(--p-10)}
.field input{width:220px}
.spacer{flex:1}
.hint{color:var(--text-3);font-size:12px}
.stat-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.stat{background:var(--bg);border:1px solid var(--c-10);border-radius:99px;padding:4px 12px;font-size:12px;color:var(--text-2);white-space:nowrap}
.stat b{font-weight:600;color:var(--text)}
.stat.muted{background:none;border-color:transparent;color:var(--text-3)}
.empty{padding:48px 24px;text-align:center;color:var(--text-3)}
.empty b{display:block;color:var(--text-2);font-size:15px;margin-bottom:6px}

/* ---------- org chart ---------- */
.chart-wrap{overflow:auto;min-height:260px;padding:18px 14px 26px;background:
  radial-gradient(circle at 1px 1px, var(--c-10) 1px, transparent 0) 0 0/22px 22px, var(--bg)}
.chart-sizer{position:relative;margin:0 auto;min-height:120px}
.chart-zoom{position:absolute;top:0;left:0;width:max-content;transform-origin:top left;transition:transform .12s ease}
.zoomctl{display:flex;align-items:center;gap:6px;flex:none}
.tree,.tree ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex:none}
.tree li{flex:none}
.tree{padding-top:0}
.tree ul{padding-top:18px}
.tree li{position:relative;padding:18px 6px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;width:50%;height:18px;border-top:1.5px solid var(--c-20)}
.tree li::before{right:50%;border-right:1.5px solid var(--c-20)}
.tree li::after{left:50%}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:18px}
.tree li:first-child::before,.tree li:last-child::after{border:none}
.tree li:last-child::before{border-right:1.5px solid var(--c-20);border-radius:0 6px 0 0}
.tree li:first-child::after{border-radius:6px 0 0 0}
.tree>li::before,.tree>li::after{display:none}
.tree>li{padding-top:0}
.node-box{position:relative;display:block}
.node-box::before{content:"";position:absolute;top:-18px;left:50%;width:1.5px;height:18px;background:var(--c-20)}
.tree>li>.node-box::before{display:none}
.node{position:relative;display:block;width:136px;min-height:38px;padding:6px 22px 6px 9px;background:var(--bg);border:1px solid var(--c-20);
  border-left-width:4px;border-radius:8px;box-shadow:var(--sh);cursor:pointer;text-align:left;transition:border-color .12s,box-shadow .12s;font:inherit;color:inherit}
.node:hover{box-shadow:0 0 0 2px var(--p-10),var(--sh)}
.node.selected{border-color:var(--p);box-shadow:0 0 0 2px var(--p-10),var(--sh)}
.node.match{border-color:var(--warn);box-shadow:0 0 0 2px hsla(35,90%,45%,.2),var(--sh)}
.node.dim{opacity:.35}
.node.mgr{border-left-color:var(--p)}
.node.sm{border-left-color:hsl(262,60%,50%)}
.node.eng{border-left-color:hsl(190,70%,36%)}
.node.fm{border-left-color:var(--c-20);width:156px;min-height:40px;padding:7px 12px}
.node-title{font-weight:600;font-size:11px;line-height:1.25}
.node.fm .node-title{font-weight:500;color:var(--text-2)}
.node-count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--text);color:#fff;
  font:700 10px/18px var(--f);text-align:center;box-shadow:var(--sh)}
.node.eng .node-count{background:hsl(190,70%,36%)}
.toggle{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
  border:1px solid var(--c-20);background:var(--bg);color:var(--text-2);font:600 12px/1 var(--f);cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:var(--sh)}
.toggle:hover{border-color:var(--p);color:var(--p)}
.tree li.collapsed>ul,.tree li.collapsed>ul.stack{display:none}

/* вертикальная раскладка: Section Manager → Engineer → Foreman.
   Линия спускается от левого бока начальника (x = 8px от левого края его квадратика). */
.tree ul.stack{display:block;flex:none;padding:0;margin:0;text-align:left;width:136px;position:relative}
.tree li>ul.stack{margin-top:8px}
.tree li>ul.stack::before{content:"";position:absolute;left:8px;top:-8px;height:8px;border-left:1.5px solid var(--c-20)}
.tree ul.stack li{display:block;position:relative;padding:5px 0 0 16px;text-align:left}
.tree ul.stack li::before{content:"";position:absolute;left:8px;top:0;width:8px;height:calc(5px + 14px);border-left:1.5px solid var(--c-20);border-bottom:1.5px solid var(--c-20);border-top:none;border-right:none;right:auto;border-radius:0 0 0 4px}
.tree ul.stack li::after{content:"";position:absolute;left:8px;top:0;bottom:0;width:0;height:auto;border-left:1.5px solid var(--c-20);border-top:none;border-radius:0}
.tree ul.stack li:last-child::after{display:none}
.tree ul.stack li:only-child::before{display:block}
.tree ul.stack li:only-child{padding-top:5px}
.tree ul.stack .node-box::before{display:none}
.tree ul.stack .node{width:100%;min-height:28px;padding:5px 24px 5px 8px;border-left-width:3px}
.tree ul.stack .node.fm{padding:4px 8px}
.tree ul.stack ul.stack{width:auto;padding-left:0}
.tree ul.stack li>ul.stack::before{left:8px}
.tree ul.stack .toggle{bottom:auto;top:50%;left:auto;right:5px;transform:translateY(-50%);width:16px;height:16px;font-size:11px;box-shadow:none}
.tree ul.stack .node-count{top:-6px;right:-6px;min-width:16px;height:16px;line-height:16px;font-size:9px;padding:0 4px}

.tag-tbc{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;background:hsla(35,90%,40%,.14);color:var(--warn);font-size:9px;font-weight:700;vertical-align:1px}
.node.vacant{border-style:dashed}
.node.vacant .node-title{color:var(--text-3)}

/* tooltip */
.tip{position:fixed;z-index:60;display:none;max-width:280px;padding:8px 11px;background:var(--text);color:#fff;border-radius:8px;
  font-size:12px;line-height:1.4;box-shadow:0 6px 20px hsla(214,30%,15%,.25);pointer-events:none}
.tip b{font-size:13px}
.tip-ru{opacity:.75}
.tip-zone{margin-top:4px;padding-top:4px;border-top:1px solid hsla(0,0%,100%,.2)}

/* details panel */
.org-layout{position:relative}
.details{position:absolute;top:60px;right:14px;width:300px;padding:16px;z-index:5;backdrop-filter:blur(6px);background:hsla(0,0%,100%,.94)}.d-ru{display:none}
.details .d-close{position:absolute;top:8px;right:8px;width:26px;height:26px;border:none;background:none;border-radius:6px;color:var(--text-3);font:400 18px/1 var(--f);cursor:pointer}
.details .d-close:hover{background:var(--c-5);color:var(--text)}
.details.hidden{display:none}
.details h3{margin:6px 0 12px;font-size:17px}
.d-title{font-size:12px;font-weight:600;color:var(--p)}
.d-ru{font-size:12px;color:var(--text-3)}
.d-chain{margin-top:12px;font-size:11px;color:var(--text-3);line-height:1.5}
.d-row{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--c-10);font-size:13px}
.d-row span{color:var(--text-3);min-width:96px;flex:none}
.d-row b{font-weight:500}
.chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;background:var(--c-5);color:var(--text-2)}
.chip.ok{background:hsla(145,65%,33%,.12);color:var(--ok)}
.chip.warn{background:hsla(35,90%,40%,.14);color:var(--warn)}
.chip.err{background:hsla(3,72%,48%,.12);color:var(--err)}
.chip.info{background:var(--p-10);color:var(--p)}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);
  padding:10px 14px;border-bottom:1px solid var(--c-10);white-space:nowrap;position:sticky;top:var(--navh);background:var(--bg);z-index:1}
td{padding:10px 14px;border-bottom:1px solid var(--c-5);vertical-align:top}
tbody tr:hover{background:var(--bg-2)}
td.num{color:var(--text-3);width:40px}
.table-wrap{overflow-x:visible}
.org-table td.grp{background:var(--bg);vertical-align:top;border-right:1px solid var(--c-10)}
.org-table td.zone{color:var(--text-2);font-size:12px;max-width:220px}
.org-table tbody tr:hover{background:transparent}
.org-table tbody td:not(.grp):hover{background:var(--bg-2)}
.p-name{font-weight:500}
.p-title{font-size:11px;color:var(--text-3);margin-top:1px}
.p-zone{font-size:11px;color:var(--p);margin-top:4px}
.colbtn{width:18px;height:18px;margin-left:4px;border:1px solid var(--c-20);border-radius:4px;background:var(--bg);color:var(--p);font:700 12px/1 var(--f);cursor:pointer;vertical-align:middle}
.colbtn:hover{border-color:var(--p)}
.btn.primary.btn{color:#fff}

@media (max-width:900px){
  .table-wrap{overflow-x:auto}
  th{position:static}
  .details{position:static;width:auto;margin-top:12px}
}
@media (max-width:760px){
  .drawer-toggle{display:flex}
  .drawer{transform:translateX(-100%);transition:transform .2s ease}
  body.drawer-open .drawer{transform:none}
  body.drawer-open .scrim{display:block}
  .content{margin-left:0;padding:16px}
  .view-title{display:none}
  .user-name{display:none}
}