/* District admin bar (layout/districtbar.phtml), under the header in district
 * overview. Requires gpd-tokens.css. Every selector is namespaced.
 *
 * Navy so it reads as a mode, not more site navigation. Focus rings are white
 * outlines: --gpd-shadow-focus is blue and disappears on navy. ace styles bare
 * ul, so the lists reset what they inherit.
 */

.gpd-districtbar {
  background: var(--gpd-navy);
  color: var(--gpd-text-on-dark);
  font-family: var(--gpd-font-body);
  font-size: var(--gpd-fs-base);
}

.gpd-districtbar__inner {
  display: flex;
  align-items: center;
  gap: var(--gpd-space-5);
  /* Same content edges as /solutions (.home-hero__inner in home-hero.css). */
  width: calc(83.33333333% - 92px);
  min-height: 48px;
  margin: 0 auto;
}

.gpd-districtbar__name {
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--gpd-text-on-dark);
  font-weight: var(--gpd-fw-semi);
  line-height: var(--gpd-lh-tight);
  white-space: nowrap;
}

.gpd-districtbar__eyebrow {
  font-size: var(--gpd-fs-xs);
  font-weight: var(--gpd-fw-regular);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}

.gpd-districtbar__links {
  display: flex;
  align-items: stretch;
  gap: var(--gpd-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gpd-districtbar__group {
  position: relative;
}

/* Links and the Reports summary share one look. */
.gpd-districtbar__link,
.gpd-districtbar__switch {
  display: inline-flex;
  align-items: center;
  gap: var(--gpd-space-1);
  min-height: 48px;
  padding: 0 var(--gpd-space-3);
  border-bottom: 3px solid transparent;
  color: var(--gpd-text-on-dark);
  font-weight: var(--gpd-fw-semi);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.gpd-districtbar__link::-webkit-details-marker {
  display: none;
}

.gpd-districtbar__link:hover,
.gpd-districtbar__link:focus,
.gpd-districtbar__switch:hover,
.gpd-districtbar__switch:focus {
  color: var(--gpd-text-on-dark);
  text-decoration: none;
  border-bottom-color: var(--gpd-gray-300);
}

.gpd-districtbar__link[aria-current="page"],
.gpd-districtbar__link--current {
  border-bottom-color: var(--gpd-green);
}

.gpd-districtbar__switch {
  margin-left: auto;
  white-space: nowrap;
}

.gpd-districtbar__link:focus,
.gpd-districtbar__switch:focus,
.gpd-districtbar__menu-link:focus {
  outline: none;
}

.gpd-districtbar__link:focus-visible,
.gpd-districtbar__switch:focus-visible {
  outline: 2px solid var(--gpd-white);
  outline-offset: -4px;
}

/* Dropdown panel: Reports on desktop, every link on phones. */
.gpd-districtbar__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1032;
  min-width: 220px;
  margin: 0;
  padding: var(--gpd-space-2) 0;
  list-style: none;
  border-radius: var(--gpd-radius-md);
  background: var(--gpd-surface-card);
  box-shadow: var(--gpd-shadow-lg);
}

.gpd-districtbar__menu-link {
  display: block;
  padding: var(--gpd-space-2) var(--gpd-space-4);
  color: var(--gpd-text-body);
  text-decoration: none;
}

.gpd-districtbar__menu-link:hover,
.gpd-districtbar__menu-link:focus {
  background: var(--gpd-gray-50);
  color: var(--gpd-text-heading);
  text-decoration: none;
}

.gpd-districtbar__menu-link:focus-visible {
  box-shadow: inset var(--gpd-shadow-focus);
}

.gpd-districtbar__menu-link[aria-current="page"] {
  color: var(--gpd-blue-deep);
  font-weight: var(--gpd-fw-semi);
}

.gpd-districtbar__mobile {
  display: none;
  position: relative;
  margin-left: auto;
}

.gpd-districtbar__mobile .gpd-districtbar__menu {
  right: 0;
  left: auto;
}

@media (max-width: 768px) {
  .gpd-districtbar__links,
  .gpd-districtbar__switch {
    display: none;
  }

  .gpd-districtbar__mobile {
    display: block;
  }
}

@media (max-width: 540px) {
  .gpd-districtbar__inner {
    width: calc(100% - 72px);
  }
}

/* Inside one of the district's accounts: the account name, then the way back.
   Teal from the brand gradient, so the two modes read differently. */
.gpd-districtbar--account {
  background: var(--gpd-teal-deep);
}

.gpd-districtbar__account {
  display: flex;
  align-items: center;
  gap: var(--gpd-space-3);
  min-width: 0;
  margin: 0;
  color: var(--gpd-text-on-dark);
  font-weight: var(--gpd-fw-semi);
  line-height: var(--gpd-lh-tight);
}

.gpd-districtbar__account > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.gpd-districtbar__account > .fa {
  opacity: 0.8;
}

.gpd-districtbar__back {
  display: flex;
  margin: 0 0 0 auto;
}

/* The back control is a form button dressed as a bar link. */
.gpd-districtbar__back .gpd-districtbar__switch {
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  font-family: var(--gpd-font-body);
  font-size: var(--gpd-fs-base);
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width: 768px) {
  .gpd-districtbar--account .gpd-districtbar__inner {
    flex-wrap: wrap;
    gap: 0 var(--gpd-space-4);
    padding: var(--gpd-space-2) 0;
  }

  .gpd-districtbar--account .gpd-districtbar__switch {
    display: inline-flex;
    padding-left: 0;
  }

  .gpd-districtbar--account .gpd-districtbar__back {
    flex-basis: 100%;
    margin-left: 0;
  }

  .gpd-districtbar__account-switch {
    display: none;
  }
}

/* Internal admin inside a customer account (layout/accountbar.phtml). Orange,
   so staff never mistake a customer's account for their own or for district
   mode. White text is 5.74:1 on --gpd-orange-deep. */
.gpd-districtbar--staff {
  background: var(--gpd-orange-deep);
}

/* The same bar in the internal admin's own account: neutral, so only a
   customer's account reads orange. White text is ~10.8:1 on --gpd-gray-700. */
.gpd-districtbar--home {
  background: var(--gpd-gray-700);
}

/* The internal admin bar carries its round collapse control on the bottom
   edge, so it is positioned. Collapsing slides the contents shut and leaves a
   4px strip of the bar's colour. */
.gpd-districtbar--staff,
.gpd-districtbar--home {
  position: relative;
}

.gpd-districtbar--staff .gpd-districtbar__inner,
.gpd-districtbar--home .gpd-districtbar__inner {
  max-height: 160px;
  overflow: hidden;
  transition: max-height var(--gpd-dur-base) var(--gpd-ease),
              min-height var(--gpd-dur-base) var(--gpd-ease),
              padding var(--gpd-dur-base) var(--gpd-ease),
              opacity var(--gpd-dur-fast) var(--gpd-ease);
}

.gpd-districtbar.is-collapsed .gpd-districtbar__inner {
  min-height: 0;
  max-height: 4px;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Round control straddling the bottom edge, under the header's bell (the
   header has 28px side padding and the bell is last). 32px to see, 44px to
   hit. Its chevron turns over when the bar is collapsed. */
.gpd-districtbar__collapse {
  position: absolute;
  right: 24px;
  bottom: -16px;
  z-index: 1031;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gpd-gray-200);
  border-radius: var(--gpd-radius-pill);
  background: var(--gpd-white);
  box-shadow: var(--gpd-shadow-sm);
  color: var(--gpd-gray-700);
  font-size: var(--gpd-fs-base);
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--gpd-dur-fast) var(--gpd-ease),
              box-shadow var(--gpd-dur-fast) var(--gpd-ease);
}

