/* Enhanced Dark Mode Styles */

/* Theme transition class for smooth mode switching */
body.theme-transition,
body.theme-transition *,
body.theme-transition *:before,
body.theme-transition *:after {
  transition: all 0.5s ease-in-out !important;
  transition-delay: 0 !important;
}

/* Base dark mode styles */
body.dark-mode {
  --apple-white: #111111;
  --apple-gray-50: #1d1d1f;
  --apple-gray-100: #2d2d2f;
  --apple-gray-200: #3d3d41;
  --apple-gray-300: #86868b;
  --apple-gray-400: #a1a1a6;
  --apple-gray-500: #f5f5f7;
  background-color: var(--apple-white);
  color: var(--apple-gray-500);
}

/* Header styles */
body.dark-mode header {
  background-color: rgba(17, 17, 17, 0.8);
  border-bottom-color: var(--apple-gray-100);
  backdrop-filter: saturate(180%) blur(20px);
}

body.dark-mode .logo {
  color: var(--apple-gray-500);
}

body.dark-mode .logo img {
  transition: opacity 0.3s ease-in-out;
}

body.dark-mode .nav-item a {
  color: var(--apple-gray-300);
}

body.dark-mode .nav-item a:hover {
  color: var(--apple-gray-500);
}

/* Card and component styles */
body.dark-mode .dns-tool,
body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .record-card,
body.dark-mode .accordion-item,
body.dark-mode .accordion-header {
  background-color: var(--apple-gray-50);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.3);
}

/* Form elements */
body.dark-mode .search-input {
  background-color: var(--apple-gray-100);
  border-color: var(--apple-gray-200);
  color: var(--apple-gray-500);
}

body.dark-mode .search-input:focus {
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 0.4rem rgba(0, 113, 227, 0.3);
}

body.dark-mode .record-type-button {
  background-color: var(--apple-gray-100);
  border-color: var(--apple-gray-200);
  color: var(--apple-gray-300);
}

body.dark-mode .record-type-button:hover {
  background-color: var(--apple-gray-200);
}

/* Tab styles */
body.dark-mode .tab-button {
  color: var(--apple-gray-300);
}

body.dark-mode .tab-button:hover {
  color: var(--apple-gray-500);
}

body.dark-mode .tab-button.active {
  color: var(--apple-blue);
  border-bottom-color: var(--apple-blue);
}

/* Table styles */
body.dark-mode .data-table th {
  color: var(--apple-gray-300);
}

body.dark-mode .data-table tr:hover {
  background-color: var(--apple-gray-100);
}

body.dark-mode .data-table th,
body.dark-mode .data-table td {
  border-bottom-color: var(--apple-gray-200);
}

/* Feature and content styles */
body.dark-mode .feature-icon,
body.dark-mode .button-secondary {
  background-color: var(--apple-gray-100);
}

body.dark-mode .feature-description,
body.dark-mode .record-description,
body.dark-mode .domain-meta,
body.dark-mode .footer-description,
body.dark-mode .cta-description {
  color: var(--apple-gray-300);
}

/* Section backgrounds */
body.dark-mode .features,
body.dark-mode .faq,
body.dark-mode footer {
  background-color: #000000;
}

/* Footer styles */
body.dark-mode .footer-link a {
  color: var(--apple-gray-300);
}

body.dark-mode .footer-link a:hover {
  color: var(--apple-gray-500);
}

body.dark-mode .footer-divider {
  background-color: var(--apple-gray-200);
}

body.dark-mode .copyright,
body.dark-mode .footer-bottom-link {
  color: var(--apple-gray-400);
}

/* Results Actions */
body.dark-mode .action-button {
  background-color: var(--apple-gray-100);
  border-color: var(--apple-gray-200);
  color: var(--apple-gray-300);
}

body.dark-mode .action-button:hover {
  background-color: var(--apple-gray-200);
}

body.dark-mode .email-button {
  background-color: rgba(0, 113, 227, 0.15);
  color: var(--apple-blue);
  border-color: rgba(0, 113, 227, 0.3);
}

body.dark-mode .email-button:hover {
  background-color: rgba(0, 113, 227, 0.2);
}

/* Toast notification */
body.dark-mode .toast {
  background-color: var(--apple-gray-200);
  color: var(--apple-white);
}

/* Modal Dialog */
body.dark-mode .modal-content {
  background-color: var(--apple-gray-50);
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.4);
}

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

body.dark-mode .modal-close {
  color: var(--apple-gray-400);
}

body.dark-mode .modal-close:hover {
  background-color: var(--apple-gray-100);
  color: var(--apple-gray-500);
}

body.dark-mode .form-group label {
  color: var(--apple-gray-300);
}

body.dark-mode .checkbox-label input[type="checkbox"] {
  border-color: var(--apple-gray-300);
  background-color: var(--apple-gray-100);
}

/* Custom elements */
body.dark-mode #propagationMap {
  background-color: var(--apple-gray-100);
  color: var(--apple-gray-300);
}

/* Badge adjustments */
body.dark-mode .badge-info {
  background-color: rgba(0, 113, 227, 0.2);
}

body.dark-mode .badge-success {
  background-color: rgba(52, 199, 89, 0.2);
}

body.dark-mode .badge-warning {
  background-color: rgba(255, 149, 0, 0.2);
}

body.dark-mode .badge-danger {
  background-color: rgba(255, 59, 48, 0.2);
}

/* Enhanced Dark Mode Toggle Styles */
.dark-mode-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 2.4rem;
  transition: background-color 0.3s ease;
}

.dark-mode-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.toggle-track {
  width: 5.2rem;
  height: 3rem;
  background-color: var(--apple-gray-200);
  border-radius: 1.5rem;
  position: relative;
  transition: background-color 0.3s ease;
  overflow: hidden;
}

.toggle-thumb {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: 2.2rem;
  height: 2.2rem;
  background-color: var(--apple-white);
  border-radius: 50%;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
  z-index: 2;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
}

/* Toggle icons */
.toggle-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  transition: opacity 0.3s ease;
}

.sun-icon {
  right: 0.4rem;
  color: var(--apple-gray-400);
  opacity: 1;
}

.moon-icon {
  left: 0.4rem;
  color: var(--apple-gray-50);
  opacity: 0;
}

/* Active toggle state */
.dark-mode-toggle.active .toggle-track {
  background-color: var(--apple-blue);
}

.dark-mode-toggle.active .toggle-thumb {
  transform: translateX(2.2rem);
  background-color: var(--apple-white);
}

body.dark-mode .sun-icon {
  opacity: 0;
}

body.dark-mode .moon-icon {
  opacity: 1;
}

.dark-mode-label {
  font-size: 1.4rem;
  color: var(--apple-gray-400);
  transition: color 0.3s ease;
}

/* Ripple effect */
.ripple-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background-color: rgba(0, 113, 227, 0.1);
  border-radius: 50%;
  opacity: 1;
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* Toast enhancement */
.toast {
  transform: translateY(2rem);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
  border-radius: 1.2rem;
  z-index: 1000;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}