@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* Root variables for consistent theming */
:root {
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
  --el-primary-50: #f0f9ff;
  --el-primary-100: #e0f2fe;
  --el-primary-200: #bae6fd;
  --el-primary-300: #7dd3fc;
  --el-primary-400: #38bdf8;
  --el-primary-500: #0ea5e9;
  --el-primary-600: #0284c7;
  --el-primary-700: #0369a1;
  --el-primary-800: #075985;
  --el-primary-900: #0c4a6e;
}

/* Dark mode variables */
[data-theme="dark"] {
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Ensure Tailwind dark mode works with Docusaurus */
[data-theme="dark"] .dark\:bg-slate-800 {
  background-color: rgb(30 41 59) !important;
}

[data-theme="dark"] .dark\:text-slate-200 {
  color: rgb(226 232 240) !important;
}

[data-theme="dark"] .dark\:border-slate-700 {
  border-color: rgb(51 65 85) !important;
}

[data-theme="dark"] .dark\:from-blue-900\/20 {
  --tw-gradient-from: rgb(30 58 138 / 0.2) var(--tw-gradient-from-position) !important;
}

[data-theme="dark"] .dark\:to-indigo-900\/20 {
  --tw-gradient-to: rgb(49 46 129 / 0.2) var(--tw-gradient-to-position) !important;
}

[data-theme="dark"] .dark\:from-yellow-900\/20 {
  --tw-gradient-from: rgb(113 63 18 / 0.2) var(--tw-gradient-from-position) !important;
}

[data-theme="dark"] .dark\:to-orange-900\/20 {
  --tw-gradient-to: rgb(124 45 18 / 0.2) var(--tw-gradient-to-position) !important;
}

[data-theme="dark"] .dark\:from-green-900\/20 {
  --tw-gradient-from: rgb(20 83 45 / 0.2) var(--tw-gradient-from-position) !important;
}

[data-theme="dark"] .dark\:to-emerald-900\/20 {
  --tw-gradient-to: rgb(6 78 59 / 0.2) var(--tw-gradient-to-position) !important;
}

[data-theme="dark"] .dark\:from-red-900\/20 {
  --tw-gradient-from: rgb(127 29 29 / 0.2) var(--tw-gradient-from-position) !important;
}

[data-theme="dark"] .dark\:to-pink-900\/20 {
  --tw-gradient-to: rgb(131 24 67 / 0.2) var(--tw-gradient-to-position) !important;
}

[data-theme="dark"] .dark\:border-blue-700 {
  border-color: rgb(29 78 216) !important;
}

[data-theme="dark"] .dark\:border-yellow-700 {
  border-color: rgb(161 98 7) !important;
}

[data-theme="dark"] .dark\:border-green-700 {
  border-color: rgb(21 128 61) !important;
}

[data-theme="dark"] .dark\:border-red-700 {
  border-color: rgb(185 28 28) !important;
}

[data-theme="dark"] .dark\:text-blue-200 {
  color: rgb(191 219 254) !important;
}

[data-theme="dark"] .dark\:text-yellow-200 {
  color: rgb(254 240 138) !important;
}

[data-theme="dark"] .dark\:text-green-200 {
  color: rgb(187 247 208) !important;
}

[data-theme="dark"] .dark\:text-red-200 {
  color: rgb(254 202 202) !important;
}

/* Additional Interactive Preview and CodeBlock styles */
[data-theme="dark"] .dark\:bg-slate-900 {
  background-color: rgb(15 23 42) !important;
}

[data-theme="dark"] .dark\:bg-slate-950 {
  background-color: rgb(2 6 23) !important;
}

[data-theme="dark"] .dark\:from-slate-900 {
  --tw-gradient-from: rgb(15 23 42) var(--tw-gradient-from-position) !important;
}

[data-theme="dark"] .dark\:to-slate-800 {
  --tw-gradient-to: rgb(30 41 59) var(--tw-gradient-to-position) !important;
}

[data-theme="dark"] .dark\:from-slate-800 {
  --tw-gradient-from: rgb(30 41 59) var(--tw-gradient-from-position) !important;
}

[data-theme="dark"] .dark\:to-gray-800 {
  --tw-gradient-to: rgb(31 41 55) var(--tw-gradient-to-position) !important;
}

[data-theme="dark"] .dark\:bg-slate-600 {
  background-color: rgb(71 85 105) !important;
}

[data-theme="dark"] .dark\:hover\:bg-slate-600:hover {
  background-color: rgb(71 85 105) !important;
}

[data-theme="dark"] .dark\:text-slate-300 {
  color: rgb(203 213 225) !important;
}

/* Global styles */
html {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    sans-serif;
}

/* Smooth transitions for theme changes */
* {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

/* Enhanced documentation styling */
.markdown h1 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
  background: linear-gradient(to right, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.markdown h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(226 232 240);
  color: rgb(30 41 59);
}

[data-theme="dark"] .markdown h2 {
  border-bottom-color: rgb(51 65 85);
  color: rgb(255 255 255);
}

.markdown h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: rgb(30 41 59);
}

[data-theme="dark"] .markdown h3 {
  color: rgb(248 250 252);
}

.markdown p {
  line-height: 1.625;
  margin-bottom: 1.5rem;
  color: rgb(71 85 105);
}

[data-theme="dark"] .markdown p {
  color: rgb(226 232 240);
}

.markdown a {
  color: rgb(37 99 235);
  transition: color 0.2s ease-in-out;
}

.markdown a:hover {
  color: rgb(29 78 216);
}

[data-theme="dark"] .markdown a {
  color: rgb(165 180 252);
}

[data-theme="dark"] .markdown a:hover {
  color: rgb(218 165 252);
}

.dark .markdown a:hover {
  color: rgb(147 197 253);
}

/* Enhanced focus states */
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(59 130 246), 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgb(241 245 249);
}

