/**
 * Theme Toggle Styles
 * CSS for dark/light mode toggle functionality
 */

/* Theme Toggle Button */
.theme-toggle {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

.theme-toggle button {
  background: transparent;
  border: 1px solid #374151;
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
  color: #9ca3af;
}

.theme-toggle button:hover {
  border-color: #22c55e;
  color: #22c55e;
}

/* ==========================================
   Icon Card Styles (Services)
   ========================================== */
.icon-card {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(34, 197, 94, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.icon-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    145deg,
    rgba(34, 197, 94, 0.1) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.icon-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(34, 197, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: rgba(34, 197, 94, 0.5);
  background: linear-gradient(145deg, #1e3a2f 0%, #0f172a 100%);
}

.icon-card:hover::before {
  opacity: 1;
}

.icon-card:hover .text-green-500 {
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
}

.icon-card .text-green-500 {
  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

/* ==========================================
   Light Mode Styles
   ========================================== */
html.light body {
  background-color: #f3f4f6;
  color: #1f2937;
}

html.light .bg-gray-900 {
  background-color: #ffffff !important;
}

html.light .bg-gray-800 {
  background-color: #f9fafb !important;
}

/* Text colors for light mode */
html.light .text-gray-200,
html.light .text-gray-300,
html.light .text-gray-400 {
  color: #4b5563 !important;
}

html.light .text-white {
  color: #111827 !important;
}

html.light p.text-gray-400,
html.light span.text-gray-400 {
  color: #6b7280 !important;
}

/* Headings in light mode */
html.light h1,
html.light h2,
html.light h3,
html.light h4 {
  color: #111827 !important;
}

html.light .text-xl.font-bold,
html.light .text-2xl.font-bold,
html.light .text-3xl.font-bold {
  color: #111827 !important;
}

html.light .border-gray-700 {
  border-color: #e5e7eb !important;
}

/* Content cards in light mode */
html.light .content-card {
  background-color: #ffffff !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Icon cards (services) in light mode */
html.light .icon-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.light .icon-card:hover {
  background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%) !important;
  border-color: #22c55e !important;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(34, 197, 94, 0.15);
}

html.light .icon-card h4 {
  color: #1f2937 !important;
}

html.light .icon-card p {
  color: #6b7280 !important;
}

/* Header in light mode */
html.light header {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html.light #mobile-menu {
  background-color: #ffffff !important;
}

html.light #mobile-menu a {
  color: #374151 !important;
}

html.light #mobile-menu a:hover {
  color: #22c55e !important;
}

html.light #mobile-menu-button {
  background-color: #f3f4f6;
  border-color: #d1d5db;
}

html.light #mobile-menu-button i {
  color: #374151;
}

/* Language selector in light mode */
html.light .lang-option {
  color: #6b7280;
}

html.light .lang-option:hover,
html.light .lang-option.active {
  color: #16a34a;
}

html.light .lang-divider {
  color: #d1d5db;
}

/* Footer in light mode */
html.light footer {
  background-color: #f9fafb !important;
}

html.light footer a {
  color: #6b7280 !important;
}

html.light footer a:hover {
  color: #22c55e !important;
}

/* Nav links in light mode */
html.light nav a {
  color: #374151 !important;
}

html.light nav a:hover {
  color: #22c55e !important;
}

/* Keep green elements green in light mode */
html.light .text-green-500,
html.light .text-green-400 {
  color: #22c55e !important;
}

html.light .bg-green-500 {
  background-color: #22c55e !important;
  color: #ffffff !important;
}

/* Blog cards in light mode */
html.light .blog-card,
html.light article {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Form inputs in light mode */
html.light input,
html.light textarea,
html.light select {
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #9ca3af !important;
}

/* Section backgrounds in light mode */
html.light section.bg-gray-800 {
  background-color: #f9fafb !important;
}

html.light section.bg-gray-900 {
  background-color: #ffffff !important;
}

/* Theme toggle button in light mode */
html.light .theme-toggle button {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #374151;
}

html.light .theme-toggle button:hover {
  border-color: #22c55e;
  color: #22c55e;
}

/* Portfolio cards in light mode */
html.light .portfolio-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.light .portfolio-card:hover {
  background-color: #f9fafb !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

html.light .portfolio-card p {
  color: #374151 !important;
}

/* Post cards (blog) in light mode */
html.light .post-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
  border-left: 4px solid #22c55e !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.light .post-card:hover {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.15);
}

html.light .post-card h3,
html.light .post-card h4 {
  color: #1f2937 !important;
}

html.light .post-card p {
  color: #4b5563 !important;
}

/* Publication cards in light mode */
html.light .publication-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.light .publication-card:hover {
  background-color: #f9fafb !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

html.light .publication-card h3,
html.light .publication-card h4 {
  color: #1f2937 !important;
}

html.light .publication-card p {
  color: #4b5563 !important;
}

/* Tool cards in light mode */
html.light .tool-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.light .tool-card h3,
html.light .tool-card h4 {
  color: #1f2937 !important;
}

html.light .tool-card p {
  color: #4b5563 !important;
}

/* Form card (budget calculator) in light mode */
html.light .form-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Tags in light mode */
html.light .tag {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.3);
}

/* Metadata items in light mode */
html.light .metadata-item {
  color: #6b7280;
}

/* Links in light mode (not nav or buttons) */
html.light main a:not(.bg-green-500):not(.nav-link-active):not(.lang-option) {
  color: #16a34a;
}

html.light
  main
  a:not(.bg-green-500):not(.nav-link-active):not(.lang-option):hover {
  color: #15803d;
}

/* Hero gradient in light mode */
html.light .hero-gradient {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.05),
    rgba(59, 130, 246, 0.05)
  );
}

