/* staff.css — Персонал: расстановка, график, структура и ШР, реестр по подразделениям. Порядок подключения файлов задан в app/web.py (CSS_FILES) и важен для каскада. */
/* ---- персонал: расстановка ---- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.board.side{grid-template-columns:2fr 1fr}
.fb{background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;min-width:0;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.fb.on{border-top:3px solid var(--ok)}.fb.off{opacity:.6}
.fb.drop{border-color:var(--brand);box-shadow:var(--ring);background:var(--brand-soft)}
.fbh{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px}
.fbh b{font-size:15px}
.fr{display:grid;grid-template-columns:118px 1fr;gap:8px;align-items:start;padding:5px 0;border-top:1px dashed var(--line2)}
.frl{font-size:11.5px;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding-top:5px}
.frl small{display:block;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink3)}
.frs{display:flex;flex-wrap:wrap;gap:6px}
.pe{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--line2);font-size:12.5px;cursor:pointer;max-width:100%;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.pe:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(11,18,32,.10)}
.pe[draggable]{cursor:grab}
.pe .dot{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.pe.ok .dot{background:var(--ok)}.pe.bad .dot{background:var(--bad)}.pe.warn .dot{background:var(--warn)}.pe.brand .dot,.pe.acc .dot{background:var(--brand)}.pe.mut .dot{background:#94A3B8}
.pe.mut b{color:var(--ink3);font-weight:600}
.pe.vac{border-style:dashed;color:var(--bad);background:var(--bad-soft);border-color:#F3B4B4;cursor:default;font-weight:600}
.pe .pp{font-weight:800;font-size:11px;padding:0 5px;border-radius:5px}.pe .pp.bad{background:var(--bad-soft);color:var(--bad)}.pe .pp.warn{background:var(--warn-soft);color:var(--warn)}
.pe .nx{font-size:10.5px;color:var(--ink3);white-space:nowrap}
.fb.res .frs.wrap{gap:6px}
/* ---- персонал: график ---- */
.pg-nav.dark{background:var(--surface);border-color:var(--line);color:var(--ink)}
.pg-nav.dark .nb:hover{background:var(--surface2)}
table.cal td.kc{color:#fff;font-size:10.5px;min-width:24px}
table.cal td.kc.st-ok{background:var(--ok)}table.cal td.kc.st-mut{background:#CBD5E1;color:var(--ink2)}table.cal td.kc.st-brand,table.cal td.kc.st-acc{background:var(--brand)}
table.cal td.kc.st-warn{background:var(--warn)}table.cal td.kc.st-bad{background:var(--bad)}table.cal td.kc.st-none{background:var(--muted-soft);color:var(--ink3)}
table.cal .nm{font-weight:700;color:var(--ink)}
.legend-k i.st-ok{background:var(--ok)}.legend-k i.st-mut{background:#CBD5E1}.legend-k i.st-brand{background:var(--brand)}.legend-k i.st-warn{background:var(--warn)}.legend-k i.st-bad{background:var(--bad)}
.seg.brush button.on.none{background:#64748B}
@media (max-width:1100px){.board{grid-template-columns:repeat(2,1fr)}.board.side{grid-template-columns:1fr}}
@media (max-width:640px){.board{grid-template-columns:1fr}.fr{grid-template-columns:1fr}}

/* ---- внутренние вкладки: мягкое появление панели, шапка не прыгает ---- */
@keyframes pane-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pane-in{animation:pane-in .22s var(--ease)}
.hero .pg-hero-l{min-height:96px}
.hero .pg-title{min-height:1.1em}
.hero .pg-stats{min-height:96px;align-content:start}
.hero .pg-hero-r{min-height:40px}
table.pgrid td.pc .op{animation:none}
.fbar i{animation:none}
.pe{transition:none}
.seg.tabs button{transition:background .15s var(--ease),color .15s var(--ease)}
@media (prefers-reduced-motion:reduce){.pane-in{animation:none}}
/* шапка: заголовок и подзаголовок всегда занимают по две строки — высота не скачет при смене вкладок */
.hero .pg-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.1em;line-height:1.05}
.hero .pg-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;line-height:1.4}
.hero .pg-hero-l{min-height:0}
/* плитки и правая зона шапки одинаковой высоты на всех вкладках */
.pst{min-height:92px;display:flex;flex-direction:column}
.pst .s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;white-space:normal}
.hero .pg-hero-r{min-height:98px;justify-content:flex-start}
.hero .pg-stats,.pg-hero .pg-stats{grid-auto-rows:minmax(104px,auto)}
.pst{min-height:104px}
.pst .meter{margin-top:auto}
/* плитки фиксированной высоты — шапка одинакова на всех внутренних вкладках */
.hero .pg-stats,.pg-hero .pg-stats{grid-auto-rows:118px}
.pst{height:118px;min-height:0;overflow:hidden;box-sizing:border-box}
.pg-nav{flex-wrap:nowrap;white-space:nowrap}
.pg-hero .pg-hero-r{min-height:98px}

/* ---- структура и ШР ---- */
.org-card .tw{padding:16px 20px 8px;overflow:auto}
.org-root{display:flex;justify-content:center;margin-bottom:14px}
.org-gd{display:inline-flex;align-items:center;gap:12px;background:var(--brand);color:#fff;border-radius:12px;padding:10px 18px;font-size:15px;box-shadow:0 8px 20px rgba(3,52,134,.25)}
.org-gd .oc.big{color:#fff;font-size:18px}
.org-gd .muted{color:rgba(255,255,255,.7)}
.org-gd .btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3)}
/* блоки всегда в один ряд под общей линией (как на схеме); если не влезают — горизонтальная прокрутка, а не перенос: у перенесённых блоков линии шли «в никуда» */
.org-blocks{display:flex;flex-wrap:nowrap;gap:12px;align-items:flex-start;overflow:visible;padding-bottom:8px;width:max-content;min-width:100%}   /* прокручивается весь #org-tree целиком (с директором и линиями), масштаб — css zoom */
.org-blocks>.ob{flex:0 0 250px;max-width:250px}   /* обычные блоки узкие и одинаковые, широкие (УЦС, МТЭС) — по содержимому */
.ob{border:2px solid var(--bc);border-radius:14px;background:var(--surface);min-width:0;transition:box-shadow var(--dur) var(--ease)}
.ob.drop,.ou.drop,.op-row.drop{box-shadow:var(--ring);background:var(--brand-soft)}
.obh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:2px solid var(--bc);color:var(--bc)}
.obh b{font-size:14px;line-height:1.2;flex:1}
.obb{padding:8px}
.ou{border:1px solid var(--line2);border-radius:10px;margin:6px 0;background:var(--surface)}
.ou.d2{margin:4px 0 4px 8px}.ou.d3{margin:3px 0 3px 8px;border-style:dashed}
.ouh{display:flex;align-items:center;gap:6px;padding:7px 9px;cursor:pointer;font-size:13px}
.ouh:hover{background:var(--surface2)}
.ouh b{flex:1;line-height:1.25}
.ouh .arr{width:12px;color:var(--ink3);font-size:11px;transition:transform var(--dur) var(--ease);display:inline-block}
.ou:not(.open)>.ouh .arr{transform:rotate(-90deg)}
.ou:not(.open)>.oub{display:none}
.ouh .note{font-size:11px;color:var(--ink3);flex-basis:100%;order:9;line-height:1.3}
.oub{padding:0 6px 6px}
.op-row{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 22px;font-size:12.5px;color:var(--ink2);border-radius:6px}
.op-row.ed{cursor:pointer}.op-row.ed:hover{background:var(--surface2)}
.op-row .on{flex:1;line-height:1.3}
.oc{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;padding:1px 6px;border-radius:6px}
.oc.warn{background:var(--warn-soft);color:var(--warn)}
.oc small{font-weight:600;font-size:11px;margin-left:1px}.oc small.ok{color:var(--ok)}.oc small.bad{color:var(--bad)}
.ob .oc.big{font-size:16px;color:var(--bc)}
[draggable] .oc{cursor:pointer}
.mini-add{all:unset;cursor:pointer;width:20px;height:20px;border-radius:6px;display:inline-grid;place-items:center;color:var(--ink3);font-weight:700;line-height:1}
.mini-add:hover{background:var(--brand-soft);color:var(--brand)}
.ou [draggable],.ob[draggable]{cursor:grab}
@media print{.org-blocks{flex-wrap:wrap;overflow:visible}.ob::before,.ob::after,.org-root::after{display:none}.ou:not(.open)>.oub{display:block}.ouh .arr{display:none}}

