[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/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-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;
+  /* Header: brand + bell + hamburger on one row; menu drops down below. */
+  .header-inner { height: 60px; gap: 10px; }
+  .nav-burger { display: flex; }
+  .bell-mobile { display: inline-flex; align-items: center; }
+
+  /* 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; }
-  .header-actions { margin-inline-start: auto; }
-  .header-actions a { font-size: 14px; }
+  .nav-toggle:checked ~ .nav-collapse { max-height: 80vh; overflow-y: auto; visibility: visible; }
+
+  .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; }