/* 見た目の型（PwC型 / NVIDIA型 / Oracle型）の、アプリ一覧以外のポータル画面。2026-09-29 追加。
   （依頼:「展開した先も併せて画面変更して」）

   対象は body のクラスで分ける:
     body.page-admin … 管理画面（/admin, /admin/tools）。外枠はアプリ一覧と同じなので、
                       上端の横ナビ・ユーティリティ行は skin-base.css がそのまま効く。
                       ここでは「見出しの帯」と本文の部品（表・カード・入力）を組む。
     body.page-auth  … ログイン・初期設定（/login, /setup, /admin/login, /admin/setup）。
                       中央のカード1枚の画面。
   約束は skin-base.css と同じ: **すべて html[data-skin] の下にだけ書く**（型を選んでいない人の
   見た目は変わらない）。色と書体は portal-skin-tokens.css の変数を読み、ここに各社の色を書かない。
   写真は共通の台帳（static/img/photos/、正本は DevelopmentWorkspace/shared_ui/photos/）から使う。 */

/* =========================================================================
   管理画面
   ========================================================================= */
/* 見出しの帯。アプリ一覧ではヘッダーを「言語切替だけの細い行」にしたが、管理画面は
   ヘッダーに画面名（h1）があるので、ナビの下に大見出しの帯として置く。 */
