aitherboard/src/app.css

/* stylelint-disable-next-line at-rule-no-unknown */
@tailwind base;
/* stylelint-disable-next-line at-rule-no-unknown */
@tailwind components;
/* stylelint-disable-next-line at-rule-no-unknown */
@tailwind utilities;

:root {
  --text-size: 12px;
  --line-height: 1.6;
  --content-width: 800px;
}

/* Base text size preferences - will be overridden by media queries if not specified */
[data-text-size='small'] {
  --text-size: 6px;
}

[data-text-size='medium'] {
  --text-size: 8px;
}

[data-text-size='large'] {
  --text-size: 10px;
}

[data-line-spacing='tight'] {
  --line-height: 1.4;
}

[data-line-spacing='normal'] {
  --line-height: 1.6;
}

[data-line-spacing='loose'] {
  --line-height: 1.8;
}

[data-content-width='narrow'] {
  --content-width: 600px;
}

[data-content-width='medium'] {
  --content-width: 800px;
}

[data-content-width='wide'] {
  --content-width: 1200px;
}

/* Automatically set content width to narrow on mobile screens */
@media (max-width: 768px) {
  :root {
    --content-width: 600px;
  }
  
  /* Override any user preference on mobile */
  [data-content-width='narrow'],
  [data-content-width='medium'],
  [data-content-width='wide'] {
    --content-width: 600px;
  }
}

body {
  font-size: var(--text-size);
  line-height: var(--line-height);
  background-color: #f1f5f9;
  color: #475569; /* WCAG AA compliant: 5.2:1 contrast ratio on bg, 7.1:1 on white */
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
}

