/* Dark theme */
:root,
[data-bs-theme="dark"] {
  /* Primary color palette */
  --bs-primary: #cd117b;
  --bs-primary-rgb: 210, 94, 160;
  --bs-primary-text-emphasis: #cd117b;
  --bs-primary-bg-subtle: #291b24;
  --bs-primary-border-subtle: #20171d;

  /* Primary button variations */
  --bs-primary-hover: #db74ab;
  --bs-primary-active: #e07eb4;

  /* Body colors */
  --bs-body-color: #e0e0e0;
  --bs-body-color-rgb: 224, 224, 224;
  --bs-body-bg: #1c1c1c;
  --bs-body-bg-rgb: 42, 42, 42;

  --bs-secondary-color: rgba(224, 224, 224, 0.75);
  --bs-secondary-color-rgb: 224, 224, 224;
  --bs-tertiary-color: rgba(224, 224, 224, 0.5);
  --bs-tertiary-color-rgb: 224, 224, 224;

  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;

  /* UI element colors */
  --bs-border-color: #444444;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);

  --bs-light-rgb: 50, 50, 50;
  --bs-dark-rgb: 34, 34, 34;
  --bs-white-rgb: 42, 42, 42;

  /* Custom dark theme variables */
  --border-color: #444444;
  --card-bg: #222;
  --card-hover-bg: #444444;
  --dropdown-bg: #333333;
  --alert-warning-bg: #3d3223;
  --alert-warning-border: #594832;
  --alert-warning-color: #e0c088;
  --alert-warning-hover: #e0c088;
  --table-highlight-bg: rgba(61, 41, 54, 0.3);
  --text-muted: #aaaaaa;
  --source-icon: #5ed2b7;

  /* Gradient colors */
  --gradient-start: #cd117b;
  --gradient-end: #e07eb4;
}

/* Background gradient */
.bg-primary-gradient {
  background: linear-gradient(135deg, var(--bs-primary-bg-subtle), #160e13);
}

/* Logo images */
#logoContainer {
  background-image: url(../../img/logo-white.svg);
}

#smallLogoContainer {
  background-image: url(../../img/logo-white.svg);
}

/* Card and accordion styles */
.card,
.accordion {
  background-color: var(--card-bg);
  border-color: var(--border-color);
}

.card-body,
.accordion-body {
  color: var(--bs-body-color);
}

.accordion-header {
  background-color: var(--card-bg);
  color: var(--bs-body-color);
  border-bottom: none !important;
}

.accordion-item {
  border-bottom: var(--border-color) 1px solid !important;
}

.accordion-header:hover {
  background-color: var(--card-hover-bg);
}

/* Dropdown styles */
.dropdown-content {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
}

.dropdown-content a {
  color: var(--bs-body-color);
}

.dropdown-content a:hover {
  background-color: var(--card-hover-bg);
}

/* Table styles */
.transparency-start-balance-row>td {
  background-color: var(--table-highlight-bg) !important;
}

.table {
  color: var(--bs-body-color);
}

.table-light {
  --bs-table-bg: #3a3a3a;
  --bs-table-color: var(--bs-body-color);
}

.table-secondary {
  --bs-table-bg: #444444;
  --bs-table-color: var(--bs-body-color);
}

.table-bordered {
  border-color: var(--border-color);
}

