/* ============================================
   Fider Custom Theme - Apperside.dev Style
   ============================================
   
   HOW TO USE:
   1. Go to your Fider Admin → Site Settings → Custom CSS
   2. Paste this entire CSS
   3. Save changes
   
   DESIGN TOKENS (from apperside.dev):
   - Background: #0a0a0f (base), #12121a (elevated), #1a1a24 (cards)
   - Text: #e8e8ed (primary), #8888a0 (muted)
   - Accent: #00d4aa (teal)
   - Fonts: Space Grotesk, JetBrains Mono
   ============================================ */

/* ----------------------------------------
   1. FONTS (Google Fonts import)
   ---------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ----------------------------------------
   2. CSS VARIABLES / ROOT OVERRIDES
   ---------------------------------------- */
:root {
  /* Core colors */
  --fider-bg: #0a0a0f;
  --fider-bg-elevated: #12121a;
  --fider-bg-card: #1a1a24;
  --fider-text: #e8e8ed;
  --fider-text-muted: #a8a8b8; /* Lighter for better contrast */
  --fider-text-subtle: #888898; /* For less important elements */
  --fider-accent: #00d4aa;
  --fider-accent-dim: rgba(0, 212, 170, 0.15);
  --fider-accent-glow: rgba(0, 212, 170, 0.4);
  --fider-border: rgba(255, 255, 255, 0.08);
  --fider-orange: #ff6b35;
  --fider-purple: #a78bfa;
  
  /* Typography */
  --fider-font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --fider-font-mono: 'JetBrains Mono', monospace;
  
  /* Spacing & Radius */
  --fider-radius-sm: 6px;
  --fider-radius-md: 12px;
  --fider-radius-lg: 20px;
}

/* ----------------------------------------
   3. GLOBAL STYLES
   ---------------------------------------- */
body {
  font-family: var(--fider-font-sans) !important;
  background-color: var(--fider-bg) !important;
  color: var(--fider-text) !important;
  line-height: 1.6;
}

/* Subtle grain texture overlay (signature apperside effect) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 10000;
}

/* ----------------------------------------
   4. TYPOGRAPHY
   ---------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fider-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--fider-text) !important;
}

p, span, div, label, input, textarea, select, button {
  font-family: var(--fider-font-sans) !important;
}

code, pre, .mono {
  font-family: var(--fider-font-mono) !important;
}

/* ----------------------------------------
   5. LINKS
   ---------------------------------------- */
a {
  color: var(--fider-accent) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--fider-text) !important;
}

/* ----------------------------------------
   6. HEADER / NAVIGATION
   ---------------------------------------- */
.c-menu,
header,
.c-header,
nav {
  background-color: var(--fider-bg-elevated) !important;
  border-bottom: 1px solid var(--fider-border) !important;
}

.c-menu a,
.c-menu span {
  color: var(--fider-text-muted) !important;
}

.c-menu a:hover {
  color: var(--fider-accent) !important;
}

/* Logo area */
.c-header-logo,
.c-site-name {
  font-weight: 700 !important;
  color: var(--fider-text) !important;
}

/* ----------------------------------------
   7. BUTTONS
   ---------------------------------------- */
button,
.c-button,
.button,
[class*="btn"],
input[type="submit"],
input[type="button"] {
  font-family: var(--fider-font-sans) !important;
  font-weight: 500 !important;
  border-radius: var(--fider-radius-md) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Primary buttons */
button.primary,
.c-button.primary,
.button.primary,
.btn-primary,
button.m-positive,
.c-button.m-positive {
  background-color: var(--fider-accent) !important;
  color: var(--fider-bg) !important;
  border: none !important;
}

button.primary:hover,
.c-button.primary:hover,
.button.primary:hover,
.btn-primary:hover,
button.m-positive:hover,
.c-button.m-positive:hover {
  background-color: var(--fider-text) !important;
  color: var(--fider-bg) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px var(--fider-accent-glow) !important;
}

/* Secondary buttons */
button.secondary,
.c-button.secondary,
.button.secondary,
.btn-secondary {
  background-color: var(--fider-bg-card) !important;
  color: var(--fider-text) !important;
  border: 1px solid var(--fider-border) !important;
}

button.secondary:hover,
.c-button.secondary:hover,
.button.secondary:hover,
.btn-secondary:hover {
  border-color: var(--fider-accent) !important;
  color: var(--fider-accent) !important;
}

/* ----------------------------------------
   8. VOTE/SUPPORT BUTTON
   ---------------------------------------- */
.c-support-counter button,
.c-vote-button,
[class*="vote"] button {
  background-color: var(--fider-bg-card) !important;
  color: var(--fider-text-muted) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-md) !important;
  transition: all 0.2s ease !important;
}

