/* ═════════════════ 🌗 ปุ่มสลับโหมด (มุมซ้ายบน ข้างโลโก้) ═════════════════ */
.theme-toggle {
    position: relative;
    width: 46px; height: 26px;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(135deg, #1e1b4b, #0f172a);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5);
    transition: background .4s, border-color .4s;
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: rgba(167, 139, 250, .6); }
.theme-toggle:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.theme-toggle-knob {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 9999px;
    background: #a78bfa; color: #1e1b4b;
    box-shadow: 0 0 10px rgba(167, 139, 250, .7);
    transition: transform .4s cubic-bezier(.4, 1.6, .5, 1), background .4s, box-shadow .4s, color .4s;
}
.theme-toggle-knob svg { position: absolute; transition: opacity .3s, transform .4s; }
.theme-icon-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
html.light .theme-toggle { background: linear-gradient(135deg, #bae6fd, #fde68a); border-color: rgba(15, 23, 42, .12); box-shadow: inset 0 1px 3px rgba(15, 23, 42, .15); }
html.light .theme-toggle-knob { transform: translateX(20px); background: #fbbf24; color: #78350f; box-shadow: 0 0 12px rgba(251, 191, 36, .8); }
html.light .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
html.light .theme-icon-sun { opacity: 1; transform: none; }

/* เปลี่ยนโหมดแล้วสีค่อยๆ เปลี่ยน (เฉพาะตอนกดสลับ ไม่ทำให้หน้าอื่นช้า) */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}

/* ฟอร์มจองกะพริบเรืองแสง หลังแตะช่องว่างในตารางคิว (บอกว่ากรอกให้แล้ว) */
.book-flash { animation: book-flash 1.4s ease-out; }
@keyframes book-flash {
    0%   { box-shadow: 0 0 0 0 rgba(34, 211, 238, .0); border-color: rgba(34, 211, 238, .9); }
    25%  { box-shadow: 0 0 0 6px rgba(34, 211, 238, .25), 0 0 40px rgba(139, 92, 246, .35); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

/* ═════════════════ ☀️ โหมดสว่าง ═════════════════
   หน้าเว็บเขียนด้วยสีโทนมืด — ไฟล์นี้สลับเป็นโทนสว่างทั้งเว็บ
   (ใส่ html.light นำหน้า จึงชนะคลาสของ Tailwind เสมอ) */
html.light { color-scheme: light; }
html.light body { background-color: #f1f5f9; color: #0f172a; }

/* พื้นหลังแสงเรือง + ตาราง ให้อ่อนลง */
html.light .aurora::before { background: radial-gradient(circle, rgba(139, 92, 246, .28), transparent 62%); }
html.light .aurora::after  { background: radial-gradient(circle, rgba(6, 182, 212, .22), transparent 62%); }
html.light .grid-bg {
    background-image:
        linear-gradient(rgba(15, 23, 42, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .06) 1px, transparent 1px);
}

/* โลโก้ตัวเหลือง: เพิ่มเงาขอบเข้ม ไม่ให้จมกับพื้นขาว */
html.light img[src*="/img/logo"] { filter: drop-shadow(0 0 1px rgba(15, 23, 42, .85)) drop-shadow(0 1px 3px rgba(15, 23, 42, .35)); }

/* header */
html.light #siteHeader { background-color: rgba(248, 250, 252, .7); }
html.light #siteHeader.scrolled { background-color: rgba(248, 250, 252, .92); border-color: rgba(15, 23, 42, .08); box-shadow: 0 12px 30px -16px rgba(15, 23, 42, .25); }

/* พื้นหลังโทนมืด → ขาว/เทาอ่อน */
html.light .bg-slate-950 { background-color: #f8fafc; }
html.light .bg-slate-950\/60 { background-color: rgba(248, 250, 252, .7); }
html.light .bg-slate-950\/95 { background-color: rgba(248, 250, 252, .95); }
html.light .bg-slate-900 { background-color: #ffffff; }
html.light .bg-slate-900\/70 { background-color: rgba(255, 255, 255, .85); }
html.light .bg-slate-900\/90 { background-color: rgba(255, 255, 255, .95); }
html.light .bg-slate-800 { background-color: #e2e8f0; }
html.light .bg-black\/40 { background-color: rgba(15, 23, 42, .25); }
html.light .from-slate-900 { --tw-gradient-from: #ffffff var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.light .from-slate-700 { --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.light .to-slate-800 { --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); }
html.light .to-slate-900\/60 { --tw-gradient-to: rgba(255, 255, 255, .6) var(--tw-gradient-to-position); }
html.light .via-slate-900\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, .4) var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* แผ่นโปร่งสีขาวบนพื้นมืด → แผ่นเทาโปร่งบนพื้นขาว */
html.light .bg-white\/5  { background-color: rgba(15, 23, 42, .04); }
html.light .bg-white\/10 { background-color: rgba(15, 23, 42, .07); }
html.light .bg-white\/15 { background-color: rgba(15, 23, 42, .1); }
html.light .hover\:bg-white\/5:hover  { background-color: rgba(15, 23, 42, .05); }
html.light .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, .08); }

/* เส้นขอบ */
html.light .border-white\/5  { border-color: rgba(15, 23, 42, .07); }
html.light .border-white\/10 { border-color: rgba(15, 23, 42, .1); }
html.light .border-white\/15 { border-color: rgba(15, 23, 42, .14); }
html.light .border-white\/20 { border-color: rgba(15, 23, 42, .18); }
html.light .hover\:border-white\/20:hover { border-color: rgba(15, 23, 42, .22); }
html.light .divide-white\/5 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15, 23, 42, .07); }

/* ตัวหนังสือโทนอ่อน → โทนเข้ม */
html.light .text-slate-100 { color: #0f172a; }
html.light .text-slate-200 { color: #1e293b; }
html.light .text-slate-300 { color: #334155; }
html.light .text-slate-400 { color: #475569; }
html.light .text-slate-500 { color: #64748b; }
html.light .hover\:text-white:hover,
html.light .hover\:text-slate-200:hover { color: #0f172a; }
html.light .placeholder-slate-500::placeholder { color: #94a3b8; }

/* text-white บนพื้นใส → เข้ม แต่ยังขาวบนปุ่ม/แถบที่มีสีเข้ม */
html.light .text-white { color: #0f172a; }
html.light [class*="bg-gradient-to"].text-white,
html.light [class*="bg-gradient-to"] .text-white,
html.light [class*="bg-violet-6"].text-white,
html.light [class*="bg-violet-6"] .text-white,
html.light [class*="bg-emerald-6"].text-white,
html.light .thanks-overlay .text-white { color: #ffffff; }

/* สีเน้นโทนพาสเทล (ไว้อ่านบนพื้นมืด) → โทนเข้มของสีเดียวกัน (อ่านบนพื้นขาว) */
html.light [class*="text-violet-50"], html.light [class*="text-violet-100"], html.light [class*="text-violet-200"], html.light [class*="text-violet-300"] { color: #6d28d9; }
html.light [class*="text-cyan-50"], html.light [class*="text-cyan-100"], html.light [class*="text-cyan-200"], html.light [class*="text-cyan-300"] { color: #0e7490; }
html.light [class*="text-emerald-50"], html.light [class*="text-emerald-100"], html.light [class*="text-emerald-200"], html.light [class*="text-emerald-300"] { color: #047857; }
html.light [class*="text-amber-50"], html.light [class*="text-amber-100"], html.light [class*="text-amber-200"], html.light [class*="text-amber-300"] { color: #b45309; }
html.light [class*="text-rose-50"], html.light [class*="text-rose-100"], html.light [class*="text-rose-200"], html.light [class*="text-rose-300"],
html.light .text-rose-400 { color: #be123c; }
html.light .text-emerald-400 { color: #059669; }
html.light .\!text-amber-300 { color: #b45309 !important; }   /* เมนูแอดมิน */
html.light .link { color: #6d28d9; }
html.light .link:hover { color: #5b21b6; }

/* คอมโพเนนต์ที่ประกาศด้วย @apply (ไม่มีชื่อคลาสสีให้ทับ) */
html.light .card { background-color: rgba(255, 255, 255, .88); border-color: rgba(15, 23, 42, .08); box-shadow: 0 20px 45px -25px rgba(15, 23, 42, .3); }
html.light .input { background-color: #ffffff; border-color: rgba(15, 23, 42, .14); color: #0f172a; }
html.light .input::placeholder { color: #94a3b8; }
html.light .label { color: #334155; }
html.light .btn-ghost { background-color: #ffffff; border-color: rgba(15, 23, 42, .12); color: #0f172a; }
html.light .btn-ghost:hover { background-color: #f1f5f9; }

/* dropdown */
html.light select option, html.light select optgroup { background-color: #ffffff; color: #0f172a; }
html.light select option:checked { background-color: #ede9fe; color: #4c1d95; }

/* ตัวหนังสือไล่สี + แสงในกรอบอัปโหลด ให้เข้มขึ้นบนพื้นขาว */
html.light .text-shimmer { background-image: linear-gradient(90deg, #7c3aed, #0891b2, #6d28d9, #7c3aed); }
html.light .upload-glow { animation-name: upload-breathe-light; }
@keyframes upload-breathe-light {
    0%, 100% { box-shadow: inset 0 0 18px rgba(139, 92, 246, .06), 0 0 0 rgba(34, 211, 238, 0); }
    50%      { box-shadow: inset 0 0 30px rgba(139, 92, 246, .14), 0 0 18px rgba(34, 211, 238, .2); }
}

/* ═════════════════ ⚠️ แจ้งเตือนโอนผิดบัญชี (หลังบ้าน) ═════════════════ */
.wrong-badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9999px; background: #f43f5e; color: #fff !important; font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 0 rgba(244, 63, 94, .7); animation: wrong-pulse 1.8s ease-out infinite;
}
.wrong-alert { box-shadow: 0 0 0 0 rgba(244, 63, 94, .45), 0 20px 50px -25px rgba(244, 63, 94, .6); animation: wrong-glow 2.4s ease-in-out infinite; }
.wrong-alert-icon { animation: wrong-pulse 1.8s ease-out infinite; }
@keyframes wrong-pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, .7); } 100% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); } }
@keyframes wrong-glow { 0%, 100% { border-color: rgba(244, 63, 94, .7); } 50% { border-color: rgba(251, 113, 133, 1); } }
@media (prefers-reduced-motion: reduce) { .wrong-badge, .wrong-alert, .wrong-alert-icon { animation: none; } }

html.light .wrong-alert { background: #fff1f2; }
html.light .wrong-alert .text-rose-50, html.light .wrong-alert [class*="text-rose-50"] { color: #881337; }
html.light .wrong-alert [class*="text-rose-100"], html.light .wrong-alert [class*="text-rose-200"] { color: #9f1239; }
html.light .wrong-alert .text-emerald-100 { color: #065f46; }
html.light .wrong-alert .wrong-alert-icon, html.light .wrong-alert button { color: #fff; }

/* ═════════════════ 💬 กล่องยืนยัน (SweetAlert2 — confirm.js) ═════════════════ */
.swal2-popup.swal-personal {
    border-radius: 20px; border: 1px solid rgba(167, 139, 250, .25);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 50px -15px rgba(139, 92, 246, .45);
    padding: 1.6em 1.4em 1.4em; font-family: inherit;
}
.swal-personal .swal2-title { font-size: 1.35rem; font-weight: 600; }
.swal-personal .swal2-html-container { font-size: .95rem; color: #94a3b8; }
.swal-personal .swal2-icon.swal2-question { border-color: rgba(34, 211, 238, .5); color: #22d3ee; }
.swal-personal .swal2-icon.swal2-warning { border-color: rgba(251, 113, 133, .5); color: #fb7185; }
.swal2-container.swal2-backdrop-show { background: rgba(2, 6, 23, .7); backdrop-filter: blur(4px); }
.swal-actions { gap: 10px; margin-top: 1.4em; }
.swal-btn { border-radius: 12px; padding: 10px 20px; font-size: 14px; font-weight: 500; transition: transform .15s, filter .15s, background .15s; }
.swal-btn:hover { transform: translateY(-1px); }
.swal-btn:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.swal-btn-primary { color: #fff; background: linear-gradient(90deg, #7c3aed, #06b6d4); box-shadow: 0 10px 24px -10px rgba(124, 58, 237, .8); }
.swal-btn-danger  { color: #fff; background: linear-gradient(90deg, #e11d48, #f97316); box-shadow: 0 10px 24px -10px rgba(225, 29, 72, .8); }
.swal-btn-ghost   { color: #cbd5e1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.swal-btn-ghost:hover { background: rgba(255, 255, 255, .12); }
html.light .swal2-popup.swal-personal { border-color: rgba(15, 23, 42, .1); box-shadow: 0 30px 70px -25px rgba(15, 23, 42, .35); }
html.light .swal-personal .swal2-html-container { color: #475569; }
html.light .swal-btn-ghost { color: #334155; background: #f1f5f9; border-color: rgba(15, 23, 42, .12); }
html.light .swal2-container.swal2-backdrop-show { background: rgba(15, 23, 42, .35); }

/* ═════════════════ 🎙️ ไมค์จากเบราว์เซอร์ (_MicPanel / mic.js) ═════════════════ */
.mic-panel { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 1.1rem; }
.mic-btn {
    display: inline-flex; align-items: center; flex-shrink: 0;
    border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 500;
    color: #fff; background: linear-gradient(90deg, #7c3aed, #06b6d4);
    box-shadow: 0 8px 20px -10px rgba(124, 58, 237, .8);
    transition: transform .15s, filter .15s, background .2s;
}
.mic-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.mic-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.mic-btn span { display: inline-flex; align-items: center; gap: 6px; }
.mic-btn .mic-btn-off { display: none; }
.mic-panel[data-state="live"] .mic-btn, .mic-panel[data-state="starting"] .mic-btn { background: rgba(244, 63, 94, .15); color: #fda4af; box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .4); }
.mic-panel[data-state="live"] .mic-btn .mic-btn-on, .mic-panel[data-state="starting"] .mic-btn .mic-btn-on { display: none; }
.mic-panel[data-state="live"] .mic-btn .mic-btn-off, .mic-panel[data-state="starting"] .mic-btn .mic-btn-off { display: inline-flex; }
.mic-panel[data-state="error"] [data-mic-status] { color: #fda4af; }
.mic-panel[data-state="live"] [data-mic-status] { color: #6ee7b7; }

/* แถบระดับเสียง */
.mic-meter { height: 6px; border-radius: 9999px; background: rgba(255, 255, 255, .06); overflow: hidden; opacity: .35; transition: opacity .3s; }
.mic-panel[data-state="live"] .mic-meter { opacity: 1; }
.mic-meter span {
    display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, #22c55e, #22d3ee 60%, #a78bfa);
    transition: transform .08s linear;
}
.mic-panel[data-state="live"] .mic-btn-off svg { animation: mic-pulse 1.4s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .mic-meter span { transition: none; } .mic-btn-off svg { animation: none !important; } }

/* 🔌 แถบจัดการเครื่อง (หน้าลูกค้า) — ชื่อเครื่อง + สถานะ + ปุ่มเปิด/ปิด/รีสตาร์ท */
.pc-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #94a3b8; transition: color .3s; }
.pc-dot-light { width: 9px; height: 9px; border-radius: 9999px; background: #64748b; transition: background .3s, box-shadow .3s; }
.pc-dot.is-on { color: #6ee7b7; }
.pc-dot.is-on .pc-dot-light { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.pc-btn {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 8px 14px; font-size: 13px; font-weight: 500;
    color: #e2e8f0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); transition: filter .2s, transform .15s, background .2s;
}
.pc-btn:hover { transform: translateY(-1px); filter: brightness(1.12); }
.pc-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.pc-btn-on { background: rgba(16, 185, 129, .16); color: #6ee7b7; border-color: rgba(16, 185, 129, .35); }
.pc-btn-warn { background: rgba(255, 255, 255, .08); }
.pc-btn-danger { background: rgba(244, 63, 94, .14); color: #fda4af; border-color: rgba(244, 63, 94, .3); }
html.light .pc-dot { color: #64748b; }
html.light .pc-dot.is-on { color: #047857; }
html.light .pc-btn { color: #334155; background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .1); }
html.light .pc-btn-on { background: #ecfdf5; color: #047857; border-color: rgba(5, 150, 105, .3); }
html.light .pc-btn-danger { background: #fff1f2; color: #be123c; border-color: rgba(225, 29, 72, .3); }

html.light .mic-panel { border-color: rgba(15, 23, 42, .08); }
html.light .mic-meter { background: rgba(15, 23, 42, .08); }
html.light .mic-panel[data-state="live"] .mic-btn { background: #fff1f2; color: #be123c; box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .35); }
html.light .mic-panel[data-state="error"] [data-mic-status] { color: #be123c; }
html.light .mic-panel[data-state="live"] [data-mic-status] { color: #047857; }
.mic-test {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 8px 12px; font-size: 13px;
    color: #cbd5e1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s;
}
.mic-test:hover { background: rgba(255, 255, 255, .12); }
.mic-test:disabled { opacity: .45; cursor: not-allowed; }
.mic-panel[data-test="1"] .mic-test { color: #a5f3fc; border-color: rgba(34, 211, 238, .5); background: rgba(6, 182, 212, .12); }
.mic-panel[data-test="1"] .mic-meter { opacity: 1; }
html.light .mic-test { color: #334155; background: #f1f5f9; border-color: rgba(15, 23, 42, .12); }
html.light .mic-panel[data-test="1"] .mic-test { color: #0e7490; background: #ecfeff; }