/* ============ タレントマネジメントアプリ ============ */
:root{
  --bg:#f4f3fb;
  --card:#ffffff;
  --ink:#28243d;
  --muted:#6f6b85;
  --line:#e3e0f0;
  --accent:#5b4dbe;
  --accent-dark:#463a9e;
  --accent-soft:#eceafb;
  --danger:#b03a2e;
  --ok:#2e7d5b;
  --shadow:0 2px 10px rgba(70,58,158,.08);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.6;
}

/* ---------- ローディング ---------- */
#loading-overlay{
  position:fixed; inset:0; background:rgba(244,243,251,.85);
  display:flex; align-items:center; justify-content:center; z-index:200;
}
.loading-box{ text-align:center; color:var(--muted); }
.spinner{
  width:38px; height:38px; margin:0 auto 10px;
  border:4px solid var(--accent-soft); border-top-color:var(--accent);
  border-radius:50%; animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- ログイン ---------- */
#login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(135deg,#efedfa 0%,#f8f6ff 60%,#eef4fb 100%);
}
.login-card{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:34px 30px; width:100%; max-width:400px; box-shadow:var(--shadow); text-align:center;
}
.login-logo{ font-size:40px; }
.login-card h1{ margin:6px 0 4px; font-size:22px; }
.login-sub{ color:var(--muted); font-size:13px; margin:0 0 18px; }
.field-label{ display:block; text-align:left; font-size:12px; color:var(--muted); margin:10px 0 4px; }
.login-card input{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  font-size:15px; background:#fbfaff;
}
.login-card input:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.login-error{ color:var(--danger); font-size:13px; min-height:20px; margin-top:8px; }
#login-btn{
  width:100%; margin-top:6px; padding:11px; border:none; border-radius:9px;
  background:var(--accent); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
}
#login-btn:hover{ background:var(--accent-dark); }
#login-btn:disabled{ opacity:.6; cursor:default; }

/* ---------- ヘッダー ---------- */
.app-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 22px; background:linear-gradient(120deg,var(--accent-dark),var(--accent));
  color:#fff;
}
.header-title{ display:flex; align-items:center; gap:12px; }
.header-logo{ font-size:30px; }
.app-header h1{ margin:0; font-size:19px; }
.header-sub{ font-size:12px; opacity:.85; }
.header-user{ display:flex; align-items:center; gap:10px; font-size:13px; flex-wrap:wrap; }
.role-badge{
  background:rgba(255,255,255,.2); border-radius:999px; padding:2px 10px; font-size:12px;
}
.ghost-btn{
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4); color:#fff;
  border-radius:8px; padding:6px 12px; font-size:13px; cursor:pointer;
}
.ghost-btn:hover{ background:rgba(255,255,255,.26); }

main{ max-width:1180px; margin:0 auto; padding:20px 18px 40px; }

/* ---------- サマリーカード ---------- */
.summary-cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:16px;
}
.sum-card{
  background:var(--card); border:1px solid var(--line); border-radius:13px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.sum-card .num{ font-size:26px; font-weight:800; color:var(--accent-dark); }
.sum-card .lbl{ font-size:12px; color:var(--muted); }

/* ---------- 画面切替タブ ---------- */
.view-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.view-tab{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:10px; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow);
}
.view-tab:hover{ border-color:var(--accent); }
.view-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- ダッシュボード ---------- */
.dash-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:14px; align-items:start;
}
.dash-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px 18px; box-shadow:var(--shadow);
}
.dash-card h3{
  margin:0 0 12px; font-size:15px; color:var(--accent-dark);
  padding-bottom:6px; border-bottom:2px solid var(--accent-soft);
}
.muted-txt{ color:var(--muted); font-size:13px; }
.dash-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dash-table th{ text-align:left; color:var(--muted); font-weight:600; font-size:11px; padding:0 8px 6px; }
.dash-table td{ padding:6px 8px; border-top:1px solid var(--line); vertical-align:middle; }
.dt-name{ font-weight:700; }
.cell-bar{ display:flex; align-items:center; gap:8px; }
.cell-bar span{ font-size:12px; font-weight:700; min-width:34px; }

