/**
 * ThinkAI Issues portal theme for Fider v0.33.
 * Tokens mirror thinkai-platform/src/index.css (+ fonts.css / tailwind).
 *
 * Apply: node scripts/apply-branding.mjs
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=Space+Grotesk:wght@500;600;700&display=swap");

/* ── Platform tokens (light) — hsl from thinkai-platform :root ── */
[data-theme="light"],
:root {
  --thinkai-bg: hsl(220 20% 97%);
  --thinkai-fg: hsl(222 47% 11%);
  --thinkai-card: hsl(0 0% 100%);
  --thinkai-muted: hsl(220 9% 42%);
  --thinkai-muted-bg: hsl(220 14% 96%);
  --thinkai-border: hsl(220 13% 91%);
  --thinkai-primary: hsl(258 62% 54%);
  --thinkai-primary-hover: hsl(258 62% 46%);
  --thinkai-primary-fg: hsl(0 0% 100%);
  --thinkai-accent: hsl(258 62% 97%);
  --thinkai-accent-fg: hsl(258 62% 40%);
  --thinkai-radius: 0.625rem;
  --thinkai-radius-lg: 0.75rem;
  --thinkai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --thinkai-shadow-md: 0 4px 16px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --thinkai-shadow-lg: 0 12px 40px -8px rgb(0 0 0 / 0.1), 0 4px 12px -4px rgb(0 0 0 / 0.04);
  --thinkai-font: "DM Sans", system-ui, -apple-system, sans-serif;
  --thinkai-font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --thinkai-focus: 0 0 0 3px hsl(258 62% 54% / 0.35);

  --primary-color: hsl(258 62% 54%);
  --primary-color-light: hsl(258 62% 97%);
  --primary-color-dark: hsl(258 62% 46%);

  --colors-primary-base: hsl(258 62% 54%);
  --colors-primary-light: hsl(258 62% 97%);
  --colors-primary-dark: hsl(258 62% 46%);

  --colors-blue-50: hsl(258 62% 97%);
  --colors-blue-100: hsl(258 55% 92%);
  --colors-blue-200: hsl(258 50% 84%);
  --colors-blue-500: hsl(258 62% 54%);
  --colors-blue-600: hsl(258 62% 48%);
  --colors-blue-700: hsl(258 62% 42%);

  --colors-gray-50: hsl(220 20% 97%);
  --colors-gray-100: hsl(220 14% 96%);
  --colors-gray-200: hsl(220 13% 91%);
  --colors-gray-300: hsl(220 12% 84%);
  --colors-gray-400: hsl(220 10% 70%);
  --colors-gray-500: hsl(220 9% 55%);
  --colors-gray-600: hsl(220 9% 42%);
  --colors-gray-700: hsl(222 20% 30%);
  --colors-gray-800: hsl(222 35% 18%);
  --colors-gray-900: hsl(222 47% 11%);

  --colors-white: hsl(0 0% 100%);
  --colors-black: hsl(222 47% 11%);
}

/* ── Platform tokens (dark / Midnight Slate) ── */
[data-theme="dark"] {
  --thinkai-bg: hsl(230 24% 6%);
  --thinkai-fg: hsl(240 5% 96%);
  --thinkai-card: hsl(230 20% 11%);
  --thinkai-muted: hsl(240 5% 72%);
  --thinkai-muted-bg: hsl(230 22% 10%);
  --thinkai-border: hsl(230 18% 22%);
  --thinkai-primary: hsl(252 100% 68%);
  --thinkai-primary-hover: hsl(252 100% 74%);
  --thinkai-primary-fg: hsl(0 0% 100%);
  --thinkai-accent: hsl(252 40% 18%);
  --thinkai-accent-fg: hsl(252 100% 78%);
  --thinkai-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --thinkai-shadow-md: 0 6px 20px -6px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --thinkai-focus: 0 0 0 3px hsl(252 100% 68% / 0.4);

  --primary-color: hsl(252 100% 68%);
  --primary-color-light: hsl(252 40% 18%);
  --primary-color-dark: hsl(252 90% 60%);

  --colors-primary-base: hsl(252 100% 68%);
  --colors-primary-light: hsl(252 40% 18%);
  --colors-primary-dark: hsl(252 90% 60%);

  --colors-blue-50: hsl(252 30% 14%);
  --colors-blue-100: hsl(252 35% 18%);
  --colors-blue-200: hsl(252 30% 28%);
  --colors-blue-500: hsl(252 100% 68%);
  --colors-blue-600: hsl(252 90% 62%);
  --colors-blue-700: hsl(252 100% 68%);

  --colors-gray-50: hsl(230 24% 6%);
  --colors-gray-100: hsl(230 20% 11%);
  --colors-gray-200: hsl(230 18% 22%);
  --colors-gray-300: hsl(230 16% 30%);
  --colors-gray-400: hsl(230 12% 42%);
  --colors-gray-500: hsl(240 5% 55%);
  --colors-gray-600: hsl(240 5% 72%);
  --colors-gray-700: hsl(240 5% 82%);
  --colors-gray-800: hsl(240 5% 90%);
  --colors-gray-900: hsl(240 5% 96%);

  --colors-white: hsl(230 20% 11%);
  --colors-black: hsl(240 5% 96%);
}

