claudetools/projects/community-forum/theme-v2.less

/* ═══════════════════════════════════════════════════════════
   THE COMPUTER GURU SHOW COMMUNITY — Theme v2
   Redesigned for readability. Inspired by GitHub Dark / Discord.
   Font: Lexend | Accent: #fe7400 | Base: layered grays
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Accent ──────────────────────────────────────── */
  --g-orange: #fe7400;
  --g-orange-hover: #ff8c2a;
  --g-orange-muted: #e06800;
  --g-orange-glow: rgba(254, 116, 0, 0.15);
  --g-orange-subtle: rgba(254, 116, 0, 0.08);

  /* ── Surfaces (layered, each step clearly distinct) ── */
  --g-base: #0d1117;          /* page background */
  --g-surface-1: #161b22;     /* cards, posts */
  --g-surface-2: #1c2129;     /* hover state, elevated */
  --g-surface-3: #21262d;     /* active/selected */
  --g-overlay: #2d333b;       /* dropdowns, modals */

  /* ── Borders ─────────────────────────────────────── */
  --g-border: #30363d;
  --g-border-light: #3d444d;
  --g-border-active: #fe7400;

  /* ── Text (WCAG AA against surface-1) ────────────── */
  --g-text-primary: #e6edf3;    /* 13.5:1 on surface-1 */
  --g-text-secondary: #9eaab6;  /* 6.2:1 on surface-1 */
  --g-text-muted: #6e7a86;      /* 3.8:1 on surface-1 */
  --g-text-link: #fe7400;
  --g-text-bright: #ffffff;

  /* ── Functional ──────────────────────────────────── */
  --g-success: #3fb950;
  --g-danger: #f85149;
  --g-warning: #d29922;

  /* ── Radii / Shadows / Motion ────────────────────── */
  --g-radius: 8px;
  --g-radius-lg: 12px;
  --g-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --g-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --g-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --g-ease: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ══════════════════════════════════════════════════════
   GLOBAL FOUNDATION
   ══════════════════════════════════════════════════════ */

