/* Keep the single permission-aware sidebar usable on phones and tablets. */
.mobile-menu-toggle,
.mobile-menu-backdrop { display: none; }

@media (max-width: 850px) {
  .sidebar {
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(82vw, 320px);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: 8px 0 24px #15271b30;
  }
  .sidebar.is-open { transform: translateX(0); }
  .brand { justify-content: flex-start; font-size: 18px; }
  .brand span:last-child { font-size: 18px; }
  .brand small { font-size: 11px; }
  .sidebar-section { font-size: 10px; }
  .nav-link { font-size: 14px; }
  .sidebar-footer { font-size: 11px; }
  .content-shell { width: 100%; }
  .topbar { gap: 12px; }
  .topbar-name { flex: 1; min-width: 0; }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #899a82;
    border-radius: 6px;
    background: #fffefa;
    color: #293f33;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .mobile-menu-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #17251ca8;
    cursor: pointer;
  }
  body.mobile-menu-open { overflow: hidden; }
}

@media (max-width: 600px) {
  .topbar-name { font-size: 12px; }
  .user-tools { gap: 8px; }
  .user-tools span { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}