.dark ::-webkit-scrollbar-track {
  background-color: rgb(30 41 59);
}

::-webkit-scrollbar-thumb {
  background-color: rgb(203 213 225);
  border-radius: 9999px;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: rgb(71 85 105);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(148 163 184);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: rgb(100 116 139);
}

/* Code block enhancements */
.prism-code {
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
}

[data-theme="dark"] .prism-code {
  border-color: #334155;
}

/* Syntax highlighting improvements */
.token.title.class-name {
  color: var(--el-primary-600);
}

[data-theme="dark"] .token.title.class-name {
  color: var(--el-primary-400);
}

.token.function {
  color: #9333ea;
}

[data-theme="dark"] .token.function {
  color: #a855f7;
}

.token.string {
  color: #059669;
}

[data-theme="dark"] .token.string {
  color: #10b981;
}

.token.keyword {
  color: #2563eb;
}

[data-theme="dark"] .token.keyword {
  color: #3b82f6;
}

/* Basic button styling */
.button--primary {
  background-color: var(--el-primary-600);
  border-color: var(--el-primary-600);
}

.button--primary:hover {
  background-color: var(--el-primary-700);
  border-color: var(--el-primary-700);
}

.button--secondary {
  background-color: #f1f5f9;
  color: #374151;
  border-color: #d1d5db;
}

.button--secondary:hover {
  background-color: #e2e8f0;
}

[data-theme="dark"] .button--secondary {
  background-color: #1e293b;
  color: #d1d5db;
  border-color: #475569;
}

[data-theme="dark"] .button--secondary:hover {
  background-color: #334155;
}

/* Enhanced focus styles */
*:focus {
  outline: 2px solid var(--el-primary-500);
  outline-offset: 2px;
}

/* Clean navbar styling */
.navbar__title {
  font-weight: 700;
  font-size: 1.25rem;
}

