[UI] Responsive hamburger nav for mobile

- _Layout: wrap nav + actions in .nav-collapse; add CSS-only burger
  (checkbox toggle) + always-visible mobile bell next to it
- site.css: desktop layout unchanged; <=860px collapses nav into a
  full-width dropdown (column links, stacked actions), animated open
- Login (ورود) + logout render as full-width buttons in the menu
  instead of overflowing the header row

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

src/JobsMedical.Web/Pages/Shared/_Layout.cshtml

@@ -36,36 +36,50 @@
                 <span class="brand-mark">ه</span>
                 <span class="brand-text">همکادر</span>
             </a>
-            <nav class="main-nav">
+
-                <a asp-page="/Index">خانه</a>
+            @* Always-visible bell on mobile (next to the burger) so notifications stay one tap away *@
-                <a asp-page="/Shifts/Index">شیفت‌ها</a>
+            @if (User.Identity?.IsAuthenticated == true)
-                <a asp-page="/Jobs/Index">استخدام</a>
+            {
-                <a asp-page="/Calendar/Index">تقویم هفتگی</a>
+                <a class="bell-mobile" asp-page="/Me/Notifications" title="اعلان‌ها">🔔@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
-                <a asp-page="/Download">دریافت اپ</a>
+            }
-                <a asp-page="/Facilities/Index">مراکز درمانی</a>
+
-                <a asp-page="/Preferences/Index">علاقه‌مندی‌ها</a>
+            <input type="checkbox" id="nav-toggle" class="nav-toggle" hidden />
-            </nav>
+            <label for="nav-toggle" class="nav-burger" aria-label="باز/بستن منو">
-            <div class="header-actions">
+                <span></span><span></span><span></span>
-                @if (User.Identity?.IsAuthenticated == true)
+            </label>
-                {
+
-                    @if (User.IsInRole("Admin"))
+            <div class="nav-collapse">
+                <nav class="main-nav">
+                    <a asp-page="/Index">خانه</a>
+                    <a asp-page="/Shifts/Index">شیفت‌ها</a>
+                    <a asp-page="/Jobs/Index">استخدام</a>
+                    <a asp-page="/Calendar/Index">تقویم هفتگی</a>
+                    <a asp-page="/Download">دریافت اپ</a>
+                    <a asp-page="/Facilities/Index">مراکز درمانی</a>
+                    <a asp-page="/Preferences/Index">علاقه‌مندی‌ها</a>
+                </nav>
+                <div class="header-actions">
+                    @if (User.Identity?.IsAuthenticated == true)
                     {
-                        <a asp-page="/Admin/Overview" style="margin-inline-end:14px; font-weight:600;">پنل مدیریت</a>
+                        @if (User.IsInRole("Admin"))
+                        {
+                            <a class="nav-action" asp-page="/Admin/Overview">پنل مدیریت</a>
+                        }
+                        @if (User.IsInRole("FacilityAdmin"))
+                        {
+                            <a class="nav-action" asp-page="/Employer/Index">پنل کارفرما</a>
+                        }
+                        <a class="nav-action bell-inline" asp-page="/Me/Notifications" title="اعلان‌ها">🔔 اعلان‌ها@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
+                        <a class="nav-action" asp-page="/Me/Index">پنل کارجو</a>
+                        <form method="post" asp-page="/Account/Logout" style="display:contents;">
+                            <button type="submit" class="btn btn-outline btn-sm">خروج</button>
+                        </form>
                     }
-                    @if (User.IsInRole("FacilityAdmin"))
+                    else
                     {
-                        <a asp-page="/Employer/Index" style="margin-inline-end:14px; font-weight:600;">پنل کارفرما</a>
+                        <a class="btn btn-outline btn-sm" asp-page="/Account/Login">ورود</a>
                     }
-                    <a asp-page="/Me/Notifications" title="اعلان‌ها" style="margin-inline-end:12px; position:relative; font-size:18px;">🔔@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
+                </div>
-                    <a asp-page="/Me/Index" style="margin-inline-end:10px; font-weight:600;">پنل کارجو</a>
-                    <form method="post" asp-page="/Account/Logout" style="display:inline;">
-                        <button type="submit" class="btn btn-outline" style="padding:7px 14px;">خروج</button>
-                    </form>
-                }
-                else
-                {
-                    <a class="btn btn-outline" asp-page="/Account/Login">ورود</a>
-                }
             </div>
         </div>
     </header>

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

