/* ════════════════════════════════════════════════════════════════════
   TOPBAR v2 — единый хедер по «Хедер · варианты.html» (Вариант 1 + Mob C).
   Сквозной через все страницы, mobile-drawer на ≤ 760px.
   ════════════════════════════════════════════════════════════════════ */
.topbar-v2{
  --tb2-bg-card:#fff; --tb2-bg-app:#f6f7f9;
  --tb2-border:#e9ecf1; --tb2-border-strong:#e2e8f0;
  --tb2-divider:#f1f3f7; --tb2-hover:#f8fafc;
  --tb2-text:#0f172a; --tb2-text-muted:#64748b; --tb2-text-light:#94a3b8; --tb2-text-faint:#cbd5e1;
  --tb2-accent:#ea580c; --tb2-accent-soft:#fff5ee; --tb2-accent-line:#fed7aa;
  --tb2-success:#16a34a;
  --tb2-danger:#dc2626; --tb2-danger-soft:#fef2f2;
  --tb2-shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --tb2-shadow-lg:0 18px 40px rgba(15,23,42,.18);
  --tb2-font:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  height: 60px; padding: 0 24px;
  display: flex; align-items: center; gap: 8px;
  background: var(--tb2-bg-card); border-bottom: 1px solid var(--tb2-border);
  font-family: var(--tb2-font);
  position: sticky; top: 0; z-index: 30;
}

