/* ════════════════════════════════════════════════════════════════
   pf- デザインシステム（共通CSS）
   ─ ダッシュボード(portal.html)で確立したブルー基調の見た目を、各スキル画面で
     再利用するために切り出した共通スタイル。base.html から style.css の直後に
     読み込む（全画面共通）。
   ─ 命名は pf- 接頭辞で統一。既存 style.css（.cc-* / .tool-card 等）とは名前空間が
     分離しており衝突しない（追加であって上書きではない）。
   ─ ダッシュボード固有（カレンダー .pf-cal-* / 週間天気 .pf-wx-*）は portal.html
     側に残す。通知ベル .pf-bell-* は base.html に直書きで全画面共通化済み。
   ════════════════════════════════════════════════════════════════ */

/* ── カラートークン（:root で全画面に供給。元は portal.html の .pf-shell スコープ）── */
:root {
  --pf-navy-900:#16407a;
  --pf-navy-800:#123a6e;   /* サイドバー グラデ下端 */
  --pf-navy-700:#1b4d8f;   /* サイドバー グラデ上端 */
  --pf-navy-600:#2a6fc4;   /* アクティブなナビ項目 */

  --pf-sky-500:#0284c7;   --pf-sky-400:#38bdf8;   --pf-sky-50:#e6f3fb;
  --pf-blue-600:#2563a8;  --pf-blue-500:#2b7de9;  --pf-blue-50:#e8f0f9;
  --pf-cyan-500:#1488a8;   --pf-cyan-50:#e3f0f4;
  --pf-indigo-500:#4054c4; --pf-indigo-50:#eaedfa;
  --pf-slate-500:#5b6b7d;  --pf-slate-50:#eef1f4;
  --pf-green-50:#eaf3ea;   --pf-green-600:#2f7a32;

  --pf-ink:#1a2430;
  --pf-ink-soft:#5a6776;
  --pf-ink-faint:#94a2b1;
  --pf-line:#e2e7ec;
  --pf-line-soft:#eef1f4;
  --pf-white:#ffffff;
  --pf-paper:#ffffff;      /* カード表面（週間天気カード等）。未定義参照だった --pf-paper を明示定義（白＝従来の透明背景と同一見え） */
  --pf-danger:#c0392b;
  --pf-radius:14px;
}

/* pf- デザインのコンテンツラッパ（文字色の基調） */
.pf-shell { color: var(--pf-ink); }

/* ── レイアウト土台（ローカル CSS Grid・CDN 非依存）─────────────────
   サイドバー＋メインの2カラム。Bootstrap の .row/.col（CDN・992px で段組み解除）に
   依存せず、CSS Grid で常に横並びを保つ。820px 未満のみ縦積み。 */
.pf-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}
@media (max-width: 820px) {
  .pf-layout { grid-template-columns: 1fr; }
}
/* 横並び時のみサイドバーをスクロール追従（粘着）させる。幅はGridトラック(236px)が担う */
@media (min-width: 821px) {
  .pf-sidebar { position: sticky; top: 70px; }
}

