/**
 * theme-dark.css
 * ────────────────────────────────────────────────────────────────
 * এই সাইটের সব পেজ Tailwind CDN দিয়ে বানানো এবং সরাসরি
 * bg-white / text-gray-700 / border-gray-200 এই জাতীয় class ব্যবহার করে —
 * প্রতিটা page-এ dark: variant বসানো বাস্তবসম্মত না।
 *
 * তাই এখানে একটাই জায়গায় এই common utility class গুলোকে override
 * করা হয়েছে যখন <html data-theme="dark"> থাকে। ফলে পুরনো এবং নতুন —
 * দুই ধরনের পেজেই dark mode আপনাআপনি কাজ করবে, কোনো markup change
 * ছাড়াই।
 *
 * নতুন কালার ব্যবহার করলে (যেমন bg-emerald-50) এখানে একটা লাইন
 * যোগ করে দিন — pattern একই থাকবে।
 * ────────────────────────────────────────────────────────────────
 */

html[data-theme="dark"] {
    color-scheme: dark;
}

/* Base */
html[data-theme="dark"] body,
html[data-theme="dark"] .bg-gray-50 {
    background-color: var(--surface-alt) !important;
}

/* Surfaces (cards, header, dropdowns, modals) */
html[data-theme="dark"] .bg-white {
    background-color: var(--surface) !important;
}
html[data-theme="dark"] .bg-gray-100 {
    background-color: #263449 !important;
}

/* Text */
html[data-theme="dark"] .text-gray-900 { color: var(--text-primary) !important; }
html[data-theme="dark"] .text-gray-700 { color: var(--text-secondary) !important; }
html[data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
html[data-theme="dark"] .text-gray-500 { color: var(--text-muted) !important; }
html[data-theme="dark"] .text-gray-400 { color: var(--text-muted) !important; }

/* Borders */
html[data-theme="dark"] .border-gray-200 { border-color: var(--surface-border) !important; }
html[data-theme="dark"] .border-gray-800 { border-color: #1e293b !important; }
html[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--surface-border) !important; }

/* Brand / indigo accents — hue kept, just tuned for dark backgrounds */
html[data-theme="dark"] .bg-indigo-50  { background-color: rgba(99,102,241,.15) !important; }
html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,.22) !important; }
html[data-theme="dark"] .text-indigo-700,
html[data-theme="dark"] .text-indigo-800 { color: #a5b4fc !important; }
html[data-theme="dark"] .text-indigo-500,
html[data-theme="dark"] .text-indigo-600 { color: #818cf8 !important; }

/* Hover states that assumed a light bg */
html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #263449 !important; }
html[data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,.18) !important; }
html[data-theme="dark"] .hover\:text-gray-900:hover { color: var(--text-primary) !important; }

/* Shadows read too harsh on dark surfaces */
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-md {
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3) !important;
}

/* Inputs / forms */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--surface-alt) !important;
    color: var(--text-primary) !important;
    border-color: var(--surface-border) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Scrollbar (webkit) to match */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-alt); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }