/* Responsive styles — mobile optimization */

/* ── Medium screens ── */
@media (max-width: 768px) {
  .stat-chip {
    padding: 8px 6px;
  }

  .stat-chip-value {
    font-size: var(--text-base);
  }

  .stat-chip-label {
    font-size: 0.65rem;
  }

  .hero-amount {
    font-size: 2rem;
  }
}

/* ── Small screens (mobile) ── */
@media (max-width: 600px) {
  :root {
    --header-height: 48px;
  }

  .app-main {
    padding: var(--space-md) var(--space-sm) var(--space-xl);
  }

  .section {
    padding: var(--space-md) var(--space-sm);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
  }

  .section-label {
    font-size: var(--text-sm);
    margin-bottom: var(--space-sm);
  }

  .step-badge {
    width: 22px;
    height: 22px;
    font-size: var(--text-xs);
  }

  /* Header compact */
  .header-inner {
    padding: 0 var(--space-sm);
  }

  .header-brand {
    font-size: var(--text-xs);
  }

  .header-title {
    font-size: var(--text-sm);
  }

  .icon-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  /* Fields stack vertically */
  .field-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .field-input,
  .form-control {
    font-size: var(--text-base);
    min-height: 44px;
    padding: 10px;
  }

  .field-label {
    font-size: var(--text-xs);
  }

  /* Rate row stacks */
  .rate-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .preset-controls {
    width: 100%;
  }

  .preset-select {
    flex: 1;
    max-width: none;
    min-width: 0;
  }

  /* Profile bar */
  .profile-bar {
    gap: var(--space-xs);
  }

  .profile-select {
    font-size: var(--text-sm);
  }

  .btn-icon-sm {
    width: 36px;
    height: 36px;
  }

  /* CSV row compact */
  .csv-row {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .csv-input {
    width: 100%;
    flex: none;
  }

  .btn-sm-action {
    flex: 1;
    justify-content: center;
  }

  /* Summary stats */
  .stat-chip {
    padding: 6px 4px;
  }

  .stat-chip-value {
    font-size: var(--text-sm);
  }

  .stat-chip-label {
    font-size: 0.6rem;
  }

  /* Hero result */
  .hero-amount {
    font-size: 1.75rem;
  }

  .hero-result {
    padding: var(--space-md) var(--space-sm);
  }

  /* CTA button */
  .btn-primary-cta {
    padding: 12px var(--space-md);
    font-size: var(--text-sm);
  }

  /* Export buttons stack on very small */
  .export-row {
    gap: var(--space-xs);
  }

  .btn-export {
    padding: 8px 6px;
    font-size: var(--text-xs);
    gap: 4px;
  }

  /* History items compact */
  .history-item {
    padding: 10px;
    gap: 8px;
  }

  .history-stats {
    gap: 8px;
    flex-wrap: wrap;
  }

  .history-stat-value {
    font-size: var(--text-xs);
  }

  .history-stat-label {
    font-size: 0.6rem;
  }

  /* Footer */
  .footer-links {
    gap: var(--space-xs);
    font-size: var(--text-xs);
  }

  .app-footer {
    padding: var(--space-md) var(--space-sm) var(--space-xl);
  }

  /* Modals */
  .modal-footer {
    flex-direction: column;
    gap: 12px;
  }

  .modal-footer .footer-info,
  .modal-footer small {
    text-align: center;
  }

  /* Modal sizing — constrain to viewport on mobile */
  .modal-dialog {
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    max-width: 92vw;
  }

  .modal-body {
    padding: 12px 14px;
  }

  .modal-header {
    padding: 10px 14px;
  }

  .modal-body p,
  .modal-body li {
    font-size: var(--text-sm);
  }

  .star-rating {
    justify-content: center;
    font-size: 1.6rem;
  }

  /* Collapsible sections */
  .collapsible-header {
    font-size: var(--text-xs);
  }
}

/* ── Very small screens ── */
@media (max-width: 360px) {
  .summary-stats-row {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .stat-chip {
    flex-direction: row;
    justify-content: space-between;
    padding: 8px 12px;
  }

  .export-row {
    flex-direction: column;
  }

  .btn-export {
    width: 100%;
  }
}