@@ -52,17 +52,37 @@ a { color: inherit; text-decoration: none; }
   position: sticky; top: 0; z-index: 50;
 }
 .header-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
-.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; }
+.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; flex: 0 0 auto; }
 .brand-mark {
   display: inline-grid; place-items: center;
   width: 30px; height: 30px; border-radius: 9px;
   background: var(--primary); color: #fff; font-weight: 900; font-size: 22px;
 }
 .brand-mark.sm { width: 24px; height: 24px; font-size: 17px; border-radius: 7px; }
+
+/* nav + actions share a flex wrapper so the desktop layout is unchanged
+   and the whole thing can collapse into a dropdown on mobile. */
+.nav-collapse { display: flex; align-items: center; gap: 28px; flex: 1; }
 .main-nav { display: flex; gap: 22px; margin-inline-start: 8px; flex: 1; }
 .main-nav a { color: var(--muted); font-weight: 600; transition: color .15s; }
 .main-nav a:hover { color: var(--primary); }
-.header-actions { margin-inline-start: auto; }
+.header-actions { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
+.nav-action { font-weight: 600; color: var(--muted); transition: color .15s; }
+.nav-action:hover { color: var(--primary); }
+.btn-sm { padding: 7px 14px; font-size: 13px; }
+
+/* Hamburger + mobile-only bell — hidden on desktop */
+.nav-burger, .bell-mobile { display: none; }
+.nav-burger {
+  margin-inline-start: auto; flex-direction: column; justify-content: center; gap: 5px;
+  width: 42px; height: 42px; padding: 9px; border-radius: 10px; cursor: pointer;
+  border: 1px solid var(--line); background: var(--surface);
+}
+.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
+.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
+.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
+.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
+.bell-mobile { position: relative; font-size: 20px; margin-inline-start: auto; line-height: 1; }
 
 /* ---------- Buttons ---------- */
 .btn {
@@ -234,15 +254,33 @@ label { font-size: 13px; }
   .detail-grid { grid-template-columns: 1fr; }
   .filter-card { position: static; }
 
-  /* Header wraps to two rows; nav becomes a scrollable strip (NOT hidden). */
+  /* Header: brand + bell + hamburger on one row; menu drops down below. */
-  .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px 16px; }
+  .header-inner { height: 60px; gap: 10px; }
-  .main-nav {
+  .nav-burger { display: flex; }
-    order: 3; flex: 1 0 100%; margin-inline-start: 0; gap: 18px;
+  .bell-mobile { display: inline-flex; align-items: center; }
-    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
+
+  /* Collapsed dropdown panel — hidden until the burger is toggled. */
+  .nav-collapse {
+    position: absolute; inset-inline: 0; top: 100%;
+    flex-direction: column; align-items: stretch; gap: 0;
+    background: var(--surface); border-bottom: 1px solid var(--line);
+    box-shadow: 0 12px 24px rgba(0,0,0,.08);
+    max-height: 0; overflow: hidden; visibility: hidden;
+    transition: max-height .25s ease, visibility .25s;
   }
-  .main-nav a { white-space: nowrap; font-size: 14px; }
+  .nav-toggle:checked ~ .nav-collapse { max-height: 80vh; overflow-y: auto; visibility: visible; }
-  .header-actions { margin-inline-start: auto; }
+
-  .header-actions a { font-size: 14px; }
+  .main-nav { flex-direction: column; gap: 0; margin: 0; flex: none; padding: 6px 0; }
+  .main-nav a { padding: 13px 20px; font-size: 15px; border-bottom: 1px solid var(--line); }
+  .main-nav a:last-child { border-bottom: none; }
+
+  .header-actions {
+    flex-direction: column; align-items: stretch; gap: 0;
+    margin: 0; padding: 8px 14px 16px; border-top: 1px solid var(--line);
+  }
+  .nav-action { padding: 12px 6px; font-size: 15px; }
+  .bell-inline { display: flex; align-items: center; gap: 6px; }
+  .header-actions .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 6px; }
 
   .cal { border-spacing: 4px; }
   .cal td { height: auto; min-height: 80px; padding: 6px; }