/* ============================================================================
 * Verdict palette overrides.
 *
 * Loaded by templates that still inline legacy CSS classes (explore,
 * profile, vote, upload). Patches only the colors; layout, spacing, and
 * typography are inherited from the underlying stylesheet.
 *
 * It works in two passes:
 *   1. Remap the legacy CSS variables (--bg-primary, --text-primary, etc.)
 *      to the new Verdict palette. This automatically updates anything that
 *      already used the variables.
 *   2. Patch the most visible places where legacy CSS hardcoded the old
 *      cyan/teal hex values.
 *
 * Adding new selectors here is the right move whenever a legacy class is
 * bleeding through to a current page.
 * ========================================================================= */

:root,
html,
body {
  /* Dark mode -- map legacy vars to Verdict palette ----------------------- */
  --bg-primary:     #0a0a0c;
  --bg-secondary:   #131316;
  --bg-tertiary:    #1c1c20;
  --text-primary:   #f4f1ec;
  --text-secondary: #d4ff3f;   /* the lime accent */
  --text-accent:    #b3e022;   /* deeper lime for hover/active */
  --border-color:   #2a2a30;
  --hover-bg:       #1c1c20;
  --hover-text:     #d4ff3f;
}

:root.light-mode,
html.light-mode,
body.light-mode {
  --bg-primary:     #f4ede0;        /* aged newsprint cream */
  --bg-secondary:   #ffffff;
  --bg-tertiary:    #ebe2d0;
  --text-primary:   #1a1612;        /* warm ink-black */
  --text-secondary: #0066cc;        /* editorial blue */
  --text-accent:    #004899;
  --border-color:   #d4c8ad;        /* warm tan */
  --hover-bg:       #ebe2d0;
  --hover-text:     #004899;
}

/* -- Hardcoded color patches -----------------------------------------------
 *
 * Legacy stylesheets use #66fcf1 (cyan) and #45a29e (teal) heavily. Where
 * possible, override at the same selector specificity. The :where() wrapper
 * keeps specificity at zero so this file plays nice with future overrides.
 * ------------------------------------------------------------------------ */

/* Cyan -> lime (everything that was cyan-on-dark) */
html:not(.light-mode) :where(
  .topnav-container .leftlinks-container a:hover,
  .topnav-container .rightlinks-container a:hover,
  .subnav a:hover,
  .subnav a.active,
  .subcategories-nav .subcategory-link.active,
  .subcategories-nav .subcategory-link:hover,
  .username-link,
  .upload-button,
  .voted-icon,
  .saved-icon,
  .category-link,
  .subcategory-link,
  .tag,
  .submission a:hover,
  .submission .title:hover,
  a:hover
) {
  color: #d4ff3f;
}

/* Teal -> lime-strong (active states, borders) */
html:not(.light-mode) :where(
  .topnav-container,
  .subnav a.active,
  .submission,
  .upload-button,
  .stat-box,
  .footer
) {
  border-color: #2a2a30;
}

html:not(.light-mode) :where(
  .upload-button,
  .submission:hover,
  button[type="submit"]
) {
  background-color: #d4ff3f !important;
  color: #0a0a0c !important;
  border-color: #d4ff3f !important;
}
html:not(.light-mode) :where(
  .upload-button:hover,
  button[type="submit"]:hover
) {
  background-color: #b3e022 !important;
  color: #0a0a0c !important;
}

