/* ========================================
   Portal Components
   style.css の Nexus Technologies テーマ（--hp-*, --auth-*）を土台に、
   FCPポータル系ページ（ログイン・引継ぎ書・人材リスト・会話ログ・
   面談記録・評価データ・個人フォルダ等）でのみ使う部品を追加する。
   ======================================== */

/* --- 認証カード（ログインフォーム） --- */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 3rem 0;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 2.25rem 2rem;
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.auth-card__logo {
  margin: 0 0 0.4rem;
  color: var(--hp-accent-light);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-card__title {
  margin: 0 0 1.6rem;
  color: var(--auth-text);
  font-size: 1.3rem;
  font-weight: 700;
}

.auth-card label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--auth-label);
  font-size: 0.8rem;
}

.auth-card input {
  width: 100%;
  height: 42px;
  margin-bottom: 1.1rem;
  padding: 0 0.85rem;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  color: var(--auth-text);
  font-size: 0.95rem;
}

.auth-card input:focus {
  outline: none;
  border-color: var(--auth-accent);
}

/* FCPログイン画面は白を基調に、ポータルのネイビー／ブルー配色へ揃える。 */
.fcp-login-page .auth-card {
  background: #fff;
  border-color: #d8e1eb;
  box-shadow: 0 14px 36px rgba(9, 47, 105, 0.14);
}

.fcp-login-page .auth-card__logo {
  color: #1768c5;
}

.fcp-login-page .auth-card__title {
  color: #092f69;
}

.fcp-login-page .auth-card label {
  color: #385878;
  font-weight: 600;
}

.fcp-login-page .auth-card input {
  color: #26374a;
  background-color: #f8fbff;
  border-color: #9fb9d5;
  caret-color: #1768c5;
}

.fcp-login-page .auth-card input::placeholder {
  color: #7b8da0;
}

.fcp-login-page .auth-card input:focus {
  border-color: #1768c5;
  box-shadow: 0 0 0 3px rgba(23, 104, 197, 0.14);
}

.fcp-login-page .auth-card input:-webkit-autofill,
.fcp-login-page .auth-card input:-webkit-autofill:hover,
.fcp-login-page .auth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: #26374a;
  box-shadow: 0 0 0 1000px #f8fbff inset;
  caret-color: #1768c5;
}

.fcp-login-page .auth-card__submit {
  background: #1768c5;
  box-shadow: 0 4px 12px rgba(23, 104, 197, 0.22);
}

.fcp-login-page .auth-card__submit:hover {
  background: #0d4f9d;
  opacity: 1;
}

.fcp-login-page .auth-card__hint {
  color: #385878;
  background: #eaf3fc;
  border: 1px solid #cfe1f4;
}

.fcp-login-page .auth-card__foot a {
  color: #1768c5;
}

