/* Page shell: wrapper, layouts (body.layout-*), header. */
html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.content {
  flex: 1;
}

/* layouts/app (body.layout-sidebar): keep .page-wrapper clear of the sidebar */
body.layout-sidebar .page-wrapper {
  margin-right: 260px;
  transition: margin-right 0.2s ease-out;
}

body.layout-sidebar .wrapper.toggled .page-wrapper {
  margin-right: 80px;
}

@media screen and (max-width: 767px) {
  body.layout-sidebar .page-wrapper {
    margin-right: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  body.layout-sidebar .row {
    margin-right: 0;
    margin-left: 0;
  }
}

/* layouts/full (body.layout-full) */
body.layout-full .page-wrapper {
  margin-right: 0 !important;
  width: 100% !important;
}

body.layout-full .row {
  margin-right: 0;
  margin-left: 0;
}

/* No sidebar: the header spans the page (the theme leaves 260px for the sidebar), the page
   starts below it, and the sidebar toggle has nothing to toggle. */
body.layout-full .top-header {
  right: 0;
}

body.layout-full .top-header ~ .content .page-wrapper {
  margin-top: var(--uh-header-height);
}

body.layout-full .top-header .toggle-icon {
  display: none;
}

/* The theme's footer leaves the same 260px for the sidebar. */
body.layout-full .footer {
  right: 0;
}

/* Header bar: a light bar over the page, on a hairline (the sidebar alone is navy).
   Colours on the topbar tokens. */
.top-header {
  background-color: var(--uh-topbar);
  border-bottom: 1px solid var(--uh-topbar-border);
  box-shadow: var(--uh-header-shadow);
}

.top-header .navbar .top-navbar-right .nav-item {
  background-color: var(--uh-topbar);
}

.toggle-icon,
.top-header .navbar .top-navbar-right .nav-link {
  color: var(--uh-topbar-text);
}

.toggle-icon:hover,
.top-header .navbar .top-navbar-right .nav-item:hover {
  background-color: var(--uh-topbar-hover);
}

.footer {
  color: var(--uh-muted);
  background-color: var(--uh-topbar);
  border-top-color: var(--uh-topbar-border);
}

/* Header menus: the theme's arrow (::after), the user menu's border and item hover are
   hard-coded white / light grey; the user menu's own theme rules outrank the generic ones. */
.dropdown-user-setting .dropdown-menu {
  color: var(--uh-text);
  border-color: var(--uh-border);
  box-shadow: var(--uh-shadow-raised);
}

.top-header .navbar .dropdown-menu::after,
.top-header .navbar .dropdown-user-setting .dropdown-menu::after {
  background: var(--uh-card);
  border-color: var(--uh-border);
}

.top-header .navbar .dropdown-item:hover,
.top-header .navbar .dropdown-item:focus {
  color: var(--uh-heading);
  background-color: var(--uh-primary-tint);
}

/* Header user menu (partials/header.php). The 40px avatar overflowed the theme's
   35px nav-item circle, so the menu opened over the avatar, inside the header.
   Size the item to the avatar and, on desktop, open the menu just below the
   65px header with its arrow centred on the avatar. */
.top-header .navbar .top-navbar-right .dropdown-user-setting {
  width: auto;
  height: auto;
  background-color: transparent;
}

.top-header .navbar .top-navbar-right .dropdown-user-setting > .nav-link {
  padding: 0;
  border-radius: 50%; /* the focus ring follows the round avatar */
}

@media (min-width: 621px) {
  .top-header .navbar .dropdown-user-setting .dropdown-menu {
    margin-top: 1.25rem;
  }

  .top-header .navbar .dropdown-user-setting .dropdown-menu::after {
    left: 13px;
  }
}

/* Back-to-top button (partials/back_to_top.php, behaviour in theme/main.js): fades
   and slides in after 300px of scrolling instead of jQuery fadeIn/fadeOut. */
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* The theme's footer (style.css) is absolutely positioned over the bottom of the
   page, which reserved only 20px for it: the last form buttons ended under it,
   most on phones, where its text wraps to two lines (65px). Keep room for it
   (layouts/full pages have no .page-content-wrapper, only .page-wrapper). */
.wrapper .page-content-wrapper,
.wrapper.toggled .page-content-wrapper,
body.layout-full .page-wrapper {
  padding-bottom: 3rem;
}

@media (max-width: 575.98px) {
  .wrapper .page-content-wrapper,
  .wrapper.toggled .page-content-wrapper,
  body.layout-full .page-wrapper {
    padding-bottom: 4.5rem;
  }
}

/* Phones: less padding around the page content (moved from global.css). */
@media (max-width: 767.98px) {
  body:is(.layout-sidebar, .layout-full, .layout-print) .page-content {
    padding: 0.75rem;
  }
}

/* "New version" bar (js/core/version.js), above modals and toasts. */
.uh-update-bar {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 1095;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--uh-text);
  background: var(--uh-card);
  border: 1px solid var(--uh-border);
  border-inline-start: 4px solid var(--uh-primary);
  border-radius: var(--uh-radius-md);
  box-shadow: var(--uh-shadow);
}