/* ==========================================================
 * テーマ上書きレイヤー — 既存ページの Tailwind ユーティリティを
 * FLOWER PHARMACY デザインシステムへ一括マッピングする。
 *   - 影 → なし / 角丸 → 2px / パステル面 → 白 + 1px 罫線
 *   - 緑 (emerald) = 青, 琥珀 (amber) = 黄 (濃), 薔薇/赤 = 赤, 空 (sky) = 青, 藍/紫 (indigo/purple/violet) = 紫
 *   読み込み順: tailwind.css → design-system.css → theme-overrides.css → style.css
 * ========================================================== */

/* ---- 影・角丸 ---- */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .hover\:shadow-md:hover, .hover\:shadow-lg:hover { box-shadow: none !important; }
.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl,
.rounded-t-lg, .rounded-b-lg, .rounded-t-xl, .rounded-b-xl, .rounded-l-lg, .rounded-r-lg, .rounded-b { border-radius: var(--fp-radius) !important; }
/* ピル型バッジは四角に (丸いアバター・点は w/h 指定の正方形なので対象外) */
.rounded-full.px-2, .rounded-full.px-1\.5, .rounded-full.px-2\.5, .rounded-full.px-3 { border-radius: var(--fp-radius) !important; }
.ring-1, .ring-2, .ring-4 { --tw-ring-color: var(--fp-line) !important; }

/* ---- パステル面 (100/50) → 白 + 罫線。文字色は読みやすい濃色に ---- */
.bg-emerald-100, .bg-emerald-50, .bg-green-100, .bg-green-50, .bg-teal-100, .bg-teal-50,
.bg-sky-100, .bg-sky-50, .bg-blue-100, .bg-blue-50, .bg-cyan-100, .bg-cyan-50,
.bg-amber-100, .bg-amber-50, .bg-yellow-100, .bg-yellow-50, .bg-orange-100, .bg-orange-50,
.bg-rose-100, .bg-rose-50, .bg-red-100, .bg-red-50, .bg-pink-100, .bg-pink-50,
.bg-purple-100, .bg-purple-50, .bg-indigo-100, .bg-indigo-50, .bg-violet-100, .bg-violet-50, .bg-fuchsia-100 {
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1px var(--fp-line) !important;
}
/* 表の見出し・ごく薄いグレーは背景トークンへ */
.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100 { background-color: var(--fp-thead) !important; }
.hover\:bg-slate-50:hover, .hover\:bg-gray-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-sky-50:hover, .hover\:bg-indigo-50:hover { background-color: var(--fp-bg) !important; }
.hover\:bg-slate-200:hover { background-color: var(--fp-line-2) !important; }
.hover\:bg-emerald-100:hover, .hover\:bg-emerald-200:hover, .hover\:bg-rose-100:hover, .hover\:bg-rose-200:hover, .hover\:bg-indigo-100:hover { background-color: var(--fp-selected) !important; }
.bg-slate-200, .bg-gray-200 { background-color: var(--fp-line-2) !important; }
.bg-slate-800, .bg-slate-900, .bg-gray-800, .bg-gray-900 { background-color: var(--fp-text) !important; }