/* Old teal-on-cyan gradients in the subnav active pill */
html:not(.light-mode) .subnav a.active {
  background: linear-gradient(135deg, #d4ff3f 0%, #b3e022 100%) !important;
  color: #0a0a0c !important;
  box-shadow: 0 2px 8px rgba(212, 255, 63, 0.25) !important;
}
html:not(.light-mode) .subcategories-nav .subcategory-link.active {
  background: #d4ff3f !important;
  color: #0a0a0c !important;
  border-color: #d4ff3f !important;
}

/* Body / page surface */
html:not(.light-mode) body {
  background-color: #0a0a0c !important;
  color: #f4f1ec !important;
}

/* Cards / surfaces */
html:not(.light-mode) :where(
  .submission,
  .topnav-container,
  .subnav,
  .filter-controls,
  .footer
) {
  background-color: #131316 !important;
}

html:not(.light-mode) :where(
  .stat-box,
  .sort-dropdown,
  .search-container input[type="text"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select
) {
  background-color: #1c1c20 !important;
  color: #f4f1ec !important;
  border-color: #2a2a30 !important;
}

/* Dividers / borders */
html:not(.light-mode) :where(
  .subnav,
  .subcategories-nav,
  .topnav-container,
  .footer,
  .submission
) {
  border-color: #2a2a30 !important;
}

/* Coral for "hot" / danger states (was orange/amber in some places) */
html:not(.light-mode) :where(.alpha-warning-banner) {
  background-color: rgba(255, 92, 88, 0.12) !important;
  border-color: #ff5c58 !important;
  color: #ff5c58 !important;
}

/* Light-mode patches -------------------------------------------------------*/
html.light-mode :where(
  .topnav-container .leftlinks-container a:hover,
  .topnav-container .rightlinks-container a:hover,
  .subnav a:hover,
  .subnav a.active,
  .username-link,
  .voted-icon,
  .saved-icon,
  .category-link,
  .subcategory-link
) {
  color: #0066cc;
}

html.light-mode body {
  background-color: #f4ede0 !important;
  color: #1a1612 !important;
}

html.light-mode :where(
  .submission,
  .topnav-container,
  .subnav,
  .filter-controls,
  .footer
) {
  background-color: #ffffff !important;
  border-color: #d4c8ad !important;
}

html.light-mode :where(
  .stat-box,
  .sort-dropdown,
  .search-container input[type="text"],
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea,
  select
) {
  background-color: #ebe2d0 !important;
  color: #1a1612 !important;
  border-color: #d4c8ad !important;
}

html.light-mode :where(.subnav a.active) {
  background: linear-gradient(135deg, #0066cc 0%, #004899 100%) !important;
  color: #ffffff !important;
}

html.light-mode :where(.upload-button, button[type="submit"]) {
  background-color: #0066cc !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
}
html.light-mode :where(.upload-button:hover, button[type="submit"]:hover) {
  background-color: #004899 !important;
}

/* ============================================================================
 * Explore page specifics. The legacy explore.css hardcodes a few teals and
 * dark-blue-grays that don't go through the CSS variable system. We patch
 * them here so the explore card matches the Verdict palette.
 * ========================================================================= */

/* Card surface (was #1a2332 -- a navy-tinged dark) */
:where(.explore-card) {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

/* Result bars (was #4a8a85 dark teal) */
html:not(.light-mode) :where(.explore-result-bar) {
  background: #d4ff3f !important; /* lime, matches dark palette accent */
}
html.light-mode :where(.explore-result-bar) {
  background: #0066cc !important; /* editorial blue, matches light palette accent */
}

/* "show more" / "show less" description toggle on explore cards.
 * Legacy used color: var(--accent, #5ce1e6) -- the --accent var is never set,
 * so the teal fallback was rendering. Force the Verdict accent. */
html:not(.light-mode) :where(.explore-desc-toggle) {
  color: #d4ff3f !important;
}
html.light-mode :where(.explore-desc-toggle) {
  color: #0066cc !important;
}

/* Filter pill active state (was #45a29e teal) */
html:not(.light-mode) :where(.explore-filter-pill.active) {
  background: #d4ff3f !important;
  color: #0a0a0c !important;
  border-color: #d4ff3f !important;
}
html.light-mode :where(.explore-filter-pill.active) {
  background: #0066cc !important;
  color: #ffffff !important;
  border-color: #0066cc !important;
}

/* Vote buttons (was #45a29e teal) */
html:not(.light-mode) :where(.explore-btn-primary) {
  background: #d4ff3f !important;
  color: #0a0a0c !important;
}
html.light-mode :where(.explore-btn-primary) {
  background: #0066cc !important;
  color: #ffffff !important;
}

/* Slider track and fill (legend-bar fill etc.) -- the var() ones already
 * remap correctly, but the light-mode hardcodes stick. */
html.light-mode :where(.explore-slider-fill, .explore-legend-bar) {
  background: #0066cc !important;
}
html.light-mode :where(.explore-slider::-webkit-slider-thumb, .explore-slider::-moz-range-thumb, .explore-legend-dot) {
  border-color: #0066cc !important;
}

/* Force full opacity on the slider average-fill and legend swatch
 * (legacy 0.45 was tuned for cyan; lime at 0.45 reads as olive #9dbb35
 * instead of #d4ff3f). */
:where(.explore-slider-fill, .explore-legend-bar) {
  opacity: 1 !important;
}

/* ============================================================================
 * Profile page specifics. The legacy profile.css hardcodes teals/cyans on
 * tabs, forms, buttons, and modals.
 * ========================================================================= */

/* Tabs: active state and underline */
html:not(.light-mode) :where(.profile-tabs) {
  border-bottom-color: rgba(212, 255, 63, 0.2) !important;
}
html:not(.light-mode) :where(.profile-tabs .tab-item.active) {
  color: #d4ff3f !important;
  border-bottom-color: #d4ff3f !important;
}
html.light-mode :where(.profile-tabs) {
  border-bottom-color: rgba(0, 102, 204, 0.18) !important;
}
html.light-mode :where(.profile-tabs .tab-item.active) {
  color: #0066cc !important;
  border-bottom-color: #0066cc !important;
}

/* Form surfaces (was #1f2833 navy) */
html:not(.light-mode) :where(.update-form) {
  background-color: var(--color-surface) !important;
}
html.light-mode :where(.update-form) {
  background-color: #ffffff !important;
}

/* Submit / primary buttons inside profile forms */
html:not(.light-mode) :where(.update-form .submit, .modal-btn) {
  background-color: #d4ff3f !important;
  color: #0a0a0c !important;
}
html:not(.light-mode) :where(.update-form .submit:hover, .modal-btn:hover) {
  background-color: #b3e022 !important;
  color: #0a0a0c !important;
}
html.light-mode :where(.update-form .submit, .modal-btn) {
  background-color: #0066cc !important;
  color: #ffffff !important;
}
html.light-mode :where(.update-form .submit:hover, .modal-btn:hover) {
  background-color: #004899 !important;
  color: #ffffff !important;
}

/* Modal chrome */
html:not(.light-mode) :where(.modal-content) {
  background-color: var(--color-surface) !important;
  border: 2px solid var(--color-border-strong) !important;
}
html:not(.light-mode) :where(.modal-header.success) {
  background-color: rgba(212, 255, 63, 0.1) !important;
  border-bottom-color: #d4ff3f !important;
}
html:not(.light-mode) :where(.modal-header.success h2) { color: #d4ff3f !important; }
html:not(.light-mode) :where(.modal-header, .modal-footer) {
  border-color: var(--color-border) !important;
}
html.light-mode :where(.modal-content) {
  background-color: #ffffff !important;
  border: 2px solid var(--color-border-strong) !important;
}
html.light-mode :where(.modal-header.success) {
  background-color: rgba(0, 102, 204, 0.08) !important;
  border-bottom-color: #0066cc !important;
}
html.light-mode :where(.modal-header.success h2) { color: #0066cc !important; }

/* Profile body text colors (legacy used #c5c6c7 / #7a8a99 / #888) */
:where(.profile-tabs .tab-item, .update-form h3, .modal-body) {
  color: var(--color-fg) !important;
}
:where(.update-form label, .profile-tabs .tab-item:not(.active)) {
  color: var(--color-fg-muted) !important;
}

/* ============================================================================
 * Upload page specifics. The legacy upload.css hardcodes cyan/teal on the
 * drop area, file picker button, and preview pane. We use bare selectors
 * (no :where wrapper) so specificity is real and !important always wins.
 * ========================================================================= */

/* Drop area border + drag state */
html:not(.light-mode) #drop-area {
  border-color: #2a2a30 !important;
}
html:not(.light-mode) #drop-area.drag-over {
  border-color: #d4ff3f !important;
  background-color: rgba(212, 255, 63, 0.08) !important;
}
html.light-mode #drop-area {
  border-color: #d4c8ad !important;
  background-color: #ffffff !important;
}
html.light-mode #drop-area.drag-over {
  border-color: #0066cc !important;
  background-color: rgba(0, 102, 204, 0.08) !important;
}

/* File picker button (the "Browse..." inside <input type="file">) */
html:not(.light-mode) #fileinput::file-selector-button {
  background-color: #d4ff3f !important;
  color: #0a0a0c !important;
}
html:not(.light-mode) #fileinput::file-selector-button:hover {
  background-color: #b3e022 !important;
  color: #0a0a0c !important;
}
html.light-mode #fileinput::file-selector-button {
  background-color: #0066cc !important;
  color: #ffffff !important;
}
html.light-mode #fileinput::file-selector-button:hover {
  background-color: #004899 !important;
  color: #ffffff !important;
}

