/*
  JupiterKode Technologies - Dark Mode Stylesheet
  This stylesheet contains all dark mode specific styles.
  It works in conjunction with the main stylesheet.
*/

/* Dark Mode Variables */
[data-theme="dark"] {
  --primary-color: #6667AB;
  --secondary-color: #FFC233;
  --text-color: #F5F5F7;
  --text-light: #A1A1A6;
  --background-color: #1A1A1C;
  --background-alt: #2A2A2E;
  --border-color: #38383C;
  --success-color: #5BD75B;
  --error-color: #FF6B6B;
  --warning-color: #FFD166;
  --info-color: #4DACFF;
  
  /* Shadows in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Theme Toggle Specifics for Dark Mode */
[data-theme="dark"] #theme-toggle .fa-moon {
  display: none;
}

[data-theme="dark"] #theme-toggle .fa-sun {
  display: inline-block;
  color: var(--secondary-color);
}

/* Navigation in Dark Mode */
[data-theme="dark"] .main-nav {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nav-links a:hover, 
[data-theme="dark"] .nav-links a.active {
  background-color: rgba(102, 103, 171, 0.15);
}

[data-theme="dark"] .dropdown li a:hover {
  background-color: rgba(102, 103, 171, 0.15);
}

/* Mobile Menu Button in Dark Mode */
[data-theme="dark"] .mobile-menu-button span {
  background-color: var(--text-color);
}

/* Dark Mode Cards and Sections */
[data-theme="dark"] .service-card,
[data-theme="dark"] .pillar,
[data-theme="dark"] .culture-item,
[data-theme="dark"] .position-card {
  background-color: var(--background-color);
  box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .pillar:hover,
[data-theme="dark"] .culture-item:hover,
[data-theme="dark"] .position-card:hover,
[data-theme="dark"] .expertise-item:hover,
[data-theme="dark"] .benefit:hover {
  box-shadow: var(--shadow-md);
}

/* Form Elements in Dark Mode */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--background-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--primary-color);
}

/* Buttons in Dark Mode */
[data-theme="dark"] .btn.outline {
  border-color: var(--primary-color);
}

[data-theme="dark"] .filter-btn {
  border-color: var(--primary-color);
  color: var(--text-color);
}

/* Map Placeholder in Dark Mode */
[data-theme="dark"] .map-placeholder {
  background-color: #2A2A2E;
  color: var(--text-color);
}

/* Social Icons in Dark Mode */
[data-theme="dark"] .social-icons a {
  background-color: var(--background-alt);
}

/* Footer in Dark Mode */
[data-theme="dark"] .footer-bottom {
  border-color: var(--border-color);
}