/* ===== プロジェクト管理の画面の部品（style.css・themes.css の後に読み込む） =====
   色はテーマの変数（--panel・--line・--brand-2・--c1〜--c8 など）を使い、12種類のデザインで同じように見えるようにする */
:root { --zone-g: #2e9e5b; --zone-y: #d99a00; --zone-r: #d64545; --st-backlog: #8a94a0; --st-todo: #5b8fd9; --st-doing: #e08a1e; --st-review: #9b6bd6; --st-done: #2e9e5b; }
.bad { color: var(--bad); } b.bad, .num.bad { font-weight: 700; }
.inline { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { margin: 0; }
main { max-width: none; }
body[data-view="chat"] main { padding-bottom: 0; }

/* 上部バー：プロジェクトの選択 */
.project-pick { flex: 1; min-width: 0; display: flex; justify-content: flex-start; }
.pp { display: inline-flex; align-items: center; gap: 8px; max-width: 420px; min-width: 0; }
.pp-label { font-size: 11px; color: var(--top-muted, #cfe0f1); white-space: nowrap; }
.pp select { min-width: 0; max-width: 340px; background: var(--top-hover, rgba(255,255,255,.12)); color: var(--top-text, #fff); border-color: var(--top-btn-border, rgba(255,255,255,.45)); }
.pp select option { color: #1d2733; background: #fff; }
#userbox { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#userbox button { font: inherit; font-size: 12px; background: none; border: 1px solid; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
@media (max-width: 720px) { .pp-label { display: none; } .pp select { max-width: 160px; } }

/* 人のアイコン */
.avatar { --s: 24px; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; flex: none; vertical-align: middle;
  background: hsl(var(--h, 210) 55% 55%); color: #fff; font-size: calc(var(--s) * .46); font-weight: 700; line-height: 1; }
.avatar.empty { background: var(--line); color: var(--muted); }
.avatars { display: inline-flex; vertical-align: middle; }
.avatars .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--panel); } .avatars .avatar:first-child { margin-left: 0; }

/* モーダル */
dialog#modal.wide { width: min(1080px, 97vw); }
.task-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pred-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.pred-row select { flex: 1; min-width: 220px; }
.pick-users { display: flex; flex-direction: column; gap: 6px; }
/* 曜日のチェックボックス（稼働日） */
.weekday-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.weekday { position: relative; cursor: pointer; }
.weekday input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.weekday span { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-weight: 700; user-select: none; }
.weekday input:checked + span { background: var(--accent-bg); border-color: var(--brand-2, var(--brand)); color: var(--brand); }
.weekday.sun input:checked + span { color: var(--bad); } .weekday.sat input:checked + span { color: var(--c3, #1e88e5); }
.weekday input:focus-visible + span { outline: 2px solid var(--brand-2, var(--brand)); outline-offset: 1px; }
.pick-list { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.pick-list.tall { max-height: 360px; }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.pick-row[hidden] { display: none; }
.pick-row:hover { background: var(--accent-bg); }
.file-btn { display: inline-flex; align-items: center; cursor: pointer; }
.file-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; margin: 2px 4px 2px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text); text-decoration: none; font-size: 12px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip:hover { border-color: var(--brand-2); }
.file-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0 0; padding: 10px 12px; }
legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }

/* 状態 */
.st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; background: var(--st-todo); }
.st-backlog { background: var(--st-backlog); } .st-todo { background: var(--st-todo); } .st-doing { background: var(--st-doing); } .st-review { background: var(--st-review); } .st-done { background: var(--st-done); }
.prio { font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 4px; background: var(--line); color: var(--muted); }
.prio-hi .prio, .prio.prio-hi { background: var(--bad-bg); color: var(--bad); }
.prio-mid .prio, .prio.prio-mid { background: var(--warn-bg); color: var(--warn); }
.pts { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent-bg); color: var(--brand); font-size: 11px; font-weight: 800; }
.kkey { font-family: Consolas, "Courier New", monospace; font-size: 11px; color: var(--muted); white-space: nowrap; }

/* カンバン */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--accent-bg); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 220px); min-height: 200px; }
.kcol.over { border-color: var(--bad); box-shadow: inset 0 3px 0 var(--bad); }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.kcol-head .legend { margin-left: auto; } .kcol-head .legend.bad { color: var(--bad); font-weight: 700; }
.kcol-body { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kcard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.kcard:hover, .kcard:focus-visible { border-color: var(--brand-2); outline: none; }
.kcard.prio-hi { border-left-color: var(--bad); } .kcard.prio-mid { border-left-color: var(--warn); } .kcard.prio-lo { border-left-color: var(--c3, #5b9bd5); }
.kcard.dragging { opacity: .4; }
.kcard-top, .kcard-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kcard-title { font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.kcard-tags .tag { font-size: 11px; }
.kbar { height: 5px; border-radius: 3px; background: var(--track, #eef2f6); overflow: hidden; }
.kbar i { display: block; height: 100%; background: var(--c1, #2e75b6); border-radius: 3px; }
.kbar.big { height: 8px; margin-bottom: 2px; }
.kadd { padding: 0 8px 10px; } .kadd input { width: 100%; }
.kmore { padding: 0 12px 10px; }
.drop-mark { height: 4px; border-radius: 2px; background: var(--brand-2); margin: -2px 0; flex: none; }
@media (max-width: 860px) { .kanban { grid-template-columns: repeat(4, 260px); } }

/* バックログ */
.bl-add { display: flex; gap: 8px; padding: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bl-add #bl-title { flex: 1; min-width: 220px; }
.bl-list { display: flex; flex-direction: column; }
.bl-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.bl-row:hover { background: var(--accent-bg); }
.bl-row.dragging { opacity: .4; }
.grip { cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; }
.bl-no { width: 22px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bl-title { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-list .drop-mark { margin: 0; }

/* WBS・ガントチャート */
.btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:first-child { border-radius: 6px 0 0 6px; } .btn-group .btn:last-child { border-radius: 0 6px 6px 0; }
.wbs-summary { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 10px; }
.kv { display: inline-flex; align-items: baseline; gap: 6px; } .kv .k { font-size: 12px; color: var(--muted); }
.buf-chip { padding: 3px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.buf-chip .badge, .buf-dot { color: #fff; }
.zone-green .badge, .buf-dot.zone-green { background: var(--zone-g); } .zone-yellow .badge, .buf-dot.zone-yellow { background: var(--zone-y); } .zone-red .badge, .buf-dot.zone-red { background: var(--zone-r); }
.buf-dot { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.gantt-wrap { overflow: auto; max-height: calc(100vh - 250px); position: relative; }
.gantt { display: grid; grid-template-rows: 40px auto; width: max-content; }
.g-lh, .g-ch { position: sticky; top: 0; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); height: 40px; }
.g-lh { left: 0; z-index: 6; display: flex; align-items: flex-end; padding-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--muted); border-right: 1px solid var(--line); }
.g-lh span { flex: none; padding: 0 4px; }
.g-lb { position: sticky; left: 0; z-index: 3; background: var(--panel); border-right: 1px solid var(--line); }
.g-row { position: absolute; left: 0; right: 0; height: 30px; display: flex; align-items: center; font-size: 12px; border-bottom: 1px solid transparent; cursor: default; }
.g-row:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, var(--panel)); }
.g-row:hover { background: var(--accent-bg); }
.g-row.sel { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--brand-2); }
.g-row.sum { font-weight: 700; }
.g-row.crit .c-title a { color: var(--bad); }
.g-row.late .c-d:nth-of-type(5) { color: var(--bad); font-weight: 700; }
.g-row > span { flex: none; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-wbs { width: 58px; color: var(--muted); font-variant-numeric: tabular-nums; } .c-title { width: 230px; display: flex; align-items: center; gap: 2px; }
.c-title a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; } .c-title a:hover { text-decoration: underline; color: var(--brand-2); }
.c-who { width: 74px; } .c-d { width: 54px; font-variant-numeric: tabular-nums; } .c-n { width: 40px; text-align: right; font-variant-numeric: tabular-nums; } .c-n:nth-of-type(7) { width: 52px; } .c-preds { width: 66px; color: var(--muted); }
.fold { border: 0; background: none; cursor: pointer; color: var(--muted); width: 16px; padding: 0; font-size: 11px; } .fold-sp { display: inline-block; width: 16px; flex: none; }
.g-cb svg, .g-ch svg { display: block; }
.g-month { font-size: 11px; font-weight: 700; fill: var(--text); } .g-day { font-size: 10px; fill: var(--muted); } .g-day.off { fill: var(--bad); opacity: .7; }
.g-mline { stroke: var(--line); } .g-off { fill: color-mix(in srgb, var(--text) 6%, transparent); } .g-stripe { fill: color-mix(in srgb, var(--text) 3%, transparent); } .g-selrow { fill: var(--accent-bg); }
.g-today { stroke: var(--bad); stroke-width: 2; } .g-deadline { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .6; }
.g-bar { cursor: pointer; } .g-bar .g-base { fill: color-mix(in srgb, var(--st-todo) 35%, var(--panel)); stroke: var(--st-todo); stroke-width: 1; }
.g-bar .g-prog { fill: var(--st-todo); }
.g-bar.st-doing .g-base { fill: color-mix(in srgb, var(--st-doing) 30%, var(--panel)); stroke: var(--st-doing); } .g-bar.st-doing .g-prog { fill: var(--st-doing); }
.g-bar.st-review .g-base { fill: color-mix(in srgb, var(--st-review) 30%, var(--panel)); stroke: var(--st-review); } .g-bar.st-review .g-prog { fill: var(--st-review); }
.g-bar.st-done .g-base { fill: color-mix(in srgb, var(--st-done) 30%, var(--panel)); stroke: var(--st-done); } .g-bar.st-done .g-prog { fill: var(--st-done); }
.g-bar.crit .g-base { stroke: var(--bad); stroke-width: 2.2; }
.g-bar.late .g-base { stroke-dasharray: 3 2; }
.g-bar.buf .g-base { fill: url(#g-hatch); stroke-width: 1.5; } .g-hatch { stroke: var(--muted); stroke-width: 2; opacity: .5; }
.g-bar.buf.zone-green .g-base { stroke: var(--zone-g); } .g-bar.buf.zone-green .g-used { fill: var(--zone-g); opacity: .75; }
.g-bar.buf.zone-yellow .g-base { stroke: var(--zone-y); } .g-bar.buf.zone-yellow .g-used { fill: var(--zone-y); opacity: .75; }
.g-bar.buf.zone-red .g-base { stroke: var(--zone-r); } .g-bar.buf.zone-red .g-used { fill: var(--zone-r); opacity: .75; }
.g-handle { fill: transparent; cursor: ew-resize; }
.g-ms path { fill: var(--c4, #ffc000); stroke: var(--text); stroke-width: 1; } .g-ms.crit path { stroke: var(--bad); stroke-width: 2.2; } .g-ms.done path { fill: var(--st-done); }
.g-sum rect { fill: var(--text); opacity: .75; } .g-sum path { fill: var(--text); opacity: .75; } .g-sum .g-sum-p { fill: var(--c4, #ffc000); opacity: 1; }
.g-fc { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .8; }
.g-label { font-size: 11px; fill: var(--muted); pointer-events: none; }
.g-link { fill: none; stroke: var(--muted); stroke-width: 1.3; opacity: .8; } .g-link.crit { stroke: var(--bad); stroke-width: 2; opacity: 1; }
.g-arrowhead { fill: var(--muted); } .g-arrowhead.crit { fill: var(--bad); }
.gantt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.gantt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg { display: inline-block; width: 22px; height: 10px; border-radius: 3px; }
.lg.bar { background: linear-gradient(90deg, var(--st-todo) 50%, color-mix(in srgb, var(--st-todo) 35%, var(--panel)) 50%); }
.lg.crit { border: 2px solid var(--bad); } .lg.fc { border: 1.5px dashed var(--bad); } .lg.ms { width: 10px; height: 10px; transform: rotate(45deg); background: var(--c4, #ffc000); border-radius: 1px; }
.lg.buf { background: repeating-linear-gradient(45deg, var(--zone-g) 0 3px, transparent 3px 6px); border: 1px solid var(--zone-g); } .lg.sum { height: 5px; background: var(--text); } .lg.today { width: 2px; height: 14px; background: var(--bad); }

/* ファイル */
.dropzone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; margin-bottom: 12px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--panel); color: var(--muted); }
.dropzone.on { border-color: var(--brand-2); background: var(--accent-bg); }
.dropzone span { flex: 1; }
.f-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; vertical-align: middle; border: 1px solid var(--line); }
.f-thumb-link { cursor: zoom-in; } .msg-files a[data-fv] img, [data-fv] .f-preview { cursor: zoom-in; }
/* ファイルの拡大表示（画面いっぱいの <dialog>） */
.fv { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(15, 18, 24, .95); color: #fff; display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: auto 1fr; }
.fv::backdrop { background: transparent; }
.fv-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(0, 0, 0, .45); flex-wrap: wrap; }
.fv-bar .legend { color: #cfd6e0; } .fv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-body { grid-column: 2; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 12px; }
.fv-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.fv.zoom .fv-body { align-items: flex-start; justify-content: flex-start; } .fv.zoom .fv-img { max-width: none; max-height: none; cursor: zoom-out; }
.fv-frame { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 4px; }
.fv-media { max-width: 100%; max-height: 100%; }
.fv-text { width: 100%; height: 100%; margin: 0; overflow: auto; background: #fff; color: #1d2733; padding: 14px 16px; border-radius: 4px; font: 13px/1.6 Consolas, "Meiryo UI", monospace; white-space: pre-wrap; word-break: break-all; }
.fv-none { text-align: center; color: #e8ecf2; display: grid; gap: 10px; justify-items: center; } .fv-none .legend { color: #cfd6e0; } .fv-big { font-size: 64px; }
.fv-nav { align-self: center; justify-self: center; width: 44px; height: 64px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; cursor: pointer; }
.fv-nav:hover { background: rgba(255, 255, 255, .25); } .fv-nav.prev { grid-column: 1; grid-row: 2; } .fv-nav.next { grid-column: 3; grid-row: 2; } .fv-nav[hidden] { visibility: hidden; display: block; }
@media (max-width: 600px) { .fv { grid-template-columns: 34px 1fr 34px; } .fv-nav { width: 30px; font-size: 26px; } }
.f-ico { font-size: 22px; vertical-align: middle; } .f-preview { max-width: 100%; max-height: 360px; border-radius: 6px; border: 1px solid var(--line); }
.task-files { display: flex; flex-wrap: wrap; gap: 2px; }

/* Markdown の表示 */
.md { line-height: 1.75; overflow-wrap: anywhere; }
.md h1 { font-size: 22px; margin: .6em 0 .4em; padding-bottom: 6px; border-bottom: 2px solid var(--line); } .md h2 { font-size: 18px; margin: 1.2em 0 .4em; padding-bottom: 4px; border-bottom: 1px solid var(--line); } .md h3 { font-size: 15px; margin: 1em 0 .3em; }
.md > :first-child { margin-top: 0; }
.md p { margin: .5em 0; } .md ul, .md ol { padding-left: 1.6em; margin: .4em 0; } .md li.task-item { list-style: none; margin-left: -1.3em; }
.md code { font-family: Consolas, "Courier New", monospace; background: var(--accent-bg); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.md pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; overflow: auto; } .md pre code { background: none; padding: 0; }
.md blockquote { margin: .6em 0; padding: 4px 12px; border-left: 4px solid var(--brand-2); background: var(--accent-bg); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.md-table { overflow-x: auto; margin: .6em 0; } .md table { width: auto; min-width: 50%; border: 1px solid var(--line); } .md th, .md td { border: 1px solid var(--line); padding: 5px 9px; } .md th { position: static; background: var(--accent-bg); color: var(--text); font-size: 12px; cursor: default; }
.md img { max-width: 100%; border-radius: 6px; }
.md a.task-ref { font-family: Consolas, monospace; font-size: .92em; padding: 0 4px; border-radius: 4px; background: var(--accent-bg); text-decoration: none; }
.md a.wiki-link { border-bottom: 1px dashed; text-decoration: none; }
.mention { color: var(--brand); background: var(--accent-bg); padding: 0 3px; border-radius: 4px; font-weight: 700; } .mention.me { background: var(--warn-bg); color: var(--warn); }

/* Wiki */
.wiki { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; align-items: start; }
.wiki-side { position: sticky; top: 64px; max-height: calc(100vh - 140px); display: flex; flex-direction: column; }
.wiki-side-tools { padding: 10px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); } .wiki-side-tools input { width: 100%; min-width: 0; }
.wiki-tree { overflow: auto; padding: 6px; }
.wiki-item { display: block; padding: 5px 8px; border-radius: 6px; color: var(--text); text-decoration: none; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-item:hover { background: var(--accent-bg); } .wiki-item.on { background: var(--accent-bg); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand-2); }
.wiki-tree { min-height: 60px; flex: 1; }
.wiki-item[draggable="true"] { cursor: grab; }
.wiki-item.dragging { opacity: .4; }
/* 落とす位置の印：上の線＝その前、下の線＝その後ろ、枠＝その子ページに */
.wiki-item.drop-before { box-shadow: inset 0 3px 0 var(--brand-2); }
.wiki-item.drop-after { box-shadow: inset 0 -3px 0 var(--brand-2); }
.wiki-item.drop-inside { background: var(--accent-bg); outline: 2px dashed var(--brand-2); outline-offset: -2px; }
.wiki-hint { margin: 0; padding: 8px 10px; border-top: 1px solid var(--line); }
.wiki-main { padding: 16px 22px 22px; min-height: 60vh; }
.wiki-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.wiki-head h2 { margin: 0; font-size: 22px; }
.wiki-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } .ver-link { font-weight: 700; }
/* 保存するときに書く更新履歴の欄 */
.wiki-change { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; }
.wiki-change legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.wiki-change .field.error input { border-color: var(--bad); }
.wiki-change .grow-area { width: 100%; min-height: 52px; max-height: 50vh; resize: vertical; line-height: 1.5; }
/* 別ウィンドウ（更新履歴・プレビュー） */
.popup-win { margin: 0; padding: 18px 22px; background: var(--bg); color: var(--text); }
.popup-head { display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.popup-head h1 { margin: 2px 0 0; font-size: 20px; }
.change-log td { vertical-align: top; } .change-log td:nth-child(5), .change-log td:nth-child(6) { min-width: 180px; white-space: pre-wrap; }
@media print { .popup-head .btn { display: none; } .popup-win { padding: 0; } } .crumbs { font-size: 12px; color: var(--muted); } .crumbs a { color: var(--muted); }
.wiki-children { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line); } .wiki-children h3 { font-size: 13px; color: var(--muted); }
.wiki-edit { display: flex; flex-direction: column; gap: 10px; }
.md-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.wiki-tools-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.md-tool { min-width: 30px; } .md-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }
.md-color-a { font-weight: 800; text-decoration: underline 3px; text-decoration-color: #e53935; text-underline-offset: 2px; }
/* 文字色を選ぶ小さな画面 */
.color-pop { position: fixed; z-index: 1000; width: 252px; padding: 10px; display: grid; gap: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.18)); }
.color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.color-sw { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(0,0,0,.15); background: var(--c); cursor: pointer; padding: 0; }
.color-sw:hover, .color-sw:focus-visible { outline: 2px solid var(--brand-2, var(--brand)); outline-offset: 1px; }
.color-custom { display: flex; gap: 6px; align-items: center; }
.color-custom input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.color-hex { flex: 1; min-width: 0; font-family: Consolas, monospace; text-transform: lowercase; } .color-hex.bad { border-color: var(--bad); outline-color: var(--bad); }
.color-note { font-size: 11px; }
/* 行数・ページを選ぶ小さな画面（書式のボタン） */
.md-count { width: 80px; } .md-count.bad { border-color: var(--bad); }
.md-pop { width: 280px; }
.md-page-list { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.md-page-list button { text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; padding: 6px 8px; cursor: pointer; }
.md-page-list button:last-child { border-bottom: 0; } .md-page-list button:hover, .md-page-list button:focus-visible { background: var(--accent-bg); }
/* チャットの中のチェックの項目 */
.msg-body .task-item { list-style: none; margin-left: -1.2em; }
/* チャットの空白行（1行ぶん空ける） */
.md .md-gap { height: 1.2em; }
.wiki-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiki-split textarea { min-height: 62vh; font-family: Consolas, "Courier New", "Meiryo UI", monospace; font-size: 13px; line-height: 1.6; resize: vertical; }
.wiki-preview { border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; max-height: 62vh; overflow: auto; background: var(--bg); }
.tpl-group { font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tpl-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; }
.tpl-card:hover { border-color: var(--brand-2); background: var(--accent-bg); }
.wiki-hist { display: grid; grid-template-columns: 220px 1fr; gap: 12px; min-height: 50vh; }
.wh-list { display: flex; flex-direction: column; gap: 4px; overflow: auto; max-height: 65vh; }
.wh-item { text-align: left; display: flex; flex-direction: column; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; } .wh-item.on { border-color: var(--brand-2); background: var(--accent-bg); }
.wh-view { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; overflow: auto; max-height: 65vh; }
@media (max-width: 900px) { .wiki { grid-template-columns: 1fr; } .wiki-side { position: static; max-height: 260px; } .wiki-split { grid-template-columns: 1fr; } .wiki-hist { grid-template-columns: 1fr; } }

/* チャット */
.chat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; height: calc(100vh - 92px); }
.chat.with-thread { grid-template-columns: 250px minmax(0, 1fr) 360px; }
.chat-thread { display: none; } .chat.with-thread .chat-thread { display: flex; flex-direction: column; min-height: 0; }
.chat-side, .chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-search { padding: 10px; border-bottom: 1px solid var(--line); } .chat-search input { width: 100%; min-width: 0; }
.chat-rooms { overflow-y: auto; padding: 6px 6px 12px; }
.ch-sec { margin-top: 6px; } .ch-sec-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.ch-archived > summary { cursor: pointer; justify-content: flex-start; } .ch-room.dim { opacity: .7; }
.ch-room { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; color: var(--text); text-decoration: none; }
.ch-room:hover { background: var(--accent-bg); } .ch-room.on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--brand-2); } .ch-room.unread .ch-name { font-weight: 800; }
.ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-ico { width: 20px; text-align: center; color: var(--muted); font-weight: 700; flex: none; } .ch-ico.big { font-size: 20px; width: 28px; }
.ch-badge { min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 800; text-align: center; } .ch-badge.at { background: var(--warn); }
.ch-none { padding: 2px 10px 4px; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ch-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .ch-title b { font-size: 15px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 8px 0; min-height: 0; }
.msg { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); padding: 6px 14px 6px 6px; }
.msg.compact { padding-top: 0; padding-bottom: 2px; }
.msg:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.msg-av { display: flex; justify-content: center; padding-top: 2px; } .msg-hm { visibility: hidden; font-size: 10px; padding-top: 4px; } .msg:hover .msg-hm { visibility: visible; }
.msg-meta { display: flex; gap: 8px; align-items: baseline; } .msg-body p { margin: 0; } .msg-body { line-height: 1.6; }
.msg-tools { position: absolute; right: 12px; top: -10px; display: none; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px; box-shadow: var(--shadow); }
.msg:hover .msg-tools, .msg:focus-within .msg-tools { display: flex; } .msg-tools button { font: inherit; font-size: 12px; border: 0; background: none; cursor: pointer; padding: 2px 8px; border-radius: 4px; color: var(--text); } .msg-tools button:hover { background: var(--accent-bg); }
/* リアクション：メッセージの下に「絵文字 数」を並べる。自分が付けたものは色付き。押すと付け外し */
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.react:hover:not(:disabled) { border-color: var(--brand-2); } .react:disabled { cursor: default; }
.react.mine { background: var(--accent-bg); border-color: var(--brand-2); color: var(--brand); }
.react .react-e { font-size: 15px; line-height: 1; } .react.add { color: var(--muted); padding: 0 9px; }
.react-pop { position: fixed; z-index: 1000; width: 272px; padding: 10px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.18)); display: grid; gap: 6px; }
.react-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.react-grid button { font-size: 20px; line-height: 1; padding: 6px 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.react-grid button:hover, .react-grid button:focus-visible { background: var(--accent-bg); }
.react-input { width: 100%; font-size: 16px; } .react-hint { font-size: 11px; }
.msg-replies { margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; background: none; color: var(--brand-2); font: inherit; font-size: 12px; font-weight: 700; padding: 3px 8px 3px 4px; border-radius: 6px; cursor: pointer; }
.msg-replies:hover { border-color: var(--line); background: var(--panel); }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .msg-img { max-width: 260px; max-height: 200px; border-radius: 6px; border: 1px solid var(--line); }
.msg-sys { display: flex; justify-content: center; gap: 8px; padding: 4px 14px; font-size: 12px; color: var(--muted); }
.msg-day, .msg-unread { display: flex; align-items: center; gap: 10px; margin: 10px 14px; font-size: 11px; font-weight: 700; color: var(--muted); }
.msg-day::before, .msg-day::after, .msg-unread::before, .msg-unread::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.msg-unread { color: var(--bad); } .msg-unread::before, .msg-unread::after { border-color: var(--bad); }
.msg-more { text-align: center; padding: 6px; }
.msg-edit { width: 100%; min-height: 60px; }
.compose { position: relative; border-top: 1px solid var(--line); padding: 8px 12px 10px; }
.compose textarea { width: 100%; resize: none; min-height: 44px; max-height: 200px; display: block; }
/* 「Aa 書式」：書式のボタンを出し、入力欄を広げる（右下をつかんで上下に広げられる） */
.compose-tools { display: none; padding-bottom: 6px; }
.compose.rich .compose-tools { display: flex; }
.compose.rich textarea { min-height: 160px; max-height: 60vh; resize: vertical; }
.compose-rich-btn.on { background: var(--accent-bg); border-color: var(--brand-2, var(--brand)); color: var(--brand); }
.compose-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-bar { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.compose-off { border-top: 1px solid var(--line); padding: 14px; text-align: center; color: var(--muted); }
.mention-pop { position: absolute; bottom: 100%; left: 12px; z-index: 5; display: flex; flex-direction: column; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 4px; }
.mention-pop[hidden] { display: none; }
.mention-pop button { display: flex; align-items: center; gap: 6px; text-align: left; border: 0; background: none; color: var(--text); padding: 5px 8px; border-radius: 5px; cursor: pointer; font: inherit; } .mention-pop button.on, .mention-pop button:hover { background: var(--accent-bg); }
.ch-list { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ch-list-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); } .ch-list-row:last-child { border-bottom: 0; } .ch-list-main { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .chat.with-thread { grid-template-columns: 200px minmax(0, 1fr) 300px; } }
@media (max-width: 860px) { .chat, .chat.with-thread { grid-template-columns: minmax(0, 1fr); height: auto; } .chat-side { max-height: 220px; } .chat-main { height: 70vh; } .chat.with-thread .chat-main { display: none; } .chat-thread { height: 75vh; } }

/* ダッシュボード */
a.card { color: inherit; text-decoration: none; } a.card:hover { border-color: var(--brand-2); }
.card .value.warn { color: var(--warn); }
.alert-bar { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 10px; } .alert-bar.bad { background: var(--bad-bg); color: var(--bad); } .alert-bar.warn { background: var(--warn-bg); color: var(--warn); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.ann-list, .dl, .todo-list { list-style: none; margin: 0; padding: 4px 0; }
.ann button { width: 100%; text-align: left; font: inherit; color: var(--text); border: 0; background: none; padding: 9px 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ann button:hover { background: var(--accent-bg); }
.dl { max-height: 360px; overflow: auto; }
.dl-row { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; border-bottom: 1px solid var(--line); } .dl-row:hover { background: var(--accent-bg); } .dl-row:last-child { border-bottom: 0; }
.dl-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 長い一覧：最初の数件だけ出し、「▽ さらに表示」で残りを開く（開いたら枠の中でスクロール） */
.fold-list:not(.open) > [data-more] { display: none; }
.fold-list.open { max-height: 360px; overflow: auto; }
.fold-btn { display: block; width: 100%; padding: 7px 14px; border: 0; border-top: 1px dashed var(--line); background: none; color: var(--brand); font: inherit; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; }
.fold-btn:hover { background: var(--accent-bg); }
.section-title .spacer { flex: 1; }
.section-title:has(.spacer) { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.badge.info { background: var(--accent-bg); color: var(--brand); }
/* 新しく追加されたタスク（ダッシュボードのいちばん上） */
.panel.new-tasks { margin-bottom: 16px; border-left: 4px solid var(--brand-2, var(--brand)); }
/* お知らせ（Archive） */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-month { padding: 8px 14px 4px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg, transparent); border-bottom: 1px solid var(--line); }
.notice-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 14px; border-bottom: 1px solid var(--line); }
.notice-row.ended .notice-open b { color: var(--muted); font-weight: 600; }
.notice-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.notice-open:hover b { text-decoration: underline; }
.notice-snip { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-grid .inner { padding: 10px 14px 14px; }
.todo-add { display: flex; gap: 6px; } .todo-add #td-text { flex: 1; min-width: 0; }
.todo-list { max-height: 300px; overflow: auto; margin-top: 6px; }
.todo-list li { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); } .todo-list li label { flex: 1; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.todo-list li.done span { text-decoration: line-through; color: var(--muted); }
.icon-btn.small { font-size: 16px; }

/* 裏ダッシュボード */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.kpi .label { font-size: 12px; color: var(--muted); font-weight: 700; } .kpi .value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .kpi .note { font-size: 11px; color: var(--muted); }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 16px; }
.ins-grid .inner { padding: 12px 14px 14px; }
.ins-grid > *, .dash-grid > *, .kpis > * { min-width: 0; }
@media (max-width: 1100px) { .ins-grid { grid-template-columns: minmax(0, 1fr); } }
.chart { position: relative; } .chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.ch-grid { stroke: var(--line); stroke-width: 1; } .ch-ax { font-size: 11px; fill: var(--muted); }
.ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-today { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 3; } .ch-cross { stroke: var(--muted); stroke-width: 1; }
.ch-dot { stroke: var(--panel); stroke-width: 2; } .ch-hit { fill: transparent; cursor: crosshair; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.ch-legend span { display: inline-flex; align-items: center; gap: 5px; } .ch-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.ch-legend i.zg { background: color-mix(in srgb, var(--zone-g) 40%, transparent); } .ch-legend i.zy { background: color-mix(in srgb, var(--zone-y) 40%, transparent); } .ch-legend i.zr { background: color-mix(in srgb, var(--zone-r) 40%, transparent); }
.ch-tip { position: absolute; z-index: 5; min-width: 170px; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; }
.ch-tip div { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .ch-tip div b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; } .ch-tip i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.zone-g { fill: color-mix(in srgb, var(--zone-g) 22%, transparent); } .zone-y { fill: color-mix(in srgb, var(--zone-y) 24%, transparent); } .zone-r { fill: color-mix(in srgb, var(--zone-r) 22%, transparent); }
.fv-dot { fill: var(--text); stroke: var(--panel); stroke-width: 2; } .fv-label { font-size: 11px; fill: var(--text); font-weight: 700; }
.buf-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.stack-bar { display: flex; gap: 2px; height: 22px; border-radius: 4px; overflow: hidden; } .stack-bar span { display: block; min-width: 3px; }
table.mini { margin-top: 12px; width: auto; } table.mini th { position: static; text-align: left; padding: 4px 14px 4px 0; cursor: default; } table.mini td { padding: 4px 0; border-bottom: 1px solid var(--line); }
table.heat td, table.heat th { text-align: center; } table.heat td:first-child { text-align: left; }
.heat-cell { background: color-mix(in srgb, var(--c1, #2e75b6) calc(var(--a) * 100%), transparent); font-variant-numeric: tabular-nums; font-size: 12px; min-width: 64px; }
.heat-cell.over { background: color-mix(in srgb, var(--zone-r) calc(var(--a) * 100%), transparent); color: #fff; font-weight: 800; }
.hbars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hbar-row { display: grid; grid-template-columns: 150px minmax(120px, 1fr) auto; gap: 10px; align-items: center; }
.hbar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { display: flex; flex-direction: column; gap: 2px; } .hbar-track i { display: block; height: 8px; border-radius: 0 4px 4px 0; min-width: 2px; }
@media (max-width: 700px) { .ins-grid, .dash-grid { grid-template-columns: 1fr; } .hbar-row { grid-template-columns: 110px 1fr; } .hbar-row .legend { grid-column: 1 / -1; } }

/* 設定 */
.lists-main .inner { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.lists-main textarea { min-height: 260px; }