/* ---- структура: линии от директора к блокам, перенос длинных названий ---- */
.org-root{position:relative;margin-bottom:0;padding-bottom:26px}
.org-root::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:26px;background:var(--line)}
.org-blocks{position:relative;padding-top:18px}
/* горизонтальная линия собирается из отрезков над каждым блоком: от центра первого до центра последнего, с перекрытием зазоров */
.ob::after{content:"";position:absolute;left:-12px;right:0;top:-18px;height:2px;background:var(--line)}
.ob:first-child::after{left:50%}.ob:last-child::after{right:50%}
.ob{position:relative}
.ob::before{content:"";position:absolute;left:50%;top:-18px;width:2px;height:18px;background:var(--line)}
.ob,.ou,.op-row,.obh b,.ouh b,.op-row .on{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.ouh{flex-wrap:wrap}
.ouh b{flex:1 1 60%}
.ouh .oc,.obh .oc{flex:none}
.obh{flex-wrap:wrap}
.op-row .on{white-space:normal}

/* должности при генеральном директоре — плашка справа с линией, как на схеме */
.org-root{gap:0;align-items:center}
.org-asides{display:flex;align-items:center;gap:8px;margin-left:34px;position:relative}
.org-asides::before{content:"";position:absolute;left:-34px;top:50%;width:34px;height:2px;background:var(--line)}
.org-aside{border:2px solid var(--brand);border-radius:10px;padding:6px 12px;background:var(--surface);display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:600;color:var(--brand)}
.org-aside .on{white-space:nowrap}

/* ---- реестр персонала столбиком по структуре ---- */
.eg{border-bottom:1px solid var(--line2)}
.egh{display:flex;align-items:center;gap:10px;padding:10px 20px;background:var(--brand-band);font-size:14px;flex-wrap:wrap;position:sticky;top:0;z-index:1;cursor:pointer;user-select:none}
.egh:hover{filter:brightness(.97)}
.egh .arr{width:14px;color:var(--ink3);font-weight:700;text-align:center}
.eg.closed .egh{position:static}
.seg.sm button{padding:6px 10px;font-size:12.5px}
.egh .egp{font-size:11.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.egh b{color:var(--brand)}
.er{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(200px,1.6fr) 120px 130px minmax(200px,1.6fr);gap:10px;align-items:center;padding:7px 20px;border-top:1px solid var(--line2);font-size:13.5px}
.er:hover{background:var(--surface2)}
.er .pos{color:var(--ink2)}
.er .ps{display:flex;flex-wrap:wrap;gap:4px}
@media (max-width:1100px){.er{grid-template-columns:1fr 1fr;padding:8px 14px}.er .rt{display:none}}

/* должности ШР внутри группы реестра и в структуре: «факт / по ШР», нехватка — вакансия */
.egpos{display:flex;align-items:center;gap:10px;padding:6px 20px 6px 34px;background:var(--surface2);font-size:12.5px;border-top:1px solid var(--line2)}
.egpos.vac{box-shadow:inset 3px 0 0 var(--bad)}
.egpn{font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em;font-size:11.5px}
.pf{font-weight:800;font-variant-numeric:tabular-nums;padding:1px 7px;border-radius:6px;font-size:12px;white-space:nowrap}
.pf.ok{background:var(--ok-soft);color:var(--ok)}.pf.bad{background:var(--bad-soft);color:var(--bad)}.pf.warn{background:var(--warn-soft);color:var(--warn)}
.op-row .pf{margin-left:auto}
.op-row.vac{box-shadow:inset 3px 0 0 var(--bad)}

.pill.sm{font-size:10.5px;padding:1px 6px;vertical-align:1px}
.dnote.bad{border-left:3px solid var(--bad);background:var(--bad-soft)}

/* ---- расстановка УЦС: проект → флот → строки-места, вахта А / вахта Б ---- */
.cw-legend{margin:-6px 0 12px}
.cw-wrap{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
@media (max-width:1200px){.cw-wrap{grid-template-columns:1fr}}
.cw-proj{margin:0 0 18px}
.cw-projh{display:flex;align-items:center;gap:10px;padding:8px 4px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.cw-projh .pill{text-transform:none;letter-spacing:0}
.cw{background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.cwh{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--brand-band);border-bottom:1px solid var(--line2);flex-wrap:wrap}
.cwh b{font-size:15px;color:var(--brand)}
.cwh .sh{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--ink3)}
.cwh .sh i{font-style:normal;padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line2)}
.cwh .sh i.now{background:var(--ok-soft);color:var(--ok);border-color:transparent;font-weight:700}
table.cwt{width:100%;border-collapse:collapse;font-size:13px}
table.cwt th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line2);background:var(--surface2)}
table.cwt th.now{color:var(--ok)}
table.cwt td{padding:5px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.cwt tr:last-child td{border-bottom:0}
table.cwt td.veh{width:26%;color:var(--ink2)}
table.cwt td.veh .pl{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink);white-space:nowrap}
table.cwt td.pos{width:20%;font-weight:600}
table.cwt td.pos.ed{cursor:pointer}table.cwt td.pos.ed:hover{color:var(--brand)}
table.cwt td.cell{width:20%;min-width:170px}
table.cwt td.cell.now{background:rgba(21,128,61,.045)}
table.cwt td.cell.drop{outline:2px dashed var(--brand);outline-offset:-3px;background:var(--brand-soft)}
table.cwt td.note{color:var(--ink3);font-size:12px}
.cw .pe{max-width:100%}
.cw .pe.text{background:var(--surface2);border:1px dashed var(--line);color:var(--ink2)}
.cw .vac{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--ink3);cursor:pointer}
.cw .vac.now{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}
.cw .vac:hover{border-style:solid}
.cw .pe .rm{all:unset;cursor:pointer;color:var(--ink3);margin-left:4px;font-size:12px;line-height:1}.cw .pe .rm:hover{color:var(--bad)}
.cw-side{position:sticky;top:12px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.cw-side h4{margin:0 0 8px;font-size:13px}
.cw-side .frs{display:flex;flex-wrap:wrap;gap:6px;max-height:60vh;overflow:auto}
.cw-side .grpn{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px}
.pick-list{max-height:52vh;overflow:auto;border:1px solid var(--line2);border-radius:10px}
.pick-list .pk{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line2);cursor:pointer}
.pick-list .pk:hover{background:var(--surface2)}.pick-list .pk b{flex:1}.pick-list .pk .muted{font-size:12px}
.pick-list .pk.busy{opacity:.6}
.cw-projh.click,.cwh.click{cursor:pointer;user-select:none}
.cw-projh .arr,.cwh .arr{width:14px;color:var(--ink3);font-weight:700;text-align:center}
.cw.closed .cwh{border-bottom:0}
.cw-proj.closed .cw-projh{border-bottom:1px dashed var(--line2);margin-bottom:8px}

