/* =====================================================
   SIMPLE MODE (DAY MODE) - HARMONIZED STYLES
   ธีม: Pastel Pink & High Contrast
   ใช้สำหรับ: siam_nippon.html และ siam_nippon_realtime.html
   ===================================================== */

/* --- Base Settings --- */
body.simple-mode::before {
    background: #fffafb !important;
    animation: none !important;
}

body.simple-mode {
    background-color: #fffafb !important;
    color: #1a1a1a !important;
}

body.simple-mode * {
    text-shadow: none !important;
}

/* --- Primary Text Overrides --- */
body.simple-mode .text-white,
body.simple-mode .text-slate-100,
body.simple-mode .text-slate-200,
body.simple-mode .text-slate-300 {
    color: #1a1a1a !important;
}

body.simple-mode .text-slate-400 {
    color: #6b7280 !important;
}

body.simple-mode .text-slate-500 {
    color: #4b5563 !important;
}

body.simple-mode .text-slate-600,
body.simple-mode .text-slate-700 {
    color: #374151 !important;
}

/* --- Accent Colors - Darker for Light BG --- */
body.simple-mode .text-pink-400,
body.simple-mode .text-pink-500 {
    color: #be185d !important;
}

body.simple-mode .text-pink-300 {
    color: #be185d !important;
}

body.simple-mode .text-emerald-400,
body.simple-mode .text-emerald-500 {
    color: #047857 !important;
}

body.simple-mode .text-emerald-300 {
    color: #059669 !important;
}

body.simple-mode .text-amber-400,
body.simple-mode .text-amber-500 {
    color: #b45309 !important;
}

body.simple-mode .text-amber-300 {
    color: #b45309 !important;
}

body.simple-mode .text-blue-400,
body.simple-mode .text-blue-500 {
    color: #1d4ed8 !important;
}

body.simple-mode .text-cyan-400,
body.simple-mode .text-cyan-500 {
    color: #0891b2 !important;
}

body.simple-mode .text-indigo-400,
body.simple-mode .text-indigo-500 {
    color: #4f46e5 !important;
}

body.simple-mode .text-indigo-300 {
    color: #4338ca !important;
}

body.simple-mode .text-indigo-200 {
    color: #374151 !important;
}

body.simple-mode .text-rose-400,
body.simple-mode .text-rose-500 {
    color: #be123c !important;
}

body.simple-mode .text-rose-300 {
    color: #be123c !important;
}

body.simple-mode .text-fuchsia-400 {
    color: #a21caf !important;
}

body.simple-mode .text-lime-400 {
    color: #4d7c0f !important;
}

body.simple-mode .text-green-400 {
    color: #15803d !important;
}

body.simple-mode .text-teal-400 {
    color: #0f766e !important;
}

body.simple-mode .text-purple-400 {
    color: #7c3aed !important;
}

body.simple-mode .text-gradient,
body.simple-mode .bg-clip-text {
    -webkit-text-fill-color: #be185d !important;
    background: none !important;
}

/* Booth name gradient fix */
body.simple-mode h3.bg-clip-text {
    -webkit-text-fill-color: #1e293b !important;
    background: none !important;
}

/* Footer gradient text fix */
body.simple-mode .bg-gradient-to-r.from-pink-400.to-purple-400 {
    -webkit-text-fill-color: #be185d !important;
}

body.simple-mode .bg-gradient-to-r.from-blue-300 {
    -webkit-text-fill-color: #4338ca !important;
}

