/* Shared responsive rules for vendor flow pages */
@media (max-width: 960px) {
  body {
    display: block !important;
    min-height: 100vh;
  }

  .sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .sidebar .nav-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .sidebar .nav-item {
    font-size: 12px;
    padding: 8px 10px;
  }

  .sidebar .sidebar-bottom {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }

  .main,
  main.main {
    padding: 14px !important;
  }

  .topbar,
  .search-row,
  .actions,
  .btn-row,
  .row {
    flex-wrap: wrap;
  }

  .filter {
    width: 100% !important;
  }

  .row2,
  .grid2,
  .grid-details,
  .content-layout,
  .stats-grid,
  .plans-grid,
  .form-grid,
  .summary-row {
    grid-template-columns: 1fr !important;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 576px) {
  body {
    padding: 12px !important;
  }

  .container,
  .main,
  .card {
    width: 100%;
    max-width: 100% !important;
  }

  .card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  h1,
  .title {
    font-size: 18px !important;
  }

  .btn,
  button.btn {
    width: 100%;
  }
}