/*-------------------------
  Career Dashboard
  配色: ネイビー・ブルー・ティール
------------------------- */
:root {
  --navy: #1f2a44;
  --navy-soft: #9aa3b5;
  --teal: #0d9488;
  --blue: #2563eb;
  --slate: #64748b;
  --text: #1f2937;
  --muted: #6b7280;
  --card: #f3f4f6;
  --line: #e5e7eb;
  --band: #f9fafb;
  --page: #f5f6f8;
  --role-pm: #1f3a68;
  --role-pl: #2563eb;
  --role-pmo: #0d9488;
  --role-se: #64748b;
  --role-other: #94a3b8;
  --old-bar-opacity: 0.3; /* 直近 3 年より前の項目のバーの濃さ */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", "Noto Sans JP", "Yu Gothic UI", "Hiragino Sans", "Meiryo", sans-serif;
  font-feature-settings: "palt";
  font-variant-numeric: tabular-nums;  /* 数字の桁をそろえる */
  color: var(--text);
  background: var(--page);
  font-size: 13px;
  line-height: 1.4;
  padding: 24px 16px;
}

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(31, 42, 68, 0.08);
  overflow: hidden;
}

/* ===== 言語ボタン ===== */
#lang-buttons {
  max-width: 1200px; /* 下のカード（.dashboard）と左右の端をそろえる */
  margin: 0 auto 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#lang-buttons button {
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  border-radius: 6px;
  padding: 6px 18px;
  font-weight: bold;
  cursor: pointer;
}
#lang-buttons button.active {
  background: var(--navy);
  color: #fff;
}
/* JP／EN は 1 つの切り替え（つなげて表示） */
#lang-buttons #btn-ja {
  border-radius: 6px 0 0 6px;
}
#lang-buttons #btn-en {
  border-radius: 0 6px 6px 0;
  border-left: 0;
}
#lang-buttons .lang-switch {
  display: flex;
}

/* ===== ヘッダー ===== */
.dash-header {
  background: var(--navy);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 題名と氏名・基準年月を上下の中央でそろえる */
  gap: 16px;
  border-bottom: 4px solid var(--teal);
}
.dash-header h1 {
  font-size: 24px;
  letter-spacing: 0.04em;
}
.dash-header .subtitle,
.dash-header .as-of {
  color: var(--navy-soft);
  font-size: 11px;
  margin-top: 2px;
}
.dash-header .person {
  text-align: right;
  font-size: 18px;
  font-weight: bold;
}
.dash-header .as-of {
  text-align: right;
}
/* スマホ: 2 段にする（1 段目: 題名、2 段目: 氏名・基準年月）。氏名が長くても切れない */
@media (max-width: 768px) {
  .dash-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .dash-header h1 {
    font-size: 18px;
    letter-spacing: 0.02em;
  }
  .dash-header .person,
  .dash-header .as-of {
    text-align: left;
  }
  .dash-header .person {
    font-size: 15px;
    overflow-wrap: anywhere;
  }
}

.dash-body {
  padding: 18px 24px 24px;
}

