/* Единая шапка Hub v3 — одна геометрия topbar на ВСЕХ страницах.
 *
 * Канон классов (после приёмки Смен 2026-09-24):
 *   docs/product/THR_HUB_UI_CANON_CLASSES.md
 * L1 = hub-prod-menu · L2 = hub-nav-l2 · L3 = hub-nav-l3 · L4 = hub-nav-l4
 *
 * Ряд 1 (grid фиксированный): разделы L2 | объект | продукт ▾ | actions
 * Ряд 2 L3 (средний), ряд 3 L4 (мелкий). Размер: L2 > L3 > L4.
 */

:root {
  --hub-chrome-pad-x: 16px;
  --hub-chrome-pad-y: 8px;
  --hub-ctrl-h: 36px;          /* единая высота контролов topbar */
  --hub-obj-w: 260px;
  --hub-prod-w: 130px;
  --hub-act-w: 48px;
}

.hub-shell-chrome {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: var(--hub-chrome-pad-y) var(--hub-chrome-pad-x) 10px;
  background: #fff;
  border-bottom: 1px solid #e0e4e8;
}

/* ---- TOPBAR: разделы | объект | продукт ▾ | actions ---- */
.hub-topbar {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    var(--hub-obj-w)
    var(--hub-prod-w)
    var(--hub-act-w);
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  height: var(--hub-ctrl-h);
  min-height: var(--hub-ctrl-h);
  max-height: var(--hub-ctrl-h);
  box-sizing: border-box;
}
.hub-nav-l2-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  height: var(--hub-ctrl-h);
  box-sizing: border-box;
  border-radius: 8px;
  background: #EEF3F7;
  -webkit-overflow-scrolling: touch;
}
.hub-nav-l2 {
  border: 0;
  background: transparent;
  color: #525c69;
  border-radius: 6px;
  padding: 0 12px;
  height: calc(var(--hub-ctrl-h) - 4px);
  font-size: 13px;
  font-weight: 600;
  line-height: calc(var(--hub-ctrl-h) - 4px);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
}
/* бренд убран */
.hub-brand-title { display: none !important; }

.hub-nav-l2:hover { color: #16638F; background: #E1EAF1; }
.hub-nav-l2.is-on {
  background: #fff;
  color: #16638F;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(22, 99, 143, .18);
  cursor: default;
}

/* Красная точка просрочки на L2/L3 (Старт — никогда) */
.hub-nav-l2,
.hub-nav-l3 {
  position: relative;
}
.hub-nav-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
  background: #ff5752;
  vertical-align: middle;
  flex: 0 0 auto;
}
.hub-nav-dot[hidden] { display: none !important; }
.hub-nav-l2.has-dot,
.hub-nav-l3.has-dot { /* marker for tests */ }

