/**
 * Customize default theme styling by overriding CSS variables:
 * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
 */

/**
 * Colors
 *
 * Each colors have exact same color scale system with 3 levels of solid
 * colors with different brightness, and 1 soft color.
 *
 * - `XXX-1`: The most solid color used mainly for colored text. It must
 *   satisfy the contrast ratio against when used on top of `XXX-soft`.
 *
 * - `XXX-2`: The color used mainly for hover state of the button.
 *
 * - `XXX-3`: The color for solid background, such as bg color of the button.
 *   It must satisfy the contrast ratio with pure white (#ffffff) text on
 *   top of it.
 *
 * - `XXX-soft`: The color used for subtle background such as custom container
 *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
 *   on top of it.
 *
 *   The soft color must be semi transparent alpha channel. This is crucial
 *   because it allows adding multiple "soft" colors on top of each other
 *   to create a accent, such as when having inline code block inside
 *   custom containers.
 *
 * - `default`: The color used purely for subtle indication without any
 *   special meanings attached to it such as bg color for menu hover state.
 *
 * - `brand`: Used for primary brand colors, such as link text, button with
 *   brand theme, etc.
 *
 * - `tip`: Used to indicate useful information. The default theme uses the
 *   brand color for this by default.
 *
 * - `warning`: Used to indicate warning to the users. Used in custom
 *   container, badges, etc.
 *
 * - `danger`: Used to show error, or dangerous message to the users. Used
 *   in custom container, badges, etc.
 * -------------------------------------------------------------------------- */

