@media (max-width: 1199px) {
  .stats-grid,
  .dash-grid,
  .accounts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar: 240px;
  }

  .detail-grid,
  .bookings-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    width: 220px;
  }

  .sidebar-brand small {
    display: none;
  }

  .app-content {
    padding: 20px;
  }

  .topbar {
    padding-inline: 16px;
  }

  .trip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }

  .home-main {
    padding: 24px 18px 36px;
  }
}

@media (max-width: 767px) {
  .app-shell {
    display: block;
  }

  .app-shell.is-home {
    display: flex;
  }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(84vw, 300px);
    transform: translateX(-110%);
    transition: transform 0.22s ease;
    height: 100vh;
  }

  html[dir="rtl"] .sidebar {
    transform: translateX(110%);
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 78, 59, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 25;
    transition: opacity 0.2s ease;
  }

  .app-shell.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .icon-btn.menu-btn {
    display: inline-flex;
  }

  .app-shell:not(.is-home) .user-chip {
    display: none;
  }

  .topbar,
  .home-header {
    padding: 10px 14px;
  }

  .app-content,
  .home-main {
    padding: 16px;
  }

  .stats-grid,
  .dash-grid,
  .accounts-grid,
  .bookings-grid,
  .trip-grid,
  .detail-grid,
  .booking-meta,
  .account-stats,
  .demo-actions {
    grid-template-columns: 1fr;
  }

  .selected-bar,
  .detail-actions,
  .detail-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .home-nav {
    display: none;
    width: 100%;
    order: 8;
    flex-direction: column;
  }

  .app-shell.sidebar-open .home-nav {
    display: flex;
  }

  .btn-logout {
    width: auto;
  }

  .home-header .user-chip {
    display: flex;
    max-width: 42vw;
  }

  .user-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .flight-anim-svg {
    height: 72px;
  }

  .auth-top,
  .auth-panel {
    padding-inline: 16px;
  }

  .auth-card {
    padding: 24px 18px;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .trip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}