@media (max-width: 1280px) {
  .container-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .dashboard-hero,
  .ai-layout,
  .logs-layout {
    grid-template-columns: 1fr;
  }

  .hero-metrics,
  .database-panel,
  .flow-grid,
  .container-grid,
  .mini-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tabs {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .tab {
    flex: 0 0 auto;
  }
}

@media (max-width: 760px) {
  .app-shell {
    width: min(100vw - 24px, 100%);
    padding-top: 12px;
  }

  .top-hero {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px;
  }

  .top-hero .brand-mark {
    width: 42px;
    height: 42px;
  }

  .hero-copy h1 {
    font-size: 20px;
    line-height: 26px;
  }

  .hero-copy > p:last-child {
    display: none;
  }

  .user-box {
    grid-column: 1 / -1;
    justify-content: space-between;
  }

  .hero-metrics,
  .database-panel,
  .flow-grid,
  .container-grid,
  .mini-service-grid,
  .form-grid,
  .knowledge-import {
    grid-template-columns: 1fr;
  }

  .section-head {
    align-items: flex-end;
  }

  .section-head h2 {
    font-size: 20px;
  }

  .card {
    padding: 14px;
  }

  .table-row {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .table-row strong {
    text-align: left;
  }
}