:root {
  --vp-c-default-1: var(--vp-c-gray-1);
  --vp-c-default-2: var(--vp-c-gray-2);
  --vp-c-default-3: var(--vp-c-gray-3);
  --vp-c-default-soft: var(--vp-c-gray-soft);

  --vp-c-brand-1: #7937f3;
  --vp-c-brand-2: #7442d1;
  --vp-c-brand-3: #B392F0;
  --vp-c-brand-soft: rgba(121, 184, 255, 0.14);

  --vp-c-tip-1: var(--vp-c-brand-1);
  --vp-c-tip-2: var(--vp-c-brand-2);
  --vp-c-tip-3: var(--vp-c-brand-3);
  --vp-c-tip-soft: var(--vp-c-brand-soft);

  --vp-c-warning-1: var(--vp-c-yellow-1);
  --vp-c-warning-2: var(--vp-c-yellow-2);
  --vp-c-warning-3: var(--vp-c-yellow-3);
  --vp-c-warning-soft: var(--vp-c-yellow-soft);

  --vp-c-danger-1: var(--vp-c-red-1);
  --vp-c-danger-2: var(--vp-c-red-2);
  --vp-c-danger-3: var(--vp-c-red-3);
  --vp-c-danger-soft: var(--vp-c-red-soft);

  --vp-badge-error-border: var(--vp-c-error-2);
  --vp-badge-error-text: var(--vp-c-error-1);
  --vp-badge-error-bg: var(--vp-c-error-soft);

  /* Base error colors */
  --vp-c-error-1: #ff4444;
  --vp-c-error-2: #ff6666;
  --vp-c-error-3: #ff8888;
  --vp-c-error-soft: rgba(255, 68, 68, 0.14);

  /* Badge Colors */
  --vp-badge-info-border: #42b8e7;
  --vp-badge-warning-border: #e7c000;
  --vp-badge-danger-border: #ed3c50;

  /* Badge Variations */
  --vp-badge-success-border: #36d399;
  --vp-badge-success-text: #15803d;
  --vp-badge-success-bg: rgba(54, 211, 153, 0.14);

  --vp-badge-info-border: #42b8e7;
  --vp-badge-info-text: #0369a1;
  --vp-badge-info-bg: rgba(66, 184, 231, 0.14);

  /* Custom Block Variations */
  --vp-custom-block-success-border: var(--vp-badge-success-border);
  --vp-custom-block-success-text: var(--vp-badge-success-text);
  --vp-custom-block-success-bg: var(--vp-badge-success-bg);

  --vp-custom-block-info-border: var(--vp-badge-info-border);
  --vp-custom-block-info-text: var(--vp-badge-info-text);
  --vp-custom-block-info-bg: var(--vp-badge-info-bg);

  /* Tip/Info Custom Block */
  --vp-custom-block-tip-border: var(--vp-c-brand-1);
  --vp-custom-block-tip-text: var(--vp-c-brand-1);
  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);

  /* Badge variant */
  --vp-badge-tip-border: var(--vp-c-brand-1);
  --vp-badge-tip-text: var(--vp-c-brand-1);
  --vp-badge-tip-bg: var(--vp-c-brand-soft);

  /* Tip/Info - Blue */
  --vp-custom-block-tip-bg: rgba(0, 32, 47, 0.8);
  --vp-custom-block-tip-border: #79B8FF;
  --vp-custom-block-tip-text: #79B8FF;

  /* Warning - Amber */
  --vp-custom-block-warning-bg: rgba(47, 31, 0, 0.8);
  --vp-custom-block-warning-border: #ffc517;
  --vp-custom-block-warning-text: #ffc517;

  /* Danger - Red */
  --vp-custom-block-danger-bg: rgba(47, 0, 0, 0.8);
  --vp-custom-block-danger-border: #ff6b6b;
  --vp-custom-block-danger-text: #ff6b6b;

  /* Info - Grey/Purple */
  --vp-custom-block-info-bg: rgba(30, 30, 36, 0.8);
  --vp-custom-block-info-border: #B392F0;
  --vp-custom-block-info-text: #B392F0;

  /* Success - Brighter Green */
  --vp-custom-block-success-bg: rgba(0, 47, 28, 0.8);
  --vp-custom-block-success-border: #4ade80;
  --vp-custom-block-success-text: #4ade80;

  /* Custom Block Colors - Light Mode */
  
  /* Primary/Brand - Purple */
  --vp-custom-block-tip-border: #7937f3;
  --vp-custom-block-tip-text: #7937f3;
  --vp-custom-block-tip-bg: rgba(121, 55, 243, 0.1);

  /* Info - Blue */
  --vp-custom-block-info-border: #0ea5e9 !important;
  --vp-custom-block-info-text: #0ea5e9 !important;
  --vp-custom-block-info-bg: rgba(14, 165, 233, 0.1) !important;

  /* Warning - Yellow */
  --vp-custom-block-warning-border: #eab308;
  --vp-custom-block-warning-text: #eab308;
  --vp-custom-block-warning-bg: rgba(234, 179, 8, 0.1);

  /* Danger - Red */
  --vp-custom-block-danger-border: #dc2626;
  --vp-custom-block-danger-text: #dc2626;
  --vp-custom-block-danger-bg: rgba(220, 38, 38, 0.1);

  /* Success - Green */
  --vp-custom-block-success-border: #22c55e;
  --vp-custom-block-success-text: #22c55e;
  --vp-custom-block-success-bg: rgba(34, 197, 94, 0.1);

  /* Modern monospace font stack */
  --vp-font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  /* Enhanced code highlighting, especially for Safari */
  --vp-code-color: #24292f;
  --vp-code-link-color: #0969da;
  --vp-code-link-hover-color: #0969da;
  --vp-code-bg: #f6f8fa !important;
  --vp-c-text-dark-1: #24292f;
}

/**
 * Component: Button
 * -------------------------------------------------------------------------- */

:root {
  --vp-button-brand-border: transparent;
  --vp-button-brand-text: var(--vp-c-white);
  --vp-button-brand-bg: var(--vp-c-brand-3);
  --vp-button-brand-hover-border: transparent;
  --vp-button-brand-hover-text: var(--vp-c-white);
  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  --vp-button-brand-active-border: transparent;
  --vp-button-brand-active-text: var(--vp-c-white);
  --vp-button-brand-active-bg: var(--vp-c-brand-1);
}

/**
 * Component: Home
 * -------------------------------------------------------------------------- */

:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #9A54FC 0%,
    #9A54FC
  );
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(68px);
  }
}

/**
 * Component: Custom Block
 * -------------------------------------------------------------------------- */


/**
 * Component: Algolia
 * -------------------------------------------------------------------------- */

