/* The layout of /admin, /staff and /user (views/layouts/area.php), after Bootstrap's light sidebar:
   phones a top bar with the logo and a menu button that opens the sidebar under it; from 992px the sidebar
   (--area-menu-w) stays beside the page, full height. site.js opens and closes the sidebar and the name's menu
   by toggling aria-expanded on their buttons. */

.admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* so a long word (an email address in a heading) wraps instead of widening the page */
  align-content: start; /* phones: the top bar keeps its own height instead of sharing the screen's */
  min-height: 100vh;
  min-height: 100dvh; /* 100vh first for browsers without dvh (see "Browser quirks" in CLAUDE.md) */
  background-color: var(--c-off-white);
}

@media (min-width: 992px) {
  .admin {
    grid-template-columns: var(--area-menu-w) minmax(0, 1fr);
    align-items: start;
  }
}

.admin__home {
  display: block;
  color: var(--c-text);
  border-radius: var(--radius-1);
}

/* The logo (views/partials/logo.php), printed inline so it takes the text colour. */
.logo {
  display: block;
  height: var(--logo-h);
  width: auto;
}

/* --- Phones: the top bar. While the menu is open it stays fixed at the top, above the menu (the page under it keeps
   its place with the same height of padding), and the page behind does not scroll. --- */
.admin__top {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  background-color: var(--c-page);
  border-bottom: var(--border-1) solid var(--c-line);
}

@media (max-width: 991.98px) {
  .admin:has(.admin__toggle[aria-expanded="true"]) {
    padding-top: var(--admin-top-h);
  }

  .admin:has(.admin__toggle[aria-expanded="true"]) .admin__top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  body:has(.admin__toggle[aria-expanded="true"]) {
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  .admin__top {
    display: none;
  }
}

/* --- The sidebar. Phones: a full-height panel over the page, under the top bar; the menu button slides it down from
   behind the bar (no slide with reduced motion, base.css). --- */
.admin__side {
  position: fixed;
  inset: var(--admin-top-h) 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-4);
  overflow-y: auto;
  background-color: var(--c-page);
  visibility: hidden; /* hidden from screen readers and the keyboard while closed */
  translate: 0 -100%;
  transition: translate var(--duration-slow) var(--ease), visibility var(--duration-slow);
}

.admin:has(.admin__toggle[aria-expanded="true"]) .admin__side {
  visibility: visible;
  translate: 0 0;
}

@media (min-width: 992px) {
  .admin__side,
  .admin:has(.admin__toggle[aria-expanded="true"]) .admin__side {
    position: sticky;
    inset: auto;
    top: 0;
    z-index: auto;
    height: 100vh;
    height: 100dvh;
    overflow-y: visible;
    visibility: visible;
    translate: none;
    transition: none;
    border-right: var(--border-1) solid var(--c-line);
  }
}

/* The logo with the area's name (Admin, Staff, Your area) sitting on the line under it, at the right. Phones: the top bar has the logo. */
.admin__brand {
  display: none;
  position: relative;
  padding: 0 var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: var(--border-1) solid var(--c-line);
}

@media (min-width: 992px) {
  .admin__brand {
    display: block;
  }
}

.admin__tag {
  position: absolute;
  right: 0;
  bottom: 0;
  translate: 0 50%;
  padding-left: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-text);
  background-color: var(--c-page); /* hides the line behind the word */
}

/* The menu: one row per module, the open one filled blue. */
.admin__nav {
  display: grid;
  gap: var(--sp-1);
}

.admin__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 500;
  color: var(--c-text);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease);
}

.admin__link:hover {
  background-color: var(--c-ground);
}

.admin__link[aria-current="page"] {
  color: var(--c-menu-button-text);
  background-color: var(--c-menu-button);
}

/* A group of modules in the menu (config 'menu', such as Site controls): its name in small capitals above its rows. */
.admin__group {
  margin-top: var(--sp-4);
  padding: 0 var(--sp-3) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* The signed-in name at the bottom, opening a small menu above it: Account, Sign out. */
.admin__me {
  position: relative;
  margin-top: auto; /* at the bottom of the sidebar, and of the full-height phone menu */
  padding-top: var(--sp-4);
  border-top: var(--border-1) solid var(--c-line);
}

.admin__me-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-1) var(--sp-2);
  font-weight: 600;
  color: var(--c-text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-1);
  cursor: pointer;
}

.admin__me-toggle > .bi {
  margin-left: auto;
  transition: rotate var(--duration-base) var(--ease);
}

.admin__me-toggle[aria-expanded="true"] > .bi {
  rotate: 180deg;
}

@media (prefers-reduced-motion: reduce) {
  .admin__me-toggle > .bi {
    transition: none;
  }
}

.admin__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  font-size: var(--fs-small);
  color: var(--c-accent-text);
  background-color: var(--c-accent);
  border-radius: var(--radius-pill);
}

.admin__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* a long email address (an account with no name yet) ends in … */
  white-space: nowrap;
}

/* Floating above the name, on phones too. */
.admin__me-menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  display: none;
  margin: 0 0 var(--sp-2);
  padding: var(--sp-2);
  background-color: var(--c-page);
  border: var(--border-1) solid var(--c-line);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
}

.admin__me-toggle[aria-expanded="true"] + .admin__me-menu {
  display: grid;
  gap: var(--sp-1);
}

/* --- The page beside (or under) the sidebar --- */
.admin__page {
  position: relative; /* holds the hexagons */
  isolation: isolate; /* so they sit behind the boxes (z-index -1) without dropping behind the page */
  padding: var(--sp-6) var(--gutter);
}

/* Hexagons (components/hex.css) over the grey behind the page, strongest at the top right, fading out. */
.admin__hex {
  inset: 0;
  z-index: -1;
  --hex-fade: radial-gradient(90% 80% at 100% 0, rgb(0, 0, 0), rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0));
}

.admin__hex + * {
  margin-top: 0; /* the hexagons take no room: the page starts as before */
}

@media (min-width: 992px) {
  .admin__page {
    padding: var(--sp-10);
  }
}