/* ============================================================
   個別支援計画書AIシステム - カスタムスタイル
   ブランドカラー: 「ナチュラルバランス」(エコルドグリーン × ベージュ/クリーム系)
   フォント: M PLUS Rounded 1c（丸ゴシック）
   ※データ・計算・レイアウト配置は変更せず、配色と質感のみ調整
   ============================================================ */

:root {
  /* --- エコルドカラーパレット --- */
  --ecolde-beige: #F8EAD7;        /* サイドメニュー背景／やさしい補助色 */
  --ecolde-beige-dark: #EEDCC0;   /* ベージュより少し濃い区切り・ホバー用 */
  --ecolde-cream: #FFF9E6;        /* メイン画面背景／やさしい背景色 */
  --ecolde-white: #FFFFFF;        /* カード等のベースカラー */
  --ecolde-gray: #F2F2F2;         /* 区切り・背景補助 */
  --ecolde-green: #C8E6C9;        /* 成長・安心・自然・支援（アクセント/淡色） */
  --ecolde-green-mid: #7FB88F;    /* ボタン等コントラスト用の中間グリーン */
  --ecolde-green-mid-hover: #6AA97C;
  --ecolde-green-dark: #2F5233;   /* 選択中強調・見出し用の濃いグリーン */
  --ecolde-pink: #FFB3C7;         /* やさしさ・愛情・あたたかさ */
  --ecolde-orange: #FFD6A4;       /* 親しみやすさ・元気・笑顔 */
  --ecolde-yellow: #FFF3B0;       /* 希望・明るさ・子どもの未来 */
  --ecolde-sky: #BDE0FE;          /* 信頼・清潔感／のびやかさ（進行中・アセスメント系のアクセント） */
  --ecolde-sky-dark: #4A90C4;     /* スカイの濃色版：見出し文字・アイコン線用 */
  --ecolde-text-dark: #4A4238;    /* 暖色寄りの濃いグレー（サイドメニュー非選択文字） */
  --ecolde-shadow: rgba(196, 156, 104, 0.18);
}

* { box-sizing: border-box; }

html, body {
  font-family: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  background-color: var(--ecolde-cream) !important;
}

/* ============================================================
   ブランドカラー：青系 → エコルドグリーン系への置き換え
   Tailwind CDN利用のためユーティリティクラスを上書きする形で反映。
   意味を持つ配色（status-*, domain-*）は個別セクションで維持しつつ調整。
   ============================================================ */
.bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: var(--ecolde-green-mid) !important; }
a.bg-blue-500:hover, a.bg-blue-600:hover, button.bg-blue-600:hover,
.hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover { background-color: var(--ecolde-green-mid-hover) !important; }
.text-blue-600, .text-blue-700 { color: var(--ecolde-green-dark) !important; }
.text-blue-300 { color: var(--ecolde-green) !important; }
.bg-blue-50, .bg-blue-100 { background-color: var(--ecolde-green) !important; }
.border-blue-300, .border-blue-500, .border-blue-600 { border-color: var(--ecolde-green-mid) !important; }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(127,184,143,0.35) !important; border-color: var(--ecolde-green-mid) !important; }
.from-blue-50 { --tw-gradient-from: var(--ecolde-cream) !important; }
.to-indigo-100 { --tw-gradient-to: var(--ecolde-green) !important; }
.bg-indigo-900, .bg-blue-900 { background-color: var(--ecolde-green-dark) !important; }
.border-indigo-600 { border-color: var(--ecolde-green-mid) !important; }
.bg-gray-50 { background-color: var(--ecolde-cream) !important; }
.bg-gray-100 { background-color: var(--ecolde-gray) !important; }

/* ヘッダー（ページ上部のタイトルバー）：白背景だけ浮くのでクリームに統一 */
#appHeader { background-color: var(--ecolde-cream) !important; border-bottom: 1px solid #EFE4D2 !important; }

/* ============================================================
   サイドメニュー（#sidebar 内限定でオーバーライド）
   背景：エコルドベージュ／非選択文字：濃いグレー／選択中：エコルドグリーン＋濃いグリーン文字
   ============================================================ */
