/* =====================================================================
 * theme.css
 * 日付   : 2026-06-07
 * 意味   : Bootstrap 5.3 を土台にした「紹介ネットワーク」の独自テーマ。
 * 目的   : Bootstrapの公式作法（CSS変数の上書き）だけで University of Miami の
 *          緑(#005030)ブランドに統一する。独自の複雑な改造はしない＝壊れにくく
 *          誰が見ても分かる状態を保つ。アプリ固有の小部品(アイコン章標/候補行 等)
 *          のみ最小限のスタイルを足す。
 * 注意   : 色やブランドを変えたい時は、まずこの :root の変数だけ触れば全体に効く。
 * ===================================================================== */

/* ---- 1) Bootstrapのテーマ色を緑へ（公式: CSS変数の上書き） ---- */
:root {
  --brand:       #005030;   /* UM green（基準色） */
  --brand-dark:  #003d24;
  --brand-rgb:   0, 80, 48;

  /* Bootstrapが参照する変数を上書き */
  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-primary-bg-subtle: #e9f1ed;     /* 補助カードの淡い背景 */
  --bs-primary-border-subtle: #d6e6df;
  --bs-primary-text-emphasis: #003d24;
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-dark);

  --bs-body-color: #1a2420;
  --bs-body-bg: #eef1f2;
  --bs-border-color: #e4e8e9;
  --bs-secondary-color: #66756f;   /* 補足テキスト */
  --bs-emphasis-color: #1a2420;

  --bs-body-font-family: "Source Sans 3", system-ui, "Hiragino Sans",
    "Yu Gothic UI", "Noto Sans JP", sans-serif;
}

/* ボタン(.btn-primary)は色がSassで焼き込まれているため、ボタン専用変数も緑へ */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}

/* 入力欄の境界を濃く・太く（老眼配慮：入力エリアを一目で分かるように） */
.form-control,
.form-select {
  border: 1.5px solid #8f9b95;
  background-color: #fff;
}
.form-control:hover,
.form-select:hover { border-color: #6f7d76; }
.form-control::placeholder { color: #97a39d; }

/* 入力のフォーカス色も緑に（青のまま残さない） */
.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.22);
}

/* ---- 2) 画面の土台 ---- */
body {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #f6f8f8, #eef1f2);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  padding: 32px 14px 48px;
}
.app-card { width: 100%; max-width: 460px; }   /* スマホ既定 */
@media (min-width: 768px)  { .app-card { max-width: 680px; } }   /* タブレット〜 */
@media (min-width: 1100px) { .app-card { max-width: 780px; } }   /* PC：広く使う（地図も見やすく） */

/* 画面切替（show/hide）。Bootstrapの d-none と衝突しない独自クラス。
   #topnav や #confirm-email-field など .view 以外にも付くのでグローバルに効かせる */
.hidden { display: none !important; }

/* タイトル横の小さなブランドマーク */
.app-title::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 9px;
  border-radius: 3px;
  background: var(--brand);
  transform: translateY(-2px);
}

/* ---- 3) ホームのアクションカード（Bootstrap utilities + 最小の独自） ---- */
/* アイコン章標（角丸タイル） */
.hico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--bs-primary-bg-subtle);
  color: var(--brand);
}
.hico svg { width: 22px; height: 22px; }
/* 主機能(上2つ)はアイコンを緑塗りで強調 */
.home-main .hico { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(var(--brand-rgb), .22); }
/* 補助(下2つ)は小さめ */
.home-sub .hico { width: 38px; height: 38px; }
.home-sub .hico svg { width: 19px; height: 19px; }

/* クリックできる行/カードの共通ホバー */
.action-tile {
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.action-tile:hover {
  border-color: var(--bs-primary-border-subtle) !important;
  box-shadow: 0 8px 24px rgba(20, 40, 32, .10);
  transform: translateY(-1px);
}
/* 設定が未完了の間、使えない機能は灰色＆押せない見た目に（設定を促す） */
.action-tile.locked {
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
}
/* 右端のシェブロン（純CSS） */
.chevron {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-top: 2px solid #9aa6a1;
  border-right: 2px solid #9aa6a1;
  transform: rotate(45deg);
  opacity: .55;
}
.action-tile:hover .chevron { opacity: 1; border-color: var(--brand); }

/* ---- 4) アプリ固有の小部品 ---- */
/* 施設検索の候補行（チェックボックス＋施設名＋住所） */
.fac-results { display: flex; flex-direction: column; gap: 7px; }
.fac-row {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--bs-border-color);
  border-radius: 9px; padding: 10px 12px;
  transition: border-color .12s, background .12s;
}
.fac-row:hover { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); }
/* 地図から飛んできて該当施設をハイライト（オレンジの枠＋淡い背景） */
.fac-row-hl {
  border-color: #c35009; border-width: 2px;
  background: #fff4ec; box-shadow: 0 0 0 3px rgba(195,80,9,.15);
}

