.topbar {
  height: var(--topbar-height);
  background: linear-gradient(180deg, #2b341f 0%, #1d2415 100%);
  color: white;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 1100;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand {
  font-size: 22px;
  font-weight: bold;
  color: var(--brand);
  white-space: nowrap;
}

.menu-toggle {
  background: #3a4528;
  color: white;
  border: 1px solid #5d6b47;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 18px;
  min-width: 48px;
  min-height: 44px;
}

.menu-toggle:hover {
  background: #4a5734;
}

.auth-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.topbar-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
  flex-shrink: 0;
  margin: 0;
}

.user-email {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-badge,
.user-role-chip {
  background: rgba(85, 107, 47, 0.25);
  color: #d6e4b0;
  border: 1px solid #66774e;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
}

.user-role-chip.admin {
  background: rgba(113, 85, 20, 0.28);
  border-color: #8f7633;
  color: #f0dea0;
}

.user-role-chip.user {
  background: rgba(85, 107, 47, 0.25);
  border-color: #66774e;
  color: #d6e4b0;
}

.user-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-box-header button,
.action-btn,
.small-btn {
  padding: 10px 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s ease;
  min-height: 44px;
}

.user-box-header button,
.action-btn,
.small-btn.promote-btn {
    background: var(--green);
    color: white;
}

.user-box-header button:hover,
.action-btn:hover,
.small-btn.promote-btn:hover {
    background: var(--green-hover);
}

.small-btn.demote-btn {
  background: var(--danger);
  color: white;
}

.small-btn.demote-btn:hover {
  background: var(--danger-hover);
}

.small-btn {
  padding: 10px 12px;
  font-size: 13px;
}

.app-layout {
  display: flex;
  min-height: calc(100vh - var(--topbar-height));
  align-items: stretch;
}

#sidebarOutlet {
  display: flex;
  align-self: stretch;
}