/* ============================================================
 * Pukdee Design Overrides v1.0
 * อ้างอิงจาก DESIGN.md
 * ครอบ Tailwind classes → design tokens (ทุกหน้าใช้ตัวนี้)
 * ============================================================ */

/* Font enforce */
body, html, button, input, textarea, select {
  font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Page background — soft cream */
body { background-color: var(--bg-canvas) !important; color: var(--text-body) !important; }

/* ─── Map Tailwind colors → design tokens ─── */
.bg-white { background-color: var(--bg-surface) !important; }
.bg-gray-50, .bg-slate-50 { background-color: var(--bg-canvas) !important; }
.bg-gray-100, .bg-slate-100 { background-color: var(--bg-muted) !important; }
.bg-gray-200, .bg-slate-200 { background-color: var(--bg-muted) !important; }

.text-gray-500, .text-slate-500 { color: var(--text-sub) !important; }
.text-gray-600, .text-slate-600 { color: var(--text-sub) !important; }
.text-gray-700, .text-slate-700 { color: var(--text-body) !important; }
.text-gray-800, .text-slate-800 { color: var(--text-body) !important; }
.text-gray-900, .text-slate-900 { color: var(--text-body) !important; }

.border-gray-200, .border-slate-200 { border-color: var(--border) !important; }
.border-gray-300, .border-slate-300 { border-color: var(--border) !important; }

/* Emerald/Teal/Green → brand */
.bg-emerald-500, .bg-emerald-600, .bg-green-500, .bg-green-600,
.bg-teal-500, .bg-teal-600 { background-color: var(--brand-500) !important; color: white !important; }
.bg-emerald-50, .bg-green-50, .bg-teal-50 { background-color: var(--brand-50) !important; }
.bg-emerald-100, .bg-green-100 { background-color: var(--brand-50) !important; }
.text-emerald-500, .text-emerald-600, .text-green-500, .text-green-600,
.text-teal-500, .text-teal-600 { color: var(--brand-700) !important; }
.text-emerald-700, .text-emerald-800, .text-green-700 { color: var(--brand-800) !important; }
.border-emerald-500, .border-green-500 { border-color: var(--brand-500) !important; }
.border-emerald-300, .border-green-300 { border-color: var(--brand-200) !important; }
.ring-emerald-500, .ring-green-500 { --tw-ring-color: var(--brand-500) !important; }

/* Amber/Orange/Yellow → accent */
.bg-amber-500, .bg-orange-500, .bg-yellow-500 { background-color: var(--accent-400) !important; }
.bg-amber-50, .bg-orange-50, .bg-yellow-50 { background-color: var(--accent-50) !important; }
.text-amber-600, .text-orange-600, .text-amber-800 { color: var(--accent-800) !important; }

/* Red/Rose → danger */
.bg-red-500, .bg-rose-500 { background-color: var(--danger-strong) !important; }
.bg-red-50, .bg-rose-50 { background-color: var(--danger-bg) !important; }
.text-red-500, .text-rose-500 { color: var(--danger-strong) !important; }
.text-red-600, .text-red-700 { color: var(--danger-text) !important; }

/* Blue → info */
.bg-blue-500, .bg-sky-500, .bg-indigo-500 { background-color: var(--info-text) !important; }
.bg-blue-50, .bg-sky-50 { background-color: var(--info-bg) !important; }
.text-blue-600, .text-sky-600 { color: var(--info-text) !important; }

/* ─── Border Radius Standardize ─── */
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-md) !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }
.rounded-2xl { border-radius: var(--radius-lg) !important; }
.rounded-3xl { border-radius: var(--radius-xl) !important; }

/* ─── Shadows Standardize ─── */
.shadow-sm { box-shadow: var(--shadow-xs) !important; }
.shadow { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-sm) !important; }
.shadow-lg { box-shadow: var(--shadow-md) !important; }
.shadow-xl, .shadow-2xl { box-shadow: var(--shadow-lg) !important; }

/* ─── Buttons (Tailwind common patterns) ─── */
button.bg-emerald-500, button.bg-emerald-600, button.bg-green-500,
.btn-primary {
  background: var(--brand-500) !important;
  color: white !important;
  border: none !important;
  transition: background .15s ease;
}
button.bg-emerald-500:hover, button.bg-emerald-600:hover { background: var(--brand-700) !important; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ─── Form Inputs Standardize ─── */
input[type="text"]:not(.no-style),
input[type="email"]:not(.no-style),
input[type="password"]:not(.no-style),
input[type="number"]:not(.no-style),
input[type="tel"]:not(.no-style),
input[type="url"]:not(.no-style),
input[type="search"]:not(.no-style),
textarea:not(.no-style),
select:not(.no-style) {
  font-family: 'Prompt', sans-serif;
  font-size: 15px;
  color: var(--text-body);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}

input:focus:not(.no-style),
textarea:focus:not(.no-style),
select:focus:not(.no-style) {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}

input[aria-invalid="true"] { border-color: var(--danger-strong) !important; }

/* ─── Tables ─── */
table { font-family: inherit; }
table th { font-weight: 500; color: var(--text-sub); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
table td { font-size: 14px; color: var(--text-body); }

/* ─── Scrollbar (subtle) ─── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ─── Selection ─── */
::selection { background: var(--brand-200); color: var(--brand-900); }

/* ─── Disabled state ─── */
:disabled, [disabled], [aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
 * SCOPE GUARDS — หน้าที่มี custom design ไม่ให้ overrides ทับ
 * ============================================================ */

/* admin-settings.php มี Tailwind + inline styles + SweetAlert
   ห้าม overrides ทับ form/button ของหน้านี้
*/
body.admin-settings-page .form-input,
body.admin-settings-page .form-label,
body.admin-settings-page .tab-btn,
body.admin-settings-page .btn-save,
body.admin-settings-page .setting-card,
body.admin-settings-page input,
body.admin-settings-page button,
body.admin-settings-page select,
body.admin-settings-page textarea {
  /* let inline/Tailwind win */
  background-color: revert !important;
  color: revert !important;
  border-color: revert !important;
  border-radius: revert !important;
  font-size: revert !important;
}

/* SweetAlert2 modals — ใช้ default */
.swal2-popup, .swal2-popup * {
  font-family: 'Prompt', sans-serif !important;
}

/* booking pages: ป้องกัน overrides ทับ table */
body.booking-page table th,
body.booking-page table td {
  font-size: revert !important;
  text-transform: none !important;
  color: revert !important;
  font-weight: revert !important;
}

/* ─── Additional scope guards (Phase 18) ─── */
body.knowledge-page input, body.knowledge-page button, body.knowledge-page textarea,
body.super-admin-page input, body.super-admin-page button,
body.room-manage-page input, body.room-manage-page button,
body.statistics-page input, body.statistics-page button {
  border-radius: revert !important;
  background-color: revert !important;
  color: revert !important;
}

/* admin-settings tab buttons + nav */
body.admin-settings-page .tab-btn,
body.admin-settings-page .nav-tab,
body.admin-settings-page .tab-content {
  background-color: revert !important;
  color: revert !important;
}

/* booking tables เน้น contrast */
body.booking-page .table, body.booking-page .booking-table,
body.booking-page table {
  background: var(--bg-surface, #fff) !important;
}