/* ==========================================================================
   ISSHO Architects Schedule Board — 見た目の定義
   --------------------------------------------------------------------------
   配色・文字サイズ・余白など、見た目に関わるものはすべてこのファイルにあります。
   色を変えたい / バーを太くしたい といった変更は、ここだけを直せば済みます。

   ※ --row-h（1 行の高さ）だけは js/config.js の ROW_HEIGHT と
      同じ値にしておく必要があります。片方だけ変えると工程バーの位置がずれます。
   ========================================================================== */

/* --- 色と寸法のまとめ --------------------------------------------------- */
:root{
  --bg:             #f4f4f1;  /* 画面全体の背景 */
  --panel:          #fff;     /* プロジェクトの箱の背景 */
  --line:           #d9d9d3;  /* 濃いめの区切り線 */
  --line2:          #ecece7;  /* 薄めの区切り線 */
  --text:           #171717;  /* 文字色 */
  --muted:          #70706b;  /* 補助的な文字色 */
  --danger:         #9a3d35;  /* 削除など注意を促す色 */

  --row-h:          44px;     /* 工程 1 行の高さ（js/config.js と揃える） */
  --left-w:         215px;    /* 左のフェーズ欄の幅 */
  --left-w-compact: 42px;     /* 左のフェーズ欄を縮めたときの幅 */
}

/* --- 全体の土台 --------------------------------------------------------- */
*{ box-sizing:border-box }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}

