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/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/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/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/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
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