:root {
  --ink: #10151f;
  --muted: #4a5262;
  --paper: #f7f9fc;
  --surface: #ffffff;
  --line: #d7dde5;

  --accent: #1a56c4;
  --accent-dark: #123f93;
  --accent-soft: #e5edfb;

  --gold: #b8790a;
  --gold-soft: #fdf1dc;

  --danger: #c8281f;
  --danger-soft: #fbeceb;
  --success: #157347;
  --success-soft: #e9f3ee;

  --rail-bg: #14213d;
  --rail-bg-soft: #1e2f52;
  --rail-line: #33456b;
  --rail-text: #d3dcef;
  --rail-text-strong: #ffffff;

  /* 旧変数名は既存テンプレートとの互換のため維持 */
  --app-bg: var(--paper);
  --app-surface: var(--surface);
  --app-border: var(--line);
  --app-text: var(--ink);
  --app-muted: var(--muted);
  --app-primary: var(--accent);
  --app-primary-soft: var(--accent-soft);
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

a { color: inherit; }

h1, h2, h3, h4, .page-title, .card-header {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tabular,
.metric-value, .summary-value, .dashboard-metric {
  font-family: 'JetBrains Mono', 'Noto Sans JP', monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Bootstrapの既定配色を上書き（ボタン・フォーム・バッジ類） --- */
.btn-primary {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-dark);
  --bs-btn-hover-border-color: var(--accent-dark);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 26, 86, 196;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent-dark);
  --bs-btn-active-border-color: var(--accent-dark);
  --bs-btn-focus-shadow-rgb: 26, 86, 196;
}
.btn-danger { --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: #a01f18; --bs-btn-hover-border-color: #a01f18; }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); }
/* 本文側だけにリンク色を適用（サイドバー .app-rail 内は対象外にして視認性を確保） */
.app-col a:not(.btn) { color: var(--accent); }
.form-control:focus, .form-select:focus {
  border-color: #7fa1e0;
  box-shadow: 0 0 0 0.25rem rgba(26, 86, 196, 0.18);
}
.nav-tabs .nav-link.active { color: var(--accent); }

.topbar {
  background: #ffffff;
}

/* ===== レイアウト全体（左レール + 本文） ===== */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.app-rail {
  width: 248px;
  flex: 0 0 248px;
  background: var(--rail-bg);
  color: var(--rail-text);
  padding: 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail-brand {
  color: var(--rail-text-strong);
  text-decoration: none;
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.rail-brand:hover { color: var(--rail-text-strong); }

.rail-org {
  color: var(--rail-text);
  font-size: 0.74rem;
  opacity: 0.85;
  margin-top: 0.15rem;
}

.rail-user {
  margin-top: 1rem;
  padding: 0.65rem 0.75rem;
  background: var(--rail-bg-soft);
  border: 1px solid var(--rail-line);
  border-radius: 0.6rem;
}

.rail-user-name {
  color: var(--rail-text-strong);
  font-weight: 700;
  font-size: 0.9rem;
}

.rail-user-role {
  color: var(--rail-text);
  font-size: 0.74rem;
  margin-top: 0.1rem;
}

.rail-caption {
  color: var(--rail-text);
  opacity: 0.65;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 1.5rem 0 0.6rem;
  text-transform: uppercase;
}

/* 決裁ルート風ステッパー */
.rail-flow {
  position: relative;
  display: flex;
  flex-direction: column;
}

.rail-step {
  position: relative;
  display: flex;
  gap: 0.7rem;
  padding: 0.55rem 0.4rem 0.95rem 0.1rem;
  text-decoration: none;
  border-radius: 0.5rem;
}

.rail-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 0.99rem;
  top: 1.9rem;
  bottom: -0.15rem;
  width: 2px;
  background: var(--rail-line);
}

.rail-step-dot {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--rail-line);
  color: var(--rail-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.82rem;
  background: var(--rail-bg);
  z-index: 1;
}

.rail-step-label {
  color: #dbe3f2;
  font-weight: 700;
  font-size: 0.92rem;
  margin-top: 0.1rem;
}

.rail-step-desc {
  color: var(--rail-text);
  opacity: 0.9;
  font-size: 0.76rem;
  margin-top: 0.15rem;
  line-height: 1.4;
}

.rail-step:hover .rail-step-label { color: #ffffff; }

.rail-step.active .rail-step-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: #1c1404;
}

.rail-step.active .rail-step-label { color: #ffffff; }

.rail-step.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--rail-bg-soft);
  border-radius: 0.6rem;
  z-index: -1;
}

/* サブ項目（モニタリング・管理） */
.rail-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rail-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.5rem;
  color: var(--rail-text);
  text-decoration: none;
  font-size: 0.86rem;
}

.rail-link::before {
  content: '';
  width: 0.35rem;
  height: 0.35rem;
  background: var(--rail-text);
  opacity: 0.6;
  border-radius: 1px;
}

.rail-link:hover, .rail-link.active {
  background: var(--rail-bg-soft);
  color: #ffffff;
}

.rail-link.active::before { background: var(--gold); opacity: 1; }

.rail-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.rail-logout {
  display: block;
  text-align: center;
  padding: 0.5rem;
  border: 1px solid var(--rail-line);
  border-radius: 0.5rem;
  color: var(--rail-text);
  text-decoration: none;
  font-size: 0.84rem;
}

.rail-logout:hover { background: var(--rail-bg-soft); color: #ffffff; }

/* ===== 右側：パンくず + 本文 ===== */
.app-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.crumb-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.crumb-trail {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.1rem;
}

.crumb-trail .crumb-sep {
  color: var(--muted);
  font-weight: 400;
  margin: 0 0.35rem;
}

.crumb-trail .crumb-current { color: var(--accent); }

.app-main {
  max-width: 1440px;
}

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-rail {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
  }
  .rail-user, .rail-footer { display: none; }
  .rail-flow { flex-direction: row; flex-wrap: wrap; }
  .rail-step { padding: 0.4rem 0.6rem; }
  .rail-step:not(:last-child)::before { display: none; }
  .rail-caption { margin: 0.6rem 0 0.3rem; width: 100%; }
  .rail-links { flex-direction: row; flex-wrap: wrap; }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.page-title {
  margin-bottom: 0.2rem;
}

.page-subtitle {
  color: var(--app-muted);
  margin-bottom: 0;
}

.card {
  border-radius: 0.9rem;
  border: 1px solid var(--app-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  background: var(--app-surface);
}

.help-card {
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.help-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.help-card-label {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.help-card-title {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.card-header {
  background: #ffffff;
  color: var(--app-text);
  border-bottom: 1px solid #e9edf3;
  font-weight: 700;
}

.metric-box,
.summary-card {
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  padding: 1rem;
  height: 100%;
}

.metric-label,
.summary-label {
  color: var(--app-muted);
  font-size: 0.85rem;
}

.metric-value,
.summary-value,
.dashboard-metric {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--app-text);
}

.metric-subtext,
.summary-subtext,
.section-note,
.small-note,
.form-help {
  color: var(--app-muted);
  font-size: 0.84rem;
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
}

.sidebar-card {
  position: sticky;
  top: 1rem;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sidebar-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: var(--app-text);
  border: 1px solid var(--app-border);
  border-radius: 0.8rem;
  background: #ffffff;
}

.sidebar-link:hover,
.sidebar-link.active {
  border-color: #b6ccff;
  background: var(--app-primary-soft);
  color: #0b4fc1;
}

.count-pill {
  min-width: 2rem;
  text-align: center;
  background: #eef2f7;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  color: #475569;
}

.filter-card .form-label {
  font-size: 0.84rem;
  color: var(--app-muted);
  margin-bottom: 0.35rem;
}

.bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.bar-list.compact {
  gap: 0.65rem;
}

.bar-track {
  width: 100%;
  height: 0.8rem;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: #3b82f6;
}

.bar-fill.secondary { background: #14b8a6; }
.bar-fill.warning { background: #f59e0b; }
.bar-fill.danger { background: #ef4444; }

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: #f3f6fb;
  color: #334155;
  border: 1px solid #d7dee8;
  font-size: 0.75rem;
}

.badge-soft.secondary { background: #edfdfa; color: #0f766e; border-color: #b7f0e8; }
.badge-soft.warning { background: #fff8e8; color: #a16207; border-color: #fde68a; }
.badge-soft.gray { background: #f8fafc; color: #475569; border-color: #cbd5e1; }

.table thead th {
  font-size: 0.82rem;
  color: var(--app-muted);
  font-weight: 700;
  white-space: nowrap;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.section-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.info-strip {
  border: 1px solid #dbe6f5;
  background: #ffffff;
  color: #374151;
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
}

.form-section { margin-bottom: 1.2rem; }
.form-section-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem; }
.form-grid-2, .form-grid-3, .form-grid-4 { display: grid; gap: 1rem; }
.form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi-grid.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.question-card { border-color: #dbeafe; }
.question-chip { white-space: normal; text-align: left; font-weight: 500; }
.question-example-panel { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.9rem; padding: 0.9rem; }
.example-box { height: 100%; border-radius: 0.8rem; border: 1px solid #dbe4f0; padding: 0.75rem 0.8rem; background: #fff; }
.example-box.low { background: #f8fafc; }
.example-box.mid { background: #eff6ff; }
.example-box.high { background: #eefbf5; }
.example-label { font-size: 0.8rem; font-weight: 700; color: #475569; margin-bottom: 0.35rem; }

@media (max-width: 1200px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar-card { position: static; }
}

@media (max-width: 992px) {
  .kpi-grid,
  .form-grid-4,
  .form-grid-3,
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}


.home-hero .card-body {
  padding: 1.5rem;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 992px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}


.compact-header { margin-bottom: 0.75rem; }
.dashboard-layout-clean { align-items: start; }
.content-stack { min-width: 0; }
.filter-toolbar-card .card-body { padding: 0.9rem 1rem; }
.filter-inline-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem;
  align-items: end;
}
.filter-inline-actions {
  display: flex;
  gap: 0.5rem;
  align-items: end;
  flex-wrap: wrap;
}
.section-banner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
}
.section-note.short { max-width: 520px; }
.kpi-grid-compact .summary-card.compact { padding: 0.85rem 1rem; }
.compact-table td, .compact-table th { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.simple-step-list { padding-left: 1.15rem; color: var(--app-text); }
.simple-step-list li { margin-bottom: 0.45rem; }
.simple-step-list li:last-child { margin-bottom: 0; }


.radar-summary-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.radar-summary-copy {
  font-size: 0.92rem;
  color: var(--app-text);
}

.analysis-note {
  border: 1px solid #dbe4f0;
  border-radius: 0.85rem;
  background: #f8fafc;
  padding: 0.85rem 0.95rem;
}

.radar-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.mini-radar-card {
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.85rem;
  background: #fff;
}

.mini-radar-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--app-text);
}

.radar-panel {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.radar-panel-large .radar-shell {
  max-width: 340px;
}

.radar-shell {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  padding: 0.6rem;
}

.radar-svg {
  width: 100%;
  height: auto;
  display: block;
}

.radar-grid {
  fill: none;
  stroke: #d7e0ea;
  stroke-width: 1;
}

.radar-axis {
  stroke: #d2dae6;
  stroke-width: 1;
}

.radar-area {
  fill: rgba(37, 99, 235, 0.18);
  stroke: none;
}

.radar-outline {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2;
}

.radar-label {
  fill: #64748b;
  font-size: 10px;
  font-weight: 600;
}

.radar-axis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.radar-hover-text {
  font-size: 0.82rem;
  line-height: 1.55;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 0.7rem 0.8rem;
  min-height: 4.3rem;
}

.radar-panel:hover .radar-hover-text {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

@media (max-width: 1200px) {
  .filter-inline-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 992px) {
  .filter-inline-form { grid-template-columns: 1fr; }
  .section-banner { flex-direction: column; align-items: flex-start; }
  .radar-summary-layout { grid-template-columns: 1fr; }
  .radar-card-grid { grid-template-columns: 1fr; }
}

.sticky-top-card {
  position: sticky;
  top: 1rem;
}

.password-row td {
  background: #fafbfc;
}

.badge-soft.green { background: #eefbf5; color: #166534; border-color: #bbf7d0; }
.badge-soft.red { background: #fff1f2; color: #b91c1c; border-color: #fecdd3; }
.badge-soft.blue { background: #eef4ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-soft.purple { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

.participant-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }

.business-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 460px);
  gap: 0.85rem;
  align-items: start;
}

.business-entry-form-pane,
.business-entry-reference-pane {
  min-width: 0;
}

.business-entry-form-pane > form {
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding-right: 0.1rem;
}

.business-entry-reference-pane {
  position: sticky;
  top: 0.5rem;
}

.business-reference-card {
  max-height: calc(100vh - 180px);
  overflow: hidden;
}

.business-reference-card .card-body {
  padding: 0;
}

.business-reference-body {
  height: calc(100vh - 238px);
  padding: 0;
}

.business-reference-empty {
  padding: 1rem;
  color: var(--app-muted);
}

.business-reference-table-wrap {
  overflow: auto;
  height: 100%;
  max-height: calc(100vh - 260px);
}

.business-reference-table {
  table-layout: fixed;
  font-size: 10.5px;
  line-height: 1.2;
}

.business-reference-table th,
.business-reference-table td {
  border: 1px solid #e5e7eb;
  padding: 0.16rem 0.32rem;
  white-space: nowrap;
  min-width: 78px;
  vertical-align: top;
}

.business-reference-table td {
  background: #ffffff;
}

.business-reference-table .ref-row-header {
  min-width: 44px;
  width: 44px;
  text-align: right;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
}

.business-reference-table .sticky-row {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
}

.business-reference-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 1;
}

.business-reference-table .sticky-col.sticky-row {
  z-index: 3;
}

@media (max-height: 820px) {
  .business-entry-form-pane > form,
  .business-reference-card {
    max-height: calc(100vh - 150px);
  }

  .business-reference-body,
  .business-reference-table-wrap {
    max-height: calc(100vh - 220px);
    height: calc(100vh - 220px);
  }

  .business-reference-table {
    font-size: 10px;
  }
}

@media (max-width: 1180px) {
  .business-entry-layout {
    grid-template-columns: 1fr;
  }

  .business-entry-reference-pane {
    position: static;
  }

  .business-entry-form-pane > form,
  .business-reference-card,
  .business-reference-body,
  .business-reference-table-wrap {
    max-height: none;
    height: auto;
  }
}


.workload-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

/* 備考欄：カテゴリ10個（4+4+2）の残り2枠分を使う */
.workload-remarks-card {
  grid-column: span 2;
  background: #fbfcfe;
}

.workload-remarks-input {
  min-height: 9.5rem;
  resize: vertical;
}

.workload-category-card {
  border: 1px solid var(--app-border);
  border-radius: 0.9rem;
  padding: 0.85rem;
  background: #ffffff;
  min-width: 0;
}

.workload-na-check {
  margin: 0.25rem 0 0.6rem;
  padding: 0.4rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

.workload-na-check .form-check-label {
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.workload-na-active {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.workload-na-active .workload-na-check {
  background: var(--accent-soft);
  border-color: #b6ccff;
}

.workload-na-active .workload-na-check .form-check-label {
  color: var(--accent);
  font-weight: 700;
}

.workload-na-active .workload-field-control:disabled {
  background: #eef1f4;
  color: #94a3b8;
}

.workload-na-active .unfilled-badge {
  display: none !important;
}

.workload-category-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.workload-category-desc {
  color: var(--app-muted);
  font-size: 0.83rem;
  line-height: 1.35;
  margin-bottom: 0.7rem;
  min-height: 2.25rem;
}

.workload-field-row {
  margin-bottom: 0.7rem;
}

.workload-field-row:last-child {
  margin-bottom: 0;
}

.workload-field-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.unfilled-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.7rem;
  height: 1.4rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.workload-field-control {
  font-size: 0.92rem;
}

@media (max-width: 1280px) {
  .workload-categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .workload-categories-grid {
    grid-template-columns: 1fr;
  }
  /* 1列表示のときは備考欄も1枠に戻す */
  .workload-remarks-card {
    grid-column: span 1;
  }
}


.form-grid-5 { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.business-entry-layout-wide { display: block; }
.business-entry-form-pane-wide > form { max-height: none; overflow: visible; padding-right: 0; }
.business-grid-tight { gap: 0.8rem; }
.form-section-tight { margin-bottom: 0.8rem; }

.title-picker-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}

.title-picker-trigger { white-space: nowrap; }

.modal-open {
  overflow: hidden;
}

.title-picker-overlay[hidden] {
  display: none !important;
}

.title-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.title-picker-overlay.is-open {
  display: flex;
}

.title-picker-dialog {
  width: min(920px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--app-border);
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
}

.title-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.title-picker-heading {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.title-picker-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #eef2f7;
}

.title-picker-list {
  padding: 1rem;
  overflow: auto;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.title-picker-option {
  width: 100%;
  text-align: left;
  border: 1px solid #d7dee8;
  background: #ffffff;
  border-radius: 0.85rem;
  padding: 0.8rem 0.9rem;
}

.title-picker-option:hover {
  background: #f8fbff;
  border-color: #bfd6ff;
}

/* 回答済み（本人がすでに登録している業務）は薄いオレンジで色分け */
.title-picker-option.is-registered {
  background: #fdf0e0;
  border-color: #f0cfa5;
}

.title-picker-option.is-registered:hover {
  background: #fbe6cf;
  border-color: #e5bb87;
}

.title-picker-registered-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #f3d4ac;
  color: #8a5a12;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}

.title-picker-option-main {
  display: block;
  font-weight: 600;
  color: #1f2937;
}

.title-picker-empty {
  padding: 0 1rem 1rem;
  color: var(--app-muted);
}

.workload-category-card:nth-child(1) { background: #fff7ed; border-color: #fdba74; }
.workload-category-card:nth-child(2) { background: #fefce8; border-color: #fde047; }
.workload-category-card:nth-child(3) { background: #f0fdf4; border-color: #86efac; }
.workload-category-card:nth-child(4) { background: #ecfeff; border-color: #67e8f9; }
.workload-category-card:nth-child(5) { background: #eff6ff; border-color: #93c5fd; }
.workload-category-card:nth-child(6) { background: #eef2ff; border-color: #a5b4fc; }
.workload-category-card:nth-child(7) { background: #f5f3ff; border-color: #c4b5fd; }
.workload-category-card:nth-child(8) { background: #fdf2f8; border-color: #f9a8d4; }
.workload-category-card:nth-child(9) { background: #f8fafc; border-color: #cbd5e1; }

@media (max-width: 1200px) {
  .form-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .title-picker-list { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
  .form-grid-5 { grid-template-columns: 1fr; }
  .title-picker-toolbar,
  .title-picker-input-wrap { grid-template-columns: 1fr; }
}


.field-error {
  margin-top: 0.35rem;
  color: #dc2626;
  font-size: 0.82rem;
  line-height: 1.35;
}

.optional-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.45rem;
  min-width: 2.75rem;
  height: 1.35rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}

.title-picker-extra {
  padding: 0 1rem 0.8rem;
  border-bottom: 1px solid var(--app-border);
}

.title-picker-manual {
  padding: 0.9rem 1rem 1rem;
  border-bottom: 1px solid var(--app-border);
  background: #f8fafc;
}

.title-picker-manual-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.border-danger {
  border-color: #dc2626 !important;
}

/* ===== 業務入力：ステップ表示（ウィザード） ===== */
.wizard-stepper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1rem 1.1rem 0.9rem;
  margin-bottom: 1.25rem;
}

.wizard-stepper-track {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wizard-step-tab {
  flex: 1 1 0;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: none;
  padding: 0.3rem 0.4rem;
  border-radius: 0.6rem;
  text-align: left;
  cursor: pointer;
}

.wizard-step-tab:hover { background: var(--accent-soft); }

.wizard-step-dot {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 0.85rem;
}

.wizard-step-tab-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--muted);
}

.wizard-step-tab.active .wizard-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.wizard-step-tab.active .wizard-step-tab-label { color: var(--accent); }

.wizard-step-tab.done .wizard-step-dot {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
}

.wizard-step-tab.has-error .wizard-step-dot {
  border-color: var(--danger);
  color: var(--danger);
}

.wizard-step-tab.has-error .wizard-step-tab-label { color: var(--danger); }

.wizard-progress-track {
  margin-top: 0.7rem;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.2s ease;
}

.wizard-step-hidden { display: none !important; }

.wizard-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin: -0.4rem 0 1.5rem;
  flex-wrap: wrap;
}

.wizard-final-actions {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  padding: 0.9rem 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.wizard-review-group { margin-bottom: 1.4rem; }
.wizard-review-group:last-child { margin-bottom: 0; }

.wizard-review-group-title {
  font-weight: 800;
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.wizard-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
}

.wizard-review-list dt {
  font-size: 0.76rem;
  color: var(--muted);
  font-weight: 500;
}

.wizard-review-list dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}

.wizard-review-table th, .wizard-review-table td {
  font-size: 0.84rem;
}

/* ===== 対応ブラウザ案内画面 ===== */
.browser-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rail-bg);
  padding: 2rem 1rem;
}

.browser-gate-card {
  max-width: 520px;
  background: var(--surface);
  border-radius: 1rem;
  padding: 2.2rem 2rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  text-align: center;
}

.browser-gate-badge {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.browser-gate-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 1rem;
}

.browser-gate-text {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.browser-gate-btn {
  display: inline-block;
  margin: 0.4rem 0 1.2rem;
}

.browser-gate-note {
  color: var(--muted);
  font-size: 0.78rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* ===== 調査選択画面（共通業務調査／課内業務調査） ===== */
.survey-lead-note {
  background: var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-radius: 0.4rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: #6b4e0e;
  line-height: 1.6;
}

.survey-select-card .card-body {
  padding: 1.5rem;
}

.survey-select-step {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.survey-select-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.survey-status-submitted {
  color: #c8281f;
  font-weight: 800;
  font-size: 0.95rem;
}

.survey-status-pending {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.85rem;
}

.survey-status-locked {
  color: var(--muted);
  font-size: 0.78rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.survey-select-card-locked {
  background: #fbfcfe;
}

.survey-select-card-locked .survey-select-title,
.survey-select-card-locked .section-note {
  opacity: 0.65;
}

.survey-submitted-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.survey-card-note {
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 0.4rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
  color: #6b4e0e;
  line-height: 1.55;
  margin-bottom: 0.9rem;
}

/* ===== 共通業務調査：表形式フォーム ===== */
.common-survey-table {
  font-size: 0.86rem;
}

.common-survey-table thead {
  --bs-table-color: #ffffff;
  --bs-table-bg: var(--accent);
}

.common-survey-table th {
  background: var(--accent);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.82rem;
  vertical-align: middle;
  white-space: nowrap;
}

.common-survey-table td {
  vertical-align: middle;
  border-color: var(--line);
}

.cs-col-category { width: 11%; }
.cs-col-process { width: 17%; }
.cs-col-examples { width: 32%; }
.cs-col-remarks { width: 20%; }
.cs-col-inputs { width: 20%; min-width: 210px; }

.cs-category {
  background: var(--accent-soft);
  font-weight: 700;
  vertical-align: middle !important;
}

.cs-process { font-weight: 700; }

.cs-examples, .cs-remarks {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.cs-note-red {
  color: #c8281f;
  display: block;
  margin-top: 0.15rem;
}

.cs-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.2rem 0;
}

.cs-input-label {
  flex: 0 0 4.5rem;
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 500;
  margin: 0;
}

.cs-input-unit-wrap {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.cs-num {
  width: 6.5rem;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
}

.cs-unit {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.cs-error {
  color: #c8281f;
  font-size: 0.76rem;
  margin: 0 0 0.2rem 5rem;
}