/* PR Environment Banner
   Visual indicator showing the user is in a PR preview environment.
   Uses a gradient purple background to distinguish from normal UI.

   The banner height is stored in --pr-banner-height CSS variable
   so other layout elements can adjust accordingly.
*/

@layer base {
:root {
  --pr-banner-height: 0px;
}

/* When banner is present, set the height variable */
.app-body:has(.pr-environment-banner) {
  --pr-banner-height: 36px;
}

} /* @layer base */

@layer components {
.pr-environment-banner {
  background: linear-gradient(90deg, var(--color-violet-600), var(--color-purple-500));
  color: white;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  position: relative;
  z-index: 1000;
  block-size: 36px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

  .pr-environment-banner__container {
    max-inline-size: var(--max-content-width, 1400px);
    margin: 0 auto;
    inline-size: 100%;
  }

  .pr-environment-banner__content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .pr-environment-banner__badge {
    background: var(--color-white-alpha-20);
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
  }

  .pr-environment-banner__pr-number {
    font-weight: 500;
  }

  .pr-environment-banner__separator {
    opacity: 0.5;
  }

  .pr-environment-banner__user {
    opacity: 0.9;
  }

  /* Dark mode adjustments */
  html[data-theme="dark"] .pr-environment-banner {
    background: linear-gradient(90deg, var(--color-violet-700), var(--color-purple-600));
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .pr-environment-banner {
      background: linear-gradient(90deg, var(--color-violet-700), var(--color-purple-600));
    }
  }

  /* Mobile: Adjust banner and fixed elements */
  @media (width <= 768px) {
.pr-environment-banner {
    /* Mobile-specific banner styles */
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    block-size: 32px;
    /* Lower z-index so slide-in menu appears above banner */
    z-index: 90

    /* Hide user info on very small screens */
}

    .pr-environment-banner__content {
      gap: 0.375rem;
    }

    .pr-environment-banner__badge {
      padding: 0.0625rem 0.375rem;
      font-size: 0.6875rem;
    }

    .pr-environment-banner__separator,
    .pr-environment-banner__user {
      display: none;
    }
  }

  /* Larger mobile screens: show more info */
  @media (width >= 480px) and (width <= 768px) {
    .pr-environment-banner__separator,
    .pr-environment-banner__user {
      display: inline;
    }
  }

/* Adjust app-layout height when banner is present */
.app-body:has(.pr-environment-banner) .app-layout {
  block-size: calc(100vh - var(--pr-banner-height));
  block-size: calc(100dvh - var(--pr-banner-height));
}

/* Adjust sidebar height when banner is present */
.app-body:has(.pr-environment-banner) .sidebar {
  block-size: calc(100vh - var(--pr-banner-height));
  block-size: calc(100dvh - var(--pr-banner-height));
}

/* Mobile: Adjust fixed elements when banner is present */
@media (width <= 768px) {
  /* Adjust banner height variable for mobile */
  .app-body:has(.pr-environment-banner) {
    --pr-banner-height: 32px;
  }

  /* Adjust fixed elements when banner is present */
  .app-body:has(.pr-environment-banner) .mobile-header {
    inset-block-start: var(--pr-banner-height);
  }

  /* Sidebar slides in ABOVE the banner (higher z-index) */
  .app-body:has(.pr-environment-banner) .sidebar {
    inset-block-start: 0;
    block-size: 100vh;
    block-size: 100dvh;
    z-index: 100;
  }

  .app-body:has(.pr-environment-banner) .sidebar-overlay {
    inset-block-start: 0;
    z-index: 95;
  }
}

} /* @layer components */