html[data-skin] body.page-admin header {
  order: 0; justify-content: space-between; align-items: flex-end; gap: 16px;
  min-height: 150px; padding: 36px var(--sk-pad-x) 28px;
}
html[data-skin] body.page-admin header h1 {
  margin: 0; font-family: var(--sk-head-font); font-weight: var(--sk-head-weight);
  font-size: clamp(26px, 3vw, 44px); line-height: 1.15;
}
html[data-skin="pwc"] body.page-admin header {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, .25)),
    url("/static/img/photos/hero.jpg") center 60% / cover no-repeat, var(--sk-band);
}
html[data-skin="nvidia"] body.page-admin header {
  color: var(--sk-band-text); background: var(--sk-band); border-bottom: 4px solid var(--sk-accent);
}
html[data-skin="oracle"] body.page-admin header {
  width: min(var(--sk-content-w), calc(100% - 2 * var(--sk-pad-x)));
  margin: 24px auto 0; border-radius: 16px; overflow: hidden; color: var(--sk-text);
  background:
    linear-gradient(90deg, #fff 0%, #fff 55%, rgba(255, 255, 255, 0) 55.1%),
    url("/static/img/photos/hero_dark.jpg") right center / 45% 100% no-repeat, #fff;
}

/* 本文の幅（アプリ一覧と同じ本文幅に揃える。フッターだけは端から端まで）。
   左右の余白は main のパディングで取る——子の margin で中央に寄せると、インラインの
   style="margin:…" を持つ段落（管理者向けアプリの説明文）だけが左端に貼り付く
   （2026-09-29、390px で描画して確認）。 */
html[data-skin] body.page-admin main { padding-left: var(--sk-pad-x); padding-right: var(--sk-pad-x); }
html[data-skin] body.page-admin main > :not(.dita-footer) {
  /* width を明示する: main は flex の縦並びで、左右 auto の余白だけだと子の幅が中身の幅になり、
     カードのグリッドが 1300px まで広がって画面からはみ出した（390px で実測） */
  width: 100%; max-width: var(--sk-content-w); margin-left: auto; margin-right: auto;
}
html[data-skin] body.page-admin main > .dita-footer {
  margin-left: calc(-1 * var(--sk-pad-x)); margin-right: calc(-1 * var(--sk-pad-x));
}
html[data-skin] body.page-admin .portal-title {
  display: block; margin-top: 8px; margin-bottom: 8px;
  font-family: var(--sk-head-font); font-weight: var(--sk-head-weight); font-size: 26px; color: var(--sk-text);
}
html[data-skin] body.page-admin .app-grid { margin-bottom: 48px; }
html[data-skin] body.page-admin .admin-section-title {
  font-family: var(--sk-head-font); font-weight: var(--sk-head-weight); font-size: 24px;
  color: var(--sk-text); border-top: 1px solid var(--sk-rule); padding-top: 20px;
}
html[data-skin] body.page-admin .admin-card {
  background: var(--sk-surface); border: 1px solid var(--sk-rule); border-radius: var(--sk-radius);
  color: var(--sk-text);
}
html[data-skin] body.page-admin .admin-table-wrap { border-color: var(--sk-rule); border-radius: var(--sk-radius); }
html[data-skin] body.page-admin .admin-table { background: var(--sk-surface); color: var(--sk-text); font-size: 13px; }
html[data-skin] body.page-admin .admin-table th { background: var(--sk-bg); color: var(--sk-text); }
html[data-skin="nvidia"] body.page-admin .admin-table th { background: var(--sk-band); color: var(--sk-band-text); }
html[data-skin] body.page-admin .block-form input,
html[data-skin] body.page-admin .block-form select { border-radius: var(--sk-btn-radius); font-family: inherit; }
html[data-skin] body.page-admin .btn-block,
html[data-skin] body.page-admin .btn-block-row { background: var(--sk-accent); color: var(--sk-accent-text); }
html[data-skin] body.page-admin .btn-unblock { background: transparent; color: var(--sk-text); border: 1px solid var(--sk-btn-line); }
/* 管理画面の左メニューにある「起動して開く」ボタン群も、横ナビの中では文字のリンクに揃える */
html[data-skin] body.page-admin .nav-sidebar .tab.tab-launch,
html[data-skin] body.page-admin .nav-sidebar .tab.tab-content:not(.active) {
  background: none; border: 0; box-shadow: none; color: var(--sk-nav-text); margin: 0;
}
html[data-skin] body.page-admin .nav-sidebar .sb-gap-group,
html[data-skin] body.page-admin .nav-sidebar .sb-gap-lg { display: none; }
html[data-skin] body.page-admin .nav-sidebar .sb-sec { color: var(--sk-dim); font-size: 12px; padding: 0 0 0 8px; }

@media (max-width: 900px) {
  html[data-skin] body.page-admin header { min-height: 110px; padding: 24px var(--sk-pad-x) 20px; }
  html[data-skin="oracle"] body.page-admin header { background: #fff; }
}

/* =========================================================================
   ログイン・初期設定（中央のカード1枚）
   ========================================================================= */
html[data-skin] body.page-auth { font-family: var(--sk-font); color: var(--sk-text); }
html[data-skin] body.page-auth .auth-card {
  max-width: 420px; padding: 40px 36px; color: var(--sk-text);
  background: var(--sk-surface); border: 1px solid var(--sk-rule); border-radius: var(--sk-radius);
}
html[data-skin] body.page-auth .auth-card h2 {
  font-family: var(--sk-head-font); font-weight: var(--sk-head-weight); font-size: 28px; margin-bottom: 8px;
}
html[data-skin] body.page-auth .auth-card .sub { color: var(--sk-dim); font-size: 13px; }
html[data-skin] body.page-auth .auth-card label { color: var(--sk-dim); }
html[data-skin] body.page-auth .auth-card input { border-color: var(--sk-rule); border-radius: var(--sk-btn-radius); font-family: inherit; }
html[data-skin] body.page-auth .auth-card input:focus { border-color: var(--sk-accent); outline: 2px solid var(--sk-accent); outline-offset: 1px; }
html[data-skin] body.page-auth .auth-card button {
  background: var(--sk-accent); color: var(--sk-accent-text); border-radius: var(--sk-btn-radius); font-family: inherit;
}
html[data-skin] body.page-auth .auth-card .lang-toggle { color: var(--sk-text); }
/* ロゴの枠（「ロゴ」と書いた仮置き）に会社ロゴを置く（アプリ一覧と同じ） */
html[data-skin] body.page-auth .auth-logo-placeholder {
  width: 200px; height: 36px; border: 0; border-radius: 0; color: transparent; font-size: 0;
  background: url("/static/img/DIT_logo.png?v=20261011") center / contain no-repeat;
}

/* PwC型: 画面いっぱいの写真に暗い重ね、白い角のカード。ボタンはオレンジの角＋→ */
html[data-skin="pwc"] body.page-auth {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .25)),
    url("/static/img/photos/hero.jpg") center / cover no-repeat fixed, var(--sk-band);
}
html[data-skin="pwc"] body.page-auth .auth-card { border: 0; }
html[data-skin="pwc"] body.page-auth .auth-card button::after { content: " \2192"; }

