@media (max-width: 1100px) {
  .grid-4, .grid-3, .grid-2, .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .app-shell, .app-shell.sidebar-expanded { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(86vw, 300px);
    z-index: 50;                   /* ACIMA do backdrop (z-index 40) */
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .menu-button { display: inline-flex !important; align-items: center; justify-content: center; }
  .icon-button { display: inline-flex; align-items: center; justify-content: center; }

  /* Sobrescreve o display:grid do components.css — mantém topbar em flex, tudo na mesma linha */
  .topbar {
    display: flex !important;
    flex-wrap: nowrap !important