@media (max-width: 1180px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .main {
    padding: 20px 16px;
  }

  .topbar {
    flex-direction: column;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  sx-status-card {
    width: 100%;
  }

  .sx-production-trend-row {
    grid-template-columns: 72px minmax(0, 1fr) 48px;
  }
}