.c-support-counter button:hover,
.c-vote-button:hover,
[class*="vote"] button:hover {
  border-color: var(--fider-accent) !important;
  color: var(--fider-accent) !important;
}

.c-support-counter button.m-supported,
.c-vote-button.m-voted,
[class*="voted"] {
  background-color: var(--fider-accent-dim) !important;
  color: var(--fider-accent) !important;
  border-color: var(--fider-accent) !important;
}

.c-support-counter button.m-supported i.icon,
.c-support-counter button:hover i.icon {
  color: var(--fider-accent) !important;
}

/* ----------------------------------------
   9. CARDS & CONTAINERS
   ---------------------------------------- */
.c-card,
.card,
[class*="card"],
.c-modal,
.modal,
.c-panel,
.panel,
.c-segment {
  background-color: var(--fider-bg-card) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-lg) !important;
  transition: all 0.2s ease !important;
}

.c-card:hover,
.card:hover {
  border-color: var(--fider-accent) !important;
  transform: translateY(-2px) !important;
}

/* Welcome/intro text - make it more readable */
.c-card p,
.c-card span,
.c-card div,
.c-panel p,
.c-segment p,
[class*="card"] p,
[class*="welcome"] p,
[class*="intro"] p {
  color: var(--fider-text-muted) !important;
}

/* First line / headings in cards should be brighter */
.c-card h1, .c-card h2, .c-card h3, .c-card h4,
.c-card strong, .c-card b,
[class*="card"] h1, [class*="card"] h2, [class*="card"] h3 {
  color: var(--fider-text) !important;
}

/* ----------------------------------------
   10. IDEA/POST LIST
   ---------------------------------------- */
.c-idea-list,
.c-post-list,
[class*="idea-list"],
[class*="post-list"] {
  background-color: transparent !important;
}

.c-list-item,
.c-idea-list .c-list-item,
[class*="list-item"] {
  background-color: var(--fider-bg-card) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-lg) !important;
  margin-bottom: 1rem !important;
  padding: 1.5rem !important;
  transition: all 0.2s ease !important;
}

.c-list-item:hover,
.c-idea-list .c-list-item:hover {
  border-color: var(--fider-accent) !important;
  transform: translateY(-2px) !important;
}

.c-list-item-title,
.c-idea-list .c-list-item-title,
[class*="item-title"] {
  color: var(--fider-text) !important;
  font-weight: 600 !important;
}

.c-list-item-title:hover,
.c-idea-list .c-list-item-title:hover {
  color: var(--fider-accent) !important;
}

.c-list-item-description,
[class*="item-description"],
[class*="post-description"] {
  color: var(--fider-text-muted) !important;
  opacity: 1 !important;
}

/* ----------------------------------------
   11. STATUS BADGES / TAGS
   ---------------------------------------- */
.c-status,
.c-tag,
.c-badge,
[class*="status"],
[class*="tag"],
[class*="badge"],
[class*="label"] {
  font-family: var(--fider-font-mono) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: var(--fider-radius-sm) !important;
}

/* Default status (teal accent) */
.c-status,
.c-badge {
  background-color: var(--fider-accent-dim) !important;
  color: var(--fider-accent) !important;
}

/* Status variations */
.c-status.m-open,
[class*="status-open"] {
  background-color: var(--fider-accent-dim) !important;
  color: var(--fider-accent) !important;
}

.c-status.m-planned,
[class*="status-planned"] {
  background-color: rgba(167, 139, 250, 0.15) !important;
  color: var(--fider-purple) !important;
}

.c-status.m-started,
.c-status.m-in-progress,
[class*="status-started"],
[class*="status-progress"] {
  background-color: rgba(255, 107, 53, 0.15) !important;
  color: var(--fider-orange) !important;
}

.c-status.m-completed,
.c-status.m-done,
[class*="status-completed"],
[class*="status-done"] {
  background-color: var(--fider-accent-dim) !important;
  color: var(--fider-accent) !important;
}

.c-status.m-declined,
.c-status.m-closed,
[class*="status-declined"],
[class*="status-closed"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--fider-text-muted) !important;
}

