/* Dark mode overrides and theme-toggle button styles */
:root {
  --dm-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
}

/* Theme toggle button (top-left) */
.theme-toggle {
  position: fixed;
  left: 18px;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(35,41,70,0.06);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  z-index: 200000;
}
.theme-toggle:focus { outline: none; box-shadow: 0 0 0 4px rgba(91,74,255,0.12); }

/* Dark theme variables */
body.dark {
  --bg-main: #303235;
  --panel-bg: rgba(47,51,55,0.92);
  --card-bg: #313336;
  --text: #e6eef8;
  --muted: #9aa6b2;
  --input-bg: #383a3d;
  --input-border: rgba(255,255,255,0.06);
  --btn-bg: #393b3d;
  --btn-text: #fff;
}

body.dark h2, p {
  color: var(--text) !important;
}

/* Base body/text */
body.dark, body.dark .main.docs-container, body.dark .container {
  color: var(--text) !important;
}

/* Panels and cards */
body.dark .main.docs-container,
body.dark .container,
body.dark .bfy-global-panel,
body.dark .guild-icon,
body.dark .guild-placeholder,
body.dark #cfg-categories {
  background: var(--panel-bg) !important;
}

/* Inputs and form elements */
body.dark .config-input,
body.dark .config-row input,
body.dark .config-row select,
body.dark .config-row textarea,
body.dark .multi-role-wrapper {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--text) !important;
}
body.dark .config-label { color: var(--text) !important; }

/* Buttons */
body.dark .btn-cta2 {
  background: var(--input-bg) !important;
  color: var(--btn-text) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
body.dark .btn-cta { box-shadow:none; }

/* Sidebar categories */
body.dark #cfg-categories .cat-item {
  /* force a subtle darker surface for each category button even if inline styles exist */
  background-color: rgba(255,255,255,0.02) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  transition: background 160ms ease, color 160ms ease;
}
body.dark #cfg-categories .cat-item:hover,
body.dark #cfg-categories .cat-item:focus {
  background-color: rgba(255,255,255,0.035) !important;
}

/* Toasts */
body.dark .toast { background: rgba(0,0,0,0.7); color: var(--text); }

/* Premium warning tweak */
body.dark #cfg-categories .premium-warning { background: #1b2a39; color: var(--muted); border-color: rgba(255,255,255,0.02); }

/* Guild list items */
body.dark .bfy-item { border-color: rgba(255,255,255,0.02); }

/* Ensure dashboard-version remains visible */
body.dark .dashboard-version { color: var(--text); }

/* Dark mode: small adjustments to logo fallback */
body.dark .logo-fallback { color: var(--text); }

/* Keep the toggle visible on small screens (avoid clashing with mobile nav) */
@media (max-width: 900px) {
  .theme-toggle { left: 12px; top: 12px; }
}

/* Theme toggle appearance in dark mode */
body.dark .theme-toggle {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Autocomplete / dropdown menus in dark mode */
body.dark .autocomplete-menu {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
  z-index: 200001 !important;
}
body.dark .autocomplete-menu div {
  padding: 6px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
  background: transparent !important;
}
body.dark .autocomplete-menu div:hover {
  background-color: rgba(255,255,255,0.02) !important;
  color: var(--text) !important;
}

/* Dropdown badges/icons */
body.dark .role-color { border-color: rgba(255,255,255,0.06) !important; }
body.dark .channel-icon { color: var(--text) !important; opacity: 0.95; }

/* Ensure any inline white backgrounds inside dropdowns are overridden, but keep role-color backgrounds */
body.dark .autocomplete-menu *[style]:not(.role-color) { background: transparent !important; }

/* Role tokens inside multi-role widget */
body.dark .multi-role-wrapper .role-token,
body.dark .role-token {
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
body.dark .multi-role-wrapper .role-token button {
  color: rgba(255,255,255,0.85) !important;
}
body.dark .multi-role-wrapper .role-token:hover {
  background-color: rgba(255,255,255,0.045) !important;
}