/* ========================================
   Dark Mode Styles for EasyTech Website
   ======================================== */

/* Dark Mode Variables */
body.dark-mode {
  --dark-bg: #0d1117;
  --dark-card: #161b22;
  --dark-border: #30363d;
  --dark-text: #c9d1d9;
  --dark-text-secondary: #8b949e;
  --dark-hover: #21262d;
}

/* ========== Dark Mode Base ========== */
body.dark-mode {
  background-color: var(--dark-bg);
  color: var(--dark-text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--white);
}

/* Section Title */
body.dark-mode .section-title {
  color: var(--white);
}

body.dark-mode .section-subtitle {
  color: var(--dark-text-secondary);
}

/* ========== Navbar Dark Mode ========== */
body.dark-mode .navbar {
  background: rgba(13, 17, 23, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode .navbar.scrolled {
  background: rgba(13, 17, 23, 0.98);
}

body.dark-mode .navbar-nav .nav-link {
  color: var(--dark-text);
}

body.dark-mode .navbar-nav .nav-link:hover,
body.dark-mode .navbar-nav .nav-link.active {
  color: var(--primary-blue);
}

body.dark-mode .theme-toggle {
  background: var(--dark-card);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

body.dark-mode .theme-toggle:hover {
  background: var(--primary-blue);
  color: var(--white);
}

body.dark-mode .navbar-toggler {
  border-color: var(--dark-border);
}

body.dark-mode .navbar-toggler-icon {
  filter: invert(1);
}

@media (max-width: 991px) {
  body.dark-mode .navbar-nav {
    background: var(--dark-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }
}

/* ========== Hero Section Dark Mode ========== */
body.dark-mode .hero-section {
  background: linear-gradient(135deg, #0a192f 0%, #112240 50%, #1a365d 100%);
}

/* ========== About Section Dark Mode ========== */
body.dark-mode .about-section {
  background: var(--dark-bg);
}

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

body.dark-mode .feature-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .feature-card:hover {
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.2);
}

body.dark-mode .feature-title {
  color: var(--white);
}

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

body.dark-mode .stat-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stat-card:hover {
  box-shadow: 0 10px 25px rgba(0, 180, 216, 0.2);
}

body.dark-mode .stat-number {
  color: var(--white);
}

body.dark-mode .stat-label {
  color: var(--dark-text-secondary);
}

/* ========== Services Section Dark Mode ========== */
body.dark-mode .services-section {
  background: var(--dark-card);
}

body.dark-mode .service-card {
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .service-card:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.2);
}

body.dark-mode .service-title {
  color: var(--white);
}

body.dark-mode .service-description {
  color: var(--dark-text-secondary);
}

body.dark-mode .service-list li {
  color: var(--dark-text);
}

/* ========== Portfolio Section Dark Mode ========== */
body.dark-mode .portfolio-section {
  background: var(--dark-bg);
}

body.dark-mode .filter-btn {
  background: var(--dark-card);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

body.dark-mode .filter-btn:hover,
body.dark-mode .filter-btn.active {
  background: var(--primary-blue);
  color: var(--white);
  border-color: var(--primary-blue);
}

body.dark-mode .portfolio-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .portfolio-card:hover {
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.2);
}

body.dark-mode .portfolio-title {
  color: var(--white);
}

body.dark-mode .portfolio-category {
  background: rgba(0, 180, 216, 0.2);
  color: var(--primary-blue);
}

/* ========== Testimonials Section Dark Mode ========== */
body.dark-mode .testimonials-section {
  background: var(--dark-card);
}

body.dark-mode .testimonial-card {
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

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

body.dark-mode .testimonial-name {
  color: var(--white);
}

body.dark-mode .testimonial-position {
  color: var(--dark-text-secondary);
}

body.dark-mode .carousel-control-prev,
body.dark-mode .carousel-control-next {
  background: var(--primary-blue);
}

body.dark-mode .carousel-indicators button {
  background: var(--primary-blue);
}

/* ========== Contact Section Dark Mode ========== */
body.dark-mode .contact-section {
  background: var(--dark-bg);
}

body.dark-mode .contact-form-wrapper {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .form-label {
  color: var(--white);
}

body.dark-mode .form-control {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

body.dark-mode .form-control:focus {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.2);
}

body.dark-mode .form-control::placeholder {
  color: var(--dark-text-secondary);
}

body.dark-mode .contact-info {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact-info-title {
  color: var(--white);
}

body.dark-mode .contact-item-content h5 {
  color: var(--white);
}

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

/* Form Validation in Dark Mode */
body.dark-mode .form-control.is-valid {
  border-color: #28a745;
}

body.dark-mode .form-control.is-invalid {
  border-color: #dc3545;
}

body.dark-mode .invalid-feedback {
  color: #ff6b6b;
}

body.dark-mode .valid-feedback {
  color: #51cf66;
}

/* ========== Footer Dark Mode ========== */
body.dark-mode .footer {
  background: #010409;
  border-top: 1px solid var(--dark-border);
}

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

body.dark-mode .footer-links a {
  color: var(--dark-text-secondary);
}

body.dark-mode .footer-links a:hover {
  color: var(--primary-blue);
}

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

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

body.dark-mode .footer-bottom {
  border-top-color: var(--dark-border);
}

/* ========== Modals Dark Mode ========== */
body.dark-mode .modal-content {
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

body.dark-mode .modal-header {
  border-bottom-color: var(--dark-border);
}

body.dark-mode .modal-title {
  color: var(--white);
}

body.dark-mode .modal-body h6 {
  color: var(--white);
}

body.dark-mode .modal-body p {
  color: var(--dark-text);
}

body.dark-mode .btn-close {
  filter: invert(1);
}

/* ========== Alerts Dark Mode ========== */
body.dark-mode .alert {
  background: var(--dark-card);
  border-color: var(--dark-border);
  color: var(--dark-text);
}

body.dark-mode .alert-success {
  background: rgba(46, 160, 67, 0.2);
  border-color: #2ea043;
  color: #7ee787;
}

body.dark-mode .alert-danger {
  background: rgba(248, 81, 73, 0.2);
  border-color: #f85149;
  color: #ff7b72;
}

/* ========== Fixed Elements Dark Mode ========== */
body.dark-mode .scroll-top {
  background: var(--gradient-primary);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.4);
}

body.dark-mode .scroll-top:hover {
  box-shadow: 0 8px 25px rgba(0, 180, 216, 0.6);
}

body.dark-mode .whatsapp-float {
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

body.dark-mode .whatsapp-float:hover {
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
}

/* ========== Smooth Transitions ========== */
body.dark-mode,
body.dark-mode .navbar,
body.dark-mode .feature-card,
body.dark-mode .service-card,
body.dark-mode .portfolio-card,
body.dark-mode .testimonial-card,
body.dark-mode .contact-form-wrapper,
body.dark-mode .contact-info,
body.dark-mode .form-control,
body.dark-mode .filter-btn,
body.dark-mode .stat-card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========== Theme Toggle Icon Change ========== */
body.dark-mode .theme-toggle i::before {
  content: "\f185"; /* bi-sun-fill */
}

/* ========== Scrollbar Dark Mode ========== */
body.dark-mode::-webkit-scrollbar {
  width: 12px;
}

body.dark-mode::-webkit-scrollbar-track {
  background: var(--dark-bg);
}

body.dark-mode::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 6px;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
  background: var(--primary-blue);
}

/* ========== Images and Media Dark Mode ========== */
body.dark-mode img {
  opacity: 0.9;
}

body.dark-mode img:hover {
  opacity: 1;
}

/* Exception for logo */
body.dark-mode .logo-img,
body.dark-mode .footer-logo,
body.dark-mode .testimonial-avatar img {
  opacity: 1;
}

/* ========== Responsive Dark Mode Adjustments ========== */
@media (max-width: 991px) {
  body.dark-mode .navbar-nav {
    background: var(--dark-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }
}