/* ===== Dark Mode (RTL) =====
   Activated by .dark class on <html>. Toggled from the header icon (assets/js/theme.js). */

/* Base surfaces */
html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}
html.dark .bg-white { background-color: #1e293b; }
html.dark .bg-slate-50 { background-color: #0f172a; }
html.dark .bg-slate-100 { background-color: #1e293b; }
html.dark .bg-slate-200 { background-color: #334155; }
html.dark .bg-slate-300 { background-color: #475569; }
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-200:hover { background-color: #334155; }

/* Header: white/90 -> dark glass */
html.dark body > header {
    background-color: rgba(30, 41, 59, 0.9);
    border-bottom-color: #334155;
}

/* Text */
html.dark .text-slate-800,
html.dark .text-slate-700 { color: #e2e8f0; }
html.dark .text-slate-600 { color: #cbd5e1; }
html.dark .text-slate-500 { color: #cbd5e1; }
html.dark .text-slate-400 { color: #94a3b8; }
html.dark .text-slate-300 { color: #64748b; }
html.dark .text-slate-900 { color: #f1f5f9; }

/* Borders */
html.dark .border-slate-100 { border-color: #334155; }
html.dark .border-slate-200 { border-color: #475569; }
html.dark .hover\:border-slate-200:hover { border-color: #475569; }

/* Theme (emerald) accent adjustments for dark backgrounds */
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.25); }
html.dark .bg-emerald-200 { background-color: rgba(16, 185, 129, 0.35); }
html.dark .hover\:bg-emerald-100:hover { background-color: rgba(16, 185, 129, 0.3); }
html.dark .text-emerald-600,
html.dark .text-emerald-700 { color: #34d399; }
html.dark .hover\:text-emerald-600:hover { color: #34d399; }
html.dark .shadow-emerald-200 {
    box-shadow: 0 10px 15px -3px rgba(2, 6, 23, 0.5), 0 4px 6px -4px rgba(2, 6, 23, 0.5);
}

/* Form controls */
html.dark input,
html.dark select,
html.dark textarea { color-scheme: dark; }
html.dark .focus\:ring-emerald-100:focus { --tw-ring-color: rgba(16, 185, 129, 0.35); }

/* Product detail gallery gradient */
html.dark .product-grad { background: linear-gradient(135deg, #1e293b, #0f172a); }

/* Skeleton loader */
html.dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #1e293b 37%, #334155 63%);
    background-size: 400% 100%;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar-track { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Theme toggle icons: sun (light) / moon (dark) */
.theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: none; }
html.dark .theme-icon-moon { display: block; }