:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --border: #e2e5ea;
  --text: #1f2430;
  --muted: #6b7280;
  --primary: #2563eb;
  --primary-d: #1d4ed8;
  --ok: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --chip: #eef2ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
header.topbar {
  background: #111827;
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 52px;
}
header.topbar .brand { font-weight: 700; color: #fff; }
header.topbar nav { display: flex; gap: 16px; flex: 1; }
header.topbar nav a { color: #cbd5e1; font-size: 14px; }
header.topbar nav a:hover { color: #fff; text-decoration: none; }
header.topbar .who { font-size: 13px; color: #cbd5e1; }
main { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 24px 0 12px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: none; }
tr:hover td { background: #fafbfc; }
.chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; background: var(--chip); color: #3730a3; white-space: nowrap;
}
.chip.status-todo { background:#f1f5f9; color:#475569; }
.chip.status-in_progress { background:#dbeafe; color:#1d4ed8; }
.chip.status-review { background:#fef3c7; color:#92400e; }
.chip.status-deploy { background:#e9d5ff; color:#6b21a8; }
.chip.status-done { background:#dcfce7; color:#166534; }
.chip.pri-low { background:#f1f5f9; color:#475569; }
.chip.pri-medium { background:#e0e7ff; color:#3730a3; }
.chip.pri-high { background:#ffedd5; color:#9a3412; }
.chip.pri-urgent { background:#fee2e2; color:#991b1b; }
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 8px;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  font-size: 14px; text-decoration: none;
}
.btn:hover { background: var(--primary-d); text-decoration: none; }
.btn.secondary { background: #eef1f5; color: var(--text); }
.btn.secondary:hover { background: #e2e6eb; }
.btn.small { padding: 5px 10px; font-size: 13px; }
form.stack label { display:block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; }
form.stack input[type=text], form.stack input[type=url], form.stack input[type=date],
form.stack input[type=number], form.stack select, form.stack textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff;
}
form.stack textarea { min-height: 90px; resize: vertical; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.row-actions { display:flex; gap:10px; align-items:center; margin-top: 20px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash.success { background:#dcfce7; color:#166534; }
.flash.error { background:#fee2e2; color:#991b1b; }
.muted { color: var(--muted); }
.filters { display:flex; gap:10px; flex-wrap: wrap; align-items:flex-end; }
.filters .f { display:flex; flex-direction:column; }
.filters label { font-size:12px; color:var(--muted); }
.filters select, .filters input { padding:6px 8px; border:1px solid var(--border); border-radius:6px; }
.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:14px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; }
.card h3 { margin:0 0 4px; font-size:16px; }
.metric-row { display:flex; gap:16px; flex-wrap:wrap; margin:10px 0; }
.metric { min-width:70px; }
.metric .n { font-size:20px; font-weight:700; }
.metric .l { font-size:11px; color:var(--muted); }
.progress { height:10px; background:#eef1f5; border-radius:999px; overflow:hidden; margin-top:8px; }
.progress > span { display:block; height:100%; background:var(--ok); }
.progress.over > span { background:var(--warn); }
dl.kv { display:grid; grid-template-columns: 160px 1fr; gap:6px 12px; margin:0; }
dl.kv dt { color:var(--muted); font-size:13px; }
dl.kv dd { margin:0; }
.small { font-size: 13px; }

/* 稼働カレンダー */
.cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; margin-top:10px; max-width:420px; }
.cal-cell { aspect-ratio:1/1; border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; background:#eef1f5; color:#64748b; position:relative; }
.cal-cell .d { font-size:11px; line-height:1; }
.cal-cell .c { font-size:10px; font-weight:700; }
.cal-cell.spacer { background:transparent; }
.cal-cell.worked { background:#16a34a; color:#fff; }            /* コミットあり */
.cal-cell.nocommit { background:#fff; border:1px solid #e2e8f0; color:#cbd5e1; } /* 平日でコミットなし（中立の空き枠） */
.cal-cell.off    { background:#f1f5f9; color:#cbd5e1; }         /* 週末/祝日/休暇 */
.cal-cell.today  { background:#fff; color:#1d4ed8; border:2px solid #1d4ed8; }
.cal-cell.future { background:#fafbfc; color:#e2e8f0; }
.cal-legend { display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:middle; margin:0 2px; }
.cal-legend.worked { background:#16a34a; }
.cal-legend.nocommit { background:#fff; border:1px solid #cbd5e1; }
.cal-legend.off { background:#e2e8f0; }