/* DNA background in light mode */
html.light .dna-background {
  opacity: 0.02;
}

/* Section titles in light mode */
html.light .section-title {
  color: #111827 !important;
  border-bottom-color: #22c55e;
}

/* Lightbox in light mode */
html.light .lightbox {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Mobile menu hover states in light mode */
html.light #mobile-menu a:hover {
  background-color: #f3f4f6 !important;
}

/* Labels in light mode */
html.light label {
  color: #374151 !important;
}

/* Lists in light mode */
html.light ul li,
html.light ol li {
  color: #4b5563;
}

/* Blockquotes in light mode */
html.light blockquote {
  border-left-color: #22c55e;
  background-color: #f9fafb;
  color: #4b5563;
}

/* Code blocks in light mode */
html.light pre,
html.light code {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}

/* Table styles in light mode */
html.light table {
  border-color: #e5e7eb;
}

html.light th {
  background-color: #f9fafb;
  color: #1f2937;
}

html.light td {
  border-color: #e5e7eb;
  color: #4b5563;
}

/* Horizontal rules in light mode */
html.light hr {
  border-color: #e5e7eb;
}

/* Scrollbar in light mode */
html.light ::-webkit-scrollbar-track {
  background: #f3f4f6;
}

html.light ::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

html.light ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* ==========================================
   Mobile-specific Light Mode Overrides
   ========================================== */
@media (max-width: 768px) {
  html.light header {
    background-color: #ffffff !important;
  }

  html.light header nav {
    background-color: transparent !important;
  }

  html.light #mobile-menu-button {
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
  }

  html.light #mobile-menu-button i {
    color: #374151 !important;
    text-shadow: none !important;
  }

  html.light #mobile-menu-button:hover {
    background-color: #e5e7eb !important;
    border-color: #22c55e !important;
  }
}

/* ==========================================
   Blog Post Specific Light Mode Styles
   ========================================== */
/* Post content container in light mode */
html.light .post-content {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Author box in light mode */
html.light .author-box {
  background-color: rgba(34, 197, 94, 0.05) !important;
  border-left-color: #22c55e !important;
}

html.light .author-box p {
  color: #4b5563 !important;
}

/* Breadcrumb in light mode */
html.light .breadcrumb {
  color: #6b7280;
}

html.light .breadcrumb a {
  color: #22c55e;
}

/* Comparison tables in light mode */
html.light .comparison-table th {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

html.light .comparison-table td {
  border-color: #d1d5db !important;
  color: #374151 !important;
}

/* Post navigation in light mode */
html.light .post-nav {
  border-top-color: #e5e7eb;
}

html.light .post-nav a {
  color: #22c55e;
}

/* Charts in light mode - labels */
html.light .chart-container {
  background-color: #ffffff;
  border-radius: 0.5rem;
  padding: 1rem;
}

/* ==========================================
   Tools Page Specific Light Mode Styles
   ========================================== */
/* Lab tab buttons in light mode */
html.light .lab-tab-btn {
  color: #374151 !important;
}

html.light .lab-tab-btn.bg-gray-700 {
  background-color: #e5e7eb !important;
}

html.light .lab-tab-btn.bg-gray-700:hover {
  background-color: #d1d5db !important;
}

/* Lab tab content in light mode */
html.light .lab-tab-content {
  background-color: #f9fafb;
}

/* Output/Result areas in light mode */
html.light #result,
html.light [id$="-result"],
html.light [id$="-output"],
html.light .output-area {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

/* ==========================================
   Budget Calculator Light Mode Styles
   ========================================== */
/* Service checkboxes and cards in light mode */
html.light .service-option {
  background-color: #ffffff;
  border-color: #e5e7eb;
}

html.light .service-option:hover {
  border-color: #22c55e;
  background-color: #f0fdf4;
}

/* Total/summary sections in light mode */
html.light #total-summary,
html.light .summary-box {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* ==========================================
   Additional Global Light Mode Fixes
   ========================================== */
/* Ensure all divs with bg-gray-800 class get proper light mode */
html.light div.bg-gray-800 {
  background-color: #f9fafb !important;
}

html.light div.bg-gray-900 {
  background-color: #ffffff !important;
}

/* Social icons in footer light mode */
html.light .social-icons a {
  color: #6b7280 !important;
}

html.light .social-icons a:hover {
  color: #22c55e !important;
}

/* Shadow adjustments for light mode */
html.light .shadow-lg {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light .shadow-xl {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Rounded borders visibility in light mode */
html.light .rounded-lg,
html.light .rounded-md {
  border-color: #e5e7eb;
}

/* Fix for any remaining dark text on dark backgrounds */
html.light .text-gray-200 {
  color: #374151 !important;
}