@charset "utf-8";

/* ===========================================================
   app.css — このアプリ固有のレイアウト
   共通部品は base.css 側に置く。
   =========================================================== */

/* -----------------------------------------------------------
   1. ログイン画面
   ----------------------------------------------------------- */
.login {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: var(--space-4);
  padding-right: var(--space-4);
  padding-bottom: var(--space-4);
  padding-left: var(--space-4);

  background: linear-gradient(135deg, rgb(235, 235, 245) 0%, rgb(245, 245, 255) 100%);
  z-index: 50;
}

.login__bg {
  display: block;
  position: absolute;
  width: 100%;
  max-width: 360px;
  height: 100%;
  border-radius: 20px;
  top: 50%;
  transform: translate(-20px, calc(-50% - 60px));
  background: linear-gradient(135deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 60%, rgba(30, 139, 179, 1) 100%);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  z-index: 30;
}
.login__bg_header {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr;
}
.login__bg > div {
  display: grid;
  align-items: center;
}
.login__bg img {
  width: 120px;
  margin: 5px;
}

.login__card {
  width: 100%;
  max-width: 360px;

  /* 余白は中のパネル（`login__panel`）が持ちます。**ここは 0 です。**
     背景の板を、カードの内側いっぱいに置くためです。 */
  padding: 0;
  background: #ffffff none;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  z-index: 40;
  height: 380px;

  /* **背景の板（`.login__bg`）の基準です。**外すと、板は `position` を持つ
     いちばん近い親（`.login`＝画面全体）を基準にして、**画面の高さいっぱい**に
     伸びます。板は上へ 60px ずらしてあるので、**ロゴが画面の外へ出ます。**

     以前はここが無く、`.login__card--tall`（別の入口を出すとき・確認コードの段）
     にだけ `position: relative` がありました。開発では Microsoft・LINE を
     出していたので札が付き、**崩れているのに気づけませんでした。**
     パスワードだけの本番で出ました。 */
  position: relative;
}

.login__panel {
  height: 100%;

  padding: 30px 30px 50px 30px;
  border-radius: 20px;
  z-index: 40;
}

.login__brand {
  margin-bottom: var(--space-5);
  text-align: center;

  display: none;
}

.login__brand-name {
  color: var(--main-color);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.login__brand-note {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

.login__title {
  text-align: center;
}

.login__submit {
  width: 100%;
}

.login__error {
  margin-bottom: var(--space-3);
  color: var(--danger-color);
  font-size: var(--font-size-sm);

  min-height: 20px;
}

/* -----------------------------------------------------------
   2. アプリシェル
   ----------------------------------------------------------- */
.shell {
  display: grid;
  min-height: 100vh;
  width: 100%;
  height: 100%;

  /* 幅は .shell__nav が持ち、列はそれに追従させる。
     grid-template-columns を直接動かすと、途中の値を計算しない
     ブラウザがある。要素の width なら確実に動く。 */
  grid-template-columns: auto 1fr;
  grid-template-rows: 60px 1fr;
}

.shell__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  /*
  border-bottom: var(--base-border);
  */
  padding-top: var(--space-3);
  padding-right: var(--space-4);
  padding-bottom: var(--space-3);
  padding-left: var(--space-4);

  grid-column: span 2;
  background: linear-gradient(135deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 60%, rgba(30, 139, 179, 1) 100%);

  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  overflow: visible;
  z-index: 50;
}

.shell__title__img {
  padding: 8px 16px 0px 0;
  border-right: 1px solid var(--base-border-color);
}
.shell__title__img img {
  width: 60px;
}

.shell__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  white-space: nowrap;

  /* 帯が色付きなので白です。 */
  color: #ffffff;
}

.shell__spacer {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#theme-toggle {
  display: none;
}

/* 自分の名前は、写真を入れる入口でもある。押せることが分かる形にする。 */
.shell__user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-style: none;
  border-radius: var(--radius-pill);
  padding-top: var(--space-1);
  padding-right: var(--space-3);
  padding-bottom: var(--space-1);
  padding-left: var(--space-1);
  color: var(--sub-text-color);
  font-family: inherit;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: pointer;

  background-color: var(--main-color-pale);
  transition-duration: 0.2s;
}

