/* ==========================================================================
   Responsive breakpoints — tablet & mobile adjustments, touch targets.
   ========================================================================== */

@media (max-width: 1024px) {
  .app-main { padding: var(--space-5); }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

@media (max-width: 768px) {
  .app-header { padding: var(--space-3) var(--space-4); }
  .brand-name { font-size: var(--font-size-md); }
  .app-main { padding: var(--space-4); }

  .home-hero { padding: var(--space-6) var(--space-2) var(--space-4); }
  .home-actions { flex-direction: column; }
  .home-actions .btn { width: 100%; }

  .form-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }

  .wizard-footer { flex-direction: column-reverse; gap: var(--space-3); align-items: stretch; }
  .wizard-footer .footer-right { width: 100%; }
  .wizard-footer .btn { flex: 1; }

  .progress-step span.step-label { display: none; }
  .progress-step { padding: var(--space-2); }

  table.data-table th, table.data-table td { padding: var(--space-2); }

  .bar-row { flex-wrap: wrap; }
  .bar-row .bar-label { width: 100%; }
}

@media (max-width: 480px) {
  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .op-card { padding: var(--space-3); }
}

/* Touch-friendly minimum target sizes on coarse pointers */
@media (pointer: coarse) {
  .btn, .icon-btn, .progress-step, input, select, .row-remove-btn { min-height: 44px; }
}