* { font-family: 'Sarabun', sans-serif; }
* { box-sizing: border-box; }

html { color-scheme: light; }

/* ── Admin default: light ── */
body {
  background: #f1f5f9;
  color: #0f172a;
}

.site-bg {
  background:
    radial-gradient(ellipse at 70% 0%, rgba(34,211,238,0.14), transparent 58%),
    radial-gradient(ellipse at 10% 85%, rgba(52,211,153,0.10), transparent 48%),
    #070b12;
}

.nav-glass {
  background: rgba(7,11,18,0.78);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.btn-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
  box-shadow: 0 6px 20px rgba(6,182,212,0.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(16,185,129,0.22);
}
.btn-primary:active { transform: translateY(0); }

button, a { -webkit-tap-highlight-color: transparent; }

.btn-outline {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #374151;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-outline:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.panel-strong {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

/* ── Admin cards ── */
.admin-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.admin-card:hover { border-color: #bfdbfe; }

/* ── Topbar ── */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

/* ── Nav items ── */
.nav-item {
  color: #374151;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.nav-item:hover {
  background: #f1f5f9;
  color: #1e40af;
}
.nav-item.active {
  background: linear-gradient(135deg, #eff6ff, #e0f2fe);
  border-color: #bfdbfe;
  color: #1e40af;
  box-shadow: inset 3px 0 0 #3b82f6;
}

/* ── Inputs ── */
input, select, textarea {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
  background: #ffffff;
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
input[type="checkbox"] { width: 15px; height: 15px; }
option { background: #ffffff; color: #0f172a; }

/* ── Badges ── */
.badge-green  { background: #dcfce7; color: #15803d;  border: 1px solid #bbf7d0; }
.badge-blue   { background: #dbeafe; color: #1d4ed8;  border: 1px solid #bfdbfe; }
.badge-yellow { background: #fef3c7; color: #92400e;  border: 1px solid #fde68a; }
.badge-red    { background: #fee2e2; color: #b91c1c;  border: 1px solid #fca5a5; }
.badge-purple { background: #ede9fe; color: #5b21b6;  border: 1px solid #c4b5fd; }

/* ── Tables ── */
table thead tr { border-bottom: 1px solid #e2e8f0; }
table thead th { color: #64748b; font-size: .78rem; font-weight: 700; }
table tbody tr { border-bottom: 1px solid #f1f5f9; }
table tbody tr:hover { background: #f8fafc; }

/* ── Cards / articles ── */
article.rounded-xl {
  transition: border-color .14s ease, box-shadow .14s ease;
}
article.rounded-xl:hover {
  border-color: #bfdbfe;
}

/* ── Tailwind utility override: white/transparent → visible on light bg ── */
.text-white    { color: #0f172a !important; }
.text-slate-200, .text-slate-300 { color: #374151 !important; }
.text-slate-400 { color: #64748b !important; }
.text-slate-500 { color: #94a3b8 !important; }
.text-cyan-300  { color: #0891b2 !important; }
.text-cyan-400  { color: #06b6d4 !important; }
.text-emerald-300 { color: #15803d !important; }
.text-amber-300   { color: #b45309 !important; }
.text-red-300     { color: #b91c1c !important; }

.border-white\/5,
.border-white\/8,
.border-white\/10 { border-color: #e2e8f0 !important; }

.bg-white\/5,
.bg-white\/3   { background: #f8fafc !important; }
.bg-white\/8   { background: #f1f5f9 !important; }
.bg-black\/20  { background: #f8fafc !important; }
.bg-slate-950\/25,
.bg-slate-950\/35 { background: #f1f5f9 !important; }
.bg-emerald-500\/10 { background: #f0fdf4 !important; }
.border-emerald-500\/20 { border-color: #bbf7d0 !important; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Mobile admin layout ── */
@media (max-width: 900px) {
  body.flex { flex-direction: column !important; height: auto !important; min-height: 100vh !important; }
  body { flex-direction: column; height: auto; min-height: 100vh; }
  body main { overflow: auto !important; height: auto !important; }
  /* table horizontal scroll */
  .admin-card table,
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* topbar padding */
  .topbar { padding: .75rem 1rem !important; }
  /* content padding */
  main .flex-1.overflow-y-auto,
  main > div.flex-1 { padding: .875rem 1rem !important; }
}
@media (max-width: 640px) {
  /* Reduce card padding */
  .admin-card { border-radius: 12px !important; }
  /* Grid adjustments handled by Tailwind grid-cols responsive */
  .topbar h1 { font-size: 1rem !important; }
}
@media (max-width: 480px) {
  .topbar { padding: .625rem .875rem !important; }
}

/* ─────────────────────────────────────────────
   Public-facing site pages (body.public-site-body)
   These override back to dark / brand theme
   ───────────────────────────────────────────── */
html.public-site { color-scheme: light; }

body.public-site-body {
  background:
    radial-gradient(circle at 16% 0%, rgba(37,99,235,0.08), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(20,184,166,0.08), transparent 26rem),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 46%, #fffaf2 100%) !important;
  color: #0f172a;
}

.public-site-nav {
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid rgba(226,232,240,0.95) !important;
}

body.public-site-body .text-white { color: #0f172a !important; }
body.public-site-body .text-slate-200, body.public-site-body .text-slate-300 { color: #374151 !important; }

body.public-site-body input,
body.public-site-body select,
body.public-site-body textarea {
  background: #fbfaf8;
  color: #0f172a;
}
body.public-site-body input:focus,
body.public-site-body select:focus,
body.public-site-body textarea:focus {
  background: #ffffff;
  border-color: rgba(59,130,246,0.70);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}
body.public-site-body option { background: #ffffff; color: #0f172a; }

body.public-site-body ::-webkit-scrollbar-track { background: rgba(241,245,249,0.96); }
body.public-site-body ::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.45);
  border-color: rgba(241,245,249,0.96);
}

/* ─────────────────────────────────────────────
   .dark-card — restore proper white colors inside
   dark-background sections on the public site.
   Must come LAST to override the global overrides above.
   ───────────────────────────────────────────── */

/* Base: give the dark card element itself white color so children inherit it */
body.public-site-body .dark-card { color: #fff !important; }

body .dark-card.text-white,
body .dark-card .text-white { color: #ffffff !important; }

body .dark-card .text-slate-200,
body .dark-card .text-slate-300 { color: rgba(255,255,255,.72) !important; }

body .dark-card .text-slate-400 { color: rgba(255,255,255,.50) !important; }
body .dark-card .text-slate-500 { color: rgba(255,255,255,.38) !important; }

body .dark-card .text-blue-100  { color: rgba(219,234,254,.9)  !important; }
body .dark-card .text-blue-400  { color: #60a5fa !important; }
body .dark-card .text-cyan-300  { color: #67e8f9 !important; }
body .dark-card .text-cyan-400  { color: #22d3ee !important; }
body .dark-card .text-amber-300 { color: #fcd34d !important; }
body .dark-card .text-amber-400 { color: #fbbf24 !important; }
body .dark-card .text-emerald-300, body .dark-card .text-emerald-200 { color: #6ee7b7 !important; }

body .dark-card .border-white\/5,
body .dark-card .border-white\/8,
body .dark-card .border-white\/10,
body .dark-card .border-white\/15,
body .dark-card .border-white\/20 { border-color: rgba(255,255,255,.1) !important; }

body .dark-card .bg-white\/3,
body .dark-card .bg-white\/5  { background: rgba(255,255,255,.05) !important; }
body .dark-card .bg-white\/8  { background: rgba(255,255,255,.08) !important; }
body .dark-card .bg-white\/10 { background: rgba(255,255,255,.10) !important; }

body .dark-card .bg-blue-500\/20  { background: rgba(59,130,246,.20) !important; }
body .dark-card .bg-black\/20     { background: rgba(0,0,0,.20)      !important; }
body .dark-card .bg-slate-950\/25,
body .dark-card .bg-slate-950\/35 { background: rgba(2,6,23,.3)      !important; }

/* Public-site CTA buttons and anchors: always white text on colored backgrounds */
body.public-site-body button.text-white,
body.public-site-body a.text-white { color: #ffffff !important; }