feat: implement preview work units preference with local storage support

feat: add theme mode support with AppThemeMode enum and AppThemeState service
- Introduced AppThemeMode enum to define theme options: System, Light, Dark. - Updated AppSettingsDocument to include ThemeMode property. - Created AppThemeState service to manage current theme mode and handle changes. - Integrated theme mode handling in CouchbaseLiteAppSettingsService for persistence. - Added JavaScript for theme management in the frontend, supporting system preference detection. - Enhanced CSS with theme variables for consistent styling across light and dark modes. - Updated Playwright tests to ensure sidebar functionality and responsiveness.
2026-04-20 23:17:35 +02:00 · 2026-04-20 22:58:25 +02:00 · 2026-04-20 21:43:15 +02:00
23 changed files with 1004 additions and 94 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,10 @@
 # Build outputs
 bin/
 obj/
+node_modules/
+test-results/
+playwright-report/
+blob-report/

 # User-specific files
 *.user
@ -27,6 +31,8 @@ Data/*.db-*
 *.sqlite3
 App_Data/
 .docker-data/
+probe-desktop.png
+probe-mobile.png

 # Secrets and environment files
 .env
--- a/Components/App.razor
+++ b/Components/App.razor
@ -5,6 +5,28 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
+    <script>
+        (function () {
+            try {
+                var storageKey = "worktracker.themeMode";
+                var mode = localStorage.getItem(storageKey) || "system";
+                if (mode !== "light" && mode !== "dark" && mode !== "system") {
+                    mode = "system";
+                }
+
+                var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+                var effectiveMode = mode === "system"
+                    ? (prefersDark ? "dark" : "light")
+                    : mode;
+
+                document.documentElement.setAttribute("data-bs-theme", effectiveMode);
+                document.documentElement.setAttribute("data-theme-mode", mode);
+                document.documentElement.style.colorScheme = effectiveMode;
+            }
+            catch {
+            }
+        })();
+    </script>
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["WorkTracker.styles.css"]" />
@ -15,6 +37,7 @@

 <body>
    <Routes @rendermode="InteractiveServer" />
+    <script src="@Assets["theme.js"]"></script>
    <script src="_framework/blazor.web.js"></script>
 </body>

--- a/Components/Layout/MainLayout.razor
+++ b/Components/Layout/MainLayout.razor
@ -1,24 +1,16 @@
@inherits LayoutComponentBase
+@implements IDisposable
+
+@inject AppThemeState ThemeState
+@inject IJSRuntime JS

 <div class="page @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
    <div class="sidebar @(sidebarCollapsed ? "sidebar-collapsed" : string.Empty)">
-        <NavMenu IsCollapsed="sidebarCollapsed" />
+        <NavMenu IsCollapsed="sidebarCollapsed" OnToggleSidebar="ToggleSidebar" />
    </div>

    <main>
        <div class="top-row px-4">
-            <button
-                type="button"
-                class="sidebar-toggle"
-                @onclick="ToggleSidebar"
-                aria-label="Toggle sidebar"
-                aria-controls="sidebar-navigation"
-                aria-expanded="@(sidebarCollapsed ? "false" : "true")"
-                title="Toggle sidebar">
-                <span class="sidebar-toggle-bar"></span>
-                <span class="sidebar-toggle-bar"></span>
-                <span class="sidebar-toggle-bar"></span>
-            </button>
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

@ -37,8 +29,39 @@
@code {
    private bool sidebarCollapsed = true;

+    protected override void OnInitialized()
+    {
+        ThemeState.ThemeModeChanged += HandleThemeModeChanged;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        var themeMode = await ThemeState.EnsureLoadedAsync();
+        await ApplyThemeAsync(themeMode);
+    }
+
    private void ToggleSidebar()
    {
        sidebarCollapsed = !sidebarCollapsed;
    }
+
+    private void HandleThemeModeChanged(AppThemeMode themeMode)
+    {
+        _ = InvokeAsync(() => ApplyThemeAsync(themeMode).AsTask());
+    }
+
+    private ValueTask ApplyThemeAsync(AppThemeMode themeMode)
+    {
+        return JS.InvokeVoidAsync("workTrackerTheme.setTheme", themeMode.ToString().ToLowerInvariant());
+    }
+
+    public void Dispose()
+    {
+        ThemeState.ThemeModeChanged -= HandleThemeModeChanged;
+    }
 }
--- a/Components/Layout/MainLayout.razor.css
+++ b/Components/Layout/MainLayout.razor.css
@ -14,8 +14,8 @@ main {
 }

 .top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
+    background-color: var(--wt-header-bg);
+    border-bottom: 1px solid var(--wt-header-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
@ -23,6 +23,7 @@ main {
 }

    .top-row ::deep a, .top-row ::deep .btn-link {
+        color: var(--wt-header-link);
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
@ -37,30 +38,9 @@ main {
        text-overflow: ellipsis;
    }

-.sidebar-toggle {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 0.2rem;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin-right: auto;
-    border: 1px solid #d6d5d5;
-    border-radius: 0.65rem;
-    background: #fff;
-}
-
-.sidebar-toggle-bar {
-    width: 1rem;
-    height: 2px;
-    background: #334155;
-    border-radius: 999px;
-}
-
@media (max-width: 640.98px) {
    .top-row {
-        justify-content: space-between;
+        justify-content: flex-end;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
@ -100,10 +80,6 @@ main {
        padding-right: 1.5rem !important;
    }

-    .sidebar-toggle {
-        display: inline-flex;
-    }
-
    .sidebar.sidebar-collapsed {
        width: 5rem;
    }
--- a/Components/Layout/NavMenu.razor
+++ b/Components/Layout/NavMenu.razor
@ -4,15 +4,29 @@

@code {
    [Parameter] public bool IsCollapsed { get; set; }
+    [Parameter] public EventCallback OnToggleSidebar { get; set; }
+
+    private Task ToggleSidebarAsync()
+    {
+        return OnToggleSidebar.InvokeAsync();
+    }
 }

 <div class="nav-menu-shell @(IsCollapsed ? "nav-menu-shell-collapsed" : string.Empty)" data-testid="sidebar-shell" data-collapsed="@(IsCollapsed ? "true" : "false")">
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="" aria-label="WorkTracker home">
-            <span class="sidebar-brand-full">WorkTracker</span>
-            <span class="sidebar-brand-compact" aria-hidden="true">WT</span>
-        </a>
+<div class="top-row ps-3 pe-3 navbar navbar-dark">
+    <div class="container-fluid nav-menu-header">
+        <button
+            type="button"
+            class="sidebar-toggle"
+            @onclick="ToggleSidebarAsync"
+            aria-label="Toggle sidebar"
+            aria-controls="sidebar-navigation"
+            aria-expanded="@(IsCollapsed ? "false" : "true")"
+            title="Toggle sidebar">
+            <span class="sidebar-toggle-bar"></span>
+            <span class="sidebar-toggle-bar"></span>
+            <span class="sidebar-toggle-bar"></span>
+        </button>
    </div>
 </div>

--- a/Components/Layout/NavMenu.razor.css
+++ b/Components/Layout/NavMenu.razor.css
@ -1,10 +1,19 @@
 .top-row {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+}
+
+.nav-menu-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 }

 .navbar-brand {
    font-size: 1.1rem;
+    margin-bottom: 0;
 }

 .sidebar-brand-compact {
@ -15,6 +24,32 @@
    height: 100%;
 }

+.sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 0.65rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    flex: 0 0 auto;
+}
+
+.sidebar-toggle:hover {
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.sidebar-toggle-bar {
+    width: 1rem;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+}
+
 .bi {
    display: inline-block;
    position: relative;
@ -122,19 +157,22 @@
        display: none;
    }

+    .nav-menu-shell-collapsed .nav-scrollable {
+        display: none;
+    }
+
+    .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable {
+        display: block;
+    }
+
    .nav-scrollable {
        height: auto;
    }
 }

@media (min-width: 641px) {
-    .nav-menu-shell-collapsed .top-row {
-        padding-left: 0.5rem !important;
-        padding-right: 0.5rem !important;
-    }
-
    .nav-menu-shell-collapsed .container-fluid {
-        justify-content: center;
+        justify-content: flex-start;
    }

    .nav-menu-shell-collapsed .sidebar-brand-full,
--- a/Components/Pages/CalendarView.razor
+++ b/Components/Pages/CalendarView.razor
@ -10,6 +10,7 @@

 <PageTitle>Calendar</PageTitle>

+<div class="calendar-page">
 <h1>Calendar</h1>

 <div class="d-flex align-items-center gap-2 mb-3">
@ -51,11 +52,11 @@ else
                        {
                            @if (cell is null)
                            {
-                                <td class="calendar-cell bg-light"></td>
+                                <td class="calendar-cell calendar-cell-empty"></td>
                            }
                            else
                            {
-                                <td class="calendar-cell @GetCellClass(cell) @(IsActiveCell(cell.Date) ? "calendar-cell-active" : string.Empty)" @onclick="() => TogglePopup(cell.Date)" role="button">
+                                <td class="calendar-cell @GetCellClass(cell) @(IsToday(cell.Date) ? "calendar-cell-today" : string.Empty) @(IsActiveCell(cell.Date) ? "calendar-cell-active" : string.Empty)" @onclick="() => TogglePopup(cell.Date)" role="button">
                                    <div class="calendar-day-number">@cell.Date.Day</div>

                                    @foreach (var workUnit in cell.Entry?.WorkUnits ?? [])
@ -193,10 +194,13 @@ else
        </div>
    }
 }
+</div>

@code {
    [Parameter] public string? YearMonth { get; set; }

+    private const string IncludePreviewPreferenceKey = "worktracker.includePreviewWorkUnits";
+
    private DateOnly firstOfMonth;
    private bool loading = true;
    private List<CalendarCell?[]> weeks = [];
@ -220,6 +224,22 @@ else
        await LoadMonth();
    }

+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        var savedIncludePreview = await JS.InvokeAsync<bool?>("workTrackerPreferences.getBool", IncludePreviewPreferenceKey);
+        if (savedIncludePreview.HasValue && savedIncludePreview.Value != includePreviewTotals)
+        {
+            includePreviewTotals = savedIncludePreview.Value;
+            await LoadMonth();
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
    private async Task LoadMonth()
    {
        loading = true;
@ -267,6 +287,7 @@ else
    private async Task OnIncludePreviewTotalsChanged(ChangeEventArgs e)
    {
        includePreviewTotals = e.Value is bool value && value;
+        await JS.InvokeVoidAsync("workTrackerPreferences.setBool", IncludePreviewPreferenceKey, includePreviewTotals);
        await LoadMonth();
    }

@ -306,6 +327,8 @@ else

    private bool IsActiveCell(DateOnly date) => activeDate == date;

+    private static bool IsToday(DateOnly date) => date == DateOnly.FromDateTime(DateTime.Today);
+
    private void CreateWorkUnit(DateOnly date)
    {
        Navigation.NavigateTo($"/work-unit/{date:yyyy-MM-dd}");
--- a/Components/Pages/GridView.razor
+++ b/Components/Pages/GridView.razor
@ -24,7 +24,7 @@
 else
 {
    <div class="table-responsive">
-        <table class="table table-sm table-bordered align-middle">
+        <table class="table table-sm table-bordered align-middle grid-view-table">
            <thead class="table-dark">
                <tr>
                    <th>Date</th>
@ -150,31 +150,31 @@ else

    private string GetRowClass(CalendarDayRow row)
    {
-        if (row.IsWeekend || row.IsFestivity) return "table-danger";
-        if (row.Entry is null) return "";
+        if (row.IsWeekend || row.IsFestivity) return "grid-row-weekend";
+        if (row.Entry is null) return string.Empty;
        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Holiday))
        {
-            return "table-success";
+            return "grid-row-holiday";
        }

        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Closure))
        {
-            return "table-warning";
+            return "grid-row-closure";
        }

        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.Illness))
        {
-            return "table-info";
+            return "grid-row-illness";
        }

        if (row.Entry.CalendarEvents.Any(entry => entry.EventType == CalendarEventType.DayOff))
        {
-            return "table-secondary";
+            return "grid-row-dayoff";
        }

        if (row.Entry.WorkUnits.Any(entry => entry.Location == WorkUnitLocation.Home))
        {
-            return "table-light";
+            return "grid-row-home";
        }

        return string.Empty;
--- a/Components/Pages/MonthlySummary.razor
+++ b/Components/Pages/MonthlySummary.razor
@ -5,6 +5,7 @@

@using System.Globalization
@inject global::WorkTracker.Services.WorkDays.IWorkDayService WorkDayService
+@inject IJSRuntime JS

 <PageTitle>Monthly Summary</PageTitle>

@ -209,6 +210,7 @@ else if (viewMode == SummaryViewMode.Timesheet && timesheet is not null)
    [Parameter] public string? YearMonth { get; set; }

    private static readonly CultureInfo ItalianCulture = CultureInfo.GetCultureInfo("it-IT");
+    private const string IncludePreviewPreferenceKey = "worktracker.includePreviewWorkUnits";

    private DateOnly currentMonth;
    private bool loading = true;
@ -231,9 +233,26 @@ else if (viewMode == SummaryViewMode.Timesheet && timesheet is not null)
        await LoadSummary();
    }

+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        var savedIncludePreview = await JS.InvokeAsync<bool?>("workTrackerPreferences.getBool", IncludePreviewPreferenceKey);
+        if (savedIncludePreview.HasValue && savedIncludePreview.Value != includePreview)
+        {
+            includePreview = savedIncludePreview.Value;
+            await LoadSummary();
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
    private async Task OnIncludePreviewChanged(ChangeEventArgs e)
    {
        includePreview = e.Value is bool value && value;
+        await JS.InvokeVoidAsync("workTrackerPreferences.setBool", IncludePreviewPreferenceKey, includePreview);
        await LoadSummary();
    }

--- a/Components/Pages/Settings.razor
+++ b/Components/Pages/Settings.razor
@ -2,6 +2,7 @@
@attribute [Authorize]

@inject IAppSettingsService AppSettingsService
+@inject AppThemeState ThemeState

 <PageTitle>Settings</PageTitle>

@ -18,6 +19,14 @@ else
        <DataAnnotationsValidator />

        <div class="row g-3">
+            <div class="col-12 col-md-6">
+                <label class="form-label">Theme</label>
+                <InputSelect class="form-select" @bind-Value="settings.ThemeMode">
+                    <option value="@AppThemeMode.System">Follow system</option>
+                    <option value="@AppThemeMode.Light">Light</option>
+                    <option value="@AppThemeMode.Dark">Dark</option>
+                </InputSelect>
+            </div>
            <div class="col-12 col-md-6">
                <label class="form-label">Standard work hours/day</label>
                <InputNumber class="form-control" @bind-Value="settings.StandardWorkHoursPerDay" />
@ -75,6 +84,7 @@ else
        }

        settings = await AppSettingsService.SaveAsync(settings);
+        ThemeState.SetThemeMode(settings.ThemeMode);
        statusMessage = $"Saved at {DateTime.Now:t}";
    }
 }
--- a/Domain/AppSettingsDocument.cs
+++ b/Domain/AppSettingsDocument.cs
@ -4,6 +4,8 @@ public sealed class AppSettingsDocument
 {
    public string Id { get; set; } = "global";

+    public AppThemeMode ThemeMode { get; set; } = AppThemeMode.System;
+
    public decimal StandardWorkHoursPerDay { get; set; } = 8m;

    public decimal HourlyGrossRate { get; set; } = 17.5m;
--- a/Domain/AppThemeMode.cs
+++ b/Domain/AppThemeMode.cs
@ -0,0 +1,8 @@
+namespace WorkTracker.Domain;
+
+public enum AppThemeMode
+{
+    System,
+    Light,
+    Dark
+}
--- a/Program.cs
+++ b/Program.cs
@ -19,6 +19,17 @@ using WorkTracker.Services.WorkDays;

 var builder = WebApplication.CreateBuilder(args);

+var runningInContainer = string.Equals(
+    Environment.GetEnvironmentVariable("DOTNET_RUNNING_IN_CONTAINER"),
+    "true",
+    StringComparison.OrdinalIgnoreCase)
+    || File.Exists("/.dockerenv");
+
+if (!runningInContainer)
+{
+    builder.WebHost.UseStaticWebAssets();
+}
+
 builder.Logging.ClearProviders();
 builder.Host.UseNLog();

@ -60,6 +71,7 @@ builder.Services.Configure<SingleUserOptions>(builder.Configuration.GetSection(S

 builder.Services.AddSingleton<CouchbaseLiteDatabaseProvider>();
 builder.Services.AddScoped<IAppSettingsService, CouchbaseLiteAppSettingsService>();
+builder.Services.AddScoped<AppThemeState>();
 builder.Services.AddSingleton<IAuthService, CouchbaseLiteAuthService>();
 builder.Services.AddSingleton<IItalianFestivitySource, ItalianFestivitySource>();
 builder.Services.AddScoped<IWorkDayService, CouchbaseLiteWorkDayService>();
--- a/README.Docker.md
+++ b/README.Docker.md
@ -2,7 +2,7 @@ Running and debugging with Docker or local Couchbase Lite storage

 Quick run (Docker Engine required):

-1. Build and start services:
+1. Build and start services with the development override:

   docker compose up --build

@ -11,9 +11,15 @@ Quick run (Docker Engine required):
 Production deployment:

 - Put deployment values in a `.env` file next to `docker-compose.yml` or export them in the shell before running Docker Compose.
+- The base compose file is runtime-only and expects the image referenced by `IMAGE_REGISTRY` and `IMAGE_TAG` to already exist.
 - The base compose file is now parameterized for host port, persisted storage path, image tag, auth mode, seeded user credentials, allowed hosts, and healthcheck timings.
 - For a direct production deployment, define at least `WORKTRACKER_DATA_PATH`. If you enable the built-in login flow, also define `APPAUTH_ENABLED=true` and a strong `SINGLEUSER_PASSWORD` before first startup.

+Production start:
+
+- Copy `docker-compose.yml` and the matching env file to the server.
+- Pull the published image first, then start the stack with `docker compose --env-file production.env up -d`.
+
 Deployment variables:

 | Variable | Required for production | Default | Purpose |
@ -104,5 +110,6 @@ Docker Playwright smoke tests:
 Notes:

 - The base compose file remains production-oriented; the override file is the optional containerized development layer.
+- `docker compose up --build` still works locally because Docker Compose auto-loads `docker-compose.override.yml`, which carries the build settings.
 - The first container build takes longer because the dev image installs the .NET debugger.
 - The Dockerfile uses the .NET 10 `*-noble` images so local builds and container builds stay aligned with the SDK available in VS Code.
--- a/Services/Settings/AppThemeState.cs
+++ b/Services/Settings/AppThemeState.cs
@ -0,0 +1,41 @@
+using WorkTracker.Domain;
+
+namespace WorkTracker.Services.Settings;
+
+public sealed class AppThemeState
+{
+    private readonly IAppSettingsService appSettingsService;
+    private AppThemeMode? currentThemeMode;
+
+    public AppThemeState(IAppSettingsService appSettingsService)
+    {
+        this.appSettingsService = appSettingsService;
+    }
+
+    public event Action<AppThemeMode>? ThemeModeChanged;
+
+    public AppThemeMode CurrentThemeMode => currentThemeMode ?? AppThemeMode.System;
+
+    public async Task<AppThemeMode> EnsureLoadedAsync(CancellationToken cancellationToken = default)
+    {
+        if (currentThemeMode.HasValue)
+        {
+            return currentThemeMode.Value;
+        }
+
+        var settings = await appSettingsService.GetAsync(cancellationToken);
+        currentThemeMode = settings.ThemeMode;
+        return CurrentThemeMode;
+    }
+
+    public void SetThemeMode(AppThemeMode themeMode)
+    {
+        if (currentThemeMode == themeMode)
+        {
+            return;
+        }
+
+        currentThemeMode = themeMode;
+        ThemeModeChanged?.Invoke(themeMode);
+    }
+}
--- a/Services/Settings/CouchbaseLiteAppSettingsService.cs
+++ b/Services/Settings/CouchbaseLiteAppSettingsService.cs
@ -47,6 +47,7 @@ public sealed class CouchbaseLiteAppSettingsService : IAppSettingsService
    private void SaveDocument(AppSettingsDocument settings)
    {
        var document = new MutableDocument(DefaultSettingsId);
+        document.SetString("themeMode", settings.ThemeMode.ToString());
        document.SetDouble("standardWorkHoursPerDay", Decimal.ToDouble(settings.StandardWorkHoursPerDay));
        document.SetDouble("hourlyGrossRate", Decimal.ToDouble(settings.HourlyGrossRate));
        document.SetDouble("profitabilityCoefficient", Decimal.ToDouble(settings.ProfitabilityCoefficient));
@ -65,6 +66,7 @@ public sealed class CouchbaseLiteAppSettingsService : IAppSettingsService
        return new AppSettingsDocument
        {
            Id = document.Id,
+            ThemeMode = ReadThemeMode(document),
            StandardWorkHoursPerDay = ReadDecimal(document, "standardWorkHoursPerDay", 8m),
            HourlyGrossRate = ReadDecimal(document, "hourlyGrossRate", 17.5m),
            ProfitabilityCoefficient = ReadDecimal(document, "profitabilityCoefficient", 0.67m),
@ -84,6 +86,14 @@ public sealed class CouchbaseLiteAppSettingsService : IAppSettingsService
            : defaultValue;
    }

+    private static AppThemeMode ReadThemeMode(Document document)
+    {
+        var value = document.GetString("themeMode");
+        return Enum.TryParse<AppThemeMode>(value, ignoreCase: true, out var themeMode)
+            ? themeMode
+            : AppThemeMode.System;
+    }
+
    private static DateTimeOffset ReadDateTimeOffset(Document document, string key)
    {
        var value = document.GetString(key);
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,8 +1,5 @@
 services:
  worktracker:
-    build:
-      context: .
-      dockerfile: Dockerfile
    image: ${IMAGE_REGISTRY:-worktracker}:${IMAGE_TAG:-latest}
    environment:
      ASPNETCORE_ENVIRONMENT: ${ASPNETCORE_ENVIRONMENT:-Production}
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,76 @@
+{
+  "name": "worktracker-playwright",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "worktracker-playwright",
+      "dependencies": {
+        "playwright": "^1.59.1"
+      },
+      "devDependencies": {
+        "@playwright/test": "^1.59.1"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -5,6 +5,9 @@
    "test:e2e": "playwright test"
  },
  "devDependencies": {
-    "@playwright/test": "1.59.1"
+    "@playwright/test": "^1.59.1"
+  },
+  "dependencies": {
+    "playwright": "^1.59.1"
  }
-}
+}
--- a/production.env
+++ b/production.env
@ -10,10 +10,10 @@ WORKTRACKER_DATA_PATH=/mnt/storage/data/worktracker/db
 COUCHBASELITE_DATABASE_NAME=worktracker

 # Published app port
-WORKTRACKER_PORT=8002
+WORKTRACKER_PORT=8003

 # Image reference used by Docker Compose
-IMAGE_REGISTRY=worktracker
+IMAGE_REGISTRY=forgejo.maddoscientisto.net/maddo/worktracker
 IMAGE_TAG=latest

 # Built-in authentication
@ -22,7 +22,7 @@ APPAUTH_DEFAULT_USERNAME=Admin
 APPAUTH_DEFAULT_USERID=ADMIN
 SINGLEUSER_SEED_ON_STARTUP=true
 SINGLEUSER_USERNAME=admin
-SINGLEUSER_PASSWORD=disagio-spaghetti-science-adsfg
+SINGLEUSER_PASSWORD=disagio

 # Container healthcheck tuning
 WORKTRACKER_HEALTHCHECK_INTERVAL=30s
--- a/tests/playwright/auth-bypass.spec.ts
+++ b/tests/playwright/auth-bypass.spec.ts
@ -1,9 +1,14 @@
 import { expect, test } from '@playwright/test';

+async function waitForBlazorConnection(page: Parameters<typeof test>[0]['page']) {
+  await page.waitForTimeout(750);
+}
+
 test.describe('sidebar collapse', () => {
  test('starts collapsed and expands through the toggle button', async ({ page }) => {
    await page.setViewportSize({ width: 1440, height: 960 });
-    await page.goto('/');
+    await page.goto('/', { waitUntil: 'networkidle' });
+    await waitForBlazorConnection(page);

    const sidebar = page.getByTestId('sidebar-shell');
    const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
@ -13,16 +18,43 @@ test.describe('sidebar collapse', () => {
    await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();

    await toggle.click();
+    await page.waitForTimeout(500);

    await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
    await expect(page.getByText('Dashboard')).toBeVisible();

    await toggle.click();
+    await page.waitForTimeout(500);

    await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
    await expect(toggle).toHaveAttribute('aria-expanded', 'false');
  });
+
+  test('renders sidebar styles and toggles on narrow layouts', async ({ page }) => {
+    await page.setViewportSize({ width: 500, height: 900 });
+    await page.goto('/', { waitUntil: 'networkidle' });
+    await waitForBlazorConnection(page);
+
+    const sidebar = page.getByTestId('sidebar-shell');
+    const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
+    const navScrollable = page.locator('.nav-scrollable');
+    const sidebarPanel = page.locator('.sidebar');
+    const toggleBar = page.locator('.sidebar-toggle-bar').first();
+
+    await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
+    await expect(navScrollable).toBeHidden();
+
+    await expect(sidebarPanel).toHaveCSS('background-image', /linear-gradient/);
+    await expect(toggleBar).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+
+    await toggle.click();
+    await page.waitForTimeout(500);
+
+    await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+    await expect(navScrollable).toBeVisible();
+  });
 });

 test('home loads without a login screen', async ({ page }) => {
--- a/wwwroot/app.css
+++ b/wwwroot/app.css
@ -2,6 +2,405 @@ html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }

+:root {
+    --wt-header-bg: #f7f7f7;
+    --wt-header-border: #d6d5d5;
+    --wt-header-link: #1f2937;
+    --wt-calendar-cell-hover: rgba(0, 0, 0, 0.05);
+    --wt-calendar-active: #1b6ec2;
+    --wt-calendar-total: #334155;
+    --wt-calendar-hours: #666;
+    --wt-popup-bg: #fff;
+    --wt-popup-border: rgba(0, 0, 0, 0.15);
+    --wt-popup-link-bg: #f1f3f5;
+    --wt-calendar-today-ring: #0d6efd;
+    --wt-calendar-today-badge-bg: #0d6efd;
+    --wt-calendar-today-badge-text: #fff;
+    --wt-summary-head-bg: #f8f9fa;
+    --wt-summary-sticky-bg: #fff;
+    --wt-summary-row-alt: #fcfcfd;
+    --wt-summary-popup-bg: #fff;
+    --wt-summary-popup-border: rgba(0, 0, 0, 0.12);
+    --wt-summary-popup-text: #1f2937;
+    --wt-summary-popup-event: #475569;
+}
+
+[data-bs-theme=dark] {
+    --wt-header-bg: #1d2228;
+    --wt-header-border: rgba(255, 255, 255, 0.08);
+    --wt-header-link: #dee2e6;
+    --wt-calendar-cell-hover: rgba(255, 255, 255, 0.06);
+    --wt-calendar-active: #6ea8fe;
+    --wt-calendar-total: #d0d7de;
+    --wt-calendar-hours: #adb5bd;
+    --wt-popup-bg: #212529;
+    --wt-popup-border: rgba(255, 255, 255, 0.12);
+    --wt-popup-link-bg: #343a40;
+    --wt-calendar-today-ring: #8ec5ff;
+    --wt-calendar-today-badge-bg: #8ec5ff;
+    --wt-calendar-today-badge-text: #0f172a;
+    --wt-summary-head-bg: #2b3035;
+    --wt-summary-sticky-bg: #212529;
+    --wt-summary-row-alt: #1a1e22;
+    --wt-summary-popup-bg: #212529;
+    --wt-summary-popup-border: rgba(255, 255, 255, 0.12);
+    --wt-summary-popup-text: #e9ecef;
+    --wt-summary-popup-event: #adb5bd;
+}
+
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+    min-width: 0;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: var(--wt-header-bg);
+    border-bottom: 1px solid var(--wt-header-border);
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.top-row a,
+.top-row .btn-link {
+    color: var(--wt-header-link);
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
+
+.top-row a:hover,
+.top-row .btn-link:hover {
+    text-decoration: underline;
+}
+
+.top-row a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.nav-menu-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    justify-content: flex-start;
+}
+
+.nav-menu-shell {
+    height: 100%;
+}
+
+.nav-menu-shell .top-row {
+    min-height: 3.5rem;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-bottom: 0;
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+}
+
+.sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 0.2rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 0.65rem;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    flex: 0 0 auto;
+}
+
+.sidebar-toggle:hover {
+    background: rgba(255, 255, 255, 0.16);
+}
+
+.sidebar-toggle-bar {
+    width: 1rem;
+    height: 2px;
+    background: currentColor;
+    border-radius: 999px;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.bi-lock-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
+}
+
+.bi-person-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
+}
+
+.bi-person-badge-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
+}
+
+.bi-person-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
+}
+
+.bi-arrow-bar-left-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-gear-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
+}
+
+.bi-calendar3-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
+}
+
+.bi-bar-chart-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.nav-item:first-of-type {
+    padding-top: 1rem;
+}
+
+.nav-item:last-of-type {
+    padding-bottom: 1rem;
+}
+
+.nav-item .nav-link {
+    color: #d7d7d7;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    line-height: 3rem;
+    width: 100%;
+}
+
+.nav-item a.active {
+    background-color: rgba(255, 255, 255, 0.37);
+    color: white;
+}
+
+.nav-item .nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+.nav-scrollable {
+    display: block;
+    height: calc(100vh - 3.5rem);
+    overflow-y: auto;
+}
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: flex-end;
+    }
+
+    .top-row a,
+    .top-row .btn-link {
+        margin-left: 0;
+    }
+
+    .nav-menu-shell-collapsed .sidebar-brand-full,
+    .nav-menu-shell:not(.nav-menu-shell-collapsed) .sidebar-brand-compact {
+        display: none;
+    }
+
+    .nav-menu-shell-collapsed .nav-scrollable {
+        display: none;
+    }
+
+    .nav-menu-shell:not(.nav-menu-shell-collapsed) .nav-scrollable {
+        display: block;
+    }
+
+    .nav-scrollable {
+        height: auto;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+        transition: width 0.2s ease;
+        overflow: hidden;
+        flex: 0 0 auto;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row,
+    article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+
+    .sidebar.sidebar-collapsed {
+        width: 5rem;
+    }
+
+    .nav-menu-shell-collapsed .container-fluid {
+        justify-content: flex-start;
+    }
+
+    .nav-menu-shell-collapsed .nav-label {
+        display: none;
+    }
+
+    .nav-menu-shell-collapsed .nav-item {
+        padding-bottom: 0.3rem;
+    }
+
+    .nav-menu-shell-collapsed .nav-item.px-3 {
+        padding-left: 0.5rem !important;
+        padding-right: 0.5rem !important;
+    }
+
+    .nav-menu-shell-collapsed .nav-item .nav-link {
+        justify-content: center;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .nav-menu-shell-collapsed .nav-item .nav-link,
+    .nav-menu-shell-collapsed .nav-item button.nav-link {
+        min-width: 0;
+    }
+
+    .nav-menu-shell-collapsed .bi {
+        margin-right: 0;
+    }
+}
+
+#blazor-error-ui {
+    color-scheme: light only;
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}
+
+.grid-view-table {
+    --wt-grid-row-weekend: #f8d7da;
+    --wt-grid-row-holiday: #d4edda;
+    --wt-grid-row-closure: #fff3cd;
+    --wt-grid-row-illness: #d1ecf1;
+    --wt-grid-row-dayoff: #e2e3e5;
+    --wt-grid-row-home: #f8f9fa;
+}
+
+[data-bs-theme=dark] .grid-view-table {
+    --wt-grid-row-weekend: #522c35;
+    --wt-grid-row-holiday: #1f4e3f;
+    --wt-grid-row-closure: #5c4a20;
+    --wt-grid-row-illness: #16404a;
+    --wt-grid-row-dayoff: #3b4046;
+    --wt-grid-row-home: #2b3035;
+}
+
+.grid-view-table .grid-row-weekend > * {
+    background-color: var(--wt-grid-row-weekend);
+}
+
+.grid-view-table .grid-row-holiday > * {
+    background-color: var(--wt-grid-row-holiday);
+}
+
+.grid-view-table .grid-row-closure > * {
+    background-color: var(--wt-grid-row-closure);
+}
+
+.grid-view-table .grid-row-illness > * {
+    background-color: var(--wt-grid-row-illness);
+}
+
+.grid-view-table .grid-row-dayoff > * {
+    background-color: var(--wt-grid-row-dayoff);
+}
+
+.grid-view-table .grid-row-home > * {
+    background-color: var(--wt-grid-row-home);
+}
+
+.grid-view-table tbody tr > * {
+    color: inherit;
+}
+
 a, .btn-link {
    color: #006bb7;
 }
@ -70,17 +469,41 @@ h1:focus {
 }

 .calendar-table td.calendar-cell:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--wt-calendar-cell-hover);
+}
+
+.calendar-cell-empty {
+    background-color: var(--bs-tertiary-bg);
 }

 .calendar-cell-active {
-    box-shadow: inset 0 0 0 0.15rem #1b6ec2;
+    box-shadow: inset 0 0 0 0.15rem var(--wt-calendar-active);
+}
+
+.calendar-cell-today::after {
+    content: "";
+    position: absolute;
+    inset: 0.2rem;
+    border: 0.15rem solid var(--wt-calendar-today-ring);
+    border-radius: 0.75rem;
+    pointer-events: none;
 }

 .calendar-day-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    height: 2rem;
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
+    border-radius: 999px;
+}
+
+.calendar-cell-today .calendar-day-number {
+    background-color: var(--wt-calendar-today-badge-bg);
+    color: var(--wt-calendar-today-badge-text);
 }

 .calendar-day-total {
@ -89,12 +512,12 @@ h1:focus {
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
-    color: #334155;
+    color: var(--wt-calendar-total);
 }

 .calendar-hours {
    font-size: 0.75rem;
-    color: #666;
+    color: var(--wt-calendar-hours);
 }

 .calendar-item {
@ -163,8 +586,8 @@ h1:focus {
    z-index: 20;
    width: min(16rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
-    background: #fff;
-    border: 1px solid rgba(0, 0, 0, 0.15);
+    background: var(--wt-popup-bg);
+    border: 1px solid var(--wt-popup-border);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
    padding: 0.75rem;
@ -189,7 +612,8 @@ h1:focus {
 .calendar-popup-link {
    border: 0;
    border-radius: 0.5rem;
-    background: #f1f3f5;
+    background: var(--wt-popup-link-bg);
+    color: inherit;
    padding: 0.45rem 0.6rem;
    text-align: left;
 }
@ -229,6 +653,45 @@ h1:focus {
    background-color: #d4edda !important;
 }

+[data-bs-theme=dark] .calendar-legend-work {
+    background-color: #24476f;
+    color: #e8f3ff;
+}
+
+[data-bs-theme=dark] .calendar-legend-home {
+    background-color: #245744;
+    color: #e7fff4;
+}
+
+[data-bs-theme=dark] .calendar-legend-preview {
+    background-color: #6b5314;
+    color: #fff5d7;
+}
+
+[data-bs-theme=dark] .calendar-weekend {
+    background-color: #4b2c33 !important;
+}
+
+[data-bs-theme=dark] .calendar-closure {
+    background-color: #5c4a20 !important;
+}
+
+[data-bs-theme=dark] .calendar-illness {
+    background-color: #16404a !important;
+}
+
+[data-bs-theme=dark] .calendar-dayoff {
+    background-color: #3b4046 !important;
+}
+
+[data-bs-theme=dark] .calendar-holiday {
+    background-color: #1f4e3f !important;
+}
+
+.calendar-page {
+    padding-bottom: 3rem;
+}
+
@media (max-width: 767.98px) {
    .calendar-table td.calendar-cell {
        height: 8rem;
@ -251,38 +714,59 @@ h1:focus {
 }

 .timesheet-summary-table thead th {
-    background-color: #f8f9fa;
-    white-space: nowrap;
+    background-color: var(--wt-summary-head-bg);
+    white-space: normal;
 }

 .timesheet-summary-table th,
 .timesheet-summary-table td {
    min-width: 2.2rem;
-    padding: 0.25rem 0.12rem;
+    padding: 0.35rem 0.16rem;
    vertical-align: middle;
+    line-height: 1.2;
 }

 .timesheet-summary-sticky-column {
    position: sticky;
    left: 0;
    z-index: 2;
-    min-width: 15rem !important;
-    background-color: #fff;
+    min-width: 6.25rem !important;
+    max-width: 6.25rem;
+    background-color: var(--wt-summary-sticky-bg);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    text-align: left;
 }

 .timesheet-summary-table thead .timesheet-summary-sticky-column {
    z-index: 3;
-    background-color: #f8f9fa;
+    background-color: var(--wt-summary-head-bg);
 }

 .timesheet-summary-total-column {
-    background-color: #f8f9fa;
-    min-width: 3.3rem !important;
+    position: sticky;
+    right: 0;
+    z-index: 2;
+    background-color: var(--wt-summary-head-bg);
+    min-width: 3.5rem !important;
 }

 .timesheet-summary-table tbody tr:nth-child(odd) td,
 .timesheet-summary-table tbody tr:nth-child(odd) .timesheet-summary-sticky-column {
-    background-color: #fcfcfd;
+    background-color: var(--wt-summary-row-alt);
+}
+
+.timesheet-summary-table tbody tr:nth-child(odd) .timesheet-summary-total-column {
+    background-color: var(--wt-summary-row-alt);
+}
+
+.timesheet-summary-table tbody .timesheet-summary-total-column {
+    background-color: var(--wt-summary-sticky-bg);
+}
+
+.timesheet-summary-table thead .timesheet-summary-total-column {
+    z-index: 3;
 }

 .timesheet-summary-table .timesheet-summary-day-danger {
@ -293,6 +777,14 @@ h1:focus {
    background-color: #e2e3e5 !important;
 }

+[data-bs-theme=dark] .timesheet-summary-table .timesheet-summary-day-danger {
+    background-color: #5b2833 !important;
+}
+
+[data-bs-theme=dark] .timesheet-summary-table .timesheet-summary-day-closure {
+    background-color: #3b4046 !important;
+}
+
 .timesheet-summary-day-header {
    position: relative;
    cursor: default;
@ -306,9 +798,9 @@ h1:focus {
    width: min(18rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0.65rem 0.75rem;
-    border: 1px solid rgba(0, 0, 0, 0.12);
+    border: 1px solid var(--wt-summary-popup-border);
    border-radius: 0.7rem;
-    background: #fff;
+    background: var(--wt-summary-popup-bg);
    box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.18);
    text-align: left;
    transform: translateX(-50%);
@ -337,7 +829,7 @@ h1:focus {
 .timesheet-summary-day-popup-item {
    font-size: 0.75rem;
    line-height: 1.35;
-    color: #1f2937;
+    color: var(--wt-summary-popup-text);
 }

 .timesheet-summary-day-popup-item + .timesheet-summary-day-popup-item {
@ -345,12 +837,21 @@ h1:focus {
 }

 .timesheet-summary-day-popup-item-event {
-    color: #475569;
+    color: var(--wt-summary-popup-event);
 }

@media (max-width: 767.98px) {
    .timesheet-summary-sticky-column {
-        min-width: 12rem !important;
+        min-width: 4.75rem !important;
+        max-width: 4.75rem;
+        padding-left: 0.3rem !important;
+        padding-right: 0.3rem !important;
+        font-size: 0.82rem;
+    }
+
+    .timesheet-summary-total-column {
+        min-width: 3.1rem !important;
+        font-size: 0.82rem;
    }

    .timesheet-summary-day-popup {
--- a/wwwroot/theme.js
+++ b/wwwroot/theme.js
@ -0,0 +1,89 @@
+window.workTrackerTheme = (() => {
+    const storageKey = "worktracker.themeMode";
+    const mediaQuery = window.matchMedia
+        ? window.matchMedia("(prefers-color-scheme: dark)")
+        : null;
+
+    function normalize(mode) {
+        const normalized = (mode || "system").toString().toLowerCase();
+        return normalized === "light" || normalized === "dark" || normalized === "system"
+            ? normalized
+            : "system";
+    }
+
+    function resolve(mode) {
+        if (mode === "system") {
+            return mediaQuery && mediaQuery.matches ? "dark" : "light";
+        }
+
+        return mode;
+    }
+
+    function apply(mode) {
+        const normalized = normalize(mode);
+        const effectiveMode = resolve(normalized);
+
+        document.documentElement.setAttribute("data-bs-theme", effectiveMode);
+        document.documentElement.setAttribute("data-theme-mode", normalized);
+        document.documentElement.style.colorScheme = effectiveMode;
+        localStorage.setItem(storageKey, normalized);
+    }
+
+    function handleSystemThemeChange() {
+        const currentMode = normalize(localStorage.getItem(storageKey) || document.documentElement.getAttribute("data-theme-mode"));
+        if (currentMode === "system") {
+            apply(currentMode);
+        }
+    }
+
+    if (mediaQuery) {
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", handleSystemThemeChange);
+        }
+        else if (typeof mediaQuery.addListener === "function") {
+            mediaQuery.addListener(handleSystemThemeChange);
+        }
+    }
+
+    return {
+        init() {
+            apply(localStorage.getItem(storageKey) || document.documentElement.getAttribute("data-theme-mode"));
+        },
+        setTheme(mode) {
+            apply(mode);
+        }
+    };
+})();
+
+window.workTrackerPreferences = {
+    getBool(key) {
+        try {
+            const value = localStorage.getItem(key);
+            if (value === null) {
+                return null;
+            }
+
+            if (value === "true") {
+                return true;
+            }
+
+            if (value === "false") {
+                return false;
+            }
+
+            return null;
+        }
+        catch {
+            return null;
+        }
+    },
+    setBool(key, value) {
+        try {
+            localStorage.setItem(key, value ? "true" : "false");
+        }
+        catch {
+        }
+    }
+};
+
+window.workTrackerTheme.init();