/* --- Glass Panels --- */
body.simple-mode .glass-panel {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* --- Navbar --- */
body.simple-mode nav.glass-panel {
    background: #ffffff !important;
    border-bottom: 1px solid #fce7f3 !important;
}

/* --- Tab Bar --- */
body.simple-mode .fixed.bottom-0 {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
}

body.simple-mode .bg-slate-800\/80 {
    background: #f8fafc !important;
}

body.simple-mode .bg-slate-900\/95 {
    background: rgba(255, 255, 255, 0.97) !important;
}

/* Active Tab */
body.simple-mode .bg-gradient-to-r.from-pink-500.to-purple-500 {
    background: linear-gradient(to right, #ec4899, #a855f7) !important;
    color: #ffffff !important;
}

body.simple-mode .bg-gradient-to-r.from-pink-500.to-purple-500 span,
body.simple-mode .bg-gradient-to-r.from-pink-500.to-purple-500 i {
    color: #ffffff !important;
}

/* --- Booth Cards --- */
body.simple-mode .booth-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body.simple-mode .booth-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: #d1d5db !important;
}

body.simple-mode .booth-card .text-white,
body.simple-mode .booth-card .font-black.text-white {
    color: #1a1a1a !important;
}

body.simple-mode .avatar-img {
    border: 2px solid #e5e7eb !important;
}

body.simple-mode .next-avatar-img {
    border: 1px solid #d1d5db !important;
}

/* --- Status Indicators (visible bar on top of cards) --- */
body.simple-mode .status-open {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
    box-shadow: none !important;
}

body.simple-mode .status-soon {
    background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
    box-shadow: none !important;
}

body.simple-mode .status-warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
    box-shadow: none !important;
}

body.simple-mode .status-closed {
    background: #d1d5db !important;
}

/* --- Status Badges (in card headers) --- */
body.simple-mode .booth-status-badge {
    font-weight: 800 !important;
}

/* Status badge - LIVE / ON GOING */
body.simple-mode .bg-emerald-500\/20.text-emerald-400,
body.simple-mode .bg-emerald-500\/20 {
    background-color: #d1fae5 !important;
    color: #047857 !important;
    border-color: #6ee7b7 !important;
}

/* Status badge - CLOSING SOON */
body.simple-mode .bg-amber-500\/20.text-amber-400,
body.simple-mode .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fcd34d !important;
}

/* Status badge - UPCOMING */
body.simple-mode .bg-blue-500\/20.text-blue-400,
body.simple-mode .bg-blue-500\/20 {
    background-color: #dbeafe !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}

/* Status badge - BETWEEN ROUNDS */
body.simple-mode .bg-cyan-500\/20.text-cyan-400,
body.simple-mode .bg-cyan-500\/20 {
    background-color: #cffafe !important;
    color: #0891b2 !important;
    border-color: #67e8f9 !important;
}

/* Status badge - CLOSED/BREAK */
body.simple-mode .bg-slate-700.text-slate-300 {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

body.simple-mode .bg-slate-800.text-slate-400 {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

/* --- No Activity Text --- */
body.simple-mode .text-slate-600.uppercase {
    color: #9ca3af !important;
}

/* --- Guide Box Icons & Background --- */
body.simple-mode .bg-emerald-500\/20,
body.simple-mode .bg-amber-500\/20,
body.simple-mode .bg-slate-500\/20,
body.simple-mode .bg-pink-500\/20,
body.simple-mode .bg-cyan-500\/20 {
    background-color: #f8fafc !important;
}

/* --- Modals --- */
body.simple-mode .bg-slate-700,
body.simple-mode .bg-slate-600 {
    background-color: #ffffff !important;
}

body.simple-mode .bg-slate-800 {
    background-color: #ffffff !important;
}

body.simple-mode .bg-slate-900 {
    background-color: #f8fafc !important;
}

body.simple-mode .bg-slate-700 *,
body.simple-mode .bg-slate-600 *,
body.simple-mode .bg-slate-800 *,
body.simple-mode .bg-slate-900 * {
    color: #1a1a1a !important;
}

body.simple-mode .bg-slate-900\/80,
body.simple-mode .bg-slate-800\/80 {
    background-color: #f8fafc !important;
}

body.simple-mode .bg-slate-900\/40,
body.simple-mode .bg-slate-800\/40 {
    background-color: #ffffff !important;
}

body.simple-mode .bg-slate-800\/60 {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.simple-mode .bg-slate-900\/60 {
    background-color: #f8fafc !important;
}

body.simple-mode .bg-slate-800\/20 {
    background-color: #f8fafc !important;
}

body.simple-mode .bg-slate-800\/50 {
    background-color: #f1f5f9 !important;
}

/* --- Borders --- */
body.simple-mode .border-white\/10,
body.simple-mode .border-white\/5 {
    border-color: #e5e7eb !important;
}

body.simple-mode .border-slate-700\/50,
body.simple-mode .border-slate-700 {
    border-color: #e5e7eb !important;
}

body.simple-mode .border-slate-600 {
    border-color: #d1d5db !important;
}

/* --- Remarks Section --- */
body.simple-mode #realtime-remarks>div {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.simple-mode #realtime-remarks .text-indigo-200 {
    color: #374151 !important;
}

body.simple-mode #realtime-remarks .border-indigo-500\/30 {
    border-color: #c7d2fe !important;
}

/* --- Disclaimer Section --- */
body.simple-mode .bg-slate-800\/85 {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
}

body.simple-mode .bg-black\/80,
body.simple-mode .bg-black\/90,
body.simple-mode .bg-black {
    background: #ffffff !important;
}

/* --- Day Selector --- */
body.simple-mode #day-selector {
    background: #f8fafc !important;
    border-color: #e5e7eb !important;
}

body.simple-mode #day-selector button {
    color: #374151 !important;
}

