@charset "UTF-8";
/* =====================================================================
   地域医療コンパス テーマ（compass.css）
   - デザイントークン（色・余白・角丸・影）を CSS カスタムプロパティで一元管理
   - 将来 medict_dwh と配色・コンポーネント言語を揃えるための単一ソース
   - volt.css / volt_add.css の後に読み込んで上書きする
   ===================================================================== */

:root {
  /* ---- ブランドカラー（MEDICT 青 + ヘルスケア teal）---- */
  --cp-primary: #4774b9;        /* MEDICT ブルー */
  --cp-primary-dark: #34568b;
  --cp-primary-deep: #27406a;
  --cp-primary-soft: #e9eff8;   /* 選択状態・ホバー背景 */
  --cp-teal: #2e9e8f;           /* ヘルスケア teal */
  --cp-teal-soft: #e3f2f0;

  /* ---- ニュートラル ---- */
  --cp-bg: #f4f6f9;             /* ページ背景 */
  --cp-surface: #ffffff;        /* カード */
  --cp-surface-soft: #f8fafc;   /* 表ヘッダ等 */
  --cp-ink: #21303f;            /* 本文 */
  --cp-ink-soft: #5d6b7a;       /* 補助テキスト */
  --cp-ink-faint: #8a96a3;
  --cp-line: #e2e8f0;           /* 罫線 */

  /* ---- データ可視化パレット（dwh と共通化前提）---- */
  --cp-viz-in: #4774b9;         /* 市内（主系列 = ブランド青） */
  --cp-viz-out: #f0b95c;        /* 市外流出（アンバー） */
  --cp-viz-special: #2e9e8f;    /* 市外特定病院（teal） */
  --cp-viz-1: #4774b9;
  --cp-viz-2: #2e9e8f;
  --cp-viz-3: #f0b95c;
  --cp-viz-4: #7d9bc9;
  --cp-viz-5: #64b6ab;
  --cp-viz-6: #a4b4c8;
  --cp-viz-in-soft: #e3ebf7;      /* 表の市内行 */
  --cp-viz-out-soft: #faeed3;     /* 表の市外行 */
  --cp-viz-special-soft: #ddf0ed; /* 表の特定病院行 */
  --cp-viz-total-soft: #e8edf4;   /* 表の総数行 */
  --cp-table-head: #eef1f6;
  --cp-viz-grid: #eceff4;
  --cp-viz-label: #5d6b7a;

  /* ---- 状態色 ---- */
  --cp-danger: #c4554d;
  --cp-warn: #b97f2a;
  --cp-ok: #2e7d5b;

  /* ---- 形状・影・タイポ ---- */
  --cp-radius: 14px;
  --cp-radius-sm: 10px;
  --cp-shadow: 0 1px 2px rgba(23, 37, 56, .05), 0 6px 20px rgba(23, 37, 56, .06);
  --cp-shadow-hover: 0 2px 4px rgba(23, 37, 56, .06), 0 10px 28px rgba(23, 37, 56, .10);
  --cp-font: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =====================================================================
   1. ベース
   ===================================================================== */
body {
  background: var(--cp-bg);
  font-family: var(--cp-font);
  color: var(--cp-ink);
  letter-spacing: .01em;
}
.content { padding-top: 1.25rem; }
h1, h2, h3, h4, h5, h6 { color: var(--cp-ink); font-weight: 700; }
.h4 { letter-spacing: .02em; }
a { color: var(--cp-primary); }
a:hover { color: var(--cp-primary-dark); }

::selection { background: var(--cp-primary-soft); }
*:focus-visible { outline: 2px solid var(--cp-primary); outline-offset: 1px; }

/* =====================================================================
   2. サイドバー（ダークグレー → ライト＋ブランド青アクセント）
   ===================================================================== */
.sidebar.bg-gray-800 {
  background: var(--cp-surface) !important;
  border-right: 1px solid var(--cp-line);
  box-shadow: none;
}
.sidebar .sidebar-text,
.sidebar .nav-link,
.sidebar .sidebar-icon,
.sidebar .link-arrow { color: var(--cp-ink-soft) !important; }
.sidebar .nav-link {
  border-radius: var(--cp-radius-sm);
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.sidebar .nav-link:hover {
  background: var(--cp-surface-soft);
  color: var(--cp-primary-dark) !important;
}
.sidebar .nav-link:hover .sidebar-text,
.sidebar .nav-link:hover .sidebar-icon { color: var(--cp-primary-dark) !important; }
.sidebar .nav-item.active > .nav-link,
.sidebar .nav-item.active > .nav-link .sidebar-text {
  background: var(--cp-primary-soft);
  color: var(--cp-primary-dark) !important;
  font-weight: 700;
}
.sidebar .dropdown-divider { border-color: var(--cp-line) !important; }
/* ブランド行（TOP リンク。最上位 ul の先頭のみ） */
.sidebar .sidebar-inner > ul > .nav-item:first-child > .nav-link { padding-top: .25rem; }
.sidebar .sidebar-inner > ul > .nav-item:first-child > .nav-link .sidebar-text {
  color: var(--cp-primary-dark) !important;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
}
/* モバイル上部ナビ */
.navbar-theme-primary { background: var(--cp-primary-deep) !important; }

/* =====================================================================
   3. カード
   ===================================================================== */
.card {
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow) !important;
  transition: box-shadow .2s ease;
  background: var(--cp-surface);
}
.card:hover { box-shadow: var(--cp-shadow-hover) !important; }
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--cp-line);
  border-radius: var(--cp-radius) var(--cp-radius) 0 0 !important;
}
.card .card-title { color: var(--cp-ink); }
/* 旧テーマの黄色カードヘッダを無効化 */
.card.bg-yellow-100 { background: var(--cp-surface) !important; }

