/* Servicefry sitewide dark theme - toggled via body.dark-mode class.
   Overrides the most common Tailwind utility classes used across customer,
   technician, and admin pages so dark mode applies broadly without needing
   to rewrite every element with dark: variants. */

body.dark-mode {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Backgrounds */
body.dark-mode .bg-white { background-color: #1e293b !important; }
body.dark-mode .bg-gray-50 { background-color: #1e293b !important; }
body.dark-mode .bg-gray-100 { background-color: #273548 !important; }
body.dark-mode .bg-teal-50 { background-color: #0f2e28 !important; }
body.dark-mode .bg-red-50 { background-color: #3f1d1d !important; }
body.dark-mode .bg-amber-50 { background-color: #3f2f12 !important; }
body.dark-mode .bg-emerald-50 { background-color: #0f3328 !important; }
body.dark-mode .bg-green-50 { background-color: #0f3328 !important; }
body.dark-mode .bg-gray-200 { background-color: #334155 !important; }

/* Borders */
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-50 { border-color: #334155 !important; }

/* Text */
body.dark-mode .text-gray-900 { color: #f1f5f9 !important; }
body.dark-mode .text-gray-800 { color: #e2e8f0 !important; }
body.dark-mode .text-gray-700 { color: #cbd5e1 !important; }
body.dark-mode .text-gray-600 { color: #94a3b8 !important; }
body.dark-mode .text-gray-500 { color: #94a3b8 !important; }
body.dark-mode .text-gray-400 { color: #64748b !important; }
body.dark-mode .text-gray-300 { color: #475569 !important; }

/* Shadows look wrong/too-light on dark backgrounds - soften them */
body.dark-mode .shadow-sm,
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-teal-100,
body.dark-mode .shadow-gray-200,
body.dark-mode .shadow-emerald-100 {
    box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
}

/* Inputs */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder { color: #64748b !important; }
body.dark-mode input:disabled,
body.dark-mode input[readonly] {
    background-color: #273548 !important;
    color: #94a3b8 !important;
}

/* Modal popups (SFModal) stay readable */
body.dark-mode .sf-modal-box { background-color: #1e293b !important; color: #e2e8f0 !important; }
body.dark-mode .sf-modal-msg { color: #f1f5f9 !important; }
body.dark-mode .sf-modal-btn-secondary { background-color: #334155 !important; color: #e2e8f0 !important; }

/* Bottom nav / drawer */
body.dark-mode nav.fixed { background-color: #1e293b !important; border-color: #334155 !important; }

/* Keep brand-color elements (buttons, badges using var(--color-primary) etc.) as-is - they already
   have enough contrast against the dark background. */