@media (max-width: 760px) {
  .approval-page,
  .approval-detail,
  .detail-scroll,
  .detail-hero,
  .progress-card,
  .detail-grid,
  .detail-left,
  .detail-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .detail-scroll {
    padding-right: 0;
    overflow-x: hidden;
  }

  .detail-scroll > * {
    min-width: 0;
    max-width: 100%;
  }

  .hero-banner-main,
  .hero-fact-grid,
  .applicant-card,
  .detail-card-head {
    min-width: 0;
    max-width: 100%;
  }

  .progress-card,
  .progress-block {
    min-width: 0;
    max-width: 100%;
  }

  .progress-line {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .detail-expense-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
  }

  .detail-actions {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .approval-action-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
  }

  .back-action,
  .approval-action-group > button {
    width: 100%;
    min-width: 0;
  }
}