.shell__user:hover {
  background-color: var(--main-color-pale);
  opacity: 0.8;
}

.shell__nav {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  display: flex;
  flex-direction: column;
  width: var(--nav-width);
  border-right: 1px solid var(--base-border-color);
  background: var(--nav-bg);

  /* 畳む途中で項目名がはみ出さないように。縦は項目が増えたとき用。 */
  overflow-x: hidden;
  overflow-y: auto;

  transition-property: width;
  transition-duration: var(--duration-soft);
  transition-timing-function: var(--easing-soft);
}

/* -----------------------------------------------------------
   2-1. ナビを畳む
   
   畳んだ幅は、項目の左余白（48px）と同じにしてあります。
   項目名は padding-left: 48px の先にあるので、**畳むとちょうど
   隠れます。**別に消す指定は要りません。
   現在地の縦棒（.pill-nav__item::before）は左端にあるので、
   畳んでもどこに居るかは分かります。
   ----------------------------------------------------------- */
.shell--rail {
  --nav-width: 48px;
}

.nav-toggle {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  /* 畳んだ幅と同じ正方形にする。畳んでもアイコンが横に動かない。 */
  width: 48px;
  height: 48px;
  border-style: none;
  background-color: transparent;
  color: var(--sub-text-color);
  cursor: pointer;
}

.nav-toggle:hover {
  background-color: var(--item-hover);
  color: var(--main-color);
}

.nav-toggle__icon {
  width: 20px;
  height: 20px;
  transition-property: transform;
  transition-duration: var(--duration-soft);
  transition-timing-function: var(--easing-soft);
}

/* 畳むと向きが反転して「広げる」になる */
.shell--rail .nav-toggle__icon {
  transform: rotate(180deg);
}

.shell__main {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  /*
  padding-top: var(--space-5);
  padding-right: var(--space-4);
  padding-bottom: var(--space-6);
  padding-left: var(--space-4);
  */

  width: 100%;
  height: 100%;
  display: grid;
  overflow: auto;
  background: var(--main-bg);
}

.shell__inner {
  margin-right: auto;
  margin-left: auto;
  /*
  max-width: 960px;
  */
  width: 100%;
  background: #ffffff none;
}

/* -----------------------------------------------------------
   3. ホーム画面
   ----------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5);
}

.stat {
  border: var(--base-border);
  border-radius: var(--border-radius);
  background-color: var(--panel-bg);
  padding-top: var(--space-4);
  padding-right: var(--space-4);
  padding-bottom: var(--space-4);
  padding-left: var(--space-4);
}

.stat__label {
  display: block;
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

.stat__value {
  display: block;
  color: var(--main-color);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
}

/* 数字から該当画面へ飛べる札。button なのでキーボードでも辿れる。 */
.stat--link {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition-property: border-color;
  transition-duration: var(--duration);
  transition-timing-function: var(--easing);

  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  border: 3px solid transparent;
}

.stat--link:hover {
  border-color: var(--main-color);
}

.stat--link:focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--main-color-pale);
}

/* 対応が残っている数。0 のときは色を付けない。 */
.stat--warn .stat__value {
  color: var(--danger-color);
}

.panel__base {
  margin: var(--space-5);
}

.home__note {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  
  margin: 0 var(--space-5) var(--space-2) var(--space-5);
}

.home__steps {
  margin-top: 0;
  margin-bottom: var(--space-3);
  padding-left: var(--space-5);
}