/* ── サイドバー（濃紺パネル）── */
.pf-sidebar {
  background: linear-gradient(180deg, var(--pf-navy-700), var(--pf-navy-800));
  border-radius: 18px;
  padding: 6px;
  color: #cfe0f3;
  box-shadow: 0 8px 24px -14px rgba(16,40,90,.5);
  display: flex; flex-direction: column;
}
.pf-brand {
  display:flex; align-items:center; gap:0.75rem;
  padding:1rem 0.85rem; margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.pf-logo {
  flex:0 0 auto; width:40px; height:40px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--pf-sky-400), var(--pf-blue-500));
  box-shadow: 0 3px 10px rgba(43,125,233,.45);
  color: var(--pf-white); font-size:1.25rem;
}
.pf-brand-name { color:var(--pf-white); font-weight:800; font-size:1.1rem; letter-spacing:.3px; line-height:1.15; }
.pf-brand-sub  { color:#a9c2e0; font-size:0.7rem; letter-spacing:.5px; }

.pf-nav { padding:4px 6px 8px; }
.pf-nav-link {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.65rem 0.8rem; margin-bottom:3px;
  border-radius:11px; color:#c4d6ec; font-size:0.875rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pf-nav-link i { font-size:1.05rem; flex:0 0 auto; width:1.15rem; text-align:center; opacity:.9; }
.pf-nav-link span { overflow:hidden; text-overflow:ellipsis; }
.pf-nav-link:hover { background:rgba(255,255,255,.09); color:var(--pf-white); }
.pf-nav-link.active {
  background: var(--pf-navy-600); color:var(--pf-white);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.25);
}
.pf-nav-link.active i { opacity:1; }

.pf-sidebar-foot {
  margin-top:auto; padding:0.9rem 0.85rem 0.75rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.pf-user-chip { display:flex; align-items:center; gap:0.7rem; }
.pf-user-avatar {
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.16); color:var(--pf-white);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem;
}
.pf-user-name { color:var(--pf-white); font-weight:700; font-size:0.85rem; line-height:1.25; }
.pf-user-role { color:#a9c2e0; font-size:0.72rem; }
.pf-version { color:#8aa6c8; font-size:0.7rem; margin-top:0.7rem; display:flex; align-items:center; gap:0.3rem; }

/* ── スキル画面サイドバー（_nav.html: qualifications / master 共有）──
   ダッシュボードの .pf-sidebar と同じ濃紺トーンへ揃える。Bootstrap nav-pills の
   構造(.nav-link/.active)はパンくず同期JS(.nav.nav-pills.flex-column / .nav-link.active)
   とテンプレ共有のため維持し、styling は .pf-skillnav スコープに限定して
   company_detail の局所5連タブ(#companyLocalTabs)を巻き込まないよう隔離する。 */
.pf-skillnav {
  background: linear-gradient(180deg, var(--pf-navy-700), var(--pf-navy-800));
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 8px 24px -14px rgba(16,40,90,.5);
}
.pf-skillnav .nav-link {
  display:flex; align-items:center; gap:0.55rem;
  padding:0.6rem 0.8rem; margin-bottom:3px;
  border-radius:11px; color:#c4d6ec; font-size:0.875rem; font-weight:600;
  white-space:nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.pf-skillnav .nav-link i { opacity:.9; }
.pf-skillnav .nav-link:hover { background:rgba(255,255,255,.09); color:var(--pf-white); }
/* アクティブ: Bootstrap の .nav-pills .nav-link.active(青)を上書き。複合セレクタで
   特異度を上げ、CDN Bootstrap より確実に勝たせる。 */
.pf-skillnav.nav-pills .nav-link.active,
.pf-skillnav .nav-link.active {
  background: var(--pf-navy-600); color: var(--pf-white);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.25);
}
.pf-skillnav .nav-link.active i { opacity:1; }

/* ── セクション見出し ── */
.pf-section-head { display:flex; align-items:baseline; gap:12px; margin:6px 0 16px; }
.pf-section-head h2 { font-size:1rem; font-weight:800; letter-spacing:.3px; margin:0; }
.pf-section-head .pf-hint { font-size:0.78rem; color:var(--pf-ink-soft); }
.pf-section-head .pf-rule { flex:1; height:1px; background:var(--pf-line); }

/* ── ツールカード（B案：上部色帯＋ソリッドアイコン）── */
.pf-tool-card {
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--pf-white); border:1px solid var(--pf-line);
  border-radius:var(--pf-radius); padding:22px 20px 18px;
  text-decoration:none; color:inherit; height:100%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pf-tool-card::before {
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background: var(--pf-accent, var(--pf-slate-500));
}
.pf-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(16,40,90,.30);
  border-color:#cfd8e1; color:inherit;
}
.pf-tool-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.pf-tool-icon {
  flex:0 0 auto; width:48px; height:48px; border-radius:13px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background: var(--pf-accent, var(--pf-slate-500)); color:#fff;
  box-shadow: 0 4px 12px -4px var(--pf-accent, var(--pf-slate-500));
}
.pf-tool-title {
  padding-top:4px; min-width:0; font-size:0.97rem; font-weight:800; letter-spacing:.2px; line-height:1.35;
  color:var(--pf-ink); overflow:hidden; text-overflow:ellipsis;
}
.pf-tool-desc {
  flex:1; font-size:0.8rem; color:var(--pf-ink-soft); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pf-tool-foot {
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding-top:13px; border-top:1px solid var(--pf-line-soft);
}
.pf-pill {
  font-size:0.68rem; font-weight:700; letter-spacing:.3px; padding:3px 9px;
  border-radius:6px; display:inline-flex; align-items:center; gap:5px;
}
.pf-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.pf-pill-live { background:var(--pf-green-50); color:var(--pf-green-600); }
.pf-pill-beta { background:#e8eef4; color:#516580; }
.pf-tool-go {
  margin-left:auto; display:flex; align-items:center; gap:4px;
  font-size:0.78rem; font-weight:700; color:var(--pf-ink-soft); transition:.15s;
}
.pf-tool-card:hover .pf-tool-go { color:var(--pf-accent, var(--pf-slate-500)); gap:7px; }

/* tool.id → 機能別アクセント */
.pf-accent-cyan   { --pf-accent:var(--pf-cyan-500); }
.pf-accent-blue   { --pf-accent:var(--pf-blue-600); }
.pf-accent-indigo { --pf-accent:var(--pf-indigo-500); }
.pf-accent-sky    { --pf-accent:var(--pf-sky-500); }
.pf-accent-slate  { --pf-accent:var(--pf-slate-500); }

/* 実験用（contract_docs・Beta）カード：破線＋薄い斜めストライプ */
.pf-tool-card--exp {
  border-style:dashed; border-color:#cfdbe7;
  background: repeating-linear-gradient(135deg, #fff, #fff 11px, #f6f9fc 11px, #f6f9fc 22px);
}
.pf-tool-card--exp::before { opacity:.6; }

.pf-info { border-radius:12px; }

/* ── 汎用カード（パネル）── スキル画面のコンテンツ枠の基本部品。
   Bootstrap の .card（card-header bg-* / card-body）の置き換え。見出しは淡色・
   ニュートラルにし、状態の意味はアイコン色やピルで表す。 */
.pf-card {
  background: var(--pf-white);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  box-shadow: 0 6px 18px -12px rgba(16,40,90,.25);
  overflow: hidden;
}
.pf-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  font-size: 0.92rem; font-weight: 800; color: var(--pf-ink);
  border-bottom: 1px solid var(--pf-line-soft);
}
.pf-card-head i { color: var(--pf-blue-600); }
.pf-card-body { padding: 18px; }
/* 強調ヘッダ（ヒーロー/ダッシュボードカード用）。pf- ブルー地に白文字。 */
.pf-card-head--accent { background: var(--pf-blue-600); color: #fff; border-bottom-color: transparent; }
.pf-card-head--accent i { color: #fff; }

/* ── 統計タイル（数値サマリ）── ラベル＋大きな数値の小カード。 */
.pf-stat {
  background: var(--pf-white);
  border: 1px solid var(--pf-line); border-radius: 11px;
  padding: 14px 10px; text-align: center; height: 100%;
}
.pf-stat-label { font-size: 0.72rem; color: var(--pf-ink-soft); font-weight: 700; }
.pf-stat-value { font-size: 1.5rem; font-weight: 800; color: var(--pf-ink); line-height: 1.1; margin-top: 2px; }

/* ── ページ見出し ── スキル作業画面のページタイトル（.pf-section-head より大きい）。
   「今どの画面か」を示す各スキル共通のタイトル部品。title＋任意のサブ＋下罫線。 */
.pf-page-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 20px; }
.pf-page-head h1 {
  font-size: 1.4rem; font-weight: 800; letter-spacing: .2px; margin: 0;
  color: var(--pf-ink); display: flex; align-items: center; gap: 0.55rem;
}
.pf-page-head h1 i { color: var(--pf-blue-600); font-size: 1.25rem; }
.pf-page-head .pf-page-sub { font-size: 0.82rem; color: var(--pf-ink-soft); }
.pf-page-head .pf-rule { flex: 1; height: 1px; background: var(--pf-line); }

/* ===== 全画面 PC幅 1600px 上限＋スマホ 1360 丸ごと縮小 =====
   base.html の viewport=width=1360 と組で機能する。PC とスマホで幅の決め方が違う:
   ・スマホ: viewport 固定幅(1360)によりブラウザが 1360 のPCレイアウトを描画→端末幅へ縮小。
     ここの max-width は 1360 より大きいので効かない＝スマホの見え方はこの値を変えても不変。
   ・PC: viewport meta は無視されるため、本文/ナビ内側を .pf-stage で max-width:1600 の
     中央寄せにする。利用者は全員フル HD（CSS 幅 1903）の外部モニタなので、1360 だと左右に
     計 540px の余白が出て契約台帳などの表が窮屈になる。1903 いっぱいにしないのは、フォーム
     中心の画面（潮汐予測など）が間延びするのと、6ab4603 が止めた「全幅への広がり」を
     戻さないため。max-width なので窓が狭い環境（拡大率 125%=1536・150%=1280）では
     その幅まで縮み、横に溢れない。
   navbar 内側と main 本文コンテナの両方に付与し、ヘッダーと本文のアラインを同じ幅で統一。
   ⚠️ この値を変えるときは base.html 冒頭の注記も揃えること（tests/test_layout_width.py が
   数値の食い違いを検出する）。 */
.pf-stage { max-width: 1600px; margin-inline: auto; }