From ba7f00479285a6ea86ccc02b1fd96deaca53ed3b Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Fri, 25 Sep 2026 23:17:27 +0200
Subject: [PATCH 1/2] refactor: split the largest source files into focused
 modules (#353)

filter.js (1922), eventlisteners.js (1564), server.py (908) and
components.css (854) each did several unrelated jobs, so every change
touching them meant reading the whole file.

- server.py -> server.py (app, auth, HTML routes) + server_models.py +
  server_routes_outputs.py + server_routes_logs.py. The route modules are
  register_*_routes(server, authenticate) functions; server.py re-exports
  the models so existing imports keep working.
- js/eventlisteners.js -> js/eventlisteners/, one module per modal or
  listener group. The merge-profiles wiring moved out of setup_filter_modal
  into setup_merge_profiles_modal().
- js/filter.js -> js/filter/: pipeline, section_selects, modal_options,
  suite_path, availability, controls, profiles, profile_merge.
- css/components.css -> css/components/. CSS is concatenated in path
  order, which is the cascade order, so the subdirectory keeps the files
  between colors.css and dark.css and the numbered prefixes keep their
  order within it.

Also fixes three imports that only ever resolved because the bundler
flattens every module into one scope: filteredAmount came from the wrong
module, six setup_*_in_select functions were used without being imported,
and set_filter_show_current_version was imported from a module that does
not export it.

Behaviour is unchanged: the bundled <script> is identical to the one built
from main apart from the extracted function and its call, and the bundled
<style> is identical apart from the section marker comments.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .claude/skills/coding-standards/SKILL.md      |   25 +-
 .claude/skills/dashboard-graphs/SKILL.md      |    4 +-
 .../skills/filtering-and-settings/SKILL.md    |   12 +-
 .claude/skills/js-bundling/SKILL.md           |    2 +-
 .claude/skills/js-features/SKILL.md           |    8 +-
 .claude/skills/server-api/SKILL.md            |   11 +-
 .../skills/testing/javascript-unit-tests.md   |    4 +-
 CLAUDE.md                                     |    6 +-
 robotframework_dashboard/css/components.css   |  854 --------
 .../css/components/01-cards.css               |   78 +
 .../css/components/02-filters.css             |  157 ++
 .../css/components/03-widgets.css             |  246 +++
 .../css/components/04-status-colors.css       |   29 +
 .../css/components/05-run-cards.css           |   74 +
 .../css/components/06-graphs.css              |  116 +
 .../css/components/07-loading.css             |  121 ++
 .../components/08-section-filters-modal.css   |   29 +
 robotframework_dashboard/js/eventlisteners.js | 1564 --------------
 .../js/eventlisteners/collapsables.js         |   25 +
 .../js/eventlisteners/confirm_modal.js        |   41 +
 .../js/eventlisteners/filter_modal.js         |  241 +++
 .../js/eventlisteners/graph_view_buttons.js   |  354 +++
 .../js/eventlisteners/merge_profiles.js       |  140 ++
 .../js/eventlisteners/overview_listeners.js   |   83 +
 .../js/eventlisteners/section_filters.js      |  386 ++++
 .../js/eventlisteners/settings_modal.js       |  357 +++
 robotframework_dashboard/js/filter.js         | 1923 -----------------
 .../js/filter/availability.js                 |  259 +++
 .../js/filter/controls.js                     |  192 ++
 .../js/filter/modal_options.js                |  284 +++
 .../js/filter/pipeline.js                     |  471 ++++
 .../js/filter/profile_merge.js                |  131 ++
 .../js/filter/profiles.js                     |  366 ++++
 .../js/filter/section_selects.js              |  176 ++
 .../js/filter/suite_path.js                   |  106 +
 .../js/graph_creation/overview.js             |   14 +-
 .../js/graph_creation/suite.js                |    2 +-
 robotframework_dashboard/js/layout.js         |    2 +-
 robotframework_dashboard/js/main.js           |   10 +-
 robotframework_dashboard/js/menu.js           |    6 +-
 robotframework_dashboard/server.py            |  783 +------
 robotframework_dashboard/server_models.py     |  289 +++
 .../server_routes_logs.py                     |  193 ++
 .../server_routes_outputs.py                  |  275 +++
 tests/javascript/filter.test.js               |    2 +-
 tests/javascript/filter_availability.test.js  |    2 +-
 .../keywords/dashboard-keywords.resource      |    4 +-
 47 files changed, 5331 insertions(+), 5126 deletions(-)
 delete mode 100644 robotframework_dashboard/css/components.css
 create mode 100644 robotframework_dashboard/css/components/01-cards.css
 create mode 100644 robotframework_dashboard/css/components/02-filters.css
 create mode 100644 robotframework_dashboard/css/components/03-widgets.css
 create mode 100644 robotframework_dashboard/css/components/04-status-colors.css
 create mode 100644 robotframework_dashboard/css/components/05-run-cards.css
 create mode 100644 robotframework_dashboard/css/components/06-graphs.css
 create mode 100644 robotframework_dashboard/css/components/07-loading.css
 create mode 100644 robotframework_dashboard/css/components/08-section-filters-modal.css
 delete mode 100644 robotframework_dashboard/js/eventlisteners.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/collapsables.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/confirm_modal.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/filter_modal.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/graph_view_buttons.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/merge_profiles.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/overview_listeners.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/section_filters.js
 create mode 100644 robotframework_dashboard/js/eventlisteners/settings_modal.js
 delete mode 100644 robotframework_dashboard/js/filter.js
 create mode 100644 robotframework_dashboard/js/filter/availability.js
 create mode 100644 robotframework_dashboard/js/filter/controls.js
 create mode 100644 robotframework_dashboard/js/filter/modal_options.js
 create mode 100644 robotframework_dashboard/js/filter/pipeline.js
 create mode 100644 robotframework_dashboard/js/filter/profile_merge.js
 create mode 100644 robotframework_dashboard/js/filter/profiles.js
 create mode 100644 robotframework_dashboard/js/filter/section_selects.js
 create mode 100644 robotframework_dashboard/js/filter/suite_path.js
 create mode 100644 robotframework_dashboard/server_models.py
 create mode 100644 robotframework_dashboard/server_routes_logs.py
 create mode 100644 robotframework_dashboard/server_routes_outputs.py

diff --git a/.claude/skills/coding-standards/SKILL.md b/.claude/skills/coding-standards/SKILL.md
index 31286926..e58bf328 100644
--- a/.claude/skills/coding-standards/SKILL.md
+++ b/.claude/skills/coding-standards/SKILL.md
@@ -23,7 +23,7 @@ Write a comment only when the code cannot say it itself. Before adding one, chec
 - repeating what a guard clause or an early return already shows
 - "what changed", "added for issue N", "new in 2.4" — that is git history
 
-Match the surrounding density rather than your own taste: the JS modules run one short lowercase line per top-level function and few inside bodies. `filter.js` sits near 6% comment lines — a new block far above the file's ratio is a signal to cut, not a new house style. Do not restyle existing comments while you are there.
+Match the surrounding density rather than your own taste: the JS modules run one short lowercase line per top-level function and few inside bodies. `filter/pipeline.js` sits near 6% comment lines — a new block far above the file's ratio is a signal to cut, not a new house style. Do not restyle existing comments while you are there.
 
 Robot `[Documentation]` is API documentation, not a comment: it renders in `log.html`. Write it for a keyword whose contract or trap is invisible at the call site; skip it when the name already says everything (`Open Compare Page`).
 
@@ -41,7 +41,8 @@ Robot `[Documentation]` is API documentation, not a comment: it renders in `log.
 
 ## CSS
 
-- Files: `css/base.css`, `colors.css`, `components.css`, `dark.css` — concatenated in sorted order at generation time.
+- Files: `css/base.css`, `colors.css`, `components/01-…08-*.css`, `dark.css` — concatenated in **path order** at generation time,
+  so the numbered prefixes inside `css/components/` are the cascade order. Renaming one reorders the stylesheet.
 - Reuse existing Bootstrap/DataTables class conventions, keep selectors shallow, prefer CSS variables for theme values.
 
 ## Docs
@@ -79,11 +80,27 @@ ES `import`/`export` syntax in source, but the Python `DependencyProcessor` stri
 ```
 main.js                  startup entry; imports and calls all setup functions
 common.js                shared utilities (format_duration, add_alert, path helpers, …)
-filter.js                filter pipeline + filter profiles
 localstorage.js          settings persistence, merge_deep / merge_view / merge_layout
 layout.js                GridStack setup, customize/save layout, undo/redo snapshots
 menu.js                  tab/page switching (update_menu)
-eventlisteners.js        wires every modal/filter/settings listener on load
+filter/
+  pipeline.js            filter_data + every apply_*/filter_* run filter, setup_filtered_data_and_filters
+  section_selects.js     the per-section suite/test/tag/keyword/compare selects
+  modal_options.js       fills the filter modal's option lists (runs, tags, dates, metadata, versions, custom)
+  suite_path.js          suite path navigator and its run/data filters
+  availability.js        per-option run counts and greying out (issue #296)
+  controls.js            filter indicators, checkbox handlers, every clear_* function
+  profiles.js            filter profile capture/compare/apply/storage/edit mode
+  profile_merge.js       merge_two_profiles ("largest horizon" rules)
+eventlisteners/
+  filter_modal.js        wires the filter modal
+  merge_profiles.js      wires the merge-profiles dialogue
+  settings_modal.js      wires the settings modal (toggles, theme colours, branding, JSON config)
+  confirm_modal.js       confirm_action promise wrapper
+  section_filters.js     wires the per-section filters and the overview switches
+  graph_view_buttons.js  fullscreen, graph type buttons, show/hide, per-graph toggles
+  collapsables.js        collapse icons
+  overview_listeners.js  run card version links and the overview "sort by" selects
 statwidgets.js           custom stat widgets (CRUD, render, modal)
 linkwidgets.js           custom link widgets (same pattern)
 customsections.js        user-defined dashboard sections
diff --git a/.claude/skills/dashboard-graphs/SKILL.md b/.claude/skills/dashboard-graphs/SKILL.md
index 6e0bc9ed..21945e7c 100644
--- a/.claude/skills/dashboard-graphs/SKILL.md
+++ b/.claude/skills/dashboard-graphs/SKILL.md
@@ -91,9 +91,9 @@ Steps:
 3. **`js/graph_creation/<section>.js`** — `build_<snake_key>_config()` calling `get_graph_config(type, data, title, xTitle, yTitle)`, then the one-liners `create_*` (`create_chart(id, build_fn)`) and `update_*` (`update_chart`). Respect `settings.graphTypes.<key>GraphType` for each view option and `inFullscreen && inFullscreenGraph.includes(key)` for larger limits. Export both.
 4. **`js/graph_creation/all.js`** — import and call `create_*` in `create_dashboard_graphs()` and `update_*` in `update_dashboard_graphs()` inside the right section block.
 5. **`js/variables/information.js`** — add `key` to `graphKeys` (generates Fullscreen/Close/Move/Show/Hide tooltips) and one `"<key>Graph<View>": "…"` tooltip per view option.
-6. **`js/variables/settings.js`** — nothing for plain graphs (types and show/hide lists are derived). Only add a `settings.switch.*` entry if the graph gets its own toggle (e.g. `ignoreSkips`), wired in `eventlisteners.js` and persisted via `set_local_storage_item`.
+6. **`js/variables/settings.js`** — nothing for plain graphs (types and show/hide lists are derived). Only add a `settings.switch.*` entry if the graph gets its own toggle (e.g. `ignoreSkips`), wired in `eventlisteners/graph_view_buttons.js` and persisted via `set_local_storage_item`.
 7. **Template** — nothing; sections already exist (`#runStatisticsSection` … `#runDataHidden`). Compare/Table graphs are the exception and have their own markup patterns in `graphmetadata.js` (`_tableHtml`).
-8. **CSS** — only for a new `viewOptionClassMap` icon class (`css/components.css`).
+8. **CSS** — only for a new `viewOptionClassMap` icon class (`css/components/06-graphs.css`).
 9. **Tests** — reference screenshot for the section changes: regenerate `dashboard_output/<section>/base<Section>Section.png` in Docker; add a JS unit test for the `graph_data` function.
 10. **Docs** — row in the section table of `docs/graphs-tables.md` (Graph Name / Views / Views Description / Notes).
 
diff --git a/.claude/skills/filtering-and-settings/SKILL.md b/.claude/skills/filtering-and-settings/SKILL.md
index c7ded237..f1db98df 100644
--- a/.claude/skills/filtering-and-settings/SKILL.md
+++ b/.claude/skills/filtering-and-settings/SKILL.md
@@ -12,7 +12,7 @@ The dashboard front-end has three tightly coupled systems:
 2. **Filtering** — a multi-stage pipeline that produces `filteredRuns/Suites/Tests/Keywords` from the raw decoded data
 3. **Layout** — GridStack-based drag-and-drop positioning + section ordering, also persisted in `settings`
 
-Key files: `js/variables/settings.js`, `js/variables/globals.js`, `js/filter.js`, `js/localstorage.js`, `js/eventlisteners.js`, `js/layout.js`
+Key files: `js/variables/settings.js`, `js/variables/globals.js`, `js/filter/` (8 modules), `js/localstorage.js`, `js/eventlisteners/` (8 modules), `js/layout.js`
 
 ---
 
@@ -58,7 +58,7 @@ All graph-level toggle switches (the controls directly on individual graphs, not
 
 - `update_switch_local_storage(key, state, firstLoad)` — for checkbox switches (overview toggles, suite paths); on `firstLoad=true`, reads from `settings` and sets the DOM element
 - Direct `set_local_storage_item("switch.*", value)` calls — for graph-specific switches like `ignoreSkips`, `onlyLastRunSuite`, `heatmapStatus`, etc.
-- Data-driven initialization loops in `eventlisteners.js` — arrays of `[elementId, settingsKey]` pairs that restore checkbox/select states on load and wire change listeners that persist to localStorage
+- Data-driven initialization loops in `eventlisteners/graph_view_buttons.js` — arrays of `[elementId, settingsKey]` pairs that restore checkbox/select states on load and wire change listeners that persist to localStorage
 
 ### Deep Merge Behavior (`merge_deep`)
 
@@ -80,7 +80,7 @@ In `localstorage.js`: if the placeholder string was not replaced (i.e. the strin
 
 ---
 
-## Filtering Pipeline (`js/filter.js`)
+## Filtering Pipeline (`js/filter/pipeline.js`)
 
 `setup_filtered_data_and_filters()` is called when the filter modal closes, when navigating from the overview page, and on initial load. Stages, in order:
 
@@ -129,7 +129,7 @@ settings.filterProfiles = {
 ```
 A profile need not contain all keys — only the keys that were checked when the profile was saved.
 
-### Key functions (`filter.js`)
+### Key functions (`js/filter/`)
 | Function | What it does |
 |---|---|
 | `capture_current_filters()` | Reads all filter DOM controls → plain profile object |
@@ -178,7 +178,7 @@ Key mutable globals used across modules:
 
 | Global | Description |
 |---|---|
-| `filteredRuns`, `filteredSuites`, `filteredTests`, `filteredKeywords` | Current filtered data arrays (reassigned by `filter.js` after each filter pass) |
+| `filteredRuns`, `filteredSuites`, `filteredTests`, `filteredKeywords` | Current filtered data arrays (reassigned by `filter/pipeline.js` after each filter pass) |
 | `filteredAmount` | Total count before amount-slicing (shown as "showing X of N runs") |
 | `gridUnified`, `gridRun`, `gridSuite`, `gridTest`, `gridKeyword`, `gridCompare` | GridStack instances per section |
 | `gridEditMode` | Boolean: layout editor is active |
@@ -221,7 +221,7 @@ In normal mode, hidden graphs are rendered to a `#[section]DataHidden` container
 
 ---
 
-## Event Wiring (`js/eventlisteners.js`)
+## Event Wiring (`js/eventlisteners/`)
 
 `setup_filter_modal()` — wires all filter modal controls. The Bootstrap `hidden.bs.modal` event triggers `setup_filtered_data_and_filters()` + `update_dashboard_graphs()` (with a loading overlay and double `requestAnimationFrame` to let the DOM settle before rendering).
 
diff --git a/.claude/skills/js-bundling/SKILL.md b/.claude/skills/js-bundling/SKILL.md
index 03997ac6..07e195e6 100644
--- a/.claude/skills/js-bundling/SKILL.md
+++ b/.claude/skills/js-bundling/SKILL.md
@@ -60,7 +60,7 @@ This block replaces `<!-- placeholder_javascript -->` in `templates/dashboard.ht
 
 ## How CSS Is Bundled
 
-`DependencyProcessor._inline_css_files()` reads all `.css` files under `robotframework_dashboard/css/` in sorted order (`base.css`, `colors.css`, `components.css`, `dark.css`) and concatenates them into a single `<style>` block that replaces `<!-- placeholder_css -->`.
+`DependencyProcessor._inline_css_files()` reads all `.css` files under `robotframework_dashboard/css/` recursively in **path order** (`base.css`, `colors.css`, `components/01-cards.css` … `components/08-section-filters-modal.css`, `dark.css`) and concatenates them into a single `<style>` block that replaces `<!-- placeholder_css -->`.
 
 ---
 
diff --git a/.claude/skills/js-features/SKILL.md b/.claude/skills/js-features/SKILL.md
index c477424b..63099bc1 100644
--- a/.claude/skills/js-features/SKILL.md
+++ b/.claude/skills/js-features/SKILL.md
@@ -31,7 +31,7 @@ Must contain:
 
 **Import the new module from `layout.js`** — the bundler discovers it via the import graph from `main.js`.
 
-### Part 2 — CSS (`css/components.css`)
+### Part 2 — CSS (`css/components/03-widgets.css`)
 
 Required CSS classes:
 
@@ -167,7 +167,7 @@ Some keys only exist in localStorage (not in the `settings` defaults object). Th
 | `layouts` | `layout.js` |
 | `libraries` | keyword library toggles |
 | `theme` | theme switcher |
-| `filterProfiles` | `filter.js` |
+| `filterProfiles` | `filter/profiles.js` |
 | `statWidgets` | `statwidgets.js` |
 | `linkWidgets` | `linkwidgets.js` |
 | `customSections` | `customsections.js` |
@@ -193,7 +193,7 @@ The `STAT_WIDGET_COLORS` and `STAT_WIDGET_BG_COLORS` arrays from `js/variables/s
 import { STAT_WIDGET_COLORS, STAT_WIDGET_BG_COLORS } from './variables/statwidgetdefs.js';
 ```
 
-The color CSS classes they reference (`.white-text`, `.blue-text`, `.blue-bg`, etc.) are defined in `css/components.css` and `css/base.css`.
+The color CSS classes they reference (`.white-text`, `.blue-text`, `.blue-bg`, etc.) are defined in `css/components/03-widgets.css`, `css/components/04-status-colors.css` and `css/base.css`.
 
 ---
 
@@ -216,5 +216,5 @@ Do not use an `<a>` tag as the outermost clickable wrapper for GridStack items 
 | `js/<name>widgets.js` | **Create** — full widget module |
 | `js/layout.js` | Import + add to snapshots + render calls + setup call |
 | `js/localstorage.js` | (1) Add key to `merge_deep` whitelist AND (2) add `data-gs-id` prefix to `merge_layout` allowlist — **both are required** or positions reset on refresh |
-| `css/components.css` | Add all widget CSS classes |
+| `css/components/03-widgets.css` | Add all widget CSS classes |
 | `templates/dashboard.html` | Add modal HTML |
diff --git a/.claude/skills/server-api/SKILL.md b/.claude/skills/server-api/SKILL.md
index 590afdb1..1c992e5d 100644
--- a/.claude/skills/server-api/SKILL.md
+++ b/.claude/skills/server-api/SKILL.md
@@ -7,7 +7,16 @@ description: "The optional FastAPI server (--server): every REST endpoint, HTTP
 
 ## Overview
 
-The server is an optional FastAPI application started with `robotdashboard --server` (or `-s host:port:user:pass`). It wraps a persistent `RobotDashboard` instance and exposes REST endpoints for managing outputs and serving the dashboard. Implementation is in `robotframework_dashboard/server.py`.
+The server is an optional FastAPI application started with `robotdashboard --server` (or `-s host:port:user:pass`). It wraps a persistent `RobotDashboard` instance and exposes REST endpoints for managing outputs and serving the dashboard. Implementation is split across four modules:
+
+| File | Holds |
+|---|---|
+| `server.py` | `ApiServer`: app + auth setup, the HTML serving routes (`/`, `/admin`, `/log`, `/refresh-dashboard`, catch-all), `run()` |
+| `server_models.py` | The Pydantic models (`AddOutput`, `RemoveOutputs`, `AddLog`, …), their `*_model_config` OpenAPI examples and `model_examples()` |
+| `server_routes_outputs.py` | `register_output_routes(server, authenticate)` — `/get-outputs`, `/add-outputs`, `/add-output-file`, `/remove-outputs` |
+| `server_routes_logs.py` | `register_log_routes(server, authenticate)` — `/get-logs`, `/add-log`, `/add-log-file`, `/remove-log` |
+
+The route modules are plain functions that take the `ApiServer` instance (they read `server.robotdashboard`, `server.log_dir`, `server.no_autoupdate`) and the `authenticate` dependency built in `_setup_routes`. A new endpoint goes in the matching route module; a new model goes in `server_models.py`. `server.py` re-exports the models, so `from robotframework_dashboard.server import ResponseMessage` keeps working.
 
 ---
 
diff --git a/.claude/skills/testing/javascript-unit-tests.md b/.claude/skills/testing/javascript-unit-tests.md
index 089b5bbc..3225ffbc 100644
--- a/.claude/skills/testing/javascript-unit-tests.md
+++ b/.claude/skills/testing/javascript-unit-tests.md
@@ -55,7 +55,7 @@ tests/javascript/
 | File | What it covers |
 |---|---|
 | `common.test.js` | `format_duration`, `strip_tz_suffix`, `get_next_folder_level`, `compare_to_average`, case converters, `parse_run_start`, `format_relative_time`, `format_run_start_exact`, `transform_file_path`, `combine_paths`, `debounce` |
-| `filter.test.js` | Re-implemented pure logic from `filter.js` (`sort_wall_clock`, `remove_milliseconds`, `remove_timezones`, `filter_data`) plus the exported `convert_timezone` — most of `filter.js` reads the DOM and is covered by robot tests instead |
+| `filter.test.js` | Re-implemented pure logic from `filter/pipeline.js` (`sort_wall_clock`, `remove_milliseconds`, `remove_timezones`, `filter_data`) plus the exported `convert_timezone` — most of `filter/` reads the DOM and is covered by robot tests instead |
 | `localstorage.test.js` | `merge_deep`, `set_nested_setting`, `merge_view_section_or_graph` and related merge helpers |
 | `log.test.js` | `open_log_file` (regression for issue #311) |
 | `graph_data/helpers.test.js` | `convert_timeline_data` |
@@ -73,7 +73,7 @@ Only **pure functions** (no DOM access, no Chart.js instances, no DataTables) sh
 
 | Classification | Examples |
 |---|---|
-| **Pure / testable** | `common.js`, `filter.js`, `localstorage.js`, `graph_data/tooltip_helpers.js`, `graph_data/failed.js`, `graph_data/flaky.js`, `graph_data/donut.js`, `graph_data/messages.js`, `graph_data/time_consuming.js`, `graph_data/graph_config.js`, `graph_data/helpers.js` |
+| **Pure / testable** | `common.js`, `filter/pipeline.js`, `filter/availability.js`, `localstorage.js`, `graph_data/tooltip_helpers.js`, `graph_data/failed.js`, `graph_data/flaky.js`, `graph_data/donut.js`, `graph_data/messages.js`, `graph_data/time_consuming.js`, `graph_data/graph_config.js`, `graph_data/helpers.js` |
 | **DOM-dependent / not testable** | `graph_data/statistics.js`, `graph_data/duration.js`, `graph_data/heatmap.js`, `graph_data/duration_deviation.js`, `graph_creation/*.js`, `js/main.js`, `js/admin_page/*.js` |
 
 If a module has **some** pure functions and **some** DOM-dependent functions, test only the pure ones. Do not attempt to mock `document`, `window.Chart`, or DataTables.
diff --git a/CLAUDE.md b/CLAUDE.md
index d8552e7b..ac683715 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -76,13 +76,17 @@ Optional `--server` mode hosts the same pipeline behind FastAPI (upload endpoint
 | `robotframework_dashboard/abstractdb.py` | `AbstractDatabaseProcessor` for custom backends (`--databaseclass`) |
 | `robotframework_dashboard/dashboard.py` | `DashboardGenerator` — template rendering |
 | `robotframework_dashboard/dependencies.py` | `DependencyProcessor` — JS/CSS inlining, CDN/offline switching |
-| `robotframework_dashboard/server.py` | FastAPI server |
+| `robotframework_dashboard/server.py` | `ApiServer` — app setup, auth, the HTML serving routes (`/`, `/admin`, `/log`, catch-all) |
+| `robotframework_dashboard/server_models.py` | Pydantic request/response models + their OpenAPI examples |
+| `robotframework_dashboard/server_routes_outputs.py` / `server_routes_logs.py` | The `/…-output(s)` and `/…-log(s)` endpoints, registered onto the app by `_setup_routes` |
 | `robotframework_dashboard/robotdashboardlistener.py` | Robot listener that uploads results to the server |
 | `robotframework_dashboard/js/main.js` | Browser startup entry; everything is reached via its import graph |
 | `robotframework_dashboard/templates/dashboard.html`, `admin.html` | Templates with string placeholders (not Jinja) |
 
 Frontend source: `robotframework_dashboard/js/` and `css/`. **There is no Node bundler** for the dashboard — Python does the bundling. `package.json` exists only for the VitePress docs site.
 
+The two largest front-end concerns live in directories, not single files: `js/filter/` (pipeline, modal option lists, suite path, option availability, controls, profiles) and `js/eventlisteners/` (one module per modal or listener group). `css/components/` is numbered because path order is cascade order. The `coding-standards` skill has the per-file map.
+
 ---
 
 ## Hard rules
diff --git a/robotframework_dashboard/css/components.css b/robotframework_dashboard/css/components.css
deleted file mode 100644
index 87344273..00000000
--- a/robotframework_dashboard/css/components.css
+++ /dev/null
@@ -1,854 +0,0 @@
-.tooltip-popup {
-  position: fixed;
-  max-width: 360px;
-  padding: 8px 12px;
-  border-radius: 8px;
-  background-color: var(--color-tooltip-bg);
-  color: var(--color-tooltip-text);
-  box-shadow: 0 2px 8px var(--color-shadow-soft);
-  font-size: 0.95rem;
-  white-space: pre-line;
-  pointer-events: none;
-  z-index: 9999;
-  box-sizing: border-box;
-}
-
-.card {
-  margin-bottom: 1rem;
-  box-shadow: 0 4px 20px var(--color-shadow-strong);
-  color: var(--color-text);
-  background: var(--color-bg);
-}
-
-.overview-card > .card {
-  background: var(--color-card) !important;
-}
-
-.stats {
-  float: right;
-  text-align: right;
-  font-size: 0.9em;
-  white-space: nowrap;
-}
-
-.section-filters {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 0.75rem;
-  row-gap: 6px;
-}
-
-.section-filters .filter-group {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.container-fluid .form-check-input,
-#sectionFiltersModal .form-check-input {
-  margin-top: 6px;
-  position: static;
-}
-
-.fullscreen {
-  position: fixed !important;
-  width: 100% !important;
-  height: 100% !important;
-  left: 0 !important;
-  top: 0 !important;
-  z-index: 10 !important;
-  padding: 20px 20px 20px 20px !important;
-  border-radius: 0px !important;
-  background-color: var(--color-fullscreen-bg) !important;
-}
-
-.fullscreen .section-filters {
-  flex: 0 0 auto;
-}
-
-.fullscreen .graph-body {
-  flex: 1 1 0;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.dropdown-menu {
-  width: max-content;
-}
-
-.version-selected-dot {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  background-color: var(--color-version-dot);
-  border-radius: 50%;
-  margin-left: 5px;
-  margin-bottom: 2px;
-  vertical-align: middle;
-}
-
-.selectBox {
-  position: relative;
-}
-
-.selectBox select {
-  width: 100%;
-}
-
-.overSelect {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-/* The dropdown panel paints its own opaque surface: the rows inside it use
-   --color-card, which is semi-transparent in dark mode, so without this the modal rows
-   underneath the panel bleed through and nothing in the panel is readable. */
-.filterCheckBoxes {
-  display: none;
-  position: absolute;
-  z-index: 1056;
-  background-color: var(--color-popover-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 0.375rem;
-  box-shadow: 0 0.5rem 1rem var(--color-shadow-soft);
-  padding: 0.25rem;
-}
-
-.filterCheckBoxes .list-group-item {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.filterCheckBoxes label {
-  display: block;
-}
-
-/* the search box scrolls with the option list, so pin it to the top of the panel */
-.filterCheckBoxes > input.form-control,
-.filterCheckBoxes > .filter-search-wrapper {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background-color: var(--color-popover-bg);
-}
-
-/* filter options that match no runs with the other filters applied: still visible and
-   selectable, only marked so it is clear they cannot add anything to the result. No
-   opacity: it dims the checkbox and the count as well, and it is ignored on <option>
-   elements in native select popups anyway. */
-.filter-option-unavailable {
-  color: var(--color-text-disabled);
-}
-
-li.filter-option-unavailable {
-  background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
-}
-
-li.filter-option-unavailable > label.form-check-label {
-  color: var(--color-text-disabled);
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
-
-/* the count is the reason a row is greyed out, so it keeps full contrast and sits in its
-   own right-aligned column instead of trailing a label of arbitrary length */
-.filter-option-count {
-  color: var(--color-text-muted);
-  font-size: 0.85em;
-  margin-left: auto;
-  padding-left: 0.5rem;
-  flex: 0 0 auto;
-  font-variant-numeric: tabular-nums;
-}
-
-li.filter-option-unavailable > .filter-option-count {
-  font-weight: 600;
-}
-
-.filterCheckBoxes li.list-group-item > label.form-check-label {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.filter-search-wrapper {
-  position: relative;
-}
-
-.filter-search-wrapper .form-control {
-  padding-right: 1.5rem;
-}
-
-.filter-search-clear {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0 0.15rem 0;
-  border: none;
-  background: none;
-  color: inherit;
-  opacity: 0.6;
-  font-size: 1.4rem;
-  line-height: 1;
-  cursor: pointer;
-}
-
-.filter-search-clear:hover {
-  opacity: 1;
-}
-
-.filter-profile-bar {
-  border-bottom: 1px solid var(--bs-border-color);
-}
-
-.filter-profile-editor {
-  border-bottom: 1px solid var(--bs-border-color);
-}
-
-.filter-profile-check {
-  flex-shrink: 0;
-}
-
-.filter-profile-delete {
-  opacity: 0.5;
-  font-size: 1.1rem;
-  line-height: 1;
-  padding: 0 0.3rem;
-}
-
-.filter-profile-delete:hover {
-  opacity: 1;
-}
-
-.border {
-  min-height: 42px;
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.stat-widget-body {
-  justify-content: center;
-  align-items: center;
-}
-
-/* Color picker buttons inside the Add Stat Widget modal */
-.stat-color-btn {
-  min-width: 60px;
-}
-
-/* "All" tab stat list inside the Add Stat Widget modal */
-.add-all-widgets-list {
-  max-height: 60vh;
-  overflow-y: auto;
-}
-
-.add-all-widgets-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.add-all-widgets-row .form-check {
-  margin-bottom: 0;
-}
-
-.add-all-widgets-row .add-all-widgets-title {
-  flex: 1 1 auto;
-}
-
-.add-all-widgets-row .add-all-widgets-badge {
-  flex: 0 0 auto;
-}
-
-.add-all-widgets-group-heading {
-  font-weight: 600;
-  margin-top: 0.5rem;
-  margin-bottom: 0.25rem;
-}
-
-.add-all-widgets-group-heading:first-child {
-  margin-top: 0;
-}
-
-/* Custom section divider bar rendered inside the unified GridStack */
-.custom-section-divider {
-  display: flex;
-  align-items: center;
-  padding: 0 1rem;
-  border-radius: 6px;
-  height: 100%;
-  width: 100%;
-  position: relative;
-}
-
-.custom-section-title {
-  flex: 1;
-  font-size: 1rem;
-  font-weight: 600;
-  text-align: center;
-  user-select: none;
-}
-
-/* Move to first/last + delete controls on custom widgets/sections — pinned to top-right,
-   out of flex flow, sized and spaced like the icons in graph headers */
-.custom-widget-move-controls {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* Compact flex layout for custom stat widgets — works at any GridStack size */
-.stat-widget-inner {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25rem;
-  height: 100%;
-  text-align: center;
-  overflow: hidden;
-}
-
-.stat-widget-title {
-  margin: 0;
-  font-weight: 600;
-  font-size: 0.85rem;
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-/* Leave room for the move/delete controls pinned to the top-right in edit mode */
-.stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title {
-  max-width: calc(100% - 96px);
-}
-
-/* When the item is very short (h=1 row ≈ 60px) switch to a side-by-side row */
-.grid-stack-item-content:has(.stat-widget-inner) {
-  padding: 8px 12px;
-}
-
-.grid-stack-item[gs-h="1"] .stat-widget-inner,
-.grid-stack-item[data-gs-h="1"] .stat-widget-inner {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.grid-stack-item[gs-h="1"] .stat-widget-title,
-.grid-stack-item[data-gs-h="1"] .stat-widget-title {
-  flex: 1 1 0;
-  text-align: left;
-  max-width: calc(100% - 40px); /* leave room for the value */
-}
-
-/* Leave room for the move/delete controls pinned to the top-right in edit mode */
-.grid-stack-item[gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title,
-.grid-stack-item[data-gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title {
-  max-width: calc(100% - 136px); /* value + move/delete controls */
-}
-
-.grid-stack-item[gs-h="1"] .stat-value,
-.grid-stack-item[data-gs-h="1"] .stat-value {
-  flex-shrink: 0;
-  font-size: 1.1rem;
-}
-
-/* Leave room for the move/delete controls pinned to the top-right in edit mode */
-.grid-stack-item[gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-value,
-.grid-stack-item[data-gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-value {
-  margin-right: 96px;
-}
-
-.grid-stack-item-content.blue-bg   { background-color: rgba(13, 110, 253, 0.15); }
-.grid-stack-item-content.green-bg  { background-color: rgba(151, 189, 97, 0.2);  }
-.grid-stack-item-content.red-bg    { background-color: rgba(206, 62, 1, 0.2);    }
-.grid-stack-item-content.yellow-bg { background-color: rgba(254, 216, 79, 0.2);  }
-
-/* Inner layout — mirrors stat-widget-inner */
-.link-widget-inner {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 0.25rem;
-  height: 100%;
-  text-align: center;
-  overflow: hidden;
-}
-
-/* Label — main large text, like .stat-value */
-.link-widget-label {
-  margin: 0;
-  font-weight: 600;
-  font-size: 1.5rem;
-  line-height: 1.2;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-/* URL preview — small muted text below the label */
-.link-widget-url {
-  font-size: 0.72rem;
-  opacity: 0.55;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-}
-
-/* Leave room for the move/delete controls pinned to the top-right in edit mode */
-.link-widget-inner:has(.custom-widget-move-controls) .link-widget-label,
-.link-widget-inner:has(.custom-widget-move-controls) .link-widget-url {
-  max-width: calc(100% - 96px);
-}
-
-/* Clickable in non-edit mode */
-.link-widget-clickable {
-  cursor: pointer;
-}
-
-/* Same padding as stat widget tiles */
-.grid-stack-item-content:has(.link-widget-inner) {
-  padding: 8px 12px;
-}
-
-/* h=1 compact row — mirrors stat widget compact layout */
-.grid-stack-item[gs-h="1"] .link-widget-inner,
-.grid-stack-item[data-gs-h="1"] .link-widget-inner {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.grid-stack-item[gs-h="1"] .link-widget-label,
-.grid-stack-item[data-gs-h="1"] .link-widget-label {
-  flex: 1 1 0;
-  font-size: 1.1rem;
-  text-align: left;
-  max-width: calc(60% - 10px);
-}
-
-.grid-stack-item[gs-h="1"] .link-widget-url,
-.grid-stack-item[data-gs-h="1"] .link-widget-url {
-  flex-shrink: 0;
-  font-size: 0.72rem;
-  text-align: right;
-  max-width: 40%;
-}
-
-/* Leave room for the move/delete controls pinned to the top-right in edit mode */
-.grid-stack-item[gs-h="1"] .link-widget-inner:has(.custom-widget-move-controls) .link-widget-url {
-  max-width: calc(40% - 96px);
-  margin-right: 96px;
-}
-
-.fullscreen .stat-value {
-  font-size: 4rem;
-}
-
-.fullscreen .stat-label {
-  font-size: 2rem;
-}
-
-.green-text,
-.text-passed {
-  color: var(--color-passed);
-}
-
-.border-passed {
-  border-color: var(--color-passed);
-}
-
-.red-text,
-.text-failed {
-  color: var(--color-failed);
-}
-
-.border-failed {
-  border-color: var(--color-failed);
-}
-
-.yellow-text {
-  color: var(--color-skipped);
-}
-
-.border-skipped {
-  border-color: var(--color-skipped);
-}
-
-.blue-text {
-  color: var(--color-info);
-}
-
-.overview-canvas {
-  height: 200px;
-}
-
-/* relative run time, pinned to the bottom right corner of a run card without
-   affecting the layout of the stats/duration columns next to the donut */
-.overview-card .card-body {
-  position: relative;
-}
-
-/* only when custom filter lines are rendered, an unconditional padding changes the height of
-   every run card and breaks the overview reference screenshots */
-.overview-card .card-body:has(.run-card-custom-filters) {
-  padding-bottom: 2rem;
-}
-
-.run-card-run-time {
-  position: absolute;
-  right: 1rem;
-  bottom: 0.55rem;
-  color: var(--color-text-muted);
-  cursor: help;
-  font-size: 0.85em;
-  white-space: nowrap;
-}
-
-.overview-card {
-  cursor: pointer;
-  min-width: 300px;
-}
-
-.overview-card .card {
-  border-radius: 1rem;
-}
-
-.project-run-cards-container {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 24px;
-}
-
-.project-run-cards-container .overview-card {
-  flex: 0 1 calc((100% - 48px) / 3);
-}
-
-.run-card-version-title {
-  gap: 0.25rem;
-  width: fit-content;
-}
-
-.run-card-version-title:hover h5 {
-  color: var(--color-run-card-hover) !important;
-}
-
-.run-card-small-version {
-  display: flex;
-  gap: 0.25rem;
-  width: fit-content;
-}
-
-.run-card-small-version:hover div {
-  color: var(--color-run-card-hover) !important;
-}
-
-.run-card-custom-filters {
-  display: flex;
-  flex-direction: column;
-  gap: 0.1rem;
-  width: fit-content;
-}
-
-.run-card-custom-filter {
-  font-size: 0.85em;
-}
-
-.grid-stack-item-content {
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  box-shadow: 0 4px 20px var(--color-shadow-strong);
-  background-color: var(--color-section-card-bg)
-}
-
-.graph-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-}
-
-.graph-header h6 {
-  margin: 0;
-  font-weight: 600;
-}
-
-.graph-controls {
-  display: flex;
-  gap: 8px;
-}
-
-/* Icon row in section card headers (add stat/link widget, add section, move/show/hide section) */
-.section-header-icons {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.grid-stack-item-content .graph-body {
-  flex: 1 1 auto;
-  display: flex;
-  overflow-x: hidden;
-  overflow-y: auto;
-  width: 100%;
-}
-
-.graph-body .row {
-  flex-wrap: wrap;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.grid-stack-item-content .graph-body .vertical {
-  overflow-y: auto;
-}
-
-canvas {
-  display: block;
-}
-
-.table > :not(caption) > * > * {
-  color: var(--color-table-text);
-}
-
-#alertContainer {
-  z-index: 1100;
-  top: 7rem;
-  max-width: 80%;
-}
-
-.alert-dismissible {
-  padding-right: 16px !important;
-}
-
-.grid-stack-item-content:has(.hidden-graph:not([hidden])),
-.table-section:has(.hidden-graph:not([hidden])),
-.card:has(.hidden-section:not([hidden])) {
-  opacity: 0.5;
-}
-
-.modal.dimmed {
-  pointer-events: none;
-  filter: brightness(0.5);
-}
-
-/* Bootstrap >= 5.3.1 no longer spaces the modal header itself (only its .btn-close gets
-   margin-left: auto); the dashboard modals use their own button groups, so keep the
-   title left and the buttons right */
-.modal-header {
-  justify-content: space-between;
-}
-
-#runTag {
-  max-height: 400px;
-  overflow: auto;
-}
-
-.btn.collapse-icon:active {
-  border: none;
-  background-color: transparent;
-}
-
-@media print {
-  table {
-    width: 100%;
-    page-break-inside: auto;
-  }
-
-  .grid-stack-item-contentvas {
-    width: 100%;
-    overflow: hidden;
-    page-break-inside: avoid;
-    break-inside: avoid;
-    display: block;
-  }
-
-  canvas {
-    height: auto !important;
-    max-width: 100% !important;
-  }
-}
-
-.loader-wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: calc(100vh - 55px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: transparent;
-}
-
-/* Individual graph loading overlay */
-.graph-loading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--color-fullscreen-bg);
-    border-radius: 8px;
-    z-index: 10;
-}
-
-/* Smaller ball-grid-beat for individual graph overlays */
-.ball-grid-beat-sm {
-    width: 60px;
-    grid-gap: 6px;
-}
-
-.ball-grid-beat-sm div {
-    width: 16px;
-    height: 16px;
-}
-
-/* Full-page loading overlay for filter updates */
-.filter-loading-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(238, 238, 238, 0.7);
-    z-index: 1040;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.dark-mode .filter-loading-overlay {
-    background: rgba(30, 41, 59, 0.7);
-}
-
-.ball-grid-beat {
-  width: 120px;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 12px;
-}
-
-.ball-grid-beat div {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background-color: var(--color-highlight);
-  animation: ball-grid-beat 0.7s infinite linear;
-}
-
-.ball-grid-beat div:nth-child(1) {
-  animation-delay: 0.15s;
-}
-
-.ball-grid-beat div:nth-child(2) {
-  animation-delay: 0.1s;
-}
-
-.ball-grid-beat div:nth-child(3) {
-  animation-delay: 0.05s;
-}
-
-.ball-grid-beat div:nth-child(4) {
-  animation-delay: 0.2s;
-}
-
-.ball-grid-beat div:nth-child(5) {
-  animation-delay: 0.15s;
-}
-
-.ball-grid-beat div:nth-child(6) {
-  animation-delay: 0.1s;
-}
-
-.ball-grid-beat div:nth-child(7) {
-  animation-delay: 0.25s;
-}
-
-.ball-grid-beat div:nth-child(8) {
-  animation-delay: 0.2s;
-}
-
-.ball-grid-beat div:nth-child(9) {
-  animation-delay: 0.15s;
-}
-
-@keyframes ball-grid-beat {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(0.7);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-#sectionFiltersModal .modal-body {
-  padding: 1rem;
-}
-
-#sectionFiltersModal .card {
-  background-color: var(--color-section-card-bg) !important;
-  border: none;
-  box-shadow: 0 0.125rem 0.25rem var(--color-shadow-soft);
-}
-
-#sectionFiltersModal .card-header {
-  background-color: var(--color-section-card-bg) !important;
-  border-bottom: 1px solid var(--color-section-card-border);
-  color: var(--color-section-card-text);
-}
-
-#sectionFiltersModal .card-body {
-  background-color: var(--color-section-card-bg) !important;
-  color: var(--color-section-card-text);
-  padding: 1.25rem;
-}
-
-.list-group-item[hidden] {
-  display: none !important;
-}
-
-.list-group-item {
-  background-color: var(--color-card);
-}
diff --git a/robotframework_dashboard/css/components/01-cards.css b/robotframework_dashboard/css/components/01-cards.css
new file mode 100644
index 00000000..fecca486
--- /dev/null
+++ b/robotframework_dashboard/css/components/01-cards.css
@@ -0,0 +1,78 @@
+/* The numbered prefix is the cascade order: these files are concatenated between
+   colors.css and dark.css in path order, so renaming one reorders the stylesheet. */
+
+.tooltip-popup {
+  position: fixed;
+  max-width: 360px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background-color: var(--color-tooltip-bg);
+  color: var(--color-tooltip-text);
+  box-shadow: 0 2px 8px var(--color-shadow-soft);
+  font-size: 0.95rem;
+  white-space: pre-line;
+  pointer-events: none;
+  z-index: 9999;
+  box-sizing: border-box;
+}
+
+.card {
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 20px var(--color-shadow-strong);
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+
+.overview-card > .card {
+  background: var(--color-card) !important;
+}
+
+.stats {
+  float: right;
+  text-align: right;
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.section-filters {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 0.75rem;
+  row-gap: 6px;
+}
+
+.section-filters .filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.container-fluid .form-check-input,
+#sectionFiltersModal .form-check-input {
+  margin-top: 6px;
+  position: static;
+}
+
+.fullscreen {
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+  left: 0 !important;
+  top: 0 !important;
+  z-index: 10 !important;
+  padding: 20px 20px 20px 20px !important;
+  border-radius: 0px !important;
+  background-color: var(--color-fullscreen-bg) !important;
+}
+
+.fullscreen .section-filters {
+  flex: 0 0 auto;
+}
+
+.fullscreen .graph-body {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+}
diff --git a/robotframework_dashboard/css/components/02-filters.css b/robotframework_dashboard/css/components/02-filters.css
new file mode 100644
index 00000000..9cbf2464
--- /dev/null
+++ b/robotframework_dashboard/css/components/02-filters.css
@@ -0,0 +1,157 @@
+.dropdown-menu {
+  width: max-content;
+}
+
+.version-selected-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background-color: var(--color-version-dot);
+  border-radius: 50%;
+  margin-left: 5px;
+  margin-bottom: 2px;
+  vertical-align: middle;
+}
+
+.selectBox {
+  position: relative;
+}
+
+.selectBox select {
+  width: 100%;
+}
+
+.overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+/* The dropdown panel paints its own opaque surface: the rows inside it use
+   --color-card, which is semi-transparent in dark mode, so without this the modal rows
+   underneath the panel bleed through and nothing in the panel is readable. */
+.filterCheckBoxes {
+  display: none;
+  position: absolute;
+  z-index: 1056;
+  background-color: var(--color-popover-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  box-shadow: 0 0.5rem 1rem var(--color-shadow-soft);
+  padding: 0.25rem;
+}
+
+.filterCheckBoxes .list-group-item {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.filterCheckBoxes label {
+  display: block;
+}
+
+/* the search box scrolls with the option list, so pin it to the top of the panel */
+.filterCheckBoxes > input.form-control,
+.filterCheckBoxes > .filter-search-wrapper {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: var(--color-popover-bg);
+}
+
+/* filter options that match no runs with the other filters applied: still visible and
+   selectable, only marked so it is clear they cannot add anything to the result. No
+   opacity: it dims the checkbox and the count as well, and it is ignored on <option>
+   elements in native select popups anyway. */
+.filter-option-unavailable {
+  color: var(--color-text-disabled);
+}
+
+li.filter-option-unavailable {
+  background-color: color-mix(in srgb, var(--color-text-muted) 8%, transparent);
+}
+
+li.filter-option-unavailable > label.form-check-label {
+  color: var(--color-text-disabled);
+  text-decoration: line-through;
+  text-decoration-thickness: 1px;
+}
+
+/* the count is the reason a row is greyed out, so it keeps full contrast and sits in its
+   own right-aligned column instead of trailing a label of arbitrary length */
+.filter-option-count {
+  color: var(--color-text-muted);
+  font-size: 0.85em;
+  margin-left: auto;
+  padding-left: 0.5rem;
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
+li.filter-option-unavailable > .filter-option-count {
+  font-weight: 600;
+}
+
+.filterCheckBoxes li.list-group-item > label.form-check-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter-search-wrapper {
+  position: relative;
+}
+
+.filter-search-wrapper .form-control {
+  padding-right: 1.5rem;
+}
+
+.filter-search-clear {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0 0.15rem 0;
+  border: none;
+  background: none;
+  color: inherit;
+  opacity: 0.6;
+  font-size: 1.4rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.filter-search-clear:hover {
+  opacity: 1;
+}
+
+.filter-profile-bar {
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.filter-profile-editor {
+  border-bottom: 1px solid var(--bs-border-color);
+}
+
+.filter-profile-check {
+  flex-shrink: 0;
+}
+
+.filter-profile-delete {
+  opacity: 0.5;
+  font-size: 1.1rem;
+  line-height: 1;
+  padding: 0 0.3rem;
+}
+
+.filter-profile-delete:hover {
+  opacity: 1;
+}
diff --git a/robotframework_dashboard/css/components/03-widgets.css b/robotframework_dashboard/css/components/03-widgets.css
new file mode 100644
index 00000000..ccfe775b
--- /dev/null
+++ b/robotframework_dashboard/css/components/03-widgets.css
@@ -0,0 +1,246 @@
+.border {
+  min-height: 42px;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.stat-widget-body {
+  justify-content: center;
+  align-items: center;
+}
+
+/* Color picker buttons inside the Add Stat Widget modal */
+.stat-color-btn {
+  min-width: 60px;
+}
+
+/* "All" tab stat list inside the Add Stat Widget modal */
+.add-all-widgets-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.add-all-widgets-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.add-all-widgets-row .form-check {
+  margin-bottom: 0;
+}
+
+.add-all-widgets-row .add-all-widgets-title {
+  flex: 1 1 auto;
+}
+
+.add-all-widgets-row .add-all-widgets-badge {
+  flex: 0 0 auto;
+}
+
+.add-all-widgets-group-heading {
+  font-weight: 600;
+  margin-top: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.add-all-widgets-group-heading:first-child {
+  margin-top: 0;
+}
+
+/* Custom section divider bar rendered inside the unified GridStack */
+.custom-section-divider {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+  border-radius: 6px;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.custom-section-title {
+  flex: 1;
+  font-size: 1rem;
+  font-weight: 600;
+  text-align: center;
+  user-select: none;
+}
+
+/* Move to first/last + delete controls on custom widgets/sections — pinned to top-right,
+   out of flex flow, sized and spaced like the icons in graph headers */
+.custom-widget-move-controls {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Compact flex layout for custom stat widgets — works at any GridStack size */
+.stat-widget-inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+}
+
+.stat-widget-title {
+  margin: 0;
+  font-weight: 600;
+  font-size: 0.85rem;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title {
+  max-width: calc(100% - 96px);
+}
+
+/* When the item is very short (h=1 row ≈ 60px) switch to a side-by-side row */
+.grid-stack-item-content:has(.stat-widget-inner) {
+  padding: 8px 12px;
+}
+
+.grid-stack-item[gs-h="1"] .stat-widget-inner,
+.grid-stack-item[data-gs-h="1"] .stat-widget-inner {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.grid-stack-item[gs-h="1"] .stat-widget-title,
+.grid-stack-item[data-gs-h="1"] .stat-widget-title {
+  flex: 1 1 0;
+  text-align: left;
+  max-width: calc(100% - 40px); /* leave room for the value */
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.grid-stack-item[gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title,
+.grid-stack-item[data-gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-widget-title {
+  max-width: calc(100% - 136px); /* value + move/delete controls */
+}
+
+.grid-stack-item[gs-h="1"] .stat-value,
+.grid-stack-item[data-gs-h="1"] .stat-value {
+  flex-shrink: 0;
+  font-size: 1.1rem;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.grid-stack-item[gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-value,
+.grid-stack-item[data-gs-h="1"] .stat-widget-inner:has(.custom-widget-move-controls) .stat-value {
+  margin-right: 96px;
+}
+
+.grid-stack-item-content.blue-bg   { background-color: rgba(13, 110, 253, 0.15); }
+.grid-stack-item-content.green-bg  { background-color: rgba(151, 189, 97, 0.2);  }
+.grid-stack-item-content.red-bg    { background-color: rgba(206, 62, 1, 0.2);    }
+.grid-stack-item-content.yellow-bg { background-color: rgba(254, 216, 79, 0.2);  }
+
+/* Inner layout — mirrors stat-widget-inner */
+.link-widget-inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  height: 100%;
+  text-align: center;
+  overflow: hidden;
+}
+
+/* Label — main large text, like .stat-value */
+.link-widget-label {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* URL preview — small muted text below the label */
+.link-widget-url {
+  font-size: 0.72rem;
+  opacity: 0.55;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.link-widget-inner:has(.custom-widget-move-controls) .link-widget-label,
+.link-widget-inner:has(.custom-widget-move-controls) .link-widget-url {
+  max-width: calc(100% - 96px);
+}
+
+/* Clickable in non-edit mode */
+.link-widget-clickable {
+  cursor: pointer;
+}
+
+/* Same padding as stat widget tiles */
+.grid-stack-item-content:has(.link-widget-inner) {
+  padding: 8px 12px;
+}
+
+/* h=1 compact row — mirrors stat widget compact layout */
+.grid-stack-item[gs-h="1"] .link-widget-inner,
+.grid-stack-item[data-gs-h="1"] .link-widget-inner {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.grid-stack-item[gs-h="1"] .link-widget-label,
+.grid-stack-item[data-gs-h="1"] .link-widget-label {
+  flex: 1 1 0;
+  font-size: 1.1rem;
+  text-align: left;
+  max-width: calc(60% - 10px);
+}
+
+.grid-stack-item[gs-h="1"] .link-widget-url,
+.grid-stack-item[data-gs-h="1"] .link-widget-url {
+  flex-shrink: 0;
+  font-size: 0.72rem;
+  text-align: right;
+  max-width: 40%;
+}
+
+/* Leave room for the move/delete controls pinned to the top-right in edit mode */
+.grid-stack-item[gs-h="1"] .link-widget-inner:has(.custom-widget-move-controls) .link-widget-url {
+  max-width: calc(40% - 96px);
+  margin-right: 96px;
+}
+
+.fullscreen .stat-value {
+  font-size: 4rem;
+}
+
+.fullscreen .stat-label {
+  font-size: 2rem;
+}
diff --git a/robotframework_dashboard/css/components/04-status-colors.css b/robotframework_dashboard/css/components/04-status-colors.css
new file mode 100644
index 00000000..bbe74350
--- /dev/null
+++ b/robotframework_dashboard/css/components/04-status-colors.css
@@ -0,0 +1,29 @@
+.green-text,
+.text-passed {
+  color: var(--color-passed);
+}
+
+.border-passed {
+  border-color: var(--color-passed);
+}
+
+.red-text,
+.text-failed {
+  color: var(--color-failed);
+}
+
+.border-failed {
+  border-color: var(--color-failed);
+}
+
+.yellow-text {
+  color: var(--color-skipped);
+}
+
+.border-skipped {
+  border-color: var(--color-skipped);
+}
+
+.blue-text {
+  color: var(--color-info);
+}
diff --git a/robotframework_dashboard/css/components/05-run-cards.css b/robotframework_dashboard/css/components/05-run-cards.css
new file mode 100644
index 00000000..6868d165
--- /dev/null
+++ b/robotframework_dashboard/css/components/05-run-cards.css
@@ -0,0 +1,74 @@
+.overview-canvas {
+  height: 200px;
+}
+
+/* relative run time, pinned to the bottom right corner of a run card without
+   affecting the layout of the stats/duration columns next to the donut */
+.overview-card .card-body {
+  position: relative;
+}
+
+/* only when custom filter lines are rendered, an unconditional padding changes the height of
+   every run card and breaks the overview reference screenshots */
+.overview-card .card-body:has(.run-card-custom-filters) {
+  padding-bottom: 2rem;
+}
+
+.run-card-run-time {
+  position: absolute;
+  right: 1rem;
+  bottom: 0.55rem;
+  color: var(--color-text-muted);
+  cursor: help;
+  font-size: 0.85em;
+  white-space: nowrap;
+}
+
+.overview-card {
+  cursor: pointer;
+  min-width: 300px;
+}
+
+.overview-card .card {
+  border-radius: 1rem;
+}
+
+.project-run-cards-container {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 24px;
+}
+
+.project-run-cards-container .overview-card {
+  flex: 0 1 calc((100% - 48px) / 3);
+}
+
+.run-card-version-title {
+  gap: 0.25rem;
+  width: fit-content;
+}
+
+.run-card-version-title:hover h5 {
+  color: var(--color-run-card-hover) !important;
+}
+
+.run-card-small-version {
+  display: flex;
+  gap: 0.25rem;
+  width: fit-content;
+}
+
+.run-card-small-version:hover div {
+  color: var(--color-run-card-hover) !important;
+}
+
+.run-card-custom-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  width: fit-content;
+}
+
+.run-card-custom-filter {
+  font-size: 0.85em;
+}
diff --git a/robotframework_dashboard/css/components/06-graphs.css b/robotframework_dashboard/css/components/06-graphs.css
new file mode 100644
index 00000000..ee7dabb1
--- /dev/null
+++ b/robotframework_dashboard/css/components/06-graphs.css
@@ -0,0 +1,116 @@
+.grid-stack-item-content {
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  box-shadow: 0 4px 20px var(--color-shadow-strong);
+  background-color: var(--color-section-card-bg)
+}
+
+.graph-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.graph-header h6 {
+  margin: 0;
+  font-weight: 600;
+}
+
+.graph-controls {
+  display: flex;
+  gap: 8px;
+}
+
+/* Icon row in section card headers (add stat/link widget, add section, move/show/hide section) */
+.section-header-icons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.grid-stack-item-content .graph-body {
+  flex: 1 1 auto;
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 100%;
+}
+
+.graph-body .row {
+  flex-wrap: wrap;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.grid-stack-item-content .graph-body .vertical {
+  overflow-y: auto;
+}
+
+canvas {
+  display: block;
+}
+
+.table > :not(caption) > * > * {
+  color: var(--color-table-text);
+}
+
+#alertContainer {
+  z-index: 1100;
+  top: 7rem;
+  max-width: 80%;
+}
+
+.alert-dismissible {
+  padding-right: 16px !important;
+}
+
+.grid-stack-item-content:has(.hidden-graph:not([hidden])),
+.table-section:has(.hidden-graph:not([hidden])),
+.card:has(.hidden-section:not([hidden])) {
+  opacity: 0.5;
+}
+
+.modal.dimmed {
+  pointer-events: none;
+  filter: brightness(0.5);
+}
+
+/* Bootstrap >= 5.3.1 no longer spaces the modal header itself (only its .btn-close gets
+   margin-left: auto); the dashboard modals use their own button groups, so keep the
+   title left and the buttons right */
+.modal-header {
+  justify-content: space-between;
+}
+
+#runTag {
+  max-height: 400px;
+  overflow: auto;
+}
+
+.btn.collapse-icon:active {
+  border: none;
+  background-color: transparent;
+}
+
+@media print {
+  table {
+    width: 100%;
+    page-break-inside: auto;
+  }
+
+  .grid-stack-item-contentvas {
+    width: 100%;
+    overflow: hidden;
+    page-break-inside: avoid;
+    break-inside: avoid;
+    display: block;
+  }
+
+  canvas {
+    height: auto !important;
+    max-width: 100% !important;
+  }
+}
diff --git a/robotframework_dashboard/css/components/07-loading.css b/robotframework_dashboard/css/components/07-loading.css
new file mode 100644
index 00000000..a1f4e0d5
--- /dev/null
+++ b/robotframework_dashboard/css/components/07-loading.css
@@ -0,0 +1,121 @@
+.loader-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: calc(100vh - 55px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+}
+
+/* Individual graph loading overlay */
+.graph-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-fullscreen-bg);
+    border-radius: 8px;
+    z-index: 10;
+}
+
+/* Smaller ball-grid-beat for individual graph overlays */
+.ball-grid-beat-sm {
+    width: 60px;
+    grid-gap: 6px;
+}
+
+.ball-grid-beat-sm div {
+    width: 16px;
+    height: 16px;
+}
+
+/* Full-page loading overlay for filter updates */
+.filter-loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(238, 238, 238, 0.7);
+    z-index: 1040;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dark-mode .filter-loading-overlay {
+    background: rgba(30, 41, 59, 0.7);
+}
+
+.ball-grid-beat {
+  width: 120px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 12px;
+}
+
+.ball-grid-beat div {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--color-highlight);
+  animation: ball-grid-beat 0.7s infinite linear;
+}
+
+.ball-grid-beat div:nth-child(1) {
+  animation-delay: 0.15s;
+}
+
+.ball-grid-beat div:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.ball-grid-beat div:nth-child(3) {
+  animation-delay: 0.05s;
+}
+
+.ball-grid-beat div:nth-child(4) {
+  animation-delay: 0.2s;
+}
+
+.ball-grid-beat div:nth-child(5) {
+  animation-delay: 0.15s;
+}
+
+.ball-grid-beat div:nth-child(6) {
+  animation-delay: 0.1s;
+}
+
+.ball-grid-beat div:nth-child(7) {
+  animation-delay: 0.25s;
+}
+
+.ball-grid-beat div:nth-child(8) {
+  animation-delay: 0.2s;
+}
+
+.ball-grid-beat div:nth-child(9) {
+  animation-delay: 0.15s;
+}
+
+@keyframes ball-grid-beat {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.7);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
diff --git a/robotframework_dashboard/css/components/08-section-filters-modal.css b/robotframework_dashboard/css/components/08-section-filters-modal.css
new file mode 100644
index 00000000..07592ef9
--- /dev/null
+++ b/robotframework_dashboard/css/components/08-section-filters-modal.css
@@ -0,0 +1,29 @@
+#sectionFiltersModal .modal-body {
+  padding: 1rem;
+}
+
+#sectionFiltersModal .card {
+  background-color: var(--color-section-card-bg) !important;
+  border: none;
+  box-shadow: 0 0.125rem 0.25rem var(--color-shadow-soft);
+}
+
+#sectionFiltersModal .card-header {
+  background-color: var(--color-section-card-bg) !important;
+  border-bottom: 1px solid var(--color-section-card-border);
+  color: var(--color-section-card-text);
+}
+
+#sectionFiltersModal .card-body {
+  background-color: var(--color-section-card-bg) !important;
+  color: var(--color-section-card-text);
+  padding: 1.25rem;
+}
+
+.list-group-item[hidden] {
+  display: none !important;
+}
+
+.list-group-item {
+  background-color: var(--color-card);
+}
diff --git a/robotframework_dashboard/js/eventlisteners.js b/robotframework_dashboard/js/eventlisteners.js
deleted file mode 100644
index 292fd665..00000000
--- a/robotframework_dashboard/js/eventlisteners.js
+++ /dev/null
@@ -1,1564 +0,0 @@
-import { runs, keywords, filteredAmount, filteredAmountDefault, server, no_auto_update } from './variables/data.js';
-import { settings } from "./variables/settings.js";
-import {
-    showingRunTags,
-    ignoreSkips,
-    ignoreSkipsRecent,
-    onlyFailedFolders,
-    heatMapHourAll,
-    inFullscreen,
-    inFullscreenGraph,
-    lastScrollY,
-    previousFolder,
-    showingProjectVersionDialogue,
-    lastMergeResult,
-    filterRows,
-    escape_html_for_merge,
-} from "./variables/globals.js";
-import { arrowDown, arrowRight } from "./variables/svg.js";
-import { fullscreenButtons, graphChangeButtons, compareRunIds } from "./variables/graphs.js";
-import { toggle_theme, apply_theme_colors, apply_custom_branding } from "./theme.js";
-import { add_alert, show_graph_loading, hide_graph_loading, update_graphs_with_loading, show_loading_overlay, hide_loading_overlay } from "./common.js";
-import { setup_data_and_graphs, update_menu, setup_overview_section_menu_buttons } from "./menu.js";
-import { update_dashboard_graphs } from "./graph_creation/all.js";
-import {
-    setup_filtered_data_and_filters,
-    setup_run_amount_filter,
-    setup_lowest_highest_dates,
-    clear_all_filters,
-    setup_project_versions_in_select_filter_buttons,
-    setup_suite_path_navigator,
-    setup_custom_filters_in_select_filter_buttons,
-    setup_metadata_filter,
-    build_profile_from_checks,
-    apply_filter_profile,
-    save_filter_profile_to_storage,
-    delete_filter_profile,
-    populate_filter_profile_select,
-    enter_profile_edit_mode,
-    exit_profile_edit_mode,
-    update_profile_select_display,
-    update_active_profile,
-    clear_active_profile,
-    capture_default_filters,
-    merge_two_profiles,
-    schedule_filter_option_availability_refresh,
-    set_filter_modal_open,
-    collect_custom_filter_dimensions,
-    dashboardPages,
-} from "./filter.js"
-import { camelcase_to_underscore, underscore_to_camelcase } from "./common.js";
-import {
-    update_switch_local_storage,
-    set_local_storage_item,
-    update_graph_type,
-} from "./localstorage.js";
-import {
-    create_overview_latest_graphs,
-    create_overview_total_graphs,
-    update_overview_latest_heading,
-    update_overview_total_heading,
-    update_overview_sections_visibility,
-    update_projectbar_visibility,
-    set_filter_show_current_project,
-    set_filter_show_current_version,
-    update_overview_filter_visibility,
-    update_duration_comparison_for_all_projects,
-} from "./graph_creation/overview.js";
-import { update_run_donut_total_graph, update_run_heatmap_graph } from "./graph_creation/run.js";
-import {
-    update_suite_duration_graph,
-    update_suite_statistics_graph,
-    update_suite_most_failed_graph,
-    update_suite_most_time_consuming_graph,
-    update_suite_folder_donut_graph,
-    update_suite_folder_fail_donut_graph,
-} from "./graph_creation/suite.js";
-import {
-    update_test_statistics_graph,
-    update_test_duration_graph,
-    update_test_duration_deviation_graph,
-    update_test_messages_graph,
-    update_test_most_flaky_graph,
-    update_test_recent_most_flaky_graph,
-    update_test_most_failed_graph,
-    update_test_recent_most_failed_graph,
-    update_test_most_time_consuming_graph,
-} from "./graph_creation/test.js";
-import {
-    update_keyword_statistics_graph,
-    update_keyword_times_run_graph,
-    update_keyword_total_duration_graph,
-    update_keyword_average_duration_graph,
-    update_keyword_min_duration_graph,
-    update_keyword_max_duration_graph,
-    update_keyword_most_failed_graph,
-    update_keyword_most_time_consuming_graph,
-    update_keyword_most_used_graph,
-} from "./graph_creation/keyword.js";
-import {
-    update_compare_statistics_graph,
-    update_compare_suite_duration_graph,
-    update_compare_tests_graph,
-} from "./graph_creation/compare.js";
-
-function render_merge_profile_settings(profile, side) {
-    const rows = filterRows
-        .filter(def => def.present(profile))
-        .map(def => {
-            const checkId = `mergeCheck_${side}_${def.key}`;
-            return `<div class="form-check mb-1">
-                <input class="form-check-input merge-setting-check" type="checkbox"
-                    id="${checkId}" data-side="${side}" data-key="${def.key}" checked>
-                <label class="form-check-label small" for="${checkId}">
-                    <span class="fw-semibold">${def.label}:</span> ${def.valueHtml(profile)}
-                </label>
-            </div>`;
-        });
-    return rows.length
-        ? rows.join('')
-        : '<p class="text-muted small mb-0">No settings in this profile.</p>';
-}
-
-function get_checked_partial_profile(side, fullProfile) {
-    const result = {};
-    for (const def of filterRows) {
-        const el = document.getElementById(`mergeCheck_${side}_${def.key}`);
-        if (el && el.checked) {
-            def.fields.forEach(f => {
-                if (fullProfile[f] !== undefined) result[f] = fullProfile[f];
-            });
-        }
-    }
-    return result;
-}
-
-function render_merge_result_html(result) {
-    if (!Object.keys(result).length) {
-        return '<span class="text-muted small">Select profiles and settings above to preview.</span>';
-    }
-    const rows = filterRows
-        .filter(def => def.present(result))
-        .map(def => `<dt class="col-sm-3 small fw-semibold">${def.label}</dt><dd class="col-sm-9 small mb-1">${def.valueHtml(result)}</dd>`);
-    return `<dl class="row mb-0">${rows.join('')}</dl>`;
-}
-
-function update_merge_result_preview() {
-    const leftName = document.getElementById("mergeProfileLeft").value;
-    const rightName = document.getElementById("mergeProfileRight").value;
-    const profiles = settings.filterProfiles || {};
-    const leftFull = leftName && profiles[leftName] ? profiles[leftName] : {};
-    const rightFull = rightName && profiles[rightName] ? profiles[rightName] : {};
-    const leftPartial = get_checked_partial_profile('left', leftFull);
-    const rightPartial = get_checked_partial_profile('right', rightFull);
-    lastMergeResult = merge_two_profiles(leftPartial, rightPartial);
-    document.getElementById("mergeResultPreview").innerHTML = render_merge_result_html(lastMergeResult);
-}
-
-function update_filters_button_indicator() {
-    const indicator = document.getElementById("filtersActiveIndicator");
-    if (!indicator) return;
-    // a hidden custom filter is not applied, so its dot must not mark the button as active
-    const anyActive = [...document.querySelectorAll("#filtersModal .version-selected-dot")]
-        .some(el => el.style.display !== "none" && !el.closest("[hidden]"));
-    indicator.style.display = anyActive ? "inline-block" : "none";
-}
-
-// function to setup filter modal eventlisteners
-function setup_filter_modal() {
-    // eventlistener to catch the closing of the filter modal
-    // Only recompute filtered data and update graphs in-place (no layout rebuild needed)
-    document.getElementById("filtersModal").addEventListener("hide.bs.modal", function () {
-        // no more writing into the modal while it fades out
-        set_filter_modal_open(false);
-        show_loading_overlay();
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                setup_filtered_data_and_filters();
-                update_dashboard_graphs();
-                hide_loading_overlay();
-            });
-        });
-    });
-    // count the runs behind every filter option and grey out the ones that match nothing,
-    // also picking up filters that were set while the modal was closed (overview drill down)
-    document.getElementById("filtersModal").addEventListener("show.bs.modal", function () {
-        set_filter_modal_open(true);
-    });
-    // eventlistener to reset the filters
-    document.getElementById("resetFilters").addEventListener("click", function () {
-        clear_all_filters();
-        clear_active_profile();
-        add_alert("Filters have been set to default values!", "success")
-        update_profile_select_display();
-    });
-    // eventlistener for all runs button
-    document.getElementById("allRuns").addEventListener("click", function () {
-        document.getElementById("amount").value = Object.keys(runs).length;
-    });
-    // eventlistener for the runTags
-    function show_checkboxes() {
-        const checkboxes = document.getElementById("runTagCheckBoxes");
-        showingRunTags = !showingRunTags;
-        checkboxes.style.display = showingRunTags ? "block" : "none";
-    }
-    const checkboxesElement = document.getElementById("runTagCheckBoxes");
-    const runTagsSelectElement = document.getElementById("selectRunTags");
-    // eventlistener for click events on body to hide the run checkboxes when clicking outside of the select/checkboxes elements
-    document.getElementById("selectRunTags").addEventListener("click", show_checkboxes);
-    document.body.addEventListener("click", function (event) {
-        if (showingRunTags == true && !checkboxesElement.contains(event.target) && !runTagsSelectElement.contains(event.target)) {
-            show_checkboxes()
-        }
-    });
-    // eventlistener for the project version filter popup
-    const projectVersionCheckboxes = document.getElementById("projectVersionCheckBoxes");
-    const projectVersionSelectElement = document.getElementById("selectProjectVersion");
-    function toggle_project_version_filter_dialogue() {
-        showingProjectVersionDialogue = !showingProjectVersionDialogue;
-        projectVersionCheckboxes.style.display = showingProjectVersionDialogue ? "block" : "none";
-    }
-    projectVersionSelectElement.addEventListener("pointerdown", toggle_project_version_filter_dialogue);
-    document.body.addEventListener("pointerdown", function (event) {
-        if (showingProjectVersionDialogue && !projectVersionCheckboxes.contains(event.target) && !projectVersionSelectElement.contains(event.target)) {
-            toggle_project_version_filter_dialogue();
-        }
-    });
-    // amount filter setup
-    filteredAmountDefault = filteredAmount
-    document.getElementById("amount").value = filteredAmount
-    if (server) {
-        document.getElementById("openDashboard").hidden = false
-        if (no_auto_update) {
-            document.getElementById("refreshDashboard").hidden = false
-            document.getElementById("refreshDashboard").addEventListener("click", function () {
-                document.getElementById("refreshDashboardSpinner").hidden = false
-                const xhr = new XMLHttpRequest();
-                xhr.open("POST", "/refresh-dashboard");
-                xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
-                xhr.onload = () => {
-                    document.getElementById("refreshDashboardSpinner").hidden = true
-                    if (xhr.readyState == 4 && xhr.status == 200) {
-                        const response = JSON.parse(xhr.responseText);
-                        if (response.success == "1") {
-                            console.log(response.console)
-                            add_alert(`${response.message} Reloading dashboard in 3 seconds!`, "success")
-                            setTimeout(() => {
-                                location.reload();
-                            }, 3000);
-                        } else {
-                            add_alert(response.message, "danger")
-                            console.log(response.console)
-                        }
-                    } else {
-                        add_alert(`Error: ${xhr.status}, ${xhr.responseText}`, "danger")
-                    }
-                };
-                xhr.send(JSON.stringify({}));
-            });
-        }
-    }
-    // fill the filters with default values
-    setup_run_amount_filter();
-    setup_lowest_highest_dates();
-    setup_metadata_filter();
-    setup_runs_in_select_filter_buttons();
-    setup_runtags_in_select_filter_buttons();
-    setup_project_versions_in_select_filter_buttons();
-    setup_suite_path_navigator("All");
-    setup_custom_filters_in_select_filter_buttons();
-    // snapshot the default/initial filter state so profile checkboxes can reflect changes
-    capture_default_filters();
-    // filter profiles setup
-    populate_filter_profile_select();
-    let showingFilterProfiles = false;
-    function toggle_filter_profiles() {
-        showingFilterProfiles = !showingFilterProfiles;
-        document.getElementById("filterProfileCheckBoxes").style.display = showingFilterProfiles ? "block" : "none";
-    }
-    document.getElementById("selectFilterProfile").addEventListener("click", toggle_filter_profiles);
-    const filterProfileCheckBoxes = document.getElementById("filterProfileCheckBoxes");
-    const selectFilterProfileElement = document.getElementById("selectFilterProfile");
-    document.body.addEventListener("click", function (event) {
-        if (showingFilterProfiles && !filterProfileCheckBoxes.contains(event.target) && !selectFilterProfileElement.contains(event.target)) {
-            toggle_filter_profiles();
-        }
-    });
-    document.getElementById("addFilterProfile").addEventListener("click", function () {
-        enter_profile_edit_mode();
-    });
-    document.getElementById("cancelFilterProfile").addEventListener("click", function () {
-        exit_profile_edit_mode();
-    });
-    document.getElementById("saveFilterProfile").addEventListener("click", function () {
-        const name = document.getElementById("filterProfileName").value.trim();
-        if (!name) {
-            add_alert("Please enter a profile name!", "warning");
-            return;
-        }
-        const profileData = build_profile_from_checks();
-        save_filter_profile_to_storage(name, profileData);
-        populate_filter_profile_select();
-        exit_profile_edit_mode();
-        update_profile_select_display();
-        add_alert(`Filter profile "${name}" saved!`, "success");
-    });
-    document.getElementById("filterProfileList").addEventListener("click", async function (event) {
-        const applyEl = event.target.closest(".filter-profile-apply");
-        const deleteEl = event.target.closest(".filter-profile-delete");
-        if (deleteEl) {
-            event.preventDefault();
-            event.stopPropagation();
-            const name = deleteEl.dataset.profile;
-            const confirmed = await confirm_action(`Are you sure you want to delete filter profile "${name}"?`);
-            if (confirmed) {
-                delete_filter_profile(name);
-                clear_active_profile();
-                populate_filter_profile_select();
-                update_profile_select_display();
-                add_alert(`Filter profile "${name}" deleted!`, "success");
-            }
-            return;
-        }
-        if (applyEl) {
-            event.preventDefault();
-            const name = applyEl.dataset.profile;
-            const profiles = settings.filterProfiles || {};
-            const profile = profiles[name];
-            if (profile) {
-                apply_filter_profile(profile, name);
-                add_alert(`Filter profile "${name}" applied`, "success");
-                update_profile_select_display();
-                populate_filter_profile_select();
-                update_filters_button_indicator();
-            }
-        }
-    });
-    document.getElementById("updateFilterProfile").addEventListener("click", function () {
-        update_active_profile();
-        populate_filter_profile_select();
-        add_alert(`Filter profile updated!`, "success");
-    });
-    document.getElementById("mergeFilterProfiles").addEventListener("click", function () {
-        const profiles = settings.filterProfiles || {};
-        const names = Object.keys(profiles).sort();
-        const leftSelect = document.getElementById("mergeProfileLeft");
-        const rightSelect = document.getElementById("mergeProfileRight");
-        leftSelect.innerHTML = '<option value="">-- Select Profile --</option>';
-        rightSelect.innerHTML = '<option value="">-- Select Profile --</option>';
-        names.forEach(name => {
-            leftSelect.options.add(new Option(name, name));
-            rightSelect.options.add(new Option(name, name));
-        });
-        document.getElementById("mergeProfileNewName").value = "";
-        document.getElementById("mergeLeftSettings").innerHTML = "";
-        document.getElementById("mergeLeftSettings").style.display = "none";
-        document.getElementById("mergeRightSettings").innerHTML = "";
-        document.getElementById("mergeRightSettings").style.display = "none";
-        update_merge_result_preview();
-        const filtersModalEl = document.getElementById("filtersModal");
-        const mergeModalEl = document.getElementById("mergeProfilesModal");
-        filtersModalEl.classList.add("dimmed");
-        const mergeModal = new bootstrap.Modal(mergeModalEl);
-        mergeModalEl.addEventListener("hidden.bs.modal", function cleanup() {
-            filtersModalEl.classList.remove("dimmed");
-            mergeModalEl.removeEventListener("hidden.bs.modal", cleanup);
-        });
-        mergeModal.show();
-    });
-    function setup_merge_side_listener(selectId, settingsDivId, side) {
-        document.getElementById(selectId).addEventListener("change", function () {
-            const profiles = settings.filterProfiles || {};
-            const name = this.value;
-            const settingsDiv = document.getElementById(settingsDivId);
-            if (name && profiles[name]) {
-                settingsDiv.innerHTML = render_merge_profile_settings(profiles[name], side);
-                settingsDiv.style.display = "";
-            } else {
-                settingsDiv.innerHTML = "";
-                settingsDiv.style.display = "none";
-            }
-            update_merge_result_preview();
-        });
-    }
-    setup_merge_side_listener("mergeProfileLeft", "mergeLeftSettings", "left");
-    setup_merge_side_listener("mergeProfileRight", "mergeRightSettings", "right");
-    document.getElementById("mergeProfilesModal").addEventListener("change", function (event) {
-        if (event.target.classList.contains("merge-setting-check")) {
-            update_merge_result_preview();
-        }
-    });
-    document.getElementById("saveMergeProfile").addEventListener("click", function () {
-        const leftName = document.getElementById("mergeProfileLeft").value;
-        const rightName = document.getElementById("mergeProfileRight").value;
-        const newName = document.getElementById("mergeProfileNewName").value.trim();
-        if (!newName) {
-            add_alert("Please enter a name for the merged profile!", "warning");
-            return;
-        }
-        if (!leftName && !rightName) {
-            add_alert("Please select at least one profile!", "warning");
-            return;
-        }
-        const profileData = lastMergeResult;
-        if (!Object.keys(profileData).length) {
-            add_alert("Please select at least one filter setting!", "warning");
-            return;
-        }
-        save_filter_profile_to_storage(newName, profileData);
-        populate_filter_profile_select();
-        update_profile_select_display();
-        add_alert(`Filter profile "${newName}" saved!`, "success");
-        bootstrap.Modal.getInstance(document.getElementById("mergeProfilesModal")).hide();
-    });
-    document.getElementById("runs").addEventListener("change", function () {
-        const indicator = document.getElementById("filterRunSelectedIndicator");
-        if (indicator) indicator.style.display = this.value !== "All" ? "inline-block" : "none";
-        update_filters_button_indicator();
-    });
-    const filterModal = document.getElementById("filtersModal");
-    filterModal.addEventListener("change", function () {
-        update_profile_select_display();
-        update_filters_button_indicator();
-        schedule_filter_option_availability_refresh();
-    });
-    filterModal.addEventListener("input", function () {
-        update_profile_select_display();
-        update_filters_button_indicator();
-        schedule_filter_option_availability_refresh();
-    });
-}
-
-// function to create customized view eventlisteners
-function setup_settings_modal() {
-    // function to catch the closing of the settings modal
-    document.getElementById("settingsModal").addEventListener("hidden.bs.modal", function () {
-        setup_data_and_graphs();
-    });
-    // function to catch the closing of the settings modal
-    document.getElementById("settingsModal").addEventListener("shown.bs.modal", function () {
-        const libraries = [...new Set(
-            keywords
-                .map(item => item.owner)
-                .filter(owner => owner)
-        )];
-        const keywordPrefs = settings.libraries ?? {};
-        function render_keyword_libraries() {
-            const container = document.getElementById("keywordLibraryList");
-            container.innerHTML = "";
-            libraries.forEach(lib => {
-                const isChecked = keywordPrefs[lib] ?? true;
-                const item = document.createElement("div");
-                item.className = "list-group-item d-flex justify-content-between align-items-center";
-                item.innerHTML = `
-                    <span>${lib}</span>
-                    <div class="form-check form-switch mb-0">
-                        <input class="form-check-input" type="checkbox" id="keyword-${lib}"
-                            ${isChecked ? "checked" : ""}>
-                    </div>
-                `;
-                container.appendChild(item);
-                document.getElementById(`keyword-${lib}`).addEventListener("change", e => {
-                    keywordPrefs[lib] = e.target.checked;
-                    set_local_storage_item("libraries", keywordPrefs)
-                });
-            });
-        }
-        render_keyword_libraries();
-        dashboardPages.forEach(page => render_hidden_custom_filters(page));
-    });
-    function render_hidden_custom_filters(page) {
-        const pageName = page.charAt(0).toUpperCase() + page.slice(1);
-        const settingKey = `hiddenCustomFilters${pageName}`;
-        const container = document.getElementById(`${settingKey}List`);
-        if (!container) return;
-        container.innerHTML = "";
-        const dimNames = Object.keys(collect_custom_filter_dimensions()).sort();
-        if (!dimNames.length) {
-            container.innerHTML = `<li class="list-group-item small text-muted">No custom filters in run data.</li>`;
-            return;
-        }
-        dimNames.forEach((dimName, dimIndex) => {
-            const isChecked = (settings.show[settingKey] ?? []).includes(dimName);
-            const checkBoxId = `${settingKey}_${dimIndex}`;
-            const item = document.createElement("li");
-            item.className = "list-group-item list-group-item-action d-flex small";
-            item.innerHTML = `
-                <input class="form-check-input me-1" type="checkbox" value="${escape_html_for_merge(dimName)}" id="${checkBoxId}" ${isChecked ? "checked" : ""}>
-                <label class="form-check-label ms-2" for="${checkBoxId}">${escape_html_for_merge(dimName)}</label>
-            `;
-            container.appendChild(item);
-            item.querySelector("input").addEventListener("change", e => {
-                const hiddenCustomFilters = new Set(settings.show[settingKey] ?? []);
-                if (e.target.checked) {
-                    hiddenCustomFilters.add(dimName);
-                } else {
-                    hiddenCustomFilters.delete(dimName);
-                }
-                set_local_storage_item(`show.${settingKey}`, Array.from(hiddenCustomFilters));
-            });
-        });
-    }
-    // dropdown open/close behaviour, one selector per page
-    dashboardPages.forEach(page => {
-        const pageName = page.charAt(0).toUpperCase() + page.slice(1);
-        const selectEl = document.getElementById(`selectHiddenCustomFilters${pageName}`);
-        const checkBoxesEl = document.getElementById(`hiddenCustomFilters${pageName}CheckBoxes`);
-        if (!selectEl || !checkBoxesEl) return;
-        let showing = false;
-        function toggle() {
-            showing = !showing;
-            checkBoxesEl.style.display = showing ? "block" : "none";
-        }
-        selectEl.addEventListener("pointerdown", toggle);
-        document.body.addEventListener("pointerdown", function (event) {
-            if (showing && !checkBoxesEl.contains(event.target) && !selectEl.contains(event.target)) {
-                toggle();
-            }
-        });
-    });
-    // function to create setting toggle handlers
-    function create_toggle_handler({ key, elementId, datatype = "boolean" }) {
-        return function (load = false) {
-            const element = document.getElementById(elementId);
-            if (load) {
-                const storedValue = key.split(".").reduce((acc, k) => acc?.[k], settings);
-                if (datatype == "number") {
-                    if (typeof storedValue === "number") {
-                        element.value = storedValue;
-                    }
-                } else if (datatype == "string") {
-                    if (typeof storedValue === "string") {
-                        element.value = storedValue;
-                    }
-                } else {
-                    if (typeof storedValue === "boolean") {
-                        element.checked = storedValue;
-                    }
-                }
-            } else {
-                let newValue;
-                if (datatype == "number") {
-                    newValue = parseInt(element.value);
-                } else if (datatype == "string") {
-                    newValue = element.value;
-                } else {
-                    const currentValue = key.split(".").reduce((acc, k) => acc?.[k], settings);
-                    newValue = !currentValue;
-                    element.checked = newValue;
-                }
-                set_local_storage_item(key, newValue);
-            }
-        };
-    }
-
-    [
-        { key: "show.unified", elementId: "toggleUnified" },
-        { key: "show.dateLabels", elementId: "toggleLabels" },
-        { key: "show.legends", elementId: "toggleLegends" },
-        { key: "show.aliases", elementId: "toggleAliases", datatype: "string", event: "change" },
-        { key: "show.milliseconds", elementId: "toggleMilliseconds" },
-        { key: "show.timezones", elementId: "toggleTimezones" },
-        { key: "show.axisTitles", elementId: "toggleAxisTitles" },
-        { key: "show.animation", elementId: "toggleAnimations" },
-        { key: "show.duration", elementId: "toggleAnimationDuration", datatype: "number", event: "change" },
-        { key: "show.rounding", elementId: "toggleBarRounding", datatype: "number", event: "change" },
-        { key: "show.prefixes", elementId: "togglePrefixes" },
-        { key: "show.convertTimezone", elementId: "toggleTimezone" },
-        { key: "show.suitesSelectionInSuiteStats", elementId: "toggleSuitesSelectionInSuiteStats", datatype: "string", event: "change" },
-        { key: "show.suitesSelectionInTestStats", elementId: "toggleSuitesSelectionInTestStats", datatype: "string", event: "change" },
-        { key: "show.overviewDurationPercentage", elementId: "overviewDurationPercentage", datatype: "number", event: "change" },
-        { key: "show.filterAvailability", elementId: "toggleFilterAvailability" },
-        { key: "show.filterCounts", elementId: "toggleFilterCounts" },
-    ].forEach(def => {
-        const handler = create_toggle_handler(def);
-        handler(true);
-        document.getElementById(def.elementId).addEventListener(def.event || "click", () => handler());
-    });
-    document.getElementById("overviewDurationPercentage").addEventListener("change", () => {
-        if (settings.menu.overview) update_duration_comparison_for_all_projects();
-    });
-    // Re-populate the date filter pickers when either timezone toggle changes,
-    // since the displayed timestamps change and the defaults need to match.
-    document.getElementById("toggleTimezone").addEventListener("click", () => setup_lowest_highest_dates());
-    document.getElementById("toggleTimezones").addEventListener("click", () => setup_lowest_highest_dates());
-    document.getElementById("themeLight").addEventListener("click", () => toggle_theme());
-    document.getElementById("themeDark").addEventListener("click", () => toggle_theme());
-
-    function to_hex_color(color) {
-        const rgbaMatch = color.match(/^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)/);
-        if (rgbaMatch) {
-            const [, r, g, b] = rgbaMatch.map(Number);
-            return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
-        }
-        // For hex shorthand (#eee) and other CSS colors, use canvas normalization
-        const ctx = document.createElement('canvas').getContext('2d');
-        ctx.fillStyle = color;
-        return ctx.fillStyle;
-    }
-
-    function create_theme_color_handler(colorKey, elementId) {
-        function load_color() {
-            const element = document.getElementById(elementId);
-            const isDarkMode = document.documentElement.classList.contains("dark-mode");
-            const themeMode = isDarkMode ? 'dark' : 'light';
-
-            const customColors = settings.theme_colors?.custom?.[themeMode];
-            const storedColor = customColors?.[colorKey];
-
-            if (storedColor) {
-                element.value = to_hex_color(storedColor);
-            } else {
-                const defaults = settings.theme_colors[themeMode];
-                element.value = to_hex_color(defaults[colorKey]);
-            }
-        }
-
-        function update_color() {
-            const element = document.getElementById(elementId);
-            const newColor = element.value;
-            const isDarkMode = document.documentElement.classList.contains("dark-mode");
-            const themeMode = isDarkMode ? 'dark' : 'light';
-
-            if (!settings.theme_colors.custom) {
-                settings.theme_colors.custom = { light: {}, dark: {} };
-            }
-            if (!settings.theme_colors.custom[themeMode]) {
-                settings.theme_colors.custom[themeMode] = {};
-            }
-
-            settings.theme_colors.custom[themeMode][colorKey] = newColor;
-            set_local_storage_item(`theme_colors.custom.${themeMode}.${colorKey}`, newColor);
-            apply_theme_colors();
-        }
-
-        function reset_color() {
-            const element = document.getElementById(elementId);
-            const isDarkMode = document.documentElement.classList.contains("dark-mode");
-            const themeMode = isDarkMode ? 'dark' : 'light';
-
-            const defaults = settings.theme_colors[themeMode];
-            element.value = to_hex_color(defaults[colorKey]);
-
-            if (settings.theme_colors?.custom?.[themeMode]) {
-                delete settings.theme_colors.custom[themeMode][colorKey];
-                set_local_storage_item('theme_colors.custom', settings.theme_colors.custom);
-            }
-
-            apply_theme_colors();
-        }
-
-        return { load_color, update_color, reset_color };
-    }
-
-    const backgroundColorHandler = create_theme_color_handler('background', 'themeBackgroundColor');
-    const cardColorHandler = create_theme_color_handler('card', 'themeCardColor');
-    const highlightColorHandler = create_theme_color_handler('highlight', 'themeHighlightColor');
-    const textColorHandler = create_theme_color_handler('text', 'themeTextColor');
-
-    document.getElementById("settingsModal").addEventListener("shown.bs.modal", function () {
-        backgroundColorHandler.load_color();
-        cardColorHandler.load_color();
-        highlightColorHandler.load_color();
-        textColorHandler.load_color();
-        document.getElementById('customBrandingTitle').value = settings.branding?.title || "";
-        const hasLogo = !!settings.branding?.logo;
-        document.getElementById('removeCustomLogo').disabled = !hasLogo;
-        document.getElementById('customLogoUpload').value = "";
-    });
-
-    document.getElementById('themeBackgroundColor').addEventListener('change', () => backgroundColorHandler.update_color());
-    document.getElementById('themeCardColor').addEventListener('change', () => cardColorHandler.update_color());
-    document.getElementById('themeHighlightColor').addEventListener('change', () => highlightColorHandler.update_color());
-    document.getElementById('themeTextColor').addEventListener('change', () => textColorHandler.update_color());
-
-    document.getElementById('resetBackgroundColor').addEventListener('click', () => backgroundColorHandler.reset_color());
-    document.getElementById('resetCardColor').addEventListener('click', () => cardColorHandler.reset_color());
-    document.getElementById('resetHighlightColor').addEventListener('click', () => highlightColorHandler.reset_color());
-    document.getElementById('resetTextColor').addEventListener('click', () => textColorHandler.reset_color());
-
-    document.getElementById('customBrandingTitle').addEventListener('input', function () {
-        const title = this.value.trim();
-        set_local_storage_item('branding.title', title);
-        apply_custom_branding();
-    });
-
-    document.getElementById('clearCustomTitle').addEventListener('click', function () {
-        document.getElementById('customBrandingTitle').value = "";
-        set_local_storage_item('branding.title', "");
-        apply_custom_branding();
-    });
-
-    document.getElementById('customLogoUpload').addEventListener('change', function () {
-        const file = this.files[0];
-        if (!file) return;
-        const reader = new FileReader();
-        reader.onload = function (e) {
-            const img = new Image();
-            img.onload = function () {
-                const size = Math.max(img.width, img.height);
-                const canvas = document.createElement('canvas');
-                canvas.width = size;
-                canvas.height = size;
-                const ctx = canvas.getContext('2d');
-                const offsetX = Math.floor((size - img.width) / 2);
-                const offsetY = Math.floor((size - img.height) / 2);
-                ctx.drawImage(img, offsetX, offsetY, img.width, img.height);
-                const squaredDataUrl = canvas.toDataURL('image/png');
-                set_local_storage_item('branding.logo', squaredDataUrl);
-                document.getElementById('removeCustomLogo').disabled = false;
-                apply_custom_branding();
-            };
-            img.src = e.target.result;
-        };
-        reader.readAsDataURL(file);
-    });
-
-    document.getElementById('removeCustomLogo').addEventListener('click', function () {
-        set_local_storage_item('branding.logo', "");
-        document.getElementById('customLogoUpload').value = "";
-        this.disabled = true;
-        apply_custom_branding();
-    });
-
-    function show_settings_in_textarea() {
-        const textArea = document.getElementById("settingsTextArea");
-        textArea.value = JSON.stringify(settings, null, 2);
-    }
-
-    function copy_settings_to_clipboard() {
-        const textArea = document.getElementById("settingsTextArea");
-        textArea.select();
-        textArea.setSelectionRange(0, 99999);
-        navigator.clipboard.writeText(textArea.value);
-        add_alert("Copied settings to clipboard!", "success")
-    }
-
-    async function reset_settings_to_default() {
-        const confirmed = await confirm_action(`Are you sure you want to resset all settings?<br><br>
-                    This may override:<br>
-                    - Graph settings<br>
-                    - Custom layouts (e.g., moved or resized graphs)<br>
-                    - Hidden graphs
-                    If you only want to update a few small settings it is recommended to update the settings json and re-apply it.
-                `);
-        if (confirmed) {
-            localStorage.removeItem("settings");
-            location.reload();
-        }
-    }
-
-    async function apply_settings_from_textarea() {
-        const confirmed = await confirm_action(`Are you sure you want to apply the new settings?<br><br>
-                    This may override:<br>
-                    - Graph settings<br>
-                    - Custom layouts (e.g., moved or resized graphs)<br>
-                    - Hidden graphs
-                `);
-        if (confirmed) {
-            try {
-                const input = document.getElementById("settingsTextArea").value;
-                const newSettings = JSON.parse(input);
-                settings = newSettings
-                localStorage.setItem("settings", JSON.stringify(newSettings));
-                location.reload();
-            } catch (e) {
-                add_alert("Failed to update json config: " + e, "danger")
-            }
-        }
-    }
-    document.getElementById("copySettings").addEventListener("click", copy_settings_to_clipboard);
-    document.getElementById("resetSettings").addEventListener("click", reset_settings_to_default);
-    document.getElementById("applySettings").addEventListener("click", apply_settings_from_textarea);
-    document.getElementById("settingsModal").addEventListener("shown.bs.modal", show_settings_in_textarea);
-}
-
-function confirm_action(message = "Are you sure?") {
-    return new Promise((resolve) => {
-        const settingsModal = document.getElementById("settingsModal");
-        const filtersModal = document.getElementById("filtersModal");
-        const modalEl = document.getElementById("confirmModal");
-        const modalBody = document.getElementById("confirmModalMessage");
-        const cancelBtn = document.getElementById("confirmCancel");
-        const okBtn = document.getElementById("confirmOk");
-
-        settingsModal.classList.add("dimmed");
-        filtersModal.classList.add("dimmed");
-        modalBody.innerHTML = message;
-
-        const modal = new bootstrap.Modal(modalEl);
-        const onCancel = () => {
-            resolve(false);
-            modal.hide();
-        };
-        const onConfirm = () => {
-            resolve(true);
-            modal.hide();
-        };
-        const onHidden = () => {
-            cleanup();
-        };
-        const cleanup = () => {
-            cancelBtn.removeEventListener("click", onCancel);
-            okBtn.removeEventListener("click", onConfirm);
-            modalEl.removeEventListener("hidden.bs.modal", onHidden);
-            settingsModal.classList.remove("dimmed");
-            filtersModal.classList.remove("dimmed");
-        };
-
-        cancelBtn.addEventListener("click", onCancel);
-        okBtn.addEventListener("click", onConfirm);
-        modalEl.addEventListener("hidden.bs.modal", onHidden);
-        modal.show();
-    });
-}
-
-// function to setup eventlisteners for filter buttons
-function setup_sections_filters() {
-    update_switch_local_storage("switch.runTags", settings.switch.runTags, true);
-    update_switch_local_storage("switch.runName", settings.switch.runName, true);
-    update_switch_local_storage("switch.totalStats", settings.switch.totalStats, true);
-    update_switch_local_storage("switch.latestRuns", settings.switch.latestRuns, true);
-    update_switch_local_storage("switch.sortFilters", settings.switch.sortFilters, true);
-    document.getElementById("switchRunTags").addEventListener("click", function () {
-        settings.switch.runTags = !settings.switch.runTags
-        update_switch_local_storage("switch.runTags", settings.switch.runTags);
-        show_loading_overlay();
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                // create latest and total bars and set visibility
-                create_overview_latest_graphs();
-                update_overview_latest_heading();
-                create_overview_total_graphs();
-                update_overview_total_heading();
-                update_overview_sections_visibility();
-                // update all tagged bars
-                update_projectbar_visibility();
-                setup_overview_section_menu_buttons();
-                hide_loading_overlay();
-            });
-        });
-    });
-    document.getElementById("switchRunName").addEventListener("click", function () {
-        settings.switch.runName = !settings.switch.runName
-        update_switch_local_storage("switch.runName", settings.switch.runName);
-        show_loading_overlay();
-        requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-                // create latest and total bars and set visibility
-                create_overview_latest_graphs();
-                update_overview_latest_heading();
-                create_overview_total_graphs();
-                update_overview_total_heading();
-                update_overview_sections_visibility();
-                // update all named project bars
-                update_projectbar_visibility();
-                setup_overview_section_menu_buttons();
-                hide_loading_overlay();
-            });
-        });
-    });
-    document.getElementById("switchLatestRuns").addEventListener("click", function () {
-        settings.switch.latestRuns = !settings.switch.latestRuns
-        update_switch_local_storage("switch.latestRuns", settings.switch.latestRuns);
-        update_overview_sections_visibility();
-        setup_overview_section_menu_buttons();
-    });
-    document.getElementById("switchTotalStats").addEventListener("click", function () {
-        settings.switch.totalStats = !settings.switch.totalStats
-        update_switch_local_storage("switch.totalStats", settings.switch.totalStats);
-        update_overview_sections_visibility();
-        setup_overview_section_menu_buttons();
-    });
-    document.getElementById("switchSortFilters").addEventListener("click", function () {
-        settings.switch.sortFilters = !settings.switch.sortFilters
-        update_switch_local_storage("switch.sortFilters", settings.switch.sortFilters);
-        update_overview_filter_visibility();
-    });
-    document.getElementById("suiteSelectSuites").addEventListener("change", () => {
-        const mostGraphIds = settings.switch.sectionFiltersApplySuite
-            ? ["suiteMostFailedGraph", "suiteMostTimeConsumingGraph"]
-            : [];
-        update_graphs_with_loading(["suiteStatisticsGraph", "suiteDurationGraph", ...mostGraphIds], () => {
-            update_suite_duration_graph();
-            update_suite_statistics_graph();
-            if (settings.switch.sectionFiltersApplySuite) {
-                update_suite_most_failed_graph();
-                update_suite_most_time_consuming_graph();
-            }
-        });
-    });
-    update_switch_local_storage("switch.suitePathsSuiteSection", settings.switch.suitePathsSuiteSection, true);
-    document.getElementById("switchSuitePathsSuiteSection").addEventListener("change", (e) => {
-        settings.switch.suitePathsSuiteSection = !settings.switch.suitePathsSuiteSection;
-        update_switch_local_storage("switch.suitePathsSuiteSection", settings.switch.suitePathsSuiteSection);
-        update_graphs_with_loading(
-            ["suiteStatisticsGraph", "suiteDurationGraph", "suiteMostFailedGraph", "suiteMostTimeConsumingGraph"],
-            () => {
-                setup_suites_in_suite_select();
-                update_suite_statistics_graph();
-                update_suite_duration_graph();
-                update_suite_most_failed_graph();
-                update_suite_most_time_consuming_graph();
-            }
-        );
-    });
-    update_switch_local_storage("switch.sectionFiltersApplySuite", settings.switch.sectionFiltersApplySuite, true);
-    document.getElementById("switchSectionFiltersApplySuite").addEventListener("change", () => {
-        settings.switch.sectionFiltersApplySuite = !settings.switch.sectionFiltersApplySuite;
-        update_switch_local_storage("switch.sectionFiltersApplySuite", settings.switch.sectionFiltersApplySuite);
-        update_graphs_with_loading(
-            ["suiteMostFailedGraph", "suiteMostTimeConsumingGraph"],
-            () => {
-                update_suite_most_failed_graph();
-                update_suite_most_time_consuming_graph();
-            }
-        );
-    });
-    document.getElementById("resetSuiteFolder").addEventListener("click", () => {
-        update_graphs_with_loading(["suiteFolderDonutGraph", "suiteFolderFailDonutGraph", "suiteStatisticsGraph", "suiteDurationGraph"], () => {
-            update_suite_folder_donut_graph("");
-        });
-    });
-    document.getElementById("suiteSelectTests").addEventListener("change", () => {
-        const mostGraphIds = settings.switch.sectionFiltersApplyTest
-            ? ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
-               "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"]
-            : [];
-        update_graphs_with_loading(
-            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", ...mostGraphIds],
-            () => {
-                setup_testtags_in_select();
-                setup_tests_in_select();
-                update_test_statistics_graph();
-                update_test_duration_graph();
-                update_test_duration_deviation_graph();
-                if (settings.switch.sectionFiltersApplyTest) {
-                    update_test_messages_graph();
-                    update_test_most_flaky_graph();
-                    update_test_recent_most_flaky_graph();
-                    update_test_most_failed_graph();
-                    update_test_recent_most_failed_graph();
-                    update_test_most_time_consuming_graph();
-                }
-            }
-        );
-    });
-    update_switch_local_storage("switch.suitePathsTestSection", settings.switch.suitePathsTestSection, true);
-    document.getElementById("switchSuitePathsTestSection").addEventListener("change", () => {
-        settings.switch.suitePathsTestSection = !settings.switch.suitePathsTestSection;
-        update_switch_local_storage("switch.suitePathsTestSection", settings.switch.suitePathsTestSection);
-        update_graphs_with_loading(
-            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", "testMessagesGraph",
-                "testMostFlakyGraph", "testRecentMostFlakyGraph", "testMostFailedGraph",
-                "testRecentMostFailedGraph", "testMostTimeConsumingGraph"],
-            () => {
-                setup_suites_in_test_select();
-                update_test_statistics_graph();
-                update_test_duration_graph();
-                update_test_duration_deviation_graph();
-                update_test_messages_graph();
-                update_test_most_flaky_graph();
-                update_test_recent_most_flaky_graph();
-                update_test_most_failed_graph();
-                update_test_recent_most_failed_graph();
-                update_test_most_time_consuming_graph();
-            }
-        );
-    });
-    update_switch_local_storage("switch.sectionFiltersApplyTest", settings.switch.sectionFiltersApplyTest, true);
-    document.getElementById("switchSectionFiltersApplyTest").addEventListener("change", () => {
-        settings.switch.sectionFiltersApplyTest = !settings.switch.sectionFiltersApplyTest;
-        update_switch_local_storage("switch.sectionFiltersApplyTest", settings.switch.sectionFiltersApplyTest);
-        update_graphs_with_loading(
-            ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
-             "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"],
-            () => {
-                update_test_messages_graph();
-                update_test_most_flaky_graph();
-                update_test_recent_most_flaky_graph();
-                update_test_most_failed_graph();
-                update_test_recent_most_failed_graph();
-                update_test_most_time_consuming_graph();
-            }
-        );
-    });
-    document.getElementById("testTagsSelect").addEventListener("change", () => {
-        const mostGraphIds = settings.switch.sectionFiltersApplyTest
-            ? ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
-               "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"]
-            : [];
-        update_graphs_with_loading(
-            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", ...mostGraphIds],
-            () => {
-                setup_tests_in_select();
-                update_test_statistics_graph();
-                update_test_duration_graph();
-                update_test_duration_deviation_graph();
-                if (settings.switch.sectionFiltersApplyTest) {
-                    update_test_messages_graph();
-                    update_test_most_flaky_graph();
-                    update_test_recent_most_flaky_graph();
-                    update_test_most_failed_graph();
-                    update_test_recent_most_failed_graph();
-                    update_test_most_time_consuming_graph();
-                }
-            }
-        );
-    });
-    document.getElementById("testSelect").addEventListener("change", () => {
-        const mostGraphIds = settings.switch.sectionFiltersApplyTest
-            ? ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
-               "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"]
-            : [];
-        update_graphs_with_loading(
-            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", ...mostGraphIds],
-            () => {
-                update_test_statistics_graph();
-                update_test_duration_graph();
-                update_test_duration_deviation_graph();
-                if (settings.switch.sectionFiltersApplyTest) {
-                    update_test_messages_graph();
-                    update_test_most_flaky_graph();
-                    update_test_recent_most_flaky_graph();
-                    update_test_most_failed_graph();
-                    update_test_recent_most_failed_graph();
-                    update_test_most_time_consuming_graph();
-                }
-            }
-        );
-    });
-    document.getElementById("keywordSelect").addEventListener("change", () => {
-        const mostGraphIds = settings.switch.sectionFiltersApplyKeyword
-            ? ["keywordMostFailedGraph", "keywordMostTimeConsumingGraph", "keywordMostUsedGraph"]
-            : [];
-        update_graphs_with_loading(
-            ["keywordStatisticsGraph", "keywordTimesRunGraph", "keywordTotalDurationGraph",
-                "keywordAverageDurationGraph", "keywordMinDurationGraph", "keywordMaxDurationGraph", ...mostGraphIds],
-            () => {
-                update_keyword_statistics_graph();
-                update_keyword_times_run_graph();
-                update_keyword_total_duration_graph();
-                update_keyword_average_duration_graph();
-                update_keyword_min_duration_graph();
-                update_keyword_max_duration_graph();
-                if (settings.switch.sectionFiltersApplyKeyword) {
-                    update_keyword_most_failed_graph();
-                    update_keyword_most_time_consuming_graph();
-                    update_keyword_most_used_graph();
-                }
-            }
-        );
-    });
-    update_switch_local_storage("switch.sectionFiltersApplyKeyword", settings.switch.sectionFiltersApplyKeyword, true);
-    document.getElementById("switchSectionFiltersApplyKeyword").addEventListener("change", () => {
-        settings.switch.sectionFiltersApplyKeyword = !settings.switch.sectionFiltersApplyKeyword;
-        update_switch_local_storage("switch.sectionFiltersApplyKeyword", settings.switch.sectionFiltersApplyKeyword);
-        update_graphs_with_loading(
-            ["keywordMostFailedGraph", "keywordMostTimeConsumingGraph", "keywordMostUsedGraph"],
-            () => {
-                update_keyword_most_failed_graph();
-                update_keyword_most_time_consuming_graph();
-                update_keyword_most_used_graph();
-            }
-        );
-    });
-    update_switch_local_storage("switch.useLibraryNames", settings.switch.useLibraryNames, true);
-    document.getElementById("switchUseLibraryNames").addEventListener("change", () => {
-        settings.switch.useLibraryNames = !settings.switch.useLibraryNames;
-        update_switch_local_storage("switch.useLibraryNames", settings.switch.useLibraryNames);
-        update_graphs_with_loading(
-            ["keywordStatisticsGraph", "keywordTimesRunGraph", "keywordTotalDurationGraph",
-                "keywordAverageDurationGraph", "keywordMinDurationGraph", "keywordMaxDurationGraph",
-                "keywordMostFailedGraph", "keywordMostTimeConsumingGraph", "keywordMostUsedGraph"],
-            () => {
-                setup_keywords_in_select();
-                update_keyword_statistics_graph();
-                update_keyword_times_run_graph();
-                update_keyword_total_duration_graph();
-                update_keyword_average_duration_graph();
-                update_keyword_min_duration_graph();
-                update_keyword_max_duration_graph();
-                update_keyword_most_failed_graph();
-                update_keyword_most_time_consuming_graph();
-                update_keyword_most_used_graph();
-            }
-        );
-    });
-    // compare filters
-    compareRunIds.forEach(id => {
-        const element = document.getElementById(id);
-        if (element) {
-            element.addEventListener('change', () => {
-                update_graphs_with_loading(
-                    ["compareStatisticsGraph", "compareSuiteDurationGraph", "compareTestsGraph"],
-                    () => {
-                        update_compare_statistics_graph();
-                        update_compare_suite_duration_graph();
-                        update_compare_tests_graph();
-                    }
-                );
-            });
-        }
-    });
-    update_switch_local_storage("switch.suitePathsCompareSection", settings.switch.suitePathsCompareSection, true);
-    document.getElementById("switchSuitePathsCompareSection").addEventListener("change", (e) => {
-        settings.switch.suitePathsCompareSection = !settings.switch.suitePathsCompareSection;
-        update_switch_local_storage("switch.suitePathsCompareSection", settings.switch.suitePathsCompareSection);
-        update_graphs_with_loading(
-            ["compareStatisticsGraph", "compareSuiteDurationGraph", "compareTestsGraph"],
-            () => {
-                update_compare_statistics_graph();
-                update_compare_suite_duration_graph();
-                update_compare_tests_graph();
-            }
-        );
-    });
-}
-
-// helper functions to save and restore section filter values across fullscreen transitions
-function save_section_filter_values() {
-    const saved = {};
-    const suiteFolder = document.getElementById("suiteFolder");
-    if (suiteFolder) saved.suiteFolder = suiteFolder.innerText;
-    ["suiteSelectSuites", "suiteSelectTests", "testSelect", "testTagsSelect", "keywordSelect",
-        "compareRun1", "compareRun2", "compareRun3", "compareRun4"].forEach(id => {
-            const el = document.getElementById(id);
-            if (el) saved[id] = el.value;
-        });
-    return saved;
-}
-
-function restore_section_filter_values(saved) {
-    const suiteFolder = document.getElementById("suiteFolder");
-    if (suiteFolder && saved.suiteFolder !== undefined) suiteFolder.innerText = saved.suiteFolder;
-    ["suiteSelectSuites", "suiteSelectTests", "testSelect", "testTagsSelect", "keywordSelect",
-        "compareRun1", "compareRun2", "compareRun3", "compareRun4"].forEach(id => {
-            const el = document.getElementById(id);
-            if (el && saved[id] !== undefined) {
-                const optionExists = Array.from(el.options).some(opt => opt.value === saved[id]);
-                if (optionExists) el.value = saved[id];
-            }
-        });
-}
-
-// function to setup eventlisteners for changing the graph view buttons
-function setup_graph_view_buttons() {
-    // eventlisteners for fullscreen buttons
-    for (let fullscreenButton of fullscreenButtons) {
-        const fullscreenId = `${fullscreenButton}Fullscreen`;
-        const closeId = `${fullscreenButton}Close`;
-        const graphFunctionName = `update_${camelcase_to_underscore(fullscreenButton)}_graph`;
-
-        const toggleFullscreen = (entering) => {
-            const fullscreen = document.getElementById(fullscreenId);
-            const close = document.getElementById(closeId);
-            const content = fullscreen.closest(".grid-stack-item-content");
-            const canvasId = `${fullscreenButton}Graph`;
-
-            const savedFilterValues = save_section_filter_values();
-
-            show_graph_loading(canvasId);
-            inFullscreen = entering;
-            fullscreen.hidden = entering;
-            close.hidden = !entering;
-            content.classList.toggle("fullscreen", entering);
-            document.body.classList.toggle("lock-scroll", entering);
-            document.documentElement.classList.toggle("html-scroll", !entering);
-
-            setTimeout(() => {
-                const graphBody = content.querySelector('.graph-body');
-                let section = null;
-                if (fullscreenButton.includes("suite")) {
-                    section = "suite";
-                } else if (fullscreenButton.includes("test")) {
-                    section = "test";
-                } else if (fullscreenButton.includes("keyword")) {
-                    section = "keyword";
-                } else if (fullscreenButton.includes("compare")) {
-                    section = "compare";
-                }
-                if (section) {
-                    const filters = document.getElementById(`${section}SectionFilters`);
-                    const originalContainer = document.getElementById(`${section}SectionFiltersContainer`);
-                    if (entering) {
-                        const fullscreenHeader = document.querySelector('.grid-stack-item-content.fullscreen');
-                        fullscreenHeader.insertBefore(filters, fullscreenHeader.firstChild);
-                    } else {
-                        originalContainer.insertBefore(filters, originalContainer.firstChild);
-                    }
-                }
-
-                // Lock graph-body height to prevent Chart.js resize feedback loop
-                if (entering && graphBody) {
-                    graphBody.style.height = graphBody.clientHeight + 'px';
-                } else if (graphBody) {
-                    graphBody.style.height = '';
-                }
-
-                if (typeof window[graphFunctionName] === "function") {
-                    if (fullscreenButton === "suiteFolderDonut") {
-                        // Pass the saved folder so the donut and related graphs rebuild correctly
-                        const currentFolder = savedFilterValues.suiteFolder;
-                        window[graphFunctionName](currentFolder === "All" ? "" : currentFolder);
-                    } else {
-                        window[graphFunctionName]();
-                    }
-                }
-
-                if (fullscreenButton === "runDonut") {
-                    update_run_donut_total_graph();
-                }
-
-                restore_section_filter_values(savedFilterValues);
-
-                hide_graph_loading(canvasId);
-            }, 0);
-        };
-
-        document.getElementById(fullscreenId).addEventListener("click", () => {
-            inFullscreenGraph = fullscreenId;
-            lastScrollY = window.scrollY;
-            document.getElementById("navigation").style.display = "none";
-            toggleFullscreen(true);
-        });
-
-        document.getElementById(closeId).addEventListener("click", () => {
-            inFullscreenGraph = ""
-            document.getElementById("navigation").style.display = "";
-            toggleFullscreen(false);
-            window.scrollTo({ top: lastScrollY, behavior: "auto" });
-        });
-    }
-    // close fullscreen on Escape key
-    document.addEventListener("keydown", (event) => {
-        if (event.key === "Escape" && inFullscreen) {
-            const closeBtn = document.querySelector(`.close-graph[id$="Close"]:not([hidden])`);
-            if (closeBtn) closeBtn.click();
-        }
-    });
-    // has to be added after the creation of the sections and graphs
-    document.getElementById("suiteFolderDonutGoUp").addEventListener("click", function () {
-        function remove_last_folder(path) {
-            const parts = path.split(".");
-            parts.pop();
-            return parts.length > 0 ? parts.join('.') : "";
-        }
-        const folder = remove_last_folder(previousFolder)
-        if (previousFolder == "" && folder == "") { return }
-        update_graphs_with_loading(["suiteFolderDonutGraph", "suiteFolderFailDonutGraph", "suiteStatisticsGraph", "suiteDurationGraph"], () => {
-            update_suite_folder_donut_graph(folder)
-        });
-    });
-    // ignore skip button eventlisteners
-    document.getElementById("ignoreSkips").checked = settings.switch.ignoreSkips;
-    ignoreSkips = settings.switch.ignoreSkips;
-    document.getElementById("ignoreSkipsRecent").checked = settings.switch.ignoreSkipsRecent;
-    ignoreSkipsRecent = settings.switch.ignoreSkipsRecent;
-    document.getElementById("onlyFailedFolders").checked = settings.switch.onlyFailedFolders;
-    onlyFailedFolders = settings.switch.onlyFailedFolders;
-
-    document.getElementById("ignoreSkips").addEventListener("change", () => {
-        ignoreSkips = !ignoreSkips;
-        set_local_storage_item("switch.ignoreSkips", ignoreSkips);
-        update_graphs_with_loading(["testMostFlakyGraph"], () => {
-            update_test_most_flaky_graph();
-        });
-    });
-    document.getElementById("ignoreSkipsRecent").addEventListener("change", () => {
-        ignoreSkipsRecent = !ignoreSkipsRecent;
-        set_local_storage_item("switch.ignoreSkipsRecent", ignoreSkipsRecent);
-        update_graphs_with_loading(["testRecentMostFlakyGraph"], () => {
-            update_test_recent_most_flaky_graph();
-        });
-    });
-    document.getElementById("onlyFailedFolders").addEventListener("change", () => {
-        onlyFailedFolders = !onlyFailedFolders;
-        set_local_storage_item("switch.onlyFailedFolders", onlyFailedFolders);
-        update_graphs_with_loading(["suiteFolderDonutGraph", "suiteFolderFailDonutGraph", "suiteStatisticsGraph", "suiteDurationGraph"], () => {
-            update_suite_folder_donut_graph("");
-        });
-    });
-
-    [
-        ["onlyLastRunSuite", "switch.onlyLastRunSuite"],
-        ["onlyLastRunTest", "switch.onlyLastRunTest"],
-        ["onlyLastRunKeyword", "switch.onlyLastRunKeyword"],
-        ["onlyLastRunKeywordMostUsed", "switch.onlyLastRunKeywordMostUsed"],
-        ["testOnlyChanges", "switch.testOnlyChanges"],
-        ["compareOnlyChanges", "switch.compareOnlyChanges"],
-    ].forEach(([elementId, settingsKey]) => {
-        const value = settingsKey.split(".").reduce((acc, k) => acc?.[k], settings);
-        if (typeof value === "boolean") {
-            document.getElementById(elementId).checked = value;
-        }
-    });
-
-    [
-        ["heatMapTestType", "switch.heatmapStatus"],
-        ["heatMapHour", "switch.heatmapHour"],
-        ["testNoChanges", "switch.testStatusFilter"],
-        ["testRerunView", "switch.testRerunView"],
-        ["compareNoChanges", "switch.compareStatusFilter"],
-        ["compareRerunView", "switch.compareRerunView"],
-    ].forEach(([elementId, settingsKey]) => {
-        const value = settingsKey.split(".").reduce((acc, k) => acc?.[k], settings);
-        if (typeof value === "string") {
-            document.getElementById(elementId).value = value;
-        }
-    });
-    heatMapHourAll = document.getElementById("heatMapHour").value === "All";
-
-    [
-        ["heatMapTestType", "runHeatmapGraph", update_run_heatmap_graph, "switch.heatmapStatus", "select"],
-        ["testOnlyChanges", "testStatisticsGraph", update_test_statistics_graph, "switch.testOnlyChanges", "checkbox"],
-        ["testNoChanges", "testStatisticsGraph", update_test_statistics_graph, "switch.testStatusFilter", "select"],
-        ["compareOnlyChanges", "compareTestsGraph", update_compare_tests_graph, "switch.compareOnlyChanges", "checkbox"],
-        ["compareNoChanges", "compareTestsGraph", update_compare_tests_graph, "switch.compareStatusFilter", "select"],
-        ["compareRerunView", "compareTestsGraph", update_compare_tests_graph, "switch.compareRerunView", "select"],
-        ["onlyLastRunSuite", "suiteMostTimeConsumingGraph", update_suite_most_time_consuming_graph, "switch.onlyLastRunSuite", "checkbox"],
-        ["onlyLastRunTest", "testMostTimeConsumingGraph", update_test_most_time_consuming_graph, "switch.onlyLastRunTest", "checkbox"],
-        ["onlyLastRunKeyword", "keywordMostTimeConsumingGraph", update_keyword_most_time_consuming_graph, "switch.onlyLastRunKeyword", "checkbox"],
-        ["onlyLastRunKeywordMostUsed", "keywordMostUsedGraph", update_keyword_most_used_graph, "switch.onlyLastRunKeywordMostUsed", "checkbox"],
-    ].forEach(([elementId, graphId, updateFn, settingsKey, type]) => {
-        document.getElementById(elementId).addEventListener("change", () => {
-            const el = document.getElementById(elementId);
-            const newValue = type === "select" ? el.value : el.checked;
-            set_local_storage_item(settingsKey, newValue);
-            update_graphs_with_loading([graphId], updateFn);
-        });
-    });
-    // the rerun view (mark reruns / final result / first attempt) is read by every test graph that
-    // marks re-executed tests or resolves their status, not only by the test statistics graph
-    document.getElementById("testRerunView").addEventListener("change", () => {
-        set_local_storage_item("switch.testRerunView", document.getElementById("testRerunView").value);
-        update_graphs_with_loading(
-            ["testStatisticsGraph", "testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
-                "testMostFailedGraph", "testRecentMostFailedGraph"],
-            () => {
-                update_test_statistics_graph();
-                update_test_messages_graph();
-                update_test_most_flaky_graph();
-                update_test_recent_most_flaky_graph();
-                update_test_most_failed_graph();
-                update_test_recent_most_failed_graph();
-            }
-        );
-    });
-    document.getElementById("heatMapHour").addEventListener("change", () => {
-        heatMapHourAll = document.getElementById("heatMapHour").value === "All";
-        set_local_storage_item("switch.heatmapHour", document.getElementById("heatMapHour").value);
-        update_graphs_with_loading(["runHeatmapGraph"], () => {
-            update_run_heatmap_graph();
-        });
-    });
-    // graph layout changes
-    document.querySelectorAll(".shown-graph").forEach(btn => {
-        btn.addEventListener("click", () => {
-            btn.hidden = true;
-            document.getElementById(`${btn.id.replace("Shown", "Hidden")}`).hidden = false;
-            document.dispatchEvent(new CustomEvent("layout-user-action"));
-        })
-    });
-    document.querySelectorAll(".hidden-graph").forEach(btn => {
-        btn.addEventListener("click", () => {
-            btn.hidden = true;
-            document.getElementById(`${btn.id.replace("Hidden", "Shown")}`).hidden = false;
-            document.dispatchEvent(new CustomEvent("layout-user-action"));
-        })
-    });
-    // table layout changes
-    document.querySelectorAll(".move-up-table").forEach(btn => {
-        btn.addEventListener("click", () => {
-            const section = btn.closest(".table-section");
-            const previous = section.previousElementSibling;
-            if (previous && previous.classList.contains("table-section")) {
-                section.parentElement.insertBefore(section, previous);
-                document.dispatchEvent(new CustomEvent("layout-user-action"));
-            }
-        });
-    });
-    document.querySelectorAll(".move-down-table").forEach(btn => {
-        btn.addEventListener("click", () => {
-            const section = btn.closest(".table-section");
-            const next = section.nextElementSibling;
-            if (next && next.classList.contains("table-section")) {
-                section.parentElement.insertBefore(next, section);
-                document.dispatchEvent(new CustomEvent("layout-user-action"));
-            }
-        });
-    });
-    function update_active_graph_type_buttons(graphChangeButton, activeGraphType) {
-        const camelButtonName = underscore_to_camelcase(graphChangeButton);
-        const buttonTypes = graphChangeButtons[graphChangeButton].split(",");
-        buttonTypes.forEach((graphType) => {
-            const buttonId = `${camelButtonName}Graph${graphType}`;
-            const buttonElement = document.getElementById(buttonId);
-            buttonElement.classList.remove("active");
-            if (graphType.toLowerCase() === activeGraphType) {
-                buttonElement.classList.add("active");
-            }
-        });
-    }
-    function handle_graph_change_type_button_click(graphChangeButton, graphType, camelButtonName) {
-        const canvasId = `${camelButtonName}Graph`;
-        show_graph_loading(canvasId);
-        setTimeout(() => {
-            update_graph_type(`${camelButtonName}GraphType`, graphType)
-            window[`create_${graphChangeButton}_graph`]();
-            update_active_graph_type_buttons(graphChangeButton, graphType);
-            if (graphChangeButton == 'run_donut') { update_run_donut_total_graph(); }
-            if (graphChangeButton == 'suite_folder_donut') { update_suite_folder_fail_donut_graph(); }
-            hide_graph_loading(canvasId);
-        }, 0);
-    }
-    function add_graph_eventlisteners(graphChangeButton, buttonTypes) {
-        const camelButtonName = underscore_to_camelcase(graphChangeButton);
-        const graphTypes = buttonTypes.split(",");
-        graphTypes.forEach((graphType, index) => {
-            const buttonId = `${camelButtonName}Graph${graphType}`;
-            if (document.getElementById(buttonId)) {
-                document.getElementById(buttonId).addEventListener("click", () => {
-                    handle_graph_change_type_button_click(graphChangeButton, graphType.toLowerCase(), camelButtonName);
-                });
-            }
-        });
-    }
-    Object.entries(graphChangeButtons).forEach(([graphChangeButton, buttonTypes]) => {
-        add_graph_eventlisteners(graphChangeButton, buttonTypes);
-    });
-    Object.entries(graphChangeButtons).forEach(([graphChangeButton, buttonTypes]) => {
-        if (graphChangeButton.includes("table")) { return; }
-        const camelButtonName = underscore_to_camelcase(graphChangeButton);
-        const storedGraphType = settings?.graphTypes?.[`${camelButtonName}GraphType`];
-        const defaultGraphType = buttonTypes.split(",")[0].toLowerCase();
-        const activeGraphType = storedGraphType || defaultGraphType;
-        update_active_graph_type_buttons(graphChangeButton, activeGraphType);
-    });
-
-    document.getElementById("sectionFiltersModal").addEventListener("show.bs.modal", function () {
-        ["suite", "test", "keyword"].forEach(section => {
-            const filters = document.getElementById(`${section}SectionFilters`);
-            const cardBody = document.getElementById(`${section}SectionFiltersCardBody`);
-            if (filters && cardBody) cardBody.appendChild(filters);
-        });
-    });
-
-    document.getElementById("sectionFiltersModal").addEventListener("hide.bs.modal", function () {
-        ["suite", "test", "keyword"].forEach(section => {
-            const filters = document.getElementById(`${section}SectionFilters`);
-            const container = document.getElementById(`${section}SectionFiltersContainer`);
-            if (filters && container) container.insertBefore(filters, container.firstChild);
-        });
-    });
-}
-
-// function to setup collapse buttons and icons
-function setup_collapsables() {
-    document.querySelectorAll(".collapse-icon").forEach(origIcon => {
-        // Replace the element with a clone to remove existing listeners
-        // required to readd collapsables for overview project sections
-        const icon = origIcon.cloneNode(true);
-        origIcon.replaceWith(icon);
-
-        const sectionId = icon.id.replace("collapse", "");
-        const update_icon = () => {
-            const section = document.getElementById(sectionId);
-            icon.innerHTML = section.hidden ? arrowRight : arrowDown;
-        };
-        icon.addEventListener("click", () => {
-            const section = document.getElementById(sectionId);
-            section.hidden = !section.hidden;
-            update_icon();
-        });
-        update_icon();
-    });
-}
-
-function attach_run_card_version_listener(versionElement, projectName, projectVersion) {
-    versionElement.addEventListener("click", (event) => {
-        clear_all_filters();
-        set_filter_show_current_project(projectName);
-        set_filter_show_current_version(projectVersion);
-        event.stopPropagation();
-        update_menu("menuDashboard");
-    });
-}
-
-// this function setups the project bar "sort by" filters eventlisteners
-function setup_overview_order_filters() {
-    const parseProjectId = (selectId) => selectId.replace(/SectionOrder$/i, "");
-    const parseRunStatsFromCard = (cardEl) => {
-        const text = cardEl.innerText || "";
-        const runMatch = text.match(/#\s*(\d+)/); // e.g., "#8"
-        const passedMatch = text.match(/Passed:\s*(\d+)/i);
-        const failedMatch = text.match(/Failed:\s*(\d+)/i);
-        const skippedMatch = text.match(/Skipped:\s*(\d+)/i);
-        return {
-            runNumber: runMatch ? parseInt(runMatch[1]) : 0,
-            passed: passedMatch ? parseInt(passedMatch[1]) : 0,
-            failed: failedMatch ? parseInt(failedMatch[1]) : 0,
-            skipped: skippedMatch ? parseInt(skippedMatch[1]) : 0,
-        };
-    };
-
-    const reorderProjectCards = (projectId, order) => {
-        const containerId = `${projectId}RunCardsContainer`;
-        const container = document.getElementById(containerId);
-        if (!container) return;
-        const cards = Array.from(container.querySelectorAll('.overview-card'));
-        if (cards.length === 0) return;
-        const enriched = cards.map(card => ({ el: card, stats: parseRunStatsFromCard(card) }));
-
-        const cmpDesc = (a, b, key) => (b.stats[key] - a.stats[key]);
-        const cmpAsc = (a, b, key) => (a.stats[key] - b.stats[key]);
-
-        if (order === "oldest" || order.toLowerCase() === "oldest run") {
-            enriched.sort((a, b) => cmpAsc(a, b, 'runNumber'));
-        } else if (order === "most failed") {
-            enriched.sort((a, b) => cmpDesc(a, b, 'failed'));
-        } else if (order === "most skipped") {
-            enriched.sort((a, b) => cmpDesc(a, b, 'skipped'));
-        } else if (order === "most passed") {
-            enriched.sort((a, b) => cmpDesc(a, b, 'passed'));
-        } else {
-            enriched.sort((a, b) => cmpDesc(a, b, 'runNumber'));
-        }
-        const fragment = document.createDocumentFragment();
-        enriched.forEach(item => fragment.appendChild(item.el));
-        container.innerHTML = '';
-        container.appendChild(fragment);
-    };
-
-    document.querySelectorAll('.section-order-filter').forEach(select => {
-        const selectId = select.id;
-        if (selectId === "overviewLatestSectionOrder") {
-            select.addEventListener('change', (e) => {
-                show_loading_overlay();
-                requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                        create_overview_latest_graphs();
-                        hide_loading_overlay();
-                    });
-                });
-            });
-        } else {
-            const projectId = parseProjectId(selectId);
-            select.addEventListener('change', (e) => {
-                const order = (e.target.value || '').toLowerCase();
-                reorderProjectCards(projectId, order);
-            });
-        }
-    });
-}
-
-export {
-    setup_filter_modal,
-    update_filters_button_indicator,
-    setup_settings_modal,
-    setup_sections_filters,
-    setup_graph_view_buttons,
-    setup_collapsables,
-    attach_run_card_version_listener,
-    setup_overview_order_filters
-};
diff --git a/robotframework_dashboard/js/eventlisteners/collapsables.js b/robotframework_dashboard/js/eventlisteners/collapsables.js
new file mode 100644
index 00000000..7ba72e37
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/collapsables.js
@@ -0,0 +1,25 @@
+import { arrowDown, arrowRight } from "../variables/svg.js";
+
+// function to setup collapse buttons and icons
+function setup_collapsables() {
+    document.querySelectorAll(".collapse-icon").forEach(origIcon => {
+        // Replace the element with a clone to remove existing listeners
+        // required to readd collapsables for overview project sections
+        const icon = origIcon.cloneNode(true);
+        origIcon.replaceWith(icon);
+
+        const sectionId = icon.id.replace("collapse", "");
+        const update_icon = () => {
+            const section = document.getElementById(sectionId);
+            icon.innerHTML = section.hidden ? arrowRight : arrowDown;
+        };
+        icon.addEventListener("click", () => {
+            const section = document.getElementById(sectionId);
+            section.hidden = !section.hidden;
+            update_icon();
+        });
+        update_icon();
+    });
+}
+
+export { setup_collapsables };
diff --git a/robotframework_dashboard/js/eventlisteners/confirm_modal.js b/robotframework_dashboard/js/eventlisteners/confirm_modal.js
new file mode 100644
index 00000000..f410c32b
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/confirm_modal.js
@@ -0,0 +1,41 @@
+function confirm_action(message = "Are you sure?") {
+    return new Promise((resolve) => {
+        const settingsModal = document.getElementById("settingsModal");
+        const filtersModal = document.getElementById("filtersModal");
+        const modalEl = document.getElementById("confirmModal");
+        const modalBody = document.getElementById("confirmModalMessage");
+        const cancelBtn = document.getElementById("confirmCancel");
+        const okBtn = document.getElementById("confirmOk");
+
+        settingsModal.classList.add("dimmed");
+        filtersModal.classList.add("dimmed");
+        modalBody.innerHTML = message;
+
+        const modal = new bootstrap.Modal(modalEl);
+        const onCancel = () => {
+            resolve(false);
+            modal.hide();
+        };
+        const onConfirm = () => {
+            resolve(true);
+            modal.hide();
+        };
+        const onHidden = () => {
+            cleanup();
+        };
+        const cleanup = () => {
+            cancelBtn.removeEventListener("click", onCancel);
+            okBtn.removeEventListener("click", onConfirm);
+            modalEl.removeEventListener("hidden.bs.modal", onHidden);
+            settingsModal.classList.remove("dimmed");
+            filtersModal.classList.remove("dimmed");
+        };
+
+        cancelBtn.addEventListener("click", onCancel);
+        okBtn.addEventListener("click", onConfirm);
+        modalEl.addEventListener("hidden.bs.modal", onHidden);
+        modal.show();
+    });
+}
+
+export { confirm_action };
diff --git a/robotframework_dashboard/js/eventlisteners/filter_modal.js b/robotframework_dashboard/js/eventlisteners/filter_modal.js
new file mode 100644
index 00000000..d6dc748f
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/filter_modal.js
@@ -0,0 +1,241 @@
+import { runs, filteredAmount, filteredAmountDefault, server, no_auto_update } from "../variables/data.js";
+import { settings } from "../variables/settings.js";
+import { showingRunTags, showingProjectVersionDialogue } from "../variables/globals.js";
+import { add_alert, show_loading_overlay, hide_loading_overlay } from "../common.js";
+import { update_dashboard_graphs } from "../graph_creation/all.js";
+import { setup_filtered_data_and_filters } from "../filter/pipeline.js";
+import {
+    setup_run_amount_filter,
+    setup_lowest_highest_dates,
+    setup_metadata_filter,
+    setup_runs_in_select_filter_buttons,
+    setup_runtags_in_select_filter_buttons,
+    setup_project_versions_in_select_filter_buttons,
+    setup_custom_filters_in_select_filter_buttons,
+} from "../filter/modal_options.js";
+import { setup_suite_path_navigator } from "../filter/suite_path.js";
+import { clear_all_filters } from "../filter/controls.js";
+import {
+    capture_default_filters,
+    populate_filter_profile_select,
+    enter_profile_edit_mode,
+    exit_profile_edit_mode,
+    build_profile_from_checks,
+    save_filter_profile_to_storage,
+    delete_filter_profile,
+    apply_filter_profile,
+    update_active_profile,
+    clear_active_profile,
+    update_profile_select_display,
+} from "../filter/profiles.js";
+import {
+    schedule_filter_option_availability_refresh,
+    set_filter_modal_open,
+} from "../filter/availability.js";
+import { confirm_action } from "./confirm_modal.js";
+import { setup_merge_profiles_modal } from "./merge_profiles.js";
+
+function update_filters_button_indicator() {
+    const indicator = document.getElementById("filtersActiveIndicator");
+    if (!indicator) return;
+    // a hidden custom filter is not applied, so its dot must not mark the button as active
+    const anyActive = [...document.querySelectorAll("#filtersModal .version-selected-dot")]
+        .some(el => el.style.display !== "none" && !el.closest("[hidden]"));
+    indicator.style.display = anyActive ? "inline-block" : "none";
+}
+
+// function to setup filter modal eventlisteners
+function setup_filter_modal() {
+    // eventlistener to catch the closing of the filter modal
+    // Only recompute filtered data and update graphs in-place (no layout rebuild needed)
+    document.getElementById("filtersModal").addEventListener("hide.bs.modal", function () {
+        // no more writing into the modal while it fades out
+        set_filter_modal_open(false);
+        show_loading_overlay();
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setup_filtered_data_and_filters();
+                update_dashboard_graphs();
+                hide_loading_overlay();
+            });
+        });
+    });
+    // count the runs behind every filter option and grey out the ones that match nothing,
+    // also picking up filters that were set while the modal was closed (overview drill down)
+    document.getElementById("filtersModal").addEventListener("show.bs.modal", function () {
+        set_filter_modal_open(true);
+    });
+    // eventlistener to reset the filters
+    document.getElementById("resetFilters").addEventListener("click", function () {
+        clear_all_filters();
+        clear_active_profile();
+        add_alert("Filters have been set to default values!", "success")
+        update_profile_select_display();
+    });
+    // eventlistener for all runs button
+    document.getElementById("allRuns").addEventListener("click", function () {
+        document.getElementById("amount").value = Object.keys(runs).length;
+    });
+    // eventlistener for the runTags
+    function show_checkboxes() {
+        const checkboxes = document.getElementById("runTagCheckBoxes");
+        showingRunTags = !showingRunTags;
+        checkboxes.style.display = showingRunTags ? "block" : "none";
+    }
+    const checkboxesElement = document.getElementById("runTagCheckBoxes");
+    const runTagsSelectElement = document.getElementById("selectRunTags");
+    // eventlistener for click events on body to hide the run checkboxes when clicking outside of the select/checkboxes elements
+    document.getElementById("selectRunTags").addEventListener("click", show_checkboxes);
+    document.body.addEventListener("click", function (event) {
+        if (showingRunTags == true && !checkboxesElement.contains(event.target) && !runTagsSelectElement.contains(event.target)) {
+            show_checkboxes()
+        }
+    });
+    // eventlistener for the project version filter popup
+    const projectVersionCheckboxes = document.getElementById("projectVersionCheckBoxes");
+    const projectVersionSelectElement = document.getElementById("selectProjectVersion");
+    function toggle_project_version_filter_dialogue() {
+        showingProjectVersionDialogue = !showingProjectVersionDialogue;
+        projectVersionCheckboxes.style.display = showingProjectVersionDialogue ? "block" : "none";
+    }
+    projectVersionSelectElement.addEventListener("pointerdown", toggle_project_version_filter_dialogue);
+    document.body.addEventListener("pointerdown", function (event) {
+        if (showingProjectVersionDialogue && !projectVersionCheckboxes.contains(event.target) && !projectVersionSelectElement.contains(event.target)) {
+            toggle_project_version_filter_dialogue();
+        }
+    });
+    // amount filter setup
+    filteredAmountDefault = filteredAmount
+    document.getElementById("amount").value = filteredAmount
+    if (server) {
+        document.getElementById("openDashboard").hidden = false
+        if (no_auto_update) {
+            document.getElementById("refreshDashboard").hidden = false
+            document.getElementById("refreshDashboard").addEventListener("click", function () {
+                document.getElementById("refreshDashboardSpinner").hidden = false
+                const xhr = new XMLHttpRequest();
+                xhr.open("POST", "/refresh-dashboard");
+                xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+                xhr.onload = () => {
+                    document.getElementById("refreshDashboardSpinner").hidden = true
+                    if (xhr.readyState == 4 && xhr.status == 200) {
+                        const response = JSON.parse(xhr.responseText);
+                        if (response.success == "1") {
+                            console.log(response.console)
+                            add_alert(`${response.message} Reloading dashboard in 3 seconds!`, "success")
+                            setTimeout(() => {
+                                location.reload();
+                            }, 3000);
+                        } else {
+                            add_alert(response.message, "danger")
+                            console.log(response.console)
+                        }
+                    } else {
+                        add_alert(`Error: ${xhr.status}, ${xhr.responseText}`, "danger")
+                    }
+                };
+                xhr.send(JSON.stringify({}));
+            });
+        }
+    }
+    // fill the filters with default values
+    setup_run_amount_filter();
+    setup_lowest_highest_dates();
+    setup_metadata_filter();
+    setup_runs_in_select_filter_buttons();
+    setup_runtags_in_select_filter_buttons();
+    setup_project_versions_in_select_filter_buttons();
+    setup_suite_path_navigator("All");
+    setup_custom_filters_in_select_filter_buttons();
+    // snapshot the default/initial filter state so profile checkboxes can reflect changes
+    capture_default_filters();
+    // filter profiles setup
+    populate_filter_profile_select();
+    let showingFilterProfiles = false;
+    function toggle_filter_profiles() {
+        showingFilterProfiles = !showingFilterProfiles;
+        document.getElementById("filterProfileCheckBoxes").style.display = showingFilterProfiles ? "block" : "none";
+    }
+    document.getElementById("selectFilterProfile").addEventListener("click", toggle_filter_profiles);
+    const filterProfileCheckBoxes = document.getElementById("filterProfileCheckBoxes");
+    const selectFilterProfileElement = document.getElementById("selectFilterProfile");
+    document.body.addEventListener("click", function (event) {
+        if (showingFilterProfiles && !filterProfileCheckBoxes.contains(event.target) && !selectFilterProfileElement.contains(event.target)) {
+            toggle_filter_profiles();
+        }
+    });
+    document.getElementById("addFilterProfile").addEventListener("click", function () {
+        enter_profile_edit_mode();
+    });
+    document.getElementById("cancelFilterProfile").addEventListener("click", function () {
+        exit_profile_edit_mode();
+    });
+    document.getElementById("saveFilterProfile").addEventListener("click", function () {
+        const name = document.getElementById("filterProfileName").value.trim();
+        if (!name) {
+            add_alert("Please enter a profile name!", "warning");
+            return;
+        }
+        const profileData = build_profile_from_checks();
+        save_filter_profile_to_storage(name, profileData);
+        populate_filter_profile_select();
+        exit_profile_edit_mode();
+        update_profile_select_display();
+        add_alert(`Filter profile "${name}" saved!`, "success");
+    });
+    document.getElementById("filterProfileList").addEventListener("click", async function (event) {
+        const applyEl = event.target.closest(".filter-profile-apply");
+        const deleteEl = event.target.closest(".filter-profile-delete");
+        if (deleteEl) {
+            event.preventDefault();
+            event.stopPropagation();
+            const name = deleteEl.dataset.profile;
+            const confirmed = await confirm_action(`Are you sure you want to delete filter profile "${name}"?`);
+            if (confirmed) {
+                delete_filter_profile(name);
+                clear_active_profile();
+                populate_filter_profile_select();
+                update_profile_select_display();
+                add_alert(`Filter profile "${name}" deleted!`, "success");
+            }
+            return;
+        }
+        if (applyEl) {
+            event.preventDefault();
+            const name = applyEl.dataset.profile;
+            const profiles = settings.filterProfiles || {};
+            const profile = profiles[name];
+            if (profile) {
+                apply_filter_profile(profile, name);
+                add_alert(`Filter profile "${name}" applied`, "success");
+                update_profile_select_display();
+                populate_filter_profile_select();
+                update_filters_button_indicator();
+            }
+        }
+    });
+    document.getElementById("updateFilterProfile").addEventListener("click", function () {
+        update_active_profile();
+        populate_filter_profile_select();
+        add_alert(`Filter profile updated!`, "success");
+    });
+    setup_merge_profiles_modal();
+    document.getElementById("runs").addEventListener("change", function () {
+        const indicator = document.getElementById("filterRunSelectedIndicator");
+        if (indicator) indicator.style.display = this.value !== "All" ? "inline-block" : "none";
+        update_filters_button_indicator();
+    });
+    const filterModal = document.getElementById("filtersModal");
+    filterModal.addEventListener("change", function () {
+        update_profile_select_display();
+        update_filters_button_indicator();
+        schedule_filter_option_availability_refresh();
+    });
+    filterModal.addEventListener("input", function () {
+        update_profile_select_display();
+        update_filters_button_indicator();
+        schedule_filter_option_availability_refresh();
+    });
+}
+
+export { setup_filter_modal, update_filters_button_indicator };
diff --git a/robotframework_dashboard/js/eventlisteners/graph_view_buttons.js b/robotframework_dashboard/js/eventlisteners/graph_view_buttons.js
new file mode 100644
index 00000000..49e28842
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/graph_view_buttons.js
@@ -0,0 +1,354 @@
+import { settings } from "../variables/settings.js";
+import {
+    ignoreSkips,
+    ignoreSkipsRecent,
+    onlyFailedFolders,
+    heatMapHourAll,
+    inFullscreen,
+    inFullscreenGraph,
+    lastScrollY,
+    previousFolder,
+} from "../variables/globals.js";
+import { fullscreenButtons, graphChangeButtons } from "../variables/graphs.js";
+import {
+    camelcase_to_underscore,
+    underscore_to_camelcase,
+    show_graph_loading,
+    hide_graph_loading,
+    update_graphs_with_loading,
+} from "../common.js";
+import { set_local_storage_item, update_graph_type } from "../localstorage.js";
+import { update_run_donut_total_graph, update_run_heatmap_graph } from "../graph_creation/run.js";
+import {
+    update_suite_most_time_consuming_graph,
+    update_suite_folder_donut_graph,
+    update_suite_folder_fail_donut_graph,
+} from "../graph_creation/suite.js";
+import {
+    update_test_statistics_graph,
+    update_test_messages_graph,
+    update_test_most_flaky_graph,
+    update_test_recent_most_flaky_graph,
+    update_test_most_failed_graph,
+    update_test_recent_most_failed_graph,
+    update_test_most_time_consuming_graph,
+} from "../graph_creation/test.js";
+import {
+    update_keyword_most_time_consuming_graph,
+    update_keyword_most_used_graph,
+} from "../graph_creation/keyword.js";
+import { update_compare_tests_graph } from "../graph_creation/compare.js";
+import { save_section_filter_values, restore_section_filter_values } from "./section_filters.js";
+
+// function to setup eventlisteners for changing the graph view buttons
+function setup_graph_view_buttons() {
+    // eventlisteners for fullscreen buttons
+    for (let fullscreenButton of fullscreenButtons) {
+        const fullscreenId = `${fullscreenButton}Fullscreen`;
+        const closeId = `${fullscreenButton}Close`;
+        const graphFunctionName = `update_${camelcase_to_underscore(fullscreenButton)}_graph`;
+
+        const toggleFullscreen = (entering) => {
+            const fullscreen = document.getElementById(fullscreenId);
+            const close = document.getElementById(closeId);
+            const content = fullscreen.closest(".grid-stack-item-content");
+            const canvasId = `${fullscreenButton}Graph`;
+
+            const savedFilterValues = save_section_filter_values();
+
+            show_graph_loading(canvasId);
+            inFullscreen = entering;
+            fullscreen.hidden = entering;
+            close.hidden = !entering;
+            content.classList.toggle("fullscreen", entering);
+            document.body.classList.toggle("lock-scroll", entering);
+            document.documentElement.classList.toggle("html-scroll", !entering);
+
+            setTimeout(() => {
+                const graphBody = content.querySelector('.graph-body');
+                let section = null;
+                if (fullscreenButton.includes("suite")) {
+                    section = "suite";
+                } else if (fullscreenButton.includes("test")) {
+                    section = "test";
+                } else if (fullscreenButton.includes("keyword")) {
+                    section = "keyword";
+                } else if (fullscreenButton.includes("compare")) {
+                    section = "compare";
+                }
+                if (section) {
+                    const filters = document.getElementById(`${section}SectionFilters`);
+                    const originalContainer = document.getElementById(`${section}SectionFiltersContainer`);
+                    if (entering) {
+                        const fullscreenHeader = document.querySelector('.grid-stack-item-content.fullscreen');
+                        fullscreenHeader.insertBefore(filters, fullscreenHeader.firstChild);
+                    } else {
+                        originalContainer.insertBefore(filters, originalContainer.firstChild);
+                    }
+                }
+
+                // Lock graph-body height to prevent Chart.js resize feedback loop
+                if (entering && graphBody) {
+                    graphBody.style.height = graphBody.clientHeight + 'px';
+                } else if (graphBody) {
+                    graphBody.style.height = '';
+                }
+
+                if (typeof window[graphFunctionName] === "function") {
+                    if (fullscreenButton === "suiteFolderDonut") {
+                        // Pass the saved folder so the donut and related graphs rebuild correctly
+                        const currentFolder = savedFilterValues.suiteFolder;
+                        window[graphFunctionName](currentFolder === "All" ? "" : currentFolder);
+                    } else {
+                        window[graphFunctionName]();
+                    }
+                }
+
+                if (fullscreenButton === "runDonut") {
+                    update_run_donut_total_graph();
+                }
+
+                restore_section_filter_values(savedFilterValues);
+
+                hide_graph_loading(canvasId);
+            }, 0);
+        };
+
+        document.getElementById(fullscreenId).addEventListener("click", () => {
+            inFullscreenGraph = fullscreenId;
+            lastScrollY = window.scrollY;
+            document.getElementById("navigation").style.display = "none";
+            toggleFullscreen(true);
+        });
+
+        document.getElementById(closeId).addEventListener("click", () => {
+            inFullscreenGraph = ""
+            document.getElementById("navigation").style.display = "";
+            toggleFullscreen(false);
+            window.scrollTo({ top: lastScrollY, behavior: "auto" });
+        });
+    }
+    // close fullscreen on Escape key
+    document.addEventListener("keydown", (event) => {
+        if (event.key === "Escape" && inFullscreen) {
+            const closeBtn = document.querySelector(`.close-graph[id$="Close"]:not([hidden])`);
+            if (closeBtn) closeBtn.click();
+        }
+    });
+    // has to be added after the creation of the sections and graphs
+    document.getElementById("suiteFolderDonutGoUp").addEventListener("click", function () {
+        function remove_last_folder(path) {
+            const parts = path.split(".");
+            parts.pop();
+            return parts.length > 0 ? parts.join('.') : "";
+        }
+        const folder = remove_last_folder(previousFolder)
+        if (previousFolder == "" && folder == "") { return }
+        update_graphs_with_loading(["suiteFolderDonutGraph", "suiteFolderFailDonutGraph", "suiteStatisticsGraph", "suiteDurationGraph"], () => {
+            update_suite_folder_donut_graph(folder)
+        });
+    });
+    // ignore skip button eventlisteners
+    document.getElementById("ignoreSkips").checked = settings.switch.ignoreSkips;
+    ignoreSkips = settings.switch.ignoreSkips;
+    document.getElementById("ignoreSkipsRecent").checked = settings.switch.ignoreSkipsRecent;
+    ignoreSkipsRecent = settings.switch.ignoreSkipsRecent;
+    document.getElementById("onlyFailedFolders").checked = settings.switch.onlyFailedFolders;
+    onlyFailedFolders = settings.switch.onlyFailedFolders;
+
+    document.getElementById("ignoreSkips").addEventListener("change", () => {
+        ignoreSkips = !ignoreSkips;
+        set_local_storage_item("switch.ignoreSkips", ignoreSkips);
+        update_graphs_with_loading(["testMostFlakyGraph"], () => {
+            update_test_most_flaky_graph();
+        });
+    });
+    document.getElementById("ignoreSkipsRecent").addEventListener("change", () => {
+        ignoreSkipsRecent = !ignoreSkipsRecent;
+        set_local_storage_item("switch.ignoreSkipsRecent", ignoreSkipsRecent);
+        update_graphs_with_loading(["testRecentMostFlakyGraph"], () => {
+            update_test_recent_most_flaky_graph();
+        });
+    });
+    document.getElementById("onlyFailedFolders").addEventListener("change", () => {
+        onlyFailedFolders = !onlyFailedFolders;
+        set_local_storage_item("switch.onlyFailedFolders", onlyFailedFolders);
+        update_graphs_with_loading(["suiteFolderDonutGraph", "suiteFolderFailDonutGraph", "suiteStatisticsGraph", "suiteDurationGraph"], () => {
+            update_suite_folder_donut_graph("");
+        });
+    });
+
+    [
+        ["onlyLastRunSuite", "switch.onlyLastRunSuite"],
+        ["onlyLastRunTest", "switch.onlyLastRunTest"],
+        ["onlyLastRunKeyword", "switch.onlyLastRunKeyword"],
+        ["onlyLastRunKeywordMostUsed", "switch.onlyLastRunKeywordMostUsed"],
+        ["testOnlyChanges", "switch.testOnlyChanges"],
+        ["compareOnlyChanges", "switch.compareOnlyChanges"],
+    ].forEach(([elementId, settingsKey]) => {
+        const value = settingsKey.split(".").reduce((acc, k) => acc?.[k], settings);
+        if (typeof value === "boolean") {
+            document.getElementById(elementId).checked = value;
+        }
+    });
+
+    [
+        ["heatMapTestType", "switch.heatmapStatus"],
+        ["heatMapHour", "switch.heatmapHour"],
+        ["testNoChanges", "switch.testStatusFilter"],
+        ["testRerunView", "switch.testRerunView"],
+        ["compareNoChanges", "switch.compareStatusFilter"],
+        ["compareRerunView", "switch.compareRerunView"],
+    ].forEach(([elementId, settingsKey]) => {
+        const value = settingsKey.split(".").reduce((acc, k) => acc?.[k], settings);
+        if (typeof value === "string") {
+            document.getElementById(elementId).value = value;
+        }
+    });
+    heatMapHourAll = document.getElementById("heatMapHour").value === "All";
+
+    [
+        ["heatMapTestType", "runHeatmapGraph", update_run_heatmap_graph, "switch.heatmapStatus", "select"],
+        ["testOnlyChanges", "testStatisticsGraph", update_test_statistics_graph, "switch.testOnlyChanges", "checkbox"],
+        ["testNoChanges", "testStatisticsGraph", update_test_statistics_graph, "switch.testStatusFilter", "select"],
+        ["compareOnlyChanges", "compareTestsGraph", update_compare_tests_graph, "switch.compareOnlyChanges", "checkbox"],
+        ["compareNoChanges", "compareTestsGraph", update_compare_tests_graph, "switch.compareStatusFilter", "select"],
+        ["compareRerunView", "compareTestsGraph", update_compare_tests_graph, "switch.compareRerunView", "select"],
+        ["onlyLastRunSuite", "suiteMostTimeConsumingGraph", update_suite_most_time_consuming_graph, "switch.onlyLastRunSuite", "checkbox"],
+        ["onlyLastRunTest", "testMostTimeConsumingGraph", update_test_most_time_consuming_graph, "switch.onlyLastRunTest", "checkbox"],
+        ["onlyLastRunKeyword", "keywordMostTimeConsumingGraph", update_keyword_most_time_consuming_graph, "switch.onlyLastRunKeyword", "checkbox"],
+        ["onlyLastRunKeywordMostUsed", "keywordMostUsedGraph", update_keyword_most_used_graph, "switch.onlyLastRunKeywordMostUsed", "checkbox"],
+    ].forEach(([elementId, graphId, updateFn, settingsKey, type]) => {
+        document.getElementById(elementId).addEventListener("change", () => {
+            const el = document.getElementById(elementId);
+            const newValue = type === "select" ? el.value : el.checked;
+            set_local_storage_item(settingsKey, newValue);
+            update_graphs_with_loading([graphId], updateFn);
+        });
+    });
+    // the rerun view (mark reruns / final result / first attempt) is read by every test graph that
+    // marks re-executed tests or resolves their status, not only by the test statistics graph
+    document.getElementById("testRerunView").addEventListener("change", () => {
+        set_local_storage_item("switch.testRerunView", document.getElementById("testRerunView").value);
+        update_graphs_with_loading(
+            ["testStatisticsGraph", "testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
+                "testMostFailedGraph", "testRecentMostFailedGraph"],
+            () => {
+                update_test_statistics_graph();
+                update_test_messages_graph();
+                update_test_most_flaky_graph();
+                update_test_recent_most_flaky_graph();
+                update_test_most_failed_graph();
+                update_test_recent_most_failed_graph();
+            }
+        );
+    });
+    document.getElementById("heatMapHour").addEventListener("change", () => {
+        heatMapHourAll = document.getElementById("heatMapHour").value === "All";
+        set_local_storage_item("switch.heatmapHour", document.getElementById("heatMapHour").value);
+        update_graphs_with_loading(["runHeatmapGraph"], () => {
+            update_run_heatmap_graph();
+        });
+    });
+    // graph layout changes
+    document.querySelectorAll(".shown-graph").forEach(btn => {
+        btn.addEventListener("click", () => {
+            btn.hidden = true;
+            document.getElementById(`${btn.id.replace("Shown", "Hidden")}`).hidden = false;
+            document.dispatchEvent(new CustomEvent("layout-user-action"));
+        })
+    });
+    document.querySelectorAll(".hidden-graph").forEach(btn => {
+        btn.addEventListener("click", () => {
+            btn.hidden = true;
+            document.getElementById(`${btn.id.replace("Hidden", "Shown")}`).hidden = false;
+            document.dispatchEvent(new CustomEvent("layout-user-action"));
+        })
+    });
+    // table layout changes
+    document.querySelectorAll(".move-up-table").forEach(btn => {
+        btn.addEventListener("click", () => {
+            const section = btn.closest(".table-section");
+            const previous = section.previousElementSibling;
+            if (previous && previous.classList.contains("table-section")) {
+                section.parentElement.insertBefore(section, previous);
+                document.dispatchEvent(new CustomEvent("layout-user-action"));
+            }
+        });
+    });
+    document.querySelectorAll(".move-down-table").forEach(btn => {
+        btn.addEventListener("click", () => {
+            const section = btn.closest(".table-section");
+            const next = section.nextElementSibling;
+            if (next && next.classList.contains("table-section")) {
+                section.parentElement.insertBefore(next, section);
+                document.dispatchEvent(new CustomEvent("layout-user-action"));
+            }
+        });
+    });
+    function update_active_graph_type_buttons(graphChangeButton, activeGraphType) {
+        const camelButtonName = underscore_to_camelcase(graphChangeButton);
+        const buttonTypes = graphChangeButtons[graphChangeButton].split(",");
+        buttonTypes.forEach((graphType) => {
+            const buttonId = `${camelButtonName}Graph${graphType}`;
+            const buttonElement = document.getElementById(buttonId);
+            buttonElement.classList.remove("active");
+            if (graphType.toLowerCase() === activeGraphType) {
+                buttonElement.classList.add("active");
+            }
+        });
+    }
+    function handle_graph_change_type_button_click(graphChangeButton, graphType, camelButtonName) {
+        const canvasId = `${camelButtonName}Graph`;
+        show_graph_loading(canvasId);
+        setTimeout(() => {
+            update_graph_type(`${camelButtonName}GraphType`, graphType)
+            window[`create_${graphChangeButton}_graph`]();
+            update_active_graph_type_buttons(graphChangeButton, graphType);
+            if (graphChangeButton == 'run_donut') { update_run_donut_total_graph(); }
+            if (graphChangeButton == 'suite_folder_donut') { update_suite_folder_fail_donut_graph(); }
+            hide_graph_loading(canvasId);
+        }, 0);
+    }
+    function add_graph_eventlisteners(graphChangeButton, buttonTypes) {
+        const camelButtonName = underscore_to_camelcase(graphChangeButton);
+        const graphTypes = buttonTypes.split(",");
+        graphTypes.forEach((graphType, index) => {
+            const buttonId = `${camelButtonName}Graph${graphType}`;
+            if (document.getElementById(buttonId)) {
+                document.getElementById(buttonId).addEventListener("click", () => {
+                    handle_graph_change_type_button_click(graphChangeButton, graphType.toLowerCase(), camelButtonName);
+                });
+            }
+        });
+    }
+    Object.entries(graphChangeButtons).forEach(([graphChangeButton, buttonTypes]) => {
+        add_graph_eventlisteners(graphChangeButton, buttonTypes);
+    });
+    Object.entries(graphChangeButtons).forEach(([graphChangeButton, buttonTypes]) => {
+        if (graphChangeButton.includes("table")) { return; }
+        const camelButtonName = underscore_to_camelcase(graphChangeButton);
+        const storedGraphType = settings?.graphTypes?.[`${camelButtonName}GraphType`];
+        const defaultGraphType = buttonTypes.split(",")[0].toLowerCase();
+        const activeGraphType = storedGraphType || defaultGraphType;
+        update_active_graph_type_buttons(graphChangeButton, activeGraphType);
+    });
+
+    document.getElementById("sectionFiltersModal").addEventListener("show.bs.modal", function () {
+        ["suite", "test", "keyword"].forEach(section => {
+            const filters = document.getElementById(`${section}SectionFilters`);
+            const cardBody = document.getElementById(`${section}SectionFiltersCardBody`);
+            if (filters && cardBody) cardBody.appendChild(filters);
+        });
+    });
+
+    document.getElementById("sectionFiltersModal").addEventListener("hide.bs.modal", function () {
+        ["suite", "test", "keyword"].forEach(section => {
+            const filters = document.getElementById(`${section}SectionFilters`);
+            const container = document.getElementById(`${section}SectionFiltersContainer`);
+            if (filters && container) container.insertBefore(filters, container.firstChild);
+        });
+    });
+}
+
+export { setup_graph_view_buttons };
diff --git a/robotframework_dashboard/js/eventlisteners/merge_profiles.js b/robotframework_dashboard/js/eventlisteners/merge_profiles.js
new file mode 100644
index 00000000..42bdf1d8
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/merge_profiles.js
@@ -0,0 +1,140 @@
+import { settings } from "../variables/settings.js";
+import { lastMergeResult, filterRows } from "../variables/globals.js";
+import { add_alert } from "../common.js";
+import { merge_two_profiles } from "../filter/profile_merge.js";
+import {
+    save_filter_profile_to_storage,
+    populate_filter_profile_select,
+    update_profile_select_display,
+} from "../filter/profiles.js";
+
+function render_merge_profile_settings(profile, side) {
+    const rows = filterRows
+        .filter(def => def.present(profile))
+        .map(def => {
+            const checkId = `mergeCheck_${side}_${def.key}`;
+            return `<div class="form-check mb-1">
+                <input class="form-check-input merge-setting-check" type="checkbox"
+                    id="${checkId}" data-side="${side}" data-key="${def.key}" checked>
+                <label class="form-check-label small" for="${checkId}">
+                    <span class="fw-semibold">${def.label}:</span> ${def.valueHtml(profile)}
+                </label>
+            </div>`;
+        });
+    return rows.length
+        ? rows.join('')
+        : '<p class="text-muted small mb-0">No settings in this profile.</p>';
+}
+
+function get_checked_partial_profile(side, fullProfile) {
+    const result = {};
+    for (const def of filterRows) {
+        const el = document.getElementById(`mergeCheck_${side}_${def.key}`);
+        if (el && el.checked) {
+            def.fields.forEach(f => {
+                if (fullProfile[f] !== undefined) result[f] = fullProfile[f];
+            });
+        }
+    }
+    return result;
+}
+
+function render_merge_result_html(result) {
+    if (!Object.keys(result).length) {
+        return '<span class="text-muted small">Select profiles and settings above to preview.</span>';
+    }
+    const rows = filterRows
+        .filter(def => def.present(result))
+        .map(def => `<dt class="col-sm-3 small fw-semibold">${def.label}</dt><dd class="col-sm-9 small mb-1">${def.valueHtml(result)}</dd>`);
+    return `<dl class="row mb-0">${rows.join('')}</dl>`;
+}
+
+function update_merge_result_preview() {
+    const leftName = document.getElementById("mergeProfileLeft").value;
+    const rightName = document.getElementById("mergeProfileRight").value;
+    const profiles = settings.filterProfiles || {};
+    const leftFull = leftName && profiles[leftName] ? profiles[leftName] : {};
+    const rightFull = rightName && profiles[rightName] ? profiles[rightName] : {};
+    const leftPartial = get_checked_partial_profile('left', leftFull);
+    const rightPartial = get_checked_partial_profile('right', rightFull);
+    lastMergeResult = merge_two_profiles(leftPartial, rightPartial);
+    document.getElementById("mergeResultPreview").innerHTML = render_merge_result_html(lastMergeResult);
+}
+
+// wires the merge dialogue that the filter modal's "merge profiles" button opens
+function setup_merge_profiles_modal() {
+    document.getElementById("mergeFilterProfiles").addEventListener("click", function () {
+        const profiles = settings.filterProfiles || {};
+        const names = Object.keys(profiles).sort();
+        const leftSelect = document.getElementById("mergeProfileLeft");
+        const rightSelect = document.getElementById("mergeProfileRight");
+        leftSelect.innerHTML = '<option value="">-- Select Profile --</option>';
+        rightSelect.innerHTML = '<option value="">-- Select Profile --</option>';
+        names.forEach(name => {
+            leftSelect.options.add(new Option(name, name));
+            rightSelect.options.add(new Option(name, name));
+        });
+        document.getElementById("mergeProfileNewName").value = "";
+        document.getElementById("mergeLeftSettings").innerHTML = "";
+        document.getElementById("mergeLeftSettings").style.display = "none";
+        document.getElementById("mergeRightSettings").innerHTML = "";
+        document.getElementById("mergeRightSettings").style.display = "none";
+        update_merge_result_preview();
+        const filtersModalEl = document.getElementById("filtersModal");
+        const mergeModalEl = document.getElementById("mergeProfilesModal");
+        filtersModalEl.classList.add("dimmed");
+        const mergeModal = new bootstrap.Modal(mergeModalEl);
+        mergeModalEl.addEventListener("hidden.bs.modal", function cleanup() {
+            filtersModalEl.classList.remove("dimmed");
+            mergeModalEl.removeEventListener("hidden.bs.modal", cleanup);
+        });
+        mergeModal.show();
+    });
+    function setup_merge_side_listener(selectId, settingsDivId, side) {
+        document.getElementById(selectId).addEventListener("change", function () {
+            const profiles = settings.filterProfiles || {};
+            const name = this.value;
+            const settingsDiv = document.getElementById(settingsDivId);
+            if (name && profiles[name]) {
+                settingsDiv.innerHTML = render_merge_profile_settings(profiles[name], side);
+                settingsDiv.style.display = "";
+            } else {
+                settingsDiv.innerHTML = "";
+                settingsDiv.style.display = "none";
+            }
+            update_merge_result_preview();
+        });
+    }
+    setup_merge_side_listener("mergeProfileLeft", "mergeLeftSettings", "left");
+    setup_merge_side_listener("mergeProfileRight", "mergeRightSettings", "right");
+    document.getElementById("mergeProfilesModal").addEventListener("change", function (event) {
+        if (event.target.classList.contains("merge-setting-check")) {
+            update_merge_result_preview();
+        }
+    });
+    document.getElementById("saveMergeProfile").addEventListener("click", function () {
+        const leftName = document.getElementById("mergeProfileLeft").value;
+        const rightName = document.getElementById("mergeProfileRight").value;
+        const newName = document.getElementById("mergeProfileNewName").value.trim();
+        if (!newName) {
+            add_alert("Please enter a name for the merged profile!", "warning");
+            return;
+        }
+        if (!leftName && !rightName) {
+            add_alert("Please select at least one profile!", "warning");
+            return;
+        }
+        const profileData = lastMergeResult;
+        if (!Object.keys(profileData).length) {
+            add_alert("Please select at least one filter setting!", "warning");
+            return;
+        }
+        save_filter_profile_to_storage(newName, profileData);
+        populate_filter_profile_select();
+        update_profile_select_display();
+        add_alert(`Filter profile "${newName}" saved!`, "success");
+        bootstrap.Modal.getInstance(document.getElementById("mergeProfilesModal")).hide();
+    });
+}
+
+export { setup_merge_profiles_modal };
diff --git a/robotframework_dashboard/js/eventlisteners/overview_listeners.js b/robotframework_dashboard/js/eventlisteners/overview_listeners.js
new file mode 100644
index 00000000..bfcf8274
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/overview_listeners.js
@@ -0,0 +1,83 @@
+import { show_loading_overlay, hide_loading_overlay } from "../common.js";
+import { update_menu } from "../menu.js";
+import { clear_all_filters, set_filter_show_current_version } from "../filter/controls.js";
+import { create_overview_latest_graphs, set_filter_show_current_project } from "../graph_creation/overview.js";
+
+function attach_run_card_version_listener(versionElement, projectName, projectVersion) {
+    versionElement.addEventListener("click", (event) => {
+        clear_all_filters();
+        set_filter_show_current_project(projectName);
+        set_filter_show_current_version(projectVersion);
+        event.stopPropagation();
+        update_menu("menuDashboard");
+    });
+}
+
+// this function setups the project bar "sort by" filters eventlisteners
+function setup_overview_order_filters() {
+    const parseProjectId = (selectId) => selectId.replace(/SectionOrder$/i, "");
+    const parseRunStatsFromCard = (cardEl) => {
+        const text = cardEl.innerText || "";
+        const runMatch = text.match(/#\s*(\d+)/); // e.g., "#8"
+        const passedMatch = text.match(/Passed:\s*(\d+)/i);
+        const failedMatch = text.match(/Failed:\s*(\d+)/i);
+        const skippedMatch = text.match(/Skipped:\s*(\d+)/i);
+        return {
+            runNumber: runMatch ? parseInt(runMatch[1]) : 0,
+            passed: passedMatch ? parseInt(passedMatch[1]) : 0,
+            failed: failedMatch ? parseInt(failedMatch[1]) : 0,
+            skipped: skippedMatch ? parseInt(skippedMatch[1]) : 0,
+        };
+    };
+
+    const reorderProjectCards = (projectId, order) => {
+        const containerId = `${projectId}RunCardsContainer`;
+        const container = document.getElementById(containerId);
+        if (!container) return;
+        const cards = Array.from(container.querySelectorAll('.overview-card'));
+        if (cards.length === 0) return;
+        const enriched = cards.map(card => ({ el: card, stats: parseRunStatsFromCard(card) }));
+
+        const cmpDesc = (a, b, key) => (b.stats[key] - a.stats[key]);
+        const cmpAsc = (a, b, key) => (a.stats[key] - b.stats[key]);
+
+        if (order === "oldest" || order.toLowerCase() === "oldest run") {
+            enriched.sort((a, b) => cmpAsc(a, b, 'runNumber'));
+        } else if (order === "most failed") {
+            enriched.sort((a, b) => cmpDesc(a, b, 'failed'));
+        } else if (order === "most skipped") {
+            enriched.sort((a, b) => cmpDesc(a, b, 'skipped'));
+        } else if (order === "most passed") {
+            enriched.sort((a, b) => cmpDesc(a, b, 'passed'));
+        } else {
+            enriched.sort((a, b) => cmpDesc(a, b, 'runNumber'));
+        }
+        const fragment = document.createDocumentFragment();
+        enriched.forEach(item => fragment.appendChild(item.el));
+        container.innerHTML = '';
+        container.appendChild(fragment);
+    };
+
+    document.querySelectorAll('.section-order-filter').forEach(select => {
+        const selectId = select.id;
+        if (selectId === "overviewLatestSectionOrder") {
+            select.addEventListener('change', (e) => {
+                show_loading_overlay();
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        create_overview_latest_graphs();
+                        hide_loading_overlay();
+                    });
+                });
+            });
+        } else {
+            const projectId = parseProjectId(selectId);
+            select.addEventListener('change', (e) => {
+                const order = (e.target.value || '').toLowerCase();
+                reorderProjectCards(projectId, order);
+            });
+        }
+    });
+}
+
+export { attach_run_card_version_listener, setup_overview_order_filters };
diff --git a/robotframework_dashboard/js/eventlisteners/section_filters.js b/robotframework_dashboard/js/eventlisteners/section_filters.js
new file mode 100644
index 00000000..2e387c52
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/section_filters.js
@@ -0,0 +1,386 @@
+import { settings } from "../variables/settings.js";
+import { compareRunIds } from "../variables/graphs.js";
+import { show_loading_overlay, hide_loading_overlay, update_graphs_with_loading } from "../common.js";
+import { update_switch_local_storage } from "../localstorage.js";
+import { setup_overview_section_menu_buttons } from "../menu.js";
+import {
+    setup_suites_in_suite_select,
+    setup_suites_in_test_select,
+    setup_tests_in_select,
+    setup_testtags_in_select,
+    setup_keywords_in_select,
+} from "../filter/section_selects.js";
+import {
+    create_overview_latest_graphs,
+    create_overview_total_graphs,
+    update_overview_latest_heading,
+    update_overview_total_heading,
+    update_overview_sections_visibility,
+    update_overview_filter_visibility,
+    update_projectbar_visibility,
+} from "../graph_creation/overview.js";
+import {
+    update_suite_duration_graph,
+    update_suite_statistics_graph,
+    update_suite_most_failed_graph,
+    update_suite_most_time_consuming_graph,
+    update_suite_folder_donut_graph,
+} from "../graph_creation/suite.js";
+import {
+    update_test_statistics_graph,
+    update_test_duration_graph,
+    update_test_duration_deviation_graph,
+    update_test_messages_graph,
+    update_test_most_flaky_graph,
+    update_test_recent_most_flaky_graph,
+    update_test_most_failed_graph,
+    update_test_recent_most_failed_graph,
+    update_test_most_time_consuming_graph,
+} from "../graph_creation/test.js";
+import {
+    update_keyword_statistics_graph,
+    update_keyword_times_run_graph,
+    update_keyword_total_duration_graph,
+    update_keyword_average_duration_graph,
+    update_keyword_min_duration_graph,
+    update_keyword_max_duration_graph,
+    update_keyword_most_failed_graph,
+    update_keyword_most_time_consuming_graph,
+    update_keyword_most_used_graph,
+} from "../graph_creation/keyword.js";
+import {
+    update_compare_statistics_graph,
+    update_compare_suite_duration_graph,
+    update_compare_tests_graph,
+} from "../graph_creation/compare.js";
+
+// function to setup eventlisteners for filter buttons
+function setup_sections_filters() {
+    update_switch_local_storage("switch.runTags", settings.switch.runTags, true);
+    update_switch_local_storage("switch.runName", settings.switch.runName, true);
+    update_switch_local_storage("switch.totalStats", settings.switch.totalStats, true);
+    update_switch_local_storage("switch.latestRuns", settings.switch.latestRuns, true);
+    update_switch_local_storage("switch.sortFilters", settings.switch.sortFilters, true);
+    document.getElementById("switchRunTags").addEventListener("click", function () {
+        settings.switch.runTags = !settings.switch.runTags
+        update_switch_local_storage("switch.runTags", settings.switch.runTags);
+        show_loading_overlay();
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                // create latest and total bars and set visibility
+                create_overview_latest_graphs();
+                update_overview_latest_heading();
+                create_overview_total_graphs();
+                update_overview_total_heading();
+                update_overview_sections_visibility();
+                // update all tagged bars
+                update_projectbar_visibility();
+                setup_overview_section_menu_buttons();
+                hide_loading_overlay();
+            });
+        });
+    });
+    document.getElementById("switchRunName").addEventListener("click", function () {
+        settings.switch.runName = !settings.switch.runName
+        update_switch_local_storage("switch.runName", settings.switch.runName);
+        show_loading_overlay();
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                // create latest and total bars and set visibility
+                create_overview_latest_graphs();
+                update_overview_latest_heading();
+                create_overview_total_graphs();
+                update_overview_total_heading();
+                update_overview_sections_visibility();
+                // update all named project bars
+                update_projectbar_visibility();
+                setup_overview_section_menu_buttons();
+                hide_loading_overlay();
+            });
+        });
+    });
+    document.getElementById("switchLatestRuns").addEventListener("click", function () {
+        settings.switch.latestRuns = !settings.switch.latestRuns
+        update_switch_local_storage("switch.latestRuns", settings.switch.latestRuns);
+        update_overview_sections_visibility();
+        setup_overview_section_menu_buttons();
+    });
+    document.getElementById("switchTotalStats").addEventListener("click", function () {
+        settings.switch.totalStats = !settings.switch.totalStats
+        update_switch_local_storage("switch.totalStats", settings.switch.totalStats);
+        update_overview_sections_visibility();
+        setup_overview_section_menu_buttons();
+    });
+    document.getElementById("switchSortFilters").addEventListener("click", function () {
+        settings.switch.sortFilters = !settings.switch.sortFilters
+        update_switch_local_storage("switch.sortFilters", settings.switch.sortFilters);
+        update_overview_filter_visibility();
+    });
+    document.getElementById("suiteSelectSuites").addEventListener("change", () => {
+        const mostGraphIds = settings.switch.sectionFiltersApplySuite
+            ? ["suiteMostFailedGraph", "suiteMostTimeConsumingGraph"]
+            : [];
+        update_graphs_with_loading(["suiteStatisticsGraph", "suiteDurationGraph", ...mostGraphIds], () => {
+            update_suite_duration_graph();
+            update_suite_statistics_graph();
+            if (settings.switch.sectionFiltersApplySuite) {
+                update_suite_most_failed_graph();
+                update_suite_most_time_consuming_graph();
+            }
+        });
+    });
+    update_switch_local_storage("switch.suitePathsSuiteSection", settings.switch.suitePathsSuiteSection, true);
+    document.getElementById("switchSuitePathsSuiteSection").addEventListener("change", (e) => {
+        settings.switch.suitePathsSuiteSection = !settings.switch.suitePathsSuiteSection;
+        update_switch_local_storage("switch.suitePathsSuiteSection", settings.switch.suitePathsSuiteSection);
+        update_graphs_with_loading(
+            ["suiteStatisticsGraph", "suiteDurationGraph", "suiteMostFailedGraph", "suiteMostTimeConsumingGraph"],
+            () => {
+                setup_suites_in_suite_select();
+                update_suite_statistics_graph();
+                update_suite_duration_graph();
+                update_suite_most_failed_graph();
+                update_suite_most_time_consuming_graph();
+            }
+        );
+    });
+    update_switch_local_storage("switch.sectionFiltersApplySuite", settings.switch.sectionFiltersApplySuite, true);
+    document.getElementById("switchSectionFiltersApplySuite").addEventListener("change", () => {
+        settings.switch.sectionFiltersApplySuite = !settings.switch.sectionFiltersApplySuite;
+        update_switch_local_storage("switch.sectionFiltersApplySuite", settings.switch.sectionFiltersApplySuite);
+        update_graphs_with_loading(
+            ["suiteMostFailedGraph", "suiteMostTimeConsumingGraph"],
+            () => {
+                update_suite_most_failed_graph();
+                update_suite_most_time_consuming_graph();
+            }
+        );
+    });
+    document.getElementById("resetSuiteFolder").addEventListener("click", () => {
+        update_graphs_with_loading(["suiteFolderDonutGraph", "suiteFolderFailDonutGraph", "suiteStatisticsGraph", "suiteDurationGraph"], () => {
+            update_suite_folder_donut_graph("");
+        });
+    });
+    document.getElementById("suiteSelectTests").addEventListener("change", () => {
+        const mostGraphIds = settings.switch.sectionFiltersApplyTest
+            ? ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
+               "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"]
+            : [];
+        update_graphs_with_loading(
+            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", ...mostGraphIds],
+            () => {
+                setup_testtags_in_select();
+                setup_tests_in_select();
+                update_test_statistics_graph();
+                update_test_duration_graph();
+                update_test_duration_deviation_graph();
+                if (settings.switch.sectionFiltersApplyTest) {
+                    update_test_messages_graph();
+                    update_test_most_flaky_graph();
+                    update_test_recent_most_flaky_graph();
+                    update_test_most_failed_graph();
+                    update_test_recent_most_failed_graph();
+                    update_test_most_time_consuming_graph();
+                }
+            }
+        );
+    });
+    update_switch_local_storage("switch.suitePathsTestSection", settings.switch.suitePathsTestSection, true);
+    document.getElementById("switchSuitePathsTestSection").addEventListener("change", () => {
+        settings.switch.suitePathsTestSection = !settings.switch.suitePathsTestSection;
+        update_switch_local_storage("switch.suitePathsTestSection", settings.switch.suitePathsTestSection);
+        update_graphs_with_loading(
+            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", "testMessagesGraph",
+                "testMostFlakyGraph", "testRecentMostFlakyGraph", "testMostFailedGraph",
+                "testRecentMostFailedGraph", "testMostTimeConsumingGraph"],
+            () => {
+                setup_suites_in_test_select();
+                update_test_statistics_graph();
+                update_test_duration_graph();
+                update_test_duration_deviation_graph();
+                update_test_messages_graph();
+                update_test_most_flaky_graph();
+                update_test_recent_most_flaky_graph();
+                update_test_most_failed_graph();
+                update_test_recent_most_failed_graph();
+                update_test_most_time_consuming_graph();
+            }
+        );
+    });
+    update_switch_local_storage("switch.sectionFiltersApplyTest", settings.switch.sectionFiltersApplyTest, true);
+    document.getElementById("switchSectionFiltersApplyTest").addEventListener("change", () => {
+        settings.switch.sectionFiltersApplyTest = !settings.switch.sectionFiltersApplyTest;
+        update_switch_local_storage("switch.sectionFiltersApplyTest", settings.switch.sectionFiltersApplyTest);
+        update_graphs_with_loading(
+            ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
+             "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"],
+            () => {
+                update_test_messages_graph();
+                update_test_most_flaky_graph();
+                update_test_recent_most_flaky_graph();
+                update_test_most_failed_graph();
+                update_test_recent_most_failed_graph();
+                update_test_most_time_consuming_graph();
+            }
+        );
+    });
+    document.getElementById("testTagsSelect").addEventListener("change", () => {
+        const mostGraphIds = settings.switch.sectionFiltersApplyTest
+            ? ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
+               "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"]
+            : [];
+        update_graphs_with_loading(
+            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", ...mostGraphIds],
+            () => {
+                setup_tests_in_select();
+                update_test_statistics_graph();
+                update_test_duration_graph();
+                update_test_duration_deviation_graph();
+                if (settings.switch.sectionFiltersApplyTest) {
+                    update_test_messages_graph();
+                    update_test_most_flaky_graph();
+                    update_test_recent_most_flaky_graph();
+                    update_test_most_failed_graph();
+                    update_test_recent_most_failed_graph();
+                    update_test_most_time_consuming_graph();
+                }
+            }
+        );
+    });
+    document.getElementById("testSelect").addEventListener("change", () => {
+        const mostGraphIds = settings.switch.sectionFiltersApplyTest
+            ? ["testMessagesGraph", "testMostFlakyGraph", "testRecentMostFlakyGraph",
+               "testMostFailedGraph", "testRecentMostFailedGraph", "testMostTimeConsumingGraph"]
+            : [];
+        update_graphs_with_loading(
+            ["testStatisticsGraph", "testDurationGraph", "testDurationDeviationGraph", ...mostGraphIds],
+            () => {
+                update_test_statistics_graph();
+                update_test_duration_graph();
+                update_test_duration_deviation_graph();
+                if (settings.switch.sectionFiltersApplyTest) {
+                    update_test_messages_graph();
+                    update_test_most_flaky_graph();
+                    update_test_recent_most_flaky_graph();
+                    update_test_most_failed_graph();
+                    update_test_recent_most_failed_graph();
+                    update_test_most_time_consuming_graph();
+                }
+            }
+        );
+    });
+    document.getElementById("keywordSelect").addEventListener("change", () => {
+        const mostGraphIds = settings.switch.sectionFiltersApplyKeyword
+            ? ["keywordMostFailedGraph", "keywordMostTimeConsumingGraph", "keywordMostUsedGraph"]
+            : [];
+        update_graphs_with_loading(
+            ["keywordStatisticsGraph", "keywordTimesRunGraph", "keywordTotalDurationGraph",
+                "keywordAverageDurationGraph", "keywordMinDurationGraph", "keywordMaxDurationGraph", ...mostGraphIds],
+            () => {
+                update_keyword_statistics_graph();
+                update_keyword_times_run_graph();
+                update_keyword_total_duration_graph();
+                update_keyword_average_duration_graph();
+                update_keyword_min_duration_graph();
+                update_keyword_max_duration_graph();
+                if (settings.switch.sectionFiltersApplyKeyword) {
+                    update_keyword_most_failed_graph();
+                    update_keyword_most_time_consuming_graph();
+                    update_keyword_most_used_graph();
+                }
+            }
+        );
+    });
+    update_switch_local_storage("switch.sectionFiltersApplyKeyword", settings.switch.sectionFiltersApplyKeyword, true);
+    document.getElementById("switchSectionFiltersApplyKeyword").addEventListener("change", () => {
+        settings.switch.sectionFiltersApplyKeyword = !settings.switch.sectionFiltersApplyKeyword;
+        update_switch_local_storage("switch.sectionFiltersApplyKeyword", settings.switch.sectionFiltersApplyKeyword);
+        update_graphs_with_loading(
+            ["keywordMostFailedGraph", "keywordMostTimeConsumingGraph", "keywordMostUsedGraph"],
+            () => {
+                update_keyword_most_failed_graph();
+                update_keyword_most_time_consuming_graph();
+                update_keyword_most_used_graph();
+            }
+        );
+    });
+    update_switch_local_storage("switch.useLibraryNames", settings.switch.useLibraryNames, true);
+    document.getElementById("switchUseLibraryNames").addEventListener("change", () => {
+        settings.switch.useLibraryNames = !settings.switch.useLibraryNames;
+        update_switch_local_storage("switch.useLibraryNames", settings.switch.useLibraryNames);
+        update_graphs_with_loading(
+            ["keywordStatisticsGraph", "keywordTimesRunGraph", "keywordTotalDurationGraph",
+                "keywordAverageDurationGraph", "keywordMinDurationGraph", "keywordMaxDurationGraph",
+                "keywordMostFailedGraph", "keywordMostTimeConsumingGraph", "keywordMostUsedGraph"],
+            () => {
+                setup_keywords_in_select();
+                update_keyword_statistics_graph();
+                update_keyword_times_run_graph();
+                update_keyword_total_duration_graph();
+                update_keyword_average_duration_graph();
+                update_keyword_min_duration_graph();
+                update_keyword_max_duration_graph();
+                update_keyword_most_failed_graph();
+                update_keyword_most_time_consuming_graph();
+                update_keyword_most_used_graph();
+            }
+        );
+    });
+    // compare filters
+    compareRunIds.forEach(id => {
+        const element = document.getElementById(id);
+        if (element) {
+            element.addEventListener('change', () => {
+                update_graphs_with_loading(
+                    ["compareStatisticsGraph", "compareSuiteDurationGraph", "compareTestsGraph"],
+                    () => {
+                        update_compare_statistics_graph();
+                        update_compare_suite_duration_graph();
+                        update_compare_tests_graph();
+                    }
+                );
+            });
+        }
+    });
+    update_switch_local_storage("switch.suitePathsCompareSection", settings.switch.suitePathsCompareSection, true);
+    document.getElementById("switchSuitePathsCompareSection").addEventListener("change", (e) => {
+        settings.switch.suitePathsCompareSection = !settings.switch.suitePathsCompareSection;
+        update_switch_local_storage("switch.suitePathsCompareSection", settings.switch.suitePathsCompareSection);
+        update_graphs_with_loading(
+            ["compareStatisticsGraph", "compareSuiteDurationGraph", "compareTestsGraph"],
+            () => {
+                update_compare_statistics_graph();
+                update_compare_suite_duration_graph();
+                update_compare_tests_graph();
+            }
+        );
+    });
+}
+
+// helper functions to save and restore section filter values across fullscreen transitions
+function save_section_filter_values() {
+    const saved = {};
+    const suiteFolder = document.getElementById("suiteFolder");
+    if (suiteFolder) saved.suiteFolder = suiteFolder.innerText;
+    ["suiteSelectSuites", "suiteSelectTests", "testSelect", "testTagsSelect", "keywordSelect",
+        "compareRun1", "compareRun2", "compareRun3", "compareRun4"].forEach(id => {
+            const el = document.getElementById(id);
+            if (el) saved[id] = el.value;
+        });
+    return saved;
+}
+
+function restore_section_filter_values(saved) {
+    const suiteFolder = document.getElementById("suiteFolder");
+    if (suiteFolder && saved.suiteFolder !== undefined) suiteFolder.innerText = saved.suiteFolder;
+    ["suiteSelectSuites", "suiteSelectTests", "testSelect", "testTagsSelect", "keywordSelect",
+        "compareRun1", "compareRun2", "compareRun3", "compareRun4"].forEach(id => {
+            const el = document.getElementById(id);
+            if (el && saved[id] !== undefined) {
+                const optionExists = Array.from(el.options).some(opt => opt.value === saved[id]);
+                if (optionExists) el.value = saved[id];
+            }
+        });
+}
+
+export { setup_sections_filters, save_section_filter_values, restore_section_filter_values };
diff --git a/robotframework_dashboard/js/eventlisteners/settings_modal.js b/robotframework_dashboard/js/eventlisteners/settings_modal.js
new file mode 100644
index 00000000..f4a09298
--- /dev/null
+++ b/robotframework_dashboard/js/eventlisteners/settings_modal.js
@@ -0,0 +1,357 @@
+import { keywords } from "../variables/data.js";
+import { settings } from "../variables/settings.js";
+import { escape_html_for_merge } from "../variables/globals.js";
+import { add_alert } from "../common.js";
+import { set_local_storage_item } from "../localstorage.js";
+import { setup_data_and_graphs } from "../menu.js";
+import { toggle_theme, apply_theme_colors, apply_custom_branding } from "../theme.js";
+import { collect_custom_filter_dimensions, dashboardPages } from "../filter/pipeline.js";
+import { setup_lowest_highest_dates } from "../filter/modal_options.js";
+import { update_duration_comparison_for_all_projects } from "../graph_creation/overview.js";
+import { confirm_action } from "./confirm_modal.js";
+
+// function to create customized view eventlisteners
+function setup_settings_modal() {
+    // function to catch the closing of the settings modal
+    document.getElementById("settingsModal").addEventListener("hidden.bs.modal", function () {
+        setup_data_and_graphs();
+    });
+    // function to catch the closing of the settings modal
+    document.getElementById("settingsModal").addEventListener("shown.bs.modal", function () {
+        const libraries = [...new Set(
+            keywords
+                .map(item => item.owner)
+                .filter(owner => owner)
+        )];
+        const keywordPrefs = settings.libraries ?? {};
+        function render_keyword_libraries() {
+            const container = document.getElementById("keywordLibraryList");
+            container.innerHTML = "";
+            libraries.forEach(lib => {
+                const isChecked = keywordPrefs[lib] ?? true;
+                const item = document.createElement("div");
+                item.className = "list-group-item d-flex justify-content-between align-items-center";
+                item.innerHTML = `
+                    <span>${lib}</span>
+                    <div class="form-check form-switch mb-0">
+                        <input class="form-check-input" type="checkbox" id="keyword-${lib}"
+                            ${isChecked ? "checked" : ""}>
+                    </div>
+                `;
+                container.appendChild(item);
+                document.getElementById(`keyword-${lib}`).addEventListener("change", e => {
+                    keywordPrefs[lib] = e.target.checked;
+                    set_local_storage_item("libraries", keywordPrefs)
+                });
+            });
+        }
+        render_keyword_libraries();
+        dashboardPages.forEach(page => render_hidden_custom_filters(page));
+    });
+    function render_hidden_custom_filters(page) {
+        const pageName = page.charAt(0).toUpperCase() + page.slice(1);
+        const settingKey = `hiddenCustomFilters${pageName}`;
+        const container = document.getElementById(`${settingKey}List`);
+        if (!container) return;
+        container.innerHTML = "";
+        const dimNames = Object.keys(collect_custom_filter_dimensions()).sort();
+        if (!dimNames.length) {
+            container.innerHTML = `<li class="list-group-item small text-muted">No custom filters in run data.</li>`;
+            return;
+        }
+        dimNames.forEach((dimName, dimIndex) => {
+            const isChecked = (settings.show[settingKey] ?? []).includes(dimName);
+            const checkBoxId = `${settingKey}_${dimIndex}`;
+            const item = document.createElement("li");
+            item.className = "list-group-item list-group-item-action d-flex small";
+            item.innerHTML = `
+                <input class="form-check-input me-1" type="checkbox" value="${escape_html_for_merge(dimName)}" id="${checkBoxId}" ${isChecked ? "checked" : ""}>
+                <label class="form-check-label ms-2" for="${checkBoxId}">${escape_html_for_merge(dimName)}</label>
+            `;
+            container.appendChild(item);
+            item.querySelector("input").addEventListener("change", e => {
+                const hiddenCustomFilters = new Set(settings.show[settingKey] ?? []);
+                if (e.target.checked) {
+                    hiddenCustomFilters.add(dimName);
+                } else {
+                    hiddenCustomFilters.delete(dimName);
+                }
+                set_local_storage_item(`show.${settingKey}`, Array.from(hiddenCustomFilters));
+            });
+        });
+    }
+    // dropdown open/close behaviour, one selector per page
+    dashboardPages.forEach(page => {
+        const pageName = page.charAt(0).toUpperCase() + page.slice(1);
+        const selectEl = document.getElementById(`selectHiddenCustomFilters${pageName}`);
+        const checkBoxesEl = document.getElementById(`hiddenCustomFilters${pageName}CheckBoxes`);
+        if (!selectEl || !checkBoxesEl) return;
+        let showing = false;
+        function toggle() {
+            showing = !showing;
+            checkBoxesEl.style.display = showing ? "block" : "none";
+        }
+        selectEl.addEventListener("pointerdown", toggle);
+        document.body.addEventListener("pointerdown", function (event) {
+            if (showing && !checkBoxesEl.contains(event.target) && !selectEl.contains(event.target)) {
+                toggle();
+            }
+        });
+    });
+    // function to create setting toggle handlers
+    function create_toggle_handler({ key, elementId, datatype = "boolean" }) {
+        return function (load = false) {
+            const element = document.getElementById(elementId);
+            if (load) {
+                const storedValue = key.split(".").reduce((acc, k) => acc?.[k], settings);
+                if (datatype == "number") {
+                    if (typeof storedValue === "number") {
+                        element.value = storedValue;
+                    }
+                } else if (datatype == "string") {
+                    if (typeof storedValue === "string") {
+                        element.value = storedValue;
+                    }
+                } else {
+                    if (typeof storedValue === "boolean") {
+                        element.checked = storedValue;
+                    }
+                }
+            } else {
+                let newValue;
+                if (datatype == "number") {
+                    newValue = parseInt(element.value);
+                } else if (datatype == "string") {
+                    newValue = element.value;
+                } else {
+                    const currentValue = key.split(".").reduce((acc, k) => acc?.[k], settings);
+                    newValue = !currentValue;
+                    element.checked = newValue;
+                }
+                set_local_storage_item(key, newValue);
+            }
+        };
+    }
+
+    [
+        { key: "show.unified", elementId: "toggleUnified" },
+        { key: "show.dateLabels", elementId: "toggleLabels" },
+        { key: "show.legends", elementId: "toggleLegends" },
+        { key: "show.aliases", elementId: "toggleAliases", datatype: "string", event: "change" },
+        { key: "show.milliseconds", elementId: "toggleMilliseconds" },
+        { key: "show.timezones", elementId: "toggleTimezones" },
+        { key: "show.axisTitles", elementId: "toggleAxisTitles" },
+        { key: "show.animation", elementId: "toggleAnimations" },
+        { key: "show.duration", elementId: "toggleAnimationDuration", datatype: "number", event: "change" },
+        { key: "show.rounding", elementId: "toggleBarRounding", datatype: "number", event: "change" },
+        { key: "show.prefixes", elementId: "togglePrefixes" },
+        { key: "show.convertTimezone", elementId: "toggleTimezone" },
+        { key: "show.suitesSelectionInSuiteStats", elementId: "toggleSuitesSelectionInSuiteStats", datatype: "string", event: "change" },
+        { key: "show.suitesSelectionInTestStats", elementId: "toggleSuitesSelectionInTestStats", datatype: "string", event: "change" },
+        { key: "show.overviewDurationPercentage", elementId: "overviewDurationPercentage", datatype: "number", event: "change" },
+        { key: "show.filterAvailability", elementId: "toggleFilterAvailability" },
+        { key: "show.filterCounts", elementId: "toggleFilterCounts" },
+    ].forEach(def => {
+        const handler = create_toggle_handler(def);
+        handler(true);
+        document.getElementById(def.elementId).addEventListener(def.event || "click", () => handler());
+    });
+    document.getElementById("overviewDurationPercentage").addEventListener("change", () => {
+        if (settings.menu.overview) update_duration_comparison_for_all_projects();
+    });
+    // Re-populate the date filter pickers when either timezone toggle changes,
+    // since the displayed timestamps change and the defaults need to match.
+    document.getElementById("toggleTimezone").addEventListener("click", () => setup_lowest_highest_dates());
+    document.getElementById("toggleTimezones").addEventListener("click", () => setup_lowest_highest_dates());
+    document.getElementById("themeLight").addEventListener("click", () => toggle_theme());
+    document.getElementById("themeDark").addEventListener("click", () => toggle_theme());
+
+    function to_hex_color(color) {
+        const rgbaMatch = color.match(/^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbaMatch) {
+            const [, r, g, b] = rgbaMatch.map(Number);
+            return '#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('');
+        }
+        // For hex shorthand (#eee) and other CSS colors, use canvas normalization
+        const ctx = document.createElement('canvas').getContext('2d');
+        ctx.fillStyle = color;
+        return ctx.fillStyle;
+    }
+
+    function create_theme_color_handler(colorKey, elementId) {
+        function load_color() {
+            const element = document.getElementById(elementId);
+            const isDarkMode = document.documentElement.classList.contains("dark-mode");
+            const themeMode = isDarkMode ? 'dark' : 'light';
+
+            const customColors = settings.theme_colors?.custom?.[themeMode];
+            const storedColor = customColors?.[colorKey];
+
+            if (storedColor) {
+                element.value = to_hex_color(storedColor);
+            } else {
+                const defaults = settings.theme_colors[themeMode];
+                element.value = to_hex_color(defaults[colorKey]);
+            }
+        }
+
+        function update_color() {
+            const element = document.getElementById(elementId);
+            const newColor = element.value;
+            const isDarkMode = document.documentElement.classList.contains("dark-mode");
+            const themeMode = isDarkMode ? 'dark' : 'light';
+
+            if (!settings.theme_colors.custom) {
+                settings.theme_colors.custom = { light: {}, dark: {} };
+            }
+            if (!settings.theme_colors.custom[themeMode]) {
+                settings.theme_colors.custom[themeMode] = {};
+            }
+
+            settings.theme_colors.custom[themeMode][colorKey] = newColor;
+            set_local_storage_item(`theme_colors.custom.${themeMode}.${colorKey}`, newColor);
+            apply_theme_colors();
+        }
+
+        function reset_color() {
+            const element = document.getElementById(elementId);
+            const isDarkMode = document.documentElement.classList.contains("dark-mode");
+            const themeMode = isDarkMode ? 'dark' : 'light';
+
+            const defaults = settings.theme_colors[themeMode];
+            element.value = to_hex_color(defaults[colorKey]);
+
+            if (settings.theme_colors?.custom?.[themeMode]) {
+                delete settings.theme_colors.custom[themeMode][colorKey];
+                set_local_storage_item('theme_colors.custom', settings.theme_colors.custom);
+            }
+
+            apply_theme_colors();
+        }
+
+        return { load_color, update_color, reset_color };
+    }
+
+    const backgroundColorHandler = create_theme_color_handler('background', 'themeBackgroundColor');
+    const cardColorHandler = create_theme_color_handler('card', 'themeCardColor');
+    const highlightColorHandler = create_theme_color_handler('highlight', 'themeHighlightColor');
+    const textColorHandler = create_theme_color_handler('text', 'themeTextColor');
+
+    document.getElementById("settingsModal").addEventListener("shown.bs.modal", function () {
+        backgroundColorHandler.load_color();
+        cardColorHandler.load_color();
+        highlightColorHandler.load_color();
+        textColorHandler.load_color();
+        document.getElementById('customBrandingTitle').value = settings.branding?.title || "";
+        const hasLogo = !!settings.branding?.logo;
+        document.getElementById('removeCustomLogo').disabled = !hasLogo;
+        document.getElementById('customLogoUpload').value = "";
+    });
+
+    document.getElementById('themeBackgroundColor').addEventListener('change', () => backgroundColorHandler.update_color());
+    document.getElementById('themeCardColor').addEventListener('change', () => cardColorHandler.update_color());
+    document.getElementById('themeHighlightColor').addEventListener('change', () => highlightColorHandler.update_color());
+    document.getElementById('themeTextColor').addEventListener('change', () => textColorHandler.update_color());
+
+    document.getElementById('resetBackgroundColor').addEventListener('click', () => backgroundColorHandler.reset_color());
+    document.getElementById('resetCardColor').addEventListener('click', () => cardColorHandler.reset_color());
+    document.getElementById('resetHighlightColor').addEventListener('click', () => highlightColorHandler.reset_color());
+    document.getElementById('resetTextColor').addEventListener('click', () => textColorHandler.reset_color());
+
+    document.getElementById('customBrandingTitle').addEventListener('input', function () {
+        const title = this.value.trim();
+        set_local_storage_item('branding.title', title);
+        apply_custom_branding();
+    });
+
+    document.getElementById('clearCustomTitle').addEventListener('click', function () {
+        document.getElementById('customBrandingTitle').value = "";
+        set_local_storage_item('branding.title', "");
+        apply_custom_branding();
+    });
+
+    document.getElementById('customLogoUpload').addEventListener('change', function () {
+        const file = this.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = function (e) {
+            const img = new Image();
+            img.onload = function () {
+                const size = Math.max(img.width, img.height);
+                const canvas = document.createElement('canvas');
+                canvas.width = size;
+                canvas.height = size;
+                const ctx = canvas.getContext('2d');
+                const offsetX = Math.floor((size - img.width) / 2);
+                const offsetY = Math.floor((size - img.height) / 2);
+                ctx.drawImage(img, offsetX, offsetY, img.width, img.height);
+                const squaredDataUrl = canvas.toDataURL('image/png');
+                set_local_storage_item('branding.logo', squaredDataUrl);
+                document.getElementById('removeCustomLogo').disabled = false;
+                apply_custom_branding();
+            };
+            img.src = e.target.result;
+        };
+        reader.readAsDataURL(file);
+    });
+
+    document.getElementById('removeCustomLogo').addEventListener('click', function () {
+        set_local_storage_item('branding.logo', "");
+        document.getElementById('customLogoUpload').value = "";
+        this.disabled = true;
+        apply_custom_branding();
+    });
+
+    function show_settings_in_textarea() {
+        const textArea = document.getElementById("settingsTextArea");
+        textArea.value = JSON.stringify(settings, null, 2);
+    }
+
+    function copy_settings_to_clipboard() {
+        const textArea = document.getElementById("settingsTextArea");
+        textArea.select();
+        textArea.setSelectionRange(0, 99999);
+        navigator.clipboard.writeText(textArea.value);
+        add_alert("Copied settings to clipboard!", "success")
+    }
+
+    async function reset_settings_to_default() {
+        const confirmed = await confirm_action(`Are you sure you want to resset all settings?<br><br>
+                    This may override:<br>
+                    - Graph settings<br>
+                    - Custom layouts (e.g., moved or resized graphs)<br>
+                    - Hidden graphs
+                    If you only want to update a few small settings it is recommended to update the settings json and re-apply it.
+                `);
+        if (confirmed) {
+            localStorage.removeItem("settings");
+            location.reload();
+        }
+    }
+
+    async function apply_settings_from_textarea() {
+        const confirmed = await confirm_action(`Are you sure you want to apply the new settings?<br><br>
+                    This may override:<br>
+                    - Graph settings<br>
+                    - Custom layouts (e.g., moved or resized graphs)<br>
+                    - Hidden graphs
+                `);
+        if (confirmed) {
+            try {
+                const input = document.getElementById("settingsTextArea").value;
+                const newSettings = JSON.parse(input);
+                settings = newSettings
+                localStorage.setItem("settings", JSON.stringify(newSettings));
+                location.reload();
+            } catch (e) {
+                add_alert("Failed to update json config: " + e, "danger")
+            }
+        }
+    }
+    document.getElementById("copySettings").addEventListener("click", copy_settings_to_clipboard);
+    document.getElementById("resetSettings").addEventListener("click", reset_settings_to_default);
+    document.getElementById("applySettings").addEventListener("click", apply_settings_from_textarea);
+    document.getElementById("settingsModal").addEventListener("shown.bs.modal", show_settings_in_textarea);
+}
+
+export { setup_settings_modal };
diff --git a/robotframework_dashboard/js/filter.js b/robotframework_dashboard/js/filter.js
deleted file mode 100644
index cac925a2..00000000
--- a/robotframework_dashboard/js/filter.js
+++ /dev/null
@@ -1,1923 +0,0 @@
-import { settings, get_run_label } from './variables/settings.js';
-import { compareRunIds } from './variables/graphs.js';
-import { runs, suites, tests, keywords, exceptions, unified_dashboard_title } from './variables/data.js';
-import { show_loading_overlay, hide_loading_overlay, strip_tz_suffix, get_run_projects } from './common.js';
-import { set_local_storage_item } from './localstorage.js';
-import {
-    filteredAmount,
-    filteredRuns,
-    filteredSuites,
-    filteredTests,
-    filteredKeywords,
-    filteredExceptions,
-    selectedRunSetting,
-    selectedTagSetting,
-    overviewProjectNavFilter
-} from './variables/globals.js';
-
-// Sort an array of run objects by wall-clock run_start (timezone offset stripped),
-// ensuring correct chronological order when timestamps span mixed timezone offsets.
-function sort_wall_clock(data) {
-    return [...data].sort((a, b) => {
-        const ak = strip_tz_suffix(a.run_start);
-        const bk = strip_tz_suffix(b.run_start);
-        return ak < bk ? -1 : ak > bk ? 1 : 0;
-    });
-}
-
-const dashboardPages = ["overview", "dashboard", "compare", "tables"];
-
-function get_active_page() {
-    return dashboardPages.find(page => settings.menu[page]) ?? "dashboard";
-}
-
-function get_hidden_custom_filters(page = get_active_page()) {
-    const key = `hiddenCustomFilters${page.charAt(0).toUpperCase() + page.slice(1)}`;
-    return settings.show[key] ?? [];
-}
-
-// the rows are built once, so hiding keeps their state for the pages where they are still shown
-function apply_custom_filter_visibility() {
-    const hiddenCustomFilters = get_hidden_custom_filters();
-    for (const dimName of Object.keys(collect_custom_filter_dimensions())) {
-        const rowEl = document.getElementById(`customFilter_${dimName}`);
-        if (rowEl) rowEl.hidden = hiddenCustomFilters.includes(dimName);
-    }
-}
-
-// function updates the data in the graphs whenever filters are updated
-function setup_filtered_data_and_filters() {
-    apply_custom_filter_visibility();
-    filteredRuns = remove_milliseconds(runs)
-    filteredSuites = remove_milliseconds(suites)
-    filteredTests = remove_milliseconds(tests)
-    filteredKeywords = remove_milliseconds(keywords)
-    filteredExceptions = remove_milliseconds(exceptions)
-    // convert timezones if enabled (must run before remove_timezones so the offset is still present)
-    filteredRuns = convert_timezone(filteredRuns);
-    filteredSuites = convert_timezone(filteredSuites);
-    filteredTests = convert_timezone(filteredTests);
-    filteredKeywords = convert_timezone(filteredKeywords);
-    filteredExceptions = convert_timezone(filteredExceptions);
-    // remove timezone display if disabled
-    filteredRuns = remove_timezones(filteredRuns);
-    filteredSuites = remove_timezones(filteredSuites);
-    filteredTests = remove_timezones(filteredTests);
-    filteredKeywords = remove_timezones(filteredKeywords);
-    filteredExceptions = remove_timezones(filteredExceptions);
-    // determine filteredRuns with all run-level filters (suite path + amount last)
-    filteredRuns = filter_runs(filteredRuns);
-    filteredRuns = filter_runtags(filteredRuns);
-    filteredRuns = filter_dates(filteredRuns);
-    filteredRuns = filter_metadata(filteredRuns);
-    filteredRuns = filter_project_versions(filteredRuns);
-    filteredRuns = filter_custom_filters(filteredRuns);
-    filteredRuns = filter_runs_by_suite_path(filteredRuns);
-    filteredRuns = filter_amount(filteredRuns);
-    // single pass: filter each dependent array against the final filteredRuns
-    filteredSuites = filter_data(filteredSuites);
-    filteredTests = filter_data(filteredTests);
-    filteredKeywords = filter_data(filteredKeywords);
-    filteredExceptions = filter_data(filteredExceptions);
-    // narrow suites/tests to the selected path prefix (runs already reduced above)
-    filter_suite_path_data();
-    // re-sort all filtered data by wall-clock run_start so mixed-timezone datasets
-    // appear in the correct chronological order on graphs (timestamps may have been
-    // converted or had their offsets stripped above, so re-sort here is the source of truth)
-    filteredRuns = sort_wall_clock(filteredRuns);
-    filteredSuites = sort_wall_clock(filteredSuites);
-    filteredTests = sort_wall_clock(filteredTests);
-    filteredKeywords = sort_wall_clock(filteredKeywords);
-    filteredExceptions = sort_wall_clock(filteredExceptions);
-    // set titles with amount of filtered items
-    const runAmount = Object.keys(filteredRuns).length
-    const message = `<h6>showing ${runAmount} of ${filteredAmount} runs</h6>`
-    document.getElementById("unifiedTitle").innerHTML
-        = `${(unified_dashboard_title && !unified_dashboard_title.includes("Robot Framework Dashboard -"))
-            ? unified_dashboard_title
-            : "Dashboard Statistics"} (${runAmount}) ${message}`;
-    document.getElementById("runTitle").innerHTML = `Run Statistics (${runAmount}) ${message}`;
-    document.getElementById("suiteTitle").innerHTML = `Suite Statistics (${Object.keys(filteredSuites).length}) ${message}`;
-    document.getElementById("testTitle").innerHTML = `Test Statistics (${Object.keys(filteredTests).length}) ${message}`;
-    document.getElementById("keywordTitle").innerHTML = `Keyword Statistics (${Object.keys(filteredKeywords).length}) ${message}`;
-    document.getElementById("compareTitle").innerHTML = `Compare Statistics ${message}`;
-    document.getElementById("tablesTitle").innerHTML = `Table Statistics (${runAmount}) ${message}`;
-    // update filters based on data
-    setup_runs_in_compare_selects();
-    setup_suites_in_suite_select();
-    setup_suites_in_test_select();
-    setup_testtags_in_select();
-    setup_tests_in_select();
-    setup_keywords_in_select();
-}
-
-// function to remove milliseconds if needed
-function remove_milliseconds(data) {
-    if (settings.show.milliseconds) { return data; }
-
-    return data.map(obj => {
-        const rs = obj.run_start;
-        const datetime = rs.slice(0, 19); // "YYYY-MM-DD HH:MM:SS"
-        // Check if the last 6 chars are a timezone offset (+HH:MM or -HH:MM)
-        const suffix = rs.slice(-6);
-        const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
-        return {
-            ...obj,
-            run_start: hasTz ? datetime + suffix : datetime
-        };
-    });
-}
-
-// function to remove timezone offset from run_start labels if disabled
-function remove_timezones(data) {
-    if (settings.show.timezones) { return data; }
-
-    return data.map(obj => {
-        const rs = obj.run_start;
-        // Check if the last 6 chars are a timezone offset (+HH:MM or -HH:MM)
-        const suffix = rs.slice(-6);
-        const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
-        if (!hasTz) { return obj; }
-        return {
-            ...obj,
-            run_start: rs.slice(0, -6)
-        };
-    });
-}
-
-// function to convert run_start timestamps from their stored timezone to the viewer's local timezone
-function convert_timezone(data) {
-    if (!settings.show.convertTimezone) { return data; }
-
-    return data.map(obj => {
-        const rs = obj.run_start;
-        // Check if run_start has a timezone offset (+HH:MM or -HH:MM) at the end
-        const suffix = rs.slice(-6);
-        const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
-        if (!hasTz) { return obj; }
-
-        // Parse the run_start with its timezone offset
-        const isoStr = rs.replace(" ", "T");
-        const date = new Date(isoStr);
-        if (isNaN(date.getTime())) { return obj; }
-
-        // Format to viewer's local timezone: YYYY-MM-DD HH:MM:SS+HH:MM
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, "0");
-        const day = String(date.getDate()).padStart(2, "0");
-        const hours = String(date.getHours()).padStart(2, "0");
-        const minutes = String(date.getMinutes()).padStart(2, "0");
-        const seconds = String(date.getSeconds()).padStart(2, "0");
-        // Compute the viewer's local timezone offset
-        const tzOffset = -date.getTimezoneOffset();
-        const tzSign = tzOffset >= 0 ? "+" : "-";
-        const tzHours = String(Math.floor(Math.abs(tzOffset) / 60)).padStart(2, "0");
-        const tzMins = String(Math.abs(tzOffset) % 60).padStart(2, "0");
-        const localTz = `${tzSign}${tzHours}:${tzMins}`;
-        // Preserve the full sub-second fractional part from the original string (e.g. ".123456").
-        // Timezone offsets are always whole minutes, so the fractional seconds are unchanged by conversion.
-        // Using the original string avoids JavaScript Date's 3-digit millisecond precision limit.
-        const mainPart = rs.slice(0, -6); // strip the "+HH:MM" suffix
-        const subSecond = mainPart.length > 19 ? mainPart.slice(19) : ""; // ".ffffff" or ""
-        const localStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}${subSecond}${localTz}`;
-
-        return { ...obj, run_start: localStr };
-    });
-}
-
-// The apply_* functions below hold the actual filter logic and take their selection as an
-// argument instead of reading the DOM. The filter_* functions read the filter modal and call
-// them, and compute_filter_option_availability reuses them to determine which filter options
-// can still produce runs, so both paths always behave identically.
-function apply_run_name_filter(runs, selectedRun) {
-    if (!selectedRun || selectedRun === "All") { return runs; }
-    return Object.values(runs).filter(run => run.name === selectedRun);
-}
-
-// function to filter run data based on the runs (aka run name) filter
-function filter_runs(runs) {
-    if (selectedRunSetting != '') {
-        document.getElementById("runs").value = selectedRunSetting
-        selectedRunSetting = ''
-    }
-    return apply_run_name_filter(runs, document.getElementById("runs").value);
-}
-
-function apply_runtag_filter(runs, selectedTags, tagMode) {
-    if (selectedTags.includes("All")) {
-        return runs;
-    }
-    if (selectedTags.length === 0) {
-        return [];
-    }
-    return runs.filter(run => {
-        const runTags = run.tags.split(",");
-        if (tagMode === "OR") { // Use OR logic: the run must contain at least one selected tag
-            return selectedTags.some(selectedTag => runTags.includes(selectedTag));
-        }
-        if (tagMode === "NOT") { // Use NOT logic: the run must not contain any selected tag
-            return !selectedTags.some(selectedTag => runTags.includes(selectedTag));
-        }
-        // Default AND logic: the run must contain all selected tags
-        return selectedTags.every(selectedTag => runTags.includes(selectedTag));
-    });
-}
-
-// function to filter run data based on the run tags filter
-function filter_runtags(runs) {
-    const tagElements = document.getElementById("runTag").getElementsByTagName("input");
-    const tagModeEl = document.getElementById("tagMode");
-    const tagMode = tagModeEl ? tagModeEl.value : "AND";
-
-    if (selectedTagSetting != '') {
-        for (const input of tagElements) {
-            input.checked = false;
-            // checkbox ids are prefixed with "runTagCheckBox", the value holds the raw tag name
-            if (input.value === selectedTagSetting) {
-                input.checked = true;
-            }
-        }
-        if (tagModeEl) tagModeEl.value = "AND";
-        selectedTagSetting = ''
-    }
-
-    const selectedTags = Array.from(tagElements)
-        .filter(tagElement => tagElement.checked)
-        .map(tagElement => tagElement.id.replace(/^runTagCheckBox/, ""));
-    return apply_runtag_filter(runs, selectedTags, tagMode);
-}
-
-function apply_custom_filter_dimension(runs, dimName, checkedValues, mode) {
-    if (!checkedValues.size) { return []; }
-    if (checkedValues.has("All")) { return runs; }
-    return runs.filter(run => {
-        const effectiveValue = get_custom_filter_value(run, dimName);
-        if (mode === "NOT") { // Use NOT logic: the run must not have any of the selected values
-            return !checkedValues.has(effectiveValue);
-        }
-        // Default OR/AND logic: the run must have one of the selected values
-        return checkedValues.has(effectiveValue);
-    });
-}
-
-// filter run data based on active custom filters (one dropdown per dimension)
-function filter_custom_filters(filteredRuns) {
-    const dimensions = collect_custom_filter_dimensions();
-    const hiddenCustomFilters = get_hidden_custom_filters();
-    for (const dimName of Object.keys(dimensions)) {
-        // hidden on this page also means not applied on this page
-        if (hiddenCustomFilters.includes(dimName)) continue;
-        const listEl = document.getElementById(`customFilter_${dimName}_List`);
-        if (!listEl) continue;
-        const checkedValues = new Set(
-            Array.from(listEl.querySelectorAll("input:checked")).map(el => el.value)
-        );
-        const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
-        const mode = modeEl ? modeEl.value : "OR";
-        filteredRuns = apply_custom_filter_dimension(filteredRuns, dimName, checkedValues, mode);
-    }
-    return filteredRuns;
-}
-
-// custom_filters strings never change after the data is decoded, so the parsed result is
-// cached: the value of one dimension is read once per run per filter pass, and the option
-// availability computation walks every run once per dimension on top of that.
-const parsedCustomFiltersCache = new Map();
-
-function parse_custom_filters(cfStr) {
-    if (!cfStr) return {};
-    const cached = parsedCustomFiltersCache.get(cfStr);
-    if (cached) return cached;
-    const result = {};
-    cfStr.split(":").forEach(part => {
-        const eq = part.indexOf("=");
-        if (eq > 0) {
-            result[part.slice(0, eq).trim()] = part.slice(eq + 1).trim();
-        }
-    });
-    parsedCustomFiltersCache.set(cfStr, result);
-    return result;
-}
-
-// the value of one custom filter dimension for a run, "None" when the run has no such key
-function get_custom_filter_value(run, dimName) {
-    const value = parse_custom_filters(run.custom_filters)[dimName];
-    return value === undefined ? "None" : value;
-}
-
-function collect_custom_filter_dimensions() {
-    const dimensions = {};
-    for (const run of runs) {
-        if (!run.custom_filters) continue;
-        const parsed = parse_custom_filters(run.custom_filters);
-        for (const [key, value] of Object.entries(parsed)) {
-            if (!dimensions[key]) dimensions[key] = new Set();
-            dimensions[key].add(value);
-        }
-    }
-    return dimensions;
-}
-
-function apply_project_version_filter(runs, selectedProjectVersions) {
-    if (!selectedProjectVersions.size) return [];
-    if (selectedProjectVersions.has("All")) return runs;
-
-    return runs.filter(run => selectedProjectVersions.has(get_project_version_value(run)));
-}
-
-// the project version of a run, "None" when the run has no version label
-function get_project_version_value(run) {
-    return run.project_version === null || run.project_version === undefined ? "None" : run.project_version;
-}
-
-// filter run data based on the project version filter
-function filter_project_versions(runs) {
-    const selectedProjectVersions = new Set(
-        Array.from(
-            document.querySelectorAll('#projectVersionList input[type="checkbox"]:checked')
-        ).map(el => el.value)
-    );
-    return apply_project_version_filter(runs, selectedProjectVersions);
-}
-
-// the selected date range as {from, to} Date objects, or null when the range is incomplete
-function build_date_range(fromDate, fromTime, toDate, toTime) {
-    if (!fromDate || !fromTime || !toDate || !toTime) {
-        return null;
-    }
-    const from = new Date(`${fromDate} ${fromTime}:00`);
-    const to = new Date(`${toDate} ${toTime}:00`);
-    if (from > to) {
-        return null;
-    }
-    return { from, to };
-}
-
-function apply_date_filter(runs, fromDateTime, toDateTime) {
-    return runs.filter(run => {
-        // When not converting timezones, strip any timezone offset so the run_start is treated
-        // as a plain wall-clock time matching the date picker values (which are also wall-clock).
-        let rs = run.run_start.replace(" ", "T");
-        if (!settings.show.convertTimezone) {
-            rs = strip_tz_suffix(rs);
-        }
-        const runStart = new Date(rs);
-        return runStart >= fromDateTime && runStart <= toDateTime;
-    });
-}
-
-// function to filter the run data based on the selected date range
-function filter_dates(runs) {
-    const fromDate = document.getElementById("fromDate").value;
-    const fromTime = document.getElementById("fromTime").value;
-    const toDate = document.getElementById("toDate").value;
-    const toTime = document.getElementById("toTime").value;
-    if (!fromDate || !fromTime || !toDate || !toTime) {
-        return runs;
-    }
-    const dateRange = build_date_range(fromDate, fromTime, toDate, toTime);
-    if (!dateRange) { // build_date_range only rejects a complete range when from is later than to
-        alert("Filter error: The selected from date + time is later than your selected to date + time. Date filter has not been applied!");
-        return runs;
-    }
-    return apply_date_filter(runs, dateRange.from, dateRange.to);
-}
-
-// function to filter the amount of runs based on the filter
-// the amount is applied per project (every project_* run tag and the run name, see
-// get_run_projects) and not on the combined run list: a run is kept when it is one of
-// the last X runs of at least one of its projects, so a project with a lower run
-// frequency never disappears behind the runs of a busier project (issue #347)
-function filter_amount(filteredRuns) {
-    var selectedAmount = document.getElementById("amount").value;
-    // Handle weird selectedAmountValues:
-    if (selectedAmount == "") {
-        document.getElementById("amount").value = 10;
-        selectedAmount = document.getElementById("amount").value;
-    }
-    if (selectedAmount > runs.length) {
-        document.getElementById("amount").value = runs.length;
-        selectedAmount = document.getElementById("amount").value;
-    }
-    if (selectedAmount < 0) {
-        document.getElementById("amount").value = 0;
-        selectedAmount = document.getElementById("amount").value;
-    }
-    if (selectedAmount.includes(",")) {
-        document.getElementById("amount").value = selectedAmount.split(",")[0];
-        selectedAmount = document.getElementById("amount").value;
-    }
-    if (selectedAmount.includes(".")) {
-        document.getElementById("amount").value = selectedAmount.split(".")[0];
-        selectedAmount = document.getElementById("amount").value;
-    }
-    filteredAmount = filteredRuns.length
-    if (selectedAmount == 0) { return [] }
-    // collect the indexes of the last X runs of every project, the indexes keep the
-    // original (chronological) order of filteredRuns and de-duplicate runs that belong
-    // to more than one project (a run always has a name project next to its tags)
-    const runIndexesByProject = new Map();
-    filteredRuns.forEach((run, index) => {
-        for (const project of get_run_projects(run)) {
-            if (!runIndexesByProject.has(project)) runIndexesByProject.set(project, []);
-            runIndexesByProject.get(project).push(index);
-        }
-    });
-    const keptIndexes = new Set();
-    for (const indexes of runIndexesByProject.values()) {
-        for (const index of indexes.slice(- selectedAmount)) keptIndexes.add(index);
-    }
-    return filteredRuns.filter((_, index) => keptIndexes.has(index));
-}
-
-function apply_metadata_filter(filteredRuns, selectedMetadata) {
-    if (selectedMetadata == '' || selectedMetadata == 'All' || selectedMetadata == undefined) return filteredRuns;
-    return filteredRuns.filter(run => (run.metadata || "").includes(selectedMetadata));
-}
-
-// function to filter the runs based on the selected metadata key:value pair
-function filter_metadata(filteredRuns) {
-    return apply_metadata_filter(filteredRuns, document.getElementById("metadata").value);
-}
-
-// function to filter suites/tests/keywords based on the already filtered runs
-function filter_data(data) {
-    const validRunStarts = filteredRuns.map(v => v.run_start);
-    let filteredData = data.filter(v => validRunStarts.includes(v.run_start));
-    if (filteredData.length > 0 && "owner" in filteredData[0]) {
-        const libraries = settings.libraries || {};
-        filteredData = filteredData.filter(item => {
-            // if item has no owner, keep it
-            if (!item.owner) return true;
-            // if owner not in settings.libraries, assume enabled
-            if (!(item.owner in libraries)) return true;
-            // otherwise, include only if library is enabled
-            return libraries[item.owner];
-        });
-    }
-    return filteredData;
-}
-
-// function to update the available runs in the selects
-function setup_runs_in_compare_selects() {
-    const selects = compareRunIds.map(id => document.getElementById(id));
-    const items = filteredRuns.map(run => get_run_label(run));
-    selects.forEach(select => select.innerHTML = "")
-    selects.forEach(select => {
-        select.options.add(new Option("None", "None"));
-        items.forEach(item => select.options.add(new Option(item, item)));
-    });
-    selects[0].selectedIndex = selects[0].options.length - 1;
-    selects[1].selectedIndex = selects[1].options.length - 2;
-}
-
-// function to update the available suites to select in the suite filters
-function setup_suites_in_suite_select() {
-    const suiteSelectSuites = document.getElementById("suiteSelectSuites");
-    const toggleSuitesSelectionInSuiteStats = document.getElementById("toggleSuitesSelectionInSuiteStats");
-    const suiteFolder = document.getElementById("suiteFolder").innerText;
-    suiteSelectSuites.innerHTML = "";
-    toggleSuitesSelectionInSuiteStats.innerHTML = "";
-    var suiteNames = new Set()
-    for (const suite of filteredSuites) {
-        if (suiteFolder != "All" && !(suite.full_name.startsWith(suiteFolder + ".") || suite.full_name == suiteFolder)) {
-            continue
-        }
-        if (settings.switch.suitePathsSuiteSection) {
-            suiteNames.add(suite.full_name);
-        } else {
-            suiteNames.add(suite.name);
-        }
-    }
-    suiteNames = [...suiteNames].sort()
-    suiteSelectSuites.options.add(new Option("All Suites Separate", "All Suites Separate"));
-    suiteSelectSuites.options.add(new Option("All Suites Combined", "All Suites Combined"));
-    toggleSuitesSelectionInSuiteStats.options.add(new Option("All Suites Separate", "All Suites Separate"));
-    toggleSuitesSelectionInSuiteStats.options.add(new Option("All Suites Combined", "All Suites Combined"));
-    suiteNames.forEach(suiteName => {
-        suiteSelectSuites.options.add(new Option(suiteName, suiteName));
-        toggleSuitesSelectionInSuiteStats.options.add(new Option(suiteName, suiteName));
-    });
-    const suiteStatsSelection = settings.show.suitesSelectionInSuiteStats;
-    if (suiteStatsSelection === 'All Suites Separate') {
-        suiteSelectSuites.selectedIndex = 0;
-        toggleSuitesSelectionInSuiteStats.selectedIndex = 0;
-    } else if (suiteStatsSelection === 'All Suites Combined') {
-        suiteSelectSuites.selectedIndex = 1;
-        toggleSuitesSelectionInSuiteStats.selectedIndex = 1;
-    } else {
-        let suiteIndex = suiteNames.indexOf(suiteStatsSelection);
-        // If not found or not set, default to first suite and update localStorage
-        if (suiteIndex < 0 && suiteNames.length > 0) {
-            suiteIndex = 0;
-            settings.show.suitesSelectionInSuiteStats = suiteNames[0];
-            set_local_storage_item('show.suitesSelectionInSuiteStats', suiteNames[0]);
-        }
-        const resolvedIndex = suiteIndex >= 0 ? suiteIndex + 2 : 2;
-        suiteSelectSuites.selectedIndex = resolvedIndex;
-        toggleSuitesSelectionInSuiteStats.selectedIndex = resolvedIndex;
-    }
-}
-
-// function to update the available suites to select in the test filters
-function setup_suites_in_test_select() {
-    const suiteSelectTests = document.getElementById("suiteSelectTests");
-    const suitesSelectionInTestStats = document.getElementById("toggleSuitesSelectionInTestStats");
-    suiteSelectTests.innerHTML = "";
-    suitesSelectionInTestStats.innerHTML = "";
-    const suiteNames = settings.switch.suitePathsTestSection
-        ? [...new Set(filteredSuites.map(suite => suite.full_name))].sort()
-        : [...new Set(filteredSuites.map(suite => suite.name))].sort();
-    suiteSelectTests.options.add(new Option("All", "All"));
-    suitesSelectionInTestStats.options.add(new Option("All", "All"));
-    suiteNames.forEach(suiteName => {
-        suiteSelectTests.options.add(new Option(suiteName, suiteName));
-        suitesSelectionInTestStats.options.add(new Option(suiteName, suiteName));
-    });
-    const testStatsSelection = settings.show.suitesSelectionInTestStats;
-    if (testStatsSelection === 'All') {
-        suiteSelectTests.selectedIndex = 0;
-        suitesSelectionInTestStats.selectedIndex = 0;
-    } else {
-        let suiteIndex = suiteNames.indexOf(testStatsSelection);
-        // If not found or not set, default to first suite and update localStorage
-        if (suiteIndex < 0 && suiteNames.length > 0) {
-            suiteIndex = 0;
-            settings.show.suitesSelectionInTestStats = suiteNames[0];
-            set_local_storage_item('show.suitesSelectionInTestStats', suiteNames[0]);
-        }
-        suiteSelectTests.selectedIndex = suiteIndex >= 0 ? suiteIndex + 1 : 0;
-        suitesSelectionInTestStats.selectedIndex = suiteIndex >= 0 ? suiteIndex + 1 : 0;
-    }
-}
-
-// function to update the available tests to select in the filters
-// applies to the test filter on the test statistics level
-function setup_tests_in_select() {
-    const suiteSelectTests = document.getElementById("suiteSelectTests").value;
-    const testTagsSelect = document.getElementById("testTagsSelect").value;
-    const testSelect = document.getElementById("testSelect");
-    testSelect.innerHTML = "";
-    const testNames = filteredTests.reduce((names, test) => {
-        const isInSuite = settings.switch.suitePathsTestSection
-            ? test.full_name.includes(`${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All"
-            : test.full_name.includes(`.${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All"
-        const hasTag = testTagsSelect === "All" || test.tags.includes(testTagsSelect);
-
-        if (isInSuite && hasTag && !names.includes(test.name)) {
-            names.push(test.name);
-        }
-
-        return names;
-    }, []);
-    testSelect.options.add(new Option("All", "All"));
-    testNames.sort().forEach(testName => testSelect.options.add(new Option(testName, testName)));
-}
-
-// function to update the available testtags to select in the filters
-// applies to the testtag filter on the test statistics level
-function setup_testtags_in_select() {
-    const suiteSelectTests = document.getElementById("suiteSelectTests").value;
-    const testTagsSelect = document.getElementById("testTagsSelect");
-    testTagsSelect.innerHTML = "";
-    const testTags = [...new Set(filteredTests.reduce((tags, test) => {
-        if (settings.switch.suitePathsTestSection) {
-            if (test.full_name.includes(`${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All") {
-                test.tags.replace(/\[|\]/g, "").split(",").forEach(tag => tags.push(tag.trim()));
-            }
-        } else {
-            if (test.full_name.includes(`.${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All") {
-                test.tags.replace(/\[|\]/g, "").split(",").forEach(tag => tags.push(tag.trim()));
-            }
-        }
-        return tags;
-    }, []))].filter(Boolean);
-    testTagsSelect.options.add(new Option("All", "All"));
-    testTags.forEach(tag => testTagsSelect.options.add(new Option(tag, tag)));
-}
-
-// function to update the available keywords to select in the filters
-// applies to the keyword filter on the keyword statistics level
-function setup_keywords_in_select() {
-    const keywordSelect = document.getElementById("keywordSelect");
-    keywordSelect.innerHTML = "";
-    const useLibraryNames = settings?.switch?.useLibraryNames === true;
-
-    const keywordNames = [
-        ...new Set(
-            filteredKeywords.map(keyword =>
-                useLibraryNames && keyword.owner
-                    ? `${keyword.owner}.${keyword.name}`
-                    : keyword.name
-            )
-        )
-    ].sort();
-
-    keywordNames.forEach(keywordName => {
-        keywordSelect.options.add(new Option(keywordName, keywordName));
-    });
-    if (keywordNames.length > 0) {
-        keywordSelect.selectedIndex = keywordNames.length - 1;
-    }
-}
-
-// function to setup run amount filter maximum
-function setup_run_amount_filter() {
-    document.getElementById("amount").setAttribute("max", runs.length)
-}
-
-// function that initializes the from date/time and to date/time selection boxes in the filters
-function setup_lowest_highest_dates() {
-    if (runs.length == 0) {
-        document.getElementById("fromDate").value = "1900-01-01";
-        document.getElementById("fromTime").value = "00:00";
-        document.getElementById("toDate").value = "9999-12-31";
-        document.getElementById("toTime").value = "23:59";
-        return;
-    }
-
-    if (settings.show.convertTimezone) {
-        // Convert to viewer's local timezone: parse the stored offset-aware timestamps as UTC
-        // instants, then display the local wall-clock equivalent in the pickers.
-        var dates = runs.map(run => new Date(run.run_start.replace(" ", "T")));
-        var lowest = new Date(Math.min.apply(null, dates));
-        var highest = new Date(Math.max.apply(null, dates));
-        var tzoffset = new Date().getTimezoneOffset() * 60000;
-        lowest = new Date(new Date(lowest - tzoffset).getTime() - 1 * 60000); // account for seconds
-        highest = new Date(new Date(highest - tzoffset).getTime() + 1 * 60000); // account for seconds
-        lowest.setTime(lowest.getTime() - 1 * 60 * 60 * 1000); // minus 1 hour for DST
-        highest.setTime(highest.getTime() + 1 * 60 * 60 * 1000); // plus 1 hour for DST
-        document.getElementById("fromDate").value = lowest.toISOString().split("T")[0];
-        document.getElementById("fromTime").value = lowest.toISOString().split("T")[1].substring(0, 5);
-        document.getElementById("toDate").value = highest.toISOString().split("T")[0];
-        document.getElementById("toTime").value = highest.toISOString().split("T")[1].substring(0, 5);
-    } else {
-        // No conversion: strip the timezone suffix and treat the stored wall-clock datetime
-        // as-is, so picker defaults match exactly what the user sees in the dashboard.
-        const wallClocks = runs.map(run => {
-            const rs = run.run_start;
-            const suffix = rs.slice(-6);
-            const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
-            return hasTz ? rs.slice(0, 19) : rs.slice(0, 19);
-        });
-        wallClocks.sort();
-        const lowestStr = wallClocks[0];
-        const highestStr = wallClocks[wallClocks.length - 1];
-        // Adjust by 1 minute and 1 hour (for seconds and DST) using plain date arithmetic
-        const adjust = (dateStr, deltaMs) => {
-            const d = new Date(dateStr.replace(" ", "T"));
-            d.setTime(d.getTime() + deltaMs);
-            const pad = n => String(n).padStart(2, "0");
-            const date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
-            const time = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
-            return { date, time };
-        };
-        const low = adjust(lowestStr, -(1 * 60 + 60 * 60) * 1000); // -1min -1hr
-        const high = adjust(highestStr, (1 * 60 + 60 * 60) * 1000);  // +1min +1hr
-        document.getElementById("fromDate").value = low.date;
-        document.getElementById("fromTime").value = low.time;
-        document.getElementById("toDate").value = high.date;
-        document.getElementById("toTime").value = high.time;
-    }
-}
-
-// metadata strings never change after the data is decoded, so the parsed items are cached:
-// the option list is rebuilt on every refresh of the filter option counts
-const parsedMetadataCache = new Map();
-
-function parse_metadata_items(metadata) {
-    if (!metadata) return [];
-    const cached = parsedMetadataCache.get(metadata);
-    if (cached) return cached;
-    const parsed = JSON.parse(metadata.replace(/'/g, '"'));
-    parsedMetadataCache.set(metadata, parsed);
-    return parsed;
-}
-
-// the metadata key:value pairs found in the run data, sorted for display
-function get_metadata_options(runList = runs) {
-    const metadataItems = new Set();
-    for (const run of runList) {
-        parse_metadata_items(run.metadata).forEach(item => metadataItems.add(item));
-    }
-    return Array.from(metadataItems).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
-}
-
-// function to setup metadata filter if there is metadata in the data
-function setup_metadata_filter() {
-    const metadataItems = get_metadata_options();
-    const metadataFilter = document.getElementById("metadataFilter");
-    if (metadataItems.length > 0) {
-        metadataFilter.hidden = false;
-        const optionsHtml = metadataItems
-            .map(label => `<option value="${label}">${label}</option>`)
-            .join("");
-        const metadataSelect = document.getElementById("metadata");
-        metadataSelect.innerHTML = `<option value="All">All</option>` + optionsHtml;
-    } else {
-        metadataFilter.hidden = true;
-    }
-}
-
-// function to update the available runs to select in the filters
-function setup_runs_in_select_filter_buttons() {
-    const runOptions = new Set();
-    runs.forEach(run => runOptions.add(run.name));
-    const optionsHtml = Array.from(runOptions)
-        .map(runName => `<option value="${runName}">${runName}</option>`)
-        .join("");
-    const runsSelect = document.getElementById("runs");
-    runsSelect.innerHTML = `<option value="All">All</option>` + optionsHtml;
-}
-
-// function to update the available runtags to select in the filters
-function setup_runtags_in_select_filter_buttons() {
-    const tags = new Set();
-    runs.forEach(run => {
-        run.tags.split(",").forEach(tag => {
-            if (tag) {
-                tags.add(tag);
-            }
-        });
-    });
-    const andOrTags = `
-        <li class="list-group-item d-flex small align-items-center">
-            <label class="form-check-label me-2" for="tagMode">Tag Mode:</label>
-            <select class="form-select form-select-sm" id="tagMode" style="width: auto;">
-                <option value="AND">AND</option>
-                <option value="OR">OR</option>
-                <option value="NOT">NOT</option>
-            </select>
-        </li>
-    `;
-    const listItemTemplate = (value) => `
-        <li class="list-group-item list-group-item-action d-flex small">
-            <input class="form-check-input me-1" type="checkbox" value="${value}" id="runTagCheckBox${value}">
-            <label class="form-check-label ms-2" for="runTagCheckBox${value}">${value}</label>
-        </li>
-    `;
-    const listItems = [listItemTemplate("All")].concat(
-        Array.from(tags).sort().map(tag => listItemTemplate(tag))
-    ).join("");
-    const tagsSelect = document.getElementById("runTag");
-    tagsSelect.innerHTML = andOrTags + listItems;
-    if (tags.size > 0) {
-        document.getElementById("runTagFilter").hidden = false
-    } else {
-        document.getElementById("runTagFilter").hidden = true
-    }
-    const allRunTagsCheckBox = document.getElementById("runTagCheckBoxAll");
-    allRunTagsCheckBox.checked = true;
-    const filterActiveIndicatorId = "filterRunTagSelectedIndicator";
-    setup_filter_active_indicator(allRunTagsCheckBox, filterActiveIndicatorId);
-    setup_filter_checkbox_subfilter("runTagCheckBoxes");
-    setup_filter_checkbox_handler_listeners(tagsSelect, allRunTagsCheckBox, filterActiveIndicatorId);
-}
-
-// create projectVersions checkboxes in filters
-function setup_project_versions_in_select_filter_buttons() {
-    const projectVersionList = document.getElementById("projectVersionList");
-    projectVersionList.innerHTML = '';
-    const projectVersionOptionsSet = new Set(
-        runs
-            .map(run => run.project_version)
-            .filter(ver => ver != null)
-    );
-    const projectVersionOptions = [...projectVersionOptionsSet].sort().reverse();
-    projectVersionOptions.unshift("None");
-    projectVersionOptions.unshift("All");
-    const prefix = "projectVersionInputItem";
-    const listItemTemplate = (prefix, value) => `
-        <li class="list-group-item list-group-item-action d-flex small">
-            <input class="form-check-input me-1" type="checkbox" value="${value}" id="${prefix}${value}">
-            <label class="form-check-label ms-2" for="${prefix}${value}">${value}</label>
-        </li>
-    `;
-    const projectVersionListHtml = projectVersionOptions
-        .map(projectVersion => listItemTemplate(prefix, projectVersion))
-        .join('');
-    projectVersionList.innerHTML = projectVersionListHtml;
-    const allVersionsCheckBox = document.getElementById(`${prefix}All`);
-    allVersionsCheckBox.checked = true;
-    const filterVersionSelectedIndicatorId = "filterVersionSelectedIndicator";
-    setup_filter_active_indicator(allVersionsCheckBox, filterVersionSelectedIndicatorId);
-    setup_filter_checkbox_subfilter("projectVersionCheckBoxes", true);
-    setup_filter_checkbox_handler_listeners(projectVersionList, allVersionsCheckBox, filterVersionSelectedIndicatorId);
-}
-
-function get_suite_path_children(parentPath) {
-    const isRoot = !parentPath || parentPath === "All";
-    const depth = isRoot ? 0 : parentPath.split(".").length;
-    const childPaths = new Set();
-    for (const suite of suites) {
-        const parts = suite.full_name.split(".");
-        if (isRoot) {
-            childPaths.add(parts[0]);
-        } else if (suite.full_name === parentPath || suite.full_name.startsWith(parentPath + ".")) {
-            if (parts.length > depth) {
-                childPaths.add(parts.slice(0, depth + 1).join("."));
-            }
-        }
-    }
-    return [...childPaths].sort();
-}
-
-function setup_suite_path_navigator(path) {
-    const normalized = (!path || path === "") ? "All" : path;
-    document.getElementById("suitePathValue").value = normalized;
-
-    // Active indicator — shown whenever a real path is selected
-    const indicator = document.getElementById("filterSuitePathSelectedIndicator");
-    if (indicator) indicator.style.display = normalized === "All" ? "none" : "";
-
-    const breadcrumbEl = document.getElementById("suitePathBreadcrumb");
-    if (normalized === "All") {
-        breadcrumbEl.innerHTML = `<span class="text-muted">All</span>`;
-    } else {
-        const parts = normalized.split(".");
-        const segments = [{ label: "All", path: "All" }];
-        parts.forEach((part, i) => segments.push({ label: part, path: parts.slice(0, i + 1).join(".") }));
-        breadcrumbEl.innerHTML = segments.map((seg, i) => {
-            const isLast = i === segments.length - 1;
-            const escaped = escape_html_for_merge(seg.label);
-            const escapedPath = escape_html_for_merge(seg.path);
-            if (isLast) return `<span class="fw-semibold">${escaped}</span>`;
-            return `<a class="suite-path-nav-link text-decoration-none" data-path="${escapedPath}" style="cursor: pointer;">${escaped}</a>`
-                + `<span class="text-muted mx-1">›</span>`;
-        }).join("");
-        breadcrumbEl.querySelectorAll(".suite-path-nav-link").forEach(el => {
-            el.addEventListener("click", () => setup_suite_path_navigator(el.dataset.path));
-        });
-    }
-
-    const childrenEl = document.getElementById("suitePathChildren");
-    const children = get_suite_path_children(normalized);
-    if (children.length === 0) {
-        childrenEl.innerHTML = '<span class="text-muted fst-italic">No sub-suites</span>';
-    } else {
-        childrenEl.innerHTML = children.map(child => {
-            const label = child.split(".").pop();
-            return `<button class="btn btn-outline-light btn-sm suite-path-child-btn" data-path="${escape_html_for_merge(child)}" style="margin-bottom: 3px;">${escape_html_for_merge(label)}</button>`;
-        }).join("");
-        childrenEl.querySelectorAll(".suite-path-child-btn").forEach(btn => {
-            btn.addEventListener("click", () => setup_suite_path_navigator(btn.dataset.path));
-        });
-    }
-
-    document.getElementById("suitePathFilter").hidden = suites.length === 0;
-    // the path lives in a hidden input, so no change event reaches the filter modal listener
-    schedule_filter_option_availability_refresh();
-}
-
-function apply_suite_path_run_filter(runs, selectedPath, suiteList) {
-    if (!selectedPath || selectedPath === "All") return runs;
-
-    const matches = (full_name) => full_name === selectedPath || full_name.startsWith(selectedPath + ".");
-    const validRunStarts = new Set(suiteList.filter(s => matches(s.full_name)).map(s => s.run_start));
-    return runs.filter(r => validRunStarts.has(r.run_start));
-}
-
-// Run-level part of the suite path filter: removes runs that have no suite matching the path.
-// Uses filteredSuites (all suites, already timezone/millisecond-transformed) so run_start
-// values line up with the transformed filteredRuns entries.
-function filter_runs_by_suite_path(runs) {
-    const selectedPath = document.getElementById("suitePathValue").value;
-    return apply_suite_path_run_filter(runs, selectedPath, filteredSuites);
-}
-
-// Data-level part of the suite path filter: narrows filteredSuites/filteredTests to the
-// selected path prefix. Called after filter_data so filteredRuns is already final.
-function filter_suite_path_data() {
-    const selectedPath = document.getElementById("suitePathValue").value;
-    if (!selectedPath || selectedPath === "All") return;
-
-    const matches = (full_name) => full_name === selectedPath || full_name.startsWith(selectedPath + ".");
-    filteredSuites = filteredSuites.filter(s => matches(s.full_name));
-    filteredTests = filteredTests.filter(t => matches(t.full_name));
-}
-
-// create custom filter dropdowns dynamically for each dimension found in run data
-function setup_custom_filters_in_select_filter_buttons() {
-    const container = document.getElementById("customFiltersList");
-    container.innerHTML = '';
-    const dimensions = collect_custom_filter_dimensions();
-    const dimNames = Object.keys(dimensions).sort();
-    for (const dimName of dimNames) {
-        const values = [...dimensions[dimName]].sort();
-        const allId = `customFilter_${dimName}_All`;
-        const listId = `customFilter_${dimName}_List`;
-        const checkBoxesId = `customFilter_${dimName}_CheckBoxes`;
-        const selectId = `selectCustomFilter_${dimName}`;
-        const indicatorId = `filterCustomFilter_${dimName}_Indicator`;
-        const profileCheckId = `profileCheckCustomFilter_${dimName}`;
-        const filterInputId = `customFilter_${dimName}_FilterInput`;
-        const modeId = `customFilter_${dimName}_Mode`;
-
-        const modeHtml = `
-            <li class="list-group-item d-flex small align-items-center">
-                <label class="form-check-label me-2" for="${modeId}">Mode:</label>
-                <select class="form-select form-select-sm" id="${modeId}" style="width: auto;">
-                    <option value="OR">OR</option>
-                    <option value="AND">AND</option>
-                    <option value="NOT">NOT</option>
-                </select>
-            </li>
-        `;
-
-        const itemsHtml = modeHtml + ["All", "None", ...values].map(v => `
-            <li class="list-group-item list-group-item-action d-flex small">
-                <input class="form-check-input me-1" type="checkbox" value="${v}" id="${listId}_${v}">
-                <label class="form-check-label ms-2" for="${listId}_${v}">${v}</label>
-            </li>
-        `).join('');
-
-        const rowHtml = `
-            <div class="list-group-item" id="customFilter_${dimName}">
-                <div class="d-flex justify-content-between align-items-start">
-                    <input class="form-check-input filter-profile-check me-2 mt-2" type="checkbox"
-                        id="${profileCheckId}" checked style="display: none;" />
-                    <span class="d-flex align-items-center information info-label">
-                        ${dimName}
-                        <span id="${indicatorId}" class="version-selected-dot ms-2 mt-1" style="display: none;"></span>
-                    </span>
-                    <div style="width: 200px;">
-                        <div class="selectBox" id="${selectId}">
-                            <select class="form-select form-select-sm">
-                                <option>Select Values</option>
-                            </select>
-                            <div class="overSelect"></div>
-                        </div>
-                        <div id="${checkBoxesId}" class="filterCheckBoxes mt-2" style="max-height: 50vh; overflow-y: auto;">
-                            <input id="${filterInputId}" class="form-control form-control-sm" type="text" placeholder="Filter...">
-                            <ul class="list-group" id="${listId}">
-                                ${itemsHtml}
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-        container.insertAdjacentHTML('beforeend', rowHtml);
-
-        // wire up checkbox behaviour
-        const listEl = document.getElementById(listId);
-        const allCheckBox = document.getElementById(`${listId}_All`);
-        allCheckBox.checked = true;
-        setup_filter_active_indicator(allCheckBox, indicatorId);
-        setup_filter_checkbox_subfilter(checkBoxesId);
-        setup_filter_checkbox_handler_listeners(listEl, allCheckBox, indicatorId);
-
-        // wire up click-outside behaviour for the dropdown
-        const selectEl = document.getElementById(selectId);
-        const checkBoxesEl = document.getElementById(checkBoxesId);
-        let showing = false;
-        function toggle() { showing = !showing; checkBoxesEl.style.display = showing ? "block" : "none"; }
-        selectEl.addEventListener("pointerdown", toggle);
-        document.body.addEventListener("pointerdown", function (event) {
-            if (showing && !checkBoxesEl.contains(event.target) && !selectEl.contains(event.target)) {
-                toggle();
-            }
-        });
-    }
-}
-
-// Filter option availability: every filter option shows how many runs it would still match
-// given the other filters, and options that cannot match anything are greyed out. Without this
-// a dropdown keeps offering values that belong to runs another filter already excluded.
-// The counts follow the usual faceted-search rule: the count of an option in filter X is
-// computed with every filter except X applied, so selecting a value in X never makes the other
-// values of X disappear. The amount filter ("last X runs") is not a category and is left out.
-let filterBaseRunsCache = { key: null, runs: null, suites: null };
-
-// key of the settings that change run_start representation, and with it which runs a date
-// range matches and which suites belong to which run
-function get_filter_base_cache_key() {
-    return `${settings.show.milliseconds}|${settings.show.convertTimezone}|${settings.show.timezones}`;
-}
-
-function apply_run_start_transformations(data) {
-    return remove_timezones(convert_timezone(remove_milliseconds(data)));
-}
-
-// all runs with the same run_start transformations the filter pipeline applies, so the
-// availability computation compares the same timestamps as the real filters do
-function get_filter_base_runs() {
-    const key = get_filter_base_cache_key();
-    if (filterBaseRunsCache.key !== key) {
-        filterBaseRunsCache = { key: key, runs: apply_run_start_transformations(runs), suites: null };
-    }
-    return filterBaseRunsCache.runs;
-}
-
-// suites are only needed while a suite path is selected, so they are transformed on demand
-function get_filter_base_suites() {
-    get_filter_base_runs();
-    if (filterBaseRunsCache.suites === null) {
-        filterBaseRunsCache.suites = apply_run_start_transformations(suites);
-    }
-    return filterBaseRunsCache.suites;
-}
-
-// turn the profile object of capture_current_filters() into the selection shape the apply_*
-// functions take
-function normalize_filter_selections(profile) {
-    const checked_values = (items, key) => new Set((items || []).filter(item => item.checked).map(item => item[key]));
-    const hiddenCustomFilters = get_hidden_custom_filters();
-    const customFilters = {};
-    for (const [dimName, items] of Object.entries(profile.customFilters || {})) {
-        // a custom filter hidden on this page is not applied, so it may not shape the counts either
-        if (hiddenCustomFilters.includes(dimName)) continue;
-        customFilters[dimName] = {
-            values: checked_values(items, "value"),
-            mode: (profile.customFilterModes || {})[dimName] ?? "OR",
-        };
-    }
-    return {
-        runs: profile.runs ?? "All",
-        runTags: Array.from(checked_values(profile.runTags, "id")),
-        tagMode: profile.tagMode ?? "AND",
-        projectVersions: checked_values(profile.projectVersions, "value"),
-        metadata: profile.metadata ?? "All",
-        suitePath: profile.suitePath ?? "All",
-        dateRange: build_date_range(profile.fromDate, profile.fromTime, profile.toDate, profile.toTime),
-        customFilters: customFilters,
-    };
-}
-
-// apply every run level filter except the one whose options are being counted
-function apply_filters_except(runList, selections, facet, dimName = null, suiteList = null) {
-    let result = runList;
-    if (facet !== "runs") { result = apply_run_name_filter(result, selections.runs); }
-    if (facet !== "runTags") { result = apply_runtag_filter(result, selections.runTags, selections.tagMode); }
-    if (facet !== "metadata") { result = apply_metadata_filter(result, selections.metadata); }
-    if (facet !== "projectVersions") { result = apply_project_version_filter(result, selections.projectVersions); }
-    for (const [dim, dimSelection] of Object.entries(selections.customFilters)) {
-        if (facet === "customFilters" && dim === dimName) { continue; }
-        result = apply_custom_filter_dimension(result, dim, dimSelection.values, dimSelection.mode);
-    }
-    // the date range and the suite path have no option lists to count, so they always apply
-    if (selections.dateRange) {
-        result = apply_date_filter(result, selections.dateRange.from, selections.dateRange.to);
-    }
-    if (selections.suitePath && selections.suitePath !== "All") {
-        result = apply_suite_path_run_filter(result, selections.suitePath, suiteList ?? get_filter_base_suites());
-    }
-    return result;
-}
-
-function count_option(counts, value) {
-    counts.set(value, (counts.get(value) ?? 0) + 1);
-}
-
-// every option of a filter starts at 0, so options that no longer match any run are part of
-// the result instead of missing from it
-function seed_option_counts(values) {
-    const counts = new Map();
-    for (const value of values) { counts.set(value, 0); }
-    return counts;
-}
-
-// In NOT mode an option excludes its runs instead of selecting them, so its count is the
-// number of runs that would be left over. "All" means "no filtering" in every mode and keeps
-// the total. This way a count always answers the same question: how many runs remain if this
-// option is the selection of this filter.
-function invert_counts_for_not_mode(counts, mode, total) {
-    if (mode !== "NOT") { return counts; }
-    for (const [value, count] of counts) {
-        if (value !== "All") { counts.set(value, total - count); }
-    }
-    return counts;
-}
-
-// how many runs every option of every filter would match, as {facet: Map(option -> count)}.
-// Multi valued filters (run tags, metadata) count a run for each of its values, so their
-// counts do not add up to the total, which is what the "All" option holds.
-function compute_filter_option_availability(runList, selections, suiteList = null) {
-    const availability = { customFilters: {} };
-
-    availability.runs = seed_option_counts(runList.map(run => run.name));
-    const runNameBase = apply_filters_except(runList, selections, "runs", null, suiteList);
-    availability.runs.set("All", runNameBase.length);
-    for (const run of runNameBase) { count_option(availability.runs, run.name); }
-
-    const all_tags = (run) => run.tags.split(",").filter(tag => tag);
-    availability.runTags = seed_option_counts(runList.flatMap(all_tags));
-    const runTagBase = apply_filters_except(runList, selections, "runTags", null, suiteList);
-    availability.runTags.set("All", runTagBase.length);
-    for (const run of runTagBase) {
-        for (const tag of all_tags(run)) { count_option(availability.runTags, tag); }
-    }
-    invert_counts_for_not_mode(availability.runTags, selections.tagMode, runTagBase.length);
-
-    availability.projectVersions = seed_option_counts(runList.map(get_project_version_value));
-    const versionBase = apply_filters_except(runList, selections, "projectVersions", null, suiteList);
-    availability.projectVersions.set("All", versionBase.length);
-    for (const run of versionBase) { count_option(availability.projectVersions, get_project_version_value(run)); }
-
-    // the metadata filter matches its value against the whole metadata string of a run, so the
-    // count of an option has to use the same substring check instead of the parsed items
-    availability.metadata = new Map();
-    const metadataBase = apply_filters_except(runList, selections, "metadata", null, suiteList);
-    availability.metadata.set("All", metadataBase.length);
-    for (const option of get_metadata_options(runList)) {
-        availability.metadata.set(option, apply_metadata_filter(metadataBase, option).length);
-    }
-
-    for (const [dimName, dimSelection] of Object.entries(selections.customFilters)) {
-        const counts = seed_option_counts(runList.map(run => get_custom_filter_value(run, dimName)));
-        const dimBase = apply_filters_except(runList, selections, "customFilters", dimName, suiteList);
-        counts.set("All", dimBase.length);
-        for (const run of dimBase) { count_option(counts, get_custom_filter_value(run, dimName)); }
-        availability.customFilters[dimName] = invert_counts_for_not_mode(counts, dimSelection.mode, dimBase.length);
-    }
-
-    return availability;
-}
-
-// add or update the "(X)" count of one filter option row. The count is a sibling of the
-// label, not a child: the row is the flex container, so only a direct child of the row can
-// be pushed into its own right-aligned column.
-function set_filter_option_count(rowElement, count) {
-    if (!rowElement) { return; }
-    let countElement = rowElement.querySelector(".filter-option-count");
-    if (!settings.show.filterCounts) {
-        countElement?.remove();
-        return;
-    }
-    if (!countElement) {
-        countElement = document.createElement("span");
-        countElement.className = "filter-option-count";
-        rowElement.appendChild(countElement);
-    }
-    countElement.textContent = `(${count})`;
-}
-
-// Unavailable options are only greyed out, never disabled or hidden: the user keeps seeing
-// that the option exists and can still select it (which then simply results in no runs).
-function apply_availability_to_checkbox_list(listElement, counts) {
-    if (!listElement) { return; }
-    const inputs = listElement.querySelectorAll("input.form-check-input:not([role='switch'])");
-    for (const input of inputs) {
-        const count = counts?.get(input.value) ?? 0;
-        const row = input.closest("li");
-        set_filter_option_count(row, count);
-        row?.classList.toggle("filter-option-unavailable", Boolean(counts) && settings.show.filterAvailability && count === 0);
-    }
-}
-
-function apply_availability_to_select(selectElement, counts) {
-    if (!selectElement) { return; }
-    for (const option of selectElement.options) {
-        const count = counts?.get(option.value) ?? 0;
-        option.textContent = (counts && settings.show.filterCounts) ? `${option.value} (${count})` : option.value;
-        option.classList.toggle("filter-option-unavailable", Boolean(counts) && settings.show.filterAvailability && count === 0);
-    }
-}
-
-// walk every filter option list and drop the counts and the greying out
-function clear_filter_option_availability() {
-    apply_availability_to_select(document.getElementById("runs"), null);
-    apply_availability_to_select(document.getElementById("metadata"), null);
-    apply_availability_to_checkbox_list(document.getElementById("runTag"), null);
-    apply_availability_to_checkbox_list(document.getElementById("projectVersionList"), null);
-    for (const dimName of Object.keys(collect_custom_filter_dimensions())) {
-        apply_availability_to_checkbox_list(document.getElementById(`customFilter_${dimName}_List`), null);
-    }
-}
-
-// The refresh writes into the filter modal, which is only safe while the modal is open:
-// changing its contents during the closing animation competes with the fade out and can leave
-// the modal on screen. Filters can also be set programmatically while the modal is closed
-// (overview drill down, filter profiles), so the state is refreshed when it opens.
-let filterModalIsOpen = false;
-
-function set_filter_modal_open(isOpen) {
-    filterModalIsOpen = isOpen;
-    if (isOpen) { refresh_filter_option_availability(); }
-}
-
-// recompute the counts of all filter options and grey out the ones that match no runs
-function refresh_filter_option_availability() {
-    if (!filterModalIsOpen || !document.getElementById("filtersModal")) { return; }
-    if (!settings.show.filterAvailability && !settings.show.filterCounts) {
-        clear_filter_option_availability();
-        return;
-    }
-    const selections = normalize_filter_selections(capture_current_filters());
-    const availability = compute_filter_option_availability(get_filter_base_runs(), selections);
-    apply_availability_to_select(document.getElementById("runs"), availability.runs);
-    apply_availability_to_select(document.getElementById("metadata"), availability.metadata);
-    apply_availability_to_checkbox_list(document.getElementById("runTag"), availability.runTags);
-    apply_availability_to_checkbox_list(document.getElementById("projectVersionList"), availability.projectVersions);
-    for (const [dimName, counts] of Object.entries(availability.customFilters)) {
-        apply_availability_to_checkbox_list(document.getElementById(`customFilter_${dimName}_List`), counts);
-    }
-}
-
-// The filter modal fires a change event per checkbox, and the version search box checks a whole
-// set of them at once, so the refresh is collapsed into one call per frame.
-let filterAvailabilityFrame = null;
-
-function schedule_filter_option_availability_refresh() {
-    if (filterAvailabilityFrame !== null) { return; }
-    filterAvailabilityFrame = requestAnimationFrame(() => {
-        filterAvailabilityFrame = null;
-        refresh_filter_option_availability();
-    });
-}
-
-// show filter active indicator if checkBoxElement unchecked
-function setup_filter_active_indicator(checkBoxElement, filterActiveIndicatorId) {
-    checkBoxElement.addEventListener("change", () => {
-        update_filter_active_indicator(checkBoxElement.id, filterActiveIndicatorId);
-    });
-}
-
-function update_filter_active_indicator(allCheckBoxId, filterActiveIndicatorId) {
-    const filterActiveIndicator = document.getElementById(filterActiveIndicatorId);
-    const allCheckBox = document.getElementById(allCheckBoxId);
-    filterActiveIndicator.style.display = allCheckBox.checked ? "none" : "inline-block";
-}
-
-function unselect_checkboxes(checkBoxesToUnselect) {
-    for (const checkBox of checkBoxesToUnselect) {
-        checkBox.checked = false;
-    }
-}
-
-// for runTag/version filter popup and overview
-function setup_filter_checkbox_handler_listeners(
-    checkBoxContainerElement,
-    allCheckBox,
-    filterActiveIndicatorId = null,
-    additionalCheckBoxFunc = null //for overview version selector
-) {
-    const inputItemQueryString = "input.form-check-input:not([role='switch'])"; //not and/or switch
-    const nonAllCheckBoxes = Array
-        .from(
-            checkBoxContainerElement
-                .querySelectorAll(inputItemQueryString)
-        ).filter(checkBox => checkBox !== allCheckBox);
-    allCheckBox.addEventListener('change', () => {
-        if (allCheckBox.checked) {
-            unselect_checkboxes(nonAllCheckBoxes);
-            additionalCheckBoxFunc && additionalCheckBoxFunc();
-        } else {
-            allCheckBox.checked = true; //prevent unselecting All if no other checkboxes checked
-        }
-        filterActiveIndicatorId && update_filter_active_indicator(allCheckBox.id, filterActiveIndicatorId);
-    });
-    for (const checkBox of nonAllCheckBoxes) {
-        checkBox.addEventListener('change', () => {
-            if (checkBox.checked) {
-                allCheckBox.checked = false; //uncheck All if other checkbox checked
-                filterActiveIndicatorId && update_filter_active_indicator(allCheckBox.id, filterActiveIndicatorId);
-            } else if (!nonAllCheckBoxes.some(checkBox => checkBox.checked)) {
-                allCheckBox.checked = true;
-                filterActiveIndicatorId && update_filter_active_indicator(allCheckBox.id, filterActiveIndicatorId);
-            }
-            additionalCheckBoxFunc && additionalCheckBoxFunc();
-        });
-    }
-}
-
-// autoSelectMatches: while the search box has text, check every matching checkbox and
-// uncheck the rest (e.g. typing "1." selects every 1.x version in one go) instead of only
-// narrowing which rows are visible. Clearing the search box leaves the selection as-is.
-// An optional ".filter-search-clear" button next to the search box empties it in one step
-// (unlike deleting characters one by one, which re-runs the auto-select on every keystroke).
-function setup_filter_checkbox_subfilter(parentElementId, autoSelectMatches = false) {
-    const container = document.getElementById(parentElementId);
-    const searchBar = container.querySelector("input.form-control");
-    const clearButton = container.querySelector(".filter-search-clear");
-    const checkBoxRows = container.querySelectorAll("li.list-group-item-action");
-    const apply_search = () => {
-        const filterText = searchBar.value.toLowerCase();
-        if (clearButton) clearButton.hidden = !filterText;
-        checkBoxRows.forEach(row => {
-            const checkbox = row.querySelector("input.form-check-input");
-            const rowValue = checkbox.value.toLowerCase();
-            const matches = rowValue.includes(filterText);
-            row.classList.toggle("d-none", !matches);
-            if (autoSelectMatches && filterText && checkbox.value !== "All" && checkbox.checked !== matches) {
-                checkbox.checked = matches;
-                checkbox.dispatchEvent(new Event('change', { bubbles: true }));
-            }
-        });
-    };
-    searchBar.addEventListener("input", apply_search);
-    clearButton?.addEventListener("click", () => {
-        searchBar.value = "";
-        apply_search();
-        searchBar.focus();
-    });
-}
-
-function clear_all_filters() {
-    overviewProjectNavFilter.project = '';
-    overviewProjectNavFilter.version = '';
-    clear_project_filter();
-    clear_version_filter();
-    clear_suite_path_filter();
-    clear_custom_filters();
-    document.getElementById("amount").value = filteredAmountDefault;
-    document.getElementById("metadata").value = "All";
-    setup_lowest_highest_dates();
-    const runsIndicator = document.getElementById("filterRunSelectedIndicator");
-    if (runsIndicator) runsIndicator.style.display = "none";
-    const filtersActiveIndicator = document.getElementById("filtersActiveIndicator");
-    if (filtersActiveIndicator) filtersActiveIndicator.style.display = "none";
-    schedule_filter_option_availability_refresh();
-}
-
-function clear_suite_path_filter() {
-    setup_suite_path_navigator("All");
-}
-
-function clear_custom_filters() {
-    const dimensions = collect_custom_filter_dimensions();
-    for (const dimName of Object.keys(dimensions)) {
-        const listEl = document.getElementById(`customFilter_${dimName}_List`);
-        if (!listEl) continue;
-        const filterInput = document.getElementById(`customFilter_${dimName}_FilterInput`);
-        if (filterInput) filterInput.value = "";
-        const inputs = listEl.querySelectorAll("input.form-check-input");
-        for (const input of inputs) {
-            input.checked = false;
-            input.closest("li")?.classList.remove("d-none");
-            if (input.value === "All") input.checked = true;
-        }
-        update_filter_active_indicator(`customFilter_${dimName}_List_All`, `filterCustomFilter_${dimName}_Indicator`);
-    }
-}
-
-function clear_version_filter() {
-    document.getElementById("projectVersionCheckBoxesFilter").value = "";
-    document.getElementById("projectVersionCheckBoxesFilterClear").hidden = true;
-    const versionElements = document.getElementById("projectVersionList").getElementsByTagName("input");
-    for (const input of versionElements) {
-        input.checked = false;
-        input.parentElement.classList.remove("d-none"); //show filtered rows
-        if (input.value == "All") input.checked = true;
-    }
-    update_filter_active_indicator("projectVersionInputItemAll", "filterVersionSelectedIndicator");
-}
-
-// the run/tag filter set by set_filter_show_current_project results in either a single
-// selected run name or a single checked run tag, checked here so a filter the user changed
-// themselves in the meantime is not mistaken for the one applied by the overview card
-function overview_navigation_filter_still_applied(project) {
-    if (project.startsWith("project_")) {
-        const tagElements = document.getElementById("runTag").getElementsByTagName("input");
-        const checkedTags = Array.from(tagElements).filter(input => input.checked);
-        return checkedTags.length === 1 && checkedTags[0].value === project;
-    }
-    return document.getElementById("runs").value === project;
-}
-
-// the overview page is meant to show every project, so the single project filter that was
-// applied by clicking a project card is dropped again when the user navigates back to the
-// overview (issue #348). Filters the user changed themselves are left alone.
-function clear_overview_project_navigation_filter() {
-    const { project, version } = overviewProjectNavFilter;
-    if (!project) { return; }
-    overviewProjectNavFilter.project = '';
-    overviewProjectNavFilter.version = '';
-    // the navigation writes these globals and the next filter pass copies them into the
-    // filter modal, so they are dropped here as well: when the pass has not run yet the
-    // DOM check below sees the still empty filter and would otherwise leave them pending
-    selectedRunSetting = '';
-    selectedTagSetting = '';
-    if (!overview_navigation_filter_still_applied(project)) { return; }
-    clear_project_filter();
-    // the version filter is only cleared when the same navigation applied it (version badge)
-    if (version) { clear_version_filter(); }
-    const runsIndicator = document.getElementById("filterRunSelectedIndicator");
-    if (runsIndicator) runsIndicator.style.display = "none";
-    // any other filter the user set stays active, so recompute the dot instead of hiding it
-    update_filters_button_indicator();
-}
-
-function set_filter_show_current_version(version) {
-    overviewProjectNavFilter.version = version;
-    const projectVersionList = document.getElementById("projectVersionList");
-    document.getElementById("projectVersionInputItemAll").checked = false;
-    projectVersionList.querySelector(`input[value="${version}"]`).checked = true;
-    update_filter_active_indicator("projectVersionInputItemAll", "filterVersionSelectedIndicator");
-}
-
-// Track the currently active profile name (null if none applied)
-let activeProfileName = null;
-
-// Snapshot of the filter state at dashboard load time (used to determine checkbox defaults when creating a profile)
-let defaultFilters = null;
-
-function capture_default_filters() {
-    defaultFilters = capture_current_filters();
-}
-
-function filter_key_differs_from_default(key) {
-    if (!defaultFilters) return false;
-    const current = capture_current_filters();
-    if (key === 'runTags') {
-        const defaultTagMap = {};
-        (defaultFilters.runTags || []).forEach(t => { defaultTagMap[t.id] = t.checked; });
-        for (const tag of (current.runTags || [])) {
-            if (defaultTagMap[tag.id] !== tag.checked) return true;
-        }
-        return false;
-    }
-    if (key === 'projectVersions') {
-        const defaultVersionMap = {};
-        (defaultFilters.projectVersions || []).forEach(v => { defaultVersionMap[v.value] = v.checked; });
-        for (const ver of (current.projectVersions || [])) {
-            if (defaultVersionMap[ver.value] !== ver.checked) return true;
-        }
-        return false;
-    }
-    return String(current[key] ?? '') !== String(defaultFilters[key] ?? '');
-}
-
-function compute_profile_check_states() {
-    const checkKeyMap = {
-        profileCheckRuns: ['runs'],
-        profileCheckRunTags: ['runTags', 'tagMode'],
-        profileCheckVersions: ['projectVersions'],
-        profileCheckFromDate: ['fromDate'],
-        profileCheckFromTime: ['fromTime'],
-        profileCheckToDate: ['toDate'],
-        profileCheckToTime: ['toTime'],
-        profileCheckMetadata: ['metadata'],
-        profileCheckAmount: ['amount'],
-        profileCheckSuitePaths: ['suitePath'],
-    };
-    const result = {};
-    for (const [checkId, keys] of Object.entries(checkKeyMap)) {
-        result[checkId] = keys.some(key => filter_key_differs_from_default(key));
-    }
-    return result;
-}
-
-function capture_current_filters() {
-    const profile = {};
-    profile.runs = document.getElementById("runs").value;
-    const tagInputs = document.getElementById("runTag").querySelectorAll("input.form-check-input");
-    profile.runTags = Array.from(tagInputs).map(el => ({ id: el.id.replace(/^runTagCheckBox/, ""), checked: el.checked }));
-    profile.tagMode = document.getElementById("tagMode")?.value ?? "AND";
-    const versionInputs = document.getElementById("projectVersionList").querySelectorAll("input.form-check-input");
-    profile.projectVersions = Array.from(versionInputs).map(el => ({ value: el.value, checked: el.checked }));
-    profile.fromDate = document.getElementById("fromDate").value;
-    profile.fromTime = document.getElementById("fromTime").value;
-    profile.toDate = document.getElementById("toDate").value;
-    profile.toTime = document.getElementById("toTime").value;
-    profile.metadata = document.getElementById("metadata").value;
-    profile.amount = document.getElementById("amount").value;
-    profile.suitePath = document.getElementById("suitePathValue").value;
-    const dimensions = collect_custom_filter_dimensions();
-    if (Object.keys(dimensions).length > 0) {
-        profile.customFilters = {};
-        profile.customFilterModes = {};
-        for (const dimName of Object.keys(dimensions)) {
-            const listEl = document.getElementById(`customFilter_${dimName}_List`);
-            if (!listEl) continue;
-            const inputs = listEl.querySelectorAll("input.form-check-input");
-            profile.customFilters[dimName] = Array.from(inputs).map(el => ({ value: el.value, checked: el.checked }));
-            const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
-            profile.customFilterModes[dimName] = modeEl ? modeEl.value : "OR";
-        }
-    }
-    return profile;
-}
-
-function build_profile_from_checks() {
-    const full = capture_current_filters();
-    const profile = {};
-    const checkMap = {
-        profileCheckRuns: 'runs',
-        profileCheckRunTags: ['runTags', 'tagMode'],
-        profileCheckVersions: 'projectVersions',
-        profileCheckFromDate: 'fromDate',
-        profileCheckFromTime: 'fromTime',
-        profileCheckToDate: 'toDate',
-        profileCheckToTime: 'toTime',
-        profileCheckMetadata: 'metadata',
-        profileCheckAmount: 'amount',
-        profileCheckSuitePaths: 'suitePath',
-    };
-    for (const [checkId, keys] of Object.entries(checkMap)) {
-        const el = document.getElementById(checkId);
-        if (el && el.checked) {
-            if (Array.isArray(keys)) {
-                keys.forEach(k => profile[k] = full[k]);
-            } else {
-                profile[keys] = full[keys];
-            }
-        }
-    }
-    const dimensions = collect_custom_filter_dimensions();
-    const customFiltersResult = {};
-    for (const dimName of Object.keys(dimensions)) {
-        const checkEl = document.getElementById(`profileCheckCustomFilter_${dimName}`);
-        if (checkEl && checkEl.checked && full.customFilters && full.customFilters[dimName]) {
-            customFiltersResult[dimName] = full.customFilters[dimName];
-        }
-    }
-    if (Object.keys(customFiltersResult).length > 0) {
-        profile.customFilters = customFiltersResult;
-        const customFilterModesResult = {};
-        for (const dimName of Object.keys(customFiltersResult)) {
-            const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
-            customFilterModesResult[dimName] = modeEl ? modeEl.value : "OR";
-        }
-        profile.customFilterModes = customFilterModesResult;
-    }
-    return profile;
-}
-
-function profiles_match(saved, current) {
-    for (const key of Object.keys(saved)) {
-        const s = saved[key];
-        const c = current[key];
-        if (Array.isArray(s)) {
-            if (!Array.isArray(c) || s.length !== c.length) return false;
-            for (let i = 0; i < s.length; i++) {
-                if (JSON.stringify(s[i]) !== JSON.stringify(c[i])) return false;
-            }
-        } else {
-            if (String(s) !== String(c)) return false;
-        }
-    }
-    return true;
-}
-
-function find_matching_profile() {
-    const profiles = load_filter_profiles();
-    const current = capture_current_filters();
-    for (const [name, saved] of Object.entries(profiles)) {
-        if (profiles_match(saved, current)) return name;
-    }
-    return null;
-}
-
-function update_profile_select_display() {
-    const selectEl = document.getElementById("selectFilterProfile");
-    const selectInner = selectEl.querySelector("select");
-    const dot = document.getElementById("profileModifiedDot");
-    const updateBtn = document.getElementById("updateFilterProfile");
-
-    const matchingName = find_matching_profile();
-
-    if (matchingName) {
-        // Current filters exactly match a saved profile
-        activeProfileName = matchingName;
-        selectInner.options[0].textContent = matchingName;
-        dot.style.display = "none";
-        updateBtn.style.display = "none";
-    } else if (activeProfileName) {
-        // A profile was applied but filters have since changed
-        selectInner.options[0].textContent = activeProfileName;
-        dot.style.display = "";
-        updateBtn.style.display = "";
-    } else {
-        // No profile active
-        selectInner.options[0].textContent = "Apply Filter Profile";
-        dot.style.display = "none";
-        updateBtn.style.display = "none";
-    }
-}
-
-function clear_active_profile() {
-    activeProfileName = null;
-}
-
-function update_active_profile() {
-    if (!activeProfileName) return;
-    const profileData = capture_current_filters();
-    // Only save the keys that were in the original profile
-    const profiles = load_filter_profiles();
-    const original = profiles[activeProfileName];
-    if (!original) return;
-    const updated = {};
-    for (const key of Object.keys(original)) {
-        updated[key] = profileData[key];
-    }
-    save_filter_profile_to_storage(activeProfileName, updated);
-    update_profile_select_display();
-}
-
-function apply_filter_profile(profile, name) {
-    if (name) activeProfileName = name;
-    if (profile.runs !== undefined) {
-        document.getElementById("runs").value = profile.runs;
-    }
-
-    if (profile.runTags !== undefined) {
-        const tagInputs = document.getElementById("runTag").querySelectorAll("input.form-check-input");
-        const tagMap = {};
-        profile.runTags.forEach(t => tagMap[t.id] = t.checked);
-        tagInputs.forEach(el => {
-            tag=el.id.replace(/^runTagCheckBox/, "")
-            if (tagMap[tag] !== undefined) el.checked = tagMap[tag];
-        });
-        update_filter_active_indicator("runTagCheckBoxAll", "filterRunTagSelectedIndicator");
-    }
-    if (profile.tagMode !== undefined) {
-        const tagModeEl = document.getElementById("tagMode");
-        if (tagModeEl) tagModeEl.value = profile.tagMode;
-    } else if (profile.useOrTags !== undefined) {
-        // Backward compatibility: convert old useOrTags boolean to tagMode
-        const tagModeEl = document.getElementById("tagMode");
-        if (tagModeEl) tagModeEl.value = profile.useOrTags ? "OR" : "AND";
-    }
-    if (profile.projectVersions !== undefined) {
-        const versionInputs = document.getElementById("projectVersionList").querySelectorAll("input.form-check-input");
-        const versionMap = {};
-        profile.projectVersions.forEach(v => versionMap[v.value] = v.checked);
-        versionInputs.forEach(el => {
-            if (versionMap[el.value] !== undefined) el.checked = versionMap[el.value];
-        });
-        update_filter_active_indicator("projectVersionInputItemAll", "filterVersionSelectedIndicator");
-    }
-    if (profile.fromDate !== undefined) {
-        document.getElementById("fromDate").value = profile.fromDate;
-    }
-    if (profile.fromTime !== undefined) {
-        document.getElementById("fromTime").value = profile.fromTime;
-    }
-    if (profile.toDate !== undefined) {
-        document.getElementById("toDate").value = profile.toDate;
-    }
-    if (profile.toTime !== undefined) {
-        document.getElementById("toTime").value = profile.toTime;
-    }
-    if (profile.metadata !== undefined) {
-        document.getElementById("metadata").value = profile.metadata;
-    }
-    if (profile.amount !== undefined) {
-        document.getElementById("amount").value = profile.amount;
-    }
-    if (profile.suitePath !== undefined) {
-        setup_suite_path_navigator(profile.suitePath);
-    } else if (profile.suitePaths !== undefined) {
-        // Backward compatibility: old format stored an array of {value, checked}
-        const checked = (profile.suitePaths || []).filter(p => p.checked && p.value !== "All").map(p => p.value);
-        setup_suite_path_navigator(checked.length === 1 ? checked[0] : "All");
-    }
-    if (profile.customFilters !== undefined) {
-        for (const [dimName, items] of Object.entries(profile.customFilters)) {
-            const listEl = document.getElementById(`customFilter_${dimName}_List`);
-            if (!listEl) continue;
-            const valueMap = {};
-            items.forEach(v => { valueMap[v.value] = v.checked; });
-            listEl.querySelectorAll("input.form-check-input").forEach(el => {
-                if (valueMap[el.value] !== undefined) el.checked = valueMap[el.value];
-            });
-            update_filter_active_indicator(`customFilter_${dimName}_List_All`, `filterCustomFilter_${dimName}_Indicator`);
-        }
-    }
-    if (profile.customFilterModes !== undefined) {
-        for (const [dimName, mode] of Object.entries(profile.customFilterModes)) {
-            const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
-            if (modeEl) modeEl.value = mode;
-        }
-    }
-    const runsIndicator = document.getElementById("filterRunSelectedIndicator");
-    const runsVal = document.getElementById("runs")?.value;
-    if (runsIndicator)
-        runsIndicator.style.display =
-            runsVal && runsVal !== "All" ? "inline-block" : "none";
-    schedule_filter_option_availability_refresh();
-}
-
-function load_filter_profiles() {
-    return settings.filterProfiles || {};
-}
-
-function save_filter_profile_to_storage(name, profileData) {
-    const profiles = load_filter_profiles();
-    profiles[name] = profileData;
-    set_local_storage_item("filterProfiles", profiles);
-}
-
-function delete_filter_profile(name) {
-    const profiles = load_filter_profiles();
-    delete profiles[name];
-    set_local_storage_item("filterProfiles", profiles);
-}
-
-function populate_filter_profile_select() {
-    const list = document.getElementById("filterProfileList");
-    const profiles = load_filter_profiles();
-    list.innerHTML = '';
-    const names = Object.keys(profiles).sort();
-    if (names.length === 0) {
-        list.innerHTML = '<li class="list-group-item small text-muted">No profiles saved</li>';
-        return;
-    }
-    for (const name of names) {
-        const li = document.createElement("li");
-        li.className = "list-group-item list-group-item-action d-flex align-items-center small";
-        li.innerHTML = `<span class="filter-profile-apply flex-grow-1" data-profile="${name}" id="profile${name}" style="cursor: pointer;">${name}</span>`
-            + `<span class="filter-profile-delete ms-2" data-profile="${name}" id="profileCheck${name}" title="Delete profile" style="cursor: pointer;">&times;</span>`;
-        list.appendChild(li);
-    }
-}
-
-function enter_profile_edit_mode() {
-    document.getElementById("addFilterProfile").style.display = "none";
-    document.getElementById("cancelFilterProfile").style.display = "";
-    document.getElementById("filterProfileEditorInline").style.display = "";
-    document.getElementById("filterProfileEditorInline").classList.add("d-flex");
-    document.getElementById("filterProfileName").value = "";
-    document.querySelectorAll(".filter-profile-check").forEach(el => {
-        el.style.display = "";
-    });
-    // Set each checkbox based on whether the corresponding filter currently differs from the default state
-    const states = compute_profile_check_states();
-    for (const [id, checked] of Object.entries(states)) {
-        const el = document.getElementById(id);
-        if (el) el.checked = checked;
-    }
-}
-
-function exit_profile_edit_mode() {
-    document.getElementById("cancelFilterProfile").style.display = "none";
-    document.getElementById("addFilterProfile").style.display = "";
-    document.getElementById("filterProfileEditorInline").style.display = "none";
-    document.getElementById("filterProfileEditorInline").classList.remove("d-flex");
-    document.querySelectorAll(".filter-profile-check").forEach(el => {
-        el.style.display = "none";
-    });
-}
-
-// Merge two profile objects according to the "largest horizon" rules:
-//   runTags / projectVersions : union of checked entries
-//   tagMode                   : most permissive wins (OR > AND > NOT)
-//   fromDate / fromTime       : take the earlier value  (widest start)
-//   toDate   / toTime         : take the later  value  (widest end)
-//   amount                   : take the larger value
-//   runs / metadata          : keep if identical, otherwise "All"
-function merge_two_profiles(profileA, profileB) {
-    const result = {};
-
-    if (profileA.runs !== undefined && profileB.runs !== undefined) {
-        result.runs = profileA.runs === profileB.runs ? profileA.runs : "All";
-    } else if (profileA.runs !== undefined) {
-        result.runs = profileA.runs;
-    } else if (profileB.runs !== undefined) {
-        result.runs = profileB.runs;
-    }
-
-    if (profileA.runTags !== undefined || profileB.runTags !== undefined) {
-        const tagsA = profileA.runTags || [];
-        const tagsB = profileB.runTags || [];
-        const merged = {};
-        tagsA.forEach(t => { merged[t.id] = t.checked; });
-        tagsB.forEach(t => { merged[t.id] = merged[t.id] || t.checked; });
-        result.runTags = Object.entries(merged).map(([id, checked]) => ({ id, checked }));
-    }
-
-    if (profileA.tagMode !== undefined || profileB.tagMode !== undefined ||
-        profileA.useOrTags !== undefined || profileB.useOrTags !== undefined) {
-        const permissiveness = { "OR": 2, "AND": 1, "NOT": 0 };
-        // Convert legacy useOrTags boolean to tagMode string if needed
-        const modeA = profileA.tagMode ?? (profileA.useOrTags ? "OR" : "AND");
-        const modeB = profileB.tagMode ?? (profileB.useOrTags ? "OR" : "AND");
-        result.tagMode = (permissiveness[modeA] ?? 1) >= (permissiveness[modeB] ?? 1) ? modeA : modeB;
-    }
-
-    if (profileA.projectVersions !== undefined || profileB.projectVersions !== undefined) {
-        const versA = profileA.projectVersions || [];
-        const versB = profileB.projectVersions || [];
-        const merged = {};
-        versA.forEach(v => { merged[v.value] = v.checked; });
-        versB.forEach(v => { merged[v.value] = merged[v.value] || v.checked; });
-        result.projectVersions = Object.entries(merged).map(([value, checked]) => ({ value, checked }));
-    }
-
-    if (profileA.fromDate !== undefined && profileB.fromDate !== undefined) {
-        const dtA = `${profileA.fromDate}T${profileA.fromTime || "00:00"}`;
-        const dtB = `${profileB.fromDate}T${profileB.fromTime || "00:00"}`;
-        const earlier = dtA <= dtB ? profileA : profileB;
-        result.fromDate = earlier.fromDate;
-        if (earlier.fromTime !== undefined) result.fromTime = earlier.fromTime;
-    } else if (profileA.fromDate !== undefined) {
-        result.fromDate = profileA.fromDate;
-        if (profileA.fromTime !== undefined) result.fromTime = profileA.fromTime;
-    } else if (profileB.fromDate !== undefined) {
-        result.fromDate = profileB.fromDate;
-        if (profileB.fromTime !== undefined) result.fromTime = profileB.fromTime;
-    }
-
-    if (profileA.toDate !== undefined && profileB.toDate !== undefined) {
-        const dtA = `${profileA.toDate}T${profileA.toTime || "23:59"}`;
-        const dtB = `${profileB.toDate}T${profileB.toTime || "23:59"}`;
-        const later = dtA >= dtB ? profileA : profileB;
-        result.toDate = later.toDate;
-        if (later.toTime !== undefined) result.toTime = later.toTime;
-    } else if (profileA.toDate !== undefined) {
-        result.toDate = profileA.toDate;
-        if (profileA.toTime !== undefined) result.toTime = profileA.toTime;
-    } else if (profileB.toDate !== undefined) {
-        result.toDate = profileB.toDate;
-        if (profileB.toTime !== undefined) result.toTime = profileB.toTime;
-    }
-
-    if (profileA.metadata !== undefined && profileB.metadata !== undefined) {
-        result.metadata = profileA.metadata === profileB.metadata ? profileA.metadata : "All";
-    } else if (profileA.metadata !== undefined) {
-        result.metadata = profileA.metadata;
-    } else if (profileB.metadata !== undefined) {
-        result.metadata = profileB.metadata;
-    }
-
-    if (profileA.amount !== undefined && profileB.amount !== undefined) {
-        result.amount = String(Math.max(Number(profileA.amount), Number(profileB.amount)));
-    } else if (profileA.amount !== undefined) {
-        result.amount = profileA.amount;
-    } else if (profileB.amount !== undefined) {
-        result.amount = profileB.amount;
-    }
-
-    if (profileA.suitePath !== undefined || profileB.suitePath !== undefined) {
-        const a = profileA.suitePath ?? "All";
-        const b = profileB.suitePath ?? "All";
-        result.suitePath = a === b ? a : "All";
-    }
-
-    if (profileA.customFilters !== undefined || profileB.customFilters !== undefined) {
-        const cfA = profileA.customFilters || {};
-        const cfB = profileB.customFilters || {};
-        const allDims = new Set([...Object.keys(cfA), ...Object.keys(cfB)]);
-        const mergedCF = {};
-        for (const dim of allDims) {
-            const vA = cfA[dim] || [];
-            const vB = cfB[dim] || [];
-            const merged = {};
-            vA.forEach(v => { merged[v.value] = v.checked; });
-            vB.forEach(v => { merged[v.value] = merged[v.value] || v.checked; });
-            mergedCF[dim] = Object.entries(merged).map(([value, checked]) => ({ value, checked }));
-        }
-        result.customFilters = mergedCF;
-    }
-
-    if (profileA.customFilterModes !== undefined || profileB.customFilterModes !== undefined) {
-        const modesA = profileA.customFilterModes || {};
-        const modesB = profileB.customFilterModes || {};
-        const allDims = new Set([...Object.keys(modesA), ...Object.keys(modesB)]);
-        const permissiveness = { "OR": 2, "AND": 1, "NOT": 0 };
-        const mergedModes = {};
-        for (const dim of allDims) {
-            const mA = modesA[dim] ?? "OR";
-            const mB = modesB[dim] ?? "OR";
-            mergedModes[dim] = (permissiveness[mA] ?? 2) >= (permissiveness[mB] ?? 2) ? mA : mB;
-        }
-        result.customFilterModes = mergedModes;
-    }
-
-    return result;
-}
-
-export {
-    setup_filtered_data_and_filters,
-    setup_run_amount_filter,
-    setup_lowest_highest_dates,
-    setup_metadata_filter,
-    setup_runs_in_select_filter_buttons,
-    setup_runtags_in_select_filter_buttons,
-    setup_suites_in_suite_select,
-    setup_suites_in_test_select,
-    setup_tests_in_select,
-    setup_testtags_in_select,
-    setup_keywords_in_select,
-    setup_project_versions_in_select_filter_buttons,
-    setup_suite_path_navigator,
-    setup_custom_filters_in_select_filter_buttons,
-    apply_custom_filter_visibility,
-    get_hidden_custom_filters,
-    get_active_page,
-    dashboardPages,
-    setup_filter_checkbox_handler_listeners,
-    clear_all_filters,
-    clear_overview_project_navigation_filter,
-    set_filter_show_current_version,
-    build_profile_from_checks,
-    apply_filter_profile,
-    save_filter_profile_to_storage,
-    delete_filter_profile,
-    populate_filter_profile_select,
-    enter_profile_edit_mode,
-    exit_profile_edit_mode,
-    update_profile_select_display,
-    update_active_profile,
-    clear_active_profile,
-    capture_default_filters,
-    merge_two_profiles,
-    collect_custom_filter_dimensions,
-    parse_custom_filters,
-    compute_filter_option_availability,
-    normalize_filter_selections,
-    refresh_filter_option_availability,
-    schedule_filter_option_availability_refresh,
-    set_filter_modal_open,
-};
\ No newline at end of file
diff --git a/robotframework_dashboard/js/filter/availability.js b/robotframework_dashboard/js/filter/availability.js
new file mode 100644
index 00000000..def9d6e7
--- /dev/null
+++ b/robotframework_dashboard/js/filter/availability.js
@@ -0,0 +1,259 @@
+import { settings } from '../variables/settings.js';
+import { runs, suites } from '../variables/data.js';
+import { apply_custom_filter_dimension, apply_date_filter, apply_metadata_filter, apply_project_version_filter, apply_run_name_filter, apply_runtag_filter, build_date_range, collect_custom_filter_dimensions, convert_timezone, get_custom_filter_value, get_hidden_custom_filters, get_project_version_value, remove_milliseconds, remove_timezones } from './pipeline.js';
+import { get_metadata_options } from './modal_options.js';
+import { apply_suite_path_run_filter } from './suite_path.js';
+import { capture_current_filters } from './profiles.js';
+
+// Filter option availability: every filter option shows how many runs it would still match
+// given the other filters, and options that cannot match anything are greyed out. Without this
+// a dropdown keeps offering values that belong to runs another filter already excluded.
+// The counts follow the usual faceted-search rule: the count of an option in filter X is
+// computed with every filter except X applied, so selecting a value in X never makes the other
+// values of X disappear. The amount filter ("last X runs") is not a category and is left out.
+let filterBaseRunsCache = { key: null, runs: null, suites: null };
+
+// key of the settings that change run_start representation, and with it which runs a date
+// range matches and which suites belong to which run
+function get_filter_base_cache_key() {
+    return `${settings.show.milliseconds}|${settings.show.convertTimezone}|${settings.show.timezones}`;
+}
+
+function apply_run_start_transformations(data) {
+    return remove_timezones(convert_timezone(remove_milliseconds(data)));
+}
+
+// all runs with the same run_start transformations the filter pipeline applies, so the
+// availability computation compares the same timestamps as the real filters do
+function get_filter_base_runs() {
+    const key = get_filter_base_cache_key();
+    if (filterBaseRunsCache.key !== key) {
+        filterBaseRunsCache = { key: key, runs: apply_run_start_transformations(runs), suites: null };
+    }
+    return filterBaseRunsCache.runs;
+}
+
+// suites are only needed while a suite path is selected, so they are transformed on demand
+function get_filter_base_suites() {
+    get_filter_base_runs();
+    if (filterBaseRunsCache.suites === null) {
+        filterBaseRunsCache.suites = apply_run_start_transformations(suites);
+    }
+    return filterBaseRunsCache.suites;
+}
+
+// turn the profile object of capture_current_filters() into the selection shape the apply_*
+// functions take
+function normalize_filter_selections(profile) {
+    const checked_values = (items, key) => new Set((items || []).filter(item => item.checked).map(item => item[key]));
+    const hiddenCustomFilters = get_hidden_custom_filters();
+    const customFilters = {};
+    for (const [dimName, items] of Object.entries(profile.customFilters || {})) {
+        // a custom filter hidden on this page is not applied, so it may not shape the counts either
+        if (hiddenCustomFilters.includes(dimName)) continue;
+        customFilters[dimName] = {
+            values: checked_values(items, "value"),
+            mode: (profile.customFilterModes || {})[dimName] ?? "OR",
+        };
+    }
+    return {
+        runs: profile.runs ?? "All",
+        runTags: Array.from(checked_values(profile.runTags, "id")),
+        tagMode: profile.tagMode ?? "AND",
+        projectVersions: checked_values(profile.projectVersions, "value"),
+        metadata: profile.metadata ?? "All",
+        suitePath: profile.suitePath ?? "All",
+        dateRange: build_date_range(profile.fromDate, profile.fromTime, profile.toDate, profile.toTime),
+        customFilters: customFilters,
+    };
+}
+
+// apply every run level filter except the one whose options are being counted
+function apply_filters_except(runList, selections, facet, dimName = null, suiteList = null) {
+    let result = runList;
+    if (facet !== "runs") { result = apply_run_name_filter(result, selections.runs); }
+    if (facet !== "runTags") { result = apply_runtag_filter(result, selections.runTags, selections.tagMode); }
+    if (facet !== "metadata") { result = apply_metadata_filter(result, selections.metadata); }
+    if (facet !== "projectVersions") { result = apply_project_version_filter(result, selections.projectVersions); }
+    for (const [dim, dimSelection] of Object.entries(selections.customFilters)) {
+        if (facet === "customFilters" && dim === dimName) { continue; }
+        result = apply_custom_filter_dimension(result, dim, dimSelection.values, dimSelection.mode);
+    }
+    // the date range and the suite path have no option lists to count, so they always apply
+    if (selections.dateRange) {
+        result = apply_date_filter(result, selections.dateRange.from, selections.dateRange.to);
+    }
+    if (selections.suitePath && selections.suitePath !== "All") {
+        result = apply_suite_path_run_filter(result, selections.suitePath, suiteList ?? get_filter_base_suites());
+    }
+    return result;
+}
+
+function count_option(counts, value) {
+    counts.set(value, (counts.get(value) ?? 0) + 1);
+}
+
+// every option of a filter starts at 0, so options that no longer match any run are part of
+// the result instead of missing from it
+function seed_option_counts(values) {
+    const counts = new Map();
+    for (const value of values) { counts.set(value, 0); }
+    return counts;
+}
+
+// In NOT mode an option excludes its runs instead of selecting them, so its count is the
+// number of runs that would be left over. "All" means "no filtering" in every mode and keeps
+// the total. This way a count always answers the same question: how many runs remain if this
+// option is the selection of this filter.
+function invert_counts_for_not_mode(counts, mode, total) {
+    if (mode !== "NOT") { return counts; }
+    for (const [value, count] of counts) {
+        if (value !== "All") { counts.set(value, total - count); }
+    }
+    return counts;
+}
+
+// how many runs every option of every filter would match, as {facet: Map(option -> count)}.
+// Multi valued filters (run tags, metadata) count a run for each of its values, so their
+// counts do not add up to the total, which is what the "All" option holds.
+function compute_filter_option_availability(runList, selections, suiteList = null) {
+    const availability = { customFilters: {} };
+
+    availability.runs = seed_option_counts(runList.map(run => run.name));
+    const runNameBase = apply_filters_except(runList, selections, "runs", null, suiteList);
+    availability.runs.set("All", runNameBase.length);
+    for (const run of runNameBase) { count_option(availability.runs, run.name); }
+
+    const all_tags = (run) => run.tags.split(",").filter(tag => tag);
+    availability.runTags = seed_option_counts(runList.flatMap(all_tags));
+    const runTagBase = apply_filters_except(runList, selections, "runTags", null, suiteList);
+    availability.runTags.set("All", runTagBase.length);
+    for (const run of runTagBase) {
+        for (const tag of all_tags(run)) { count_option(availability.runTags, tag); }
+    }
+    invert_counts_for_not_mode(availability.runTags, selections.tagMode, runTagBase.length);
+
+    availability.projectVersions = seed_option_counts(runList.map(get_project_version_value));
+    const versionBase = apply_filters_except(runList, selections, "projectVersions", null, suiteList);
+    availability.projectVersions.set("All", versionBase.length);
+    for (const run of versionBase) { count_option(availability.projectVersions, get_project_version_value(run)); }
+
+    // the metadata filter matches its value against the whole metadata string of a run, so the
+    // count of an option has to use the same substring check instead of the parsed items
+    availability.metadata = new Map();
+    const metadataBase = apply_filters_except(runList, selections, "metadata", null, suiteList);
+    availability.metadata.set("All", metadataBase.length);
+    for (const option of get_metadata_options(runList)) {
+        availability.metadata.set(option, apply_metadata_filter(metadataBase, option).length);
+    }
+
+    for (const [dimName, dimSelection] of Object.entries(selections.customFilters)) {
+        const counts = seed_option_counts(runList.map(run => get_custom_filter_value(run, dimName)));
+        const dimBase = apply_filters_except(runList, selections, "customFilters", dimName, suiteList);
+        counts.set("All", dimBase.length);
+        for (const run of dimBase) { count_option(counts, get_custom_filter_value(run, dimName)); }
+        availability.customFilters[dimName] = invert_counts_for_not_mode(counts, dimSelection.mode, dimBase.length);
+    }
+
+    return availability;
+}
+
+// add or update the "(X)" count of one filter option row. The count is a sibling of the
+// label, not a child: the row is the flex container, so only a direct child of the row can
+// be pushed into its own right-aligned column.
+function set_filter_option_count(rowElement, count) {
+    if (!rowElement) { return; }
+    let countElement = rowElement.querySelector(".filter-option-count");
+    if (!settings.show.filterCounts) {
+        countElement?.remove();
+        return;
+    }
+    if (!countElement) {
+        countElement = document.createElement("span");
+        countElement.className = "filter-option-count";
+        rowElement.appendChild(countElement);
+    }
+    countElement.textContent = `(${count})`;
+}
+
+// Unavailable options are only greyed out, never disabled or hidden: the user keeps seeing
+// that the option exists and can still select it (which then simply results in no runs).
+function apply_availability_to_checkbox_list(listElement, counts) {
+    if (!listElement) { return; }
+    const inputs = listElement.querySelectorAll("input.form-check-input:not([role='switch'])");
+    for (const input of inputs) {
+        const count = counts?.get(input.value) ?? 0;
+        const row = input.closest("li");
+        set_filter_option_count(row, count);
+        row?.classList.toggle("filter-option-unavailable", Boolean(counts) && settings.show.filterAvailability && count === 0);
+    }
+}
+
+function apply_availability_to_select(selectElement, counts) {
+    if (!selectElement) { return; }
+    for (const option of selectElement.options) {
+        const count = counts?.get(option.value) ?? 0;
+        option.textContent = (counts && settings.show.filterCounts) ? `${option.value} (${count})` : option.value;
+        option.classList.toggle("filter-option-unavailable", Boolean(counts) && settings.show.filterAvailability && count === 0);
+    }
+}
+
+// walk every filter option list and drop the counts and the greying out
+function clear_filter_option_availability() {
+    apply_availability_to_select(document.getElementById("runs"), null);
+    apply_availability_to_select(document.getElementById("metadata"), null);
+    apply_availability_to_checkbox_list(document.getElementById("runTag"), null);
+    apply_availability_to_checkbox_list(document.getElementById("projectVersionList"), null);
+    for (const dimName of Object.keys(collect_custom_filter_dimensions())) {
+        apply_availability_to_checkbox_list(document.getElementById(`customFilter_${dimName}_List`), null);
+    }
+}
+
+// The refresh writes into the filter modal, which is only safe while the modal is open:
+// changing its contents during the closing animation competes with the fade out and can leave
+// the modal on screen. Filters can also be set programmatically while the modal is closed
+// (overview drill down, filter profiles), so the state is refreshed when it opens.
+let filterModalIsOpen = false;
+
+function set_filter_modal_open(isOpen) {
+    filterModalIsOpen = isOpen;
+    if (isOpen) { refresh_filter_option_availability(); }
+}
+
+// recompute the counts of all filter options and grey out the ones that match no runs
+function refresh_filter_option_availability() {
+    if (!filterModalIsOpen || !document.getElementById("filtersModal")) { return; }
+    if (!settings.show.filterAvailability && !settings.show.filterCounts) {
+        clear_filter_option_availability();
+        return;
+    }
+    const selections = normalize_filter_selections(capture_current_filters());
+    const availability = compute_filter_option_availability(get_filter_base_runs(), selections);
+    apply_availability_to_select(document.getElementById("runs"), availability.runs);
+    apply_availability_to_select(document.getElementById("metadata"), availability.metadata);
+    apply_availability_to_checkbox_list(document.getElementById("runTag"), availability.runTags);
+    apply_availability_to_checkbox_list(document.getElementById("projectVersionList"), availability.projectVersions);
+    for (const [dimName, counts] of Object.entries(availability.customFilters)) {
+        apply_availability_to_checkbox_list(document.getElementById(`customFilter_${dimName}_List`), counts);
+    }
+}
+
+// The filter modal fires a change event per checkbox, and the version search box checks a whole
+// set of them at once, so the refresh is collapsed into one call per frame.
+let filterAvailabilityFrame = null;
+
+function schedule_filter_option_availability_refresh() {
+    if (filterAvailabilityFrame !== null) { return; }
+    filterAvailabilityFrame = requestAnimationFrame(() => {
+        filterAvailabilityFrame = null;
+        refresh_filter_option_availability();
+    });
+}
+
+export {
+    compute_filter_option_availability,
+    normalize_filter_selections,
+    refresh_filter_option_availability,
+    schedule_filter_option_availability_refresh,
+    set_filter_modal_open,
+};
diff --git a/robotframework_dashboard/js/filter/controls.js b/robotframework_dashboard/js/filter/controls.js
new file mode 100644
index 00000000..2f8588ad
--- /dev/null
+++ b/robotframework_dashboard/js/filter/controls.js
@@ -0,0 +1,192 @@
+import { runs } from '../variables/data.js';
+import { overviewProjectNavFilter, selectedRunSetting, selectedTagSetting } from '../variables/globals.js';
+import { collect_custom_filter_dimensions } from './pipeline.js';
+import { setup_lowest_highest_dates } from './modal_options.js';
+import { clear_suite_path_filter } from './suite_path.js';
+import { schedule_filter_option_availability_refresh } from './availability.js';
+
+// show filter active indicator if checkBoxElement unchecked
+function setup_filter_active_indicator(checkBoxElement, filterActiveIndicatorId) {
+    checkBoxElement.addEventListener("change", () => {
+        update_filter_active_indicator(checkBoxElement.id, filterActiveIndicatorId);
+    });
+}
+
+function update_filter_active_indicator(allCheckBoxId, filterActiveIndicatorId) {
+    const filterActiveIndicator = document.getElementById(filterActiveIndicatorId);
+    const allCheckBox = document.getElementById(allCheckBoxId);
+    filterActiveIndicator.style.display = allCheckBox.checked ? "none" : "inline-block";
+}
+
+function unselect_checkboxes(checkBoxesToUnselect) {
+    for (const checkBox of checkBoxesToUnselect) {
+        checkBox.checked = false;
+    }
+}
+
+// for runTag/version filter popup and overview
+function setup_filter_checkbox_handler_listeners(
+    checkBoxContainerElement,
+    allCheckBox,
+    filterActiveIndicatorId = null,
+    additionalCheckBoxFunc = null //for overview version selector
+) {
+    const inputItemQueryString = "input.form-check-input:not([role='switch'])"; //not and/or switch
+    const nonAllCheckBoxes = Array
+        .from(
+            checkBoxContainerElement
+                .querySelectorAll(inputItemQueryString)
+        ).filter(checkBox => checkBox !== allCheckBox);
+    allCheckBox.addEventListener('change', () => {
+        if (allCheckBox.checked) {
+            unselect_checkboxes(nonAllCheckBoxes);
+            additionalCheckBoxFunc && additionalCheckBoxFunc();
+        } else {
+            allCheckBox.checked = true; //prevent unselecting All if no other checkboxes checked
+        }
+        filterActiveIndicatorId && update_filter_active_indicator(allCheckBox.id, filterActiveIndicatorId);
+    });
+    for (const checkBox of nonAllCheckBoxes) {
+        checkBox.addEventListener('change', () => {
+            if (checkBox.checked) {
+                allCheckBox.checked = false; //uncheck All if other checkbox checked
+                filterActiveIndicatorId && update_filter_active_indicator(allCheckBox.id, filterActiveIndicatorId);
+            } else if (!nonAllCheckBoxes.some(checkBox => checkBox.checked)) {
+                allCheckBox.checked = true;
+                filterActiveIndicatorId && update_filter_active_indicator(allCheckBox.id, filterActiveIndicatorId);
+            }
+            additionalCheckBoxFunc && additionalCheckBoxFunc();
+        });
+    }
+}
+
+// autoSelectMatches: while the search box has text, check every matching checkbox and
+// uncheck the rest (e.g. typing "1." selects every 1.x version in one go) instead of only
+// narrowing which rows are visible. Clearing the search box leaves the selection as-is.
+// An optional ".filter-search-clear" button next to the search box empties it in one step
+// (unlike deleting characters one by one, which re-runs the auto-select on every keystroke).
+function setup_filter_checkbox_subfilter(parentElementId, autoSelectMatches = false) {
+    const container = document.getElementById(parentElementId);
+    const searchBar = container.querySelector("input.form-control");
+    const clearButton = container.querySelector(".filter-search-clear");
+    const checkBoxRows = container.querySelectorAll("li.list-group-item-action");
+    const apply_search = () => {
+        const filterText = searchBar.value.toLowerCase();
+        if (clearButton) clearButton.hidden = !filterText;
+        checkBoxRows.forEach(row => {
+            const checkbox = row.querySelector("input.form-check-input");
+            const rowValue = checkbox.value.toLowerCase();
+            const matches = rowValue.includes(filterText);
+            row.classList.toggle("d-none", !matches);
+            if (autoSelectMatches && filterText && checkbox.value !== "All" && checkbox.checked !== matches) {
+                checkbox.checked = matches;
+                checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        });
+    };
+    searchBar.addEventListener("input", apply_search);
+    clearButton?.addEventListener("click", () => {
+        searchBar.value = "";
+        apply_search();
+        searchBar.focus();
+    });
+}
+
+function clear_all_filters() {
+    overviewProjectNavFilter.project = '';
+    overviewProjectNavFilter.version = '';
+    clear_project_filter();
+    clear_version_filter();
+    clear_suite_path_filter();
+    clear_custom_filters();
+    document.getElementById("amount").value = filteredAmountDefault;
+    document.getElementById("metadata").value = "All";
+    setup_lowest_highest_dates();
+    const runsIndicator = document.getElementById("filterRunSelectedIndicator");
+    if (runsIndicator) runsIndicator.style.display = "none";
+    const filtersActiveIndicator = document.getElementById("filtersActiveIndicator");
+    if (filtersActiveIndicator) filtersActiveIndicator.style.display = "none";
+    schedule_filter_option_availability_refresh();
+}
+
+function clear_custom_filters() {
+    const dimensions = collect_custom_filter_dimensions();
+    for (const dimName of Object.keys(dimensions)) {
+        const listEl = document.getElementById(`customFilter_${dimName}_List`);
+        if (!listEl) continue;
+        const filterInput = document.getElementById(`customFilter_${dimName}_FilterInput`);
+        if (filterInput) filterInput.value = "";
+        const inputs = listEl.querySelectorAll("input.form-check-input");
+        for (const input of inputs) {
+            input.checked = false;
+            input.closest("li")?.classList.remove("d-none");
+            if (input.value === "All") input.checked = true;
+        }
+        update_filter_active_indicator(`customFilter_${dimName}_List_All`, `filterCustomFilter_${dimName}_Indicator`);
+    }
+}
+
+function clear_version_filter() {
+    document.getElementById("projectVersionCheckBoxesFilter").value = "";
+    document.getElementById("projectVersionCheckBoxesFilterClear").hidden = true;
+    const versionElements = document.getElementById("projectVersionList").getElementsByTagName("input");
+    for (const input of versionElements) {
+        input.checked = false;
+        input.parentElement.classList.remove("d-none"); //show filtered rows
+        if (input.value == "All") input.checked = true;
+    }
+    update_filter_active_indicator("projectVersionInputItemAll", "filterVersionSelectedIndicator");
+}
+
+// the run/tag filter set by set_filter_show_current_project results in either a single
+// selected run name or a single checked run tag, checked here so a filter the user changed
+// themselves in the meantime is not mistaken for the one applied by the overview card
+function overview_navigation_filter_still_applied(project) {
+    if (project.startsWith("project_")) {
+        const tagElements = document.getElementById("runTag").getElementsByTagName("input");
+        const checkedTags = Array.from(tagElements).filter(input => input.checked);
+        return checkedTags.length === 1 && checkedTags[0].value === project;
+    }
+    return document.getElementById("runs").value === project;
+}
+
+// the overview page is meant to show every project, so the single project filter that was
+// applied by clicking a project card is dropped again when the user navigates back to the
+// overview (issue #348). Filters the user changed themselves are left alone.
+function clear_overview_project_navigation_filter() {
+    const { project, version } = overviewProjectNavFilter;
+    if (!project) { return; }
+    overviewProjectNavFilter.project = '';
+    overviewProjectNavFilter.version = '';
+    // the navigation writes these globals and the next filter pass copies them into the
+    // filter modal, so they are dropped here as well: when the pass has not run yet the
+    // DOM check below sees the still empty filter and would otherwise leave them pending
+    selectedRunSetting = '';
+    selectedTagSetting = '';
+    if (!overview_navigation_filter_still_applied(project)) { return; }
+    clear_project_filter();
+    // the version filter is only cleared when the same navigation applied it (version badge)
+    if (version) { clear_version_filter(); }
+    const runsIndicator = document.getElementById("filterRunSelectedIndicator");
+    if (runsIndicator) runsIndicator.style.display = "none";
+    // any other filter the user set stays active, so recompute the dot instead of hiding it
+    update_filters_button_indicator();
+}
+
+function set_filter_show_current_version(version) {
+    overviewProjectNavFilter.version = version;
+    const projectVersionList = document.getElementById("projectVersionList");
+    document.getElementById("projectVersionInputItemAll").checked = false;
+    projectVersionList.querySelector(`input[value="${version}"]`).checked = true;
+    update_filter_active_indicator("projectVersionInputItemAll", "filterVersionSelectedIndicator");
+}
+
+export {
+    clear_all_filters,
+    clear_overview_project_navigation_filter,
+    set_filter_show_current_version,
+    setup_filter_active_indicator,
+    setup_filter_checkbox_handler_listeners,
+    setup_filter_checkbox_subfilter,
+    update_filter_active_indicator,
+};
diff --git a/robotframework_dashboard/js/filter/modal_options.js b/robotframework_dashboard/js/filter/modal_options.js
new file mode 100644
index 00000000..ab639a34
--- /dev/null
+++ b/robotframework_dashboard/js/filter/modal_options.js
@@ -0,0 +1,284 @@
+import { settings } from '../variables/settings.js';
+import { runs } from '../variables/data.js';
+import { collect_custom_filter_dimensions } from './pipeline.js';
+import { setup_filter_active_indicator, setup_filter_checkbox_handler_listeners, setup_filter_checkbox_subfilter } from './controls.js';
+
+// function to setup run amount filter maximum
+function setup_run_amount_filter() {
+    document.getElementById("amount").setAttribute("max", runs.length)
+}
+
+// function that initializes the from date/time and to date/time selection boxes in the filters
+function setup_lowest_highest_dates() {
+    if (runs.length == 0) {
+        document.getElementById("fromDate").value = "1900-01-01";
+        document.getElementById("fromTime").value = "00:00";
+        document.getElementById("toDate").value = "9999-12-31";
+        document.getElementById("toTime").value = "23:59";
+        return;
+    }
+
+    if (settings.show.convertTimezone) {
+        // Convert to viewer's local timezone: parse the stored offset-aware timestamps as UTC
+        // instants, then display the local wall-clock equivalent in the pickers.
+        var dates = runs.map(run => new Date(run.run_start.replace(" ", "T")));
+        var lowest = new Date(Math.min.apply(null, dates));
+        var highest = new Date(Math.max.apply(null, dates));
+        var tzoffset = new Date().getTimezoneOffset() * 60000;
+        lowest = new Date(new Date(lowest - tzoffset).getTime() - 1 * 60000); // account for seconds
+        highest = new Date(new Date(highest - tzoffset).getTime() + 1 * 60000); // account for seconds
+        lowest.setTime(lowest.getTime() - 1 * 60 * 60 * 1000); // minus 1 hour for DST
+        highest.setTime(highest.getTime() + 1 * 60 * 60 * 1000); // plus 1 hour for DST
+        document.getElementById("fromDate").value = lowest.toISOString().split("T")[0];
+        document.getElementById("fromTime").value = lowest.toISOString().split("T")[1].substring(0, 5);
+        document.getElementById("toDate").value = highest.toISOString().split("T")[0];
+        document.getElementById("toTime").value = highest.toISOString().split("T")[1].substring(0, 5);
+    } else {
+        // No conversion: strip the timezone suffix and treat the stored wall-clock datetime
+        // as-is, so picker defaults match exactly what the user sees in the dashboard.
+        const wallClocks = runs.map(run => {
+            const rs = run.run_start;
+            const suffix = rs.slice(-6);
+            const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
+            return hasTz ? rs.slice(0, 19) : rs.slice(0, 19);
+        });
+        wallClocks.sort();
+        const lowestStr = wallClocks[0];
+        const highestStr = wallClocks[wallClocks.length - 1];
+        // Adjust by 1 minute and 1 hour (for seconds and DST) using plain date arithmetic
+        const adjust = (dateStr, deltaMs) => {
+            const d = new Date(dateStr.replace(" ", "T"));
+            d.setTime(d.getTime() + deltaMs);
+            const pad = n => String(n).padStart(2, "0");
+            const date = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+            const time = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+            return { date, time };
+        };
+        const low = adjust(lowestStr, -(1 * 60 + 60 * 60) * 1000); // -1min -1hr
+        const high = adjust(highestStr, (1 * 60 + 60 * 60) * 1000);  // +1min +1hr
+        document.getElementById("fromDate").value = low.date;
+        document.getElementById("fromTime").value = low.time;
+        document.getElementById("toDate").value = high.date;
+        document.getElementById("toTime").value = high.time;
+    }
+}
+
+// metadata strings never change after the data is decoded, so the parsed items are cached:
+// the option list is rebuilt on every refresh of the filter option counts
+const parsedMetadataCache = new Map();
+
+function parse_metadata_items(metadata) {
+    if (!metadata) return [];
+    const cached = parsedMetadataCache.get(metadata);
+    if (cached) return cached;
+    const parsed = JSON.parse(metadata.replace(/'/g, '"'));
+    parsedMetadataCache.set(metadata, parsed);
+    return parsed;
+}
+
+// the metadata key:value pairs found in the run data, sorted for display
+function get_metadata_options(runList = runs) {
+    const metadataItems = new Set();
+    for (const run of runList) {
+        parse_metadata_items(run.metadata).forEach(item => metadataItems.add(item));
+    }
+    return Array.from(metadataItems).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' }));
+}
+
+// function to setup metadata filter if there is metadata in the data
+function setup_metadata_filter() {
+    const metadataItems = get_metadata_options();
+    const metadataFilter = document.getElementById("metadataFilter");
+    if (metadataItems.length > 0) {
+        metadataFilter.hidden = false;
+        const optionsHtml = metadataItems
+            .map(label => `<option value="${label}">${label}</option>`)
+            .join("");
+        const metadataSelect = document.getElementById("metadata");
+        metadataSelect.innerHTML = `<option value="All">All</option>` + optionsHtml;
+    } else {
+        metadataFilter.hidden = true;
+    }
+}
+
+// function to update the available runs to select in the filters
+function setup_runs_in_select_filter_buttons() {
+    const runOptions = new Set();
+    runs.forEach(run => runOptions.add(run.name));
+    const optionsHtml = Array.from(runOptions)
+        .map(runName => `<option value="${runName}">${runName}</option>`)
+        .join("");
+    const runsSelect = document.getElementById("runs");
+    runsSelect.innerHTML = `<option value="All">All</option>` + optionsHtml;
+}
+
+// function to update the available runtags to select in the filters
+function setup_runtags_in_select_filter_buttons() {
+    const tags = new Set();
+    runs.forEach(run => {
+        run.tags.split(",").forEach(tag => {
+            if (tag) {
+                tags.add(tag);
+            }
+        });
+    });
+    const andOrTags = `
+        <li class="list-group-item d-flex small align-items-center">
+            <label class="form-check-label me-2" for="tagMode">Tag Mode:</label>
+            <select class="form-select form-select-sm" id="tagMode" style="width: auto;">
+                <option value="AND">AND</option>
+                <option value="OR">OR</option>
+                <option value="NOT">NOT</option>
+            </select>
+        </li>
+    `;
+    const listItemTemplate = (value) => `
+        <li class="list-group-item list-group-item-action d-flex small">
+            <input class="form-check-input me-1" type="checkbox" value="${value}" id="runTagCheckBox${value}">
+            <label class="form-check-label ms-2" for="runTagCheckBox${value}">${value}</label>
+        </li>
+    `;
+    const listItems = [listItemTemplate("All")].concat(
+        Array.from(tags).sort().map(tag => listItemTemplate(tag))
+    ).join("");
+    const tagsSelect = document.getElementById("runTag");
+    tagsSelect.innerHTML = andOrTags + listItems;
+    if (tags.size > 0) {
+        document.getElementById("runTagFilter").hidden = false
+    } else {
+        document.getElementById("runTagFilter").hidden = true
+    }
+    const allRunTagsCheckBox = document.getElementById("runTagCheckBoxAll");
+    allRunTagsCheckBox.checked = true;
+    const filterActiveIndicatorId = "filterRunTagSelectedIndicator";
+    setup_filter_active_indicator(allRunTagsCheckBox, filterActiveIndicatorId);
+    setup_filter_checkbox_subfilter("runTagCheckBoxes");
+    setup_filter_checkbox_handler_listeners(tagsSelect, allRunTagsCheckBox, filterActiveIndicatorId);
+}
+
+// create projectVersions checkboxes in filters
+function setup_project_versions_in_select_filter_buttons() {
+    const projectVersionList = document.getElementById("projectVersionList");
+    projectVersionList.innerHTML = '';
+    const projectVersionOptionsSet = new Set(
+        runs
+            .map(run => run.project_version)
+            .filter(ver => ver != null)
+    );
+    const projectVersionOptions = [...projectVersionOptionsSet].sort().reverse();
+    projectVersionOptions.unshift("None");
+    projectVersionOptions.unshift("All");
+    const prefix = "projectVersionInputItem";
+    const listItemTemplate = (prefix, value) => `
+        <li class="list-group-item list-group-item-action d-flex small">
+            <input class="form-check-input me-1" type="checkbox" value="${value}" id="${prefix}${value}">
+            <label class="form-check-label ms-2" for="${prefix}${value}">${value}</label>
+        </li>
+    `;
+    const projectVersionListHtml = projectVersionOptions
+        .map(projectVersion => listItemTemplate(prefix, projectVersion))
+        .join('');
+    projectVersionList.innerHTML = projectVersionListHtml;
+    const allVersionsCheckBox = document.getElementById(`${prefix}All`);
+    allVersionsCheckBox.checked = true;
+    const filterVersionSelectedIndicatorId = "filterVersionSelectedIndicator";
+    setup_filter_active_indicator(allVersionsCheckBox, filterVersionSelectedIndicatorId);
+    setup_filter_checkbox_subfilter("projectVersionCheckBoxes", true);
+    setup_filter_checkbox_handler_listeners(projectVersionList, allVersionsCheckBox, filterVersionSelectedIndicatorId);
+}
+
+// create custom filter dropdowns dynamically for each dimension found in run data
+function setup_custom_filters_in_select_filter_buttons() {
+    const container = document.getElementById("customFiltersList");
+    container.innerHTML = '';
+    const dimensions = collect_custom_filter_dimensions();
+    const dimNames = Object.keys(dimensions).sort();
+    for (const dimName of dimNames) {
+        const values = [...dimensions[dimName]].sort();
+        const allId = `customFilter_${dimName}_All`;
+        const listId = `customFilter_${dimName}_List`;
+        const checkBoxesId = `customFilter_${dimName}_CheckBoxes`;
+        const selectId = `selectCustomFilter_${dimName}`;
+        const indicatorId = `filterCustomFilter_${dimName}_Indicator`;
+        const profileCheckId = `profileCheckCustomFilter_${dimName}`;
+        const filterInputId = `customFilter_${dimName}_FilterInput`;
+        const modeId = `customFilter_${dimName}_Mode`;
+
+        const modeHtml = `
+            <li class="list-group-item d-flex small align-items-center">
+                <label class="form-check-label me-2" for="${modeId}">Mode:</label>
+                <select class="form-select form-select-sm" id="${modeId}" style="width: auto;">
+                    <option value="OR">OR</option>
+                    <option value="AND">AND</option>
+                    <option value="NOT">NOT</option>
+                </select>
+            </li>
+        `;
+
+        const itemsHtml = modeHtml + ["All", "None", ...values].map(v => `
+            <li class="list-group-item list-group-item-action d-flex small">
+                <input class="form-check-input me-1" type="checkbox" value="${v}" id="${listId}_${v}">
+                <label class="form-check-label ms-2" for="${listId}_${v}">${v}</label>
+            </li>
+        `).join('');
+
+        const rowHtml = `
+            <div class="list-group-item" id="customFilter_${dimName}">
+                <div class="d-flex justify-content-between align-items-start">
+                    <input class="form-check-input filter-profile-check me-2 mt-2" type="checkbox"
+                        id="${profileCheckId}" checked style="display: none;" />
+                    <span class="d-flex align-items-center information info-label">
+                        ${dimName}
+                        <span id="${indicatorId}" class="version-selected-dot ms-2 mt-1" style="display: none;"></span>
+                    </span>
+                    <div style="width: 200px;">
+                        <div class="selectBox" id="${selectId}">
+                            <select class="form-select form-select-sm">
+                                <option>Select Values</option>
+                            </select>
+                            <div class="overSelect"></div>
+                        </div>
+                        <div id="${checkBoxesId}" class="filterCheckBoxes mt-2" style="max-height: 50vh; overflow-y: auto;">
+                            <input id="${filterInputId}" class="form-control form-control-sm" type="text" placeholder="Filter...">
+                            <ul class="list-group" id="${listId}">
+                                ${itemsHtml}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        container.insertAdjacentHTML('beforeend', rowHtml);
+
+        // wire up checkbox behaviour
+        const listEl = document.getElementById(listId);
+        const allCheckBox = document.getElementById(`${listId}_All`);
+        allCheckBox.checked = true;
+        setup_filter_active_indicator(allCheckBox, indicatorId);
+        setup_filter_checkbox_subfilter(checkBoxesId);
+        setup_filter_checkbox_handler_listeners(listEl, allCheckBox, indicatorId);
+
+        // wire up click-outside behaviour for the dropdown
+        const selectEl = document.getElementById(selectId);
+        const checkBoxesEl = document.getElementById(checkBoxesId);
+        let showing = false;
+        function toggle() { showing = !showing; checkBoxesEl.style.display = showing ? "block" : "none"; }
+        selectEl.addEventListener("pointerdown", toggle);
+        document.body.addEventListener("pointerdown", function (event) {
+            if (showing && !checkBoxesEl.contains(event.target) && !selectEl.contains(event.target)) {
+                toggle();
+            }
+        });
+    }
+}
+
+export {
+    get_metadata_options,
+    setup_custom_filters_in_select_filter_buttons,
+    setup_lowest_highest_dates,
+    setup_metadata_filter,
+    setup_project_versions_in_select_filter_buttons,
+    setup_run_amount_filter,
+    setup_runs_in_select_filter_buttons,
+    setup_runtags_in_select_filter_buttons,
+};
diff --git a/robotframework_dashboard/js/filter/pipeline.js b/robotframework_dashboard/js/filter/pipeline.js
new file mode 100644
index 00000000..ab30e548
--- /dev/null
+++ b/robotframework_dashboard/js/filter/pipeline.js
@@ -0,0 +1,471 @@
+import { settings } from '../variables/settings.js';
+import { exceptions, filteredAmount, keywords, runs, suites, tests, unified_dashboard_title } from '../variables/data.js';
+import { get_run_projects, strip_tz_suffix } from '../common.js';
+import { filteredExceptions, filteredKeywords, filteredRuns, filteredSuites, filteredTests, selectedRunSetting, selectedTagSetting } from '../variables/globals.js';
+import { setup_keywords_in_select, setup_runs_in_compare_selects, setup_suites_in_suite_select, setup_suites_in_test_select, setup_tests_in_select, setup_testtags_in_select } from './section_selects.js';
+import { filter_runs_by_suite_path, filter_suite_path_data } from './suite_path.js';
+
+// Sort an array of run objects by wall-clock run_start (timezone offset stripped),
+// ensuring correct chronological order when timestamps span mixed timezone offsets.
+function sort_wall_clock(data) {
+    return [...data].sort((a, b) => {
+        const ak = strip_tz_suffix(a.run_start);
+        const bk = strip_tz_suffix(b.run_start);
+        return ak < bk ? -1 : ak > bk ? 1 : 0;
+    });
+}
+
+const dashboardPages = ["overview", "dashboard", "compare", "tables"];
+
+function get_active_page() {
+    return dashboardPages.find(page => settings.menu[page]) ?? "dashboard";
+}
+
+function get_hidden_custom_filters(page = get_active_page()) {
+    const key = `hiddenCustomFilters${page.charAt(0).toUpperCase() + page.slice(1)}`;
+    return settings.show[key] ?? [];
+}
+
+// the rows are built once, so hiding keeps their state for the pages where they are still shown
+function apply_custom_filter_visibility() {
+    const hiddenCustomFilters = get_hidden_custom_filters();
+    for (const dimName of Object.keys(collect_custom_filter_dimensions())) {
+        const rowEl = document.getElementById(`customFilter_${dimName}`);
+        if (rowEl) rowEl.hidden = hiddenCustomFilters.includes(dimName);
+    }
+}
+
+// function updates the data in the graphs whenever filters are updated
+function setup_filtered_data_and_filters() {
+    apply_custom_filter_visibility();
+    filteredRuns = remove_milliseconds(runs)
+    filteredSuites = remove_milliseconds(suites)
+    filteredTests = remove_milliseconds(tests)
+    filteredKeywords = remove_milliseconds(keywords)
+    filteredExceptions = remove_milliseconds(exceptions)
+    // convert timezones if enabled (must run before remove_timezones so the offset is still present)
+    filteredRuns = convert_timezone(filteredRuns);
+    filteredSuites = convert_timezone(filteredSuites);
+    filteredTests = convert_timezone(filteredTests);
+    filteredKeywords = convert_timezone(filteredKeywords);
+    filteredExceptions = convert_timezone(filteredExceptions);
+    // remove timezone display if disabled
+    filteredRuns = remove_timezones(filteredRuns);
+    filteredSuites = remove_timezones(filteredSuites);
+    filteredTests = remove_timezones(filteredTests);
+    filteredKeywords = remove_timezones(filteredKeywords);
+    filteredExceptions = remove_timezones(filteredExceptions);
+    // determine filteredRuns with all run-level filters (suite path + amount last)
+    filteredRuns = filter_runs(filteredRuns);
+    filteredRuns = filter_runtags(filteredRuns);
+    filteredRuns = filter_dates(filteredRuns);
+    filteredRuns = filter_metadata(filteredRuns);
+    filteredRuns = filter_project_versions(filteredRuns);
+    filteredRuns = filter_custom_filters(filteredRuns);
+    filteredRuns = filter_runs_by_suite_path(filteredRuns);
+    filteredRuns = filter_amount(filteredRuns);
+    // single pass: filter each dependent array against the final filteredRuns
+    filteredSuites = filter_data(filteredSuites);
+    filteredTests = filter_data(filteredTests);
+    filteredKeywords = filter_data(filteredKeywords);
+    filteredExceptions = filter_data(filteredExceptions);
+    // narrow suites/tests to the selected path prefix (runs already reduced above)
+    filter_suite_path_data();
+    // re-sort all filtered data by wall-clock run_start so mixed-timezone datasets
+    // appear in the correct chronological order on graphs (timestamps may have been
+    // converted or had their offsets stripped above, so re-sort here is the source of truth)
+    filteredRuns = sort_wall_clock(filteredRuns);
+    filteredSuites = sort_wall_clock(filteredSuites);
+    filteredTests = sort_wall_clock(filteredTests);
+    filteredKeywords = sort_wall_clock(filteredKeywords);
+    filteredExceptions = sort_wall_clock(filteredExceptions);
+    // set titles with amount of filtered items
+    const runAmount = Object.keys(filteredRuns).length
+    const message = `<h6>showing ${runAmount} of ${filteredAmount} runs</h6>`
+    document.getElementById("unifiedTitle").innerHTML
+        = `${(unified_dashboard_title && !unified_dashboard_title.includes("Robot Framework Dashboard -"))
+            ? unified_dashboard_title
+            : "Dashboard Statistics"} (${runAmount}) ${message}`;
+    document.getElementById("runTitle").innerHTML = `Run Statistics (${runAmount}) ${message}`;
+    document.getElementById("suiteTitle").innerHTML = `Suite Statistics (${Object.keys(filteredSuites).length}) ${message}`;
+    document.getElementById("testTitle").innerHTML = `Test Statistics (${Object.keys(filteredTests).length}) ${message}`;
+    document.getElementById("keywordTitle").innerHTML = `Keyword Statistics (${Object.keys(filteredKeywords).length}) ${message}`;
+    document.getElementById("compareTitle").innerHTML = `Compare Statistics ${message}`;
+    document.getElementById("tablesTitle").innerHTML = `Table Statistics (${runAmount}) ${message}`;
+    // update filters based on data
+    setup_runs_in_compare_selects();
+    setup_suites_in_suite_select();
+    setup_suites_in_test_select();
+    setup_testtags_in_select();
+    setup_tests_in_select();
+    setup_keywords_in_select();
+}
+
+// function to remove milliseconds if needed
+function remove_milliseconds(data) {
+    if (settings.show.milliseconds) { return data; }
+
+    return data.map(obj => {
+        const rs = obj.run_start;
+        const datetime = rs.slice(0, 19); // "YYYY-MM-DD HH:MM:SS"
+        // Check if the last 6 chars are a timezone offset (+HH:MM or -HH:MM)
+        const suffix = rs.slice(-6);
+        const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
+        return {
+            ...obj,
+            run_start: hasTz ? datetime + suffix : datetime
+        };
+    });
+}
+
+// function to remove timezone offset from run_start labels if disabled
+function remove_timezones(data) {
+    if (settings.show.timezones) { return data; }
+
+    return data.map(obj => {
+        const rs = obj.run_start;
+        // Check if the last 6 chars are a timezone offset (+HH:MM or -HH:MM)
+        const suffix = rs.slice(-6);
+        const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
+        if (!hasTz) { return obj; }
+        return {
+            ...obj,
+            run_start: rs.slice(0, -6)
+        };
+    });
+}
+
+// function to convert run_start timestamps from their stored timezone to the viewer's local timezone
+function convert_timezone(data) {
+    if (!settings.show.convertTimezone) { return data; }
+
+    return data.map(obj => {
+        const rs = obj.run_start;
+        // Check if run_start has a timezone offset (+HH:MM or -HH:MM) at the end
+        const suffix = rs.slice(-6);
+        const hasTz = /^[+-]\d{2}:\d{2}$/.test(suffix);
+        if (!hasTz) { return obj; }
+
+        // Parse the run_start with its timezone offset
+        const isoStr = rs.replace(" ", "T");
+        const date = new Date(isoStr);
+        if (isNaN(date.getTime())) { return obj; }
+
+        // Format to viewer's local timezone: YYYY-MM-DD HH:MM:SS+HH:MM
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        const seconds = String(date.getSeconds()).padStart(2, "0");
+        // Compute the viewer's local timezone offset
+        const tzOffset = -date.getTimezoneOffset();
+        const tzSign = tzOffset >= 0 ? "+" : "-";
+        const tzHours = String(Math.floor(Math.abs(tzOffset) / 60)).padStart(2, "0");
+        const tzMins = String(Math.abs(tzOffset) % 60).padStart(2, "0");
+        const localTz = `${tzSign}${tzHours}:${tzMins}`;
+        // Preserve the full sub-second fractional part from the original string (e.g. ".123456").
+        // Timezone offsets are always whole minutes, so the fractional seconds are unchanged by conversion.
+        // Using the original string avoids JavaScript Date's 3-digit millisecond precision limit.
+        const mainPart = rs.slice(0, -6); // strip the "+HH:MM" suffix
+        const subSecond = mainPart.length > 19 ? mainPart.slice(19) : ""; // ".ffffff" or ""
+        const localStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}${subSecond}${localTz}`;
+
+        return { ...obj, run_start: localStr };
+    });
+}
+
+// The apply_* functions below hold the actual filter logic and take their selection as an
+// argument instead of reading the DOM. The filter_* functions read the filter modal and call
+// them, and compute_filter_option_availability reuses them to determine which filter options
+// can still produce runs, so both paths always behave identically.
+function apply_run_name_filter(runs, selectedRun) {
+    if (!selectedRun || selectedRun === "All") { return runs; }
+    return Object.values(runs).filter(run => run.name === selectedRun);
+}
+
+// function to filter run data based on the runs (aka run name) filter
+function filter_runs(runs) {
+    if (selectedRunSetting != '') {
+        document.getElementById("runs").value = selectedRunSetting
+        selectedRunSetting = ''
+    }
+    return apply_run_name_filter(runs, document.getElementById("runs").value);
+}
+
+function apply_runtag_filter(runs, selectedTags, tagMode) {
+    if (selectedTags.includes("All")) {
+        return runs;
+    }
+    if (selectedTags.length === 0) {
+        return [];
+    }
+    return runs.filter(run => {
+        const runTags = run.tags.split(",");
+        if (tagMode === "OR") { // Use OR logic: the run must contain at least one selected tag
+            return selectedTags.some(selectedTag => runTags.includes(selectedTag));
+        }
+        if (tagMode === "NOT") { // Use NOT logic: the run must not contain any selected tag
+            return !selectedTags.some(selectedTag => runTags.includes(selectedTag));
+        }
+        // Default AND logic: the run must contain all selected tags
+        return selectedTags.every(selectedTag => runTags.includes(selectedTag));
+    });
+}
+
+// function to filter run data based on the run tags filter
+function filter_runtags(runs) {
+    const tagElements = document.getElementById("runTag").getElementsByTagName("input");
+    const tagModeEl = document.getElementById("tagMode");
+    const tagMode = tagModeEl ? tagModeEl.value : "AND";
+
+    if (selectedTagSetting != '') {
+        for (const input of tagElements) {
+            input.checked = false;
+            // checkbox ids are prefixed with "runTagCheckBox", the value holds the raw tag name
+            if (input.value === selectedTagSetting) {
+                input.checked = true;
+            }
+        }
+        if (tagModeEl) tagModeEl.value = "AND";
+        selectedTagSetting = ''
+    }
+
+    const selectedTags = Array.from(tagElements)
+        .filter(tagElement => tagElement.checked)
+        .map(tagElement => tagElement.id.replace(/^runTagCheckBox/, ""));
+    return apply_runtag_filter(runs, selectedTags, tagMode);
+}
+
+function apply_custom_filter_dimension(runs, dimName, checkedValues, mode) {
+    if (!checkedValues.size) { return []; }
+    if (checkedValues.has("All")) { return runs; }
+    return runs.filter(run => {
+        const effectiveValue = get_custom_filter_value(run, dimName);
+        if (mode === "NOT") { // Use NOT logic: the run must not have any of the selected values
+            return !checkedValues.has(effectiveValue);
+        }
+        // Default OR/AND logic: the run must have one of the selected values
+        return checkedValues.has(effectiveValue);
+    });
+}
+
+// filter run data based on active custom filters (one dropdown per dimension)
+function filter_custom_filters(filteredRuns) {
+    const dimensions = collect_custom_filter_dimensions();
+    const hiddenCustomFilters = get_hidden_custom_filters();
+    for (const dimName of Object.keys(dimensions)) {
+        // hidden on this page also means not applied on this page
+        if (hiddenCustomFilters.includes(dimName)) continue;
+        const listEl = document.getElementById(`customFilter_${dimName}_List`);
+        if (!listEl) continue;
+        const checkedValues = new Set(
+            Array.from(listEl.querySelectorAll("input:checked")).map(el => el.value)
+        );
+        const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
+        const mode = modeEl ? modeEl.value : "OR";
+        filteredRuns = apply_custom_filter_dimension(filteredRuns, dimName, checkedValues, mode);
+    }
+    return filteredRuns;
+}
+
+// custom_filters strings never change after the data is decoded, so the parsed result is
+// cached: the value of one dimension is read once per run per filter pass, and the option
+// availability computation walks every run once per dimension on top of that.
+const parsedCustomFiltersCache = new Map();
+
+function parse_custom_filters(cfStr) {
+    if (!cfStr) return {};
+    const cached = parsedCustomFiltersCache.get(cfStr);
+    if (cached) return cached;
+    const result = {};
+    cfStr.split(":").forEach(part => {
+        const eq = part.indexOf("=");
+        if (eq > 0) {
+            result[part.slice(0, eq).trim()] = part.slice(eq + 1).trim();
+        }
+    });
+    parsedCustomFiltersCache.set(cfStr, result);
+    return result;
+}
+
+// the value of one custom filter dimension for a run, "None" when the run has no such key
+function get_custom_filter_value(run, dimName) {
+    const value = parse_custom_filters(run.custom_filters)[dimName];
+    return value === undefined ? "None" : value;
+}
+
+function collect_custom_filter_dimensions() {
+    const dimensions = {};
+    for (const run of runs) {
+        if (!run.custom_filters) continue;
+        const parsed = parse_custom_filters(run.custom_filters);
+        for (const [key, value] of Object.entries(parsed)) {
+            if (!dimensions[key]) dimensions[key] = new Set();
+            dimensions[key].add(value);
+        }
+    }
+    return dimensions;
+}
+
+function apply_project_version_filter(runs, selectedProjectVersions) {
+    if (!selectedProjectVersions.size) return [];
+    if (selectedProjectVersions.has("All")) return runs;
+
+    return runs.filter(run => selectedProjectVersions.has(get_project_version_value(run)));
+}
+
+// the project version of a run, "None" when the run has no version label
+function get_project_version_value(run) {
+    return run.project_version === null || run.project_version === undefined ? "None" : run.project_version;
+}
+
+// filter run data based on the project version filter
+function filter_project_versions(runs) {
+    const selectedProjectVersions = new Set(
+        Array.from(
+            document.querySelectorAll('#projectVersionList input[type="checkbox"]:checked')
+        ).map(el => el.value)
+    );
+    return apply_project_version_filter(runs, selectedProjectVersions);
+}
+
+// the selected date range as {from, to} Date objects, or null when the range is incomplete
+function build_date_range(fromDate, fromTime, toDate, toTime) {
+    if (!fromDate || !fromTime || !toDate || !toTime) {
+        return null;
+    }
+    const from = new Date(`${fromDate} ${fromTime}:00`);
+    const to = new Date(`${toDate} ${toTime}:00`);
+    if (from > to) {
+        return null;
+    }
+    return { from, to };
+}
+
+function apply_date_filter(runs, fromDateTime, toDateTime) {
+    return runs.filter(run => {
+        // When not converting timezones, strip any timezone offset so the run_start is treated
+        // as a plain wall-clock time matching the date picker values (which are also wall-clock).
+        let rs = run.run_start.replace(" ", "T");
+        if (!settings.show.convertTimezone) {
+            rs = strip_tz_suffix(rs);
+        }
+        const runStart = new Date(rs);
+        return runStart >= fromDateTime && runStart <= toDateTime;
+    });
+}
+
+// function to filter the run data based on the selected date range
+function filter_dates(runs) {
+    const fromDate = document.getElementById("fromDate").value;
+    const fromTime = document.getElementById("fromTime").value;
+    const toDate = document.getElementById("toDate").value;
+    const toTime = document.getElementById("toTime").value;
+    if (!fromDate || !fromTime || !toDate || !toTime) {
+        return runs;
+    }
+    const dateRange = build_date_range(fromDate, fromTime, toDate, toTime);
+    if (!dateRange) { // build_date_range only rejects a complete range when from is later than to
+        alert("Filter error: The selected from date + time is later than your selected to date + time. Date filter has not been applied!");
+        return runs;
+    }
+    return apply_date_filter(runs, dateRange.from, dateRange.to);
+}
+
+// function to filter the amount of runs based on the filter
+// the amount is applied per project (every project_* run tag and the run name, see
+// get_run_projects) and not on the combined run list: a run is kept when it is one of
+// the last X runs of at least one of its projects, so a project with a lower run
+// frequency never disappears behind the runs of a busier project (issue #347)
+function filter_amount(filteredRuns) {
+    var selectedAmount = document.getElementById("amount").value;
+    // Handle weird selectedAmountValues:
+    if (selectedAmount == "") {
+        document.getElementById("amount").value = 10;
+        selectedAmount = document.getElementById("amount").value;
+    }
+    if (selectedAmount > runs.length) {
+        document.getElementById("amount").value = runs.length;
+        selectedAmount = document.getElementById("amount").value;
+    }
+    if (selectedAmount < 0) {
+        document.getElementById("amount").value = 0;
+        selectedAmount = document.getElementById("amount").value;
+    }
+    if (selectedAmount.includes(",")) {
+        document.getElementById("amount").value = selectedAmount.split(",")[0];
+        selectedAmount = document.getElementById("amount").value;
+    }
+    if (selectedAmount.includes(".")) {
+        document.getElementById("amount").value = selectedAmount.split(".")[0];
+        selectedAmount = document.getElementById("amount").value;
+    }
+    filteredAmount = filteredRuns.length
+    if (selectedAmount == 0) { return [] }
+    // collect the indexes of the last X runs of every project, the indexes keep the
+    // original (chronological) order of filteredRuns and de-duplicate runs that belong
+    // to more than one project (a run always has a name project next to its tags)
+    const runIndexesByProject = new Map();
+    filteredRuns.forEach((run, index) => {
+        for (const project of get_run_projects(run)) {
+            if (!runIndexesByProject.has(project)) runIndexesByProject.set(project, []);
+            runIndexesByProject.get(project).push(index);
+        }
+    });
+    const keptIndexes = new Set();
+    for (const indexes of runIndexesByProject.values()) {
+        for (const index of indexes.slice(- selectedAmount)) keptIndexes.add(index);
+    }
+    return filteredRuns.filter((_, index) => keptIndexes.has(index));
+}
+
+function apply_metadata_filter(filteredRuns, selectedMetadata) {
+    if (selectedMetadata == '' || selectedMetadata == 'All' || selectedMetadata == undefined) return filteredRuns;
+    return filteredRuns.filter(run => (run.metadata || "").includes(selectedMetadata));
+}
+
+// function to filter the runs based on the selected metadata key:value pair
+function filter_metadata(filteredRuns) {
+    return apply_metadata_filter(filteredRuns, document.getElementById("metadata").value);
+}
+
+// function to filter suites/tests/keywords based on the already filtered runs
+function filter_data(data) {
+    const validRunStarts = filteredRuns.map(v => v.run_start);
+    let filteredData = data.filter(v => validRunStarts.includes(v.run_start));
+    if (filteredData.length > 0 && "owner" in filteredData[0]) {
+        const libraries = settings.libraries || {};
+        filteredData = filteredData.filter(item => {
+            // if item has no owner, keep it
+            if (!item.owner) return true;
+            // if owner not in settings.libraries, assume enabled
+            if (!(item.owner in libraries)) return true;
+            // otherwise, include only if library is enabled
+            return libraries[item.owner];
+        });
+    }
+    return filteredData;
+}
+
+export {
+    apply_custom_filter_dimension,
+    apply_custom_filter_visibility,
+    apply_date_filter,
+    apply_metadata_filter,
+    apply_project_version_filter,
+    apply_run_name_filter,
+    apply_runtag_filter,
+    build_date_range,
+    collect_custom_filter_dimensions,
+    convert_timezone,
+    dashboardPages,
+    get_active_page,
+    get_custom_filter_value,
+    get_hidden_custom_filters,
+    get_project_version_value,
+    parse_custom_filters,
+    remove_milliseconds,
+    remove_timezones,
+    setup_filtered_data_and_filters,
+};
diff --git a/robotframework_dashboard/js/filter/profile_merge.js b/robotframework_dashboard/js/filter/profile_merge.js
new file mode 100644
index 00000000..4e7989c5
--- /dev/null
+++ b/robotframework_dashboard/js/filter/profile_merge.js
@@ -0,0 +1,131 @@
+import { runs } from '../variables/data.js';
+
+// Merge two profile objects according to the "largest horizon" rules:
+//   runTags / projectVersions : union of checked entries
+//   tagMode                   : most permissive wins (OR > AND > NOT)
+//   fromDate / fromTime       : take the earlier value  (widest start)
+//   toDate   / toTime         : take the later  value  (widest end)
+//   amount                   : take the larger value
+//   runs / metadata          : keep if identical, otherwise "All"
+function merge_two_profiles(profileA, profileB) {
+    const result = {};
+
+    if (profileA.runs !== undefined && profileB.runs !== undefined) {
+        result.runs = profileA.runs === profileB.runs ? profileA.runs : "All";
+    } else if (profileA.runs !== undefined) {
+        result.runs = profileA.runs;
+    } else if (profileB.runs !== undefined) {
+        result.runs = profileB.runs;
+    }
+
+    if (profileA.runTags !== undefined || profileB.runTags !== undefined) {
+        const tagsA = profileA.runTags || [];
+        const tagsB = profileB.runTags || [];
+        const merged = {};
+        tagsA.forEach(t => { merged[t.id] = t.checked; });
+        tagsB.forEach(t => { merged[t.id] = merged[t.id] || t.checked; });
+        result.runTags = Object.entries(merged).map(([id, checked]) => ({ id, checked }));
+    }
+
+    if (profileA.tagMode !== undefined || profileB.tagMode !== undefined ||
+        profileA.useOrTags !== undefined || profileB.useOrTags !== undefined) {
+        const permissiveness = { "OR": 2, "AND": 1, "NOT": 0 };
+        // Convert legacy useOrTags boolean to tagMode string if needed
+        const modeA = profileA.tagMode ?? (profileA.useOrTags ? "OR" : "AND");
+        const modeB = profileB.tagMode ?? (profileB.useOrTags ? "OR" : "AND");
+        result.tagMode = (permissiveness[modeA] ?? 1) >= (permissiveness[modeB] ?? 1) ? modeA : modeB;
+    }
+
+    if (profileA.projectVersions !== undefined || profileB.projectVersions !== undefined) {
+        const versA = profileA.projectVersions || [];
+        const versB = profileB.projectVersions || [];
+        const merged = {};
+        versA.forEach(v => { merged[v.value] = v.checked; });
+        versB.forEach(v => { merged[v.value] = merged[v.value] || v.checked; });
+        result.projectVersions = Object.entries(merged).map(([value, checked]) => ({ value, checked }));
+    }
+
+    if (profileA.fromDate !== undefined && profileB.fromDate !== undefined) {
+        const dtA = `${profileA.fromDate}T${profileA.fromTime || "00:00"}`;
+        const dtB = `${profileB.fromDate}T${profileB.fromTime || "00:00"}`;
+        const earlier = dtA <= dtB ? profileA : profileB;
+        result.fromDate = earlier.fromDate;
+        if (earlier.fromTime !== undefined) result.fromTime = earlier.fromTime;
+    } else if (profileA.fromDate !== undefined) {
+        result.fromDate = profileA.fromDate;
+        if (profileA.fromTime !== undefined) result.fromTime = profileA.fromTime;
+    } else if (profileB.fromDate !== undefined) {
+        result.fromDate = profileB.fromDate;
+        if (profileB.fromTime !== undefined) result.fromTime = profileB.fromTime;
+    }
+
+    if (profileA.toDate !== undefined && profileB.toDate !== undefined) {
+        const dtA = `${profileA.toDate}T${profileA.toTime || "23:59"}`;
+        const dtB = `${profileB.toDate}T${profileB.toTime || "23:59"}`;
+        const later = dtA >= dtB ? profileA : profileB;
+        result.toDate = later.toDate;
+        if (later.toTime !== undefined) result.toTime = later.toTime;
+    } else if (profileA.toDate !== undefined) {
+        result.toDate = profileA.toDate;
+        if (profileA.toTime !== undefined) result.toTime = profileA.toTime;
+    } else if (profileB.toDate !== undefined) {
+        result.toDate = profileB.toDate;
+        if (profileB.toTime !== undefined) result.toTime = profileB.toTime;
+    }
+
+    if (profileA.metadata !== undefined && profileB.metadata !== undefined) {
+        result.metadata = profileA.metadata === profileB.metadata ? profileA.metadata : "All";
+    } else if (profileA.metadata !== undefined) {
+        result.metadata = profileA.metadata;
+    } else if (profileB.metadata !== undefined) {
+        result.metadata = profileB.metadata;
+    }
+
+    if (profileA.amount !== undefined && profileB.amount !== undefined) {
+        result.amount = String(Math.max(Number(profileA.amount), Number(profileB.amount)));
+    } else if (profileA.amount !== undefined) {
+        result.amount = profileA.amount;
+    } else if (profileB.amount !== undefined) {
+        result.amount = profileB.amount;
+    }
+
+    if (profileA.suitePath !== undefined || profileB.suitePath !== undefined) {
+        const a = profileA.suitePath ?? "All";
+        const b = profileB.suitePath ?? "All";
+        result.suitePath = a === b ? a : "All";
+    }
+
+    if (profileA.customFilters !== undefined || profileB.customFilters !== undefined) {
+        const cfA = profileA.customFilters || {};
+        const cfB = profileB.customFilters || {};
+        const allDims = new Set([...Object.keys(cfA), ...Object.keys(cfB)]);
+        const mergedCF = {};
+        for (const dim of allDims) {
+            const vA = cfA[dim] || [];
+            const vB = cfB[dim] || [];
+            const merged = {};
+            vA.forEach(v => { merged[v.value] = v.checked; });
+            vB.forEach(v => { merged[v.value] = merged[v.value] || v.checked; });
+            mergedCF[dim] = Object.entries(merged).map(([value, checked]) => ({ value, checked }));
+        }
+        result.customFilters = mergedCF;
+    }
+
+    if (profileA.customFilterModes !== undefined || profileB.customFilterModes !== undefined) {
+        const modesA = profileA.customFilterModes || {};
+        const modesB = profileB.customFilterModes || {};
+        const allDims = new Set([...Object.keys(modesA), ...Object.keys(modesB)]);
+        const permissiveness = { "OR": 2, "AND": 1, "NOT": 0 };
+        const mergedModes = {};
+        for (const dim of allDims) {
+            const mA = modesA[dim] ?? "OR";
+            const mB = modesB[dim] ?? "OR";
+            mergedModes[dim] = (permissiveness[mA] ?? 2) >= (permissiveness[mB] ?? 2) ? mA : mB;
+        }
+        result.customFilterModes = mergedModes;
+    }
+
+    return result;
+}
+
+export { merge_two_profiles };
diff --git a/robotframework_dashboard/js/filter/profiles.js b/robotframework_dashboard/js/filter/profiles.js
new file mode 100644
index 00000000..237af1ed
--- /dev/null
+++ b/robotframework_dashboard/js/filter/profiles.js
@@ -0,0 +1,366 @@
+import { settings } from '../variables/settings.js';
+import { runs } from '../variables/data.js';
+import { set_local_storage_item } from '../localstorage.js';
+import { collect_custom_filter_dimensions } from './pipeline.js';
+import { setup_suite_path_navigator } from './suite_path.js';
+import { schedule_filter_option_availability_refresh } from './availability.js';
+import { update_filter_active_indicator } from './controls.js';
+
+// Track the currently active profile name (null if none applied)
+let activeProfileName = null;
+
+// Snapshot of the filter state at dashboard load time (used to determine checkbox defaults when creating a profile)
+let defaultFilters = null;
+
+function capture_default_filters() {
+    defaultFilters = capture_current_filters();
+}
+
+function filter_key_differs_from_default(key) {
+    if (!defaultFilters) return false;
+    const current = capture_current_filters();
+    if (key === 'runTags') {
+        const defaultTagMap = {};
+        (defaultFilters.runTags || []).forEach(t => { defaultTagMap[t.id] = t.checked; });
+        for (const tag of (current.runTags || [])) {
+            if (defaultTagMap[tag.id] !== tag.checked) return true;
+        }
+        return false;
+    }
+    if (key === 'projectVersions') {
+        const defaultVersionMap = {};
+        (defaultFilters.projectVersions || []).forEach(v => { defaultVersionMap[v.value] = v.checked; });
+        for (const ver of (current.projectVersions || [])) {
+            if (defaultVersionMap[ver.value] !== ver.checked) return true;
+        }
+        return false;
+    }
+    return String(current[key] ?? '') !== String(defaultFilters[key] ?? '');
+}
+
+function compute_profile_check_states() {
+    const checkKeyMap = {
+        profileCheckRuns: ['runs'],
+        profileCheckRunTags: ['runTags', 'tagMode'],
+        profileCheckVersions: ['projectVersions'],
+        profileCheckFromDate: ['fromDate'],
+        profileCheckFromTime: ['fromTime'],
+        profileCheckToDate: ['toDate'],
+        profileCheckToTime: ['toTime'],
+        profileCheckMetadata: ['metadata'],
+        profileCheckAmount: ['amount'],
+        profileCheckSuitePaths: ['suitePath'],
+    };
+    const result = {};
+    for (const [checkId, keys] of Object.entries(checkKeyMap)) {
+        result[checkId] = keys.some(key => filter_key_differs_from_default(key));
+    }
+    return result;
+}
+
+function capture_current_filters() {
+    const profile = {};
+    profile.runs = document.getElementById("runs").value;
+    const tagInputs = document.getElementById("runTag").querySelectorAll("input.form-check-input");
+    profile.runTags = Array.from(tagInputs).map(el => ({ id: el.id.replace(/^runTagCheckBox/, ""), checked: el.checked }));
+    profile.tagMode = document.getElementById("tagMode")?.value ?? "AND";
+    const versionInputs = document.getElementById("projectVersionList").querySelectorAll("input.form-check-input");
+    profile.projectVersions = Array.from(versionInputs).map(el => ({ value: el.value, checked: el.checked }));
+    profile.fromDate = document.getElementById("fromDate").value;
+    profile.fromTime = document.getElementById("fromTime").value;
+    profile.toDate = document.getElementById("toDate").value;
+    profile.toTime = document.getElementById("toTime").value;
+    profile.metadata = document.getElementById("metadata").value;
+    profile.amount = document.getElementById("amount").value;
+    profile.suitePath = document.getElementById("suitePathValue").value;
+    const dimensions = collect_custom_filter_dimensions();
+    if (Object.keys(dimensions).length > 0) {
+        profile.customFilters = {};
+        profile.customFilterModes = {};
+        for (const dimName of Object.keys(dimensions)) {
+            const listEl = document.getElementById(`customFilter_${dimName}_List`);
+            if (!listEl) continue;
+            const inputs = listEl.querySelectorAll("input.form-check-input");
+            profile.customFilters[dimName] = Array.from(inputs).map(el => ({ value: el.value, checked: el.checked }));
+            const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
+            profile.customFilterModes[dimName] = modeEl ? modeEl.value : "OR";
+        }
+    }
+    return profile;
+}
+
+function build_profile_from_checks() {
+    const full = capture_current_filters();
+    const profile = {};
+    const checkMap = {
+        profileCheckRuns: 'runs',
+        profileCheckRunTags: ['runTags', 'tagMode'],
+        profileCheckVersions: 'projectVersions',
+        profileCheckFromDate: 'fromDate',
+        profileCheckFromTime: 'fromTime',
+        profileCheckToDate: 'toDate',
+        profileCheckToTime: 'toTime',
+        profileCheckMetadata: 'metadata',
+        profileCheckAmount: 'amount',
+        profileCheckSuitePaths: 'suitePath',
+    };
+    for (const [checkId, keys] of Object.entries(checkMap)) {
+        const el = document.getElementById(checkId);
+        if (el && el.checked) {
+            if (Array.isArray(keys)) {
+                keys.forEach(k => profile[k] = full[k]);
+            } else {
+                profile[keys] = full[keys];
+            }
+        }
+    }
+    const dimensions = collect_custom_filter_dimensions();
+    const customFiltersResult = {};
+    for (const dimName of Object.keys(dimensions)) {
+        const checkEl = document.getElementById(`profileCheckCustomFilter_${dimName}`);
+        if (checkEl && checkEl.checked && full.customFilters && full.customFilters[dimName]) {
+            customFiltersResult[dimName] = full.customFilters[dimName];
+        }
+    }
+    if (Object.keys(customFiltersResult).length > 0) {
+        profile.customFilters = customFiltersResult;
+        const customFilterModesResult = {};
+        for (const dimName of Object.keys(customFiltersResult)) {
+            const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
+            customFilterModesResult[dimName] = modeEl ? modeEl.value : "OR";
+        }
+        profile.customFilterModes = customFilterModesResult;
+    }
+    return profile;
+}
+
+function profiles_match(saved, current) {
+    for (const key of Object.keys(saved)) {
+        const s = saved[key];
+        const c = current[key];
+        if (Array.isArray(s)) {
+            if (!Array.isArray(c) || s.length !== c.length) return false;
+            for (let i = 0; i < s.length; i++) {
+                if (JSON.stringify(s[i]) !== JSON.stringify(c[i])) return false;
+            }
+        } else {
+            if (String(s) !== String(c)) return false;
+        }
+    }
+    return true;
+}
+
+function find_matching_profile() {
+    const profiles = load_filter_profiles();
+    const current = capture_current_filters();
+    for (const [name, saved] of Object.entries(profiles)) {
+        if (profiles_match(saved, current)) return name;
+    }
+    return null;
+}
+
+function update_profile_select_display() {
+    const selectEl = document.getElementById("selectFilterProfile");
+    const selectInner = selectEl.querySelector("select");
+    const dot = document.getElementById("profileModifiedDot");
+    const updateBtn = document.getElementById("updateFilterProfile");
+
+    const matchingName = find_matching_profile();
+
+    if (matchingName) {
+        // Current filters exactly match a saved profile
+        activeProfileName = matchingName;
+        selectInner.options[0].textContent = matchingName;
+        dot.style.display = "none";
+        updateBtn.style.display = "none";
+    } else if (activeProfileName) {
+        // A profile was applied but filters have since changed
+        selectInner.options[0].textContent = activeProfileName;
+        dot.style.display = "";
+        updateBtn.style.display = "";
+    } else {
+        // No profile active
+        selectInner.options[0].textContent = "Apply Filter Profile";
+        dot.style.display = "none";
+        updateBtn.style.display = "none";
+    }
+}
+
+function clear_active_profile() {
+    activeProfileName = null;
+}
+
+function update_active_profile() {
+    if (!activeProfileName) return;
+    const profileData = capture_current_filters();
+    // Only save the keys that were in the original profile
+    const profiles = load_filter_profiles();
+    const original = profiles[activeProfileName];
+    if (!original) return;
+    const updated = {};
+    for (const key of Object.keys(original)) {
+        updated[key] = profileData[key];
+    }
+    save_filter_profile_to_storage(activeProfileName, updated);
+    update_profile_select_display();
+}
+
+function apply_filter_profile(profile, name) {
+    if (name) activeProfileName = name;
+    if (profile.runs !== undefined) {
+        document.getElementById("runs").value = profile.runs;
+    }
+
+    if (profile.runTags !== undefined) {
+        const tagInputs = document.getElementById("runTag").querySelectorAll("input.form-check-input");
+        const tagMap = {};
+        profile.runTags.forEach(t => tagMap[t.id] = t.checked);
+        tagInputs.forEach(el => {
+            tag=el.id.replace(/^runTagCheckBox/, "")
+            if (tagMap[tag] !== undefined) el.checked = tagMap[tag];
+        });
+        update_filter_active_indicator("runTagCheckBoxAll", "filterRunTagSelectedIndicator");
+    }
+    if (profile.tagMode !== undefined) {
+        const tagModeEl = document.getElementById("tagMode");
+        if (tagModeEl) tagModeEl.value = profile.tagMode;
+    } else if (profile.useOrTags !== undefined) {
+        // Backward compatibility: convert old useOrTags boolean to tagMode
+        const tagModeEl = document.getElementById("tagMode");
+        if (tagModeEl) tagModeEl.value = profile.useOrTags ? "OR" : "AND";
+    }
+    if (profile.projectVersions !== undefined) {
+        const versionInputs = document.getElementById("projectVersionList").querySelectorAll("input.form-check-input");
+        const versionMap = {};
+        profile.projectVersions.forEach(v => versionMap[v.value] = v.checked);
+        versionInputs.forEach(el => {
+            if (versionMap[el.value] !== undefined) el.checked = versionMap[el.value];
+        });
+        update_filter_active_indicator("projectVersionInputItemAll", "filterVersionSelectedIndicator");
+    }
+    if (profile.fromDate !== undefined) {
+        document.getElementById("fromDate").value = profile.fromDate;
+    }
+    if (profile.fromTime !== undefined) {
+        document.getElementById("fromTime").value = profile.fromTime;
+    }
+    if (profile.toDate !== undefined) {
+        document.getElementById("toDate").value = profile.toDate;
+    }
+    if (profile.toTime !== undefined) {
+        document.getElementById("toTime").value = profile.toTime;
+    }
+    if (profile.metadata !== undefined) {
+        document.getElementById("metadata").value = profile.metadata;
+    }
+    if (profile.amount !== undefined) {
+        document.getElementById("amount").value = profile.amount;
+    }
+    if (profile.suitePath !== undefined) {
+        setup_suite_path_navigator(profile.suitePath);
+    } else if (profile.suitePaths !== undefined) {
+        // Backward compatibility: old format stored an array of {value, checked}
+        const checked = (profile.suitePaths || []).filter(p => p.checked && p.value !== "All").map(p => p.value);
+        setup_suite_path_navigator(checked.length === 1 ? checked[0] : "All");
+    }
+    if (profile.customFilters !== undefined) {
+        for (const [dimName, items] of Object.entries(profile.customFilters)) {
+            const listEl = document.getElementById(`customFilter_${dimName}_List`);
+            if (!listEl) continue;
+            const valueMap = {};
+            items.forEach(v => { valueMap[v.value] = v.checked; });
+            listEl.querySelectorAll("input.form-check-input").forEach(el => {
+                if (valueMap[el.value] !== undefined) el.checked = valueMap[el.value];
+            });
+            update_filter_active_indicator(`customFilter_${dimName}_List_All`, `filterCustomFilter_${dimName}_Indicator`);
+        }
+    }
+    if (profile.customFilterModes !== undefined) {
+        for (const [dimName, mode] of Object.entries(profile.customFilterModes)) {
+            const modeEl = document.getElementById(`customFilter_${dimName}_Mode`);
+            if (modeEl) modeEl.value = mode;
+        }
+    }
+    const runsIndicator = document.getElementById("filterRunSelectedIndicator");
+    const runsVal = document.getElementById("runs")?.value;
+    if (runsIndicator)
+        runsIndicator.style.display =
+            runsVal && runsVal !== "All" ? "inline-block" : "none";
+    schedule_filter_option_availability_refresh();
+}
+
+function load_filter_profiles() {
+    return settings.filterProfiles || {};
+}
+
+function save_filter_profile_to_storage(name, profileData) {
+    const profiles = load_filter_profiles();
+    profiles[name] = profileData;
+    set_local_storage_item("filterProfiles", profiles);
+}
+
+function delete_filter_profile(name) {
+    const profiles = load_filter_profiles();
+    delete profiles[name];
+    set_local_storage_item("filterProfiles", profiles);
+}
+
+function populate_filter_profile_select() {
+    const list = document.getElementById("filterProfileList");
+    const profiles = load_filter_profiles();
+    list.innerHTML = '';
+    const names = Object.keys(profiles).sort();
+    if (names.length === 0) {
+        list.innerHTML = '<li class="list-group-item small text-muted">No profiles saved</li>';
+        return;
+    }
+    for (const name of names) {
+        const li = document.createElement("li");
+        li.className = "list-group-item list-group-item-action d-flex align-items-center small";
+        li.innerHTML = `<span class="filter-profile-apply flex-grow-1" data-profile="${name}" id="profile${name}" style="cursor: pointer;">${name}</span>`
+            + `<span class="filter-profile-delete ms-2" data-profile="${name}" id="profileCheck${name}" title="Delete profile" style="cursor: pointer;">&times;</span>`;
+        list.appendChild(li);
+    }
+}
+
+function enter_profile_edit_mode() {
+    document.getElementById("addFilterProfile").style.display = "none";
+    document.getElementById("cancelFilterProfile").style.display = "";
+    document.getElementById("filterProfileEditorInline").style.display = "";
+    document.getElementById("filterProfileEditorInline").classList.add("d-flex");
+    document.getElementById("filterProfileName").value = "";
+    document.querySelectorAll(".filter-profile-check").forEach(el => {
+        el.style.display = "";
+    });
+    // Set each checkbox based on whether the corresponding filter currently differs from the default state
+    const states = compute_profile_check_states();
+    for (const [id, checked] of Object.entries(states)) {
+        const el = document.getElementById(id);
+        if (el) el.checked = checked;
+    }
+}
+
+function exit_profile_edit_mode() {
+    document.getElementById("cancelFilterProfile").style.display = "none";
+    document.getElementById("addFilterProfile").style.display = "";
+    document.getElementById("filterProfileEditorInline").style.display = "none";
+    document.getElementById("filterProfileEditorInline").classList.remove("d-flex");
+    document.querySelectorAll(".filter-profile-check").forEach(el => {
+        el.style.display = "none";
+    });
+}
+
+export {
+    apply_filter_profile,
+    build_profile_from_checks,
+    capture_current_filters,
+    capture_default_filters,
+    clear_active_profile,
+    delete_filter_profile,
+    enter_profile_edit_mode,
+    exit_profile_edit_mode,
+    populate_filter_profile_select,
+    save_filter_profile_to_storage,
+    update_active_profile,
+    update_profile_select_display,
+};
diff --git a/robotframework_dashboard/js/filter/section_selects.js b/robotframework_dashboard/js/filter/section_selects.js
new file mode 100644
index 00000000..cb05e182
--- /dev/null
+++ b/robotframework_dashboard/js/filter/section_selects.js
@@ -0,0 +1,176 @@
+import { get_run_label, settings } from '../variables/settings.js';
+import { compareRunIds } from '../variables/graphs.js';
+import { set_local_storage_item } from '../localstorage.js';
+import { filteredKeywords, filteredRuns, filteredSuites, filteredTests } from '../variables/globals.js';
+
+// function to update the available runs in the selects
+function setup_runs_in_compare_selects() {
+    const selects = compareRunIds.map(id => document.getElementById(id));
+    const items = filteredRuns.map(run => get_run_label(run));
+    selects.forEach(select => select.innerHTML = "")
+    selects.forEach(select => {
+        select.options.add(new Option("None", "None"));
+        items.forEach(item => select.options.add(new Option(item, item)));
+    });
+    selects[0].selectedIndex = selects[0].options.length - 1;
+    selects[1].selectedIndex = selects[1].options.length - 2;
+}
+
+// function to update the available suites to select in the suite filters
+function setup_suites_in_suite_select() {
+    const suiteSelectSuites = document.getElementById("suiteSelectSuites");
+    const toggleSuitesSelectionInSuiteStats = document.getElementById("toggleSuitesSelectionInSuiteStats");
+    const suiteFolder = document.getElementById("suiteFolder").innerText;
+    suiteSelectSuites.innerHTML = "";
+    toggleSuitesSelectionInSuiteStats.innerHTML = "";
+    var suiteNames = new Set()
+    for (const suite of filteredSuites) {
+        if (suiteFolder != "All" && !(suite.full_name.startsWith(suiteFolder + ".") || suite.full_name == suiteFolder)) {
+            continue
+        }
+        if (settings.switch.suitePathsSuiteSection) {
+            suiteNames.add(suite.full_name);
+        } else {
+            suiteNames.add(suite.name);
+        }
+    }
+    suiteNames = [...suiteNames].sort()
+    suiteSelectSuites.options.add(new Option("All Suites Separate", "All Suites Separate"));
+    suiteSelectSuites.options.add(new Option("All Suites Combined", "All Suites Combined"));
+    toggleSuitesSelectionInSuiteStats.options.add(new Option("All Suites Separate", "All Suites Separate"));
+    toggleSuitesSelectionInSuiteStats.options.add(new Option("All Suites Combined", "All Suites Combined"));
+    suiteNames.forEach(suiteName => {
+        suiteSelectSuites.options.add(new Option(suiteName, suiteName));
+        toggleSuitesSelectionInSuiteStats.options.add(new Option(suiteName, suiteName));
+    });
+    const suiteStatsSelection = settings.show.suitesSelectionInSuiteStats;
+    if (suiteStatsSelection === 'All Suites Separate') {
+        suiteSelectSuites.selectedIndex = 0;
+        toggleSuitesSelectionInSuiteStats.selectedIndex = 0;
+    } else if (suiteStatsSelection === 'All Suites Combined') {
+        suiteSelectSuites.selectedIndex = 1;
+        toggleSuitesSelectionInSuiteStats.selectedIndex = 1;
+    } else {
+        let suiteIndex = suiteNames.indexOf(suiteStatsSelection);
+        // If not found or not set, default to first suite and update localStorage
+        if (suiteIndex < 0 && suiteNames.length > 0) {
+            suiteIndex = 0;
+            settings.show.suitesSelectionInSuiteStats = suiteNames[0];
+            set_local_storage_item('show.suitesSelectionInSuiteStats', suiteNames[0]);
+        }
+        const resolvedIndex = suiteIndex >= 0 ? suiteIndex + 2 : 2;
+        suiteSelectSuites.selectedIndex = resolvedIndex;
+        toggleSuitesSelectionInSuiteStats.selectedIndex = resolvedIndex;
+    }
+}
+
+// function to update the available suites to select in the test filters
+function setup_suites_in_test_select() {
+    const suiteSelectTests = document.getElementById("suiteSelectTests");
+    const suitesSelectionInTestStats = document.getElementById("toggleSuitesSelectionInTestStats");
+    suiteSelectTests.innerHTML = "";
+    suitesSelectionInTestStats.innerHTML = "";
+    const suiteNames = settings.switch.suitePathsTestSection
+        ? [...new Set(filteredSuites.map(suite => suite.full_name))].sort()
+        : [...new Set(filteredSuites.map(suite => suite.name))].sort();
+    suiteSelectTests.options.add(new Option("All", "All"));
+    suitesSelectionInTestStats.options.add(new Option("All", "All"));
+    suiteNames.forEach(suiteName => {
+        suiteSelectTests.options.add(new Option(suiteName, suiteName));
+        suitesSelectionInTestStats.options.add(new Option(suiteName, suiteName));
+    });
+    const testStatsSelection = settings.show.suitesSelectionInTestStats;
+    if (testStatsSelection === 'All') {
+        suiteSelectTests.selectedIndex = 0;
+        suitesSelectionInTestStats.selectedIndex = 0;
+    } else {
+        let suiteIndex = suiteNames.indexOf(testStatsSelection);
+        // If not found or not set, default to first suite and update localStorage
+        if (suiteIndex < 0 && suiteNames.length > 0) {
+            suiteIndex = 0;
+            settings.show.suitesSelectionInTestStats = suiteNames[0];
+            set_local_storage_item('show.suitesSelectionInTestStats', suiteNames[0]);
+        }
+        suiteSelectTests.selectedIndex = suiteIndex >= 0 ? suiteIndex + 1 : 0;
+        suitesSelectionInTestStats.selectedIndex = suiteIndex >= 0 ? suiteIndex + 1 : 0;
+    }
+}
+
+// function to update the available tests to select in the filters
+// applies to the test filter on the test statistics level
+function setup_tests_in_select() {
+    const suiteSelectTests = document.getElementById("suiteSelectTests").value;
+    const testTagsSelect = document.getElementById("testTagsSelect").value;
+    const testSelect = document.getElementById("testSelect");
+    testSelect.innerHTML = "";
+    const testNames = filteredTests.reduce((names, test) => {
+        const isInSuite = settings.switch.suitePathsTestSection
+            ? test.full_name.includes(`${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All"
+            : test.full_name.includes(`.${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All"
+        const hasTag = testTagsSelect === "All" || test.tags.includes(testTagsSelect);
+
+        if (isInSuite && hasTag && !names.includes(test.name)) {
+            names.push(test.name);
+        }
+
+        return names;
+    }, []);
+    testSelect.options.add(new Option("All", "All"));
+    testNames.sort().forEach(testName => testSelect.options.add(new Option(testName, testName)));
+}
+
+// function to update the available testtags to select in the filters
+// applies to the testtag filter on the test statistics level
+function setup_testtags_in_select() {
+    const suiteSelectTests = document.getElementById("suiteSelectTests").value;
+    const testTagsSelect = document.getElementById("testTagsSelect");
+    testTagsSelect.innerHTML = "";
+    const testTags = [...new Set(filteredTests.reduce((tags, test) => {
+        if (settings.switch.suitePathsTestSection) {
+            if (test.full_name.includes(`${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All") {
+                test.tags.replace(/\[|\]/g, "").split(",").forEach(tag => tags.push(tag.trim()));
+            }
+        } else {
+            if (test.full_name.includes(`.${suiteSelectTests}.${test.name}`) || suiteSelectTests === "All") {
+                test.tags.replace(/\[|\]/g, "").split(",").forEach(tag => tags.push(tag.trim()));
+            }
+        }
+        return tags;
+    }, []))].filter(Boolean);
+    testTagsSelect.options.add(new Option("All", "All"));
+    testTags.forEach(tag => testTagsSelect.options.add(new Option(tag, tag)));
+}
+
+// function to update the available keywords to select in the filters
+// applies to the keyword filter on the keyword statistics level
+function setup_keywords_in_select() {
+    const keywordSelect = document.getElementById("keywordSelect");
+    keywordSelect.innerHTML = "";
+    const useLibraryNames = settings?.switch?.useLibraryNames === true;
+
+    const keywordNames = [
+        ...new Set(
+            filteredKeywords.map(keyword =>
+                useLibraryNames && keyword.owner
+                    ? `${keyword.owner}.${keyword.name}`
+                    : keyword.name
+            )
+        )
+    ].sort();
+
+    keywordNames.forEach(keywordName => {
+        keywordSelect.options.add(new Option(keywordName, keywordName));
+    });
+    if (keywordNames.length > 0) {
+        keywordSelect.selectedIndex = keywordNames.length - 1;
+    }
+}
+
+export {
+    setup_keywords_in_select,
+    setup_runs_in_compare_selects,
+    setup_suites_in_suite_select,
+    setup_suites_in_test_select,
+    setup_tests_in_select,
+    setup_testtags_in_select,
+};
diff --git a/robotframework_dashboard/js/filter/suite_path.js b/robotframework_dashboard/js/filter/suite_path.js
new file mode 100644
index 00000000..bc51bc33
--- /dev/null
+++ b/robotframework_dashboard/js/filter/suite_path.js
@@ -0,0 +1,106 @@
+import { runs, suites } from '../variables/data.js';
+import { escape_html_for_merge, filteredSuites, filteredTests } from '../variables/globals.js';
+import { schedule_filter_option_availability_refresh } from './availability.js';
+
+function get_suite_path_children(parentPath) {
+    const isRoot = !parentPath || parentPath === "All";
+    const depth = isRoot ? 0 : parentPath.split(".").length;
+    const childPaths = new Set();
+    for (const suite of suites) {
+        const parts = suite.full_name.split(".");
+        if (isRoot) {
+            childPaths.add(parts[0]);
+        } else if (suite.full_name === parentPath || suite.full_name.startsWith(parentPath + ".")) {
+            if (parts.length > depth) {
+                childPaths.add(parts.slice(0, depth + 1).join("."));
+            }
+        }
+    }
+    return [...childPaths].sort();
+}
+
+function setup_suite_path_navigator(path) {
+    const normalized = (!path || path === "") ? "All" : path;
+    document.getElementById("suitePathValue").value = normalized;
+
+    // Active indicator — shown whenever a real path is selected
+    const indicator = document.getElementById("filterSuitePathSelectedIndicator");
+    if (indicator) indicator.style.display = normalized === "All" ? "none" : "";
+
+    const breadcrumbEl = document.getElementById("suitePathBreadcrumb");
+    if (normalized === "All") {
+        breadcrumbEl.innerHTML = `<span class="text-muted">All</span>`;
+    } else {
+        const parts = normalized.split(".");
+        const segments = [{ label: "All", path: "All" }];
+        parts.forEach((part, i) => segments.push({ label: part, path: parts.slice(0, i + 1).join(".") }));
+        breadcrumbEl.innerHTML = segments.map((seg, i) => {
+            const isLast = i === segments.length - 1;
+            const escaped = escape_html_for_merge(seg.label);
+            const escapedPath = escape_html_for_merge(seg.path);
+            if (isLast) return `<span class="fw-semibold">${escaped}</span>`;
+            return `<a class="suite-path-nav-link text-decoration-none" data-path="${escapedPath}" style="cursor: pointer;">${escaped}</a>`
+                + `<span class="text-muted mx-1">›</span>`;
+        }).join("");
+        breadcrumbEl.querySelectorAll(".suite-path-nav-link").forEach(el => {
+            el.addEventListener("click", () => setup_suite_path_navigator(el.dataset.path));
+        });
+    }
+
+    const childrenEl = document.getElementById("suitePathChildren");
+    const children = get_suite_path_children(normalized);
+    if (children.length === 0) {
+        childrenEl.innerHTML = '<span class="text-muted fst-italic">No sub-suites</span>';
+    } else {
+        childrenEl.innerHTML = children.map(child => {
+            const label = child.split(".").pop();
+            return `<button class="btn btn-outline-light btn-sm suite-path-child-btn" data-path="${escape_html_for_merge(child)}" style="margin-bottom: 3px;">${escape_html_for_merge(label)}</button>`;
+        }).join("");
+        childrenEl.querySelectorAll(".suite-path-child-btn").forEach(btn => {
+            btn.addEventListener("click", () => setup_suite_path_navigator(btn.dataset.path));
+        });
+    }
+
+    document.getElementById("suitePathFilter").hidden = suites.length === 0;
+    // the path lives in a hidden input, so no change event reaches the filter modal listener
+    schedule_filter_option_availability_refresh();
+}
+
+function apply_suite_path_run_filter(runs, selectedPath, suiteList) {
+    if (!selectedPath || selectedPath === "All") return runs;
+
+    const matches = (full_name) => full_name === selectedPath || full_name.startsWith(selectedPath + ".");
+    const validRunStarts = new Set(suiteList.filter(s => matches(s.full_name)).map(s => s.run_start));
+    return runs.filter(r => validRunStarts.has(r.run_start));
+}
+
+// Run-level part of the suite path filter: removes runs that have no suite matching the path.
+// Uses filteredSuites (all suites, already timezone/millisecond-transformed) so run_start
+// values line up with the transformed filteredRuns entries.
+function filter_runs_by_suite_path(runs) {
+    const selectedPath = document.getElementById("suitePathValue").value;
+    return apply_suite_path_run_filter(runs, selectedPath, filteredSuites);
+}
+
+// Data-level part of the suite path filter: narrows filteredSuites/filteredTests to the
+// selected path prefix. Called after filter_data so filteredRuns is already final.
+function filter_suite_path_data() {
+    const selectedPath = document.getElementById("suitePathValue").value;
+    if (!selectedPath || selectedPath === "All") return;
+
+    const matches = (full_name) => full_name === selectedPath || full_name.startsWith(selectedPath + ".");
+    filteredSuites = filteredSuites.filter(s => matches(s.full_name));
+    filteredTests = filteredTests.filter(t => matches(t.full_name));
+}
+
+function clear_suite_path_filter() {
+    setup_suite_path_navigator("All");
+}
+
+export {
+    apply_suite_path_run_filter,
+    clear_suite_path_filter,
+    filter_runs_by_suite_path,
+    filter_suite_path_data,
+    setup_suite_path_navigator,
+};
diff --git a/robotframework_dashboard/js/graph_creation/overview.js b/robotframework_dashboard/js/graph_creation/overview.js
index b9fea6e1..e25f957a 100644
--- a/robotframework_dashboard/js/graph_creation/overview.js
+++ b/robotframework_dashboard/js/graph_creation/overview.js
@@ -10,10 +10,8 @@ import {
     hide_loading_overlay,
 } from '../common.js';
 import { update_menu } from '../menu.js';
-import {
-    setup_collapsables,
-    attach_run_card_version_listener
-} from '../eventlisteners.js';
+import { setup_collapsables } from '../eventlisteners/collapsables.js';
+import { attach_run_card_version_listener } from '../eventlisteners/overview_listeners.js';
 import { clockSVG, arrowRight } from '../variables/svg.js';
 import {
     passedBackgroundColor,
@@ -39,12 +37,8 @@ import {
 } from '../variables/globals.js';
 import { runs, tests, use_logs } from '../variables/data.js';
 import { get_rerun_summary } from '../graph_data/helpers.js';
-import {
-    clear_all_filters,
-    update_filter_active_indicator,
-    parse_custom_filters,
-    get_hidden_custom_filters,
-} from '../filter.js';
+import { parse_custom_filters, get_hidden_custom_filters } from '../filter/pipeline.js';
+import { clear_all_filters, update_filter_active_indicator } from '../filter/controls.js';
 
 // rerun summary (rebot --merge attempt history) per run, keyed by the run_start without
 // milliseconds/timezone so it matches run_start values that were reformatted by the filters
diff --git a/robotframework_dashboard/js/graph_creation/suite.js b/robotframework_dashboard/js/graph_creation/suite.js
index 0249ae6c..00ce3fa7 100644
--- a/robotframework_dashboard/js/graph_creation/suite.js
+++ b/robotframework_dashboard/js/graph_creation/suite.js
@@ -4,7 +4,7 @@ import { get_duration_graph_data } from '../graph_data/duration.js';
 import { get_graph_config } from '../graph_data/graph_config.js';
 import { build_tooltip_meta, lookup_tooltip_meta, format_status } from '../graph_data/tooltip_helpers.js';
 import { exclude_from_suite_data } from '../graph_data/helpers.js';
-import { setup_suites_in_suite_select } from '../filter.js';
+import { setup_suites_in_suite_select } from '../filter/section_selects.js';
 import { format_duration } from '../common.js';
 import { dataLabelConfig } from '../variables/chartconfig.js';
 import { settings } from '../variables/settings.js';
diff --git a/robotframework_dashboard/js/layout.js b/robotframework_dashboard/js/layout.js
index 7395c6ee..3dc375c2 100644
--- a/robotframework_dashboard/js/layout.js
+++ b/robotframework_dashboard/js/layout.js
@@ -807,7 +807,7 @@ function setup_dashboard_section_layout_buttons() {
             update_history_buttons();
         }
     });
-    // Capture DOM snapshot when graph show/hide buttons are toggled (dispatched from eventlisteners.js)
+    // Capture DOM snapshot when graph show/hide buttons are toggled (dispatched from eventlisteners/graph_view_buttons.js)
     document.addEventListener("layout-user-action", () => capture_dom_snapshot_and_push());
     attach_section_order_buttons("dashboard");
 
diff --git a/robotframework_dashboard/js/main.js b/robotframework_dashboard/js/main.js
index 39abc82c..72f415cc 100644
--- a/robotframework_dashboard/js/main.js
+++ b/robotframework_dashboard/js/main.js
@@ -1,12 +1,10 @@
 import { setup_local_storage } from "./localstorage.js";
 import { setup_database_stats } from "./database.js";
 import { setup_dashboard_section_layout_buttons } from "./layout.js";
-import {
-    setup_sections_filters,
-    setup_collapsables,
-    setup_filter_modal,
-    setup_settings_modal,
-} from "./eventlisteners.js";
+import { setup_sections_filters } from "./eventlisteners/section_filters.js";
+import { setup_collapsables } from "./eventlisteners/collapsables.js";
+import { setup_filter_modal } from "./eventlisteners/filter_modal.js";
+import { setup_settings_modal } from "./eventlisteners/settings_modal.js";
 import { setup_menu, setup_navbar_overflow } from "./menu.js";
 
 // function that triggers all functions that should be executed when the dashboard is loaded first
diff --git a/robotframework_dashboard/js/menu.js b/robotframework_dashboard/js/menu.js
index f2d9725a..e2580830 100644
--- a/robotframework_dashboard/js/menu.js
+++ b/robotframework_dashboard/js/menu.js
@@ -1,11 +1,13 @@
-import { setup_filtered_data_and_filters, clear_overview_project_navigation_filter } from "./filter.js";
+import { setup_filtered_data_and_filters } from "./filter/pipeline.js";
+import { clear_overview_project_navigation_filter } from "./filter/controls.js";
 import { areGroupedProjectsPrepared, overviewNavStore, tablesNavStore } from "./variables/globals.js";
 import { space_to_camelcase, fade_in, fade_out } from "./common.js";
 import { set_local_storage_item, setup_overview_localstorage } from "./localstorage.js";
 import { create_dashboard_graphs } from "./graph_creation/all.js";
 import { settings } from "./variables/settings.js";
 import { setup_theme } from "./theme.js";
-import { setup_graph_view_buttons, setup_overview_order_filters } from "./eventlisteners.js";
+import { setup_graph_view_buttons } from "./eventlisteners/graph_view_buttons.js";
+import { setup_overview_order_filters } from "./eventlisteners/overview_listeners.js";
 import { setup_section_order, setup_graph_order, setup_overview_section_layout_buttons } from "./layout.js";
 import { setup_information_popups } from "./information.js";
 import { prepare_overview, update_overview_prefix_display } from "./graph_creation/overview.js";
diff --git a/robotframework_dashboard/server.py b/robotframework_dashboard/server.py
index 9e6a72b9..26dcddf4 100644
--- a/robotframework_dashboard/server.py
+++ b/robotframework_dashboard/server.py
@@ -1,298 +1,30 @@
 from fastapi_offline import FastAPIOffline
-from fastapi import Body, Depends, HTTPException, status, File, UploadFile, Form
+from fastapi import Depends, HTTPException, status
 from fastapi.responses import HTMLResponse, FileResponse
 from fastapi.security import HTTPBasic, HTTPBasicCredentials
-from pydantic import BaseModel, Field
 from uvicorn import run
 
-from os.path import join, abspath, dirname, exists
-from os import remove, mkdir, listdir
-from gzip import decompress
+from os.path import join, abspath, dirname
 from pathlib import Path
-from typing import List, Optional
+from typing import Optional
 from secrets import compare_digest
 
 from .robotdashboard import RobotDashboard
 from .dependencies import DependencyProcessor
-from .version import __version__
-
-response_message_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {
-                "success": "1",
-                "message": "SUCCESS: processed C:\\docs\\output.xml, see the browser console for more details!",
-                "console": """2. Processing output XML(s)
-  Processing output XML 'output.xml'
-  Processed output XML 'output' in 0.0 seconds
-======================================================================================
- 5. Creating dashboard HTML
-  created dashboard 'C:\\docs\\robot_dashboard.html' in 0.02 seconds""",
-            }
-        ]
-    }
-}
-get_output_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {
-                "run_start": "2024-10-14 22:32:59.580309",
-                "name": "RobotFramework-Dashboard",
-                "alias": "cool_run_alias",
-                "tags": "prod,tag1,nightly",
-            }
-        ]
-    }
-}
-add_output_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {
-                "output_path": "C:\\users\\docs\\output.xml",
-                "output_tags": ["tag1", "cool-tag2", "production_tag"],
-            },
-            {
-                "output_data": """<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<robot generator=\"Robot 7.2.2 (Python 3.12.9 on win32)\" generated=\"2025-02-19T17:25:58.443716\" rpa=\"false\" schemaversion=\"5\">\n<suite id=\"s1\" name=\"Scripts\" source=\"C:\\docs\">\n<suite id=\"s1-s1\" name=\"Google\" source=\"C:\\docs\\google.robot\">\n<test id=\"s1-s1-t1\" name=\"Test 01\" line=\"6\">... etc""",
-                "output_alias": "some_cool_alias",
-            },
-            {
-                "output_folder_path": "C:\\users\\docs\\prod-outputs",
-                "output_tags": ["production-run"],
-            },
-        ],
-        "openapi_examples": {
-            "single_output_path": {
-                "summary": "Add a single output.xml by path",
-                "description": "Provide an absolute path to a Robot Framework output.xml and optional tags to label the run.",
-                "value": {
-                    "output_path": "C:\\users\\docs\\output.xml",
-                    "output_tags": ["tag1", "cool-tag2", "production_tag"],
-                },
-            },
-            "raw_output_data": {
-                "summary": "Add output.xml via raw XML data",
-                "description": "Send the raw XML content of output.xml directly; optionally give an alias to name the run.",
-                "value": {
-                    "output_data": """<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<robot generator=\"Robot 7.2.2 (Python 3.12.9 on win32)\" generated=\"2025-02-19T17:25:58.443716\" rpa=\"false\" schemaversion=\"5\">\n<suite id=\"s1\" name=\"Scripts\" source=\"C:\\docs\">\n<suite id=\"s1-s1\" name=\"Google\" source=\"C:\\docs\\google.robot\">\n<test id=\"s1-s1-t1\" name=\"Test 01\" line=\"6\">... etc""",
-                    "output_alias": "some_cool_alias",
-                },
-            },
-            "folder_with_outputs": {
-                "summary": "Add all outputs from a folder",
-                "description": "Provide a folder path (recursively scanned) where output.xml files are located. Optional tags apply to all added runs.",
-                "value": {
-                    "output_folder_path": "C:\\users\\docs\\prod-outputs",
-                    "output_tags": ["production-run"],
-                },
-            },
-            "output_with_version": {
-                "summary": "Add an output with a version label",
-                "description": "Provide an output.xml path along with a version string to label the run accordingly. (e.g., software version)",
-                "value": {
-                    "output_path": "C:\\users\\docs\\output.xml",
-                    "output_tags": ["production-run"],
-                    "output_version": "v1.2",
-                },
-            },
-            "output_with_log_url": {
-                "summary": "Add an output with an externally hosted log URL",
-                "description": "Provide an output.xml path along with 'output_log_url' to store a link to a log already hosted elsewhere (e.g., a CI artifact or cloud storage URL) instead of a local log file. Use the '{run_alias}' placeholder when processing multiple outputs (e.g. via 'output_folder_path') so each run gets its own URL.",
-                "value": {
-                    "output_path": "C:\\users\\docs\\output.xml",
-                    "output_log_url": "https://ci.example.com/build42/log.html",
-                },
-            },
-        },
-    }
-}
-remove_outputs_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {"indexes": ["0", "-1", "5", "10"]},
-            {
-                "run_starts": [
-                    "2024-10-14 12:32:59.123456",
-                    "2024-10-14 22:32:59.580309",
-                ]
-            },
-            {
-                "aliases": ["alias1", "alias2"],
-                "indexes": ["0", "-1"],
-                "tags": ["tag1", "tag2", "tag3"],
-            },
-            {"limit": 10},
-            {"limit": 10, "tags": ["nightly"]},
-            {"age": "10d"},
-            {"age": "-10d"},
-            {"all": True},
-        ],
-        "openapi_examples": {
-            "by_indexes": {
-                "summary": "Remove by index or index range",
-                "description": "Use explicit indexes (including negative for last) or ranges like 'start:stop' to delete runs.",
-                "value": {"indexes": ["0", "-1", "5", "10"]},
-            },
-            "by_run_starts": {
-                "summary": "Remove by run_start timestamps",
-                "description": "Provide one or more run_start datetime strings that match rows in the database.",
-                "value": {
-                    "run_starts": [
-                        "2024-10-14 12:32:59.123456",
-                        "2024-10-14 22:32:59.580309",
-                    ]
-                },
-            },
-            "by_aliases_and_tags": {
-                "summary": "Remove by aliases and tags",
-                "description": "Delete runs using the stored alias names and/or test tags.",
-                "value": {
-                    "aliases": ["alias1", "alias2"],
-                    "indexes": ["0", "-1"],
-                    "tags": ["tag1", "tag2", "tag3"],
-                },
-            },
-            "age": {
-                "summary": "Remove runs based on age threshold",
-                "description": "Remove runs older than a threshold (e.g., '10d') or younger than a threshold (e.g., '-10d'). Supports (y)ear/(d)ay/(h)our/(m)inute/(s)econd.",
-                "value": {"age": "10d"},
-            },
-            "limit": {
-                "summary": "Remove all but the N most recent runs per project",
-                "description": "Keep only the specified number of most recent runs per project, deleting the rest. A project is a run name and every 'project_' run tag, so a project that runs less often keeps its history.",
-                "value": {"limit": 10},
-            },
-            "limit_by_tag": {
-                "summary": "Keep N most recent runs per project within a tag",
-                "description": "When 'tags' is combined with 'limit', the limit is scoped to runs matching any given tag: the N newest matching runs per project are kept, older matching runs are removed, and runs without those tags are left untouched.",
-                "value": {"limit": 10, "tags": ["nightly"]},
-            },
-            "all": {
-                "summary": "Remove all outputs",
-                "description": "Delete all runs currently stored in the database. This is irreversible.",
-                "value": {"all": True},
-            },
-        },
-    }
-}
-get_log_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {
-                "log_name": "log-20250219-172527.html",
-            }
-        ]
-    }
-}
-add_log_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {
-                "log_name": "log-20250219-172527.html",
-                "log_data": '<!DOCTYPE html><html lang="en"><head>...etc',
-            }
-        ],
-        "openapi_examples": {
-            "single_log": {
-                "summary": "Add a single log HTML",
-                "description": "Provide the log file name (matching the output.xml alias) and the HTML content to store.",
-                "value": {
-                    "log_name": "log-20250219-172527.html",
-                    "log_data": '<!DOCTYPE html><html lang="en"><head>...etc',
-                },
-            }
-        },
-    }
-}
-remove_log_model_config = {
-    "json_schema_extra": {
-        "examples": [
-            {"log_name": "log-20250219-172527.html"},
-            {"all": True},
-        ],
-        "openapi_examples": {
-            "single_log": {
-                "summary": "Remove a single log",
-                "description": "Provide the log file name to delete it from the server log folder.",
-                "value": {"log_name": "log-20250219-172527.html"},
-            },
-            "all": {
-                "summary": "Remove all logs",
-                "description": "Delete all log files from the server log folder. This is irreversible.",
-                "value": {"all": True},
-            },
-        },
-    }
-}
-
-
-class ResponseMessage(BaseModel):
-    """The response message model for Adding or Removing runs from the database"""
-
-    success: str
-    message: str
-    console: str
-    model_config = response_message_model_config
-
-
-class GetOutput(BaseModel):
-    """The response model that is returned when getting outputs"""
-
-    run_start: str
-    name: str
-    alias: str
-    tags: str
-    custom_filters: str
-    model_config = get_output_model_config
-
-
-class AddOutput(BaseModel):
-    """The model that has to be provided when trying to add outputs to the database"""
-
-    output_path: Optional[str] = None
-    output_data: Optional[str] = None
-    output_folder_path: Optional[str] = None
-    output_tags: Optional[List[str]] = None
-    output_alias: Optional[str] = None
-    output_version: Optional[str] = None
-    output_custom_filters: Optional[str] = None
-    output_log_url: Optional[str] = None
-    model_config = add_output_model_config
-
-
-class RemoveOutputs(BaseModel):
-    """The model that has to be provided when trying to delete outputs from the database"""
-
-    run_starts: Optional[List[str]] = None
-    indexes: Optional[List[str]] = None
-    aliases: Optional[List[str]] = None
-    tags: Optional[List[str]] = None
-    all: Optional[bool] = False
-    limit: Optional[int] = Field(default=None, ge=1)
-    age: Optional[str] = None
-    model_config = remove_outputs_model_config
-
-
-class GetLog(BaseModel):
-    """The response model that is returned when getting logs"""
-
-    log_name: str
-    model_config = get_log_model_config
-
-
-class AddLog(BaseModel):
-    """The model to add log files to the server"""
-
-    log_data: str
-    log_name: str
-    model_config = add_log_model_config
-
 
-class RemoveLog(BaseModel):
-    """The model to remove log files from the server"""
-
-    log_name: Optional[str] = None
-    all: Optional[bool] = False
-    model_config = remove_log_model_config
+# re-exported so 'from robotframework_dashboard.server import ResponseMessage' keeps working
+from .server_models import (
+    AddLog,
+    AddOutput,
+    GetLog,
+    GetOutput,
+    RemoveLog,
+    RemoveOutputs,
+    ResponseMessage,
+)
+from .server_routes_logs import register_log_routes
+from .server_routes_outputs import register_output_routes
+from .version import __version__
 
 
 class ApiServer:
@@ -355,31 +87,32 @@ def _get_admin_page(self):
         admin_html = admin_html.replace('"placeholder_version"', __version__)
         return admin_html
 
+    def _authenticate(self, credentials: Optional[HTTPBasicCredentials]):
+        if not self.server_user or not self.server_pass:
+            return "anonymous"
+        if credentials is None:
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Not authenticated",
+                headers={"WWW-Authenticate": "Basic"},
+            )
+        correct_username = compare_digest(credentials.username, self.server_user)
+        correct_password = compare_digest(credentials.password, self.server_pass)
+        if not (correct_username and correct_password):
+            raise HTTPException(
+                status_code=status.HTTP_401_UNAUTHORIZED,
+                detail="Invalid authentication credentials",
+                headers={"WWW-Authenticate": "Basic"},
+            )
+        return credentials.username
+
     def _setup_routes(self):
-        def model_examples(model_cls: BaseModel):
-            cfg = getattr(model_cls, "model_config", None)
-            extra = cfg.get("json_schema_extra")
-            openapi_examples = extra.get("openapi_examples")
-            return openapi_examples
+        """Register the HTML serving routes, then hand the output and log routes to their own modules"""
 
-        def authenticate(credentials: Optional[HTTPBasicCredentials] = Depends(self.security)):
-            if not self.server_user or not self.server_pass:
-                return "anonymous"
-            if credentials is None:
-                raise HTTPException(
-                    status_code=status.HTTP_401_UNAUTHORIZED,
-                    detail="Not authenticated",
-                    headers={"WWW-Authenticate": "Basic"},
-                )
-            correct_username = compare_digest(credentials.username, self.server_user)
-            correct_password = compare_digest(credentials.password, self.server_pass)
-            if not (correct_username and correct_password):
-                raise HTTPException(
-                    status_code=status.HTTP_401_UNAUTHORIZED,
-                    detail="Invalid authentication credentials",
-                    headers={"WWW-Authenticate": "Basic"},
-                )
-            return credentials.username
+        def authenticate(
+            credentials: Optional[HTTPBasicCredentials] = Depends(self.security),
+        ):
+            return self._authenticate(credentials)
 
         if not self.server_user or not self.server_pass:
 
@@ -420,6 +153,7 @@ async def refresh_dashboard(username: str = Depends(authenticate)) -> ResponseMe
                 response = {"success": "0", "message": message, "console": console}
             return response
 
+        # stays next to the catch-all route below: it is the only place latest_log_dir is set
         @self.app.get("/log", response_class=HTMLResponse, include_in_schema=False)
         async def log_page(path: str):
             """Serve log HTML and store the log directory for resources."""
@@ -440,439 +174,8 @@ async def log_page(path: str):
                 """
             return HTMLResponse(content=log_html)
 
-        @self.app.get("/get-outputs")
-        async def get_outputs() -> List[GetOutput]:
-            """Get a list of dictionaries containting the runs (run_starts) and names of the runs
-            currently available in the database"""
-            runs, names, aliases, tags, custom_filters = self.robotdashboard.get_runs()
-            outputs = []
-            for run, name, alias, tag, cf in zip(runs, names, aliases, tags, custom_filters):
-                outputs.append(
-                    {
-                        "run_start": str(run),
-                        "name": str(name),
-                        "alias": str(alias),
-                        "tags": str(tag),
-                        "custom_filters": str(cf),
-                    }
-                )
-            return outputs
-
-        @self.app.post("/add-outputs")
-        async def add_output_to_database(
-            add_output: AddOutput = Body(
-                ...,
-                openapi_examples=model_examples(AddOutput),
-            ),
-            username: str = Depends(authenticate),
-        ) -> ResponseMessage:
-            """Add output to database endpoint function
-            The following combinations of parameters are valid:
-            1. output_path: str valid path to output.xml (+ optional 'output_tags: List[str]' or optional 'output_version: str' version)
-            2. output_data: str output.xml content (+ optional 'output_tags: List[str]', optional 'output_alias: str` or optional 'output_version: str' version)
-            3. output_folder_path: str valid path to folder (subfolders are also searched) that contain *output*.xml (+ optional 'output_tags: List[str]' or optional 'output_version: str' version)
-            'output_log_url' is optional on all 3 combinations and mirrors the CLI '--logurl' flag: it stores a link to an
-            externally hosted log instead of the local output path. Use the '{run_alias}' placeholder when the request may
-            process more than one output (e.g. via 'output_folder_path'), otherwise every run would be stored with the
-            same URL.
-            """
-            input = "provided input, overwritten on runtime"
-            console = "no console output"
-            try:
-                if (
-                    (
-                        add_output.output_path != None
-                        and add_output.output_folder_path != None
-                    )
-                    or (
-                        add_output.output_path != None
-                        and add_output.output_data != None
-                    )
-                    or (
-                        add_output.output_data != None
-                        and add_output.output_folder_path != None
-                    )
-                ):
-                    input = "your input"
-                    raise Exception(
-                        "Please only provide output_path, output_data or output_folder_path, not more than 1 type at the same time!"
-                    )
-                if (
-                    add_output.output_log_url
-                    and "{run_alias}" not in add_output.output_log_url
-                    and add_output.output_folder_path != None
-                ):
-                    input = "your input"
-                    raise Exception(
-                        "'output_log_url' was provided without a '{run_alias}' placeholder while processing an output_folder_path "
-                        "(potentially multiple outputs). Either add '{run_alias}' to the URL template or provide a single output "
-                        "via 'output_path' or 'output_data'."
-                    )
-                output_tags = []
-                if add_output.output_tags:
-                    output_tags = add_output.output_tags
-                if add_output.output_version:
-                    self.robotdashboard.project_version = add_output.output_version
-                else:
-                    self.robotdashboard.project_version = None
-                self.robotdashboard.log_url = add_output.output_log_url or None
-                self.robotdashboard.custom_filters = add_output.output_custom_filters
-                if add_output.output_path != None:
-                    input = add_output.output_path
-                    outputs = [[add_output.output_path, output_tags]]
-                    console = self.robotdashboard.process_outputs(
-                        output_file_info_list=outputs
-                    )
-                if add_output.output_folder_path != None:
-                    input = add_output.output_folder_path
-                    output_folder_paths = [
-                        [
-                            add_output.output_folder_path,
-                            output_tags,
-                        ]
-                    ]
-                    console = self.robotdashboard.process_outputs(
-                        output_folder_configs=output_folder_paths
-                    )
-                if add_output.output_data != None:
-                    input = ""
-                    if add_output.output_alias != None:
-                        input = f"{add_output.output_alias}.xml"
-                        file = open(input, "w", encoding="utf-8")
-                        output_path = abspath(input)
-                    else:
-                        input = "temp_output.xml"
-                        file = open(input, "w", encoding="utf-8")
-                        output_path = abspath(input)
-                    file.write(add_output.output_data)
-                    file.close()
-                    outputs = [[output_path, output_tags]]
-                    console = self.robotdashboard.process_outputs(
-                        output_file_info_list=outputs
-                    )
-                    remove(input)
-                if not self.no_autoupdate:
-                    console += self.robotdashboard.create_dashboard()
-                response = {
-                    "success": "1",
-                    "message": f"SUCCESS: processed {input}, see the browser console for more details!",
-                    "console": console,
-                }
-            except Exception as error:
-                message = f"Something went wrong while processing {input}, ERROR: {error}, see the browser console for more details!"
-                response = {"success": "0", "message": message, "console": console}
-            return response
-
-        @self.app.post("/add-output-file")
-        async def add_output_file(
-            file: UploadFile = File(...),
-            tags: str = Form(default=""),
-            version: str = Form(default=""),
-            custom_filters: str = Form(default=""),
-            log_url: str = Form(default=""),
-            username: str = Depends(authenticate),
-        ) -> ResponseMessage:
-            """Add output file to database endpoint function
-            The tags parameter should be provided as colon-separated values (e.g., 'tag1:tag2:tag3')
-            The version parameter is an optional string to label the run (e.g., software version)
-            The log_url parameter is optional and mirrors the CLI '--logurl' flag: it stores a link to an externally
-            hosted log instead of the local output path. Since this endpoint always processes a single output file,
-            the '{run_alias}' placeholder is optional here.
-            """
-            console = "no console output"
-            try:
-                file_bytes = await file.read()
-                # Accept gzipped uploads to reduce bandwidth; decompress before processing
-                if file.filename.endswith(".gzip") or file.filename.endswith(".gz"):
-                    output_filename = Path(file.filename).with_suffix("")
-                    if output_filename.suffix == "":
-                        output_filename = output_filename.with_suffix(".xml")
-                    output_path = abspath(output_filename)
-                    with open(output_path, "wb") as buffer:
-                        buffer.write(decompress(file_bytes))
-                else:
-                    output_path = abspath(file.filename)
-                    with open(output_path, "wb") as buffer:
-                        buffer.write(file_bytes)
-
-                output_tags = []
-                if tags:
-                    output_tags = tags.split(":")
-
-                if version:
-                    self.robotdashboard.project_version = version
-                else:
-                    self.robotdashboard.project_version = None
-
-                self.robotdashboard.custom_filters = custom_filters
-                self.robotdashboard.log_url = log_url or None
-
-                outputs = [[output_path, output_tags]]
-                console = self.robotdashboard.process_outputs(
-                    output_file_info_list=outputs
-                )
-                remove(output_path)
-
-                if not self.no_autoupdate:
-                    console += self.robotdashboard.create_dashboard()
-                response = {
-                    "success": "1",
-                    "message": f"SUCCESS: processed {file.filename}, see the browser console for more details!",
-                    "console": console,
-                }
-            except Exception as error:
-                message = f"Something went wrong while processing {file.filename}, ERROR: {error}, see the browser console for more details!"
-                response = {"success": "0", "message": message, "console": console}
-            return response
-
-        @self.app.delete("/remove-outputs")
-        async def remove_outputs_from_database(
-            remove_output: RemoveOutputs = Body(
-                ...,
-                openapi_examples=model_examples(RemoveOutputs),
-            ),
-            username: str = Depends(authenticate),
-        ) -> ResponseMessage:
-            """Remove outputs from database endpoint function
-            Can be either indexes or run_starts that are known in the database
-            """
-            console = "no console output"
-            try:
-                # Because the argparser makes use of the format: [[outputtoremove1], [outputtoremove2]]
-                # We have to create a list of lists with 1 item to match the handling of the API
-                remove_runs = []
-                if remove_output.all:
-                    runs, _, _, _, _ = self.robotdashboard.get_runs()
-                    if len(runs) > 0:
-                        remove_runs = [f"index=0:{len(runs) - 1}"]
-                else:
-                    if remove_output.run_starts != None:
-                        for run in remove_output.run_starts:
-                            remove_runs.append(f"run_start={run}")
-                    if remove_output.indexes != None:
-                        for run in remove_output.indexes:
-                            remove_runs.append(f"index={run}")
-                    if remove_output.aliases != None:
-                        for run in remove_output.aliases:
-                            remove_runs.append(f"alias={run}")
-                    # When tags are combined with limit, scope the limit to the
-                    # tagged runs (keep/remove only matching runs, leave others
-                    # alone) instead of removing all tagged runs outright.
-                    scope_tags = remove_output.tags != None and remove_output.limit != None
-                    tag_suffix = (
-                        "".join(f";tag={tag}" for tag in remove_output.tags)
-                        if scope_tags
-                        else ""
-                    )
-                    if remove_output.tags != None and not scope_tags:
-                        for run in remove_output.tags:
-                            remove_runs.append(f"tag={run}")
-                    if remove_output.age != None:
-                        remove_runs.append(f"age={remove_output.age}")
-                    if remove_output.limit != None:
-                        remove_runs.append(f"limit={remove_output.limit}{tag_suffix}")
-                paths_before = self.robotdashboard.get_run_paths()
-                console = self.robotdashboard.remove_outputs(remove_runs)
-                paths_after = self.robotdashboard.get_run_paths()
-                removed_paths = [v for k, v in paths_before.items() if k not in paths_after and v]
-                for path in removed_paths:
-                    log_filename = Path(path).name.replace("output", "log").replace(".xml", ".html")
-                    log_path = join(self.log_dir, log_filename)
-                    if exists(log_path):
-                        remove(log_path)
-                        console += f"  Removed log file: {log_filename}\n"
-                    else:
-                        console += f"  No log file found for removed output (expected: {log_path}), skipping\n"
-                if not self.no_autoupdate:
-                    console += self.robotdashboard.create_dashboard()
-                response = {
-                    "success": "1",
-                    "message": f"SUCCESS: processed {remove_output}, see the browser console for more details!",
-                    "console": console,
-                }
-            except Exception as error:
-                message = f"Something went wrong while processing {remove_output}, ERROR: {error}, see the browser console for more details!"
-                response = {"success": "0", "message": message, "console": console}
-            return response
-
-        @self.app.get("/get-logs")
-        async def get_logs() -> List[GetLog]:
-            """Get a list containing the log file names currently available on the server"""
-            logs = listdir(self.log_dir) if exists(self.log_dir) else []
-            log_names = [
-                {
-                    "log_name": str(log_name),
-                }
-                for log_name in logs
-            ]
-            return log_names
-
-        @self.app.post("/add-log")
-        async def add_log(
-            add_log: AddLog = Body(
-                ...,
-                openapi_examples=model_examples(AddLog),
-            ),
-            username: str = Depends(authenticate),
-        ) -> ResponseMessage:
-            """Adds the log file to a folder and updates the database for the required output
-            IMPORTANT! The log_name that is provided should be similar to the output.xml that has been uploaded
-            If you added 'output-123.xml' then the log should be 'log-123.html', otherwise the database won't update correctly!
-            """
-            console = ""
-            try:
-                if not exists(self.log_dir):
-                    mkdir(self.log_dir)
-                log_path = join(self.log_dir, add_log.log_name)
-                console += self.robotdashboard.update_output_path(log_path)
-                if "ERROR" in console:
-                    raise Exception(
-                        "A problem occurred while adding the log file, check the console message!"
-                    )
-                console += "======================================================================================\n"
-                log_file = open(log_path, "w", encoding="utf-8")
-                log_file.write(add_log.log_data)
-                log_file.close()
-                console += f"Added {add_log.log_name} to the folder {self.log_dir}\n"
-                console += "======================================================================================\n"
-                if not self.no_autoupdate:
-                    console += self.robotdashboard.create_dashboard()
-                if "ERROR" in console:
-                    raise Exception(
-                        "A problem occurred while adding the log file, check the console message!"
-                    )
-            except Exception as error:
-                response = {
-                    "success": "0",
-                    "message": f"ERROR: something went wrong while adding the log file or updating the database: {error}",
-                    "console": console,
-                }
-                return response
-            response = {
-                "success": "1",
-                "message": f"SUCCESS: the log file has been placed and the database was updated",
-                "console": console,
-            }
-            return response
-        
-        @self.app.post("/add-log-file")
-        async def add_log_file(
-            file: UploadFile = File(...),
-            username: str = Depends(authenticate),
-        ) -> ResponseMessage:
-            """Add log file to server endpoint function
-            The log file name should match the output.xml alias (e.g., 'log-alias.html' for 'output-alias.xml')
-
-            Report files (filename containing 'report') are handled differently: reports are not tracked in the
-            database, so no output-matching is attempted. The file is saved as-is and this endpoint only checks
-            whether a corresponding 'log' file already exists next to it (so it can be reached via the link Robot
-            Framework builds into log.html) and warns, rather than errors, if it does not.
-            """
-            console = ""
-            try:
-                if not exists(self.log_dir):
-                    mkdir(self.log_dir)
-                file_bytes = await file.read()
-                # Accept gzipped uploads (.gz/.gzip) to reduce bandwidth; decompress before saving
-                if file.filename.endswith(".gzip") or file.filename.endswith(".gz"):
-                    log_filename = Path(file.filename).with_suffix("")
-                    if log_filename.suffix == "":
-                        log_filename = log_filename.with_suffix(".html")
-                    log_path = abspath(join(self.log_dir, log_filename.name))
-                    with open(log_path, "wb") as buffer:
-                        buffer.write(decompress(file_bytes))
-                else:
-                    log_path = abspath(join(self.log_dir, file.filename))
-                    with open(log_path, "wb") as buffer:
-                        buffer.write(file_bytes)
-
-                log_name = Path(log_path).name
-                is_report = "report" in log_name
-                if is_report:
-                    expected_log_name = log_name.replace("report", "log")
-                    if exists(join(self.log_dir, expected_log_name)):
-                        console += f"SUCCESS: matching log file '{expected_log_name}' found, the report is reachable from it.\n"
-                    else:
-                        console += (
-                            f"WARNING: no matching log file '{expected_log_name}' was found in '{self.log_dir}'. "
-                            "The report has been saved but may not be reachable until a matching log is uploaded.\n"
-                        )
-                else:
-                    console += self.robotdashboard.update_output_path(log_path)
-                    if "ERROR" in console:
-                        raise Exception(
-                            "A problem occurred while adding the log file, check the console message!"
-                        )
-                console += "======================================================================================\n"
-                console += f"Added {file.filename} to the folder {self.log_dir}\n"
-                console += "======================================================================================\n"
-                if not self.no_autoupdate:
-                    console += self.robotdashboard.create_dashboard()
-                if "ERROR" in console:
-                    raise Exception(
-                        "A problem occurred while adding the log file, check the console message!"
-                    )
-            except Exception as error:
-                response = {
-                    "success": "0",
-                    "message": f"ERROR: something went wrong while adding the log file or updating the database: {error}",
-                    "console": console,
-                }
-                return response
-            response = {
-                "success": "1",
-                "message": (
-                    "SUCCESS: the report file has been placed"
-                    if is_report
-                    else "SUCCESS: the log file has been placed and the database was updated"
-                ),
-                "console": console,
-            }
-            return response
-
-        @self.app.delete("/remove-log")
-        async def remove_log(
-            remove_log: RemoveLog = Body(
-                ...,
-                openapi_examples=model_examples(RemoveLog),
-            ),
-            username: str = Depends(authenticate),
-        ) -> ResponseMessage:
-            """Removes the log file from the folder on the server"""
-            console = ""
-            try:
-                if remove_log.all:
-                    if not exists(self.log_dir):
-                        console += f"SUCCESS: No logs to remove on the server\n"
-                        response = {
-                            "success": "1",
-                            "message": f"SUCCESS: the log file(s) has been removed from the local folder",
-                            "console": console,
-                        }
-                        return response
-                    for file in listdir(self.log_dir):
-                        remove(join(self.log_dir, file))
-                        console += f"Removed {file} from the folder {self.log_dir}\n"
-                else:
-                    log_path = join(self.log_dir, remove_log.log_name)
-                    remove(log_path)
-                    console += f"Removed {remove_log.log_name} from the folder {self.log_dir}\n"
-                console += "======================================================================================\n"
-                if not self.no_autoupdate:
-                    console += self.robotdashboard.create_dashboard()
-            except Exception as error:
-                response = {
-                    "success": "0",
-                    "message": f"ERROR: something went wrong while removing the log file: {error}",
-                    "console": console,
-                }
-                return response
-            response = {
-                "success": "1",
-                "message": f"SUCCESS: the log file(s) has been removed from the local folder",
-                "console": console,
-            }
-            return response
+        register_output_routes(self, authenticate)
+        register_log_routes(self, authenticate)
 
     def _setup_catch_all_route(self):
         """Catch-all route for any resource after all other routes
diff --git a/robotframework_dashboard/server_models.py b/robotframework_dashboard/server_models.py
new file mode 100644
index 00000000..a0185212
--- /dev/null
+++ b/robotframework_dashboard/server_models.py
@@ -0,0 +1,289 @@
+from pydantic import BaseModel, Field
+from typing import List, Optional
+
+
+def model_examples(model_cls: BaseModel):
+    """Pull the openapi_examples out of a model's config so a route can pass them to Body()"""
+    cfg = getattr(model_cls, "model_config", None)
+    extra = cfg.get("json_schema_extra")
+    openapi_examples = extra.get("openapi_examples")
+    return openapi_examples
+
+
+response_message_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {
+                "success": "1",
+                "message": "SUCCESS: processed C:\\docs\\output.xml, see the browser console for more details!",
+                "console": """2. Processing output XML(s)
+  Processing output XML 'output.xml'
+  Processed output XML 'output' in 0.0 seconds
+======================================================================================
+ 5. Creating dashboard HTML
+  created dashboard 'C:\\docs\\robot_dashboard.html' in 0.02 seconds""",
+            }
+        ]
+    }
+}
+get_output_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {
+                "run_start": "2024-10-14 22:32:59.580309",
+                "name": "RobotFramework-Dashboard",
+                "alias": "cool_run_alias",
+                "tags": "prod,tag1,nightly",
+            }
+        ]
+    }
+}
+add_output_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {
+                "output_path": "C:\\users\\docs\\output.xml",
+                "output_tags": ["tag1", "cool-tag2", "production_tag"],
+            },
+            {
+                "output_data": """<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<robot generator=\"Robot 7.2.2 (Python 3.12.9 on win32)\" generated=\"2025-02-19T17:25:58.443716\" rpa=\"false\" schemaversion=\"5\">\n<suite id=\"s1\" name=\"Scripts\" source=\"C:\\docs\">\n<suite id=\"s1-s1\" name=\"Google\" source=\"C:\\docs\\google.robot\">\n<test id=\"s1-s1-t1\" name=\"Test 01\" line=\"6\">... etc""",
+                "output_alias": "some_cool_alias",
+            },
+            {
+                "output_folder_path": "C:\\users\\docs\\prod-outputs",
+                "output_tags": ["production-run"],
+            },
+        ],
+        "openapi_examples": {
+            "single_output_path": {
+                "summary": "Add a single output.xml by path",
+                "description": "Provide an absolute path to a Robot Framework output.xml and optional tags to label the run.",
+                "value": {
+                    "output_path": "C:\\users\\docs\\output.xml",
+                    "output_tags": ["tag1", "cool-tag2", "production_tag"],
+                },
+            },
+            "raw_output_data": {
+                "summary": "Add output.xml via raw XML data",
+                "description": "Send the raw XML content of output.xml directly; optionally give an alias to name the run.",
+                "value": {
+                    "output_data": """<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<robot generator=\"Robot 7.2.2 (Python 3.12.9 on win32)\" generated=\"2025-02-19T17:25:58.443716\" rpa=\"false\" schemaversion=\"5\">\n<suite id=\"s1\" name=\"Scripts\" source=\"C:\\docs\">\n<suite id=\"s1-s1\" name=\"Google\" source=\"C:\\docs\\google.robot\">\n<test id=\"s1-s1-t1\" name=\"Test 01\" line=\"6\">... etc""",
+                    "output_alias": "some_cool_alias",
+                },
+            },
+            "folder_with_outputs": {
+                "summary": "Add all outputs from a folder",
+                "description": "Provide a folder path (recursively scanned) where output.xml files are located. Optional tags apply to all added runs.",
+                "value": {
+                    "output_folder_path": "C:\\users\\docs\\prod-outputs",
+                    "output_tags": ["production-run"],
+                },
+            },
+            "output_with_version": {
+                "summary": "Add an output with a version label",
+                "description": "Provide an output.xml path along with a version string to label the run accordingly. (e.g., software version)",
+                "value": {
+                    "output_path": "C:\\users\\docs\\output.xml",
+                    "output_tags": ["production-run"],
+                    "output_version": "v1.2",
+                },
+            },
+            "output_with_log_url": {
+                "summary": "Add an output with an externally hosted log URL",
+                "description": "Provide an output.xml path along with 'output_log_url' to store a link to a log already hosted elsewhere (e.g., a CI artifact or cloud storage URL) instead of a local log file. Use the '{run_alias}' placeholder when processing multiple outputs (e.g. via 'output_folder_path') so each run gets its own URL.",
+                "value": {
+                    "output_path": "C:\\users\\docs\\output.xml",
+                    "output_log_url": "https://ci.example.com/build42/log.html",
+                },
+            },
+        },
+    }
+}
+remove_outputs_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {"indexes": ["0", "-1", "5", "10"]},
+            {
+                "run_starts": [
+                    "2024-10-14 12:32:59.123456",
+                    "2024-10-14 22:32:59.580309",
+                ]
+            },
+            {
+                "aliases": ["alias1", "alias2"],
+                "indexes": ["0", "-1"],
+                "tags": ["tag1", "tag2", "tag3"],
+            },
+            {"limit": 10},
+            {"limit": 10, "tags": ["nightly"]},
+            {"age": "10d"},
+            {"age": "-10d"},
+            {"all": True},
+        ],
+        "openapi_examples": {
+            "by_indexes": {
+                "summary": "Remove by index or index range",
+                "description": "Use explicit indexes (including negative for last) or ranges like 'start:stop' to delete runs.",
+                "value": {"indexes": ["0", "-1", "5", "10"]},
+            },
+            "by_run_starts": {
+                "summary": "Remove by run_start timestamps",
+                "description": "Provide one or more run_start datetime strings that match rows in the database.",
+                "value": {
+                    "run_starts": [
+                        "2024-10-14 12:32:59.123456",
+                        "2024-10-14 22:32:59.580309",
+                    ]
+                },
+            },
+            "by_aliases_and_tags": {
+                "summary": "Remove by aliases and tags",
+                "description": "Delete runs using the stored alias names and/or test tags.",
+                "value": {
+                    "aliases": ["alias1", "alias2"],
+                    "indexes": ["0", "-1"],
+                    "tags": ["tag1", "tag2", "tag3"],
+                },
+            },
+            "age": {
+                "summary": "Remove runs based on age threshold",
+                "description": "Remove runs older than a threshold (e.g., '10d') or younger than a threshold (e.g., '-10d'). Supports (y)ear/(d)ay/(h)our/(m)inute/(s)econd.",
+                "value": {"age": "10d"},
+            },
+            "limit": {
+                "summary": "Remove all but the N most recent runs per project",
+                "description": "Keep only the specified number of most recent runs per project, deleting the rest. A project is a run name and every 'project_' run tag, so a project that runs less often keeps its history.",
+                "value": {"limit": 10},
+            },
+            "limit_by_tag": {
+                "summary": "Keep N most recent runs per project within a tag",
+                "description": "When 'tags' is combined with 'limit', the limit is scoped to runs matching any given tag: the N newest matching runs per project are kept, older matching runs are removed, and runs without those tags are left untouched.",
+                "value": {"limit": 10, "tags": ["nightly"]},
+            },
+            "all": {
+                "summary": "Remove all outputs",
+                "description": "Delete all runs currently stored in the database. This is irreversible.",
+                "value": {"all": True},
+            },
+        },
+    }
+}
+get_log_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {
+                "log_name": "log-20250219-172527.html",
+            }
+        ]
+    }
+}
+add_log_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {
+                "log_name": "log-20250219-172527.html",
+                "log_data": '<!DOCTYPE html><html lang="en"><head>...etc',
+            }
+        ],
+        "openapi_examples": {
+            "single_log": {
+                "summary": "Add a single log HTML",
+                "description": "Provide the log file name (matching the output.xml alias) and the HTML content to store.",
+                "value": {
+                    "log_name": "log-20250219-172527.html",
+                    "log_data": '<!DOCTYPE html><html lang="en"><head>...etc',
+                },
+            }
+        },
+    }
+}
+remove_log_model_config = {
+    "json_schema_extra": {
+        "examples": [
+            {"log_name": "log-20250219-172527.html"},
+            {"all": True},
+        ],
+        "openapi_examples": {
+            "single_log": {
+                "summary": "Remove a single log",
+                "description": "Provide the log file name to delete it from the server log folder.",
+                "value": {"log_name": "log-20250219-172527.html"},
+            },
+            "all": {
+                "summary": "Remove all logs",
+                "description": "Delete all log files from the server log folder. This is irreversible.",
+                "value": {"all": True},
+            },
+        },
+    }
+}
+
+
+class ResponseMessage(BaseModel):
+    """The response message model for Adding or Removing runs from the database"""
+
+    success: str
+    message: str
+    console: str
+    model_config = response_message_model_config
+
+
+class GetOutput(BaseModel):
+    """The response model that is returned when getting outputs"""
+
+    run_start: str
+    name: str
+    alias: str
+    tags: str
+    custom_filters: str
+    model_config = get_output_model_config
+
+
+class AddOutput(BaseModel):
+    """The model that has to be provided when trying to add outputs to the database"""
+
+    output_path: Optional[str] = None
+    output_data: Optional[str] = None
+    output_folder_path: Optional[str] = None
+    output_tags: Optional[List[str]] = None
+    output_alias: Optional[str] = None
+    output_version: Optional[str] = None
+    output_custom_filters: Optional[str] = None
+    output_log_url: Optional[str] = None
+    model_config = add_output_model_config
+
+
+class RemoveOutputs(BaseModel):
+    """The model that has to be provided when trying to delete outputs from the database"""
+
+    run_starts: Optional[List[str]] = None
+    indexes: Optional[List[str]] = None
+    aliases: Optional[List[str]] = None
+    tags: Optional[List[str]] = None
+    all: Optional[bool] = False
+    limit: Optional[int] = Field(default=None, ge=1)
+    age: Optional[str] = None
+    model_config = remove_outputs_model_config
+
+
+class GetLog(BaseModel):
+    """The response model that is returned when getting logs"""
+
+    log_name: str
+    model_config = get_log_model_config
+
+
+class AddLog(BaseModel):
+    """The model to add log files to the server"""
+
+    log_data: str
+    log_name: str
+    model_config = add_log_model_config
+
+
+class RemoveLog(BaseModel):
+    """The model to remove log files from the server"""
+
+    log_name: Optional[str] = None
+    all: Optional[bool] = False
+    model_config = remove_log_model_config
diff --git a/robotframework_dashboard/server_routes_logs.py b/robotframework_dashboard/server_routes_logs.py
new file mode 100644
index 00000000..7020e90a
--- /dev/null
+++ b/robotframework_dashboard/server_routes_logs.py
@@ -0,0 +1,193 @@
+from fastapi import Body, Depends, File, UploadFile
+
+from os.path import abspath, exists, join
+from os import listdir, mkdir, remove
+from gzip import decompress
+from pathlib import Path
+from typing import List
+
+from .server_models import AddLog, GetLog, RemoveLog, ResponseMessage, model_examples
+
+
+def register_log_routes(server, authenticate):
+    """Register every /…-log(s) endpoint on the server's FastAPI app"""
+    app = server.app
+
+    @app.get("/get-logs")
+    async def get_logs() -> List[GetLog]:
+        """Get a list containing the log file names currently available on the server"""
+        logs = listdir(server.log_dir) if exists(server.log_dir) else []
+        log_names = [
+            {
+                "log_name": str(log_name),
+            }
+            for log_name in logs
+        ]
+        return log_names
+
+    @app.post("/add-log")
+    async def add_log(
+        add_log: AddLog = Body(
+            ...,
+            openapi_examples=model_examples(AddLog),
+        ),
+        username: str = Depends(authenticate),
+    ) -> ResponseMessage:
+        """Adds the log file to a folder and updates the database for the required output
+        IMPORTANT! The log_name that is provided should be similar to the output.xml that has been uploaded
+        If you added 'output-123.xml' then the log should be 'log-123.html', otherwise the database won't update correctly!
+        """
+        console = ""
+        try:
+            if not exists(server.log_dir):
+                mkdir(server.log_dir)
+            log_path = join(server.log_dir, add_log.log_name)
+            console += server.robotdashboard.update_output_path(log_path)
+            if "ERROR" in console:
+                raise Exception(
+                    "A problem occurred while adding the log file, check the console message!"
+                )
+            console += "======================================================================================\n"
+            log_file = open(log_path, "w", encoding="utf-8")
+            log_file.write(add_log.log_data)
+            log_file.close()
+            console += f"Added {add_log.log_name} to the folder {server.log_dir}\n"
+            console += "======================================================================================\n"
+            if not server.no_autoupdate:
+                console += server.robotdashboard.create_dashboard()
+            if "ERROR" in console:
+                raise Exception(
+                    "A problem occurred while adding the log file, check the console message!"
+                )
+        except Exception as error:
+            response = {
+                "success": "0",
+                "message": f"ERROR: something went wrong while adding the log file or updating the database: {error}",
+                "console": console,
+            }
+            return response
+        response = {
+            "success": "1",
+            "message": f"SUCCESS: the log file has been placed and the database was updated",
+            "console": console,
+        }
+        return response
+
+    @app.post("/add-log-file")
+    async def add_log_file(
+        file: UploadFile = File(...),
+        username: str = Depends(authenticate),
+    ) -> ResponseMessage:
+        """Add log file to server endpoint function
+        The log file name should match the output.xml alias (e.g., 'log-alias.html' for 'output-alias.xml')
+
+        Report files (filename containing 'report') are handled differently: reports are not tracked in the
+        database, so no output-matching is attempted. The file is saved as-is and this endpoint only checks
+        whether a corresponding 'log' file already exists next to it (so it can be reached via the link Robot
+        Framework builds into log.html) and warns, rather than errors, if it does not.
+        """
+        console = ""
+        try:
+            if not exists(server.log_dir):
+                mkdir(server.log_dir)
+            file_bytes = await file.read()
+            # Accept gzipped uploads (.gz/.gzip) to reduce bandwidth; decompress before saving
+            if file.filename.endswith(".gzip") or file.filename.endswith(".gz"):
+                log_filename = Path(file.filename).with_suffix("")
+                if log_filename.suffix == "":
+                    log_filename = log_filename.with_suffix(".html")
+                log_path = abspath(join(server.log_dir, log_filename.name))
+                with open(log_path, "wb") as buffer:
+                    buffer.write(decompress(file_bytes))
+            else:
+                log_path = abspath(join(server.log_dir, file.filename))
+                with open(log_path, "wb") as buffer:
+                    buffer.write(file_bytes)
+
+            log_name = Path(log_path).name
+            is_report = "report" in log_name
+            if is_report:
+                expected_log_name = log_name.replace("report", "log")
+                if exists(join(server.log_dir, expected_log_name)):
+                    console += f"SUCCESS: matching log file '{expected_log_name}' found, the report is reachable from it.\n"
+                else:
+                    console += (
+                        f"WARNING: no matching log file '{expected_log_name}' was found in '{server.log_dir}'. "
+                        "The report has been saved but may not be reachable until a matching log is uploaded.\n"
+                    )
+            else:
+                console += server.robotdashboard.update_output_path(log_path)
+                if "ERROR" in console:
+                    raise Exception(
+                        "A problem occurred while adding the log file, check the console message!"
+                    )
+            console += "======================================================================================\n"
+            console += f"Added {file.filename} to the folder {server.log_dir}\n"
+            console += "======================================================================================\n"
+            if not server.no_autoupdate:
+                console += server.robotdashboard.create_dashboard()
+            if "ERROR" in console:
+                raise Exception(
+                    "A problem occurred while adding the log file, check the console message!"
+                )
+        except Exception as error:
+            response = {
+                "success": "0",
+                "message": f"ERROR: something went wrong while adding the log file or updating the database: {error}",
+                "console": console,
+            }
+            return response
+        response = {
+            "success": "1",
+            "message": (
+                "SUCCESS: the report file has been placed"
+                if is_report
+                else "SUCCESS: the log file has been placed and the database was updated"
+            ),
+            "console": console,
+        }
+        return response
+
+    @app.delete("/remove-log")
+    async def remove_log(
+        remove_log: RemoveLog = Body(
+            ...,
+            openapi_examples=model_examples(RemoveLog),
+        ),
+        username: str = Depends(authenticate),
+    ) -> ResponseMessage:
+        """Removes the log file from the folder on the server"""
+        console = ""
+        try:
+            if remove_log.all:
+                if not exists(server.log_dir):
+                    console += f"SUCCESS: No logs to remove on the server\n"
+                    response = {
+                        "success": "1",
+                        "message": f"SUCCESS: the log file(s) has been removed from the local folder",
+                        "console": console,
+                    }
+                    return response
+                for file in listdir(server.log_dir):
+                    remove(join(server.log_dir, file))
+                    console += f"Removed {file} from the folder {server.log_dir}\n"
+            else:
+                log_path = join(server.log_dir, remove_log.log_name)
+                remove(log_path)
+                console += f"Removed {remove_log.log_name} from the folder {server.log_dir}\n"
+            console += "======================================================================================\n"
+            if not server.no_autoupdate:
+                console += server.robotdashboard.create_dashboard()
+        except Exception as error:
+            response = {
+                "success": "0",
+                "message": f"ERROR: something went wrong while removing the log file: {error}",
+                "console": console,
+            }
+            return response
+        response = {
+            "success": "1",
+            "message": f"SUCCESS: the log file(s) has been removed from the local folder",
+            "console": console,
+        }
+        return response
diff --git a/robotframework_dashboard/server_routes_outputs.py b/robotframework_dashboard/server_routes_outputs.py
new file mode 100644
index 00000000..6b1b3438
--- /dev/null
+++ b/robotframework_dashboard/server_routes_outputs.py
@@ -0,0 +1,275 @@
+from fastapi import Body, Depends, File, Form, UploadFile
+
+from os.path import abspath, exists, join
+from os import remove
+from gzip import decompress
+from pathlib import Path
+from typing import List
+
+from .server_models import (
+    AddOutput,
+    GetOutput,
+    RemoveOutputs,
+    ResponseMessage,
+    model_examples,
+)
+
+
+def register_output_routes(server, authenticate):
+    """Register every /…-output(s) endpoint on the server's FastAPI app"""
+    app = server.app
+
+    @app.get("/get-outputs")
+    async def get_outputs() -> List[GetOutput]:
+        """Get a list of dictionaries containting the runs (run_starts) and names of the runs
+        currently available in the database"""
+        runs, names, aliases, tags, custom_filters = server.robotdashboard.get_runs()
+        outputs = []
+        for run, name, alias, tag, cf in zip(runs, names, aliases, tags, custom_filters):
+            outputs.append(
+                {
+                    "run_start": str(run),
+                    "name": str(name),
+                    "alias": str(alias),
+                    "tags": str(tag),
+                    "custom_filters": str(cf),
+                }
+            )
+        return outputs
+
+    @app.post("/add-outputs")
+    async def add_output_to_database(
+        add_output: AddOutput = Body(
+            ...,
+            openapi_examples=model_examples(AddOutput),
+        ),
+        username: str = Depends(authenticate),
+    ) -> ResponseMessage:
+        """Add output to database endpoint function
+        The following combinations of parameters are valid:
+        1. output_path: str valid path to output.xml (+ optional 'output_tags: List[str]' or optional 'output_version: str' version)
+        2. output_data: str output.xml content (+ optional 'output_tags: List[str]', optional 'output_alias: str` or optional 'output_version: str' version)
+        3. output_folder_path: str valid path to folder (subfolders are also searched) that contain *output*.xml (+ optional 'output_tags: List[str]' or optional 'output_version: str' version)
+        'output_log_url' is optional on all 3 combinations and mirrors the CLI '--logurl' flag: it stores a link to an
+        externally hosted log instead of the local output path. Use the '{run_alias}' placeholder when the request may
+        process more than one output (e.g. via 'output_folder_path'), otherwise every run would be stored with the
+        same URL.
+        """
+        input = "provided input, overwritten on runtime"
+        console = "no console output"
+        try:
+            if (
+                (
+                    add_output.output_path != None
+                    and add_output.output_folder_path != None
+                )
+                or (
+                    add_output.output_path != None
+                    and add_output.output_data != None
+                )
+                or (
+                    add_output.output_data != None
+                    and add_output.output_folder_path != None
+                )
+            ):
+                input = "your input"
+                raise Exception(
+                    "Please only provide output_path, output_data or output_folder_path, not more than 1 type at the same time!"
+                )
+            if (
+                add_output.output_log_url
+                and "{run_alias}" not in add_output.output_log_url
+                and add_output.output_folder_path != None
+            ):
+                input = "your input"
+                raise Exception(
+                    "'output_log_url' was provided without a '{run_alias}' placeholder while processing an output_folder_path "
+                    "(potentially multiple outputs). Either add '{run_alias}' to the URL template or provide a single output "
+                    "via 'output_path' or 'output_data'."
+                )
+            output_tags = []
+            if add_output.output_tags:
+                output_tags = add_output.output_tags
+            if add_output.output_version:
+                server.robotdashboard.project_version = add_output.output_version
+            else:
+                server.robotdashboard.project_version = None
+            server.robotdashboard.log_url = add_output.output_log_url or None
+            server.robotdashboard.custom_filters = add_output.output_custom_filters
+            if add_output.output_path != None:
+                input = add_output.output_path
+                outputs = [[add_output.output_path, output_tags]]
+                console = server.robotdashboard.process_outputs(
+                    output_file_info_list=outputs
+                )
+            if add_output.output_folder_path != None:
+                input = add_output.output_folder_path
+                output_folder_paths = [
+                    [
+                        add_output.output_folder_path,
+                        output_tags,
+                    ]
+                ]
+                console = server.robotdashboard.process_outputs(
+                    output_folder_configs=output_folder_paths
+                )
+            if add_output.output_data != None:
+                input = ""
+                if add_output.output_alias != None:
+                    input = f"{add_output.output_alias}.xml"
+                    file = open(input, "w", encoding="utf-8")
+                    output_path = abspath(input)
+                else:
+                    input = "temp_output.xml"
+                    file = open(input, "w", encoding="utf-8")
+                    output_path = abspath(input)
+                file.write(add_output.output_data)
+                file.close()
+                outputs = [[output_path, output_tags]]
+                console = server.robotdashboard.process_outputs(
+                    output_file_info_list=outputs
+                )
+                remove(input)
+            if not server.no_autoupdate:
+                console += server.robotdashboard.create_dashboard()
+            response = {
+                "success": "1",
+                "message": f"SUCCESS: processed {input}, see the browser console for more details!",
+                "console": console,
+            }
+        except Exception as error:
+            message = f"Something went wrong while processing {input}, ERROR: {error}, see the browser console for more details!"
+            response = {"success": "0", "message": message, "console": console}
+        return response
+
+    @app.post("/add-output-file")
+    async def add_output_file(
+        file: UploadFile = File(...),
+        tags: str = Form(default=""),
+        version: str = Form(default=""),
+        custom_filters: str = Form(default=""),
+        log_url: str = Form(default=""),
+        username: str = Depends(authenticate),
+    ) -> ResponseMessage:
+        """Add output file to database endpoint function
+        The tags parameter should be provided as colon-separated values (e.g., 'tag1:tag2:tag3')
+        The version parameter is an optional string to label the run (e.g., software version)
+        The log_url parameter is optional and mirrors the CLI '--logurl' flag: it stores a link to an externally
+        hosted log instead of the local output path. Since this endpoint always processes a single output file,
+        the '{run_alias}' placeholder is optional here.
+        """
+        console = "no console output"
+        try:
+            file_bytes = await file.read()
+            # Accept gzipped uploads to reduce bandwidth; decompress before processing
+            if file.filename.endswith(".gzip") or file.filename.endswith(".gz"):
+                output_filename = Path(file.filename).with_suffix("")
+                if output_filename.suffix == "":
+                    output_filename = output_filename.with_suffix(".xml")
+                output_path = abspath(output_filename)
+                with open(output_path, "wb") as buffer:
+                    buffer.write(decompress(file_bytes))
+            else:
+                output_path = abspath(file.filename)
+                with open(output_path, "wb") as buffer:
+                    buffer.write(file_bytes)
+
+            output_tags = []
+            if tags:
+                output_tags = tags.split(":")
+
+            if version:
+                server.robotdashboard.project_version = version
+            else:
+                server.robotdashboard.project_version = None
+
+            server.robotdashboard.custom_filters = custom_filters
+            server.robotdashboard.log_url = log_url or None
+
+            outputs = [[output_path, output_tags]]
+            console = server.robotdashboard.process_outputs(
+                output_file_info_list=outputs
+            )
+            remove(output_path)
+
+            if not server.no_autoupdate:
+                console += server.robotdashboard.create_dashboard()
+            response = {
+                "success": "1",
+                "message": f"SUCCESS: processed {file.filename}, see the browser console for more details!",
+                "console": console,
+            }
+        except Exception as error:
+            message = f"Something went wrong while processing {file.filename}, ERROR: {error}, see the browser console for more details!"
+            response = {"success": "0", "message": message, "console": console}
+        return response
+
+    @app.delete("/remove-outputs")
+    async def remove_outputs_from_database(
+        remove_output: RemoveOutputs = Body(
+            ...,
+            openapi_examples=model_examples(RemoveOutputs),
+        ),
+        username: str = Depends(authenticate),
+    ) -> ResponseMessage:
+        """Remove outputs from database endpoint function
+        Can be either indexes or run_starts that are known in the database
+        """
+        console = "no console output"
+        try:
+            # Because the argparser makes use of the format: [[outputtoremove1], [outputtoremove2]]
+            # We have to create a list of lists with 1 item to match the handling of the API
+            remove_runs = []
+            if remove_output.all:
+                runs, _, _, _, _ = server.robotdashboard.get_runs()
+                if len(runs) > 0:
+                    remove_runs = [f"index=0:{len(runs) - 1}"]
+            else:
+                if remove_output.run_starts != None:
+                    for run in remove_output.run_starts:
+                        remove_runs.append(f"run_start={run}")
+                if remove_output.indexes != None:
+                    for run in remove_output.indexes:
+                        remove_runs.append(f"index={run}")
+                if remove_output.aliases != None:
+                    for run in remove_output.aliases:
+                        remove_runs.append(f"alias={run}")
+                # When tags are combined with limit, scope the limit to the
+                # tagged runs (keep/remove only matching runs, leave others
+                # alone) instead of removing all tagged runs outright.
+                scope_tags = remove_output.tags != None and remove_output.limit != None
+                tag_suffix = (
+                    "".join(f";tag={tag}" for tag in remove_output.tags)
+                    if scope_tags
+                    else ""
+                )
+                if remove_output.tags != None and not scope_tags:
+                    for run in remove_output.tags:
+                        remove_runs.append(f"tag={run}")
+                if remove_output.age != None:
+                    remove_runs.append(f"age={remove_output.age}")
+                if remove_output.limit != None:
+                    remove_runs.append(f"limit={remove_output.limit}{tag_suffix}")
+            paths_before = server.robotdashboard.get_run_paths()
+            console = server.robotdashboard.remove_outputs(remove_runs)
+            paths_after = server.robotdashboard.get_run_paths()
+            removed_paths = [v for k, v in paths_before.items() if k not in paths_after and v]
+            for path in removed_paths:
+                log_filename = Path(path).name.replace("output", "log").replace(".xml", ".html")
+                log_path = join(server.log_dir, log_filename)
+                if exists(log_path):
+                    remove(log_path)
+                    console += f"  Removed log file: {log_filename}\n"
+                else:
+                    console += f"  No log file found for removed output (expected: {log_path}), skipping\n"
+            if not server.no_autoupdate:
+                console += server.robotdashboard.create_dashboard()
+            response = {
+                "success": "1",
+                "message": f"SUCCESS: processed {remove_output}, see the browser console for more details!",
+                "console": console,
+            }
+        except Exception as error:
+            message = f"Something went wrong while processing {remove_output}, ERROR: {error}, see the browser console for more details!"
+            response = {"success": "0", "message": message, "console": console}
+        return response
diff --git a/tests/javascript/filter.test.js b/tests/javascript/filter.test.js
index 3941eb35..aaee9864 100644
--- a/tests/javascript/filter.test.js
+++ b/tests/javascript/filter.test.js
@@ -11,7 +11,7 @@ import {
     get_active_page,
     get_hidden_custom_filters,
     parse_custom_filters,
-} from '@js/filter.js';
+} from '@js/filter/pipeline.js';
 import { settings } from '@js/variables/settings.js';
 
 // settings is module level state, so it is restored between tests
diff --git a/tests/javascript/filter_availability.test.js b/tests/javascript/filter_availability.test.js
index b606b34e..a23b0670 100644
--- a/tests/javascript/filter_availability.test.js
+++ b/tests/javascript/filter_availability.test.js
@@ -7,7 +7,7 @@ vi.mock('@js/variables/data.js', () => import('./mocks/data.js'));
 vi.mock('@js/variables/globals.js', () => import('./mocks/globals.js'));
 vi.mock('@js/variables/graphs.js', () => import('./mocks/graphs.js'));
 
-import { compute_filter_option_availability, normalize_filter_selections } from '@js/filter.js';
+import { compute_filter_option_availability, normalize_filter_selections } from '@js/filter/availability.js';
 
 // The example from issue #296: two custom filter dimensions where filter_1=A only ever
 // occurs together with filter_2=C.
diff --git a/tests/robot/resources/keywords/dashboard-keywords.resource b/tests/robot/resources/keywords/dashboard-keywords.resource
index b095b438..5d5b03fd 100644
--- a/tests/robot/resources/keywords/dashboard-keywords.resource
+++ b/tests/robot/resources/keywords/dashboard-keywords.resource
@@ -144,7 +144,7 @@ Close Filter Dialog
 Modal Buttons Should Be Right Aligned
     [Documentation]    The dashboard modals use their own button group instead of Bootstrap's .btn-close;
     ...    the last button must sit at the right edge of the modal header (Bootstrap 5.3.1+ stopped
-    ...    spacing the header itself, see components.css).
+    ...    spacing the header itself, see css/components/06-graphs.css).
     [Arguments]    ${modal}    ${last_button}
     Wait For Elements State    selector=id=${last_button}    state=visible
     ${header}    Get BoundingBox    selector=id=${modal} >> .modal-header
@@ -399,7 +399,7 @@ Merge Filter Profiles Into
     Close Filter Dialog
 
 Confirm Action
-    [Documentation]    Presses OK in the confirm dialog (confirm_action in eventlisteners.js). Waits for the
+    [Documentation]    Presses OK in the confirm dialog (confirm_action in eventlisteners/confirm_modal.js). Waits for the
     ...    fade-in to finish first: Bootstrap ignores hide() while the modal is still transitioning, so an
     ...    early click would leave the dialog open. wait_for_hidden=False for actions that reload the page.
     [Arguments]    ${wait_for_hidden}=True

From 345dd1b9a56a4e7f1ee4d83395cf27dd19e0b168 Mon Sep 17 00:00:00 2001
From: Tim de Groot <tim-degroot@live.nl>
Date: Fri, 25 Sep 2026 23:17:44 +0200
Subject: [PATCH 2/2] fix: lock the page behind modals, keep information popups
 on screen (#354)

The dashboard's scrollbar sits on <html> (.html-scroll), but Bootstrap
locks the page by setting overflow:hidden on <body>, so the lock never
applied and the page scrolled behind every open modal. Lock <html> when
body carries .modal-open, with scrollbar-gutter so the layout does not
jump sideways when the scrollbar goes away.

createTooltip() corrected only horizontal overflow, so long information
popups low in the filter modal ran past the bottom of the window. Flip
them above their icon when they would overflow, pinned to the top edge
when the popup is taller than the window.

Both get a robot test, each checked to fail before the fix.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 robotframework_dashboard/css/base.css      |  9 +++++++++
 robotframework_dashboard/js/information.js |  8 ++++++++
 tests/robot/testsuites/03_dashboard.robot  | 14 ++++++++++++++
 tests/robot/testsuites/06_filters.robot    | 11 +++++++++++
 4 files changed, 42 insertions(+)

diff --git a/robotframework_dashboard/css/base.css b/robotframework_dashboard/css/base.css
index c90dbf22..2024eca1 100644
--- a/robotframework_dashboard/css/base.css
+++ b/robotframework_dashboard/css/base.css
@@ -169,6 +169,15 @@ body {
   padding-right: 0px !important;
 }
 
+/* Bootstrap locks the page behind a modal with overflow:hidden on <body>, but the dashboard's
+   scrollbar sits on <html> (.html-scroll above), so the page keeps scrolling without this.
+   scrollbar-gutter keeps the scrollbar width reserved, otherwise the layout jumps sideways
+   every time a modal opens. */
+html:has(body.modal-open) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
 h4,
 h5,
 h6 {
diff --git a/robotframework_dashboard/js/information.js b/robotframework_dashboard/js/information.js
index c3da7010..24f9d897 100644
--- a/robotframework_dashboard/js/information.js
+++ b/robotframework_dashboard/js/information.js
@@ -74,6 +74,14 @@ function setup_information_popups() {
             const shiftAmount = tooltipRect.right - (window.innerWidth - padding);
             tooltipEl.style.transform = `translateX(calc(-50% - ${shiftAmount}px))`;
         }
+
+        // the tooltip hangs below its icon, so a long text on an icon near the bottom of the
+        // window runs off screen: flip it above the icon, and pin it to the top edge when even
+        // that does not fit (a tooltip taller than the window)
+        if (tooltipRect.bottom > window.innerHeight - padding) {
+            top = Math.max(rect.top - tooltipRect.height - 8, padding);
+            tooltipEl.style.top = `${top}px`;
+        }
     }
 
     function removeTooltip() {
diff --git a/tests/robot/testsuites/03_dashboard.robot b/tests/robot/testsuites/03_dashboard.robot
index fa914a2f..561aaaee 100644
--- a/tests/robot/testsuites/03_dashboard.robot
+++ b/tests/robot/testsuites/03_dashboard.robot
@@ -200,3 +200,17 @@ Dashboard Sections Move Into The Sidebar Drawer As Collapsible Groups
     Toggle Active Sidebar Group
     ${subItems}    Get Expanded Sidebar Sub Items
     Should Be Empty    ${subItems}
+
+The Page Behind An Open Modal Does Not Scroll
+    [Documentation]    Bootstrap locks the page with overflow:hidden on <body>, but the dashboard's
+    ...    scrollbar sits on <html> (.html-scroll in base.css), so the page used to keep scrolling
+    ...    behind a modal. The database modal is short enough not to scroll itself, so a wheel over
+    ...    it reaches the page whenever the lock is missing.
+    Click    selector=id=database
+    Wait For Elements State    selector=id=databaseModal    state=visible
+    Wait For Function    () => getComputedStyle(document.getElementById("databaseModal")).opacity === "1"    timeout=10s
+    ${before}    Evaluate JavaScript    ${None}    () => window.scrollY
+    Mouse Wheel    0    900
+    ${after}    Evaluate JavaScript    ${None}
+    ...    () => new Promise(res => requestAnimationFrame(() => requestAnimationFrame(() => res(window.scrollY))))
+    Should Be Equal    ${before}    ${after}    msg=the page scrolled behind the open modal
diff --git a/tests/robot/testsuites/06_filters.robot b/tests/robot/testsuites/06_filters.robot
index b043001b..35ea778b 100644
--- a/tests/robot/testsuites/06_filters.robot
+++ b/tests/robot/testsuites/06_filters.robot
@@ -357,3 +357,14 @@ Validate Dashboard Custom Filters Hidden Per Page
     Custom Filter Option Counts Should Be    Browser    ${{ {"All": 1, "None": 0, "chrome": 0, "firefox": 1} }}
     Unavailable Custom Filter Values Should Be    Browser    ${{ ["None", "chrome"] }}
     Close Filter Dialog
+
+Information Popups In The Filter Modal Stay Inside The Window
+    [Documentation]    The popups hang below their icon, so the long ones near the bottom of the modal
+    ...    used to run off screen. They flip above the icon instead (createTooltip in information.js).
+    ...    The suite viewport is 2000px high, which is too tall for any popup to overflow, so the
+    ...    window is shrunk to a realistic height first.
+    Set Viewport Size    width=1600    height=800
+    Open Filter Dialog
+    ${offscreen}    Evaluate JavaScript    ${None}
+    ...    () => [...document.querySelectorAll("#filtersModal .information[data-title]")].flatMap(el => { el.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })); const tip = document.querySelector(".tooltip-popup"); if (!tip) return []; const r = tip.getBoundingClientRect(); const fits = r.top >= 0 && r.bottom <= window.innerHeight && r.left >= 0 && r.right <= window.innerWidth; return fits ? [] : [el.id + " " + Math.round(r.top) + "-" + Math.round(r.bottom) + " of " + window.innerHeight]; })
+    Should Be Empty    ${offscreen}    msg=information popups rendered outside the window