/* ===== KPI カード ===== */
.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap: 12px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--card);
  border-top: 3px solid var(--teal);
  border-radius: 6px;
  padding: 10px 14px 12px;
}
.kpi .label {
  color: var(--muted);
  font-size: 11px;
  font-weight: bold;
}
.kpi .value {
  color: var(--navy);
  font-size: 26px;
  font-weight: bold;
  line-height: 1.25;
  margin-top: 4px;
}
.kpi .value.small {
  font-size: 16px;
  line-height: 1.5;
  margin-top: 8px;
}
.kpi .sub {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chip {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: bold;
}

/* ===== セクション見出し ===== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.section-head h2 {
  color: var(--navy);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.section-head .note {
  color: var(--muted);
  font-size: 10px;
  margin-left: 12px;
  font-weight: normal;
}
.legend {
  display: flex;
  flex-wrap: wrap; /* 入りきらなければ項目ごとに次の行へ（文字の途中では折り返さない） */
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.legend .lane-legend {
  color: var(--text);
  background: none;
  padding: 2px 6px;
}
.legend .lane-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 50%;
  vertical-align: -1px;
}
.legend .legend-label {
  color: var(--muted);
  background: none;
  padding: 2px 0 2px 2px;
}
.legend-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.legend-group + .legend-group {
  margin-left: 10px;
}
.legend span {
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
/* スマホ: 凡例は見出しの下の行に、左寄せで並べる */
@media (max-width: 768px) {
  .timeline .section-head {
    flex-wrap: wrap;
    align-items: center;
  }
  .legend {
    flex-basis: 100%;
    justify-content: flex-start;
    row-gap: 6px;
  }
  .legend-group + .legend-group {
    margin-left: 0;
  }
  .legend span {
    padding: 2px 8px;
  }
}

/* ===== タイムライン（ガント） ===== */
.gantt {
  --graph: 40px; /* 分岐グラフの列（dashboard.html でレーン数から設定） */
  --info: 270px 100px 40px 108px 150px; /* プロジェクト・所属・役割・期間・主要技術 */
}
.gantt-row {
  display: grid;
  grid-template-columns: var(--graph) var(--info) 1fr;
  align-items: center;
  min-height: 19px;
  border-bottom: 1px solid var(--line);
}
.gantt-row:nth-child(even of .gantt-item) {
  background: var(--band);
}
.gantt-row > div,
.gantt-row > a {
  padding: 1px 6px 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-head {
  border-bottom: 1px solid var(--navy);
  color: var(--muted);
  font-size: 10px;
  font-weight: bold;
  min-height: 22px;
}
.gantt .title {
  font-weight: bold;
  font-size: 11.5px;
  color: inherit;
  text-decoration: none;
}
.gantt a.title:hover {
  color: var(--blue);
  text-decoration: underline;
}
.gantt .role {
  font-weight: bold;
  text-align: center;
  font-size: 11px;
}
.gantt .affiliation,
.gantt .period,
.gantt .tech {
  font-size: 10.5px;
  color: var(--muted);
}

/* 分岐グラフの列（描画は assets/css/timeline_graph.css） */
/* スマホ用の SVG（dashboard.html の drawTimelineSvg）。パソコンの幅では出さない */
.gantt .g-svg {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.gantt .g-graph {
  padding: 0 !important;
  overflow: visible !important;
}
.gantt-item:nth-child(even of .gantt-item) {
  --g-ring: var(--band);
}
.gantt .tech {
  color: var(--text);
}
.track {
  position: relative;
  height: 19px;
  padding: 0 !important;
  overflow: visible !important;
}
.track .grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--line);
}
.track .grid-line.major {
  border-left-color: #cbd2dc;
}
.track .bar {
  position: absolute;
  top: 4px;
  height: 11px;
  border-radius: 3px;
  min-width: 3px;
  background: var(--c);
}
/* 進行中の案件は右端を矢印にする */
.track .bar.ongoing {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.track .bar.ongoing::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  border-left: 6px solid var(--c);
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}
.year-label {
  position: absolute;
  bottom: 2px;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted);
}
.year-label.major {
  font-weight: bold;
  color: var(--navy);
}