/* Preview card surface */
.preview-card {
  background: #1c1c20 !important;
  border-color: #2a2a30 !important;
}
html.light-mode .preview-card {
  background: #ffffff !important;
  border-color: #d4c8ad !important;
}

/* Preview title -- match v2 page-title look (was #66fcf1 cyan) */
html:not(.light-mode) .preview-title { color: #f4f1ec !important; }
html.light-mode .preview-title       { color: #1a1612 !important; }

/* Preview meta line */
html:not(.light-mode) .preview-meta {
  color: #a3a098 !important;
  border-bottom-color: #2a2a30 !important;
}
html.light-mode .preview-meta {
  color: #5a4f44 !important;
  border-bottom-color: #d4c8ad !important;
}

/* Preview description */
html:not(.light-mode) .preview-description { color: #f4f1ec !important; }
html.light-mode .preview-description       { color: #1a1612 !important; }

/* Preview category pills (Game/Platform, etc.) and tag chips. The legacy
 * .preview-pill is teal, .preview-pill-sub is cyan, .preview-tag is gray. */
html:not(.light-mode) .preview-pill {
  background: rgba(212, 255, 63, 0.12) !important;
  color: #d4ff3f !important;
}
html:not(.light-mode) .preview-pill-sub {
  background: rgba(212, 255, 63, 0.08) !important;
  color: #d4ff3f !important;
}
html:not(.light-mode) .preview-tag {
  background: #1c1c20 !important;
  color: #a3a098 !important;
  border: 1px solid #2a2a30 !important;
}
html.light-mode .preview-pill {
  background: rgba(0, 102, 204, 0.08) !important;
  color: #0066cc !important;
}
html.light-mode .preview-pill-sub {
  background: rgba(0, 102, 204, 0.05) !important;
  color: #0066cc !important;
}
html.light-mode .preview-tag {
  background: #ebe2d0 !important;
  color: #5a4f44 !important;
  border: 1px solid #d4c8ad !important;
}

/* "Show preview" toggle (legacy teal hover) */
html:not(.light-mode) .preview-toggle {
  border-color: #2a2a30 !important;
  color: #a3a098 !important;
}
html:not(.light-mode) .preview-toggle:hover {
  background: #1c1c20 !important;
  color: #f4f1ec !important;
}
html.light-mode .preview-toggle {
  border-color: #d4c8ad !important;
  color: #5a4f44 !important;
}
html.light-mode .preview-toggle:hover {
  background: #ebe2d0 !important;
  color: #1a1612 !important;
}

/* Make sure the .dynamic-button row doesn't clip the focus ring/hover
 * outline of its children. */
.dynamic-button {
  overflow: visible !important;
  flex-wrap: wrap !important;
  margin: 0.5rem 0 0 !important;
}

/* The "Add another option" button has v2 mb-btn classes in markup, but
 * the legacy `.dynamic-button button { display: inline-block }` rule has
 * higher specificity than `.mb-btn`, which makes the SVG and text stack
 * vertically. Force inline-flex layout AND lock down the legacy colors. */
#addInputBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background-color: transparent !important;
  cursor: pointer !important;
  transition: border-color 150ms, color 150ms !important;
}
html:not(.light-mode) #addInputBtn {
  border: 1px solid #2a2a30 !important;
  color: #f4f1ec !important;
}
html:not(.light-mode) #addInputBtn:hover {
  border-color: #d4ff3f !important;
  color: #d4ff3f !important;
}
html.light-mode #addInputBtn {
  border: 1px solid #d4c8ad !important;
  color: #1a1612 !important;
}
html.light-mode #addInputBtn:hover {
  border-color: #0066cc !important;
  color: #0066cc !important;
}

