/* ---- The application shell ------------------------------------------------
   Sidebar, topbar and the page column they frame. Loaded on every page, but
   every rule here is under `.page-app`, which `base.html` sets only when the
   request has a tenant. The pre-login pages therefore pay one small file and
   inherit none of its layout.

   Colour discipline is the token layer's (tokens.css): blue is chrome, and the
   one status this file signals is "waiting on you", which is amber.
   -------------------------------------------------------------------------- */

/* This project has no global box-sizing reset, and the shell is full of
   "100% wide, with padding" controls that silently overflow under
   `content-box` (the page column overflowed the viewport by exactly its own
   padding). Scoped to the shell's own markup rather than made global: the
   page templates below were written against `content-box` and are not this
   phase's to re-lay-out. */
.side, .side *, .topbar, .topbar *, .page-app .page {
  box-sizing: border-box;
}

body.page-app {
  --sidebar-w: 248px;
  --shell-ease: cubic-bezier(0.22, 0.8, 0.28, 1);
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--ground);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
}
body.page-app.is-collapsed { --sidebar-w: 64px; }

.shell__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Sidebar --------------------------------------------------------------- */

.side {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.side__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}
.side__mark { display: flex; flex: none; }
.side__mark img { display: block; border-radius: var(--radius-sm); }
.side__name {
  font-weight: 650;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.side__toggle {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--slate);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  line-height: 0;
  transition: background 0.18s var(--shell-ease), color 0.18s var(--shell-ease);
}
.side__toggle:hover { background: var(--panel-sunk); color: var(--ink); }

.side__group {
  display: block;
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
  padding: var(--space-2) var(--space-2) var(--space-1);
  font-weight: 600;
}

.side__foot { margin-top: auto; padding-inline: var(--space-2); }
.side__public {
  display: block;
  font-size: var(--fs-micro);
  color: var(--slate);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-3);
}
.side__public:hover { color: var(--accent); }

/* ---- Pickers (organization, product) --------------------------------------- */

/* Every level between `.picker` and the label has to be allowed to shrink,
   or a long product name pushes the chevron out of the sidebar. */
.picker, .picker form, .picker__menu { min-width: 0; }
.picker { display: grid; gap: var(--space-1); }
.picker__label {
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate);
  padding-inline: var(--space-2);
  font-weight: 600;
}
.picker__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  text-align: left;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 550;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.18s var(--shell-ease), background 0.18s var(--shell-ease);
}
.picker__btn::-webkit-details-marker { display: none; }
.picker__btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.picker__btn--fixed { cursor: default; }
.picker__btn--fixed:hover { border-color: var(--line-soft); background: var(--panel-sunk); }
.picker__btn--empty { color: var(--slate); font-weight: 500; }
.picker__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker__chev { color: var(--slate); flex: none; }
.picker__menu[open] .picker__chev { transform: rotate(180deg); }

.picker__list {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  display: grid;
  gap: 1px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  max-height: 17rem;
  overflow-y: auto;
}
.picker__option {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.picker__option:hover { background: var(--accent-soft); color: var(--accent-deep); }
.picker__option.is-on { color: var(--accent-deep); font-weight: 650; }
.picker__option--more { color: var(--slate); border-top: 1px solid var(--line-soft); }

/* ---- Nav ------------------------------------------------------------------- */

.side .nav { display: grid; gap: 1px; }
.nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  position: relative;
  transition: background 0.16s var(--shell-ease), color 0.16s var(--shell-ease);
}
.nav__item:hover { background: var(--panel-sunk); color: var(--ink); }
.nav__item.is-on {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 650;
}
.nav__item.is-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
/* A section whose route does not exist yet: present, explained, not a link. */
.nav__item--off { color: var(--neutral); cursor: not-allowed; }
.nav__item--off:hover { background: none; color: var(--neutral); }

.nav__ico { flex: none; color: var(--slate); }
.nav__item:hover .nav__ico { color: var(--ink-2); }
.nav__item.is-on .nav__ico { color: var(--accent); }
.nav__item--off .nav__ico { color: var(--neutral); }
.nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Amber is "waiting on you" (tokens.css). Quiet counts are just counts. */
.nav__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  background: var(--warn-bright);
  color: var(--on-warn);
  border-radius: var(--radius-pill);
  padding: 0 0.45rem;
  min-width: 1.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nav__count--quiet { background: var(--neutral-soft); color: var(--slate); }

/* Collapsed: icons only. The labels are hidden, not removed, so the title
   attribute is unnecessary and the accessible name still comes from the text. */
.page-app.is-collapsed .side__name,
.page-app.is-collapsed .picker,
.page-app.is-collapsed .side__group,
.page-app.is-collapsed .side__foot,
.page-app.is-collapsed .nav__count { display: none; }
.page-app.is-collapsed .nav__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-app.is-collapsed .nav__item { justify-content: center; padding: var(--space-2); }
/* 64px of rail does not hold the mark, the wordmark and the toggle. The
   toggle is the one that has to stay: it is the way back out. */
.page-app.is-collapsed .side__mark { display: none; }
.page-app.is-collapsed .side__brand { justify-content: center; padding-inline: 0; }
.page-app.is-collapsed .side__toggle { margin-left: 0; }

/* ---- Topbar ---------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0;
}

.topbar__drawer {
  display: none;
  background: var(--panel-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  line-height: 0;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--slate);
  min-width: 0;
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs__sep { opacity: 0.45; }
.crumbs__product {
  color: var(--ink);
  font-weight: 620;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topbar__search {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: var(--fs-micro);
  color: var(--slate);
  background: var(--panel-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
}

.user-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
}
.avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ---- Page column ----------------------------------------------------------- */

.page-app .page {
  padding: var(--space-5) var(--space-5) var(--space-7);
  max-width: 84rem;
}
.page-app .site-messages { margin: 0 0 var(--space-4); }
.page-app h1 { margin-top: 0; }

/* ---- Narrow: the sidebar becomes a drawer ---------------------------------- */

@media (max-width: 60rem) {
  body.page-app { grid-template-columns: 1fr; }
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    width: 248px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.26s var(--shell-ease);
    box-shadow: var(--shadow-md);
  }
  body.page-app.is-drawer-open .side { transform: translateX(0); }
  .topbar__drawer { display: inline-flex; }
  .topbar { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  /* A phone's topbar holds the drawer, the primary action and the account
     controls, and nothing else. The breadcrumb repeats the page's own
     heading and search is not built yet, so those two are what go. */
  .crumbs, .topbar__search, .avatar { display: none; }
  .page-app .page { padding: var(--space-4) var(--space-4) var(--space-6); }
}