/* ============================================
   DARK MODE STYLES
   GS PROCUREMENT & SERVICES INDUSTRY
   ============================================ */

[data-theme="dark"] {
  /* Dark Mode Colors */
  --text-color: #e4e4e7;
  --text-light: #a1a1aa;
  --text-muted: #71717a;
  --bg-color: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --border-color: #334155;
  
  /* Adjusted Brand Colors for Dark Mode */
  --primary-color: #15B392;
  --primary-light: #2DD4BF;
  --primary-dark: #0D7C66;
  
  /* Shadows for Dark Mode */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl: 0 12px 40px rgba(0,0,0,0.6);
}

/* Logo Switch */
[data-theme="dark"] .logo-dark {
  display: none;
}

[data-theme="dark"] .logo-white {
  display: block;
}

/* Header Dark Mode */
[data-theme="dark"] .header {
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .nav-link {
  color: var(--text-color);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--primary-light);
}

[data-theme="dark"] .nav-link::after {
  background: var(--primary-light);
}

[data-theme="dark"] .mobile-toggle span {
  background: var(--text-color);
}

/* Control Buttons Dark Mode */
[data-theme="dark"] .control-btn {
  background: var(--bg-tertiary);
  color: var(--text-color);
}

[data-theme="dark"] .control-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

[data-theme="dark"] .lang-selector {
  background: var(--bg-tertiary);
}

[data-theme="dark"] .lang-btn {
  color: var(--text-muted);
}

[data-theme="dark"] .lang-btn.active {
  background: var(--primary-color);
  color: #fff;
}

/* Cards Dark Mode */
[data-theme="dark"] .service-card,
[data-theme="dark"] .value-card,
[data-theme="dark"] .mv-card {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .service-card {
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .service-icon {
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .mv-card {
  background: var(--bg-tertiary);
}

/* Gallery Dark Mode */
[data-theme="dark"] .gallery-item {
  box-shadow: var(--shadow-md);
}

/* Section Badge Dark Mode */
[data-theme="dark"] .section-badge {
  background: rgba(21, 179, 146, 0.15);
  color: var(--primary-light);
}

/* Form Dark Mode */
[data-theme="dark"] .contact-form-wrapper {
  background: var(--bg-secondary);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .form-control {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-color);
}

[data-theme="dark"] .form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(21, 179, 146, 0.2);
}

[data-theme="dark"] .form-control::placeholder {
  color: var(--text-muted);
}

[data-theme="dark"] .form-group label {
  color: var(--text-color);
}

/* Contact Info Dark Mode */
[data-theme="dark"] .contact-info {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #073d33 100%);
}

/* Footer Dark Mode */
[data-theme="dark"] .footer {
  background: #030712;
  border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .footer-bottom {
  border-color: var(--border-color);
}

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

[data-theme="dark"] .btn-secondary:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}

/* Hero Adjustments */
[data-theme="dark"] .hero-overlay {
  background: linear-gradient(135deg, rgba(13, 124, 102, 0.95) 0%, rgba(7, 61, 51, 0.97) 100%);
}

/* About Image Dark Mode */
[data-theme="dark"] .about-image {
  box-shadow: var(--shadow-xl);
}

/* Map Container Dark Mode */
[data-theme="dark"] .map-container {
  filter: grayscale(30%) invert(92%) hue-rotate(180deg);
}

/* Back to Top Dark Mode */
[data-theme="dark"] .back-to-top {
  background: var(--primary-color);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .back-to-top:hover {
  background: var(--primary-light);
}

/* Preloader Dark Mode */
[data-theme="dark"] .preloader {
  background: var(--bg-color);
}

[data-theme="dark"] .spinner {
  border-color: var(--bg-tertiary);
  border-top-color: var(--primary-light);
}

/* Navigation Mobile Dark Mode */
[data-theme="dark"] .nav-menu {
  background: var(--bg-color);
}

[data-theme="dark"] .nav-link {
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .header-controls {
  border-top-color: var(--border-color);
}

/* Selection Dark Mode */
[data-theme="dark"] ::selection {
  background: var(--primary-color);
  color: #fff;
}

/* Scrollbar Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* Dark Mode Toggle Icon Animation */
.dark-mode-toggle i {
  transition: transform var(--transition-normal);
}

[data-theme="dark"] .dark-mode-toggle i {
  transform: rotate(180deg);
}

/* Link Colors */
[data-theme="dark"] a {
  color: var(--primary-light);
}

[data-theme="dark"] a:hover {
  color: var(--primary-color);
}

/* Service Link Dark Mode */
[data-theme="dark"] .service-link {
  color: var(--primary-light);
}

/* Text Colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--text-color);
}

[data-theme="dark"] p {
  color: var(--text-light);
}

/* Value Card Icon */
[data-theme="dark"] .value-icon {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* Mission Vision Card */
[data-theme="dark"] .mv-card h4 {
  color: var(--primary-light);
}

/* Smooth Transitions for Theme Change */
body,
.header,
.service-card,
.value-card,
.mv-card,
.contact-form-wrapper,
.form-control,
.footer,
.nav-menu,
.control-btn,
.lang-selector,
.preloader {
  transition: background-color var(--transition-normal),
              color var(--transition-normal),
              border-color var(--transition-normal),
              box-shadow var(--transition-normal);
}