:root {
  --bg: #14161a;
  --pane: #1a1d23;
  --pane2: #20242c;
  --line: #2c313b;
  --fg: #e6e9ef;
  --dim: #8f98a8;
  --accent: #7aa2f7;
  --user: #7aa2f7;
  --work: #9ece6a;
  --idle: #3d4350;
  --warn: #e0af68;
  --cmd: #bb9af7;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.5 "Segoe UI", "Yu Gothic UI", system-ui, sans-serif;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--pane);
  border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 15px; letter-spacing: .04em; }
header .sub { color: var(--dim); font-size: 11px; }
header .spacer { flex: 1; }
.chk { color: var(--dim); user-select: none; cursor: pointer; }

button, .btn {
  background: var(--pane2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }

main { flex: 1; display: flex; min-height: 0; }

.pane { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); }
#projects { width: 220px; flex: none; resize: horizontal; overflow: hidden; }
#sessions { width: 330px; flex: none; resize: horizontal; overflow: hidden; }
#detail { flex: 1; border-right: none; }

.pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--dim);
  text-transform: uppercase;
  background: var(--pane);
  border-bottom: 1px solid var(--line);
}
.pane-head > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#detail-title { text-transform: none; }  /* タイトルやパスをそのまま出す */
#filter {
  flex: 1 1 120px;
  min-width: 80px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--fg);
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
}

.scroll { flex: 1; overflow: auto; }

/* プロジェクト一覧 */
#project-list { list-style: none; margin: 0; padding: 0; overflow: auto; }
#project-list li { padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
#project-list li:hover { background: var(--pane2); }
#project-list li.sel { background: var(--pane2); box-shadow: inset 3px 0 var(--accent); }
#project-list .p-path { font-size: 12px; word-break: break-all; }
#project-list .p-meta { color: var(--dim); font-size: 11px; }

/* セッション一覧 */
table { width: 100%; border-collapse: collapse; }
#session-table tr { border-bottom: 1px solid var(--line); cursor: pointer; }
#session-table tr:hover { background: var(--pane2); }
#session-table tr.sel { background: var(--pane2); box-shadow: inset 3px 0 var(--accent); }
#session-table td { padding: 6px 10px; vertical-align: top; }
.s-title { font-size: 12.5px; margin-bottom: 2px; }
.s-meta { color: var(--dim); font-size: 11px; display: flex; gap: 10px; flex-wrap: wrap; }
.s-when { white-space: nowrap; }

/* 詳細 */
#detail-body { padding: 0 0 40px; }
.empty, .loading { color: var(--dim); padding: 20px; }
.err { color: #f7768e; padding: 20px; white-space: pre-wrap; }

.sum {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 14px;
  background: var(--pane);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
}
.sum div { display: flex; flex-direction: column; }
.sum .k { color: var(--dim); font-size: 10.5px; letter-spacing: .06em; }
.sum .v { font-size: 13px; }

#turns { width: 100%; border-collapse: collapse; }
#turns th {
  position: sticky;
  top: 0;
  background: var(--pane);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-weight: 500;
  font-size: 11px;
  text-align: left;
  padding: 6px 8px;
  white-space: nowrap;
  z-index: 1;
}
#turns td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
#turns tr:hover td { background: var(--pane2); }
#turns .num, #turns .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#turns .time { font-variant-numeric: tabular-nums; white-space: nowrap; }
#turns .done { color: var(--dim); }
#turns .d { color: var(--dim); font-size: 11px; margin-right: 1px; }
#turns .msg { width: 40%; min-width: 160px; cursor: pointer; }
#turns .small { color: var(--dim); font-size: 11px; }
#turns .small .u { font-size: 9px; opacity: .65; margin: 0 3px 0 1px; }
#turns .msg .txt { white-space: pre-wrap; word-break: break-word; max-height: 3em; overflow: hidden; }
#turns tr.open .msg .txt { max-height: none; }
#turns .tools { color: var(--dim); font-size: 11px; margin-top: 3px; word-break: break-all; }