/* デフォルトは非表示（オフキャンバス）。PC/スマホともに「端のボタン」で開閉する。
   #sidebar.open が付いた時だけ画面内に入ってくる。 */
#sidebar {
  background-color: var(--ecolde-beige) !important;
  color: var(--ecolde-text-dark) !important;
  border-right: 3px solid var(--ecolde-green);
  transform: translateX(-100%);
  transition: transform 0.25s ease-out;
  box-shadow: 4px 0 16px rgba(0,0,0,0.15);
}
#sidebar.open { transform: translateX(0); }
#sidebarBackdrop { transition: opacity 0.2s ease-out; }
#sidebarToggleBtn { transition: transform 0.2s ease-out, background-color 0.2s; }
#sidebarToggleBtn.active { transform: scale(0.92); }
#sidebar, #sidebar a, #sidebar button, #sidebar div { color: var(--ecolde-text-dark); }
#sidebar .text-gray-400, #sidebar .text-gray-500 { color: #8A7F6E !important; }
#sidebar .border-gray-700 { border-color: var(--ecolde-beige-dark) !important; }
#sidebar .bg-gray-600, #sidebar .bg-gray-700 { background-color: var(--ecolde-beige-dark) !important; color: var(--ecolde-text-dark) !important; }
#sidebar .hover\:bg-gray-700:hover, #sidebar .hover\:bg-gray-600:hover { background-color: var(--ecolde-beige-dark) !important; }

/* 施設閲覧中バナー（濃いグリーン背景）：事業所名も見出し/戻るボタンと同じ薄いグリーンで統一 */
#viewingTenantBanner, #viewingTenantBanner div, #viewingTenantBanner span { color: var(--ecolde-green) !important; }
#viewingTenantBanner button { color: var(--ecolde-green) !important; }
#viewingTenantBanner button:hover { color: white !important; }

.nav-item { color: var(--ecolde-text-dark); font-weight: 500; border-radius: 10px; }
.nav-item i { color: var(--ecolde-text-dark); }
.nav-item.active { background-color: var(--ecolde-green) !important; color: var(--ecolde-green-dark) !important; font-weight: 700; }
.nav-item.active i { color: var(--ecolde-green-dark) !important; }

/* カード */
.card { background: var(--ecolde-white); border-radius: 18px; border: 1px solid #EFE4D2; padding: 1.5rem; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 14px var(--ecolde-shadow); }

/* ダッシュボード・クイックアクション（よく使う3機能を大きく、他をまとめて表示） */
.quick-action-main {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--ecolde-white); border: 1px solid #EFE4D2; border-radius: 22px;
  padding: 1.25rem 1.5rem; text-align: left; cursor: pointer; transition: all 0.2s; width: 100%;
}
.quick-action-main:hover { box-shadow: 0 6px 18px var(--ecolde-shadow); transform: translateY(-2px); border-color: var(--ecolde-green-mid); }
.quick-action-icon {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px; margin-bottom: 4px;
}
.quick-action-label { font-size: 16px; font-weight: 700; color: var(--ecolde-text-dark); }
.quick-action-sub { font-size: 12px; color: #8A7F6E; }
.quick-action-sub-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--ecolde-cream); border: 1px solid #EFE4D2; border-radius: 999px;
  padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--ecolde-text-dark);
  cursor: pointer; transition: all 0.2s;
}
.quick-action-sub-btn:hover { background: var(--ecolde-beige); border-color: var(--ecolde-green-mid); }
.quick-action-sub-btn i { color: var(--ecolde-green-mid); }

/* 共通ヘッダー中央：ログイン中の事業所名バッジ＋施設切替ボタン
   （ヘッダーは position:relative の前提で、常にヘッダー幅の中央に配置する） */
#appHeader { position: relative; }
.header-tenant-slot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; z-index: 1;
}
.header-tenant-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800;
  color: var(--ecolde-green-dark); background: #FFFFFF; border: 2px solid var(--ecolde-green-mid);
  border-radius: 999px; padding: 6px 18px;
  white-space: nowrap; max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
}
.header-tenant-switch-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--ecolde-green-mid); color: white; font-size: 13px; cursor: pointer; transition: opacity 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.header-tenant-switch-btn:hover { opacity: 0.85; background: var(--ecolde-green-mid-hover); }
@media (max-width: 640px) {
  .header-tenant-badge { font-size: 12px; padding: 5px 12px; }
  .header-tenant-switch-btn { width: 28px; height: 28px; font-size: 11px; }
}