.gpd-districtbar__collapse::before {
  content: '';
  position: absolute;
  top: -7px;
  right: -7px;
  bottom: -7px;
  left: -7px;
}

.gpd-districtbar__collapse .fa {
  transition: transform var(--gpd-dur-base) var(--gpd-ease);
}

.gpd-districtbar.is-collapsed .gpd-districtbar__collapse .fa {
  transform: rotate(180deg);
}

.gpd-districtbar__collapse:hover {
  border-color: var(--gpd-gray-400);
  box-shadow: var(--gpd-shadow-md);
}

.gpd-districtbar__collapse:focus {
  outline: none;
}

.gpd-districtbar__collapse:focus-visible {
  box-shadow: var(--gpd-shadow-focus);
}

/* A remembered collapsed bar arrives collapsed, without the slide. */
.gpd-districtbar.is-instant .gpd-districtbar__inner,
.gpd-districtbar.is-instant .gpd-districtbar__collapse .fa {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .gpd-districtbar--staff .gpd-districtbar__inner,
  .gpd-districtbar--home .gpd-districtbar__inner,
  .gpd-districtbar__collapse .fa {
    transition: none;
  }
}

@media (max-width: 768px) {
  /* The overview hides its switch link on phones; the home bar has no menu. */
  .gpd-districtbar--home .gpd-districtbar__switch {
    display: inline-flex;
  }
}


/* District overview's Notification Center has the bar for navigation, so the
   module's own left sidebar is hidden and the content takes its width. */
.gpd-district-overview .notification-module #sidebar,
.gpd-district-overview .notification-module #sidebarMobile {
  display: none !important;
}

.gpd-district-overview .notification-module .main-content {
  margin-left: 0 !important;
}