/* Innova AIOS · HR-модуль. Токены и дерево оргструктуры взяты из утверждённого стандарта интерфейса AIOS. */
:root{
  color-scheme: light dark;
  --accent:hsl(246 62% 52%); --accent-soft:hsl(246 62% 96%); --accent-border:hsl(246 40% 84%);
  --bg:hsl(240 20% 98%); --surface:#fff; --surface-2:hsl(240 22% 97%); --surface-3:hsl(240 20% 94%);
  --ink:hsl(228 18% 10%); --ink-2:hsl(228 10% 34%); --ink-3:hsl(228 8% 45%);
  --hairline:hsl(232 18% 90%); --hairline-2:hsl(232 18% 84%);
  --ok:hsl(152 62% 30%); --warn:hsl(38 78% 32%); --bad:hsl(4 64% 46%);
  --ok-fill:hsl(152 58% 36%); --warn-fill:hsl(38 84% 46%); --bad-fill:hsl(4 68% 52%);
  --ok-soft:hsl(152 48% 94%); --warn-soft:hsl(38 76% 94%); --bad-soft:hsl(4 70% 96%);
  --r:10px; --r-lg:14px; --shadow:0 1px 2px hsl(230 25% 12%/.06), 0 8px 24px -12px hsl(230 25% 12%/.16);
  --f:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:hsl(230 18% 9%); --surface:hsl(230 16% 12%); --surface-2:hsl(230 16% 14%); --surface-3:hsl(230 14% 18%);
  --ink:hsl(220 18% 95%); --ink-2:hsl(220 10% 76%); --ink-3:hsl(220 8% 62%);
  --hairline:hsl(230 14% 20%); --hairline-2:hsl(230 14% 26%);
  --accent-soft:hsl(246 40% 20%); --accent-border:hsl(246 40% 34%);
  --ok-soft:hsl(152 30% 16%); --warn-soft:hsl(38 40% 18%); --bad-soft:hsl(4 40% 18%);
}}
:root[data-theme="dark"]{
  --bg:hsl(230 18% 9%); --surface:hsl(230 16% 12%); --surface-2:hsl(230 16% 14%); --surface-3:hsl(230 14% 18%);
  --ink:hsl(220 18% 95%); --ink-2:hsl(220 10% 76%); --ink-3:hsl(220 8% 62%);
  --hairline:hsl(230 14% 20%); --hairline-2:hsl(230 14% 26%);
  --accent-soft:hsl(246 40% 20%); --accent-border:hsl(246 40% 34%);
  --ok-soft:hsl(152 30% 16%); --warn-soft:hsl(38 40% 18%); --bad-soft:hsl(4 40% 18%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--f)}
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.rail{border-right:1px solid var(--hairline);background:var(--surface);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:700;font-size:15px;padding:6px 10px 14px}
.brand span{display:block;font-weight:400;font-size:12px;color:var(--ink-3)}
.navi{display:flex;gap:9px;align-items:center;padding:9px 11px;border:0;border-radius:var(--r);background:transparent;color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;text-align:left;width:100%}
.navi:hover{background:var(--surface-2)}
.navi[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.main{padding:22px 26px 60px;max-width:1180px}
h1{font-size:24px;margin:0 0 4px} h2{font-size:19px;margin:0 0 4px} h3{font-size:16px;margin:0}
.muted{color:var(--ink-2);margin:0} .dim{color:var(--ink-3);font-size:13.5px;margin:0}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:14px}
.card{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--surface);padding:16px;display:flex;flex-direction:column;gap:10px}
.btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:var(--r);padding:9px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(.94)}
.btn.sec{background:var(--surface);color:var(--ink);border-color:var(--hairline-2);font-weight:500}
.btn.quiet{background:transparent;color:var(--ink-2);border-color:transparent}
.btn.sm{padding:6px 11px;font-size:13px}
.btn:focus-visible,.hrn.vacant:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--hairline-2);border-radius:999px;padding:3px 10px;font-size:12.5px;color:var(--ink-2);background:var(--surface-2)}
.chip.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.chip.acc{background:var(--accent-soft);color:var(--accent);border-color:transparent}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hairline);vertical-align:top}
th{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:600}
input,textarea,select{font:inherit;padding:9px 11px;border:1px solid var(--hairline-2);border-radius:var(--r);background:var(--surface);color:var(--ink);width:100%}
textarea{min-height:180px;resize:vertical}
.scroller{overflow-x:auto}
/* дерево */
.hrwrap{overflow-x:auto;padding:6px 2px 14px}
.hrtree{min-width:max-content;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.hrn{position:relative;width:196px;border:1px solid var(--hairline-2);border-radius:11px;padding:9px 11px;background:var(--surface);display:flex;flex-direction:column;gap:2px;text-align:left}
.hrn b{font-size:13.5px;line-height:1.3} .hrn span{font-size:12px;line-height:1.35;color:var(--ink-3)}
.hrn.top{background:var(--accent-soft);border-color:var(--accent-border);width:224px}
.hrn.dept{background:var(--surface-2);width:212px}
.hrn.ai{background:var(--accent-soft);border-color:var(--accent-border)}
.hrn.contractor{background:var(--warn-soft);border-color:hsl(38 60% 76%)}
.hrn.vacant{border:1.5px dashed var(--bad);background:var(--bad-soft);cursor:pointer}
.hrn.vacant:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.hrpill{position:absolute;top:-9px;right:9px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--bad-fill);color:#fff}
.hrn.ai .hrpill{background:var(--accent)} .hrn.contractor .hrpill{background:var(--warn-fill);color:hsl(30 60% 14%)}
.hrdeps{display:flex;gap:16px;align-items:flex-start;position:relative;padding-top:22px;margin-top:22px}
.hrdeps::before{content:"";position:absolute;top:0;left:106px;right:106px;border-top:1px solid var(--hairline-2)}
.hrdep{position:relative;display:flex;flex-direction:column;align-items:center}
.hrdep::before{content:"";position:absolute;top:-22px;left:50%;height:22px;border-left:1px solid var(--hairline-2)}
.hrstem{height:12px;border-left:1px solid var(--hairline-2);align-self:center}
.hrkids{margin-top:12px;padding-left:18px;border-left:1px solid var(--hairline-2);display:flex;flex-direction:column;gap:8px;align-self:stretch;margin-left:22px}
.hrkid{position:relative}
.hrkid::before{content:"";position:absolute;top:20px;left:-18px;width:18px;border-top:1px solid var(--hairline-2)}
.bars{display:flex;flex-direction:column;gap:5px}
.bar{display:grid;grid-template-columns:150px 1fr 30px;gap:9px;align-items:center;font-size:12.5px;color:var(--ink-3)}
.bar u{text-decoration:none;height:5px;border-radius:3px;background:var(--surface-3);overflow:hidden;display:block}
.bar u i{display:block;height:100%;background:var(--accent)}
.bar u i.ok{background:var(--ok-fill)} .bar u i.warn{background:var(--warn-fill)}
.q{border-left:2px solid var(--accent-border);padding-left:10px;color:var(--ink-2);font-size:13.5px}
.flag{color:var(--bad);font-size:12.5px}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:var(--bg);padding:11px 15px;border-radius:var(--r);font-size:13.5px;opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none}
.toast.on{opacity:1;transform:none}
.login{max-width:360px;margin:14vh auto;display:flex;flex-direction:column;gap:12px}
@media(max-width:860px){.shell{grid-template-columns:1fr}.rail{flex-direction:row;overflow-x:auto}.hrdeps{flex-direction:column;align-items:stretch}.hrdeps::before,.hrdep::before{display:none}.hrn,.hrn.top,.hrn.dept{width:auto}}