/* CRED Custom Styles - Dark Theme */

/* Import Inter font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* Header title styling */
.md-header__title {
  font-size: 1.2rem !important;
}

/* Override Material theme colors for CRED branding */
:root {
  --md-primary-fg-color: #34d39a;
  --md-primary-fg-color--light: #6ee7b7;
  --md-primary-fg-color--dark: #10b981;
  --md-accent-fg-color: #10b981;
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.1);
}

/* Custom header styling for dark theme */
.md-header {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

.md-header__title {
  color: white !important;
}

.md-header__button {
  color: white !important;
}

.md-header__button:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Logo styling */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: auto;
}

/* Navigation tabs styling for dark theme */
.md-tabs {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

.md-tabs__link--active {
  color: #34d39a !important;
  font-weight: 600;
}

/* Custom button styling */
.md-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.md-button--primary {
  background: #34d39a;
  border-color: #34d39a;
}

.md-button--primary:hover {
  background: #10b981;
  border-color: #10b981;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 211, 154, 0.3);
}

/* Card styling for dark theme */
.md-typeset .admonition {
  border-radius: 8px;
  border-left: 4px solid #34d39a;
  background: rgba(52, 211, 154, 0.05);
}

/* Code block styling for dark theme */
.md-typeset pre > code {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Table styling for dark theme */
.md-typeset table:not([class]) {
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.md-typeset table:not([class]) th {
  background: #34d39a;
  color: white;
  font-weight: 600;
}

/* Search styling for dark theme */
.md-search__form {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
}

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

::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #34d39a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #10b981;
}

/* Responsive improvements */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo img,
  .md-header__button.md-logo svg {
    height: 1.5rem;
  }
}

/* Animation for smooth transitions */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.md-content__inner {
  animation: fadeInUp 0.6s ease-out;
}

/* Custom badge styling */
.md-typeset .badge {
  background: #34d39a;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Link hover effects */
.md-typeset a {
  color: #34d39a;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.md-typeset a:hover {
  color: #10b981;
  border-bottom-color: #10b981;
}