/* バー(共通) */
.bar-track{ flex:1; min-width:60px; height:9px; background:var(--accent-soft); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--accent); border-radius:999px; }
.bar-fill.amber{ background:#e8a13a; }
.bar-fill.green{ background:#3a9d6e; }
.bar-fill.blue{ background:#4a86c7; }
.bar-fill.red{ background:#cc5545; }
.bar-fill.grey{ background:#b8b4c9; }
.bar-fill.purple{ background:var(--accent); }

.dist-list{ display:flex; flex-direction:column; gap:9px; }
.dist-row{ display:flex; align-items:center; gap:10px; }
.dist-label{ font-size:13px; width:130px; flex-shrink:0; }
.dist-count{ font-size:12px; font-weight:700; min-width:38px; text-align:right; color:var(--muted); }

.follow-list{ display:flex; flex-wrap:wrap; gap:8px; }
.follow-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #f0c9c0; background:#fdf2f0; color:var(--ink);
  border-radius:999px; padding:5px 6px 5px 13px; font-size:13px; cursor:pointer;
}
.follow-chip:hover{ border-color:var(--danger); }
.fc-dept{ color:var(--muted); font-size:11px; }
.fc-score{
  background:var(--danger); color:#fff; border-radius:999px; padding:1px 9px;
  font-size:12px; font-weight:700;
}

/* ダッシュボード管理者バー & テンプレート編集 */
.dash-admin-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.tpl-open-btn{
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:9px; padding:8px 16px; font-size:14px; font-weight:700; cursor:pointer;
}
.tpl-open-btn:hover{ background:var(--accent-dark); }
.dash-admin-hint{ color:var(--muted); font-size:12px; }
.tpl-tag{
  background:var(--accent-soft); color:var(--accent-dark); border-radius:999px;
  padding:1px 10px; font-size:11px; font-weight:700; margin-left:8px; vertical-align:middle;
}
.tpl-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.tpl-item{ display:flex; align-items:center; gap:8px; }
.tpl-item-fields{ flex:1; display:flex; gap:8px; }
.tpl-item-fields input{
  flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px; background:#fbfaff;
}
.tpl-item-fields input:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.tpl-del{
  border:none; background:var(--accent-soft); color:var(--danger); width:30px; height:30px;
  border-radius:7px; cursor:pointer; font-size:13px; flex-shrink:0;
}
.tpl-del:hover{ background:#f5d9d3; }
.tpl-add-btn{
  border:1px dashed var(--accent); background:#fff; color:var(--accent-dark);
  border-radius:8px; padding:8px 14px; font-size:13px; font-weight:700; cursor:pointer;
}
.tpl-add-btn:hover{ background:var(--accent-soft); }

/* ---------- 組織ツリー ---------- */
.tree-note{ color:var(--muted); font-size:13px; margin:0 0 14px; }
.tree-node{ margin:6px 0; }
.tree-card{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:11px;
  padding:8px 14px 8px 8px; box-shadow:var(--shadow); cursor:pointer;
  transition:box-shadow .12s;
}
.tree-card:hover{ box-shadow:0 5px 14px rgba(70,58,158,.18); }
.tree-toggle{
  border:none; background:var(--accent-soft); color:var(--accent-dark);
  width:24px; height:24px; border-radius:6px; cursor:pointer; font-size:10px; flex-shrink:0;
}
.tree-node.closed > .tree-card .tree-toggle{ transform:rotate(-90deg); }
.tree-toggle-spacer{ width:24px; flex-shrink:0; }
.tn-photo, .tn-photo-none{
  width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--accent-soft); flex-shrink:0;
}
.tn-photo-none{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:17px;
}
.tn-name{ font-weight:800; font-size:14px; line-height:1.3; }
.tn-meta{ font-size:11px; color:var(--muted); }
.tn-count{
  background:var(--accent-soft); color:var(--accent-dark); border-radius:999px;
  padding:1px 9px; font-size:12px; font-weight:700; margin-left:4px;
}
.tree-children{
  margin-left:19px; padding-left:18px; border-left:2px solid var(--line);
}
.tree-node.closed > .tree-children{ display:none; }
.unassigned-heading{ font-size:14px; color:var(--muted); margin:22px 0 8px; }
.unassigned-list{ display:flex; flex-wrap:wrap; gap:8px; }
.unassigned-chip{
  border:1px dashed var(--line); background:var(--card); border-radius:999px;
  padding:5px 13px; font-size:13px; cursor:pointer; color:var(--ink);
}
.unassigned-chip:hover{ border-color:var(--accent); }
.uc-dept{ color:var(--muted); font-size:11px; margin-left:5px; }

/* ---------- ツールバー ---------- */
.toolbar{ margin-bottom:16px; }
#search-box{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; background:var(--card); box-shadow:var(--shadow);
}
#search-box:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.dept-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.dept-chip{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:999px; padding:5px 13px; font-size:13px; cursor:pointer;
}
.dept-chip:hover{ border-color:var(--accent); }
.dept-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.dept-chip .cnt{ opacity:.65; font-size:12px; margin-left:3px; }

/* ---------- 人材カード一覧 ---------- */
.talent-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;
}
.talent-card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:16px; box-shadow:var(--shadow); cursor:pointer; transition:transform .12s, box-shadow .12s;
  display:flex; flex-direction:column; gap:8px;
}
.talent-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(70,58,158,.16); }
.tc-top{ display:flex; align-items:center; gap:12px; }
.tc-photo, .tc-photo-none{
  width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid var(--accent-soft);
}
.tc-photo-none{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:24px;
}
.tc-name{ font-weight:800; font-size:15px; }
.tc-kana{ font-size:11px; color:var(--muted); }
.tc-meta{ font-size:12px; color:var(--muted); }
.tc-tags{ display:flex; flex-wrap:wrap; gap:5px; min-height:22px; }
.skill-tag{
  background:var(--accent-soft); color:var(--accent-dark); border-radius:6px;
  padding:1px 8px; font-size:12px;
}
.skill-tag.more{ background:transparent; color:var(--muted); }
.tc-empty-note{ font-size:12px; color:#b8b4c9; }
.grid-empty{
  text-align:center; color:var(--muted); padding:40px 0; background:var(--card);
  border:1px dashed var(--line); border-radius:14px;
}

/* ---------- モーダル ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(40,36,61,.45); z-index:100;
  display:flex; align-items:flex-start; justify-content:center; padding:30px 14px; overflow:auto;
}
.modal{
  background:var(--card); border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.25);
  width:100%; max-width:760px; padding:26px 26px 22px; position:relative;
}
.modal-close{
  position:absolute; top:12px; right:12px; border:none; background:var(--accent-soft);
  color:var(--accent-dark); width:32px; height:32px; border-radius:50%; font-size:15px; cursor:pointer;
}
.modal-close:hover{ background:var(--line); }
.profile-head{ display:flex; align-items:center; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.ph-photo, .ph-photo-none{
  width:76px; height:76px; border-radius:50%; object-fit:cover; border:3px solid var(--accent-soft);
}
.ph-photo-none{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); font-size:34px;
}
.profile-head h2{ margin:0; font-size:20px; }
.ph-sub{ color:var(--muted); font-size:13px; }
.basic-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 14px;
  background:#f8f7fd; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:12px 0 16px;
}
.bg-item .k{ font-size:11px; color:var(--muted); }
.bg-item .v{ font-size:14px; font-weight:600; }
.profile-form h3{
  font-size:14px; color:var(--accent-dark); margin:16px 0 8px; padding-bottom:4px;
  border-bottom:2px solid var(--accent-soft);
}
.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pf-field{ display:flex; flex-direction:column; }
.pf-field.wide{ grid-column:1 / -1; }
.pf-field label{ font-size:12px; color:var(--muted); margin-bottom:3px; }
.pf-field input, .pf-field textarea, .pf-field select{
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:14px;
  font-family:inherit; background:#fbfaff;
}
.pf-field textarea{ min-height:64px; resize:vertical; }
.pf-field input:focus, .pf-field textarea:focus, .pf-field select:focus{
  outline:2px solid var(--accent-soft); border-color:var(--accent);
}
.pf-hint{ font-size:11px; color:#b8b4c9; margin-top:2px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; align-items:center; }
.updated-note{ margin-right:auto; font-size:11px; color:var(--muted); }
.save-btn{
  background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:10px 26px; font-size:15px; font-weight:700; cursor:pointer;
}
.save-btn:hover{ background:var(--accent-dark); }
.save-btn:disabled{ opacity:.6; cursor:default; }
.cancel-btn{
  background:#fff; color:var(--muted); border:1px solid var(--line); border-radius:9px;
  padding:10px 18px; font-size:14px; cursor:pointer;
}

.save-btn.secondary{ background:#fff; color:var(--accent-dark); border:1px solid var(--accent); }
.save-btn.secondary:hover{ background:var(--accent-soft); }

/* viewerは編集不可 */
body.role-viewer .save-btn{ display:none; }
body.role-viewer .mini-add-btn, body.role-viewer .delete-link{ display:none; }

/* ---------- 人材カードの評価バッジ ---------- */
.tc-eval-wrap{ margin-left:auto; }
.tc-eval{
  background:#fff4e0; color:#b26a00; border:1px solid #f0d9a8;
  border-radius:999px; padding:2px 9px; font-size:12px; font-weight:700; white-space:nowrap;
}

/* ---------- プロフィール内の評価一覧 ---------- */
.mini-add-btn{
  float:right; border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:7px; padding:3px 11px; font-size:12px; font-weight:700; cursor:pointer;
}
.mini-add-btn:hover{ background:var(--accent-dark); }
.eval-list{ display:flex; flex-direction:column; gap:8px; }
.eval-empty{ color:var(--muted); font-size:13px; }
.eval-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#f8f7fd; border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; cursor:pointer; text-align:left; width:100%; font-size:13px;
}
.eval-row:hover{ border-color:var(--accent); }
.eval-period{ font-weight:800; font-size:14px; }
.eval-status{ border-radius:999px; padding:1px 9px; font-size:11px; font-weight:700; }
.eval-status.draft{ background:#eee; color:#777; }
.eval-status.finalized{ background:#e0f2e9; color:var(--ok); }
.eval-avg{ color:var(--accent-dark); font-weight:700; }
.eval-date{ margin-left:auto; color:var(--muted); font-size:12px; }

/* ---------- 評価フォーム ---------- */
.back-link{
  border:none; background:none; color:var(--accent); cursor:pointer; font-size:13px;
  padding:0 0 8px; font-weight:700;
}
.back-link:hover{ text-decoration:underline; }
.eval-locked-note{
  background:#fff4e0; border:1px solid #f0d9a8; color:#8a5b00; border-radius:9px;
  padding:8px 12px; font-size:13px; margin:6px 0;
}
.eval-items{ display:flex; flex-direction:column; gap:10px; }
.eval-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; background:#fbfaff;
}
.ei-name{ font-weight:700; font-size:14px; }
.ei-desc{ font-size:11px; color:var(--muted); }
.rate-group{ display:flex; gap:6px; }
.rate-btn{
  width:38px; height:38px; border:1px solid var(--line); background:#fff; color:var(--ink);
  border-radius:8px; font-size:15px; font-weight:700; cursor:pointer;
}
.rate-btn:hover{ border-color:var(--accent); }
.rate-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rate-btn:disabled{ cursor:default; opacity:.7; }
.eval-average-box{
  margin:14px 0 6px; text-align:right; font-size:14px; color:var(--muted);
}
#ev-average{ font-size:20px; font-weight:800; color:var(--accent-dark); }
.delete-link{
  margin-right:auto; border:none; background:none; color:var(--danger); cursor:pointer;
  font-size:13px; font-weight:700;
}
.delete-link:hover{ text-decoration:underline; }

/* ---------- トースト ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:#fff; border-radius:10px; padding:10px 20px;
  font-size:14px; z-index:300; box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.toast.err{ background:var(--danger); }

.app-footer{
  max-width:1180px; margin:0 auto; padding:0 18px 30px; color:var(--muted); font-size:12px;
}

@media (max-width:560px){
  .pf-grid{ grid-template-columns:1fr; }
  .modal{ padding:20px 16px; }
}