/* ========================================
   STARTBENCH - Dark Mode Styles
   ======================================== */

/* ==================== Dark Mode Variables ==================== */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-card: #1a2234;
  --bg-input: #1f2937;
  
  /* Text Colors */
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  
  /* Border Colors */
  --border-light: rgba(255, 255, 255, 0.1);
  --border-medium: rgba(255, 255, 255, 0.2);
  
  /* Shadow Colors */
  --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 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(9, 120, 30, 0.5);
  --shadow-glow-lg: 0 0 40px rgba(9, 120, 30, 0.6);
  
  /* Override base colors */
  --white: #0a0e1a;
  --light: #1f2937;
  --dark: #f9fafb;
}

/* ==================== Base Dark Mode Styles ==================== */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-secondary);
}

[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-primary);
}

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

/* ==================== Navigation Dark Mode ==================== */
[data-theme="dark"] .navbar-area.sticky {
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .navbar-nav .nav-item a {
  color: var(--text-primary);
}

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

[data-theme="dark"] .navbar-toggler .toggler-icon {
  background: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .dropdown-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .dropdown-item:hover {
  background: var(--bg-tertiary);
  color: var(--primary-light);
}

/* ==================== Hero Section Dark Mode ==================== */
[data-theme="dark"] .hero-section::before {
  background: linear-gradient(135deg, rgba(9, 120, 30, 0.2) 0%, rgba(18, 184, 95, 0.1) 100%);
}

[data-theme="dark"] .hero-content-wrapper p {
  color: var(--text-secondary);
}

/* ==================== Cards Dark Mode ==================== */
[data-theme="dark"] .card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .service-box {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .service-content h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .service-content p {
  color: var(--text-secondary);
}

/* ==================== Section Title Dark Mode ==================== */
[data-theme="dark"] .section-title p {
  color: var(--text-secondary);
}

/* ==================== About Section Dark Mode ==================== */
[data-theme="dark"] .about-img img {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* ==================== Timeline Dark Mode ==================== */
[data-theme="dark"] .timeline-content {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .timeline-content h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .timeline-content p {
  color: var(--text-secondary);
}

[data-theme="dark"] .timeline-img img {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ==================== Contact Section Dark Mode ==================== */
[data-theme="dark"] .contact-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .contact-content h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .contact-content p {
  color: var(--text-secondary);
}

[data-theme="dark"] .contact-form-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid var(--border-light);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus {
  background: var(--bg-tertiary);
  border-color: var(--primary);
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: var(--text-tertiary);
}

/* ==================== Page Banner Dark Mode ==================== */
[data-theme="dark"] .page-banner-section::before {
  background: linear-gradient(135deg, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.85) 100%);
}

[data-theme="dark"] .banner-content h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .breadcrumb-item a {
  color: var(--text-secondary);
}

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

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--text-tertiary);
}

/* ==================== Footer Dark Mode ==================== */
[data-theme="dark"] .footer {
  background: #05080f;
}

[data-theme="dark"] .footer-widget h4 {
  color: var(--text-primary);
}

[data-theme="dark"] .footer-links a,
[data-theme="dark"] .footer-contact p {
  color: var(--text-secondary);
}

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

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

[data-theme="dark"] .copyright-area p {
  color: var(--text-secondary);
}

/* ==================== CTA Section Dark Mode ==================== */
[data-theme="dark"] .contact-section.cta-bg::before {
  background: linear-gradient(135deg, rgba(9, 120, 30, 0.95) 0%, rgba(18, 184, 95, 0.9) 100%);
}

/* ==================== Counter Dark Mode ==================== */
[data-theme="dark"] .counter h4 {
  color: var(--text-secondary);
}

/* ==================== Figure Dark Mode ==================== */
[data-theme="dark"] .figure-caption {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ==================== Scroll Top Dark Mode ==================== */
[data-theme="dark"] .scroll-top {
  box-shadow: var(--shadow-glow);
}

/* ==================== Form Validation Dark Mode ==================== */
[data-theme="dark"] .valid-feedback {
  color: var(--success);
}

[data-theme="dark"] .invalid-feedback {
  color: #f87171;
}

/* ==================== Dark Mode Toggle Button ==================== */
.theme-toggle {
  position: fixed;
  top: 100px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-full);
  background: var(--primary-gradient);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-fixed);
  transition: all var(--transition-base);
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-glow);
}

.theme-toggle i {
  font-size: 22px;
  color: var(--white);
}

.theme-toggle .sun-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
  display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
  display: block;
}

/* Mobile adjustment for toggle */
@media (max-width: 768px) {
  .theme-toggle {
    top: auto;
    bottom: 100px;
    right: 20px;
  }
}

/* ==================== Selection Color ==================== */
[data-theme="dark"] ::selection {
  background: var(--primary);
  color: var(--white);
}

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

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

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

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

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

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

/* ==================== Border Adjustments ==================== */
[data-theme="dark"] .service-box,
[data-theme="dark"] .card,
[data-theme="dark"] .timeline-content,
[data-theme="dark"] .contact-item,
[data-theme="dark"] .contact-form-wrapper {
  border-color: var(--border-light);
}

/* ==================== Input Focus States ==================== */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(9, 120, 30, 0.2);
}

/* ==================== Loading Skeleton Dark Mode ==================== */
[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 0%,
    var(--bg-card) 50%,
    var(--bg-tertiary) 100%
  );
  background-size: 200% 100%;
}

/* ==================== Gradient Text Enhancement ==================== */
[data-theme="dark"] .gradient-text {
  background: linear-gradient(135deg, #12b85f 0%, #3ddc8a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}