/* ===== 経験年数（横棒） ===== */
.summary {
  margin-top: 26px;
}
.charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* TOP10 / すべて の切り替え */
.chart-limit {
  display: flex;
  flex-shrink: 0;
}
.chart-limit button {
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
.chart-limit button:first-child {
  border-radius: 6px 0 0 6px;
}
.chart-limit button:last-child {
  border-radius: 0 6px 6px 0;
  border-left: 0;
}
.chart-limit button.active {
  background: var(--navy);
  color: #fff;
}
.chart-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}
.chart-card h3 {
  color: var(--navy);
  font-size: 12px;
  margin-bottom: 8px;
}
.bar-row {
  display: grid;
  grid-template-columns: 96px 1fr 34px;
  align-items: center;
  gap: 6px;
  margin: 3px 0;
  font-size: 11px;
}
.bar-row .name {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-row .meter {
  background: var(--card);
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}
.bar-row .meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
/* 直近 3 年以内に携わった項目（dashboard_metrics.py の recent）: 名前を太字に。それ以外はバーを薄く */
.bar-row.recent .name {
  font-weight: bold;
  color: var(--navy);
}
.bar-row:not(.recent) .meter > span {
  opacity: var(--old-bar-opacity);
}
.recent-legend {
  margin-left: 12px;
  font-size: 11px;
  color: var(--muted);
  font-weight: normal;
  white-space: nowrap;
}
.recent-legend .swatch {
  display: inline-block;
  width: 18px;
  height: 7px;
  margin: 0 4px 0 10px;
  border-radius: 999px;
  background: var(--slate); /* グラフごとに色が違うので、見本は灰色で濃さだけ示す */
  vertical-align: 1px;
}
.recent-legend .swatch.old {
  opacity: var(--old-bar-opacity);
}
.bar-row .years {
  color: var(--muted);
  font-size: 10.5px;
  text-align: right;
}

/* ===== 画面幅が狭い場合 ===== */
@media screen and (max-width: 900px) {
  .kpis {
    grid-template-columns: 1fr 1fr;
  }
  .charts {
    grid-template-columns: 1fr;
  }
  /* タイムラインは横スクロールで見る */
  .gantt {
    --info: 150px 0 40px 0 0;
    overflow-x: auto;
  }
  .gantt-row {
    min-width: 680px;
  }
  .gantt .affiliation,
  .gantt .period,
  .gantt .tech {
    visibility: hidden;
  }
  .gantt-row > :nth-child(1),
  .gantt-row > :nth-child(2) {
    position: sticky;
    z-index: 1;
    background: #fff;
  }
  .gantt-row > :nth-child(1) {
    left: 0;
  }
  .gantt-row > :nth-child(2) {
    left: var(--graph);
  }
  .gantt-row:nth-child(even of .gantt-item) > :nth-child(1),
  .gantt-row:nth-child(even of .gantt-item) > :nth-child(2) {
    background: var(--band);
  }
  .section-head {
    flex-wrap: wrap;
  }
}

/* スマホ: タイムラインは横スクロールをやめ、1 件を 3 行で見せる（案件名 / 所属・役割 / 期間）。
   期間の棒は右の細い欄に縮めて描く（棒の位置は割合なので、幅が狭くても正しい位置に出る）。
   行の子要素の順番: 1 分岐グラフ・2 案件名・3 所属・4 役割・5 期間・6 主要技術・7 棒（見出し行も同じ並び） */
@media screen and (max-width: 768px) {
  .gantt {
    overflow-x: visible;
  }
  .gantt-row {
    min-width: 0;
    grid-template-columns: var(--graph) minmax(0, 1fr) auto 84px;
    grid-template-areas:
      "graph title title track"
      "graph aff role track"
      "graph period period track";
    column-gap: 6px;
    padding: 0; /* 余白は文字の側に付ける（行に付けると分岐グラフの線が行の境目で途切れる） */
  }
  .gantt-row > :nth-child(1) {
    grid-area: graph;
  }
  .gantt-row > :nth-child(2) {
    grid-area: title;
  }
  .gantt-row > :nth-child(3) {
    grid-area: aff;
  }
  .gantt-row > :nth-child(4) {
    grid-area: role;
  }
  .gantt-row > :nth-child(5) {
    grid-area: period;
  }
  .gantt-row > :nth-child(6) {
    display: none; /* 主要技術はスキルシートで見られるので省く */
  }
  .gantt-row > :nth-child(7) {
    grid-area: track;
    align-self: stretch;
    height: auto;
  }
  /* 横スクロールのときの「左に固定」をやめる（分岐グラフは線の位置の基準なので relative のまま） */
  .gantt-row > :nth-child(1) {
    position: relative;
    background: none;
  }
  .gantt-row > :nth-child(2) {
    position: static;
    background: none;
  }
  .gantt-row:nth-child(even of .gantt-item) > :nth-child(1),
  .gantt-row:nth-child(even of .gantt-item) > :nth-child(2) {
    background: none;
  }
  .gantt .affiliation,
  .gantt .period {
    visibility: visible;
  }
  .gantt-item > :nth-child(3),
  .gantt-item > :nth-child(4),
  .gantt-item > :nth-child(5) {
    font-size: 10px;
    padding: 0;
  }
  .gantt-item > :nth-child(3) {
    color: var(--muted);
  }
  .gantt-item > :nth-child(2) {
    padding-top: 4px;
  }
  .gantt-item > :nth-child(5) {
    padding-bottom: 4px;
  }
  /* 分岐グラフは 1 枚の SVG で描く（点線がそろってつながり、分岐はなめらかな曲線。assets/js/timeline_graph.js）。
     行ごとの線・点（パソコン用）は隠す */
  .gantt {
    position: relative;
  }
  .gantt .g-svg {
    display: block;
  }
  .gantt .g-line,
  .gantt .g-dot,
  .gantt .g-joint {
    display: none;
  }
  /* 見出し行: 「プロジェクト」と年だけ（所属・役割・期間は 2 行目にあるので見出しは省く） */
  .gantt-head {
    grid-template-areas: "graph title title track";
  }
  /* 棒の欄は狭いので、年は最初と最後だけ・縦線は 5 年ごとだけ */
  .gantt-head .year-label:not(:first-of-type):not(:last-of-type),
  .track .grid-line:not(.major) {
    display: none;
  }
  .gantt-head > :nth-child(3),
  .gantt-head > :nth-child(4),
  .gantt-head > :nth-child(5) {
    display: none;
  }
}

/* ===== 印刷（A4 横） ===== */
@page {
  size: A4 landscape;
  margin: 8mm;
}
@media print {
  body {
    background: #fff;
    padding: 0;
    font-size: 11px;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #lang-buttons,
  .chart-limit {
    display: none;
  }
  .dashboard {
    max-width: none;
    box-shadow: none;
    border-radius: 0;
  }
  .summary {
    break-before: page;
    margin-top: 0;
    padding-top: 4px;
  }
  .chart-card {
    break-inside: avoid;
  }

  /* 1 ページ目（ヘッダー・KPI・タイムライン）を A4 横 1 枚に収める */
  .dash-header {
    padding: 10px 16px 8px;
  }
  .dash-header h1 {
    font-size: 19px;
  }
  .dash-body {
    padding: 10px 16px 0;
  }
  .kpis {
    gap: 8px;
    margin-bottom: 10px;
  }
  .kpi {
    padding: 6px 10px 8px;
  }
  .kpi .value {
    font-size: 20px;
  }
  .chips {
    margin-top: 4px;
  }
  .chip {
    font-size: 11px;
    padding: 1px 8px;
  }
  .gantt-row,
  .track {
    min-height: 0;
    height: 15.5px;
  }
  .gantt-head,
  .gantt-head .track {
    height: 20px;
  }
  .gantt .title {
    font-size: 10px;
  }
  .gantt .role,
  .gantt .affiliation,
  .gantt .period,
  .gantt .tech {
    font-size: 9.5px;
  }
  .track .bar {
    top: 3px;
    height: 9.5px;
  }
  .track .bar.ongoing::after {
    border-left-width: 5px;
    border-top-width: 4.75px;
    border-bottom-width: 4.75px;
    right: -5px;
  }
  .bar-row {
    margin: 2px 0;
  }
}

/* ===== 画面移動ボタン（assets/js/page_nav.js） ===== */
.page-nav {
  display: flex;
  gap: 8px;
  margin-right: auto; /* 左寄せ（言語ボタンは右） */
}
.page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--navy);
  border-radius: 6px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
}
.page-nav-icon {
  flex: none;
}

