/* ==========================================================================
   FlexRobin テーマ ＆ 文字サイズ カスタマイズ システム (theme.css)
   Android実績パレット14色 + 炎天下ハイコントラスト + ナイトモード + 3段階文字サイズ
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 文字サイズ スケーリング (Root Font Size)
   rem ベースの Tailwind コンポーネントが自動的にスケーリング
   -------------------------------------------------------------------------- */
html[data-font-size="normal"],
html:not([data-font-size]) {
    font-size: 16px;
}

html[data-font-size="large"] {
    font-size: 18.5px; /* 約115% 拡大 */
}

html[data-font-size="xlarge"] {
    font-size: 21px; /* 約130% 拡大: 炎天下・シニア・離れたベンチからの視認性特化 */
}

/* --------------------------------------------------------------------------
   2. カラーテーマ定義 (CSSカスタムプロパティ)
   Android themeColors パレット（14色）に完全準拠
   -------------------------------------------------------------------------- */
:root {
    --theme-primary: #0284c7;
    --theme-primary-hover: #0369a1;
    --theme-on-primary: #ffffff;
    --theme-primary-text: #0272ab;
    --theme-primary-light: #e0f2fe;
    --theme-bg: #f8fafc;
    --theme-surface: #ffffff;
    --theme-text: #0f172a;
    --theme-text-muted: #475569;
    --theme-border: #cbd5e1;
    --theme-ring: #38bdf8;
    --theme-header-bg: #ffffff;
}

/* BLUE (デフォルトスカイ調) */
html[data-theme="blue"] {
    --theme-primary: #03a9f4;
    --theme-primary-hover: #0288d1;
    --theme-on-primary: #000000;
    --theme-primary-text: #0273a6;
    --theme-primary-light: #e1f5fe;
    --theme-bg: #e1f5fe;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #334155;
    --theme-border: #81d4fa;
    --theme-ring: #03a9f4;
    --theme-header-bg: #ffffff;
}

/* DEEP_BLUE */
html[data-theme="deep_blue"] {
    --theme-primary: #3f51b5;
    --theme-primary-hover: #303f9f;
    --theme-on-primary: #ffffff;
    --theme-primary-text: #3f51b5;
    --theme-primary-light: #e8eaf6;
    --theme-bg: #e8eaf6;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #334155;
    --theme-border: #9fa8da;
    --theme-ring: #3f51b5;
    --theme-header-bg: #ffffff;
}

/* GREEN (テニスコート・オムニ・芝) */
html[data-theme="green"] {
    --theme-primary: #28cc7a;
    --theme-primary-hover: #22ad67;
    --theme-on-primary: #000000;
    --theme-primary-text: #197e4c;
    --theme-primary-light: #e5ffe5;
    --theme-bg: #e5ffe5;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #2e3a34;
    --theme-border: #a3e9b9;
    --theme-ring: #28cc7a;
    --theme-header-bg: #ffffff;
}

/* DEEP_GREEN (ティール・パデルハードコート) */
html[data-theme="deep_green"] {
    --theme-primary: #009688;
    --theme-primary-hover: #168577;
    --theme-on-primary: #000000;
    --theme-primary-text: #00786d;
    --theme-primary-light: #e0f2f1;
    --theme-bg: #e0f2f1;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #2d3e3c;
    --theme-border: #80cbc4;
    --theme-ring: #009688;
    --theme-header-bg: #ffffff;
}

/* YELLOW (ピックルボール・ネオン) */
html[data-theme="yellow"] {
    --theme-primary: #d4ac0d;
    --theme-primary-hover: #b7950b;
    --theme-on-primary: #000000;
    --theme-primary-text: #8c7209;
    --theme-primary-light: #ffffe5;
    --theme-bg: #ffffe5;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #3d3b25;
    --theme-border: #f9e79f;
    --theme-ring: #efce39;
    --theme-header-bg: #ffffff;
}

/* ORANGE (クレーコート・夕暮れ) */
html[data-theme="orange"] {
    --theme-primary: #f39c12;
    --theme-primary-hover: #d68910;
    --theme-on-primary: #000000;
    --theme-primary-text: #97610b;
    --theme-primary-light: #ffeecc;
    --theme-bg: #ffeecc;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #4d3e2d;
    --theme-border: #f8c471;
    --theme-ring: #ffbb32;
    --theme-header-bg: #ffffff;
}

/* DEEP_ORANGE */
html[data-theme="deep_orange"] {
    --theme-primary: #ff5722;
    --theme-primary-hover: #e64a19;
    --theme-on-primary: #000000;
    --theme-primary-text: #bd4019;
    --theme-primary-light: #fbe9e7;
    --theme-bg: #fbe9e7;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #4e3532;
    --theme-border: #ffab91;
    --theme-ring: #ff5722;
    --theme-header-bg: #ffffff;
}

