/* Reset and base styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ui-gray-9, #344054);
  background-color: #f5f5f6; /* Swapped: was white, now lighter gray */
  margin-top: 64px;
}

/* Header styling - matching docs.portainer.io exactly */
/* Based on inspection: uses shadow instead of border, color is oklch(0.928 0.006 264.531) */
.version-selector {
  padding: 0;
  background-color: #2E2F33; /* Updated background color */
  border-bottom: none; /* Docs site uses shadow, not border */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space between logo and selectors */
  height: 64px;
  /* Match docs.portainer.io shadow: shadow-[0px_1px_0px] shadow-tint-12/2 */
  /* Exact color from inspection: oklch(0.928 0.006 264.531) at 50% opacity */
  /* Using oklch directly to match docs site exactly - modern browsers support it */
  box-shadow: 
    0 1px 0 0 oklch(0.928 0.006 264.531 / 0.5),
    0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Create a centered container wrapper effect to align header content with body */
.version-selector::before {
  content: '';
  flex: 1 1 0;
  min-width: 0;
  max-width: calc((100% - 1536px) / 2);
}

/* Remove the right spacer - selectors should align to right edge */
.version-selector::after {
  display: none;
}

/* Align header children to match body content alignment */
.version-selector > .logo-container {
  flex: 0 0 auto;
  padding-left: 32px;
}

.version-selector > .selectors-wrapper {
  flex: 0 0 auto;
  padding-right: 24px; /* Add padding for spacing from right edge */
  margin-right: 0;
}

.selectors-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.logo-container a {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo-container a:hover {
  opacity: 0.9;
}

.logo-container img {
  height: 32px;
  width: 32px; /* Match size-8 from docs site */
  display: block;
  object-fit: contain;
}

.logo-title {
  margin-left: 12px; /* ms-3 = 0.75rem = 12px */
  font-size: 16px; /* text-base = 16px */
  line-height: 1.25; /* tight line-height */
  font-weight: 600; /* font-semibold */
  letter-spacing: -0.025em; /* tracking-tight */
  color: var(--ui-graphite-10, #f5f5f6);
  white-space: nowrap; /* Prevent text wrapping to maintain layout */
  max-width: 18ch; /* max-w-[18ch] on mobile */
}

/* Match lg:text-lg/tight on large screens */
@media (min-width: 1024px) {
  .logo-title {
    font-size: 18px; /* lg:text-lg = 18px */
    max-width: 24ch; /* lg:max-w-[24ch] */
  }
}

.selector-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selector-container label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ui-graphite-10, #f5f5f6);
  white-space: nowrap;
}

.selector-container select {
  padding: 6px 32px 6px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ui-graphite-10, #f5f5f6);
  background-color: var(--ui-graphite-700, #2e2f33);
  border: 1px solid var(--ui-graphite-600, #3a3b3f);
  border-radius: 6px;
  cursor: pointer; /* Shows hand/pointing finger cursor */
  outline: none;
  /* Completely remove transitions to prevent interference */
  transition: none !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f5f5f6' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  width: auto;
  min-width: 0;
  /* Prevent visual glitches */
  -webkit-tap-highlight-color: transparent;
  /* Prevent text selection during dropdown interaction */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.selector-container select:hover {
  border-color: var(--ui-blue-6, #36bffa);
  background-color: var(--ui-graphite-600, #3a3b3f);
}

.selector-container select:focus {
  border-color: var(--ui-blue-6, #36bffa);
  box-shadow: 0 0 0 3px rgba(54, 191, 250, 0.2);
  background-color: var(--ui-graphite-700, #2e2f33);
}

.selector-container select option {
  background-color: var(--ui-graphite-700, #2e2f33);
  color: var(--ui-graphite-10, #f5f5f6);
  padding: 8px 12px;
}

/* Redoc container - left-aligned with header, extends to right edge of page */
/* Left edge aligns with header content, right edge flows to end of page */
#redoc-container {
  min-height: calc(100vh - 64px);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  margin-left: max(32px, calc((100% - 1536px) / 2 + 32px)); /* Align left edge with header */
  padding: 0; /* No padding - content flows to edges */
  width: auto;
  max-width: none; /* Remove max-width constraint to allow flow to end of page */
  background-color: #f5f5f6; /* Match body background (swapped color) */
}

/* Ensure Redoc's internal structure respects the container width */
#redoc-container > div {
  max-width: 100%;
  width: 100%;
}

/* Force Inter font on all Redoc content */
#redoc-container * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Style Redoc sidebar to match docs.portainer.io appearance */
/* Redoc structures its layout with a sidebar navigation on the left */
/* Target the sidebar column (first child div) - match page background, no rounded borders */
#redoc-container > div > div:first-child {
  background-color: #f5f5f6 !important; /* Match page background (swapped: was white, now lighter gray) */
  border-radius: 0 !important; /* No rounded borders on outer container */
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Also target nav elements directly if they're the sidebar container */
#redoc-container > div > nav:first-child {
  background-color: #f5f5f6 !important; /* Match page background (swapped: was white, now lighter gray) */
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Style the main sidebar content container that wraps search, nav items, and footer */
/* This should be the container that holds all sidebar content together */
#redoc-container > div > div:first-child > div:first-child,
#redoc-container > div > nav:first-child > div:first-child,
#redoc-container > div > div:first-child > nav,
#redoc-container > div > nav:first-child {
  background-color: #ffffff !important; /* Swapped: was #f5f5f6, now white */
  border-radius: 12px !important; /* rounded-xl = 12px */
  border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Subtle border matching border-tint-subtle */
  padding: 16px !important;
  margin: 16px 0 !important;
}

/* Prevent child containers from creating separate rounded boxes */
/* Remove backgrounds and borders from nested containers within the main sidebar container */
/* Be more aggressive - target all possible intermediate containers */
#redoc-container > div > div:first-child > div:first-child > div,
#redoc-container > div > div:first-child > div:first-child > section,
#redoc-container > div > nav:first-child > div,
#redoc-container > div > nav:first-child > section,
#redoc-container > div > div:first-child > div:first-child > form,
#redoc-container > div > div:first-child > div:first-child > div > div {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove rounded corners from search bar - it's part of the main container */
#redoc-container input[type="search"],
#redoc-container input[type="text"],
#redoc-container [class*="search"],
#redoc-container [class*="Search"] {
  border-radius: 0 !important; /* No rounded corners - part of main container */
}

/* Remove rounded corners from individual navigation items - they're part of the main container */
#redoc-container nav a,
#redoc-container nav li > a,
#redoc-container [class*="menu-item"] a,
#redoc-container [class*="menu"] a {
  border-radius: 0 !important; /* No rounded corners - part of main container */
}

/* Style the scrollbar container with rounded borders */
#redoc-container [class*="scrollbar-container"],
#redoc-container .ps {
  border-radius: 12px !important; /* Rounded borders for scrollbar container */
}


/* Ensure the sidebar navigation lists have transparent background */
#redoc-container nav ul,
#redoc-container nav > ul {
  background-color: transparent !important;
}

/* Hide info section navigation items from sidebar (but keep content visible) */
#redoc-container nav a[href="#authentication"],
#redoc-container nav a[href="#security"],
#redoc-container nav a[href="#execute-docker-requests"],
#redoc-container nav a[href="#private-registry"],
#redoc-container nav a[href*="#authentication"],
#redoc-container nav a[href*="#security"],
#redoc-container nav a[href*="#execute-docker-requests"],
#redoc-container nav a[href*="#private-registry"],
#redoc-container nav li:has(a[href="#authentication"]),
#redoc-container nav li:has(a[href="#security"]),
#redoc-container nav li:has(a[href="#execute-docker-requests"]),
#redoc-container nav li:has(a[href="#private-registry"]),
#redoc-container nav li:has(a[href*="#authentication"]),
#redoc-container nav li:has(a[href*="#security"]),
#redoc-container nav li:has(a[href*="#execute-docker-requests"]),
#redoc-container nav li:has(a[href*="#private-registry"]) {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .version-selector {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding: 12px 16px;
    gap: 12px;
  }

  /* Remove the pseudo-elements on mobile for simpler layout */
  .version-selector::before,
  .version-selector::after {
    display: none;
  }

  .version-selector > .logo-container {
    padding-left: 0;
  }

  .version-selector > .selectors-wrapper {
    padding-right: 0;
  }

  .logo-container {
    width: 100%;
    margin-bottom: 4px;
  }

  .selectors-wrapper {
    width: 100%;
    flex-direction: column;
    gap: 12px;
    margin-left: 0;
  }

  .selector-container {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  .selector-container select {
    width: 100%;
    min-width: 0;
  }

  body {
    margin-top: 80px;
  }

  /* On mobile, remove side padding and max-width constraint, reset margin */
  #redoc-container {
    margin-left: 0; /* Reset calculated margin on mobile */
    padding: 0 16px;
    max-width: 100%;
  }
}