body.simple-mode #day-selector button.bg-gradient-to-r {
    background: linear-gradient(to right, #ec4899, #a855f7) !important;
    color: #ffffff !important;
}

/* --- Dropdowns & Inputs --- */
body.simple-mode select,
body.simple-mode select option {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #d1d5db !important;
}

body.simple-mode input[type="text"] {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #d1d5db !important;
}

body.simple-mode input[type="text"]::placeholder {
    color: #9ca3af !important;
}

/* --- Time Slots --- */
body.simple-mode [onclick*='selectTimeSlot'] {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #1a1a1a !important;
}

body.simple-mode [onclick*='selectTimeSlot']:hover {
    background-color: #fdf2f8 !important;
    border-color: #f9a8d4 !important;
}

/* --- Summary Bars --- */
body.simple-mode .bg-slate-400\/20,
body.simple-mode .bg-slate-500\/20 {
    background-color: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
}

body.simple-mode .bg-slate-400\/20 span,
body.simple-mode .bg-slate-500\/20 span {
    color: #1a1a1a !important;
    font-weight: 800 !important;
}

body.simple-mode .bg-indigo-900\/40 {
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
}

body.simple-mode .bg-indigo-500\/10 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

/* --- Cost Box --- */
body.simple-mode .bg-slate-800\/40,
body.simple-mode .bg-slate-900\/40 {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

body.simple-mode .text-4xl.font-black {
    color: #1a1a1a !important;
}

/* --- Icons --- */
body.simple-mode [data-lucide] {
    color: inherit !important;
}

body.simple-mode [data-lucide="trash-2"],
body.simple-mode [data-lucide="trash"] {
    color: #be123c !important;
}

body.simple-mode [data-lucide="plus"],
body.simple-mode [data-lucide="minus"] {
    color: #1a1a1a !important;
}

/* --- Pulse dot (live indicator) --- */
body.simple-mode .bg-emerald-500.rounded-full {
    background-color: #10b981 !important;
}

/* --- Booth filter modal --- */
body.simple-mode .bg-black\/80.backdrop-blur-sm {
    background: rgba(0, 0, 0, 0.5) !important;
}

body.simple-mode .bg-slate-900.border {
    background-color: #ffffff !important;
}

/* --- Toggle Button --- */
body.simple-mode #simple-mode-toggle,
body.simple-mode #simple-mode-toggle-mobile {
    border: 2px solid #d1d5db !important;
    background-color: #ffffff !important;
}

body.simple-mode #simple-mode-toggle span,
body.simple-mode #simple-mode-toggle-mobile span {
    color: #374151 !important;
    font-weight: 800 !important;
}

body.simple-mode #simple-mode-toggle:hover,
body.simple-mode #simple-mode-toggle-mobile:hover {
    background: #f1f5f9 !important;
    border-color: #9ca3af !important;
}

