/* ============================================================
   base.css — 変数・リセット・共通トークン
   ヘッダー/ツールバー/ボタン/バッジ/汎用入力/モーダル/タブ/footerBarなど、
   複数タブ(features)から共有される見た目をここに集約する。
   個々のタブ専用の見た目は board.css / taskList.css / hearingResults.css / memberBoard.css を見る。
   ============================================================ */
:root{
  --paper:#F6F4EE;
  --panel:#FFFFFF;
  --ink:#22252A;
  --muted:#75797F;
  --line:#E4E0D6;
  --board:#161B22;
  --board-grid:#232A34;
  --node-team:#2C3440;
  --node-task:#3A4356;
  --node-border:#4E5A70;
  --amber:#C1892E;   /* 依存 */
  --teal:#2E8577;    /* 連携 */
  --violet:#6E6ADB;  /* 参考 */
  --danger:#B5453A;
  --ok:#3E8E5B;
  --wait:#9A9A9A;
  --font-ui: "Hiragino Sans","Noto Sans JP","Yu Gothic UI",sans-serif;
  --font-mono: "JetBrains Mono","SF Mono",Menlo,monospace;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font-ui);background:var(--paper);color:var(--ink);}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);
}
header .brand{display:flex;align-items:baseline;gap:10px;}
header .brand .mark{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);padding:2px 6px;border-radius:3px;}
header h1{font-size:16px;margin:0;font-weight:700;letter-spacing:.02em;}
header .sub{font-size:11px;color:var(--muted);font-family:var(--font-mono);}
.toolbar{display:flex;gap:8px;align-items:center;}
.activeUserWrap{display:flex;align-items:center;gap:6px;padding-right:10px;margin-right:4px;border-right:1px solid var(--line);}
.activeUserWrap label{font-size:11px;color:var(--muted);font-family:var(--font-mono);white-space:nowrap;}
button{
  font-family:var(--font-ui);font-size:12.5px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);padding:7px 12px;border-radius:6px;cursor:pointer;transition:.12s;
}
button:hover{border-color:var(--ink);}
button.primary{background:var(--ink);color:#fff;border-color:var(--ink);}
button.primary:hover{opacity:.85;}
button.ghost{border-color:transparent;color:var(--muted);}
button.danger{color:var(--danger);border-color:var(--danger);background:#fff;}
button.small{padding:3px 8px;font-size:11px;}
button:disabled, input:disabled, select:disabled, textarea:disabled{
  opacity:.45;cursor:not-allowed;
}
.leaderBadge{
  display:inline-block;font-size:9px;color:#fff;background:var(--amber);border-radius:3px;
  padding:0 4px;margin-left:4px;font-family:var(--font-mono);vertical-align:middle;
}
/* 班長より上位の全体管理者バッジ。班長(amber)と区別するため別色にする */
.adminBadge{
  display:inline-block;font-size:9px;color:#fff;background:var(--violet);border-radius:3px;
  padding:0 4px;margin-left:4px;font-family:var(--font-mono);vertical-align:middle;
}
.permNote{
  font-size:10.5px;color:var(--muted);background:#F3F0E7;border:1px solid var(--line);
  border-radius:6px;padding:6px 8px;margin:8px 0;
}
select,input[type=text],textarea,input[type=date]{
  font-family:var(--font-ui);font-size:12.5px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:#fff;color:var(--ink);
}

/* 班の配下に子(タスク/メンバー)がぶら下がる表示の開閉矢印。ツリーパネル・タスク一覧・メンバー管理いずれからも
   同じ見た目で使う共通クラス(元は taskList.js の teamHeadRow 限定だったが汎用化した)。 */
.teamToggleArrow{display:inline-block;width:12px;font-size:9px;color:var(--muted);margin-right:2px;}

/* 「＋◯◯ (Enter)」形式の追加入力行。ツリーパネル・タスク一覧のサイドパネル・メンバー管理いずれからも使う */
.addTaskLine{margin-top:4px;}
.addTaskLine input{width:60%;}

/* サイドパネル/各種モーダルの「子要素リスト」表示(メンバー一覧・直下タスク・属性項目・稼働履歴等で共通利用) */
.childList{margin-top:6px;border-top:1px solid var(--line);padding-top:8px;}
.childItem{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12px;border-bottom:1px dashed var(--line);}
.childItem .st{width:7px;height:7px;border-radius:50%;flex:none;}
.childItem span{flex:1;}

/* ---- モーダル共通(連結詳細・Status管理・課題追加・属性項目管理・稼働登録などで共有) ---- */
.modalMask{position:fixed;inset:0;background:rgba(15,18,24,.45);z-index:60;display:none;align-items:center;justify-content:center;}
.modalMask.open{display:flex;}
.modalBox{background:#fff;border-radius:10px;padding:20px;width:340px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.modalBox h3{margin:0 0 10px;font-size:14px;}
.modalBox label{display:block;font-size:10.5px;color:var(--muted);margin:10px 0 4px;font-family:var(--font-mono);}
.modalBox select,.modalBox textarea{width:100%;}
.modalBox textarea{height:60px;}
.modalActions{display:flex;justify-content:space-between;margin-top:14px;}
/* 入力項目数が多いモーダル(ヒアリング結果の追加等)用の幅広・縦スクロール可変種 */
.modalBox.wide{width:440px;max-height:85vh;overflow-y:auto;}
.modalBox .fieldRow{display:flex;gap:10px;}
.modalBox .fieldRow > div{flex:1;min-width:0;}
.modalBox .requiredMark{color:var(--danger);font-weight:700;}
.modalBox .modalError{color:var(--danger);font-size:11px;margin-top:8px;display:none;}

.footerBar{padding:6px 22px;font-size:10.5px;color:var(--muted);font-family:var(--font-mono);background:var(--panel);border-top:1px solid var(--line);}

/* ---- Tabs ---- */
.viewTabs{display:flex;gap:4px;padding:8px 22px 0;background:var(--panel);}
.viewTabs button{border-radius:6px 6px 0 0;border-bottom:none;background:#EFECE3;color:var(--muted);}
.viewTabs button.active{background:var(--board);color:#fff;border-color:var(--board);}
.hidden{display:none;}

/* ---- タブ共通の表側パネル背景(タスク一覧/ヒアリング結果/メンバー管理) ---- */
#listView,#issuesView,#memberBoardView{background:var(--panel);padding:14px 22px;}

/* ---- 一覧系タブのツールバー・詳細フィルターパネル・横スクロールラッパー(共通) ---- */
.listToolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.listToolbar .label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);margin-right:6px;}
.filterPanel{
  display:none;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 10px;margin-bottom:10px;
  background:#FBFAF6;border:1px solid var(--line);border-radius:8px;
}
.filterPanel.open{display:flex;}
.filterPanel .fitem{display:flex;align-items:center;gap:6px;}
.filterPanel label{font-size:11px;color:var(--muted);}
.filterPanel .chk{display:flex;align-items:center;gap:3px;margin-right:8px;font-size:11.5px;color:var(--ink);}
.filterPanel input[type=text],.filterPanel input[type=number],.filterPanel select{width:auto;}
.glWrap{
  border:1px solid var(--line);border-radius:8px;
  overflow:auto;max-height:460px;
}

/* ---- ガントヘッダー(月/日の2段見出し)の共通レイアウト。
   タスク一覧の統合ガント(taskList.css)と、メンバー管理の稼働カレンダー(memberBoard.css)の両方から
   同じクラス名で参照される(稼働カレンダーはこのヘッダー部分だけを流用し、日毎セルは別実装)。 ---- */
.ganttHeadInner{position:relative;}
.ganttHeadMonthsRow,.ganttHeadDaysRow{display:flex;}
.ganttHeadMonth,.ganttHeadDay{
  background:#FBFAF6;font-family:var(--font-mono);font-size:10px;color:var(--muted);
  text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:none;
}
.ganttHeadMonth{height:16px;}
.ganttHeadDay{height:17px;}

/* ---- 簡易パスワードゲート ---- */
/* display:flexを#authGate自体には付けず:not(.hidden)に付ける。IDセレクタにdisplay:flexを直接書くと、
   .hiddenクラス(display:none)より詳細度で勝ってしまい、hiddenクラスを付けても非表示にならないバグになる。 */
#authGate{
  position:fixed;inset:0;z-index:999;background:var(--board);
}
#authGate:not(.hidden){display:flex;align-items:center;justify-content:center;}
#authGateForm{
  background:var(--panel);border-radius:10px;padding:28px 30px;width:280px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:center;
}
#authGateForm h2{font-size:15px;margin:0 0 16px;letter-spacing:.04em;}
#authGateForm label{display:block;font-size:10.5px;color:var(--muted);margin-bottom:6px;font-family:var(--font-mono);text-align:left;}
#authGateForm input[type=password]{width:100%;margin-bottom:12px;}
#authGateForm button{width:100%;}
.authGateError{color:var(--danger);font-size:11px;margin-top:8px;min-height:14px;}