.DocSearch {
  --docsearch-primary-color: var(--vp-c-brand-1) !important;
  border-color: var(--vp-c-brand-1) !important;
  @apply border !important ;
}

/**
 * This is to adjust he spacing at the top of Teams page
 * -------------------------------------------------------------------------- */
.VPTeamPageTitle {
  margin-top: -90px !important;
  padding-top: 0 !important;
}



.dark {
  --vp-c-bg: #0D0B0F;
  --vp-c-bg-alt: #0D0B0F;
  --vp-c-bg-elv: #202127;
  --vp-c-bg-soft: #161b22 !important;
  --vp-c-text-1: #F2F2F2;
  --vp-c-text-2: #9A989D;
  --vp-c-text-3: #9A989D;
  
  /* Lighter code background in dark mode */
  --vp-code-bg: #161b22 !important;  /* Darker background in dark mode */
  
  --vp-custom-block-tip-border: #0C4C69;
  --vp-custom-block-tip-text: #A7D2E8;
  --vp-custom-block-tip-bg: #0B2029;
  --vp-custom-block-tip-code-bg: #000000;
  --vp-badge-error-border: var(--vp-c-error-2);
  --vp-badge-error-text: var(--vp-c-error-1);
  --vp-badge-error-bg: var(--vp-c-error-soft);

  /* Base error colors for dark mode */
  --vp-c-error-1: #ff6666;
  --vp-c-error-2: #ff4444;
  --vp-c-error-3: #ff2222;
  --vp-c-error-soft: rgba(255, 68, 68, 0.16);

  --vp-badge-success-text: #86efac;
  --vp-badge-success-bg: rgba(54, 211, 153, 0.16);
  
  --vp-badge-info-text: #7dd3fc;
  --vp-badge-info-bg: rgba(66, 184, 231, 0.16);
  
  --vp-custom-block-success-text: var(--vp-badge-success-text);
  --vp-custom-block-success-bg: var(--vp-badge-success-bg);
  
  --vp-custom-block-info-text: var(--vp-badge-info-text);
  --vp-custom-block-info-bg: var(--vp-badge-info-bg);

  /* Dark mode adjustments */
  --vp-c-brand-1: #9664f3;
  --vp-c-brand-2: #8156d1;
  --vp-c-brand-3: #B392F0;
  --vp-c-brand-soft: rgba(179, 146, 240, 0.16);

  /* Custom Block Colors - Dark Mode */
  
  /* Primary/Brand - Purple */
  --vp-custom-block-tip-border: #9664f3;
  --vp-custom-block-tip-text: #9664f3;
  --vp-custom-block-tip-bg: rgba(150, 100, 243, 0.1);

  /* Info - Blue */
  --vp-custom-block-info-border: #38bdf8 !important;
  --vp-custom-block-info-text: #38bdf8 !important;
  --vp-custom-block-info-bg: rgba(56, 189, 248, 0.1) !important;

  /* Warning - Yellow */
  --vp-custom-block-warning-border: #facc15;
  --vp-custom-block-warning-text: #facc15;
  --vp-custom-block-warning-bg: rgba(250, 204, 21, 0.1);

  /* Danger - Red */
  --vp-custom-block-danger-border: #ef4444;
  --vp-custom-block-danger-text: #ef4444;
  --vp-custom-block-danger-bg: rgba(239, 68, 68, 0.1);

  /* Success - Green */
  --vp-custom-block-success-border: #4ade80;
  --vp-custom-block-success-text: #4ade80;
  --vp-custom-block-success-bg: rgba(74, 222, 128, 0.1);

  /* Enhanced code highlighting, especially for Safari */
  --vp-code-color: #F2F2F2;
  --vp-code-bg: #161b22 !important;  /* Darker background in dark mode */
}