/* =====================================================================
   4. ボタン・フォーム
   ===================================================================== */
.btn-primary, .btn-secondary, input[type="submit"] {
  background: var(--cp-primary) !important;
  border-color: var(--cp-primary) !important;
  color: #fff !important;
  border-radius: var(--cp-radius-sm);
  font-weight: 600;
  box-shadow: none;
  transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover, .btn-secondary:hover, input[type="submit"]:hover {
  background: var(--cp-primary-dark) !important;
  border-color: var(--cp-primary-dark) !important;
  transform: translateY(-1px);
}
.btn-outline-gray-500, .btn-outline-gray-600 {
  border-color: var(--cp-line);
  color: var(--cp-ink-soft);
  border-radius: var(--cp-radius-sm);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--cp-primary); }
.form-check-input:checked { background-color: var(--cp-primary); border-color: var(--cp-primary); }
.form-control, .form-select, input[type="number"], input[type="text"], input[type="password"] {
  border-color: var(--cp-line);
  border-radius: var(--cp-radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cp-primary);
  box-shadow: 0 0 0 .2rem rgba(71, 116, 185, .15);
}
.input-group-text { border-color: var(--cp-line); background: var(--cp-surface-soft); color: var(--cp-ink-faint); }

/* =====================================================================
   5. テーブル
   ===================================================================== */
