/* ==========================================================================
   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;
  }
}