/* ตั้งค่า Font และพื้นฐาน */
* {
    font-family: 'Sarabun', 'Inter', system-ui, sans-serif;
    box-sizing: border-box;
}

body {
    background: #f8fafc;
    color: #1e293b;
    margin: 0;
}

html.dark body {
    background: #020617;
    color: #e2e8f0;
}

html.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #334155;
    border-color: #0f172a;
}

html.dark .bg-white,
html.dark .bg-white\/80,
html.dark .bg-white\/90,
html.dark .bg-white\/50 {
    background-color: rgba(15, 23, 42, 0.92) !important;
}

html.dark .bg-slate-50,
html.dark .bg-slate-50\/50 {
    background-color: #0f172a !important;
}

html.dark .bg-slate-100 {
    background-color: #1e293b !important;
}

html.dark .text-slate-900,
html.dark .text-slate-800 {
    color: #f8fafc !important;
}

html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-500,
html.dark .text-slate-400 {
    color: #94a3b8 !important;
}

html.dark .border-slate-50,
html.dark .border-slate-100,
html.dark .border-slate-200 {
    border-color: #334155 !important;
}

html.dark .shadow-sm,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7) !important;
}

html.dark input,
html.dark textarea,
html.dark select {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

html.dark table thead tr {
    background-color: #0f172a !important;
}

html.dark #mobileMenu,
html.dark nav,
html.dark footer,
html.dark header,
html.dark .variety-card,
html.dark .contact-card,
html.dark #variety-modal > div,
html.dark .toast-item {
    color: #e2e8f0;
}

html.dark #dropzone:hover {
    border-color: #6366f1;
    background-color: #172554;
}

html.dark .drag-over {
    border-color: #34d399 !important;
    background-color: rgba(16, 185, 129, 0.12) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}

/* --- Scrollbar Customization --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- Animations --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out forwards;
}

/* สถานะตอนลากไฟล์มาวาง (Drag & Drop) */
.drag-over {
    border-color: #10b981 !important; /* Emerald 500 */
    background-color: #f0fdf4 !important; /* Emerald 50 */
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* ปรับแต่ง Progress Bar ของผลลัพธ์ */
#result-confidence-bar {
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ปรับแต่ง Dropzone --- */
#dropzone {
    transition: all 0.2s ease-in-out;
}

#dropzone:hover {
    border-color: #94a3b8;
    background-color: #f1f5f9;
}

/* --- Toast Notification (สำหรับแสดงการแจ้งเตือน) --- */
@keyframes toastIn {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

.toast-item {
    animation: toastIn 0.3s ease-out forwards;
}