/* ธีมน้ำเงินเข้ม — โทนเดียวกับหน้าเช็คอิน/เลขา AI (ครอบทับ Tailwind ของตัว build เดิม) */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');

:root {
  --navy: #1A2B3C; --navy-2: #24384d;
  --bg: #0f1722; --card: #1c2736; --card-2: #141e2c; --line: #2e3d52;
  --text: #e8eef7; --muted: #9fb0c6;
  --blue: #3b82f6;
}

html, body, #root { background: var(--bg) !important; color: var(--text) !important; }
body, button, input, select, textarea {
  font-family: 'Prompt', ui-sans-serif, system-ui, sans-serif !important;
}

/* ===== พื้นผิวหลัก ===== */
.bg-white { background-color: var(--card) !important; }
.bg-gray-50 { background-color: var(--bg) !important; }
.bg-gray-100 { background-color: var(--card-2) !important; }
.bg-gray-400 { background-color: #45586f !important; }

/* ===== ตัวหนังสือ ===== */
.text-gray-800, .text-gray-900, .text-black { color: var(--text) !important; }
.text-gray-700 { color: #c6d2e2 !important; }
.text-gray-600 { color: var(--muted) !important; }
.text-gray-500 { color: var(--muted) !important; }
.text-gray-400 { color: #6d7f97 !important; }

/* ===== เส้น/ขอบ/เงา ===== */
.border, .border-gray-50, .border-gray-100, .border-gray-200 { border-color: var(--line) !important; }
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; }
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .hover\:shadow-md:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
}

/* ===== ชิปสีอ่อน -> โปร่งบนพื้นเข้ม (คงความหมายสีเดิม) ===== */
.bg-green-50   { background-color: rgba(22,163,74,.16) !important; }
.bg-green-100  { background-color: rgba(22,163,74,.22) !important; }
.bg-emerald-100{ background-color: rgba(16,185,129,.22) !important; }
.bg-blue-50    { background-color: rgba(59,130,246,.16) !important; }
.bg-blue-100   { background-color: rgba(59,130,246,.22) !important; }
.bg-amber-50, .bg-yellow-50   { background-color: rgba(217,119,6,.18) !important; }
.bg-amber-100, .bg-yellow-100 { background-color: rgba(217,119,6,.25) !important; }
.bg-orange-50  { background-color: rgba(234,88,12,.16) !important; }
.bg-orange-100 { background-color: rgba(234,88,12,.24) !important; }
.bg-red-50     { background-color: rgba(220,38,38,.16) !important; }
.bg-red-100    { background-color: rgba(220,38,38,.24) !important; }
.bg-purple-50  { background-color: rgba(147,51,234,.16) !important; }
.bg-purple-100 { background-color: rgba(147,51,234,.24) !important; }
.bg-teal-100   { background-color: rgba(13,148,136,.22) !important; }

/* ตัวหนังสือของชิป ให้สว่างอ่านง่ายบนพื้นเข้ม */
.text-green-600, .text-green-700, .text-emerald-700 { color: #7fd6a0 !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: #8ab8ff !important; }
.text-amber-600, .text-amber-700, .text-amber-800,
.text-yellow-700, .text-yellow-800 { color: #e0b866 !important; }
.text-orange-700 { color: #f0a878 !important; }
.text-red-600, .text-red-700 { color: #ff8f8f !important; }
.text-purple-700 { color: #c9a8f0 !important; }
.text-teal-700 { color: #7ed0c8 !important; }

.border-amber-100, .border-amber-200, .border-yellow-200 { border-color: rgba(217,119,6,.45) !important; }
.border-blue-200 { border-color: rgba(59,130,246,.45) !important; }
.border-purple-100 { border-color: rgba(147,51,234,.4) !important; }
.border-red-400 { border-color: rgba(220,38,38,.6) !important; }

/* ===== hover ===== */
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover { background-color: var(--navy-2) !important; }
.hover\:bg-gray-200:hover { background-color: #2e3d52 !important; }
.hover\:text-gray-600:hover { color: var(--text) !important; }

/* ===== ฟอร์ม ===== */
input, select, textarea {
  background-color: var(--card-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
input::placeholder, textarea::placeholder { color: #6d7f97 !important; }

/* ===== แถบเลื่อน ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2e3d52; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3b4d66; }

/* ===== ชิปสถานะ (custom class ของแอป) ===== */
.status-ai      { background-color: rgba(59,130,246,.2) !important;  color: #8ab8ff !important; }
.status-waiting { background-color: rgba(220,38,38,.2) !important;   color: #ff8f8f !important; }
.status-staff   { background-color: rgba(217,119,6,.22) !important;  color: #e0b866 !important; }
.status-closed  { background-color: rgba(159,176,198,.15) !important; color: var(--muted) !important; }

/* ===== บับเบิลแชท ===== */
.chat-bubble-ai   { background: var(--card-2) !important; border: 1px solid var(--line) !important; color: var(--text) !important; }
.chat-bubble-user { background: rgba(22,163,74,.2) !important; color: var(--text) !important; }

/* ปุ่มที่กดไม่ได้ */
.disabled\:bg-gray-200:disabled { background-color: #2e3d52 !important; color: #6d7f97 !important; }

/* ซ่อนปุ่มรีวิว Google ในเมนูซ้าย (เจ้าของสั่ง 6 ส.ค. 69 — ระบบดึงรีวิวไม่ได้เปิดใช้ หน้านี้ว่างเปล่า) */
a[href="/reviews"] { display: none !important; }

/* ===== เมนูซ้ายแบบหน้า ผจก. (เจ้าของขอ 8 ส.ค. 69): ซ่อนเป็นค่าเริ่มต้น ☰ เปิด / ✕ ปิด ===== */
body.sb-hidden aside { display: none !important; }
#sb-toggle {
  position: fixed; left: 12px; top: 12px; z-index: 9999;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); font-size: 20px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: pointer;
  display: none;
}
body.sb-hidden #sb-toggle { display: block; }
#sb-toggle:hover { background: var(--navy-2); }
#sb-close {
  position: fixed; top: 12px; left: 186px; z-index: 9999;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); font-size: 14px; line-height: 1;
  cursor: pointer;
}
body.sb-hidden #sb-close { display: none; }
#sb-close:hover { background: var(--navy-2); color: var(--text); }

/* เมนูซ้าย = ลิ้นชักลอยทับหน้า (overlay แบบหน้า ผจก.) — เนื้อหาข้างหลังอยู่นิ่ง ไม่ขยับตอนเปิด/ปิด */
aside {
  position: fixed !important; left: 0; top: 0; height: 100vh; z-index: 9998;
  box-shadow: 8px 0 28px rgba(0,0,0,.55);
}
/* คอมแพ็กต์ + จัดกลางเว้นซ้ายขวาเท่ากัน แบบหน้า ผจก. (เจ้าของขอ 10 ส.ค. 69) */
html { font-size: 14px; }             /* ย่อทั้งระบบ ~12% ตัวหนังสือ/การ์ดเล็กลงพอดีตา */
main { padding-left: 0; }
main > * { max-width: 1150px; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 900px) { main { padding-left: 52px; } } /* จอแคบ: กันเนื้อหาทับปุ่ม ☰ */

/* ฉากหลังมืดจางตอนเปิดเมนู (กดที่ฉากหลังเพื่อปิดได้) */
#sb-backdrop {
  position: fixed; inset: 0; z-index: 9997;
  background: rgba(0, 0, 0, .55);
}
body.sb-hidden #sb-backdrop { display: none; }

/* ===== ปุ่ม/ฟอร์มเพิ่มการจอง (พนักงานรับเอง) ===== */
#rv-add {
  position: fixed; right: 18px; top: 14px; z-index: 9000;
  background: #3b82f6; color: #fff; border: none; border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#rv-add:hover { background: #2f6fd8; }
#rv-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
}
#rv-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; width: 320px; max-width: 92vw; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#rv-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text); }
#rv-card label { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--muted); }
#rv-card input, #rv-card select { width: 100%; border-radius: 8px; padding: 8px 10px; font-size: 14px; border: 1px solid var(--line); }
#rv-btns { display: flex; gap: 8px; margin-top: 16px; }
#rv-btns button { flex: 1; border: none; border-radius: 10px; padding: 10px; font-size: 14px; cursor: pointer; }
#rv-cancel { background: var(--card-2); color: var(--muted); border: 1px solid var(--line) !important; }
#rv-save { background: #16A34A; color: #fff; }
#rv-save:hover { background: #128a3f; }

/* ===== ปุ่ม/ฟอร์มเพิ่มออเดอร์ (พนักงานรับเอง) ===== */
#od-add {
  position: fixed; right: 18px; top: 14px; z-index: 9000;
  background: #3b82f6; color: #fff; border: none; border-radius: 10px;
  padding: 9px 16px; font-size: 14px; font-weight: 500; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
#od-add:hover { background: #2f6fd8; }
#od-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center;
}
#od-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; width: 340px; max-width: 92vw; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#od-card h3 { margin: 0 0 12px; font-size: 16px; color: var(--text); }
#od-card label { display: block; margin: 8px 0 4px; font-size: 12px; color: var(--muted); }
#od-card input, #od-card select, #od-card textarea { width: 100%; border-radius: 8px; padding: 8px 10px; font-size: 14px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); }
#od-btns { display: flex; gap: 8px; margin-top: 16px; }
#od-btns button { flex: 1; border: none; border-radius: 10px; padding: 10px; font-size: 14px; cursor: pointer; }
#od-cancel { background: var(--card-2); color: var(--muted); border: 1px solid var(--line) !important; }
#od-save { background: #16A34A; color: #fff; }
#od-save:hover { background: #128a3f; }