/* Container padding override - updated for reasonable width layout */
.container {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

@media (min-width: 1280px) {
  .container {
    max-width: 1400px !important;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1600px !important;
  }
}

/* Reasonable width layout overrides */
.VPDoc {
  max-width: 100% !important;
  width: 100% !important;
}

/* Fixed sidebar padding - never changes */
.VPSidebar {
  padding: 32px 32px 96px !important;
  max-width: var(--vp-sidebar-width) !important;
  width: var(--vp-sidebar-width) !important;
}

@media (min-width: 960px) {
  .VPSidebar {
    padding: 32px 32px 96px !important;
    max-width: var(--vp-sidebar-width) !important;
    width: var(--vp-sidebar-width) !important;
  }
}

@media (min-width: 1440px) {
  .VPSidebar {
    padding: 32px 32px 96px !important;
    max-width: var(--vp-sidebar-width) !important;
    width: var(--vp-sidebar-width) !important;
  }
}

/* Fixed navbar logo positioning - never moves */
.VPNavBar.has-sidebar .title {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  padding: 0 32px !important;
  width: var(--vp-sidebar-width) !important;
  height: var(--vp-nav-height) !important;
  background-color: transparent !important;
}

@media (min-width: 1440px) {
  .VPNavBar.has-sidebar .title {
    padding-left: 32px !important;
  }
}

/* Full width search with justified children */
.VPSidebar .search {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.VPSidebar .search > * {
  flex: 1 !important;
}

/* Full width search content */
.VPSidebar .search :deep(*) {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.VPSidebar .search :deep(*) > * {
  flex: 1 !important;
}

/* Scrollbar styling */
* {
  & ::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background-color: transparent !important;
  }

  & ::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-radius: 8px !important;
  }

  & ::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 8px !important;
    background-color: var(--vp-c-brand-1) !important;
    background-clip: padding-box !important;
  }

  & ::-webkit-scrollbar-thumb:hover {
    background-color: var(--vp-c-text-3) !important;
  }

  & ::-webkit-scrollbar-corner {
    background-color: transparent !important;
  }
}

@supports (-ms-ime-align:auto) {
  * {
    & ::-webkit-scrollbar {
      width: 0.6em !important;
      height: 0.6em !important;
      background-color: transparent !important;
    }
  
    & ::-webkit-scrollbar-track {
      background-color: var(--vp-c-bg-soft) !important;
    }
  
    & ::-webkit-scrollbar-thumb {
      border-radius: 0.6em !important;
      background-color: var(--vp-c-brand-1) !important;
    }
    & ::-webkit-scrollbar-thumb:hover {
      background-color: var(--vp-c-text-3) !important;
    }
  }
}

/* Search component styling */
.VPLocalSearchBox {
  width: 100% !important;
  
  & .search-box {
    width: 100% !important;
    display: flex !important;
  }

  & .search-box > .DocSearch-Button {
    width: 100% !important;
    justify-content: space-between !important;
  }

  & .DocSearch-Button-Keys {
    margin-left: auto !important;
  }
}

.VPNavBarSearch {
  width: 100% !important;

  & #local-search {
    width: 100% !important;
  }

  & .DocSearch-Button {
    width: 100% !important;
    justify-content: space-between !important;
  }

  & .DocSearch-Button-Container {
    flex: 1 !important;
  }

  & .DocSearch-Button-Keys {
    margin-left: auto !important;
  }
}

