[Profile] Editable profile (avatar + resume) + role-based profile dropdown menu

Every user gets a full editable profile at /Me/Profile: name, role, city, specialty/title, license, years, bio + avatar image upload + resume upload (PDF/image). Avatar/resume stored in-DB on User (migration, 5 nullable columns). Endpoints: /avatar/{id} (public) and /resume/{id} (owner, admin, or an employer who received that user's application). Nav: replaced the scattered action links with an avatar button + dropdown listing all of the user's pages by role (profile, کارجو panel, alerts, preferences, notifications; employer panel; admin panel + settings; logout) — shows the avatar image or initials; collapses into the burger menu on mobile; closes on outside-click.

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

src/JobsMedical.Web/Migrations/20260604181750_UserProfileMedia.cs

@@ -0,0 +1,71 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace JobsMedical.Web.Migrations
+{
+    /// <inheritdoc />
+    public partial class UserProfileMedia : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<byte[]>(
+                name: "Avatar",
+                table: "Users",
+                type: "bytea",
+                nullable: true);
+
+            migrationBuilder.AddColumn<string>(
+                name: "AvatarContentType",
+                table: "Users",
+                type: "character varying(100)",
+                maxLength: 100,
+                nullable: true);
+
+            migrationBuilder.AddColumn<byte[]>(
+                name: "Resume",
+                table: "Users",
+                type: "bytea",
+                nullable: true);
+
+            migrationBuilder.AddColumn<string>(
+                name: "ResumeContentType",
+                table: "Users",
+                type: "character varying(120)",
+                maxLength: 120,
+                nullable: true);
+
+            migrationBuilder.AddColumn<string>(
+                name: "ResumeFileName",
+                table: "Users",
+                type: "character varying(200)",
+                maxLength: 200,
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "Avatar",
+                table: "Users");
+
+            migrationBuilder.DropColumn(
+                name: "AvatarContentType",
+                table: "Users");
+
+            migrationBuilder.DropColumn(
+                name: "Resume",
+                table: "Users");
+
+            migrationBuilder.DropColumn(
+                name: "ResumeContentType",
+                table: "Users");
+
+            migrationBuilder.DropColumn(
+                name: "ResumeFileName",
+                table: "Users");
+        }
+    }
+}

src/JobsMedical.Web/Migrations/AppDbContextModelSnapshot.cs

@@ -817,6 +817,13 @@ namespace JobsMedical.Web.Migrations
 
                     NpgsqlPropertyBuilderExtensions.UseIdentityByDefaultColumn(b.Property<int>("Id"));
 
+                    b.Property<byte[]>("Avatar")
+                        .HasColumnType("bytea");
+
+                    b.Property<string>("AvatarContentType")
+                        .HasMaxLength(100)
+                        .HasColumnType("character varying(100)");
+
                     b.Property<string>("BanReason")
                         .HasMaxLength(300)
                         .HasColumnType("character varying(300)");
@@ -839,6 +846,17 @@ namespace JobsMedical.Web.Migrations
                         .HasMaxLength(20)
                         .HasColumnType("character varying(20)");
 
+                    b.Property<byte[]>("Resume")
+                        .HasColumnType("bytea");
+
+                    b.Property<string>("ResumeContentType")
+                        .HasMaxLength(120)
+                        .HasColumnType("character varying(120)");
+
+                    b.Property<string>("ResumeFileName")
+                        .HasMaxLength(200)
+                        .HasColumnType("character varying(200)");
+
                     b.Property<int>("Role")
                         .HasColumnType("integer");
 

src/JobsMedical.Web/Models/User.cs

@@ -26,6 +26,13 @@ public class User
 
     public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
 
+    // --- Profile media (editable at /Me/Profile; stored in-DB so it survives deploys) ---
+    public byte[]? Avatar { get; set; }
+    [MaxLength(100)] public string? AvatarContentType { get; set; }
+    public byte[]? Resume { get; set; }
+    [MaxLength(200)] public string? ResumeFileName { get; set; }
+    [MaxLength(120)] public string? ResumeContentType { get; set; }
+
     // Navigation
     public DoctorProfile? DoctorProfile { get; set; }
     public ICollection<Application> Applications { get; set; } = new List<Application>();

