/**
 * Global styles
 */

:root {
  --env-banner-height: 1.75rem;
  --brand-logo-fixed-top: 16px;
}

td {
  vertical-align: middle;
}

/* 球団ロゴ（全画面の左上に配置・変形させない） */
.brand-logo {
  display: inline-flex;
  align-items: center;
  background-color: #fff; /* 暗いサイドバー上でも視認できるよう白台座 */
  border-radius: 6px;
  padding: 4px 8px;
}

.brand-logo-img {
  display: block;
  width: auto; /* height のみ指定し viewBox 比を保持 */
}

/* ログイン画面など、サイドバーが無い画面用の左上固定配置。
   背景が明るいため白台座は不要（ロゴSVGの透過をそのまま活かす）。 */
.brand-logo-fixed {
  position: fixed;
  top: var(--brand-logo-fixed-top);
  left: 16px;
  z-index: 1030;
  padding: 0;
  background-color: transparent;
}

/* 参考情報(計算式)の演算子select: 左右余白を詰めて選択値を中央寄せ、矢印は小さく右端に寄せる */
.ref-formula-operator-col .form-select {
  padding-left: 0;
  padding-right: 0.9rem;
  text-align: center;
  text-align-last: center;
  background-position: right 0.3rem center;
  background-size: 10px 8px;
}

/* 本番環境バナー（EnvironmentBannerHelper#environment_banner）。
   画面最上部に固定するフル幅の赤帯。誤操作防止のため閉じられず、スクロールしても隠れない。
   ログイン画面（.login-page）は body 自体が flex 中央寄せのため、position: fixed で
   レイアウトモードに依存せずフル幅にする。 */
.env-banner {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1040; /* .app-header(1034)・サイドバーより前面、Bootstrap の modal より背面 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--env-banner-height);
  background-color: #b02a37;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* 固定バナーの分だけ本体を下げる。AdminLTE の .app-wrapper は min-height: 100vh のため、
   バナー分を差し引いて短いページで無意味な縦スクロールが出ないようにする */
.env-banner ~ .app-wrapper {
  margin-top: var(--env-banner-height);
  min-height: calc(100vh - var(--env-banner-height));
}

/* sticky サイドバー（.layout-fixed で top: 0 に張り付く）もバナー分下げる。
   これが無いとスクロール時にサイドバー上端（.sidebar-brand）がバナーの裏に潜り、
   max-height: 100vh のまま実効表示領域がバナー分だけ不足する。 */
.env-banner ~ .app-wrapper .app-sidebar {
  top: var(--env-banner-height);
  max-height: calc(100vh - var(--env-banner-height));
}

/* ログイン画面のカード（.login-page の flex 中央寄せ）がバナーに隠れないよう下げる */
.env-banner ~ .login-box {
  margin-top: var(--env-banner-height);
}

/* ログイン画面の固定ロゴ（position: fixed）がバナーと重なるので下にずらす */
.env-banner ~ .brand-logo-fixed {
  top: calc(var(--brand-logo-fixed-top) + var(--env-banner-height));
}