Fix responsive UI: mobile nav, fluid typography, pay-label & calendar overflow

- Mobile nav was display:none (no navigation on phones) → now a scrollable strip on a second header row
- Fluid typography via clamp() for hero/page/section headings + spacing
- Long pay/choice labels (… یا … به انتخاب شما) now wrap in card footers instead of overflowing
- Calendar table scrolls horizontally on small screens (cal-wrap + min-width)
- Filter sidebar non-sticky/full-width on mobile; tighter small-screen padding & buttons

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/JobsMedical.Web/Pages/Calendar/Index.cshtml

@@ -34,6 +34,7 @@
            asp-route-FacilityId="@Model.FacilityId" asp-route-WeekOffset="@(Model.WeekOffset + 1)">هفته بعد ←</a>
     </div>
 
+    <div class="cal-wrap">
     <table class="cal">
         <thead>
             <tr>
@@ -70,3 +71,4 @@
         </tbody>
     </table>
     </div>
+</div>

src/JobsMedical.Web/wwwroot/css/site.css

@@ -82,10 +82,10 @@ a { color: inherit; text-decoration: none; }
 /* ---------- Hero ---------- */
 .hero {
   background: linear-gradient(135deg, #0e8f8a 0%, #0a6f6b 100%);
-  color: #fff; padding: 64px 0 80px; text-align: center;
+  color: #fff; padding: clamp(40px, 8vw, 64px) 0 clamp(48px, 9vw, 80px); text-align: center;
 }
-.hero h1 { font-size: 34px; font-weight: 900; margin: 0 0 14px; line-height: 1.4; }
-.hero p { font-size: 17px; opacity: .92; max-width: 620px; margin: 0 auto 30px; }
+.hero h1 { font-size: clamp(23px, 5.5vw, 34px); font-weight: 900; margin: 0 0 14px; line-height: 1.45; }
+.hero p { font-size: clamp(15px, 3.2vw, 17px); opacity: .92; max-width: 620px; margin: 0 auto 30px; }
 
 /* search box on hero */
 .search-card {
@@ -108,7 +108,7 @@ label { font-size: 13px; }
 /* ---------- Sections / grid ---------- */
 .section { padding: 48px 0; }
 .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
-.section-head h2 { font-size: 23px; font-weight: 800; margin: 0; }
+.section-head h2 { font-size: clamp(19px, 4.2vw, 23px); font-weight: 800; margin: 0; }
 .section-head a { color: var(--primary); font-weight: 700; font-size: 14px; }
 
 .grid { display: grid; gap: 16px; }
@@ -124,10 +124,11 @@ label { font-size: 13px; }
 
 .shift-card { display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s; }
 .shift-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
-.shift-card .facility { font-weight: 800; font-size: 16px; }
-.shift-card .row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
-.shift-card .pay { font-weight: 800; color: var(--primary-dark); font-size: 15px; }
-.shift-card .foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
+.shift-card .facility { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
+.shift-card .row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--muted); font-size: 13.5px; }
+.shift-card .pay { font-weight: 800; color: var(--primary-dark); font-size: 14px; overflow-wrap: anywhere; }
+.shift-card .foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
+.shift-card .foot .pay { flex: 1; min-width: 0; }
 
 /* ---------- Badges / chips ---------- */
 .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
@@ -148,7 +149,8 @@ label { font-size: 13px; }
 .filter-group > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
 
 /* ---------- Calendar ---------- */
-.cal { width: 100%; border-collapse: separate; border-spacing: 8px; }
+.cal-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.cal { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 8px; }
 .cal th { font-size: 13px; color: var(--muted); font-weight: 700; padding-bottom: 6px; }
 .cal td {
   vertical-align: top; background: var(--surface); border: 1px solid var(--line);
@@ -168,8 +170,8 @@ label { font-size: 13px; }
 .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
 
 /* ---------- Misc ---------- */
-.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 28px 0; }
-.page-head h1 { margin: 0; font-size: 26px; }
+.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: clamp(20px, 5vw, 28px) 0; }
+.page-head h1 { margin: 0; font-size: clamp(20px, 4.6vw, 26px); line-height: 1.4; }
 .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
 .detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
 .info-row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
@@ -201,10 +203,28 @@ label { font-size: 13px; }
   .search-card { grid-template-columns: 1fr 1fr; }
   .layout-2 { grid-template-columns: 1fr; }
   .detail-grid { grid-template-columns: 1fr; }
-  .main-nav { display: none; }
+  .filter-card { position: static; }
+
+  /* Header wraps to two rows; nav becomes a scrollable strip (NOT hidden). */
+  .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px 16px; }
+  .main-nav {
+    order: 3; flex: 1 0 100%; margin-inline-start: 0; gap: 18px;
+    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
+  }
+  .main-nav a { white-space: nowrap; font-size: 14px; }
+  .header-actions { margin-inline-start: auto; }
+  .header-actions a { font-size: 14px; }
+
   .cal { border-spacing: 4px; }
   .cal td { height: auto; min-height: 80px; padding: 6px; }
 }
 @media (max-width: 520px) {
+  .container { padding: 0 14px; }
   .grid-3, .grid-4, .search-card { grid-template-columns: 1fr; }
+  .section { padding: 32px 0; }
+  .btn-lg { padding: 12px 20px; font-size: 15px; }
+  .stat-pill { padding: 10px 16px; }
+  .stat-pill .n { font-size: 20px; }
+  /* Tighten in-card action rows so buttons don't overflow */
+  .rec-banner { padding: 16px; }
 }