/* === 外観テーマ（システム / ダーク / ライト）の共通 CSS 変数 ===
 *
 * 【共通部品】正本は Revance Engineering/frontend-shared/css/theme.css。
 * このファイルは各アプリへ同期コピーで配布される。アプリ側で直接編集しない（変更は正本で行い再配布）。
 *
 * - ライト値 = :root。CRM・Care が従来使っていた配色をそのまま維持（既存表示を変えない）。
 * - ダーク値 = html[data-theme="dark"]。<html data-theme> が dark のとき、ライト値を var(--*) の参照ごと上書きする。
 *   ライトとダークは、同じ変数をすべて定義する（片方だけの変数を作らない。固定色は同じ値を両方に書く）。
 * - 適用は assets/js/theme.js（共通部品）が行い、<html data-theme="light|dark"> を常時付与する。
 *   テーマ選択値は localStorage の revance_prefs.appearance（旧: revance_theme）に保持される。
 * - 各ページ・各 CSS は、原則として以下の変数だけで色を指定する（hex の直値を書かない）。
 *   変数が無い色が要るときは、正本へ追加する前に、まず該当アプリの theme.app.css で定義する。
 *
 * アプリ固有の色（共通 CSS には製品名・特定アプリ専用の変数を書かない）:
 *   各アプリの assets/css/theme.app.css（配布しない・アプリ側の追加 CSS）で、theme.css の「後」に読み込んで上書き・追加する。
 *     :root { --app-special: #00a1e0; }                          … ライト（および既定）
 *     html[data-theme="dark"] { --app-special: #38bdf8; }        … ダーク
 *   読み込み順: theme.css → theme.app.css。ダークの上書きは html[data-theme="dark"] で書く（:root より詳細度が高く、後勝ち）。
 *
 * CSP: 外部の @import・url() を使わない（style-src 'self' で動く。フォントは別途）。<style> の注入・インラインの style 属性も不要。
 */

:root {
  /* ネイティブフォームコントロールの基準カラースキーム（ダークは下で上書き） */
  color-scheme: light;

  /* ---- ページ全体の背景と面 (surface) ---- */
  --bg-page: #f1f5f9;            /* ページ背景（body） */
  --bg-surface: #ffffff;         /* カード・パネル・入力欄の表面 */
  --bg-subtle: #f8fafc;          /* 一段薄い面（テーブルヘッダ・ステージカード・ホバー） */
  --bg-hover: #f1f5f9;           /* ホバー・選択時フィル */
  --bg-input: #f1f5f9;           /* テキスト入力の背景（白い面=--bg-surface より沈め、区別をつける） */

  /* ---- テキストの階層（濃 → 薄） ---- */
  --text-primary: #0f172a;       /* 見出し・本文（最濃） */
  --text-secondary: #334155;     /* 本文（やや濃いグレー） */
  --text-muted: #475569;         /* 補助テキスト */
  --text-faint: #64748b;         /* 薄い補助（アイコン・説明） */
  --text-subtle: #94a3b8;        /* いちばん薄いテキスト（プレースホルダ相当） */

  /* ---- ボーダー ---- */
  --border: #e2e8f0;             /* 通常ボーダー */
  --border-strong: #cbd5e1;      /* 強調ボーダー・無効要素 */
  --border-input: #e2e8f0;       /* 入力欄のフレーム */

  /* ---- ブランド・アクセント（青） ---- */
  --accent: #2563eb;             /* プライマリアクセント */
  --accent-hover: #1d4ed8;       /* アクセントのホバー */
  --accent-soft: #eff6ff;        /* アクセントの淡い背景 */
  --accent-border: #bfdbfe;      /* アクセントの淡いボーダー */
  --accent-text: #1e40af;        /* アクセント背景上の濃色テキスト */
  --brand-strong: #0f172a;       /* 濃色ボタン（btn-primary）の塗り */
  --brand-hover: #1e293b;        /* 濃色ボタンのホバー塗り */

  /* ---- 状態色（成功 / 危険 / 注意 / 補助色） ---- */
  --success: #16a34a;            /* 成功・達成 */
  --success-deep: #059669;       /* 上昇・好調（trend up） */
  --success-soft: #f0fdf4;       /* 成功の淡い背景 */
  --danger: #dc2626;             /* 危険・削除 */
  --danger-deep: #991b1b;        /* 原色の濃い文字（red text） */
  --danger-soft: #fee2e2;        /* 危険の淡い背景 */
  --danger-soft2: #fef2f2;       /* 危険のいちばん淡い背景 */
  --danger-border: #fecaca;      /* 危険の淡いボーダー */
  --warning: #d97706;            /* 注意・警告 */
  --warning-soft: #fffbeb;       /* 注意の淡い背景 */
  --purple: #9333ea;             /* 補助アクセント（紫） */
  --purple-soft: #faf5ff;        /* 紫の淡い背景 */
  --indigo: #6366f1;             /* 補助アクセント（藍） */

  /* ---- ラベル・フォーム ---- */
  --label-text: #374151;         /* フォームラベル・見出しテキスト */
  --input-border: #d1d5db;       /* インプット枠のボーダー */

  /* ---- チャート ---- */
  --chart-blue: #3b82f6;
  --chart-blue-light: #93c5fd;
  --chart-teal: #14b8a6;

  /* ---- ステータス系 ---- */
  --success-border: #bbf7d0;     /* 成功バッジのボーダー */
  --green-light: #a7f3d0;        /* ステータスバッジ用 */
  --green-bg: #ecfdf5;           /* ステータス背景 */

  /* ---- 固定色（テーマ切替でも変わらない要素用） ---- */
  --white: #ffffff;              /* 濃色上の文字・アイコン */
  --dark-surface: #0f172a;       /* 常時ダークの面（field-help ポップアップ等） */
  --dark-surface-2: #111827;     /* ポップオーバーなど常時濃色の面 */
  --dark-hover: #1e293b;         /* 常時ダーク面上のホバー */

  /* ---- 拡張トークン（2026-10-15 追加。Engage の hex 直値を変数へ移すために必要だった色。CRM・Care の既存の表示には影響しない） ---- */
  --border-subtle: #f1f5f9;      /* テーブル行の区切り線など、通常ボーダーより薄い線 */
  --accent-link: #2563eb;        /* 文字・リンクのアクセント（ダークでは背景に沈まないよう明るい青） */
  --success-text: #166534;       /* 成功バッジの文字 */
  --info-soft: #e0f2fe;          /* 情報バッジの淡い背景 */
  --info-text: #0c4a6e;          /* 情報バッジの文字 */
}

