/**
 * Legacy file — mobile utilities only.
 * Colors come from sc-app.css (directory.html palette).
 */

* {
  scrollbar-color: rgba(168, 85, 247, 0.45) var(--card, #141B2D);
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden !important;
  }

  .container,
  .main-container,
  .wrap,
  .content,
  .section,
  .section-container,
  .dashboard-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
  }

  header,
  .header,
  .topbar,
  .navbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  .header-actions,
  .nav-buttons,
  .filters-row,
  .action-row {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .stats-grid,
  .cards-grid,
  .vendors-grid,
  .cities-grid,
  .packages-grid,
  .category-grid,
  .charts-grid,
  .grid,
  .grid2,
  .two-col,
  .twoCol {
    grid-template-columns: 1fr !important;
  }

  .modal-content,
  .dialog,
  .popup {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    padding: 14px !important;
  }

  .table-wrapper,
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  .container,
  .main-container,
  .wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}