/* ロゴ（トップページへのリンク。assets/js/page_nav.js・トップページのロゴと同じ見た目） */
.page-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 24px; /* 画面移動のボタンと間をあける */
  color: var(--navy);
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
}
.page-nav-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #0d9488;
  display: grid;
  place-items: center;
}
.page-nav-brand:hover .page-nav-brand-name {
  text-decoration: underline;
}
/* スマホの画面上部（☰ メニュー）は assets/css/nav_mobile.css */
.page-nav-btn:hover {
  background: #eef2f7;
}

/* 今いる画面のボタン（タブの選択中）: 塗りつぶし・押せない */
.page-nav-btn.current {
  background: var(--navy);
  color: #fff;
  cursor: default;
  pointer-events: none;
}
@media print {
  .page-nav {
    display: none;
  }
}

/* ===== 面談用マーキング（assets/js/marks.js・ISS-01-004）: 設定欄・タイムラインの色 ===== */
.mark-panel {
  /* カードの外（画面移動ボタンの下・カードの上）に 1 行で置く */
  max-width: 1200px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.mark-pens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mark-pen {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 2px 4px 2px 2px;
  background: #fff;
}
.mark-pen.active {
  border-color: var(--mark);
  background: var(--mark-soft);
}
.mark-pen button {
  cursor: pointer;
  padding: 4px;
  border: 0;
  background: none;
}
.mark-pen button i {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mark);
}
.mark-pen input {
  width: 120px;
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
}
.mark-help {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
}
.mark-status {
  font-size: 11px;
  color: var(--muted);
}
.mark-clear {
  margin-left: auto; /* 設定欄の右端 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 10px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mark-clear:hover {
  color: #b91c1c;
  border-color: #fca5a5;
  background: #fef2f2;
}
/* 色を選んでいる間: 行を押せることが分かるように。マウスを乗せた行はごく薄い灰色（色を付けた行は自分の色のまま） */
.gantt.pen-active .gantt-item,
.gantt.pen-active .gantt-item a {
  cursor: pointer;
}
.gantt.pen-active .gantt-item:not(.marked):hover > div:not(.g-graph),
.gantt.pen-active .gantt-item:not(.marked):hover > a {
  background: #f6f7f9;
}
@media print {
  .mark-panel {
    display: none !important;
  }
}
/* マーキングした行: 行全体に色を塗る（分岐グラフの列は塗らない）。欄ごとに塗ると、欄の間のすき間がまだらになる */
.gantt .gantt-row.gantt-item.marked {
  background: linear-gradient(to right, transparent var(--graph), var(--mark-soft) var(--graph));
}
.gantt .gantt-row.gantt-item.marked > div,
.gantt .gantt-row.gantt-item.marked > a {
  background: transparent;
}
/* 横スクロールで案件名の列を左に固定しているとき（769〜900px）は、固定した列にも同じ色（透明だと棒が透ける） */
@media screen and (min-width: 769px) and (max-width: 900px) {
  .gantt .gantt-row.gantt-item.marked > :nth-child(2) {
    background: var(--mark-soft);
  }
}
.mark-dots {
  display: inline-flex;
  gap: 2px;
  margin-right: 4px;
  vertical-align: 0;
}
.mark-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.timeline-marks {
  margin: 6px 0 2px;
}
.timeline-marks b {
  color: var(--navy);
  font-size: 11px;
  margin-right: 8px;
}
.timeline-marks .mark-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 1px 4px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--mark-soft);
  color: var(--text);
  font-size: 11px;
}
.timeline-marks .mark-chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mark);
}

/* ===== グラフの件数（見出しの横） ===== */
.chart-card h3 .count {
  margin-left: 6px;
  font-weight: normal;
  color: var(--muted);
  font-size: 11px;
}