/* Sidebar search specific styling */
.VPSidebar .VPNavBarSearch {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.VPSidebar .VPNavBarSearch > * {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.VPSidebar .VPNavBarSearch #local-search {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.VPSidebar .VPNavBarSearch .DocSearch-Button {
  width: 100% !important;
  justify-content: space-between !important;
  display: flex !important;
  align-items: center !important;
}

.VPSidebar .VPNavBarSearch .DocSearch-Button-Container {
  flex: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.VPSidebar .VPNavBarSearch .DocSearch-Button-Keys {
  margin-left: auto !important;
}

/* Ensure proper layout on XL and larger screens */
@media (min-width: 1280px) {
  .VPDoc.has-sidebar:not(.has-aside) .content-container {
    max-width: calc(100% - 272px) !important; /* Account for left sidebar only */
  }
  
  .VPDoc:not(.has-sidebar).has-aside .content-container {
    max-width: calc(100% - 256px) !important; /* Account for right sidebar only */
  }
  
  .VPDoc:not(.has-sidebar):not(.has-aside) .content-container {
    max-width: 1100px !important; /* Wider max width for no sidebars */
  }
}



/* Global link styling */
.vp-doc a {
  @apply font-bold no-underline relative;
  color: var(--vp-c-text-1);
  border-bottom: 1px solid var(--vp-c-brand);
}

/* Custom styling for links inside custom blocks/callouts */
.custom-block.tip a { border-bottom-color: var(--vp-custom-block-tip-text); }
.custom-block.info a { border-bottom-color: var(--vp-custom-block-info-text); }
.custom-block.warning a { border-bottom-color: var(--vp-custom-block-warning-text); }
.custom-block.danger a { border-bottom-color: var(--vp-custom-block-danger-text); }
.custom-block.success a { border-bottom-color: var(--vp-custom-block-success-text); }

/* Exception for navigation and sidebar links if needed */
.vp-doc .nav-link a,
.vp-doc .sidebar-link {
  border-bottom: none;
}

/* Force code element text color with webkit support */
code {
  color: var(--vp-code-color) !important;
  -webkit-text-fill-color: var(--vp-code-color) !important;
  transition: color 0.2s ease-in-out, -webkit-text-fill-color 0.2s ease-in-out;
}

.dark code {
  color: var(--vp-code-color) !important;
  -webkit-text-fill-color: var(--vp-code-color) !important;
  transition: color 0.2s ease-in-out, -webkit-text-fill-color 0.2s ease-in-out;
}

code:hover {
  color: var(--vp-c-brand-1) !important;
  -webkit-text-fill-color: var(--vp-c-brand-1) !important;
}

.dark code:hover {
  color: white !important;
  -webkit-text-fill-color: white !important;
}

/* Custom Block Colors with webkit support - Light Mode */
.custom-block.info {
  --vp-custom-block-info-border: #0ea5e9 !important;
  --vp-custom-block-info-text: #0ea5e9 !important;
  --vp-custom-block-info-bg: rgba(14, 165, 233, 0.1) !important;
}

.custom-block.info a {
  color: var(--vp-custom-block-info-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-info-text) !important;
  border-bottom-color: var(--vp-custom-block-info-text) !important;
  opacity: 1 !important;
}

/* Dark mode adjustments with webkit support */
.dark .custom-block.info a {
  color: var(--vp-custom-block-info-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-info-text) !important;
  border-bottom-color: var(--vp-custom-block-info-text) !important;
  opacity: 1 !important;
}

/* Code block container styling */
.vp-doc div[class*='language-'] {
  position: relative;
  margin: 0;
  background-color: var(--vp-code-bg);
  border-radius: 10px;
  overflow-x: visible;
}

/* Copy button styling - both for main and nested code blocks */
.vp-doc div[class*='language-'] > button.copy,
.vp-doc div[class*='language-'] > button.copy-code,
.vp-doc :deep(div[class*='language-']) > button.copy,
.vp-doc :deep(div[class*='language-']) > button.copy-code {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--vp-c-text-2);
  opacity: 0;
  transition: all 0.2s ease;
  color: var(--vp-c-text-2);
  z-index: 3;
}

/* Show button on hover or when copied - for both main and nested */
.vp-doc div[class*='language-']:hover > button.copy,
.vp-doc div[class*='language-']:hover > button.copy-code,
.vp-doc div[class*='language-'] > button.copy.copied,
.vp-doc div[class*='language-'] > button.copy-code.copied,
.vp-doc :deep(div[class*='language-']:hover) > button.copy,
.vp-doc :deep(div[class*='language-']:hover) > button.copy-code,
.vp-doc :deep(div[class*='language-']) > button.copy.copied,
.vp-doc :deep(div[class*='language-']) > button.copy-code.copied {
  opacity: 1;
}

.vp-doc div[class*='language-'] > button.copy:hover,
.vp-doc div[class*='language-'] > button.copy-code:hover,
.vp-doc :deep(div[class*='language-']) > button.copy:hover,
.vp-doc :deep(div[class*='language-']) > button.copy-code:hover {
  background-color: var(--vp-c-bg-soft);
}

/* Success state styling */
.vp-doc div[class*='language-'] > button.copy.copied,
.vp-doc div[class*='language-'] > button.copy-code.copied,
.vp-doc :deep(div[class*='language-']) > button.copy.copied,
.vp-doc :deep(div[class*='language-']) > button.copy-code.copied {
  background-color: rgba(34, 197, 94, 0.1); /* Light green background */
  color: rgb(34, 197, 94); /* Green text */
}

/* Hide the original icon when copied */
.vp-doc [class*='language-'] > button.copy.copied > span,
.vp-doc [class*='language-'] > button.copy-code.copied > span,
.vp-doc :deep([class*='language-']) > button.copy.copied > span,
.vp-doc :deep([class*='language-']) > button.copy-code.copied > span {
  display: none;
}

/* Show checkmark icon when copied */
.vp-doc [class*='language-'] > button.copy.copied::after,
.vp-doc [class*='language-'] > button.copy-code.copied::after,
.vp-doc :deep([class*='language-']) > button.copy.copied::after,
.vp-doc :deep([class*='language-']) > button.copy-code.copied::after {
  content: '✓';
  color: rgb(34, 197, 94); /* Green checkmark */
  font-size: 1.2em;
}

/* Single Copied label with animation */
.vp-doc [class*='language-'] button.copy.copied::before,
.vp-doc [class*='language-'] button.copy-code.copied::before,
.vp-doc :deep([class*='language-']) button.copy.copied::before,
.vp-doc :deep([class*='language-']) button.copy-code.copied::before {
  content: 'Copied!';
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(20 184 166); /* Teal color */
  color: white;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.25s ease;
  animation: copyLabel 1.5s ease forwards;
  pointer-events: none;
}

@keyframes copyLabel {
  0%, 100% {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  20%, 80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Language indicator styling */
.vp-doc div[class*='language-'] .lang {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  font-size: 12px;
  font-weight: 500;
  color: var(--vp-c-text-3);
  transition: color 0.2s;
}

/* Adjust copy button position when language indicator is present */
.vp-doc div[class*='language-'] > button.copy,
.vp-doc div[class*='language-'] > button.copy-code {
  right: 40px;  /* Give space for language indicator */
}

/* Custom Block Colors - Light Mode */
.custom-block.success {
  --vp-custom-block-success-border: #22c55e;
  --vp-custom-block-success-text: #22c55e;
  --vp-custom-block-success-bg: rgba(34, 197, 94, 0.1);
}

/* Dark mode adjustments */
.dark .custom-block.success {
  --vp-custom-block-success-border: #4ade80;
  --vp-custom-block-success-text: #4ade80;
  --vp-custom-block-success-bg: rgba(74, 222, 128, 0.1);
}

/* Success container styles */
.custom-block.success {
  border: 1px solid var(--vp-custom-block-success-border);
  color: var(--vp-custom-block-success-text);
  background-color: var(--vp-custom-block-success-bg);
}

.custom-block.success a {
  color: var(--vp-custom-block-success-text);
  border-bottom-color: var(--vp-custom-block-success-text);
}

/* Custom Block text colors with webkit support - but exclude code blocks */
.custom-block.tip p:not(pre *) {
  color: var(--vp-custom-block-tip-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-tip-text) !important;
}

.custom-block.info p:not(pre *) {
  color: var(--vp-custom-block-info-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-info-text) !important;
}

.custom-block.warning p:not(pre *) {
  color: var(--vp-custom-block-warning-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-warning-text) !important;
}

.custom-block.danger p:not(pre *) {
  color: var(--vp-custom-block-danger-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-danger-text) !important;
}

.custom-block.success p:not(pre *) {
  color: var(--vp-custom-block-success-text) !important;
  -webkit-text-fill-color: var(--vp-custom-block-success-text) !important;
}

/* Custom block titles */
.custom-block .custom-block-title {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Reset webkit styles for code blocks */
.vp-doc [class*='language-'] code {
  
  -webkit-text-fill-color: initial !important;
}

/* Ensure syntax highlighting works in code blocks within custom blocks */
.custom-block [class*='language-'] code {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

/* Code highlighting enhancements */
[class*='language-'] {
  position: relative;
  margin: 1em 0;
  background-color: var(--vp-code-bg);
  overflow-x: auto;
}

[class*='language-'] code {
  color: var(--vp-code-color) !important;
  -webkit-text-fill-color: var(--vp-code-color) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

/* Syntax highlighting colors with increased vibrancy */
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8e908c !important;
  -webkit-text-fill-color: #8e908c !important;
}

.token.property,
.token.number,
.token.function-name,
.token.constant,
.token.symbol,
.token.deleted {
  color: #c792ea !important;
  -webkit-text-fill-color: #c792ea !important;
}

.token.boolean,
.token.number {
  color: #ff9d00 !important;
  -webkit-text-fill-color: #ff9d00 !important;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.function,
.token.builtin,
.token.inserted {
  color: #7ec699 !important;
  -webkit-text-fill-color: #7ec699 !important;
}

.token.operator,
.token.entity,
.token.url,
.token.variable {
  color: #67cdcc !important;
  -webkit-text-fill-color: #67cdcc !important;
}

.token.important,
.token.bold {
  font-weight: bold;
}

/* Safari-specific enhancements */
@supports (-webkit-hyphens:none) {
  [class*='language-'] code {
    transform: translateZ(0);
    backface-visibility: hidden;
    font-weight: 600 !important;
  }

  .token {
    font-weight: 600 !important;
  }

  /* Comments styling */
  .token.comment,
  .token.block-comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    font-weight: 400 !important;  /* Normal weight for entire comment */
    opacity: 0.7;  /* Slightly dim the comments */
  }

  /* Make specific tokens slightly bolder */
  .token.keyword,
  .token.function,
  .token.class-name,
  .token.property,
  .token.number,
  .token.boolean {
    font-weight: 700 !important;
  }
}

/* Markdown Labels like NODE_ENV */
:not(pre) > code {
  background-color: rgba(40, 44, 52, 0) !important;
  color: rgba(185, 185, 185, 0.795)  !important;
  -webkit-text-fill-color: rgba(95, 95, 95, 0.795) !important;
  font-weight: 600 !important;
  padding: 4px 4px !important;
  border-radius: 6px !important;
  font-size: 0.7em !important;
  border: 1px solid rgba(185, 185, 185, 0.795) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 
              0 0 1px rgba(255, 255, 255, 0.05) !important;
  margin: 0 3px !important;
  /* text-transform: uppercase !important; */
  letter-spacing: 0.02em !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* Dark mode adjustments */
.dark :not(pre) > code {
  background-color: rgb(50, 50, 60) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3),
              0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* Safari-specific enhancements for inline code */
@supports (-webkit-hyphens:none) {
  :not(pre) > code {
    transform: translateZ(0);
    backface-visibility: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    backdrop-filter: blur(8px);  /* Subtle blur effect behind code */
  }
}

/* Disable ALL hover effects for code blocks */
.vp-doc [class*='language-'] *:hover,
.vp-doc div[class*='language-'] *:hover,
.vp-doc pre[class*='language-'] *:hover,
.shiki *:hover,
.vp-code *:hover,
.vp-doc code *:hover,
div[class*='language-'] *:hover,
pre[class*='language-'] *:hover {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

/* Remove all the other hover prevention blocks since they're now consolidated above */

@media (prefers-color-scheme: dark) {
  p code:hover, li code:hover,
  .custom-block p code:hover, .custom-block li p code:hover {
    background-color: var(--vp-c-brand-1) !important;
    color: white !important;
    -webkit-text-fill-color: white !important;
  }

  .vp-doc div[class*='language-'] {
    margin: 16px 0;
    background-color: var(--vp-code-bg) !important;
    border-radius: 8px;
    overflow-x: auto;
  }
}

/* Override Shiki theme colors for light mode */
.shiki.github-light {
  --shiki-light-keyword: #cf222e !important;     /* red */
  --shiki-light-string: #0a3069 !important;      /* dark blue for strings */
  --shiki-light-function: #8250df !important;    /* purple */
  --shiki-light-number: #0550ae !important;      /* blue */
  --shiki-light-boolean: #0550ae !important;     /* blue */
  --shiki-light-comment: #6e7781 !important;     /* gray */
  --shiki-light-property: #953800 !important;    /* brown */
}

.title {
  @apply border-0 !important;
}