/* theme.css: ライト基準 + ダークモード切替（data-theme="dark"）
 * すべての画面（admin/dashboard/login/signup/forgot/reset）で共通使用。
 * 管理画面inline styles を上塗り、ライトはデフォルト。
 */

:root {
  /* ライト基調 */
  --bg-0: #fff7f1;             /* ページ最下地 */
  --bg-1: #ffffff;             /* カード / パネル */
  --bg-2: #fef3c7;             /* アクセント微背景 */
  --bg-blob-1: rgba(255, 182, 193, 0.45);
  --bg-blob-2: rgba(147, 197, 253, 0.35);
  --border: rgba(236, 72, 153, 0.12);
  --border-hover: rgba(236, 72, 153, 0.35);
  --text: #1e293b;
  --text-heading: #0f172a;
  --muted: #64748b;
  --input-bg: rgba(255, 255, 255, 0.85);
  --input-border: rgba(236, 72, 153, 0.18);
  --accent: #ec4899;           /* pink */
  --accent2: #f97316;          /* orange */
  --accent3: #3b82f6;          /* blue */
  --gradient: linear-gradient(135deg, #ec4899, #f97316);
  --gradient2: linear-gradient(135deg, #3b82f6, #a855f7);
  --shadow-sm: 0 2px 8px rgba(236, 72, 153, 0.08);
  --shadow-md: 0 6px 24px rgba(236, 72, 153, 0.12);
  --shadow-lg: 0 20px 40px rgba(236, 72, 153, 0.18);
  --badge-green: #059669;   --badge-green-bg: #d1fae5;
  --badge-yellow: #b45309;  --badge-yellow-bg: #fef3c7;
  --badge-red: #b91c1c;     --badge-red-bg: #fee2e2;
  --badge-blue: #1d4ed8;    --badge-blue-bg: #dbeafe;
}

/* ダークテーマ */
:root[data-theme="dark"] {
  --bg-0: #050814;
  --bg-1: #121a33;
  --bg-2: #1e293b;
  --bg-blob-1: rgba(99, 102, 241, 0.18);
  --bg-blob-2: rgba(236, 72, 153, 0.12);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(139, 92, 246, 0.4);
  --text: #e2e8f0;
  --text-heading: #f8fafc;
  --muted: #94a3b8;
  --input-bg: rgba(5, 8, 20, 0.7);
  --input-border: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
  --badge-green: #6ee7b7; --badge-green-bg: #065f46;
  --badge-yellow: #fcd34d; --badge-yellow-bg: #78350f;
  --badge-red: #fca5a5;   --badge-red-bg: #7f1d1d;
  --badge-blue: #93c5fd;  --badge-blue-bg: #1e3a5f;
}

/* 背景 */
html, body {
  background: var(--bg-0) !important;
  color: var(--text) !important;
}
body { position: relative; transition: background-color 0.25s, color 0.25s; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px at 15% 15%, var(--bg-blob-1), transparent 65%),
    radial-gradient(500px at 85% 85%, var(--bg-blob-2), transparent 65%);
}

/* ヘッダー */
.header {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 28px !important;
}
:root[data-theme="dark"] .header { background: rgba(15, 22, 45, 0.7) !important; }
.header h1 {
  background: linear-gradient(90deg, #ec4899, #3b82f6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-size: 1.15rem !important;
  font-weight: 800;
}
.header .user-info span { color: var(--muted) !important; }

/* タブ */
.tabs {
  background: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 28px !important;
}
:root[data-theme="dark"] .tabs { background: rgba(15, 22, 45, 0.5) !important; }
.tab {
  position: relative;
  padding: 14px 18px !important;
  color: var(--muted) !important;
  font-weight: 500;
  transition: color 0.2s;
}
.tab.active {
  color: #db2777 !important;
  border-bottom: 2px solid #ec4899 !important;
}
:root[data-theme="dark"] .tab.active { color: #a78bfa !important; border-bottom-color: #8b5cf6 !important; }
.tab:hover:not(.active) { color: var(--text) !important; }

/* タブアイコン */
.tab[data-tab="clients"]::before { content: '👥'; margin-right: 6px; }
.tab[data-tab="generate"]::before { content: '✨'; margin-right: 6px; }
.tab[data-tab="recurring"]::before { content: '🔁'; margin-right: 6px; }
.tab[data-tab="drafts"]::before { content: '📝'; margin-right: 6px; }
.tab[data-tab="schedule"]::before { content: '📅'; margin-right: 6px; }
.tab[data-tab="analytics"]::before { content: '📊'; margin-right: 6px; }
.tab[data-tab="settings"]::before { content: '🔑'; margin-right: 6px; }
.tab[data-tab="help"]::before { content: '💡'; margin-right: 6px; }
.tab[data-tab="profile"]::before { content: '👤'; margin-right: 6px; }
.tab[data-tab="credentials"]::before { content: '🔒'; margin-right: 6px; }
.tab[data-tab="sources"]::before { content: '📡'; margin-right: 6px; }
.tab[data-tab="styles"]::before { content: '🎨'; margin-right: 6px; }
.tab[data-tab="billing"]::before { content: '💳'; margin-right: 6px; }
.tab[data-tab="users"]::before { content: '🧑‍🤝‍🧑'; margin-right: 6px; }
.tab[data-tab="overview"]::before { content: '📊'; margin-right: 6px; }
.tab[data-tab="home"]::before { content: '🏠'; margin-right: 6px; }
.tab[data-tab="abtests"]::before { content: '🧪'; margin-right: 6px; }
.tab[data-tab="team"]::before { content: '👥'; margin-right: 6px; }

/* カード */
.card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
:root[data-theme="dark"] .card { background: rgba(30, 41, 59, 0.55) !important; backdrop-filter: blur(10px); }
.card:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-md); }
.card h3 {
  background: linear-gradient(90deg, #ec4899, #3b82f6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight: 800 !important;
}
:root[data-theme="dark"] .card h3 { background: linear-gradient(90deg, #f8fafc, #a78bfa); -webkit-background-clip: text; background-clip: text; }

/* ボタン */
.btn {
  transition: all 0.2s !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: 10px !important;
}
.btn-primary {
  background: var(--gradient) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3) !important;
  border: none !important;
}
.btn-primary:hover {
  box-shadow: 0 8px 24px rgba(236, 72, 153, 0.45) !important;
  transform: translateY(-1px);
}
.btn-outline {
  border-color: var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--accent) !important;
}
.btn-outline:hover {
  border-color: var(--accent) !important;
  background: rgba(236, 72, 153, 0.06) !important;
}
.btn-danger { background: #dc2626 !important; color: white !important; }
.btn-danger:hover { background: #b91c1c !important; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important; }

/* 入力 */
.form-group input, .form-group select, .form-group textarea,
.modal input, .modal textarea {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.modal input:focus, .modal textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.14) !important;
  outline: none !important;
}
.form-group label { color: var(--muted) !important; font-weight: 600 !important; }

/* テーブル */
table { border-collapse: separate !important; border-spacing: 0; }
th {
  background: rgba(252, 231, 243, 0.4) !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted) !important;
}
:root[data-theme="dark"] th { background: rgba(15, 22, 45, 0.6) !important; }
td { padding: 12px 14px !important; color: var(--text) !important; border-bottom: 1px solid var(--border) !important; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: rgba(236, 72, 153, 0.05); }
:root[data-theme="dark"] tbody tr:hover { background: rgba(139, 92, 246, 0.06); }

/* badge */
.badge {
  padding: 3px 10px !important;
  border-radius: 100px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.badge-green { background: var(--badge-green-bg) !important; color: var(--badge-green) !important; }
.badge-yellow { background: var(--badge-yellow-bg) !important; color: var(--badge-yellow) !important; }
.badge-red { background: var(--badge-red-bg) !important; color: var(--badge-red) !important; }
.badge-blue { background: var(--badge-blue-bg) !important; color: var(--badge-blue) !important; }

/* モーダル */
.modal-backdrop { background: rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(4px); }
.modal {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}
.modal h3 { color: var(--text-heading) !important; }

/* スケジュール/分析 日付・セクション */
.sched-day { border-bottom-color: var(--border) !important; }
.sched-day:hover { background: rgba(236, 72, 153, 0.04); }
:root[data-theme="dark"] .sched-day:hover { background: rgba(139, 92, 246, 0.04); }
.sched-date { color: #db2777 !important; }
:root[data-theme="dark"] .sched-date { color: #c4b5fd !important; }
.sched-section-title { color: var(--muted) !important; }

/* variant card */
.variant-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  transition: transform 0.2s, border-color 0.2s;
}
.variant-card:hover { transform: translateY(-2px); border-color: var(--border-hover) !important; }
.variant-card .body-text { color: var(--text) !important; }
.variant-card .meta, .variant-card label { color: var(--muted) !important; }

/* lang-toggle / theme-toggle */
.lang-toggle, .theme-toggle {
  position: fixed !important;
  top: 16px; right: 16px;
  background: var(--bg-1) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  font-size: 0.8rem;
  z-index: 50;
  transition: all 0.2s;
}
.lang-toggle:hover, .theme-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.theme-toggle { right: 120px; }  /* lang-toggleの左に並べる */

/* loading / text */
.loading { color: var(--muted) !important; }
h1, h2, h3, h4 { color: var(--text-heading); }
a { color: var(--accent); }

/* スクロールバー */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(236, 72, 153, 0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(236, 72, 153, 0.45); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.5); }

/* ヘルプカード色統一: ライト時の inline #cbd5e1 / #c4b5fd を可視化 */
:root:not([data-theme="dark"]) [style*="color:#cbd5e1"],
:root:not([data-theme="dark"]) [style*="color: #cbd5e1"] { color: #334155 !important; }
:root:not([data-theme="dark"]) [style*="color:#c4b5fd"],
:root:not([data-theme="dark"]) [style*="color: #c4b5fd"] { color: #7c3aed !important; }
:root:not([data-theme="dark"]) [style*="color:#fbcfe8"],
:root:not([data-theme="dark"]) [style*="color: #fbcfe8"] { color: #be185d !important; }
:root:not([data-theme="dark"]) [style*="color:#a78bfa"],
:root:not([data-theme="dark"]) [style*="color: #a78bfa"] { color: #7c3aed !important; }
:root:not([data-theme="dark"]) [style*="color:#94a3b8"],
:root:not([data-theme="dark"]) [style*="color: #94a3b8"] { color: #64748b !important; }

/* card内のh3/h4のグラデーション文字 (fallback) */
.card h3 { color: var(--text-heading); }

/* result-box / cred-item: admin・dashboard 共通の暗色固定箇所を変数化 */
.result-box {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
:root[data-theme="dark"] .result-box { background: rgba(5, 8, 20, 0.6) !important; }
.cred-item { border-bottom: 1px solid var(--border) !important; color: var(--text); }
.cred-item:last-child { border-bottom: none !important; }

/* 成功/失敗系テキスト: ライト時は濃い色で読めるように */
.success { color: #047857 !important; font-weight: 600; }
.error   { color: #b91c1c !important; font-weight: 600; }
:root[data-theme="dark"] .success { color: #6ee7b7 !important; }
:root[data-theme="dark"] .error   { color: #fca5a5 !important; }

/* JSで直接 style.color に入れてくる色をライトで読めるよう再マッピング */
:root:not([data-theme="dark"]) [style*="color:#6ee7b7"],
:root:not([data-theme="dark"]) [style*="color: #6ee7b7"] { color: #047857 !important; }
:root:not([data-theme="dark"]) [style*="color:#fca5a5"],
:root:not([data-theme="dark"]) [style*="color: #fca5a5"] { color: #b91c1c !important; }
:root:not([data-theme="dark"]) [style*="color:#fcd34d"],
:root:not([data-theme="dark"]) [style*="color: #fcd34d"] { color: #a16207 !important; }
:root:not([data-theme="dark"]) [style*="color:#f8fafc"],
:root:not([data-theme="dark"]) [style*="color: #f8fafc"] { color: #0f172a !important; }
:root:not([data-theme="dark"]) [style*="color:#93c5fd"],
:root:not([data-theme="dark"]) [style*="color: #93c5fd"] { color: #1d4ed8 !important; }

/* modal: admin側は <style>内で背景 #1e293b を使っている */
.modal { color: var(--text) !important; }
.modal h3 { color: var(--text-heading) !important; -webkit-text-fill-color: initial; background: none; }

/* dashboard の .header の inline-style を上塗り（ライト時の視認性） */
.header { color: var(--text) !important; }

/* スケジュールの「⚠ 予定時刻過ぎ」タイトルのライト可視化（inline color:#fca5a5 経由） */

/* planBanner / adSlot（Free プラン誘導） ダーク時のコントラスト調整 */
:root[data-theme="dark"] #planBanner {
  background: linear-gradient(135deg, rgba(236,72,153,0.18), rgba(249,115,22,0.12)) !important;
  border-color: rgba(236,72,153,0.3) !important;
  color: #f1f5f9 !important;
}
:root[data-theme="dark"] #adSlot {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
  color: #cbd5e1 !important;
}

/* 小画面 */
@media (max-width: 720px) {
  /* ヘッダー: ロゴと右側ボタン群を分離して縦並びに */
  .header { flex-wrap: wrap !important; gap: 8px; padding: 10px 14px !important; }
  .header h1 { font-size: 1rem !important; flex: 1 1 100%; }
  .header .user-info { gap: 6px; flex-wrap: wrap; }
  .header .user-info .btn { padding: 5px 10px !important; font-size: 0.78rem !important; }
  .header .user-info span { font-size: 0.75rem !important; }

  /* タブ: 横スクロール + アイコン優先 */
  .tabs { overflow-x: auto; white-space: nowrap; padding: 0 12px !important; -webkit-overflow-scrolling: touch; }
  .tab { padding: 12px 14px !important; font-size: 0.85rem; }

  /* コンテンツ余白を圧縮 */
  .content { padding: 14px !important; }
  .card { padding: 16px !important; }

  /* form-row のグリッドを必ず縦積み */
  .form-row { flex-direction: column !important; }
  .form-row .form-group { min-width: 0 !important; flex: 1 1 100% !important; }

  /* ボタン: タップしやすく */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 32px; }

  /* テーブル横スクロール */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: 8px 10px !important; font-size: 0.82rem !important; }

  /* モーダル: フルスクリーン寄りに */
  .modal { width: 96% !important; max-height: 92vh; overflow-y: auto; padding: 18px !important; }
  .modal-actions { flex-direction: column; gap: 6px; }
  .modal-actions .btn { width: 100%; }

  /* lang/theme トグルがheaderに被らないように移動 */
  .lang-toggle { top: auto !important; bottom: 12px !important; right: 64px !important; }
  .theme-toggle { top: auto !important; bottom: 12px !important; right: 12px !important; }
}

@media (max-width: 480px) {
  /* さらに小さい場合: グラデ文字h1 フォント抑制 */
  .header h1 { font-size: 0.92rem !important; }
  .tab[data-tab]::before { font-size: 1rem; }
}