src/JobsMedical.Web/Pages/Me/Profile.cshtml

@@ -0,0 +1,98 @@
+@page
+@model JobsMedical.Web.Pages.Me.ProfileModel
+@{
+    ViewData["Title"] = "پروفایل من";
+}
+
+<div class="page-head">
+    <div class="container">
+        <h1>پروفایل من</h1>
+        <p class="muted"><a asp-page="/Me/Index">← پنل کارجو</a></p>
+    </div>
+</div>
+
+<div class="container section" style="max-width:680px;">
+    @if (Model.Msg is not null) { <div class="alert alert-success">@Model.Msg</div> }
+
+    <form method="post" enctype="multipart/form-data" class="card card-pad">
+        <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:14px;">
+            <div class="avatar-lg">
+                @if (Model.HasAvatar)
+                {
+                    <img src="/avatar/@User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)!.Value" alt="avatar" />
+                }
+                else
+                {
+                    <span>@((Model.FullName ?? Model.Phone).Trim().Substring(0,1))</span>
+                }
+            </div>
+            <div style="flex:1; min-width:200px;">
+                <label>تصویر پروفایل</label>
+                <input type="file" name="avatar" accept="image/jpeg,image/png,image/webp" />
+                <p class="muted" style="font-size:12px; margin:4px 0 0;">JPG/PNG/WebP، حداکثر ۲ مگابایت.</p>
+                @if (Model.HasAvatar)
+                {
+                    <button type="submit" asp-page-handler="DeleteAvatar" class="btn btn-outline" style="padding:3px 10px; font-size:12px; margin-top:6px;">حذف تصویر</button>
+                }
+            </div>
+        </div>
+
+        <div class="filter-group">
+            <label>نام و نام خانوادگی</label>
+            <input type="text" name="FullName" value="@Model.FullName" placeholder="مثلاً دکتر زهرا احمدی" />
+        </div>
+        <div class="filter-group">
+            <label>شماره موبایل</label>
+            <input type="text" value="@JalaliDate.ToPersianDigits(Model.Phone)" dir="ltr" disabled />
+        </div>
+        <div style="display:flex; gap:8px; flex-wrap:wrap;">
+            <div class="filter-group" style="flex:1; min-width:160px;">
+                <label>نقش</label>
+                <select name="RoleId">
+                    <option value="">انتخاب نشده</option>
+                    @foreach (var r in Model.Roles) { <option value="@r.Id" selected="@(Model.RoleId == r.Id)">@r.Name</option> }
+                </select>
+            </div>
+            <div class="filter-group" style="flex:1; min-width:160px;">
+                <label>شهر</label>
+                <select name="CityId">
+                    <option value="">انتخاب نشده</option>
+                    @foreach (var c in Model.Cities) { <option value="@c.Id" selected="@(Model.CityId == c.Id)">@c.Name</option> }
+                </select>
+            </div>
+        </div>
+        <div style="display:flex; gap:8px; flex-wrap:wrap;">
+            <div class="filter-group" style="flex:1; min-width:160px;">
+                <label>تخصص / سمت</label>
+                <input type="text" name="Specialty" value="@Model.Specialty" placeholder="مثلاً پرستار ICU" />
+            </div>
+            <div class="filter-group" style="flex:1; min-width:120px;">
+                <label>سابقه (سال)</label>
+                <input type="number" name="YearsExperience" min="0" max="70" value="@Model.YearsExperience" dir="ltr" />
+            </div>
+        </div>
+        <div class="filter-group">
+            <label>شماره نظام پزشکی/پرستاری (اختیاری)</label>
+            <input type="text" name="LicenseNo" value="@Model.LicenseNo" dir="ltr" />
+        </div>
+        <div class="filter-group">
+            <label>درباره من</label>
+            <textarea name="Bio" rows="4" placeholder="معرفی کوتاه، مهارت‌ها و سابقه...">@Model.Bio</textarea>
+        </div>
+
+        <div class="filter-group">
+            <label>رزومه (رزومه شغلی)</label>
+            @if (Model.ResumeName is not null)
+            {
+                <p style="margin:0 0 6px;">
+                    <a href="/resume/@User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)!.Value" target="_blank">📎 @Model.ResumeName</a>
+                    <button type="submit" asp-page-handler="DeleteResume" class="btn btn-outline" style="padding:3px 10px; font-size:12px; margin-inline-start:8px; color:var(--danger); border-color:var(--danger);">حذف</button>
+                </p>
+            }
+            <input type="file" name="resume" accept="image/jpeg,image/png,image/webp,application/pdf" />
+            <p class="muted" style="font-size:12px; margin:4px 0 0;">PDF یا تصویر، حداکثر ۵ مگابایت. مراکز درمانی هنگام بررسی درخواست شما می‌توانند آن را ببینند.</p>
+        </div>
+
+        <button type="submit" class="btn btn-accent btn-block btn-lg">ذخیره پروفایل</button>
+    </form>
+</div>

