/* The rail width lives in one variable so the grid column and its transition
   read the same value. Every sidebar row keeps one layout in both states and
   only the width animates: a row that changes display or position on toggle
   jumps in one frame while the width is still moving, which reads as flicker.
   Each row clips its own overflow instead of the sidebar, so the account menu
   can still open beside the collapsed rail. Labels fade out at once on
   collapse and wait for room on expand, so they never show clipped. */
.shell {
  --sidebar-w: 240px;
  --sidebar-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sidebar-duration: 240ms;
  --sidebar-fade: 160ms ease 80ms;
  display: grid;
  min-height: 100vh;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  transition: grid-template-columns var(--sidebar-duration) var(--sidebar-ease);
}

.shell.is-sidebar-collapsed {
  --sidebar-w: 64px;
  --sidebar-fade: 120ms ease;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 22px 8px 18px;
}

.sidebar-fade {
  transition: opacity var(--sidebar-fade);
}

.shell.is-sidebar-collapsed .sidebar-fade {
  opacity: 0;
  pointer-events: none;
}

/* The logo's mark sits on the rail's 32px centre line; collapsing narrows the
   image to the mark instead of swapping in a second image. */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  padding: 4px 0 0 11px;
}

.sidebar-brand .brand-logo {
  height: 28px;
  object-fit: cover;
  object-position: left center;
  transition: width var(--sidebar-duration) var(--sidebar-ease);
}

.shell.is-sidebar-collapsed .sidebar-brand .brand-logo {
  width: 26px;
}

@media (prefers-reduced-motion: reduce) {
  .shell,
  .sidebar-fade,
  .sidebar-brand .brand-logo {
    transition: none;
  }
}

/* The nav scrolls on its own in a short window; the inline padding keeps the
   button focus ring inside that scroll box. */
.nav {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  gap: 4px;
  min-height: 160px;
  margin: 22px -4px 0;
  padding: 0 4px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 8px sidebar padding + 1px border + 14px padding + half the 18px icon puts
   every row icon on the rail's 32px centre line. */
.nav button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  padding: 0 12px 0 14px;
  color: var(--sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0.85;
}

.nav button.active .nav-icon,
.nav button:hover .nav-icon {
  opacity: 1;
}

.nav button:hover {
  background: var(--sidebar-hover);
  border-color: transparent;
  color: #ffffff;
}

.nav button.active {
  background: var(--sidebar-active);
  color: #ffffff;
  font-weight: 600;
}

.nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
}

.nav-badge-idle {
  background: #1f2227;
  color: #6b7280;
}

.nav-badge-live {
  background: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  animation: pulse-live 1.6s ease-in-out infinite;
}

.sidebar-footer {
  position: relative;
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding: 14px 0 4px;
  border-top: 1px solid var(--sidebar-line);
}

.sidebar-tool {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 36px;
  overflow: hidden;
  padding: 0 12px 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.sidebar-tool:hover {
  background: var(--sidebar-hover);
  border-color: transparent;
  color: #ffffff;
}

.sidebar-tool:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: transparent;
}

.sidebar-tool-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* The menu boundary for outside clicks. It adds no box, so the card stays a
   footer row and the menu still positions against the footer. */
.sidebar-account {
  display: contents;
}

/* 8px sidebar padding + 1px border + 8px padding + half the 30px avatar = the
   rail's 32px centre line, so the avatar stays put and the rest clips. */
.sidebar-user-card {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  overflow: hidden;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--sidebar-line);
  border-radius: 12px;
  background: var(--sidebar-active);
  color: #ffffff;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.sidebar-user-card:hover,
.sidebar-user-card[aria-expanded='true'] {
  border-color: var(--sidebar-muted);
  background: var(--sidebar-active);
}

.sidebar-user-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-color: transparent;
}

.shell.is-sidebar-collapsed .sidebar-user-card {
  border-color: transparent;
  background: transparent;
}

.sidebar-user-card .user-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #f4ffb8 0%, var(--lime) 55%, #a3e635 100%);
  color: var(--dark);
  font-weight: 700;
}

.user-menu-dots {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--sidebar-muted);
}

.opta-search {
  position: relative;
  flex: 0 0 auto;
  width: min(320px, 100%);
}

.opta-search-input {
  width: 100%;
}

.user-menu {
  position: absolute;
  z-index: 60;
  min-width: 200px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  padding: 6px;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
}

.user-menu-email {
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  word-break: break-all;
}

.user-menu-item {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 8px 10px;
  text-align: left;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
}

.user-menu-item:hover {
  background: var(--line-soft);
}

.sidebar-user-email {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
}

.shell.is-sidebar-collapsed .user-menu {
  bottom: 8px;
  left: calc(100% + 8px);
  right: auto;
  width: 220px;
}

.content {
  min-width: 0;
  padding: 22px 26px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.topbar .actions button {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
}

.title {
  margin: 0;
  color: var(--dark);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.subtitle {
  margin: 4px 0 0;
  color: var(--muted);
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--dark);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease;
}

.breadcrumb-back svg {
  width: 16px;
  height: 16px;
}

.breadcrumb-back:hover {
  background: var(--hover, #f1f5f9);
  border-color: var(--dark);
}

.breadcrumb-back:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  min-width: 0;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.breadcrumb-sep {
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

.breadcrumb-link:hover {
  color: var(--dark);
  text-decoration: underline;
}

.breadcrumb-current {
  color: var(--dark);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60ch;
}

.user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.user-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--dark);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}