/* Custom Flarum Theme - Matching junevergelquerol.com */

:root {
  /* Primary brand color - Purple/Indigo from the forum button */
  --primary-color: #7c3aed; /* purple-600 */
  --primary-hsl: 258, 90%, 66%;

  /* Secondary color - Indigo */
  --secondary-color: #4f46e5; /* indigo-600 */
  --secondary-hsl: 243, 75%, 59%;

  /* Dark background matching gray-900 */
  --body-bg: #111827;
  --control-bg: #1f2937; /* gray-800 */
  --control-border-color: #374151; /* gray-700 */

  /* Header background */
  --header-bg: rgba(17, 24, 39, 0.8); /* gray-900 with opacity */
  --header-color: #ffffff;

  /* Text colors */
  --body-color: #ffffff;
  --heading-color: #ffffff;
  --muted-color: #9ca3af; /* gray-400 */
  --muted-more-color: #6b7280; /* gray-500 */

  /* Link colors */
  --link-color: #7c3aed; /* purple-600 */
  --link-hover-color: #6d28d9; /* purple-700 */

  /* Hero background */
  --hero-bg: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);

  /* Control colors */
  --control-color: #ffffff;
  --control-danger-bg: #dc2626; /* red-600 */
  --control-danger-color: #ffffff;
}

/* Dark theme overrides */
body {
  background-color: #111827 !important;
  color: #ffffff !important;
}

/* Header styling */
.App-header {
  background: rgba(17, 24, 39, 0.8) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #374151 !important;
}

.Header-title {
  color: #ffffff !important;
}

.Header-navigation .Button {
  color: #ffffff !important;
}

.Header-navigation .Button:hover {
  color: #7c3aed !important;
}

/* Hero section */
.Hero {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
}

/* Discussion list */
.DiscussionListItem {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px;
  margin-bottom: 8px;
}

.DiscussionListItem:hover {
  background-color: #374151 !important;
  border-color: #7c3aed !important;
}

.DiscussionListItem-info {
  color: #9ca3af !important;
}

.DiscussionListItem-title {
  color: #ffffff !important;
}

/* Buttons */
.Button--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px; /* Rounded full like the nav buttons */
  font-weight: 500;
  box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
  transition: all 0.2s;
}

.Button--primary:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #4338ca 100%) !important;
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.4);
  transform: translateY(-1px);
}

.Button--link {
  color: #7c3aed !important;
}

.Button--link:hover {
  color: #6d28d9 !important;
}

/* Post styling */
.Post {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px;
}

.Post-header {
  color: #ffffff !important;
}

.Post-body {
  color: #ffffff !important;
}

.Post-meta {
  color: #9ca3af !important;
}

/* Composer (new post) */
.Composer {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
}

.TextEditor-editor {
  background-color: #111827 !important;
  color: #ffffff !important;
}

/* Navigation */
.Navigation {
  background-color: #1f2937 !important;
  border-right: 1px solid #374151 !important;
}

.Navigation-item {
  color: #ffffff !important;
}

.Navigation-item:hover,
.Navigation-item.active {
  background-color: #374151 !important;
  color: #7c3aed !important;
}

/* Cards and modals */
.Modal-content {
  background-color: #1f2937 !important;
  color: #ffffff !important;
  border: 1px solid #374151 !important;
}

.FormControl {
  background-color: #111827 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

.FormControl:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* Badges */
.Badge {
  background-color: #7c3aed !important;
  color: #ffffff !important;
  border-radius: 9999px;
  font-weight: 500;
}

/* Dropdown menus */
.Dropdown-menu {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

.Dropdown-menu > li > a,
.Dropdown-menu > li > button {
  color: #ffffff !important;
}

.Dropdown-menu > li > a:hover,
.Dropdown-menu > li > button:hover {
  background-color: #374151 !important;
  color: #7c3aed !important;
}

/* Tags */
.TagLabel {
  background-color: #374151 !important;
  color: #ffffff !important;
  border-radius: 9999px;
}

.TagLabel:hover {
  background-color: #7c3aed !important;
}

/* Sidebar */
.Sidebar {
  background-color: #1f2937 !important;
}

/* Notification badge */
.NotificationList-content {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
}

/* User profile */
.UserCard {
  background-color: #1f2937 !important;
  border: 1px solid #374151 !important;
  border-radius: 8px;
}

/* Footer */
.App-footer {
  background-color: #1f2937 !important;
  border-top: 1px solid #374151 !important;
  color: #9ca3af !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #111827;
}

::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7c3aed;
}

/* Code blocks */
pre, code {
  background-color: #111827 !important;
  border: 1px solid #374151 !important;
  color: #ffffff !important;
}

/* Selection */
::selection {
  background-color: #7c3aed;
  color: #ffffff;
}

/* Links */
a {
  color: #7c3aed !important;
}

a:hover {
  color: #6d28d9 !important;
}