/* The shell's own layout: navigation, the module area and sign-in.
   Components and theme tokens come from @lsongdev/stylesheets (its
   index.css, linked before this file; <body class="app"> sets the
   document baseline). The tokens inherit into the modules' shadow roots,
   which load the shared module styles from the panel runtime
   (panel/ui/module.css) instead of this file. */
:root {
  /* The navigation at the panel's density. */
  --sidebar-width: 220px;
  --sidebar-padding: 0 12px 12px;
  --sidebar-mobile-padding: 16px;
  --menu-vertical-font-size: 14px;
  --menu-vertical-item-padding: 7px 8px;
  --menu-vertical-item-margin: 1px 0;
  --menu-vertical-item-radius: 6px;
}

* {
  box-sizing: border-box;
}

/* Keep content width stable when a loading page acquires a scrollbar.
   The windowed frame (large screens, see layout.css) scrolls inside, with
   a gutter of its own, and the page then needs none. */
html {
  scrollbar-gutter: stable;
}

@media (min-width: 1280px) and (min-height: 760px) {
  html:has(.app-layout-windowed) {
    scrollbar-gutter: auto;
  }
}

.app {
  -webkit-font-smoothing: antialiased;
}

/* The navigation beside (or, on narrow screens, above) the module. */
/* The frame is the library's .app-layout, windowed on large screens; the
   navigation is rendered into a wrapper that takes no box of its own. */
.layout-nav {
  display: contents;
}

.app-layout .menu-vertical {
  padding: 8px 0;
}

/* The panel's menu look: a group's heading is a small label over a flat
   list. (The library draws headings like the links, with their icons; the
   icons-only sidebar keeps that, as .menu-flyout.) */
.app-layout .menu-group:not(.menu-flyout) > .menu-heading {
  margin: 0;
  padding: 12px 12px 4px;
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
}

.app-layout .menu-group:first-child:not(.menu-flyout) > .menu-heading {
  padding-top: 0;
}

.app-layout .menu-group:not(.menu-flyout) > .menu-heading > i {
  display: none;
}

.app-layout .menu-group:not(.menu-flyout) > button.menu-heading:hover {
  background: none;
  color: var(--color-text);
}

.app-layout .menu-group:not(.menu-flyout) > ul {
  padding: 0;
  background: none;
}

.app-layout .sidebar-brand {
  padding: 0 8px;
  justify-content: flex-start;
}

.sidebar-logout {
  width: 100%;
  justify-content: flex-start;
}

/* Sign-in */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.login-card {
  --card-padding: 24px;
  --card-margin: 0;
  width: min(360px, 100%);
  display: grid;
  gap: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  font-size: 16px;
  font-weight: 650;
}

.brand-mark {
  color: var(--color-primary);
}