/* ==================================================================
   forms.css — 全 layout 共通のフォーム要素スタイル
   --------------------------------------------------------------------
   admin / user / minimal すべての layout で読み込まれる。
   OS の prefers-color-scheme に左右されず、`.dark` クラスの有無で
   フォーム要素の色を完全制御する。

   背景:
     - Tailwind CDN は theme.darkMode='class' を指定しても、
       環境によって prefers-color-scheme:dark が input/textarea/select
       のデフォルトレンダリングに反映されてしまう (UA stylesheet 経由)。
     - その結果「アプリは light モードなのに input だけ黒い」が起きる。
   解決:
     - html:not(.dark) で「light モード時は強制 white」
     - .dark で「dark モード時は #11112a (navy 寄り)」
     - !important で UA stylesheet を上書き
   ================================================================== */

/* ── 1) 主要なテキスト系 input + textarea + select ──
   color/background/border-color を light/dark で対称に上書き */
.dark input:not([type]),
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="month"],
.dark input[type="color"],
.dark textarea,
.dark select {
  background-color: #11112a !important;
  color: #e5e7eb !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color-scheme: dark;
}

html:not(.dark) input:not([type]),
html:not(.dark) input[type="text"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="tel"],
html:not(.dark) input[type="url"],
html:not(.dark) input[type="date"],
html:not(.dark) input[type="datetime-local"],
html:not(.dark) input[type="time"],
html:not(.dark) input[type="month"],
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #1a1a3e !important;
  border-color: rgba(26, 26, 62, 0.12) !important;
  color-scheme: light;
}

/* ── 2) placeholder (UA color: gray) ── */
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: rgba(26, 26, 62, 0.35) !important;
  opacity: 1 !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
  opacity: 1 !important;
}

/* ── 3) date picker icon (Chromium) ──
   §1 で input に color-scheme: dark を当てているため UA がアイコンを
   白系で描画する。ここでさらに invert すると「白→黒」の二重反転で
   アイコンが消えるので filter はかけない（v2 で invert を撤去）。 */

/* ── 4) ファイル/カラー/チェック/ラジオ: 自前装飾を許容 ──
   これらは input[type=text] の上書きから除外する */
.dark input[type="file"],
.dark input[type="checkbox"]:not(.sr-only),
.dark input[type="radio"]:not(.sr-only) {
  background-color: transparent !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ── 5) チェックボックス / ラジオ: 全 layout でフォーム標準を統一 ──
   app.css にあった同等定義をここに移植して minimal layout でも有効化 */
input[type="checkbox"]:not(.sr-only),
input[type="radio"]:not(.sr-only) {
  appearance: none;
  -webkit-appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 2px solid rgba(26, 26, 62, 0.25);
  background-color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  transition: border-color 120ms, background-color 120ms;
}
.dark input[type="checkbox"]:not(.sr-only),
.dark input[type="radio"]:not(.sr-only) {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.45);
}

input[type="checkbox"]:not(.sr-only) { border-radius: 4px; }
input[type="radio"]:not(.sr-only)    { border-radius: 9999px; }

input[type="checkbox"]:not(.sr-only):hover,
input[type="radio"]:not(.sr-only):hover {
  border-color: #15918b;
}

input[type="checkbox"]:not(.sr-only):checked,
input[type="radio"]:not(.sr-only):checked {
  background-color: #15918b;
  border-color: #15918b;
}

input[type="checkbox"]:not(.sr-only):checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="radio"]:not(.sr-only):checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]:not(.sr-only):focus-visible,
input[type="radio"]:not(.sr-only):focus-visible {
  outline: 2px solid #15918b;
  outline-offset: 2px;
}

/* ── 6) フォーカスリング (input/textarea/select) ── */
html:not(.dark) input:focus-visible,
html:not(.dark) textarea:focus-visible,
html:not(.dark) select:focus-visible {
  outline: 2px solid #15918b;
  outline-offset: -1px;
  border-color: #15918b !important;
}
.dark input:focus-visible,
.dark textarea:focus-visible,
.dark select:focus-visible {
  outline: 2px solid #71e2dc;
  outline-offset: -1px;
  border-color: #71e2dc !important;
}

/* ── 7) disabled 状態 ── */
html:not(.dark) input:disabled,
html:not(.dark) textarea:disabled,
html:not(.dark) select:disabled {
  background-color: rgba(26, 26, 62, 0.04) !important;
  color: rgba(26, 26, 62, 0.45) !important;
  cursor: not-allowed;
}
.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.40) !important;
  cursor: not-allowed;
}

/* ── 8) autofill 上書き (Chromium が黄色で塗るのを防止) ── */
html:not(.dark) input:-webkit-autofill,
html:not(.dark) input:-webkit-autofill:hover,
html:not(.dark) input:-webkit-autofill:focus,
html:not(.dark) textarea:-webkit-autofill,
html:not(.dark) select:-webkit-autofill {
  -webkit-text-fill-color: #1a1a3e;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  caret-color: #1a1a3e;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark textarea:-webkit-autofill,
.dark select:-webkit-autofill {
  -webkit-text-fill-color: #e5e7eb;
  -webkit-box-shadow: 0 0 0 1000px #11112a inset !important;
  caret-color: #e5e7eb;
}

/* ==================================================================
   v2: 全レイアウト共通 ダークモード セーフティネット
   --------------------------------------------------------------------
   dark: variant の付け忘れで「navy 文字が暗背景に沈む」事故を防ぐ。
   従来 app.css (user layout のみ) にあった catch-all を admin / minimal
   でも効くようにここへ集約。dark: 指定があるクラスには干渉しない。
   ================================================================== */
.dark .text-navy:not([class*="dark:text"]) { color: rgba(255,255,255,0.92); }
.dark .text-navy\/20:not([class*="dark:text"]) { color: rgba(255,255,255,0.30); }
.dark .text-navy\/30:not([class*="dark:text"]) { color: rgba(255,255,255,0.40); }
.dark .text-navy\/40:not([class*="dark:text"]) { color: rgba(255,255,255,0.50); }
.dark .text-navy\/45:not([class*="dark:text"]) { color: rgba(255,255,255,0.52); }
.dark .text-navy\/50:not([class*="dark:text"]) { color: rgba(255,255,255,0.58); }
.dark .text-navy\/55:not([class*="dark:text"]) { color: rgba(255,255,255,0.62); }
.dark .text-navy\/60:not([class*="dark:text"]) { color: rgba(255,255,255,0.68); }
.dark .text-navy\/70:not([class*="dark:text"]) { color: rgba(255,255,255,0.78); }
/* 枠線: border-navy/10〜20 は暗背景でほぼ不可視になるため白系へ */
.dark [class*="border-navy"]:not([class*="dark:border"]) { border-color: rgba(255,255,255,0.16); }
/* ダークで bg-navy(#1a1a3e) ボタンがカード背景と同化して面が消える対策
   (home/plans の「このプランで予約」・admin-login の「ログイン」等)。
   dark:bg-* を自分で持つ要素には干渉しない。 */
.dark a.bg-navy:not([class*="dark:bg"]),
.dark button.bg-navy:not([class*="dark:bg"]) {
  background-color: #2e2e5e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.dark a.bg-navy:not([class*="dark:bg"]):hover,
.dark button.bg-navy:not([class*="dark:bg"]):hover {
  background-color: #3a3a72;
}
/* プラン色バッジ (plan_badge): 暗色プラン色がダーク背景に同化しないよう輪郭 */
.dark .plan-badge { box-shadow: 0 0 0 1px rgba(255,255,255,0.35); }