src/JobsMedical.Web/Pages/Me/Profile.cshtml.cs

@@ -0,0 +1,123 @@
+using System.Security.Claims;
+using JobsMedical.Web.Data;
+using JobsMedical.Web.Models;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.EntityFrameworkCore;
+
+namespace JobsMedical.Web.Pages.Me;
+
+[Authorize]
+public class ProfileModel : PageModel
+{
+    private readonly AppDbContext _db;
+    public ProfileModel(AppDbContext db) => _db = db;
+
+    public List<Role> Roles { get; private set; } = new();
+    public List<City> Cities { get; private set; } = new();
+    public bool HasAvatar { get; private set; }
+    public string? ResumeName { get; private set; }
+    public string Phone { get; private set; } = "";
+    [TempData] public string? Msg { get; set; }
+
+    [BindProperty] public string? FullName { get; set; }
+    [BindProperty] public int? RoleId { get; set; }
+    [BindProperty] public int? CityId { get; set; }
+    [BindProperty] public string? Specialty { get; set; }
+    [BindProperty] public string? LicenseNo { get; set; }
+    [BindProperty] public int YearsExperience { get; set; }
+    [BindProperty] public string? Bio { get; set; }
+
+    private int Uid => int.Parse(User.FindFirstValue(ClaimTypes.NameIdentifier)!);
+    private static readonly string[] ImgTypes = { "image/jpeg", "image/png", "image/webp" };
+    private static readonly string[] DocTypes = { "image/jpeg", "image/png", "image/webp", "application/pdf" };
+    private const long MaxImg = 2 * 1024 * 1024;   // 2 MB
+    private const long MaxDoc = 5 * 1024 * 1024;   // 5 MB
+
+    public async Task OnGetAsync()
+    {
+        await LoadListsAsync();
+        var u = await _db.Users.Include(x => x.DoctorProfile).FirstAsync(x => x.Id == Uid);
+        Phone = u.Phone;
+        FullName = u.FullName;
+        HasAvatar = u.Avatar != null;
+        ResumeName = u.ResumeFileName;
+        var p = u.DoctorProfile;
+        RoleId = p?.RoleId;
+        CityId = p?.CityId;
+        Specialty = p?.Specialty;
+        LicenseNo = p?.LicenseNo;
+        YearsExperience = p?.YearsExperience ?? 0;
+        Bio = p?.Bio;
+    }
+
+    public async Task<IActionResult> OnPostAsync(IFormFile? avatar, IFormFile? resume)
+    {
+        var u = await _db.Users.Include(x => x.DoctorProfile).FirstAsync(x => x.Id == Uid);
+
+        u.FullName = string.IsNullOrWhiteSpace(FullName) ? null : FullName.Trim();
+        var p = u.DoctorProfile ??= new DoctorProfile { UserId = Uid };
+        p.RoleId = RoleId;
+        p.CityId = CityId;
+        p.Specialty = string.IsNullOrWhiteSpace(Specialty) ? "پزشک عمومی" : Specialty.Trim();
+        p.LicenseNo = LicenseNo?.Trim();
+        p.YearsExperience = Math.Clamp(YearsExperience, 0, 70);
+        p.Bio = Bio?.Trim();
+
+        string? warn = null;
+        if (avatar is { Length: > 0 })
+        {
+            if (avatar.Length > MaxImg || !ImgTypes.Contains((avatar.ContentType ?? "").ToLowerInvariant()))
+                warn = "تصویر باید JPG/PNG/WebP و کمتر از ۲ مگابایت باشد.";
+            else
+            {
+                using var ms = new MemoryStream();
+                await avatar.CopyToAsync(ms);
+                u.Avatar = ms.ToArray();
+                u.AvatarContentType = avatar.ContentType!.ToLowerInvariant();
+            }
+        }
+        if (resume is { Length: > 0 })
+        {
+            if (resume.Length > MaxDoc || !DocTypes.Contains((resume.ContentType ?? "").ToLowerInvariant()))
+                warn = (warn is null ? "" : warn + " ") + "رزومه باید PDF یا تصویر و کمتر از ۵ مگابایت باشد.";
+            else
+            {
+                using var ms = new MemoryStream();
+                await resume.CopyToAsync(ms);
+                u.Resume = ms.ToArray();
+                u.ResumeContentType = resume.ContentType!.ToLowerInvariant();
+                u.ResumeFileName = Path.GetFileName(resume.FileName);
+            }
+        }
+
+        await _db.SaveChangesAsync();
+        Msg = warn ?? "پروفایل ذخیره شد.";
+        return RedirectToPage();
+    }
+
+    public async Task<IActionResult> OnPostDeleteResumeAsync()
+    {
+        var u = await _db.Users.FirstAsync(x => x.Id == Uid);
+        u.Resume = null; u.ResumeFileName = null; u.ResumeContentType = null;
+        await _db.SaveChangesAsync();
+        Msg = "رزومه حذف شد.";
+        return RedirectToPage();
+    }
+
+    public async Task<IActionResult> OnPostDeleteAvatarAsync()
+    {
+        var u = await _db.Users.FirstAsync(x => x.Id == Uid);
+        u.Avatar = null; u.AvatarContentType = null;
+        await _db.SaveChangesAsync();
+        Msg = "تصویر حذف شد.";
+        return RedirectToPage();
+    }
+
+    private async Task LoadListsAsync()
+    {
+        Roles = await _db.Roles.Where(r => r.IsActive).OrderBy(r => r.SortOrder).ToListAsync();
+        Cities = await _db.Cities.Where(c => c.IsActive).OrderBy(c => c.Name).ToListAsync();
+    }
+}

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

