/* Site-wide theme (every layout, after tailwind.css and app.css):
   - IBM Plex Sans Thai / JetBrains Mono (self-hosted)
   - light / dark switch: html[data-theme] is set before first paint by js/theme-early.js, toggled by js/theme.js
   - dark mode for the Tailwind / app.css based pages (body.tm): remaps the light utility colours they use.
   Light mode keeps the original look of those pages. The home page has its own palette in home.css (body.hv). */

/* ---------- Fonts (self-hosted, @fontsource) ---------- */
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body.tm, body.hv { font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; }
.font-mono { font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace; }

/* ---------- Logo: light / dark versions ---------- */
.logo-img { display: block; height: 44px; width: auto; }
.logo-on-dark { display: none; }
html[data-theme="dark"] .logo-on-light { display: none; }
html[data-theme="dark"] .logo-on-dark { display: block; }

/* ---------- Theme toggle (dashboard / auth pages; the public header styles it in home.css) ---------- */
.tm-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 1px solid #cbd5e1; background: #fff; color: #334155; transition: border-color .2s, color .2s, box-shadow .2s;
}
.tm-toggle:hover { border-color: #0284C7; color: #0284C7; box-shadow: 0 0 18px -6px #0284C7; }
.tm-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tm-toggle .i-moon, html[data-theme="light"] .tm-toggle .i-sun { display: none; }
html[data-theme="light"] .tm-toggle .i-moon { display: block; }
html[data-theme="dark"] .tm-toggle { background: rgba(15, 23, 42, .6); border-color: rgba(148, 163, 184, .28); color: #E2E8F0; }
html[data-theme="dark"] .tm-toggle:hover { border-color: #38BDF8; color: #38BDF8; box-shadow: 0 0 18px -6px #38BDF8; }

/* ======================================================================
   Dark mode for Tailwind / app.css pages (public pages, dashboard, login)
   ====================================================================== */
html[data-theme="dark"] body.tm { background: #0F172A; color: #CBD5E1; }

/* surfaces */
html[data-theme="dark"] .tm .bg-white { background-color: #131E35; }
html[data-theme="dark"] .tm .bg-slate-50 { background-color: #0F1A2E; }
html[data-theme="dark"] .tm .bg-slate-100 { background-color: #0B1222; }
html[data-theme="dark"] .tm .bg-slate-200 { background-color: #1E293B; }
html[data-theme="dark"] .tm .bg-slate-300 { background-color: #334155; }
html[data-theme="dark"] .tm .hover\:bg-slate-50:hover { background-color: rgba(148, 163, 184, .07); }
html[data-theme="dark"] .tm main.bg-slate-50,
html[data-theme="dark"] .tm .bg-slate-100.min-h-screen { background-color: #0F172A; }

/* text */
html[data-theme="dark"] .tm .text-navy { color: #F1F5F9; }
html[data-theme="dark"] .tm .text-slate-800 { color: #E2E8F0; }
html[data-theme="dark"] .tm .text-slate-700,
html[data-theme="dark"] .tm .text-slate-600 { color: #CBD5E1; }
html[data-theme="dark"] .tm .text-slate-500 { color: #94A3B8; }
html[data-theme="dark"] .tm .text-slate-400 { color: #8391A7; }
html[data-theme="dark"] .tm .text-accent,
html[data-theme="dark"] .tm .hover\:text-accent:hover,
html[data-theme="dark"] .tm .group:hover .group-hover\:text-accent { color: #38BDF8; }
html[data-theme="dark"] .tm .hover\:text-accent-600:hover { color: #7DD3FC; }

/* borders */
html[data-theme="dark"] .tm .border-slate-100 { border-color: rgba(148, 163, 184, .12); }
html[data-theme="dark"] .tm .border-slate-200 { border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .tm .border-slate-300 { border-color: rgba(148, 163, 184, .26); }
html[data-theme="dark"] .tm .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, .12); }

/* status badges / alert boxes (pastel backgrounds -> tinted translucent) */
html[data-theme="dark"] .tm .bg-sky-50 { background-color: rgba(56, 189, 248, .08); }
html[data-theme="dark"] .tm .bg-sky-100 { background-color: rgba(56, 189, 248, .15); }
html[data-theme="dark"] .tm .text-sky-700, html[data-theme="dark"] .tm .text-sky-600 { color: #7DD3FC; }
html[data-theme="dark"] .tm .text-sky-800 { color: #BAE6FD; }
html[data-theme="dark"] .tm .border-sky-200 { border-color: rgba(56, 189, 248, .3); }
html[data-theme="dark"] .tm .bg-emerald-50 { background-color: rgba(52, 211, 153, .08); }
html[data-theme="dark"] .tm .bg-emerald-100 { background-color: rgba(52, 211, 153, .15); }
html[data-theme="dark"] .tm .hover\:bg-emerald-200:hover { background-color: rgba(52, 211, 153, .25); }
html[data-theme="dark"] .tm .text-emerald-600, html[data-theme="dark"] .tm .text-emerald-700, html[data-theme="dark"] .tm .text-emerald-800 { color: #6EE7B7; }
html[data-theme="dark"] .tm .border-emerald-200 { border-color: rgba(52, 211, 153, .3); }
html[data-theme="dark"] .tm .bg-amber-50 { background-color: rgba(251, 191, 36, .08); }
html[data-theme="dark"] .tm .bg-amber-100 { background-color: rgba(251, 191, 36, .15); }
html[data-theme="dark"] .tm .text-amber-600, html[data-theme="dark"] .tm .text-amber-700 { color: #FCD34D; }
html[data-theme="dark"] .tm .bg-rose-50 { background-color: rgba(251, 113, 133, .08); }
html[data-theme="dark"] .tm .bg-rose-100 { background-color: rgba(251, 113, 133, .15); }
html[data-theme="dark"] .tm .text-rose-600, html[data-theme="dark"] .tm .text-rose-700 { color: #FDA4AF; }
html[data-theme="dark"] .tm .border-rose-200 { border-color: rgba(251, 113, 133, .3); }
html[data-theme="dark"] .tm .bg-violet-100 { background-color: rgba(167, 139, 250, .16); }
html[data-theme="dark"] .tm .text-violet-700 { color: #C4B5FD; }

/* app.css components */
html[data-theme="dark"] .tm .card { background: #131E35; border-color: rgba(148, 163, 184, .14); box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -20px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .tm .input { background: #0B1222; border-color: rgba(148, 163, 184, .26); color: #E2E8F0; box-shadow: none; }
html[data-theme="dark"] .tm .input:focus { border-color: #38BDF8; box-shadow: 0 0 0 4px rgba(56, 189, 248, .15); }
html[data-theme="dark"] .tm .input[disabled] { background: #1E293B; color: #8391A7; }
html[data-theme="dark"] .tm ::placeholder { color: #64748B; }
html[data-theme="dark"] .tm .label { color: #CBD5E1; }
html[data-theme="dark"] .tm .hint { color: #94A3B8; }
html[data-theme="dark"] .tm .btn-outline { background: transparent; color: #CBD5E1; border-color: rgba(148, 163, 184, .3); }
html[data-theme="dark"] .tm .btn-outline:hover { border-color: #38BDF8; color: #38BDF8; }
html[data-theme="dark"] .tm .btn-danger { background: transparent; color: #FDA4AF; border-color: rgba(251, 113, 133, .35); }
html[data-theme="dark"] .tm .btn-danger:hover { background: rgba(251, 113, 133, .1); }
html[data-theme="dark"] .tm progress.bar, html[data-theme="dark"] .tm progress.bar::-webkit-progress-bar { background: #1E293B; }

/* rich text editor + rendered content */
html[data-theme="dark"] .tm .rte-toolbar { background: #0F1A2E; border-color: rgba(148, 163, 184, .26); }
html[data-theme="dark"] .tm .rte-toolbar button { color: #CBD5E1; }
html[data-theme="dark"] .tm .rte-toolbar button:hover { background: #1E293B; }
html[data-theme="dark"] .tm .rte-area { background: #0B1222; border-color: rgba(148, 163, 184, .26); color: #E2E8F0; }
html[data-theme="dark"] .tm .prose-content { color: #CBD5E1; }
html[data-theme="dark"] .tm .prose-content h2, html[data-theme="dark"] .tm .prose-content h3, html[data-theme="dark"] .tm .prose-content h4 { color: #F1F5F9; }
html[data-theme="dark"] .tm .prose-content a { color: #38BDF8; }
html[data-theme="dark"] .tm .prose-content blockquote { background: #1E293B; color: #CBD5E1; border-left-color: #38BDF8; }
html[data-theme="dark"] .tm .prose-content th { background: #1E293B; }
html[data-theme="dark"] .tm .prose-content th, html[data-theme="dark"] .tm .prose-content td, html[data-theme="dark"] .tm .prose-content hr { border-color: rgba(148, 163, 184, .26); }

/* booking calendar */
html[data-theme="dark"] .tm .cal-scroll { background: #0B1222; border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .tm .cal-head { background: #131E35; border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .tm .cal-dayhead { color: #CBD5E1; border-color: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .tm .cal-dayhead.is-today { background: rgba(56, 189, 248, .15); color: #7DD3FC; }
html[data-theme="dark"] .tm .cal-label { color: #F1F5F9; }
html[data-theme="dark"] .tm .cal-legend, html[data-theme="dark"] .tm .cal-stamp { color: #94A3B8; }
html[data-theme="dark"] .tm .cal-time { color: #8391A7; }
html[data-theme="dark"] .tm .cal-col { border-color: rgba(148, 163, 184, .16); background-image: linear-gradient(rgba(148, 163, 184, .1) 1px, transparent 1px); }
html[data-theme="dark"] .tm .cal-col:hover { background-color: rgba(148, 163, 184, .06); }
html[data-theme="dark"] .tm .cal-col.is-past { background-color: #0F1A2E; }

/* dashboard sidebar brand (always on navy) */
.sidebar-brand { display: block; transition: opacity .15s; }
.sidebar-brand:hover { opacity: .9; }
.sidebar-brand .logo-img { height: 48px; }

/* login / register layout */
.auth-brand .logo-img { height: 56px; }
.auth-toggle { position: absolute; top: 20px; right: 20px; }
.auth-brand-mobile { display: block; width: max-content; margin-bottom: 28px; }
.auth-brand-mobile .logo-img { height: 48px; }
@media (min-width: 1024px) { .auth-brand-mobile { display: none; } }   /* the brand panel shows the logo there */

/* Cloudflare Turnstile widget (partials/captcha.php) */
.captcha-box { min-height: 65px; }