/* ----------------------------------------
   12. FORMS & INPUTS
   ---------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select,
.c-input,
.c-textarea,
.c-select {
  font-family: var(--fider-font-sans) !important;
  background-color: var(--fider-bg) !important;
  color: var(--fider-text) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-md) !important;
  padding: 0.75rem 1rem !important;
  transition: border-color 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.c-input:focus,
.c-textarea:focus,
.c-select:focus {
  outline: none !important;
  border-color: var(--fider-accent) !important;
  box-shadow: 0 0 0 3px var(--fider-accent-dim) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--fider-text-muted) !important;
}

label {
  color: var(--fider-text) !important;
  font-weight: 500 !important;
}

/* ----------------------------------------
   12b. RICH TEXT EDITOR (Fix white bg text)
   ---------------------------------------- */
/* Editor container */
.c-editor,
.c-markdown-editor,
[class*="editor"],
[class*="Editor"],
.ProseMirror,
.tiptap,
[contenteditable="true"] {
  background-color: var(--fider-bg-card) !important;
  color: var(--fider-text) !important;
  border-radius: var(--fider-radius-md) !important;
}

/* If editors have white background, force dark text */
.c-editor *,
.c-markdown-editor *,
[class*="editor"] *,
[class*="Editor"] *,
.ProseMirror *,
.tiptap *,
[contenteditable="true"] * {
  color: inherit !important;
}

/* Editor with white/light background - use dark text instead */
div[style*="background"][style*="white"] *,
div[style*="background-color: rgb(255"] *,
.c-form textarea,
.c-form input,
.c-form [contenteditable] {
  color: #1a1a24 !important;
}

/* Toolbar styling */
.c-editor-toolbar,
[class*="editor-toolbar"],
[class*="Editor"] > div:first-child {
  background-color: var(--fider-bg-elevated) !important;
  border-bottom: 1px solid var(--fider-border) !important;
}

/* Editor wrapper - if it's white, make text dark */
.c-editor-wrapper,
[class*="editor-wrapper"] {
  background-color: var(--fider-bg-card) !important;
}

/* Force text color in any white textarea/input area */
textarea[style*="background"],
input[style*="background"],
div[style*="background-color: white"],
div[style*="background: white"],
.bg-white,
[class*="bg-white"] {
  color: #0a0a0f !important;
}

/* Placeholder text in editors */
.c-editor [data-placeholder]::before,
[class*="editor"] [data-placeholder]::before,
.ProseMirror p.is-editor-empty:first-child::before,
.tiptap p.is-empty::before {
  color: var(--fider-text-muted) !important;
}

/* Specific fix: if background is light, text must be dark */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
  color: #0a0a0f !important;
}

[style*="background-color: rgb(255, 255, 255)"] *,
[style*="background: rgb(255, 255, 255)"] *,
[style*="background-color: white"] *,
[style*="background: white"] * {
  color: #0a0a0f !important;
}

/* ----------------------------------------
   13. USER AVATARS
   ---------------------------------------- */
.c-avatar {
  border-radius: 50% !important;
  border: 2px solid var(--fider-border) !important;
}

.c-avatar.m-staff {
  border-color: var(--fider-accent) !important;
}

.c-username {
  color: var(--fider-text) !important;
}

.c-username.m-staff {
  color: var(--fider-accent) !important;
}

/* ----------------------------------------
   14. COMMENTS
   ---------------------------------------- */
.c-comment,
[class*="comment"] {
  background-color: var(--fider-bg-elevated) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-md) !important;
  padding: 1rem !important;
  margin-bottom: 0.75rem !important;
}

.c-comment-text,
[class*="comment-text"],
[class*="comment-content"] {
  color: var(--fider-text) !important;
}

.c-comment-date,
[class*="comment-date"],
[class*="comment-meta"] {
  color: var(--fider-text-muted) !important;
  font-size: 0.875rem !important;
}

/* ----------------------------------------
   15. MODALS & DROPDOWNS
   ---------------------------------------- */
.c-modal,
.modal,
[class*="modal"] {
  background-color: var(--fider-bg-card) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-lg) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.c-modal-header,
[class*="modal-header"] {
  border-bottom: 1px solid var(--fider-border) !important;
}

.c-modal-footer,
[class*="modal-footer"] {
  border-top: 1px solid var(--fider-border) !important;
}

.c-dropdown,
.dropdown,
[class*="dropdown"] {
  background-color: var(--fider-bg-card) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-md) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

.c-dropdown-item,
[class*="dropdown-item"] {
  color: var(--fider-text) !important;
  transition: all 0.2s ease !important;
}

.c-dropdown-item:hover,
[class*="dropdown-item"]:hover {
  background-color: var(--fider-accent-dim) !important;
  color: var(--fider-accent) !important;
}

/* ----------------------------------------
   16. ROADMAP
   ---------------------------------------- */
.c-roadmap,
[class*="roadmap"] {
  background-color: transparent !important;
}

