/* EMMCB — application shell
   sidebar | (header / subheader / scrolling work area) */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  height: 100dvh;
  transition: grid-template-columns var(--dur) var(--ease);
}
.shell[data-nav="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ---- Sidebar --------------------------------------------------------- */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sidebar__brand {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.sidebar__mark {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--ink-invert);
  display: grid; place-items: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sidebar__wordmark { min-width: 0; }
.sidebar__wordmark b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sidebar__wordmark span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar__nav { flex: 1 1 auto; min-height: 0; padding: var(--s4) var(--s3); }

.navgroup + .navgroup { margin-top: var(--s5); }
.navgroup__title {
  padding: 0 var(--s2) var(--s2);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.navitem {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 7px var(--s2);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.navitem:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.navitem[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); font-weight: 600; }
.navitem[aria-current="page"] .navitem__icon { color: var(--accent); }
.navitem__icon { flex: none; width: 16px; height: 16px; color: var(--ink-3); }
.navitem__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navitem__badge {
  flex: none;
  min-width: 18px; height: 17px;
  padding: 0 5px;
  border-radius: 9px;
  display: grid; place-items: center;
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--surface-3);
  color: var(--ink-2);
}
.navitem__badge[data-tone="neg"]  { background: var(--neg-wash);  color: var(--neg); }
.navitem__badge[data-tone="warn"] { background: var(--warn-wash); color: var(--warn); }

.sidebar__foot {
  flex: none;
  border-top: 1px solid var(--line);
  padding: var(--s3);
}

.userchip {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: var(--s2);
  border: 0; background: none; border-radius: var(--radius-sm);
  text-align: left;
  transition: background var(--dur-fast) var(--ease);
}
.userchip:hover { background: var(--surface-2); }
.userchip__avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: var(--fs-tiny); font-weight: 600;
}
.userchip__meta { min-width: 0; }
.userchip__meta b { display: block; font-size: var(--fs-xs); font-weight: 600; }
.userchip__meta span { display: block; font-size: var(--fs-micro); color: var(--ink-3); }

/* Collapsed sidebar hides labels, keeps the rail navigable */
.shell[data-nav="collapsed"] .sidebar__wordmark,
.shell[data-nav="collapsed"] .navgroup__title,
.shell[data-nav="collapsed"] .navitem__label,
.shell[data-nav="collapsed"] .navitem__badge,
.shell[data-nav="collapsed"] .userchip__meta { display: none; }
.shell[data-nav="collapsed"] .sidebar__brand { justify-content: center; padding: 0; }
.shell[data-nav="collapsed"] .navitem { justify-content: center; padding: 8px 0; }
.shell[data-nav="collapsed"] .userchip { justify-content: center; }

/* ---- Main column ----------------------------------------------------- */
.main {
  display: grid;
  grid-template-rows: var(--header-h) auto 1fr;
  min-width: 0;
  min-height: 0;
  background: var(--app-bg);
}

.topbar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.subbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  min-height: var(--subheader-h);
}

.work {
  min-height: 0;
  min-width: 0;
  padding: var(--s7) var(--s7) var(--s8);
  overflow: auto;
}

/* ---- Page grid ------------------------------------------------------- */
/* A little more air between panels than between things inside one, so the
   page reads as a set of ideas rather than a wall. */
.page { display: flex; flex-direction: column; gap: var(--s6); max-width: 1720px; }

.grid { display: grid; gap: var(--s6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--main-side { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); }
.grid--side-main { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
.grid--wide-narrow { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* ---- Responsive ------------------------------------------------------ */
/* BI is a desktop instrument. Below these widths we reorganise panels
   rather than shrink them, so density stays readable. */
@media (max-width: 1400px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--main-side, .grid--side-main, .grid--wide-narrow { grid-template-columns: minmax(0, 1fr); }
  .grid--main-side > *, .grid--side-main > * { grid-column: auto; }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .shell .sidebar__wordmark,
  .shell .navgroup__title,
  .shell .navitem__label,
  .shell .navitem__badge,
  .shell .userchip__meta { display: none; }
  .shell .sidebar__brand { justify-content: center; padding: 0; }
  .shell .navitem { justify-content: center; padding: 8px 0; }
  .shell .userchip { justify-content: center; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work { padding: var(--s4); }
  .topbar, .subbar { padding-left: var(--s4); padding-right: var(--s4); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .topbar__context { display: none; }
}