/* ================== 1. GOOGLE FONTS & BASE ================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

body { font-family: 'Inter', sans-serif; background-color: #0b1121; }
th { cursor: pointer; transition: color 0.2s; user-select: none; }
th:hover { color: #60a5fa; }

/* ================== 2. UI COMPONENTS ================== */
.modal-bg { background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(4px); }
.glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); }

/* Custom Scrollbar (Dark Theme) */
::-webkit-scrollbar, .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, .custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb, .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover, .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Tooltip */
[title]:hover::after {
    content: attr(title); position: absolute; background: #1e293b; color: #fff; padding: 4px 8px;
    border-radius: 6px; font-size: 11px; white-space: nowrap; z-index: 60; margin-top: 25px;
    border: 1px solid #475569; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); pointer-events: none;
}

/* ================== 3. TABLE STICKY COLUMNS ================== */
.sticky-col { background-color: #0f172a; }
.sticky-left { position: sticky; left: 0; z-index: 20; border-right: 1px solid #334155; }
.sticky-right { position: sticky; right: 0; z-index: 20; border-left: 1px solid #334155; }
.group:hover .sticky-col { background-color: #1e293b !important; }
thead th.sticky-col { background-color: #0f172a; z-index: 50 !important; }

/* Score Column Highlight (Dark Theme) */
.score-col { background-color: rgba(30, 41, 59, 0.8) !important; border-left: 1px solid rgba(255,255,255,0.05); border-right: 1px solid rgba(255,255,255,0.05); }

/* Logo Handling */
.theme-logo-light { display: none !important; }


/* ================== 4. LIGHT THEME OVERRIDES ================== */
html.light-theme body { background-color: #f8fafc !important; color: #0f172a !important; }

/* Logos Light Mode */
html.light-theme .theme-logo-dark { display: none !important; }
html.light-theme .theme-logo-light { display: block !important; }

/* Panels & Tables */
html.light-theme .glass, html.light-theme .glass-panel { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important; }
html.light-theme table tbody tr { background-color: #ffffff !important; border-color: #f1f5f9 !important; }
html.light-theme table tbody tr:hover, html.light-theme .group:hover .sticky-col { background-color: #f8fafc !important; }
html.light-theme thead, html.light-theme thead th, html.light-theme thead th.sticky-col { background-color: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; }
html.light-theme .sticky-col, html.light-theme .sticky-left, html.light-theme .sticky-right { background-color: #ffffff !important; border-color: #f1f5f9 !important; }

/* Score Column Highlight (Light Theme) */
html.light-theme .score-col { background-color: #e2e8f0 !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
html.light-theme table tbody tr:hover .score-col { background-color: #cbd5e1 !important; }

/* 🟢 Specific Elements & Drawer (ดักจับ Opacity ให้ครอบคลุมทุกเฉด) */
html.light-theme .bg-slate-900, 
html.light-theme .bg-slate-900\/90, 
html.light-theme .bg-slate-900\/80,
html.light-theme .bg-slate-900\/50,
html.light-theme .bg-slate-950\/40,
html.light-theme .bg-slate-950\/50 { 
    background-color: #ffffff !important; border-color: #e2e8f0 !important; 
}

html.light-theme .bg-slate-800, 
html.light-theme .bg-slate-800\/80, 
html.light-theme .bg-slate-800\/60, 
html.light-theme .bg-slate-800\/50, 
html.light-theme .bg-slate-800\/40, 
html.light-theme .bg-slate-800\/30, 
html.light-theme .bg-slate-700 {
    background-color: #f1f5f9 !important; color: #1e293b !important; border-color: #e2e8f0 !important;
}

html.light-theme .border-slate-600, 
html.light-theme .border-slate-700, 
html.light-theme .border-slate-700\/50, 
html.light-theme .border-slate-700\/60,
html.light-theme .border-slate-700\/80,
html.light-theme .border-slate-800 { 
    border-color: #e2e8f0 !important; 
}

html.light-theme #sideDrawer { background-color: #ffffff !important; border-right: 1px solid #e2e8f0 !important; }

/* Colors */
html.light-theme .text-white, html.light-theme .text-slate-200, html.light-theme .text-slate-300 { color: #0f172a !important; }
html.light-theme .text-slate-400, html.light-theme .text-slate-500 { color: #64748b !important; }

/* บังคับสีขาวในปุ่ม/Badge */
html.light-theme button.btn-primary, html.light-theme button.btn-white-text, html.light-theme span.badge-white-text,
html.light-theme button.bg-emerald-600, html.light-theme button.bg-blue-600, html.light-theme button.bg-red-600,
html.light-theme span.bg-emerald-500\/80, html.light-theme span.bg-red-500\/80, html.light-theme span.bg-slate-500\/80, html.light-theme .force-white { 
    color: #ffffff !important; 
}

/* Inputs & Scrollbar Light */
html.light-theme input, html.light-theme select { background-color: #f8fafc !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
html.light-theme ::-webkit-scrollbar-track, html.light-theme .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9 !important; }
html.light-theme ::-webkit-scrollbar-thumb, html.light-theme .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
html.light-theme ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }

/* Fix Tailwind Arbitrary */
html.light-theme .bg-\[\#0b1121\], html.light-theme .bg-\[\#0f172a\] { background-color: #ffffff !important; }