/* The "Remove" button is created by JS without any classes -- we have to
 * fully style it from scratch. Match the mb-btn-ghost dimensions so it
 * looks like the Add button next to it. */
#rmvInputBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 1rem !important;     /* matches mb-btn (py-2 px-4) */
  border-radius: 0.375rem !important;  /* matches mb-btn (rounded-md) */
  font-size: 0.875rem !important;      /* matches mb-btn (text-sm) */
  font-weight: 500 !important;         /* matches mb-btn (font-medium) */
  background-color: transparent !important;
  cursor: pointer !important;
  white-space: nowrap !important;      /* don't wrap the label */
  transition: border-color 150ms, color 150ms !important;
}
html:not(.light-mode) #rmvInputBtn {
  border: 1px solid #2a2a30 !important;
  color: #f4f1ec !important;
}
html:not(.light-mode) #rmvInputBtn:hover {
  border-color: #ff5c58 !important;
  color: #ff5c58 !important;
}
html.light-mode #rmvInputBtn {
  border: 1px solid #d4c8ad !important;
  color: #1a1612 !important;
}
html.light-mode #rmvInputBtn:hover {
  border-color: #c2410c !important;
  color: #c2410c !important;
}

/* Legacy form inputs (#inputEvent, #inputDescription, #inputyoutubelink, etc.)
 * The v2 form already wraps them in mb-input class, but legacy IDs may add
 * borders or focus rings. Force the v2 input look. */