/* モバイル版ヘッダー：ハンバーガー／施設名バッジ／ユーザーアイコンが横並びで
   詰まって重なって見えるのを解消する。中央の施設名バッジは絶対配置をやめて
   2段目（幅100%・中央寄せ）に折り返し、1段目は「ハンバーガー+タイトル」と
   「児発管バッジ+ユーザーアイコン」だけを両端に配置する。 */
@media (max-width: 640px) {
  #appHeader {
    flex-wrap: wrap;
    row-gap: 6px;
    padding: 0.625rem 0.75rem !important;
  }
  #appHeader .header-tenant-slot {
    position: static !important;
    left: auto !important; top: auto !important; transform: none !important;
    order: 10;
    width: 100%;
    justify-content: center;
  }
  #appHeader .header-tenant-badge { max-width: 80vw; }
  #appHeader #pageTitle { font-size: 0.95rem; }
  #appHeader #headerUserBadge { font-size: 10px; padding: 3px 8px; white-space: nowrap; }
}

/* 共通ヘッダー右：ログイン中ユーザーのアイコン＋氏名（クリックでマイプロフィールメニュー） */
.header-user-slot { position: relative; }
.header-user-btn {
  display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  cursor: pointer; padding: 4px 8px 4px 4px; border-radius: 999px; transition: background 0.15s;
}
.header-user-btn:hover { background: var(--ecolde-beige); }
.header-user-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--ecolde-green); display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ecolde-green-mid); position: relative;
}
.header-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-user-avatar .avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--ecolde-green-dark); font-size: 16px;
}
.header-user-name { font-size: 13px; font-weight: 700; color: var(--ecolde-text-dark); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .header-user-name { display: none; } }
.header-user-menu {
  position: absolute; top: calc(100% + 8px); right: 0; background: white; border-radius: 14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15); min-width: 200px; z-index: 40; overflow: hidden;
  border: 1px solid #EFE4D2;
}
.header-user-menu button {
  width: 100%; text-align: left; padding: 11px 16px; font-size: 13px; font-weight: 500;
  color: var(--ecolde-text-dark); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px; transition: background 0.15s;
}
.header-user-menu button:hover { background: var(--ecolde-cream); }
.header-user-menu button i { color: var(--ecolde-green-mid); width: 16px; text-align: center; }
.header-user-menu .header-user-menu-divider { height: 1px; background: #EFE4D2; margin: 2px 0; }
.header-user-menu .header-user-menu-logout { color: #C0392B; }
.header-user-menu .header-user-menu-logout i { color: #C0392B; }

/* マイプロフィールモーダル：アイコンプレビュー＋変更ボタン */
.profile-avatar-preview {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto;
  background: var(--ecolde-green); display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--ecolde-green-mid); position: relative;
}
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-preview .avatar-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--ecolde-green-dark); font-size: 40px;
}