/* Button styles */
.btn-primary {
  --bs-btn-color: #222222;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #222222;
  --bs-btn-hover-bg: var(--bs-primary-hover);
  --bs-btn-hover-border-color: var(--bs-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #222222;
  --bs-btn-active-bg: var(--bs-primary-active);
  --bs-btn-active-border-color: var(--bs-primary-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #222222;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #222222;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
}

/* Link styles */
a {
  color: var(--bs-primary);
}

a:hover {
  color: var(--bs-primary-text-emphasis);
}

/* Text styles */
.text-muted {
  color: var(--text-muted) !important;
}

.fancy-text-primary {
  background: -webkit-linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Navbar styles */
.navbar-light {
  background-color: var(--card-bg) !important;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--bs-body-color);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--bs-primary);
}

/* Fix for navbar brand text color */
.navbar-brand p {
  color: var(--bs-body-color) !important;
}

.navbar-brand span[style*="color: rgb(35, 35, 35)"] {
  color: var(--bs-body-color) !important;
}

/* Footer styles */
footer.bg-primary-gradient {
  color: var(--bs-body-color);
}

footer a {
  color: var(--bs-primary);
}

footer a:hover {
  color: var(--bs-primary-text-emphasis);
}

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

/* Alert styles */
.alert-warning {
  background-color: var(--alert-warning-bg);
  border-color: var(--alert-warning-border);
  color: var(--alert-warning-color);
}

.alert-warning .alert-link {
  color: var(--alert-warning-color);
}

/* Icon styles */
.bs-icon.bs-icon-primary svg {
  fill: var(--bs-primary) !important;
}

.bs-icon-circle.bs-icon-primary {
  background-color: var(--bs-primary-bg-subtle);
}

.bs-icon-circle.bs-icon-primary svg {
  fill: var(--bs-primary) !important;
}

/* Fix for service icons */
.bs-icon-sm.bs-icon-circle.homemade svg,
.bs-icon-sm.bs-icon-circle.upstream svg,
.bs-icon-sm.bs-icon-circle.fork svg,
.bs-icon-sm.bs-icon-circle.members-only svg {
  fill: var(--source-icon) !important;
}

.bs-icon-sm.bs-icon-circle.homemade,
.bs-icon-sm.bs-icon-circle.upstream,
.bs-icon-sm.bs-icon-circle.fork,
.bs-icon-sm.bs-icon-circle.members-only {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--source-icon);
}

/* Fix for icon in accordion headers */
.accordion-header .bs-icon svg {
  fill: var(--bs-primary) !important;
}

/* Background color overrides */
.bg-light {
  background-color: var(--card-bg) !important;
}

.bg-white {
  background-color: var(--bs-body-bg) !important;
}

.bg-secondary-subtle {
  background-color: #3a3a3a !important;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

/* Theme toggle styles */
.theme-toggle-container {
  display: inline-flex;
  align-items: center;
}

.theme-toggle-container .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid var(--bs-primary);
  color: var(--bs-primary);
}

.theme-toggle-container .btn:hover {
  background-color: var(--bs-primary);
  color: #333333;
}

.theme-toggle-container .btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Fix for any remaining white sections */
section.bg-white {
  background-color: var(--bs-body-bg) !important;
}

section.bg-light {
  background-color: var(--card-bg) !important;
}

.container.bg-white {
  background-color: var(--bs-body-bg) !important;
}

[class*="bg-white"] {
  background-color: var(--bs-body-bg) !important;
}

/* Code blocks */
code {
  color: var(--bs-primary);
  background-color: var(--card-bg);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

pre {
  background-color: var(--card-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1em;
}

/* Input fields */
input,
textarea,
select {
  background-color: #3a3a3a !important;
  border-color: var(--border-color) !important;
  color: var(--bs-body-color) !important;
}

input::placeholder,
textarea::placeholder {
  color: #888888 !important;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--bs-primary-bg-subtle);
  padding-left: 1em;
  color: #cccccc;
}

/* Fix for inline styles that might set text to black */
[style*="color: rgb(35, 35, 35)"] {
  color: var(--bs-body-color) !important;
}

[style*="color: #232323"] {
  color: var(--bs-body-color) !important;
}

/* Make sure the body background is consistently applied */
body {
  background-color: var(--bs-body-bg);
}

/* Ensure header bar is lighter */
#mainNav {
  background-color: var(--card-bg) !important;
}

/* Legend section icons */
.col .d-flex .bs-icon-md svg {
  fill: var(--bs-primary) !important;
}

/* Fix for any SVG icons that might be hard to see */
svg {
  fill: currentColor;
}

/* Fix for service icons in the legend */
.services-legend .col .d-flex .bs-icon-md svg {
  fill: var(--source-icon) !important;
}

.services-legend .bs-icon-circle.bs-icon-primary {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--source-icon);
}