/* スマホ向けの見せ方は「幅 800px 以下」または「指で操作する端末（iPad など）で幅 1200px 以下」に適用する（2026-11-01: タブレットもスマホと同じ見せ方にする） */
/* ============================================================
   cvup 案件管理  スタイル
   色や余白を変えたいときは :root の変数を書き換えてください
   ============================================================ */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --line: #e3e7eb;
  --text: #1f2a37;
  --muted: #6b7684;
  --accent: #2f6fed;
  --accent-soft: #e8f0fe;
  --danger: #d64545;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --topbar-h: 52px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 14px; color: var(--text); background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 0 0 10px; color: var(--text); }
p { margin: 0 0 8px; }

/* ---- 上部バー ---- */
.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 16px; color: var(--text); }
.brand:hover { text-decoration: none; }
.userbox { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.userbox img { width: 28px; height: 28px; border-radius: 50%; }
.menu-btn { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; }

/* ---- レイアウト ---- */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.sidenav {
  width: 200px; flex: none; padding: 16px 10px;
  background: var(--panel); border-right: 1px solid var(--line);
}
.sidenav a {
  display: block; padding: 9px 12px; border-radius: 8px; color: var(--text);
}
.sidenav a:hover { background: var(--bg); text-decoration: none; }
.sidenav a.nav-reload { margin-top: 14px; color: var(--muted); font-size: 13px; }
.sidenav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidenav .nav-label { font-size: 11px; color: var(--muted); padding: 14px 12px 4px; }
#view { flex: 1; min-width: 0; padding: 20px 24px 60px; }

/* ---- カード・グリッド ---- */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2.two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
/* 半分の幅に入れたフォームは行を折り返す */
.narrow form.form .frow { flex-wrap: wrap; }
.narrow form.form .frow > label { flex: 1 1 180px; }
.narrow form.form .frow > label.grow { flex: 1 1 240px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head h1 { margin: 0; }
.page-head .spacer { flex: 1; }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }

/* ---- フォーム ---- */
form.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
form.form .full { grid-column: 1 / -1; }
form.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
input, select, textarea {
  font: inherit; color: var(--text); padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }
/* 指で操作する端末では入力欄の文字を 16px に（iPhone は 16px 未満の入力欄を押すと画面を自動で拡大し、戻らないことがある） */
@media (pointer: coarse) { input, select, textarea, .search-box input, .head-search { font-size: 16px !important; } }
input[readonly], textarea[readonly] { background: var(--bg); }
.actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.btn {
  font: inherit; cursor: pointer; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--text);
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #245bd0; }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
/* タスクフォームの行 */
form.form .hint { font-weight: normal; color: #98a2b3; font-size: 11px; }
form.form .frow { display: flex; gap: 14px; align-items: flex-start; }
form.form .frow > label { flex: 1 1 0; min-width: 0; }
form.form .frow > label.grow { flex: 1.6 1 0; }
form.form .frow.three > label { flex: 1 1 0; }
form.form .period { display: flex; align-items: center; gap: 8px; }
form.form .period input[type=date] { flex: 1; }
form.form .tilde { color: var(--muted); }
form.form .rem-text { padding: 8px 0; color: var(--text); }
form.form .remind-wrap { flex: 1 1 0; }
form.form details.more summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 0; }
form.form details.more label { margin-top: 8px; max-width: 520px; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  form.form .frow { flex-direction: column; gap: 10px; }
  form.form .frow > label, .narrow form.form .frow > label, .narrow form.form .frow > label.grow { flex: 0 0 auto; }
  form.form .period input[type=date] { flex: 1 1 0; min-width: 120px; }
  input[type=date], input[type=datetime-local] { -webkit-appearance: none; appearance: none; min-height: 38px; }
  .log-list li { grid-template-columns: auto 1fr auto; gap: 6px 10px; }
  .log-list .text { grid-column: 1 / -1; }
  .log-list .btn { justify-self: end; }
}
.inline-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

/* ---- テーブル ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
tr:hover td { background: #fafbfc; }
td.nowrap, th.nowrap { white-space: nowrap; }
.task-table { table-layout: fixed; }
.task-table td { overflow-wrap: anywhere; }
.task-table tr.grp td { background: #f7f8fa; font-weight: 600; padding-top: 10px; }
.task-table tr.grp:hover td { background: #f7f8fa; }

/* ---- ステータスバッジ ---- */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px;
  background: #eef1f4; color: #3b4652; white-space: nowrap;
}
/* ステータスの色（2026-11-01）: 商談中 黄 / 未着手 紫 / 進行中 青 / 納品済・完了 緑 / 保留・失注 グレー。名前で決まるのでプロジェクト・タスクも同じ色 */
.badge[data-s="商談中"] { background: #fff4d6; color: #8a5a00; }
.badge[data-s="未着手"] { background: #f3e8ff; color: #6d28d9; }
.badge[data-s="進行中"] { background: #dcecff; color: #1d4ed8; }
.badge[data-s="保留"], .badge[data-s="失注"] { background: #e5e7eb; color: #4b5563; }
.badge[data-s="納品済"], .badge[data-s="完了"] { background: #dcf5e6; color: #166534; }

/* ---- ダッシュボードのカラム ---- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kanban .col h2 { display: flex; justify-content: space-between; }
.kanban .item {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; color: var(--text); box-shadow: var(--shadow);
}
.kanban .item:hover { border-color: var(--accent); text-decoration: none; }
.kanban .item .client { font-size: 12px; color: var(--muted); }
.due-over { color: var(--danger); font-weight: 700; }
.due-over::before { content: "🔥"; margin-right: 2px; }

/* ---- クライアントの色見本 ---- */
.swatches { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.swatches .sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatches .sw.on { box-shadow: 0 0 0 2px var(--text); }
.swatches input[type=color] { width: 40px; height: 30px; padding: 2px; }

/* ---- タスクの閲覧表示（コンパクト） ---- */
.tsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 16px; }
.tsum .ti { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tsum .k { flex: none; width: 88px; font-size: 12px; color: var(--muted); }
.tsum .v { min-width: 0; overflow-wrap: anywhere; }
.tbrief { margin-top: 12px; }
h2.hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swatch-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 6px; box-shadow: 0 0 0 1px var(--line); }
.tbrief .k { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tbrief .pre { white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 10px 12px; max-height: 260px; overflow: auto; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .tsum { grid-template-columns: 1fr; gap: 0; } }

/* ---- スマホでは折りたたむ（PC では常に開いていて見出しは普通の表示） ---- */
details.collapse-sm > summary { list-style: none; cursor: default; }
details.collapse-sm > summary::-webkit-details-marker { display: none; }
details.collapse-sm > summary h2 { display: flex; align-items: center; gap: 8px; }
details.collapse-sm .chev { display: none; margin-left: auto; color: var(--muted); }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  details.collapse-sm > summary { cursor: pointer; }
  details.collapse-sm .chev { display: inline; }
  details.collapse-sm[open] .chev { transform: rotate(180deg); }
  details.collapse-sm:not([open]) > summary h2 { margin-bottom: 0; }
}

/* ---- 確認画面（モーダル） ---- */
.modal-bg { position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: var(--panel); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.3); padding: 18px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; }

/* ---- クライアントの登録・編集（ポップアップ）と基本情報: 「クライアント情報」「進行管理」の 2 枠 ---- */
.modal.client-modal { max-width: 640px; }
.modal h2.hrow .btn { font-size: 14px; line-height: 1; padding: 3px 8px; }
form.form .fset { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 12px; margin: 0; min-width: 0; }
form.form .fset legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid .full { grid-column: 1 / -1; }
.csum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.csum .fset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 4px; min-width: 0; }
.csum .legend { font-size: 12px; font-weight: 600; color: var(--muted); }
.csum .tsum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .fgrid, .fgrid.three, .csum, .csum .tsum { grid-template-columns: 1fr; }
}

/* ---- 「相手の返事待ち」の印（ToDo の waiting → 親タスクの waitingOn） ---- */
.wtag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #fff4d6; color: #8a5a00; margin-left: 6px; white-space: nowrap; vertical-align: 1px; }
.wtag.mis { background: #fde8e8; color: #9b1c1c; }
.st-form .st-wait { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.st-form .st-wait input { width: auto; }
.gbar.sub.wait { background: repeating-linear-gradient(45deg, rgba(255,255,255,.9) 0 4px, rgba(0,0,0,.08) 4px 8px) !important; border: 1px solid; box-sizing: border-box; opacity: 1; }

/* ---- タスク登録（1 行の登録） ---- */
.quick-task { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.quick-task label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1 1 120px; min-width: 0; }
.quick-task label.qn { flex: 3 1 220px; }
.quick-task label.qb { flex: 1 1 100%; }
.quick-task textarea { resize: vertical; min-height: 40px; }
.quick-task .qa { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; }

/* ---- マイタスクのリスト（1 行 1 タスク。会社 › プロジェクト のパンくず ＋ タスク名） ---- */
.mylist { display: flex; flex-direction: column; }
.my-head, .my-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 110px 140px 70px; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.mylist.norole .my-head, .mylist.norole .my-row { grid-template-columns: minmax(0, 1fr) 110px 140px 70px; }
.my-head { font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.my-row:last-child { border-bottom: 0; }
.my-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.my-txt { min-width: 0; }
.my-crumb { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-txt > a { font-weight: 600; color: var(--text); }
.my-txt > a:hover { color: var(--accent); }
.my-roles { display: flex; flex-wrap: wrap; gap: 3px; }
.rtag { display: inline-block; font-size: 10px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.my-due { font-size: 12px; text-align: right; white-space: nowrap; }
/* ステータスの区切りの帯: バッジと同じ色。押すと折りたたみ */
.my-grp { display: flex; align-items: center; gap: 8px; border-radius: 6px; padding: 6px 10px; margin: 8px 0 2px; cursor: pointer; font-size: 13px; background: #eef1f4; color: #3b4652; user-select: none; }
.my-g:first-child .my-grp { margin-top: 2px; }
.my-grp[data-s="未着手"] { background: #f3e8ff; color: #6d28d9; }
.my-grp[data-s="進行中"] { background: #dcecff; color: #1d4ed8; }
.my-grp[data-s="保留"] { background: #e5e7eb; color: #4b5563; }
.my-grp .chev { font-size: 11px; transition: transform .15s; }
.my-g.closed .my-grp .chev { transform: rotate(-90deg); }
.my-g.closed .my-gbody { display: none; }
details.myd > summary { list-style: none; cursor: pointer; }
details.myd > summary::-webkit-details-marker { display: none; }
details.myd > summary h2 { display: flex; align-items: center; gap: 8px; }
details.myd .chev { margin-left: auto; color: var(--muted); transition: transform .15s; }
details.myd[open] .chev { transform: rotate(180deg); }
details.myd:not([open]) > summary h2 { margin-bottom: 0; }
.mylist .empty { padding: 8px 6px; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .my-head { display: none; }
  .my-row, .mylist.norole .my-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; }   /* 2 行目: ステータス | 担当 | 納期 */
  .my-row .my-nm { grid-column: 1 / -1; }
  .my-row .my-roles { grid-column: 1 / -1; }
}

/* ---- ガントの並び順ボタン ---- */
.gsort { display: inline-flex; gap: 0; }
.gsort .btn { border-radius: 0; }
.gsort .btn + .btn { margin-left: -1px; }
.gsort .btn:first-child { border-radius: 8px 0 0 8px; }
.gsort .btn:last-child { border-radius: 0 8px 8px 0; }
.gsort .btn:hover { position: relative; }

/* ---- 進行チェック（プロジェクトのディレクター定型作業。開始 / 納品 の 2 段階） ---- */
details.ckwrap > summary { list-style: none; cursor: pointer; }
details.ckwrap > summary::-webkit-details-marker { display: none; }
details.ckwrap .chev { display: inline-block; margin-left: 10px; color: var(--muted); transition: transform .15s; }
details.ckwrap[open] .chev { transform: rotate(180deg); }
details.ckwrap:not([open]) > summary h2 { margin-bottom: 0; }
details.ckwrap[open] > summary h2 { margin-bottom: 10px; }
.ckgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.ckph { min-width: 0; }
.ckh { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ckh .st-bar { flex: 1; margin: 0; }
.cklist { list-style: none; margin: 0; padding: 0; }
.cklist .ck { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--line); border-radius: 6px; }
.cklist .ck.now { background: var(--accent-soft); border-bottom-color: transparent; }
.cklist .ck.done .ckname { color: var(--muted); text-decoration: line-through; }
.ckbox { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfd5dc; background: #fff; color: #fff; font: inherit; font-size: 13px; line-height: 18px; text-align: center; padding: 0; cursor: pointer; }
.cklist .ck.now .ckbox { border-color: var(--accent); border-width: 3px; line-height: 16px; }
.cklist .ck.done .ckbox { border-color: #16a34a; background: #16a34a; }
.ckbox:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--accent-soft); }
.ckbox:disabled { cursor: default; }
.ckname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ckmeta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cklist .ckdel { padding: 1px 6px; border-color: transparent; color: var(--muted); }
.cklist .ckdel:hover { border-color: var(--line); color: var(--danger); }
@media (pointer: fine) { .cklist .ckdel { visibility: hidden; } .cklist .ck:hover .ckdel { visibility: visible; } }
.ckadd { display: flex; gap: 6px; margin-top: 8px; }
.ckadd input { flex: 1; min-width: 0; }
.ckt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.cks { font-size: 11px; color: var(--muted); white-space: nowrap; flex: none; }
.cks.ok { color: #16a34a; font-weight: 700; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .ckgrid { grid-template-columns: 1fr; } .cklist .ckmeta { display: none; } }

/* ---- タブ ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; background: #e9edf1; padding: 3px; border-radius: 8px; }   /* タブが増えても画面幅に収まるよう折り返す */
.tabs a { padding: 5px 12px; border-radius: 6px; color: var(--text); font-size: 13px; }
.tabs a:hover { text-decoration: none; }
.tabs a.on { background: #fff; box-shadow: var(--shadow); font-weight: 600; }
/* マイタスクの絞り込み中の札（ダッシュボードの数字から来たとき）。✕ で全部の表示に戻る */
.page-head .fchip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 3px 4px 3px 12px; }
.page-head .fchip .x { color: var(--muted); padding: 0 8px; font-size: 14px; line-height: 1; }
.page-head .fchip .x:hover { color: var(--danger); text-decoration: none; }

/* ---- 管理画面（クライアントカード） ---- */
.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ccard { background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: var(--radius); padding: 10px 14px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.ccard .ch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: inherit; }
.ccard .ch:hover { text-decoration: none; } .ccard .ch:hover b { color: var(--accent); }
.ccard .ch b { font-size: 15px; }
.ccard .cm { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ccard .cm .lt { color: var(--text); }
.ccard .cpjs { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; }
.ccard .cpj { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: inherit; border-bottom: 1px solid #f0f2f4; }
.ccard .cpj:last-child { border-bottom: 0; }
.ccard .cpj:hover { text-decoration: none; background: var(--bg); }
.ccard .cpj .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard .cpj .bar { flex: none; width: 56px; height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.ccard .cpj .bar i { display: block; height: 100%; background: #16a34a; }
.ccard .cpj .c { flex: none; font-size: 11px; color: var(--muted); min-width: 26px; text-align: right; }
.ccard .cpj .badge { font-size: 10px; padding: 0 6px; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .ccards { grid-template-columns: 1fr; } }

/* ---- タスクのカンバン ---- */
.tboard { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.tcol { flex: 1 1 0; min-width: 210px; background: #eceff3; border-radius: 10px; padding: 10px; }
.tcol h2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tcol.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.tcard { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 10px 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); cursor: grab; }
/* カード: 上辺に会社の色の帯（会社名 ＋ プロジェクト名）。本文はタスク名と 納期・担当 だけ */
.tcard { border-left: 1px solid var(--line); padding: 0; overflow: hidden; }
.tcard-band { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; font-size: 12px; line-height: 1.4; }
.tcard-band .cl { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-band .pj { margin-left: auto; opacity: .85; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tcard-body { padding: 8px 10px 10px; }
.tcard-title { display: inline; font-weight: 700; font-size: 14px; color: var(--text); }
.tcard-title:hover { color: var(--accent); }
.tcard-meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--muted); }
.tcard-meta .who { color: var(--text); }
.tcard.dragging { opacity: .5; }
.tcard .card-st { display: none; margin-left: auto; }   /* PC はドラッグで移すので出さない */
@media (pointer: coarse) { .tcard .card-st { display: inline-block; } }

/* ---- ガントチャート ---- */
.gctl { display: flex; gap: 6px; align-items: center; margin-left: auto; }   /* 絞り込みの行の右端（◀ 今日 ▶ と週数） */
.gctl .btn { padding: 7px 12px; font-size: 14px; }
.gantt { overflow: auto; max-height: calc(100vh - 190px); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.grow.ghead .glabel { z-index: 4; }
.grow { display: flex; width: max-content; min-width: 100%; border-bottom: 1px solid #f0f2f4; }   /* 行を中身の幅にして、左の列を固定できるようにする */
.grow.ghead { position: sticky; top: 0; z-index: 3; background: #fff; }
.grow.gcli, .grow.gcli .glabel { color: #fff; font-weight: 700; font-size: 14px; }
.grow.gcli .glabel a { color: #fff; }
.grow.gcli .cnt { font-size: 12px; font-weight: 400; opacity: .85; margin-left: 6px; }
.grow.gcli .gd { border-right-color: rgba(255,255,255,.18); background: transparent; }
.grow.gcli .gd.today { box-shadow: inset 2px 0 0 #fff; }
.grow.gpji .glabel { font-weight: 700; font-size: 14px; }
.grow.gpji .glabel a { color: inherit; }
.grow.gcli .glabel, .grow.gpji .glabel { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.gcl .chev, .gpj .chev { font-size: 11px; opacity: .8; transition: transform .15s; }
.gcl.closed > .gcli .chev, .gpj.closed > .gpji .chev { transform: rotate(-90deg); }
.gcl.closed > .gbody, .gpj.closed > .gbody { display: none; }
.gfill { position: absolute; top: 0; bottom: 0; z-index: 1; }
.grow.gpji .gd { background: transparent; }
.grow.gtask .glabel { padding-left: 24px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grow.gtask .glabel .badge { font-size: 10px; padding: 0 6px; }
.glabel { flex: 0 0 230px; position: sticky; left: 0; z-index: 2; background: inherit; padding: 6px 8px; border-right: 1px solid var(--line); font-size: 13px; }
.grow.gtask .glabel, .grow.gsub .glabel { background: #fff; }
.gdays { position: relative; display: flex; flex: none; min-height: 34px; }
.gd { flex: none; border-right: 1px solid #f0f2f4; text-align: center; font-size: 11px; color: var(--muted); padding-top: 4px; }
.gd.we { background: #f7f8fa; }
.gd.today { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.gm { flex: none; border-right: 1px solid var(--line); font-size: 12px; padding: 4px 6px; white-space: nowrap; overflow: hidden; }
.gbar { position: absolute; top: 6px; height: 22px; line-height: 22px; padding: 0 6px; border-radius: 5px; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #64748b; }
.gbar:hover { text-decoration: none; filter: brightness(.92); }
.gbar[data-s="完了"] { opacity: .45; }
.gbar[data-s="未着手"] { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.update-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; background: var(--text); color: #fff; padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25); display: flex; gap: 10px; align-items: center; }
.gout { position: absolute; left: 6px; top: 8px; }
.gbar { display: flex; align-items: center; padding: 0; }
.gbar .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.gbar .gh { flex: none; width: 10px; height: 100%; cursor: ew-resize; touch-action: none; background: rgba(255,255,255,.35); }
.gbar .gh:hover, .gbar.resizing .gh { background: rgba(255,255,255,.7); }
.gbar.resizing { opacity: .85; outline: 2px solid #fff; }
.grow.gsub .glabel { padding-left: 40px; font-size: 12px; }
.grow.gsub .glabel .badge { font-size: 10px; padding: 0 6px; }
.grow.gsub .gdays { min-height: 30px; }
.gbar.sub { top: 7px; height: 16px; line-height: 16px; font-size: 11px; opacity: .75; border-radius: 4px; }
.gbar.sub[data-s="完了"] { opacity: .35; }

.tstrip .si.grow { flex: 1 1 200px; }
.tstrip .pbar { display: inline-block; width: 120px; max-width: 100%; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.tstrip .pbar i { display: block; height: 100%; background: #16a34a; }

/* ---- ページ上部の階層の帯（会社 → プロジェクト → いまの画面。スクロールしても上に残る） ---- */
.pbar-nav { position: sticky; top: var(--topbar-h); z-index: 10; display: flex; align-items: center; gap: 10px; height: 44px; margin: -20px -24px 16px; padding: 0 16px 0 0; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; }
.pbar-nav .segs { display: flex; flex: none; align-self: stretch; margin-right: 12px; }
/* 段そのものを矢印の形に切り抜き（--arw = 矢印の長さ）。次の段を矢印の分だけ重ね、前の段を上に描く */
.pbar-nav .seg { --seg: #fff; --arw: 12px; position: relative; display: flex; align-items: center; gap: 8px; padding: 0 calc(var(--arw) + 10px) 0 calc(var(--arw) + 12px); background: var(--seg); color: var(--text); max-width: 280px;
  clip-path: polygon(0 0, calc(100% - var(--arw)) 0, 100% 50%, calc(100% - var(--arw)) 100%, 0 100%); }
.pbar-nav .seg.cur { max-width: none; }
.pbar-nav .seg:first-child { padding-left: 20px; }
.pbar-nav .seg + .seg { margin-left: calc(var(--arw) * -1); }
.pbar-nav .seg:nth-child(1) { z-index: 3; } .pbar-nav .seg:nth-child(2) { z-index: 2; } .pbar-nav .seg:nth-child(3) { z-index: 1; }
.pbar-nav .seg .k { font-size: 11px; color: inherit; opacity: .85; white-space: nowrap; }   /* 色付きの段では名前と同じ文字色（白または濃色） */
.pbar-nav .seg .n { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbar-nav .seg.cur:not(:first-child) .k { color: var(--muted); opacity: 1; }   /* 白い段のラベルだけグレー */
.pbar-nav .seg.cur .n { font-size: 17px; font-weight: 700; }
.pbar-nav a.seg:hover { text-decoration: none; } .pbar-nav a.seg:hover .n { text-decoration: underline; }
.pbar-nav .spacer { flex: 1; }
.pbar-nav .rt { display: flex; align-items: center; gap: 12px; white-space: nowrap; min-width: 0; overflow: hidden; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .pbar-nav { height: auto; min-height: 40px; margin: -14px -16px 12px; flex-wrap: wrap; gap: 6px 8px; padding: 0 12px 0 0; }
  .pbar-nav .segs { height: 40px; margin-right: 10px; flex: 1 1 0; min-width: 0; overflow: hidden; }
  .pbar-nav .badge { flex: none; } .pbar-nav .spacer { display: none; }
  /* 上の段（会社・プロジェクト）は省略記号で縮め、いまの画面の名前は縮めない */
  .pbar-nav .seg { --arw: 10px; padding: 0 calc(var(--arw) + 8px) 0 calc(var(--arw) + 6px); gap: 6px; flex: 0 1 auto; min-width: 48px; max-width: none; }
  .pbar-nav .seg .n { overflow: hidden; text-overflow: ellipsis; }
  .pbar-nav .seg:first-child { padding-left: 12px; }
  .pbar-nav .seg .k { display: none; }
  .pbar-nav .seg .n { font-size: 13px; }
  .pbar-nav .seg.cur { flex: 1 0 auto; } .pbar-nav .seg.cur .n { font-size: 15px; }
  .pbar-nav .rt { flex-basis: 100%; padding: 0 12px 6px; font-size: 12px; flex-wrap: wrap; gap: 4px 10px; }
}

/* ---- タスクページ上部の帯 ---- */
.tstrip { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.tstrip .si { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tstrip .si .k { font-size: 11px; color: var(--muted); }
.tstrip .si .v { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.tstrip .si.status select { width: auto; padding: 4px 8px; font-size: 13px; }
.tstrip .acts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.tstrip .acts .btn { margin-left: 4px; }
.tdetail > summary { list-style: none; cursor: pointer; }
.tdetail > summary::-webkit-details-marker { display: none; }
.tdetail > summary h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.tdetail > summary h2 .muted { font-weight: 400; }
.tdetail .chev { margin-left: auto; color: var(--muted); }
.tdetail[open] .chev { transform: rotate(180deg); }
.tdetail[open] > summary h2 { margin-bottom: 8px; }
.tdetail .pre { white-space: pre-wrap; background: var(--bg); border-radius: 8px; padding: 10px 12px; max-height: 320px; overflow: auto; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .tstrip { gap: 8px 16px; padding: 10px 12px; }
  .tstrip .si .v { font-size: 13px; }
  .tstrip .acts { margin-left: 0; width: 100%; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
}

/* ---- ToDo（タスクページ。データ名は subtasks） ---- */
.grid2.todo-chat { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }   /* 左 ToDo 1/3、右 チャット 2/3 */
.st-head { margin-bottom: 6px; }
.st-bar { height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; margin: 2px 0 6px; }
.st-bar i { display: block; height: 100%; background: #16a34a; transition: width .3s; }
.subtasks { list-style: none; margin: 0; padding: 0; }
.subtasks .st { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; border-radius: 8px; border-bottom: 1px solid var(--line); }
.subtasks .st.active { background: var(--accent-soft); border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--accent); padding-left: 14px; }   /* 進行中（左の青い線と文字の間を空ける） */
.subtasks .st.done .st-nm { color: var(--muted); font-weight: 400; }
.st-body { flex: 1 1 auto; min-width: 0; }
.st-nm { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.st-nm .badge { font-size: 11px; padding: 1px 8px; vertical-align: 1px; font-weight: 500; }
.st-nm .badge[data-s="進行中"] { background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; padding: 2px 10px; }   /* 進行中を一番目立たせる */
.subtasks .st-act .st-done-btn { background: #fff; border-color: #cfd5dc; color: var(--text); }   /* 完了ボタンは控えめ */
.subtasks .st-act .st-done-btn:hover { border-color: var(--accent); color: var(--accent); }
/* 操作ボタン（開始 / 完了にする / 戻す） */
.subtasks .st-act { flex: none; display: flex; align-items: center; margin-left: auto; }
.subtasks .st-act .btn { white-space: nowrap; }
.subtasks .st-act .st-back { border-color: transparent; color: var(--muted); font-size: 12px; }
.subtasks .st-act .st-back:hover { border-color: var(--line); color: var(--text); }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .subtasks .st { flex-wrap: wrap; }
  .subtasks .st-body { flex: 1 1 0; }   /* 名前が長くても編集ボタンを 1 行目に残す */
  .subtasks .st-act { flex-basis: 100%; order: 2; margin: 2px 0 0; }
  .subtasks .st-act .btn { width: 100%; padding: 8px 10px; }
  .subtasks .st.done .st-act { flex-basis: auto; order: 0; margin: 0 0 0 auto; }   /* 完了行の「戻す」は右端のまま */
  .subtasks .st-act .st-back { width: auto; padding: 2px 8px; }
}
.st-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.st-meta .k { font-size: 11px; margin-right: 4px; opacity: .8; }
.st-meta > span { display: inline-flex; align-items: center; }
.st-ava { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-right: 4px; background: #eef1f4; }
.st-tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 0 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.st-tag.over { background: #fde2e2; color: #991b1b; }
.st-tag.today { background: #dcecff; color: #1d4ed8; }
.subtasks .st-ops { flex: none; display: flex; align-items: center; gap: 2px; margin-left: 4px; }
.subtasks .st-body + .st-ops { margin-left: auto; }
.subtasks .st-ops .btn { padding: 1px 6px; border-color: transparent; color: var(--muted); }
.subtasks .st-ops .btn:hover { border-color: var(--line); color: var(--text); }
.subtasks .st-ops .grip { color: #cfd5dc; cursor: grab; padding: 0 2px; letter-spacing: -3px; }
@media (pointer: fine) { .subtasks .st .st-ops { visibility: hidden; } .subtasks .st:hover .st-ops, .subtasks .st:focus-within .st-ops { visibility: visible; } }
.subtasks .st[draggable] { cursor: grab; }
.subtasks .st.dragging { opacity: .4; }
.subtasks .st.before { box-shadow: 0 -2px 0 var(--accent); }
.subtasks .st.after { box-shadow: 0 2px 0 var(--accent); }
.subtasks .empty { padding: 8px 0; border: 0; }
.st-add { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--muted); background: transparent; border: 1px dashed var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; cursor: pointer; }
.st-add:hover { color: var(--accent); border-color: var(--accent); }
.st-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.st-form input[name=name] { flex: 1 1 100%; width: auto; }
.st-form select { flex: 1 1 110px; width: auto; min-width: 0; }
.st-form .period { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.st-form .period input { width: auto; min-width: 0; flex: 1 1 0; }
.st-form .tilde { color: var(--muted); }
.subtasks .st.editing { display: block; padding: 0; border: 0; }
.subtasks .st.editing .st-form { margin-top: 0; }
.subp { display: inline-block; font-size: 11px; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 0 7px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.subp.done { color: #166534; background: #dcf5e6; }

/* ---- 担当者別の棒 ---- */

/* ---- 対応ログ ---- */
.log-list { list-style: none; margin: 12px 0 0; padding: 0; }
.log-list li { display: grid; grid-template-columns: 90px 110px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.log-list .text { white-space: pre-wrap; }
.log-list .btn { color: var(--muted); border-color: transparent; padding: 2px 8px; }
.log-list .btn:hover { color: var(--danger); background: none; }
/* 対応ログ: 縦のタイムライン（日付 → 点と線 → 内容） */
.log-list.timeline li { grid-template-columns: 84px 1fr auto; gap: 8px 12px; position: relative; padding: 8px 0 8px 14px; border-bottom: 0; }
.log-list.timeline li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.log-list.timeline li::after { content: ""; position: absolute; left: 3px; top: 24px; bottom: -8px; width: 2px; background: var(--line); }
.log-list.timeline li:last-child::after { display: none; }
.log-list.timeline .when { font-size: 12px; color: var(--muted); padding-top: 2px; }
.log-list.timeline .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.log-list.timeline .btn { visibility: hidden; }
.log-list.timeline li:hover .btn { visibility: visible; }
td.num, th.num { text-align: right; }
.client-table .swatch-dot { width: 10px; height: 10px; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .log-list.timeline li { grid-template-columns: 1fr auto; } .log-list.timeline .when { grid-column: 1 / -1; } .log-list.timeline .btn { visibility: visible; } }

/* ---- その他 ---- */
.login { max-width: 420px; margin: 80px auto; text-align: center; }
.login .btn { font-size: 15px; padding: 12px 20px; }
.loading { color: var(--muted); padding: 40px; text-align: center; }
.error-box { background: #fde2e2; color: #991b1b; padding: 12px; border-radius: 8px; white-space: pre-wrap; }
.notice { background: var(--accent-soft); color: #1e3a8a; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1f2a37; color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 50;
}
.toast.err { background: var(--danger); }
.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.filters select, .filters input { width: auto; }
.empty { color: var(--muted); padding: 16px 0; }
.pre { white-space: pre-wrap; }

/* ---- スマホ ---- */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .menu-btn { display: block; }
  .sidenav { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 15; transform: translateX(-100%); transition: transform .2s; }
  .sidenav.open { transform: none; }
  #view { padding: 14px 16px 60px; }
  .grid2, .grid2.two-col, .grid2.todo-chat, .grid3, .kanban { grid-template-columns: 1fr; }
  form.form { grid-template-columns: 1fr; }
  .log-list li { grid-template-columns: 1fr; gap: 2px; }
  /* 表は横スクロールにして、文字が縦に潰れないようにする */
  .card { overflow-x: auto; }
  table { min-width: 560px; }
  th { white-space: nowrap; }
  td { white-space: nowrap; }
  td .small, .task-table td { white-space: normal; }
  .task-table { min-width: 600px; }
  /* 上部バーを詰める */
  .topbar { gap: 8px; padding: 0 10px; }
  .userbox > a > span, .userbox .small { display: none; }
  .userbox { gap: 6px; }
  .topbar { padding: 0 10px; gap: 8px; min-width: 0; overflow: hidden; }   /* 上部バーが画面幅より広がってページ全体が横にはみ出すのを防ぐ */
  .topbar .brand { font-size: 15px; white-space: nowrap; }
  .userbox #logout-btn { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
  html, body { max-width: 100%; overflow-x: hidden; }
  .card { overflow-x: auto; }   /* 幅のある表はカードの中で横スクロール */
  .tboard { scroll-snap-type: x mandatory; }
  .tcol { flex: 0 0 84vw; scroll-snap-align: start; }
  .tcard { cursor: default; }
  .tcard .card-st { display: inline-block; }
  .glabel { flex-basis: 150px; }
}

/* ---- 通知ベル ---- */
.bell { position: relative; margin-left: auto; }
.bell + .userbox { margin-left: 0; }
.bell-btn { position: relative; background: none; border: 0; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.bell-count {
  position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.bell-menu {
  position: absolute; right: 0; top: 40px; width: 360px; max-width: 92vw; max-height: 70vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16,24,40,.12); z-index: 30;
}
.bell-count.soft { background: var(--muted); }
.bell-menu .btabs { display: flex; border-bottom: 1px solid var(--line); }
.bell-menu .btabs button { flex: 1; font: inherit; font-size: 13px; padding: 8px 0; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; }
.bell-menu .btabs button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.bell-menu .btabs b { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; margin-left: 5px; font-weight: 600; }
.bell-menu .btabs b.g { background: #e9edf1; color: var(--muted); }
.bell-menu .head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.bell-menu .item { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); cursor: pointer; }
.bell-menu .item:hover { background: var(--bg); text-decoration: none; }
.bell-menu .item { border-left: 3px solid transparent; opacity: .6; }
.bell-menu .item.unread { background: #eef4ff; border-left-color: var(--accent); opacity: 1; }
.bell-menu .item.unread b { color: var(--accent); }
.bell-menu .item .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.bell-menu .item .t { font-size: 12px; color: var(--muted); }
.bell-menu .item .x { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- チャット ---- */
.chat { display: flex; flex-direction: column; gap: 4px; }
.msg { padding: 10px 12px; border-radius: 8px; }
.msg:hover { background: #fafbfc; }
.msg.target { background: #fff8e1; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-head .btn.link { margin-left: auto; border: 0; background: none; color: var(--muted); visibility: hidden; }
.msg:hover .msg-head .btn.link { visibility: visible; }
.msg-text { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.mention { background: #e8f0fe; color: #1a56db; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.msg-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; position: relative; }
.msg-foot .foot-a, .msg-foot .foot-b { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* スマホ: 1 行目に 後から通知・カレンダー・Google ToDo、2 行目に スタンプ・スレッドで返信。誤タップ防止に間隔を広く */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .msg-foot { flex-direction: column-reverse; align-items: flex-start; gap: 10px; margin-top: 6px; }
  .msg-foot .foot-a, .msg-foot .foot-b { gap: 16px; }
  .msg-foot .foot-b a, .msg-foot .foot-a > a { padding: 4px 0; }
}
.remind-link { color: var(--muted); }
.remind-on { color: var(--accent); }
.remind-pop {
  position: absolute; left: 0; top: 24px; z-index: 10; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; max-width: 380px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.remind-pop .head { width: 100%; font-weight: 600; }
.remind-pop .row { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.remind-pop input { flex: 1; min-width: 0; }
.react { font: inherit; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.react.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.react-add { cursor: pointer; color: var(--muted); padding: 2px 6px; border-radius: 999px; border: 1px dashed var(--line); position: relative; }
.emoji-pop {
  position: absolute; left: 0; top: 24px; z-index: 10; display: flex; gap: 4px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.emoji-pop span { cursor: pointer; font-size: 18px; padding: 2px 4px; border-radius: 6px; }
.emoji-pop span:hover { background: var(--bg); }
.thread { margin: 6px 0 0 18px; padding-left: 12px; border-left: 3px solid var(--accent-soft); }
.thread .msg { padding: 8px 10px; }
.composer { position: relative; margin-top: 10px; }
.composer textarea { min-height: 64px; }
.composer .row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.suggest {
  position: absolute; left: 0; bottom: 100%; z-index: 10; min-width: 240px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow);
}
.suggest div { padding: 8px 12px; cursor: pointer; }
/* スマホではカードが横スクロール（overflow）になるため、入力欄の上に出る候補がカードの枠で切れて 1 人しか見えなかった → チャットのカードは枠外にはみ出せるようにする */
.card:has(.composer) { overflow: visible; }
@media (pointer: coarse) { .suggest { max-height: 45vh; overflow-y: auto; max-width: calc(100vw - 48px); } }
.suggest div:hover, .suggest div.sel { background: var(--accent-soft); }
.suggest .small { margin-left: 6px; }

/* ---- スマホ: 通知の一覧は画面幅いっぱいに（ベルの定義より後ろに置く必要がある） ---- */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .bell-menu { position: fixed; left: 8px; right: 8px; top: calc(var(--topbar-h) + 4px); width: auto; max-width: none; max-height: 75vh; }
}

/* ---- スマホ: 確認画面は上寄せにして、キーボードが出てもボタンまでスクロールできるようにする ---- */
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .modal-bg { align-items: flex-start; padding: 12px; }
  .modal { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 14px; }
  .modal .actions { flex-wrap: wrap; }
}

/* ---- 各種通知メール ---- */
.mail-details > summary { cursor: pointer; }
.mail-details .chev { display: inline; }
.mail-details:not([open]) > summary h2 { margin-bottom: 0; }
.mail-body { margin-top: 6px; }
.mail-view .pre, .mail-form textarea { font-family: inherit; }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.mail-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.vars { font-size: 12px; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.vars .k { font-weight: 600; margin-bottom: 6px; color: var(--text); }
.vars > div + div { margin-top: 5px; }
.vars code { background: #fff; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .sidenav a.pc-only { display: none; } }

/* ---- アプリ内マニュアル ---- */
.manual { max-width: 900px; line-height: 1.7; }
.manual h1 { font-size: 20px; margin: 0 0 12px; }
.manual h2 { font-size: 17px; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-soft); }
.manual h2:first-child { margin-top: 0; }
.manual h3 { font-size: 15px; margin: 18px 0 6px; }
.manual h4 { font-size: 14px; margin: 14px 0 4px; color: var(--muted); }
.manual p { margin: 6px 0 10px; }
.manual ul, .manual ol { margin: 4px 0 10px; padding-left: 22px; }
.manual li { margin: 3px 0; }
.manual table { margin: 6px 0 12px; font-size: 13px; }
.manual th { background: var(--bg); }
.manual code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.manual blockquote { margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.manual hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.manual-toc { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; }
.manual-toc b { margin-right: 4px; }
.manual-meta { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.manual-edit textarea { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5; min-height: 60vh; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .manual table { min-width: 0; } .manual { line-height: 1.6; } }
.manual pre { background: var(--bg); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; overflow: auto; margin: 6px 0 12px; }
.manual blockquote.warn { border-left-color: #f59e0b; background: #fff4e5; }

/* ---- チャット添付 ---- */
.atts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; align-items: flex-start; }
.att.img img { max-width: 260px; max-height: 200px; border-radius: 8px; border: 1px solid var(--line); display: block; background: var(--bg); }
.att.file { display: inline-flex; gap: 10px; align-items: center; padding: 6px 12px 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); max-width: 280px; }
.att.file:hover { text-decoration: none; background: var(--accent-soft); }
.att-ic { flex: none; width: 30px; height: 38px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: .02em; background: #eceff3; color: #5f6b7a; }
.att-ic[data-ext="pdf"] { background: #fcebeb; color: #a32d2d; }
.att-ic[data-ext="xls"] { background: #eaf3de; color: #3b6d11; }
.att-ic[data-ext="doc"] { background: #e6f1fb; color: #185fa5; }
.att-ic[data-ext="ppt"] { background: #faeeda; color: #854f0b; }
.att-ic[data-ext="zip"] { background: #eeedfe; color: #534ab7; }
.att-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.att-nm { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att.err { color: var(--danger); }
.att.img { cursor: zoom-in; display: inline-block; position: relative; line-height: 0; }
/* 描き込み（修正案）の重ね表示 */
.annot-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.att.img.annot img { border-color: #e24b4a; }
/* 添付画像の拡大表示（アプリ内） */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(16, 24, 40, .82); display: flex; align-items: center; justify-content: center; padding: 48px 56px 56px; }
.lightbox .lb-wrap { position: relative; display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 104px); object-fit: contain; border-radius: 6px; background: #fff; cursor: zoom-out; }
.lightbox .lb-draw-btn { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 13px; }
.lightbox .lb-draw-btn:hover { background: rgba(255,255,255,.28); }
/* 描き込みモード */
.lightbox.drawing { padding-top: 60px; }
.lightbox.drawing img { cursor: default; }
.lightbox.drawing .lb-nav, .lightbox.drawing .lb-cap { display: none; }
.lightbox .lb-draw { pointer-events: auto; cursor: crosshair; touch-action: none; }
.lightbox .lb-draw text { cursor: move; }
.lightbox, .lightbox .lb-draw, .lightbox .lb-draw text { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }   /* タッチで文字が選択状態にならないように */
body.drawing-mode, body.drawing-mode * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }   /* 描き込み中はページ全体で選択を止める */
body.drawing-mode .lb-textrow input { -webkit-user-select: text !important; user-select: text !important; }   /* 文字の入力欄だけは例外 */
.lightbox.drawing .lb-wrap { touch-action: none; }
.composer .chip.annot-chip { background: #fcebeb; color: #a32d2d; }
.ic-clip { vertical-align: -2px; margin-right: 2px; }

/* ダッシュボード */
.home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hcard { padding: 12px 14px 10px; margin-bottom: 14px; }
.hcard h2 { font-size: 15px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.hcard h2 .cnt { font-size: 12px; font-weight: 400; color: var(--muted); }
.hcard h2 .cnt:empty { display: none; }
.hcard h2 .small { margin-left: auto; font-weight: 400; }
.hrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f2f4; color: inherit; min-width: 0; }
.hrow:first-of-type { border-top: 0; }
.hrow:hover { text-decoration: none; background: var(--bg); }
.hrow .hn { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hrow .hn .crumb { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .hn b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .hn .x { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow .hdue { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.hrow .hdue.today { color: var(--accent); font-weight: 700; }
.hrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.hrow .wtag { margin-left: 0; }
.hscroll { max-height: 138px; overflow-y: auto; padding-right: 4px; }   /* 3 行分。それ以上はスクロール */
.hnum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hnum a { background: var(--bg); border-radius: 8px; padding: 8px 6px; text-align: center; color: inherit; }
.hnum a:hover { text-decoration: none; background: var(--accent-soft); }
.hnum b { display: block; font-size: 22px; font-weight: 500; line-height: 1.1; }
.hnum small { color: var(--muted); font-size: 11px; }
.hnum a.warn b { color: var(--danger); }
.empty.small { padding: 8px 0; font-size: 12px; }
/* Inbox */
.inbox-add { display: flex; gap: 8px; margin-bottom: 8px; }
.inbox-add input { flex: 1; min-width: 0; }
.inbox-tabs { display: flex; gap: 4px; margin-bottom: 4px; }
.inbox-tabs button { border: 0; background: transparent; padding: 4px 8px; font-size: 12px; color: var(--muted); border-radius: 6px; cursor: pointer; }
.inbox-tabs button.on { background: var(--bg); color: var(--text); font-weight: 500; }
.irow { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid #f0f2f4; font-size: 13px; }
.irow:first-child { border-top: 0; }
.irow input[type=checkbox] { margin: 2px 0 0; width: 16px; height: 16px; flex: none; cursor: pointer; }
.irow .itx { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.irow.done .itx { color: var(--muted); text-decoration: line-through; }
.irow .idate { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
.irow .x { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0 2px; }
.inbox-page { max-width: 640px; }
.inbox-page .inbox-add input { font-size: 16px; padding: 10px 12px; }
.page-head .chk { display: inline-flex; align-items: center; gap: 4px; }
/* ホーム画面用の Inbox 単独ページ（/inbox/） */
body.inbox-only .topbar .spacer { flex: 1; }
body.inbox-only #view { max-width: 680px; margin: 0 auto; padding: 16px; }
body.inbox-only .login-box { padding: 24px 0; text-align: center; }
.page-head .views { display: contents; }
.hcol, .hcard { min-width: 0; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .home { grid-template-columns: minmax(0, 1fr); }   /* 折り返さない文字があっても列が画面幅を超えないように */
  .hnum b { font-size: 20px; }
  /* 管理画面の見出し行（スマホ）: 1 行目 = 見出し＋クライアント登録、2 行目 = カンバン / ガント / 担当者別、3 行目 = 検索 */
  .page-head.dash h1 { order: 1; }
  .page-head.dash .spacer { order: 2; }
  .page-head.dash .btn.primary { order: 3; }
  .page-head.dash .views { display: flex; gap: 8px; flex-basis: 100%; order: 4; }
  .page-head.dash .head-search { order: 5; flex-basis: 100%; width: auto; }
}
.lb-tools { position: absolute; top: 0; left: 0; right: 56px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; color: #fff; font-size: 13px; }
.lightbox .lb-x { z-index: 3; }
.lb-tools .lb-textrow { width: 100%; display: flex; gap: 6px; align-items: center; }
.lb-tools .lb-textrow[hidden] { display: none; }
.lb-tools .lb-textrow input { flex: 1; width: auto; max-width: 420px; font-size: 16px; }
.lightbox.drawing img { max-height: calc(100vh - 150px); }
.lb-tools .lb-tg { display: inline-flex; gap: 6px; align-items: center; }
.lb-tools .lb-right { margin-left: auto; }
.lb-tools button { border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.lb-tools button.on { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.7); }
.lb-tools button.primary { background: var(--accent); border-color: var(--accent); }
.lb-tools .lb-colors button { width: 22px; height: 22px; border-radius: 50%; padding: 0; border: 2px solid transparent; }
.lb-tools .lb-colors button.on { border-color: #fff; }
.lb-tools input { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: #fff; border-radius: 6px; padding: 4px 8px; font-size: 13px; width: 180px; }
.lb-tools input::placeholder { color: rgba(255,255,255,.6); }
@media (max-width: 720px) { .lb-tools { right: 0; padding-right: 52px; } .lb-tools .lb-right { margin-left: 0; } .lightbox.drawing { padding-top: 150px; align-items: flex-start; } .lightbox.drawing img { max-height: calc(100vh - 200px); } }
.lightbox .lb-x, .lightbox .lb-nav { position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; line-height: 40px; text-align: center; }
.lightbox .lb-x:hover, .lightbox .lb-nav:hover { background: rgba(255,255,255,.28); }
.lightbox .lb-x { top: 12px; right: 12px; font-size: 18px; }
.lightbox .lb-nav { top: 50%; margin-top: -20px; font-size: 30px; line-height: 38px; }
.lightbox .lb-prev { left: 10px; }
.lightbox .lb-next { right: 10px; }
.lightbox .lb-cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-size: 13px; display: flex; gap: 14px; justify-content: center; align-items: center; padding: 0 56px; }
.lightbox .lb-name { max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .lb-open { color: #fff; text-decoration: underline; }
@media (max-width: 720px) { .lightbox { padding: 44px 8px 48px; } .lightbox .lb-nav { width: 34px; height: 34px; margin-top: -17px; font-size: 24px; line-height: 32px; } }
.composer .files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.composer .chip { background: var(--bg); border-radius: 14px; padding: 2px 4px 2px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.composer .chip .x { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 0 6px; }
.composer .row-btns { display: flex; gap: 6px; align-items: center; flex: none; }
.composer .row-btns .btn { white-space: nowrap; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .composer .row > .muted.small { display: none; }   /* 「@ で宛先を指定、Shift+Enter で送信…」はスマホ・タブレットでは出さない */
  .composer .row { justify-content: flex-end; }
}
.composer label.btn { margin: 0; cursor: pointer; }
.composer.drag { outline: 2px dashed var(--accent); border-radius: 8px; }
.page-head .head-search { width: 200px; padding: 6px 10px; font-size: 13px; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .page-head .head-search { width: 100%; order: 10; } }
.ccard[hidden] { display: none; }
.ava { display: inline-block; border-radius: 50%; object-fit: cover; vertical-align: middle; background: #eef1f4; }
.ava.ini { text-align: center; font-size: 11px; font-weight: 600; color: #475569; }
.ccard .cm.who { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ccard .cm.who > span { display: inline-flex; align-items: center; gap: 5px; }
.inline-form .period { display: flex; align-items: center; gap: 4px; }
.inline-form .period input { width: auto; }
.inline-form .tilde { color: var(--muted); }

/* ---- 日付の選択カレンダー（PC 用） ---- */
@media (pointer: fine) { input[type=date]::-webkit-calendar-picker-indicator { display: none; } input[type=date] { cursor: pointer; } }
.dp { position: absolute; z-index: 60; width: 252px; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 24, 40, .18); font-size: 13px; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-head b { font-size: 14px; }
.dp-head button { font: inherit; width: 30px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.dp-head button:hover { background: var(--bg); }
.dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.dp-dow span:nth-child(6) { color: #2563eb; } .dp-dow span:nth-child(7) { color: var(--danger); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-grid button { font: inherit; height: 30px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.dp-grid button:hover { background: var(--accent-soft); }
.dp-grid button.we { color: var(--muted); }
.dp-grid button.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
.dp-grid button.sel { background: var(--accent); color: #fff; }
.dp-grid button:disabled { color: #cfd5dc; cursor: default; background: transparent; }
.dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.dp-foot button { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.dp-foot button:hover { background: var(--bg); }
.dp-foot .muted { margin-left: auto; }
.who { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.tcard .card-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tcard .card-who .sep { color: var(--muted); margin-left: 4px; }
.msg-head .ava { flex: none; }
.tstrip .pbar { width: 140px; }
.tsum .pbar { display: inline-block; width: 120px; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 8px; }
.tsum .pbar i { display: block; height: 100%; background: #16a34a; }
.badge-sel { width: auto; padding: 2px 22px 2px 8px; font-size: 12px; font-weight: 600; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.badge-sel[data-s="商談中"] { background: #fff4d6; color: #8a5a00; }
.badge-sel[data-s="未着手"] { background: #f3e8ff; color: #6d28d9; }
.badge-sel[data-s="進行中"] { background: #dcecff; color: #1d4ed8; }
.badge-sel[data-s="保留"], .badge-sel[data-s="失注"] { background: #e5e7eb; color: #4b5563; }
.badge-sel[data-s="納品済"], .badge-sel[data-s="完了"] { background: #dcf5e6; color: #166534; }

/* ---- タスクのリスト（会社 → プロジェクト → タスク） ---- */
.tlist { --tl-cols: minmax(0, 1fr) repeat(4, 170px); }   /* タスク名は可変、右の 4 列は担当の幅（170px）で均等・右寄せ */
.tl-head { display: grid; grid-template-columns: var(--tl-cols); gap: 10px; padding: 8px 12px 8px 16px; background: #eef1f4; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.tl-head > span:not(:first-child), .tl-row > span:not(.tl-nm) { display: flex; justify-content: center; align-items: center; text-align: center; }
.tl-grp { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; background: #fff; }
.tl-client { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.tl-client a { color: #fff; }
.tl-client .cnt { font-size: 12px; font-weight: 400; opacity: .85; }
.tl-client .chev, .tl-proj .chev { font-size: 12px; transition: transform .15s; opacity: .8; }
.tl-grp.closed > .tl-client .chev, .tl-pj.closed > .tl-proj .chev { transform: rotate(-90deg); }
.tl-grp.closed > .tl-body, .tl-pj.closed > .tl-rows { display: none; }
.tl-proj { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; font-size: 15px; font-weight: 700; cursor: pointer; }
.tl-proj a { color: inherit; }
.tl-row { display: grid; grid-template-columns: var(--tl-cols); gap: 10px; align-items: center; padding: 6px 12px 6px 36px; border-top: 1px solid #f0f2f4; font-size: 14px; }
.tl-row:hover { background: #fafbfc; }
.tl-row .tl-nm { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-row .tl-nm a { overflow-wrap: anywhere; }
.tl-row .tl-due { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .tl-head { display: none; }
  .tl-row { grid-template-columns: minmax(0, 1fr) 100px 80px; row-gap: 4px; padding-left: 24px; }
  .tl-row > span:nth-child(3), .tl-row > span:nth-child(4) { grid-column: 1 / 4; font-size: 12px; justify-content: flex-start; }
}

/* ---- 横断検索（スタッフのみ）: PC は上部バー中央の検索窓＋その下の候補、スマホは 🔍 → 画面幅いっぱいのパネル ---- */
.search-box { position: relative; flex: 0 1 380px; margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.search-box:focus-within { background: #fff; border-color: var(--accent); }
.search-box .ico { font-size: 14px; line-height: 1; }
.search-box input { border: 0; background: none; padding: 6px 0; font-size: 14px; border-radius: 0; }
.search-box input:focus { outline: none; }
.search-box[hidden] { display: none; }
.search-dd { position: absolute; top: 42px; right: 0; width: 640px; max-width: calc(100vw - 32px); max-height: 70vh; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.3); z-index: 30; }
.search-dd[hidden] { display: none; }
.search-dim { position: fixed; inset: 0; z-index: 19; background: rgba(16, 24, 40, .4); }
.search-dim[hidden] { display: none; }
.search-box:not([hidden]) + .search-btn + .bell { margin-left: 0; }
.search-btn { display: none; background: none; border: 0; font-size: 18px; cursor: pointer; padding: 4px 8px; }
.search-ov { position: fixed; inset: 0; z-index: 40; background: rgba(16, 24, 40, .45); display: flex; align-items: flex-start; justify-content: center; padding: 6px; }
.search-panel { width: 100%; max-height: calc(100vh - 12px); display: flex; flex-direction: column; background: var(--panel); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden; }
.search-panel .sin { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--line); }
.search-panel .sin .ico { font-size: 16px; }
.search-panel .sin input { border: 0; font-size: 17px; padding: 10px 0; background: none; border-radius: 0; }
.search-panel .sin input:focus { outline: none; }
.search-panel .sin .x { border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 10px; }
input[type=search]::-webkit-search-cancel-button { display: none; }
.slist { overflow: auto; }
.slist[hidden] { display: none; }
.srow { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--text); cursor: pointer; font-size: 13px; }
.srow:last-child { border-bottom: 0; }
a.srow:hover, .srow.on { background: var(--accent-soft); text-decoration: none; }
.srow .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.srow .nm { flex: 1; min-width: 0; overflow: hidden; }
.srow .nm small { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow mark { background: #fff3bf; color: inherit; padding: 0 1px; border-radius: 2px; }
.srow .kind { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.srow .badge { font-size: 11px; padding: 1px 7px; }
.srow .due { white-space: nowrap; }
.srow.wait { color: var(--muted); justify-content: center; cursor: default; }
.slist .empty { text-align: center; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) {
  .search-box { display: none; }
  .search-btn:not([hidden]) { display: block; margin-left: auto; }
  .search-btn:not([hidden]) + .bell { margin-left: 0; }
  .srow .due { display: none; }
}

/* ---- 担当者別（人 → 会社 → タスクのカード）---- */
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; align-items: start; }
.pcard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; box-shadow: var(--shadow); }
.pgrp { font-size: 14px; font-weight: 700; color: var(--text); background: #e9edf1; padding: 7px 14px; border-radius: 6px; margin: 22px 0 10px; }
.pgrp:first-child { margin-top: 0; }
.pcard .ph { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; cursor: pointer; list-style: none; }
.pcard .ph::-webkit-details-marker { display: none; }
.pcard .ph .chev { margin-left: auto; color: var(--muted); transition: transform .15s; }
.pcard .ph .r + .chev { margin-left: 8px; }
.pcard:not([open]) .ph .chev { transform: rotate(-90deg); }
.pcard:not([open]) .ph { margin-bottom: 0; }
.pcard .ph a.who { font-weight: 700; font-size: 15px; color: var(--text); margin-right: 6px; }
.pcard .ph a.who:hover { text-decoration: none; color: var(--accent); }
.pcard .ph .badge { font-size: 11px; padding: 1px 8px; }
.pcard .badge.over { background: #fde2e2; color: #991b1b; font-weight: 600; }
.pcard .ph .r { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pcard .cg { margin-top: 8px; }
.pcard .cg h4 { margin: 0; padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 6px 6px 0 0; }
.pcard .cg h4 .n { font-weight: 400; opacity: .85; margin-left: 4px; }
.pcard .cg .t { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border: 1px solid var(--line); border-top: 0; font-size: 13px; color: var(--text); }
.pcard .cg .t:last-child { border-radius: 0 0 6px 6px; }
.pcard .cg .t:hover { background: var(--bg); text-decoration: none; }
.pcard .cg .t .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .cg .t .nm small { color: var(--muted); margin-right: 6px; }
.pcard .cg .t .badge { font-size: 11px; padding: 1px 7px; }
.pcard .cg .t .dd { white-space: nowrap; font-size: 12px; color: var(--muted); }
.pcard .cg .t .dd.due-over { color: var(--danger); font-weight: 700; }
.pcard .none { color: var(--muted); font-size: 12px; padding: 6px 0 0; }
@media (max-width: 800px), (pointer: coarse) and (max-width: 1200px) { .pcards { grid-template-columns: 1fr; } .pcard .ph .r { margin-left: 0; width: 100%; } }