/* ダッシュボード・メインアクションカード（児童管理／個別支援計画書／日々の記録の3枚。色はpropsで指定） */
.main-action-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  border-radius: 22px; border: 1px solid rgba(0,0,0,0.04); padding: 1.5rem; text-align: left;
  cursor: default; transition: box-shadow 0.2s, transform 0.2s; width: 100%; min-height: 210px;
}
.main-action-card:hover { box-shadow: 0 8px 22px var(--ecolde-shadow); transform: translateY(-2px); }
.main-action-card .main-action-badge {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 22px; margin-bottom: 14px; flex-shrink: 0; position: relative; z-index: 1;
}
.main-action-card .main-action-ghost-icon {
  position: absolute; top: -6px; right: -10px; font-size: 96px; opacity: 0.12; z-index: 0; pointer-events: none;
}
.main-action-card .main-action-title { font-size: 20px; font-weight: 800; color: var(--ecolde-text-dark); margin-bottom: 6px; position: relative; z-index: 1; }
.main-action-card .main-action-desc { font-size: 13px; color: #6B6255; line-height: 1.6; margin-bottom: 16px; position: relative; z-index: 1; flex: 1; }
.main-action-card .main-action-btn {
  display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 999px; padding: 10px 20px;
  font-size: 14px; font-weight: 700; color: white; cursor: pointer; transition: opacity 0.2s; position: relative; z-index: 1;
}
.main-action-card .main-action-btn:hover { opacity: 0.88; }
.main-action-card.tone-green { background: #EAF6EC; }
.main-action-card.tone-green .main-action-badge { background: var(--ecolde-green-mid); }
.main-action-card.tone-green .main-action-btn { background: var(--ecolde-green-mid); }
.main-action-card.tone-blue { background: #E9F3FC; }
.main-action-card.tone-blue .main-action-badge { background: var(--ecolde-sky-dark); }
.main-action-card.tone-blue .main-action-btn { background: var(--ecolde-sky-dark); }
.main-action-card.tone-pink { background: #FDEDF1; }
.main-action-card.tone-pink .main-action-badge { background: #E8879E; }
.main-action-card.tone-pink .main-action-btn { background: #E8879E; }

/* ダッシュボード・「今やること」リスト行 */
.todo-row {
  display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: none;
  padding: 10px 4px; text-align: left; cursor: pointer; border-radius: 12px; transition: background 0.15s;
}
.todo-row:hover { background: var(--ecolde-cream); }
.todo-row + .todo-row { border-top: 1px solid #F1EAE0; }
.todo-row-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px; }
.todo-row-name { font-size: 14px; font-weight: 500; color: var(--ecolde-text-dark); flex-shrink: 0; }
.todo-row-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.todo-row-badge.type-plan { background: var(--ecolde-pink); color: #7A1F3D; }
.todo-row-badge.type-monitoring { background: var(--ecolde-orange); color: #7A4A00; }
.todo-row-badge.type-daily { background: var(--ecolde-sky); color: var(--ecolde-sky-dark); }
.todo-row-meta { font-size: 12px; color: #9C927F; margin-left: auto; flex-shrink: 0; text-align: right; }
.todo-row-meta .todo-row-meta-label { display: block; font-size: 10px; color: #B5AA96; }
.todo-row-chevron { color: #C7BCA8; flex-shrink: 0; }

/* ダッシュボード・サブアクション（アセスメント／面談記録／支援会議／モニタリングの4ボタン） */
.sub-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .sub-action-grid { grid-template-columns: repeat(4, 1fr); } }

/* ダッシュボード・「個別支援計画書ができるまで」フロー（横並びステッパー） */
.flow-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.flow-title { font-size: 16px; font-weight: 800; color: var(--ecolde-text-dark); display: flex; align-items: center; gap: 8px; }
.flow-title i { color: var(--ecolde-sky-dark); }
.flow-hint { font-size: 12px; font-weight: 700; color: var(--ecolde-sky-dark); background: var(--ecolde-sky); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.flow-stepper { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.flow-step {
  display: flex; flex-direction: column; align-items: center; text-align: center; background: transparent; border: none;
  cursor: pointer; flex: 1 1 0; min-width: 108px; padding: 4px 6px; border-radius: 14px; transition: background 0.15s;
}
.flow-step:hover { background: var(--ecolde-cream); }
.flow-step-avatar { position: relative; width: 56px; height: 56px; margin-bottom: 10px; flex-shrink: 0; }
.flow-step-icon-circle {
  position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.flow-step-num-badge {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 12px;
  box-shadow: 0 0 0 3px var(--ecolde-white);
}
.flow-step-title { font-size: 13px; font-weight: 700; color: var(--ecolde-text-dark); line-height: 1.4; margin-bottom: 4px; }
.flow-step-desc { font-size: 11px; color: #9C927F; line-height: 1.5; }
.flow-arrow { align-self: center; color: #D9CFBC; font-size: 13px; flex-shrink: 0; margin: 0 -2px; }

/* ダッシュボード・アイコンパネル（8機能を同じ大きさのボタンで統一表示。将来アイコン差し替えが容易なようimg src差し替えのみで対応） */
.icon-panel-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--ecolde-white); border: 1px solid #EFE4D2; border-radius: 20px;
  padding: 1rem 0.5rem; text-align: center; cursor: pointer; transition: all 0.2s; width: 100%;
}
.icon-panel-btn:hover { box-shadow: 0 6px 16px var(--ecolde-shadow); transform: translateY(-3px); border-color: var(--ecolde-green-mid); }
.icon-panel-btn img { width: 48px; height: 48px; object-fit: contain; }
.icon-panel-btn .icon-panel-label { font-size: 12px; font-weight: 700; color: var(--ecolde-text-dark); line-height: 1.3; white-space: nowrap; }
.icon-panel-btn .icon-panel-sub { font-size: 10px; color: #8A7F6E; line-height: 1.2; white-space: nowrap; }
@media (max-width: 480px) {
  .icon-panel-btn { padding: 0.75rem 0.25rem; }
  .icon-panel-btn img { width: 40px; height: 40px; }
  .icon-panel-btn .icon-panel-label { font-size: 11px; }
  .icon-panel-btn .icon-panel-sub { font-size: 9px; }
}

/* ステータスバッジ（10工程それぞれで色が重複しないように整理。意味は保持しつつ全体トーンに馴染ませる） */
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; }
.status-assessment { background: #FDF0D5; color: #92400E; }          /* ①アセスメント：オレンジ系 */
.status-parent_meeting { background: #FFE3EC; color: #9D174D; }      /* ②保護者面談：ピンク系 */
.status-draft { background: var(--ecolde-sky); color: var(--ecolde-sky-dark); } /* ③原案作成：スカイ（作業中） */
.status-staff_review { background: #F1E7FB; color: #5B21B6; }        /* ④職員周知：パープル系 */
.status-meeting { background: #E3EEFB; color: #1E3A5F; }             /* ⑤支援会議：ブルー系（面談のピンクと区別） */
.status-final { background: var(--ecolde-green); color: var(--ecolde-green-dark); } /* ⑥本案完成：グリーン */
.status-signing { background: var(--ecolde-orange); color: #7A4A00; } /* ⑦保護者署名：オレンジ濃め */
.status-active { background: var(--ecolde-green-mid); color: white; } /* ⑧計画有効：濃いグリーン（進行中を強調） */
.status-monitoring { background: var(--ecolde-yellow); color: #7A5B00; } /* ⑨モニタリング：イエロー（アイコンと統一） */
.status-completed { background: var(--ecolde-gray); color: #475569; } /* ⑩完了：グレー */

/* 「対応が必要な児童」用アラートバッジ（種類別に色分け。「作成中の計画書」の児童名と同じフォント[14px/500]をピル型の枠に入れて表示） */
.alert-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: 9999px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.alert-badge-plan { background: var(--ecolde-pink); color: #7A1F3D; }       /* 計画書系（未作成・期限間近）：ピンク */
.alert-badge-monitoring { background: var(--ecolde-yellow); color: #7A5B00; } /* モニタリング系：イエロー */
.alert-badge-daily { background: var(--ecolde-sky); color: var(--ecolde-sky-dark); } /* 日々の記録系：スカイ */

/* フォーム */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 14px; font-weight: 500; color: var(--ecolde-text-dark); margin-bottom: 4px; }
.form-input { width: 100%; padding: 10px 14px; border: 1px solid #E3D9C6; border-radius: 12px; font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; }
.form-input:focus { border-color: var(--ecolde-green-mid); box-shadow: 0 0 0 3px rgba(127,184,143,0.15); }
.form-textarea { width: 100%; padding: 10px 14px; border: 1px solid #E3D9C6; border-radius: 12px; font-size: 14px; outline: none; resize: vertical; min-height: 100px; transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit; }
.form-textarea:focus { border-color: var(--ecolde-green-mid); box-shadow: 0 0 0 3px rgba(127,184,143,0.15); }

/* ボタン */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; outline: none; font-family: inherit; }
.btn-primary { background: var(--ecolde-green-mid); color: white; }
.btn-primary:hover { background: var(--ecolde-green-mid-hover); }
.btn-secondary { background: var(--ecolde-cream); color: var(--ecolde-text-dark); border: 1px solid #E3D9C6; }
.btn-secondary:hover { background: var(--ecolde-beige); }
.btn-success { background: #6AAE7E; color: white; }
.btn-success:hover { background: #57996B; }
.btn-danger { background: #E8837E; color: white; }
.btn-danger:hover { background: #DD6C66; }
.btn-warning { background: var(--ecolde-orange); color: #7A4B15; }
.btn-warning:hover { background: #FFC988; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-lg { padding: 12px 28px; font-size: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* テーブル */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: var(--ecolde-cream); padding: 12px 16px; text-align: left; font-size: 13px; font-weight: 600; color: #8A7F6E; border-bottom: 1px solid #EFE4D2; }
td { padding: 14px 16px; font-size: 14px; color: var(--ecolde-text-dark); border-bottom: 1px solid #F5EEE1; }
tr:hover td { background: var(--ecolde-cream); }

/* タブ */
.tabs { display: flex; border-bottom: 2px solid #EFE4D2; margin-bottom: 1.5rem; }
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: #8A7F6E; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
.tab.active { color: var(--ecolde-green-dark); border-bottom-color: var(--ecolde-green-mid); }

/* ステッパー */
.stepper { display: flex; align-items: center; overflow-x: auto; padding: 1rem 0; }
.step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px; }
.step-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.step-circle.pending { background: var(--ecolde-gray); color: #ADA495; }
.step-circle.active { background: var(--ecolde-sky-dark); color: white; box-shadow: 0 0 0 3px rgba(189,224,254,0.55); }
.step-circle.completed { background: var(--ecolde-green-dark); color: white; }
.step-label { font-size: 11px; color: #8A7F6E; text-align: center; line-height: 1.2; }
.step-connector { flex: 1; height: 2px; background: var(--ecolde-gray); min-width: 20px; }
.step-connector.completed { background: var(--ecolde-green-dark); }

/* 「次にクリックするのはここです」を直感的に示すパルスアニメーション。
   ステッパーの番号ではなく、実際に次に押すべきアクションボタンに直接付与する
   （ユーザーの視線・操作が誘導されるよう、ボタン自体を光らせる）
   ・ボタン色（オレンジ系）と被らないよう、輪の色はコントラストの効く赤系にする
   ・色の変化だけでは気づきにくいため、拡大縮小（スケール）の動きも加える */
.next-action-pulse {
  position: relative;
  z-index: 1;
  animation: nextActionPulse 1.4s ease-in-out infinite;
}
@keyframes nextActionPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50%  { transform: scale(1.06); box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.ai-generating { background: linear-gradient(135deg, var(--ecolde-cream), var(--ecolde-green)); border: 2px dashed var(--ecolde-green-mid); border-radius: 18px; padding: 2rem; text-align: center; }
.signature-area { background: var(--ecolde-yellow); border: 2px solid var(--ecolde-orange); border-radius: 18px; padding: 1.5rem; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.3s ease-out; }

/* 5領域カラー（意味を保持するため色相は維持、彩度をパレットに馴染ませる） */
.domain-health { color: #3D8B5F; background: #DCF0DE; padding: 2px 8px; border-radius: 4px; }
.domain-movement { color: #2E7D9E; background: #DDEFF7; padding: 2px 8px; border-radius: 4px; }
.domain-cognition { color: #7C5FB0; background: #EAE2F7; padding: 2px 8px; border-radius: 4px; }
.domain-language { color: #C0574F; background: #FBE3E1; padding: 2px 8px; border-radius: 4px; }
.domain-relationship { color: #C08A2E; background: #FBEBD3; padding: 2px 8px; border-radius: 4px; }

.plan-item-card { background: var(--ecolde-cream); border: 1px solid #EFE4D2; border-radius: 12px; padding: 1rem; margin-bottom: 0.75rem; }
.plan-item-card:hover { border-color: var(--ecolde-green-mid); }

@media print {
  .no-print { display: none !important; }
  #sidebar, #sidebarBackdrop, #sidebarToggleBtn { display: none !important; }
  header { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}