/* Mobile layout: show complete values, never clip financial information. */
@media screen and (max-width: 760px) {
  .workspace, main, #content, .card, .metric, .account-summary,
  .staff-metrics article, .staff-leaders article, .payroll-person,
  .payroll-person-numbers > div, .payroll-stats article,
  .order-main, .order-summary, .grid > *, .filter > * { min-width: 0; }
  #content .card, #content article, #content section { max-width: 100%; }
  #content :is(h2,h3,p,label,small,strong,span) { overflow-wrap: anywhere; }
  #content :is(input,select,textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
  #content button { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .account-summary { text-align: left; padding: 20px; }
  .account-summary strong, .metric strong, .staff-leader-amount,
  .payroll-person-numbers strong, .payroll-stats strong {
    display: block; max-width: 100%; white-space: normal;
    overflow-wrap: anywhere; font-variant-numeric: tabular-nums; line-height: 1.3;
  }
  .account-summary strong { font-size: clamp(22px, 5.8vw, 28px); letter-spacing: -.5px; }
  .account-tabs { flex-wrap: wrap; }
  .panel-heading, .rank-row > div, .legend span, .actions { flex-wrap: wrap; }
  .rank-row strong, .legend b { max-width: 100%; overflow-wrap: anywhere; }
  .payroll-person-numbers { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mobile-bottom button { min-width: 0; flex: 1 1 0; padding-left: 4px; padding-right: 4px; }
  .mobile-bottom button span { white-space: normal; overflow-wrap: anywhere; }
}
@media screen and (max-width: 600px) {
  #accountRows .metrics { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #accountRows .account-summary { margin: 0; }
  .account-summary strong { margin: 12px 0; }
  .staff-hero-summary > strong, .metric strong { font-size: clamp(22px,6vw,28px); }
}
@media screen and (max-width: 480px) {
  #content .metrics, .staff-metrics, .payroll-person-numbers { grid-template-columns: minmax(0,1fr); }
  .staff-metrics article:nth-child(n+3) { grid-column: auto; }
  .filter, .overview-filters { flex-wrap: wrap; }
  .filter label, .overview-filters label { min-width: 0; max-width: 100%; }
  .payroll-formula { flex-wrap: wrap; }
}