/* ══════════════════════════════════════════════════════════════
   MCPremium Theme for Flarum
   Variables loaded from: https://mc-premium.com/theme/variables.css
   ══════════════════════════════════════════════════════════════ */

@import url("https://mc-premium.com/theme/variables.css");

/* ══════════════════════════════════════════════════════════════
   GLOBAL RESET
   ══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

::selection { background: var(--accent-glow); color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════
   HIDE NATIVE FLARUM ELEMENTS
   ══════════════════════════════════════════════════════════════ */

.App-header,
.Header-logo,
.Header-primary,
.Header-secondary,
.Header-controls,
.App-footer,
.Footer {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM NAVBAR
   ══════════════════════════════════════════════════════════════ */

.mc-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background-color: rgba(8, 8, 15, 0.85);
  height: 64px;
}

.mc-navbar .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 100%;
}

.mc-navbar .mc-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mc-navbar .mc-logo img {
  height: 40px;
  width: auto;
}

.mc-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.4rem;
  margin-right: 0.5rem;
  border-radius: 6px;
  transition: color 0.15s;
}

.mc-nav-toggle:hover {
  color: var(--text-primary);
}

.mc-nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.875rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}

.mc-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}

.mc-btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 30px var(--accent-glow);
  transform: translateY(-1px);
}

.mc-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.mc-btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border);
}

/* ══════════════════════════════════════════════════════════════
   CUSTOM FOOTER
   ══════════════════════════════════════════════════════════════ */

.mc-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  margin-top: auto;
}

.mc-footer .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

.mc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
}

.mc-footer-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 1rem;
}

.mc-footer-brand p {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.7;
  max-width: 300px;
}

.mc-footer h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.mc-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mc-footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.15s;
}

.mc-footer-links a:hover {
  color: var(--text-primary);
}

.mc-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  text-align: center;
}

