html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* 登録商標マーク（MS検査®）。見出し帯・サイドバー・本文どこに置いても、
   親のフォントサイズに対して小さく上付きにする。Bootstrap の sup 既定値
   (.75em / top:-.5em) だと見出しでは大きすぎて名称と同格に見えるので上書き。 */
.reg-mark {
  font-size: .55em;
  top: -.8em;
}

/* ------------------------------------------------------------------
   画面の共通枠（見出し帯 + 本文パネル）

   ここが唯一の定義。各ビューや .vue の <style> にコピペしないこと。
   移植元ではこの2クラスが共通CSSに無く、十数個のビューの <style> に
   同じものが散らばっていて、直すときに全部直す羽目になっていた。

   .page-header の top 3.6em = _Layout.cshtml.css の .site-navbar { height: 3em }
   ＋ 上マージン 0.6em。.page-body の top 9.3em = ヘッダーの下端 8.7em ＋ 0.6em。
   ヘッダーは position: fixed なので上下の余白は margin ではなく top で作る。
   高さや余白を変えたら .page-body の top も追随させること。
   幅は left/right で決める（サイドバー幅を差し引くマジックナンバーは使わない）。
   ------------------------------------------------------------------ */
.page-header {
  position: fixed;
  top: 3.6em;
  left: 1.2em;
  right: 1.2em;
  height: 6.5em;
  padding: 0.3em 2.1em;
  background-color: #ffffff;
  border-radius: 0.05rem;
  z-index: 1030;
  box-shadow: 0 0.15rem 0.15rem rgba(30, 120, 180, 0.3) !important;
}

.page-body {
  position: fixed;
  top: 9.3em;
  bottom: 0.6em;
  left: 1.2em;
  right: 1.2em;
  padding: 2.1em;
  overflow: auto;
  background-color: #ffffff;
  border-radius: 0.05rem;
  box-shadow: 0 0.3rem 0.3rem rgba(30, 120, 180, 0.3) !important;
}

/* サイドバー表示中（＝ログイン中）は、その幅だけ右へ寄せる。
   .page-header / .page-body は position: fixed なので、main の margin-left では
   よけられずサイドバーの下に潜り込む。left を直接ずらす必要がある。
   幅の 16rem は _Layout.cshtml.css の .app-sidebar と対応。 */
@media (min-width: 992px) {
  main.with-sidebar .page-header,
  main.with-sidebar .page-body {
    left: calc(16rem + 1.2em);
  }
}

/* ------------------------------------------------------------------
   スマホ・タブレット（lg 未満 = サイドバーが引き出しになる幅）

   上の固定パネル配置は「見出し帯の高さが 6.5em で収まる」前提で成り立っている。
   幅が狭いと検索フォームが2〜4段に折り返して 6.5em に収まらず、帯からはみ出して
   navbar や .page-body の下に潜り込む。狭い画面では固定配置そのものをやめ、
   ふつうの文書フロー（高さ可変・ページ全体をスクロール）に戻す。

   切替点を lg にしているのは、サイドバーが offcanvas に変わる境目と揃えるため。
   ここをずらすと「サイドバーは引き出しなのに本文は固定」という中途半端な幅ができる。
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .page-header,
  .page-body {
    position: static;
    height: auto;
    overflow: visible;
    margin: 0.6em;
    padding: 1em;
  }

  .page-header {
    margin-bottom: 0.6em;
  }

  /* 固定配置をやめると .page-body の内側スクロールも無くなる。横に長い表は
     .table-responsive に任せるが、既定の折り返しだと1文字ずつ縦積みになって
     スクロールバーが出ない。セルを折り返さないことで横スクロールに倒す。 */
  .table-responsive > .table > :not(caption) > * > * {
    white-space: nowrap;
  }

  /* 入力欄入りの表（企業情報の部署など）。.form-control は width: 100% なので、
     列が狭いと入力欄そのものが潰れて中身が読めなくなる。表に最低幅を持たせ、
     はみ出した分は .table-responsive の横スクロールに逃がす。 */
  .table-responsive > .table-inputs {
    min-width: 36em;
  }
}

/* ------------------------------------------------------------------
   見出し帯の検索フォーム（.page-filter）

   各一覧画面の絞り込みフォームに付ける。狭い画面では入力欄のインライン幅
   （style="width: 16em" 等）が画面からはみ出すので、ここで打ち消して縦に積む。
   flex-basis 9em は「350px でちょうど2列に落ちる」幅。広い画面では既定のまま
   横一列に並ぶので、この指定は sm 未満だけで効かせる。
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .page-filter {
    width: 100%;
    gap: 0.5rem !important;
  }

  .page-filter > div {
    flex: 1 1 9em;
    min-width: 0;
  }

  /* 企業名など、選択肢が長くて2列だと読めない項目は1行使う */
  .page-filter > div.filter-wide {
    flex: 1 1 100%;
  }

  /* インラインの width を上書きするため !important が要る */
  .page-filter .form-select,
  .page-filter .form-control {
    width: 100% !important;
  }
}

/* ------------------------------------------------------------------
   navbar 右側（_LoginPartial）の縮み方

   _Layout.cshtml.css はスコープ付きCSSで、パーシャルが出す要素には b-* 属性が
   付かず当たらない。ここ（グローバル）に置く必要がある。
   ------------------------------------------------------------------ */
/* ログアウト等のボタンは縮ませない（縮むと文字が折り返して navbar の高さ 3em を
   はみ出す）。代わりにブランド名を縮む側にして、入らない分は … で省略する。
   flex アイテムは .btn 自身ではなく親の li なので、li に指定する必要がある。 */
.site-navbar .navbar-nav > .nav-item {
  flex: 0 0 auto;
}

.site-navbar .navbar-brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  /* ユーザー名は 350px では入らない。人型アイコン（title 付き）だけ残す。 */
  .site-navbar .nav-username {
    display: none;
  }

  .site-navbar .navbar-nav {
    margin-left: 0.25rem !important;
    gap: 0.25rem !important;
  }

  .site-navbar .navbar-nav .nav-link {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
  }
}

/* Identity 画面（ログイン・登録・ロック案内）の余白 */
.login, .register, .lockout {
  padding: 1.5em;
}

.lockout {
  max-width: 40em;
}