/* --- 画面上部の帯（ロゴとメニュー） ------------------------------------- */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(244,244,241,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar{
  max-width:1500px; margin:auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.brand-area{ display:flex; align-items:center; min-width:0 }
.logo-box{
  width:min(250px,calc(100vw - 92px)); height:42px;
  display:flex; align-items:center; justify-content:flex-start; flex:none;
}
.logo-box img{
  width:100%; height:auto; max-height:30px;
  object-fit:contain; object-position:left center; display:block;
}

/* --- ボタンと入力欄の共通の見た目 --------------------------------------- */
button,input,select{
  font:inherit;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
}
button{ cursor:pointer }
button:hover{ border-color:#aaa }
.primary{ background:#171717; color:#fff; border-color:#171717 }
.small{ font-size:12px; padding:6px 8px }
.ghost{ background:transparent }
.danger{ color:var(--danger) }

label.control{
  display:flex; gap:6px; align-items:center;
  font-size:12px; color:var(--muted);
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:4px 8px;
}
label.control input,
label.control select{ border:0; padding:3px; background:transparent; border-radius:0 }

/* --- 右上の「⋯」から開くコマンドメニュー -------------------------------- */
.menu-wrap{ position:relative }
.menu-btn{
  width:38px; height:38px; padding:0; border-radius:9px;
  font-size:22px; line-height:1; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.command-menu{
  position:absolute; right:0; top:46px; z-index:500; width:230px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  padding:8px; display:none;
}
.command-menu.show{ display:block }
.command-menu button,
.command-menu label.menu-control{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:0; background:transparent; border-radius:8px;
  padding:9px 10px; font-size:12px; text-align:left;
}
.command-menu button:hover,
.command-menu label.menu-control:hover{ background:#f4f4f1 }
.command-menu .sep{ height:1px; background:var(--line2); margin:5px 4px }
.command-menu input,
.command-menu select{ max-width:118px; padding:5px 6px; font-size:11px }

/* --- 本文の領域 --------------------------------------------------------- */
main{ max-width:1500px; margin:0 auto; padding:14px 24px 80px }

/* フェーズ接続中に上部へ出る黒い帯 */
.connect-status{
  display:none; margin:0 0 12px; padding:10px 12px; border-radius:10px;
  background:#171717; color:#fff; font-size:12px;
  align-items:center; justify-content:space-between; gap:10px;
}
.connect-status.show{ display:flex }
.connect-status button{ padding:5px 8px; font-size:11px }

/* --- プロジェクトの箱 --------------------------------------------------- */
.project{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  margin:0 0 12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.025);
}
.project-head{
  padding:11px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.project:not(.collapsed) .project-head{ border-bottom:1px solid var(--line) }
.project-title-wrap{ display:flex; align-items:center; gap:8px; min-width:260px; flex:1 }
.collapse-btn{
  width:31px; height:31px; padding:0; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:#fafaf8; flex:none;
}
.project-title{
  font-weight:700; font-size:16px; border:0; padding:5px 6px;
  min-width:240px; max-width:620px; width:60%; background:transparent;
}
.project-actions{ display:flex; gap:6px; flex-wrap:wrap }
.project-body{ display:block }
.project.collapsed .project-body{ display:none }

/* 左のフェーズ欄 ＋ 右のタイムライン、の 2 列構成 */
.project-grid{ display:grid; grid-template-columns:var(--left-w) minmax(0,1fr) }

/* --- 左のフェーズ欄 ----------------------------------------------------- */
.phase-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:6px; width:100% }
.phase-panel-labels{ display:flex; align-items:center; white-space:nowrap }
.phase-panel-toggle{
  width:24px; height:24px; padding:0; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; background:#fff; flex:none;
}

/* フェーズ欄を縮めた状態（色の丸だけを残す） */
.project.compact-left .project-grid{ grid-template-columns:var(--left-w-compact) minmax(0,1fr) }
.project.compact-left .left-head{ padding:0; justify-content:center; align-items:center }
.project.compact-left .left-head .phase-panel-labels{ display:none }
.project.compact-left .phase-panel-head{ justify-content:center }
.project.compact-left .phase-left{ grid-template-columns:1fr; justify-items:center; padding:0 }
.project.compact-left .phase-left .phase-text,
.project.compact-left .phase-left .phase-tools{ display:none }
.project.compact-left .phase-left .color-dot{ width:16px; height:16px }

.left-head{
  height:56px; padding:8px 12px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:11px; color:var(--muted);
  display:flex; align-items:flex-end; justify-content:space-between;
}
.left-rows{ border-right:1px solid var(--line) }

.phase-left{
  height:var(--row-h); border-bottom:1px solid var(--line2);
  display:grid; grid-template-columns:18px minmax(0,1fr) 32px;
  align-items:center; gap:6px; padding:0 8px 0 10px;
}
.color-dot{
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(0,0,0,.16); padding:0; cursor:pointer;
}
.phase-left input{
  border:0; background:transparent; padding:4px 2px; font-size:13px;
  min-width:0; width:8.5em; max-width:100%;
}
.phase-left .dates{
  display:block; font-size:10px; color:var(--muted);
  margin-top:-2px; white-space:nowrap;
}
.phase-text{ min-width:0 }
.phase-tools{ display:flex; align-items:center; justify-content:flex-end; gap:2px }
.unlink-btn,.phase-del{ border:0; background:transparent; padding:0; color:#aaa; line-height:1 }
.unlink-btn{ font-size:13px; width:18px }
.unlink-btn.active{ color:#333 }
.phase-del{ font-size:18px }
.phase-del:hover,.unlink-btn:hover{ color:var(--danger) }

/* --- 右のタイムライン --------------------------------------------------- */
.timeline-scroll{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin }
.timeline{ position:relative; min-width:100%; user-select:none }

.timeline-head{ height:56px; border-bottom:1px solid var(--line); position:relative; background:#fafaf8 }
.month{
  position:absolute; top:0; height:30px; border-right:1px solid var(--line);
  padding:7px 8px 0; font-size:11px; font-weight:600;
  white-space:nowrap; overflow:hidden;
}
.tick{
  position:absolute; top:30px; height:26px; border-left:1px solid #e1e1dc;
  font-size:9px; color:#888; padding:5px 0 0 4px; white-space:nowrap;
}

.timeline-body{ position:relative }
.phase-track{
  height:var(--row-h); position:relative; border-bottom:1px solid var(--line2);
  background-image:linear-gradient(to right,rgba(0,0,0,.035) 1px,transparent 1px);
}
/* 今日を示す縦線 */
.today{
  position:absolute; top:0; bottom:0; width:2px;
  background:#c75f4d; opacity:.55; pointer-events:none; z-index:2;
}
/* フェーズ間の接続線 */
.deps-svg{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:3; pointer-events:none; overflow:visible;
}
.dep-line{ fill:none; stroke:#1d1d1d; stroke-width:1.4; opacity:.45 }
.dep-arrow{ fill:#1d1d1d; opacity:.5 }

/* --- 工程バー ----------------------------------------------------------- */
.bar{
  position:absolute; top:9px; height:26px; border-radius:7px;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; cursor:grab; z-index:5; min-width:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  touch-action:none;               /* iPad でドラッグ中に画面が動かないように */
}
/* 前のフェーズと接続されているバーは左端に白い線を入れる */
.bar.linked-in{ box-shadow:0 1px 3px rgba(0,0,0,.12),inset 3px 0 0 rgba(255,255,255,.45) }
.bar:active{ cursor:grabbing }

/* バー左右の、期間を伸縮させるつまみ */
.handle{ position:absolute; top:0; width:9px; height:100%; cursor:ew-resize; z-index:6 }
.handle.left{ left:0 }
.handle.right{ right:0 }
.handle:after{
  content:""; position:absolute; top:7px; bottom:7px; width:2px;
  background:rgba(255,255,255,.72);
}
.handle.left:after{ left:3px }
.handle.right:after{ right:3px }

.bar-label{
  pointer-events:none; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; padding:0 16px;
}

/* バー両端の、接続用の丸 */
.connector{
  position:absolute; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  border:2px solid #fff; background:#171717;
  z-index:9; cursor:pointer; padding:0; box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.connector.start{ left:-7px }
.connector.end{ right:-7px }
.connector:hover{ transform:translateY(-50%) scale(1.22) }
.connector.source{ background:#fff; border-color:#171717; box-shadow:0 0 0 3px rgba(0,0,0,.13) }
.connector.connected{ background:#fff; border-color:#171717 }
.bar.link-target .connector.start{ box-shadow:0 0 0 4px rgba(0,0,0,.18) }

/* --- 色選択パレット ----------------------------------------------------- */
.palette{
  position:fixed; z-index:1000;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  padding:10px; display:none; gap:7px; flex-wrap:wrap; width:205px;
}
.palette.show{ display:flex }
.palette button{ width:38px; height:38px; border-radius:50%; padding:0; border:2px solid transparent }
.palette button:hover{ border-color:#222 }
.palette-label{ width:100%; font-size:11px; color:var(--muted); margin:0 0 2px }
.color-grid{
  width:100%; display:grid; grid-template-columns:repeat(4,38px);
  gap:7px; justify-content:center;
}

/* --- 画面下に出る短いお知らせ ------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:28px;
  transform:translateX(-50%) translateY(20px);
  background:#171717; color:#fff; border-radius:9px;
  padding:9px 13px; font-size:12px;
  opacity:0; pointer-events:none; transition:.18s; z-index:2000;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

.empty{ padding:24px; color:var(--muted); font-size:13px }
.footer-note{ color:var(--muted); font-size:11px; margin-top:10px }

/* --- 画面が狭いとき（iPhone など） -------------------------------------- */
@media (max-width:800px){
  :root{ --left-w:185px }
  main{ padding:10px 6px 60px }
  .topbar{ padding:8px 10px }
  .project-title{ width:100%; min-width:0 }
  .logo-box{ width:min(220px,calc(100vw - 88px)); height:40px }
  .logo-box img{ width:100%; max-height:28px }
  .command-menu{ position:fixed; right:10px; top:62px; width:min(280px,calc(100vw - 20px)) }

  /* 指で操作しやすいよう、つまみと丸を大きくする */
  .connector{ width:16px; height:16px }
  .connector.start{ left:-9px }
  .connector.end{ right:-9px }
  .handle{ width:16px }
  .handle.left{ left:-3px }
  .handle.right{ right:-3px }
  .bar{ height:30px; top:7px }
}

/* --- ログイン画面 -------------------------------------------------------- */
.login{
  position:fixed; inset:0; z-index:3000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.login[hidden]{ display:none }

.login-box{
  width:100%; max-width:380px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:28px 26px 24px;
  box-shadow:0 10px 40px rgba(0,0,0,.07);
}
.login-logo{ width:200px; max-width:100%; height:auto; display:block; margin:0 0 22px }

.login-lead{ font-size:13px; line-height:1.8; color:var(--muted); margin:0 0 18px }

.login-field{
  display:block; font-size:12px; color:var(--muted); margin:0 0 16px;
}
.login-field input{
  display:block; width:100%; margin-top:6px;
  font-size:16px;              /* iPhone で拡大されないよう 16px 以上にする */
  padding:10px 12px;
}
#loginCode{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.32em; text-align:center; font-size:22px;
}

.login-submit{ width:100%; padding:11px; font-size:14px }
.login-submit[disabled]{ opacity:.5; cursor:default }
.login-back{
  width:100%; margin-top:10px; border:0; color:var(--muted); background:transparent;
}
.login-error{
  margin:16px 0 0; padding:10px 12px;
  background:#fbf0ef; border:1px solid #e6cdc9; border-radius:8px;
  color:var(--danger); font-size:12px; line-height:1.7;
}
.login-error[hidden]{ display:none }

/* --- メニューのアカウント欄 ---------------------------------------------- */
.menu-account{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; font-size:11px; color:var(--muted);
}
.menu-account[hidden]{ display:none }
.menu-account span:first-child{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.role-badge{
  flex:none; font-size:10px; padding:2px 7px; border-radius:999px;
  background:#f0f0ec; color:var(--text); border:1px solid var(--line);
}

/* 接続していない状態の注記 */
#modeNote{ margin-left:10px }

/* --- 重ねて出す画面（メンバー管理） ------------------------------------- */
.modal{
  position:fixed; inset:0; z-index:2500;
  background:rgba(23,23,23,.38);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.modal[hidden]{ display:none }

.modal-box{
  width:100%; max-width:460px; max-height:82vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 22px 20px;
  box-shadow:0 18px 50px rgba(0,0,0,.2);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal-head h2{ font-size:16px; margin:0 }
.modal-close{
  width:32px; height:32px; padding:0; border:0; background:transparent;
  font-size:22px; line-height:1; color:var(--muted); flex:none;
}
.modal-close:hover{ color:var(--text) }

.modal-error{
  margin:14px 0 0; padding:10px 12px;
  background:#fbf0ef; border:1px solid #e6cdc9; border-radius:8px;
  color:var(--danger); font-size:12px; line-height:1.7;
}
.modal-error[hidden]{ display:none }

/* 招待の入力欄 */
.member-add{ display:flex; gap:6px; margin:18px 0 0; flex-wrap:wrap }
.member-add input{
  flex:1 1 190px; min-width:0;
  font-size:16px;              /* iPhone で拡大されないよう 16px 以上にする */
}
.member-add select{ flex:none }
.member-add button{ flex:none }
.member-note{ font-size:11px; color:var(--muted); line-height:1.75; margin:10px 0 0 }

/* 一覧 */
.member-list{ margin-top:18px; border-top:1px solid var(--line) }
.member-row{
  display:flex; align-items:center; gap:10px;
  padding:11px 0; border-bottom:1px solid var(--line2);
}
.member-email{
  flex:1; min-width:0; font-size:13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.member-self{ font-size:10px; color:var(--muted) }
.member-del{
  flex:none; border:0; background:transparent;
  color:#aaa; font-size:12px; padding:2px 4px;
}
.member-del:hover{ color:var(--danger) }
.member-empty,.member-loading{ padding:18px 0; font-size:12px; color:var(--muted) }