.c-roadmap-column,
[class*="roadmap-column"] {
  background-color: var(--fider-bg-elevated) !important;
  border: 1px solid var(--fider-border) !important;
  border-radius: var(--fider-radius-lg) !important;
}

.c-roadmap-column-header,
[class*="roadmap-column-header"] {
  border-bottom: 1px solid var(--fider-border) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------
   17. FOOTER
   ---------------------------------------- */
footer,
.c-footer {
  background-color: var(--fider-bg) !important;
  border-top: 1px solid var(--fider-border) !important;
  color: var(--fider-text-muted) !important;
}

footer a,
.c-footer a {
  color: var(--fider-text-muted) !important;
}

footer a:hover,
.c-footer a:hover {
  color: var(--fider-accent) !important;
}

/* ----------------------------------------
   18. SCROLLBAR (Webkit)
   ---------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--fider-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--fider-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--fider-text-muted);
}

/* ----------------------------------------
   19. SELECTION
   ---------------------------------------- */
::selection {
  background-color: var(--fider-accent) !important;
  color: var(--fider-bg) !important;
}

/* ----------------------------------------
   20. ANIMATIONS
   ---------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.c-list-item,
.c-card,
.c-comment {
  animation: fadeIn 0.3s ease;
}

/* ----------------------------------------
   21. STAFF-ONLY STYLES
   Optional: Uncomment to differentiate staff view
   ---------------------------------------- */
/*
body.is-staff .c-menu {
  background: linear-gradient(135deg, var(--fider-bg-elevated) 0%, rgba(0, 212, 170, 0.05) 100%) !important;
}
*/

/* ----------------------------------------
   22. POWERED BY FIDER (hide or style)
   ---------------------------------------- */
.c-powered-by,
[class*="powered-by"] {
  opacity: 0.5 !important;
  color: var(--fider-text-muted) !important;
}

/* ----------------------------------------
   23. RESPONSIVE TWEAKS
   ---------------------------------------- */
@media (max-width: 768px) {
  .c-list-item,
  .c-card {
    padding: 1rem !important;
    border-radius: var(--fider-radius-md) !important;
  }
  
  .c-modal {
    margin: 1rem !important;
    border-radius: var(--fider-radius-md) !important;
  }
}

/* ----------------------------------------
   24. FIDER EDITOR FIX (white bg editors)
   ----------------------------------------
   Fider uses editors with white backgrounds.
   This ensures text is readable.
   ---------------------------------------- */

/* Target any white/light container and make text dark */
[class*="form"] [class*="editor"],
[class*="form"] [contenteditable],
[class*="form"] textarea,
form [class*="editor"],
form [contenteditable],
form textarea {
  color: #1a1a24 !important;
}

/* The actual editable area - force dark text on white */
[contenteditable="true"],
[contenteditable="true"] p,
[contenteditable="true"] span,
[contenteditable="true"] div {
  color: #1a1a24 !important;
}

/* Placeholder styling */
[contenteditable="true"]:empty::before,
[contenteditable="true"] .is-empty::before,
[data-placeholder]::before {
  color: #8888a0 !important;
}

/* Title input field */
input[name="title"],
input[placeholder*="title" i],
input[placeholder*="Title" i] {
  color: #1a1a24 !important;
}

/* If you prefer DARK editors instead of white, uncomment below: */
/*
[contenteditable="true"],
[class*="editor"] {
  background-color: #1a1a24 !important;
  color: #e8e8ed !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[contenteditable="true"] *,
[class*="editor"] * {
  color: #e8e8ed !important;
}
*/

/* ----------------------------------------
   25. GLOBAL TEXT CONTRAST FIXES
   ---------------------------------------- */
/* Ensure all paragraph and span text is readable */
p, span, div, li {
  color: inherit;
}

/* Any text that looks faded - boost it */
[style*="opacity"],
[style*="color: rgb(136"],
[style*="color: rgb(128"],
[style*="color: rgb(100"] {
  opacity: 1 !important;
}

/* Description/subtitle text should be lighter than default muted */
[class*="description"],
[class*="subtitle"],
[class*="subtext"],
[class*="secondary"],
[class*="meta"] {
  color: #a8a8b8 !important;
}

/* Vote counter styling */
[class*="vote"] [class*="count"],
[class*="support"] [class*="count"],
[class*="counter"] {
  color: var(--fider-text) !important;
  font-weight: 600 !important;
}

/* Tag/label improvements */
[class*="tag"],
[class*="label"] {
  background-color: var(--fider-accent-dim) !important;
  color: var(--fider-accent) !important;
  border: none !important;
}