/*
    The app shell, taken from the prototype: a light topbar across the whole page, a dark sidebar
    under it on the left, and the content to the right.

    Global rather than scoped on purpose. The sidebar's contents are Breezer's own `main-menu` and
    `menu-item` elements, whose stylesheets are scoped to Breezer's components — a scoped sheet of
    ours could not reach them. These selectors are deliberately one step more specific than
    Breezer's so they win regardless of load order.
*/
.bo-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--background-colour);
}
/* ── Topbar ── */
.bo-topbar {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  z-index: 3;
}
.bo-topbar__logo {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--gray-200);
}
.bo-topbar__logo {
  gap: 10px;
  text-decoration: none;
}
.bo-topbar__img {
  height: 26px;
  width: auto;
  flex: none;
  display: block;
}
.bo-topbar__word {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  color: var(--text-colour);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.bo-topbar__word strong {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mint-dark);
}
.bo-topbar__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: 0 24px;
}
/* Only ever seen on a phone; the sidebar is always open otherwise. The selector is deliberate:
   the global button rules set a display, so a button that must stay hidden has to outrank them. */
.bo-topbar button.bo-topbar__toggle {
  display: none;
  margin-right: var(--space-3);
  padding: var(--space-2);
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text-colour);
  font-size: 22px;
  cursor: pointer;
}
/* ── Sidebar and content ── */
.bo-area {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.bo-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--navy);
}
.bo-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--background-colour);
}
/* ── Breezer's menu, dressed as the prototype's nav ── */
.bo-app .bo-sidebar main-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: auto;
  padding: 12px 10px;
  border: 0;
  background: none;
}
.bo-app .bo-sidebar menu-item {
  display: flex;
  flex-direction: column;
  position: relative;
  background: none;
}
.bo-app .bo-sidebar .bo-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 14px;
  border-radius: var(--btn-radius);
  color: var(--on-dark-60);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.bo-app .bo-sidebar .bo-nav__link:hover {
  background: var(--on-dark-08);
  color: var(--on-dark-90);
}
.bo-app .bo-sidebar .bo-nav__link.active {
  background: var(--mint);
  color: var(--on-mint);
}
.bo-app .bo-sidebar .bo-nav__icon {
  width: 20px;
  flex-shrink: 0;
  font-size: 16px;
  text-align: center;
  opacity: 0.5;
}
.bo-app .bo-sidebar .bo-nav__link:hover .bo-nav__icon {
  opacity: 0.8;
}
.bo-app .bo-sidebar .bo-nav__link.active .bo-nav__icon {
  opacity: 1;
}
.bo-app .bo-sidebar .bo-nav__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bo-app .bo-sidebar .bo-nav__chevron {
  flex: none;
  font-size: 10px;
  font-style: normal;
  opacity: 0.6;
}
.bo-app .bo-sidebar .bo-nav__number {
  flex: none;
  padding: 0 6px;
  border-radius: var(--pill-radius);
  background: var(--mint);
  color: var(--on-mint);
  font-size: 10px;
  font-style: normal;
}
/* A group's pages sit indented under it, smaller, so the group still reads as the heading. */
.bo-app .bo-sidebar .bo-nav__children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px;
}
.bo-app .bo-sidebar .bo-nav__link--child {
  min-height: 34px;
  padding: 6px 14px 6px 46px;
  font-size: var(--text-base);
  font-weight: 400;
}
/* Breezer's own hover-out panel is not wanted — groups expand in place here. */
.bo-app .bo-sidebar .hover-items {
  display: none !important;
}
/* The theme switch keeps its own styling but has to read on the dark ground. */
.bo-app .bo-sidebar .theme-toggle__label {
  color: var(--on-dark-55);
}
/* ── Page content ──
   One gutter, put on the wrapper the layout renders, so a page that uses Breezer's breezer-page
   and one that does not sit on the same left edge. */
.bo-content {
  width: 100%;
  padding: var(--space-6);
}
.bo-content breezer-page {
  display: block;
}
@media (max-width: 900px) {
  .bo-topbar__logo {
    width: auto;
    min-width: 0;
    border-right: 0;
  }
  .bo-topbar button.bo-topbar__toggle {
    display: inline-flex;
  }
  .bo-sidebar {
    position: fixed;
    top: var(--topbar-height);
    bottom: 0;
    left: 0;
    z-index: 4;
  }
  .bo-sidebar[mobile-hidden="true"] {
    display: none;
  }
  .bo-content {
    padding: var(--space-4);
  }
}
/*
    The site loader — what is on screen before Blazor starts. It is rendered by the host, not by a
    component, so it can only use what this stylesheet gives it.

    The ground is the sidebar's dark green in both themes: the app has not read the theme yet at
    this point, and a white flash into a dark shell reads as a fault.
*/
.app-loading {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--navy);
}
/* A mint glow behind the mark, so the screen is not a flat rectangle while it waits. */
.app-loading__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, rgba(138, 224, 177, 0.18) 0%, transparent 70%), radial-gradient(ellipse 35% 25% at 50% 45%, rgba(138, 224, 177, 0.22) 0%, transparent 60%);
  animation: og-loading-glow 2.4s ease-in-out infinite;
}
.app-loading > img {
  position: relative;
  max-width: 220px;
  max-height: 220px;
  animation: og-loading-pulse 2.4s ease-in-out infinite;
}
.app-loading > p {
  position: relative;
  margin: 0;
  color: var(--on-dark-55);
  font-size: var(--text-lg);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-loading__mark {
  color: #8ae0b1;
  font-weight: var(--fw-bold);
}
@keyframes og-loading-pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes og-loading-glow {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
/* The account menu under the avatar. */
.og-account__trigger {
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.og-account__signin {
  color: var(--mint-dark);
  font-size: var(--text-sm);
  text-decoration: none;
}
.og-account__card {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: var(--space-2);
}
.og-account__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-2);
}
.og-account__name {
  font-weight: var(--fw-semibold);
  color: var(--text-colour);
}
.og-account__email,
.og-account__tenant {
  font-size: var(--text-xs);
  color: var(--mid);
}
.og-account__card .og-account__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--btn-radius);
  background: none;
  box-shadow: none;
  color: var(--text-colour);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.og-account__card .og-account__item:hover {
  background: var(--background-highlight-colour);
}
.og-account__card .og-account__item i {
  width: 16px;
  color: var(--mid);
  text-align: center;
}
.og-account__card .og-account__item--signout,
.og-account__card .og-account__item--signout i {
  color: var(--red);
}
/* The user's own settings page. */
.settings-block {
  max-width: 640px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
}
.settings-block h2 {
  margin: 0;
  font-size: var(--text-base);
}
.settings-block__why {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--mid);
}