/* Phase O — Fider tenant custom_css. Forces dark mode + matches the
   migration-tool's own palette (Tailwind gray-950 / gray-900 surfaces,
   blue-500 accents) so the feedback board feels native. Applied to
   tenants.custom_css on the production fider DB; see k8s/fider-skin/
   apply.sh for the one-shot updater.

   Why CSS-only: Fider stores per-user theme in localStorage and renders
   data-theme="light" by default in SSR. There's no env var or tenant
   column to flip the server-side default. Patching Fider's image just
   for this is heavier than overriding the relevant CSS variables. */

/* ── Force dark surface, ignore the user's data-theme value ─────────── */
body,
body[data-theme="light"],
body[data-theme="dark"],
html {
  background-color: #030712 !important;
  color: #e5e7eb !important;
}

/* ── Re-map Fider's gray/blue scales to our palette ─────────────────── */
body[data-theme="light"],
body[data-theme="dark"] {
  --colors-gray-50:  #030712;
  --colors-gray-100: #111827;
  --colors-gray-200: #1f2937;
  --colors-gray-300: #374151;
  --colors-gray-400: #4b5563;
  --colors-gray-500: #6b7280;
  --colors-gray-600: #9ca3af;
  --colors-gray-700: #d1d5db;
  --colors-gray-800: #e5e7eb;
  --colors-gray-900: #f3f4f6;

  --colors-blue-50:  #0c1a3a;
  --colors-blue-100: #112960;
  --colors-blue-200: #1d3a90;
  --colors-blue-300: #1e4ec0;
  --colors-blue-400: #2563eb;
  --colors-blue-500: #3b82f6;
  --colors-blue-600: #2563eb;
  --colors-blue-700: #1d4ed8;
  --colors-blue-800: #1e40af;
  --colors-blue-900: #1e3a8a;
}

/* ── Surface backgrounds (Fider's whites/cream → our gray-900) ──────── */
.bg-white,
.bg-gray-50,
.bg-gray-100 {
  background-color: #111827 !important;
}

.bg-gray-200 {
  background-color: #1f2937 !important;
}

/* ── Borders ────────────────────────────────────────────────────────── */
.border,
.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: #1f2937 !important;
}

/* ── Text ───────────────────────────────────────────────────────────── */
.text-gray-900,
.text-black,
h1, h2, h3, h4, h5, h6 {
  color: #f3f4f6 !important;
}

.text-gray-700,
.text-gray-800 {
  color: #e5e7eb !important;
}

.text-gray-500,
.text-gray-600 {
  color: #9ca3af !important;
}

.text-gray-400 {
  color: #6b7280 !important;
}

a {
  color: #60a5fa;
}

a:hover {
  color: #93c5fd;
}

/* ── Inputs / textareas / selects ───────────────────────────────────── */
input,
textarea,
select,
.c-input,
.c-textarea,
.c-select {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

input::placeholder,
textarea::placeholder {
  color: #6b7280 !important;
}

/* ── Headers / nav ──────────────────────────────────────────────────── */
.c-header,
header,
nav {
  background-color: #111827 !important;
  border-color: #1f2937 !important;
}

/* ── Primary action button — keep our blue accent ───────────────────── */
.c-button-primary,
button.bg-blue-500,
button.bg-blue-600 {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

.c-button-primary:hover,
button.bg-blue-500:hover,
button.bg-blue-600:hover {
  background-color: #3b82f6 !important;
}

/* ── Cards / posts ──────────────────────────────────────────────────── */
.c-post,
.c-card,
.shadow,
.shadow-sm,
.shadow-md {
  background-color: #111827 !important;
  border-color: #1f2937 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* ── Subtle dividers ────────────────────────────────────────────────── */
hr {
  border-color: #1f2937;
}

/* ── Code/markdown blocks ───────────────────────────────────────────── */
pre, code {
  background-color: #111827 !important;
  color: #d1d5db !important;
  border-color: #1f2937 !important;
}