:root {
  /* テナント配下のヘッダ（.tenant-header）の高さ。ページ側で sticky の top を決めるときに使う。
     上段バー h-16 の 64px + グローバルナビ（mt-3 + 44px + 下線 1px）の 57px。
     ヘッダの構成を変えたらこの値も追従する。 */
  --tenant-header-height: 121px;

  /* ページのコンテンツを詰める下限。これより狭い画面では、溢れた分を横スクロールで見せる。 */
  --tenant-content-min-width: 1100px;

  /* 画面右に固定 UI（会話ドロワー）が並ぶとき、ページ側が shell の utility でその幅に差し替える
     inset。fixed のヘッダ・フッターの右端、ページの右余白、スクロール範囲のスペーサーが
     この 1 つの値を参照する。 */
  --tenant-fixed-inset-right: 0px;
}

/*
 * ヘッダと main を収めるラッパー。ページ側が content_for :shell_class で中身の並べ方を差し替えても
 * 固定ヘッダぶんの余白は要るので、このクラスは常に当てる。
 */
.tenant-shell {
  /* fixed のヘッダはフローから外れるので、その高さぶんコンテンツを下げる。 */
  padding-top: var(--tenant-header-height);
}

/*
 * バリデーションエラーで再描画した画面で、lib/form_error_scroll.js がスクロールする先のエラー表示
 * （Shared::FormErrorHelper が data-form-error を付ける）。
 *
 * fixed のヘッダがコンテンツに重なるので、ヘッダの高さに 16px を足したぶん手前で止める。
 * JS で位置を計算せず scroll-margin-top にしたのは、ヘッダの高さを CSS 変数で持っているため。
 * モーダルは tenant-shell の外に置くので対象にならない。
 */
.tenant-shell [data-form-error] {
  scroll-margin-top: calc(var(--tenant-header-height) + 16px);
}

/*
 * ヘッダ（上段バー + グローバルナビ）。
 *
 * sticky ではなく fixed にしているのは、コンテンツ（.tenant-main）が下限を持ち、狭い画面では
 * ドキュメントごと横スクロールするため。sticky は縦方向にしか効かないので、横スクロールすると
 * ヘッダごと左へ流れて操作できなくなる。viewport 基準にすれば画面幅に収まったまま留まる。
 *
 * 右端は --tenant-fixed-inset-right に合わせる（フッターも同じ変数を見る）。右ドロワーと並ぶページは
 * shell に当てる utility でこの変数をドロワー幅に差し替え、ヘッダとフッターをドロワーの左端で止める。
 * 既定値（0px）は :root で宣言する。.tenant-header 自身に宣言すると、自要素の宣言が shell から
 * 継承する差し替え値より勝ってしまうため、ここには置かない。
 */
.tenant-header {
  @apply fixed left-0 top-0 z-40 bg-white;
  right: var(--tenant-fixed-inset-right);
}

/*
 * ページのコンテンツ。下限まで詰め、溢れた分はドキュメントの横スクロールで見せる。
 *
 * 下限はここだけに当てる。ヘッダやフッターに掛けると、そちらも縮まずに溢れて一緒に流れる。
 */
.tenant-main {
  min-width: var(--tenant-content-min-width);
}

/*
 * ドキュメントの横スクロール範囲を「コンテンツの下限 + 固定 UI の inset」まで広げるスペーサー
 * （レイアウトが main の直後に置く）。
 *
 * 右ドロワーと並ぶページは shell の margin-right で右余白を空けるが、margin はスクロール可能領域に
 * 算入されない。そのため、下限で溢れた main がドロワーの下に潜っても横スクロールバーが出ず、潜った
 * 部分を見る手段が無くなる（ドロワー幅 512px + 下限 1100px に対して viewport が 1612px 未満のとき）。
 * 幅を持つ実要素を置いて、潜ったぶんを右余白ごとスクロール範囲に含める。
 * ドロワーの無いページでは main の下限と同じ幅になり、スクロール範囲を変えない。
 */
.tenant-scroll-spacer {
  /* 高さ 0 のボックスはスクロール可能領域に算入されない（Chrome で実測）。1px の高さを持たせ、
     同量の負マージンで縦のレイアウトへの影響を打ち消す。 */
  height: 1px;
  margin-top: -1px;
  min-width: calc(var(--tenant-content-min-width) + var(--tenant-fixed-inset-right));
}

/* ヘッダ上段バー。どの立場でワークスペースを開いているか（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;
}