html:not(.light-mode) :is(.upload-form input[type="text"], .upload-form input[type="url"], .upload-form input[type="email"], .upload-form textarea, .upload-form select) {
  background-color: #131316 !important;
  border: 1px solid #2a2a30 !important;
  color: #f4f1ec !important;
  border-radius: 0.375rem !important;
}
html:not(.light-mode) :is(.upload-form input[type="text"]:focus, .upload-form input[type="url"]:focus, .upload-form textarea:focus, .upload-form select:focus) {
  outline: none !important;
  border-color: #d4ff3f !important;
  box-shadow: 0 0 0 2px rgba(212, 255, 63, 0.12) !important;
}
html.light-mode :is(.upload-form input[type="text"], .upload-form input[type="url"], .upload-form input[type="email"], .upload-form textarea, .upload-form select) {
  background-color: #ffffff !important;
  border: 1px solid #d4c8ad !important;
  color: #1a1612 !important;
  border-radius: 0.375rem !important;
}
html.light-mode :is(.upload-form input[type="text"]:focus, .upload-form input[type="url"]:focus, .upload-form textarea:focus, .upload-form select:focus) {
  outline: none !important;
  border-color: #0066cc !important;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12) !important;
}

/* Profile sub-tabs: Saved/Voted/Uploads/Commented submission lists.
 * These are built dynamically by JS using legacy classes, so we patch the
 * classes directly (bg, border, hover, sort buttons, etc.). */

/* Submissions list header */
:where(.submissions-header h2) { color: var(--color-fg) !important; }