@@ -1,12 +1,22 @@
 @using System.Security.Claims
+@using Microsoft.EntityFrameworkCore
 @inject JobsMedical.Web.Services.NotificationService Notifications
+@inject JobsMedical.Web.Data.AppDbContext Db
 @{
     var title = ViewData["Title"] as string;
     int unreadCount = 0;
-    if (User.Identity?.IsAuthenticated == true && int.TryParse(User.FindFirstValue(ClaimTypes.NameIdentifier), out var _uid))
+    int meId = 0;
+    string? meName = null;
+    bool meHasAvatar = false;
+    if (User.Identity?.IsAuthenticated == true && int.TryParse(User.FindFirstValue(ClaimTypes.NameIdentifier), out meId))
     {
-        unreadCount = await Notifications.UnreadCountAsync(_uid);
+        unreadCount = await Notifications.UnreadCountAsync(meId);
+        var info = await Db.Users.Where(u => u.Id == meId)
+            .Select(u => new { u.FullName, u.Phone, HasAvatar = u.Avatar != null }).FirstOrDefaultAsync();
+        meName = string.IsNullOrWhiteSpace(info?.FullName) ? info?.Phone : info!.FullName;
+        meHasAvatar = info?.HasAvatar ?? false;
     }
+    var meInitial = string.IsNullOrWhiteSpace(meName) ? "؟" : meName!.Trim().Substring(0, 1);
 }
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
@@ -62,20 +72,44 @@
                 <div class="header-actions">
                     @if (User.Identity?.IsAuthenticated == true)
                     {
-                        @if (User.IsInRole("Admin"))
-                        {
-                            <a class="nav-action" asp-page="/Admin/Overview">پنل مدیریت</a>
-                            <a class="nav-action" asp-page="/Admin/Settings">تنظیمات</a>
-                        }
-                        @if (User.IsInRole("FacilityAdmin"))
-                        {
-                            <a class="nav-action" asp-page="/Employer/Index">پنل کارفرما</a>
-                        }
                         <a class="nav-action bell-inline js-bell" asp-page="/Me/Notifications" title="اعلان‌ها" data-tour="bell"><span class="bell-ico">🔔</span><span class="bell-label">اعلان‌ها</span>@if (unreadCount > 0) {<span class="bell-badge">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
-                        <a class="nav-action" asp-page="/Me/Index" data-tour="panel">پنل کارجو</a>
-                        <form method="post" asp-page="/Account/Logout" style="display:contents;">
-                            <button type="submit" class="btn btn-outline btn-sm">خروج</button>
-                        </form>
+
+                        <div class="profile-menu">
+                            <input type="checkbox" id="profile-toggle" class="profile-toggle" hidden />
+                            <label for="profile-toggle" class="avatar-btn" data-tour="profile" aria-label="منوی کاربر">
+                                @if (meHasAvatar)
+                                {
+                                    <img class="avatar-img" src="/avatar/@meId" alt="پروفایل" />
+                                }
+                                else
+                                {
+                                    <span class="avatar-fallback">@meInitial</span>
+                                }
+                                <span class="avatar-caret">▾</span>
+                            </label>
+                            <nav class="profile-dropdown">
+                                <div class="pd-head">@meName</div>
+                                <a asp-page="/Me/Profile">👤 ویرایش پروفایل</a>
+                                <a asp-page="/Me/Index" data-tour="panel">🗂️ پنل کارجو</a>
+                                <a asp-page="/Me/Alerts">🔎 هشدارهای شغلی</a>
+                                <a asp-page="/Preferences/Index">⭐ علاقه‌مندی‌ها</a>
+                                <a asp-page="/Me/Notifications">🔔 اعلان‌ها@if (unreadCount > 0) {<span class="bell-badge" style="position:static; margin-inline-start:6px;">@JalaliDate.ToPersianDigits(unreadCount > 99 ? "99+" : unreadCount.ToString())</span>}</a>
+                                @if (User.IsInRole("FacilityAdmin"))
+                                {
+                                    <a asp-page="/Employer/Index">🏥 پنل کارفرما</a>
+                                }
+                                @if (User.IsInRole("Admin"))
+                                {
+                                    <div class="pd-sep"></div>
+                                    <a asp-page="/Admin/Overview">🛠️ پنل مدیریت</a>
+                                    <a asp-page="/Admin/Settings">⚙️ تنظیمات</a>
+                                }
+                                <div class="pd-sep"></div>
+                                <form method="post" asp-page="/Account/Logout">
+                                    <button type="submit" class="pd-logout">🚪 خروج</button>
+                                </form>
+                            </nav>
+                        </div>
                     }
                     else
                     {
@@ -122,6 +156,14 @@
     @* Self-hosted guided app tour (no CDN). Auto-runs once for new visitors; re-runnable from /Help. *@
     <script src="~/js/tour.js" asp-append-version="true" defer></script>
 
+    @* Close the profile dropdown when clicking outside it. *@
+    <script>
+        document.addEventListener('click', function (e) {
+            var t = document.getElementById('profile-toggle');
+            if (t && t.checked && !e.target.closest('.profile-menu')) t.checked = false;
+        });
+    </script>
+
     @* Live in-app notifications over SSE (our own origin — works in Iran, no Google push).
        Updates the bell badge, shows a toast, and fires a local OS notification when allowed. *@
     @if (User.Identity?.IsAuthenticated == true)

src/JobsMedical.Web/Program.cs

@@ -221,6 +221,36 @@ app.MapGet("/facility-doc/{id:int}", async (int id, HttpContext ctx, AppDbContex
     return Results.File(doc.Data, doc.ContentType, doc.FileName);
 }).RequireAuthorization();
 
+// Profile avatar — public (low-sensitivity), cached. 404 when the user has none.
+app.MapGet("/avatar/{id:int}", async (int id, AppDbContext db) =>
+{
+    var u = await db.Users.Where(x => x.Id == id)
+        .Select(x => new { x.Avatar, x.AvatarContentType }).FirstOrDefaultAsync();
+    if (u?.Avatar is null) return Results.NotFound();
+    return Results.File(u.Avatar, u.AvatarContentType ?? "image/jpeg");
+});
+
+// Résumé — readable by the owner, an admin, or an employer who received this user's application.
+app.MapGet("/resume/{id:int}", async (int id, HttpContext ctx, AppDbContext db) =>
+{
+    var u = await db.Users.Where(x => x.Id == id)
+        .Select(x => new { x.Resume, x.ResumeContentType, x.ResumeFileName }).FirstOrDefaultAsync();
+    if (u?.Resume is null) return Results.NotFound();
+
+    var meId = int.TryParse(ctx.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value, out var n) ? n : (int?)null;
+    var allowed = ctx.User.IsInRole("Admin") || meId == id;
+    if (!allowed && meId is int viewer)
+    {
+        var vIds = await db.Visitors.Where(v => v.UserId == id).Select(v => v.Id).ToListAsync();
+        allowed = await db.InterestEvents.AnyAsync(e => e.EventType == InterestEventType.Apply
+            && vIds.Contains(e.VisitorId)
+            && ((e.Shift != null && e.Shift.Facility.OwnerUserId == viewer)
+                || (e.JobOpening != null && e.JobOpening.Facility.OwnerUserId == viewer)));
+    }
+    if (!allowed) return Results.Forbid();
+    return Results.File(u.Resume, u.ResumeContentType ?? "application/octet-stream", u.ResumeFileName ?? "resume");
+}).RequireAuthorization();
+
 // User-submitted report against a listing (abuse/fake/wrong info).
 app.MapPost("/report", async (HttpContext ctx, AppDbContext db, VisitorContext vc,
     [FromForm] string targetType, [FromForm] int targetId, [FromForm] string reason,

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

@@ -88,6 +88,35 @@ a { color: inherit; text-decoration: none; }
 .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; }
 
+/* ---------- Profile avatar + dropdown ---------- */
+.profile-menu { position: relative; }
+.avatar-btn { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
+.avatar-img, .avatar-fallback { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
+.avatar-fallback { background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; }
+.avatar-caret { color: var(--muted); font-size: 11px; }
+.profile-dropdown {
+  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 230px; z-index: 60;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
+  box-shadow: 0 16px 38px rgba(0,0,0,.16); padding: 6px; display: none;
+}
+.profile-toggle:checked ~ .profile-dropdown { display: block; animation: fadeIn .12s ease; }
+.profile-dropdown a, .pd-logout {
+  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
+  padding: 9px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; font-size: 14px;
+  background: none; border: none; cursor: pointer; font-family: inherit;
+}
+.profile-dropdown a:hover, .pd-logout:hover { background: var(--primary-soft); color: var(--primary-dark); }
+.profile-dropdown form { margin: 0; }
+.pd-head { padding: 8px 12px; font-weight: 800; color: var(--muted); font-size: 13px; }
+.pd-sep { height: 1px; background: var(--line); margin: 4px 0; }
+.pd-logout { color: var(--danger); }
+
+/* Large avatar on the profile editor page */
+.avatar-lg { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
+  background: var(--primary-soft); display: grid; place-items: center; }
+.avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
+.avatar-lg span { font-size: 34px; font-weight: 800; color: var(--primary-dark); }
+
 /* ---------- Live notification toasts (SSE) ---------- */
 .toast-host {
   position: fixed; inset-block-end: 16px; inset-inline-start: 16px; z-index: 200;
@@ -400,6 +429,14 @@ label { font-size: 13px; }
   .bell-inline .bell-label { display: inline; }
   .header-actions .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 6px; }
 
+  /* On mobile the avatar button is hidden and the menu items show stacked in the burger panel. */
+  .avatar-btn { display: none; }
+  .profile-menu { width: 100%; }
+  .profile-dropdown { position: static; display: block; box-shadow: none; border: none; padding: 0; min-width: 0; }
+  .profile-dropdown a, .pd-logout { padding: 12px 6px; font-size: 15px; }
+  .pd-head { display: none; }
+  .pd-sep { display: none; }
+
   .cal { border-spacing: 4px; }
   .cal td { height: auto; min-height: 80px; padding: 6px; }
 }