/**
 * Flock Documentation - Custom Styling
 * State-of-the-art enhancements for Material for MkDocs
 */

/* ============================================
   MODERN CSS VARIABLES & COLOR REFINEMENTS
   ============================================ */

:root {
  /* Enhanced color palette - Matching Dashboard Design System */
  /* Primary: Indigo (from dashboard variables.css) */
  --flock-primary-600: #4f46e5;
  --flock-primary-500: #6366f1;
  --flock-primary-400: #818cf8;

  /* Tertiary: Cyan (from dashboard variables.css) */
  --flock-tertiary-500: #06b6d4;
  --flock-tertiary-600: #0891b2;

  /* Secondary: Fuchsia (from dashboard variables.css) */
  --flock-secondary-500: #d946ef;
  --flock-secondary-600: #c026d3;

  /* Success: Emerald (from dashboard variables.css) */
  --flock-success: #10b981;
  --flock-success-dark: #047857;

  /* Gradient colors matching dashboard */
  --flock-gradient-start: var(--flock-primary-600);
  --flock-gradient-end: var(--flock-tertiary-500);
  --flock-accent: var(--flock-success);

  /* Shadows matching dashboard depth */
  --flock-shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --flock-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --flock-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.5);

  /* Animation timing matching dashboard */
  --flock-transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --flock-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --flock-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing refinements */
  --flock-space-xs: 0.25rem;
  --flock-space-sm: 0.5rem;
  --flock-space-md: 1rem;
  --flock-space-lg: 1.5rem;
  --flock-space-xl: 2rem;
}

/* Dark mode refinements */
[data-md-color-scheme="slate"] {
  --flock-gradient-start: var(--flock-primary-500);
  --flock-gradient-end: var(--flock-tertiary-600);
  --flock-accent: var(--flock-success);
}

/* ============================================
   SITE TITLE & SUBTITLE
   ============================================ */

/* Enhanced header background */
.md-header {
  background: var(--flock-primary-600) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  height: 60px  !important;
  min-height: 2.8rem !important;
}

.md-tabs {
  background: var(--flock-primary-600) !important;
  align-items: baseline !important;
}

.md-tabs__list {
  white-space: nowrap !important;
  padding: 0 !important;
  contain: none !important;
  width: auto !important;
  min-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}

.md-tabs__item {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: auto !important;
  align-items: center !important;
}

.md-tabs__link {
  transition: all var(--flock-transition-base);
  position: relative;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.1rem 0.8rem !important;
  margin-bottom: 5px;
  border-radius: 8px 8px 0 0;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 20 20 auto !important;
  min-width: fit-content !important;
}

.md-tabs__link:hover {
  background: var(--flock-primary-400);
  transform: translateY(-2px);
}

.md-tabs__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--flock-primary-400);
  transform: scaleX(0);
  transition: transform var(--flock-transition-base);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

.md-tabs__link:hover::after,
.md-tabs__link--active::after {
  transform: scaleX(1);
}

.md-tabs__link--active {
  background: rgba(255, 255, 255, 0.05);
}

/* Hide the logo/emoji completely */
.md-header__button.md-logo,
.md-logo {
  display: none !important;
}

/* Make site title container flexible for subtitle */
.md-header__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  gap: 0.25rem;
  margin-left: 0 !important;
  padding: 0 !important;
}

/* Always show "Flock" as title, hide page title */
.md-header__title .md-header__ellipsis {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
  overflow: visible !important;
}

/* Replace page title with "Flock" */
.md-header__title .md-header__ellipsis .md-ellipsis {
  display: none !important;
}

/* Sidebar navigation improvements */
/* .md-nav__link {
  transition: all var(--flock-transition-fast);
  border-radius: 6px;
  margin: 2px 0;
} */

.md-nav__link:hover {
  transform: translateX(4px);
  background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.1));
}

.md-nav__link--active {
  font-weight: 600;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.1), transparent);
  border-left: 3px solid var(--flock-accent);
  padding-left: calc(0.6rem + 3px);
}

.md-header__title .md-header__ellipsis::before {
  content: 'Flock';
  display: inline-block;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(224, 242, 254, 0.2);
  line-height: 1;
  margin-top: 5px;
}

@keyframes shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Add subtitle after site title - below */
.md-header__title .md-header__ellipsis::after {
  content: 'A declarative blackboard multi-agent framework';
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
}

/* ============================================
   READING PROGRESS BAR
   ============================================ */

.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--flock-gradient-start), var(--flock-gradient-end));
  z-index: 1000;
  transition: width var(--flock-transition-fast);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================================
   IMPROVED SEARCH
   ============================================ */