/* RED */
html[data-theme="red"] {
    --theme-primary: #f44336;
    --theme-primary-hover: #d53b3b;
    --theme-on-primary: #000000;
    --theme-primary-text: #c8372c;
    --theme-primary-light: #ffebee;
    --theme-bg: #ffebee;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #4e3032;
    --theme-border: #ef9a9a;
    --theme-ring: #f44336;
    --theme-header-bg: #ffffff;
}

/* PINK */
html[data-theme="pink"] {
    --theme-primary: #ec407a;
    --theme-primary-hover: #da296a;
    --theme-on-primary: #000000;
    --theme-primary-text: #bd3362;
    --theme-primary-light: #fce4ec;
    --theme-bg: #fce4ec;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #4a2835;
    --theme-border: #f48fb1;
    --theme-ring: #ec407a;
    --theme-header-bg: #ffffff;
}

/* PURPLE */
html[data-theme="purple"] {
    --theme-primary: #673ab7;
    --theme-primary-hover: #512da8;
    --theme-on-primary: #ffffff;
    --theme-primary-text: #673ab7;
    --theme-primary-light: #ede7f6;
    --theme-bg: #ede7f6;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #3b2a59;
    --theme-border: #b39ddb;
    --theme-ring: #673ab7;
    --theme-header-bg: #ffffff;
}

/* BROWN */
html[data-theme="brown"] {
    --theme-primary: #795548;
    --theme-primary-hover: #5d4037;
    --theme-on-primary: #ffffff;
    --theme-primary-text: #795548;
    --theme-primary-light: #efebe9;
    --theme-bg: #efebe9;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #3e2723;
    --theme-border: #bcaaa4;
    --theme-ring: #795548;
    --theme-header-bg: #ffffff;
}

/* GREY */
html[data-theme="grey"] {
    --theme-primary: #5e7a88;
    --theme-primary-hover: #455a64;
    --theme-on-primary: #ffffff;
    --theme-primary-text: #56707d;
    --theme-primary-light: #eceff1;
    --theme-bg: #eceff1;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #37474f;
    --theme-border: #b0bec5;
    --theme-ring: #607d8b;
    --theme-header-bg: #ffffff;
}

/* BLACK (★炎天下・直射日光モード: 白黒ハイコントラスト & 極太枠) */
html[data-theme="black"] {
    --theme-primary: #000000;
    --theme-primary-hover: #262626;
    --theme-on-primary: #ffffff;
    --theme-primary-text: #000000;
    --theme-primary-light: #e5e5e5;
    --theme-bg: #f5f5f5;
    --theme-surface: #ffffff;
    --theme-text: #000000;
    --theme-text-muted: #000000; /* 日差しで消えないよう真っ黒 */
    --theme-border: #000000; /* 極太黒枠 */
    --theme-ring: #000000;
    --theme-header-bg: #ffffff;
}

/* DARK (★ナイトモード: 完全ダーク・ナイター照明・眩しさ低減) */
html[data-theme="dark"] {
    --theme-primary: #38bdf8;
    --theme-primary-hover: #7dd3fc;
    --theme-on-primary: #000000;
    --theme-primary-text: #38bdf8;
    --theme-primary-light: #1e293b;
    --theme-bg: #090d16;
    --theme-surface: #131b2e;
    --theme-text: #ffffff;
    --theme-text-muted: #cbd5e1;
    --theme-border: #334155;
    --theme-ring: #38bdf8;
    --theme-header-bg: #0f172a;
}

/* --------------------------------------------------------------------------
   3. 全画面テーマ自動適用ルール
   -------------------------------------------------------------------------- */
html[data-theme] body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
}

/* ヘッダー */
html[data-theme] header {
    background-color: var(--theme-header-bg) !important;
    border-color: var(--theme-border) !important;
}

/* ナイトモード時のカード・テーブル・モーダルの自動反転 */
html[data-theme="dark"] header h1,
html[data-theme="dark"] header a,
html[data-theme="dark"] header button:not([class*="bg-sky-"]):not([class*="bg-primary"]) {
    color: #ffffff !important;
}

html[data-theme="dark"] .bg-white {
    background-color: var(--theme-surface) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-border) !important;
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-gray-50 {
    background-color: #1a2234 !important;
}