/* 検索のコツ（登録画面） */
.search-tips { padding-left: 1.1em; margin-bottom: .5rem; line-height: 1.6; }
.search-tips li { margin-bottom: 3px; }
.search-tips li.tip-red { color: #c0392b; font-weight: 600; }

/* 症例相談 掲示板 */
.board-notice {
  background: #fff7e6; border: 1px solid #f0d28a; border-radius: 9px;
  padding: 10px 13px; font-size: 14px; line-height: 1.7; color: #7a5a00;
}
.board-row { margin-bottom: 8px; }
/* 投稿者/返信者の実名表示（大きめ）。注記は赤の太字で注意喚起 */
.board-asname { font-size: 16.5px; color: #2b2b2b; }
.asname-note { color: #c0392b; font-weight: 700; }
/* 未入力のうちは投稿/返信ボタンを“押せない”とはっきり分かるグレーに */
#bf-submit:disabled, #cf-submit:disabled {
  opacity: 1; background: #cdd5d1; border-color: #cdd5d1; color: #7a847f; cursor: not-allowed;
}
.board-body { white-space: normal; line-height: 1.7; font-size: 15.5px; word-break: break-word; }
.board-comment {
  border-left: 3px solid var(--bs-primary-border-subtle);
  background: #f7faf8; border-radius: 0 8px 8px 0;
  padding: 8px 12px; margin-bottom: 8px;
}
/* 解決済みバッジ */
.board-badge {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  color: #1f6b3b; background: #e3f3e8; border: 1px solid #b6dcc2;
  border-radius: 999px; padding: 1px 9px; vertical-align: middle;
}
/* =====================================================================
   公開トップ（ログイン前のランディング）。body.lp-mode のときだけ全幅ヒーロー。
   ===================================================================== */
body.lp-mode .app-card { max-width: 960px; overflow: hidden; }  /* カードを広げ、角丸で中身を切り抜く */
body.lp-mode #app-title { display: none; }                       /* ヒーローが見出しを兼ねる */
body.lp-mode #topnav { display: none; }
body.lp-mode .card-body.p-4 { padding: 0 !important; }           /* ヒーローを全幅に */

/* HERO */
.lp-hero {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff; text-align: center; position: relative; overflow: hidden;
  padding: 46px 24px 36px;
}
.lp-hero::before, .lp-hero::after {     /* 余白を埋める淡い装飾の円 */
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06);
}
.lp-hero::before { width: 220px; height: 220px; right: -70px; top: -80px; }
.lp-hero::after  { width: 150px; height: 150px; left: -50px; bottom: -60px; }
.lp-hero > * { position: relative; z-index: 1; }
.lp-badge {
  display: inline-block; font-size: 12px; font-weight: 600; margin-bottom: 16px;
  background: rgba(255,255,255,.16); color: #fff;
  padding: 5px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.28);
}
.lp-hero-title { font-size: 32px; font-weight: 800; line-height: 1.25; margin: 0 0 14px; letter-spacing: .01em; }
.lp-hero-sub { font-size: 14.5px; line-height: 1.75; opacity: .93; margin: 0 auto 24px; max-width: 580px; }

