/* Dark Mode Override CSS */
:root {
  /* Dark Mode Background Colors */
  --bs-body-bg: #1a1a1a;
  --bs-body-bg-rgb: 26, 26, 26;
  --bs-secondary-bg: #2d2d2d;
  --bs-secondary-bg-rgb: 45, 45, 45;
  --bs-tertiary-bg: rgba(255, 255, 255, 0.1);
  --bs-tertiary-bg-rgb: 255, 255, 255;
  
  /* Dark Mode Text Colors */
  --bs-body-color: rgba(255, 255, 255, 0.8);
  --bs-body-color-rgb: 255, 255, 255;
  --bs-heading-color: #ffffff;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(255, 255, 255, 0.7);
  --bs-secondary-color-rgb: 255, 255, 255;
  --bs-tertiary-color: rgba(255, 255, 255, 0.5);
  --bs-tertiary-color-rgb: 255, 255, 255;
  
  /* Dark Mode Link Colors */
  --bs-link-color: #ffffff;
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: #C1FF72;
  --bs-link-hover-color-rgb: 193, 255, 114;
  
  /* Dark Mode Gray Scale */
  --bs-gray-100: rgba(255, 255, 255, 0.1);
  --bs-gray-200: #2d2d2d;
  --bs-gray-300: rgba(255, 255, 255, 0.4);
  --bs-gray-400: rgba(255, 255, 255, 0.5);
  --bs-gray-500: #ffffff;
  --bs-light-gray: #2d2d2d;
  --bs-light-gray-rgb: 45, 45, 45;
  
  /* Dark Mode Borders */
  --bs-light-border-subtle: #2d2d2d;
  --bs-dark-border-subtle: #ffffff;
  
  /* Dark Mode Backgrounds */
  --bs-light-bg-subtle: rgba(45, 45, 45, 0.8);
  --bs-dark-bg-subtle: rgba(255, 255, 255, 0.1);
  
  /* Update secondary and dark colors for dark mode */
  --bs-secondary: #ffffff;
  --bs-secondary-rgb: 255, 255, 255;
  --bs-dark: #ffffff;
  --bs-dark-rgb: 255, 255, 255;
  --bs-light: rgba(255, 255, 255, 0.1);
  --bs-light-rgb: 255, 255, 255;
  --bs-muted: rgba(255, 255, 255, 0.6);
  --bs-muted-rgb: 255, 255, 255;
  --bs-dark-light: rgba(255, 255, 255, 0.7);
  --bs-dark-light-rgb: 255, 255, 255;
}

/* Force dark background on body */
body {
  background-color: #1a1a1a !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for headers and text */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff !important;
}

/* Dark mode for cards */
.card {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.card-body {
  background-color: #2d2d2d !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for buttons */
.btn {
  color: #1a1a1a !important;
}

.btn-text {
  color: #1a1a1a !important;
}

/* Dark mode for navigation */
.header {
  background-color: #1a1a1a !important;
}

.dropdown-menu {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}

.dropdown-menu .text-dark {
  color: rgba(255, 255, 255, 0.8) !important;
}

.header-link {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for footer - keep it dark as it already is */
.footer {
  background-color: #0f0f0f !important;
}

/* Dark mode for forms */
.form-control {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.form-control:focus {
  background-color: #2d2d2d !important;
  border-color: #C1FF72 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for text colors */
.text-dark {
  color: rgba(255, 255, 255, 0.8) !important;
}

.text-white {
  color: #ffffff !important;
}

.text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Dark mode for backgrounds */
.bg-white {
  background-color: #2d2d2d !important;
}

.bg-light {
  background-color: #2d2d2d !important;
}

/* Dark mode for portfolio overlays */
.portfolio-overlay {
  background-color: rgba(26, 26, 26, 0.8) !important;
}

/* Dark mode for borders */
.border-bottom {
  border-color: #404040 !important;
}

/* Dark mode for sections */
.banner-section {
  background-color: #1a1a1a !important;
}

/* Ensure primary color stays vibrant */
.bg-primary,
.btn-primary {
  background-color: #C1FF72 !important;
  color: #1a1a1a !important;
}

/* Dark mode for any remaining light backgrounds */
.bg-secondary {
  background-color: #2d2d2d !important;
}

/* Dark mode for table elements if any */
.table {
  color: rgba(255, 255, 255, 0.8) !important;
}

.table-dark {
  background-color: #2d2d2d !important;
}

/* Dark mode for modals if any */
.modal-content {
  background-color: #2d2d2d !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for alerts if any */
.alert {
  background-color: #2d2d2d !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: #404040 !important;
}

/* Ensure icons remain visible */
iconify-icon {
  color: inherit !important;
}

/* Dark mode for specific text elements */
p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for menu button */
.toggle-menu {
  background-color: #2d2d2d !important;
}

.menu-icon {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for banner sections */
.banner-section .text-white {
  color: #ffffff !important;
}

.banner-section .text-primary {
  color: #C1FF72 !important;
}

/* Dark mode for text opacity adjustments */
.text-opacity-70 {
  color: rgba(255, 255, 255, 0.7) !important;
}

.text-opacity-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Dark mode for close button */
.btn-close {
  filter: invert(1) !important;
}

/* Dark mode for portfolio details */
.portfolio-details h4 {
  color: #ffffff !important;
}

.portfolio-details p {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for page wrapper */
.page-wrapper {
  background-color: #1a1a1a !important;
}

/* Enhanced dark mode for specific sections */
section {
  background-color: #1a1a1a !important;
}

/* Dark mode for any light sections */
.bg-light-gray {
  background-color: #2d2d2d !important;
}

/* Ensure proper contrast for buttons */
.btn .btn-text {
  color: #1a1a1a !important;
}

.btn-icon {
  background-color: #2d2d2d !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark mode for any remaining white text that should be visible */
.fs-5, .fs-6, .fs-7, .fs-8 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Specific handling for banner text */
.banner-section p {
  color: rgba(255, 255, 255, 0.7) !important;
}

.banner-section h1 {
  color: #ffffff !important;
}

/* Dark mode for specific components */
.round-52, .round-64 {
  background-color: #C1FF72 !important;
  color: #1a1a1a !important;
}

/* Ensure proper visibility of icons in primary colored elements */
.bg-primary iconify-icon {
  color: #1a1a1a !important;
}