/* /Pages/Shared/_Layout.cshtml.rz.scp.css */
/* Layout shell: brand bar, page container, footer. Everything else is in wwwroot/css/site.css.
   Scoped CSS does not reach tag-helper elements or partials, so those are styled through ::deep. */

/* ---------- Container ---------- */
.portal-container[b-zyhhp5lciu] {
  max-width: 1600px;
  padding-inline: clamp(0.85rem, 2.2vw, 1.75rem);
}

.portal-main[b-zyhhp5lciu] {
  flex: 1 0 auto;
  padding-top: 1rem;
}

/* ---------- Brand bar ---------- */
.portal-header[b-zyhhp5lciu] {
  --portal-header-bg: var(--ppai-blue);
  background-color: var(--portal-header-bg);
}

/* Development, staging: anything that is not production. */
.portal-header-nonprod[b-zyhhp5lciu] {
  --portal-header-bg: #b8671f;
}

/* The environment's name beside the brand, in the bar's own colour, darkened to read on white. */
.portal-env[b-zyhhp5lciu] {
  margin-left: 0.5rem;
  vertical-align: 0.15em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--portal-header-bg) 55%, #000);
  background-color: #fff;
}

.portal-nav[b-zyhhp5lciu] {
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-brand-font-size: 1.143rem;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-brand-margin-end: 1.5rem;
  --bs-navbar-toggler-padding-y: 0.15rem;
  --bs-navbar-toggler-padding-x: 0.45rem;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.6);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.portal-header[b-zyhhp5lciu]  .navbar-brand {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.portal-header[b-zyhhp5lciu]  .navbar-nav {
  gap: 0.35rem;
}

/* The bar is roomier than the pages below it: its links are click targets, so they get space around them.
   White on the brand blue only just passes AA, so hover and current states darken the bar, never lighten it. */
.portal-header[b-zyhhp5lciu]  .navbar-nav .nav-link {
  padding: 0.5rem 0.95rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  text-align: left;
  text-decoration: none;
  border: 0;
  border-radius: var(--bs-border-radius);
}

.portal-header[b-zyhhp5lciu]  .navbar-nav .nav-link:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.16);
}

.portal-header[b-zyhhp5lciu]  .navbar-nav .nav-link.active {
  background-color: rgba(0, 0, 0, 0.26);
}

.portal-header[b-zyhhp5lciu]  .navbar-brand:focus-visible,
.portal-header[b-zyhhp5lciu]  .navbar-nav .nav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: none;
}

/* A long sign-in email is cut short rather than pushing the bar onto two lines. */
.portal-header[b-zyhhp5lciu]  .portal-account {
  max-width: min(24rem, 28vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Collapsed menu: the two link groups stack under the brand. */
@media (max-width: 767.98px) {
  .portal-nav .navbar-collapse[b-zyhhp5lciu] {
    padding-block: 0.4rem 0.2rem;
  }

  .portal-header[b-zyhhp5lciu]  .portal-account {
    max-width: 100%;
  }
}

/* ---------- Footer ---------- */
.portal-footer[b-zyhhp5lciu] {
  flex-shrink: 0;
  margin-top: 1rem;
  padding-block: 0.6rem;
  font-size: 0.857rem;
}