html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800 {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-gray-500 {
    color: #94a3b8 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300 {
    border-color: var(--theme-border) !important;
}

/* 炎天下モード時のハイコントラスト強化 */
html[data-theme="black"] * {
    text-shadow: none !important;
}

/* 枠線は、色だけ黒にする。太さは、他のテーマと同じ（各要素の指定どおり）にして、枠の階層を残す */
html[data-theme="black"] .border,
html[data-theme="black"] .border-2,
html[data-theme="black"] .border-slate-200,
html[data-theme="black"] .border-slate-300 {
    border-color: #000000 !important;
}

html[data-theme="black"] .text-slate-500,
html[data-theme="black"] .text-slate-600,
html[data-theme="black"] .text-gray-500,
html[data-theme="black"] .text-gray-600 {
    color: #000000 !important;
    font-weight: 600 !important;
}

/* プライマリボタンのテーマカラー連動 */
/* ボタン上の文字色（--theme-on-primary）は、背景色とのコントラスト比 4.5:1 以上になるよう、テーマごとに白か黒を選んでいる */
html[data-theme]:not([data-theme="blue"]) .bg-sky-600 {
    background-color: var(--theme-primary) !important;
    color: var(--theme-on-primary) !important;
}
html[data-theme]:not([data-theme="blue"]) .hover\:bg-sky-700:hover {
    background-color: var(--theme-primary-hover) !important;
    color: var(--theme-on-primary) !important;
}
/* 白や淡い背景の上に置く文字は、プライマリ色を暗くした --theme-primary-text を使う（4.5:1 以上） */
html[data-theme]:not([data-theme="blue"]) .text-sky-600,
html[data-theme]:not([data-theme="blue"]) .text-sky-700 {
    color: var(--theme-primary-text) !important;
}
/* 既定の blue テーマ: Tailwind の sky-600（#0284c7）は、白文字とのコントラストが 4.1:1 なので、4.5:1 を満たす濃さにする */
html[data-theme="blue"] .bg-sky-600 {
    background-color: #027cbb !important;
}
html[data-theme="blue"] .hover\:bg-sky-700:hover {
    background-color: #0369a1 !important;
}
html[data-theme="blue"] .text-sky-600 {
    color: #0272ab !important;
}
html[data-theme]:not([data-theme="blue"]) .border-sky-500 {
    border-color: var(--theme-primary) !important;
}
html[data-theme]:not([data-theme="blue"]) .bg-sky-50 {
    background-color: var(--theme-primary-light) !important;
}

/* --------------------------------------------------------------------------
   4. 補助文字・淡い背景のコントラスト確保（4.5:1 以上）
   -------------------------------------------------------------------------- */
/* ダークテーマ: 淡い灰色の背景が明るいまま残り、文字と重なって読めなくなるのを防ぐ */
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-100 {
    background-color: #1e293b !important;
}
html[data-theme="dark"] .bg-slate-200,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .hover\:bg-slate-200:hover {
    background-color: #273449 !important;
}
html[data-theme="dark"] .bg-slate-300,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .hover\:bg-slate-300:hover {
    background-color: #334155 !important;
}
html[data-theme="dark"] .text-red-600 {
    color: #f87171 !important;
}
html[data-theme="dark"] .text-sky-800,
html[data-theme="dark"] .text-sky-900 {
    color: #bae6fd !important;
}
html[data-theme="dark"] .bg-sky-100 {
    background-color: #0c4a6e !important;
}
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800 {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800 {
    color: #fbbf24 !important;
}
/* 炎天下（black）テーマ: 薄い灰色の補助文字も、真っ黒にする（暗い背景の中は、除く） */
html[data-theme="black"] .text-slate-400:not(.bg-slate-900 .text-slate-400):not(.bg-slate-800 .text-slate-400),
html[data-theme="black"] .text-gray-400:not(.bg-slate-900 .text-gray-400):not(.bg-slate-800 .text-gray-400) {
    color: #000000 !important;
}

/* 薄い灰色の補助文字（区切りの「|」、「(Optional)」、広告枠の注記など）と、赤い必須マークは、明るい背景の上で濃くする。
   dark・black テーマは、別のルールで色を決めている。bg-slate-900 などの暗い背景の中は、除く */
html[data-theme]:not([data-theme="dark"]):not([data-theme="black"]) .text-slate-400:not(.bg-slate-900 .text-slate-400):not(.bg-slate-800 .text-slate-400),
html[data-theme]:not([data-theme="dark"]):not([data-theme="black"]) .text-gray-400:not(.bg-slate-900 .text-gray-400):not(.bg-slate-800 .text-gray-400) {
    color: #4f5d73 !important;
}
html[data-theme]:not([data-theme="dark"]):not([data-theme="black"]) .text-slate-500:not(.bg-slate-900 .text-slate-500),
html[data-theme]:not([data-theme="dark"]):not([data-theme="black"]) .text-gray-500:not(.bg-slate-900 .text-gray-500) {
    color: #4f5d73 !important;
}
html[data-theme]:not([data-theme="dark"]) .text-red-600 {
    color: #b91c1c !important;
}

/* ダークテーマ: 色付きの淡い背景（-50 / -100）と、その上の濃い文字（-600〜-900）を、暗い背景用の色に置き換える */
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-100 {
    background-color: #064e3b !important;
}
html[data-theme="dark"] .text-emerald-600,
html[data-theme="dark"] .text-emerald-700,
html[data-theme="dark"] .text-emerald-800,
html[data-theme="dark"] .text-emerald-900 {
    color: #6ee7b7 !important;
}
html[data-theme="dark"] .bg-green-50,
html[data-theme="dark"] .bg-green-100 {
    background-color: #14532d !important;
}
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700,
html[data-theme="dark"] .text-green-800,
html[data-theme="dark"] .text-green-900 {
    color: #86efac !important;
}
html[data-theme="dark"] .bg-teal-50,
html[data-theme="dark"] .bg-teal-100 {
    background-color: #134e4a !important;
}
html[data-theme="dark"] .text-teal-600,
html[data-theme="dark"] .text-teal-700,
html[data-theme="dark"] .text-teal-800,
html[data-theme="dark"] .text-teal-900 {
    color: #5eead4 !important;
}
html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100 {
    background-color: #78350f !important;
}
html[data-theme="dark"] .text-amber-600,
html[data-theme="dark"] .text-amber-700,
html[data-theme="dark"] .text-amber-800,
html[data-theme="dark"] .text-amber-900 {
    color: #fcd34d !important;
}
html[data-theme="dark"] .bg-yellow-50,
html[data-theme="dark"] .bg-yellow-100 {
    background-color: #713f12 !important;
}
html[data-theme="dark"] .text-yellow-600,
html[data-theme="dark"] .text-yellow-700,
html[data-theme="dark"] .text-yellow-800,
html[data-theme="dark"] .text-yellow-900 {
    color: #fde047 !important;
}
html[data-theme="dark"] .bg-orange-50,
html[data-theme="dark"] .bg-orange-100 {
    background-color: #7c2d12 !important;
}
html[data-theme="dark"] .text-orange-600,
html[data-theme="dark"] .text-orange-700,
html[data-theme="dark"] .text-orange-800,
html[data-theme="dark"] .text-orange-900 {
    color: #fdba74 !important;
}
html[data-theme="dark"] .bg-red-50,
html[data-theme="dark"] .bg-red-100 {
    background-color: #7f1d1d !important;
}
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-700,
html[data-theme="dark"] .text-red-800,
html[data-theme="dark"] .text-red-900 {
    color: #fca5a5 !important;
}
html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-rose-100 {
    background-color: #881337 !important;
}
html[data-theme="dark"] .text-rose-600,
html[data-theme="dark"] .text-rose-700,
html[data-theme="dark"] .text-rose-800,
html[data-theme="dark"] .text-rose-900 {
    color: #fda4af !important;
}
html[data-theme="dark"] .bg-pink-50,
html[data-theme="dark"] .bg-pink-100 {
    background-color: #831843 !important;
}
html[data-theme="dark"] .text-pink-600,
html[data-theme="dark"] .text-pink-700,
html[data-theme="dark"] .text-pink-800,
html[data-theme="dark"] .text-pink-900 {
    color: #f9a8d4 !important;
}
html[data-theme="dark"] .bg-purple-50,
html[data-theme="dark"] .bg-purple-100 {
    background-color: #581c87 !important;
}
html[data-theme="dark"] .text-purple-600,
html[data-theme="dark"] .text-purple-700,
html[data-theme="dark"] .text-purple-800,
html[data-theme="dark"] .text-purple-900 {
    color: #d8b4fe !important;
}
html[data-theme="dark"] .bg-violet-50,
html[data-theme="dark"] .bg-violet-100 {
    background-color: #4c1d95 !important;
}
html[data-theme="dark"] .text-violet-600,
html[data-theme="dark"] .text-violet-700,
html[data-theme="dark"] .text-violet-800,
html[data-theme="dark"] .text-violet-900 {
    color: #c4b5fd !important;
}
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-indigo-100 {
    background-color: #312e81 !important;
}
html[data-theme="dark"] .text-indigo-600,
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800,
html[data-theme="dark"] .text-indigo-900 {
    color: #a5b4fc !important;
}
html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-100 {
    background-color: #1e3a8a !important;
}
html[data-theme="dark"] .text-blue-600,
html[data-theme="dark"] .text-blue-700,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] .text-blue-900 {
    color: #93c5fd !important;
}