/* ============================================================
   Responsive overrides — mobile / tablet
   Loaded LAST so it can override inline grid styles.
   Inline styles in this app are non-!important, so the
   !important rules below win on small screens.
   ============================================================ */

/* ---------- Tablet & below (<= 900px) ---------- */
@media (max-width: 900px) {
  /* Two-pane page layouts collapse to single column */
  [style*="1fr 360px"],
  [style*="1fr 340px"],
  [style*="340px 1fr"],
  [style*="320px 1fr"],
  [style*="300px 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {

  /* --- Page header: stack title + actions --- */
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
  }
  .page-title { font-size: 21px; }
  .page-header .btn-primary,
  .page-header .btn-secondary { width: 100%; }

  /* --- Card list grids -> single column --- */
  .agents-grid,
  .prompts-grid,
  .cards-grid,
  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  /* --- Generic inline grids collapse to one column --- */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="repeat(2,"],
  [style*="repeat(3,"],
  [style*="repeat(4,"],
  [style*="repeat(5,"],
  [style*="220px 1fr"],
  [style*="200px 1fr"],
  [style*="140px 1fr"],
  [style*="1fr 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Label columns (e.g. settings "220px 1fr") read better left-aligned */
  [style*="220px 1fr"],
  [style*="200px 1fr"] {
    align-items: start !important;
  }

  /* --- Tables: allow horizontal scroll instead of overflow clip --- */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table { min-width: 640px; }
  .data-table th,
  .data-table td { padding: 10px 12px; }

  /* --- Cards / sections: tighter padding --- */
  .card,
  .settings-section { padding: 16px !important; }

  /* --- Wizard option cards stack --- */
  .wizard-option-cards { grid-template-columns: 1fr !important; }
  .wizard-card { padding: 20px; }
  .wizard-title { font-size: 22px; }
  .wizard-actions { flex-direction: column-reverse; }
  .wizard-actions .btn-primary,
  .wizard-actions .btn-secondary { width: 100%; }

  /* --- Modals: near full-screen on phones --- */
  .modal {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92vh !important;
    overflow-y: auto;
  }
  /* Modal inner stat strips (e.g. repeat(5,1fr)) -> 2 cols then 1 */
  .modal [style*="repeat(5,1fr)"],
  .modal [style*="repeat(4,1fr)"],
  .modal [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- Tab bar: horizontal scroll instead of clip --- */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { flex-shrink: 0; }

  /* --- Buttons in toolbars wrap --- */
  .toolbar,
  .filters-row { flex-wrap: wrap; }

  /* --- Make standalone action buttons easier to tap --- */
  .btn-primary,
  .btn-secondary { min-height: 38px; }
}

/* ---------- Small phones (<= 480px) ---------- */
@media (max-width: 480px) {
  .main-content { padding: 12px; padding-top: 56px; }
  .page-title { font-size: 19px; }

  /* Stat strips fully stack inside modals */
  .modal [style*="repeat(5,1fr)"],
  .modal [style*="repeat(4,1fr)"],
  .modal [style*="repeat(3,1fr)"],
  .modal [style*="repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard quick-stat 4-up -> 2-up */
  [style*="repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}