/* --- Member schedule card --- */
body.simple-mode .bg-indigo-500\/10 {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

body.simple-mode .bg-indigo-500\/20 {
    background-color: #e0e7ff !important;
}

/* --- Pill badges for booth info --- */
body.simple-mode .bg-pink-500\/20 {
    background-color: #fce7f3 !important;
    border-color: #f9a8d4 !important;
}

body.simple-mode .bg-emerald-500\/10 {
    background-color: #d1fae5 !important;
}

body.simple-mode .bg-green-500\/10 {
    background-color: #d1fae5 !important;
}

body.simple-mode .bg-purple-500\/10 {
    background-color: #ede9fe !important;
}

body.simple-mode .bg-teal-500\/10 {
    background-color: #ccfbf1 !important;
}

body.simple-mode .bg-lime-500\/10 {
    background-color: #ecfccb !important;
}

/* --- Round schedule list (realtime) --- */
body.simple-mode .bg-slate-900.px-2 {
    background-color: #f1f5f9 !important;
    border-color: #d1d5db !important;
    color: #374151 !important;
}

body.simple-mode .bg-slate-700\/80 {
    background-color: #f1f5f9 !important;
    border-color: #d1d5db !important;
}

body.simple-mode .bg-emerald-500\/10.border-emerald-500\/30 {
    background-color: #d1fae5 !important;
    border-color: #6ee7b7 !important;
}

/* Time badge in booth card */
body.simple-mode .booth-time-badge {
    background-color: #fce7f3 !important;
    border-color: #f9a8d4 !important;
    color: #be185d !important;
}

/* --- Next round footer --- */
body.simple-mode .booth-card .bg-slate-800\/20 {
    background-color: #f8fafc !important;
    border-top-color: #e5e7eb !important;
}

/* --- Fonts --- */
body.simple-mode .font-bold,
body.simple-mode .font-black {
    color: #1a1a1a !important;
}

/* Keep colored text for specific elements */
body.simple-mode .text-pink-400.font-bold,
body.simple-mode .text-pink-300.font-bold {
    color: #be185d !important;
}

body.simple-mode .text-emerald-400.font-bold,
body.simple-mode .text-emerald-300.font-bold {
    color: #047857 !important;
}

body.simple-mode .text-amber-400.font-bold,
body.simple-mode .text-amber-300.font-bold {
    color: #b45309 !important;
}

body.simple-mode .text-blue-400.font-bold {
    color: #1d4ed8 !important;
}

body.simple-mode .text-cyan-400.font-bold {
    color: #0891b2 !important;
}

body.simple-mode .text-indigo-400.font-bold {
    color: #4f46e5 !important;
}

/* --- Animations (reduce for Day Mode) --- */
body.simple-mode *,
body.simple-mode *::before,
body.simple-mode *::after {
    animation-duration: 0s !important;
    transition-duration: 0.15s !important;
}

/* Keep pulse animation for live indicator */
body.simple-mode .animate-pulse-slow {
    animation-duration: 3s !important;
}

/* --- Footer --- */
body.simple-mode footer {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
}

body.simple-mode footer .bg-gradient-to-r {
    -webkit-text-fill-color: inherit !important;
}

/* --- Announcement cards --- */
body.simple-mode .bg-black\/80.border,
body.simple-mode .bg-black\/90.border {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* --- Member filter buttons --- */
body.simple-mode .ring-emerald-500\/50 {
    --tw-ring-color: #6ee7b7 !important;
}

body.simple-mode .ring-white\/10 {
    --tw-ring-color: #d1d5db !important;
}

/* --- Gradient buttons (amber, etc) --- */
body.simple-mode .bg-gradient-to-r.from-amber-500.to-orange-500 {
    background: linear-gradient(to right, #f59e0b, #f97316) !important;
    color: #ffffff !important;
}

body.simple-mode .bg-gradient-to-r.from-amber-500.to-orange-500 * {
    color: #ffffff !important;
}

/* --- Scroll / Backdrop blur reset --- */
body.simple-mode .backdrop-blur-md,
body.simple-mode .backdrop-blur-sm {
    backdrop-filter: none !important;
}

/* --- Table override --- */
body.simple-mode table {
    border-color: #e5e7eb !important;
}

body.simple-mode thead {
    background-color: #f8fafc !important;
}

body.simple-mode tbody tr:hover {
    background-color: #fdf2f8 !important;
}

body.simple-mode .divide-white\/5 > :not(:first-child) {
    border-color: #f1f5f9 !important;
}