/* Продукт — компактное меню, не три пилюли */
.hub-prod-menu {
  position: relative;
  width: var(--hub-prod-w);
  justify-self: stretch;
}
.hub-prod-menu-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border: 1px solid #c6cdd3;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: #525c69;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  height: var(--hub-ctrl-h);
  min-height: var(--hub-ctrl-h);
}
.hub-prod-menu-btn:hover { border-color: #16638F; color: #16638F; }
.hub-prod-menu.is-open .hub-prod-menu-btn {
  border-color: #16638F;
  color: #16638F;
}
.hub-prod-menu-lab {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-prod-caret { font-size: 10px; opacity: .7; flex: 0 0 auto; }
.hub-prod-menu-drop {
  position: absolute;
  z-index: 90;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid #D6E2EC;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(9, 33, 49, .14);
  padding: 4px;
}
.hub-prod-menu-drop[hidden] { display: none !important; }
.hub-prod-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #1f2a37;
  text-decoration: none !important;
}
.hub-prod-item:hover { background: #F1F6FA; color: #16638F; }
.hub-prod-item.is-on {
  color: #16638F;
  font-weight: 700;
  background: #E8F4FB;
}

/* Actions — фиксированная ширина слота (пустой тоже держит сетку) */
.hub-shell-actions {
  width: var(--hub-act-w);
  height: var(--hub-ctrl-h);
  min-height: var(--hub-ctrl-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  justify-self: stretch;
}
.hub-shell-actions:empty::after {
  content: "";
  display: block;
  width: 1px;
  height: var(--hub-ctrl-h);
}
.hub-shell-actions .fm-help-lg,
.hub-shell-actions .fm-help-mini.fm-help-lg {
  width: var(--hub-ctrl-h);
  height: var(--hub-ctrl-h);
  border-radius: 8px;
  box-sizing: border-box;
}
.hub-shell-actions .fm-btn-ghost,
.hub-shell-actions .fm-import,
.hub-shell-actions button:not(.fm-help-mini):not(.fm-help-lg) {
  border: 1px solid #c6cdd3;
  background: #fff;
  color: #525c69;
  border-radius: 8px;
  padding: 0 10px;
  height: var(--hub-ctrl-h);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  box-sizing: border-box;
}
.hub-shell-actions .fm-btn-ghost:hover,
.hub-shell-actions button:hover {
  background: #EEF1F4;
  color: #16638F;
}

/* ---- L3 средний ---- */
.hub-shell-l3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 32px;
}
.hub-nav-l3-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
}
.hub-nav-l3 {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: #5D5D5D;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  font-family: inherit;
  display: inline-block;
}
.hub-nav-l3:hover { background: #EEF1F4; color: #16638F; }
.hub-nav-l3.is-on {
  background: #16638F;
  border-color: #16638F;
  color: #fff;
  cursor: default;
}
.hub-shell-l3-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 28px;
  min-width: 0;
}

/* ---- L4 мелкий — сдвигается под активный L3 (--hub-l4-pad из hub_chrome.js) ---- */
.hub-shell-l4 {
  display: flex;
  align-items: center;
  padding-left: var(--hub-l4-pad, 0);
  /* без transition — иначе меню прыгает влево и «одумывается» */
  transition: none;
  min-height: 28px;
}
.hub-shell-l4.is-aligned .hub-nav-l4-row {
  position: relative;
}
/* угол-черта L3→L4 убрана: визуально конфликтовала с «Смены / Табель» */
.hub-shell-l4.is-aligned .hub-nav-l4-row::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}
.hub-nav-l4-row {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  background: #F4F7FA;
  border-radius: 6px;
  padding: 2px;
  min-width: 0;
}
.hub-nav-l4 {
  border: 0;
  background: transparent;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #6A7A86;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  font-family: inherit;
  display: inline-block;
}
.hub-nav-l4:hover { color: #16638F; background: #E1EAF1; }
.hub-nav-l4.is-on {
  color: #16638F;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 99, 143, .14);
  cursor: default;
}

/* ---- Объект ---- */
.hub-objbar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: none;
  height: var(--hub-ctrl-h);
  margin: 0;
  min-width: 0;
}
.hub-obj-combo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: var(--hub-ctrl-h);
}
.hub-obj-search.main-ui-filter-search {
  width: 100%;
  height: var(--hub-ctrl-h);
  min-height: var(--hub-ctrl-h);
  max-height: var(--hub-ctrl-h);
  border-radius: 8px;
  box-sizing: border-box;
}
.hub-obj-search .main-ui-filter-search-filter { gap: 4px; padding-left: 8px; }
.hub-obj-chip {
  max-width: min(200px, 72%);
  cursor: pointer;
  background: #d9f4fc !important;
  color: #16638F !important;
  font-weight: 600;
  flex: 0 1 auto;
}
.hub-obj-chip[hidden] { display: none !important; }
.hub-obj-chip button { color: #16638F !important; font-weight: 700; }
.hub-obj-search.has-chip .hub-obj-q {
  flex: 0 0 24px !important;
  min-width: 24px !important;
  max-width: 28px !important;
  width: 24px !important;
  color: transparent !important;
  caret-color: transparent;
  padding: 0 !important;
}
.hub-obj-search.has-chip .hub-obj-q::placeholder {
  color: transparent !important;
  opacity: 0;
}
.hub-obj-search:not(.has-chip) .hub-obj-q {
  flex: 1 1 auto;
  min-width: 80px;
  color: #1f2a37;
}
.hub-obj-bx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: 0 0 auto;
  color: #A8B3BE;
  text-decoration: none;
}
.hub-obj-bx:hover { color: #16638F; background: #EDF4F9; }
.hub-obj-bx[hidden],
.hub-obj-list[hidden] { display: none; }
.hub-obj-list {
  border: 1px solid #DEE4EA;
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: #16638F;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.hub-obj-list:hover { background: #EDF4F9; }

.hub-obj-drop,
.ss-combo-drop {
  position: absolute;
  z-index: 80;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid #D6E2EC;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(9, 33, 49, .16);
  padding: 4px;
}
.hub-obj-drop[hidden],
.ss-combo-drop[hidden] { display: none !important; }
.ss-combo-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 7px 9px;
  font-size: 13px;
  color: #1f2a37;
  border-radius: 6px;
  font: inherit;
}
.ss-combo-opt:hover,
.ss-combo-opt.hi { background: #F1F6FA; }
.ss-combo-opt.on { color: #16638F; font-weight: 600; }
.ss-combo-empty { padding: 8px 9px; font-size: 12px; color: #8C97A3; }

/* Обязательный выбор Объекта — подсветка строки в шапке */
.hub-objbar.is-need-pick .hub-obj-search,
.hub-shell-chrome.hub-need-object .hub-obj-search {
  border-color: #2fc6f6 !important;
  box-shadow: 0 0 0 2px rgba(47, 198, 246, .22);
}
.hub-objbar.is-need-pick::after {
  content: "Выберите Объект";
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  font-size: 11px;
  font-weight: 600;
  color: #16638F;
  white-space: nowrap;
  pointer-events: none;
}
.hub-objbar { position: relative; }

/* Модальный выбор Объекта (pick=1 / смена чипа) — канон shell, не dropdown в доску */
body.hub-obj-modal-open { overflow: hidden; }
.hub-obj-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 24px;
}
.hub-obj-modal[hidden] { display: none !important; }
.hub-obj-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 33, 49, .45);
}
.hub-obj-modal-panel {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #D6E2EC;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(9, 33, 49, .22);
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
.hub-obj-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid #E8ECF1;
  flex: 0 0 auto;
}
.hub-obj-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2a37;
  font-family: "Helvetica Neue", Arial, sans-serif;
  text-transform: none;
  letter-spacing: 0;
}
.hub-obj-modal-sub {
  margin-top: 2px;
  font-size: 12px;
  color: #73737D;
  line-height: 1.4;
  max-width: 42ch;
  text-transform: none;
}
.hub-obj-modal-close {
  border: 0;
  background: #F0F3F5;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #525c69;
  flex: 0 0 auto;
}
.hub-obj-modal-close:hover { background: #E4E9EE; }
.hub-obj-modal-search {
  padding: 12px 16px;
  border-bottom: 1px solid #E8ECF1;
  flex: 0 0 auto;
}
.hub-obj-modal-search .main-ui-square-search {
  width: 100%;
  max-width: none;
  height: 36px;
  border-radius: 8px;
  box-sizing: border-box;
  text-transform: none;
}
.hub-obj-modal-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}
.hub-obj-modal-opt {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  color: #1f2a37;
  text-transform: none;
  letter-spacing: 0;
}
.hub-obj-modal-opt:hover,
.hub-obj-modal-opt.hi { background: #F1F6FA; }
.hub-obj-modal-opt.on {
  background: #EAF6FC;
  color: #16638F;
}
.hub-obj-modal-opt-lab {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hub-obj-modal-opt-meta {
  font-size: 11px;
  color: #8C97A3;
  white-space: nowrap;
  text-transform: none;
}
.hub-obj-modal-opt.on .hub-obj-modal-opt-meta { color: #16638F; }
.hub-obj-modal-opt-mark {
  font-size: 14px;
  font-weight: 700;
  color: #16638F;
}
.hub-obj-modal-empty {
  padding: 16px 12px;
  font-size: 13px;
  color: #8C97A3;
  text-transform: none;
}
.hub-obj-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #E8ECF1;
  flex: 0 0 auto;
  background: #FAFBFC;
}
.hub-obj-modal-cancel {
  border: 1px solid #D5DDE5;
  background: #fff;
  color: #525c69;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: none;
}
.hub-obj-modal-cancel:hover { background: #F0F3F5; }
.hub-obj-modal-go {
  border: 0;
  background: #1f6feb;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: none;
}
.hub-obj-modal-go:hover { background: #1a5fd0; }
.hub-obj-modal-go:disabled,
.hub-obj-modal-go[aria-disabled="true"] {
  background: #B8C4D0;
  color: #fff;
  cursor: not-allowed;
}

/* Компактный drop в шапке больше не основной путь выбора — прячем, если вдруг открыт */
.hub-obj-drop {
  display: none !important;
}

/* Выравнивание хрома: один pad-x на Hub и WFM, без «отдельной» ширины */
.fm-shell > .hub-shell-chrome {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--hub-chrome-pad-x);
  padding-right: var(--hub-chrome-pad-x);
  box-sizing: border-box;
}
.app.hub-shell {
  padding-left: 0;
  padding-right: 0;
}
.app.hub-shell > .hub-shell-chrome {
  padding-left: var(--hub-chrome-pad-x);
  padding-right: var(--hub-chrome-pad-x);
  box-sizing: border-box;
}
.app.hub-shell > .hub-top,
.app.hub-shell > .hub-panel {
  padding-left: var(--hub-chrome-pad-x);
  padding-right: var(--hub-chrome-pad-x);
}
body.hub-slider-page > .hub-shell-chrome,
body.fm-ts .fm-shell > .hub-shell-chrome {
  padding-top: var(--hub-chrome-pad-y);
  padding-bottom: 10px;
}

@media (max-width: 960px) {
  .hub-topbar {
    grid-template-columns:
      minmax(0, 1fr)
      var(--hub-prod-w)
      var(--hub-act-w);
  }
  .hub-objbar {
    grid-column: 1 / -1;
    max-width: none;
    order: 5;
  }
}
@media (max-width: 560px) {
  :root {
    --hub-obj-w: 1fr;
    --hub-prod-w: 100px;
    --hub-act-w: 72px;
  }
}