/* ユーザー指示: 「色はLightベースでOK。DarkにせずにOK」によりダークテーマは完全無効化 */
html[data-theme="dark"], html {
  color-scheme: light !important;
}

  /* ---- チャート（ダークでも明るく維持） ---- */
  --chart-blue: #60a5fa;
  --chart-blue-light: #93c5fd;
  --chart-teal: #2dd4bf;

  /* ---- ステータス系（ダーク） ---- */
  --success-border: #34d399;
  --green-light: #6ee7b7;
  --green-bg: #0b2418;

  /* ---- 固定色はそのまま ---- */
  --white: #ffffff;
  --dark-surface: #0f172a;
  --dark-surface-2: #111827;
  --dark-hover: #1e293b;

  /* ---- 拡張トークン（ダーク） ---- */
  --border-subtle: #2d3a4f;
  --accent-link: #60a5fa;
  --success-text: #bbf7d0;
  --info-soft: #0c4a6e;
  --info-text: #bae6fd;
}

/* ---- 入力欄プレースホルダのダーク対応 ----
 * ブラウザ既定のプレースホルダ色（Chromium では rgb(117,117,117)）は
 * ダーク背景に沈んで黒く見えるため、ダーク時のみ明示的に明色を指定する。
 * ページ固有の .search-input::placeholder 等より優先されるよう html で詳細度を上げる。
 * 色は --text-muted（ダークで #94a3b8。従来の直値と同じ）。 */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* ---- 書き込み不可（staff 相当・ライセンスなし）要素のグレーアウト ----
 * write-guard.js が data-write-guarded="1" を付与した要素に適用する。
 * 新規・更新・削除ボタンは操作できないことを視覚的に示す。
 * cursor の !important は、各ページのボタン用 cursor: pointer（クラスの詳細度）に負けないために必要（この 1 件だけ）。 */
.is-write-disabled,
[data-write-guarded="1"] {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto;
  filter: grayscale(0.3);
}
.is-write-disabled:hover,
[data-write-guarded="1"]:hover {
  opacity: 0.5;
}

/* ---- 課金フェーズの通知バナー（全ページ共通） ----
 * 共通部品 billing-ui.js（Revance Engineering/frontend-shared。同期コピーで配布）が
 * GET /api/v1/subscription/status の結果を .main の先頭へ挿入する。部品は CSS を注入しないため、
 * 見た目はここで与える（クラス名は部品が付与する .billing-banner / -warn / -danger / -text / -link / -note）。
 * 色はテーマ変数（--warning* / --danger*）に従い、ダークテーマにも追従する。 */
.billing-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.billing-banner-warn {
  background: var(--warning-soft);
  color: var(--warning);
  border: 1px solid var(--warning);
}
.billing-banner-danger {
  background: var(--danger-soft);
  color: var(--danger-deep);
  border: 1px solid var(--danger-border);
}
.billing-banner-text {
  flex: 1;
  min-width: 200px;
}
.billing-banner-link {
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
}
.billing-banner-note {
  font-weight: 600;
}