@charset "UTF-8";
/* Тема MeetWe для UI OpenBao.
   Токены взяты из дизайн-системы мессенджера (Figma B2B-Platform, тема входа
   Keycloak, лендинг meetwe.org): шрифт Geist, primary #2563eb, нейтральная
   серая шкала без синевы, скругления 8/10/12. UI остаётся светлым — так он
   спроектирован; тёмная тема есть у портала входа и страницы Keycloak. */

@font-face {
  font-family: 'Geist';
  src: url('/meetwe/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mw-primary: #2563eb;
  --mw-primary-hover: #1d4ed8;
  --mw-primary-active: #1e40af;
  --mw-primary-soft: #dbeafe;
  --mw-primary-faint: #eff6ff;
  --mw-ring: rgba(37, 99, 235, 0.2);

  --mw-bg: #ffffff;
  --mw-surface: #fafafa;
  --mw-surface-strong: #f5f5f5;
  --mw-border: #e5e5e5;
  --mw-border-strong: #d4d4d4;
  --mw-fg: #0a0a0a;
  --mw-fg-muted: #737373;
  --mw-fg-faint: #a3a3a3;

  --mw-sidenav: #171717;
  --mw-sidenav-hover: #262626;
  --mw-sidenav-active: #2f2f2f;
  --mw-sidenav-border: #262626;

  --mw-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mw-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mw-radius-sm: 8px;
  --mw-radius: 10px;
  --mw-radius-lg: 12px;

  /* Токены Helios (HDS), на которых построены компоненты UI. */
  --token-color-palette-blue-50: var(--mw-primary-faint);
  --token-color-palette-blue-100: var(--mw-primary-soft);
  --token-color-palette-blue-200: var(--mw-primary);
  --token-color-palette-blue-300: var(--mw-primary-hover);
  --token-color-palette-blue-400: var(--mw-primary-active);
  --token-color-foreground-action: var(--mw-primary);
  --token-color-foreground-action-hover: var(--mw-primary-hover);
  --token-color-foreground-action-active: var(--mw-primary-active);
  --token-color-focus-action-internal: var(--mw-primary);
  --token-color-focus-action-external: #93c5fd;
  --token-color-surface-primary: var(--mw-bg);
  --token-color-surface-faint: var(--mw-surface);
  --token-color-surface-strong: var(--mw-surface-strong);
  --token-color-border-primary: var(--mw-border);
  --token-color-border-strong: var(--mw-border-strong);
  --token-color-foreground-primary: var(--mw-fg);
  --token-color-foreground-strong: var(--mw-fg);
  --token-color-foreground-faint: var(--mw-fg-muted);

  --token-side-nav-color-surface-primary: var(--mw-sidenav);
  --token-side-nav-color-surface-interactive-hover: var(--mw-sidenav-hover);
  --token-side-nav-color-surface-interactive-active: var(--mw-sidenav-active);
  --token-side-nav-color-foreground-primary: #fafafa;
  --token-side-nav-color-foreground-strong: #ffffff;
  --token-side-nav-color-foreground-faint: #a3a3a3;
  --token-side-nav-wrapper-border-color: var(--mw-sidenav-border);
  --token-side-nav-body-list-item-border-radius: var(--mw-radius-sm);
  --token-side-nav-toggle-button-border-radius: var(--mw-radius-sm);
  --token-side-nav-header-home-link-logo-size: 36px;

  --token-form-control-border-radius: var(--mw-radius-sm);
  --token-tabs-tab-border-radius: var(--mw-radius-sm);
  --token-tooltip-border-radius: var(--mw-radius-sm);

  --token-typography-font-stack-text: var(--mw-font);
  --token-typography-font-stack-display: var(--mw-font);
  --token-typography-display-500-font-family: var(--mw-font);
  --token-typography-display-400-font-family: var(--mw-font);
  --token-typography-display-300-font-family: var(--mw-font);
  --token-typography-display-200-font-family: var(--mw-font);
  --token-typography-display-100-font-family: var(--mw-font);
  --token-typography-body-300-font-family: var(--mw-font);
  --token-typography-body-200-font-family: var(--mw-font);
  --token-typography-body-100-font-family: var(--mw-font);
}

/* Типографика. */
body,
.ember-application,
button,
input,
select,
textarea,
.title,
.subtitle,
.label,
.button {
  font-family: var(--mw-font);
}

.is-font-mono,
code,
pre,
.console-ui-panel {
  font-family: var(--mw-font-mono);
}

.title {
  color: var(--mw-fg);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Кнопки, ссылки, поля. */
.button {
  border-radius: var(--mw-radius-sm);
  font-weight: 500;
}

.button.is-primary {
  background-color: var(--mw-primary);
  border-color: var(--mw-primary);
  box-shadow: none;
  color: #fff;
}

.button.is-primary:hover,
.button.is-primary:focus,
.button.is-primary.is-hovered {
  background-color: var(--mw-primary-hover);
  border-color: var(--mw-primary-hover);
  color: #fff;
}

.button.is-primary:active,
.button.is-primary.is-active {
  background-color: var(--mw-primary-active);
  border-color: var(--mw-primary-active);
}

.button.is-primary:focus-visible {
  box-shadow: 0 0 0 3px var(--mw-ring);
}

.input,
.textarea,
.select select {
  border-color: var(--mw-border-strong);
  border-radius: var(--mw-radius-sm);
  box-shadow: none;
  color: var(--mw-fg);
}

.input:focus,
.input.is-focused,
.textarea:focus,
.select select:focus {
  border-color: var(--mw-primary);
  box-shadow: 0 0 0 3px var(--mw-ring);
}

a,
.link,
.has-text-info,
.button.is-transparent.has-text-info {
  color: var(--mw-primary);
}

a:hover,
.link:hover,
.has-text-info:hover {
  color: var(--mw-primary-hover);
}

.has-text-grey,
.help {
  color: var(--mw-fg-muted) !important;
}

/* Страница входа: карточка как в теме Keycloak MeetWe. */
.splash-page-container {
  background: var(--mw-surface);
}

.splash-page-container .login-form.box {
  background: var(--mw-bg);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.splash-page-container .toolbar.toolbar-namespace-picker {
  background: var(--mw-surface-strong);
  border-color: var(--mw-border);
}

.splash-page-container .box.is-shadowless {
  box-shadow: none;
}

/* Логотип MeetWe вместо талисмана OpenBao. */
.brand-icon-large .openbao-logo,
.footer .openbao-logo,
.hds-side-nav .openbao-logo {
  display: none !important;
}

.brand-icon-large .hs-icon {
  display: block;
  width: 56px;
  height: 56px;
}

.brand-icon-large .hs-icon::before {
  content: '';
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: url('/meetwe/logo.svg') center / cover no-repeat;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.18);
}

.footer .hs-icon.hs-icon-l {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  margin-right: 6px;
}

.footer .hs-icon.hs-icon-l::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: url('/meetwe/logo.svg') center / cover no-repeat;
}

.footer {
  border-top: 1px solid var(--mw-border);
  color: var(--mw-fg-muted);
}

/* Боковая навигация после входа: логотип и имя вместо талисмана. */
.hds-side-nav__home-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.hds-side-nav__home-link .hs-icon {
  display: none;
}

.hds-side-nav__home-link::before {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: url('/meetwe/logo.svg') center / cover no-repeat;
}

.hds-side-nav__home-link::after {
  content: 'Митви Vault';
  font-family: var(--mw-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* HDS помечает панель классом is-minimized и на десктопе, поэтому подпись
   прячем только в действительно свёрнутой мобильной панели. */
.hds-side-nav--is-mobile.hds-side-nav--is-minimized .hds-side-nav__home-link::after {
  display: none;
}

/* Контейнер логотипа у HDS фиксированной ширины (96px) — освобождаем место
   под логотип с подписью. */
.hds-side-nav-header__logo-container {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0;
}

.hds-side-nav__home-link {
  width: auto;
}

.hds-side-nav__wrapper-header,
.hds-side-nav__wrapper-body,
.hds-side-nav__wrapper-footer {
  font-family: var(--mw-font);
}

.hds-side-nav__list-item-link {
  border-radius: var(--mw-radius-sm);
}

.hds-side-nav__list-item-link.active {
  background: var(--mw-sidenav-active);
}

.hds-side-nav__list-title {
  color: var(--mw-fg-faint);
}

/* Вкладки и бейджи. */
.hds-tabs__tab-button[aria-selected='true'],
.tabs li.is-active a {
  color: var(--mw-primary);
  border-bottom-color: var(--mw-primary);
}

.hds-badge--color-highlight {
  background: var(--mw-primary-soft);
  color: var(--mw-primary-active);
}

/* Карточки и панели контента. */
.box,
.hds-card__container {
  border-radius: var(--mw-radius);
}