/* Stacked vertical rails in one workspace left column (work + brand). */
.nav-rail-stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: auto;
}

/* Hug content — never stretch a stacked rail to 100% (overlaps siblings). */
.nav-rail-stack > .nav-rail {
  height: auto;
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

/* Keep pane chrome at the fixed title-row height inside stacked rails. */
.nav-rail-stack > .nav-rail > .pane-chrome {
  flex: 0 0 var(--pane-chrome-height);
  height: var(--pane-chrome-height);
  max-height: var(--pane-chrome-height);
  min-height: var(--pane-chrome-height);
}

/* Brand Home: pin the last rail (Brand info / Members) to the column bottom.
   Filter stacks that should pack from the top use `.nav-rail-stack--pack`. */
.nav-rail-stack:not(.nav-rail-stack--pack) > .nav-rail:last-child {
  margin-top: auto;
}

.nav-rail-stack--pack > .nav-rail:last-child {
  margin-top: 0;
}

.nav-rail-stack > .nav-rail .nav-rail-body {
  flex: 0 0 auto;
  overflow: visible;
}

/* Collapsible vertical rail — chrome toggles body visibility. */
.nav-rail__chrome-toggle {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nav-rail__chrome-toggle:hover {
  background: var(--bg-elevated);
}

.nav-rail__chrome-toggle .pane-chrome-label {
  flex: 1;
  min-width: 0;
}

.nav-rail.is-collapsed > .nav-rail-body {
  display: none;
}

.nav-rail-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Body + optional overlay toolbar (see `.inspector-pane-stack`). */
.inspector-pane-stack {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inspector-pane-stack > .inspector-pane-body {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Clearance so the last content clears the absolute toolbar. */
.inspector-pane-stack.has-toolbar > .inspector-pane-body {
  padding-bottom: calc(var(--pane-chrome-height) + var(--space-3));
}

/* Bottom action strip — pinned over scrolling body; cancel/delete left.
   Same band as pane chrome (9u) so clearance math stays on the unit grid. */
.inspector-pane-toolbar {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: var(--pane-chrome-height);
  min-height: var(--pane-chrome-height);
  max-height: var(--pane-chrome-height);
  margin: 0;
  padding: var(--space-1) var(--list-pad-x);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg);
}

/* Accept / primary pins right when more than one action is present. */
.inspector-pane-toolbar > :last-child:not(:only-child) {
  margin-left: auto;
}

/* Compact actions — control-h (7u) + space-1 Y pad ×2 = pane-chrome (9u). */
.inspector-pane-toolbar .btn {
  box-sizing: border-box;
  min-height: var(--control-h);
  max-height: var(--control-h);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--space-2);
  padding-right: var(--space-2);
  font-size: inherit;
  line-height: 1.25;
}

/* Same single-line height contract as `.entity-row` (`--row-h`). */
.nav-rail-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--row-h);
  margin: 0;
  padding: var(--space-2) var(--list-pad-x);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

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

.nav-rail-item__badge {
  flex-shrink: 0;
  margin-left: auto;
}

.nav-rail-item:hover {
  background: var(--bg-elevated);
}

.nav-rail-item.active {
  background: var(--selection);
  box-shadow: inset 4px 0 0 var(--accent);
  color: var(--text);
  font-weight: 500;
}

.nav-rail-item--nested {
  padding-left: calc(var(--space-3) + var(--space-4));
  color: var(--text-muted);
}

.nav-rail-item--nested.active {
  color: var(--text);
}

/* Horizontal NavRail — same item chrome as vertical; only axis / sizing differ. */
.nav-rail--horizontal {
  height: auto;
  min-height: 0;
  flex-shrink: 0;
  margin-bottom: var(--space-3);
}

.nav-rail--horizontal .nav-rail-body {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: visible;
  gap: 0;
  padding: 0;
}

.nav-rail--horizontal .nav-rail-item {
  width: auto;
  flex: 0 0 auto;
}

.nav-rail--horizontal .nav-rail-item.active {
  /* Same accent bar as vertical — top edge instead of leading edge. */
  box-shadow: inset 0 4px 0 var(--accent);
}

.nav-rail--horizontal .nav-rail-item__label {
  flex: 0 1 auto;
}

/* Status bar */

.status-bar {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: calc(var(--u) * 8);
  padding: 0 var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

.status-bar-track {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.status-bar.is-loading .status-bar-track {
  opacity: 1;
}

.status-bar-track-bar {
  height: 100%;
  width: 35%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-strong),
    transparent
  );
  animation: status-bar-slide 1.1s ease-in-out infinite;
}

@keyframes status-bar-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.status-bar-start,
.status-bar-center,
.status-bar-end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.status-bar-start {
  flex: 1;
  gap: var(--space-3);
}

.status-bar-center {
  flex: 2;
  justify-content: center;
  overflow: hidden;
}

.status-bar-stats {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 24px;
}

.status-bar-end {
  flex: 1;
  margin-inline-start: 0;
  justify-content: flex-end;
  flex-shrink: 0;
}

.status-bar-path {
  flex-shrink: 1;
  min-width: 0;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.status-bar-loading,
.status-bar-message-text {
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
}

.status-bar-message {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.status-bar-message.is-success .status-bar-message-text,
.status-bar-message.is-error .status-bar-message-text {
  color: var(--text);
  font-weight: 500;
}

.status-bar-message.is-error .status-bar-message-text {
  color: var(--danger);
}

.status-bar-action {
  flex-shrink: 0;
  font: inherit;
  color: var(--accent-strong);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.status-bar-action:hover {
  text-decoration: underline;
}

.status-bar-dismiss {
  flex-shrink: 0;
  font: inherit;
  line-height: 1;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
}

.status-bar-dismiss:hover {
  color: var(--text);
}

.app-version {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: text;
  line-height: 24px;
}