@media (max-width: 1100px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --container-pad: 1rem; --gap: 0.85rem; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .section-head .actions { width: 100%; flex-wrap: wrap; }
  /* Panel grid stacks */
  .panel-grid { grid-template-columns: 1fr; }
  /* Section actions wraps */
  .section-actions { flex-wrap: wrap; gap: 0.45rem; }
  .section-actions .btn-sm { font-size: 0.75rem; }
}

/* Delivery page mobile: compact filter controls */
@media (max-width: 768px) {
  /* Remove shadow — 4px overhang was causing horizontal scroll */
  .delivery-expander { box-shadow: none; }
  .delivery-expander-toggle { padding: 0.55rem 0.85rem; font-size: 0.75rem; }
  .delivery-expander-body { padding: 0.6rem 0.65rem 0.5rem; }

  /* Hide Custom Range on mobile (it's disabled anyway) */
  .delivery-custom-btn { display: none !important; }

  /* Row 1: Today + Yesterday — flex:0.5 so buttons stay compact */
  .delivery-view-row { flex-wrap: nowrap; gap: 0.35rem; margin-bottom: 0.45rem; }
  .delivery-views { flex: 1; gap: 0.35rem; flex-wrap: nowrap; min-width: 0; }
  .delivery-views .btn-sm {
    flex: 0.5; justify-content: center; min-width: 0;
    padding: 0.45rem 0.3rem; font-size: 0.72rem;
  }

  /* Swap full label to short label inside view buttons */
  .btn-long { display: none; }
  .btn-short { display: inline; }

  /* Action buttons: icon-only */
  .delivery-actions { flex-shrink: 0; gap: 0.3rem; }
  .delivery-actions .btn-sm { padding: 0.45rem 0.55rem; }
  .delivery-actions .btn-long { display: none; }

  /* Row 2: session tabs — flex:0.5, compact */
  .delivery-session-row { gap: 0.35rem; }
  .delivery-session-row .btn-sm {
    flex: 0.5; justify-content: center;
    padding: 0.45rem 0.5rem; font-size: 0.72rem;
  }

  /* Search row: search full-width, date range wraps to fit */
  .delivery-search-row {
    flex-direction: column; gap: 0.4rem; margin-bottom: 0.25rem; align-items: stretch;
  }
  .delivery-search-row > input[type="text"] { flex: none; width: 100%; }
  .delivery-date-range { width: 100%; flex-wrap: wrap; gap: 0.4rem; }
  .delivery-date-range label { flex: 1 1 110px; min-width: 0; }
  .delivery-date-range label input[type="date"] { flex: 1; min-width: 0; width: 100%; max-width: 100%; }
  .delivery-date-range .btn { flex-shrink: 0; }
}

@media (max-width: 480px) {
  :root { --container-pad: 0.65rem; --gap: 0.65rem; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }
  /* Stack topbar on very small screens */
  .topbar { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  /* Panel body wraps */
  .panel .panel-body { padding: 0.85rem; }
}