:root {
  --primary: #7b3349;
  --primary-rgb: 123, 51, 73;
  --primary-hover: #8e3b55;
  --primary-dark: #572437;
  --secondary: #495057;
  --light: #f8f9fa;
  --dark: #212529;
  --white: #fff;
  --light-border: #dee2e6;
  --light-bg: #f8f9fa;
  --dark-bg: #212529;
  --bs-body-bg: var(--light-bg);
  --bs-body-color: var(--dark);
}

[data-bs-theme="dark"] {
  --primary: #7b3349;
  --primary-hover: #8e3b55;
  --primary-dark: #572437;
  --bs-body-bg: var(--dark-bg);
  --bs-body-color: var(--light);
  --light-border: #495057;
}

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

.btn-primary {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
}

.btn-primary:hover, 
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

.btn-outline-primary {
  --bs-btn-color: #6c757d !important;
  --bs-btn-border-color: #6c757d !important;
  --bs-btn-hover-color: white !important;
  --bs-btn-hover-bg: #6c757d !important;
  --bs-btn-hover-border-color: #6c757d !important;
  --bs-btn-focus-shadow-rgb: 108, 117, 125 !important;
  --bs-btn-active-color: white !important;
  --bs-btn-active-bg: #6c757d !important;
  --bs-btn-active-border-color: #6c757d !important;
  --bs-btn-active-shadow: none !important;
  --bs-btn-disabled-color: #6c757d !important;
  --bs-btn-disabled-bg: transparent !important;
  --bs-btn-disabled-border-color: #6c757d !important;
}

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

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

.theme-toggle {
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: transparent;
  border: none;
}

.theme-toggle:hover {
  background-color: rgba(var(--primary-rgb), 0.1);
}

.navbar-brand {
  color: var(--primary) !important;
  font-weight: bold;
}

.card {
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  overflow: hidden;
}

.card-header {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  border-bottom: 1px solid var(--light-border);
  padding: 0.75rem 1.25rem;
}

.card-header h5,
.card-header .mb-0,
.card-header h2,
.card-header h3,
.card-header h4 {
  color: var(--primary) !important;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Default icon for all card headers */
.card-header h5:before,
.card-header .mb-0:before,
.card-header h2:before,
.card-header h3:before,
.card-header h4:before {
  content: '\f0b0'; /* filter icon */
  font-family: 'Font Awesome 5 Free';
  margin-right: 0.5rem;
  font-weight: 900;
}

/* Specific icons using classes - more reliable than :contains */

/* MCADS - Medical/Stethoscope icon */
.card-header.header-mcads h2:before,
.card-header.header-mcads h5:before,
.card-header.header-mcads .mb-0:before {
  content: '\f7e6'; /* stethoscope icon */
}

/* Patient information - User icon */
.card-header.header-patient h5:before,
.card-header.header-patient .mb-0:before {
  content: '\f007'; /* user icon */
}

/* Severity level - Warning/Alert icon */
.card-header.header-severity h5:before,
.card-header.header-severity .mb-0:before {
  content: '\f071'; /* exclamation-triangle icon */
}

/* X-ray image - Medical image icon */
.card-header.header-xray h5:before,
.card-header.header-xray .mb-0:before {
  content: '\f0fa'; /* image icon */
}

/* Prediction Results - Chart icon */
.card-header.header-prediction h5:before,
.card-header.header-prediction .mb-0:before {
  content: '\f200'; /* chart-bar icon */
}

/* History Records - Clock/History icon */
.card-header.header-history h5:before,
.card-header.header-history .mb-0:before {
  content: '\f1da'; /* history icon */
}

/* Account Settings - Gear icon */
.card-header.header-account h5:before,
.card-header.header-account .mb-0:before,
.card-header.header-account h4:before {
  content: '\f013'; /* cog/gear icon */
}

/* Interpretability - Eye icon */
.card-header.header-interpretability h5:before,
.card-header.header-interpretability .mb-0:before {
  content: '\f06e'; /* eye icon */
}

/* Advanced filters - Filter icon */
.card-header.header-filters h5:before,
.card-header.header-filters .mb-0:before {
  content: '\f0b0'; /* filter icon */
}

/* Login/Authentication - Key icon */
.card-header.header-auth h2:before,
.card-header.header-auth h5:before,
.card-header.header-auth .mb-0:before {
  content: '\f084'; /* key icon */
}

/* Danger Zone - Warning icon */
.card-header.header-danger h5:before,
.card-header.header-danger .mb-0:before {
  content: '\f06a'; /* exclamation-circle icon */
}

/* Style all card headers consistently */
.card-header {
  font-weight: 600;
}

/* Style Account Settings tabs to match header styling */
#settingsTabs .nav-link {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  border: 1px solid var(--light-border) !important;
  color: var(--primary) !important;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 0.375rem 0.375rem 0 0;
  margin-right: 0.25rem;
  transition: all 0.3s ease;
}