/* ── Stacking order (critical — do not elevate page dropdowns) ──
 * page content < sticky header (40) < header menus (50)
 * < filter/sort (Fider default ~10, stay in page)
 * < modals (2000+) so Filter/Sort never float over Submit
 */
#c-header,
.c-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

#c-header .c-menu-user .c-dropdown,
#c-header .c-dropdown {
  z-index: 50;
}

#c-header .c-dropdown__list {
  z-index: 51 !important;
}

.c-modal-dimmer {
  z-index: 2000 !important;
}

.c-modal-window,
.c-modal-window--fullscreen,
.c-modal-window--large,
.c-modal-window--small {
  z-index: 2001 !important;
}

/* Never elevate filter/sort (or any page) dropdowns above the modal */
#p-home .c-dropdown,
.c-posts-container .c-dropdown,
.c-post-filter-btn,
.c-post-sort-btn {
  z-index: auto !important;
  position: relative;
}

#p-home .c-dropdown__list,
#p-home .c-dropdown__list--fullscreen-small,
.c-posts-container .c-dropdown__list,
.c-posts-container .c-dropdown__list--fullscreen-small {
  z-index: 20 !important; /* above cards, well below modal 2000 */
}

/* ── Typography ── */
html,
body,
button,
input,
textarea,
select,
.c-button,
.c-input,
.c-menu,
.c-dropdown,
.c-modal,
.c-header,
#c-header,
#p-home {
  font-family: var(--thinkai-font) !important;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
body {
  background-color: var(--thinkai-bg) !important;
  color: var(--thinkai-fg) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

h1,
h2,
h3,
h4,
.p-home__welcome-title,
.c-share-feedback .c-modal-header,
.c-share-feedback h1,
.c-share-feedback h2 {
  font-family: var(--thinkai-font-display) !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
  color: var(--thinkai-fg) !important;
}

.p-home__welcome-title {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.p-home__welcome-title em,
.p-home__welcome-title span[style],
.p-home__welcome-title .text-primary {
  color: var(--thinkai-primary) !important;
  font-style: normal !important;
}

.p-home__welcome-title span {
  color: inherit;
}

.p-home__welcome-body,
.p-home__welcome-body p {
  color: var(--thinkai-muted) !important;
  font-size: 0.9375rem !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

code,
pre,
.ProseMirror code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 0.875em !important;
}

/* ── Page shell ── */
#p-home {
  background-color: var(--thinkai-bg) !important;
  padding-top: 1.75rem !important;
  padding-bottom: 3rem !important;
  position: relative;
  z-index: 0;
}

@media (min-width: 1024px) {
  #p-home {
    padding-top: 2.5rem !important;
  }
}

#p-home .p-home__welcome-col [class*="sm:hidden"][class*="lg:block"] {
  display: block !important;
}

/* Keep natural column order — avoid reordering that sticky-stack conflicts */
#p-home .p-home__posts-col {
  order: 0;
}

/* ── Header / top bar ── */
#c-header,
.c-header {
  background: color-mix(in srgb, var(--thinkai-bg) 92%, transparent) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--thinkai-border) !important;
  box-shadow: none !important;
  min-height: 56px;
  overflow: visible !important;
}

#c-header .c-menu,
#c-header .container,
#c-header .c-menu-user,
.c-header .c-menu,
.c-header .c-menu-user {
  overflow: visible !important;
}

#c-header a,
.c-header a {
  font-weight: 500 !important;
}

#c-header img {
  border-radius: var(--thinkai-radius) !important;
}

/* Buddy logo + site title side by side (Fider default header) */
#c-header a[href="/"] {
  gap: 0.5rem !important;
}