.md-search__form {
  border-radius: 24px;
  transition: box-shadow var(--flock-transition-base);
}

.md-search__form:hover,
.md-search__form:focus-within {
  box-shadow: var(--flock-shadow-md);
}

.md-search__input {
  border-radius: 24px;
}


/* ============================================
   IMPROVED HEADINGS
   ============================================ */

.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.md-typeset h1 {
  background: linear-gradient(135deg, var(--flock-gradient-start), var(--flock-gradient-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.md-typeset h2 {
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--flock-gradient-start), transparent) 1;
  padding-bottom: 0.5rem;
}

/* Permalink hover effect */
.md-typeset .headerlink {
  opacity: 0;
  transition: opacity var(--flock-transition-fast), transform var(--flock-transition-fast);
  transform: translateX(-4px);
}

.md-typeset :hover > .headerlink {
  opacity: 0.5;
  transform: translateX(0);
}

.md-typeset .headerlink:hover {
  opacity: 1 !important;
  transform: scale(1.2);
}

/* ============================================
   CUSTOM SCROLLBAR (MODERN & SLEEK)
   ============================================ */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--flock-gradient-start), var(--flock-gradient-end));
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: content-box;
  transition: background var(--flock-transition-base);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--flock-gradient-end), var(--flock-gradient-start));
  background-clip: content-box;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--flock-gradient-start) transparent;
}


/* ============================================
   ENHANCED CODE BLOCKS
   ============================================ */

/* Improved code block styling */
.highlight {
  border-radius: 8px;
  box-shadow: var(--flock-shadow-md);
  transition: transform var(--flock-transition-base), box-shadow var(--flock-transition-base);
  position: relative;
  overflow: hidden;
}

.highlight:hover {
  transform: translateY(-2px);
  box-shadow: var(--flock-shadow-lg);
}

/* Inline code enhancement */
code:not(.highlight code) {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
  font-weight: 500;
  transition: background-color var(--flock-transition-fast);
}

/* Copy button enhancement */
.md-clipboard {
  transition: all var(--flock-transition-base);
  border-radius: 6px;
}

.md-clipboard:hover {
  transform: scale(1.1);
  background-color: var(--flock-accent) !important;
}

.md-clipboard:active {
  transform: scale(0.95);
}


/* ============================================
   ENHANCED TABLES
   ============================================ */

.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--flock-shadow-sm);
  transition: box-shadow var(--flock-transition-base);
}

.md-typeset table:not([class]):hover {
  box-shadow: var(--flock-shadow-md);
}

.md-typeset table:not([class]) th {
  background: var(--flock-primary-400);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.5rem;
}

.md-typeset table:not([class]) tr {
  transition: background-color var(--flock-transition-fast);
}

.md-typeset table:not([class]) tr:hover {
  background-color: rgba(79, 70, 229, 0.05);
}


/* ============================================
   IMPROVED ADMONITIONS
   ============================================ */

.md-typeset .admonition {
  border-radius: 8px;
  border-left-width: 4px;
  box-shadow: var(--flock-shadow-sm);
  transition: transform var(--flock-transition-base), box-shadow var(--flock-transition-base);
}

.md-typeset .admonition:hover {
  transform: translateX(4px);
  box-shadow: var(--flock-shadow-md);
}

.md-typeset .admonition-title {
  font-weight: 700;
  letter-spacing: 0.025em;
}



/* ============================================
   FOOTER NAVIGATION ENHANCEMENT
   ============================================ */

.md-footer__link {
  transition: all var(--flock-transition-base);
  border-radius: 8px;
  padding: 1rem !important;
}

.md-footer__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--flock-shadow-md);
}

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

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

.md-content {
  animation: fadeInUp var(--flock-transition-slow);
}

/* ============================================
   FOCUS STATES (ACCESSIBILITY)
   ============================================ */

*:focus-visible {
  outline: 3px solid var(--flock-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .reading-progress-bar,
  .md-header,
  .md-sidebar,
  .md-footer,
  .md-top {
    display: none !important;
  }

  .md-content {
    animation: none;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ============================================
   RESPONSIVE REFINEMENTS
   ============================================ */

@media screen and (max-width: 76.1875em) {
  .md-nav__link:hover {
    transform: translateX(2px);
  }
}

@media screen and (max-width: 44.9375em) {
  .reading-progress-bar {
    height: 2px;
  }

  .md-typeset h1 {
    font-size: 1.75rem;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */

@media (prefers-contrast: high) {
  .md-typeset a:not(.md-button)::after {
    height: 3px;
  }

  .md-button {
    border: 2px solid currentColor;
  }
}
