/* Mobile layout overrides. Loaded last so desktop styling stays unchanged. */
@media (max-width: 800px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  button, input, select, textarea { min-height: 44px; }
  button { touch-action: manipulation; }

  .shell { width: 100%; padding: 12px 12px 28px; }
  .top { align-items: center; gap: 10px; margin-bottom: 12px; }
  .brand { min-width: 0; gap: 8px; font-size: 16px; line-height: 1.25; }
  .brand > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logo { flex: 0 0 34px; }
  .top-actions { min-width: 0; gap: 6px; justify-content: flex-end; }
  .top-actions .small { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top-actions button { flex: 0 0 auto; min-height: 38px; padding: 7px 10px; font-size: 13px; }

  .customer-hero { padding: 19px 17px; border-radius: 15px; }
  .customer-hero h1 { max-width: 82%; margin: 2px 0 5px; font-size: 23px; line-height: 1.25; }
  .customer-hero p { max-width: 82%; font-size: 13px; line-height: 1.55; }
  .customer-hero::after { width: 145px; height: 145px; right: -58px; top: -52px; border-width: 22px; }
  .notice { margin: 10px 0 12px; padding: 9px 11px; line-height: 1.45; }

  .my-orders, .my-codes, .section, .cart { padding: 15px; border-radius: 15px; }
  .my-orders, .my-codes { margin-top: 12px; }
  .section-head { align-items: center; margin-bottom: 12px; }
  .section h2, .cart h2 { font-size: 18px; }
  .order-summary { align-items: flex-start; flex-direction: column; gap: 7px; padding: 12px 0; }
  .order-summary > div:first-child { width: 100%; min-width: 0; }
  .order-summary > div:first-child > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .progress { width: 100%; justify-content: space-between; gap: 4px; }
  .progress span { white-space: nowrap; }
  .progress i { flex: 1 1 12px; min-width: 8px; }

  .layout { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
  .tabs { margin: 0 -15px 10px; padding: 0 15px 8px; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; min-height: 38px; padding: 7px 12px; white-space: nowrap; }
  .menu-grid { grid-template-columns: 1fr; gap: 9px; }
  .dish { align-items: center; gap: 11px; min-width: 0; min-height: 96px; padding: 11px; }
  .dish-image { flex: 0 0 58px; width: 58px; min-width: 58px; height: 58px; font-size: 27px; }
  .dish > div:last-child { flex: 1 1 auto; min-width: 0; }
  .dish h3 { padding-right: 2px; font-size: 15px; line-height: 1.35; }
  .dish p { min-height: 0; margin: 2px 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dish .add { min-height: 36px; padding: 5px 11px; }

  .cart { position: static; }
  .cart-list { min-height: 62px; }
  .cart-item { align-items: center; }
  .cart-item > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .quantity { flex: 0 0 auto; }
  .quantity button { min-width: 34px; min-height: 34px; padding: 2px 8px; }
  .checkout { min-height: 48px; font-size: 16px; }

  .codes-grid { grid-template-columns: minmax(0, 1fr); }
  .mini-code { min-width: 0; padding: 13px; }
  .mini-code svg, .code-card svg { width: 100%; max-width: 100%; }
  .code-text { max-width: 100%; overflow-wrap: anywhere; word-break: break-all; letter-spacing: 1px; }

  .admin-grid { display: flex; flex-direction: column; gap: 12px; }
  .admin-nav { display: flex; margin: 0 -12px; padding: 7px 12px; border-width: 1px 0; border-radius: 0; overflow-x: auto; scrollbar-width: none; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button { flex: 0 0 auto; min-height: 38px; padding: 7px 11px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat { min-width: 0; padding: 12px; }
  .stat strong { font-size: 22px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar > * { width: 100%; }
  .table-wrap { margin-inline: -15px; padding-inline: 15px; }
  .orders th, .orders td { padding: 10px 8px; }

  dialog { max-width: calc(100vw - 18px); }
  .modal { max-height: calc(100dvh - 18px); padding: 17px; border-radius: 17px; }
  .modal-head { gap: 10px; }
  .modal-head button { flex: 0 0 auto; }
  .modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-actions button { width: 100%; min-width: 0; }
  .scan-frame { min-height: 230px; }
  .scan-frame video { height: min(58vh, 340px); }
}

@media (max-width: 430px) {
  .top { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; justify-content: space-between; }
  .top-actions .small { max-width: calc(100% - 92px); }
  .customer-hero h1, .customer-hero p { max-width: 88%; }
  .section-head .small { font-size: 12px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 350px) {
  .shell { padding-inline: 9px; }
  .dish-image { flex-basis: 50px; width: 50px; min-width: 50px; height: 50px; }
  .modal-actions { grid-template-columns: 1fr; }
}