/* «Найм» (files/hiring.js, 24.09.2026). Всё собрано из готовых анатомий ГОСТа index.html:
   .crm-kpis/.kpi, .kb-*, .cx-search, .crm-chip, шторка сделки CRM (.crm-drawer-head/.dr-*) внутри
   плавающей скруглённой шторки (.mp-drawer-float.mp-drawer-wide), .drv-chip. Здесь только связки
   раскладки с префиксом hr-. Цвета - только токены (DESIGN_SYSTEM.md разд.1). */

/* Токены, на которых стоят классы .kb-* / .dr-* / .cx-* - в index.html они объявлены НЕ в :root, а внутри
   #page-crm. Без этой копии канбан и шторка «Найма» потеряли бы шрифты, кривые и высоту колонок.
   Значения - те же, что у #page-crm (ГОСТ разд.2 и «Токены кривых»). */
#page-hiring{
  --font-body:'Golos Text','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease-out-strong:cubic-bezier(0.16,1,0.3,1);
  --ease-out-soft:cubic-bezier(0.25,1,0.5,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-overshoot:cubic-bezier(.34,1.45,.5,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --cx-chrome:168px;   /* от неё .kb-col считает max-height (колонка скроллится сама, страница - нет) */
  font-family:var(--font-body);
}
/* Доска - рабочее полотно на всю ширину, скроллится только .kb-board - тот же приём, что у CRM
   (см. комментарии у main:has(> #page-crm.active) в index.html). */
main:has(> #page-hiring.active){max-width:none;}
main:has(> #page-hiring.active), .main-wrap:has(main > #page-hiring.active){min-width:0;}

/* Перетаскивание - как в CRM (hiring.js, bindDrag): своя карточка (.hr-drag) - курсор «захват» и отклик
   нажатия канона CRM (.kb-card:active scale .97); чужую двигать нельзя - обычный курсор-рука, открывается кликом.
   Жесты пальцем НЕ глушим (в CRM .kb-card - touch-action:none): на телефоне доска прокручивается, драг только мышью. */
#page-hiring .kb-card{touch-action:auto;}
#page-hiring .kb-card:not(.hr-drag){cursor:pointer;}
#page-hiring .kb-card:not(.hr-drag):active{transform:translateY(-1px) translateZ(22px) scale(.99);}
/* Одна красная рамка на страницу (ГОСТ разд.1) - она у плитки «Просрочено». Застрявшие карточки
   показывают это красной ТОЧКОЙ с кольцом (.kb-stale .kb-pulse), без красной рамки у каждой. */
#page-hiring .kb-card.kb-stale{border-color:var(--border);}

.hr-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.hr-search{flex:0 1 260px;min-width:180px;}
.hr-count{font:400 11.5px/1 var(--font-mono);color:var(--muted);font-variant-numeric:tabular-nums;}
.hr-add{margin-left:auto;}
/* Запись разговора Ивана в истории карточки: пилюля «Прослушать» - клон .crm-play-btn из CRM; после нажатия - обычный плеер. */
.hr-voice{margin-top:6px;}
.hr-voice .crm-play-btn{height:24px;padding:0 10px 0 8px;font-size:11.5px;}
.hr-voice .crm-play-btn svg{width:11px;height:11px;}
.hr-voice-audio{width:100%;max-width:340px;height:32px;display:block;}
/* Главное действие страницы - яркое (Влад 07.10: «сделай яркую, чтобы видно было»). Синий фон + белый текст, как
   .dr-calc-cta в CRM; hover - явный светлее тон, не filter:brightness (ГОСТ). */
#page-hiring .crm-chip.hr-add{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}
#page-hiring .crm-chip.hr-add:hover{background:#4d98e4;border-color:#4d98e4;color:#fff;}
#page-hiring .crm-chip.hr-add svg{color:#fff;stroke:currentColor;}

/* Плитки сводки над доской. Стили жили в index.html у CRM; 07.10 CRM убрала свои плитки вместе со стилями -
   плитки «Найма» развалились в столбик. Теперь свои, здесь: плитка = ширина колонки доски (248px), ряд скроллится. */
#page-hiring .crm-kpis{display:flex;gap:10px;margin-bottom:14px;perspective:1400px;position:relative;overflow-x:auto;}
#page-hiring .crm-kpis > *:not(.p2-light){position:relative;z-index:1;}
#page-hiring .crm-kpis .kpi{cursor:pointer;flex:0 0 248px;transition:background-color .12s ease-out,border-color .12s ease-out,transform .12s ease-out;}
#page-hiring .crm-kpis .kpi:hover{background:var(--bg-hover);border-color:var(--border-strong);transform:translateY(-1px) translateZ(22px);}
#page-hiring .crm-kpis .kpi[aria-pressed="true"]{border-color:var(--border-strong);background:var(--bg3);}
#page-hiring .crm-kpis .kpi.is-attention{border-color:color-mix(in srgb,var(--red) 45%,var(--border));}
#page-hiring .crm-kpis .kpi-label{display:flex;align-items:center;gap:6px;}
#page-hiring .crm-kpi-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
@media (prefers-reduced-motion: reduce){#page-hiring .crm-kpis .kpi:hover{transform:none;} #page-hiring .crm-kpis{perspective:none;}}
/* «Лампочки» - кто сейчас в «Найме» (только руководителю). Клон плиток присутствия Планировки (.pres-tile в
   index.html): 30x28, три буквы фамилии mono; нет на странице - контур, открыта - залита своим цветом (--pc),
   действует - тот же цвет и мигает (общий lpTagGlow, именованное исключение ГОСТа №9). */
.hr-presence{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap;}
.hr-presence[hidden]{display:none;}
.hr-presence + .hr-add{margin-left:0;}
.hr-pres{width:30px;height:28px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;
  font:700 10.5px/1 var(--font-mono);letter-spacing:.01em;border:1px solid var(--border);color:var(--muted2,var(--muted));background:transparent;
  transition:background-color .25s ease-out,color .25s ease-out,border-color .25s ease-out;}
.hr-pres.is-on{border-color:transparent;color:var(--pc);background:color-mix(in srgb,var(--pc) 30%,transparent);}
.hr-pres.is-active{animation:lpTagGlow 1.4s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.hr-pres.is-active{animation:none;box-shadow:0 0 8px 1px currentColor;}}

/* Строка под шапкой колонки: срок этапа и сколько в колонке просрочено */
.hr-col-sla{font:400 10.5px/1 var(--font-mono);color:var(--muted);padding:6px 12px 0;font-variant-numeric:tabular-nums;}
.hr-col-over{color:var(--amber);}
.hr-more{appearance:none;background:transparent;border:1px dashed var(--border-strong);color:var(--muted);border-radius:10px;
  padding:8px;font:500 12px/1 var(--font-body);cursor:pointer;transition:color .12s ease-out;}
.hr-more:hover{color:var(--text);}
.hr-tags{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.hr-tag{font:500 10.5px/1 var(--font-body);color:var(--muted);background:var(--bg4);border-radius:6px;padding:3px 6px;white-space:nowrap;}
.hr-tag-urgent{color:var(--amber);}
.hr-tag-date{color:var(--text);}   /* дата приезда - ярче обычной метки */
.hr-arrival{margin-top:8px;}
/* Ответ СБ (таблица службы безопасности) на этапе «Проверка СБ» (Влад 25.09: «согласовали - плитка зеленеет,
   не согласовали - красная»): тонкая заливка + полоса слева семантическим цветом, и всегда словами в теге.
   Рамку карточки не красим - «одна красная рамка на страницу» (ГОСТ разд.1) остаётся за плиткой «Просрочено». */
#page-hiring .kb-card.hr-sb-ok{background:color-mix(in srgb,var(--green) 9%,var(--bg3));box-shadow:inset 3px 0 0 var(--green);}
#page-hiring .kb-card.hr-sb-bad{background:color-mix(in srgb,var(--red) 9%,var(--bg3));box-shadow:inset 3px 0 0 var(--red);}
#page-hiring .kb-card.hr-sb-wait{background:color-mix(in srgb,var(--amber) 8%,var(--bg3));box-shadow:inset 3px 0 0 var(--amber);}
.hr-tag-sb.hr-sb-ok{color:var(--green);}
.hr-tag-sb.hr-sb-bad{color:var(--red);}
.hr-tag-sb.hr-sb-wait{color:var(--amber);}
.hr-label-act{margin-left:auto;font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;}
.hr-label-act[hidden]{display:none;}   /* .hr-link ставит display:inline - иначе hidden не прячет */
/* Ответственные: кружки .kb-ava (канон CRM) слева в нижней строке карточки, HR + колонна. */
.hr-bot-left{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.hr-avas{display:inline-flex;gap:3px;flex:none;}
.hr-owner{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.hr-owner-pick{margin-top:6px;}
.hr-owner-pick .kb-ava,.hr-owner .kb-ava{margin-right:2px;}
/* Замещение HR (28.09): строка под фильтрами - кто кого замещает; у руководителя ещё выбор чипами (как выбор HR в карточке). */
/* Фильтры по ответственным (05.10) - строка под панелью: «HR:» и «Логист:» чипами с кружками и числом. */
.hr-resp{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 10px;font:400 12.5px/1.4 var(--font-body);}
.hr-resp[hidden]{display:none;}
.hr-resp .crm-chip .kb-ava{margin-right:2px;}
.hr-cover{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 10px;font:400 12.5px/1.4 var(--font-body);}
.hr-cover[hidden]{display:none;}
.hr-cover-item{display:inline-flex;align-items:center;gap:6px;}
.hr-cover-form{flex-basis:100%;display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.hr-cover-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hr-cover-row > .aux{min-width:120px;}
.hr-cover-form .dr-calc-cta{align-self:flex-start;}
/* Документы кандидата: строка .dr-row - имя-ссылка + подпись (тип · размер · дата · кто), крестик удаления. */
.hr-doc{align-items:center;gap:8px;}
.hr-doc-name{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;text-align:left;}
.hr-doc-open{appearance:none;background:none;border:0;padding:0;font:500 13px/1.3 var(--font-body);color:var(--text);cursor:pointer;
  text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
.hr-doc-open:hover{color:var(--blue);}
.hr-doc .hr-doc-name .aux{font:400 11px/1.3 var(--font-body);color:var(--muted);text-align:left;}
.hr-doc-hint{font:400 11px/1.4 var(--font-body);color:var(--muted);margin-top:6px;}
/* Распознанные поля документа: форма проверки под строкой документа, отступ-линия слева. */
.hr-ocr{margin:2px 0 10px;padding-left:12px;border-left:2px solid var(--border);}
.hr-ocr-form{display:flex;flex-direction:column;gap:8px;}
.hr-ocr-form[hidden],.hr-ocr-view[hidden]{display:none;}
.hr-ocr-apply{gap:12px;}
.hr-check{display:inline-flex;align-items:center;gap:6px;font:400 12px/1.3 var(--font-body);color:var(--text);cursor:pointer;}
.hr-check input{accent-color:var(--green);}
.hr-link{display:inline;font-size:11px;color:var(--blue);}

/* Шторка: каркас .mp-drawer-float уже flex-колонка; голова и тело - анатомия шторки сделки CRM. */
.hr-drawer .crm-drawer-body{padding-bottom:28px;}
.hr-grid{gap:10px 12px;}
.hr-full{grid-column:1/-1;}
.hr-vchips{display:flex;gap:6px;flex-wrap:wrap;}
.hr-form{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.hr-form[hidden]{display:none;}
.hr-inline{display:flex;gap:8px;align-items:center;}
.hr-inline .dr-input{flex:1;min-width:0;}
.hr-wrap{flex-wrap:wrap;}
.hr-reason-group{display:flex;flex-direction:column;gap:5px;}
.hr-reason-side{font:400 10.5px/1 var(--font-body);color:var(--muted);}
.hr-hint-amber{font:400 11.5px/1.4 var(--font-body);color:var(--amber);}
.hr-recall-field{max-width:260px;}
.hr-drawer .dr-calc-cta{margin-top:4px;}
.hr-drawer .dr-calc-cta:disabled{opacity:.5;cursor:default;filter:none;}
.hr-drawer .dr-stage:disabled{cursor:default;opacity:.55;}
.hr-drawer .dr-stage:disabled:hover{border-color:var(--border);color:var(--muted);}
.hr-drawer .dr-stage.is-cur:disabled,.hr-drawer .dr-stage.is-done:disabled{opacity:1;color:var(--text);}
.hr-drawer .dr-input:disabled,.hr-drawer .dr-textarea:disabled{opacity:.7;cursor:default;}
@media(max-width:820px){.hr-drawer .dr-grid2{grid-template-columns:1fr;}}

/* Та же ветка, что у CRM (#page-crm ... в index.html) - там она привязана к #page-crm и сюда не доходит. */
@media(prefers-reduced-motion:reduce){
  .hr-more{transition:none;}
  #page-hiring .kb-card,#page-hiring .kb-col,#page-hiring .kb-list,#page-hiring .crm-kpis .kpi,#page-hiring .kb-shelf{transition:none;}
  #page-hiring .kb-card:hover,#page-hiring .kb-card:active,#page-hiring .crm-kpis .kpi:hover{transform:none;}
  #page-hiring .crm-kpis,#page-hiring .kb-panel{perspective:none;}
}