.table { color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.table thead th, .thead-light th {
  background: var(--cp-surface-soft) !important;
  color: var(--cp-ink-soft) !important;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .03em;
  border-bottom: 2px solid var(--cp-line) !important;
}
.table td, .table th { border-color: var(--cp-line); }
.table-bordered td, .table-bordered th { border-color: var(--cp-line) !important; }
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover { background: #f4f8fd; }
.table .small-ratio { color: var(--cp-ink-faint); font-size: .72em; margin-left: .15rem; }

/* 推移テーブルの系列色（旧: ピンク/オレンジ） */
.custom-table .row-city th { border-left: 4px solid var(--cp-viz-in); }
.custom-table .row-out th { border-left: 4px solid var(--cp-viz-out); }
.custom-table .row-total { background: var(--cp-surface-soft); font-weight: 600; }

/* =====================================================================
   6. グラフ（Chartist）
   ===================================================================== */
.ct-grid { stroke: var(--cp-viz-grid); stroke-dasharray: 0; stroke-width: 1; }
.ct-label { color: var(--cp-viz-label); fill: var(--cp-viz-label); font-size: .75rem; }
#dashboard-chart1, #dashboard-chart2,
#dashboard5-chart1, #dashboard5-chart2,
[id^="dashboard"][id$="chart1"], [id^="dashboard"][id$="chart2"] {
  background: var(--cp-surface) !important;
  border-radius: 0 0 var(--cp-radius) var(--cp-radius);
}

/* 凡例チップ（テンプレの inline-style 置き換え用） */
.cp-chip {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: -2px;
}
.cp-chip-in { background: var(--cp-viz-in); }
.cp-chip-out { background: var(--cp-viz-out); }
.cp-chip-special { background: var(--cp-viz-special); }

/* =====================================================================
   7. フィルタフォーム・ローディング
   ===================================================================== */
.form-check-label { color: var(--cp-ink-soft); }
#page-loading-overlay { background: rgba(244, 246, 249, .75) !important; backdrop-filter: blur(2px); }
#page-loading-overlay .spinner-border { color: var(--cp-primary) !important; }

/* =====================================================================
   8. フッター・その他
   ===================================================================== */
footer.bg-white { border: 1px solid var(--cp-line); border-radius: var(--cp-radius); color: var(--cp-ink-faint); }
.text-danger { color: var(--cp-danger) !important; }
.alert-info {
  background: var(--cp-teal-soft);
  border: 1px solid #c8e6e2;
  color: #1f6e63;
  border-radius: var(--cp-radius-sm);
}

/* =====================================================================
   9. レスポンシブ微調整
   ===================================================================== */
@media (max-width: 991.98px) {
  .content { padding-left: .75rem; padding-right: .75rem; }
  .card .card-header { flex-direction: column; align-items: flex-start !important; gap: .25rem; }
}
.table-responsive { border-radius: var(--cp-radius-sm); }

/* =====================================================================
   10. トップページ hero（MEDICT 青 → teal の控えめグラデ）
   ===================================================================== */
.section-header.bg-primary {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--cp-primary-deep) 0%, var(--cp-primary) 55%, #3c8b85 130%) !important;
}
/* ブランドマーク（淡い光輪を添えて主役に） */
.hero-mark {
  box-shadow: 0 8px 28px rgba(10, 22, 44, .28), 0 0 0 8px rgba(255, 255, 255, .07);
}
/* hero タイトル: 日本語の文節境界で改行し「分/析」の途中折返しを防ぐ。
   レスポンシブな字サイズ + 行間 + 行長を整えて主役の見出しに。 */
.hero-title {
  font-size: clamp(1.85rem, 1.1rem + 2.7vw, 3.1rem);
  line-height: 1.3;
  letter-spacing: .015em;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;            /* 各行の長さを均す（孤立した1文字を防ぐ） */
  word-break: auto-phrase;       /* Chrome: 文節（自立語＋付属語）境界で改行 */
  overflow-wrap: break-word;     /* 旧ブラウザ向けフォールバック */
}
.hero-lead {
  color: #eaf1fa;
  font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
  font-weight: 400;
  max-width: 40ch;
  margin-inline: auto;
  opacity: .92;
}
.section-header .lead { color: #eaf1fa; }
/* hero 上の補助テキストは淡色（青背景に text-muted のグレーは読めない） */
.section-header.bg-primary .text-muted,
.section-header.bg-primary .my-4 { color: #d3e0f1 !important; }
/* 読み取り専用ノートは控えめなピルに */
.hero-demo-note {
  display: inline-block;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eaf1fa !important;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  backdrop-filter: blur(2px);
}
/* hero 上の CTA は白ボタン（青ボタンは背景に溶けるため） */
.section-header.bg-primary .btn {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--cp-primary-dark) !important;
  font-size: 1.05rem;
  font-weight: 700;
  padding: .75rem 2rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(10, 22, 44, .28);
}
.section-header.bg-primary .btn:hover {
  background: #eef3fa !important;
  border-color: #eef3fa !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(10, 22, 44, .34);
}

/* =====================================================================
   12. 共通フィルタフォーム（.cp-filter）— セクション見出し + チップ化
   ===================================================================== */
.cp-filter.bg-light {
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 1.25rem 1.35rem !important;
}
.cp-filter > h4 { color: var(--cp-ink); letter-spacing: .01em; }
/* セクション見出し（details > summary）を洗練：左アクセント＋カスタム三角 */
.cp-filter details { border-top: 1px solid var(--cp-line); padding-top: .85rem; margin-top: .85rem; }
.cp-filter > details:first-of-type { border-top: 0; padding-top: 0; margin-top: .25rem; }
.cp-filter summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--cp-ink-soft);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: none;
  user-select: none;
}
.cp-filter summary::-webkit-details-marker { display: none; }
.cp-filter summary::before {
  content: "";
  width: 4px; height: 1em;
  border-radius: 2px;
  background: var(--cp-primary);
  flex: 0 0 auto;
}
.cp-filter summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--cp-ink-faint);
  font-size: .9em;
  transition: transform .15s ease;
}
.cp-filter details[open] > summary::after { transform: rotate(180deg); }
/* ネストした見出し（5分類 / 22分類）は控えめに */
.cp-filter details details > summary { font-size: .78rem; color: var(--cp-ink-faint); }