.home__import {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.home__import-link {
  margin-top: var(--space-3);
}

/* -----------------------------------------------------------
   4. ユーザー一覧画面
   ----------------------------------------------------------- */
.users__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /*
  margin-bottom: var(--space-4);
  */
  flex-wrap: wrap;

  padding: var(--space-4);
  background: #fff;
  position: sticky;
  top: 50px;
  z-index: 30;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.users__search {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 220px;
  max-width: 320px;
}

.users__count {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

.users__table-wrap {
  overflow-x: auto;

  height: 100%;
}

/* -----------------------------------------------------------
   5. 画面切り替えのフェード
   ----------------------------------------------------------- */
.view-enter {
  animation-name: view-fade;
  animation-duration: var(--duration);
  animation-timing-function: var(--easing);
}

@keyframes view-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------
   6. 狭い画面
   ----------------------------------------------------------- */
@media (max-width: 600px) {
  .shell__header {
    flex-wrap: wrap;
  }

  .shell__user {
    display: none;
  }

  .pill-nav {
    width: 100%;
    overflow-x: auto;
  }
}

/* -----------------------------------------------------------
   7. ユーザー一覧の追加要素
   ----------------------------------------------------------- */
.users__dept {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 200px;
  max-width: 240px;
}

.users__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  cursor: pointer;
}

.users__depts {
  display: table-cell;
}

/* 長いアドレスで表が横に伸びないよう切り詰める。全文は title で読める。 */
.users__email {
  max-width: 220px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users__email--none {
  color: var(--sub-text-color);
}

.dept-chip {
  display: inline-block;
  margin-right: var(--space-1);
  border-radius: var(--radius-pill);
  background-color: var(--main-color-pale);
  padding-top: 1px;
  padding-right: var(--space-2);
  padding-bottom: 1px;
  padding-left: var(--space-2);
  color: var(--main-color-dark);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.dept-chip--sub {
  background-color: #eee;
  color: var(--sub-text-color);
}

.table__actions {
  text-align: right;
  white-space: nowrap;
}

/* 主の項目に添える 1 行。長い説明は畳んで、行の高さを揃える。 */
.table__sub {
  max-width: 32em;
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table__muted {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

/* 並べ替えの見出し。th 自体は focus できないので button を置く。 */
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border-style: none;
  background-color: transparent;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.table__sort:hover {
  color: var(--main-color-dark);
}

.table__sort-mark {
  color: var(--main-color);
  font-size: 10px;
}

.mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------
   8. ページャー
   ----------------------------------------------------------- */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  /*
  margin-top: var(--space-4);
  */

  position: sticky;
  bottom: 0;
  padding: var(--space-4);
  background: #fff none;
  box-shadow: -1px -1px 10px rgba(0, 0, 0, 0.1);
}

.pager__info {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------
   9. 部署ツリー
   ----------------------------------------------------------- */
.tree-indent {
  display: inline-block;
  width: 0;
}

/* -----------------------------------------------------------
   10. 取り込み画面
   ----------------------------------------------------------- */
.import__buttons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.import__result {
  margin-top: var(--space-4);
  border: var(--base-border);
  border-radius: var(--border-radius);
  background-color: var(--main-color-pale);
  padding-top: var(--space-3);
  padding-right: var(--space-4);
  padding-bottom: var(--space-3);
  padding-left: var(--space-4);
}

.import__errors {
  margin-top: var(--space-3);
  border: 1px solid var(--danger-color);
  border-radius: var(--border-radius);
  padding-top: var(--space-3);
  padding-right: var(--space-4);
  padding-bottom: var(--space-3);
  padding-left: var(--space-4);
  color: var(--danger-color);
  font-size: var(--font-size-sm);
  max-height: 240px;
  overflow-y: auto;
}

.import__errors div {
  line-height: 1.9;
}

/* 反映はしたが伝えるべきこと。エラーと違い、取り込みは通っている。 */
.import__warnings {
  margin-top: var(--space-3);
  border: 1px solid var(--base-border-color);
  border-radius: var(--border-radius);
  background-color: var(--page-bg);
  padding-top: var(--space-3);
  padding-right: var(--space-4);
  padding-bottom: var(--space-3);
  padding-left: var(--space-4);
  color: var(--base-text-color);
  font-size: var(--font-size-sm);
  max-height: 240px;
  overflow-y: auto;
}

.import__warnings div {
  line-height: 1.9;
}

.import__logs {
  margin: var(--space-5);
}

.panel__auth img {
  width: 100%;
}

.margin__w5 {
  margin: 0 var(--space-5);
}
.margin__w5_h5 {
  margin: var(--space-5);
}
.margin__w5_h2b {
  margin: 0 var(--space-5) var(--space-2) var(--space-5);
}
.margin__w5_h5b {
  margin: 0 var(--space-5) var(--space-5) var(--space-5);
}

/*
   別の入口（LINE）。**押せる物が2つ並ぶので、区切りを入れる。**
   どちらでも入れることと、別の手段だということが見て分かるように。
*/
/* -----------------------------------------------------------
   ライセンス
   ----------------------------------------------------------- */
.login__license {
  margin-top: var(--space-4);
  border-top: var(--base-border);
  padding-top: var(--space-3);
  color: var(--danger-color);
  font-size: var(--font-size-sm);
}

.license__state {
  margin-bottom: var(--space-3);
  font-weight: 600;
}

/* 期限切れ・上限超過は**色で分かるように**。見落とすと止まる。 */
.license__state--bad {
  color: var(--danger-color);
}

.license__state--warn {
  color: #b26b00;
}

.license__rows {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
}

.license__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-2);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}

.license__row dt {
  color: var(--sub-text-color);
}

.license__row dd {
  margin-left: 0;
}

/* -----------------------------------------------------------
   認証アプリ
   ----------------------------------------------------------- */
.profile__mfa {
  margin-top: var(--space-4);
  border-top: var(--base-border);
  padding-top: var(--space-3);
}

.mfa__qr {
  display: block;
  margin-top: var(--space-3);
  margin-right: auto;
  margin-bottom: var(--space-3);
  margin-left: auto;
}

.mfa__manual {
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
}

/* 予備のコード。**書き写す前提**なので、行を離して読み違えないように。 */
.mfa__codes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* **止めたほうがよい設定**は、色で分かるようにする。 */
.settings__warn {
  color: var(--danger-color);
}

/*
   確認コード。**数字だけを大きく**。打ち間違いに気付けるように、
   字間を空けて 1 文字ずつ拾える形にする。
*/
.login__code {
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 20px;
}

.login__note {
  margin-bottom: var(--space-3);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

.login__codebar {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
}

/*
   中身が増えたときの枠。**増えたときだけ**当てる。
   パスワードだけの並びは今までのまま。

   枠は高さを決め打ちしてあり、押しボタンはその下に貼り付けてある
   （.login__card の height と .login__submit の position: absolute）。
   下に足すと、はみ出して重なるので、両方をここで解く。

   当てるのは 2 か所。**別の入口を出すとき**と、**確認コードの段**。
   どちらも、同じ理由で同じことが起きる。
*/
.login__card--tall {
  height: auto;
}

.login__card--tall .login__submit {
  position: static;
  margin-top: var(--space-4);
}

.login__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

.login__or::before,
.login__or::after {
  flex-grow: 1;
  border-top: var(--base-border);
  content: "";
}

/*
   LINE ログインのボタン。**LINE のデザインガイドラインの値**で組んでいます
   （docs/23「6」）。

     地 #06C755 ／ 字とアイコン 白 ／ アイコンと字の間の区切り線 黒 8%
     乗せたとき 黒 10% を重ねる ／ 押したとき 黒 30% を重ねる

   **地の色は変えず、上に黒を重ねます**（ガイドラインの書き方どおり）。重ねる板は
   `::after` で、押す邪魔をしないようにしています。

   **アイコンは公式素材をそのまま**置きます（image/line_88.png）。縦横比を変えない
   決まりなので、**正方形のまま**表示します。高さ 40 のボタンに 40×40 の枠を置き、
   88 の画像を 36×36 で出します（LINE のサイトのガイドラインを見ながら調整した値。
   2 倍の画面でも 72px 相当なので、ぼやけません）。
*/
.login__line {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 40px;
  overflow: hidden;
  border: 0;
  background-color: #06c755;
  padding: 0;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* **地の色は変えません。**`.btn` の乗せたときの色（淡い青）に負けないよう、ここで戻します。
   暗くするのは下の重ねる板です。 */
.login__line:hover {
  background-color: #06c755;
}

.login__line::after {
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0;
  content: "";
  pointer-events: none;
}

.login__line:hover::after {
  opacity: 0.1;
}

.login__line:active::after {
  opacity: 0.3;
}

/* アイコンの枠。**右に区切り線**（黒 8%）。縮めない（縦横比を守るため）。 */
.login__line-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.login__line-icon img {
  display: block;
  width: 36px;
  height: 36px;
}

.login__line-text {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}

/*
   ボタンの真上の説明「職場または学校アカウントをお持ちの方」。
   **「または」と同じ色と大きさ**にして、ボタンより目立たせません（主役はボタン）。
*/
.login__entra-note {
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  text-align: center;
}

/*
   「Microsoft でサインイン」。Microsoft のブランドガイドラインの**明るい版**に
   合わせます。色は**公式のボタン素材（ms-symbollockup_signin_light.svg）の中身から
   読み取った値**です。

     背景 #fff ／ 枠 1px #8c8c8c ／ 字 #5e5e5e

   **枠を省かないでください。**ログイン画面の板も白なので、枠が無いとボタンの形が
   消えます。

   **ロゴは公式の素材をそのまま置きます**（image/ms-symbollockup_mssymbol_19.svg）。
   色も比率も変えない決まりです。公式のボタン画像は英語だけなので、ロゴだけを
   借りて、文言は日本語にしています（docs/27「7」）。
*/
.login__entra {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-3);
  border: 1px solid #8c8c8c;
  background-color: #fff;
  color: #5e5e5e;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* **大きさだけを決めます。**縮ませない（字が長いときにロゴが潰れないように）。 */
.login__entra-logo {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
}

/* 乗せたときの色は**ガイドラインに決まりがありません。**白地を少しだけ沈めます
   （枠と字の色は変えません）。 */
.login__entra:hover {
  background-color: #f3f3f3;
}

/* -----------------------------------------------------------
   11. ダイアログ
   ----------------------------------------------------------- */
/* <dialog> を showModal() で開く。重なり順はトップレイヤーが決めるので
   z-index は要らない。既定のスタイル（枠線・余白・幅・背景）を打ち消し、
   全面を覆う入れ物として使う。覆いの色は ::backdrop に持たせる。 */
.dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-style: none;
  background-color: transparent;
  /* 見出し（.panel__title）は枠の 10px 上に出るので、上だけ余分に取る。
     画面いっぱいに広がったとき、見出しが端に貼り付いて読みにくくなる。 */
  padding-top: var(--space-5);
  padding-right: var(--space-4);
  padding-bottom: var(--space-4);
  padding-left: var(--space-4);
  color: inherit;
  overflow-y: auto;
}

/* 閉じている <dialog> は display: none のままにする。
   .dialog に直接書くと、開く前に一瞬見えてしまう。 */
/* 縦の中央寄せに align-items: center は使えません。中身が画面より高いとき、
   はみ出しが上下に均等に出て、**上端がスクロールで戻れない位置に行きます**
   （ユーザーの編集のように項目が多いダイアログで、見出しが見切れる）。
   代わりに .dialog__panel の margin を auto にします。余白があるときは
   中央に寄り、足りないときは auto が 0 になって上端から始まります。 */
.dialog[open] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.35);
}

.dialog__panel {
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
  max-width: 420px;

  padding: var(--panel-padding);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

/* -----------------------------------------------------------
   11-1. 開け閉めの動き
   
   閉じるときは JS が .is-closing を付け、animationend を待ってから
   close() を呼びます。close() を先に呼ぶと要素が消えて、閉じる動きが
   一瞬も見えません。
   ----------------------------------------------------------- */
.dialog[open] .dialog__panel {
  animation-name: dialog-in;
  animation-duration: var(--duration-soft);
  animation-timing-function: var(--easing-soft);
}

.dialog[open]::backdrop {
  animation-name: backdrop-in;
  animation-duration: var(--duration-soft);
  animation-timing-function: var(--easing-soft);
}

.dialog.is-closing .dialog__panel {
  animation-name: dialog-out;
  animation-duration: var(--duration-quick);
  animation-timing-function: var(--easing-quick);
  animation-fill-mode: forwards;
}

.dialog.is-closing::backdrop {
  animation-name: backdrop-out;
  animation-duration: var(--duration-quick);
  animation-timing-function: var(--easing-quick);
  animation-fill-mode: forwards;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dialog-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.dialog__note {
  margin-bottom: var(--space-4);
  border-radius: var(--border-radius);
  background-color: var(--main-color-pale);
  padding-top: var(--space-2);
  padding-right: var(--space-3);
  padding-bottom: var(--space-2);
  padding-left: var(--space-3);
  color: var(--main-color-dark);
  font-size: var(--font-size-sm);
}

/* 保存はできるが取り込みで戻る、という注意書き。 */
.dialog__note--warn {
  background-color: var(--danger-color-pale);
  color: var(--danger-color);
}

.dialog__buttons {
  display: flex;
  align-items: center;
  gap: var(--button-space);
  margin-top: var(--space-5);
}

/* 確認・通知のモーダル。ボタンは右に寄せる。 */
.dialog__buttons--end {
  justify-content: flex-end;
}

.dialog__panel--message {
  max-width: 420px;
}

/* 改行を書いたとおりに出す。「〜します。改行 〜できなくなります。」の形で
   1 行目に何が起きるか、2 行目にその影響を書くため。 */
.dialog__message {
  white-space: pre-line;

  margin: var(--dialog-msg-margin);
}

/* -----------------------------------------------------------
   11-2. 編集ダイアログの所属ブロック
   ----------------------------------------------------------- */
.dept-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dept-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--border-radius);
  background-color: var(--page-bg);
  padding-top: var(--space-1);
  padding-right: var(--space-2);
  padding-bottom: var(--space-1);
  padding-left: var(--space-3);
}

.dept-row__name {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept-list__empty {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

/* ログイン中の端末・アプリ（docs/16「12」）。
   モーダルの中では、端末が増えても**一覧の中だけが流れる**ようにする
   （画面ごと伸びると、下の「閉じる」まで届かなくなる）。 */
.sessions__list {
  max-height: 60vh;
  overflow-y: auto;
}

/* 「取り消す」は**縮めさせません。**端末の控え（User-Agent）が長いと、
   flex が押し合って、ボタンの文字だけが「取り消/す」と折り返ります。 */
.session-row__revoke {
  flex-grow: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 端末の控え（User-Agent）は長いので折り返す。 */
.session-row__device,
.session-row__when {
  display: block;
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  white-space: normal;
  overflow-wrap: anywhere;
}

.dept-list__add {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dept-list__add .field__input {
  flex-grow: 1;
  flex-shrink: 1;
}

/* -----------------------------------------------------------
   11-7. 監査ログ
   ----------------------------------------------------------- */
.audit__limit {
  flex-grow: 0;
  flex-shrink: 0;
  width: 8em;
}

.audit__time {
  white-space: nowrap;
}

/* IP は幅を食うわりに読む頻度が低い。狭めて省略する。 */
.audit__ip {
  max-width: 10em;
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit__detail {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------
   11-6. グループの所属ユーザー
   ----------------------------------------------------------- */

/* 所属の選択があるので、他のダイアログより広く取る */
.dialog__panel--wide {
  max-width: 560px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
}

.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--border-radius);
  background-color: var(--page-bg);
  padding-top: var(--space-1);
  padding-right: var(--space-2);
  padding-bottom: var(--space-1);
  padding-left: var(--space-3);
}

.member-row__name {
  flex-grow: 0;
  flex-shrink: 0;
  width: 10em;
}

.member-row__detail {
  flex-grow: 1;
  flex-shrink: 1;
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-search {
  margin-top: var(--space-2);
}

.member-candidates {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-1);
  border: var(--base-border);
  border-radius: var(--border-radius);
  max-height: 180px;
  overflow-y: auto;
}

.member-candidate {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-style: none;
  border-bottom: var(--base-border);
  background-color: var(--panel-bg);
  padding-top: var(--space-2);
  padding-right: var(--space-3);
  padding-bottom: var(--space-2);
  padding-left: var(--space-3);
  color: inherit;
  font-family: inherit;
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
}

.member-candidate:hover {
  background-color: var(--main-color-pale);
}

/* -----------------------------------------------------------
   11-5. Notes 由来の情報（参照専用）
   ----------------------------------------------------------- */
.notes-block {
  margin-top: var(--space-4);
  border-top: var(--base-border);
  padding-top: var(--space-3);
}

.notes-block__row {
  display: flex;
  gap: var(--space-2);
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: var(--font-size-sm);
}

.notes-block__key {
  flex-grow: 0;
  flex-shrink: 0;
  width: 6em;
  color: var(--sub-text-color);
}

.notes-block__value {
  flex-grow: 1;
  flex-shrink: 1;
  word-break: break-all;
}

/* 兼務の行に置く役職。名前の伸縮を邪魔しない幅で固定する。 */
.dept-row__job-title {
  flex-grow: 0;
  flex-shrink: 0;
  width: 10em;
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------
   3-1. 自分のメニュー
   
   ダイアログにしないのは、写真を変える以外にログアウトも置くため。
   毎回画面を止めるほどの操作ではない。
   ----------------------------------------------------------- */
.user-menu {
  position: relative;
}

.user-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;

  padding: 20px;

  /* ヘッダーの下に出るので、下の画面より前に置く */
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  width: 350px;
  text-align: left;

  animation-name: menu-in;
  animation-duration: var(--duration-soft);
  animation-timing-function: var(--easing-soft);
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------
   11-8. 写真
   ----------------------------------------------------------- */
/* 写真が無い人は氏名の頭文字を出す。空の丸より誰の欄かが分かる。 */
.avatar {
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--main-color-pale);
  width: 32px;
  height: 32px;
  overflow: hidden;
  color: var(--main-color-dark);
  font-size: var(--font-size-sm);
  font-weight: 600;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;

  /* 縦横比が違う写真でも丸を埋める。潰さずに中央を切り出す。 */
  object-fit: cover;
}

.avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.avatar--lg {
  width: 96px;
  height: 96px;
  font-size: var(--font-size-lg);
}

.photo-field {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.photo-field__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ファイル選択は「変更」ボタンから開く。既定の見た目は使わない。 */
.photo-field__input {
  display: none;
}

.profile__name {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.profile__id {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

/* 突合前の所属。正規化された所属と見分けが付くようにする。 */
.dept-chip--source {
  background-color: transparent;
  border: 1px dashed var(--base-border-color);
  color: var(--sub-text-color);
}

/* -----------------------------------------------------------
   11-4. 取り込み元の原本
   ----------------------------------------------------------- */
.source-attrs {
  margin-top: var(--space-4);
  border-top: var(--base-border);
  padding-top: var(--space-3);
}

.source-attrs summary {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.source-attrs__note {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

/* 項目数が多いので、ダイアログ全体を伸ばさず中でスクロールさせる */
.source-attrs__list {
  max-height: 240px;
  overflow-y: auto;
  border: var(--base-border);
  border-radius: var(--border-radius);
  background-color: var(--page-bg);
  padding-top: var(--space-2);
  padding-right: var(--space-2);
  padding-bottom: var(--space-2);
  padding-left: var(--space-2);
}

.source-attrs__row {
  display: flex;
  gap: var(--space-2);
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: var(--font-size-sm);
}

.source-attrs__key {
  flex-grow: 0;
  flex-shrink: 0;
  width: 40%;
  color: var(--sub-text-color);
  overflow-x: hidden;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-attrs__value {
  flex-grow: 1;
  flex-shrink: 1;
  word-break: break-all;
}

/* -----------------------------------------------------------
   11-3. 編集ダイアログのパスワード
   ----------------------------------------------------------- */
.password-block {
  border-top: var(--base-border);
  padding-top: var(--space-4);
}

.password-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.password-row--set .field__input {
  flex-grow: 1;
  flex-shrink: 1;
}

.password-hint {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.password-clear {
  margin-top: var(--space-1);
}

.btn--danger {
  border-color: var(--danger-color);
  color: var(--danger-color);
}

.btn--danger:hover {
  background-color: var(--danger-color);
  color: #fff;
}

.field__input:disabled {
  background-color: #f2f2f2;
  color: var(--sub-text-color);
  cursor: not-allowed;
}

/* -----------------------------------------------------------
   12. ノード表示
   障害対応中に「どのサーバーを見ているか」が分からなくなるのを防ぐ。
   ----------------------------------------------------------- */
.node-badge {
  display: inline-block;
  border-radius: var(--radius-pill);
  background-color: #eee;
  padding-top: 1px;
  padding-right: var(--space-2);
  padding-bottom: 1px;
  padding-left: var(--space-2);
  color: var(--sub-text-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

/* 予備機で開いているときは目立たせる */
.node-badge--standby {
  background-color: #fdf0d5;
  color: #96631a;
  font-weight: 600;
}

.login__node {
  margin-top: var(--space-1);
  color: var(--sub-text-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------
   13. API 設定画面
   ----------------------------------------------------------- */
.api__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--base-text-color);
  font-size: var(--font-size-base);
}

.api__plain {
  margin-top: var(--space-3);
  border: var(--base-border);
  border-radius: var(--border-radius);
  background-color: var(--main-color-pale);
  padding-top: var(--space-3);
  padding-right: var(--space-3);
  padding-bottom: var(--space-3);
  padding-left: var(--space-3);
  word-break: break-all;
  user-select: all;
}

/* -----------------------------------------------------------
   14. パスワード設定画面（setup.html）
   ----------------------------------------------------------- */
.setup__greeting {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.setup__rule {
  margin-bottom: var(--space-4);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

/* -----------------------------------------------------------
   15. 印刷用紙
   画面では隠し、印刷時だけ表示する。1人1枚。
   ----------------------------------------------------------- */
.print-sheets {
  display: none;
}

.sheet {
  border: var(--base-border);
  border-radius: var(--border-radius);
  background-color: var(--panel-bg);
  padding-top: var(--space-5);
  padding-right: var(--space-5);
  padding-bottom: var(--space-5);
  padding-left: var(--space-5);
  margin-bottom: var(--space-5);
}

.sheet__head {
  border-bottom: var(--base-border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}

.sheet__title {
  color: var(--main-color);
  font-size: var(--font-size-lg);
  font-weight: 700;
}

.sheet__for {
  margin-top: var(--space-2);
  font-size: 20px;
  font-weight: 600;
}

.sheet__for .mono {
  margin-left: var(--space-3);
  color: var(--sub-text-color);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.sheet__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.sheet__qr {
  flex-grow: 0;
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border: var(--base-border);
}

.sheet__steps {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.sheet__lead {
  margin-bottom: var(--space-3);
}

.sheet__list {
  margin-top: 0;
  margin-bottom: var(--space-3);
  padding-left: var(--space-5);
  line-height: 2;
}

.sheet__note {
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
}

.sheet__warn {
  margin-top: var(--space-2);
  color: var(--danger-color);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.sheet__url {
  margin-top: var(--space-4);
  border-top: var(--base-border);
  padding-top: var(--space-2);
  color: var(--sub-text-color);
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  word-break: break-all;
}

/* -----------------------------------------------------------
   16. 印刷時
   ----------------------------------------------------------- */
@media print {
  /* ダークモードのまま印刷すると全面が黒くなる */
  html[theme="dark-mode"] {
    filter: none;
  }

  /*
     **画面の高さの縛りを、印刷のときだけ解く。**

     画面は 1 画面に収める作りで、html から .shell__main まで
     height: 100% と overflow で閉じてある（送るのは中身だけ）。
     そのまま印刷すると、**用紙 1 枚のさらに一部**しか出ません。
     用紙は何枚にでも伸びるので、ここでは伸ばしたままにします。
  */
  html,
  body {
    height: auto;
    overflow: visible;
  }

  .shell,
  .shell__main,
  .shell__inner {
    display: block;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body {
    background-color: #fff;
  }

  .shell__header,
  .shell__nav,
  .no-print,
  .toast-root {
    display: none !important;
  }

  .shell__main {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }

  .print-sheets {
    display: block !important;
  }

  .print-sheets[hidden] {
    display: block !important;
  }

  .sheet {
    border: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    margin-bottom: 0;
    /* 1人1枚。用紙の途中で切れないようにする */
    page-break-after: always;
    break-after: page;
  }

  .sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  @page {
    size: A4;
    margin: 18mm;
  }
}

/* 版（docs/37）。**小さく、最後に。**普段は読まれない情報ですが、
   問い合わせのときはこれ 1 行で足ります。 */
.profile__version {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--base-border);
  color: var(--sub-text-color);
  font-size: var(--font-size-sm);
  text-align: right;
}