* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  background: #f4f6f9;
  color: #24292f;
  font-size: 14px;
}
.topbar {
  background: #005bac;  /* GMOブルー */
  color: #fff;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  flex-wrap: wrap;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.brand-logo { height: 26px; display: block; }
.brand-sub {
  font-weight: 700;
  font-size: 14px;
  border-left: 1px solid rgba(255,255,255,.45);
  padding-left: 14px;
}
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar nav a {
  color: #cfe2f3;
  text-decoration: none;
  padding: 14px 14px;
  font-weight: 600;
}
.topbar nav a:hover { color: #fff; }
.topbar nav a.active { color: #fff; border-bottom: 3px solid #fff; }
.user-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.user-menu .user-name { font-weight: 700; }
.user-menu a { color: #cfe2f3; text-decoration: none; font-weight: 600; }
.user-menu a:hover { color: #fff; }

/* ---------- ログイン画面 ---------- */
.login-body {
  background: #005bac;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-box {
  background: #fff;
  border-radius: 12px;
  padding: 32px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.login-brand {
  background: #005bac;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
  text-align: center;
}
.login-brand img { height: 24px; }
.login-box h1 { text-align: center; font-size: 18px; margin: 0 0 18px; }
.login-btn { width: 100%; margin-top: 18px; padding: 11px; font-size: 15px; }
.flash.error { background: #ffe9e6; border-color: #d5372c; color: #a02a22; }
main { max-width: 1200px; margin: 0 auto; padding: 20px; }
.flash {
  background: #e6f4ea;
  border: 1px solid #34a853;
  color: #1e6b34;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 24px 0 8px; }
.card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td {
  border: 1px solid #d8dee4;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
th { background: #eef1f5; font-weight: 700; white-space: nowrap; }
tr:hover td { background: #f6f9ff; }
a { color: #0b5cad; }
.btn {
  display: inline-block;
  background: #1a3a6b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: #12294d; }
.btn.secondary { background: #fff; color: #1a3a6b; border: 1px solid #1a3a6b; }
.btn.secondary:hover { background: #eef3fa; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.badge {
  display: inline-block;
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.badge.kakutei { background: #d3e5ff; color: #0b4d9d; }
.badge.jisshi { background: #d9f2df; color: #1e6b34; }
.badge.chosei { background: #fff0c2; color: #8a6100; }
.badge.other { background: #e8e8ec; color: #555; }
.badge.danger { background: #ffe0e0; color: #b3261e; }
.capacity-bar {
  background: #e8ecf1;
  border-radius: 6px;
  height: 18px;
  position: relative;
  overflow: hidden;
  min-width: 120px;
}
.capacity-bar .fill { background: #4d90e8; height: 100%; }
.capacity-bar .fill.full { background: #e05656; }
.capacity-bar .label {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  color: #1f2d3d;
}
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
form.inline { display: inline; }
label { font-weight: 600; display: block; margin: 10px 0 4px; }
input[type=text], input[type=date], input[type=number], input[type=email], select, textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #c3ccd6;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
textarea { resize: vertical; }
.checkline { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 600; }
.checkline input { width: 18px; height: 18px; }
.muted { color: #6b7280; font-size: 12px; }
.todo-count {
  display: inline-block;
  background: #e05656;
  color: #fff;
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}
.todo-count.zero { background: #9aa5b1; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.filter-chips a {
  border: 1px solid #c3ccd6;
  border-radius: 14px;
  padding: 3px 12px;
  text-decoration: none;
  color: #24292f;
  background: #fff;
  font-size: 13px;
}
.filter-chips a.on { background: #1a3a6b; color: #fff; border-color: #1a3a6b; }
.mail-box {
  width: 100%;
  font-family: "Segoe UI", "Meiryo", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; align-items: center; }
.kibo-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.kibo-btn {
  border: 1px solid #c3ccd6;
  border-radius: 8px;
  background: #fff;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  min-width: 190px;
}
.kibo-btn:hover { border-color: #1a3a6b; background: #f0f5ff; }
.kibo-btn .d { font-weight: 700; }
.kibo-btn.selected { border: 2px solid #0b7a3d; background: #ecf9f0; }
.kibo-btn.compact { min-width: 150px; padding: 8px 12px; }
.kibo-btn.isfull { background: #fbf1f0; border-color: #e5b8b3; }
.other-dates summary {
  cursor: pointer;
  font-weight: 700;
  color: #0b5cad;
  margin-top: 12px;
}
.other-dates summary:hover { text-decoration: underline; }

/* ---------- ダッシュボード ---------- */
.next-tour {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
@media (max-width: 900px) { .next-tour { grid-template-columns: 1fr; } }
.nt-left {
  background: #1a3a6b;
  color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.nt-left .nt-caption { font-size: 12px; font-weight: 700; color: #9fc0ec; }
.nt-left .nt-date { font-size: 21px; font-weight: 800; line-height: 1.3; }
.nt-left .nt-count { font-size: 14px; font-weight: 700; }
.nt-left .nt-count .muted { color: #b9c9e0; font-weight: 400; }
.nt-left .muted { color: #b9c9e0; }
.nt-left .nt-today { background: #ffd34d; color: #5a4500; border-radius: 6px; padding: 2px 10px; font-weight: 800; }
.nt-left .btn.secondary { background: #fff; margin-top: auto; }
.nt-right { padding: 14px 18px; }
.nt-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  text-decoration: none;
  color: #24292f;
  border: 1px solid transparent;
}
.nt-line .nt-mark { font-size: 16px; }
.nt-line .nt-name { font-weight: 800; min-width: 120px; }
.nt-line .nt-state { font-size: 13px; }
.nt-line.ok { background: #e9f7ee; border-color: #b9e6c8; }
.nt-line.ok .nt-state { color: #1e6b34; font-weight: 700; }
.nt-line.pending { background: #f2f5f9; border-color: #d8dee4; }
.nt-line.warn { background: #f6effd; border-color: #d9c6f2; }
.nt-line.warn .nt-state strong { color: #5a3a99; }
.nt-line.danger { background: #ffefec; border-color: #f3b6ae; }
.nt-line.danger .nt-state strong { color: #b3261e; }
.nt-line:hover { filter: brightness(.97); }
.nt-table { margin-top: 8px; }
.nt-table th, .nt-table td { padding: 5px 9px; font-size: 13px; }

.date-cards.compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.date-cards.compact .date-card { padding: 10px 12px; }
.date-cards.compact .dc-date { font-size: 15px; }
.date-cards.compact .dc-left { font-size: 12px; margin: 2px 0 6px; }
.date-cards.compact .dc-left strong { font-size: 15px; }
.date-cards.compact .capacity-bar { height: 14px; min-width: 0; }
.date-cards.compact .capacity-bar .label { font-size: 10px; line-height: 14px; }
.date-cards.compact .dc-warn { font-size: 11px; padding: 2px 6px; margin-top: 6px; }

.kpi-row.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .kpi-row.three { grid-template-columns: 1fr; } }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 1000px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #d8dee4;
  border-left: 5px solid #9aa5b1;
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: #24292f;
  transition: box-shadow .15s;
}
.kpi-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.kpi-card .kpi-icon { font-size: 26px; }
.kpi-card .kpi-num { font-size: 26px; font-weight: 800; line-height: 1.1; }
.kpi-card .kpi-num .unit { font-size: 13px; font-weight: 600; margin-left: 2px; }
.kpi-card .kpi-label { font-size: 12px; font-weight: 700; color: #57606a; }
.kpi-card.seiyaku { border-left-color: #e07b00; }
.kpi-card.seiyaku .kpi-num { color: #e07b00; }
.kpi-card.shosai { border-left-color: #7b52c9; }
.kpi-card.shosai .kpi-num { color: #7b52c9; }
.kpi-card.kakutei { border-left-color: #0b5cad; }
.kpi-card.kakutei .kpi-num { color: #0b5cad; }
.kpi-card.new { border-left-color: #d5372c; }
.kpi-card.new .kpi-num { color: #d5372c; }
.kpi-card.chosei { border-left-color: #b8860b; }
.kpi-card.chosei .kpi-num { color: #b8860b; }
.kpi-card.done { border-left-color: #2da44e; opacity: .75; }
.kpi-card.done .kpi-num { color: #2da44e; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 10px;
}
.section-head h2 { margin: 0; }
.section-head .muted { font-weight: 400; margin-left: 6px; }

.date-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 1000px) { .date-cards { grid-template-columns: repeat(2, 1fr); } }
.date-card {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 10px;
  padding: 14px 16px;
  text-decoration: none;
  color: #24292f;
  transition: box-shadow .15s;
}
.date-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.date-card .dc-date { font-size: 20px; font-weight: 800; }
.date-card .dc-left { margin: 4px 0 8px; font-size: 14px; color: #2da44e; }
.date-card .dc-left strong { font-size: 20px; }
.date-card.full .dc-left { color: #d5372c; font-weight: 700; }
.date-card .dc-warn {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #b3261e;
  background: #ffe9e6;
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
}

.todo-group {
  background: #fff;
  border: 1px solid #d8dee4;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.todo-group-title {
  font-weight: 800;
  font-size: 13px;
  padding: 9px 16px;
  background: #f0f2f5;
  border-bottom: 1px solid #d8dee4;
}
.todo-group-title.seiyaku { background: #fff3e4; color: #9a5500; }
.todo-group-title.shosai { background: #f1eafc; color: #5a3a99; }
.todo-group-title.kakutei { background: #e4effb; color: #0b4d9d; }
.todo-group-title.new { background: #fde8e6; color: #a02a22; }
.todo-group-title.chosei { background: #fdf3d5; color: #7a5b00; }
.todo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #eceff2;
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover { background: #f7fafd; }
.todo-company { font-weight: 700; font-size: 14px; margin-right: 6px; }
.todo-sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.todo-date { font-weight: 700; font-size: 13px; }
.days-chip {
  background: #e8ecf1;
  border-radius: 10px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #444;
}
.days-chip.hot { background: #ffe0e0; color: #b3261e; }
.steps { display: inline-flex; gap: 3px; }
.step {
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  background: #eceff2;
  color: #98a1ab;
}
.step.on { background: #d9f2df; color: #1e6b34; }
.step.now { background: #0b5cad; color: #fff; box-shadow: 0 0 0 2px #b3d4f5; }

/* ---------- 工程パイプライン ---------- */
.pipeline {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex-wrap: wrap;
}
.pl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 86px;
  text-align: center;
}
.pl-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  background: #eceff2;
  color: #98a1ab;
  border: 2px solid #d8dee4;
}
.pl-label { font-size: 11px; font-weight: 700; color: #98a1ab; line-height: 1.3; }
.pl-step.done .pl-circle { background: #2da44e; border-color: #2da44e; color: #fff; }
.pl-step.done .pl-label { color: #1e6b34; }
.pl-step.current .pl-circle {
  background: #0b5cad;
  border-color: #0b5cad;
  color: #fff;
  box-shadow: 0 0 0 4px #cfe4fa;
}
.pl-step.current .pl-label { color: #0b5cad; font-size: 12px; }
.pl-step.done-goal .pl-circle { background: #d9f2df; border-color: #2da44e; }
.pl-step.done-goal .pl-label { color: #1e6b34; }
.pl-step.ready-goal .pl-circle { background: #fff7d6; border-color: #d4a900; }
.pl-step.ready-goal .pl-label { color: #8a6d00; }
.pl-arrow {
  font-size: 22px;
  font-weight: 800;
  color: #c3ccd6;
  margin-top: 7px;
}
.pl-arrow.done { color: #2da44e; }
.pipeline-now { margin: 10px 0 0; font-size: 14px; }
.pipeline-now strong { color: #0b5cad; }
.pipeline-now.ready { color: #8a6d00; font-weight: 700; }
.pipeline-out { font-size: 14px; padding: 6px 0; }

.stage-chip {
  display: inline-block;
  border-radius: 12px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.stage-chip.s1 { background: #fde8e6; color: #a02a22; }
.stage-chip.s2 { background: #fdf3d5; color: #7a5b00; }
.stage-chip.s3 { background: #e4effb; color: #0b4d9d; }
.stage-chip.s4 { background: #f1eafc; color: #5a3a99; }
.stage-chip.s5 { background: #fff3e4; color: #9a5500; }
.stage-chip.ready { background: #fff7d6; color: #8a6d00; }
.stage-chip.done { background: #d9f2df; color: #1e6b34; }
.stage-chip.out { background: #e8e8ec; color: #555; }
.empty-state {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #2da44e;
  padding: 28px;
}