/* Header v2 — Figma «Sidebar - header» / AppShell-v23 (4441:329024).
   Токены сняты с get_variable_defs узлов Tabs и Header. */
.hv2-shell{
  --hv2-bg-page:#f3f4f6; --hv2-bg-surface:#ffffff;
  --hv2-text-primary:#001029; --hv2-text-secondary:rgba(0,16,41,.65);
  --hv2-border:#d9d9d9; --hv2-action:#007bff;
  --hv2-backdrop:rgba(0,16,41,.45); --hv2-white:#fff;
  --hv2-bg-selected:#e6f6ff; --hv2-border-strong:#c7cdd4;
  --hv2-status-error:#dd0404; --hv2-bg-elevated:#fff;
  --hv2-bg-hover:rgba(0,16,41,.06);
  --hv2-shadow-card:0 4px 16px rgba(0,0,0,.12);
  font-family:Rubik,system-ui,sans-serif;
  flex:0 0 auto;
}
/* сайдбар живёт вне .hv2-shell — те же токены объявляем и на нём */
.hv2-side{
  --hv2-bg-page:#f3f4f6; --hv2-bg-surface:#ffffff;
  --hv2-text-primary:#001029; --hv2-text-secondary:rgba(0,16,41,.65);
  --hv2-border:#d9d9d9; --hv2-action:#007bff;
  --hv2-bg-selected:#e6f6ff; --hv2-border-strong:#c7cdd4;
  --hv2-status-error:#dd0404; --hv2-bg-hover:rgba(0,16,41,.06);
  --hv2-shadow-card:0 4px 16px rgba(0,0,0,.12);
}
.hv2-shell[data-theme="dark"],.hv2-side[data-theme="dark"]{
  --hv2-bg-page:#21212b; --hv2-bg-surface:#2b2b34;
  --hv2-text-primary:#ffffff; --hv2-text-secondary:rgba(255,255,255,.65);
  --hv2-border:#424242; --hv2-action:#4ca1de;
  --hv2-bg-selected:#253e51; --hv2-border-strong:#4b5563;
  /* парная к light rgba(0,16,41,.06): 6% от text-primary текущей темы */
  --hv2-bg-hover:rgba(255,255,255,.06);
  --hv2-shadow-card:0 4px 16px rgba(0,0,0,.32);
  --hv2-bg-elevated:#2b2b34;
}

/* иконки: инлайн-svg из Figma, позиция — inset'ы макета, цвет — currentColor */
.hv2-i{position:relative;display:inline-block;flex:0 0 auto;overflow:hidden}
.hv2-i>svg{position:absolute;left:0;top:0;display:block}

/* ------------------------------------------------------------- Tabs ---- */
.hv2-tabs-strip{
  height:35px;display:flex;align-items:center;gap:10px;
  background:var(--hv2-bg-surface);
}
.hv2-tab-list{
  display:flex;align-items:center;height:100%;padding-top:5px;
  overflow:hidden;
}
.hv2-tab{
  height:30px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:8px 8px 0 0;flex:0 0 auto;
  border:1px solid transparent;border-bottom:0;box-sizing:border-box;
}
.hv2-tab-wrap{
  display:flex;align-items:center;gap:5px;padding:0 12px;flex:0 0 auto;
  color:var(--hv2-text-secondary);
}
.hv2-tab-wrap.has-divider{border-right:1px solid var(--hv2-border)}
/* иконки неактивного таба выгружены с opacity .65 — базой должен быть
   text-primary, иначе .65 наложится на уже приглушённый text-secondary */
.hv2-tab:not(.is-active) .hv2-tab-wrap .hv2-i{color:var(--hv2-text-primary)}
/* Hover неактивного таба — Figma Tab-2 State=Hover (4457:342785):
   фон bg-hover, разделитель уходит */
.hv2-tab:not(.is-active):hover{background:var(--hv2-bg-hover);cursor:pointer}
.hv2-tab:not(.is-active):hover .hv2-tab-wrap{border-right-color:transparent}
.hv2-tab-label{
  font:400 13px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  white-space:nowrap;color:inherit;
}
.hv2-tab.is-active{
  background:var(--hv2-bg-page);
  border-color:var(--hv2-border);
  box-shadow:var(--hv2-shadow-card);
}
.hv2-tab.is-active .hv2-tab-wrap{color:var(--hv2-action)}
.hv2-plus{margin-left:0;color:var(--hv2-text-primary);flex:0 0 auto}

/* ----------------------------------------------------------- Header ---- */
.hv2-header{
  height:34px;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--hv2-bg-page);box-sizing:border-box;
}
.hv2-doc-title{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:5px;
  padding-left:5px;overflow:hidden;white-space:nowrap;
  color:var(--hv2-text-primary);
}
.hv2-title{
  font:500 14px/19px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  overflow:hidden;text-overflow:ellipsis;
}
.hv2-subtitle{
  display:flex;align-items:center;gap:5px;
  font:400 12px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  overflow:hidden;
}
.hv2-sep{text-transform:uppercase}