#c-header a[href="/"] img,
#c-header img[src*="logos/"] {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  display: block !important;
  opacity: 1 !important;
}

#c-header h1.text-header,
#c-header .text-header {
  font-family: var(--thinkai-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--thinkai-fg) !important;
  margin: 0 !important;
}

#c-header .c-dropdown__list,
#c-header .c-notifications-container {
  background: var(--thinkai-card) !important;
  border: 1px solid var(--thinkai-border) !important;
  border-radius: var(--thinkai-radius) !important;
  box-shadow: var(--thinkai-shadow-lg) !important;
  color: var(--thinkai-fg) !important;
}

#c-header .c-dropdown__listitem:hover {
  background-color: var(--thinkai-muted-bg) !important;
}

#c-header .c-dropdown__handle,
#c-header .c-avatar {
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ── Submit CTA — not sticky (sticky caused UI to float over modal) ── */
.p-home__add-idea-btn {
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  margin-bottom: 1.25rem !important;
  padding: 0.875rem 1.125rem !important;
  background: var(--thinkai-primary) !important;
  border: none !important;
  border-radius: var(--thinkai-radius-lg) !important;
  box-shadow: var(--thinkai-shadow-sm) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  color: var(--thinkai-primary-fg) !important;
  font-family: var(--thinkai-font) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.011em !important;
  text-align: left !important;
}

.p-home__add-idea-btn:hover {
  background: var(--thinkai-primary-hover) !important;
  box-shadow: var(--thinkai-shadow-md) !important;
  transform: translateY(-1px);
  filter: none;
}

.p-home__add-idea-btn:active {
  transform: scale(0.98);
}

.p-home__add-idea-btn span {
  color: var(--thinkai-primary-fg) !important;
  font-weight: 500 !important;
}

.p-home__add-idea-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0.3rem !important;
  color: var(--thinkai-primary-fg) !important;
  background: hsl(0 0% 100% / 0.16) !important;
  border-radius: var(--thinkai-radius) !important;
  flex-shrink: 0 !important;
}