.mc-footer-bottom p {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — LAYOUT
   ══════════════════════════════════════════════════════════════ */

.App {
  padding-top: 0 !important;
  background: var(--bg-base);
}

.App-content {
  background: var(--bg-base);
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — INDEX PAGE (discussion list)
   ══════════════════════════════════════════════════════════════ */

.IndexPage,
.DiscussionList {
  background: transparent;
}

.DiscussionListItem {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  margin-bottom: 0.6rem !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}

.DiscussionListItem:hover {
  border-color: var(--border-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.DiscussionListItem-title {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

.DiscussionListItem-title a {
  color: var(--text-primary) !important;
}

.DiscussionListItem-info {
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
}

.DiscussionListItem-info a,
.DiscussionListItem-info .item-tags a {
  color: var(--accent-light) !important;
}

.DiscussionListItem-count {
  color: var(--accent-light) !important;
}

.DiscussionListItem--unread {
  border-left: 3px solid var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — POST STREAM
   ══════════════════════════════════════════════════════════════ */

.PostStream {
  background: transparent;
}

.PostStream-item:first-child .Post {
  margin-top: 0;
}

.Post {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin-bottom: 0.75rem !important;
}

.Post:hover {
  border-color: var(--border-hover) !important;
}

.Post-header {
  color: var(--text-primary) !important;
}

.PostUser a,
.PostUser .username {
  font-weight: 600 !important;
  color: var(--accent-light) !important;
}

.Post-body,
.Post .Post-body p,
.Post .Post-body li {
  color: var(--text-secondary) !important;
  line-height: 1.7 !important;
}

.Post-body a,
.Post .Post-body a {
  color: var(--accent-light) !important;
  text-decoration: underline !important;
}

.Post-footer {
  color: var(--text-muted) !important;
}

.Post-edited {
  color: var(--text-muted) !important;
}

.PostStream-timeGap {
  color: var(--text-muted) !important;
  border-top: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — HERO
   ══════════════════════════════════════════════════════════════ */

.Hero {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.Hero-title {
  color: var(--text-primary) !important;
}

.Hero-subtitle {
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — BUTTONS
   ══════════════════════════════════════════════════════════════ */

.Button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

.Button:hover {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-hover) !important;
}

.Button--primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

.Button--primary:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 0 30px var(--accent-glow) !important;
}

.Button--link {
  background: transparent !important;
  border: none !important;
  color: var(--accent-light) !important;
}

.Button--link:hover {
  color: var(--accent) !important;
  background: transparent !important;
}

.Button--danger {
  color: var(--danger) !important;
}

.Button--icon {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
}

.Button--icon:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.ButtonGroup .Button:not(:last-child) {
  border-right: 1px solid var(--border) !important;
}

.SplitDropdown .Dropdown-menu {
  margin-top: 4px !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — DROPDOWNS
   ══════════════════════════════════════════════════════════════ */

.Dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0.35rem 0 !important;
}

.Dropdown-menu a,
.Dropdown-menu button,
.Dropdown-menu .Dropdown-item {
  color: var(--text-secondary) !important;
  padding: 0.6rem 1.25rem 0.6rem 2.25rem !important;
  font-size: 0.875rem !important;
  position: relative !important;
}

.Dropdown-menu .Dropdown-item .icon,
.Dropdown-menu .Dropdown-item i {
  position: absolute !important;
  left: 0.75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  font-size: 1rem !important;
  color: var(--accent-light) !important;
}

/* Ensure selected filter text and icon are fully visible */
.Dropdown-menu .Dropdown-item.selected {
  font-weight: 600 !important;
}

.Dropdown-menu a:hover,
.Dropdown-menu button:hover,
.Dropdown-menu .Dropdown-item:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.Dropdown-menu .Dropdown-separator {
  background: var(--border) !important;
  margin: 0.25rem 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — TAGS
   ══════════════════════════════════════════════════════════════ */

.TagLabel {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 6px !important;
  padding: 0.2rem 0.5rem !important;
  font-size: 0.75rem !important;
}

.TagLabel.colored {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: var(--accent-light) !important;
}

.TagsLabel .TagLabel {
  margin-right: 3px !important;
}

.TagTile {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.TagTile:hover {
  border-color: var(--border-hover) !important;
}

.TagTile-info {
  color: var(--text-secondary) !important;
}

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

/* ══════════════════════════════════════════════════════════════
   FLARUM — INPUTS & FORMS
   ══════════════════════════════════════════════════════════════ */

.FormControl,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
.Select-input {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.FormControl:focus,
input:focus,
textarea:focus,
.Select-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

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

.Form-group label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

.Form-group .helpText {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
}

.Select {
  color: var(--text-primary) !important;
}

.Select option {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ── Checkboxes ── */
.Checkbox {
  color: var(--text-secondary) !important;
}

.Checkbox--switch .Checkbox-display {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  transition: background-color 0.2s !important;
}

.Checkbox--switch.on .Checkbox-display {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.Checkbox--switch .Checkbox-display:before {
  background: #fff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — MODALS
   ══════════════════════════════════════════════════════════════ */

.Modal-body {
  background: var(--bg-card) !important;
}

.Modal-header {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

.Modal-header h3,
.Modal-header .Modal-title {
  color: var(--text-primary) !important;
}

.Modal-footer {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
}

.Modal-close .Button {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
}

.Modal-close .Button:hover {
  color: var(--text-primary) !important;
}

.Modal-loading {
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — ALERTS
   ══════════════════════════════════════════════════════════════ */

.Alert {
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

.Alert--success {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.Alert--error {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.Alert--warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.Alert--info {
  background: rgba(59, 130, 246, 0.15) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — USER SETTINGS & PROFILE PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Side navigation ── */
.UserPage .sideNav {
  color: var(--text-secondary) !important;
}

.UserPage-nav .Dropdown-menu {
  min-width: 200px !important;
}

.App-titleControl .Button {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.App-titleControl .Button:hover {
  background: var(--bg-elevated) !important;
}

/* ── Hero card ── */
.Hero.UserHero {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Fieldsets ── */
.SettingsPage fieldset,
.UserSecurityPage fieldset {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-surface) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.SettingsPage legend,
.UserSecurityPage legend {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  padding: 0 0.5rem !important;
  margin-left: -0.5rem !important;
}

.SettingsPage fieldset > ul,
.UserSecurityPage fieldset > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.75rem 0 0 !important;
}

.SettingsPage fieldset > ul > li,
.UserSecurityPage fieldset > ul > li {
  padding: 0.6rem 0 !important;
  border-bottom: 1px solid var(--border) !important;
}

.SettingsPage fieldset > ul > li:last-child,
.UserSecurityPage fieldset > ul > li:last-child {
  border-bottom: none !important;
}

/* ── Buttons in settings ── */
.SettingsPage .Button,
.UserSecurityPage .Button {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.SettingsPage .Button:hover,
.UserSecurityPage .Button:hover {
  background: var(--bg-card) !important;
  border-color: var(--border-hover) !important;
}

.SettingsPage .Button--primary,
.UserSecurityPage .Button--primary {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.SettingsPage .Button--primary:hover,
.UserSecurityPage .Button--primary:hover {
  background: var(--accent-hover) !important;
}

.SettingsPage .Button--danger,
.UserSecurityPage .Button--danger {
  color: var(--danger) !important;
}

.SettingsPage .Button--danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.SettingsPage .Button--inverted,
.UserSecurityPage .Button--inverted {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.SettingsPage .Button--inverted:hover,
.UserSecurityPage .Button--inverted:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* ── Notification Grid ── */
.NotificationGrid {
  width: 100% !important;
  margin: 0.5rem 0 !important;
}

.NotificationGrid thead th {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem !important;
}

.NotificationGrid tbody td {
  padding: 0.4rem 0.5rem !important;
}

.NotificationGrid-groupToggle {
  color: var(--text-secondary) !important;
  cursor: pointer !important;
}

.NotificationGrid-groupToggle:hover {
  color: var(--text-primary) !important;
}

.NotificationGrid-checkbox {
  text-align: center !important;
}

/* ── Access Tokens List ── */
.AccessTokensList-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem !important;
  background: var(--bg-elevated) !important;
  border-radius: 8px !important;
  margin-bottom: 0.5rem !important;
}

.AccessTokensList-item--active {
  border: 1px solid var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent-glow) !important;
}

.AccessTokensList-item-icon {
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-surface) !important;
  border-radius: 8px !important;
  color: var(--accent-light) !important;
  font-size: 1rem !important;
}

.AccessTokensList-item-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.AccessTokensList-item-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.AccessTokensList-item-title-main {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

.AccessTokensList-item-title-sub {
  color: var(--accent-light) !important;
  font-size: 0.78rem !important;
  font-style: italic !important;
}

.AccessTokensList-item-createdAt,
.AccessTokensList-item-lastActivityAt {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  margin-top: 0.15rem !important;
}

.AccessTokensList-item-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 0.4rem !important;
}

.AccessTokensList--empty {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  padding: 1rem !important;
  text-align: center !important;
}

.AccessTokensList-item-token {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--accent-light) !important;
  font-family: monospace !important;
  font-size: 0.8rem !important;
  word-break: break-all !important;
  display: block !important;
  margin-top: 0.5rem !important;
}

/* ── LabelValue ── */
.LabelValue {
  display: inline-flex !important;
  gap: 0.35rem !important;
  align-items: baseline !important;
}

.LabelValue-label {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
}

/* ── IPAddress ── */
.IPAddress {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
  margin-left: 0.4rem !important;
}

/* ── Help text in security page ── */
.UserSecurityPage .helpText {
  color: var(--text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  display: block !important;
  margin-bottom: 0.75rem !important;
}

/* ── UserPage content area ── */
.UserPage-content {
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — PAGINATION
   ══════════════════════════════════════════════════════════════ */

.Pagination .Button {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

.Pagination .Button:hover {
  border-color: var(--border-hover) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

.Pagination .Button--active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — COMPOSER (reply box)
   ══════════════════════════════════════════════════════════════ */

.Composer {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px 12px 0 0 !important;
}

.Composer-body {
  background: var(--bg-elevated) !important;
}

.Composer .TextEditor textarea {
  background: transparent !important;
  border: none !important;
}

.Composer--minimized .Composer-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
}

.Composer-handle {
  color: var(--text-muted) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — TEXT EDITOR
   ══════════════════════════════════════════════════════════════ */

.TextEditor {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg-elevated) !important;
}

.TextEditor-controls {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
}

.TextEditor-controls .Button {
  background: transparent !important;
  border: none !important;
  color: var(--text-muted) !important;
}

.TextEditor-controls .Button:hover {
  color: var(--text-primary) !important;
  background: var(--bg-elevated) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — SEARCH
   ══════════════════════════════════════════════════════════════ */

.Search-input {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

.Search-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.Search-results {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.Search-result {
  color: var(--text-secondary) !important;
}

.Search-result:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.Search-result-title {
  color: var(--text-primary) !important;
}

.Search-result-excerpt {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — NOTIFICATIONS
   ══════════════════════════════════════════════════════════════ */

.NotificationsDropdown .Dropdown-menu {
  max-height: 400px !important;
  overflow-y: auto !important;
}

.Notification {
  color: var(--text-secondary) !important;
}

.Notification:hover {
  background: var(--bg-elevated) !important;
}

.Notification--unread {
  background: rgba(124, 58, 237, 0.05) !important;
}

.Notification-title {
  color: var(--text-primary) !important;
}

.Notification-excerpt {
  color: var(--text-muted) !important;
  font-size: 0.8rem !important;
}

.NotificationGrid {
  color: var(--text-secondary) !important;
}

.NotificationGrid-groupName {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — USER CARD
   ══════════════════════════════════════════════════════════════ */

.UserCard {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.UserCard-identity {
  color: var(--text-primary) !important;
}

.UserCard-identity .username {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.UserCard-info {
  color: var(--text-secondary) !important;
}

.UserCard-info a {
  color: var(--accent-light) !important;
}

.UserBio {
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border) !important;
}

.UserBio textarea {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — SIDEBAR / PANEL
   ══════════════════════════════════════════════════════════════ */

.App-navigation,
.Sidebar {
  background: var(--bg-surface) !important;
  border-right: 1px solid var(--border) !important;
  width: 270px !important;
  min-width: 270px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.App-drawer {
  background: var(--bg-surface) !important;
}

.Navigation {
  padding: 0.5rem 0 !important;
}

.Navigation-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.5rem 1rem 0.5rem 0.85rem !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  border-radius: 0 8px 8px 0 !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.Navigation-link:hover {
  color: var(--text-primary) !important;
  background: var(--bg-elevated) !important;
}

.Navigation-link.active,
.Navigation-link.Navigation-link--active {
  color: var(--accent-light) !important;
  background: rgba(124, 58, 237, 0.08) !important;
  font-weight: 600 !important;
}

.Navigation-link .icon,
.Navigation-link i,
.Navigation-link .Badge {
  flex-shrink: 0 !important;
  width: 18px !important;
  text-align: center !important;
}

.Navigation-back {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.6rem 1rem !important;
  color: var(--text-secondary) !important;
  font-size: 0.85rem !important;
  border-bottom: 1px solid var(--border) !important;
}

.Navigation-back:hover {
  color: var(--text-primary) !important;
  background: var(--bg-elevated) !important;
}

.App-navigation .Navigation-group-title {
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  padding: 0.75rem 1rem 0.3rem !important;
}

/* ── Drawer toggle button (hamburger that opens sidebar) ── */
.App-navigation .Button--navigationDrawer {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — MISC COMPONENTS
   ══════════════════════════════════════════════════════════════ */

.Tooltip {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}

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

.LoadingIndicator {
  color: var(--accent) !important;
}

.Slider {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}

.Placeholder {
  color: var(--text-muted) !important;
}

.LoadingText {
  color: var(--text-muted) !important;
}

.helpText {
  color: var(--text-muted) !important;
  font-size: 0.78rem !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — LINKS (global)
   ══════════════════════════════════════════════════════════════ */

a {
  color: var(--accent-light) !important;
  transition: color 0.15s !important;
}

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

/* Flarum default blue links override */
.DiscussionListItem a,
.Post a,
.Hero a,
.IndexPage a,
.UserCard a {
  color: inherit;
}

/* But keep accent color for important links */
.DiscussionListItem-title a,
.Post-user a,
.TagLabel a {
  color: var(--accent-light) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — TYPOGRAPHY HELPERS
   ══════════════════════════════════════════════════════════════ */

blockquote {
  border-left: 3px solid var(--accent) !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 8px 8px 0 !important;
}

code {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent-light) !important;
  border-radius: 4px !important;
  padding: 0.1rem 0.3rem !important;
  font-size: 0.85em !important;
}

pre {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
}

pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

hr {
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — BADGES (Flarum's own, not mc-badge)
   ══════════════════════════════════════════════════════════════ */

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

.Badge--hidden {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — ADMIN PANEL
   ══════════════════════════════════════════════════════════════ */

.App--admin .App-content {
  background: var(--bg-base) !important;
}

.App--admin .AdminPage {
  background: var(--bg-base) !important;
}

.App--admin .AdminHeader {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════════════════════
   FLARUM — FLAVOR / EXTRA BITS
   ══════════════════════════════════════════════════════════════ */

/* Prevent flash of light background before JS injects CSS */
html {
  background: var(--bg-base);
}

/* Empty state */
.EmptyState {
  color: var(--text-muted) !important;
}

/* Login page */
.LogInPage,
.SignUpPage {
  background: var(--bg-base) !important;
}

/* ── React Select menu (used in dropdowns) ── */
.Select-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.Select-option {
  color: var(--text-secondary) !important;
}

.Select-option:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

/* ── ColorInput ── */
.ColorInput-preview {
  border-radius: 4px !important;
}

/* ── Table ── */
table {
  color: var(--text-secondary) !important;
}

table th {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}

table td {
  border-bottom: 1px solid var(--border) !important;
}

/* ── Dark mode forced for ALL Flarum elements ── */
/* This catches anything we might have missed */
.App,
.App-content,
.IndexPage,
.DiscussionPage,
.UserPage,
.SettingsPage,
.LogInPage,
.SignUpPage {
  background: var(--bg-base) !important;
}

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

@media (max-width: 768px) {
  .App-navigation,
  .Sidebar {
    display: none !important;
  }

  .App-navigation.drawerOpen {
    display: flex !important;
  }
}

@media (max-width: 640px) {
  .mc-nav-toggle {
    display: flex !important;
  }

  .mc-navbar .container {
    padding: 0 0.75rem;
  }

  .mc-navbar .mc-logo img {
    height: 32px;
  }

  .mc-footer .container {
    padding: 2rem 1rem 1.5rem;
  }

  .mc-footer-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .mc-footer-bottom {
    padding: 1rem;
  }

  .mc-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
  }

  .mc-nav-right .mc-btn-primary {
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
  }

  .Dropdown-menu {
    min-width: 180px !important;
  }
}

@media (max-width: 480px) {
  .mc-footer-grid {
    grid-template-columns: 1fr !important;
  }

  .mc-nav-right {
    gap: 0.4rem;
  }
}

/* ── User dropdown in custom navbar ── */
.mc-user-dropdown {
  position: relative;
}

.mc-user-dropdown .Dropdown-toggle {
  display: flex;
  align-items: center;
  border-radius: 18px !important;
}

.mc-user-dropdown .Dropdown-toggle:hover {
  background: var(--bg-elevated) !important;
}

.mc-user-dropdown .Dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  z-index: 1050;
  display: none;
  min-width: 200px;
}

.mc-user-dropdown .Dropdown-menu--right {
  left: auto;
  right: 0;
}