/**
* Dark Mode Styles for project Site
*/

:root {
  /* Dark mode color variables */
  --dark-bg-primary: #121212;
  --dark-bg-secondary: #1e1e1e;
  --dark-bg-tertiary: #2d2d2d;
  --dark-text-primary: #e0e0e0;
  --dark-text-secondary: #b0b0b0;
  --dark-accent: #149ddd;
  --dark-accent-hover: #37b3ed;
  --dark-border: #444444;
  --dark-card-bg: #252525;
  --dark-section-bg: #1a1a1a;
}

/* Apply dark mode styles when .dark-mode class is present on body */
body.dark-mode {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
}

/* General text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p {
  color: var(--dark-text-primary);
}

/* Section backgrounds */
body.dark-mode .section-bg {
  background: var(--dark-bg-secondary);
}

/* Section titles */
body.dark-mode .section-title h2 {
  color: var(--dark-text-primary);
}

/* About section */
body.dark-mode .about .content h3 {
  color: var(--dark-text-primary);
}

/* Resume section */
body.dark-mode .resume .resume-title {
  color: var(--dark-text-primary);
}

body.dark-mode .resume .resume-item h4 {
  color: var(--dark-text-primary);
}

body.dark-mode .resume .resume-item h5 {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

body.dark-mode .resume .resume-item::before {
  background: var(--dark-bg-tertiary);
  border: 2px solid var(--dark-accent);
}

/* project/Projects section */
body.dark-mode .project #project-flters {
  background: var(--dark-bg-tertiary);
}

body.dark-mode .project #project-flters li {
  color: var(--dark-text-primary);
}

body.dark-mode .project .project-wrap::before {
  background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .project-item h4 {
  color: var(--dark-text-primary);
}

body.dark-mode .project .project-wrap {
  background: var(--dark-bg-secondary);
  border-radius: 5px;
  overflow: hidden;
}

body.dark-mode .project .project-links a {
  color: #fff;
  background: rgba(20, 157, 221, 0.75);
}

body.dark-mode .project .project-links a:hover {
  background: var(--dark-accent);
}

/* project details */
body.dark-mode .project-details .project-info {
  background: var(--dark-bg-secondary);
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.3);
}

body.dark-mode .project-details .project-info h3 {
  border-bottom: 1px solid var(--dark-border);
}

/* Certification page */
body.dark-mode .all-certifications .project-wrap {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

body.dark-mode .all-certifications .project-links {
  background: rgba(0, 0, 0, 0.8);
}

body.dark-mode .all-certifications .project-links a {
  color: var(--dark-text-primary);
}

body.dark-mode #project-flters li {
  color: var(--dark-text-primary);
  background: var(--dark-bg-secondary);
}

body.dark-mode #project-flters li:hover,
body.dark-mode #project-flters li.filter-active {
  background: var(--dark-accent);
  color: #fff;
}

/* Services/researchs section */
body.dark-mode .services .title a {
  color: var(--dark-text-primary);
}

body.dark-mode .services .icon-box {
  background: var(--dark-bg-secondary);
}

body.dark-mode #research .icon {
  background: rgba(20, 157, 221, 0.2);
}

body.dark-mode #research .icon i {
  color: var(--dark-accent);
}

body.dark-mode #research h4 a {
  color: var(--dark-text-primary);
}

body.dark-mode #research p {
  color: var(--dark-text-secondary);
}

/* Contact section */
body.dark-mode .contact .info {
  background: var(--dark-bg-secondary);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact .info h4 {
  color: var(--dark-text-primary);
}

body.dark-mode .contact .info p {
  color: var(--dark-text-secondary);
}

body.dark-mode .contact .php-email-form {
  background: var(--dark-bg-secondary);
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.3);
}

/* Facts section */
body.dark-mode .facts .count-box span {
  color: var(--dark-text-primary);
}

body.dark-mode .facts .count-box p {
  color: var(--dark-text-secondary);
}

body.dark-mode .facts .count-box a {
  color: var(--dark-text-secondary);
}

/* Skills section */
body.dark-mode .skills .progress .skill {
  color: var(--dark-text-primary);
}

body.dark-mode .skills .progress-bar-wrap {
  background: var(--dark-bg-tertiary);
}

body.dark-mode .skills .icon-box {
  background: rgba(45, 45, 45, 0.5);
  box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.2);
}

body.dark-mode .skills .icon-box h4 a {
  color: var(--dark-text-primary);
}

/* Testimonials section */
body.dark-mode .testimonials .testimonial-item h3 {
  color: var(--dark-text-primary);
}

