:root {
  /* テナント配下のヘッダ（sticky top-0）の高さ。ページ側で sticky の top を決めるときに使う。
     内訳は上段バー h-16 (64px) + グローバルナビ mt-3 (12px) + リンク pt-3 + leading-5 + pb-2.5 + border-b-2 (44px) + border-b (1px)。
     ヘッダの構成を変えたらこの値も追従する。 */
  --tenant-header-height: 121px;
}

/* ヘッダ上段バー。どの立場でワークスペースを開いているか（Tenant::AccessModeHelper#tenant_access_mode）で
   配色を変え、所属外のテナントを触っていることに気づけるようにする。立場ごとの差分はモディファイア側に集め、
   ビューは要素のクラス名だけを持つ。 */
.tenant-header-bar {
  @apply flex h-16 w-full items-center justify-between px-6;
}

/* 下線は border ではなく inset shadow で描く。border-b だと border-box が h-16 の
   コンテンツ領域を下線の分だけ縮め、items-center の中心が上へズレる。Figma（Header,
   node 1712:5014）の stroke はレイアウトに影響しないので、64px の中で中央揃えを保った
   まま線だけを重ねる。 */
.tenant-header-bar--member {
  @apply bg-white;
  box-shadow: inset 0 -1px 0 0 var(--color-gray-200);
}

.tenant-header-bar--support {
  @apply bg-white;
  box-shadow: inset 0 -2px 0 0 var(--color-red-600);
}

.tenant-header-bar--operator {
  @apply bg-gray-950;
}

/* ワードマークは単色の SVG なので、黒地では filter で白へ反転させる。 */
.tenant-header-bar__wordmark {
  @apply h-6.25 w-20 object-contain object-left;
}

.tenant-header-bar--operator .tenant-header-bar__wordmark {
  @apply brightness-0 invert;
}

.tenant-header-bar__mode-badge {
  @apply whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-semibold text-white;
}

.tenant-header-bar--support .tenant-header-bar__mode-badge {
  @apply bg-red-600;
}

.tenant-header-bar--operator .tenant-header-bar__mode-badge {
  @apply border border-white;
}

.tenant-header-bar__workspace-name {
  @apply whitespace-nowrap text-base font-normal text-gray-900;
}

.tenant-header-bar--operator .tenant-header-bar__workspace-name {
  @apply text-white;
}