/* フラットなチェック群（圏域 / 年齢 / 病床機能 / 別出し）をチップ化 */
.cp-filter > details > .d-flex > label {
  margin: 0 !important;
  padding: .32rem .7rem;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: var(--cp-surface);
  color: var(--cp-ink-soft);
  font-size: .85rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.cp-filter > details > .d-flex { gap: .45rem; }
.cp-filter > details > .d-flex > label:hover {
  border-color: var(--cp-primary);
  color: var(--cp-primary-dark);
  background: var(--cp-surface-soft);
}
/* 選択中チップを強調（:has は modern Chrome 対応） */
.cp-filter > details > .d-flex > label:has(input:checked) {
  background: var(--cp-primary-soft);
  border-color: var(--cp-primary);
  color: var(--cp-primary-deep);
  font-weight: 600;
}
.cp-filter > details > .d-flex > label input { margin: 0; }

/* 疾病 5分類 / 22分類カードのチップも選択強調 */
.cp-filter label.border:has(input:checked) {
  background: var(--cp-primary-soft) !important;
  border-color: var(--cp-primary) !important;
  color: var(--cp-primary-deep);
  font-weight: 600;
}
.cp-filter .border.bg-light:has(.disease-22:checked) {
  background: var(--cp-primary-soft) !important;
  border-color: var(--cp-primary) !important;
}
/* リセットボタンは控えめなアウトライン調に */
.cp-filter #reset-btn {
  background: var(--cp-surface) !important;
  border: 1px solid var(--cp-line) !important;
  color: var(--cp-ink-soft) !important;
  font-weight: 600;
}
.cp-filter #reset-btn:hover {
  border-color: var(--cp-primary) !important;
  color: var(--cp-primary-dark) !important;
  background: var(--cp-surface-soft) !important;
}
/* 年齢など縦スクロール域に淡い境界 */
.cp-filter .d-flex[style*="overflow-y"],
.cp-filter [style*="overflow-y:auto"] { scrollbar-width: thin; }
/* 上部ナビのリンク（紺背景に青文字は読めない → 白系に） */
.navbar-theme-primary .nav-link.text-primary { color: #dfe8f5 !important; font-weight: 600; }
.navbar-theme-primary .nav-link.text-primary:hover { color: #ffffff !important; }

/* ログイン等の認証ページ背景 */
section.bg-soft { background: var(--cp-bg) !important; }

/* 認証ページ: タイトルを文節境界で改行（「国/保」分断を防ぐ）し行長を整える */
.auth-title {
  text-wrap: balance;
  word-break: auto-phrase;
  overflow-wrap: break-word;
  line-height: 1.35;
  max-width: 22ch;
  margin-inline: auto;
}
.auth-back { color: var(--cp-primary); font-weight: 600; }
.auth-back:hover { color: var(--cp-primary-dark); }

/* デモ用アカウント案内: ラベル+値を nowrap 単位で折返し、見やすく */
.demo-cred { text-align: left; }
.demo-cred-title { font-weight: 700; color: #1f6e63; margin-bottom: .4rem; letter-spacing: .02em; }
.demo-cred-rows { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.demo-cred-item { white-space: nowrap; color: #1f6e63; font-size: .92rem; }
.demo-cred-item code {
  background: rgba(46, 158, 143, .14);
  color: #18514a;
  padding: .1rem .45rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: .92em;
}
.demo-cred-note { display: block; margin-top: .5rem; color: #4f7d75; }

/* =====================================================================
   11. 病床シミュレーション
   ===================================================================== */
.sim-table th:first-child, .sim-table td:first-child { font-weight: 600; white-space: nowrap; }
.sim-table .sim-input {
  max-width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sim-table .sim-input[readonly] {
  background: var(--cp-surface-soft);
  color: var(--cp-ink-soft);
  border-style: dashed;
}