body.dark-mode .testimonials .testimonial-item p {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode .testimonials .testimonial-item p::after {
  border-top: 20px solid var(--dark-bg-secondary);
}

/* Breadcrumbs */
body.dark-mode .breadcrumbs {
  background: var(--dark-bg-secondary);
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  right: 70px;
  top: 15px;
  z-index: 9998;
  border: 0;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  background-color: #149ddd;
  color: #fff;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 50px;
  cursor: pointer;
}

body.dark-mode .theme-toggle {
  background-color: #ffbb2c;
}

/* Mobile optimization for theme toggle */
@media (max-width: 768px) {
  .theme-toggle {
    right: 65px;
  }
}

@media (max-width: 480px) {
  .theme-toggle {
    right: 60px;
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
}

/* Cards and boxes */
body.dark-mode .card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

body.dark-mode .card-body {
  color: var(--dark-text-primary);
}

body.dark-mode .card-footer {
  background: var(--dark-bg-tertiary);
  border-color: var(--dark-border);
}

body.dark-mode .btn-outline-secondary {
  color: var(--dark-text-primary);
  border-color: var(--dark-text-secondary);
}

body.dark-mode .btn-outline-secondary:hover {
  background-color: var(--dark-accent);
  color: #fff;
  border-color: var(--dark-accent);
}

/* Badges */
body.dark-mode .badge.text-bg-light {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

/* Achievement and Participation sections */
body.dark-mode #acheivements .card,
body.dark-mode #participations .card {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border);
}

body.dark-mode #acheivements .card-body,
body.dark-mode #participations .card-body {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode #acheivements .btn-outline-secondary,
body.dark-mode #participations .btn-outline-secondary {
  color: var(--dark-text-primary);
  border-color: var(--dark-border);
}

body.dark-mode #acheivements .btn-outline-secondary:hover,
body.dark-mode #participations .btn-outline-secondary:hover {
  background-color: var(--dark-accent);
  border-color: var(--dark-accent);
  color: #fff;
}

/* Stamp page styles */
body.dark-mode .book {
  background-color: var(--dark-bg-primary);
}

body.dark-mode .page {
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-mode .page h1,
body.dark-mode .page h2,
body.dark-mode .page h5 {
  color: var(--dark-text-primary);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  body.dark-mode #header {
    background-color: var(--dark-bg-primary);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  }

  body.dark-mode .mobile-nav-toggle {
    background-color: var(--dark-accent);
  }

  body.dark-mode .mobile-nav-active .mobile-nav-toggle {
    background-color: var(--dark-accent-hover);
  }

  body.dark-mode .project #project-flters {
    padding: 5px 10px;
  }

  body.dark-mode .project #project-flters li {
    padding: 6px 8px;
    font-size: 13px;
  }

  body.dark-mode .section-title h2 {
    font-size: 28px;
  }

  /* Mobile optimizations for projects section */
  body.dark-mode .project-item {
    margin-bottom: 20px;
  }

  body.dark-mode .project .project-wrap {
    margin-bottom: 10px;
  }

  body.dark-mode .project-item h4 {
    font-size: 16px;
  }

  body.dark-mode .project .btn-outline-secondary {
    padding: 3px 8px;
    font-size: 12px;
  }

  /* Mobile optimizations for skills section */
  body.dark-mode .skills .icon-box {
    padding: 10px;
  }

  body.dark-mode .skills .icon-box .icon {
    width: 70px;
    height: 70px;
  }

  body.dark-mode .skills .icon-box h4 {
    font-size: 14px;
  }
}

/* Desktop Sidebar Dark Mode Styles */
body.dark-mode #header {
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
  box-shadow: 1px 0 0 var(--dark-border);
}

body.dark-mode #header .profile h1 a,
body.dark-mode #header .profile h1 a:hover {
  color: var(--dark-text-primary);
}

body.dark-mode #header .profile .social-links a {
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

body.dark-mode #header .profile .social-links a:hover {
  background: var(--dark-accent);
  color: #fff;
}

body.dark-mode .nav-menu a,
body.dark-mode .nav-menu a:focus {
  color: var(--dark-text-secondary);
}

body.dark-mode .nav-menu a i,
body.dark-mode .nav-menu a:focus i {
  color: var(--dark-text-secondary);
}

body.dark-mode .nav-menu a:hover,
body.dark-mode .nav-menu .active,
body.dark-mode .nav-menu .active:focus,
body.dark-mode .nav-menu li:hover > a {
  color: var(--dark-text-primary);
  background: var(--dark-bg-tertiary);
}

body.dark-mode .nav-menu a:hover i,
body.dark-mode .nav-menu .active i,
body.dark-mode .nav-menu .active:focus i,
body.dark-mode .nav-menu li:hover > a i {
  color: var(--dark-accent);
}

/* Glass card dark mode styling */
body.dark-mode .glass-card {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(68, 68, 68, 0.3);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

body.dark-mode .glass-card:hover {
  border-color: rgba(20, 157, 221, 0.5);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.7);
}

body.dark-mode .glass-card .card-title {
  color: var(--dark-text-primary);
}

body.dark-mode .glass-card .card-text {
  color: var(--dark-text-secondary);
}

/* Participation toggle button dark mode */
body.dark-mode .participation-toggle {
  border-color: var(--dark-accent);
  color: var(--dark-accent);
  background: transparent;
}

body.dark-mode .participation-toggle:hover {
  background: var(--dark-accent);
  color: var(--dark-text-primary);
}

body.dark-mode .participation-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(20, 157, 221, 0.3);
}