body, .App {
  font-family: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background: var(--g-base) !important;
  color: var(--g-text-primary) !important;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */

.Header {
  background: var(--g-surface-1) !important;
  border-bottom: 1px solid var(--g-border) !important;
  box-shadow: var(--g-shadow-sm) !important;
}

.Header-title {
  font-weight: 700 !important;
  font-size: 1.2em !important;
  letter-spacing: -0.02em !important;
}

.Header-title a {
  color: var(--g-text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s var(--g-ease) !important;
}

.Header-title a:hover {
  color: var(--g-orange) !important;
}

/* Header nav buttons */
.Header-controls .Button {
  color: var(--g-text-secondary) !important;
  font-weight: 500 !important;
  border-radius: var(--g-radius) !important;
  transition: all 0.2s var(--g-ease) !important;
}

.Header-controls .Button:hover {
  color: var(--g-text-primary) !important;
  background: var(--g-surface-2) !important;
}

/* Sign Up button */
.Header .Button--primary,
.LogInModal .Button--primary,
.SignUpModal .Button--primary {
  background: var(--g-orange) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--g-radius) !important;
  font-weight: 600 !important;
  font-size: 0.85em !important;
  padding: 8px 18px !important;
  box-shadow: 0 1px 4px rgba(254, 116, 0, 0.25) !important;
  transition: all 0.2s var(--g-ease) !important;
}

.Header .Button--primary:hover,
.LogInModal .Button--primary:hover,
.SignUpModal .Button--primary:hover {
  background: var(--g-orange-hover) !important;
  box-shadow: 0 3px 12px rgba(254, 116, 0, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Log In button */
.Header .LogInButton,
.Header .Button:not(.Button--primary) {
  color: var(--g-text-secondary) !important;
}

.Header .LogInButton:hover,
.Header .Button:not(.Button--primary):hover {
  color: var(--g-text-primary) !important;
}


/* ══════════════════════════════════════════════════════
   HERO / WELCOME BANNER
   ══════════════════════════════════════════════════════ */

.Hero {
  background: var(--g-surface-1) !important;
  border-bottom: 1px solid var(--g-border) !important;
  text-align: center !important;
  padding: 2.5rem 2rem !important;
  position: relative;
  overflow: hidden;
}

/* Subtle accent glow behind hero */
.Hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 100%;
  background: radial-gradient(ellipse, rgba(254, 116, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.Hero .container {
  position: relative;
  z-index: 1;
}

.Hero-title {
  font-weight: 800 !important;
  font-size: 2em !important;
  letter-spacing: -0.03em !important;
  color: var(--g-text-bright) !important;
}

.Hero-subtitle,
.Hero .container p {
  color: var(--g-text-secondary) !important;
  font-weight: 400 !important;
  font-size: 1.05em !important;
  max-width: 580px;
  margin: 0.5em auto 0;
  line-height: 1.6 !important;
}

/* Hide welcome banner dismiss X */
.Hero .Button--icon {
  color: var(--g-text-muted) !important;
}

.Hero .Button--icon:hover {
  color: var(--g-text-primary) !important;
}


/* ══════════════════════════════════════════════════════
   SIDEBAR / NAVIGATION
   ══════════════════════════════════════════════════════ */

.IndexPage-nav,
.sideNav {
  background: transparent !important;
}

.SideNav .Button {
  color: var(--g-text-secondary) !important;
  border-radius: var(--g-radius) !important;
  transition: all 0.15s var(--g-ease) !important;
  font-weight: 500 !important;
}

.SideNav .Button:hover {
  color: var(--g-text-primary) !important;
  background: var(--g-surface-2) !important;
}

.SideNav .Button.active {
  color: var(--g-text-bright) !important;
  background: var(--g-surface-3) !important;
  border-left: 3px solid var(--g-orange) !important;
  font-weight: 600 !important;
}

/* Tags in nav bar */
.SideNav a,
.TagLinkButton {
  color: var(--g-text-secondary) !important;
  font-size: 0.9em !important;
}

.SideNav a:hover,
.TagLinkButton:hover {
  color: var(--g-text-primary) !important;
}

.SideNav .icon,
.SideNav .Button .icon {
  opacity: 0.85 !important;
}

.TagLinkButton .TagLabel-text {
  color: inherit !important;
}

/* Start Discussion button */
.IndexPage-newDiscussion .Button,
.IndexPage-toolbar .Button--primary {
  background: var(--g-orange) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--g-radius) !important;
  padding: 10px 20px !important;
  box-shadow: 0 1px 4px rgba(254, 116, 0, 0.2) !important;
  transition: all 0.2s var(--g-ease) !important;
}

.IndexPage-newDiscussion .Button:hover,
.IndexPage-toolbar .Button--primary:hover {
  background: var(--g-orange-hover) !important;
  box-shadow: 0 3px 12px rgba(254, 116, 0, 0.3) !important;
  transform: translateY(-1px) !important;
}


/* ══════════════════════════════════════════════════════
   DISCUSSION LIST
   ══════════════════════════════════════════════════════ */

.DiscussionList {
  background: transparent !important;
}

.DiscussionListItem {
  background: var(--g-surface-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  margin-bottom: 6px !important;
  transition: all 0.15s var(--g-ease) !important;
}

.DiscussionListItem:hover {
  background: var(--g-surface-2) !important;
  border-color: var(--g-border-light) !important;
}

.DiscussionListItem-content {
  padding: 14px 18px !important;
}

/* Discussion titles — high contrast */
.DiscussionListItem-title {
  font-weight: 600 !important;
  font-size: 1.02em !important;
}

.DiscussionListItem-title a {
  color: var(--g-text-primary) !important;
  text-decoration: none !important;
  transition: color 0.15s var(--g-ease) !important;
}

.DiscussionListItem-title a:hover {
  color: var(--g-orange) !important;
}

/* Discussion meta — clearly secondary but readable */
.DiscussionListItem-info,
.DiscussionListItem-info a,
.DiscussionListItem time {
  color: var(--g-text-muted) !important;
}

.DiscussionListItem .username {
  color: var(--g-orange) !important;
  font-weight: 600 !important;
}

/* Reply count */
.DiscussionListItem-count {
  color: var(--g-text-secondary) !important;
}

.DiscussionListItem-count strong {
  color: var(--g-text-primary) !important;
}

/* Sort dropdown */
.IndexPage-toolbar .Button {
  color: var(--g-text-secondary) !important;
  border: 1px solid var(--g-border) !important;
  background: var(--g-surface-1) !important;
  border-radius: var(--g-radius) !important;
}

.IndexPage-toolbar .Button:hover {
  color: var(--g-text-primary) !important;
  border-color: var(--g-border-light) !important;
  background: var(--g-surface-2) !important;
}

/* Refresh button */
.IndexPage-toolbar .Button--icon {
  color: var(--g-text-muted) !important;
  border: none !important;
  background: transparent !important;
}

.IndexPage-toolbar .Button--icon:hover {
  color: var(--g-text-primary) !important;
}


/* ══════════════════════════════════════════════════════
   TAGS / BADGES
   ══════════════════════════════════════════════════════ */

.TagLabel {
  border-radius: 16px !important;
  font-weight: 600 !important;
  font-size: 0.72em !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 3px 10px !important;
}

.Badge {
  border-radius: 50% !important;
}


/* ══════════════════════════════════════════════════════
   DISCUSSION PAGE
   ══════════════════════════════════════════════════════ */

.DiscussionPage-discussion {
  background: transparent !important;
}

.DiscussionHero {
  background: var(--g-surface-1) !important;
  border-bottom: 1px solid var(--g-border) !important;
  padding: 2rem 0 !important;
}

.DiscussionHero-title {
  font-weight: 800 !important;
  font-size: 1.7em !important;
  letter-spacing: -0.02em !important;
  color: var(--g-text-bright) !important;
}

/* ── Posts ──────────────────────────────────────────── */

.PostStream-item {
  border: none !important;
}

.Post {
  background: var(--g-surface-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

.Post-header {
  padding: 14px 20px 0 !important;
}

.Post-header,
.Post-header a,
.Post-header time {
  color: var(--g-text-muted) !important;
}

.Post-header .username,
.Post-header .username a {
  color: var(--g-orange) !important;
  font-weight: 600 !important;
}

.Post-body {
  padding: 14px 20px 20px !important;
  font-size: 0.95em !important;
  line-height: 1.75 !important;
}

.Post-body,
.Post-body p,
.Post-body li {
  color: var(--g-text-primary) !important;
}

/* ── Post typography ───────────────────────────────── */

.Post-body h2 {
  color: var(--g-text-bright) !important;
  font-weight: 700 !important;
  font-size: 1.35em !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.5em !important;
  padding-bottom: 0.3em !important;
  border-bottom: 1px solid var(--g-border) !important;
}

.Post-body h3 {
  color: var(--g-text-primary) !important;
  font-weight: 600 !important;
  font-size: 1.12em !important;
  margin-top: 1.4em !important;
}

.Post-body a {
  color: var(--g-orange) !important;
  text-decoration: none !important;
  transition: color 0.15s var(--g-ease) !important;
}

.Post-body a:hover {
  color: var(--g-orange-hover) !important;
  text-decoration: underline !important;
}

.Post-body strong {
  color: var(--g-text-bright) !important;
  font-weight: 600 !important;
}

/* Inline code */
.Post-body code {
  background: rgba(254, 116, 0, 0.08) !important;
  color: var(--g-orange-hover) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  font-size: 0.87em !important;
  border: 1px solid rgba(254, 116, 0, 0.12) !important;
}

/* Code blocks */
.Post-body pre {
  background: var(--g-base) !important;
  border: 1px solid var(--g-border) !important;
  border-left: 3px solid var(--g-orange) !important;
  border-radius: var(--g-radius) !important;
  padding: 16px 20px !important;
  overflow-x: auto !important;
  margin: 1.2em 0 !important;
}

.Post-body pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--g-text-primary) !important;
  font-size: 0.85em !important;
  line-height: 1.6 !important;
}

/* Force all code block text to be readable - override syntax highlighting */
.Post-body pre code *,
.Post-body pre code span,
.Post-body pre code .hljs-keyword,
.Post-body pre code .hljs-string,
.Post-body pre code .hljs-built_in,
.Post-body pre code .hljs-comment,
.Post-body pre code .hljs-variable,
.Post-body pre code .hljs-title,
.Post-body pre code .hljs-attr,
.Post-body pre code .hljs-selector-tag,
.Post-body pre code .hljs-name,
.Post-body pre code .hljs-type,
.Post-body pre code .hljs-number,
.Post-body pre code .hljs-literal,
.Post-body pre code .hljs-symbol,
.Post-body pre code .hljs-bullet {
  color: #c9d1d9 !important;
}

/* Add some color variation for readability */
.Post-body pre code .hljs-keyword { color: #ff7b72 !important; }
.Post-body pre code .hljs-string { color: #a5d6ff !important; }
.Post-body pre code .hljs-comment { color: #8b949e !important; font-style: italic; }
.Post-body pre code .hljs-number,
.Post-body pre code .hljs-literal { color: #79c0ff !important; }
.Post-body pre code .hljs-variable,
.Post-body pre code .hljs-title { color: #d2a8ff !important; }
.Post-body pre code .hljs-built_in { color: #ffa657 !important; }

/* Blockquotes */
.Post-body blockquote {
  border-left: 3px solid var(--g-orange) !important;
  background: var(--g-orange-subtle) !important;
  padding: 10px 18px !important;
  margin: 1em 0 !important;
  border-radius: 0 var(--g-radius) var(--g-radius) 0 !important;
  color: var(--g-text-secondary) !important;
}

.Post-body hr {
  border: none !important;
  height: 1px !important;
  background: var(--g-border) !important;
  margin: 1.8em 0 !important;
}

.Post-body ul, .Post-body ol {
  color: var(--g-text-primary) !important;
  padding-left: 1.5em !important;
}

.Post-body li {
  margin-bottom: 0.35em !important;
}


/* ══════════════════════════════════════════════════════
   COMPOSER
   ══════════════════════════════════════════════════════ */

.Composer {
  background: var(--g-surface-1) !important;
  border-top: 1px solid var(--g-border) !important;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3) !important;
}

.TextEditor-editor,
.TextEditor textarea {
  background: var(--g-base) !important;
  color: var(--g-text-primary) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.TextEditor-editor:focus,
.TextEditor textarea:focus {
  border-color: var(--g-orange) !important;
  box-shadow: 0 0 0 2px var(--g-orange-glow) !important;
}


/* ══════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════ */

.Modal-content {
  background: var(--g-overlay) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-shadow-lg) !important;
  color: var(--g-text-primary) !important;
}

.Modal-header {
  background: var(--g-surface-3) !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) var(--g-radius-lg) 0 0 !important;
}

.Modal-header h3 {
  color: var(--g-text-bright) !important;
}

.Modal .Form-group input,
.Modal .Form-group textarea {
  background: var(--g-base) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text-primary) !important;
  border-radius: var(--g-radius) !important;
}

.Modal .Form-group input:focus,
.Modal .Form-group textarea:focus {
  border-color: var(--g-orange) !important;
  box-shadow: 0 0 0 2px var(--g-orange-glow) !important;
}

.Modal .Form-group label {
  color: var(--g-text-secondary) !important;
}


/* ══════════════════════════════════════════════════════
   BUTTONS (GLOBAL)
   ══════════════════════════════════════════════════════ */

.Button {
  border-radius: var(--g-radius) !important;
  transition: all 0.15s var(--g-ease) !important;
  font-weight: 500 !important;
}

.Button--primary {
  background: var(--g-orange) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 600 !important;
}

.Button--primary:hover {
  background: var(--g-orange-hover) !important;
  transform: translateY(-1px) !important;
}


/* ══════════════════════════════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--g-base) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text-primary) !important;
  border-radius: var(--g-radius) !important;
  transition: border-color 0.15s var(--g-ease) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  border-color: var(--g-orange) !important;
  box-shadow: 0 0 0 2px var(--g-orange-glow) !important;
  outline: none !important;
}


/* ══════════════════════════════════════════════════════
   DROPDOWN MENUS
   ══════════════════════════════════════════════════════ */

.Dropdown-menu {
  background: var(--g-overlay) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-shadow-md) !important;
}

.Dropdown-menu li > a,
.Dropdown-menu li > button,
.Dropdown-menu li > span {
  color: var(--g-text-primary) !important;
}

.Dropdown-menu li > a:hover,
.Dropdown-menu li > button:hover {
  background: var(--g-surface-3) !important;
  color: var(--g-orange) !important;
}


/* ══════════════════════════════════════════════════════
   SEARCH
   ══════════════════════════════════════════════════════ */

.Search-input input {
  background: var(--g-surface-2) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text-primary) !important;
  border-radius: 20px !important;
}

.Search-input input::placeholder {
  color: var(--g-text-muted) !important;
}

.Search-input input:focus {
  border-color: var(--g-orange) !important;
  background: var(--g-surface-1) !important;
}

.Search-results {
  background: var(--g-overlay) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
}


/* ══════════════════════════════════════════════════════
   TAGS PAGE
   ══════════════════════════════════════════════════════ */

.TagTile {
  background: var(--g-surface-1) !important;
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  transition: all 0.15s var(--g-ease) !important;
}

.TagTile:hover {
  background: var(--g-surface-2) !important;
  border-color: var(--g-border-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--g-shadow-md) !important;
}

.TagTile-name {
  color: var(--g-text-primary) !important;
  font-weight: 700 !important;
}

.TagTile-description {
  color: var(--g-text-secondary) !important;
  font-size: 0.85em !important;
}


/* ══════════════════════════════════════════════════════
   NOTIFICATIONS
   ══════════════════════════════════════════════════════ */

.NotificationList {
  background: var(--g-overlay) !important;
  border: 1px solid var(--g-border) !important;
}


/* ══════════════════════════════════════════════════════
   AVATARS
   ══════════════════════════════════════════════════════ */

.Avatar {
  border-radius: var(--g-radius) !important;
}


/* ══════════════════════════════════════════════════════
   LOADING
   ══════════════════════════════════════════════════════ */

.LoadingIndicator-container {
  color: var(--g-orange) !important;
}

/* Hide stuck loading bar */
.App > .loading-indicator {
  display: none !important;
}


/* ══════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════ */

.Alert {
  border-radius: var(--g-radius) !important;
}

.Alert--success {
  background: rgba(63, 185, 80, 0.12) !important;
  border: 1px solid rgba(63, 185, 80, 0.25) !important;
  color: #56d364 !important;
}


/* ══════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--g-base);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--g-border-light);
}


/* ══════════════════════════════════════════════════════
   FOOTER & MISC
   ══════════════════════════════════════════════════════ */

.App-footer {
  color: var(--g-text-muted) !important;
  padding: 2rem 0 !important;
}

.container {
  max-width: 1100px !important;
}

/* Empty state */
.DiscussionList-empty,
.Placeholder {
  color: var(--g-text-secondary) !important;
}

/* Selection */
::selection {
  background: var(--g-orange) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .Hero-title { font-size: 1.4em !important; }
  .DiscussionHero-title { font-size: 1.3em !important; }
  .Post-body { padding: 12px 14px 14px !important; }
}


/* ══════════════════════════════════════════════════════
   FLARUM BASE OVERRIDES
   These target elements where Flarum's default CSS
   applies dark text colors meant for light themes.
   ══════════════════════════════════════════════════════ */

/* Global heading reset — Flarum sets h1-h6 to near-black */
h1, h2, h3, h4, h5, h6 {
  color: var(--g-text-primary) !important;
}

/* Discussion list — the main link wrapper */
.DiscussionListItem-main {
  color: var(--g-text-primary) !important;
}

.DiscussionListItem-main:hover {
  color: var(--g-text-primary) !important;
}

/* Discussion title heading inside the list */
.DiscussionListItem-title h2,
.DiscussionListItem-title h3,
.DiscussionListItem .DiscussionListItem-title {
  color: var(--g-text-primary) !important;
}

/* All links inside discussion list items */
.DiscussionListItem a {
  color: var(--g-text-primary) !important;
  transition: color 0.15s var(--g-ease) !important;
}

.DiscussionListItem a:hover {
  color: var(--g-orange) !important;
}

/* Keep username orange */
.DiscussionListItem .username,
.DiscussionListItem .username a {
  color: var(--g-orange) !important;
}

/* Tag labels keep their own colors */
.DiscussionListItem .TagLabel a {
  color: inherit !important;
}

/* Generic link color for the whole app */
a {
  color: var(--g-text-secondary) !important;
}

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

/* But keep orange for primary/accent links */
.Post-body a,
.DiscussionHero a {
  color: var(--g-orange) !important;
}

/* Navigation bar items */
.IndexPage-toolbar,
.IndexPage-results {
  color: var(--g-text-primary) !important;
}

/* Ensure all text in the app is readable */
.App-content {
  color: var(--g-text-primary) !important;
}

/* Fix the stuck loading bar */
.App > .loading-indicator,
.loading-indicator {
  display: none !important;
}

/* Discussion hero info text */
.DiscussionHero-items,
.DiscussionHero-items li,
.DiscussionHero .item-tags {
  color: var(--g-text-secondary) !important;
}

/* ── Sidebar spacing fixes ─────────────────────────── */

/* Reduce top margin on sidebar list */
.IndexPage-nav > ul {
  margin-top: 15px !important;
}

/* Tighter padding on sidebar links */
.IndexPage-nav .Dropdown-menu li > a,
.IndexPage-nav .Dropdown-menu li > button {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Reduce separator gap */
.IndexPage-nav .Dropdown-separator {
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* Tighter bottom margin on Start a Discussion */
.IndexPage-nav .item-newDiscussion {
  margin-bottom: 12px !important;
}

/* Reduce gap below nav dropdown container */
.IndexPage-nav .item-nav {
  margin-bottom: 5px !important;
}

/* Add left padding to sidebar items */
.IndexPage-nav .Dropdown-menu {
  padding-left: 10px !important;
}

.IndexPage-nav > ul {
  padding-left: 10px !important;
}