/* ==========================================================================
   DayFrame Feedback — Fider custom theme
   Brand: Powder Blue #4DB8FF · Navy #1D2942 · Slate #3A455E
   Typeface: Segoe UI Variable (falls back to system UI stack)
   ========================================================================== */

:root {
  --df-blue: #4DB8FF;
  --df-blue-hover: #2B9FED;
  --df-navy: #1D2942;
  --df-slate: #3A455E;
}

/* ---- Typography -------------------------------------------------------- */
body, .c-header, .c-button, .c-input, textarea, .c-modal-content, .c-menu {
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
    Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- Header (always navy, matches the tile-rail brand color) -----------
   .c-header__container styles an inner wrapper; the actual full-width bar
   is an outer div that only carries Fider's own "bg-white" utility class
   (conditionally darkened by Fider itself under prefers-color-scheme, so
   it happened to look right in Chrome but rendered literally white on
   Firefox). Target it directly via its known child so the header is
   reliably navy regardless of browser or OS theme. */
.c-header__container,
.bg-white:has(> .c-menu) {
  background-color: var(--df-navy) !important;
  border-bottom: 1px solid var(--df-slate);
}
.c-header__brand, .c-header__brand * {
  color: #ffffff !important;
}
.c-header__nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
}
.c-header__nav-link:hover {
  color: #ffffff !important;
}
.c-header__nav-link--active {
  color: var(--df-blue) !important;
  border-color: var(--df-blue) !important;
}
.c-header__actions .c-dropdown__handle,
.c-header__actions svg {
  color: rgba(255, 255, 255, 0.85) !important;
}
.c-header__moderation {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Fider's theme toggle sets a data-theme attribute, but none of Fider's
   own component styling (including its own text colors) actually responds
   to it - only the browser/OS prefers-color-scheme does. Clicking the
   toggle has no visible effect, which is misleading, so hide it. */
.c-header__actions .c-themeswitcher {
  display: none !important;
}

/* ---- Accent color used across the app (welcome emphasis, links) -------- */
.header-emphasis {
  color: var(--df-blue) !important;
}
.c-powered,
.c-powered a {
  color: var(--df-blue) !important;
}

/* ---- Buttons ------------------------------------------------------------ */
.c-button--primary {
  background-color: var(--df-blue) !important;
  border-color: var(--df-blue) !important;
  color: var(--df-navy) !important;
  font-weight: 600 !important;
}
.c-button--primary:hover {
  background-color: var(--df-blue-hover) !important;
  border-color: var(--df-blue-hover) !important;
}

/* ---- Inputs / editor ----------------------------------------------------*/
.c-input:focus,
textarea:focus {
  border-color: var(--df-blue) !important;
  box-shadow: 0 0 0 2px rgba(77, 184, 255, 0.35) !important;
}
.c-editor-toolbar {
  border-color: var(--df-slate) !important;
}

/* ---- Light theme (default) ---------------------------------------------*/
.p-home__add-idea-btn:hover {
  border-color: var(--df-blue) !important;
}

/* ---- Dark theme ----------------------------------------------------------
   CORRECTION (measured in a browser, 2026-09-10): an earlier version of this
   comment claimed Fider's dark styling is driven by prefers-color-scheme and
   that its data-theme toggle does not repaint text. Both are false. Fider's
   stylesheets contain ZERO prefers-color-scheme rules and 105 rules keyed on
   body[data-theme=dark]; setting that attribute repaints the whole palette
   correctly. Pages always serve data-theme="light", which is why nothing
   appeared to happen.

   Because that premise was wrong, everything below hand-paints an
   enumerated list of surfaces inside the media query, and any surface not
   on the list keeps Fider's LIGHT token values — which is what produced 44
   unreadable white <code> chips on post 19. The token block that follows
   fixes the cause; the per-class rules below it are now largely redundant
   and should be pruned in a separate pass.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
/* ---- Fider dark tokens ---------------------------------------------------
   Fider ships NO prefers-color-scheme rules at all; its entire palette is
   defined on body[data-theme=light|dark]. Anonymous page loads always render
   data-theme="light", so every surface the hand-written rules below do not
   name keeps its light value (confirmed: 44 white <code> chips on post 19).
   Flip the tokens themselves and the whole app follows. Selector matches
   body[data-theme] specificity and loads after main.css, so it wins.
   -------------------------------------------------------------------- */
  body[data-theme] {
    --colors-gray-100: #2e2e2e;
    --colors-gray-200: #3a3a3a;
    --colors-gray-300: #474747;
    --colors-gray-400: #545454;
    --colors-gray-500: #616161;
    --colors-gray-600: #838383;
    --colors-gray-700: #a0a0a0;
    --colors-gray-800: #c1c1c1;
    --colors-gray-900: #fefefe;
    --colors-gray-50: #1a1a1a;
    --colors-green-100: #0a3d1a;
    --colors-green-200: #14532d;
    --colors-green-300: #166534;
    --colors-green-400: #15803d;
    --colors-green-500: #22c55e;
    --colors-green-600: #4ade80;
    --colors-green-700: #86efac;
    --colors-green-800: #bbf7d0;
    --colors-green-900: #dcfce7;
    --colors-green-50: #0a3d1a;
    --colors-yellow-100: #4a2c0a;
    --colors-yellow-200: #78350f;
    --colors-yellow-300: #92400e;
    --colors-yellow-400: #b45309;
    --colors-yellow-500: #d97706;
    --colors-yellow-600: #f59e0b;
    --colors-yellow-700: #fbbf24;
    --colors-yellow-800: #fde68a;
    --colors-yellow-900: #fef3c7;
    --colors-yellow-50: #4a2c0a;
    --colors-blue-100: #11263a;
    --colors-blue-200: #001a33;
    --colors-blue-300: #00306a;
    --colors-blue-400: #0440a3;
    --colors-blue-500: #124edb;
    --colors-blue-600: #3669ff;
    --colors-blue-700: #7091ff;
    --colors-blue-800: #b0c1ff;
    --colors-blue-900: #e0e4ff;
    --colors-blue-50: #11263a;
    --colors-red-100: #4a1a1a;
    --colors-red-200: #7f1d1d;
    --colors-red-300: #991b1b;
    --colors-red-400: #b91c1c;
    --colors-red-500: #dc2626;
    --colors-red-600: #ef4444;
    --colors-red-700: #f87171;
    --colors-red-800: #fca5a5;
    --colors-red-900: #fecaca;
    --colors-red-50: #4a1a1a;
    --colors-primary-light: var(--primary-color-light, #9eacfc);
    --colors-primary-base: var(--primary-color, #7aa8ff);
    --colors-primary-dark: var(--primary-color-dark, #6893e3);
    --colors-white: #1a1a1a;
    --colors-black: #d3d3d3;
  }
  /* Two remaining dark-on-dark spots the token flip doesn't reach: both use
     hardcoded Fider utility colors rather than a token. */
  .p-show-post__discussion-count {
    color: #7fd0ff !important;
  }
  .c-editor-button-text {
    color: #c7ccd6 !important;
  }


  html, body, .page {
    background-color: var(--df-navy) !important;
  }
  .c-modal-content,
  .p-home__add-idea-btn,
  .c-share-feedback,
  .c-input,
  textarea {
    background-color: var(--df-slate) !important;
  }
  .p-home__welcome-title,
  .p-home__welcome-title * {
    color: #ffffff !important;
  }
  .p-home__welcome-body,
  .c-markdown,
  .text-muted {
    color: #c7ccd6 !important;
  }
  .c-hint {
    background-color: var(--df-slate) !important;
    color: #d7e6ff !important;
  }
  /* re-assert after the .p-home__welcome-title * rule above so the
     accent span doesn't get swept into the plain-white override */
  .header-emphasis {
    color: var(--df-blue) !important;
  }

  /* Post-list cards, filter/sort buttons, and the search box: like the
     header wrapper, Fider's own dark-mode coverage for these classes is
     unreliable across browsers (confirmed white-on-navy on at least one
     real device despite matching prefers-color-scheme: dark) even though
     they render correctly dark in some sessions. Force them explicitly
     rather than trust Fider's own handling, same fix as the header. */
  .c-posts-container__post {
    background-color: var(--df-slate) !important;
  }
  .c-posts-container__post-title {
    color: #ffffff !important;
  }
  .c-posts-container__postdescription,
  .c-posts-container__postdescription * {
    color: #c7ccd6 !important;
  }
  .c-post-filter-btn,
  .c-post-sort-btn {
    background-color: var(--df-slate) !important;
    color: #ffffff !important;
    border-color: var(--df-slate) !important;
  }
  .c-posts-container__search-col .c-input,
  .c-posts-container__search-col input {
    background-color: var(--df-slate) !important;
    color: #ffffff !important;
  }

  /* Vote count + "Vote"/"Voted!" text at the bottom of each card: low-contrast
     gray-on-gray against the slate card background. */
  .c-posts-container__post-votes {
    color: #e4e8f0 !important;
  }
  .c-posts-container__post-votes .text-gray-700 {
    color: #c7ccd6 !important;
  }
  .c-posts-container__post-votes .text-blue-600 {
    color: var(--df-blue) !important;
  }

  /* Individual post detail page: main card, Voters card, comment editor card —
     same Fider dark-mode-coverage gap as the list-page cards above. Backgrounds alone were not
     enough: confirmed on a real device that Fider's own text coloring for this page is *also*
     inconsistently applied, leaving dark-on-dark near-invisible text even though the background
     override above was working. Every text element in this section is now colored explicitly
     rather than left to Fider's own (unreliable) dark-mode text handling. */
  .p-show-post__post-card,
  .c-votes-panel,
  .c-comment-input-card,
  .c-response-details__card {
    background-color: var(--df-slate) !important;
  }
  .c-response-details__card .c-username,
  .c-response-details__card .c-username * {
    color: #7aa8ff !important;
  }
  .c-response-details__inner {
    color: #c7ccd6 !important;
  }

  /* text-gray-900 is a hardcoded Fider utility class (dark text meant for a light background) used
     unconditionally by several headings on this page ("Voters", "Discussion") — it does not
     respond to dark mode at all, so it must always be overridden here. */
  .text-gray-900 {
    color: #ffffff !important;
  }

  .p-show-post__title,
  .p-show-post__title * {
    color: #ffffff !important;
  }
  .p-show-post__meta,
  .p-show-post__meta * {
    color: #c7ccd6 !important;
  }
  .p-show-post__description-section,
  .p-show-post__description-section * {
    color: #e4e8f0 !important;
  }
  /* "1 Vote" line under the vote button: Fider's own default gray text color here
     (rgb(193,193,193)) reads fine in some sessions but has come back too dark to read on a real
     device — same coverage gap as everything else on this page, force it explicitly. Scoped to
     the text spans specifically (not `.p-show-post__vote-section *`) because the "Voted!" button
     lives in the same container and must keep its own navy-on-blue text color. */
  .p-show-post__vote-section .text-semibold {
    color: #e4e8f0 !important;
  }
  /* Status badge (OPEN/PLANNED/STARTED/COMPLETED/DECLINED/DUPLICATE): uses light-mode
     Tailwind-style bg-*-100/text-*-700 pairs that Fider's own dark mode doesn't reliably
     repaint (confirmed white-pill-on-navy on a real device) — same coverage gap as the rest of
     this page. Override every hue pair with a low-alpha tinted background over the slate card
     so each status stays visually distinct instead of collapsing to one forced color. */
  [class*="bg-blue-100"]   { background-color: rgba(77, 184, 255, 0.18) !important; }
  [class*="bg-green-100"]  { background-color: rgba(74, 222, 128, 0.18) !important; }
  [class*="bg-red-100"]    { background-color: rgba(248, 113, 113, 0.18) !important; }
  [class*="bg-purple-100"] { background-color: rgba(192, 132, 252, 0.18) !important; }
  [class*="bg-yellow-100"] { background-color: rgba(250, 204, 21, 0.18) !important; }
  [class*="bg-gray-100"]   { background-color: rgba(203, 213, 225, 0.18) !important; }

  [class*="text-blue-700"]   { color: #7fd0ff !important; }
  [class*="text-green-700"]  { color: #4ade80 !important; }
  [class*="text-red-700"]    { color: #f87171 !important; }
  [class*="text-purple-700"] { color: #c084fc !important; }
  [class*="text-yellow-700"] { color: #facc15 !important; }
  [class*="text-gray-700"]   { color: #cbd5e1 !important; }

  /* The -700 pairs above miss the Completed, Declined and Duplicate pills: those
     three statuses use the -800 text hue, not -700 (read out of Fider's common.js
     status->color map, then confirmed in the DOM on /roadmap — the Completed pill
     carries `text-green-800 bg-green-100 border-green-400`). Measured on the live
     roadmap 2026-09-11: with the page serving data-theme="light", `.text-green-800`
     computes to rgb(22,101,52) over the rgb(37,74,77) tinted pill, roughly 1.4:1 —
     the near-invisible dark-green-on-navy "Completed" label. Same hue family as the
     -700 block so each status keeps its identity; #4ade80 on that pill measures
     5.6:1. Also pinned for data-theme="dark" sessions, where Fider would otherwise
     paint a third, different green (#bbf7d0). */
  [class*="text-blue-800"]   { color: #7fd0ff !important; }
  [class*="text-green-800"]  { color: #4ade80 !important; }
  [class*="text-red-800"]    { color: #f87171 !important; }
  [class*="text-purple-800"] { color: #c084fc !important; }
  [class*="text-yellow-800"] { color: #facc15 !important; }
  [class*="text-gray-800"]   { color: #cbd5e1 !important; }

  .c-action-button {
    color: #c7ccd6 !important;
  }
  .c-action-button:hover {
    color: #ffffff !important;
  }
  .c-action-button--danger {
    color: #ff8080 !important;
  }

  /* Comment editor: card background above was confirmed working, but the toolbar/editor area
     rendered fully white-on-black on a real device — force every layer explicitly rather than
     rely on inheriting the card's background-color. */
  .c-comment-input-card .c-form,
  .c-comment-input-card .c-editor-toolbar,
  .c-comment-input-card .tiptap {
    background-color: var(--df-slate) !important;
  }
  .c-comment-input-card .c-editor-toolbar svg {
    color: #c7ccd6 !important;
  }
  .c-comment-input-card .tiptap,
  .c-comment-input-card .tiptap p {
    color: #ffffff !important;
  }
  .c-comment-input-card .tiptap p.is-editor-empty::before {
    color: #8891a3 !important;
  }

  /* Admin side menu (/admin and every settings sub-page). Its container carries
     Fider's `bg-white` utility class, and those utilities are hardcoded per theme
     (`body[data-theme=light] .bg-white{background-color:#fff}`) rather than reading
     a token, so the token flip above never reaches it: the panel stays literally
     #fff while `.c-side-menu__item` correctly takes the flipped --colors-gray-900
     (#fefefe). Measured on /admin 2026-09-11 — white on white at 1.01:1, every menu
     label invisible. The active item was the inverse problem: it reads
     --colors-white, which the flip sets to #1a1a1a, so it rendered as a near-black
     bar on the white panel. Give the panel the same slate surface as the other
     cards and recess the active row to navy with the brand accent. Measured after:
     9.5:1 for idle labels, 6.6:1 for the active one. */
  .c-side-menu.bg-white {
    background-color: var(--df-slate) !important;
  }
  .c-side-menu__item {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  }
  .c-side-menu__item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
  }
  .c-side-menu__item--active {
    background-color: var(--df-navy) !important;
    color: var(--df-blue) !important;
    border-inline-start-color: var(--df-blue) !important;
  }
}