.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 580px; margin: 0 auto; }
.lp-stat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 13px 4px; }
.lp-num { font-size: 25px; font-weight: 800; color: #fff; line-height: 1; }
.lp-lbl { font-size: 11px; color: rgba(255,255,255,.85); margin-top: 6px; }

/* セクション共通 */
.lp-section { padding: 30px 24px; }
.lp-h2 { font-size: 19px; font-weight: 700; color: var(--brand); text-align: center; margin: 0 0 20px; }

/* 3ステップ */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-step { text-align: center; padding: 20px 14px; border: 1px solid var(--bs-border-color); border-radius: 14px; background: #fff; }
.lp-step-ico {
  width: 46px; height: 46px; margin: 0 auto 13px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 20px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(var(--brand-rgb), .25);
}
.lp-step-t { font-weight: 700; font-size: 15px; margin-bottom: 7px; }
.lp-step-d { font-size: 12.5px; color: var(--bs-secondary-color); line-height: 1.65; }

/* ログインカード */
.lp-login { background: #f5f8f6; }
.lp-login-card {
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: 16px;
  padding: 28px 24px; max-width: 480px; margin: 0 auto;
  box-shadow: 0 8px 28px rgba(var(--brand-rgb), .08);
}

/* フッター */
.lp-foot { text-align: center; font-size: 12px; color: var(--bs-secondary-color); padding: 22px 24px 28px; line-height: 1.9; }
.lp-foot a { color: var(--bs-secondary-color); }

@media (max-width: 575.98px) {
  .lp-hero { padding: 38px 18px 30px; }
  .lp-hero-title { font-size: 25px; }
  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-section { padding: 26px 18px; }
}

/* ホームタイルの未読バッジ（メール不要でアプリへ呼び戻す） */
.tile-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #d32f2f; color: #fff; font-size: 12.5px; font-weight: 700; margin-right: 6px;
}

/* メッセンジャー風チャット */
.chat-box {
  border: 1px solid var(--bs-border-color); border-radius: 12px; background: #f3f6f4;
  padding: 12px; max-height: 56vh; overflow-y: auto;
}
.chat-row { display: flex; margin-bottom: 10px; }
.chat-row.left { justify-content: flex-start; }
.chat-row.right { justify-content: flex-end; }
.chat-bubble {
  max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.6;
  background: #fff; border: 1px solid #dbe4df;
}
.chat-row.right .chat-bubble { background: var(--brand); color: #fff; border-color: var(--brand); }
.chat-time { font-size: 11px; opacity: .7; margin-top: 3px; }
.case-open { font-size: 12.5px; font-weight: 700; color: #c35009; }

/* 返信に添付された紹介先カード */
.board-ref {
  margin-top: 8px; padding: 9px 12px; font-size: 14.5px; line-height: 1.6;
  background: #fff; border: 1px solid #cfe0d6; border-left: 3px solid #c35009;
  border-radius: 8px;
}
/* チェックボックスの見た目（純CSS） */
.fac-check {
  flex: 0 0 auto; width: 20px; height: 20px;
  border: 2px solid #9aa6a1; border-radius: 5px; position: relative;
}
.fac-row:hover .fac-check, .fac-check.checked { border-color: var(--brand); }
.fac-check.checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px; border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fac-body { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.fac-name { font-size: 14px; font-weight: 600; }
.fac-addr { font-size: 12px; color: var(--bs-secondary-color); }
.fac-specs { font-size: 12px; color: var(--brand); }
.fac-docs { font-size: 13.5px; font-weight: 700; color: #1a2420; }
.fac-voice { font-size: 12px; color: var(--bs-secondary-color); }
/* 候補なしの案内（赤・大きめで目立たせる） */
.fac-empty { font-size: 17px; font-weight: 700; color: #c0271d; margin: 6px 0 2px; }
.fac-empty-sub { font-size: 13px; font-weight: 600; color: #c0271d; margin: 0; line-height: 1.6; }
/* 病院/診療所ラベル（診療所＝地域クリニックを目立たせる） */
.fac-type { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.fac-type.is-clinic { color: var(--brand); background: var(--bs-primary-bg-subtle); }
.fac-type.is-hospital { color: #8a6d3b; background: #fbf0e8; }

/* 登録のヒント（地域クリニックを登録してほしい） */
.reg-tip {
  font-size: 14.5px; line-height: 1.65;
  color: var(--bs-primary-text-emphasis);
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 12px; padding: 10px 12px; margin: 0 0 14px;
}
.fac-badge {
  display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 600;
  color: var(--brand); background: #fff; border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 999px; padding: 2px 9px;
}

/* give-to-get の案内帯 */
.giveget {
  font-size: 13px; color: #c35009; background: #fbf0e8;
  border: 1px solid #f0d4c0; border-radius: 12px; padding: 10px 12px;
}

/* 完了パネル */
.done {
  padding: 16px; border: 1px solid var(--bs-primary-border-subtle);
  background: var(--bs-primary-bg-subtle); border-radius: 12px;
}
.done-title { font-size: 15px; font-weight: 700; color: var(--brand); margin: 0 0 6px; }

/* メッセージ（msg/regMsg が付ける .message + 種別） */
.message { font-size: 13px; margin: 10px 0 0; padding: 10px 12px; border-radius: 9px; }
.message:empty, .message.hidden { display: none; }
.message.info { color: var(--bs-secondary-color); background: #f6f8f8; }
.message.error { color: #b3261e; background: #fbecea; }
.message.success { color: var(--brand); background: var(--bs-primary-bg-subtle); }

/* 登録の成功は大きく・目立つように（「登録しました！」をしっかり伝える） */
#register-msg.success {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  padding: 16px 14px;
  border: 1px solid var(--bs-primary-border-subtle);
  animation: reg-pop .2s ease-out;
}
@keyframes reg-pop { from { transform: scale(.95); opacity: .3; } to { transform: scale(1); opacity: 1; } }

/* ── 紹介状／患者手紙 ── */
.letter-doc {
  background: #fff; border: 1px solid var(--bs-border-color); border-radius: 10px;
  padding: 22px; font-size: 14px; line-height: 1.95; color: #1a2420;
}
.letter-doc p { margin: 0 0 10px; }
.letter-date { text-align: right; color: var(--bs-secondary-color); }
.letter-to { font-size: 16px; font-weight: 700; }
.letter-sub { color: var(--bs-secondary-color); margin-top: -6px !important; }
.letter-title { font-size: 18px; font-weight: 700; text-align: center; margin: 14px 0; }
.letter-patient { font-weight: 600; }
.letter-patient:empty { display: none; }
.letter-note { white-space: pre-wrap; }
.letter-note:empty { display: none; }
.note-label { font-weight: 700; }
.letter-from { margin-top: 16px; text-align: right; }
.letter-from .lf-label { color: var(--bs-secondary-color); font-size: 12px; margin-bottom: 2px !important; }
.letter-from p { margin: 0; }
.letter-invite {
  display: flex; gap: 12px; align-items: center;
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--bs-border-color);
}
.letter-invite-qr { flex: 0 0 auto; }
.letter-invite-text { font-size: 12px; color: var(--bs-secondary-color); line-height: 1.6; }
.letter-invite-url { word-break: break-all; color: var(--brand); }

/* 印刷：選んだ文書(.print-target)だけを出す。まとめて印刷は #doc-both を対象に2文書を改ページ。 */
@media print {
  body * { visibility: hidden !important; }
  .print-target, .print-target * { visibility: visible !important; }
  .print-target {
    position: absolute; left: 0; top: 0; width: 100%;
    border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 5mm !important;
  }
  /* 「まとめて印刷」時：枠内の各文書はフラットに、2枚目は改ページ */
  .print-target .letter-doc { border: 0 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 0 6mm 0 !important; }
  .print-target #doc-patient { page-break-before: always; }
  .letter-invite { border-top: 1px solid #999; }
}

/* 「地図で見る」ボタンを目立たせる（University of Miami オレンジの塗り） */
#d-map {
  color: #fff !important;
  background: #c35009; border-color: #c35009;
  font-weight: 700; font-size: 16px; padding: 11px 30px;
  box-shadow: 0 3px 10px rgba(195, 80, 9, .3);
}
#d-map:hover, #d-map:focus { background: #a8440a; border-color: #a8440a; color: #fff !important; }

/* 会員地図のキャンバス */
#map-canvas { height: 62vh; min-height: 420px; border-radius: 12px; overflow: hidden; border: 1px solid var(--bs-border-color); }
/* 地図のピン（オレンジの丸・gigishokai風） */
.fac-pin {
  border-radius: 50%;
  background: #c35009; border: 2.5px solid #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
  box-sizing: border-box;
}
/* クラスタの吹き出しもピンと同じオレンジ系に統一（markercluster既定の緑/黄を上書き） */
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(195, 80, 9, .25); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: rgba(195, 80, 9, .9); }
.marker-cluster div { color: #fff; }
.marker-cluster span { color: #fff; font-weight: 700; }

/* 補足の小さな文字 */
.who { font-size: 12px; color: var(--bs-secondary-color); line-height: 1.6; }
.hint { display: block; font-size: 11.5px; color: var(--bs-secondary-color); margin-top: 5px; }