/* ============================================================
   ARTHUR TEKNIK LEARN — DARK MODE
   Auto-generated by install_darkmode.php
   ============================================================ */

/* Smooth transition */
html { transition: background-color 0.3s ease, color 0.3s ease; }
body, .dark-transition { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* ============================================================
   DARK MODE - Base
   ============================================================ */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #0a0e0d !important;
  color: #e5e7eb !important;
}

/* ============================================================
   BACKGROUNDS
   ============================================================ */
html.dark .bg-white { background-color: #1a1f1e !important; }
html.dark .bg-gray-50 { background-color: #141918 !important; }
html.dark .bg-gray-100 { background-color: #0f1413 !important; }
html.dark .bg-gray-200 { background-color: #2a2f2e !important; }
html.dark .bg-gray-800 { background-color: #0a0e0d !important; }
html.dark .bg-gray-900 { background-color: #050807 !important; }

/* Primary green adjustments */
html.dark .bg-primary { background-color: #034539 !important; }
html.dark .bg-primary\/90 { background-color: rgba(3, 69, 57, 0.9) !important; }
html.dark .bg-primary\/20 { background-color: rgba(4, 91, 74, 0.2) !important; }

/* Accent adjustments */
html.dark .bg-accent { background-color: #D88E1B !important; }
html.dark .bg-accent\/10 { background-color: rgba(245, 166, 35, 0.1) !important; }
html.dark .bg-accent\/20 { background-color: rgba(245, 166, 35, 0.2) !important; }

/* Colored backgrounds for cards */
html.dark .bg-blue-50 { background-color: #0c1a2e !important; }
html.dark .bg-blue-100 { background-color: #1a2d4a !important; }
html.dark .bg-green-50 { background-color: #0a1f18 !important; }
html.dark .bg-green-100 { background-color: #14332a !important; }
html.dark .bg-yellow-50 { background-color: #1f1a0a !important; }
html.dark .bg-yellow-100 { background-color: #332b14 !important; }
html.dark .bg-red-50 { background-color: #2a0f0f !important; }
html.dark .bg-red-100 { background-color: #401717 !important; }
html.dark .bg-purple-100 { background-color: #2a1a4a !important; }
html.dark .bg-orange-50 { background-color: #2a1a0a !important; }
html.dark .bg-orange-100 { background-color: #3f2410 !important; }

/* ============================================================
   TEXT COLORS
   ============================================================ */
html.dark .text-gray-800 { color: #e5e7eb !important; }
html.dark .text-gray-700 { color: #d1d5db !important; }
html.dark .text-gray-600 { color: #9ca3af !important; }
html.dark .text-gray-500 { color: #6b7280 !important; }
html.dark .text-gray-400 { color: #9ca3af !important; }

html.dark .text-primary { color: #5eead4 !important; }
html.dark .text-accent { color: #F7B84E !important; }

html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .text-green-700 { color: #5eead4 !important; }
html.dark .text-green-800 { color: #6ee7b7 !important; }
html.dark .text-yellow-700 { color: #fcd34d !important; }
html.dark .text-yellow-800 { color: #fde68a !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }
html.dark .text-red-800 { color: #fecaca !important; }
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-blue-700 { color: #93c5fd !important; }
html.dark .text-blue-800 { color: #bfdbfe !important; }
html.dark .text-purple-700 { color: #c4b5fd !important; }

/* ============================================================
   BORDERS
   ============================================================ */
html.dark .border-gray-200 { border-color: #2a2f2e !important; }
html.dark .border-gray-300 { border-color: #3a3f3e !important; }
html.dark .border-gray-100 { border-color: #1f2423 !important; }
html.dark .border-gray-800 { border-color: #2a2f2e !important; }
html.dark .border-green-200 { border-color: #14532d !important; }
html.dark .border-yellow-200 { border-color: #713f12 !important; }
html.dark .border-red-200 { border-color: #7f1d1d !important; }

/* ============================================================
   CARDS & SHADOWS
   ============================================================ */
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl,
html.dark .shadow-2xl {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark .hover\:shadow-lg:hover,
html.dark .hover\:shadow-xl:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

/* ============================================================
   INPUTS & FORMS
   ============================================================ */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1a1f1e !important;
  border-color: #3a3f3e !important;
  color: #e5e7eb !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6b7280 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: #F5A623 !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2) !important;
}

html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  background-color: #2a2f2e;
  border-color: #4a4f4e;
}

/* ============================================================
   TABLES
   ============================================================ */
html.dark table tbody tr:hover {
  background-color: #2a2f2e !important;
}

html.dark table thead {
  background-color: #141918 !important;
}

html.dark table tbody tr {
  border-color: #2a2f2e !important;
}

/* ============================================================
   YOUTUBE IFRAME
   ============================================================ */
html.dark iframe {
  background-color: #000;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
html.dark ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark ::-webkit-scrollbar-track {
  background: #141918;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #3a3f3e;
  border-radius: 5px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #4a4f4e;
}

/* ============================================================
   LINKS
   ============================================================ */
html.dark a { color: inherit; }
html.dark a.text-accent { color: #F7B84E !important; }
html.dark a.text-accent:hover { color: #F5A623 !important; }

/* ============================================================
   TOGGLE BUTTON
   ============================================================ */
.dark-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 0;
  font-size: 18px;
  padding: 0;
}
.dark-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}
html.dark .dark-toggle {
  background: rgba(245, 166, 35, 0.2);
}
html.dark .dark-toggle:hover {
  background: rgba(245, 166, 35, 0.3);
}

/* ============================================================
   GRADIENT ADJUSTMENTS
   ============================================================ */
html.dark .bg-gradient-to-br.from-\[\#045b4a\].to-\[\#0a7d66\] {
  background: linear-gradient(135deg, #034539, #045b4a) !important;
}
html.dark .bg-gradient-to-r.from-primary {
  background: linear-gradient(to right, #034539, #045b4a) !important;
}
html.dark .bg-gradient-to-br.from-yellow-50.to-orange-50 {
  background: linear-gradient(135deg, #1f1a0a, #2a1a0a) !important;
}
html.dark .bg-gradient-to-r.from-primary.to-accent {
  background: linear-gradient(to right, #034539, #D88E1B) !important;
}