/* ===== Enterprise Auth — Revive-style theme (light + dark) ===== */
:root {
  color-scheme: light;
  --bg: #f6f7fb; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9;
  --border: rgba(15, 23, 42, .07); --border-strong: rgba(15, 23, 42, .14);
  --text: #0f172a; --text-2: #334155; --muted: #64748b; --faint: #94a3b8;
  --accent-a: #6366f1; --accent-b: #8b5cf6;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -18px rgba(16, 24, 40, .18);
  --glow-1: rgba(99, 102, 241, .10); --glow-2: rgba(139, 92, 246, .08);
}
html.dark {
  color-scheme: dark;
  --bg: #0b1020; --surface: #121829; --surface-2: #161d31; --surface-3: #1c243b;
  --border: rgba(148, 163, 184, .13); --border-strong: rgba(148, 163, 184, .24);
  --text: #e6e9f2; --text-2: #c3c9d8; --muted: #8e97ab; --faint: #6b7489;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 40px -20px rgba(0, 0, 0, .6);
  --glow-1: rgba(99, 102, 241, .18); --glow-2: rgba(139, 92, 246, .12);
}
html body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Noto Sans Lao", "Leelawadee UI", sans-serif;
  color: var(--text);
  background: radial-gradient(1100px 560px at 8% -12%, var(--glow-1), transparent 60%),
              radial-gradient(900px 520px at 100% -5%, var(--glow-2), transparent 60%), var(--bg) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}
/* พื้นหลังหลักของหน้าให้โปร่ง เพื่อให้เห็น gradient */
html .min-h-screen.bg-slate-100, html .min-h-screen.bg-slate-50, html .min-h-screen.bg-gray-100, html .min-h-screen.bg-gray-50 { background: transparent !important; }

/* ----- Card / section ----- */
html .bg-white.rounded-2xl, html .bg-white.rounded-xl { border: 1px solid var(--border); box-shadow: var(--shadow-card); }
html .rounded-2xl.shadow, html .rounded-xl.shadow, html .shadow { box-shadow: var(--shadow-card); }
html .rounded-2xl { border-radius: 1.25rem; }
html button.rounded-xl.border { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
html button.rounded-xl.border:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }

/* ----- ปุ่มหลัก: gradient indigo → violet ----- */
html .bg-indigo-600 { background-image: linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%); box-shadow: 0 8px 20px -10px rgba(99, 102, 241, .65); border-color: transparent; }
html .hover\:bg-indigo-700:hover { background-image: linear-gradient(135deg, #5b5ef0 0%, #7c4df0 100%); filter: brightness(1.05); }
html .bg-rose-600 { box-shadow: 0 8px 20px -10px rgba(244, 63, 94, .6); }
html button, html a { transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease; }

/* ----- ช่องกรอก ----- */
html input:not([type=checkbox]):not([type=radio]), html select, html textarea { border-radius: .6rem; }
html input:focus, html select:focus, html textarea:focus { outline: none; border-color: var(--accent-a) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }

/* ----- scrollbar ----- */
html ::-webkit-scrollbar { width: 10px; height: 10px; }
html ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
html ::-webkit-scrollbar-track { background: transparent; }

/* ----- ปุ่มสลับ theme ----- */
.ta-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 9999; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .15s ease; }
.ta-theme-toggle:hover { transform: scale(1.06); }
.ta-theme-toggle svg { width: 20px; height: 20px; }

/* ===================== DARK MODE ===================== */
html.dark .bg-white { background-color: var(--surface) !important; }
html.dark .bg-slate-50, html.dark .bg-gray-50 { background-color: var(--surface-2) !important; }
html.dark .bg-slate-100, html.dark .bg-gray-100 { background-color: var(--surface-3) !important; }
html.dark .bg-slate-200, html.dark .bg-gray-200 { background-color: #243049 !important; }
html.dark .bg-slate-800 { background-image: linear-gradient(135deg, var(--accent-a), var(--accent-b)); border-color: transparent !important; }
html.dark .text-slate-900, html.dark .text-gray-900, html.dark .text-black, html.dark .text-slate-800, html.dark .text-gray-800 { color: var(--text) !important; }
html.dark .text-slate-700, html.dark .text-gray-700 { color: var(--text-2) !important; }
html.dark .text-slate-600, html.dark .text-gray-600 { color: #aab3c5 !important; }
html.dark .text-slate-500, html.dark .text-gray-500 { color: var(--muted) !important; }
html.dark .text-slate-400, html.dark .text-gray-400, html.dark .text-slate-300 { color: var(--faint) !important; }
html.dark .border-slate-50, html.dark .border-slate-100, html.dark .border-gray-100 { border-color: rgba(148, 163, 184, .08) !important; }
html.dark .border-slate-200, html.dark .border-gray-200 { border-color: var(--border) !important; }
html.dark .border-slate-300, html.dark .border-gray-300 { border-color: var(--border-strong) !important; }
html.dark .border-white { border-color: var(--bg) !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-white:hover { background-color: rgba(255, 255, 255, .04) !important; }
html.dark .hover\:bg-slate-100:hover, html.dark .hover\:bg-gray-100:hover { background-color: rgba(255, 255, 255, .07) !important; }
html.dark .hover\:text-indigo-600:hover { color: #a5b4fc !important; }
html.dark input:not([type=checkbox]):not([type=radio]), html.dark select, html.dark textarea {
  background-color: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }
html.dark input::placeholder, html.dark textarea::placeholder { color: var(--faint); }
html.dark option { background-color: var(--surface-2); color: var(--text); }
html.dark table thead th { color: var(--muted); }
/* กราฟ SVG */
html.dark svg line[stroke="#e2e8f0"] { stroke: rgba(148, 163, 184, .16); }
html.dark svg circle[fill="white"] { fill: var(--surface); }
html.dark svg text[fill="#64748b"] { fill: #8e97ab; }

html.dark .bg-emerald-50 { background-color: rgba(16,185,129, .12) !important; }
html.dark .bg-emerald-100 { background-color: rgba(16,185,129, .18) !important; }
html.dark .bg-emerald-50\/30 { background-color: rgba(16,185,129, .06) !important; }
html.dark .bg-emerald-50\/40 { background-color: rgba(16,185,129, .08) !important; }
html.dark .bg-emerald-50\/50 { background-color: rgba(16,185,129, .10) !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-emerald-600, html.dark .text-emerald-500 { color: #34d399 !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(16,185,129, .25) !important; }
html.dark .border-emerald-300, html.dark .border-emerald-400 { border-color: rgba(16,185,129, .45) !important; }
html.dark .ring-emerald-200 { --tw-ring-color: rgba(16,185,129, .35) !important; }
html.dark .hover\:bg-emerald-50:hover { background-color: rgba(16,185,129, .16) !important; }

html.dark .bg-green-50 { background-color: rgba(34,197,94, .12) !important; }
html.dark .bg-green-100 { background-color: rgba(34,197,94, .18) !important; }
html.dark .bg-green-50\/30 { background-color: rgba(34,197,94, .06) !important; }
html.dark .bg-green-50\/40 { background-color: rgba(34,197,94, .08) !important; }
html.dark .bg-green-50\/50 { background-color: rgba(34,197,94, .10) !important; }
html.dark .text-green-700, html.dark .text-green-800 { color: #86efac !important; }
html.dark .text-green-600, html.dark .text-green-500 { color: #4ade80 !important; }
html.dark .border-green-100, html.dark .border-green-200 { border-color: rgba(34,197,94, .25) !important; }
html.dark .border-green-300, html.dark .border-green-400 { border-color: rgba(34,197,94, .45) !important; }
html.dark .ring-green-200 { --tw-ring-color: rgba(34,197,94, .35) !important; }
html.dark .hover\:bg-green-50:hover { background-color: rgba(34,197,94, .16) !important; }

html.dark .bg-teal-50 { background-color: rgba(20,184,166, .12) !important; }
html.dark .bg-teal-100 { background-color: rgba(20,184,166, .18) !important; }
html.dark .bg-teal-50\/30 { background-color: rgba(20,184,166, .06) !important; }
html.dark .bg-teal-50\/40 { background-color: rgba(20,184,166, .08) !important; }
html.dark .bg-teal-50\/50 { background-color: rgba(20,184,166, .10) !important; }
html.dark .text-teal-700, html.dark .text-teal-800 { color: #5eead4 !important; }
html.dark .text-teal-600, html.dark .text-teal-500 { color: #2dd4bf !important; }
html.dark .border-teal-100, html.dark .border-teal-200 { border-color: rgba(20,184,166, .25) !important; }
html.dark .border-teal-300, html.dark .border-teal-400 { border-color: rgba(20,184,166, .45) !important; }
html.dark .ring-teal-200 { --tw-ring-color: rgba(20,184,166, .35) !important; }
html.dark .hover\:bg-teal-50:hover { background-color: rgba(20,184,166, .16) !important; }

html.dark .bg-sky-50 { background-color: rgba(14,165,233, .12) !important; }
html.dark .bg-sky-100 { background-color: rgba(14,165,233, .18) !important; }
html.dark .bg-sky-50\/30 { background-color: rgba(14,165,233, .06) !important; }
html.dark .bg-sky-50\/40 { background-color: rgba(14,165,233, .08) !important; }
html.dark .bg-sky-50\/50 { background-color: rgba(14,165,233, .10) !important; }
html.dark .text-sky-700, html.dark .text-sky-800 { color: #7dd3fc !important; }
html.dark .text-sky-600, html.dark .text-sky-500 { color: #38bdf8 !important; }
html.dark .border-sky-100, html.dark .border-sky-200 { border-color: rgba(14,165,233, .25) !important; }
html.dark .border-sky-300, html.dark .border-sky-400 { border-color: rgba(14,165,233, .45) !important; }
html.dark .ring-sky-200 { --tw-ring-color: rgba(14,165,233, .35) !important; }
html.dark .hover\:bg-sky-50:hover { background-color: rgba(14,165,233, .16) !important; }

html.dark .bg-blue-50 { background-color: rgba(59,130,246, .12) !important; }
html.dark .bg-blue-100 { background-color: rgba(59,130,246, .18) !important; }
html.dark .bg-blue-50\/30 { background-color: rgba(59,130,246, .06) !important; }
html.dark .bg-blue-50\/40 { background-color: rgba(59,130,246, .08) !important; }
html.dark .bg-blue-50\/50 { background-color: rgba(59,130,246, .10) !important; }
html.dark .text-blue-700, html.dark .text-blue-800 { color: #93c5fd !important; }
html.dark .text-blue-600, html.dark .text-blue-500 { color: #60a5fa !important; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(59,130,246, .25) !important; }
html.dark .border-blue-300, html.dark .border-blue-400 { border-color: rgba(59,130,246, .45) !important; }
html.dark .ring-blue-200 { --tw-ring-color: rgba(59,130,246, .35) !important; }
html.dark .hover\:bg-blue-50:hover { background-color: rgba(59,130,246, .16) !important; }

html.dark .bg-indigo-50 { background-color: rgba(99,102,241, .12) !important; }
html.dark .bg-indigo-100 { background-color: rgba(99,102,241, .18) !important; }
html.dark .bg-indigo-50\/30 { background-color: rgba(99,102,241, .06) !important; }
html.dark .bg-indigo-50\/40 { background-color: rgba(99,102,241, .08) !important; }
html.dark .bg-indigo-50\/50 { background-color: rgba(99,102,241, .10) !important; }
html.dark .text-indigo-700, html.dark .text-indigo-800 { color: #a5b4fc !important; }
html.dark .text-indigo-600, html.dark .text-indigo-500 { color: #818cf8 !important; }
html.dark .border-indigo-100, html.dark .border-indigo-200 { border-color: rgba(99,102,241, .25) !important; }
html.dark .border-indigo-300, html.dark .border-indigo-400 { border-color: rgba(99,102,241, .45) !important; }
html.dark .ring-indigo-200 { --tw-ring-color: rgba(99,102,241, .35) !important; }
html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241, .16) !important; }

html.dark .bg-violet-50 { background-color: rgba(139,92,246, .12) !important; }
html.dark .bg-violet-100 { background-color: rgba(139,92,246, .18) !important; }
html.dark .bg-violet-50\/30 { background-color: rgba(139,92,246, .06) !important; }
html.dark .bg-violet-50\/40 { background-color: rgba(139,92,246, .08) !important; }
html.dark .bg-violet-50\/50 { background-color: rgba(139,92,246, .10) !important; }
html.dark .text-violet-700, html.dark .text-violet-800 { color: #c4b5fd !important; }
html.dark .text-violet-600, html.dark .text-violet-500 { color: #a78bfa !important; }
html.dark .border-violet-100, html.dark .border-violet-200 { border-color: rgba(139,92,246, .25) !important; }
html.dark .border-violet-300, html.dark .border-violet-400 { border-color: rgba(139,92,246, .45) !important; }
html.dark .ring-violet-200 { --tw-ring-color: rgba(139,92,246, .35) !important; }
html.dark .hover\:bg-violet-50:hover { background-color: rgba(139,92,246, .16) !important; }

html.dark .bg-purple-50 { background-color: rgba(168,85,247, .12) !important; }
html.dark .bg-purple-100 { background-color: rgba(168,85,247, .18) !important; }
html.dark .bg-purple-50\/30 { background-color: rgba(168,85,247, .06) !important; }
html.dark .bg-purple-50\/40 { background-color: rgba(168,85,247, .08) !important; }
html.dark .bg-purple-50\/50 { background-color: rgba(168,85,247, .10) !important; }
html.dark .text-purple-700, html.dark .text-purple-800 { color: #d8b4fe !important; }
html.dark .text-purple-600, html.dark .text-purple-500 { color: #c084fc !important; }
html.dark .border-purple-100, html.dark .border-purple-200 { border-color: rgba(168,85,247, .25) !important; }
html.dark .border-purple-300, html.dark .border-purple-400 { border-color: rgba(168,85,247, .45) !important; }
html.dark .ring-purple-200 { --tw-ring-color: rgba(168,85,247, .35) !important; }
html.dark .hover\:bg-purple-50:hover { background-color: rgba(168,85,247, .16) !important; }

html.dark .bg-rose-50 { background-color: rgba(244,63,94, .12) !important; }
html.dark .bg-rose-100 { background-color: rgba(244,63,94, .18) !important; }
html.dark .bg-rose-50\/30 { background-color: rgba(244,63,94, .06) !important; }
html.dark .bg-rose-50\/40 { background-color: rgba(244,63,94, .08) !important; }
html.dark .bg-rose-50\/50 { background-color: rgba(244,63,94, .10) !important; }
html.dark .text-rose-700, html.dark .text-rose-800 { color: #fda4af !important; }
html.dark .text-rose-600, html.dark .text-rose-500 { color: #fb7185 !important; }
html.dark .border-rose-100, html.dark .border-rose-200 { border-color: rgba(244,63,94, .25) !important; }
html.dark .border-rose-300, html.dark .border-rose-400 { border-color: rgba(244,63,94, .45) !important; }
html.dark .ring-rose-200 { --tw-ring-color: rgba(244,63,94, .35) !important; }
html.dark .hover\:bg-rose-50:hover { background-color: rgba(244,63,94, .16) !important; }

html.dark .bg-red-50 { background-color: rgba(239,68,68, .12) !important; }
html.dark .bg-red-100 { background-color: rgba(239,68,68, .18) !important; }
html.dark .bg-red-50\/30 { background-color: rgba(239,68,68, .06) !important; }
html.dark .bg-red-50\/40 { background-color: rgba(239,68,68, .08) !important; }
html.dark .bg-red-50\/50 { background-color: rgba(239,68,68, .10) !important; }
html.dark .text-red-700, html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .text-red-600, html.dark .text-red-500 { color: #f87171 !important; }
html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(239,68,68, .25) !important; }
html.dark .border-red-300, html.dark .border-red-400 { border-color: rgba(239,68,68, .45) !important; }
html.dark .ring-red-200 { --tw-ring-color: rgba(239,68,68, .35) !important; }
html.dark .hover\:bg-red-50:hover { background-color: rgba(239,68,68, .16) !important; }

html.dark .bg-orange-50 { background-color: rgba(249,115,22, .12) !important; }
html.dark .bg-orange-100 { background-color: rgba(249,115,22, .18) !important; }
html.dark .bg-orange-50\/30 { background-color: rgba(249,115,22, .06) !important; }
html.dark .bg-orange-50\/40 { background-color: rgba(249,115,22, .08) !important; }
html.dark .bg-orange-50\/50 { background-color: rgba(249,115,22, .10) !important; }
html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74 !important; }
html.dark .text-orange-600, html.dark .text-orange-500 { color: #fb923c !important; }
html.dark .border-orange-100, html.dark .border-orange-200 { border-color: rgba(249,115,22, .25) !important; }
html.dark .border-orange-300, html.dark .border-orange-400 { border-color: rgba(249,115,22, .45) !important; }
html.dark .ring-orange-200 { --tw-ring-color: rgba(249,115,22, .35) !important; }
html.dark .hover\:bg-orange-50:hover { background-color: rgba(249,115,22, .16) !important; }

html.dark .bg-amber-50 { background-color: rgba(245,158,11, .12) !important; }
html.dark .bg-amber-100 { background-color: rgba(245,158,11, .18) !important; }
html.dark .bg-amber-50\/30 { background-color: rgba(245,158,11, .06) !important; }
html.dark .bg-amber-50\/40 { background-color: rgba(245,158,11, .08) !important; }
html.dark .bg-amber-50\/50 { background-color: rgba(245,158,11, .10) !important; }
html.dark .text-amber-700, html.dark .text-amber-800 { color: #fcd34d !important; }
html.dark .text-amber-600, html.dark .text-amber-500 { color: #fbbf24 !important; }
html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(245,158,11, .25) !important; }
html.dark .border-amber-300, html.dark .border-amber-400 { border-color: rgba(245,158,11, .45) !important; }
html.dark .ring-amber-200 { --tw-ring-color: rgba(245,158,11, .35) !important; }
html.dark .hover\:bg-amber-50:hover { background-color: rgba(245,158,11, .16) !important; }

html.dark .bg-yellow-50 { background-color: rgba(234,179,8, .12) !important; }
html.dark .bg-yellow-100 { background-color: rgba(234,179,8, .18) !important; }
html.dark .bg-yellow-50\/30 { background-color: rgba(234,179,8, .06) !important; }
html.dark .bg-yellow-50\/40 { background-color: rgba(234,179,8, .08) !important; }
html.dark .bg-yellow-50\/50 { background-color: rgba(234,179,8, .10) !important; }
html.dark .text-yellow-700, html.dark .text-yellow-800 { color: #fde047 !important; }
html.dark .text-yellow-600, html.dark .text-yellow-500 { color: #facc15 !important; }
html.dark .border-yellow-100, html.dark .border-yellow-200 { border-color: rgba(234,179,8, .25) !important; }
html.dark .border-yellow-300, html.dark .border-yellow-400 { border-color: rgba(234,179,8, .45) !important; }
html.dark .ring-yellow-200 { --tw-ring-color: rgba(234,179,8, .35) !important; }
html.dark .hover\:bg-yellow-50:hover { background-color: rgba(234,179,8, .16) !important; }