/* ── Filter / sort toolbar ── */
.c-post-filter-btn,
.c-post-sort-btn {
  font-family: var(--thinkai-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.011em !important;
  text-transform: none !important;
  border-radius: var(--thinkai-radius) !important;
  border: 1px solid var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  color: var(--thinkai-fg) !important;
  box-shadow: var(--thinkai-shadow-sm) !important;
  height: 2.5rem !important;
}

.c-post-filter-btn:hover,
.c-post-sort-btn:hover,
.c-post-filter-btn:focus,
.c-post-sort-btn:focus {
  border-color: var(--thinkai-primary) !important;
  box-shadow: var(--thinkai-focus) !important;
}

.c-posts-container__header {
  position: relative;
  z-index: 1;
}

.c-posts-container__filter-col,
.c-posts-container__search-col {
  position: relative;
  z-index: 1;
}

/* ── Buttons ── */
.c-button {
  font-family: var(--thinkai-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.011em !important;
  border-radius: var(--thinkai-radius) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.c-button:active {
  transform: scale(0.98);
}

.c-button--primary {
  background-color: var(--thinkai-primary) !important;
  border-color: var(--thinkai-primary) !important;
  color: var(--thinkai-primary-fg) !important;
  box-shadow: var(--thinkai-shadow-sm) !important;
}

.c-button--primary:hover {
  background-color: var(--thinkai-primary-hover) !important;
  border-color: var(--thinkai-primary-hover) !important;
  box-shadow: var(--thinkai-shadow-md) !important;
}

.c-button--secondary,
.c-button--default {
  border-radius: var(--thinkai-radius) !important;
  border-color: var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  color: var(--thinkai-fg) !important;
}

.c-button--secondary:hover,
.c-button--default:hover {
  background: var(--thinkai-muted-bg) !important;
  border-color: var(--thinkai-border) !important;
}

a {
  color: var(--thinkai-primary);
}

a:hover {
  color: var(--thinkai-primary-hover);
}

/* ── Inputs ── */
.c-input,
input[type="text"],
input[type="email"],
input[type="search"],
textarea,
.ProseMirror {
  font-family: var(--thinkai-font) !important;
  border-radius: var(--thinkai-radius) !important;
  border-color: var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  color: var(--thinkai-fg) !important;
}

.c-input:focus,
input:focus,
textarea:focus,
.ProseMirror:focus {
  border-color: var(--thinkai-primary) !important;
  box-shadow: var(--thinkai-focus) !important;
}

/* ── Modal (submit flow) ── */
.c-modal-dimmer {
  background-color: hsl(222 47% 11% / 0.45) !important;
}

.c-modal-content,
.c-share-feedback .c-modal-content,
.c-comment-input-card {
  border-radius: var(--thinkai-radius-lg) !important;
  border-color: var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  box-shadow: var(--thinkai-shadow-lg) !important;
}

.c-share-feedback {
  background: var(--thinkai-bg) !important;
}

.c-share-feedback .c-modal-header,
.c-share-feedback .c-modal-content,
.c-share-feedback__content {
  background: var(--thinkai-card) !important;
  font-family: var(--thinkai-font) !important;
}

.c-share-feedback .c-modal-header {
  font-family: var(--thinkai-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
}

.c-share-feedback .c-button--primary {
  min-height: 2.5rem;
  padding-inline: 1.25rem;
  font-weight: 500 !important;
}

/* While submit modal is open, keep page chrome out of the way */
body:has(.c-modal-dimmer) #c-header,
body:has(.c-share-feedback) #c-header {
  z-index: 0;
}

body:has(.c-modal-dimmer) .c-posts-container__header,
body:has(.c-share-feedback) .c-posts-container__header,
body:has(.c-modal-dimmer) .c-post-filter-btn,
body:has(.c-modal-dimmer) .c-post-sort-btn,
body:has(.c-share-feedback) .c-post-filter-btn,
body:has(.c-share-feedback) .c-post-sort-btn {
  pointer-events: none;
}

/* ── Post cards ── */
.c-posts-container__post {
  border-radius: var(--thinkai-radius-lg) !important;
  border: 1px solid var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  box-shadow: var(--thinkai-shadow-sm) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.c-posts-container__post:hover {
  border-color: color-mix(in srgb, var(--thinkai-primary) 35%, var(--thinkai-border)) !important;
  box-shadow: var(--thinkai-shadow-md) !important;
}

.c-posts-container__post-title,
.c-posts-container__post-link {
  color: var(--thinkai-fg) !important;
  font-family: var(--thinkai-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.011em !important;
}

.c-posts-container__post-link:hover {
  color: var(--thinkai-primary) !important;
}

.c-posts-container input {
  border-radius: var(--thinkai-radius) !important;
  font-family: var(--thinkai-font) !important;
}

#p-home .c-hint {
  border-radius: var(--thinkai-radius-lg) !important;
  border: 1px dashed var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  color: var(--thinkai-muted) !important;
}

/* ── Vote control ── */
.c-vote-counter__button {
  border-radius: var(--thinkai-radius) !important;
  background-color: var(--thinkai-accent) !important;
  border-color: color-mix(in srgb, var(--thinkai-primary) 18%, var(--thinkai-border)) !important;
  color: var(--thinkai-accent-fg) !important;
  font-family: var(--thinkai-font) !important;
  font-weight: 600 !important;
}

.c-vote-counter__button--voted {
  background-color: color-mix(in srgb, var(--thinkai-primary) 16%, var(--thinkai-card)) !important;
  border-color: var(--thinkai-primary) !important;
  color: var(--thinkai-primary) !important;
}

/* ── Tags ── */
.c-tag {
  border-radius: 999px !important;
  font-family: var(--thinkai-font) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.01em;
}

.c-tags-select,
.c-tags-select__option {
  border-radius: var(--thinkai-radius) !important;
  font-family: var(--thinkai-font) !important;
}

/* ── Sign-in ── */
.c-signin-social-button {
  border-radius: var(--thinkai-radius) !important;
  border-color: var(--thinkai-border) !important;
  background: var(--thinkai-card) !important;
  font-family: var(--thinkai-font) !important;
  font-weight: 500 !important;
}

.c-signin-social-button:hover {
  border-color: var(--thinkai-primary) !important;
  background-color: var(--thinkai-accent) !important;
}

/* ── Footer ── */
footer,
.c-footer {
  color: var(--thinkai-muted) !important;
  border-top: 1px solid var(--thinkai-border) !important;
  font-family: var(--thinkai-font) !important;
  font-size: 0.8125rem !important;
}

/* Remove Fider product branding */
.c-powered,
.c-powered *,
.p-show-post__powered-by-mobile,
footer a[href*="fider.io"],
.c-footer a[href*="fider.io"],
a[href*="utm_medium=powered-by"],
a[href*="fider.io?utm_source"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ── Focus rings ── */
*:focus-visible {
  outline: none !important;
  box-shadow: var(--thinkai-focus) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}