/* ---- ベタ塗り (400〜700) → ロゴ色 ---- */
.bg-emerald-400, .bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600, .bg-teal-500,
.bg-sky-400, .bg-sky-500, .bg-sky-600, .bg-blue-500, .bg-blue-600, .bg-cyan-500 { background-color: var(--fp-blue) !important; }
.hover\:bg-emerald-600:hover, .hover\:bg-emerald-700:hover, .hover\:bg-sky-600:hover, .hover\:bg-sky-700:hover, .hover\:bg-blue-700:hover { background-color: #08639e !important; }
.bg-amber-400, .bg-amber-500, .bg-amber-600, .bg-yellow-500, .bg-orange-500 { background-color: var(--fp-yellow) !important; }
.bg-rose-400, .bg-rose-500, .bg-rose-600, .bg-red-500, .bg-red-600, .bg-pink-500 { background-color: var(--fp-red) !important; }
.hover\:bg-red-600:hover, .hover\:bg-red-700:hover, .hover\:bg-rose-600:hover { background-color: #c42d52 !important; }
.bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600, .bg-violet-500, .bg-violet-600 { background-color: var(--fp-purple) !important; }
.hover\:bg-indigo-700:hover, .hover\:bg-purple-700:hover { background-color: var(--fp-purple-2) !important; }
.bg-sky-400.text-white, .bg-emerald-400.text-white { background-color: var(--fp-blue) !important; }
.bg-slate-400, .bg-gray-400, .bg-slate-500 { background-color: var(--fp-text-3) !important; }
.bg-slate-600, .bg-slate-700 { background-color: var(--fp-text-2) !important; }

/* ---- 文字色 ---- */
.text-emerald-500, .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-600, .text-green-700, .text-teal-600, .text-teal-700,
.text-sky-500, .text-sky-600, .text-sky-700, .text-sky-800, .text-blue-600, .text-blue-700, .text-cyan-600 { color: var(--fp-blue) !important; }
.text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-yellow-600, .text-yellow-700, .text-orange-600, .text-orange-700 { color: #9a6700 !important; }
.text-rose-500, .text-rose-600, .text-rose-700, .text-red-500, .text-red-600, .text-red-700, .text-pink-600 { color: var(--fp-red) !important; }
.text-indigo-500, .text-indigo-600, .text-indigo-700, .text-purple-600, .text-purple-700, .text-violet-600 { color: var(--fp-purple) !important; }
.text-slate-900, .text-gray-900, .text-slate-800, .text-gray-800 { color: var(--fp-text) !important; }
.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600 { color: var(--fp-text-2) !important; }
.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400 { color: var(--fp-text-3) !important; }
.hover\:text-emerald-700:hover, .hover\:text-sky-700:hover, .hover\:text-indigo-700:hover, .hover\:text-slate-600:hover, .hover\:text-slate-900:hover { color: var(--fp-purple) !important; }
.hover\:text-red-600:hover, .hover\:text-rose-600:hover { color: var(--fp-red) !important; }
/* 白文字はベタ塗り上なので維持 */

/* ---- 罫線色 ---- */
.border-slate-100, .border-gray-100 { border-color: var(--fp-line-2) !important; }
.border-slate-200, .border-slate-300, .border-gray-200, .border-gray-300 { border-color: var(--fp-line) !important; }
.border-emerald-200, .border-emerald-300, .border-sky-200, .border-sky-300, .border-amber-200, .border-amber-300, .border-rose-200, .border-red-200, .border-indigo-200 { border-color: var(--fp-line) !important; }
/* 左の色線 (アクセント) は意味があるので色を残す */
.border-l-4.border-sky-400, .border-l-4.border-sky-500, .border-l-4.border-emerald-400, .border-l-4.border-emerald-500, .border-sky-500.border-l-4 { border-left-color: var(--fp-blue) !important; border-left-width: 3px !important; }
.border-l-4.border-amber-400, .border-l-4.border-amber-500 { border-left-color: var(--fp-yellow) !important; border-left-width: 3px !important; }
.border-l-4.border-rose-400, .border-l-4.border-red-400, .border-l-4.border-red-500 { border-left-color: var(--fp-red) !important; border-left-width: 3px !important; }
.border-l-4.border-indigo-400, .border-l-4.border-purple-400 { border-left-color: var(--fp-purple) !important; border-left-width: 3px !important; }
.border-sky-400, .border-sky-500, .border-emerald-500 { border-color: var(--fp-blue) !important; }
.border-amber-400, .border-amber-500 { border-color: var(--fp-yellow) !important; }
.border-red-400, .border-red-500, .border-rose-500 { border-color: var(--fp-red) !important; }
.border-b-2.border-sky-500, .border-b-2.border-emerald-500, .border-b-2.border-amber-500, .border-b-2.border-indigo-500 { border-bottom-color: var(--fp-purple) !important; }

/* ---- モーダル (旧ページ): 黒半透明は紫がかった濃グレーに、箱は罫線 ---- */
.bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-slate-900\/50 { background-color: rgba(47, 45, 51, 0.38) !important; }
.fixed.inset-0 > .bg-white, .fixed.inset-0 .bg-white.rounded-xl, .fixed.inset-0 .bg-white.rounded-lg { border: 1px solid var(--fp-line); }

/* ---- 見出しの太字を少し落ち着かせる (重さは 600 まで) ---- */
.font-bold { font-weight: 600 !important; }
.font-extrabold, .font-black { font-weight: 700 !important; }
h1.text-2xl, h2.text-xl { font-family: var(--font-serif); letter-spacing: .02em; }

/* ---- タブ (旧 .tab-btn のゴールド下線 → 紫) ---- */
.tab-btn.active, .rpt-tab-active { border-bottom-color: var(--fp-purple) !important; color: var(--fp-purple) !important; }

/* ---- ページ内の「パステル帯の見出し」 (bg-gradient 系) ---- */
[class*="bg-gradient-to"] { background-image: none !important; background-color: #fff !important; box-shadow: inset 0 0 0 1px var(--fp-line) !important; }

/* ---- 進捗バー (h-2 rounded-full) は細く四角に ---- */
.h-2.rounded-full, .h-2.bg-slate-200, .h-2.bg-slate-100 { height: 4px !important; border-radius: 0 !important; }
.h-full.rounded-full, .h-2 > .rounded-full { border-radius: 0 !important; }

/* ---- フォーム要素: Tailwind の個別指定より design-system を優先 ---- */
select.form-input, input.form-input { height: 32px; }
textarea.form-input { height: auto; }
.form-input.py-1, .form-input.py-1\.5, .form-input.py-2 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ---- 半透明パステル (bg-x-50/50) も白へ ---- */
[class*="bg-rose-50/"], [class*="bg-sky-50/"], [class*="bg-emerald-50/"], [class*="bg-amber-50/"] { background-color: transparent !important; }