feat: update session payment logic to ensure accurate payable amounts and reflect consumables in cost breakdown

- Adjusted the calculation of payable amounts in PaymentStep to align with server logic, ensuring overpayments are handled correctly.
- Enhanced DetailsStep to include consumables in the itemized cost breakdown, ensuring consistency with patient share calculations.
- Updated tests for SessionPaymentPage to validate new behavior regarding overpayments and consumable listings.
- Modified PatientController to register SessionPayment correctly when settling sessions via wallet, preventing double charges.
- Refactored WalletService to remove outdated methods and ensure wallet transactions reflect the correct amounts after discounts.
- Improved accessibility in SearchableSelect component by adding aria labels and ensuring proper role attributes for screen readers.
- Updated styles to ensure minimum touch targets meet WCAG guidelines for mobile usability.

assets/admin/styles.css

@@ -514,6 +514,12 @@ body {
 .muted  { color: var(--text-3); }
 .link   { color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none; }
 .link:hover { color: var(--primary-700); }
+/* هم‌راستا با .mini-btn: لینک‌های کوتاه («همه») روی موبایل باید ناحیه‌ی لمسی
+   حداقلی داشته باشند (WCAG 2.5.5). چون داخل .card-title-row فلکس‌اند، رشدِ
+   ارتفاع عنوان را جابه‌جا نمی‌کند. */
+@media (max-width: 640px), (pointer: coarse) {
+  .link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
+}
 .card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
 .flex   { display: flex; align-items: center; }
 .between { display: flex; align-items: center; justify-content: space-between; }
@@ -623,6 +629,13 @@ table.t tbody tr:last-child td { border-bottom: none; }
 }
 .mini-btn:hover { background: var(--surface-3); color: var(--text); }
 .mini-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
+/* دکمه‌های عملیات ردیف روی موبایل/لمسی باید حداقل ۴۴px باشند (WCAG 2.5.5).
+   هم بر اساس عرض (۶۴۰px، همان بریک‌پوینت موبایلِ پروژه) و هم pointer لمسی،
+   تا تبلت لمسیِ عریض هم پوشش داده شود. چگالی دسکتاپ دست‌نخورده می‌ماند. */
+@media (max-width: 640px), (pointer: coarse) {
+  .mini-btn { width: 44px; height: 44px; }
+  .row-actions { gap: 4px; }
+}
 
 /* ── Toolbar / Fields ────────────────────────────────────────── */
 .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
@@ -637,6 +650,10 @@ table.t tbody tr:last-child td { border-bottom: none; }
 .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
 .seg button { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: .14s; cursor: pointer; font-family: inherit; }
 .seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
+/* هم‌راستا با .mini-btn: ارتفاع لمسیِ حداقلی روی موبایل (WCAG 2.5.5) */
+@media (max-width: 640px), (pointer: coarse) {
+  .seg button { min-height: 44px; padding: 7px 16px; }
+}
 
 /* ── Switch toggle ───────────────────────────────────────────── */
 .switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }