/* FindMyNyumba - shared dark theme for the dashboards.
   Activated by the `dark` class on <html> (set by fmn-theme.js). Overrides the common Tailwind
   slate/gray/white utilities under html.dark; brand colours (orange/green/blue accents and the
   navy #0f172a) are left untouched.

   Palette note: the base is a warm-neutral dark (not navy), chosen so it (a) harmonises with the
   warm brand orange rather than fighting it, and (b) is distinct from the brand navy #0f172a, so
   navy buttons/panels read as accents instead of blending into the page. Surfaces step gently:
   page < card < fill-1 < fill-2. Higher specificity than single-class Tailwind utilities, so no
   !important needed. */

html.dark { color-scheme: dark; }
html.dark body { background: #14161b; color: #dfe2e8; }

/* ---- surfaces (page < card < fills) ---- */
html.dark .bg-slate-50,
html.dark .bg-gray-50   { background-color: #14161b; }
html.dark .bg-white     { background-color: #1e212a; }
html.dark .bg-slate-100,
html.dark .bg-gray-100  { background-color: #282d38; }
html.dark .bg-slate-200,
html.dark .bg-gray-200  { background-color: #353b48; }

/* ---- text ---- */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-gray-900,
html.dark .text-gray-800 { color: #f1f2f5; }
html.dark .text-slate-700,
html.dark .text-slate-600,
html.dark .text-gray-700,
html.dark .text-gray-600 { color: #c9cdd6; }
html.dark .text-slate-500,
html.dark .text-gray-500 { color: #969cab; }
html.dark .text-slate-400,
html.dark .text-gray-400 { color: #828996; }
html.dark .text-slate-300,
html.dark .text-slate-200,
html.dark .text-gray-300,
html.dark .text-gray-200 { color: #646b78; }

/* ---- borders / dividers ---- */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300,
html.dark .border-gray-50,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-white,
html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #323845; }

/* ---- soft brand badges (very light pastels become subtle dark tints; their text keeps its hue) ---- */
html.dark .bg-orange-50  { background-color: rgba(234,88,12,.17); }
html.dark .bg-amber-50   { background-color: rgba(245,158,11,.17); }
html.dark .bg-green-50,
html.dark .bg-emerald-50 { background-color: rgba(16,185,129,.17); }
html.dark .bg-blue-50    { background-color: rgba(59,130,246,.17); }
html.dark .bg-red-50     { background-color: rgba(239,68,68,.17); }
html.dark .bg-slate-50\/50 { background-color: rgba(20,22,27,.5); }

/* ---- form controls ---- */
html.dark input,
html.dark textarea,
html.dark select { background-color: #1e212a; color: #e6e8ec; border-color: #353b48; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #6a717d; }

/* ---- hover states that would otherwise flash light ---- */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-white:hover  { background-color: #282d38; }
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-gray-100:hover { background-color: #353b48; }
html.dark .hover\:text-slate-900:hover,
html.dark .hover\:text-gray-900:hover { color: #f1f2f5; }

/* ---- softer card depth in dark ---- */
html.dark .shadow,
html.dark .shadow-sm,
html.dark .shadow-md,
html.dark .shadow-lg { box-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); }

/* ---- the floating theme toggle button (present in both themes) ---- */
.fmn-theme-btn {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid #e2e8f0; background: #fff; color: #0f172a;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  transition: background .15s, color .15s, transform .1s;
}
.fmn-theme-btn:hover { transform: translateY(-1px); }
html.dark .fmn-theme-btn { background: #1e212a; border-color: #353b48; color: #fbbf24; box-shadow: 0 4px 14px rgba(0,0,0,.5); }