.hv2-utils{display:flex;align-items:center;gap:15px;height:100%;flex:0 0 auto}
.hv2-role{display:flex;align-items:center;gap:5px}
.hv2-role-label{
  font:400 14px/19px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  color:var(--hv2-text-primary);white-space:nowrap;
}
.hv2-role-pill{
  height:24px;display:inline-flex;align-items:center;justify-content:center;
  padding:5px 10px;box-sizing:border-box;
  background:var(--hv2-action);border:1px solid var(--hv2-action);
  border-radius:16px;
  font:500 13px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  color:var(--hv2-white);white-space:nowrap;
}
/* в макете у флага рамка, но на прототипе она давала двойной кант
   (у самой svg-иконки уже есть светлый край) — убрали */
.hv2-locale{
  width:18px;height:16px;display:block;overflow:hidden;flex:0 0 auto;
  border:0;border-radius:4px;box-sizing:border-box;
}
.hv2-locale img{width:100%;height:100%;object-fit:cover;display:block}
/* дзвінок і перемикач теми — --color-action-primary */
.hv2-icon-btn{
  display:inline-flex;align-items:center;padding:0;border:0;background:none;
  cursor:pointer;color:var(--hv2-action);flex:0 0 auto;
}
.hv2-icon-btn:hover{opacity:.75}
.hv2-user .hv2-i{color:var(--hv2-text-primary)}

.hv2-user-wrap{position:relative;flex:0 0 auto}
.hv2-user{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:0;border:0;background:none;cursor:pointer;font:inherit;
}
.hv2-avatar{
  width:24px;height:24px;border-radius:12px;flex:0 0 auto;box-sizing:border-box;
  background:var(--hv2-backdrop);border:1px solid var(--hv2-border);
}
.hv2-user-name,.hv2-user-balance{
  font:400 14px/1.47 Rubik,system-ui,sans-serif;
  color:var(--hv2-text-primary);white-space:nowrap;
}

