/* Application shell (Linear): a white menu with a line beside the page, a white top bar, the page area. */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  /* The page's row is at least the screen; anything else in the body (a dialog's holder) gets its own empty row
     and never takes height from it. */
  grid-template-rows: minmax(100vh, auto);
  min-height: 100vh;
}

/* Sidebar: always the screen's full height, fixed while the page scrolls (user decision 2026-10-08) */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--color-border);
  color: var(--sidebar-ink);
  padding: var(--space-md) 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* The product's mark: the tab icon's navy square with its orange end point, then the name */
.brand {
  display: flex;
  align-items: center;
  min-height: var(--button-height);
  padding: 0 var(--space-sm);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: var(--text-heading-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand::before {
  content: "";
  flex: none;
  width: var(--brand-mark);
  height: var(--brand-mark);
  margin-right: 10px;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at 70% 70%, var(--color-accent) 0 4px, transparent 4.5px), var(--color-primary);
}

.brand span {
  color: var(--color-accent);
}

/* The menu as a tree (Sally, 2026-10-29: which item is under which must show). A row: on the first level an icon, then
   the name (a group: its arrow at the end); a group's items under it inside a guide line that comes down from its icon; a
   group inside a group (Processes → Products) opens with an arrow before its name, and the single items beside it line
   up with the groups' names. */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav a,
.nav-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--nav-row-height);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--nav-indent);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--sidebar-ink);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  line-height: var(--leading-label-sm);
  font-weight: 500;
  text-align: left;
  transition: background-color var(--transition);
}

.nav-group {
  font-weight: 600;
  cursor: pointer;
}

.nav a:hover,
.nav-group:hover,
.nav-group:focus-visible {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
  text-decoration: none;
}

/* The chosen row: a light orange, an orange bar on its left, bold */
.nav a.is-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-ink);
  font-weight: 700;
  box-shadow: inset var(--sidebar-bar-width) 0 0 var(--color-accent);
}

.nav a[aria-disabled="true"] {
  color: var(--sidebar-muted);
  cursor: default;
}

.nav-label {
  flex: 1;
  min-width: 0;
}

/* The first level's icons, each in its own colour (Sally, 2026-10-29: the menu's colour is in its icons only; the chosen
   row is marked by its light orange and its bar) */
.nav-icon,
.nav-chevron {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon {
  width: var(--nav-icon);
  height: var(--nav-icon);
  stroke-width: 2;
  color: var(--sidebar-muted);
}

.nav-icon[data-icon="home"] { color: var(--nav-icon-home); }
.nav-icon[data-icon="chat"] { color: var(--nav-icon-chat); }
.nav-icon[data-icon="projects"] { color: var(--nav-icon-projects); }
.nav-icon[data-icon="search"] { color: var(--nav-icon-search); }
.nav-icon[data-icon="processes"] { color: var(--nav-icon-processes); }
.nav-icon[data-icon="admin"] { color: var(--nav-icon-admin); }

/* A group's arrow: points right, turns down when the group is open */
.nav-chevron {
  width: var(--nav-chevron);
  height: var(--nav-chevron);
  stroke-width: 2.2;
  color: var(--sidebar-muted);
  transition: transform var(--transition);
}

.nav-group[aria-expanded="true"] > .nav-chevron {
  transform: rotate(90deg);
}

/* A first-level group's items: inside the guide line that comes down from its icon */
.nav-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-sub[hidden] {
  display: none;
}

.nav > .nav-sub {
  margin: 2px 0 var(--space-xs) calc(var(--nav-indent) + var(--nav-icon) / 2);
  padding-left: var(--space-xs);
  border-left: 1px solid var(--color-border);
}

.nav-sub > a,
.nav-sub > .nav-group {
  gap: 6px;
  padding-left: var(--space-sm);
}

/* Beside groups, a single item starts where the groups' names start (after their arrow) */
.nav-sub:has(> .nav-group) > a {
  padding-left: calc(var(--space-sm) + var(--nav-chevron) + 6px);
}

/* A group inside a group: its items inside a guide line that comes down from its arrow */
.nav-sub .nav-sub {
  margin-left: calc(var(--space-sm) + var(--nav-chevron) / 2);
  padding-left: var(--space-xs);
  border-left: 1px solid var(--color-border);
}

/* ...and its items start where a name would start one level in: a step deeper than the groups beside it */
.nav-sub .nav-sub > a {
  padding-left: calc(var(--space-sm) + var(--nav-chevron) + 6px);
}

/* The Chat item's badge: how many messages are for the person, or a dot when only other ones are unread. */
.nav-badge {
  flex: none;
  margin-left: auto;
  min-width: var(--chat-badge-size);
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--nav-badge-bg);
  color: var(--nav-badge-ink);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: var(--chat-badge-size);
  text-align: center;
}

.nav-dot {
  flex: none;
  margin-left: auto;
  width: var(--nav-dot-size);
  height: var(--nav-dot-size);
  border-radius: var(--radius-full);
  background: var(--nav-dot);
}

/* Content column */
.content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--page-margin);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* The user menu (<bpm-user-menu>) sits in the screen's top-right corner: a top bar leaves it room. */
.topbar,
.topbar.designer-toolbar,
.topbar.org-toolbar {
  min-height: var(--topbar-height);
  padding-right: var(--user-menu-reserve);
}

.page {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* A page without a top bar starts under the user menu's row (top right), so its own header never runs into it */
.content > .page:first-child {
  padding-top: var(--topbar-height);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 1024px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--page-margin-mobile);
    padding-right: var(--user-menu-reserve);
    /* Not a scroll box itself: its room on the right is the user menu's, and what scrolls is the menu's row below -
       so no item slides under the person's picture. */
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .nav {
    flex: 1 1 auto;
    flex-direction: row;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .topbar,
  .page {
    padding-left: var(--page-margin-mobile);
    padding-right: var(--page-margin-mobile);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Inside the mobile app (app-bridge.ts): the app has its own top bar, back, menu and action bar; only the page's own
   content is drawn here, full width. */
.in-app .shell {
  grid-template-columns: minmax(0, 1fr);
}

.in-app .sidebar,
.in-app .back-link,
.in-app .form-actions {
  display: none;
}

/* No user menu in the app: the page starts at the top. */
.in-app .content > .page:first-child {
  padding-top: var(--space-lg);
}