/* Sort buttons */
:where(.sort-btn) { color: var(--color-fg-muted) !important; }
:where(.sort-btn:hover) { color: var(--color-fg) !important; }
html:not(.light-mode) :where(.sort-btn.active) { color: #d4ff3f !important; }
html.light-mode :where(.sort-btn.active) { color: #0066cc !important; }

/* The submission cards rendered in Saved/Voted/Uploads/Commented tabs.
 * Legacy: navy bg + teal border. */
:where(.submission, .submission-content > p) {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-fg) !important;
}
:where(.submission:hover) {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border-strong) !important;
}
:where(.submission a) { color: var(--color-fg) !important; }
html:not(.light-mode) :where(.submission:hover a) { color: #d4ff3f !important; }
html.light-mode :where(.submission:hover a) { color: #0066cc !important; }
:where(.submission .action-date) { color: var(--color-fg-subtle) !important; }

/* Result-row text colors -- legacy used #e0e0e0 / #444 ad-hoc */
:where(.explore-results-header, .explore-result-value, .explore-result-label, .explore-slider-label, .explore-slider-value) {
  color: var(--color-fg) !important;
}

/* Various muted greys */
:where(.explore-meta, .explore-username, .explore-relative-time) {
  color: var(--color-fg-muted) !important;
}

/* ============================================================================
 * Vote page specifics. The legacy vote.css bars use the legacy CSS variables
 * which we already remap, but a few bars have hardcoded opacities or
 * light-mode hardcodes that fight the Verdict palette.
 * ========================================================================= */

/* Force full opacity on bar fills. The legacy CSS used opacity: 0.45 on
 * vote-combined-fill (and similar) to soften the cyan. Applied to the
 * Verdict lime, partial opacity blends with the dark surface and reads
 * as olive (#9dbb35) instead of true lime (#d4ff3f). The slider thumb is
 * already visually distinct (white with lime border), so we don't need
 * the average-bar to be muted. */
:where(.vote-combined-fill, .vote-result-bar, .vote-yesno-bar-yes) {
  opacity: 1 !important;
}

/* Preview slider visuals:
 * - The track keeps the legacy 28px height (matches the actual vote page)
 *   so the thumb fits flush inside it.
 * - We just override the background so the track stands out against the
 *   preview card's surface.
 * - The "preview-fill" div is hidden (no fake mid-vote indication).
 */
#previewSliders .vote-combined-track {
  background: #2a2a30 !important;
}
html.light-mode #previewSliders .vote-combined-track {
  background: #d4c8ad !important;
}

#previewSliders .vote-combined-fill.preview-fill {
  display: none !important;
}

/* Legacy upload.css pulls #charCounter up by -10px to fit its own
 * textarea spacing. In v2 that pulls it into the textarea visually. */
#charCounter {
  margin-top: 0.25rem !important;
}

/* Result bars and yes/no fill: explicitly lime in dark, blue in light. The
 * dark-mode legacy var() lookup *should* already resolve correctly, but
 * the light-mode block hardcodes #45a29e which we override here. */
html:not(.light-mode) :where(.vote-result-bar, .vote-yesno-bar-yes, .vote-combined-fill) {
  background: #d4ff3f !important;
}
html.light-mode :where(.vote-result-bar, .vote-yesno-bar-yes, .vote-combined-fill) {
  background: #0066cc !important;
}

/* Slider thumbs (the dot you drag) */
html:not(.light-mode) :where(.vote-combined-slider::-webkit-slider-thumb) {
  border-color: #d4ff3f !important;
}
html:not(.light-mode) :where(.vote-combined-slider::-moz-range-thumb) {
  border-color: #d4ff3f !important;
}
html.light-mode :where(.vote-combined-slider::-webkit-slider-thumb) {
  border-color: #0066cc !important;
}
html.light-mode :where(.vote-combined-slider::-moz-range-thumb) {
  border-color: #0066cc !important;
}

/* Vote percentage text (e.g. "76% Yes") */
html.light-mode :where(.vote-yesno-pct) {
  color: #0066cc !important;
}