/* 管理者ポータルの最終UI表現。画面の動作・保存経路は portal.html の既存処理を使う。 */
:root {
  --admin-blue: #4a86d8;
  --admin-blue-dark: #2f6fbf;
  --admin-ink: #1b2530;
  --admin-muted: #5f6b7a;
  --admin-soft: #f7f9fb;
  --admin-line: #e2e6ec;
}

body.portal.admin-ui2 {
  padding: 0;
  background: #fff;
  color: var(--admin-ink);
  font-size: 14px;
}

.admin-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.admin-ui2 .portal-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--admin-blue);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}

.admin-brand {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.admin-brand span { color: #d8e6f8; font-weight: 500; }
.admin-period { font-size: 13px; font-weight: 700; white-space: nowrap; }
.admin-header-spacer { flex: 1; }

.admin-ui2 .header-meta {
  margin: 0;
  padding: 0;
  background: transparent;
  color: #e8f0fc;
  font-size: 11.5px;
  white-space: nowrap;
}

.admin-phase-pills { display: flex; align-items: center; gap: 5px; }
/* ---- 読み込み中の表示（2026-08-19 実機フィードバック） ----
   見た目の指定は common/style.css の「読み込み中の帯の正本」に 1 箇所だけ置き、管理者用の
   selector もそこに並べてある。ここには写しを作らない（以前は写しがあり、片方だけ直しても
   管理者に届かなかった）。管理者に特有の事情はこれだけ:
     - 本文は id が adminMain。帯の差し込み先を探す portal.js がここを見る。
     - 帯は state-banner も同時に持つので、正本側は `.state-banner` と組にして 1 段強くしてある。 */
.admin-ui2 .state-banner.portal-load-status {
  white-space: pre-wrap;
}

/* 読み込み中は左ナビが空のままで、画面が壊れているように見えていた。
   骨組みだけを薄く出して「これから中身が入る」ことを示す。 */
.admin-ui2 .portal-nav-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
}

.admin-ui2 .portal-nav-skeleton span {
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: ui2-skeleton-shimmer 1.4s ease infinite;
}

@keyframes ui2-skeleton-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* 2026-08-19 UI フィードバック（Slack）: いまの段だけを塗り、それ以外は枠なしの文字にする。
   全部を同じ丸いタグで塗っていたため、押せるボタンだと思われてクリックされていた。 */
.admin-phase-pill {
  padding: 5px 14px;
  border-radius: 20px;
  background: #f0f0f5;
  color: #b2bec3;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.admin-phase-pill.current { padding: 3px 8px; background: #fff; color: #2f5f9e; }
/* 段と段のあいだの「→」。順番に進むことを示す飾りなので薄く。 */
.admin-phase-arrow { color: rgba(255,255,255,.45); font-size: 11px; font-weight: 700; user-select: none; }

.admin-body-row { display: flex; flex: 1; min-height: 0; align-items: stretch; }

.admin-ui2 .portal-nav {
  width: 212px;
  flex: 0 0 212px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 10px;
  background: var(--admin-soft);
  border: 0;
  border-right: 1px solid #e7ebf0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.admin-nav-group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-group-label {
  padding: 0 12px 8px;
  color: #8a95a3;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
}

/* 見た目（余白・丸角・文字色・大きさ）は `.admin-ui2 .nav-btn` の 1 箇所が決める。
   ここは強い selector なので、値を書くとそちらが必ず勝ってしまう。並びと折返しだけにする。 */
.admin-ui2 .portal-nav .nav-btn {
  width: 100%;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.admin-main {
  flex: 1;
  min-width: 0;
  padding: 22px 26px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-main > section[data-view] { width: 100%; }
.admin-main h2 { margin: 0 0 5px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: var(--admin-ink); }
.admin-main h3 { color: var(--admin-ink); }
.admin-main .info-text,
.admin-main .view-note { color: var(--admin-muted); font-size: 12.5px; }
.admin-main .info-text { background: transparent; padding: 0; }

.admin-ui2 .state-banner {
  margin-bottom: 0;
  padding: 10px 13px;
  border: 1px solid var(--admin-line);
  border-left: 3px solid #b7791f;
  border-radius: 7px;
  background: #fff;
  color: var(--admin-muted);
  font-size: 12.5px;
}

.admin-ui2 .task-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  padding: 12px 14px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: #fff;
  color: var(--admin-ink);
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
}

.admin-ui2 .tabbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 4px 0 14px;
  padding: 3px;
  border: 1px solid #dde1e7;
  border-radius: 9px;
  background: #eceff3;
}
.admin-ui2 .tabbar .subtab {
  padding: 6px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #5a6573;
  font-size: 13px;
  font-weight: 600;
}
.admin-ui2 .tabbar .subtab.active { background: #fff; color: #1f2d3d; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.admin-ui2 .review-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--admin-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.admin-ui2 .review-table th {
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid #dde3ea;
  background: #f7f9fb;
  color: var(--admin-muted);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.admin-ui2 .review-table td {
  padding: 10px;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  font-size: 13.5px;
  vertical-align: top;
}
.admin-ui2 .review-table tr:hover td { background: #f7fafd; }

/* 期の一覧の列幅（2026-08-26 利用者指示: 幅に注意する）。内容任せだと期名・部門名の長さで
   毎回並びが変わり、段階と開始の列が潰れる。表側で決めて、余りは期名の列に寄せる。 */
.admin-ui2 .pj-col-name { width: auto; }
.admin-ui2 .pj-col-dates { width: 15em; }
.admin-ui2 .pj-col-phase { width: 11em; }
.admin-ui2 .pj-col-started { width: 8em; }
.admin-ui2 .pj-col-count { width: 6.5em; }
.admin-ui2 .pj-col-ops { width: 9em; }

/* ---- 最終評価入力の一覧グリッド（#59: 110 名を 1 人ずつ開かずに連続入力する） ---- */
.admin-ui2 .final-grid-bar { align-items: center; gap: 10px; margin: 0 0 8px; }
.admin-ui2 .final-grid td { vertical-align: middle; }
/* 氏名列は横スクロールでも隠さない（#72）。背景を敷かないと下の列が透けて重なる。 */
.admin-ui2 .final-grid th:first-child,
.admin-ui2 .final-grid .final-name-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 #eef1f5;
}
.admin-ui2 .final-grid th:first-child { background: #f7f9fb; z-index: 2; }
.admin-ui2 .final-grid tr:hover .final-name-cell { background: #f7fafd; }
.admin-ui2 .final-grid .final-grid-score {
  width: 84px;
  padding: 5px 8px;
  text-align: right;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
/* 空欄のセルは「自動で採用される点」を薄字・斜体で見せる（入力済みの数字と見間違えないように） */
.admin-ui2 .final-grid .final-grid-score::placeholder { color: #9aa4b0; font-style: italic; }
/* 直したセルは色で分かるようにする（110 行のどこを触ったか一覧で見失わない） */
.admin-ui2 .final-grid .final-decided-cell.dirty .final-grid-score {
  border-color: #f0a020;
  background: #fffaf0;
}
.admin-ui2 .final-grid .final-decided-cell.dirty::after {
  content: '未保存';
  margin-left: 6px;
  color: #b26a00;
  font-size: 11px;
  font-weight: 700;
}

.admin-ui2 input[type="text"],
.admin-ui2 input[type="number"],
.admin-ui2 input[type="date"],
.admin-ui2 textarea,
.admin-ui2 select {
  border-color: #d5dbe3;
  border-radius: 7px;
  padding: 8px 10px;
}
.admin-ui2 input:focus,
.admin-ui2 textarea:focus,
.admin-ui2 select:focus { border-color: var(--admin-blue-dark); box-shadow: 0 0 0 3px rgba(47,111,191,.15); }

/* 主ボタンの青い旧指定は廃止（2026-08-19）。見た目は「ボタンの見た目の正本」1 箇所が決める。
   このとき selector の行だけ消してカンマを残したため、**主ボタンがトーストの規則に巻き込まれて
   画面右下に固定**されていた（検索ボタンが本文から消えて右下に出る症状）。
   selector を消すときは、その行とカンマを一緒に消す。 */
.admin-ui2 .toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  margin: 0;
  padding: 10px 16px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(108, 92, 231, .4);
}

@media (max-width: 900px) {
  .admin-body-row { flex-direction: column; }
  .admin-ui2 .portal-nav { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid #e7ebf0; }
  .admin-nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .admin-nav-group-label { grid-column: 1 / -1; }
  .admin-main { padding: 18px 14px 40px; }
  .admin-ui2 .portal-header { flex-wrap: wrap; }
  .admin-header-spacer { display: none; }
}

/* UI改修/管理者ポータル_2026.html の部品表現を、既存の管理者DOMへ適用する。
   保存・送信・画面遷移の処理は変更せず、見た目と配置だけをUI2の正本へ統一する。 */
.admin-ui2,
.admin-ui2 * { box-sizing: border-box; }

.admin-ui2 .portal-header {
  min-height: 0;
  margin: 0;
  gap: 16px;
  padding: 11px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-ui2 .admin-brand { font-size: 13px; font-weight: 700; }
.admin-ui2 .admin-header-sep { width: 1px; height: 16px; background: rgba(255,255,255,.25); flex: 0 0 1px; }
.admin-ui2 .admin-period { font-size: 13px; font-weight: 700; }
.admin-ui2 .admin-phase-pills { gap: 6px; }
.admin-ui2 .header-meta { font-size: 11.5px; color: #e8f0fc; }

.admin-ui2 .portal-nav .nav-btn { cursor: pointer; }
.admin-ui2 .admin-nav-group { gap: 2px; }
.admin-ui2 .admin-nav-group-label { letter-spacing: .09em; }

.admin-ui2 .admin-main > section[data-view]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-ui2 .admin-main > section[data-view][hidden] { display: none; }

/* hidden 属性は UA スタイルの `display: none` でしかないため、こちらが display を書いた
   selector（.panel / タブの中身 / 表の入れ物 など）はすべて hidden を打ち消す。
   実測（2026-08-20）: 期の編集の #peSchedulePane が hidden=true のまま display:flex・高さ 402px、
   対象・担当の #assignAdminBody が同じく高さ 184px で、隠したはずのタブが同時に出ていた。
   個々の selector に :not([hidden]) を足す形にすると、display を書くたびに足し忘れが再発するので、
   ここ 1 箇所で打ち切る。 */
.admin-ui2 [hidden] { display: none !important; }

.admin-ui2 .admin-page-head { display: block; }
.admin-ui2 .admin-page-head h2 { margin: 0 0 3px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.admin-ui2 .admin-page-head p { margin: 3px 0 0; color: #5f6b7a; font-size: 12.5px; line-height: 1.6; }
.admin-ui2 .admin-page-head .view-note { margin: 0; padding: 0; background: transparent; border: 0; }
.admin-ui2 .admin-main > section[data-view] > h2 { margin: 0 0 3px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.admin-ui2 .admin-main > section[data-view] > .view-note,
.admin-ui2 .admin-main > section[data-view] > p.info-text { margin: 0; padding: 0; background: transparent; border: 0; color: #5f6b7a; font-size: 12.5px; }
.admin-ui2 .admin-main h3 { margin: 0; color: #1b2530; font-size: 16px; }
.admin-ui2 .admin-main h4 { color: #5f6b7a; }
.admin-ui2 .spacer { flex: 1; }

.admin-ui2 .panel {
  border: 1px solid #e2e6ec;
  border-radius: 10px;
  padding: 15px 17px;
  background: #fff;
}
.admin-ui2 .panel.accent { border-color: #d9e5f5; background: #f5f9ff; }
/* 2026-08-19 UI フィードバック（Slack）: 項目名が小さくて読みづらいという指摘で 12px から上げた。
   値そのものは UI2（管理者ポータル_2026.html）に合わせる（14px）。指摘前の 12px より大きいので
   読みづらさは解消しつつ、モックと同じ作りになる。
   2026-08-20: 見出しはブロックで一番大きい文字にする方針になり、ファイル末尾で 17px に上げている。 */
.admin-ui2 .panel-title { margin-bottom: 12px; color: #3d4756; font-size: 14px; font-weight: 800; letter-spacing: .03em; }
.admin-ui2 .panel.accent .panel-title { color: #2f5f9e; }

/* ダッシュボードの評価期間・フェーズ予定は、操作や自動進行とは切り離した単純な日時一覧。 */
.admin-ui2 .home-schedule-summary {
  border-top: 1px solid #e7ebf0;
}
.admin-ui2 .home-schedule-summary-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 16px;
  align-items: center;
  min-height: 40px;
  padding: 8px 0;
  border-bottom: 1px solid #e7ebf0;
}
.admin-ui2 .home-schedule-summary-label {
  color: #26313f;
  font-weight: 700;
}
.admin-ui2 .home-schedule-summary-value {
  color: #526b8a;
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .admin-ui2 .home-schedule-summary-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .admin-ui2 .home-schedule-summary-value {
    text-align: left;
  }
}

.admin-ui2 .kpi-grid {
  display: grid;
  gap: 20px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  overflow: visible;
}
.admin-ui2 .admin-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 枠・丸角・地色・影はカードの正本（`.admin-ui2 .panel, …` の並び）が持つ。ここには持たせない。 */
.admin-ui2 .kpi-cell {
  --ui2-kpi-accent: var(--admin-pop-purple);
  --ui2-kpi-soft: #eeeaff;
  min-width: 0;
  min-height: 172px;
  padding: 24px;
}
.admin-ui2 .kpi-label { margin-bottom: 4px; color: #636e72; font-size: 13px; font-weight: 600; }
.admin-ui2 .kpi-num { color: var(--ui2-kpi-accent); font-size: 36px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.admin-ui2 .kpi-num .unit { color: #8a95a3; font-size: 13px; font-weight: 600; }
.admin-ui2 .kpi-num.danger { color: #9c2430; }

.admin-ui2 .action-list { display: flex; flex-direction: column; gap: 8px; }
.admin-ui2 .action-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  background: #fff;
  color: #1b2530;
  text-align: left;
}
.admin-ui2 button.action-item { width: 100%; cursor: pointer; }
.admin-ui2 .action-item:hover { border-color: #2f6fbf; background: #fff; }
.admin-ui2 .action-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #2f6fbf; }
.admin-ui2 .action-dot.warn { background: #b7791f; }
.admin-ui2 .action-dot.danger { background: #9c2430; }
.admin-ui2 .action-item .a-body { flex: 1; min-width: 0; }
.admin-ui2 .action-item .a-title { display: block; font-size: 13.5px; font-weight: 700; }
.admin-ui2 .action-item .a-sub { display: block; color: #5f6b7a; font-size: 11.5px; }
.admin-ui2 .action-cta { flex: 0 0 auto; pointer-events: none; }

.admin-ui2 .progress-row { display: flex; align-items: center; gap: 12px; }
.admin-ui2 .progress-row .p-name { width: 140px; flex: 0 0 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.admin-ui2 .progress-row .p-track { display: block; height: 10px; flex: 1; overflow: hidden; border-radius: 999px; background: #eef1f5; }
.admin-ui2 .progress-row .p-fill { display: block; height: 10px; border-radius: 999px; background: #2f6fbf; }
.admin-ui2 .progress-row .p-pct { width: 46px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.admin-ui2 .progress-row .p-sub { width: 112px; text-align: right; color: #5f6b7a; font-size: 12px; font-variant-numeric: tabular-nums; }

.admin-ui2 .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.admin-ui2 .grid-2-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.admin-ui2 .stack-sm { display: flex; flex-direction: column; gap: 10px; }
.admin-ui2 .stack { display: flex; flex-direction: column; gap: 18px; }
.admin-ui2 .home-lower-grid { align-items: start; }
.admin-ui2 .home-notifications { max-width: none; margin: 0; padding: 0; list-style: none; border: 1px solid #e2e6ec; border-radius: 10px; overflow: hidden; }
.admin-ui2 .home-notifications li { padding: 12px 16px; border-bottom: 1px solid #eef1f5; color: #41505f; font-size: 13.5px; line-height: 1.7; }
.admin-ui2 .home-notifications li:last-child { border-bottom: 0; }
.admin-ui2 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.admin-ui2 .review-table,
.admin-ui2 .tbl {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}
.admin-ui2 .review-table th,
.admin-ui2 .tbl th {
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid #dde3ea;
  background: #f7f9fb;
  color: #5f6b7a;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: left;
}
.admin-ui2 .review-table td,
.admin-ui2 .tbl td { padding: 10px; border: 0; border-bottom: 1px solid #eef1f5; font-size: 13.5px; vertical-align: top; }
.admin-ui2 .review-table tr:hover td,
.admin-ui2 .tbl tr:hover td { background: #f7fafd; }
.admin-ui2 .review-table thead tr.group-head th,
.admin-ui2 .tbl thead tr.group-head th { padding: 0 10px 4px; border-bottom: 0; background: #fff; color: #8a95a3; font-size: 10.5px; letter-spacing: .06em; }
.admin-ui2 .review-table th.center,
.admin-ui2 .tbl th.center,
.admin-ui2 .review-table td.center,
.admin-ui2 .tbl td.center { text-align: center; }
.admin-ui2 .review-table th.right,
.admin-ui2 .tbl th.right,
.admin-ui2 .review-table td.right,
.admin-ui2 .tbl td.right { text-align: right; }
.admin-ui2 .table-scroll,
.admin-ui2 .tbl-wrap { overflow-x: auto; }

.admin-ui2 .tabbar {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid #dde1e7;
  border-radius: 9px;
  background: #eceff3;
}
.admin-ui2 .tabbar .subtab { min-height: 0; padding: 6px 14px; border: 0; border-radius: 7px; background: transparent; color: #5a6573; font-size: 13px; font-weight: 600; }
.admin-ui2 .tabbar .subtab.active { background: #fff; color: #1f2d3d; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.admin-ui2 button:not([class]),
.admin-ui2 button.btn-primary,
.admin-ui2 button.btn-danger,
.admin-ui2 .btn {
  min-height: 0;
  padding: 6px 13px;
  border: 1px solid #d5dbe3;
  border-radius: 7px;
  background: #fff;
  color: #41505f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
/* マウスを乗せた時の見た目はファイル末尾の「マウスを乗せた時の見た目の正本」1 箇所が決める。
   ここにあった青い旧デザインの hover（#2f6fbf / #b02a37）は廃止（2026-08-20）。 */
.admin-ui2 button:disabled,
.admin-ui2 .btn:disabled { opacity: .55; cursor: default; }
.admin-ui2 .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-ui2 .action-bar { gap: 8px; margin-top: 0; }

.admin-ui2 input[type="text"],
.admin-ui2 input[type="number"],
.admin-ui2 input[type="date"],
.admin-ui2 input[type="time"],
.admin-ui2 textarea,
.admin-ui2 select {
  padding: 8px 10px;
  border: 1px solid #d5dbe3;
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
}
.admin-ui2 input:focus,
.admin-ui2 textarea:focus,
.admin-ui2 select:focus { outline: none; border-color: #2f6fbf; box-shadow: 0 0 0 3px rgba(47,111,191,.15); }
.admin-ui2 textarea { line-height: 1.8; }
.admin-ui2 .form-group { margin-bottom: 14px; }
.admin-ui2 .form-group label { color: #5f6b7a; font-size: 11.5px; font-weight: 700; }

.admin-ui2 .filter-bar,
.admin-ui2 .bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e7ebf0;
  border-radius: 9px;
  background: #f7f9fb;
}
.admin-ui2 .filter-bar select,
.admin-ui2 .filter-bar input,
.admin-ui2 .bulk-bar select,
.admin-ui2 .bulk-bar input { width: auto; padding: 7px 10px; }
.admin-ui2 .users-count { margin-left: auto; }
.admin-ui2 .role-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 160px; }
.admin-ui2 .role-check { display: inline-flex; align-items: center; gap: 2px; color: #41505f; font-size: 12px; white-space: nowrap; }
.admin-ui2 .role-check input { margin: 0; accent-color: #2f6fbf; }
/* ロールの正本の操作はチェックボックス（.role-check）で、この select は保存・テスト用の控え。
   2026-08-20 実機指摘「ロールが押せない」の直因はここ: 詳細度で common/style.css の
   `.review-table select.user-input[data-field="roles"] { min-width: 130px }` に負けて **130×18px**
   に育ち、透明なままチェックボックス 3 つの上に重なってクリックを全部吸っていた（実測: 座標
   クリックでチェックが入らず、elementFromPoint がこの select を返す）。
   幅の指定だけで抑えようとすると同じ負け方を繰り返すので、**控えは pointer-events を切る**。 */
.admin-ui2 .review-table select.user-input.role-select[data-field="roles"] {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: .01;
  pointer-events: none;
}
/* 8 列目を隠していたのは「備考」を出さないため。2026-08-19 に備考の列そのものを消したので、
   ここで隠すと今度は「ロール」が消える。列を消したら位置で隠す指定も一緒に消すこと。 */
.admin-ui2 [data-view="users"] .review-table td:nth-child(2) input,
.admin-ui2 [data-view="users"] .review-table td:nth-child(3) input,
.admin-ui2 [data-view="users"] .review-table td:nth-child(4) input {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}
.admin-ui2 [data-view="users"] .review-table td:nth-child(2) input { color: #5f6b7a; }
.admin-ui2 [data-view="users"] .review-table td:nth-child(3) input { color: #1b2530; font-weight: 700; }
.admin-ui2 [data-view="users"] .review-table td:nth-child(4) input { color: #5f6b7a; }
.admin-ui2 [data-view="users"] .review-table td:nth-child(2) input:focus,
.admin-ui2 [data-view="users"] .review-table td:nth-child(3) input:focus,
.admin-ui2 [data-view="users"] .review-table td:nth-child(4) input:focus { border-color: #2f6fbf; background: #fff; }

.admin-ui2 .goals-view,
.admin-ui2 .goals-view-item,
.admin-ui2 .wiz-step:not(span) { border: 1px solid #e2e6ec; border-radius: 9px; background: #fff; }
.admin-ui2 .goals-view { padding: 14px 16px; }
.admin-ui2 .goals-view-item,
.admin-ui2 .wiz-step:not(span) { padding: 12px 14px; }
.admin-ui2 .state-banner { margin: 0; padding: 9px 13px; border: 1px solid #e2e6ec; border-left: 3px solid #b7791f; border-radius: 7px; background: #fff; color: #5f6b7a; font-size: 12.5px; }
.admin-ui2 .notice { padding: 9px 13px; border: 1px solid #e2e6ec; border-left: 3px solid #b7791f; border-radius: 14px; background: #fff; color: #5f6b7a; font-size: 12.5px; font-weight: 700; }
.admin-ui2 .pill { display: inline-block; padding: 4px 14px; border-radius: 20px; background: #f0f2f5; color: #5f6b7a; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* ピルの色は UI2 と同じグラデーション。数字の列は桁を揃える。 */
.admin-ui2 .pill.info { background: linear-gradient(135deg, var(--admin-pop-lilac), var(--admin-pop-purple)); color: #fff; }
.admin-ui2 .num { font-variant-numeric: tabular-nums; }
.admin-ui2 .pill.done { background: linear-gradient(135deg, #55efc4, var(--admin-pop-mint)); color: #fff; }
.admin-ui2 .pill.rejected { background: linear-gradient(135deg, #fab1a0, var(--admin-pop-red)); color: #fff; }
.admin-ui2 .pill.warn { background: linear-gradient(135deg, #ffeaa7, #fdcb6e); color: #8a6d12; }
/* 読み込み中のカード（2026-08-28 利用者指示「管理者のローディング画面は非管理者と一致して」）。
   管理者は body が `admin-ui2` で `ui2` を含まないため、読み込み表示だけ細い帯に落ちていた。
   組み立ては common/portal.js の 1 実装（usesLoadingCard）が両方に同じ DOM を出す。色は
   ロール別 CSS が持つ規則どおり、ここでは管理者のトークン（--admin-pop-*）から出さない。
   形（余白・角丸・並び）は非管理者の ui2-kit.css と同じ値にする＝見た目が一致する。 */
.admin-ui2 .loading-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 36px 28px;
  border: 1px solid var(--admin-pop-line); border-radius: 22px; background: #fff;
  box-shadow: 0 2px 0 #edeef2, 0 4px 16px rgba(0,0,0,.06);
  text-align: center;
}
.admin-ui2 .loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid #eeeaff; border-top-color: var(--admin-pop-purple);
  border-radius: 50%; animation: admin-loading-spin .8s linear infinite;
}
.admin-ui2 .loading-title { color: var(--admin-pop-ink); font-size: 16px; font-weight: 800; }
.admin-ui2 .loading-sub { color: var(--admin-pop-muted); font-size: 13px; }
.admin-ui2 .loading-lines { width: min(100%, 420px); display: grid; gap: 8px; }
.admin-ui2 .loading-line {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, #f0f0f5, #eeeaff, #f0f0f5);
  background-size: 200% 100%; animation: admin-loading-shimmer 1.3s linear infinite;
}
.admin-ui2 .loading-line.short { width: 62%; }
@keyframes admin-loading-spin { to { transform: rotate(360deg); } }
@keyframes admin-loading-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* AI レビューの点数（2026-08-28 利用者指示）。一覧では**数字だけ**を出すので、
   「点はあるが本人はこのままでは提出できない」（80 点未満・採点後に目標が変更）だけ
   色を変えて気づけるようにする。どのセルに付けるかの判定は Portal.goalReviewCellClass。 */
.admin-ui2 td.gr-attn { color: #8a5a11; font-weight: 700; }
/* 提出状況のバッジ（UI2 の badgePill）。進捗一覧で氏名ごとに並ぶ 提出済み / 記入済み はこの淡い色。
   同じ「済み」でも最終評価の列だけは .pill.done（濃いグラデーション）で、UI2 もそう分けている。 */
.admin-ui2 .pill.badge-done { background: #e6f4ec; color: #1f7a52; }
.admin-ui2 .pill.badge-reject { background: #fbeaec; color: #9c2430; }
.admin-ui2 .pill.badge-none { background: #f0f2f5; color: #5f6b7a; }
/* 「開始待ち」＝予定は発効済みで、予定の時刻に自動で始まる（2026-09-09）。灰（badge-none）と
   同じ見た目にすると「何もしていない」と区別が付かない。 */
.admin-ui2 .pill.badge-wait { background: #f2f1fc; color: #5b54bd; }
.admin-ui2 .muted,
.admin-ui2 .muted-sm { color: #5f6b7a; font-size: 12.5px; }
.admin-ui2 .muted-sm { color: #8a95a3; font-size: 12px; }

@media (max-width: 900px) {
  .admin-ui2 .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-ui2 .home-lower-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .admin-ui2 .admin-kpi-grid { grid-template-columns: 1fr; }
  .admin-ui2 .progress-row .p-name { width: 80px; flex-basis: 80px; }
  .admin-ui2 .progress-row .p-sub { display: none; }
}

/* 進捗一覧: UI改修の「KPI → 部門展開 → 未提出者パネル」構成 */
.admin-ui2 .progress-action-row { display: flex; align-items: center; min-height: 34px; }
.admin-ui2 .progress-kpis { margin-top: 0; }
.admin-ui2 .progress-dept-panel { padding: 0; overflow: hidden; }
.admin-ui2 .progress-dept-panel .panel-title { padding: 13px 16px; border-bottom: 1px solid #e7ebf0; }
.admin-ui2 .progress-dept-panel .table-scroll { padding: 0; }
.admin-ui2 .progress-dept-panel > .table-scroll > .review-table { border: 0; }
.admin-ui2 .progress-dept-panel > .table-scroll > .review-table > thead { display: none; }
/* 直下の tr だけを指す（`>` を外すと、部門を開いた先のメンバー表の行にも掛かり、
   UI2 と違う地色・余白になる。実測で 14px → 12px 14px・透明 → 白にずれていた）。 */
.admin-ui2 .progress-dept-panel > .table-scroll > .review-table > tbody > tr:not(.dept-members-row) > td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  vertical-align: middle;
}
.admin-ui2 .progress-dept-panel > .table-scroll > .review-table > tbody > tr:not(.dept-members-row) > td:first-child { width: 24%; }
.admin-ui2 .progress-dept-panel > .table-scroll > .review-table > tbody > tr:not(.dept-members-row) > td:nth-child(2) {
  color: #5f6b7a;
  font-size: 12px;
  white-space: nowrap;
}
.admin-ui2 .progress-dept-panel .dept-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: #1b2530;
  font-size: 13.5px;
  font-weight: 800;
}
.admin-ui2 .progress-dept-panel .dept-toggle:hover { color: #2f6fbf; background: transparent; border-color: transparent; }
.admin-ui2 .progress-dept-panel .dept-members-row[hidden] { display: none; }
.admin-ui2 .progress-dept-panel .dept-members-row > td { padding: 0 14px 14px; background: #fbfcfe; }
.admin-ui2 .progress-dept-panel .dept-members-table { margin-top: 4px; border: 1px solid #e7ebf0; border-radius: 8px; overflow: hidden; }
.admin-ui2 .dept-members-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.admin-ui2 .progress-filter-bar { margin-top: 0; }
.admin-ui2 .progress-filter-label { color: #5f6b7a; font-size: 12px; font-weight: 700; white-space: nowrap; }
.admin-ui2 .progress-filter-bar > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.admin-ui2 #unsubmittedCount { margin: 0 0 0 auto; color: #5f6b7a; font-size: 12px; white-space: nowrap; }
.admin-ui2 .progress-late-panels { display: flex; flex-direction: column; gap: 12px; }
.admin-ui2 .progress-late-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 2px;
  scrollbar-width: thin;
}
.admin-ui2 .progress-late-tab {
  flex: 0 0 auto;
  padding: 9px 14px;
  border: 1px solid #d9dce8;
  border-radius: 10px;
  background: #fff;
  color: #41505f;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.admin-ui2 .progress-late-tab.active {
  border-color: #6658df;
  background: #6658df;
  color: #fff;
}
.admin-ui2 .progress-late-tab:focus-visible {
  outline: 3px solid rgba(102, 88, 223, .25);
  outline-offset: 2px;
}
.admin-ui2 .progress-late-panel[hidden] { display: none; }
.admin-ui2 .progress-late-panel { padding: 0; overflow: hidden; }
.admin-ui2 .progress-late-panel .panel-title { padding: 12px 16px; border-bottom: 1px solid #e7ebf0; }
.admin-ui2 .progress-late-panel .panel-count { color: #8a95a3; font-size: 11.5px; font-weight: 600; }
.admin-ui2 .late-group-list { padding: 12px 16px; }
.admin-ui2 .late-row { display: flex; gap: 12px; align-items: baseline; padding: 2px 0 2px 11px; border-left: 3px solid #e0b4b4; }
.admin-ui2 .late-row + .late-row { margin-top: 4px; }
/* 部門名は長いものがある（「コミュニケーション統括部」「管理本部・経営企画室・営業事務」）。
   nowrap の固定幅だと**氏名の欄へ 34px 食い込んで重なる**（2026-08-26 実測）。列の位置は
   そろえたいので幅は固定のままにし、入り切らない名前は折り返す（切り捨てない＝どの部門か
   分からなくならない）。 */
.admin-ui2 .late-row .lr-dept {
  width: 13em; flex: 0 0 13em; color: #41505f; font-size: 12.5px; font-weight: 700;
  white-space: normal; overflow-wrap: anywhere; line-height: 1.5;
}
.admin-ui2 .late-row .lr-names { color: #41505f; font-size: 12.5px; line-height: 1.7; min-width: 0; flex: 1 1 auto; }
.admin-ui2 .progress-empty { padding: 6px 0; }
.admin-ui2 .progress-legacy-table,
.admin-ui2 .progress-legacy-divider,
.admin-ui2 .progress-legacy-action { display: none; }
.admin-ui2 .distribution-filter-bar { margin-top: 0; }
.admin-ui2 .distribution-filter-bar input { width: 260px; }
.admin-ui2 .distribution-table-wrap { overflow-x: auto; }
.admin-ui2 .distribution-table-wrap .review-table { min-width: 900px; }
/* 中央寄せは部門別の表（直下）だけ。`>` を外すと、部門を開いた先の人員詳細の
   氏名・等級・職種まで中央寄せになり、UI2 の左寄せと変わってしまう。 */
.admin-ui2 .distribution-table-wrap > .review-table > thead > tr > th:not(:first-child),
.admin-ui2 .distribution-table-wrap > .review-table > tbody > tr > td:not(:first-child) { text-align: center; }
/* 8〜10 列目は 改定額合計 / 予算 / 差分（金額なので右揃え）。11 列目の 予算内 はピルなので中央。 */
.admin-ui2 .distribution-table-wrap > .review-table > thead > tr > th:nth-child(8),
.admin-ui2 .distribution-table-wrap > .review-table > thead > tr > th:nth-child(9),
.admin-ui2 .distribution-table-wrap > .review-table > thead > tr > th:nth-child(10),
.admin-ui2 .distribution-table-wrap > .review-table > tbody > tr > td:nth-child(8),
.admin-ui2 .distribution-table-wrap > .review-table > tbody > tr > td:nth-child(9),
.admin-ui2 .distribution-table-wrap > .review-table > tbody > tr > td:nth-child(10) { text-align: right; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-cell { font-variant-numeric: tabular-nums; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-heat-1 { background: #eaf2fb; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-heat-2 { background: #c3dcf5; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-heat-3 { background: #7fb0e3; color: #fff; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-state { text-align: center !important; }
.admin-ui2 .matrix-total-row td { font-weight: 700; }
/* 予算に対する差分。超過（正）だけ赤にする。ここ 1 箇所が部門行・合計行・人員詳細の全部を決める。 */
.admin-ui2 .dd-diff { color: #1f7a52; font-weight: 700; }
.admin-ui2 .dd-diff.over { color: #9c2430; }
.admin-ui2 .distribution-help { margin: 4px 0 0; }
.admin-ui2 .distribution-detail { margin-top: 10px; padding: 14px 16px; border: 1px solid #e2e6ec; border-radius: 9px; background: #f7f9fb; }
.admin-ui2 .distribution-detail h3 { margin: 0 0 10px; font-size: 15px; }
.admin-ui2 .distribution-detail .review-table { background: #fff; }
.admin-ui2 .dd-summary { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; }
.admin-ui2 .distribution-member-table .member-name,
.admin-ui2 .dept-members-table .member-name { font-weight: 600; }
.admin-ui2 .dept-members-table .progress-reject-button {
  margin-left: 6px;
  white-space: nowrap;
}
.admin-ui2 .distribution-member-table .dd-score { width: 5em; text-align: right; }
.admin-ui2 .distribution-member-table .raise-amount { color: #1f7a52; font-weight: 700; }
@media (max-width: 720px) {
  .admin-ui2 #unsubmittedCount { width: 100%; margin-left: 0; }
  .admin-ui2 .progress-dept-panel > .table-scroll > .review-table > tbody > tr:not(.dept-members-row) > td:nth-child(2) { width: 76%; }
  .admin-ui2 .late-row { display: block; }
  .admin-ui2 .late-row .lr-dept { display: block; width: auto; }
}

/* -------------------------------------------------------------------------
   Pop UI layer
   Visual language based on UI改修/ref/hr_portal_ui_ref.html.
   This layer intentionally changes presentation only; portal data contracts,
   element IDs and event handlers remain unchanged.
   ------------------------------------------------------------------------- */
:root {
  --admin-pop-purple: #6c5ce7;
  --admin-pop-lilac: #a29bfe;
  --admin-pop-pink: #fd79a8;
  --admin-pop-pink-strong: #e84393;
  --admin-pop-mint: #00b894;
  --admin-pop-orange: #e17055;
  --admin-pop-red: #d63031;
  --admin-pop-ink: #2d3436;
  --admin-pop-muted: #636e72;
  --admin-pop-line: #ececf4;
  --admin-pop-bg: #f5f6fa;
  --admin-pop-shadow: 0 8px 24px rgba(45, 52, 54, .07);
  /* カードの影の正本。UI2（管理者ポータル_2026.html）の .panel と同じ値。
     丸角や余白は場所ごとに違ってよいが、影は 1 種類しか無い。数値をここ以外に書かない。 */
  --admin-card-shadow: 0 2px 0 #edeef2, 0 4px 16px rgba(0, 0, 0, .06);
}

body.portal.admin-ui2 {
  min-height: 100vh;
  background:
    radial-gradient(circle at 3% 10%, rgba(253, 121, 168, .13), transparent 28%),
    radial-gradient(circle at 96% 12%, rgba(162, 155, 254, .17), transparent 30%),
    linear-gradient(135deg, #fff8fb 0%, var(--admin-pop-bg) 48%, #f2f8ff 100%);
  color: var(--admin-pop-ink);
  font-size: 15px;
}

.admin-ui2 .portal-header {
  min-height: 70px;
  padding: 0 30px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--admin-pop-line);
  box-shadow: 0 3px 16px rgba(108, 92, 231, .07);
  color: var(--admin-pop-ink);
  backdrop-filter: blur(12px);
}

/* UI2 と同じく、記号は絶対配置ではなく横並びの 1 要素にする。絶対配置だと逃げた分を
   padding で作ることになり、余白の値が UI2 と揃わない。 */
.admin-ui2 .admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--admin-pop-purple);
  font-size: 18px;
  font-weight: 800;
}

.admin-ui2 .admin-brand::before {
  content: '人';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  box-shadow: 0 5px 13px rgba(108, 92, 231, .26);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}

/* 「/ 管理者」ではなく、UI2 と同じ紫のタグにする。文字の「/ 」は portal.html 側で外す。 */
.admin-ui2 .admin-brand span {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 4px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  box-shadow: 0 2px 8px rgba(108, 92, 231, .3);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.admin-ui2 .admin-header-sep {
  height: 25px;
  background: var(--admin-pop-line);
}

.admin-ui2 .admin-period {
  color: var(--admin-pop-ink);
  font-size: 14px;
  font-weight: 700;
}

.admin-ui2 .admin-phase-pills {
  gap: 6px;
}

.admin-ui2 .admin-phase-pills .phase-pill {
  min-height: 27px;
  padding: 5px 13px;
  border: 1px solid #e6e1ff;
  border-radius: 999px;
  background: #f3f0ff;
  color: #8177bd;
  font-size: 12px;
  font-weight: 700;
}

.admin-ui2 .admin-phase-pills .phase-pill.current {
  border-color: transparent;
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-pink));
  color: #fff;
  box-shadow: 0 4px 10px rgba(108, 92, 231, .22);
}

.admin-ui2 .header-meta {
  color: var(--admin-pop-muted);
  font-size: 13px;
}

.admin-ui2 .admin-user-visible {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.admin-ui2 .admin-user-visible::before {
  content: '人';
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--admin-pop-pink), var(--admin-pop-pink-strong));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(232, 67, 147, .2);
}

.admin-ui2 .admin-body-row {
  align-items: stretch;
}

.admin-ui2 .portal-nav {
  flex: 0 0 248px;
  width: 248px;
  gap: 32px;
  padding: 28px 16px;
  border-right: 1px solid var(--admin-pop-line);
  background: #fff;
}

.admin-ui2 .admin-nav-group {
  gap: 4px;
  margin-bottom: 25px;
}

.admin-ui2 .admin-nav-group-label {
  margin: 0 12px 8px;
  color: #b2bec3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.admin-ui2 .nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 14px;
  border: none;
  border-radius: 12px;
  color: #636e72;
  font-size: 14px;
  font-weight: 600;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* 記号は座布団を敷かず、文字色と同じ色でそのまま置く（UI2 と同じ）。
   **絵柄はここに書かない**。正本は src/common/portal.js の NAV_ICONS で、renderNav が
   data-icon 属性に載せてくる。ここで画面ごとに絵柄を並べると「片方だけ直す」が起きる
   （実際に管理者だけ旧アイコンのまま残っていた・解決方針 #14）。 */
.admin-ui2 .nav-btn[data-icon]::before {
  width: 22px;
  flex: 0 0 22px;
  color: currentColor;
  content: attr(data-icon);
  font-size: 16px;
  text-align: center;
}

/* UI2 の `.side-btn:hover` と同じ値（2026-08-20 の実測で地色と滑る距離を揃えた）。 */
.admin-ui2 .nav-btn:hover {
  background: #f5f6fa;
  color: var(--admin-pop-purple);
  transform: translateX(3px);
}

.admin-ui2 .nav-btn.active {
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  color: #fff;
  box-shadow: 0 7px 16px rgba(108, 92, 231, .23);
}

.admin-ui2 .nav-btn.active::before {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.admin-ui2 .admin-main {
  min-width: 0;
  padding: 32px 40px 80px;
  background: transparent;
}

.admin-ui2 .admin-page-head {
  margin-bottom: 24px;
}

.admin-ui2 .admin-page-head h2 {
  margin-bottom: 7px;
  color: var(--admin-pop-ink);
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -.02em;
}

.admin-ui2 .admin-page-head p,
.admin-ui2 .admin-page-head .sub,
.admin-ui2 .page-note {
  color: var(--admin-pop-muted);
  font-size: 14px;
  line-height: 1.65;
}

.admin-ui2 .panel {
  padding: 24px;
}

.admin-ui2 .panel-title,
.admin-ui2 .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--admin-pop-muted);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
}

.admin-ui2 .panel.accent {
  border-color: transparent;
  background: linear-gradient(135deg, var(--admin-pop-purple) 0%, var(--admin-pop-lilac) 62%, var(--admin-pop-pink) 100%);
  box-shadow: 0 10px 26px rgba(108, 92, 231, .25);
  color: #fff;
}

.admin-ui2 .panel.accent .panel-title,
.admin-ui2 .panel.accent .section-title {
  color: rgba(255, 255, 255, .9);
  letter-spacing: .04em;
}

/* 2026-08-21 実機（非管理者画面で発覚。同じ形なので管理者面にも入れる）: 地を暗くした面に
   薄い灰色の補助文（.muted / .muted-sm）を置くと沈んで読めない。中に置ける文字クラスの
   明るさをここで一緒に決める。 */
.admin-ui2 .panel.accent .muted,
.admin-ui2 .panel.accent .muted-sm,
.admin-ui2 .panel.accent .notice {
  /* 白文字にするだけでは足りない（実測: 地の薄い側で 2.21:1・AA は 4.5:1）。
     補助文は自前の明るい面に載せて濃い文字で書く。 */
  color: #3d4149;
  background: rgba(255, 255, 255, .92);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.7;
}

.admin-ui2 .home-actions-panel {
  padding: 24px;
}

.admin-ui2 .home-actions-panel .action-list {
  gap: 12px;
}

.admin-ui2 .home-actions-panel .action-item,
.admin-ui2 .home-actions-panel .task-card {
  min-height: 76px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  box-shadow: none;
  transition: transform .18s ease, background .18s ease;
}

/* 行そのものがボタン。UI2 の `.panel.accent .action-item:hover` と同じ値
   （2026-08-20 の実測で .21 → .2 に揃えた）。 */
.admin-ui2 .home-actions-panel .action-item:hover,
.admin-ui2 .home-actions-panel .task-card:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-2px);
}

.admin-ui2 .home-actions-panel .action-dot {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 20px;
  font-weight: 400;
}

/* 絵文字は入れない。UI2 は薄い角丸の四角だけで、同じ意味の記号を左ナビにも持っている。 */

.admin-ui2 .home-actions-panel .a-title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.admin-ui2 .home-actions-panel .a-sub {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 400;
}

/* `.panel.accent` を挟んで 1 段強くしてある。`.admin-ui2 .btn.primary`（紫ピンクの
   グラデーション）がこの下にあり、同じ強さだと後ろが勝って画面がグラデーションになる。
   UI2 も同じ理由で `.panel.accent .btn.primary` と書いている。 */
.admin-ui2 .panel.accent .action-cta {
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--admin-pop-purple);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
  font-weight: 700;
}

/* `.action-cta` に hover は書かない（2026-08-20）。この部品は行全体が 1 つのボタンで、
   中の `.action-cta` は `pointer-events: none` の飾りの span なので **:hover は永久に発火しない**
   （書いても読み手のいない規則になる）。マウスに反応するのは行（`.action-item`）の方で、
   UI2 も同じ場所（`.panel.accent .action-item:hover`）で行を持ち上げている。 */

.admin-ui2 .admin-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  overflow: visible;
  border: 0;
  background: transparent;
}

/* カードの見た目そのもの（枠・丸角・影・地色）は `.admin-ui2 .kpi-cell` の 1 箇所だけが持つ。
   ここで重ねるとカードの見た目が 2 箇所に散るので、この規則は位置と動きだけにする。 */
.admin-ui2 .admin-kpi-grid .kpi-cell {
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}

.admin-ui2 .admin-kpi-grid .kpi-cell::after {
  position: absolute;
  right: -15px;
  bottom: -24px;
  color: rgba(108, 92, 231, .07);
  content: '✦';
  font-size: 100px;
  line-height: 1;
  transform: rotate(12deg);
}

.admin-ui2 .admin-kpi-grid .kpi-cell:hover {
  box-shadow: 0 12px 28px rgba(108, 92, 231, .13);
  transform: translateY(-3px);
}

/* 数字の色は「何枚目のカードか」で変わる。UI2 と同じく、色をカード側の変数として持たせて
   数字はそれを読むだけにする。数字側に色を書くと、素の規則（.admin-ui2 .kpi-num）を
   UI2 に合わせても画面はこちらの値で描かれてしまう。 */
.admin-ui2 .admin-kpi-grid .kpi-cell .kpi-num {
  margin-top: 8px;
}

/* 濃い色（数字）と淡い色（アイコンの座布団）は必ず対で変える。別々に書いていたため、
   3 枚目だけアイコンが緑・数字がオレンジになっていた（配布先の実物で発見）。 */
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(2) { --ui2-kpi-accent: var(--admin-pop-mint); --ui2-kpi-soft: #e0f8f0; }
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(3) { --ui2-kpi-accent: #e17055; --ui2-kpi-soft: #fff0e0; }
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(4) { --ui2-kpi-accent: var(--admin-pop-red); --ui2-kpi-soft: #ffe0e0; }
.admin-ui2 .admin-kpi-grid .kpi-cell .unit {
  color: #b2bec3;
  font-size: 13px;
  font-weight: 700;
}

.admin-ui2 .grid-2,
.admin-ui2 .home-lower-grid {
  gap: 16px;
}

.admin-ui2 .progress-row {
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f5;
}

.admin-ui2 .progress-row:last-child { border-bottom: 0; }
.admin-ui2 .progress-row .p-name,
.admin-ui2 .progress-row .p-sub { color: var(--admin-pop-muted); }
.admin-ui2 .progress-row .p-name { font-weight: 800; }
.admin-ui2 .progress-row .p-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #f0eff8;
}
.admin-ui2 .progress-row .p-fill {
  border-radius: inherit;
  background: linear-gradient(90deg, var(--admin-pop-purple), var(--admin-pop-lilac), var(--admin-pop-pink));
  box-shadow: 0 3px 8px rgba(108, 92, 231, .18);
}
.admin-ui2 .progress-row .p-pct { color: var(--admin-pop-purple); font-weight: 850; }

.admin-ui2 .review-table,
.admin-ui2 .tbl,
.admin-ui2 .distribution-detail,
.admin-ui2 .table-wrap {
  border-radius: 14px;
}

.admin-ui2 .review-table {
  overflow: hidden;
  border: 1px solid var(--admin-pop-line);
  background: #fff;
  box-shadow: 0 4px 15px rgba(45, 52, 54, .04);
}

/* 見出し行の見た目は `.admin-ui2 .review-table th` の 1 箇所が決める。ここは `thead th` で
   1 段強いので、値を書くと必ずそちらが出る（実際にそれで UI2 と違う紫の見出しになっていた）。 */

.admin-ui2 .review-table tbody td,
.admin-ui2 .tbl tbody td {
  border-bottom-color: #f0f0f5;
  color: var(--admin-pop-ink);
}

.admin-ui2 .review-table tbody tr:hover td,
.admin-ui2 .tbl tbody tr:hover td {
  background: #fcfbff;
}

.admin-ui2 .distribution-table-wrap .review-table .matrix-heat-1 { background: #f1edff; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-heat-2 { background: #dcd4ff; }
.admin-ui2 .distribution-table-wrap .review-table .matrix-heat-3 {
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  color: #fff;
}

.admin-ui2 input,
.admin-ui2 select,
.admin-ui2 textarea {
  border-color: #dedaf0;
  border-radius: 10px;
  background: #fff;
  color: var(--admin-pop-ink);
}

.admin-ui2 input:focus,
.admin-ui2 select:focus,
.admin-ui2 textarea:focus {
  border-color: var(--admin-pop-lilac);
  box-shadow: 0 0 0 3px rgba(162, 155, 254, .2);
  outline: 0;
}

.admin-ui2 button,
.admin-ui2 .btn {
  border-radius: 10px;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* 主ボタン・危険ボタン・ふつうのボタンの hover はファイル末尾の
   「マウスを乗せた時の見た目の正本」1 箇所が決める（2026-08-20）。
   ここに書くと、後段と競って画面ごとに色や浮き上がり方が変わる（実際にそうなっていた）。 */

.admin-ui2 .pill,
.admin-ui2 .status-pill,
.admin-ui2 .badge,
.admin-ui2 .state-pill {
  border-radius: 20px;
  font-weight: 700;
}

.admin-ui2 .filter-bar,
.admin-ui2 .bulk-bar,
.admin-ui2 .distribution-filter-bar {
  border: 1px solid #f0e5ef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
}

.admin-ui2 .notification-list li,
.admin-ui2 .notice-list li {
  border-color: #f0f0f5;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
}

.admin-ui2 .distribution-detail {
  border: 1px solid #e9e3ff;
  background: #faf9ff;
}

.admin-ui2 .distribution-help,
.admin-ui2 .help-text {
  color: var(--admin-pop-muted);
}

@media (max-width: 1100px) {
  .admin-ui2 .admin-main { padding-right: 26px; padding-left: 26px; }
  .admin-ui2 .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .admin-ui2 .portal-header {
    min-height: 64px;
    padding: 10px 16px;
  }
  .admin-ui2 .admin-brand { padding-left: 42px; font-size: 16px; }
  .admin-ui2 .admin-brand::before { width: 32px; height: 32px; }
  .admin-ui2 .admin-header-sep,
  .admin-ui2 .admin-phase-pills { display: none; }
  .admin-ui2 .admin-body-row { display: block; }
  .admin-ui2 .portal-nav {
    width: 100%;
    padding: 12px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--admin-pop-line);
  }
  .admin-ui2 .admin-nav-group {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 9px;
  }
  .admin-ui2 .admin-nav-group-label { width: auto; margin: 0 12px 4px; }
  .admin-ui2 .nav-btn { min-height: 36px; padding: 7px 10px; font-size: 12px; }
  .admin-ui2 .nav-btn::before { display: none; }
  .admin-ui2 .admin-main { padding: 24px 16px 56px; }
  .admin-ui2 .admin-page-head h2 { font-size: 24px; }
  .admin-ui2 .panel { padding: 18px; }
  .admin-ui2 .admin-kpi-grid { grid-template-columns: 1fr; gap: 12px; }
  .admin-ui2 .admin-kpi-grid .kpi-cell { min-height: 126px; padding: 18px; }
  .admin-ui2 .home-actions-panel .action-item,
  .admin-ui2 .home-actions-panel .task-card { padding: 12px; }
  .admin-ui2 .home-actions-panel .action-cta { padding: 8px 11px; font-size: 12px; }
}

/* -------------------------------------------------------------------------
   Dashboard fidelity and readability
   Keep the reference proportions and contrast. This is presentation-only.
   ------------------------------------------------------------------------- */
/* 背景は UI2（管理者ポータル_2026.html）の 3 つの円のにじみと同じ。外枠（.admin-shell）を
   透明にしないと、この背景がカードの外に出てこない。 */
body.portal.admin-ui2 {
  background:
    radial-gradient(circle at 10% 20%, #eeeaff 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, #e0f4ff 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, #fff4cc 0%, transparent 50%),
    var(--admin-pop-bg);
  background-attachment: fixed;
  color: var(--admin-pop-ink);
  font-family: "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Meiryo, sans-serif;
  line-height: 1.7;
}

/* 画面の外枠は動かさず、本文と左ナビが**それぞれの中で**スクロールする（UI2 と同じ）。
   ブラウザ側のスクロールに任せていたため、ヘッダーが流れ、下の操作（設定の 3 列カードなど）に
   届かないことがあった。 */
.admin-ui2 .admin-shell {
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

.admin-ui2 .admin-body-row {
  height: calc(100vh - 64px);
  overflow: hidden;
}

.admin-ui2 .portal-nav {
  height: 100%;
  overflow-y: auto;
  /* 縦並びのメニューでは wrap を必ず戻す。基底の `.portal-nav`（common/style.css）は
     横並びタブ用に `flex-wrap: wrap` を持つため、縦 + 高さ固定のままだと入り切らない分が
     **横へ折り返して枠外に出る**（実測: 10 個中 5 個が見切れ・解決方針 #10）。 */
  flex-wrap: nowrap;
}

.admin-ui2 .portal-header {
  min-height: 64px;
  height: 64px;
  padding: 0 32px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.admin-ui2 .admin-phase-pills .admin-phase-pill {
  border-color: transparent;
}

.admin-ui2 .admin-phase-pills .admin-phase-pill.current {
  padding: 5px 14px;
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 92, 231, .3);
}

.admin-ui2 .admin-user-visible::before {
  order: 2;
}

/* 幅の上限は置かない（UI2 も置いていない）。1200px で切ると、広い画面で右に大きな余白が残り、
   表が窮屈なのに横に空きがある、ちぐはぐな見え方になる。 */
.admin-ui2 .admin-main {
  height: 100%;
  overflow-y: auto;
  max-width: none;
  gap: 24px;
}

.admin-ui2 .admin-page-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}

/* 見出しと副題を <div> で包んでいない画面では、横並びのままだと副題が題の右に付く。
   題だけ 1 行占有させて、副題を下の行に落とす（包んである画面には当たらない）。 */
.admin-ui2 .admin-page-head > h2 { flex: 1 0 100%; }

.admin-ui2 .admin-page-head h2 {
  font-size: 28px;
  font-weight: 800;
}

.admin-ui2 .panel.accent {
  border: 0;
  background: linear-gradient(135deg, var(--admin-pop-purple) 0%, var(--admin-pop-lilac) 100%);
  box-shadow: 0 4px 0 #5b4cdb, 0 8px 28px rgba(108, 92, 231, .3);
}

.admin-ui2 .home-actions-panel .action-item,
.admin-ui2 .home-actions-panel .task-card {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .15);
}

.admin-ui2 .home-actions-panel .a-title {
  font-weight: 700;
}

.admin-ui2 .home-actions-panel .a-sub {
  font-size: 13px;
}

/* 実行ボタンの見た目は上の `.home-actions-panel .action-cta` 1 箇所が決める。
   ここで重ねると、後ろにある `.btn.primary`（紫ピンクのグラデーション）と競って
   どちらが出るか読めなくなる。実際にそれで画面がグラデーションになっていた。 */

.admin-ui2 .admin-kpi-grid .kpi-cell {
  display: flex;
  flex-direction: column;
}

.admin-ui2 .admin-kpi-grid .kpi-cell::before {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: 14px;
  background: var(--ui2-kpi-soft);
  color: var(--ui2-kpi-accent);
  font-size: 24px;
  line-height: 1;
}

/* 絵柄だけを枚数ごとに変える。色は上の変数が決めるのでここには書かない。 */
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(1)::before { content: '👥'; }
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(2)::before { content: '✅'; }
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(3)::before { content: '🏁'; }
.admin-ui2 .admin-kpi-grid .kpi-cell:nth-child(4)::before { content: '⏰'; }

.admin-ui2 .admin-kpi-grid .kpi-cell::after {
  display: none;
}

.admin-ui2 .admin-kpi-grid .kpi-cell .kpi-label {
  font-weight: 600;
}

.admin-ui2 .admin-kpi-grid .kpi-cell .kpi-num {
  font-size: 36px;
  font-weight: 800;
}

.admin-ui2 .admin-kpi-grid .kpi-cell .kpi-num .unit {
  color: #b2bec3;
  font-size: 15px;
  font-weight: 600;
}

.admin-ui2 .admin-kpi-grid .kpi-cell .kpi-sub {
  color: #8993a0;
  font-size: 12px;
  line-height: 1.5;
}

.admin-ui2 .grid-2,
.admin-ui2 .home-lower-grid {
  grid-template-columns: 1.3fr 1fr;
}

.admin-ui2 .home-lower-grid .panel-title::before,
.admin-ui2 .home-actions-panel .panel-title::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--admin-pop-purple);
  content: '';
}

.admin-ui2 .home-actions-panel .panel-title::before {
  background: rgba(255, 255, 255, .65);
}

.admin-ui2 .progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: 0;
}

.admin-ui2 .progress-row .p-name {
  grid-column: 1;
  grid-row: 1;
  width: auto;
  flex: none;
  font-size: 14px;
  font-weight: 700;
}

.admin-ui2 .progress-row .p-sub {
  grid-column: 2;
  grid-row: 1;
  width: auto;
  text-align: right;
  font-size: 12px;
}

.admin-ui2 .progress-row .p-track {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  height: 12px;
}

.admin-ui2 .progress-row .p-fill {
  height: 12px;
  background: linear-gradient(90deg, var(--admin-pop-purple), var(--admin-pop-lilac));
}

.admin-ui2 .progress-row .p-pct {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  min-width: 46px;
  text-align: right;
  color: var(--admin-pop-purple);
  font-size: 14px;
}

.admin-ui2 .home-notifications {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.admin-ui2 .home-notifications li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f5f6fa;
  background: transparent;
  color: var(--admin-pop-ink);
  font-size: 14px;
  line-height: 1.6;
}

.admin-ui2 .home-notifications li::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--admin-pop-purple);
  content: '';
}

.admin-ui2 .home-notifications li:nth-child(1)::before { background: var(--admin-pop-red); }
.admin-ui2 .home-notifications li:nth-child(2)::before { background: var(--admin-pop-orange); }
.admin-ui2 .home-notifications li:nth-child(3)::before { background: var(--admin-pop-mint); }

.admin-ui2 .home-notifications li:last-child {
  border-bottom: 0;
}

.admin-ui2 .portal-nav .nav-btn[aria-current="page"] {
  background: var(--admin-pop-purple);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 92, 231, .25);
}

/* 記号の色は文字と同じ（currentColor）。選択中は文字が白になるので記号も白になる。 */


@media (max-width: 720px) {
  .admin-ui2 .admin-main { max-width: none; }
  .admin-ui2 .admin-kpi-grid .kpi-cell { min-height: 190px; }
  .admin-ui2 .grid-2,
  .admin-ui2 .home-lower-grid { grid-template-columns: 1fr; }
}

.admin-ui2 .admin-page-head > .btn {
  margin-left: auto;
  align-self: flex-start;
}

/* 見出しの横のボタンにも専用の hover を書かない（2026-08-20）。ふつうのボタンなので、
   末尾の正本がそのまま決める。ここに書くと、同じ見た目のボタンなのにこの 1 つだけ
   違う色で光る（実測では他が #f5f8fd、ここだけ #fff だった）。 */

.admin-ui2 .nav-badge {
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0 7px;
  border-radius: 11px;
  background: #ffeaa7;
  color: var(--admin-pop-red);
  font-size: 11px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.admin-ui2 .portal-nav .nav-btn[aria-current="page"] .nav-badge {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* -------------------------------------------------------------------------
   全管理者ページの内容表現
   ヘッダーと左ナビだけでなく、設定・期管理・一覧・入力・通知の本文も
   hr_portal_ui_ref.html のカード、余白、色分け、操作のまとまりへ揃える。
   ID とイベント処理は変更しない。
   ------------------------------------------------------------------------- */
body.portal.admin-ui2 {
  color: #2d3436;
  font-size: 15px;
  line-height: 1.75;
}

.admin-ui2 .admin-main > section[data-view]:not([hidden]) {
  gap: 20px;
}

.admin-ui2 .admin-page-head,
.admin-ui2 .admin-main > section[data-view] > h2 {
  position: relative;
}

/* 見出しの前に付けていた飾り（✦ と画面ごとの絵文字）は UI2 に無いので廃止した。
   左ナビにも同じ絵文字が出ており、同じ意味の記号が 2 箇所にあった。 */
.admin-ui2 .admin-page-head h2,
.admin-ui2 .admin-main > section[data-view] > h2 {
  color: #2d3436;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.admin-ui2 .admin-page-head p,
.admin-ui2 .admin-main > section[data-view] > p.info-text,
.admin-ui2 .admin-main > section[data-view] > .view-note,
.admin-ui2 .view-note {
  color: #636e72;
  font-size: 14px;
  line-height: 1.85;
}

.admin-ui2 .admin-main > section[data-view] > .view-note,
.admin-ui2 .admin-main > section[data-view] > p.info-text {
  margin: 0;
  padding: 14px 18px;
  border: 1px solid #eee5f1;
  border-left: 5px solid var(--admin-pop-pink);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 5px 18px rgba(45, 52, 54, .045);
}

.admin-ui2 strong { color: #393346; }

/* ---- カードの見た目の正本 ----
   値は UI2（管理者ポータル_2026.html）の `.panel`。**ここ 1 箇所だけ**が枠・丸角・地色・影を
   決める。以前は画面ごと（設定・名簿・担当・通知・一覧・分布）に同じ意味の指定を書き分けて
   いて、丸角が 16 / 18 / 20 / 22px と 4 種類に散り、UI2 と揃えたつもりが 9 画面に届いて
   いなかった。追加するカードはこの並びに selector を足すだけにする。
   見た目の正本が 1 箇所であることは tests/test_admin_ui2_parity_contract.py が見張る。 */
.admin-ui2 .panel,
.admin-ui2 .kpi-cell,
.admin-ui2 .admin-card,
.admin-ui2 .settings-card,
.admin-ui2 .goals-view,
.admin-ui2 .goals-view-item,
.admin-ui2 .wiz-step:not(span),
.admin-ui2 .progress-late-panel,
.admin-ui2 .progress-dept-panel,
.admin-ui2 .distribution-detail,
.admin-ui2 .distribution-table-wrap,
.admin-ui2 [data-view="templates"] > [id^="setPane"],
.admin-ui2 [data-view="users"] > [id$="Pane"],
.admin-ui2 [data-view="assignments"] > #assignAdminBody,
.admin-ui2 [data-view="notifications"] > #notificationList {
  border: 1px solid #f0f0f5;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--admin-card-shadow);
}

.admin-ui2 .goals-view-item,
.admin-ui2 .wiz-step:not(span) { padding: 20px 22px; }
.admin-ui2 .wiz-step:not([hidden]) { position: relative; overflow: hidden; }
.admin-ui2 .wiz-step:not([hidden])::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--admin-pop-purple), var(--admin-pop-pink));
  content: '';
}
.admin-ui2 .wiz-step h4,
.admin-ui2 .goals-view-item h3,
.admin-ui2 [data-view="project-edit"] h3 {
  color: #45405c;
  font-size: 17px;
  font-weight: 850;
}

.admin-ui2 .filter-bar,
.admin-ui2 .bulk-bar,
.admin-ui2 .distribution-filter-bar {
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e7ebf0;
  border-radius: 9px;
  background: #f7f9fb;
  box-shadow: none;
}
.admin-ui2 .period-form-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}
.admin-ui2 .period-form-group {
  min-width: 0;
  margin: 0;
  padding: 14px 16px 2px;
  border: 1px solid #e2e6ec;
  border-radius: 14px;
  background: #fbfcff;
}
.admin-ui2 .period-form-group legend {
  padding: 0 8px;
  color: #45405c;
  font-size: 14px;
  font-weight: 850;
}
.admin-ui2 .period-form-groups > .period-form-group:only-child { grid-column: 1 / -1; }
.admin-ui2 .period-form-group .form-group:last-child { margin-bottom: 12px; }
.admin-ui2 .period-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-ui2 .org-rename-modal-box { max-width: 420px; }
.admin-ui2 .org-rename-modal-box .form-group { margin: 0 0 8px; }
.admin-ui2 .org-rename-modal-box .muted-sm { line-height: 1.7; }

.admin-ui2 input[type="text"],
.admin-ui2 input[type="number"],
.admin-ui2 input[type="date"],
.admin-ui2 input[type="time"],
.admin-ui2 input[type="file"],
.admin-ui2 select,
.admin-ui2 textarea {
  border: 1px solid #dcd7ef;
  border-radius: 11px;
  color: #30343b;
  font-size: 13.5px;
  line-height: 1.65;
}

.admin-ui2 input:focus,
.admin-ui2 select:focus,
.admin-ui2 textarea:focus {
  border-color: var(--admin-pop-purple);
  box-shadow: 0 0 0 4px rgba(108, 92, 231, .14);
}

.admin-ui2 button:not([class]),
.admin-ui2 button.btn,
.admin-ui2 .btn {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #e9ecf0;
  border-radius: 12px;
  background: #fff;
  color: #636e72;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 0 #e4e6ec;
}

/* ---- ボタンの見た目の正本（2026-08-19）----
   これまで主ボタンの指定が 4 箇所（action-bar 用・古い青・pop 層・この層）に散っていて、
   画面ごとに紫ピンク／青／丸角 7px と 12px が混在していた。**ここ 1 箇所**が決める。
   値は UI2（管理者ポータル_2026.html）の .btn.primary / .btn.danger と同じ。 */
.admin-ui2 button.btn-primary,
.admin-ui2 .btn-primary,
.admin-ui2 button.primary,
.admin-ui2 .btn.primary {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 0 #5b4cdb;
}

.admin-ui2 button.btn-danger,
.admin-ui2 .btn-danger,
.admin-ui2 button.danger,
.admin-ui2 .btn.danger {
  min-height: 38px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #fab1a0, var(--admin-pop-red));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 0 #c02828, 0 2px 8px rgba(214, 48, 49, .2);
}

.admin-ui2 .tabbar {
  gap: 2px;
  padding: 3px;
  border: 1px solid #dde1e7;
  border-radius: 12px;
  background: #eceff3;
  box-shadow: inset 0 1px 2px rgba(45, 52, 54, .04);
}
.admin-ui2 .tabbar .subtab {
  min-height: 38px;
  padding: 8px 17px;
  border-radius: 11px;
  color: #706b7e;
  font-size: 13px;
}
/* 選択中のタブは UI2 と同じ紫のグラデーション。白地に紫文字だと、隣の未選択（灰色の文字）と
   同じ「白い箱」に見えて、どちらが選ばれているのか読み取れない。 */
.admin-ui2 .tabbar .subtab.active {
  background: linear-gradient(135deg, var(--admin-pop-purple), var(--admin-pop-lilac));
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 92, 231, .25);
}

.admin-ui2 .table-scroll,
.admin-ui2 .distribution-table-wrap,
.admin-ui2 [data-view="projects"] > .review-table {
  overflow-x: auto;
}
/* 表の入れ物。UI2 の .tbl-wrap と同じで、枠は持たず丸角と影だけでカードに見せる
   （枠を足すと表の線と二重になる）。 */
.admin-ui2 .table-scroll {
  overflow-x: auto;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--admin-card-shadow);
}

/* 表そのものは地色も枠も持たない。カードの見た目は外側（table-scroll）が持つ。 */
.admin-ui2 .table-scroll .review-table,
.admin-ui2 .distribution-table-wrap .review-table,
.admin-ui2 [data-view="projects"] > .review-table,
/* 昇給テーブル設定の表も同じ。UI2 はここに入れ物を置かない素の表なので、
   表そのものが枠・丸角・影を持たない（＝この並びと同じ扱い）。 */
.admin-ui2 #setPaneRaise > .review-table {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* 部門を開いた先の表だけは白地にする（灰色のカードの中に置くので、透明だと行が読みにくい）。
   上の「表は地色を持たない」より後に書く必要がある（前に書くと打ち消される）。 */
.admin-ui2 .distribution-detail .review-table { background: #fff; }
.admin-ui2 .review-table th,
.admin-ui2 .tbl th {
  padding: 14px;
  border-bottom: 2px solid #f0f0f5;
  background: transparent;
  color: #636e72;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.admin-ui2 .review-table td,
.admin-ui2 .tbl td {
  padding: 14px;
  border-bottom: 1px solid #f5f6fa;
  color: #2d3436;
  font-size: 13.5px;
  white-space: nowrap;
}
/* 長い文章を入れるセルだけ折り返す。既定を折り返しにすると、氏名が縦 3 行になって
   どの列を見ているのか分からなくなる（実測: 氏名の列が 108px に潰れていた）。 */
.admin-ui2 .review-table td.wrap,
.admin-ui2 .tbl td.wrap { white-space: normal; word-break: break-word; }

/* 列が多い表は最小幅を持たせ、足りなければ入れ物の中で横スクロールさせる（UI2 と同じ作り）。
   最小幅が無いと列が均等に潰れ、横スクロールも起きないので中身が読めない。 */
.admin-ui2 .review-table.min-w,
.admin-ui2 .tbl.min-w { min-width: 1100px; }
.admin-ui2 .review-table tbody tr:hover td,
.admin-ui2 .tbl tbody tr:hover td { background: #fafafe; }

/* 設定: メール / 選択肢 / 昇給の各画面を独立した内容カードにする */
.admin-ui2 [data-view="templates"] > [id^="setPane"] {
  width: 100%;
  padding: 24px;
}
.admin-ui2 [data-view="templates"] > [id^="setPane"] > .view-note { margin: 0 0 20px; }
/* メールは畳んだカードの縦一列。開いた 1 件だけ中身が出る（UI2 と同じ）。 */
.admin-ui2 #mailTemplatesBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52em;
}
.admin-ui2 .mail-kind {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #f0f0f5;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--admin-card-shadow);
}
/* 見出しの行: 開閉ボタン（伸びる）＋ 送る/送らないのチェック（右端）。 */
.admin-ui2 .mail-kind-headrow { display: flex; align-items: center; }
.admin-ui2 .mail-kind-headrow .mail-kind-head { flex: 1 1 auto; min-width: 0; }
.admin-ui2 .mail-kind-enable {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 18px 0 10px;
  color: #6b7280;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
.admin-ui2 .mail-kind-enable input { margin: 0; cursor: pointer; }
/* 送らない種別は畳んでいても分かるようにする（文字を薄くし、見出しに印を出す）。 */
.admin-ui2 .mail-kind-off .mail-kind-name { color: #9aa3af; }
.admin-ui2 .mail-kind-off-mark {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1f2f6;
  color: #6b7280;
  font-size: 11.5px;
  font-weight: 700;
}
.admin-ui2 .mail-kind-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 14px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #2d3436;
  text-align: left;
  cursor: pointer;
}
.admin-ui2 .mail-kind.open .mail-kind-head { border-bottom: 1px solid #f0f0f5; }
.admin-ui2 .mail-kind-head:hover { background: #fafafe; }
.admin-ui2 .mail-kind-mark { color: var(--admin-pop-purple); font-size: 11px; }
.admin-ui2 .mail-kind-name { font-size: 13.5px; font-weight: 800; }
.admin-ui2 .mail-kind-subject { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-ui2 .mail-kind-body { padding: 14px 18px 18px; }
.admin-ui2 #mailTemplatesBody .form-group { margin-bottom: 12px; }
.admin-ui2 #mailTemplatesBody .form-group:last-child { margin-bottom: 0; }
.admin-ui2 #mailTemplatesBody .mail-input { width: 100%; }
/* 保存はカードの左端に揃える（UI2 の .btn-row と同じ）。右端に寄せると、上のカードから
   離れた位置に 1 つだけボタンが浮いて見え、何に対する保存なのか読めない（2026-08-20 指摘）。 */
.admin-ui2 .mail-actions { display: flex; justify-content: flex-start; max-width: 52em; margin-top: 14px; }
/* 文面の列（UI2 と同じ 52em）と、その右の余白に置く差し替え文言の説明（2026-08-20）。
   UI2 に対応する部品が無いので、カードは既存の .panel をそのまま使う（角丸・影・文字は
   カードの正本 1 箇所が持つ＝ここで別の数値を書かない）。 */
.admin-ui2 .mail-layout { display: flex; align-items: flex-start; gap: 24px; }
.admin-ui2 .mail-col { flex: 1 1 52em; max-width: 52em; min-width: 0; }
.admin-ui2 .mail-ph-panel { flex: 0 1 22em; min-width: 16em; position: sticky; top: 16px; }
/* 2026-08-20 利用者指摘: 灰色の丸い札に見えて「押せる」と分からず、説明も小さく薄くて読めなかった。
   このポータルで押せるものは紫で、下に硬い影が付いて浮いている。同じ約束に揃える。 */
.admin-ui2 .mail-ph-lead { margin: 0 0 14px; color: #4a5462; font-size: 13px; line-height: 1.6; }
/* 社員名簿の見出しの右の操作（2026-08-27 設定の書き出し・2026-09-07 変更履歴）。
   2026-10-31（UX15・利用者指摘「余白が多い」）: 縦 2 段は見出しの行を高くして余白が
   空いたので**横 1 行**にする。既存のボタンの見た目は触らない（並べ方だけ決める）。 */
.admin-ui2 .users-head-actions { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; }
/* 開いている保存の行は、下の項目一覧と 1 つのまとまりに見えるよう色を付ける。 */
/* 案内文は**出すことが無いとき場所も取らない**（空の枠が表の上に居座ると、表が下へ押し下げ
   られて「上が空っぽ」に見える。写しが無い初回は案内が空になるので必ず起きる）。
   既存の `.mail-remind-preview:empty` / `.panel:empty` と同じ扱い。 */
.admin-ui2 #rosterHistoryStatus:empty { display: none; }
.admin-ui2 #rosterHistoryStatus { margin: 12px 0 0; }
/* 開いている保存の行は、下の項目一覧と 1 つのまとまりに見えるよう色を付ける。 */
.admin-ui2 .roster-history-row.open > td { background: #f5f3ff; }
.admin-ui2 .roster-history-row > td { vertical-align: middle; }
/* 開いた中身。**左に太い線**を引いて「上の行に属している」ことを形で示す（色だけだと、
   行が続くうちにどの保存の中身なのか見失う）。上下の余白は表のセルより広く取る。 */
.admin-ui2 .roster-history-detail > td {
  padding: 14px 18px 16px;
  background: #faf9ff;
  border-left: 3px solid var(--admin-pop-purple, #7c6cf0);
}
/* 対象者 / 項目 / 変更 の 3 列を縦に揃える。対象者と項目は中身に合わせ、変更が残りを取る。 */
.admin-ui2 .roster-history-items {
  display: grid;
  grid-template-columns: minmax(9em, max-content) minmax(4.5em, max-content) 1fr;
  column-gap: 20px;
  row-gap: 7px;
  align-items: baseline;
}
.admin-ui2 .roster-history-items > span { font-size: 13px; line-height: 1.6; color: #2f3742; }
/* 見出しは 1 度だけ。項目が多い保存でも、どの列が何なのかを読み手が覚えなくて済む。 */
.admin-ui2 .roster-history-items .rh-head {
  padding-bottom: 4px;
  border-bottom: 1px solid #e2e6ec;
  color: #5f6b7a; font-size: 12px; font-weight: 700;
}
.admin-ui2 .roster-history-items .rh-who { color: #1b2530; font-weight: 600; }
.admin-ui2 .roster-history-items .rh-field { color: #5f6b7a; }
/* 変更前 → 変更後。矢印の左右に等しい余白を置き、値そのものを読ませる。 */
.admin-ui2 .roster-history-items .rh-change { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.admin-ui2 .roster-history-items .rh-before { color: #6b7280; text-decoration: line-through; }
.admin-ui2 .roster-history-items .rh-arrow { color: #9aa3b2; }
.admin-ui2 .roster-history-items .rh-after { color: #1b2530; font-weight: 700; }
.admin-ui2 .roster-history-items .rh-change-empty { color: #9aa3b2; }
/* 追加・削除は項目が無いので札で出す（値の変更と見分けが付く）。 */
.admin-ui2 .roster-history-items .rh-mark {
  justify-self: start;
  padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.admin-ui2 .roster-history-items .rh-mark-added { background: #e8f5e9; color: #256029; }
.admin-ui2 .roster-history-items .rh-mark-removed { background: #fdecea; color: #8a1c13; }
/* 差分の「前」が手元の控えだった回の注記。読ませる注意なので薄くしすぎない。 */
.admin-ui2 .roster-history-detail .roster-history-note {
  margin: 12px 0 0; padding: 8px 11px;
  border-radius: 8px; background: #fff8e6; color: #8a5a00;
  font-size: 12.5px; line-height: 1.6;
}
/* 狭い画面では 3 列が潰れるので、1 項目を 1 ブロックとして縦に積む。 */
@media (max-width: 900px) {
  .admin-ui2 .roster-history-items { grid-template-columns: 1fr; row-gap: 4px; }
  .admin-ui2 .roster-history-items .rh-head { display: none; }
  .admin-ui2 .roster-history-items .rh-who { margin-top: 8px; }
}
/* 本人記入の履歴（進捗一覧の利用者行「履歴」・2026-09-07）。案内文が空なら場所を取らない
   （名簿の変更履歴と同じ扱い）。表は共通の Portal.renderPersonHistory が描く。 */
.admin-ui2 #progressHistoryStatus:empty { display: none; }
.admin-ui2 #progressHistoryStatus { margin: 12px 0 0; }
.admin-ui2 .progress-history-button { margin-left: 6px; }
/* 履歴の表: 内容は左そろえで折り返す。種別の見た目は仕上げ層で読みやすく整える。 */
.admin-ui2 .person-history-table td { vertical-align: top; }
.admin-ui2 .person-history-table th:nth-child(1), .admin-ui2 .person-history-table td.person-history-when {
  width: 9.5em; white-space: nowrap; text-align: left !important;
  font-size: 12px; color: #5f6b7a;
}
.admin-ui2 .person-history-table th:nth-child(2), .admin-ui2 .person-history-table td.person-history-kind-cell {
  width: 11em; white-space: normal; overflow-wrap: anywhere; text-align: left !important; font-size: 12px;
}
.admin-ui2 .person-history-table .person-history-by {
  display: block; margin: 4px 0 0; color: #5f6b7a; white-space: normal; overflow-wrap: anywhere;
}
.admin-ui2 .person-history-table th:nth-child(3), .admin-ui2 .person-history-table td.person-history-what {
  text-align: left !important;
}
.admin-ui2 .person-history-what .person-history-text,
.admin-ui2 .person-history-what .person-history-comment {
  margin: 0; white-space: pre-wrap; line-height: 1.7; color: #1b2530; text-align: left;
}
.admin-ui2 .person-history-what .person-history-text + .person-history-comment { margin-top: 6px; }
/* 未提出リマインドの自動送信日数（2026-09-07）。文面のカードと同じ列に置くので、幅は
   .mail-col が決める（ここで別の最大幅を書かない）。 */
.admin-ui2 .mail-remind-panel { margin-bottom: 18px; }
.admin-ui2 .mail-remind-lead { margin: 0 0 14px; color: #4a5462; font-size: 13px; line-height: 1.6; }
/* 狭い画面では日数と時刻が 2 行に折り返す（横に詰めて読めなくしない）。 */
.admin-ui2 .mail-remind-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px; }
.admin-ui2 .mail-remind-row label { font-size: 13px; font-weight: 700; color: #2f3742; }
.admin-ui2 .mail-remind-row input[type="number"] { width: 6em; }
.admin-ui2 .mail-remind-row select { width: auto; }
.admin-ui2 .mail-remind-unit { font-size: 13px; color: #4a5462; }
/* 日数と時刻は別の設定なので、間を空けて 1 続きに見せない。 */
.admin-ui2 .mail-remind-gap { width: 20px; }
.admin-ui2 .mail-remind-help { margin: 10px 0 0; color: #4a5462; font-size: 13px; line-height: 1.6; }
/* 「いまの設定で送る日」。読ませる情報なので muted-sm（12px・薄い灰）にしない。 */
.admin-ui2 .mail-remind-preview { margin: 10px 0 0; color: #2f3742; font-size: 13px; line-height: 1.6; }
.admin-ui2 .mail-remind-preview:empty { display: none; }
.admin-ui2 .mail-ph-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.admin-ui2 .mail-ph-item { display: flex; flex-direction: column; gap: 5px; }
.admin-ui2 .mail-ph-btn {
  align-self: flex-start;
  min-height: 0;
  padding: 6px 13px;
  border: 1px solid #c3bbf6;
  border-radius: 999px;
  background: #f0edff;
  color: #5a4bd4;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 0 #d9d3fa;
  transition: transform .08s, background .12s;
}
/* 「押すと入る」を字で示す。textContent は文言のままにしたいので飾りは CSS で足す
   （テストと挿入処理は btn.dataset.token / textContent を見ている）。 */
.admin-ui2 .mail-ph-btn::before { content: '＋'; margin-right: 5px; font-weight: 700; }
.admin-ui2 .mail-ph-btn:hover:not(:disabled) {
  background: #e4dfff; border-color: var(--admin-pop-purple); transform: translateY(-1px);
  box-shadow: 0 3px 0 #c8c0f7;
}
.admin-ui2 .mail-ph-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
/* 押せないものは「押せる形のまま薄く」ではなく、角ばった別物にする＝形で区別が付く。 */
.admin-ui2 .mail-ph-btn:disabled {
  border: 1px dashed #d3d8e0; border-radius: 8px; background: #f5f6f8;
  color: #8a95a3; box-shadow: none; cursor: not-allowed; transform: none;
}
.admin-ui2 .mail-ph-btn:disabled::before { content: '－'; }
.admin-ui2 .mail-ph-desc { display: block; color: #4a5462; font-size: 13px; line-height: 1.6; }
.admin-ui2 .mail-ph-status:empty { display: none; }
.admin-ui2 .mail-ph-status { margin: 12px 0 0; }
/* 狭い画面では右の余白が無くなるので、説明は文面の下へ回す。 */
@media (max-width: 1200px) {
  .admin-ui2 .mail-layout { flex-direction: column; }
  .admin-ui2 .mail-ph-panel { position: static; flex: 1 1 auto; width: 100%; max-width: 52em; }
}
/* 設定の各タブは中身を上から詰める。UI2 と同じく本文の左端に揃える。 */
.admin-ui2 [data-view="templates"] > [id^="setPane"] { padding: 0; border: 0; background: transparent; box-shadow: none; }
/* 期名の隣の鉛筆（名前の変更）。行を長くしないよう記号だけにする（UI2 と同じ）。 */
.admin-ui2 .name-edit {
  min-height: 0;
  padding: 1px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  color: #8a95a3;
  font-size: 12px;
}
.admin-ui2 .name-edit:hover { background: #eeeaff; color: var(--admin-pop-purple); }

/* 部門を開く操作は「▼ 部門名」の文字。枠を付けると数字の列より目立ってしまう（UI2 と同じ）。 */
.admin-ui2 .distribution-dept-toggle,
.admin-ui2 .progress-dept-panel .dept-toggle {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #2d3436;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.admin-ui2 .distribution-dept-toggle:hover,
.admin-ui2 .progress-dept-panel .dept-toggle:hover { background: transparent; color: var(--admin-pop-purple); }

/* 事業貢献と組織貢献は横に 2 列で並べる（2026-08-19 指摘）。縦に積むと、行が少ないのに
   画面を大きく使い、下の「委員会決定の最終評価点」まで遠くなる。 */
.admin-ui2 #finalDetail .final-rating-section { min-width: 0; }
.admin-ui2 #finalDetail .contrib-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .admin-ui2 #finalDetail .contrib-pair { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .admin-ui2 .period-form-groups { grid-template-columns: 1fr; }
  .admin-ui2 .period-date-grid { grid-template-columns: 1fr; }
}

/* 最終評価入力の一覧（UI2 の views.final）。氏名は少し太く、委員会決定の点は入っていれば緑の数字、
   入っていなければ「未記入」のピル。 */
.admin-ui2 .final-name { font-weight: 600; }
.admin-ui2 .final-decided { color: #1f7a52; font-size: 14px; font-weight: 800; }

/* 委員会決定の最終評価点。3 つの平均を大きく並べ、その下に入力と保存だけを置く（UI2 と同じ）。 */
.admin-ui2 .score-averages {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 8px;
  background: #f7f9fb;
}
.admin-ui2 .score-averages .sa-cell { text-align: center; }
.admin-ui2 .score-averages .sa-value { color: #2f6fbf; font-size: 22px; font-weight: 800; }
.admin-ui2 .score-averages .sa-value.final { color: #1f7a52; }
.admin-ui2 .final-score-panel .final-score-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.admin-ui2 .final-score-panel .btn-row { display: flex; gap: 8px; margin-top: 14px; }

/* 担当欄。入力の隣に「なし」に戻す × を置く（UI2 と同じ）。 */
.admin-ui2 .assignee-cell { display: flex; align-items: center; gap: 4px; }
/* 担当欄は「氏名（ID）」が入る幅を確保する。狭いと列が潰れ、表が入れ物に収まってしまって
   横スクロールも起きず、氏名が縦に折り返す（実測: 108px まで潰れていた）。UI2 は 170px。 */
.admin-ui2 .assignee-cell .pub-input { flex: 1; min-width: 170px; }
.admin-ui2 .assignee-clear {
  min-height: 26px;
  padding: 2px 7px;
  border: 1px solid #d5dbe3;
  border-radius: 5px;
  background: #fff;
  box-shadow: none;
  color: #8a95a3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.admin-ui2 .assignee-clear:hover { border-color: var(--admin-pop-pink-strong); color: var(--admin-pop-pink-strong); }

/* 全員分の取得を待っている画面。中身は薄くして押せなくする（待ちの間に押させない）。
   帯だけだと、表も操作も普通に見えて「もう出そろった」と読めてしまう。 */
.admin-ui2 section[data-view][aria-busy="true"] > *:not(.detail-loading) {
  opacity: .35;
  pointer-events: none;
  user-select: none;
}
.admin-ui2 .detail-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #d9e5f5;
  border-left: 3px solid #2f6fbf;
  border-radius: 8px;
  background: #f5f9ff;
  color: #2f5f9e;
  font-weight: 700;
}
/* 回転印は**カードの中の .loading-spinner だけ**にする（2026-08-31）。
   帯だった頃の名残で `::before` にも回転印を出していたため、カード形式にしたときに
   回転印が 2 つ並んだ（実機で発覚）。同じものを 2 か所で描かない。 */

/* 期の一覧: 作成ウィザードの段のピルと、押せる選択カード（UI2 と同じ作り）。 */
.admin-ui2 .wiz-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-ui2 .wiz-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-ui2 .wiz-step-pill {
  padding: 0;
  border-radius: 0;
  background: none;
  color: #97a2b0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.admin-ui2 .wiz-step-pill.done { color: var(--admin-pop-purple); background: none; }
.admin-ui2 .wiz-step-pill.active { color: var(--admin-pop-purple); font-weight: 800; background: none; }
.admin-ui2 .wiz-step-arrow {
  color: #c6cdd6;
  font-size: 12px;
}

/* 確認の段。読ませる面なので行間を広く取り、箇条書きの記号も控えめにする。 */
.admin-ui2 .wiz-confirm ul { margin: 12px 0 16px; padding-left: 22px; }
.admin-ui2 .wiz-confirm li { margin-bottom: 10px; font-size: 14px; line-height: 1.9; }
.admin-ui2 .wiz-confirm li::marker { color: var(--admin-pop-purple); }

.admin-ui2 .radio-cards { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.admin-ui2 .radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #f0f0f5;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.admin-ui2 .radio-card:hover { border-color: var(--admin-pop-purple); }
.admin-ui2 .radio-card:has(input:checked) { border-color: var(--admin-pop-purple); background: #faf8ff; }
.admin-ui2 .radio-card .rc-body { display: flex; flex-direction: column; gap: 2px; }
.admin-ui2 .radio-card .rc-title { font-size: 13.5px; font-weight: 700; }
.admin-ui2 .radio-card .rc-sub { color: #5f6b7a; font-size: 12.5px; line-height: 1.7; }

/* 期の編集: いまの段階でできる操作のカード（題・説明・実行ボタンを 1 行に）。 */
.admin-ui2 .phase-cmd { display: flex; align-items: center; gap: 16px; }
.admin-ui2 .phase-cmd .pc-body { flex: 1; min-width: 0; }
.admin-ui2 .phase-cmd .pc-title { font-size: 13.5px; font-weight: 700; }
.admin-ui2 .phase-cmd .pc-sub { color: #5f6b7a; font-size: 12.5px; line-height: 1.7; }
/* 取り返しの付かない操作（確定・公開）は枠で分かるようにする。 */
.admin-ui2 .phase-cmd.accent-warn { border-color: #d9e5f5; background: #f5f9ff; }

/* 部門 / 職種 / 等級は 3 列のカード（UI2 と同じ値）。 */
.admin-ui2 .org-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.admin-ui2 .org-card {
  overflow: hidden;
  border: 1px solid #f0f0f5;
  border-radius: 16px;
  box-shadow: var(--admin-card-shadow);
}
.admin-ui2 .org-card .oc-head {
  padding: 11px 15px;
  border-bottom: 1px solid #e9ecf0;
  background: linear-gradient(135deg, #eeeaff, #f5f3ff);
  color: var(--admin-pop-purple);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
}
.admin-ui2 .org-card .oc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #f5f6fa;
}
.admin-ui2 .org-card .oc-row:last-child { border-bottom: none; }
.admin-ui2 .org-card .oc-row:hover { background: #fafafe; }
.admin-ui2 .org-card .oc-name { flex: 1; font-size: 13px; }
.admin-ui2 .org-card .oc-used { white-space: nowrap; }
/* 小さいボタン（UI2 の .btn.sm / .btn.sm.danger と同じ値）。 */
/* 小さいボタンは UI2 と同じく余白・字の大きさ・丸角だけを変える（高さは .btn のまま）。
   高さまで縮めると、同じ行に並ぶ他のボタンと base line がずれる。 */
.admin-ui2 .btn.sm { padding: 5px 10px; border-radius: 6px; font-size: 12px; }
/* 小さい削除ボタンだけは UI2 が高さと丸角も指定している（表の行に収める形）。
   実測（2026-08-20 admin-ui2-parity）で min-height 30px / border-radius 9px。 */
.admin-ui2 .btn.sm.danger {
  min-height: 30px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #fab1a0, var(--admin-pop-red));
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 0 #c02828, 0 2px 6px rgba(214, 48, 49, .2);
}
.admin-ui2 .btn.sm.danger:disabled { opacity: .35; cursor: not-allowed; }

/* 押せないボタンは「色を薄くしたボタン」ではなく、押せないものとして見せる（2026-08-20 指摘）。
   グラデーションを薄くしただけだと、壊れて表示されているように見える。 */
.admin-ui2 button:disabled,
.admin-ui2 .btn:disabled {
  background: #eceff3;
  border: 1px solid #dde1e7;
  color: #a6adb8;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
/* ---- 昇給テーブル設定（UI2 renderSettingsTab の「改定テーブル」と同じ作り） ----
   並びは 説明 → 等級 → 表 → 「行を追加」 → 予算 → 保存。UI2 の .stack-14.max-w-52em と
   同じ間隔（14px）・同じ幅の上限（52em）にする。
   **display を書くので :not([hidden]) を必ず付ける**。付けないと hidden 属性（UA の
   display:none）を打ち消し、閉じているサブタブの中身が出続ける（2026-08-19 に実際に起きた）。 */
.admin-ui2 [data-view="templates"] > #setPaneRaise:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52em;
}
/* 説明文。UI2 は p に直接 14px / 1.75 / 34em を書いている（色は本文の既定色）。 */
.admin-ui2 #setPaneRaise .raise-lead {
  margin: 0;
  max-width: 34em;
  color: #636e72;
  font-size: 14px;
  line-height: 1.75;
}
/* 等級の行。UI2 の .row と同じ（この 1 箇所でしか使っていない）。 */
.admin-ui2 .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* 数値の入力欄。幅は UI2 の numField と同じ（スコア 60px / 金額 90px / 予算 110px）で右寄せ。
   枠・丸み・地色・高さは UI2 の `.main input[type="number"]`（2026 層・!important）が
   実際に描いている値。実測（2026-08-20 admin-ui2-parity）で確認した値をそのまま置く。
   **この画面だけに掛ける**（`.admin-ui2 input` 全体に書くと関係ない画面の入力欄まで変わる）。 */
.admin-ui2 #setPaneRaise .raise-inp,
.admin-ui2 #setPaneRaise #raiseBudgetPerPerson {
  min-height: 42px;
  padding: 10px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: #f7fafc;
  color: #2d3436;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-ui2 #setPaneRaise .raise-inp { width: 60px; }
.admin-ui2 #setPaneRaise .raise-inp[data-key$="Amount"] { width: 90px; }
.admin-ui2 #setPaneRaise #raiseBudgetPerPerson { width: 110px; }
/* 「0.1点あたり」は計算結果なので、入力欄より薄い字にする（UI2 と同じ）。 */
.admin-ui2 #setPaneRaise .raise-derived { color: #5f6b7a; }

/* 本文のまとまり（説明 → 操作 → 結果）。**幅の上限は置かない**。
   2026-08-19: ここに通知の指定を混ぜてしまい、60em（＝900px）の上限が社員名簿などにも掛かって
   広い画面で右に大きな余白が出ていた。別のものを同じまとまりに足さない。 */
.admin-ui2 [data-view="project-edit"] > #peOpsPane,
.admin-ui2 [data-view="project-edit"] > #peSchedulePane,
.admin-ui2 [data-view="final"] > #finalListWrap,
.admin-ui2 [data-view="final"] > #finalDetail,
.admin-ui2 [data-view="users"] > [id$="Pane"],
.admin-ui2 [data-view="assignments"] > #assignAdminBody {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 通知は UI2 と同じ「枠の中に行が並ぶ」カード。素の箇条書きだと、どこまでが 1 件か読めない。 */
.admin-ui2 [data-view="notifications"] > #notificationList {
  max-width: 60em;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
.admin-ui2 [data-view="notifications"] > #notificationList li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid #f5f6fa;
  color: #41505f;
  font-size: 13.5px;
  line-height: 1.7;
}
.admin-ui2 [data-view="notifications"] > #notificationList li:last-child { border-bottom: 0; }
.admin-ui2 [data-view="notifications"] > #notificationList li:hover { background: #fafafe; }
.admin-ui2 [data-view="notifications"] > #notificationList li::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--admin-pop-purple);
  content: '';
}

/* 時刻は左に固定幅で並べる（UI2 の notif-time と同じ）。本文の先頭が揃わないと読みにくい。 */
.admin-ui2 .notif-time {
  width: 104px;
  flex: 0 0 104px;
  color: #8a95a3;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-ui2 .notif-text { flex: 1; min-width: 0; }
/* 画面ごとに色の帯を載せていた指定は廃止（2026-08-19）。UI2 のカードに帯は無く、
   何を意味する色なのかが画面から読み取れなかった。 */
.admin-ui2 .dept-group + .dept-group { margin-top: 22px; }
.admin-ui2 .dept-group h3 { margin: 0 0 12px; color: #514b69; }

/* ポップアップの意匠は common/portal-dynamic.css に集約した
   （2026-08-21 利用者指摘）。ここに管理者専用の上書きを置いていたため、**管理者画面だけが整い、
   非管理者の 4 ポータルは素の白い箱**が出ていた。管理者面の色は UI2 のトークンから引く。
   ピンクの縁だけは管理者の見出し色に合わせて残す（見た目の差はこの 1 行だけにする）。 */
.admin-ui2 .ee-dialog { border-top-color: var(--admin-pop-pink-strong); }
.admin-ui2 .ee-dialog h3 { color: #9f316c; }

@media (max-width: 760px) {
  .admin-ui2 #mailTemplatesBody { grid-template-columns: 1fr; }
  .admin-ui2 [data-view="templates"] > [id^="setPane"],
  .admin-ui2 [data-view="project-edit"] > #peOpsPane,
  .admin-ui2 [data-view="project-edit"] > #peSchedulePane,
  .admin-ui2 [data-view="final"] > #finalListWrap,
  .admin-ui2 [data-view="final"] > #finalDetail,
  .admin-ui2 [data-view="users"] > [id$="Pane"],
  .admin-ui2 [data-view="assignments"] > #assignAdminBody,
  .admin-ui2 [data-view="notifications"] > #notificationList { padding: 16px; }
  .admin-ui2 .admin-page-head h2,
  .admin-ui2 .admin-main > section[data-view] > h2 { font-size: 23px; }
}

/* ---- マウスを乗せた時（hover）の見た目の正本（2026-08-20）----
   利用者の指摘「ボタンの ONHOVER の表現は同じ色系のボタンの表現が統一してない」。
   押していない時の見た目は上の「ボタンの見た目の正本」1 箇所に集めてあったが、hover は
   5 箇所（青い旧デザイン・pop 層・この層・見出し横・紫カード）に散ったままだった。

   実測（2026-08-20 tests/e2e/admin-ui2-parity.spec.ts の hover 照合）で、**同じ主ボタンが
   画面ごとに 3 通り**に光っていた:
     社員名簿 / 期の編集 / 対象・担当 / 昇給テーブル … 薄紫 #faf8ff ＋ 紫文字
       （`class="btn primary"` にふつうのボタンの hover が当たっていた）
     期の一覧 / 進捗一覧                             … 青 #357abd
       （`class="btn-primary"` は `.btn` を持たないので common/style.css の旧指定が残っていた）
     UI2 の正解                                      … 紫のグラデーション ＋ 白文字
   危険ボタンも、UI2 は赤いまま少し膨らむのに、実装は薄いピンク地に紫文字になっていた。

   **色の系統ごとに、ここ 1 箇所だけ**が決める。値は UI2（管理者ポータル_2026.html）の
   `:hover` と同じ。UI2 は素の層と 2026 層が積まれていて後の 2026 層が勝つため、両方読んだ上で
   後勝ちの値を採っている（例: ふつうのボタンの地色 #f5f8fd は素の層にしか無く 2026 層が
   上書きしないので、実際に描かれるのはこの値）。

   ファイル末尾に置く理由: 途中に置くと、後ろにある `.btn.sm.danger` などの通常状態の指定と
   同じ強さで competing し、また画面ごとの規則に負ける。最後に置けば「1 箇所が決める」が
   実際に成り立つ。規則を消す時は selector の行ごと消し、**カンマだけ残さない**
   （カンマを残すと隣の規則に巻き込まれる。過去に主ボタンがトーストの position: fixed を
   継いで画面の隅に貼り付く事故を起こしている）。 */

/* ふつうのボタン */
.admin-ui2 button:not([class]):hover,
.admin-ui2 button.btn:hover,
.admin-ui2 .btn:hover {
  border-color: var(--admin-pop-purple);
  background: #f5f8fd;
  color: var(--admin-pop-purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #d4d6dc;
}

/* 主ボタン。`button.` を付けた形も並べて、common/style.css の
   `.portal button.btn-primary:hover`（青 #357abd）と同じ強さにしてから後勝ちさせる
   （付けないと `.btn-primary` だけの綴りが青のまま残る＝実測で起きていた）。 */
.admin-ui2 button.primary:hover,
.admin-ui2 button.btn-primary:hover,
.admin-ui2 .btn.primary:hover,
.admin-ui2 .btn-primary:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #5b4cdb, #8b7ff0);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #5b4cdb;
}

/* 危険ボタン。地色は通常時のまま（赤いグラデーション）で、明るさと浮き上がりで反応を出す。 */
.admin-ui2 button.danger:hover,
.admin-ui2 button.btn-danger:hover,
.admin-ui2 .btn.danger:hover,
.admin-ui2 .btn-danger:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #fab1a0, var(--admin-pop-red));
  color: #fff;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 0 #c02828, 0 8px 24px rgba(214, 48, 49, .4);
  filter: brightness(1.12);
}

/* 小さい危険ボタン（表の行の削除）。UI2 は同じ赤系だが、行に収まる大きさに合わせて
   浮き上がりと影だけ別の値を持つ。 */
.admin-ui2 .btn.sm.danger:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #fab1a0, var(--admin-pop-red));
  color: #fff;
  transform: translateY(-2px) scale(1.12);
  box-shadow: 0 5px 0 #c02828, 0 6px 20px rgba(214, 48, 49, .4);
  filter: brightness(1.15);
}

/* タブ（設定・期の編集などの切り替え）。UI2 の `.seg button:hover` と同じで、
   文字を紫にして少し持ち上げる。選択中のタブは動かさない（動くと押せるように見える）。 */
.admin-ui2 .tabbar .subtab:not(.active):hover {
  color: var(--admin-pop-purple);
  transform: translateY(-1px);
}

/* 緑のボタン。UI2 は `.btn.green` を持つが、管理者ポータルの画面には 1 つも無い
   （通常時の指定もこのファイルに無い）。使い始めた時に**ここへ**足すこと。
   別の場所に書くと、また系統ごとに見た目が割れる。 */

/* ============================================================
   2026-08-20 利用者指摘（見た目のみ）
   ============================================================ */

/* (1) 進行段階の表示が「押せそう」に見えていた（丸いピル・塗り・影）。押せない表示なので
   ボタンらしさを全部外し、文字だけの進行表示にする。現在地は色と太さで示す。
   前に「進行段階」の表記を出す（表記があるほうが分かりやすい、という利用者判断）。
   矢印（.admin-phase-arrow）は白のままだとヘッダーが白になった今は見えないので色を直す。 */
.admin-ui2 .admin-phase-pills::before {
  content: '進行段階';
  margin-right: 2px;
  color: #8a95a3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
}
.admin-ui2 .admin-phase-pills .admin-phase-pill,
.admin-ui2 .admin-phase-pills .admin-phase-pill.current {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}
.admin-ui2 .admin-phase-pills .admin-phase-pill { color: #97a2b0; font-size: 12px; font-weight: 600; }
.admin-ui2 .admin-phase-pills .admin-phase-pill.current { color: var(--admin-pop-purple); font-weight: 800; }
.admin-ui2 .admin-phase-arrow { color: #c6cdd6; }

/* (2) ブロックの見出しが中身より小さく、見出しに見えなかった。見出しをそのブロックで一番大きい
   文字にする。数値そのもの（KPI の数字）は中身ではなく主役なので対象外。 */
.admin-ui2 .panel-title { font-size: 17px; }

/* -------------------------------------------------------------------------
   リマインド送信対象の選択ポップアップ（UI2 準拠・2026-08-20）

   UI2（UI2/管理者ポータル_2026.html）は単一ファイルなので inline style で書かれているが、
   配布物では見た目をここに置く（機能側の DOM・ID・保存経路は portal.html が持つ）。
   値は UI2 の実装に合わせている: 覆い rgba(0,0,0,.4) / 角丸 12px / 最大幅 560px /
   本文の高さ上限 80vh・一覧 300px / 影 0 8px 32px。
   ------------------------------------------------------------------------- */
.admin-ui2 .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-ui2 .modal-overlay[hidden] { display: none; }
.admin-ui2 .modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .2);
}
.admin-ui2 .modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-ui2 .modal-head h3 { font-size: 16px; font-weight: 800; color: var(--admin-ink); }
.admin-ui2 .modal-close {
  font-size: 20px;
  line-height: 1;
  border: none;
  background: none;
  cursor: pointer;
  color: #8a95a3;
  padding: 2px 6px;
  border-radius: 6px;
}
.admin-ui2 .modal-close:hover { color: var(--admin-ink); background: var(--admin-soft); }
.admin-ui2 .remind-bulk-bar { margin-bottom: 12px; }
.admin-ui2 .remind-list {
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;   /* 横スクロールを出さない（2026-08-20 実機指摘） */
}
.admin-ui2 .remind-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #eef1f5;
  cursor: pointer;
}
.admin-ui2 .remind-row:last-child { border-bottom: none; }
.admin-ui2 .remind-row:hover { background: var(--admin-soft); }
/* 送れない行は選べない。選べないことが見て分かるようにし、理由を必ず添える
   （選ばせておいて届かないのが一番よくない）。 */
.admin-ui2 .remind-row.is-blocked { cursor: default; opacity: .7; }
.admin-ui2 .remind-row.is-blocked:hover { background: none; }
.admin-ui2 .remind-row > input[type="checkbox"] { margin-top: 3px; flex: none; }
/* `min-width: 0` が要る（2026-08-20）: これが無いと中の長い文字列が縮まず、氏名の列が
   1 文字ずつ縦に潰れて横スクロールが出る（実機で発生）。 */
.admin-ui2 .remind-body { flex: 1; min-width: 0; }
.admin-ui2 .remind-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.admin-ui2 .remind-head .remind-name {
  font-weight: 700;
  color: var(--admin-ink);
  white-space: nowrap;     /* 氏名は絶対に折らない・潰さない */
  flex: none;
}
/* 部門名は長い（例: 管理本部・経営企画室・営業事務）。ここだけを省略記号で詰める。
   全文は title 属性で読める。 */
.admin-ui2 .remind-head .remind-dept {
  color: var(--admin-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* 残っている作業は札にして折り返す（1 行に横並べにすると横スクロールが出る）。 */
.admin-ui2 .remind-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-top: 5px;
}
.admin-ui2 .remind-task {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ui2-kpi-soft);
  color: var(--admin-pop-purple);
  white-space: nowrap;
}
.admin-ui2 .remind-task.is-blocked {
  background: #f1f3f6;
  color: var(--admin-muted);
  font-weight: 600;
  white-space: normal;     /* 理由文は長いので折り返す */
}
.admin-ui2 .remind-blocked-note { margin-top: 8px; }
.admin-ui2 .remind-list-empty { padding: 16px 12px; color: var(--admin-muted); }
.admin-ui2 .modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

/* --- AI レビュー基準の設定（2026-08-22 利用者フィードバック: 余白が詰まっていた）-----------
   カード同士・見出しと中身・選択欄と表の間に間隔を置く。**この画面だけに掛ける**
   （`.panel` 全体に書くと関係ない画面のカードまで動く。2026-08-19 の同型を繰り返さない）。 */
.admin-ui2 [data-view="criteria"] > #criteriaPageContent > #setPaneCriteria:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-ui2 [data-view="criteria"] #criteriaPageContent { min-width: 0; }
.admin-ui2 [data-view="criteria"] #criteriaPageTabs { margin-bottom: 2px; }
.admin-ui2 #setPaneCriteria > .muted { margin: 0; max-width: 46em; line-height: 1.75; }
.admin-ui2 #setPaneCriteria .panel-title { margin-bottom: 14px; }
.admin-ui2 #setPaneCriteria .panel-title .muted-sm { display: none; }
/* 基準セットを先に選ぶ。詳細編集欄は編集・追加・複製を押した時だけ開く。 */
.admin-ui2 #setPaneCriteria .criteria-set-picker {
  padding: 16px 18px;
  border: 1px solid #e8ecf2;
  border-radius: 10px;
  background: #fafbfd;
}
.admin-ui2 #setPaneCriteria .criteria-set-picker-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-ui2 #setPaneCriteria .criteria-set-picker select {
  min-width: min(34em, 100%);
  flex: 1 1 24em;
}
.admin-ui2 #setPaneCriteria .criteria-set-preview {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e8ecf2;
}
.admin-ui2 #setPaneCriteria .criteria-set-preview-target {
  margin: 0 0 10px;
  font-weight: 800;
  color: #3d4756;
}
.admin-ui2 #setPaneCriteria .criteria-set-preview-table {
  margin: 0;
  table-layout: fixed;
}
.admin-ui2 #setPaneCriteria .criteria-set-preview-table th:first-child,
.admin-ui2 #setPaneCriteria .criteria-set-preview-table td:first-child {
  width: 20%;
}
.admin-ui2 #setPaneCriteria .criteria-set-preview-content {
  white-space: pre-wrap;
}
.admin-ui2 #setPaneCriteria .criteria-editor-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
/* 対象の選び方（部門 / 職種 / 等級）。**1 行 1 項目で縦に積む**——横に 3 つ並べると、
   9 個の職種・等級が右端の狭い幅で折り返して読めなくなる（2026-08-22 実機の指摘）。
   ラベルは左の固定幅の列に置き、値は残り全幅を使う。 */
.admin-ui2 #setPaneCriteria .criteria-target {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e8ecf2;
  border-radius: 10px;
  background: #fafbfd;
  margin-bottom: 16px;
}
.admin-ui2 #setPaneCriteria .criteria-field {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  align-items: start;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  border: 0;
}
.admin-ui2 #setPaneCriteria .criteria-label {
  padding: 6px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: #3d4756;
  line-height: 1.4;
}
/* legend は grid の子にならないブラウザがあるので、行を明示して 1 列目に置く。 */
.admin-ui2 #setPaneCriteria legend.criteria-label {
  float: left;
  width: 7em;
}
.admin-ui2 #setPaneCriteria legend.criteria-label + .criteria-chips-wrap { clear: none; }
.admin-ui2 #setPaneCriteria .criteria-label small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #7b8794;
}
.admin-ui2 #setPaneCriteria .criteria-field select { min-width: 18em; max-width: 28em; }
/* AI 活用基準の職種グループも同じ幅に揃える（素だと行いっぱいに伸びる）。 */
.admin-ui2 #setPaneCriteria .row { margin-bottom: 14px; }
.admin-ui2 #setPaneCriteria #criteriaGroupSelect { min-width: 18em; width: auto; }
/* 札の列と「すべて / 解除」を**縦に**積む。横 1 列にすると、札が折り返す項目（職種）では
   下に、折り返さない項目（等級）では右に出て、同じ操作の場所が項目ごとに変わる。 */
.admin-ui2 #setPaneCriteria .criteria-chips-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.admin-ui2 #setPaneCriteria .criteria-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* 選択肢は押せる範囲を広げた札にする（素のチェック欄が横に並ぶより当たりやすく、
   選択中が地色で分かる）。 */
.admin-ui2 #setPaneCriteria .criteria-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid #dfe4ea;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #3d4756;
  white-space: nowrap;
  cursor: pointer;
}
.admin-ui2 #setPaneCriteria .criteria-chip.is-on {
  border-color: #b9c9ef;
  background: #eef3fd;
  color: #2f5f9e;
}
.admin-ui2 #setPaneCriteria .criteria-chip input { margin: 0; }
.admin-ui2 #setPaneCriteria .criteria-chip-actions { display: flex; gap: 10px; }
/* 職種の追加（入力＋ボタン）は横に並べる。 */
.admin-ui2 #setPaneCriteria .criteria-add-job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
/* 職種の追加は 1 行に収める（選ぶ → 押す。札の下に小さく置く）。 */
.admin-ui2 #setPaneCriteria .criteria-add-job select {
  min-width: 14em;
  max-width: 20em;
}
.admin-ui2 #setPaneCriteria .criteria-add-job .btn { padding: 6px 12px; font-size: 13px; }
/* 部門の追加（名簿にまだ無い部門を打って足す・2026-08-26 利用者指示）。職種の追加と同じ並びだが、
   状況の文（名前が空・すでにある）は**消さない**——候補から選ぶ職種と違い、ここは打ち間違いを
   伝える必要がある。 */
.admin-ui2 #setPaneCriteria .criteria-add-dept {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.admin-ui2 #setPaneCriteria .criteria-add-dept select { min-width: 14em; max-width: 20em; }
/* 区切り（バンド）の選択と、その名前。名前は実データが長い
  （例: エンジニア（G~E職級：役職なし・主任））ので広めに取る。 */
.admin-ui2 #setPaneCriteria .criteria-chips-wrap > select { min-width: 24em; max-width: 34em; }
.admin-ui2 #setPaneCriteria .criteria-band-name { min-width: 24em; max-width: 34em; }
.admin-ui2 #setPaneCriteria #criteriaAddJobStatus:empty { display: none; }
.admin-ui2 #setPaneCriteria #criteriaAddJobStatus { margin: 6px 0 0; }
/* 削除は取り返しがつかないので、色で他のボタンと見分ける。 */
.admin-ui2 #setPaneCriteria .btn.danger {
  border-color: #e6b8b8;
  background: #fdf3f3;
  color: #9b2c2c;
}
.admin-ui2 #setPaneCriteria .btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: #4a6fa5;
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.admin-ui2 #setPaneCriteria #criteriaEntryNote:empty { display: none; }
.admin-ui2 #setPaneCriteria #criteriaEntryNote { margin: 0 0 12px; line-height: 1.7; }
.admin-ui2 #setPaneCriteria .review-table { margin-top: 4px; }
.admin-ui2 #setPaneCriteria .review-table td { vertical-align: top; }
.admin-ui2 #setPaneCriteria .criteria-table-scroll,
.admin-ui2 #setPaneCriteria .criteria-levels {
  height: min(520px, calc(100vh - 360px));
  min-height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.admin-ui2 #setPaneCriteria .criteria-table-scroll {
  overflow-x: auto;
  border: 1px solid #e8ecf2;
  border-radius: 10px;
}
.admin-ui2 #setPaneCriteria .criteria-table-scroll .review-table {
  margin: 0;
  min-width: 720px;
}
.admin-ui2 #setPaneCriteria .criteria-table-scroll thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}
/* 見出し・評価項目の名前は 1 行で読める幅にする。実データは「■求められる会社経営への貢献」
   のように長い（2026-08-22 実機: 9em で切れて何の見出しか分からなかった）。 */
.admin-ui2 #setPaneCriteria .review-table th:first-child,
.admin-ui2 #setPaneCriteria .review-table td:first-child { width: 17em; }
.admin-ui2 #setPaneCriteria .review-table .criteria-item { width: 100%; min-width: 15em; }
.admin-ui2 #setPaneCriteria .review-table textarea {
  width: 100%;
  min-height: 4.5em;
  line-height: 1.7;
}
/* スキル・人物像は 1 見出しが 3〜6 行の長文（職務評価基準より深い欄が要る）。 */
.admin-ui2 #setPaneCriteria #criteria02Body textarea { min-height: 7.5em; }
/* 削除は行の右端の細い列（見出しも中央に寄せる）。 */
.admin-ui2 #setPaneCriteria .review-table th:last-child,
.admin-ui2 #setPaneCriteria .review-table td:last-child { text-align: center; }
/* 自動進行の予定（2026-08-22 利用者フィードバック: 4 列の表では何を設定しているか分からない）。
   「本人が記入する期間」「上長が評価する期間」ごとにカードを作り、開始・終了を 1 行ずつ置く。 */
.admin-ui2 #peSchedulePane .sched-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 12px 0 4px;
}
.admin-ui2 #peSchedulePane .sched-group {
  border: 1px solid #e8ecf2;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafbfd;
}
.admin-ui2 #peSchedulePane .sched-group-title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 800;
  color: #3d4756;
}
/* 開始・終了の行。ラベル → 日付 → 時刻 → 説明を**列で揃える**（flex + wrap だと、
   ラベルの長さで日付欄の位置が行ごとにずれて読みにくい。2026-08-22 実機の指摘）。 */
.admin-ui2 #peSchedulePane .sched-row {
  display: grid;
  grid-template-columns: 4.5em auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
.admin-ui2 #peSchedulePane .sched-edge {
  font-size: 13px;
  font-weight: 700;
  color: #4a6fa5;
  white-space: nowrap;      /* 「本人記入 開始」まで来ても 2 行に折らない */
}
/* 区分（期間）が届かない古いサーバー相手でも読めるように、ラベル列を必要なだけ広げる。 */
.admin-ui2 #peSchedulePane .sched-group:not([data-grouped="1"]) .sched-row {
  grid-template-columns: 8.5em auto auto minmax(0, 1fr);
}
.admin-ui2 #peSchedulePane .sched-note {
  font-size: 12px;
  color: #7b8794;
}

/* AI 活用基準: 評価項目 1 つ = カード 1 枚。Lv.1〜5 は縦に積む（横に並べると 1 列が狭く、
   実データ（1 レベル 2〜3 行の文）が小窓になって読めない。2026-08-22 実機の指摘）。 */
.admin-ui2 #setPaneCriteria .criteria-levels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.admin-ui2 #setPaneCriteria .criteria-level-card {
  border: 1px solid #e8ecf2;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fafbfd;
}
.admin-ui2 #setPaneCriteria .criteria-level-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.admin-ui2 #setPaneCriteria .criteria-level-head .criteria-item {
  flex: 1;
  max-width: 26em;
  font-weight: 700;
}
.admin-ui2 #setPaneCriteria .criteria-level-del {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #7b8794;
  white-space: nowrap;
  cursor: pointer;
}
.admin-ui2 #setPaneCriteria .criteria-level-row {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin-top: 8px;
}
.admin-ui2 #setPaneCriteria .criteria-level-tag {
  padding: 8px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #4a6fa5;
}
.admin-ui2 #setPaneCriteria .criteria-level-row textarea {
  width: 100%;
  min-height: 3em;     /* 実データは 1〜3 行。1 行の項目が間延びしない高さにする */
  line-height: 1.7;
}
.admin-ui2 #setPaneCriteria .bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.admin-ui2 #setPaneCriteria .bulk-bar .spacer { flex: 1; }
.admin-ui2 #setPaneCriteria .table-scroll { overflow-x: auto; }
.admin-ui2 #setPaneCriteria [role="status"] { margin: 10px 0 0; line-height: 1.7; }

/* 画面の高さが足りない時（拡大表示 150%/175% や 720p の窓）は左メニューの余白を詰めて
   **10 項目すべてを 1 画面に収める**。縦スクロールで隠すのは「見切れ」の解決にならない
   （下の項目に気づけない・解決方針 #10）。実測: 高さ 617px でも全項目が枠内に入る。 */
@media (max-height: 800px) {
  .admin-ui2 .portal-nav { gap: 12px; padding: 14px 12px; }
  .admin-ui2 .admin-nav-group { gap: 2px; margin-bottom: 10px; }
  .admin-ui2 .admin-nav-group-label { margin: 0 12px 4px; font-size: 10.5px; }
  .admin-ui2 .nav-btn { min-height: 34px; padding: 7px 12px; }
}