/* ==========================================================================
   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 ----------------------------------------------------------
   Fider's dark styling (including its own text colors) is driven entirely
   by the OS/browser prefers-color-scheme — its own data-theme toggle does
   NOT reliably repaint text. An earlier version of this stylesheet also
   keyed background color off [data-theme="dark"], which caused a navy
   background with unmodified (light-mode/dark-text) text whenever the
   toggle disagreed with the OS preference (seen on Firefox). Everything
   here is scoped to the media query only, and text colors are set
   explicitly so contrast never depends on Fider's own toggle logic.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  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; }

  .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;
  }
}