.fcp-login-page .auth-card__result { color: #17623c; }
.fcp-login-page .auth-card__error { color: #b42318; }

.auth-card__submit {
  width: 100%;
  height: 44px;
  margin-top: 0.4rem;
  background: var(--auth-btn-bg);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.auth-card__submit:hover { opacity: 0.9; }

.auth-card__hint {
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--auth-hint-bg);
  border-radius: 6px;
  color: var(--auth-hint);
  font-size: 0.78rem;
  line-height: 1.6;
}

.auth-card__foot {
  margin-top: 1.4rem;
  text-align: center;
}

.auth-card__foot a {
  color: var(--hp-text-muted);
  font-size: 0.78rem;
}

.auth-card__result,
.auth-card__error {
  display: none;
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.auth-card__result { color: var(--hp-accent-green); }
.auth-card__error { color: #fb7185; }

/* --- 文書ヘッダー（引継ぎ書・評価データ等の共通ヘッダー） --- */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--hp-text-muted);
}

.doc-meta strong { color: var(--hp-text); }

.doc-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.doc-tag--internal { background: rgba(6,182,212,0.15); color: var(--hp-accent-light); }
.doc-tag--confidential { background: rgba(244,63,94,0.15); color: #fb7185; }

/* --- 付箋・メモ --- */
.sticky-note {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.1rem 1.3rem;
  background: #2a2410;
  border: 1px solid #4a3f14;
  border-left: 4px solid #f0c040;
  border-radius: 4px;
  color: #f0dfa0;
  font-size: 0.92rem;
  line-height: 1.8;
}

.sticky-note__label {
  display: block;
  margin-bottom: 0.4rem;
  color: #f0c040;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* --- 会話ログ / チャットスレッド --- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 1.5rem 0;
}

.chat-bubble {
  max-width: 78%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.7;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
}

.chat-bubble__name {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--hp-text-muted);
  font-size: 0.72rem;
}

.chat-bubble--right {
  align-self: flex-end;
  background: rgba(6,182,212,0.12);
  border-color: rgba(6,182,212,0.3);
}

.chat-bubble--flag {
  border-color: rgba(244,63,94,0.4);
}

.chat-bubble--flag .chat-bubble__name { color: #fb7185; }

/* 長い会話ログは表示幅を抑え、左右とも本文量に沿う吹き出し幅にする。 */
.chat-compact-page .article {
  width: 66.666%;
  margin-right: auto;
  margin-left: auto;
}

.chat-compact-page .chat-bubble:not(.chat-bubble--right) {
  align-self: flex-start;
  width: fit-content;
}

/* --- 黒塗り書き起こし --- */
.redacted-doc {
  padding: 1.5rem 1.75rem;
  background: #f4f1e6;
  color: #2a2a2a;
  border-radius: 6px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 0.95rem;
  line-height: 2;
}

.redacted-doc p { margin: 0 0 0.9rem; }

.redacted {
  display: inline-block;
  min-width: 2.4em;
  background: #1a1a1a;
  color: transparent;
  border-radius: 2px;
  user-select: none;
}

.redacted-doc__margin {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px dashed #b8b2a0;
  color: #b8b2a0;
  font-size: 0.85rem;
  text-align: right;
}

/* --- 評価データ（ゲージ・スコア） --- */
.eval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.eval-item {
  padding: 1.1rem 1.2rem;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 10px;
}

.eval-item__label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: var(--hp-text-muted);
}

.eval-item__label strong { color: var(--hp-text); }

.eval-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.eval-bar__fill {
  height: 100%;
  background: var(--hp-gradient);
  border-radius: 4px;
}

.eval-note {
  margin-top: 0.35rem;
  color: var(--hp-text-muted);
  font-size: 0.78rem;
}

/* --- 未送信メール下書き --- */
.mail-draft {
  padding: 1.3rem 1.5rem;
  background: var(--hp-surface);
  border: 1px solid var(--hp-border);
  border-radius: 10px;
}

.mail-draft__row {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--hp-border);
  font-size: 0.85rem;
}

.mail-draft__row span:first-child {
  width: 3.5em;
  flex-shrink: 0;
  color: var(--hp-text-muted);
}

.mail-draft__body {
  margin-top: 1rem;
  padding-top: 1rem;
  white-space: pre-line;
  line-height: 1.9;
  font-size: 0.92rem;
}

.folder-list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.folder-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-text-muted);
  font-size: 0.85rem;
}

.folder-list li.is-open { color: var(--hp-accent-light); font-weight: 400; }

/* --- キーワード入力フォーム --- */
.keyword-form {
  max-width: 420px;
  margin: 2rem auto;
  text-align: center;
}

.keyword-form input {
  width: 100%;
  height: 48px;
  margin: 1rem 0;
  padding: 0 1rem;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  color: var(--auth-text);
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.1em;
}

.keyword-form input:focus { outline: none; border-color: var(--auth-accent); }

/* ========================================
   FCP Portal 2026 — corporate intranet theme
   tmp/FCPポータルデザイン案.png を基準にした上書き。
   YACHO共通の検索UI・ページカウンターは構造を変えずに使用する。
   ======================================== */
:root {
  --fcp-navy: #092f69;
  --fcp-blue: #1768c5;
  --fcp-blue-dark: #0d4f9d;
  --fcp-blue-soft: #eaf3fc;
  --fcp-canvas: #f3f6fa;
  --fcp-panel: #ffffff;
  --fcp-line: #d8e1eb;
  --fcp-text: #26374a;
  --fcp-muted: #6d7d8f;
}

body {
  min-width: 0;
  background: var(--fcp-canvas);
  color: var(--fcp-text);
  font-family: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", sans-serif;
}