.navbar__link {
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.navbar__link:hover {
  color: var(--el-primary-600);
  text-decoration: none;
}

[data-theme="dark"] .navbar__link:hover {
  color: var(--el-primary-300);
}

.navbar__link--active {
  color: var(--el-primary-600);
}

[data-theme="dark"] .navbar__link--active {
  color: var(--el-primary-300);
}

/* Simple sidebar animations */
.menu__list-item {
  animation: fadeInUp 0.3s ease-out;
  animation-fill-mode: both;
}

.menu__list-item:nth-child(1) {
  animation-delay: 0.05s;
}
.menu__list-item:nth-child(2) {
  animation-delay: 0.1s;
}
.menu__list-item:nth-child(3) {
  animation-delay: 0.15s;
}
.menu__list-item:nth-child(4) {
  animation-delay: 0.2s;
}
.menu__list-item:nth-child(5) {
  animation-delay: 0.25s;
}
.menu__list-item:nth-child(6) {
  animation-delay: 0.3s;
}
.menu__list-item:nth-child(7) {
  animation-delay: 0.35s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced sidebar link styling */
.menu__link {
  transition: all 0.2s ease-in-out;
}

.menu__link:hover {
  color: var(--el-primary-700);
  background-color: var(--el-primary-50);
  text-decoration: none;
  transform: translateX(2px);
}

[data-theme="dark"] .menu__link:hover {
  color: var(--el-primary-300);
  background-color: rgba(59, 130, 246, 0.1);
}

.menu__link--active {
  color: var(--el-primary-700);
  background-color: var(--el-primary-100);
  font-weight: 600;
}

[data-theme="dark"] .menu__link--active {
  color: var(--el-primary-300);
  background-color: rgba(59, 130, 246, 0.15);
}

/* TOC animations */
.table-of-contents li {
  animation: fadeInRight 0.3s ease-out;
  animation-fill-mode: both;
}

.table-of-contents li:nth-child(1) {
  animation-delay: 0.1s;
}
.table-of-contents li:nth-child(2) {
  animation-delay: 0.15s;
}
.table-of-contents li:nth-child(3) {
  animation-delay: 0.2s;
}
.table-of-contents li:nth-child(4) {
  animation-delay: 0.25s;
}
.table-of-contents li:nth-child(5) {
  animation-delay: 0.3s;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Enhanced TOC styling */
.table-of-contents__link {
  transition: all 0.2s ease-in-out;
}

.table-of-contents__link:hover {
  color: var(--el-primary-600);
  background-color: var(--el-primary-50);
  transform: translateX(2px);
}

[data-theme="dark"] .table-of-contents__link:hover {
  color: var(--el-primary-300);
  background-color: rgba(59, 130, 246, 0.08);
}

.table-of-contents__link--active {
  color: var(--el-primary-700);
  background-color: var(--el-primary-100);
  font-weight: 500;
}

[data-theme="dark"] .table-of-contents__link--active {
  color: var(--el-primary-300);
  background-color: rgba(59, 130, 246, 0.12);
}

/* Footer enhancements */
.footer__links {
  gap: 2rem;
}

.footer__title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #f8fafc;
}

.footer__item {
  margin-bottom: 0.5rem;
}

.footer__link-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: #cbd5e1;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.footer__link-item:hover {
  color: var(--el-primary-300);
  text-decoration: none;
  transform: translateX(2px);
}

/* Add GitHub icon to footer links */
.footer__link-item[href*="github"]:before {
  content: "⭐";
  font-size: 1rem;
  opacity: 0.8;
}

.footer__link-item[href*="github"]:hover:before {
  opacity: 1;
}

/* Add Buy Me a Coffee icon to footer links */
.footer__link-item[href*="buymeacoffee"]:before {
  content: "☕";
  font-size: 1rem;
  opacity: 0.9;
}

.footer__link-item[href*="buymeacoffee"]:hover:before {
  opacity: 1;
}

/* Special styling for Buy Me a Coffee link */
.footer__link-item[href*="buymeacoffee"] {
  background: linear-gradient(135deg, #ffdd00, #fff2a1);
  color: #000000;
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  border: 1px solid #ffdd00;
  box-shadow: 0 2px 6px rgba(255, 221, 0, 0.2);
}

.footer__link-item[href*="buymeacoffee"]:hover {
  background: linear-gradient(135deg, #ffe500, #fff7b8);
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 221, 0, 0.4);
}

/* Alternative with SVG icon (uncomment to use instead of emoji) */
/*
.footer__link-item[href*="github"]:before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='%23cbd5e1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.30.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
*/

/* Buy Me a Coffee button styling in navbar */
.bmc-button {
  display: inline-block;
  width: 163px; /* Proportional width for 40px height */
  height: 40px;
  background-image: url("https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none !important;
}

.bmc-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-decoration: none !important;
}

/* Buy Me a Coffee button styling in footer */
.bmc-button-footer {
  display: inline-block;
  width: 180px; /* Larger for footer */
  height: 50px;
  background-image: url("https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
  margin-top: 0.5rem;
}

.bmc-button-footer:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  text-decoration: none !important;
}

/* Legacy styles - keeping for compatibility */
.navbar a[href*="buymeacoffee"] {
  transition: all 0.2s ease-in-out;
}

.navbar a[href*="buymeacoffee"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.navbar a[href*="buymeacoffee"] img {
  max-height: 40px !important;
  width: auto !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease-in-out !important;
}

.navbar a[href*="buymeacoffee"]:hover img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure BMC button fits well in navbar */
#bmc-widget-container iframe {
  border-radius: 8px !important;
  height: 40px !important;
  max-height: 40px !important;
}

/* BMC button hover effect */
#bmc-widget-container:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease-in-out;
}