/* NVIDIA型: 白地に枠線のカード、上辺に緑の線。ボタンは緑に黒の太字 */
html[data-skin="nvidia"] body.page-auth { background: var(--sk-bg); }
html[data-skin="nvidia"] body.page-auth .auth-card { border-top: 4px solid var(--sk-accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
html[data-skin="nvidia"] body.page-auth .auth-card button { font-weight: 700; }

/* Oracle型: 温かい灰色の地に、角の大きく丸い白いカード */
html[data-skin="oracle"] body.page-auth { background: var(--sk-bg); }
html[data-skin="oracle"] body.page-auth .auth-card { border-radius: 16px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); border-color: #e4e0dc; }
html[data-skin="oracle"] body.page-auth .auth-card h2 { font-weight: 300; }

/* いつもの見た目の右端の黒い縦線（額縁）は型の見た目に無い。アプリ一覧と管理画面は
   skin-base.css が外すが、ログイン系は skin-base.css を読まないのでここで外す
   （2026-09-29、描画して右端に線が残っているのを確認）。 */
html[data-skin] body.page-auth::before, html[data-skin] body.page-auth::after { display: none; }

/* Oracle型の管理画面: 見出しの帯の右半分が写真なので、言語切替を白い台に載せて読めるようにする */
html[data-skin="oracle"] body.page-admin header .lang-toggle {
  background: rgba(255, 255, 255, .95); border-radius: 8px; padding: 4px 6px;
}

/* 上端の横ナビで、起動状況の表示欄（.nav-sidebar-status。起動中だけ文字が入る）が空のまま
   幅と前後の余白を取り、項目の間に大きな空きができていた（2026-09-29、1805px で実測: 3か所）。
   空のときは詰める。起動中に文字が入れば従来どおり出る。 */
html[data-skin] body.page-admin .nav-sidebar .nav-sidebar-status:empty { display: none; }
html[data-skin] body.page-admin .nav-sidebar .nav-sidebar-status { padding: 0; font-size: 12px; color: var(--sk-dim); white-space: nowrap; }

/* ---- 社員育成支援（/admin）のカードを大きく、写真つきで（2026-09-29 依頼） ----------------
   「一つ一つのカードをもっと大きく、内容に合わせた洗練された写真にして」。
   1440px 幅で3列（1枚あたり約 430px）、写真は 16:9。2列に落ちる幅でも写真は横幅いっぱい。
   写真はアプリ id / 掲載物の id と同じ名前（static/img/photos/、正本は DevelopmentWorkspace/shared_ui/photos/）。 */
html[data-skin] body.page-admin .app-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 44px 32px;
}
html[data-skin] body.page-admin .app-card { gap: 12px; }
html[data-skin] body.page-admin .card-photo { aspect-ratio: 16 / 9; margin-bottom: 8px; }
html[data-skin] body.page-admin .app-card .name {
  font-family: var(--sk-head-font); font-weight: var(--sk-head-weight);
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.25;
}
html[data-skin] body.page-admin .app-card .desc { font-size: 15px; line-height: 1.7; }
html[data-skin] body.page-admin .app-card .btn { padding: 11px 22px; font-size: 14px; }
/* 説明文の段落はインラインの margin を持つので、中央寄せを !important で効かせる
   （付けないと本文の左端より左に貼り付く。2026-09-29 の利用者のスクリーンショットで確認） */
html[data-skin] body.page-admin main > p { margin-left: auto !important; margin-right: auto !important; font-size: 13px !important; }
/* 型ごとの写真の縁 */
html[data-skin="oracle"] body.page-admin .card-photo { border-radius: 10px 10px 0 0; }
html[data-skin="nvidia"] body.page-admin .app-card { border-top: 4px solid var(--sk-rule); }
html[data-skin="nvidia"] body.page-admin .app-card:hover { border-top-color: var(--sk-accent); }

/* 社員育成支援の上端メニューは項目が多く（管理者向けアプリ3つ＋掲載物3つ＋管理機能）、1行の横送りだと
   1440px 幅でも最後の2項目（現場の価値分析・管理機能）が画面の外に出て、送らないと押せなかった
   （2026-09-29 に実測: 右端 1578px）。広い画面では折り返して全部見せる。狭い画面は従来どおり横送り。 */
@media (min-width: 901px) {
  html[data-skin] body.page-admin .nav-sidebar {
    flex-wrap: wrap; height: auto; min-height: var(--sk-nav-h);
    row-gap: 2px; padding-top: 8px; padding-bottom: 8px; overflow-x: visible;
  }
}