/* theme.css - ธีมสี พื้นหลัง ฟอนต์ และระบบปรับสีอัตโนมัติ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Kanit:wght@300;400;500;600&family=Prompt:wght@300;400;500;600&family=Sarabun:wght@300;400;500;600&display=swap');

/* --- 1. ธีมสีไฮไลต์ (Accent Themes) --- */
body.theme-indigo { --p: #818cf8; --s: #c084fc; --btn: #4f46e5; }
body.theme-emerald { --p: #34d399; --s: #22d3ee; --btn: #059669; }
body.theme-purple { --p: #c084fc; --s: #f43f5e; --btn: #9333ea; }
body.theme-cyan { --p: #22d3ee; --s: #818cf8; --btn: #06b6d4; }

body.theme-indigo .text-cyan-400, body.theme-indigo .text-indigo-400, body.theme-indigo .text-cyan-300 { color: #818cf8 !important; }
body.theme-emerald .text-cyan-400, body.theme-emerald .text-indigo-400, body.theme-emerald .text-cyan-300 { color: #34d399 !important; }
body.theme-purple .text-cyan-400, body.theme-purple .text-indigo-400, body.theme-purple .text-cyan-300 { color: #c084fc !important; }

body.theme-indigo .bg-cyan-500, body.theme-indigo .bg-indigo-600 { background-color: #4f46e5 !important; color: #ffffff !important; }
body.theme-emerald .bg-cyan-500, body.theme-emerald .bg-indigo-600 { background-color: #059669 !important; color: #ffffff !important; }
body.theme-purple .bg-cyan-500, body.theme-purple .bg-indigo-600 { background-color: #9333ea !important; color: #ffffff !important; }

body.theme-indigo [class*="from-cyan-400"] { --tw-gradient-from: #818cf8 !important; --tw-gradient-to: #c084fc !important; }
body.theme-emerald [class*="from-cyan-400"] { --tw-gradient-from: #34d399 !important; --tw-gradient-to: #22d3ee !important; }
body.theme-purple [class*="from-cyan-400"] { --tw-gradient-from: #c084fc !important; --tw-gradient-to: #f43f5e !important; }

/* --- 2. สีพื้นหลัง (Background Themes) --- */
body.bg-obsidian { background-color: #020617 !important; color: #f1f5f9 !important; }
body.bg-midnight { background-color: #0b1120 !important; color: #f1f5f9 !important; }
body.bg-charcoal { background-color: #111827 !important; color: #f1f5f9 !important; }

body.bg-light-clean { background-color: #f8fafc !important; color: #0f172a !important; }
body.bg-light-warm { background-color: #fdfbf7 !important; color: #1c1917 !important; }

body.bg-grad-ocean { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0369a1 100%) !important; color: #f1f5f9 !important; background-attachment: fixed !important; min-height: 100vh; }
body.bg-grad-sunset { background: linear-gradient(135deg, #18181b 0%, #3f123d 50%, #581c87 100%) !important; color: #f1f5f9 !important; background-attachment: fixed !important; min-height: 100vh; }
body.bg-grad-sky { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%) !important; color: #0f172a !important; background-attachment: fixed !important; min-height: 100vh; }

/* --- 3. ระบบปรับแต่งการ์ดและตัวหนังสืออัตโนมัติเมื่อเลือกพื้นหลังสว่าง --- */
body.bg-light-clean .bg-slate-900, body.bg-light-clean .bg-slate-800, body.bg-light-clean .bg-slate-900\/80, body.bg-light-clean .bg-slate-900\/50, body.bg-light-clean .bg-slate-950,
body.bg-grad-sky .bg-slate-900, body.bg-grad-sky .bg-slate-800, body.bg-grad-sky .bg-slate-900\/80, body.bg-grad-sky .bg-slate-900\/50, body.bg-grad-sky .bg-slate-950 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* แปลงตัวหนังสือทั้งหมดในการ์ดให้เป็นสีเข้ม */
body.bg-light-clean .text-white, body.bg-light-clean .text-slate-100, body.bg-light-clean .text-slate-200, body.bg-light-clean .text-slate-300, body.bg-light-clean .text-slate-400,
body.bg-grad-sky .text-white, body.bg-grad-sky .text-slate-100, body.bg-grad-sky .text-slate-200, body.bg-grad-sky .text-slate-300, body.bg-grad-sky .text-slate-400 {
    color: #1e293b !important;
}

/* บังคับให้หัวข้อการ์ด (เช่น h3 หรือชื่อสถานที่) และไฮไลต์ เปลี่ยนเป็นสีเข้มคมชัด */
body.bg-light-clean h3, body.bg-light-clean .text-cyan-400, body.bg-light-clean .text-indigo-400, body.bg-light-clean .text-cyan-300,
body.bg-grad-sky h3, body.bg-grad-sky .text-cyan-400, body.bg-grad-sky .text-indigo-400, body.bg-grad-sky .text-cyan-300 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* ยกเว้นปุ่มกดหลัก ให้คงตัวหนังสือสีขาว */
body.bg-light-clean button.bg-indigo-600 *, body.bg-light-clean button.bg-cyan-500 *, body.bg-light-clean button.bg-purple-600 *,
body.bg-grad-sky button.bg-indigo-600 *, body.bg-grad-sky button.bg-cyan-500 *, body.bg-grad-sky button.bg-purple-600 * {
    color: #ffffff !important;
}

/* ปรับฟอร์มและเส้นขอบ */
body.bg-light-clean th, body.bg-light-clean td, body.bg-grad-sky th, body.bg-grad-sky td {
    border-color: #e2e8f0 !important;
}
body.bg-light-clean input, body.bg-light-clean select, body.bg-light-clean textarea,
body.bg-grad-sky input, body.bg-grad-sky select, body.bg-grad-sky textarea {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* --- 4. รูปแบบฟอนต์ (Font Families) --- */
body.font-prompt { font-family: 'Prompt', sans-serif !important; }
body.font-sarabun { font-family: 'Sarabun', sans-serif !important; }
body.font-kanit { font-family: 'Kanit', sans-serif !important; }
body.font-inter { font-family: 'Inter', sans-serif !important; }
/* --- แก้ไขปัญหาเมนูมือถือค้างครึ่งจอ (ซ่อนพ้นจอ 100%) --- */
@media (max-width: 767px) {
    #mobileSidebar {
        position: fixed !important;
        top: 0 !important;
        left: -288px !important; /* ซ่อนพ้นขอบจอซ้ายไปเลย */
        width: 288px !important;
        height: 100vh !important;
        transition: left 0.3s ease-in-out !important;
        z-index: 50 !important;
    }
    #mobileSidebar.sidebar-open {
        left: 0 !important; /* เลื่อนมาแสดงเต็มจอเมื่อกดเปิด */
    }
}
@media (min-width: 768px) {
    #mobileSidebar {
        position: static !important;
        left: auto !important;
    }
}