.kind { font-size: 10px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--line); color: var(--dim); }
.kind.command { color: var(--cmd); border-color: var(--cmd); }
.kind.resume { color: var(--warn); border-color: var(--warn); }
.int { color: var(--warn); font-size: 11px; }
.ovl { color: var(--cmd); font-size: 11px; cursor: help; }

.bar { display: flex; align-items: center; gap: 2px; height: 12px; min-width: 95px; }
.bar i { display: block; height: 8px; border-radius: 2px; }
.bar .b-idle { background: var(--idle); }
.bar .b-wait { background: var(--user); }
.bar .b-work { background: var(--work); }

/* プロジェクト横断モード */
#project-list li.all { border-bottom: 2px solid var(--line); }
#project-list li.all .p-path::before { content: "▦ "; color: var(--dim); }
.s-proj { color: var(--dim); font-size: 10.5px; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 日別集計 */
.tabs { display: flex; gap: 4px; flex: none; }
.tab { padding: 2px 9px; font-size: 11px; letter-spacing: normal; text-transform: none; }
.tab.sel { color: var(--accent); border-color: var(--accent); }

.chart-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 0;
  flex-wrap: wrap;
}
.rngs { display: flex; gap: 4px; }
.rng { font-size: 11px; padding: 2px 8px; }
.rng.sel { color: var(--accent); border-color: var(--accent); }
.chart-bar .note { color: var(--dim); font-size: 10.5px; }

.chart { padding: 4px 14px 0; overflow-x: auto; }
.chart svg text.ax { fill: var(--dim); font-size: 10px; }
.chart svg text.ax.we { fill: var(--warn); }
.chart svg line.grid { stroke: var(--line); stroke-width: 1; }
.chart svg line.axis { stroke: var(--dim); stroke-width: 1; opacity: .5; }
.chart svg rect.wk { fill: #ffffff; opacity: .028; }
.chart svg rect.hit { fill: transparent; }
.chart svg rect.hit:hover { fill: #ffffff; opacity: .06; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px 2px; font-size: 11px; color: var(--dim); }
.legend .lg { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend .lg i, .pj-i i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend .lg b { color: var(--fg); font-weight: 500; }

#daily-table { margin-top: 8px; }
#daily-table th {
  position: sticky; top: 0; background: var(--pane); border-bottom: 1px solid var(--line);
  color: var(--dim); font-weight: 500; font-size: 11px; text-align: left; padding: 6px 10px; white-space: nowrap; z-index: 1;
}
#daily-table td { padding: 5px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
#daily-table tr:hover td { background: var(--pane2); }
#daily-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#daily-table .time { font-variant-numeric: tabular-nums; white-space: nowrap; }
#daily-table .time.we { color: var(--warn); }
#daily-table .d { color: var(--dim); font-size: 11px; }
#daily-table .pj { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 11px; color: var(--dim); }
.pj-i { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ガント */
.sum.flat { position: static; }
.gantt { padding: 4px 14px 0; }
.gantt .g-head {
  display: flex;
  align-items: flex-end;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.gantt .g-lab-h {
  width: var(--labw);
  flex: none;
  color: var(--dim);
  font-size: 10.5px;
  padding-bottom: 5px;
}
.gantt .g-body { display: flex; }
.gantt .g-labels { width: var(--labw); flex: none; }
.gantt .g-lab-row {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
}
.gantt .g-lab-row:nth-child(even) { background: rgba(255, 255, 255, .02); }
.gantt .g-lab-row:hover { background: var(--pane2); }
.gantt .g-lab-row.sel { box-shadow: inset 3px 0 var(--accent); }
.gantt .g-lab-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.gantt .g-when { color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gantt .g-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gantt svg text.ax { fill: var(--dim); font-size: 10px; }
.gantt svg text.ax.hi { fill: var(--fg); }
.gantt svg line.grid { stroke: var(--line); stroke-width: 1; }
.gantt svg line.day { stroke: var(--line); stroke-width: 1; }
.gantt svg line.now { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; }
.gantt svg rect.wk { fill: #ffffff; opacity: .028; }
.gantt svg rect.stripe { fill: #ffffff; opacity: .02; }
.gantt svg rect.g-hit { fill: transparent; cursor: pointer; }
.gantt svg rect.g-hit:hover { fill: #ffffff; opacity: .07; }