body.tsugite-portal-page {
  --fcp-navy: #153e37;
  --fcp-blue: #2b7567;
  --fcp-blue-dark: #205d52;
  --fcp-blue-soft: #e8f4f1;
}
body.tsugite-portal-page .top-nav::before { content: "TSUGITE  |  業務ポータル"; }

.top-nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 64px;
  box-sizing: border-box;
  justify-content: center;
  padding: 0 150px 0 250px;
  background: var(--fcp-navy);
  border: 0;
  box-shadow: 0 2px 8px rgba(4, 33, 73, 0.18);
  z-index: 100;
}

.top-nav::before {
  content: "FCP  |  社内ポータル";
  position: absolute;
  left: 28px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.top-nav__search { width: min(560px, 52vw); gap: 0; }
.top-nav__search input {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid #cbd7e5;
  border-radius: 5px 0 0 5px;
  color: var(--fcp-text);
}
.top-nav__search input::placeholder { color: #8795a5; }
.top-nav__search button {
  height: 38px;
  padding: 0 17px;
  background: var(--fcp-blue);
  border-color: #5d9bdd;
  border-radius: 0 5px 5px 0;
  font-weight: 700;
}
.top-nav__search button:hover { background: #2b7dd1; border-color: #7ab0e6; }

.site-container {
  width: auto;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 64px 0 0 224px;
}

.site-header {
  position: fixed;
  z-index: 110;
  inset: 64px auto 0 0;
  width: 224px;
  box-sizing: border-box;
  display: block;
  padding: 28px 18px;
  background: #fff;
  border-right: 1px solid var(--fcp-line);
  box-shadow: 2px 0 10px rgba(39, 66, 94, .04);
}

.site-header::after {
  content: "メインメニュー\A  ダッシュボード\A  人材管理システム\A  企業管理\A  面談・選考管理\A  レポート\A\A システム\A  設定\A  ヘルプ";
  display: block;
  margin-top: 18px;
  padding: 12px 10px;
  white-space: pre-line;
  color: #53677d;
  font-size: .82rem;
  line-height: 2.75;
  border-top: 1px solid #edf1f5;
}

.site-title {
  display: block;
  color: var(--fcp-navy);
  font-size: 1.12rem;
  letter-spacing: .02em;
}
.site-title:hover { color: var(--fcp-blue); }

.portal-side-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #edf1f5;
}

.portal-side-nav__label {
  margin: 0 10px 6px;
  color: #7a8999;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.portal-side-nav__link {
  display: block;
  padding: 8px 10px;
  color: #385878;
  border-radius: 4px;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}

.portal-side-nav__link:hover,
.portal-side-nav__link:focus-visible {
  color: var(--fcp-blue-dark);
  background: var(--fcp-blue-soft);
  text-decoration: none;
}

.header-nav {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: 120;
}
.header-nav__link,
.header-nav__link:hover {
  padding: 7px 12px;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 5px;
  text-decoration: none;
}

.content {
  width: min(1180px, calc(100vw - 274px));
  margin: 0 auto;
  padding: 34px 26px 10px;
  box-sizing: border-box;
}

.article,
.article-body {
  width: 100%;
}

.article {
  background: var(--fcp-panel);
  border: 1px solid var(--fcp-line);
  border-radius: 5px;
  box-shadow: 0 2px 9px rgba(32, 64, 96, .06);
}
.article-body { box-sizing: border-box; padding: 30px 34px; }
.section { margin: 0 0 2.25rem; }
.section__title {
  margin: 0 0 1.25rem;
  padding: 0 0 .8rem;
  color: #173b68;
  font-size: 1.45rem;
  border-bottom: 1px solid var(--fcp-line);
}

.doc-meta {
  margin: 0 0 1.4rem;
  padding: .7rem 0;
  gap: .5rem 2rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  border-radius: 0;
  color: var(--fcp-muted);
}
.doc-meta strong { color: var(--fcp-text); }
.doc-tag { border-radius: 999px; }
.doc-tag--internal { background: #e8f3ff; color: #1764b2; }
.doc-tag--confidential { background: #fff0e8; color: #a74a20; }

.info-table {
  margin: 1.25rem 0;
  border: 1px solid #cbd9e7;
  font-size: .86rem;
}
.info-table th,
.info-table td {
  padding: .72rem .85rem;
  border: 1px solid #d8e3ee;
  vertical-align: middle;
}
.info-table th {
  width: auto;
  background: #dbeaf9;
  color: #173f70;
  font-weight: 700;
  white-space: nowrap;
}
.info-table td { background: #fff; color: var(--fcp-text); }
.info-table tbody tr:nth-child(even) td { background: #f8fbfe; }
.info-table tbody tr:hover td { background: #edf6ff; }

.evaluation-subject {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin: 0 0 1rem;
  color: var(--fcp-text);
}

.info-table th.evaluation-warning,
.info-table td.evaluation-warning {
  color: #b42318;
  font-weight: 800;
}

.status-pill {
  display: inline-block;
  min-width: 5.5em;
  padding: .18rem .55rem;
  text-align: center;
  color: #17623c;
  background: #e5f6ed;
  border: 1px solid #bde6cf;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.status-pill--pending { color: #8a5a13; background: #fff7dd; border-color: #efd997; }
.status-pill--active { color: #155b98; background: #e7f2fd; border-color: #bad8f3; }

.sticky-note {
  background: #fff8d9;
  border: 1px solid #eadb91;
  border-left: 4px solid #d5b33d;
  color: #574d26;
  box-shadow: none;
}
.sticky-note__label { color: #7b6720; }

.sticky-note--corner {
  position: fixed;
  right: 26px;
  bottom: 58px;
  z-index: 60;
  width: 220px;
  box-sizing: border-box;
  margin: 0;
  transform: rotate(-1.5deg);
  box-shadow: 0 8px 22px rgba(60, 53, 21, .18);
  font-family: "Yu Gothic", sans-serif;
}

.chat-bubble,
.eval-item,
.mail-draft {
  background: #fff;
  border-color: var(--fcp-line);
  color: var(--fcp-text);
  box-shadow: 0 1px 4px rgba(35, 63, 92, .04);
}
.chat-bubble__name,
.eval-note,
.card__desc,
.mail-draft__row span:first-child { color: var(--fcp-muted); }
.chat-bubble--right { background: #eaf4ff; border-color: #bfd9f2; }
.chat-date {
  align-self: center;
  margin: 1rem 0 .2rem;
  padding: .2rem .8rem;
  color: var(--fcp-muted);
  background: #e8edf3;
  border-radius: 999px;
  font-size: .74rem;
}
.eval-item__label { color: var(--fcp-muted); }
.eval-item__label strong { color: var(--fcp-text); }
.eval-bar { background: #e4ebf2; }
.eval-bar__fill { background: var(--fcp-blue); }
.nav-link { border-color: var(--fcp-blue); color: var(--fcp-blue); }
.nav-link--primary { background: var(--fcp-blue); color: #fff; }

.site-footer {
  margin: 36px 0 0;
  padding: 22px 32px;
  background: #fff;
  border-top: 1px solid var(--fcp-line);
  color: var(--fcp-muted);
}

.personnel-sheet .section__title { margin-bottom: .45rem; }
.personnel-sheet__revision {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .18rem .55rem;
  color: #1764b2;
  background: #e8f3ff;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.personnel-sheet__note {
  margin: 1rem 0;
  padding: .85rem 1rem;
  color: #385878;
  background: var(--fcp-blue-soft);
  border-left: 4px solid var(--fcp-blue);
  font-size: .84rem;
}

@media (max-width: 820px) {
  .top-nav { height: auto; min-height: 64px; padding: 12px 92px 12px 16px; justify-content: flex-start; }
  .top-nav::before { display: none; }
  .top-nav__search { width: 100%; }
  .site-container { padding-left: 0; }
  .site-header { position: static; width: auto; margin-top: 64px; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--fcp-line); }
  .site-header::after { display: none; }
  .portal-side-nav { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 12px; }
  .portal-side-nav__label { width: 100%; margin-bottom: 2px; }
  .content { width: 100%; padding: 20px 14px; }
  .article-body { padding: 22px 18px; overflow-x: auto; }
  .header-nav { top: 14px; right: 10px; }
  .info-table { min-width: 620px; }
  .sticky-note--corner { position: static; width: min(100%, 280px); margin: 1.5rem 0 0 auto; }
  .chat-compact-page .article { width: 100%; }
}