.tb2-demo-banner{
  background:#f59e0b; color:#1e293b;
  text-align:center; padding:7px 16px;
  font: 600 13px var(--tb2-font, 'Inter', system-ui, sans-serif);
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.tb2-demo-banner__btn{
  height: 26px; padding: 0 12px;
  font: 600 12px var(--tb2-font); border-radius: 6px;
  background: transparent; color: #1e293b; border: 1px solid rgba(30,41,59,.2);
  display: inline-flex; align-items: center;
}
.tb2-demo-banner__btn--primary{ background: #1e293b; color: #fff; border-color: #1e293b; }

.topbar-v2 .tb2-burger{
  display: none;
  width: 36px; height: 36px; border-radius: 8px;
  border: 0; background: 0; color: var(--tb2-text); cursor: pointer;
  align-items: center; justify-content: center; flex: 0 0 auto;
}
.topbar-v2 .tb2-burger:hover{ background: var(--tb2-hover); }

.topbar-v2 .tb2-brand{
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 16px var(--tb2-font); letter-spacing: -.01em; color: var(--tb2-text);
  flex: 0 0 auto; text-decoration: none;
}
.topbar-v2 .tb2-brand__mark{
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--tb2-accent); color: #fff;
  display: grid; place-items: center; font: 700 13px var(--tb2-font);
}
.topbar-v2 .tb2-brand__logo{ height: 24px; width: auto; object-fit: contain; }
.topbar-v2 .tb2-brand__name{ font: 700 16px var(--tb2-font); }
/* Глобальный (а не только под .topbar-v2) — чтобы и в drawer работал */
.tb2-brand__name--accent{ color: #ea580c; font-weight: 700; }
.topbar-v2 .tb2-brand__sep{ opacity: .35; font-weight: 300; margin: 0 2px; }
.topbar-v2 .tb2-brand__sub{ opacity: .5; font-size: .75em; font-weight: 400; }

.topbar-v2 .tb2-brand-div{ width: 1px; height: 24px; background: var(--tb2-border); margin: 0 8px; flex: 0 0 auto; }

.topbar-v2 .tb2-nav{
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0; overflow: hidden;
}
.topbar-v2 .tb2-nav-link{
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 0; background: 0;
  font: 600 13.5px var(--tb2-font); color: var(--tb2-text-muted);
  border-radius: 8px; cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.topbar-v2 .tb2-nav-link:hover{ color: var(--tb2-text); background: var(--tb2-hover); }
.topbar-v2 .tb2-nav-link.is-active{ color: var(--tb2-accent); background: var(--tb2-accent-soft); }

.topbar-v2 .tb2-right{
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}

.topbar-v2 .tb2-pending{
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 10px;
  background: var(--tb2-danger-soft); color: var(--tb2-danger);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: 999px;
  font: 600 11.5px var(--tb2-font); text-decoration: none;
  white-space: nowrap;
}

/* Branch selector */
.topbar-v2 .tb2-branch-wrap{ position: relative; flex: 0 0 auto; }
.topbar-v2 .tb2-branch{
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  background: #fff; border: 1px solid var(--tb2-border-strong);
  border-radius: 9px;
  font: 500 13px var(--tb2-font); color: var(--tb2-text);
  cursor: pointer; max-width: 240px;
}
.topbar-v2 .tb2-branch:hover{ border-color: var(--tb2-text-faint); }
.topbar-v2 .tb2-branch-wrap.is-open .tb2-branch{ border-color: var(--tb2-text); box-shadow: 0 0 0 3px rgba(15,23,42,.06); }
.topbar-v2 .tb2-branch__icon{ color: var(--tb2-text-muted); flex: 0 0 auto; }
.topbar-v2 .tb2-branch__label{ flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-v2 .tb2-branch__chev{ color: var(--tb2-text-light); flex: 0 0 auto; transition: transform .15s; }
.topbar-v2 .tb2-branch-wrap.is-open .tb2-branch__chev{ transform: rotate(180deg); }

.topbar-v2 .tb2-branch-dd{
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 340px; background: #fff;
  border: 1px solid var(--tb2-border);
  border-radius: 12px; box-shadow: var(--tb2-shadow-lg);
  z-index: 40; overflow: hidden;
  display: none;
}
.topbar-v2 .tb2-branch-wrap.is-open .tb2-branch-dd{ display: block; }
.topbar-v2 .tb2-branch-dd__search{
  position: relative; padding: 10px 10px 8px;
  border-bottom: 1px solid var(--tb2-divider);
}
.topbar-v2 .tb2-branch-dd__search-icon{
  position: absolute; left: 21px; top: 50%; transform: translateY(-50%);
  color: var(--tb2-text-light); pointer-events: none;
}
.topbar-v2 .tb2-branch-dd__search input{
  width: 100%; height: 34px;
  padding: 0 10px 0 32px;
  background: var(--tb2-bg-app); border: 1px solid var(--tb2-border);
  border-radius: 7px;
  font: 500 13px var(--tb2-font); color: var(--tb2-text);
}
.topbar-v2 .tb2-branch-dd__search input:focus{
  outline: none; border-color: var(--tb2-text); background: #fff;
  box-shadow: 0 0 0 3px rgba(15,23,42,.06);
}
.topbar-v2 .tb2-branch-dd__meta{
  padding: 10px 14px 6px; font: 500 11.5px var(--tb2-font); color: var(--tb2-text-light);
  font-feature-settings: 'tnum' 1;
}
.topbar-v2 .tb2-branch-dd__list{ max-height: 320px; overflow-y: auto; padding: 4px; }
.topbar-v2 .tb2-branch-dd__item{
  display: grid; grid-template-columns: 1fr auto 16px;
  gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 7px;
  cursor: pointer; background: 0; border: 0;
  width: 100%; text-align: left;
}
.topbar-v2 .tb2-branch-dd__item:hover{ background: var(--tb2-hover); }
.topbar-v2 .tb2-branch-dd__item.is-on{ background: var(--tb2-accent-soft); }
.topbar-v2 .tb2-branch-dd__item-name{ font: 600 13px var(--tb2-font); }
.topbar-v2 .tb2-branch-dd__item-id{ font: 500 11.5px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--tb2-text-light); font-feature-settings: 'tnum' 1; }
.topbar-v2 .tb2-branch-dd__item-check{ color: var(--tb2-success); }
.topbar-v2 .tb2-branch-dd__foot{
  padding: 8px 10px; border-top: 1px solid var(--tb2-divider);
  display: flex; justify-content: space-between; align-items: center;
}
.topbar-v2 .tb2-branch-dd__foot a{
  background: 0; border: 0; padding: 6px 8px; cursor: pointer;
  font: 600 12.5px var(--tb2-font); color: var(--tb2-accent);
  border-radius: 6px; text-decoration: none;
}
.topbar-v2 .tb2-branch-dd__foot a:hover{ background: var(--tb2-accent-soft); }

/* Add-branch button */
.topbar-v2 .tb2-btn-add{
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: var(--tb2-accent); color: #fff;
  border: 0; border-radius: 8px;
  font: 700 13px var(--tb2-font); cursor: pointer;
  flex: 0 0 auto; white-space: nowrap; text-decoration: none;
}
.topbar-v2 .tb2-btn-add:hover{ background: #c2410c; }

/* User pill */
.topbar-v2 .tb2-user-wrap{ position: relative; flex: 0 0 auto; }
.topbar-v2 .tb2-user{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 4px 0 10px; height: 36px;
  background: 0; border: 0; border-radius: 8px;
  cursor: pointer; flex: 0 0 auto;
}
.topbar-v2 .tb2-user:hover{ background: var(--tb2-hover); }
.topbar-v2 .tb2-user__avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tb2-accent-soft); color: var(--tb2-accent);
  display: grid; place-items: center; font: 600 11px var(--tb2-font);
}
.topbar-v2 .tb2-user__name{ font: 600 13px var(--tb2-font); color: var(--tb2-text); }
.topbar-v2 .tb2-user__chev{ color: var(--tb2-text-light); flex: 0 0 auto; transition: transform .15s; }
.topbar-v2 .tb2-user-wrap.is-open .tb2-user__chev{ transform: rotate(180deg); }
.topbar-v2 .tb2-user-dd{
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 240px; background: #fff;
  border: 1px solid var(--tb2-border);
  border-radius: 12px; box-shadow: var(--tb2-shadow-lg);
  z-index: 40; padding: 4px;
  display: none;
}
.topbar-v2 .tb2-user-wrap.is-open .tb2-user-dd{ display: block; }
.topbar-v2 .tb2-user-dd__head{
  padding: 12px 12px 10px; border-bottom: 1px solid var(--tb2-divider);
  margin-bottom: 4px;
}
.topbar-v2 .tb2-user-dd__name{ font: 600 13.5px var(--tb2-font); }
.topbar-v2 .tb2-user-dd__email{ font: 500 12px var(--tb2-font); color: var(--tb2-text-muted); margin-top: 2px; }
.topbar-v2 .tb2-user-dd__item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font: 500 13px var(--tb2-font); color: var(--tb2-text);
  border: 0; background: 0; width: 100%; text-align: left; cursor: pointer;
  text-decoration: none;
}
.topbar-v2 .tb2-user-dd__item:hover{ background: var(--tb2-hover); }
.topbar-v2 .tb2-user-dd__item svg{ color: var(--tb2-text-muted); flex: 0 0 auto; }
.topbar-v2 .tb2-user-dd__item--danger{ color: var(--tb2-danger); }
.topbar-v2 .tb2-user-dd__item--danger svg{ color: var(--tb2-danger); }
.topbar-v2 .tb2-user-dd__badge{ margin-left: auto; background: var(--tb2-danger-soft); color: var(--tb2-danger); border: 1px solid rgba(220,38,38,.2); padding: 1px 6px; border-radius: 999px; font: 700 10px var(--tb2-font); }
.topbar-v2 .tb2-user-dd__sep{ height: 1px; background: var(--tb2-divider); margin: 4px 0; }

/* Icon-only logout button (desktop) */
.topbar-v2 .tb2-icon-btn{
  width: 36px; height: 36px;
  border: 0; background: 0; border-radius: 8px;
  color: var(--tb2-text-light); display: inline-grid; place-items: center;
  cursor: pointer; flex: 0 0 auto; text-decoration: none;
}
.topbar-v2 .tb2-icon-btn:hover{ background: var(--tb2-hover); color: var(--tb2-text); }

/* Mobile drawer */
.tb2-mobile-back{
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 49; opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.tb2-mobile-back.is-open{ opacity: 1; pointer-events: auto; }
.tb2-mobile-drawer{
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; background: #fff;
  z-index: 50;
  padding: 18px 14px;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  box-shadow: 8px 0 24px rgba(15,23,42,.18);
  font-family: var(--tb2-font, 'Inter', system-ui, sans-serif);
}
.tb2-mobile-drawer.is-open{ transform: translateX(0); }
.tb2-mobile-drawer__head{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.tb2-mobile-drawer__close{
  margin-left: auto;
  width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: 0; color: var(--tb2-text-muted, #64748b);
  display: grid; place-items: center; cursor: pointer;
}
.tb2-mobile-drawer__close:hover{ background: var(--tb2-hover, #f8fafc); }
.tb2-mobile-drawer__user{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--tb2-bg-app, #f6f7f9);
  border-radius: 8px; margin-bottom: 14px;
}
.tb2-mobile-drawer__user-name{ font: 600 13.5px var(--tb2-font); color: var(--tb2-text, #0f172a); }
.tb2-mobile-drawer__user-meta{ font: 500 11.5px var(--tb2-font); color: var(--tb2-text-light, #94a3b8); margin-top: 1px; }
.tb2-mobile-drawer__nav{ display: flex; flex-direction: column; gap: 2px; }
.tb2-mobile-drawer__link{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  font: 600 14px var(--tb2-font); color: var(--tb2-text, #0f172a);
  text-decoration: none;
  background: 0; border: 0; cursor: pointer;
  width: 100%; text-align: left;
}
.tb2-mobile-drawer__link:hover{ background: var(--tb2-hover, #f8fafc); }
.tb2-mobile-drawer__link.is-active{ background: var(--tb2-accent-soft, #fff5ee); color: var(--tb2-accent, #ea580c); }
.tb2-mobile-drawer__link--danger{ color: var(--tb2-text-muted, #64748b); }
.tb2-mobile-drawer__foot{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tb2-divider, #f1f3f7); display: flex; flex-direction: column; gap: 2px; }
body.has-tb2-drawer{ overflow: hidden; }

/* Branch sheet — defaults для desktop (на мобиле перекрываются ниже) */
.topbar-v2 .tb2-branch-dd__handle,
.topbar-v2 .tb2-branch-dd__title{ display: none; }
.tb2-branch-back{ display: none; }

/* Mobile breakpoint — финальное решение:
   1) Свёрнутая шапка (Mob A без лупы): бургер · бренд · аватар
   2) Бургер → drawer (Mob C): меню + «Сменить филиал» внизу
   3) Тап по «Сменить филиал» в drawer → bottom-sheet (Mob B sheet)
   В шапке branch и +Филиал НЕ показываем. */
@media (max-width: 760px){
  /* shell: 52px, padding 0 12px, gap 10px */
  .topbar-v2{ height: 52px; padding: 0 12px; gap: 10px; }

  /* Burger 36×36 (.mh-a__icon-btn) */
  .topbar-v2 .tb2-burger{
    display: inline-grid; place-items: center;
    width: 36px; height: 36px; border-radius: 8px;
    border: 0; background: 0; color: var(--tb2-text-muted);
  }
  .topbar-v2 .tb2-burger:hover{ background: var(--tb2-hover); color: var(--tb2-text); }

  /* Бренд показываем (только название, без S-марки уже убрано) */
  .topbar-v2 .tb2-brand{ display: inline-flex; }
  .topbar-v2 .tb2-brand__name{ font-size: 14px; }
  .topbar-v2 .tb2-brand__sep,
  .topbar-v2 .tb2-brand__sub{ display: none; }

  /* Скрыто на мобиле в шапке: разделитель · меню · badge · branch-кнопка ·
     +Филиал · имя+chev в user · icon-logout.
     ВНИМАНИЕ: `.tb2-branch-wrap` НЕ скрываем — внутри неё лежит sheet,
     которая открывается из drawer'а. Скрываем только саму trigger-кнопку
     `.tb2-branch`. Wrap делаем «position:absolute; size:0» чтобы не
     занимал место в шапке. */
  .topbar-v2 .tb2-brand-div,
  .topbar-v2 .tb2-nav,
  .topbar-v2 .tb2-pending,
  .topbar-v2 .tb2-branch,
  .topbar-v2 .tb2-btn-add,
  .topbar-v2 .tb2-user__name,
  .topbar-v2 .tb2-user__chev,
  .topbar-v2 .tb2-icon-btn{ display: none; }

  .topbar-v2 .tb2-branch-wrap{
    position: absolute; width: 0; height: 0;
    overflow: visible; pointer-events: none;
  }
  .topbar-v2 .tb2-branch-wrap > *{ pointer-events: auto; }

  /* Avatar 30×30 без dropdown — клик уведёт в /settings#account */
  .topbar-v2 .tb2-right{ margin-left: auto; gap: 8px; }
  .topbar-v2 .tb2-user{ padding: 0; background: 0; border: 0; }
  .topbar-v2 .tb2-user__avatar{
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--tb2-accent-soft); color: var(--tb2-accent);
    display: grid; place-items: center;
    font: 600 11px var(--tb2-font);
  }

  /* Branch dropdown → bottom-sheet на мобиле (1:1 с .mh-sheet из дизайна) */
  .topbar-v2 .tb2-branch-dd{
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: none;
    max-height: 78%; height: auto;
    background: #fff;
    border: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(15,23,42,.12);
    padding: 6px 0 18px;
    transform: translateY(100%);
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
    display: flex !important; flex-direction: column;
    z-index: 60;
  }
  .topbar-v2 .tb2-branch-wrap.is-open .tb2-branch-dd{ transform: translateY(0); }
  .topbar-v2 .tb2-branch-dd__handle{
    display: block;
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--tb2-text-faint);
    margin: 6px auto 12px;
  }
  .topbar-v2 .tb2-branch-dd__title{
    display: block;
    padding: 0 18px 4px;
    font: 600 15px var(--tb2-font);
    color: var(--tb2-text);
  }
  .topbar-v2 .tb2-branch-dd__search{ padding: 0 14px 10px; border-bottom: 1px solid var(--tb2-divider); }
  .topbar-v2 .tb2-branch-dd__search-icon{ left: 26px; }
  .topbar-v2 .tb2-branch-dd__search input{ height: 38px; }
  .topbar-v2 .tb2-branch-dd__list{ max-height: none; flex: 1; padding: 6px; overflow-y: auto; }
  .topbar-v2 .tb2-branch-dd__item{ padding: 12px 12px; }
  .topbar-v2 .tb2-branch-dd__item-name{ font-size: 14px; }
  .topbar-v2 .tb2-branch-dd__foot{ padding: 12px 16px; flex-wrap: wrap; gap: 8px; }

  /* Backdrop под bottom-sheet */
  .tb2-branch-back{
    display: block;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 59;
    opacity: 0; pointer-events: none;
    transition: opacity .2s;
  }
  .tb2-branch-back.is-open{ opacity: 1; pointer-events: auto; }

  /* User dropdown тоже sheet-стиль */
  .topbar-v2 .tb2-user-dd{
    position: fixed; left: 12px; right: 12px; top: 60px;
    width: auto;
  }
}