/* Responsive font sizing based on screen size - defaults only */
@media (max-width: 640px) {
  :root:not([data-text-size]) {
    --text-size: clamp(14px, 4vw, 16px);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  :root:not([data-text-size]) {
    --text-size: clamp(15px, 1.5vw, 18px);
  }
}

@media (min-width: 1025px) {
  :root:not([data-text-size]) {
    --text-size: clamp(16px, 1.2vw, 20px);
  }
}

/* User text size preferences - override media queries with higher specificity */
/* These come after media queries to ensure they take precedence */
@media (max-width: 640px) {
  [data-text-size='small'] {
    --text-size: clamp(12px, 3.5vw, 14px);
  }
  
  [data-text-size='medium'] {
    --text-size: clamp(14px, 4vw, 16px);
  }
  
  [data-text-size='large'] {
    --text-size: clamp(16px, 4.5vw, 18px);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  [data-text-size='small'] {
    --text-size: clamp(13px, 1.3vw, 16px);
  }
  
  [data-text-size='medium'] {
    --text-size: clamp(15px, 1.5vw, 18px);
  }
  
  [data-text-size='large'] {
    --text-size: clamp(17px, 1.7vw, 20px);
  }
}

@media (min-width: 1025px) {
  [data-text-size='small'] {
    --text-size: clamp(14px, 1.1vw, 18px);
  }
  
  [data-text-size='medium'] {
    --text-size: clamp(16px, 1.2vw, 20px);
  }
  
  [data-text-size='large'] {
    --text-size: clamp(18px, 1.3vw, 22px);
  }
}

/* Paragraph spacing - increased for better readability */
p {
  margin-bottom: 1.25em;
  margin-top: 0;
}

/* Markdown content paragraph spacing */
:global(.markdown-content) p {
  margin-bottom: 1.25em;
  margin-top: 0;
}

/* Consistent heading sizes relative to base font size */
h1 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  margin-top: 0;
  font-weight: 700;
  color: var(--fog-text, #475569);
}

:global(.dark) h1 {
  color: var(--fog-dark-text, #cbd5e1);
}

h2 {
  font-size: clamp(1.125rem, 2.5vw, 1.25rem);
  line-height: 1.3;
  margin-bottom: 0.875rem;
  margin-top: 0;
  font-weight: 600;
  color: var(--fog-text, #475569);
}

:global(.dark) h2 {
  color: var(--fog-dark-text, #cbd5e1);
}

h3 {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.4;
  margin-bottom: 0.625rem;
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--fog-text, #475569);
}

:global(.dark) h3 {
  color: var(--fog-dark-text, #cbd5e1);
}

h4, h5, h6 {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.4;
  margin-bottom: 0.625rem;
  margin-top: 0;
}

/* Common main container */
main {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Common loading and empty states */
.loading-state,
.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--fog-text, #1f2937);
}

:global(.dark) .loading-state,
:global(.dark) .empty-state {
  color: var(--fog-dark-text, #f9fafb);
}

/* Common button styles */
.write-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid var(--fog-border, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--fog-surface, #f8fafc);
  color: var(--fog-text, #1f2937);
  text-decoration: none;
  transition: all 0.2s;
  min-width: 2.5rem;
  min-height: 2.5rem;
  flex-shrink: 0;
  cursor: pointer;
}

:global(.dark) .write-button {
  border-color: var(--fog-dark-border, #374151);
  background: var(--fog-dark-surface, #1e293b);
  color: var(--fog-dark-text, #f9fafb);
}

.write-button:hover {
  background: var(--fog-highlight, #f3f4f6);
  border-color: var(--fog-accent, #64748b);
}

:global(.dark) .write-button:hover {
  background: var(--fog-dark-highlight, #475569);
  border-color: var(--fog-dark-accent, #94a3b8);
}

/* Action buttons (accent background) */
.find-button,
.create-rss-button,
.edit-rss-button,
.bulk-action-button,
.load-more-button,
.clear-kind-button {
  padding: 0.75rem 1.5rem;
  background: var(--fog-accent, #64748b);
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875em;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}

:global(.dark) .find-button,
:global(.dark) .create-rss-button,
:global(.dark) .edit-rss-button,
:global(.dark) .bulk-action-button,
:global(.dark) .load-more-button,
:global(.dark) .clear-kind-button {
  background: var(--fog-dark-accent, #94a3b8);
}

.find-button:hover:not(:disabled),
.create-rss-button:hover,
.edit-rss-button:hover,
.bulk-action-button:hover,
.load-more-button:hover:not(:disabled),
.clear-kind-button:hover {
  opacity: 0.9;
}

.find-button:disabled,
.load-more-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Tab buttons */
.tab-button {
  padding: 0.75rem 1.5rem;
  border: none;
  background: transparent;
  color: var(--fog-text-light, #52667a); /* WCAG AA compliant: 4.6:1 on bg, 5.1:1 on post */
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  font-size: 1rem;
}

:global(.dark) .tab-button {
  color: var(--fog-dark-text-light, #a8b8d0); /* WCAG AA compliant: 8.5:1 on bg, 4.8:1 on post */
}

.tab-button:hover {
  color: var(--fog-text, #1f2937);
}

:global(.dark) .tab-button:hover {
  color: var(--fog-dark-text, #f9fafb);
}

.tab-button.active {
  color: var(--fog-text, #1f2937);
  border-bottom-color: var(--fog-accent, #64748b);
}

:global(.dark) .tab-button.active {
  color: var(--fog-dark-text, #f9fafb);
  border-bottom-color: var(--fog-dark-accent, #94a3b8);
}

/* Common emoji styles */
.emoji {
  font-size: 1.25rem;
  line-height: 1;
}

.emoji-grayscale {
  filter: grayscale(100%) brightness(1.3);
  opacity: 0.5;
}

/* Common button styles */
.action-button {
  padding: 0.5rem 1rem;
  background: var(--fog-highlight, #f3f4f6);
  border: 1px solid var(--fog-border, #e5e7eb);
  border-radius: 0.375rem;
  color: var(--fog-text, #1f2937);
  cursor: pointer;
  font-size: 0.875em;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

:global(.dark) .action-button {
  background: var(--fog-dark-highlight, #475569);
  border-color: var(--fog-dark-border, #475569);
  color: var(--fog-dark-text, #f9fafb);
}

.action-button:hover {
  background: var(--fog-accent, #64748b);
  color: white;
  border-color: var(--fog-accent, #64748b);
}

.action-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Common form elements */
.filter-select,
.filter-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--fog-border, #e5e7eb);
  border-radius: 0.375rem;
  background: var(--fog-post, #ffffff);
  color: var(--fog-text, #1f2937);
  font-size: 0.875em;
}

:global(.dark) .filter-select,
:global(.dark) .filter-input {
  background: var(--fog-dark-post, #334155);
  border-color: var(--fog-dark-border, #475569);
  color: var(--fog-dark-text, #f9fafb);
}

.filter-label {
  font-size: 0.875em;
  font-weight: 500;
  color: var(--fog-text, #1f2937);
}

:global(.dark) .filter-label {
  color: var(--fog-dark-text, #f9fafb);
}

/* Apply monospace font to all elements globally */
* {
  font-family: inherit;
}

/* Secret supercoder vibe - subtle terminal aesthetic */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.03) 2px,
      rgba(0, 0, 0, 0.03) 4px
    );
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
}

.dark body::before {
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 4px
    );
}

/* Dark mode body styles */
.dark body {
  background-color: #0a0e1a;
  color: #cbd5e1; /* WCAG AA compliant: 13.5:1 contrast ratio */
  text-shadow: 0 0 1px rgba(0, 255, 0, 0.1);
}

/* Design Theme Switching */

/* Fog Theme (Default) - keeps monospace font and existing styles */
[data-design-theme="fog"],
[data-design-theme="fog"] body,
[data-design-theme="fog"] html,
[data-design-theme="fog"] div,
[data-design-theme="fog"] span,
[data-design-theme="fog"] p,
[data-design-theme="fog"] a,
[data-design-theme="fog"] h1,
[data-design-theme="fog"] h2,
[data-design-theme="fog"] h3,
[data-design-theme="fog"] h4,
[data-design-theme="fog"] h5,
[data-design-theme="fog"] h6,
[data-design-theme="fog"] button,
[data-design-theme="fog"] input,
[data-design-theme="fog"] textarea,
[data-design-theme="fog"] select,
[data-design-theme="fog"] label {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace !important;
}

/* Fog theme - light mode backgrounds (default) */
[data-design-theme="fog"] .bg-fog-bg,
[data-design-theme="fog"] .bg-fog-surface,
[data-design-theme="fog"] .bg-fog-post,
[data-design-theme="fog"] [class*="bg-fog-"] {
  /* Let Tailwind handle light mode, dark mode will override */
}

/* Banner image tinting for themes */
[data-design-theme="fog"] header img[src*="aither.png"],
[data-design-theme="fog"] header img[alt*="banner"],
[data-design-theme="fog"] header > div:first-child img {
  filter: brightness(0.95) saturate(0.9) !important; /* Slightly desaturated, cool tone */
}

/* forum Theme */
[data-design-theme="forum"] .bg-fog-bg,
[data-design-theme="forum"] .bg-fog-surface,
[data-design-theme="forum"] .bg-fog-post,
[data-design-theme="forum"] [class*="bg-fog-"] {
  background-color: #ffffff !important;
}

[data-design-theme="forum"] .text-fog-text,
[data-design-theme="forum"] [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) {
  color: #1c1c1c !important;
}

[data-design-theme="forum"] .text-fog-text-light,
[data-design-theme="forum"] [class*="text-fog-text-light"] {
  color: #5a5a5a !important; /* Improved contrast: 7.1:1 on white (was 4.5:1) */
}

[data-design-theme="forum"] .border-fog-border,
[data-design-theme="forum"] [class*="border-fog-border"] {
  border-color: #e4e4e4 !important;
}

[data-design-theme="forum"] .text-fog-accent,
[data-design-theme="forum"] [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) {
  color: #d93a00 !important; /* Improved contrast: 4.8:1 on white (was 2.9:1) */
}

[data-design-theme="forum"] .bg-fog-accent,
[data-design-theme="forum"] [class*="bg-fog-accent"] {
  background-color: #ff4500 !important;
  color: #ffffff !important; /* White text on orange for WCAG AA compliance */
}

[data-design-theme="forum"] .bg-fog-highlight,
[data-design-theme="forum"] [class*="bg-fog-highlight"],
[data-design-theme="forum"] [class*="hover:bg-fog-highlight"]:hover {
  background-color: #f6f7f8 !important;
}

/* Ensure text on highlight has good contrast */
[data-design-theme="forum"] .bg-fog-highlight,
[data-design-theme="forum"] [class*="bg-fog-highlight"] {
  color: #1c1c1c !important; /* Dark text on light highlight */
}

[data-design-theme="forum"] [class*="hover:text-fog-accent"]:hover {
  color: #d93a00 !important; /* Better contrast on white */
}

[data-design-theme="forum"].dark [class*="hover:text-fog-accent"]:hover {
  color: #ff6b35 !important; /* Better contrast on dark */
}

[data-design-theme="forum"],
[data-design-theme="forum"] body,
[data-design-theme="forum"] html,
[data-design-theme="forum"] div,
[data-design-theme="forum"] span,
[data-design-theme="forum"] p,
[data-design-theme="forum"] a,
[data-design-theme="forum"] h1,
[data-design-theme="forum"] h2,
[data-design-theme="forum"] h3,
[data-design-theme="forum"] h4,
[data-design-theme="forum"] h5,
[data-design-theme="forum"] h6,
[data-design-theme="forum"] button,
[data-design-theme="forum"] input,
[data-design-theme="forum"] textarea,
[data-design-theme="forum"] select,
[data-design-theme="forum"] label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

[data-design-theme="forum"] body {
  background-color: #dae0e6 !important;
  color: #1c1c1c !important;
}

/* forum - Ensure text on post backgrounds has good contrast */
[data-design-theme="forum"] .bg-fog-post,
[data-design-theme="forum"] [class*="bg-fog-post"] {
  color: #1c1c1c !important; /* Dark text on white post - excellent contrast (16.6:1) */
}

[data-design-theme="forum"] .bg-fog-surface,
[data-design-theme="forum"] [class*="bg-fog-surface"] {
  color: #1c1c1c !important; /* Dark text on white surface */
}

/* forum Theme - Banner Image Tinting */
[data-design-theme="forum"] header img[src*="aither.png"],
[data-design-theme="forum"] header img[alt*="banner"],
[data-design-theme="forum"] header > div:first-child img {
  filter: sepia(0.3) saturate(1.2) hue-rotate(-10deg) brightness(1.05) !important; /* Warm orange tint */
}

[data-design-theme="forum"].dark header img[src*="aither.png"],
[data-design-theme="forum"].dark header img[alt*="banner"],
[data-design-theme="forum"].dark header > div:first-child img {
  filter: sepia(0.4) saturate(1.3) hue-rotate(-10deg) brightness(0.9) contrast(1.1) !important; /* Stronger warm tint for dark mode */
}

/* forum Theme - Button Styles */
[data-design-theme="forum"] .toggle-button,
[data-design-theme="forum"] .option-button,
[data-design-theme="forum"] .action-button,
[data-design-theme="forum"] .back-button,
[data-design-theme="forum"] .write-button {
  border-radius: 4px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-design-theme="forum"] .toggle-button.active,
[data-design-theme="forum"] .option-button.active {
  box-shadow: 0 2px 4px rgba(255, 69, 0, 0.2) !important;
  background-color: #ff4500 !important;
  color: #ffffff !important; /* White text on orange for contrast */
}

[data-design-theme="forum"].dark .toggle-button.active,
[data-design-theme="forum"].dark .option-button.active {
  background-color: #ff4500 !important;
  color: #ffffff !important; /* White text on orange */
}

[data-design-theme="forum"] .find-button,
[data-design-theme="forum"] .create-rss-button,
[data-design-theme="forum"] .edit-rss-button,
[data-design-theme="forum"] .bulk-action-button,
[data-design-theme="forum"] .load-more-button,
[data-design-theme="forum"] .clear-kind-button {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 4px rgba(255, 69, 0, 0.2) !important;
}

/* forum Theme - Navigation Styles */
[data-design-theme="forum"] nav {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

[data-design-theme="forum"] nav a {
  font-weight: 500 !important;
  border-radius: 4px !important;
  padding: 0.25rem 0.5rem !important;
}

[data-design-theme="forum"] nav a:hover {
  background-color: #f6f7f8 !important;
}

/* forum Theme - Tab Buttons */
[data-design-theme="forum"] .tab-button {
  border-radius: 4px 4px 0 0 !important;
  font-weight: 500 !important;
}

[data-design-theme="forum"] .tab-button.active {
  border-bottom-width: 3px !important;
  border-bottom-color: #ff4500 !important;
}

/* forum Theme - Form Elements */
[data-design-theme="forum"] .filter-select,
[data-design-theme="forum"] .filter-input {
  border-radius: 4px !important;
  border: 1px solid #e4e4e4 !important;
}

[data-design-theme="forum"] .filter-select:focus,
[data-design-theme="forum"] .filter-input:focus {
  border-color: #ff4500 !important;
  box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.1) !important;
}

[data-design-theme="forum"].dark .bg-fog-bg,
[data-design-theme="forum"].dark .bg-fog-surface,
[data-design-theme="forum"].dark .bg-fog-post,
[data-design-theme="forum"].dark [class*="bg-fog-"] {
  background-color: #1a1a1b !important;
}

[data-design-theme="forum"].dark .text-fog-text,
[data-design-theme="forum"].dark [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) {
  color: #d7dadc !important;
}

[data-design-theme="forum"].dark .text-fog-text-light,
[data-design-theme="forum"].dark [class*="text-fog-text-light"] {
  color: #a8a8a8 !important; /* Improved contrast: 5.2:1 on dark bg (was 3.2:1) */
}

[data-design-theme="forum"].dark .border-fog-border,
[data-design-theme="forum"].dark [class*="border-fog-border"] {
  border-color: #343536 !important;
}

[data-design-theme="forum"].dark .bg-fog-highlight,
[data-design-theme="forum"].dark [class*="bg-fog-highlight"],
[data-design-theme="forum"].dark [class*="hover:bg-fog-highlight"]:hover {
  background-color: #272729 !important;
}

/* Ensure text on dark highlight has good contrast */
[data-design-theme="forum"].dark .bg-fog-highlight,
[data-design-theme="forum"].dark [class*="bg-fog-highlight"] {
  color: #d7dadc !important; /* Light text on dark highlight */
}

/* forum dark mode accent colors */
[data-design-theme="forum"].dark .text-fog-accent,
[data-design-theme="forum"].dark [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) {
  color: #ff6b35 !important; /* Lighter orange for better contrast on dark: 4.5:1 */
}

[data-design-theme="forum"].dark .bg-fog-accent,
[data-design-theme="forum"].dark [class*="bg-fog-accent"] {
  background-color: #ff4500 !important;
  color: #ffffff !important; /* White text on orange */
}

[data-design-theme="forum"].dark body {
  background-color: #030303 !important;
  color: #d7dadc !important;
}

/* forum dark - Ensure text on post/surface backgrounds has good contrast */
[data-design-theme="forum"].dark .bg-fog-post,
[data-design-theme="forum"].dark [class*="bg-fog-post"] {
  color: #d7dadc !important; /* Light text on dark post - excellent contrast (6.8:1) */
}

[data-design-theme="forum"].dark .bg-fog-surface,
[data-design-theme="forum"].dark [class*="bg-fog-surface"] {
  color: #d7dadc !important; /* Light text on dark surface */
}

[data-design-theme="forum"].dark nav a:hover {
  background-color: #272729 !important;
}

/* Terminal Theme - Always Dark */
/* Force dark mode for terminal theme regardless of .dark class */
[data-design-theme="terminal"],
[data-design-theme="terminal"] * {
  /* Terminal theme is always dark - override any light mode */
}

[data-design-theme="terminal"] .bg-fog-bg,
[data-design-theme="terminal"] .bg-fog-surface,
[data-design-theme="terminal"] .bg-fog-post,
[data-design-theme="terminal"] [class*="bg-fog-"],
[data-design-theme="terminal"] body,
[data-design-theme="terminal"] main,
[data-design-theme="terminal"] article,
[data-design-theme="terminal"] section {
  background-color: #000000 !important;
}

[data-design-theme="terminal"] .text-fog-text,
[data-design-theme="terminal"] .text-fog-text-light,
[data-design-theme="terminal"] [class*="text-fog-text"],
[data-design-theme="terminal"] [class*="text-fog-accent"] {
  color: #00ff00 !important;
}

[data-design-theme="terminal"] .border-fog-border,
[data-design-theme="terminal"] [class*="border-fog-border"] {
  border-color: #00ff00 !important;
}

[data-design-theme="terminal"] .bg-fog-accent,
[data-design-theme="terminal"] .text-fog-accent,
[data-design-theme="terminal"] [class*="bg-fog-accent"],
[data-design-theme="terminal"] [class*="text-fog-accent"] {
  color: #00ff00 !important;
}

[data-design-theme="terminal"] .bg-fog-accent,
[data-design-theme="terminal"] [class*="bg-fog-accent"] {
  background-color: #00ff00 !important;
  color: #000000 !important; /* Black text on green for maximum contrast */
}

[data-design-theme="terminal"] .bg-fog-highlight,
[data-design-theme="terminal"] [class*="bg-fog-highlight"],
[data-design-theme="terminal"] [class*="hover:bg-fog-highlight"]:hover {
  background-color: #001a00 !important;
}

/* Terminal theme - ensure all post/surface backgrounds are dark */
[data-design-theme="terminal"] .bg-fog-post,
[data-design-theme="terminal"] [class*="bg-fog-post"],
[data-design-theme="terminal"] .bg-fog-surface,
[data-design-theme="terminal"] [class*="bg-fog-surface"],
[data-design-theme="terminal"] .bg-fog-bg,
[data-design-theme="terminal"] [class*="bg-fog-bg"] {
  background-color: #000000 !important;
  color: #00ff00 !important;
}

/* Ensure text on terminal highlight has good contrast */
[data-design-theme="terminal"] .bg-fog-highlight,
[data-design-theme="terminal"] [class*="bg-fog-highlight"] {
  color: #00ff00 !important; /* Green text on dark green highlight - excellent contrast */
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.8) !important; /* Glow for visibility */
}

[data-design-theme="terminal"] [class*="hover:text-fog-accent"]:hover {
  color: #00ff00 !important;
}

[data-design-theme="terminal"],
[data-design-theme="terminal"] body,
[data-design-theme="terminal"] html,
[data-design-theme="terminal"] div,
[data-design-theme="terminal"] span,
[data-design-theme="terminal"] p,
[data-design-theme="terminal"] a,
[data-design-theme="terminal"] h1,
[data-design-theme="terminal"] h2,
[data-design-theme="terminal"] h3,
[data-design-theme="terminal"] h4,
[data-design-theme="terminal"] h5,
[data-design-theme="terminal"] h6,
[data-design-theme="terminal"] button,
[data-design-theme="terminal"] input,
[data-design-theme="terminal"] textarea,
[data-design-theme="terminal"] select,
[data-design-theme="terminal"] label {
  font-family: 'Courier New', 'Courier', monospace !important;
}

[data-design-theme="terminal"] body {
  background-color: #000000 !important;
  color: #00ff00 !important;
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.5) !important;
}

/* Terminal theme - force dark backgrounds on all containers */
[data-design-theme="terminal"] nav,
[data-design-theme="terminal"] nav.bg-fog-surface,
[data-design-theme="terminal"] nav.bg-fog-dark-surface,
[data-design-theme="terminal"] nav[class*="bg-fog-surface"],
[data-design-theme="terminal"] nav[class*="bg-fog-dark-surface"],
[data-design-theme="terminal"] header,
[data-design-theme="terminal"] footer,
[data-design-theme="terminal"] aside,
[data-design-theme="terminal"] div[class*="container"],
[data-design-theme="terminal"] div[class*="wrapper"],
[data-design-theme="terminal"] div[class*="content"] {
  background-color: #000000 !important;
  color: #00ff00 !important;
}

/* Terminal - Ensure text on post/surface backgrounds has good contrast */
[data-design-theme="terminal"] .bg-fog-post,
[data-design-theme="terminal"] [class*="bg-fog-post"],
[data-design-theme="terminal"] .bg-fog-surface,
[data-design-theme="terminal"] [class*="bg-fog-surface"] {
  color: #00ff00 !important; /* Green text on dark backgrounds - excellent contrast (15.3:1) */
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; /* Glow for visibility */
}

/* Terminal Theme - Header Banner Background */
[data-design-theme="terminal"] header > div:first-child,
[data-design-theme="terminal"] header > div[class*="bg-fog-surface"],
[data-design-theme="terminal"] header > div[class*="bg-fog-dark-surface"] {
  background-color: #000000 !important;
  background: #000000 !important;
}

/* Terminal Theme - Banner Image Tinting */
[data-design-theme="terminal"] header img[src*="aither.png"],
[data-design-theme="terminal"] header img[alt*="banner"],
[data-design-theme="terminal"] header > div:first-child img {
  filter: sepia(1) saturate(2) hue-rotate(90deg) brightness(0.8) contrast(1.2) !important; /* Strong green terminal tint */
  opacity: 0.7 !important; /* Slightly more transparent for terminal aesthetic */
}

/* Terminal Theme - Button Styles */
[data-design-theme="terminal"] .toggle-button,
[data-design-theme="terminal"] .option-button,
[data-design-theme="terminal"] .action-button,
[data-design-theme="terminal"] .back-button,
[data-design-theme="terminal"] .write-button,
[data-design-theme="terminal"] button.toggle-button,
[data-design-theme="terminal"] button.option-button {
  border-radius: 0 !important;
  border: 1px solid #00ff00 !important;
  background-color: rgba(0, 20, 0, 0.4) !important; /* Subtle dark green background for contrast */
  background: rgba(0, 20, 0, 0.4) !important; /* Override any background */
  color: #00ff00 !important; /* Ensure green text */
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 4px rgba(0, 255, 0, 0.9), 0 0 8px rgba(0, 255, 0, 0.5) !important; /* Stronger glowing text for visibility */
  font-weight: bold !important; /* Make text bolder for better visibility */
}

[data-design-theme="terminal"] .toggle-button:hover,
[data-design-theme="terminal"] .option-button:hover,
[data-design-theme="terminal"] .action-button:hover,
[data-design-theme="terminal"] .back-button:hover,
[data-design-theme="terminal"] .write-button:hover,
[data-design-theme="terminal"] .see-new-events-btn-header:hover,
[data-design-theme="terminal"] .see-more-events-btn-header:hover:not(:disabled) {
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.1) !important;
  background-color: rgba(0, 255, 0, 0.1) !important; /* Brighter on hover */
  text-shadow: 0 0 5px rgba(0, 255, 0, 1) !important; /* Stronger glow on hover */
}

/* Terminal Theme - Feed Page Buttons */
[data-design-theme="terminal"] .see-new-events-btn-header,
[data-design-theme="terminal"] .see-more-events-btn-header {
  border-radius: 0 !important;
  border: 1px solid #00ff00 !important;
  background-color: rgba(0, 20, 0, 0.4) !important;
  background: rgba(0, 20, 0, 0.4) !important;
  color: #00ff00 !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 4px rgba(0, 255, 0, 0.9), 0 0 8px rgba(0, 255, 0, 0.5) !important;
  font-weight: bold !important;
}

[data-design-theme="terminal"] .see-more-events-btn-header:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

[data-design-theme="terminal"] .toggle-button.active,
[data-design-theme="terminal"] .option-button.active,
[data-design-theme="terminal"] button.toggle-button.active,
[data-design-theme="terminal"] button.option-button.active {
  background-color: rgba(0, 255, 0, 0.25) !important; /* More visible active state */
  background: rgba(0, 255, 0, 0.25) !important; /* Override any background */
  color: #00ff00 !important; /* Ensure green text */
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), inset 0 0 10px rgba(0, 255, 0, 0.2) !important;
  text-shadow: 0 0 8px rgba(0, 255, 0, 1), 0 0 12px rgba(0, 255, 0, 0.8) !important; /* Strong glow when active */
  border-width: 2px !important; /* Thicker border when active */
}

[data-design-theme="terminal"] .find-button,
[data-design-theme="terminal"] .create-rss-button,
[data-design-theme="terminal"] .edit-rss-button,
[data-design-theme="terminal"] .bulk-action-button,
[data-design-theme="terminal"] .load-more-button,
[data-design-theme="terminal"] .clear-kind-button {
  border-radius: 0 !important;
  border: 2px solid #00ff00 !important;
  background-color: transparent !important;
  color: #00ff00 !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: bold !important;
}

/* Terminal buttons with accent background should have black text */
[data-design-theme="terminal"] .find-button.active,
[data-design-theme="terminal"] .create-rss-button.active,
[data-design-theme="terminal"] .edit-rss-button.active,
[data-design-theme="terminal"] .bulk-action-button.active,
[data-design-theme="terminal"] .load-more-button.active,
[data-design-theme="terminal"] .clear-kind-button.active {
  background-color: #00ff00 !important;
  color: #000000 !important; /* Black text on green for contrast */
}

[data-design-theme="terminal"] .find-button:hover,
[data-design-theme="terminal"] .create-rss-button:hover,
[data-design-theme="terminal"] .edit-rss-button:hover,
[data-design-theme="terminal"] .bulk-action-button:hover,
[data-design-theme="terminal"] .load-more-button:hover,
[data-design-theme="terminal"] .clear-kind-button:hover {
  background-color: rgba(0, 255, 0, 0.1) !important;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.8) !important;
}

/* Terminal Theme - Navigation Styles */
[data-design-theme="terminal"] nav {
  background-color: #000000 !important; /* Force dark background in terminal mode */
  border-top: 2px solid #00ff00 !important;
  border-bottom: 2px solid #00ff00 !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3) !important;
}

[data-design-theme="terminal"] nav a {
  font-family: 'Courier New', 'Courier', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border: 1px solid transparent !important;
  padding: 0.25rem 0.5rem !important;
  color: #00ff00 !important; /* Ensure green text */
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important; /* Glow for visibility */
}

[data-design-theme="terminal"] nav a:hover {
  border: 1px solid #00ff00 !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
  background-color: rgba(0, 255, 0, 0.05) !important;
  color: #00ff00 !important; /* Ensure green text on hover */
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.9) !important; /* Stronger glow on hover */
}

/* Terminal Theme - Tab Buttons */
[data-design-theme="terminal"] .tab-button {
  border: 1px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

[data-design-theme="terminal"] .tab-button:hover {
  border-color: #00ff00 !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

[data-design-theme="terminal"] .tab-button.active {
  border-bottom-color: #00ff00 !important;
  border-bottom-width: 2px !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.8) !important;
}

/* Terminal Theme - Form Elements */
[data-design-theme="terminal"] .filter-select,
[data-design-theme="terminal"] .filter-input,
[data-design-theme="terminal"] input[type="text"],
[data-design-theme="terminal"] input[type="search"],
[data-design-theme="terminal"] input[type="email"],
[data-design-theme="terminal"] input[type="password"],
[data-design-theme="terminal"] input[type="number"],
[data-design-theme="terminal"] input[type="url"],
[data-design-theme="terminal"] textarea,
[data-design-theme="terminal"] select,
[data-design-theme="terminal"] .sort-select,
[data-design-theme="terminal"] input[type="checkbox"] {
  border-radius: 0 !important;
  border: 1px solid #00ff00 !important;
  background-color: #000000 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

[data-design-theme="terminal"] .filter-select:focus,
[data-design-theme="terminal"] .filter-input:focus,
[data-design-theme="terminal"] input[type="text"]:focus,
[data-design-theme="terminal"] input[type="search"]:focus,
[data-design-theme="terminal"] input[type="email"]:focus,
[data-design-theme="terminal"] input[type="password"]:focus,
[data-design-theme="terminal"] input[type="number"]:focus,
[data-design-theme="terminal"] input[type="url"]:focus,
[data-design-theme="terminal"] textarea:focus,
[data-design-theme="terminal"] select:focus,
[data-design-theme="terminal"] .sort-select:focus {
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.6) !important;
  outline: none !important;
  background-color: #000000 !important;
}

/* Terminal Theme - Page Headers (Discussions, Feed, etc.) */
[data-design-theme="terminal"] .feed-header,
[data-design-theme="terminal"] .discussions-header-sticky,
[data-design-theme="terminal"] .page-header,
[data-design-theme="terminal"] [class*="header-sticky"],
[data-design-theme="terminal"] [class*="feed-header"],
[data-design-theme="terminal"] [class*="discussions-header"] {
  background-color: #000000 !important;
  background: #000000 !important;
  border-bottom-color: #00ff00 !important;
  color: #00ff00 !important;
}

/* Terminal Theme - Discussion Controls */
[data-design-theme="terminal"] .discussions-controls,
[data-design-theme="terminal"] .discussions-controls-row,
[data-design-theme="terminal"] .show-older-label,
[data-design-theme="terminal"] .show-older-label input[type="checkbox"] {
  color: #00ff00 !important;
}

[data-design-theme="terminal"] .show-older-label input[type="checkbox"] {
  accent-color: #00ff00 !important;
  background-color: #000000 !important;
  border-color: #00ff00 !important;
}

/* Terminal Theme - Embedded Event Blurbs (Reply-to/Quote) */
[data-design-theme="terminal"] .embedded-event-blurb,
[data-design-theme="terminal"] [class*="embedded-event"],
[data-design-theme="terminal"] [class*="embedded-blurb"] {
  background-color: #000000 !important;
  background: #000000 !important;
  border-left-color: #00ff00 !important;
  color: #00ff00 !important;
  border: 1px solid #00ff00 !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

[data-design-theme="terminal"] .embedded-blurb-content,
[data-design-theme="terminal"] .embedded-preview,
[data-design-theme="terminal"] .embedded-kind-info {
  color: #00ff00 !important;
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important;
}

[data-design-theme="terminal"] .view-button {
  background-color: #000000 !important;
  border-color: #00ff00 !important;
  color: #00ff00 !important;
}

[data-design-theme="terminal"] .view-button:hover {
  background-color: rgba(0, 255, 0, 0.1) !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}

/* Terminal Theme - Keyboard Shortcuts */
[data-design-theme="terminal"] .shortcuts-category-title {
  color: #00ff00 !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.8) !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

[data-design-theme="terminal"] .shortcut-description {
  color: #00ff00 !important;
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important;
  font-family: 'Courier New', 'Courier', monospace !important;
}

[data-design-theme="terminal"] .shortcut-item {
  border: 1px solid transparent !important;
}

[data-design-theme="terminal"] .shortcut-item:hover {
  background-color: rgba(0, 255, 0, 0.05) !important;
  border: 1px solid rgba(0, 255, 0, 0.3) !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.3) !important;
}

[data-design-theme="terminal"] .shortcut-keys kbd {
  background-color: rgba(0, 20, 0, 0.6) !important;
  border: 1px solid #00ff00 !important;
  border-radius: 0 !important;
  color: #00ff00 !important;
  font-family: 'Courier New', 'Courier', monospace !important;
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.8) !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.4) !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}

[data-design-theme="terminal"] body::before {
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 0, 0.05) 2px,
      rgba(0, 255, 0, 0.05) 4px
    ) !important;
  opacity: 0.3 !important;
}

[data-design-theme="terminal"].dark {
  /* Terminal theme is always dark */
}

/* socialmedia Theme */
[data-design-theme="socialmedia"] .bg-fog-bg,
[data-design-theme="socialmedia"] .bg-fog-surface,
[data-design-theme="socialmedia"] .bg-fog-post,
[data-design-theme="socialmedia"] [class*="bg-fog-"] {
  background-color: #ffffff !important;
}

[data-design-theme="socialmedia"] .text-fog-text,
[data-design-theme="socialmedia"] [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) {
  color: #0f1419 !important;
}

[data-design-theme="socialmedia"] .text-fog-text-light,
[data-design-theme="socialmedia"] [class*="text-fog-text-light"] {
  color: #536471 !important; /* Good contrast: 4.6:1 on white */
}

[data-design-theme="socialmedia"] .border-fog-border,
[data-design-theme="socialmedia"] [class*="border-fog-border"] {
  border-color: #eff3f4 !important;
}

[data-design-theme="socialmedia"] .text-fog-accent,
[data-design-theme="socialmedia"] [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) {
  color: #0d7ab8 !important; /* Improved contrast: 4.5:1 on white (meets WCAG AA) */
}

[data-design-theme="socialmedia"] .bg-fog-accent,
[data-design-theme="socialmedia"] [class*="bg-fog-accent"] {
  background-color: #1d9bf0 !important;
  color: #ffffff !important; /* White text on blue for WCAG AA compliance */
}

[data-design-theme="socialmedia"] .bg-fog-highlight,
[data-design-theme="socialmedia"] [class*="bg-fog-highlight"],
[data-design-theme="socialmedia"] [class*="hover:bg-fog-highlight"]:hover {
  background-color: #f7f9f9 !important;
}

/* Ensure text on highlight has good contrast */
[data-design-theme="socialmedia"] .bg-fog-highlight,
[data-design-theme="socialmedia"] [class*="bg-fog-highlight"] {
  color: #0f1419 !important; /* Dark text on light highlight */
}

[data-design-theme="socialmedia"] [class*="hover:text-fog-accent"]:hover {
  color: #0d7ab8 !important; /* Better contrast - meets WCAG AA */
}

[data-design-theme="socialmedia"],
[data-design-theme="socialmedia"] body,
[data-design-theme="socialmedia"] html,
[data-design-theme="socialmedia"] div,
[data-design-theme="socialmedia"] span,
[data-design-theme="socialmedia"] p,
[data-design-theme="socialmedia"] a,
[data-design-theme="socialmedia"] h1,
[data-design-theme="socialmedia"] h2,
[data-design-theme="socialmedia"] h3,
[data-design-theme="socialmedia"] h4,
[data-design-theme="socialmedia"] h5,
[data-design-theme="socialmedia"] h6,
[data-design-theme="socialmedia"] button,
[data-design-theme="socialmedia"] input,
[data-design-theme="socialmedia"] textarea,
[data-design-theme="socialmedia"] select,
[data-design-theme="socialmedia"] label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

[data-design-theme="socialmedia"] body {
  background-color: #ffffff !important;
  color: #0f1419 !important;
}

/* socialmedia - Ensure text on post/surface backgrounds has good contrast */
[data-design-theme="socialmedia"] .bg-fog-post,
[data-design-theme="socialmedia"] [class*="bg-fog-post"],
[data-design-theme="socialmedia"] .bg-fog-surface,
[data-design-theme="socialmedia"] [class*="bg-fog-surface"] {
  color: #0f1419 !important; /* Dark text on white - excellent contrast (16.8:1) */
}

/* socialmedia Theme - Banner Image Tinting */
[data-design-theme="socialmedia"] header img[src*="aither.png"],
[data-design-theme="socialmedia"] header img[alt*="banner"],
[data-design-theme="socialmedia"] header > div:first-child img {
  filter: sepia(0.2) saturate(1.1) hue-rotate(180deg) brightness(1.05) !important; /* Cool blue tint */
}

[data-design-theme="socialmedia"].dark header img[src*="aither.png"],
[data-design-theme="socialmedia"].dark header img[alt*="banner"],
[data-design-theme="socialmedia"].dark header > div:first-child img {
  filter: sepia(0.3) saturate(1.2) hue-rotate(180deg) brightness(0.85) contrast(1.1) !important; /* Stronger blue tint for dark mode */
}

/* socialmedia Theme - Button Styles */
[data-design-theme="socialmedia"] .toggle-button,
[data-design-theme="socialmedia"] .option-button,
[data-design-theme="socialmedia"] .action-button,
[data-design-theme="socialmedia"] .back-button,
[data-design-theme="socialmedia"] .write-button {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

[data-design-theme="socialmedia"] .toggle-button:hover,
[data-design-theme="socialmedia"] .option-button:hover,
[data-design-theme="socialmedia"] .action-button:hover,
[data-design-theme="socialmedia"] .back-button:hover,
[data-design-theme="socialmedia"] .write-button:hover {
  background-color: rgba(15, 20, 25, 0.1) !important;
}

[data-design-theme="socialmedia"] .toggle-button.active,
[data-design-theme="socialmedia"] .option-button.active {
  background-color: #1d9bf0 !important;
  color: #ffffff !important; /* White text on blue for contrast */
}

[data-design-theme="socialmedia"].dark .toggle-button.active,
[data-design-theme="socialmedia"].dark .option-button.active {
  background-color: #1d9bf0 !important;
  color: #ffffff !important; /* White text on blue */
}

[data-design-theme="socialmedia"] .find-button,
[data-design-theme="socialmedia"] .create-rss-button,
[data-design-theme="socialmedia"] .edit-rss-button,
[data-design-theme="socialmedia"] .bulk-action-button,
[data-design-theme="socialmedia"] .load-more-button,
[data-design-theme="socialmedia"] .clear-kind-button {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: 0.875rem 1.5rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

[data-design-theme="socialmedia"] .find-button:hover,
[data-design-theme="socialmedia"] .create-rss-button:hover,
[data-design-theme="socialmedia"] .edit-rss-button:hover,
[data-design-theme="socialmedia"] .bulk-action-button:hover,
[data-design-theme="socialmedia"] .load-more-button:hover,
[data-design-theme="socialmedia"] .clear-kind-button:hover {
  opacity: 0.9 !important;
  transform: scale(1.02) !important;
}

/* socialmedia Theme - Navigation Styles */
[data-design-theme="socialmedia"] nav {
  border-bottom: 1px solid #eff3f4 !important;
}

[data-design-theme="socialmedia"] nav a {
  font-weight: 700 !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
}

[data-design-theme="socialmedia"] nav a:hover {
  background-color: rgba(15, 20, 25, 0.1) !important;
}

[data-design-theme="socialmedia"] nav a.nav-brand {
  font-size: 1.25rem !important;
}

/* socialmedia Theme - Tab Buttons */
[data-design-theme="socialmedia"] .tab-button {
  border-radius: 9999px !important;
  font-weight: 700 !important;
  padding: 0.75rem 1.25rem !important;
}

[data-design-theme="socialmedia"] .tab-button:hover {
  background-color: rgba(15, 20, 25, 0.1) !important;
}

[data-design-theme="socialmedia"] .tab-button.active {
  background-color: rgba(29, 155, 240, 0.1) !important;
  color: #1d9bf0 !important;
  border-bottom: none !important;
}

/* socialmedia Theme - Form Elements */
[data-design-theme="socialmedia"] .filter-select,
[data-design-theme="socialmedia"] .filter-input {
  border-radius: 4px !important;
  border: 1px solid #eff3f4 !important;
  font-weight: 400 !important;
}

[data-design-theme="socialmedia"] .filter-select:focus,
[data-design-theme="socialmedia"] .filter-input:focus {
  border-color: #1d9bf0 !important;
  box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.1) !important;
  outline: none !important;
}

[data-design-theme="socialmedia"].dark .bg-fog-bg,
[data-design-theme="socialmedia"].dark .bg-fog-surface,
[data-design-theme="socialmedia"].dark [class*="bg-fog-"]:not([class*="bg-fog-post"]) {
  background-color: #000000 !important;
}

[data-design-theme="socialmedia"].dark .bg-fog-post,
[data-design-theme="socialmedia"].dark [class*="bg-fog-post"] {
  background-color: #16181c !important;
}

[data-design-theme="socialmedia"].dark .text-fog-text,
[data-design-theme="socialmedia"].dark [class*="text-fog-text"]:not([class*="text-fog-text-light"]):not([class*="text-fog-accent"]) {
  color: #e7e9ea !important;
}

[data-design-theme="socialmedia"].dark .text-fog-text-light,
[data-design-theme="socialmedia"].dark [class*="text-fog-text-light"] {
  color: #8b98a5 !important; /* Improved contrast: 4.8:1 on black (was 3.5:1) */
}

[data-design-theme="socialmedia"].dark .border-fog-border,
[data-design-theme="socialmedia"].dark [class*="border-fog-border"] {
  border-color: #2f3336 !important;
}

[data-design-theme="socialmedia"].dark .bg-fog-highlight,
[data-design-theme="socialmedia"].dark [class*="bg-fog-highlight"],
[data-design-theme="socialmedia"].dark [class*="hover:bg-fog-highlight"]:hover {
  background-color: #16181c !important;
}

/* Ensure text on dark highlight has good contrast */
[data-design-theme="socialmedia"].dark .bg-fog-highlight,
[data-design-theme="socialmedia"].dark [class*="bg-fog-highlight"] {
  color: #e7e9ea !important; /* Light text on dark highlight */
}

/* socialmedia dark mode accent colors */
[data-design-theme="socialmedia"].dark .text-fog-accent,
[data-design-theme="socialmedia"].dark [class*="text-fog-accent"]:not([class*="bg-fog-accent"]) {
  color: #4fc3f7 !important; /* Lighter blue for better contrast on dark: 4.2:1 */
}

[data-design-theme="socialmedia"].dark .bg-fog-accent,
[data-design-theme="socialmedia"].dark [class*="bg-fog-accent"] {
  background-color: #1d9bf0 !important;
  color: #ffffff !important; /* White text on blue */
}

[data-design-theme="socialmedia"].dark [class*="hover:text-fog-accent"]:hover {
  color: #4fc3f7 !important; /* Better contrast on dark */
}

[data-design-theme="socialmedia"].dark body {
  background-color: #000000 !important;
  color: #e7e9ea !important;
}

/* socialmedia dark - Ensure text on post/surface backgrounds has good contrast */
[data-design-theme="socialmedia"].dark .bg-fog-post,
[data-design-theme="socialmedia"].dark [class*="bg-fog-post"] {
  color: #e7e9ea !important; /* Light text on dark post - excellent contrast (6.8:1) */
}

[data-design-theme="socialmedia"].dark .bg-fog-surface,
[data-design-theme="socialmedia"].dark [class*="bg-fog-surface"] {
  color: #e7e9ea !important; /* Light text on black surface - excellent contrast (15.8:1) */
}

[data-design-theme="socialmedia"].dark nav {
  border-bottom-color: #2f3336 !important;
}

[data-design-theme="socialmedia"].dark nav a:hover {
  background-color: rgba(231, 233, 234, 0.1) !important;
}

[data-design-theme="socialmedia"].dark .toggle-button:hover,
[data-design-theme="socialmedia"].dark .option-button:hover,
[data-design-theme="socialmedia"].dark .action-button:hover,
[data-design-theme="socialmedia"].dark .back-button:hover,
[data-design-theme="socialmedia"].dark .write-button:hover {
  background-color: rgba(231, 233, 234, 0.1) !important;
}

[data-design-theme="socialmedia"].dark .tab-button:hover {
  background-color: rgba(231, 233, 234, 0.1) !important;
}

[data-design-theme="socialmedia"].dark .tab-button.active {
  background-color: rgba(29, 155, 240, 0.1) !important;
}

[data-design-theme="socialmedia"].dark .filter-select,
[data-design-theme="socialmedia"].dark .filter-input {
  border-color: #2f3336 !important;
}

[data-design-theme="socialmedia"].dark .filter-select:focus,
[data-design-theme="socialmedia"].dark .filter-input:focus {
  border-color: #1d9bf0 !important;
}

/* Fog aesthetic base styles */
.bg-fog {
  background-color: #f1f5f9;
}

.dark .bg-fog {
  background-color: #0f172a;
}

.bg-fog-surface {
  background-color: #f8fafc;
}

.dark .bg-fog-surface {
  background-color: #1e293b;
}

/* Ensure all UI elements respect dark/light mode regardless of design theme */
/* Cards, menus, modals, embedded events should use dark backgrounds in dark mode */
/* This is the default for fog theme - theme-specific rules below will override */
.dark .bg-fog-post,
.dark [class*="bg-fog-post"],
.dark .bg-fog-surface,
.dark [class*="bg-fog-surface"] {
  background-color: var(--fog-dark-post, #334155) !important;
}

/* Fog theme dark mode - explicit override to ensure it works */
.dark [data-design-theme="fog"] .bg-fog-post,
.dark [data-design-theme="fog"] [class*="bg-fog-post"] {
  background-color: #334155 !important; /* fog-dark-post */
}

.dark [data-design-theme="fog"] .bg-fog-surface,
.dark [data-design-theme="fog"] [class*="bg-fog-surface"] {
  background-color: #1e293b !important; /* fog-dark-surface */
}

/* Fix CSS custom properties that use white fallbacks - set dark values in dark mode */
.dark {
  --fog-post: #334155;
  --fog-surface: #1e293b;
  --fog-bg: #0f172a;
}

/* Ensure navigation bar is dark in dark mode for fog theme */
.dark [data-design-theme="fog"] nav,
.dark [data-design-theme="fog"] nav.bg-fog-surface,
.dark nav.bg-fog-surface,
.dark nav {
  background-color: #1e293b !important; /* fog-dark-surface */
}

/* Force dark backgrounds for elements that might have inline styles with white fallbacks */
.dark [style*="var(--fog-post"] {
  background: var(--fog-dark-post, #334155) !important;
  background-color: var(--fog-dark-post, #334155) !important;
}

.dark [style*="var(--fog-surface"] {
  background: var(--fog-dark-surface, #1e293b) !important;
  background-color: var(--fog-dark-surface, #1e293b) !important;
}

.dark [style*="var(--fog-bg"] {
  background: var(--fog-dark-bg, #0f172a) !important;
  background-color: var(--fog-dark-bg, #0f172a) !important;
}

/* Catch any remaining white backgrounds in dark mode for fog theme */
.dark [data-design-theme="fog"] [style*="#ffffff"],
.dark [data-design-theme="fog"] [style*="#fff"],
.dark [data-design-theme="fog"] [style*="background: #ffffff"],
.dark [data-design-theme="fog"] [style*="background-color: #ffffff"] {
  background: var(--fog-dark-post, #334155) !important;
  background-color: var(--fog-dark-post, #334155) !important;
}


/* Light mode - ensure light backgrounds */
:not(.dark) .bg-fog-post,
:not(.dark) [class*="bg-fog-post"],
:not(.dark) .bg-fog-surface,
:not(.dark) [class*="bg-fog-surface"] {
  background-color: var(--fog-post, #ffffff) !important;
}


/* Override theme-specific backgrounds when dark mode is active */
/* Fog theme dark mode body background */
.dark [data-design-theme="fog"] body {
  background-color: #0f172a !important; /* fog-dark-bg */
}

/* Ensure preference-section elements have dark backgrounds in dark mode */
.dark .preference-section,
.dark [class*="preference-section"] {
  background-color: var(--fog-dark-post, #334155) !important;
  border-color: var(--fog-dark-border, #475569) !important;
  color: var(--fog-dark-text, #cbd5e1) !important;
}

/* Theme-specific preference-section backgrounds */
.dark [data-design-theme="forum"] .preference-section,
.dark [data-design-theme="forum"] [class*="preference-section"] {
  background-color: #1a1a1b !important;
  border-color: #343536 !important;
  color: #d7dadc !important;
}

.dark [data-design-theme="socialmedia"] .preference-section,
.dark [data-design-theme="socialmedia"] [class*="preference-section"] {
  background-color: #16181c !important;
  border-color: #2f3336 !important;
  color: #e7e9ea !important;
}

.dark [data-design-theme="terminal"] .preference-section,
.dark [data-design-theme="terminal"] [class*="preference-section"],
[data-design-theme="terminal"] .preference-section,
[data-design-theme="terminal"] [class*="preference-section"] {
  background-color: #000000 !important;
  border-color: #00ff00 !important;
  color: #00ff00 !important;
}

/* Disabled toggle button styling */
.toggle-button:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

[data-design-theme="terminal"] .toggle-button:disabled {
  opacity: 0.5 !important;
  border-color: #00cc00 !important;
  color: #00cc00 !important;
}

/* Forum theme - dark mode */
.dark [data-design-theme="forum"] .bg-fog-post,
.dark [data-design-theme="forum"] [class*="bg-fog-post"],
.dark [data-design-theme="forum"] .bg-fog-surface,
.dark [data-design-theme="forum"] [class*="bg-fog-surface"] {
  background-color: #1a1a1b !important;
}

.dark [data-design-theme="socialmedia"] .bg-fog-post,
.dark [data-design-theme="socialmedia"] [class*="bg-fog-post"],
.dark [data-design-theme="socialmedia"] .bg-fog-surface,
.dark [data-design-theme="socialmedia"] [class*="bg-fog-surface"] {
  background-color: #16181c !important;
}

/* Terminal theme - dark mode (always dark) */
.dark [data-design-theme="terminal"] .bg-fog-post,
.dark [data-design-theme="terminal"] [class*="bg-fog-post"],
.dark [data-design-theme="terminal"] .bg-fog-surface,
.dark [data-design-theme="terminal"] [class*="bg-fog-surface"],
.dark [data-design-theme="terminal"] .bg-fog-bg,
.dark [data-design-theme="terminal"] [class*="bg-fog-bg"],
.dark [data-design-theme="terminal"] body,
.dark [data-design-theme="terminal"] main,
.dark [data-design-theme="terminal"] article,
.dark [data-design-theme="terminal"] section {
  background-color: #000000 !important;
  color: #00ff00 !important;
}

/* Light mode overrides for theme-specific backgrounds */
:not(.dark) [data-design-theme="forum"] .bg-fog-post,
:not(.dark) [data-design-theme="forum"] [class*="bg-fog-post"],
:not(.dark) [data-design-theme="forum"] .bg-fog-surface,
:not(.dark) [data-design-theme="forum"] [class*="bg-fog-surface"] {
  background-color: #ffffff !important;
}

:not(.dark) [data-design-theme="socialmedia"] .bg-fog-post,
:not(.dark) [data-design-theme="socialmedia"] [class*="bg-fog-post"],
:not(.dark) [data-design-theme="socialmedia"] .bg-fog-surface,
:not(.dark) [data-design-theme="socialmedia"] [class*="bg-fog-surface"] {
  background-color: #ffffff !important;
}

/* Terminal theme - force dark backgrounds everywhere, even in light mode */
:not(.dark) [data-design-theme="terminal"] .bg-fog-post,
:not(.dark) [data-design-theme="terminal"] [class*="bg-fog-post"],
:not(.dark) [data-design-theme="terminal"] .bg-fog-surface,
:not(.dark) [data-design-theme="terminal"] [class*="bg-fog-surface"],
:not(.dark) [data-design-theme="terminal"] .bg-fog-bg,
:not(.dark) [data-design-theme="terminal"] [class*="bg-fog-bg"],
:not(.dark) [data-design-theme="terminal"] body,
:not(.dark) [data-design-theme="terminal"] main,
:not(.dark) [data-design-theme="terminal"] article,
:not(.dark) [data-design-theme="terminal"] section {
  background-color: #000000 !important; /* Terminal is always dark */
  color: #00ff00 !important; /* Green text */
}

/* Ensure modals, menus, dropdowns, and embedded events respect dark/light mode */
/* Only target specific classes, not broad patterns that might match unintended elements */
.dark .modal-content {
  background-color: var(--fog-dark-post, #334155) !important;
  color: var(--fog-dark-text, #cbd5e1) !important;
}

:not(.dark) .modal-content {
  background-color: var(--fog-post, #ffffff) !important;
  color: var(--fog-text, #475569) !important;
}

/* Theme-specific overrides for modals and menus */
.dark [data-design-theme="forum"] .modal-content,
.dark [data-design-theme="forum"] [class*="modal"],
.dark [data-design-theme="forum"] [class*="menu"],
.dark [data-design-theme="forum"] [class*="card"] {
  background-color: #1a1a1b !important;
  color: #d7dadc !important;
}

:not(.dark) [data-design-theme="forum"] .modal-content,
:not(.dark) [data-design-theme="forum"] [class*="modal"],
:not(.dark) [data-design-theme="forum"] [class*="menu"],
:not(.dark) [data-design-theme="forum"] [class*="card"] {
  background-color: #ffffff !important;
  color: #1c1c1c !important;
}

.dark [data-design-theme="socialmedia"] .modal-content,
.dark [data-design-theme="socialmedia"] [class*="modal"],
.dark [data-design-theme="socialmedia"] [class*="menu"],
.dark [data-design-theme="socialmedia"] [class*="card"] {
  background-color: #16181c !important;
  color: #e7e9ea !important;
}

:not(.dark) [data-design-theme="socialmedia"] .modal-content,
:not(.dark) [data-design-theme="socialmedia"] [class*="modal"],
:not(.dark) [data-design-theme="socialmedia"] [class*="menu"],
:not(.dark) [data-design-theme="socialmedia"] [class*="card"] {
  background-color: #ffffff !important;
  color: #0f1419 !important;
}

/* Terminal theme - always dark for all UI elements */
.dark [data-design-theme="terminal"] .modal-content,
.dark [data-design-theme="terminal"] [class*="modal"],
.dark [data-design-theme="terminal"] [class*="menu"],
.dark [data-design-theme="terminal"] [class*="card"],
.dark [data-design-theme="terminal"] [class*="embedded"],
.dark [data-design-theme="terminal"] [class*="drawer"],
.dark [data-design-theme="terminal"] [class*="panel"],
[data-design-theme="terminal"] .modal-content,
[data-design-theme="terminal"] [class*="modal"],
[data-design-theme="terminal"] [class*="menu"],
[data-design-theme="terminal"] [class*="card"],
[data-design-theme="terminal"] [class*="embedded"],
[data-design-theme="terminal"] [class*="drawer"],
[data-design-theme="terminal"] [class*="panel"],
:not(.dark) [data-design-theme="terminal"] .modal-content,
:not(.dark) [data-design-theme="terminal"] [class*="modal"],
:not(.dark) [data-design-theme="terminal"] [class*="menu"],
:not(.dark) [data-design-theme="terminal"] [class*="card"],
:not(.dark) [data-design-theme="terminal"] [class*="embedded"],
:not(.dark) [data-design-theme="terminal"] [class*="drawer"],
:not(.dark) [data-design-theme="terminal"] [class*="panel"] {
  background-color: #000000 !important;
  color: #00ff00 !important;
  text-shadow: 0 0 3px rgba(0, 255, 0, 0.6) !important;
}

/* Profile pictures - display in full color */
/* Profile pictures - all instances */
img.profile-picture,
.profile-badge img,
.profile-picture,
img[alt*="profile" i],
img[alt*="avatar" i],
img[src*="avatar" i],
img[src*="profile" i] {
  /* No grayscale filter - profile pictures should be in full color */
}

/* Emoji images - no grayscale filter, display in full color */
/* Only apply to actual image elements, not text emojis */
img[alt*="emoji" i],
img[src*="emoji" i],
img.emoji-inline {
  display: inline-block;
  /* No grayscale filter - emojis should be in full color */
}

/* Ensure normal Unicode emojis (text characters) are displayed correctly */
/* Monospace font is already applied globally via body and * { font-family: inherit } */
/* Emojis will still display correctly in monospace fonts */

/* Emoji picker buttons - apply grayscale filter to buttons that open the picker */
/* But NOT to emojis inside the picker drawer or rendered content */
.toolbar-button,
.reaction-btn.heart-btn {
  filter: grayscale(100%) sepia(15%) hue-rotate(200deg) saturate(60%) brightness(0.95);
}

.dark .toolbar-button,
.dark .reaction-btn.heart-btn {
  filter: grayscale(100%) sepia(20%) hue-rotate(200deg) saturate(70%) brightness(0.9);
}

/* Override: emojis in picker drawer should be full color */
.emoji-drawer *,
.emoji-picker * {
  filter: none !important;
}

/* Override: emojis in rendered content should be full color */
.markdown-content *,
.post-content *,
.reaction-display * {
  filter: none !important;
}

/* Content images should be prominent - no grayscale filters */
.markdown-content img,
.markdown-content video,
.markdown-content audio,
.anon-content img {
  filter: none !important;
}

/* Responsive images and media - max 600px, scale down on smaller screens */
/* Exclude profile pictures, avatars, and emoji images from responsive sizing */
img:not(.profile-picture):not([alt*="profile" i]):not([alt*="avatar" i]):not([src*="avatar" i]):not([src*="profile" i]):not(.relay-icon):not(.relay-favorite-pic):not(.emoji-inline):not(.avatar),
video,
audio {
  max-width: 600px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Ensure media in markdown content is responsive */
/* Exclude profile pictures, avatars, and emoji images from responsive sizing - they should maintain their fixed size */
.markdown-content img:not(.profile-picture):not([class*="profile"]):not(.emoji-inline):not(.avatar),
.markdown-content video,
.markdown-content audio,
.post-content img:not(.profile-picture):not([class*="profile"]):not(.emoji-inline):not(.avatar),
.post-content video,
.post-content audio {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: block;
}

/* Ensure avatars in mentions autocomplete are not affected by responsive image styles */
.mentions-autocomplete img.avatar,
.mentions-autocomplete .avatar {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Media gallery items should also be responsive */
.media-gallery img,
.media-gallery video {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* Cover images should be responsive */
.cover-image img {
  max-width: 600px;
  width: 100%;
  height: auto;
}

/* Audio players should be full width but constrained */
audio {
  max-width: 600px;
  width: 100%;
}

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