/**
 * Milemarker Documentation - Embed Mode Styles
 *
 * These styles are applied when the documentation is embedded in an iframe.
 * Detection is automatic (checks if in iframe) or via ?embed=true URL param.
 */

/* When embed mode is active */
html.embed-mode,
html.embed-mode body {
  background: #0f172a !important;
  overflow-x: hidden;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Hide fixed header when embedded */
.embed-mode header,
.embed-mode .docs-panel-header-fixed,
.embed-mode [class*="fixed top-0"] {
  display: none !important;
}

/* Remove top padding that compensates for fixed header */
.embed-mode main {
  padding-top: 0 !important;
}

.embed-mode .pt-20 {
  padding-top: 1rem !important;
}

/* Hide the racing stripe at top when embedded */
.embed-mode .racing-stripe {
  display: none !important;
}

/* Adjust content container for embed */
.embed-mode .max-w-5xl {
  max-width: 100% !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* Hide the floating docs assistant when embedded (optional - can remove if you want it) */
.embed-mode #docs-assistant-widget {
  display: none !important;
}

/* Hide bottom navigation when embedded */
.embed-mode .mt-16.pt-8.border-t,
.embed-mode footer,
.embed-mode [class*="footer"] {
  display: none !important;
}

/* Hide "Back to Dashboard" links when embedded */
.embed-mode a[href="index.html"],
.embed-mode [class*="back-to"] {
  display: none !important;
}

/* Ensure content fills the width */
.embed-mode .mx-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Adjust padding for tighter embed */
.embed-mode .py-12 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.embed-mode .mb-12 {
  margin-bottom: 1rem !important;
}

/* Make cards span full width in embed */
.embed-mode .grid {
  width: 100%;
}

/* Reduce spacing for compact embed view */
.embed-mode .space-y-10 > * + * {
  margin-top: 1.5rem !important;
}

.embed-mode .space-y-8 > * + * {
  margin-top: 1rem !important;
}

/* Smaller section header spacing */
.embed-mode .pt-4 {
  padding-top: 0.75rem !important;
}

/* --- Embed Mode WITH Visible Assistant --- */
/* Use ?embed=true&showAssistant=true to keep the assistant visible */
html.embed-mode.show-assistant #docs-assistant-widget {
  display: block !important;
}

/* Reposition assistant for embed - bottom right with smaller offset */
html.embed-mode.show-assistant #docs-assistant-widget {
  bottom: 12px !important;
  right: 12px !important;
}

html.embed-mode.show-assistant .docs-fab {
  width: 48px !important;
  height: 48px !important;
}

html.embed-mode.show-assistant .docs-panel {
  width: 340px !important;
  max-height: 400px !important;
}

/* --- Minimal Embed Mode --- */
/* Use ?embed=minimal for a very compact view */
html.embed-minimal .pit-callout,
html.embed-minimal .mm-badge {
  display: none !important;
}

html.embed-minimal h1 {
  font-size: 1.5rem !important;
}

html.embed-minimal .text-3xl,
html.embed-minimal .text-4xl {
  font-size: 1.25rem !important;
}

/* --- Print-friendly embed --- */
@media print {
  .embed-mode header,
  .embed-mode #docs-assistant-widget,
  .embed-mode .racing-stripe {
    display: none !important;
  }

  .embed-mode main {
    padding: 0 !important;
  }
}

/* --- Dark mode support for embeds --- */
.embed-mode.dark,
.embed-mode[data-theme="dark"] {
  background: #0a0b0f !important;
}

/* --- Index/Home page specific embed styles --- */
/* For the main index.html dashboard page */
html.embed-mode .mm-nav-header,
html.embed-mode nav[class*="fixed"] {
  display: none !important;
}

html.embed-mode .ml-16,
html.embed-mode [class*="ml-16"] {
  margin-left: 0 !important;
}

/* Hide sidebar in index if present */
html.embed-mode aside,
html.embed-mode [class*="sidebar"] {
  display: none !important;
}

/* --- Critical fixes for index.html embed --- */

/* Hide the sticky header completely */
.embed-mode header.sticky,
.embed-mode header[class*="sticky"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Make the min-h-screen container work properly */
.embed-mode .min-h-screen {
  min-height: auto !important;
  width: 100% !important;
}

/* Fix the flex row layout - FORCE single column layout in embed mode */
.embed-mode .flex.flex-col,
.embed-mode [class*="flex-col"][class*="lg:flex-row"] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

/* Ensure flex-1 content takes full width */
.embed-mode .flex-1 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
}

/* Hide the right sidebar panel (Quick Links) when embedded */
/* Using multiple selectors to ensure it's caught */
.embed-mode > div > div > div.hidden,
.embed-mode .bg-white.border-l {
  display: none !important;
}

/* Override all lg: breakpoint classes that might cause layout issues */
.embed-mode [class*="lg:w-"],
.embed-mode [class*="lg:flex-row"] {
  width: 100% !important;
  flex-direction: column !important;
}

/* Ensure max-w-7xl containers fill available width */
.embed-mode .max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Keep the dark background consistent */
.embed-mode,
.embed-mode body,
.embed-mode .bg-mm-slate,
.embed-mode .bg-mm-slate-dark {
  background-color: #0f172a !important;
}

/* Hero section adjustments for embed */
.embed-mode .py-8,
.embed-mode [class*="py-8"][class*="lg:py-10"] {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Hero title sizing for embed */
.embed-mode .font-headline {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}

.embed-mode .text-3xl,
.embed-mode .text-4xl,
.embed-mode [class*="lg:text-4xl"] {
  font-size: 1.5rem !important;
}

/* Hide mobile menu elements when embedded */
.embed-mode #mobile-menu,
.embed-mode #mobile-menu-overlay {
  display: none !important;
}

/* Search modal adjustments for embed */
.embed-mode #search-modal {
  position: absolute !important;
}

/* Checklist modal - hide in embed */
.embed-mode #checklist-modal {
  display: none !important;
}

/* Ensure all child elements respect the container width */
.embed-mode * {
  max-width: 100%;
  box-sizing: border-box;
}

/* Fix any absolute positioned elements */
.embed-mode [class*="absolute"] {
  max-width: 100% !important;
}

/* Platform capabilities grid - responsive in embed */
.embed-mode .grid.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.75rem !important;
}

/* Mobile responsiveness for embed mode */
@media (max-width: 480px) {
  .embed-mode .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .embed-mode .max-w-7xl,
  .embed-mode .max-w-5xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .embed-mode .font-headline {
    font-size: 1.25rem !important;
  }

  html.embed-mode.show-assistant .docs-panel {
    width: calc(100vw - 24px) !important;
    max-width: 320px !important;
    max-height: 350px !important;
  }
}

@media (max-width: 375px) {
  .embed-mode .max-w-7xl,
  .embed-mode .max-w-5xl {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  .embed-mode .py-8,
  .embed-mode [class*="py-8"] {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .embed-mode .font-headline {
    font-size: 1.125rem !important;
  }

  html.embed-mode.show-assistant .docs-fab {
    width: 44px !important;
    height: 44px !important;
  }

  html.embed-mode.show-assistant #docs-assistant-widget {
    bottom: 8px !important;
    right: 8px !important;
  }
}

@media (max-width: 320px) {
  .embed-mode .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }

  .embed-mode .text-sm {
    font-size: 0.8125rem !important;
  }
}