/* ------------------------------------------- UserMenu (4472:343870) ---- */
.hv2-usermenu{
  position:absolute;top:calc(100% + 4px);right:0;z-index:2500;min-width:169px;
  display:flex;flex-direction:column;padding:2px;box-sizing:border-box;
  background:var(--hv2-bg-elevated);border-radius:8px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.hv2-usermenu[hidden]{display:none}
.hv2-usermenu-opt{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  margin:0 8px;width:calc(100% - 16px);
  padding:5px 4px;border:0;background:none;border-radius:8px;cursor:pointer;
  font:400 13px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  color:var(--hv2-text-primary);text-align:left;
}
.hv2-usermenu-opt:hover{background:var(--hv2-bg-selected)}

/* ------------------------------------ Sidebar (4503:347200 / 348196) --- */
/* рельса 60px — держит место в потоке */
.hv2-side{
  position:relative;flex:0 0 auto;width:60px;align-self:stretch;
  font-family:Rubik,system-ui,sans-serif;
}
/* сама панель раскрывается по hover ПОВЕРХ контента (макет 4441:329025) */
.hv2-side-panel{
  position:absolute;top:0;bottom:0;left:0;width:60px;
  display:flex;flex-direction:column;justify-content:space-between;
  box-sizing:border-box;overflow:hidden;z-index:400;
  background:var(--hv2-bg-surface);box-shadow:var(--hv2-shadow-card);
  transition:width .18s ease;
}
/* .is-open вешает JS по mouseenter/focusin — одно условие и на ширину,
   и на показ подписей, иначе состояния расходятся */
.hv2-side-panel.is-open{width:240px}
.hv2-side-tree{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.hv2-side-logo{
  height:36px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.hv2-side-logo svg{width:36px;height:24px;display:block}
.hv2-side-version{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:5px 8px;
  font:400 13px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;
  color:var(--hv2-action);white-space:nowrap;
}
/* реальный номер версии длиннее макетного «5.71.870» — в 60px ужимаем */
.hv2-side-panel:not(.is-open) .hv2-side-version{font-size:11px}

/* строка меню — ровно 32px: иконка 16 + padding 8/8 (макет) */
.hv2-nav-row{
  position:relative;box-sizing:border-box;width:100%;height:32px;
  display:flex;align-items:center;gap:6px;
  padding:8px 8px 8px 12px;border:0;background:none;cursor:pointer;
  color:var(--hv2-text-primary);text-align:left;
}
.hv2-nav-row:hover{background:var(--hv2-bg-hover)}
.hv2-nav-row.is-active{color:var(--hv2-action)}
.hv2-nav-label{
  flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 13px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;color:inherit;
}
/* два бейджа наезжают друг на друга: в макете у первого mr:-3px и z-index 2,
   у второго z-index 1 — т.е. синий лежит поверх красного (isolate у контейнера) */
.hv2-nav-badges{
  display:flex;align-items:center;height:16px;flex:0 0 auto;isolation:isolate;
}
.hv2-nav-badges .hv2-badge{position:relative;z-index:1}
.hv2-nav-badges .hv2-badge:not(:last-child){margin-right:-3px;z-index:2}
.hv2-nav-caret{
  display:flex;align-items:center;flex:0 0 auto;color:var(--hv2-text-primary);
  transition:transform .15s ease;
}
.hv2-nav-group.is-expanded>.hv2-nav-row .hv2-nav-caret{transform:rotate(180deg)}
.hv2-badge{
  display:inline-flex;align-items:center;justify-content:center;height:16px;
  padding:0 5px;box-sizing:border-box;border-radius:100px;
  font:400 12px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;color:#fff;
}
.hv2-badge.is-primary{background:var(--hv2-action)}
.hv2-badge.is-error{background:var(--hv2-status-error)}
/* красная точка — свёрнутый вид (макет 60px: 8px, left 39.5, top 3) */
.hv2-nav-dot{
  position:absolute;left:39.5px;top:3px;width:8px;height:8px;border-radius:100px;
  background:var(--hv2-status-error);display:none;
}

/* дочерние пункты — 32px: 12px inner + padding 2/2 */
.hv2-nav-children{display:none;flex-direction:column}
.hv2-nav-group.is-expanded>.hv2-nav-children{display:flex}
.hv2-nav-sub{
  box-sizing:border-box;width:100%;height:32px;display:flex;align-items:center;
  padding:2px 3px;border:0;background:none;cursor:pointer;text-align:left;
}
.hv2-nav-sub-inner{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;
  /* отступ = скрытые caret 8 + eye 12 и два gap 6 (макет) */
  padding:6px 25px 6px 32px;border-radius:8px;box-sizing:border-box;
  color:var(--hv2-text-secondary);
}
.hv2-nav-sub:hover .hv2-nav-sub-inner{background:var(--hv2-bg-hover)}
.hv2-nav-sub.is-active .hv2-nav-sub-inner{
  background:var(--hv2-bg-selected);color:var(--hv2-action);
}
.hv2-nav-sub-label{
  flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 12px/16px Rubik,system-ui,sans-serif;letter-spacing:.13px;color:inherit;
}

/* свёрнутое состояние (пока нет hover): только иконки,
   активный пункт — пилюля bg-selected (макет Panel 60px) */
.hv2-side-panel:not(.is-open) .hv2-nav-label,
.hv2-side-panel:not(.is-open) .hv2-nav-badges,
.hv2-side-panel:not(.is-open) .hv2-nav-caret,
.hv2-side-panel:not(.is-open) .hv2-nav-children{display:none}
.hv2-side-panel:not(.is-open) .hv2-nav-row{
  justify-content:center;padding:8px;
}
.hv2-side-panel:not(.is-open) .hv2-nav-dot.is-on{display:block}
/* пилюля вокруг иконки, а не padding на самой .hv2-i:
   у .hv2-i внутри абсолютно спозиционированный svg, и padding сдвигал бы его
   от края padding-box — иконка уезжала из центра */
.hv2-nav-pill{display:contents}
.hv2-side-panel:not(.is-open) .hv2-nav-row.is-active{
  padding:2px 4px;background:none;
}
.hv2-side-panel:not(.is-open) .hv2-nav-row.is-active .hv2-nav-pill{
  display:flex;align-items:center;justify-content:center;
  flex:1 0 0;align-self:stretch;border-radius:8px;
  background:var(--hv2-bg-selected);
}
/* подписи не должны переноситься, пока панель ещё узкая */
.hv2-side-panel .hv2-nav-label,.hv2-side-panel .hv2-nav-sub-label{white-space:nowrap}

/* ------------------------------------------------- фоны по макету ------ */
/* табы и сайдбар — bg-surface, вся остальная страница — bg-page */
body[data-hv2-theme="light"]{--hv2-page-bg:#f3f4f6}
body[data-hv2-theme="dark"]{--hv2-page-bg:#21212b}
body[data-hv2-theme] .ant-layout,
body[data-hv2-theme] .ant-layout-content{background:var(--hv2-page-bg) !important}

/* пресет-табы над таблицей приводим к высоте верхних табов: полоса 35, таб 30 */
body[data-hv2-theme] .ant-layout-content .ant-tabs-card>.ant-tabs-nav{
  height:35px;min-height:35px;
}
body[data-hv2-theme] .ant-layout-content .ant-tabs-card>.ant-tabs-nav .ant-tabs-tab{
  height:30px;min-height:30px;padding-top:0;padding-bottom:0;
}

/* строки таблицы — bg-surface. Правим переменные ag-grid, а не .ag-row,
   чтобы состояния строк (hover / selected / подсветка) продолжали работать */
body[data-hv2-theme="light"]{--hv2-surface-bg:#ffffff}
body[data-hv2-theme="dark"]{--hv2-surface-bg:#2b2b34}
body[data-hv2-theme] .ag-root-wrapper{
  --ag-background-color:var(--hv2-surface-bg);
  --ag-data-background-color:var(--hv2-surface-bg);
  --ag-odd-row-background-color:var(--hv2-surface-bg);
}