#settingsTabs .nav-link:hover {
  background-color: rgba(var(--primary-rgb), 0.15) !important;
  color: var(--primary) !important;
}

#settingsTabs .nav-link.active {
  background-color: rgba(var(--primary-rgb), 0.2) !important;
  color: var(--primary) !important;
  border-bottom-color: transparent !important;
}

/* Tab icons */
#settingsTabs .nav-link i {
  margin-right: 0.5rem;
}

/* Style medical warning messages to match header color */
.alert-danger:has(strong:contains("Warning! This tool is not meant to be used without supervision of a medical professional!")) {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: var(--primary) !important;
}

/* Alternative targeting using class for medical warnings */
.medical-warning {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: var(--primary) !important;
}

.medical-warning strong {
  color: var(--primary) !important;
}

.medical-warning i {
  color: var(--primary) !important;
}

/* Style for "No records found" info messages */
.no-records-info {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
  color: var(--primary) !important;
  position: relative;
  padding-left: 2.5rem !important;
}

.no-records-info:before {
  content: '\f059'; /* info-circle icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
}

.table {
  --bs-table-hover-bg: rgba(var(--primary-rgb), 0.05);
}

.progress-bar.bg-primary {
  background-color: var(--primary) !important;
}

.compact-container {
  max-width: 1140px;
  margin: 0 auto;
}

/* Advanced Filters Styling */
.advanced-filters {
  background-color: var(--bs-body-bg);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.advanced-filters .card-header {
  background-color: rgba(var(--primary-rgb), 0.1);
  border-bottom: 1px solid var(--light-border);
  padding: 0.75rem 1.25rem;
}

.advanced-filters .card-header h5 {
  color: var(--primary);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.advanced-filters .card-header h5:before {
  content: '\f0b0';
  font-family: 'Font Awesome 5 Free';
  margin-right: 0.5rem;
  font-weight: 900;
}

.advanced-filters .card-body {
  padding: 1.5rem;
}

.advanced-filters .form-label {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  color: var(--bs-body-color);
}

.advanced-filters select.form-select,
.advanced-filters input.form-control {
  border-radius: 0.375rem;
  border: 1px solid var(--light-border);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.advanced-filters select.form-select:focus,
.advanced-filters input.form-control:focus {
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
}

.advanced-filters .filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.advanced-filters .btn-primary {
  padding: 0.5rem 1rem;
  font-weight: 500;
}

/* Make all buttons use outline-secondary style */
.btn-primary,
.btn-danger,
.btn-warning,
.btn-success,
.btn-info {
  background-color: transparent !important;
  border: 1px solid #6c757d !important;
  color: #6c757d !important;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-success:hover,
.btn-info:hover,
.btn-primary:focus,
.btn-danger:focus,
.btn-warning:focus,
.btn-success:focus,
.btn-info:focus,
.btn-primary:active,
.btn-danger:active,
.btn-warning:active,
.btn-success:active,
.btn-info:active,
.btn-primary.active,
.btn-danger.active,
.btn-warning.active,
.btn-success.active,
.btn-info.active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

.btn-sm.btn-primary,
.btn-sm.btn-danger,
.btn-sm.btn-warning,
.btn-sm.btn-success,
.btn-sm.btn-info {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.btn-outline-primary,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-success,
.btn-outline-info {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-primary:focus,
.btn-outline-danger:focus,
.btn-outline-warning:focus,
.btn-outline-success:focus,
.btn-outline-info:focus,
.btn-outline-primary:active,
.btn-outline-danger:active,
.btn-outline-warning:active,
.btn-outline-success:active,
.btn-outline-info:active,
.btn-outline-primary.active,
.btn-outline-danger.active,
.btn-outline-warning.active,
.btn-outline-success.active,
.btn-outline-info.active {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

/* Progress bars using secondary colors - except severity indicators */
.progress-bar.bg-primary,
.progress-bar.bg-info {
  background-color: #6c757d !important;
}

/* Keep original Bootstrap colors for severity level progress bars */
.progress-bar.bg-success {
  background-color: #198754 !important; /* Green for Insignificant findings */
}

.progress-bar.bg-warning {
  background-color: #ffc107 !important; /* Yellow for Moderate findings */
}

.progress-bar.bg-danger {
  background-color: #dc3545 !important; /* Red for Significant findings */
}

/* Badge styling */
.badge.bg-primary,
.badge.bg-danger,
.badge.bg-warning,
.badge.bg-success,
.badge.bg-info {
  background-color: #6c757d !important;
  color: white !important;
}

/* Text colors - Keep original Bootstrap colors for severity indicators */
.text-danger {
  color: #dc3545 !important; /* Bootstrap red */
}

.text-warning {
  color: #ffc107 !important; /* Bootstrap yellow */
}

.text-success {
  color: #198754 !important; /* Bootstrap green */
}

.text-info {
  color: #0dcaf0 !important; /* Bootstrap info blue */
}

/* Alert styling */
.alert-primary,
.alert-danger,
.alert-warning,
.alert-success,
.alert-info {
  background-color: rgba(108, 117, 125, 0.1) !important;
  border-color: rgba(108, 117, 125, 0.3) !important;
  color: #6c757d !important;
}

/* Override all colored card headers to use advanced filters style */
.card-header.bg-primary,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-success,
.card-header.bg-info {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  color: var(--primary) !important;
  border-bottom: 1px solid var(--light-border);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

/* Text inside colored headers should also use primary color */
.card-header.bg-primary *,
.card-header.bg-danger *,
.card-header.bg-warning *,
.card-header.bg-success *,
.card-header.bg-info * {
  color: var(--primary) !important;
}

/* Modal headers */
.modal-header.bg-primary,
.modal-header.bg-danger,
.modal-header.bg-warning,
.modal-header.bg-success,
.modal-header.bg-info {
  background-color: rgba(108, 117, 125, 0.1) !important;
  color: #6c757d !important;
  border-bottom: 1px solid var(--light-border);
}

/* Remove icons only from advanced filter buttons, not action buttons */
.advanced-filters .btn-danger i,
.advanced-filters .btn-warning i,
.advanced-filters .btn-success i,
.advanced-filters .btn-info i,
.advanced-filters .btn-outline-danger i,
.advanced-filters .btn-outline-warning i,
.advanced-filters .btn-outline-success i,
.advanced-filters .btn-outline-info i {
  display: none;
}

/* Ensure border variants also match */
.border-primary,
.border-danger,
.border-warning,
.border-success,
.border-info {
  border-color: #6c757d !important;
}

/* Dark mode adjustments for overridden colors */
[data-bs-theme="dark"] .btn-primary,
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-warning,
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-info {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
}

[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-danger:hover,
[data-bs-theme="dark"] .btn-warning:hover,
[data-bs-theme="dark"] .btn-success:hover,
[data-bs-theme="dark"] .btn-info:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: white !important;
}

[data-bs-theme="dark"] .alert-primary,
[data-bs-theme="dark"] .alert-danger,
[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-info {
  background-color: rgba(108, 117, 125, 0.2) !important;
  border-color: rgba(108, 117, 125, 0.4) !important;
  color: #6c757d !important;
}

/* Dark mode support for Account Settings tabs */
[data-bs-theme="dark"] #settingsTabs .nav-link {
  background-color: rgba(var(--primary-rgb), 0.15) !important;
  border-color: var(--light-border) !important;
  color: var(--primary) !important;
}

[data-bs-theme="dark"] #settingsTabs .nav-link:hover {
  background-color: rgba(var(--primary-rgb), 0.25) !important;
}

[data-bs-theme="dark"] #settingsTabs .nav-link.active {
  background-color: rgba(var(--primary-rgb), 0.3) !important;
}

/* Dark mode support for medical warnings and loading messages */
[data-bs-theme="dark"] .medical-warning {
  background-color: rgba(var(--primary-rgb), 0.2) !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  color: var(--primary) !important;
}

[data-bs-theme="dark"] .medical-warning strong,
[data-bs-theme="dark"] .medical-warning span,
[data-bs-theme="dark"] .medical-warning i {
  color: var(--primary) !important;
}

/* Dark mode support for no-records-info */
[data-bs-theme="dark"] .no-records-info {
  background-color: rgba(var(--primary-rgb), 0.2) !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  color: var(--primary) !important;
}

[data-bs-theme="dark"] .no-records-info:before {
  color: var(--primary) !important;
}

/* Dark mode support for loading/processing messages */
[data-bs-theme="dark"] .alert-danger:has(strong:contains("Please wait while the model analyzes")),
[data-bs-theme="dark"] .alert-danger:has(span:contains("Please wait while we generate")),
[data-bs-theme="dark"] .alert-danger:has(span:contains("Generating")),
[data-bs-theme="dark"] .alert-danger:has(span:contains("Please wait")),
[data-bs-theme="dark"] .alert.alert-danger[id*="progress"],
[data-bs-theme="dark"] .alert.alert-danger[id*="interpretation"] {
  background-color: rgba(var(--primary-rgb), 0.2) !important;
  border-color: rgba(var(--primary-rgb), 0.4) !important;
  color: var(--primary) !important;
}

/* Visualization Sections */
.visualization-image {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 700px !important;
  margin: 0 auto;
  display: block;
  border: 1px solid var(--light-border);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 8px;
  background-color: white;
}

.card-body.text-center img.visualization-image {
  transition: transform 0.3s ease;
}

.card-body.text-center img.visualization-image:hover {
  transform: scale(1.02);
  cursor: pointer;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments for visualizations */
@media (min-width: 992px) {
  .col-md-12 .card-body.text-center img.visualization-image {
    max-height: 800px !important;
  }
}

@media (max-width: 768px) {
  .visualization-image {
    max-height: 500px !important;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .advanced-filters .card-body {
    padding: 1rem;
  }
  
  .advanced-filters .filter-actions {
    margin-top: 1rem;
    justify-content: space-between;
    width: 100%;
  }
}

/* Table style for dark mode */
[data-bs-theme="dark"] .table-light {
  background-color: var(--dark-bg) !important;
  color: var(--light) !important;
}

[data-bs-theme="dark"] .table thead.table-light th {
  background-color: var(--dark-bg) !important;
  color: var(--light) !important;
  border-color: var(--light-border) !important;
}

/* Specific styling for image metadata table in dark mode */
[data-bs-theme="dark"] .image-metadata-table .table-sm th {
  background-color: var(--dark-bg) !important;
  color: var(--light) !important;
  border-color: var(--light-border) !important;
}

[data-bs-theme="dark"] .image-metadata-table .table-sm td {
  background-color: var(--dark-bg) !important;
  color: var(--light) !important;
  border-color: var(--light-border) !important;
}

[data-bs-theme="dark"] .table-bordered,
[data-bs-theme="dark"] .table-bordered th,
[data-bs-theme="dark"] .table-bordered td {
  border-color: var(--light-border);
}

/* Make visualization image background adapt to dark mode */
[data-bs-theme="dark"] .visualization-image {
  background-color: var(--dark-bg);
  border-color: var(--light-border);
}

/* Ensure cards with border class have proper styling in dark mode */
[data-bs-theme="dark"] .card.border {
  background-color: var(--dark-bg);
  border-color: var(--light-border);
  color: var(--light);
}

[data-bs-theme="dark"] .card.border .card-body {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Style loading/processing messages like medical warnings */
.alert-danger:has(strong:contains("Please wait while the model analyzes")),
.alert-danger:has(span:contains("Please wait while we generate")),
.alert-danger:has(span:contains("Generating")),
.alert-danger:has(span:contains("Please wait")),
.alert.alert-danger[id*="progress"],
.alert.alert-danger[id*="interpretation"] {
  background-color: rgba(var(--primary-rgb), 0.1) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.alert-danger:has(strong:contains("Please wait while the model analyzes")) strong,
.alert-danger:has(span:contains("Please wait while we generate")) span,
.alert-danger:has(span:contains("Generating")) span,
.alert-danger:has(span:contains("Please wait")) span,
.alert.alert-danger[id*="progress"] strong,
.alert.alert-danger[id*="interpretation"] strong,
.alert-danger:has(strong:contains("Please wait while the model analyzes")) i,
.alert-danger:has(span:contains("Please wait while we generate")) i,
.alert-danger:has(span:contains("Generating")) i,
.alert-danger:has(span:contains("Please wait")) i,
.alert.alert-danger[id*="progress"] i,
.alert.alert-danger[id*="interpretation"] i {
  color: var(--primary) !important;
}

/* Custom highlights for print dropdown items - using primary color scheme */
#print-to-printer:hover,
#print-to-printer:focus,
#print-to-pdf:hover,
#print-to-pdf:focus {
  background-color: var(--primary) !important;
  color: white !important;
}

/* Also apply to the main Print button dropdown toggle */
.btn-outline-primary.dropdown-toggle:hover,
.btn-outline-primary.dropdown-toggle:focus,
.btn-outline-primary.dropdown-toggle:active,
.btn-outline-primary.dropdown-toggle.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

/* Handle dropdown states - prevent Bootstrap blue from showing */
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary.dropdown-toggle[aria-expanded="true"],
.dropdown.show .btn-outline-primary.dropdown-toggle,
.btn-group.show .btn-outline-primary.dropdown-toggle {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

/* Override Bootstrap's default primary button states more aggressively */
.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info) {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  background-color: transparent !important;
}

.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info):hover,
.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info):focus,
.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info):active,
.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info).active,
.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info).show,
.btn-outline-primary.dropdown-toggle:not(.btn-outline-secondary):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-success):not(.btn-outline-info)[aria-expanded="true"] {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
  box-shadow: none !important;
}

/* Ensure no blue shows when dropdown items are hovered */
.dropdown-menu.show ~ .btn-outline-primary.dropdown-toggle,
.dropdown-item:hover ~ .btn-outline-primary.dropdown-toggle,
.dropdown-item:focus ~ .btn-outline-primary.dropdown-toggle {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

/* Style user dropdown items to match nav-link colors */
.navbar .dropdown-menu .dropdown-item {
  color: #6c757d !important;
  transition: all 0.15s ease-in-out;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  background-color: #6c757d !important;
  color: white !important;
}

/* Dark theme styling for dropdown items */
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item {
  color: #6c757d !important;
}

[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .navbar .dropdown-menu .dropdown-item:focus {
  background-color: #6c757d !important;
  color: white !important;
}