/* график по расстановке: строка группы с буквами вахт, бейдж А/Б у человека, линия смены вахт 16-го */
table.cal tr.grp{cursor:pointer;user-select:none}
table.cal tr.grp td{background:var(--brand-band);border-bottom:1px solid var(--line2)}
table.cal tr.grp td.sticky{background:var(--brand-band)}
table.cal tr.grp .arr{display:inline-block;width:14px;color:var(--ink3);font-weight:700}
table.cal td.lt{text-align:center;font-size:10px;font-weight:800;color:var(--ink3);border-left:1px solid var(--line2)}
table.cal td.lt.l-a{background:var(--ok-soft);color:var(--ok)}table.cal td.lt.l-b{background:#DBEAFE;color:#185FA5}
table.cal th.dn.rot,table.cal td.kc.rot,table.cal td.lt.rot{border-left:2px solid var(--brand)}
table.cal .shb{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:800;line-height:15px;vertical-align:1px}
table.cal .shb.a{background:var(--ok-soft);color:var(--ok)}table.cal .shb.b{background:#DBEAFE;color:#185FA5}

/* итог структуры — отдельной строкой под блоками, а не у директора */
.org-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin-top:14px;padding:12px 16px;border-top:2px solid var(--brand);background:var(--brand-band);border-radius:0 0 12px 12px;font-size:13px}
.org-total .lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.org-total b{font-size:18px;font-weight:800;color:var(--brand)}.org-total b.bad{color:var(--bad)}.org-total b.ok{color:var(--ok)}
.org-total .sep{width:1px;height:18px;background:var(--line);align-self:center}
.org-total i{font-style:normal;color:var(--ink3);font-size:12px}

/* структура: плашки у блока, компактный вид, легенда, карточка должности */
.obh .obs{display:flex;gap:4px;flex-basis:100%;order:9}
.org-blocks.compact .op-row{display:none}
.org-blocks>.ob.wide .obh{max-width:none}
.org-legend{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 16px 0;align-items:center}
.org-legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.org-legend .lg.ok{background:var(--ok)}.org-legend .lg.bad{background:var(--bad)}.org-legend .lg.warn{background:var(--warn)}
.op-row.click{cursor:pointer}.op-row.click:hover{background:var(--surface2)}
.plist{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.plist .pk{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px}
.plist .pk:hover{background:var(--surface2)}.plist .pk b{flex:1}

/* широкий блок (Главный инженер): подразделения с участками раскладываются колонками, а не в одну длинную колонку */
.org-blocks>.ob.wide{flex:0 0 auto;width:max-content;max-width:none}
.oub.cols{display:grid;grid-auto-flow:column;grid-auto-columns:196px;gap:6px;align-items:start;padding:6px}   /* участки в одну линию, как на схеме */
.ob.wide .op-row{font-size:11.5px;padding:3px 6px 3px 14px}.ob.wide .ouh{font-size:12.5px;padding:6px 8px}
.oub.cols>.ou{margin:0}
.ob.wide .oub.cols>.ou>.oub.cols{grid-template-columns:1fr}

/* схема на весь экран и масштаб */
.org-card.fs{position:fixed;inset:0;z-index:8;margin:0;border-radius:0;display:flex;flex-direction:column;background:var(--bg)}
.org-card.fs .tw{flex:1;overflow:auto;padding:18px 24px}
.org-card.fs .org-legend,.org-card.fs .add{flex:none;background:var(--surface);border-top:1px solid var(--line2)}
.org-fsbar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line2)}
.org-fsbar b{font-size:15px;color:var(--brand)}
body.org-fs-open{overflow:hidden}
.seg.zoom button{min-width:34px;text-align:center}
#org-zoom{display:inline-block;min-width:100%}

.er .nm i.tab{font:500 11px/1 "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--ink3);margin-left:8px;font-style:normal;letter-spacing:.02em}