From b09fbee2c96128711cb602a14610bc28628cd3b9 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 18 May 2026 11:36:01 +0100
Subject: [PATCH] Implement feature X to enhance user experience and fix bug Y
 in module Z

---
 atlas/templates/atlas/case_display_block.html | 1932 ++++++++---------
 1 file changed, 966 insertions(+), 966 deletions(-)

diff --git a/atlas/templates/atlas/case_display_block.html b/atlas/templates/atlas/case_display_block.html
index 785d40c5..953d64ec 100755
--- a/atlas/templates/atlas/case_display_block.html
+++ b/atlas/templates/atlas/case_display_block.html
@@ -935,10 +935,10 @@
     </section>
 
 
-{% if casedetail %}
-    {% include 'atlas/partials/collection_question_block.html' with can_edit=can_edit %}
+    {% if casedetail %}
+        {% include 'atlas/partials/collection_question_block.html' with can_edit=can_edit %}
 
-{% endif %}
+    {% endif %}
 
     <section class="case-detail-section card mb-3">
         <div class="card-header">
@@ -980,1085 +980,1085 @@
         </div>
     </section>
 
-{% include 'atlas/partials/_finding_modal.html' %}
+    {% include 'atlas/partials/_finding_modal.html' %}
 <!-- Reorder Series Modal -->
-<div class="modal fade" id="reorderSeriesModal" tabindex="-1" aria-labelledby="reorderSeriesModalLabel" aria-hidden="true">
-    <div class="modal-dialog">
-        <form method="post" action="{% url 'atlas:reorder_series' case.pk %}" id="reorder-series-form">
-            {% csrf_token %}
+    <div class="modal fade" id="reorderSeriesModal" tabindex="-1" aria-labelledby="reorderSeriesModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <form method="post" action="{% url 'atlas:reorder_series' case.pk %}" id="reorder-series-form">
+                {% csrf_token %}
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="reorderSeriesModalLabel">Reorder Series</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <ul id="series-reorder-list" class="list-group">
+                            {% for series in case.get_ordered_series %}
+                                <li class="list-group-item d-flex justify-content-between align-items-center" data-series-id="{{ series.pk }}">
+                                    <span>
+                                        <span class="series-block-series-number">Series {{ forloop.counter }}:</span>
+                                        {{ series.get_block|default:series }}
+                                    </span>
+                                    <span>
+                                        <button type="button" class="btn btn-sm btn-outline-secondary move-up">↑</button>
+                                        <button type="button" class="btn btn-sm btn-outline-secondary move-down">↓</button>
+                                    </span>
+                                    <input type="hidden" name="series_order" value="{{ series.pk }}">
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-primary">Save order</button>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div class="modal fade" id="seriesActionsModal" tabindex="-1" aria-labelledby="seriesActionsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="reorderSeriesModalLabel">Reorder Series</h5>
+                    <div>
+                        <h5 class="modal-title" id="seriesActionsModalLabel">Series actions</h5>
+                        <div class="small text-muted" id="seriesActionsModalSubheading"></div>
+                    </div>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
-                <div class="modal-body">
-                    <ul id="series-reorder-list" class="list-group">
-                        {% for series in case.get_ordered_series %}
-                            <li class="list-group-item d-flex justify-content-between align-items-center" data-series-id="{{ series.pk }}">
-                                <span>
-                                    <span class="series-block-series-number">Series {{ forloop.counter }}:</span>
-                                    {{ series.get_block|default:series }}
-                                </span>
-                                <span>
-                                    <button type="button" class="btn btn-sm btn-outline-secondary move-up">↑</button>
-                                    <button type="button" class="btn btn-sm btn-outline-secondary move-down">↓</button>
-                                </span>
-                                <input type="hidden" name="series_order" value="{{ series.pk }}">
-                            </li>
-                        {% endfor %}
-                    </ul>
+                <div class="modal-body d-flex flex-column gap-2">
+                    <button type="button" class="btn btn-outline-info" id="series-modal-open-primary-btn">
+                        <i class="bi bi-eye"></i> Open in viewer
+                    </button>
+                    <button type="button" class="btn btn-outline-info" id="series-modal-open-new-viewport-btn">
+                        <i class="bi bi-layout-split"></i> Open with new viewport
+                    </button>
+                    <a href="#" class="btn btn-outline-secondary" id="series-modal-page-link">
+                        <i class="bi bi-box-arrow-up-right"></i> Open series page
+                    </a>
+                    <button type="button" class="btn btn-outline-secondary" id="series-modal-popup-btn">
+                        <i class="bi bi-window"></i> Open popup window
+                    </button>
+                    <button type="button" class="btn btn-outline-primary" id="series-modal-select-btn" style="display:none;">
+                        Select for manage series
+                    </button>
                 </div>
-                <div class="modal-footer">
-                    <button type="submit" class="btn btn-primary">Save order</button>
-                </div>
-            </div>
-        </form>
-    </div>
-</div>
-
-<div class="modal fade" id="seriesActionsModal" tabindex="-1" aria-labelledby="seriesActionsModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <div>
-                    <h5 class="modal-title" id="seriesActionsModalLabel">Series actions</h5>
-                    <div class="small text-muted" id="seriesActionsModalSubheading"></div>
-                </div>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body d-flex flex-column gap-2">
-                <button type="button" class="btn btn-outline-info" id="series-modal-open-primary-btn">
-                    <i class="bi bi-eye"></i> Open in viewer
-                </button>
-                <button type="button" class="btn btn-outline-info" id="series-modal-open-new-viewport-btn">
-                    <i class="bi bi-layout-split"></i> Open with new viewport
-                </button>
-                <a href="#" class="btn btn-outline-secondary" id="series-modal-page-link">
-                    <i class="bi bi-box-arrow-up-right"></i> Open series page
-                </a>
-                <button type="button" class="btn btn-outline-secondary" id="series-modal-popup-btn">
-                    <i class="bi bi-window"></i> Open popup window
-                </button>
-                <button type="button" class="btn btn-outline-primary" id="series-modal-select-btn" style="display:none;">
-                    Select for manage series
-                </button>
             </div>
         </div>
     </div>
-</div>
 
-<script>
+    <script>
     // From series_viewer.html
-    function loadAnnotationAndViewportOnElement(annotation, viewport, dicom_element, current_image_id_index) {
-        cornerstoneTools.globalImageIdSpecificToolStateManager.clear(dicom_element);
-        cornerstone.getEnabledElement(dicom_element).viewport = viewport
-        cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
-            annotation);
-        console.log("annotation", annotation)
-        console.log("viewport", viewport)
+        function loadAnnotationAndViewportOnElement(annotation, viewport, dicom_element, current_image_id_index) {
+            cornerstoneTools.globalImageIdSpecificToolStateManager.clear(dicom_element);
+            cornerstone.getEnabledElement(dicom_element).viewport = viewport
+            cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
+                annotation);
+            console.log("annotation", annotation)
+            console.log("viewport", viewport)
 
         //cornerstone.getEnabledElement(dicom_element).toolStateManager.restoreToolState(annotationjson)
-        cornerstone.resize(dicom_element);
-        console.log("current_image_id_index", current_image_id_index)
+            cornerstone.resize(dicom_element);
+            console.log("current_image_id_index", current_image_id_index)
         //current_image_id_index = parseInt(current_image_id_index);
 
-        console.log(current_image_id_index, Number.isInteger(current_image_id_index))
-        if (Number.isInteger(current_image_id_index)) {
-            console.log("loading stack index")
-            dicomViewer.loadStackIndex(current_image_id_index, dicom_element);
-        } else {
-            try {
-                console.log("current_image_id_index", current_image_id_index)
-                dicomViewer.loadImageById(current_image_id_index, dicom_element);
-            } catch (e) {
-                console.log(e)
-                console.log("loading image by id failed")
-                console.log("loading next annotation image")
-                dicomViewer.getNextAnnotationImage(dicom_element);
+            console.log(current_image_id_index, Number.isInteger(current_image_id_index))
+            if (Number.isInteger(current_image_id_index)) {
+                console.log("loading stack index")
+                dicomViewer.loadStackIndex(current_image_id_index, dicom_element);
+            } else {
+                try {
+                    console.log("current_image_id_index", current_image_id_index)
+                    dicomViewer.loadImageById(current_image_id_index, dicom_element);
+                } catch (e) {
+                    console.log(e)
+                    console.log("loading image by id failed")
+                    console.log("loading next annotation image")
+                    dicomViewer.getNextAnnotationImage(dicom_element);
+                }
             }
+
         }
 
-    }
+        document.addEventListener("DOMContentLoaded", function () {
 
-    document.addEventListener("DOMContentLoaded", function () {
-
-        const dicomDetails = document.getElementById("dicom-viewer-details");
-        let dicomViewerLoaded = false;
-        dicomDetails.addEventListener("toggle", function() {
-            if (!dicomViewerLoaded && dicomDetails.open) {
+            const dicomDetails = document.getElementById("dicom-viewer-details");
+            let dicomViewerLoaded = false;
+            dicomDetails.addEventListener("toggle", function() {
+                if (!dicomViewerLoaded && dicomDetails.open) {
                 // Use safe mount helper to avoid arbitrary timeouts
-                try { mountDicomViewersSafely(); } catch (e) { if (window.mountDicomViewers) try { window.mountDicomViewers(); } catch (er) { console.warn(er); } }
-                dicomViewerLoaded = true;
-            }
-        });
+                    try { mountDicomViewersSafely(); } catch (e) { if (window.mountDicomViewers) try { window.mountDicomViewers(); } catch (er) { console.warn(er); } }
+                    dicomViewerLoaded = true;
+                }
+            });
 
 
             // Move up/down logic
-        document.querySelectorAll("#series-reorder-list .move-up, #series-reorder-list .move-down").forEach(function(btn) {
-            btn.addEventListener("click", function(e) {
-                e.preventDefault();
-                const li = btn.closest("li");
-                if (btn.classList.contains("move-up") && li.previousElementSibling) {
-                    li.parentNode.insertBefore(li, li.previousElementSibling);
-                }
-                if (btn.classList.contains("move-down") && li.nextElementSibling) {
-                    li.parentNode.insertBefore(li.nextElementSibling, li);
-                }
-            });
-        });
-
-    // On submit, update the hidden inputs to match the new order
-        const reorderSeriesForm = document.getElementById("reorder-series-form");
-        if (reorderSeriesForm) {
-            reorderSeriesForm.addEventListener("submit", function(e) {
-                const lis = document.querySelectorAll("#series-reorder-list li");
-                lis.forEach((li, idx) => {
-                    li.querySelector("input[name='series_order']").setAttribute("name", "series_order_" + idx);
-                });
-            });
-        }
-
-// Drag and drop reordering for series list
-        const reorderList = document.getElementById("series-reorder-list");
-        let draggedItem = null;
-
-        if (reorderList) {
-            reorderList.querySelectorAll("li").forEach(function(li) {
-                li.setAttribute("draggable", "true");
-
-                li.addEventListener("dragstart", function(e) {
-                    draggedItem = li;
-                    li.classList.add("dragging");
-                    e.dataTransfer.effectAllowed = "move";
-                });
-
-                li.addEventListener("dragend", function() {
-                    draggedItem = null;
-                    li.classList.remove("dragging");
-                });
-
-                li.addEventListener("dragover", function(e) {
+            document.querySelectorAll("#series-reorder-list .move-up, #series-reorder-list .move-down").forEach(function(btn) {
+                btn.addEventListener("click", function(e) {
                     e.preventDefault();
-                    e.dataTransfer.dropEffect = "move";
-            // Visual feedback
-                    li.classList.add("drag-over");
-                });
-
-                li.addEventListener("dragleave", function() {
-                    li.classList.remove("drag-over");
-                });
-
-                li.addEventListener("drop", function(e) {
-                    e.preventDefault();
-                    li.classList.remove("drag-over");
-                    if (draggedItem && draggedItem !== li) {
-                // Insert before or after depending on mouse position
-                        const bounding = li.getBoundingClientRect();
-                        const offset = e.clientY - bounding.top;
-                        if (offset < bounding.height / 2) {
-                            li.parentNode.insertBefore(draggedItem, li);
-                        } else {
-                            li.parentNode.insertBefore(draggedItem, li.nextSibling);
-                        }
+                    const li = btn.closest("li");
+                    if (btn.classList.contains("move-up") && li.previousElementSibling) {
+                        li.parentNode.insertBefore(li, li.previousElementSibling);
+                    }
+                    if (btn.classList.contains("move-down") && li.nextElementSibling) {
+                        li.parentNode.insertBefore(li.nextElementSibling, li);
                     }
                 });
             });
-        }
 
-
-        const detailsElement = document.getElementById("series-actions");
-        const buttons = document.querySelectorAll(".select-series-btn");
-        const seriesCheckboxes = document.querySelectorAll("input[type='checkbox'][name='series-ids']");
-        const selectAllBtn = document.getElementById("series-select-all-btn");
-        const deselectAllBtn = document.getElementById("series-deselect-all-btn");
-        const seriesActionsModalEl = document.getElementById("seriesActionsModal");
-        const seriesActionsModal = seriesActionsModalEl ? new bootstrap.Modal(seriesActionsModalEl) : null;
-        const seriesModalSubheading = document.getElementById("seriesActionsModalSubheading");
-        const seriesModalOpenPrimaryBtn = document.getElementById("series-modal-open-primary-btn");
-        const seriesModalOpenNewViewportBtn = document.getElementById("series-modal-open-new-viewport-btn");
-        const seriesModalPageLink = document.getElementById("series-modal-page-link");
-        const seriesModalPopupBtn = document.getElementById("series-modal-popup-btn");
-        const seriesModalSelectBtn = document.getElementById("series-modal-select-btn");
-        let activeSeriesCard = null;
-
-        function toggleCheckboxes() {
-            const isOpen = detailsElement && detailsElement.hasAttribute("open");
-            buttons.forEach((button) => {
-                button.style.display = isOpen ? "inline-block" : "none";
-            });
-            if (seriesModalSelectBtn) {
-                seriesModalSelectBtn.style.display = isOpen ? "inline-block" : "none";
-            }
-        }
-
-        function toggleSeriesSelection(card) {
-            if (!card) {
-                return;
-            }
-            const checkbox = card.querySelector("input[type='checkbox'][name='series-ids']");
-            if (!checkbox) {
-                return;
-            }
-            checkbox.checked = !checkbox.checked;
-            syncSeriesSelectionUi();
-        }
-
-        function openSeriesActionsModal(card) {
-            if (!card || !seriesActionsModal) {
-                return;
+    // On submit, update the hidden inputs to match the new order
+            const reorderSeriesForm = document.getElementById("reorder-series-form");
+            if (reorderSeriesForm) {
+                reorderSeriesForm.addEventListener("submit", function(e) {
+                    const lis = document.querySelectorAll("#series-reorder-list li");
+                    lis.forEach((li, idx) => {
+                        li.querySelector("input[name='series_order']").setAttribute("name", "series_order_" + idx);
+                    });
+                });
             }
 
-            activeSeriesCard = card;
+// Drag and drop reordering for series list
+            const reorderList = document.getElementById("series-reorder-list");
+            let draggedItem = null;
 
-            const seriesId = card.dataset.seriesId;
-            const seriesLabel = card.dataset.seriesLabel || "Series";
-            const seriesName = card.dataset.seriesName || seriesLabel;
-            const detailUrl = card.dataset.seriesDetailUrl;
-            const popupUrl = card.dataset.seriesPopupUrl;
+            if (reorderList) {
+                reorderList.querySelectorAll("li").forEach(function(li) {
+                    li.setAttribute("draggable", "true");
 
-            if (seriesModalSubheading) {
-                seriesModalSubheading.textContent = `${seriesLabel} · ${seriesName}`;
-            }
-            if (seriesModalPageLink) {
-                seriesModalPageLink.href = detailUrl || "#";
-            }
-            if (seriesModalPopupBtn) {
-                seriesModalPopupBtn.onclick = function() {
-                    return window.create_popup_window(popupUrl, 'Series');
-                };
-            }
-            if (seriesModalOpenPrimaryBtn) {
-                seriesModalOpenPrimaryBtn.dataset.seriesId = seriesId;
-                seriesModalOpenPrimaryBtn.dataset.seriesName = seriesName;
-            }
-            if (seriesModalOpenNewViewportBtn) {
-                seriesModalOpenNewViewportBtn.dataset.seriesId = seriesId;
-                seriesModalOpenNewViewportBtn.dataset.seriesName = seriesName;
-            }
-            if (seriesModalSelectBtn) {
-                const checkbox = card.querySelector("input[type='checkbox'][name='series-ids']");
-                const isSelected = checkbox ? checkbox.checked : false;
-                seriesModalSelectBtn.textContent = isSelected ? "Deselect from manage series" : "Select for manage series";
+                    li.addEventListener("dragstart", function(e) {
+                        draggedItem = li;
+                        li.classList.add("dragging");
+                        e.dataTransfer.effectAllowed = "move";
+                    });
+
+                    li.addEventListener("dragend", function() {
+                        draggedItem = null;
+                        li.classList.remove("dragging");
+                    });
+
+                    li.addEventListener("dragover", function(e) {
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+            // Visual feedback
+                        li.classList.add("drag-over");
+                    });
+
+                    li.addEventListener("dragleave", function() {
+                        li.classList.remove("drag-over");
+                    });
+
+                    li.addEventListener("drop", function(e) {
+                        e.preventDefault();
+                        li.classList.remove("drag-over");
+                        if (draggedItem && draggedItem !== li) {
+                // Insert before or after depending on mouse position
+                            const bounding = li.getBoundingClientRect();
+                            const offset = e.clientY - bounding.top;
+                            if (offset < bounding.height / 2) {
+                                li.parentNode.insertBefore(draggedItem, li);
+                            } else {
+                                li.parentNode.insertBefore(draggedItem, li.nextSibling);
+                            }
+                        }
+                    });
+                });
             }
 
-            seriesActionsModal.show();
-        }
 
-        function syncSeriesSelectionUi() {
-            document.querySelectorAll(".select-series-btn").forEach(function(btn) {
-                const parent = btn.closest(".series-block");
-                if (!parent) {
+            const detailsElement = document.getElementById("series-actions");
+            const buttons = document.querySelectorAll(".select-series-btn");
+            const seriesCheckboxes = document.querySelectorAll("input[type='checkbox'][name='series-ids']");
+            const selectAllBtn = document.getElementById("series-select-all-btn");
+            const deselectAllBtn = document.getElementById("series-deselect-all-btn");
+            const seriesActionsModalEl = document.getElementById("seriesActionsModal");
+            const seriesActionsModal = seriesActionsModalEl ? new bootstrap.Modal(seriesActionsModalEl) : null;
+            const seriesModalSubheading = document.getElementById("seriesActionsModalSubheading");
+            const seriesModalOpenPrimaryBtn = document.getElementById("series-modal-open-primary-btn");
+            const seriesModalOpenNewViewportBtn = document.getElementById("series-modal-open-new-viewport-btn");
+            const seriesModalPageLink = document.getElementById("series-modal-page-link");
+            const seriesModalPopupBtn = document.getElementById("series-modal-popup-btn");
+            const seriesModalSelectBtn = document.getElementById("series-modal-select-btn");
+            let activeSeriesCard = null;
+
+            function toggleCheckboxes() {
+                const isOpen = detailsElement && detailsElement.hasAttribute("open");
+                buttons.forEach((button) => {
+                    button.style.display = isOpen ? "inline-block" : "none";
+                });
+                if (seriesModalSelectBtn) {
+                    seriesModalSelectBtn.style.display = isOpen ? "inline-block" : "none";
+                }
+            }
+
+            function toggleSeriesSelection(card) {
+                if (!card) {
                     return;
                 }
-                const checkbox = parent.querySelector("input[type='checkbox'][name='series-ids']");
+                const checkbox = card.querySelector("input[type='checkbox'][name='series-ids']");
                 if (!checkbox) {
                     return;
                 }
-                btn.classList.toggle("btn-primary", checkbox.checked);
-                btn.classList.toggle("btn-outline-primary", !checkbox.checked);
-                btn.textContent = checkbox.checked ? "Selected" : "Select";
-                if (checkbox.checked) {
-                    parent.classList.add("highlight-series");
-                } else {
-                    parent.classList.remove("highlight-series");
+                checkbox.checked = !checkbox.checked;
+                syncSeriesSelectionUi();
+            }
+
+            function openSeriesActionsModal(card) {
+                if (!card || !seriesActionsModal) {
+                    return;
                 }
+
+                activeSeriesCard = card;
+
+                const seriesId = card.dataset.seriesId;
+                const seriesLabel = card.dataset.seriesLabel || "Series";
+                const seriesName = card.dataset.seriesName || seriesLabel;
+                const detailUrl = card.dataset.seriesDetailUrl;
+                const popupUrl = card.dataset.seriesPopupUrl;
+
+                if (seriesModalSubheading) {
+                    seriesModalSubheading.textContent = `${seriesLabel} · ${seriesName}`;
+                }
+                if (seriesModalPageLink) {
+                    seriesModalPageLink.href = detailUrl || "#";
+                }
+                if (seriesModalPopupBtn) {
+                    seriesModalPopupBtn.onclick = function() {
+                        return window.create_popup_window(popupUrl, 'Series');
+                    };
+                }
+                if (seriesModalOpenPrimaryBtn) {
+                    seriesModalOpenPrimaryBtn.dataset.seriesId = seriesId;
+                    seriesModalOpenPrimaryBtn.dataset.seriesName = seriesName;
+                }
+                if (seriesModalOpenNewViewportBtn) {
+                    seriesModalOpenNewViewportBtn.dataset.seriesId = seriesId;
+                    seriesModalOpenNewViewportBtn.dataset.seriesName = seriesName;
+                }
+                if (seriesModalSelectBtn) {
+                    const checkbox = card.querySelector("input[type='checkbox'][name='series-ids']");
+                    const isSelected = checkbox ? checkbox.checked : false;
+                    seriesModalSelectBtn.textContent = isSelected ? "Deselect from manage series" : "Select for manage series";
+                }
+
+                seriesActionsModal.show();
+            }
+
+            function syncSeriesSelectionUi() {
+                document.querySelectorAll(".select-series-btn").forEach(function(btn) {
+                    const parent = btn.closest(".series-block");
+                    if (!parent) {
+                        return;
+                    }
+                    const checkbox = parent.querySelector("input[type='checkbox'][name='series-ids']");
+                    if (!checkbox) {
+                        return;
+                    }
+                    btn.classList.toggle("btn-primary", checkbox.checked);
+                    btn.classList.toggle("btn-outline-primary", !checkbox.checked);
+                    btn.textContent = checkbox.checked ? "Selected" : "Select";
+                    if (checkbox.checked) {
+                        parent.classList.add("highlight-series");
+                    } else {
+                        parent.classList.remove("highlight-series");
+                    }
+                });
+
+                const selectedCount = Array.from(seriesCheckboxes).filter((checkbox) => checkbox.checked).length;
+                if (selectAllBtn) {
+                    selectAllBtn.disabled = selectedCount === seriesCheckboxes.length && seriesCheckboxes.length > 0;
+                }
+                if (deselectAllBtn) {
+                    deselectAllBtn.disabled = selectedCount === 0;
+                }
+            }
+
+            document.querySelectorAll(".select-series-btn").forEach(function(btn) {
+                btn.addEventListener("click", function() {
+                    const parent = btn.closest(".series-block");
+                    toggleSeriesSelection(parent);
+                });
+            });
+
+            document.querySelectorAll("[data-series-action='details']").forEach(function(btn) {
+                btn.addEventListener("click", function() {
+                    openSeriesActionsModal(btn.closest(".series-block"));
+                });
+            });
+
+            if (seriesModalSelectBtn) {
+                seriesModalSelectBtn.addEventListener("click", function() {
+                    toggleSeriesSelection(activeSeriesCard);
+                    const checkbox = activeSeriesCard ? activeSeriesCard.querySelector("input[type='checkbox'][name='series-ids']") : null;
+                    seriesModalSelectBtn.textContent = checkbox && checkbox.checked ? "Deselect from manage series" : "Select for manage series";
+                });
+            }
+
+            if (seriesModalOpenPrimaryBtn) {
+                seriesModalOpenPrimaryBtn.addEventListener("click", function() {
+                    const matchingButton = document.querySelector(`.series-open-primary-btn[data-series-id='${this.dataset.seriesId}']`);
+                    if (matchingButton) {
+                        matchingButton.click();
+                        if (seriesActionsModal) {
+                            seriesActionsModal.hide();
+                        }
+                    }
+                });
+            }
+
+            if (seriesModalOpenNewViewportBtn) {
+                seriesModalOpenNewViewportBtn.addEventListener("click", function() {
+                    const matchingButton = document.querySelector(`.series-open-new-viewport-btn[data-series-id='${this.dataset.seriesId}']`);
+                    if (matchingButton) {
+                        matchingButton.click();
+                        if (seriesActionsModal) {
+                            seriesActionsModal.hide();
+                        }
+                    }
+                });
+            }
+
+            seriesCheckboxes.forEach((checkbox) => {
+                checkbox.addEventListener("change", syncSeriesSelectionUi);
             });
 
-            const selectedCount = Array.from(seriesCheckboxes).filter((checkbox) => checkbox.checked).length;
             if (selectAllBtn) {
-                selectAllBtn.disabled = selectedCount === seriesCheckboxes.length && seriesCheckboxes.length > 0;
+                selectAllBtn.addEventListener("click", function() {
+                    seriesCheckboxes.forEach((checkbox) => {
+                        checkbox.checked = true;
+                    });
+                    syncSeriesSelectionUi();
+                });
             }
+
             if (deselectAllBtn) {
-                deselectAllBtn.disabled = selectedCount === 0;
+                deselectAllBtn.addEventListener("click", function() {
+                    seriesCheckboxes.forEach((checkbox) => {
+                        checkbox.checked = false;
+                    });
+                    syncSeriesSelectionUi();
+                });
             }
-        }
-
-        document.querySelectorAll(".select-series-btn").forEach(function(btn) {
-            btn.addEventListener("click", function() {
-                const parent = btn.closest(".series-block");
-                toggleSeriesSelection(parent);
-            });
-        });
-
-        document.querySelectorAll("[data-series-action='details']").forEach(function(btn) {
-            btn.addEventListener("click", function() {
-                openSeriesActionsModal(btn.closest(".series-block"));
-            });
-        });
-
-        if (seriesModalSelectBtn) {
-            seriesModalSelectBtn.addEventListener("click", function() {
-                toggleSeriesSelection(activeSeriesCard);
-                const checkbox = activeSeriesCard ? activeSeriesCard.querySelector("input[type='checkbox'][name='series-ids']") : null;
-                seriesModalSelectBtn.textContent = checkbox && checkbox.checked ? "Deselect from manage series" : "Select for manage series";
-            });
-        }
-
-        if (seriesModalOpenPrimaryBtn) {
-            seriesModalOpenPrimaryBtn.addEventListener("click", function() {
-                const matchingButton = document.querySelector(`.series-open-primary-btn[data-series-id='${this.dataset.seriesId}']`);
-                if (matchingButton) {
-                    matchingButton.click();
-                    if (seriesActionsModal) {
-                        seriesActionsModal.hide();
-                    }
-                }
-            });
-        }
-
-        if (seriesModalOpenNewViewportBtn) {
-            seriesModalOpenNewViewportBtn.addEventListener("click", function() {
-                const matchingButton = document.querySelector(`.series-open-new-viewport-btn[data-series-id='${this.dataset.seriesId}']`);
-                if (matchingButton) {
-                    matchingButton.click();
-                    if (seriesActionsModal) {
-                        seriesActionsModal.hide();
-                    }
-                }
-            });
-        }
-
-        seriesCheckboxes.forEach((checkbox) => {
-            checkbox.addEventListener("change", syncSeriesSelectionUi);
-        });
-
-        if (selectAllBtn) {
-            selectAllBtn.addEventListener("click", function() {
-                seriesCheckboxes.forEach((checkbox) => {
-                    checkbox.checked = true;
-                });
-                syncSeriesSelectionUi();
-            });
-        }
-
-        if (deselectAllBtn) {
-            deselectAllBtn.addEventListener("click", function() {
-                seriesCheckboxes.forEach((checkbox) => {
-                    checkbox.checked = false;
-                });
-                syncSeriesSelectionUi();
-            });
-        }
 
         // Initial state
-        toggleCheckboxes();
-        syncSeriesSelectionUi();
+            toggleCheckboxes();
+            syncSeriesSelectionUi();
 
 
     // Show the alert when a result is received
-        const resultsSpan = document.getElementById("series-action-results");
-        const alertDiv = document.getElementById("series-action-alert");
-        const deleteSelectedSeriesBtn = document.getElementById("series-delete-selected-btn");
-        const observer = new MutationObserver(function(mutations) {
-            if (resultsSpan.textContent.trim() !== "") {
-                alertDiv.style.display = "block";
-            } else {
-                alertDiv.style.display = "none";
-            }
-        });
-        observer.observe(resultsSpan, { childList: true, subtree: true });
-
-        if (deleteSelectedSeriesBtn) {
-            deleteSelectedSeriesBtn.addEventListener("htmx:beforeRequest", function() {
-                deleteSelectedSeriesBtn.disabled = true;
-                alertDiv.classList.remove("alert-success", "alert-danger");
-                alertDiv.classList.add("alert-info");
-                resultsSpan.textContent = "Deleting selected series...";
-                alertDiv.style.display = "block";
-            });
-
-            deleteSelectedSeriesBtn.addEventListener("htmx:afterRequest", function(evt) {
-                deleteSelectedSeriesBtn.disabled = false;
-                const status = evt.detail && evt.detail.xhr ? evt.detail.xhr.status : 0;
-                alertDiv.classList.remove("alert-info", "alert-success", "alert-danger");
-                if (status >= 200 && status < 300) {
-                    alertDiv.classList.add("alert-success");
+            const resultsSpan = document.getElementById("series-action-results");
+            const alertDiv = document.getElementById("series-action-alert");
+            const deleteSelectedSeriesBtn = document.getElementById("series-delete-selected-btn");
+            const observer = new MutationObserver(function(mutations) {
+                if (resultsSpan.textContent.trim() !== "") {
+                    alertDiv.style.display = "block";
                 } else {
-                    alertDiv.classList.add("alert-danger");
+                    alertDiv.style.display = "none";
                 }
             });
-        }
+            observer.observe(resultsSpan, { childList: true, subtree: true });
+
+            if (deleteSelectedSeriesBtn) {
+                deleteSelectedSeriesBtn.addEventListener("htmx:beforeRequest", function() {
+                    deleteSelectedSeriesBtn.disabled = true;
+                    alertDiv.classList.remove("alert-success", "alert-danger");
+                    alertDiv.classList.add("alert-info");
+                    resultsSpan.textContent = "Deleting selected series...";
+                    alertDiv.style.display = "block";
+                });
+
+                deleteSelectedSeriesBtn.addEventListener("htmx:afterRequest", function(evt) {
+                    deleteSelectedSeriesBtn.disabled = false;
+                    const status = evt.detail && evt.detail.xhr ? evt.detail.xhr.status : 0;
+                    alertDiv.classList.remove("alert-info", "alert-success", "alert-danger");
+                    if (status >= 200 && status < 300) {
+                        alertDiv.classList.add("alert-success");
+                    } else {
+                        alertDiv.classList.add("alert-danger");
+                    }
+                });
+            }
 
         // Listen for toggle events on the <details> element
-        if (detailsElement) {
-            detailsElement.addEventListener("toggle", toggleCheckboxes);
-        }
+            if (detailsElement) {
+                detailsElement.addEventListener("toggle", toggleCheckboxes);
+            }
 
             // Display Set modal handler
-        const dsModal = new bootstrap.Modal(document.getElementById("displaysetModal"));
-        const dsModalBody = document.getElementById("displaysetModalBody");
-        const dsFullscreenModal = new bootstrap.Modal(document.getElementById("displaysetFullscreenModal"));
+            const dsModal = new bootstrap.Modal(document.getElementById("displaysetModal"));
+            const dsModalBody = document.getElementById("displaysetModalBody");
+            const dsFullscreenModal = new bootstrap.Modal(document.getElementById("displaysetFullscreenModal"));
 
         // Loader functions: can be called directly on reload
         // Helper: wait for mount function and mount the viewers safely
-        function waitForMountFn(timeout = 5000) {
-            if (window.mountDicomViewers) return Promise.resolve(window.mountDicomViewers);
-            return new Promise((resolve, reject) => {
-                const start = Date.now();
-                function poll() {
-                    if (window.mountDicomViewers) return resolve(window.mountDicomViewers);
-                    if (Date.now() - start > timeout) return reject(new Error('mountDicomViewers not available'));
-                    requestAnimationFrame(poll);
-                }
-                poll();
-            });
-        }
-
-        async function mountDicomViewersSafely(timeout = 5000) {
-            try {
-                // wait for layout to stabilise
-                await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
-                const mountFn = await waitForMountFn(timeout);
-                try { mountFn(); } catch (e) { console.warn('mountDicomViewers failed', e); }
-                // allow any async render to settle then force a resize event
-                requestAnimationFrame(() => {
-                    try { window.dispatchEvent(new Event('resize')); } catch (e) {}
-                    if (typeof window.resizeDicomViewers === 'function') try { window.resizeDicomViewers(); } catch (e) {}
-                });
-            } catch (err) {
-                console.warn('Viewer initialization deferred/fallback:', err);
-            }
-        }
-
-        async function loadDisplaysetModal(url, dsId) {
-            if (!url && dsId) url = `/atlas/${dsId}/display_sets/modal`;
-            if (!url) return;
-            dsModalBody.innerHTML = "<p>Loading...</p>";
-            try {
-                const resp = await fetch(url);
-                const html = await resp.text();
-                dsModalBody.innerHTML = html;
-                try {
-                    const fsBtn = document.querySelector('.displayset-fullscreen-btn');
-                    if (fsBtn) {
-                        fsBtn.dataset.url = url;
-                        if (dsId) fsBtn.dataset.dsId = dsId;
+            function waitForMountFn(timeout = 5000) {
+                if (window.mountDicomViewers) return Promise.resolve(window.mountDicomViewers);
+                return new Promise((resolve, reject) => {
+                    const start = Date.now();
+                    function poll() {
+                        if (window.mountDicomViewers) return resolve(window.mountDicomViewers);
+                        if (Date.now() - start > timeout) return reject(new Error('mountDicomViewers not available'));
+                        requestAnimationFrame(poll);
                     }
-                } catch (e) { console.warn(e); }
-                try { setUrlParam('displayset', dsId); } catch (e) {}
-                // Initialize viewer deterministically after injecting HTML
-                mountDicomViewersSafely();
-                dsModal.show();
-            } catch (error) {
-                console.error('Error loading display set details:', error);
-                dsModalBody.innerHTML = "<p>Failed to load display set.</p>";
+                    poll();
+                });
             }
-        }
 
-        async function loadDisplaysetFullscreen(url, dsId) {
-            if (!url && dsId) url = `/atlas/${dsId}/display_sets/modal`;
-            if (!url) return;
-            document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Loading viewer...</p>';
-            document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Loading details...</p>';
-            try {
-                const resp = await fetch(url);
-                const html = await resp.text();
-                const tmp = document.createElement('div');
-                tmp.innerHTML = html;
-                const viewer = tmp.querySelector('.dicom-viewer-root');
-                if (viewer) {
-                    const left = document.getElementById('displaysetFullscreenLeft');
-                    left.innerHTML = '';
-                    left.appendChild(viewer);
-                    try { viewer.style.height='100%'; viewer.style.minHeight='100%'; viewer.style.width='100%'; viewer.style.display='block'; viewer.style.flex='1 1 auto'; } catch (e){}
-                } else {
-                    document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">No viewer available</p>';
+            async function mountDicomViewersSafely(timeout = 5000) {
+                try {
+                // wait for layout to stabilise
+                    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+                    const mountFn = await waitForMountFn(timeout);
+                    try { mountFn(); } catch (e) { console.warn('mountDicomViewers failed', e); }
+                // allow any async render to settle then force a resize event
+                    requestAnimationFrame(() => {
+                        try { window.dispatchEvent(new Event('resize')); } catch (e) {}
+                        if (typeof window.resizeDicomViewers === 'function') try { window.resizeDicomViewers(); } catch (e) {}
+                    });
+                } catch (err) {
+                    console.warn('Viewer initialization deferred/fallback:', err);
                 }
-                const viewerInTmp = tmp.querySelector('.dicom-viewer-root');
-                if (viewerInTmp) viewerInTmp.remove();
-                document.getElementById('displaysetFullscreenRight').innerHTML = tmp.innerHTML;
-                try { if (dsId) { setUrlParam('displayset', dsId); setUrlParam('displayset_full', '1'); } } catch (e) {}
-                dsFullscreenModal.show();
-                // Ensure viewer is mounted and resized after moving into fullscreen
-                mountDicomViewersSafely();
-            } catch (error) {
-                console.error('Error loading fullscreen display set:', error);
-                document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Failed to load viewer</p>';
-                document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Failed to load details.</p>';
             }
-        }
 
-        async function loadFindingModal(findingId, url) {
-            if (!url && findingId) url = `/atlas/series_finding/${findingId}/details/`;
-            if (!url) return;
-            const modalBody = document.getElementById('findingModalBody');
-            modalBody.innerHTML = '<p>Loading...</p>';
-            try {
-                const resp = await fetch(url);
-                const html = await resp.text();
-                modalBody.innerHTML = html;
-                // Ensure viewers mount after content injection
-                mountDicomViewersSafely();
-                try { setUrlParam('finding', findingId); } catch (e) {}
-                const modal = new bootstrap.Modal(document.getElementById('findingModal'));
-                modal.show();
-                document.getElementById('reload-finding')?.addEventListener('click', function () { mountDicomViewersSafely(); });
-            } catch (e) {
-                console.error('Error loading finding details:', e);
-                modalBody.innerHTML = '<p>Failed to load finding details.</p>';
+            async function loadDisplaysetModal(url, dsId) {
+                if (!url && dsId) url = `/atlas/${dsId}/display_sets/modal`;
+                if (!url) return;
+                dsModalBody.innerHTML = "<p>Loading...</p>";
+                try {
+                    const resp = await fetch(url);
+                    const html = await resp.text();
+                    dsModalBody.innerHTML = html;
+                    try {
+                        const fsBtn = document.querySelector('.displayset-fullscreen-btn');
+                        if (fsBtn) {
+                            fsBtn.dataset.url = url;
+                            if (dsId) fsBtn.dataset.dsId = dsId;
+                        }
+                    } catch (e) { console.warn(e); }
+                    try { setUrlParam('displayset', dsId); } catch (e) {}
+                // Initialize viewer deterministically after injecting HTML
+                    mountDicomViewersSafely();
+                    dsModal.show();
+                } catch (error) {
+                    console.error('Error loading display set details:', error);
+                    dsModalBody.innerHTML = "<p>Failed to load display set.</p>";
+                }
+            }
+
+            async function loadDisplaysetFullscreen(url, dsId) {
+                if (!url && dsId) url = `/atlas/${dsId}/display_sets/modal`;
+                if (!url) return;
+                document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Loading viewer...</p>';
+                document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Loading details...</p>';
+                try {
+                    const resp = await fetch(url);
+                    const html = await resp.text();
+                    const tmp = document.createElement('div');
+                    tmp.innerHTML = html;
+                    const viewer = tmp.querySelector('.dicom-viewer-root');
+                    if (viewer) {
+                        const left = document.getElementById('displaysetFullscreenLeft');
+                        left.innerHTML = '';
+                        left.appendChild(viewer);
+                        try { viewer.style.height='100%'; viewer.style.minHeight='100%'; viewer.style.width='100%'; viewer.style.display='block'; viewer.style.flex='1 1 auto'; } catch (e){}
+                    } else {
+                        document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">No viewer available</p>';
+                    }
+                    const viewerInTmp = tmp.querySelector('.dicom-viewer-root');
+                    if (viewerInTmp) viewerInTmp.remove();
+                    document.getElementById('displaysetFullscreenRight').innerHTML = tmp.innerHTML;
+                    try { if (dsId) { setUrlParam('displayset', dsId); setUrlParam('displayset_full', '1'); } } catch (e) {}
+                    dsFullscreenModal.show();
+                // Ensure viewer is mounted and resized after moving into fullscreen
+                    mountDicomViewersSafely();
+                } catch (error) {
+                    console.error('Error loading fullscreen display set:', error);
+                    document.getElementById('displaysetFullscreenLeft').innerHTML = '<p style="color:#fff; padding:1rem;">Failed to load viewer</p>';
+                    document.getElementById('displaysetFullscreenRight').innerHTML = '<p>Failed to load details.</p>';
+                }
+            }
+
+            async function loadFindingModal(findingId, url) {
+                if (!url && findingId) url = `/atlas/series_finding/${findingId}/details/`;
+                if (!url) return;
+                const modalBody = document.getElementById('findingModalBody');
+                modalBody.innerHTML = '<p>Loading...</p>';
+                try {
+                    const resp = await fetch(url);
+                    const html = await resp.text();
+                    modalBody.innerHTML = html;
+                // Ensure viewers mount after content injection
+                    mountDicomViewersSafely();
+                    try { setUrlParam('finding', findingId); } catch (e) {}
+                    const modal = new bootstrap.Modal(document.getElementById('findingModal'));
+                    modal.show();
+                    document.getElementById('reload-finding')?.addEventListener('click', function () { mountDicomViewersSafely(); });
+                } catch (e) {
+                    console.error('Error loading finding details:', e);
+                    modalBody.innerHTML = '<p>Failed to load finding details.</p>';
+                }
             }
-        }
 
         // remove displayset param when modal closed
-        document.getElementById('displaysetModal').addEventListener('hidden.bs.modal', function () {
-            try { removeUrlParam('displayset'); removeUrlParam('displayset_full'); } catch (e) {}
-        });
+            document.getElementById('displaysetModal').addEventListener('hidden.bs.modal', function () {
+                try { removeUrlParam('displayset'); removeUrlParam('displayset_full'); } catch (e) {}
+            });
 
         // remove fullscreen param when fullscreen modal closed
-        document.getElementById('displaysetFullscreenModal').addEventListener('hidden.bs.modal', function () {
-            try { removeUrlParam('displayset_full'); } catch (e) {}
-        });
+            document.getElementById('displaysetFullscreenModal').addEventListener('hidden.bs.modal', function () {
+                try { removeUrlParam('displayset_full'); } catch (e) {}
+            });
 
         // FINDING modal: push/remove param so it can be reopened after reload
-        document.querySelectorAll(".view-finding-modal").forEach(button => {
-            button.addEventListener("click", function () {
-                const findingId = this.getAttribute("data-finding-id");
-                const url = this.getAttribute('data-url');
-                loadFindingModal(findingId, url);
+            document.querySelectorAll(".view-finding-modal").forEach(button => {
+                button.addEventListener("click", function () {
+                    const findingId = this.getAttribute("data-finding-id");
+                    const url = this.getAttribute('data-url');
+                    loadFindingModal(findingId, url);
+                });
+            });
+            document.getElementById('findingModal').addEventListener('hidden.bs.modal', function () {
+                try { removeUrlParam('finding'); } catch (e) {}
             });
-        });
-        document.getElementById('findingModal').addEventListener('hidden.bs.modal', function () {
-            try { removeUrlParam('finding'); } catch (e) {}
-        });
 
         // Helper: set/remove URL search params without reloading
-        function setUrlParam(key, value) {
-            if (!key) return;
-            const url = new URL(window.location.href);
-            if (value === null || value === undefined) {
-                url.searchParams.delete(key);
-            } else {
-                url.searchParams.set(key, value);
+            function setUrlParam(key, value) {
+                if (!key) return;
+                const url = new URL(window.location.href);
+                if (value === null || value === undefined) {
+                    url.searchParams.delete(key);
+                } else {
+                    url.searchParams.set(key, value);
+                }
+                window.history.replaceState({}, '', url.toString());
             }
-            window.history.replaceState({}, '', url.toString());
-        }
 
-        function removeUrlParam(key) {
-            const url = new URL(window.location.href);
-            url.searchParams.delete(key);
-            window.history.replaceState({}, '', url.toString());
-        }
+            function removeUrlParam(key) {
+                const url = new URL(window.location.href);
+                url.searchParams.delete(key);
+                window.history.replaceState({}, '', url.toString());
+            }
 
         // On load: reopen modals if URL params present — call loader functions directly
-        (function reopenModalsFromUrl() {
-            const params = new URL(window.location.href).searchParams;
-            const dsId = params.get('displayset');
-            const dsFull = params.get('displayset_full');
-            const findingId = params.get('finding');
-            if (dsId) {
+            (function reopenModalsFromUrl() {
+                const params = new URL(window.location.href).searchParams;
+                const dsId = params.get('displayset');
+                const dsFull = params.get('displayset_full');
+                const findingId = params.get('finding');
+                if (dsId) {
                 // prefer to use existing button url if present, otherwise construct endpoint
-                const btn = document.querySelector(`.view-displayset-modal[data-ds-id="${dsId}"]`);
-                const url = btn ? btn.dataset.url : null;
-                if (dsFull) {
-                    loadDisplaysetFullscreen(url, dsId);
-                } else {
-                    loadDisplaysetModal(url, dsId);
-                }
-            } else if (findingId) {
+                    const btn = document.querySelector(`.view-displayset-modal[data-ds-id="${dsId}"]`);
+                    const url = btn ? btn.dataset.url : null;
+                    if (dsFull) {
+                        loadDisplaysetFullscreen(url, dsId);
+                    } else {
+                        loadDisplaysetModal(url, dsId);
+                    }
+                } else if (findingId) {
                 // open finding modal
-                const fbtn = document.querySelector(`.view-finding-modal[data-finding-id="${findingId}"]`);
-                const url = fbtn ? fbtn.getAttribute('data-url') : null;
-                loadFindingModal(findingId, url);
-            }
-        })();
+                    const fbtn = document.querySelector(`.view-finding-modal[data-finding-id="${findingId}"]`);
+                    const url = fbtn ? fbtn.getAttribute('data-url') : null;
+                    loadFindingModal(findingId, url);
+                }
+            })();
 
         // Series viewer button handlers: open series in primary viewport or new viewport.
-        (function initSeriesViewerButtons() {
-            if (window.__seriesViewerButtonsBound) return;
-            window.__seriesViewerButtonsBound = true;
+            (function initSeriesViewerButtons() {
+                if (window.__seriesViewerButtonsBound) return;
+                window.__seriesViewerButtonsBound = true;
 
-            function getViewerApi(baseName, fallbackName) {
-                const fn = window[`${baseName}_main_viewer`] || (fallbackName ? window[fallbackName] : null);
-                return typeof fn === 'function' ? fn : null;
-            }
-
-            function ensureViewerOpen() {
-                const viewerDetails = document.getElementById('dicom-viewer-details');
-                if (viewerDetails && !viewerDetails.hasAttribute('open')) {
-                    viewerDetails.setAttribute('open', 'open');
-                    viewerDetails.dispatchEvent(new Event('toggle', { bubbles: true }));
+                function getViewerApi(baseName, fallbackName) {
+                    const fn = window[`${baseName}_main_viewer`] || (fallbackName ? window[fallbackName] : null);
+                    return typeof fn === 'function' ? fn : null;
                 }
-            }
 
-            function flattenNamedStacks(raw) {
-                const out = [];
-                if (!Array.isArray(raw)) {
+                function ensureViewerOpen() {
+                    const viewerDetails = document.getElementById('dicom-viewer-details');
+                    if (viewerDetails && !viewerDetails.hasAttribute('open')) {
+                        viewerDetails.setAttribute('open', 'open');
+                        viewerDetails.dispatchEvent(new Event('toggle', { bubbles: true }));
+                    }
+                }
+
+                function flattenNamedStacks(raw) {
+                    const out = [];
+                    if (!Array.isArray(raw)) {
+                        return out;
+                    }
+
+                    raw.forEach((item) => {
+                        if (item && typeof item === 'object' && Array.isArray(item.stacks)) {
+                            const caseId = item.caseId;
+                            const studyId = item.studyId;
+                            item.stacks.forEach((stack) => {
+                                if (stack && Array.isArray(stack.imageIds)) {
+                                    out.push({
+                                        imageIds: stack.imageIds,
+                                        name: stack.name || '',
+                                        caseId: stack.caseId || caseId,
+                                        studyId: stack.studyId || studyId,
+                                        seriesId: stack.seriesId || null,
+                                    });
+                                }
+                            });
+                        } else if (item && typeof item === 'object' && Array.isArray(item.imageIds)) {
+                            out.push({
+                                imageIds: item.imageIds,
+                                name: item.name || '',
+                                caseId: item.caseId || null,
+                                studyId: item.studyId || null,
+                                seriesId: item.seriesId || null,
+                            });
+                        }
+                    });
+
                     return out;
                 }
 
-                raw.forEach((item) => {
-                    if (item && typeof item === 'object' && Array.isArray(item.stacks)) {
-                        const caseId = item.caseId;
-                        const studyId = item.studyId;
-                        item.stacks.forEach((stack) => {
-                            if (stack && Array.isArray(stack.imageIds)) {
-                                out.push({
-                                    imageIds: stack.imageIds,
-                                    name: stack.name || '',
-                                    caseId: stack.caseId || caseId,
-                                    studyId: stack.studyId || studyId,
-                                    seriesId: stack.seriesId || null,
-                                });
-                            }
-                        });
-                    } else if (item && typeof item === 'object' && Array.isArray(item.imageIds)) {
-                        out.push({
-                            imageIds: item.imageIds,
-                            name: item.name || '',
-                            caseId: item.caseId || null,
-                            studyId: item.studyId || null,
-                            seriesId: item.seriesId || null,
-                        });
+                function getNamedStacksFromMainViewer() {
+                    const mainViewer = document.getElementById('main_viewer');
+                    if (!mainViewer) {
+                        return [];
                     }
-                });
 
-                return out;
-            }
-
-            function getNamedStacksFromMainViewer() {
-                const mainViewer = document.getElementById('main_viewer');
-                if (!mainViewer) {
-                    return [];
+                    const raw = mainViewer.getAttribute('data-named-stacks') || '[]';
+                    try {
+                        return flattenNamedStacks(JSON.parse(raw));
+                    } catch (e) {
+                        console.warn('Failed to parse data-named-stacks', e);
+                        return [];
+                    }
                 }
 
-                const raw = mainViewer.getAttribute('data-named-stacks') || '[]';
-                try {
-                    return flattenNamedStacks(JSON.parse(raw));
-                } catch (e) {
-                    console.warn('Failed to parse data-named-stacks', e);
-                    return [];
-                }
-            }
-
-            function findStackBySeries(stacks, seriesId, seriesName) {
-                const idNum = Number(seriesId);
-                let match = stacks.find((stack) => Number(stack.seriesId) === idNum);
-                if (!match && seriesName) {
-                    match = stacks.find((stack) => String(stack.name || '').trim() === String(seriesName).trim());
-                }
-                return match || null;
-            }
-
-            async function openSeriesInPrimary(seriesId, seriesName) {
-                ensureViewerOpen();
-                const mainViewer = document.getElementById('main_viewer');
-                if (!mainViewer) {
-                    return;
+                function findStackBySeries(stacks, seriesId, seriesName) {
+                    const idNum = Number(seriesId);
+                    let match = stacks.find((stack) => Number(stack.seriesId) === idNum);
+                    if (!match && seriesName) {
+                        match = stacks.find((stack) => String(stack.name || '').trim() === String(seriesName).trim());
+                    }
+                    return match || null;
                 }
 
-                const stacks = getNamedStacksFromMainViewer();
-                const target = findStackBySeries(stacks, seriesId, seriesName);
-                if (!target) {
-                    alert('Series stack not found in this case viewer.');
-                    return;
+                async function openSeriesInPrimary(seriesId, seriesName) {
+                    ensureViewerOpen();
+                    const mainViewer = document.getElementById('main_viewer');
+                    if (!mainViewer) {
+                        return;
+                    }
+
+                    const stacks = getNamedStacksFromMainViewer();
+                    const target = findStackBySeries(stacks, seriesId, seriesName);
+                    if (!target) {
+                        alert('Series stack not found in this case viewer.');
+                        return;
+                    }
+
+                    const reordered = [target, ...stacks.filter((s) => s !== target)];
+                    mainViewer.setAttribute('data-named-stacks', JSON.stringify(reordered));
+                    try {
+                        await mountDicomViewersSafely();
+                    } catch (e) {
+                        console.warn('Failed to remount viewer', e);
+                    }
                 }
 
-                const reordered = [target, ...stacks.filter((s) => s !== target)];
-                mainViewer.setAttribute('data-named-stacks', JSON.stringify(reordered));
-                try {
-                    await mountDicomViewersSafely();
-                } catch (e) {
-                    console.warn('Failed to remount viewer', e);
-                }
-            }
+                async function openSeriesInNewViewport(seriesId, seriesName) {
+                    ensureViewerOpen();
+                    const stacks = getNamedStacksFromMainViewer();
+                    const target = findStackBySeries(stacks, seriesId, seriesName);
+                    if (!target) {
+                        alert('Series stack not found in this case viewer.');
+                        return;
+                    }
 
-            async function openSeriesInNewViewport(seriesId, seriesName) {
-                ensureViewerOpen();
-                const stacks = getNamedStacksFromMainViewer();
-                const target = findStackBySeries(stacks, seriesId, seriesName);
-                if (!target) {
-                    alert('Series stack not found in this case viewer.');
-                    return;
-                }
+                    const exportStateFn = getViewerApi('exportViewerState');
+                    const importStateFn = getViewerApi('importViewerState');
 
-                const exportStateFn = getViewerApi('exportViewerState');
-                const importStateFn = getViewerApi('importViewerState');
-
-                if (!exportStateFn || !importStateFn) {
+                    if (!exportStateFn || !importStateFn) {
                     // Fallback: at least add stack to viewer list and auto-fill an empty viewport if available.
-                    const loadAdditionalStackFn = getViewerApi('loadAdditionalStack');
-                    if (loadAdditionalStackFn) {
-                        await loadAdditionalStackFn(target.imageIds, target.studyId);
-                    }
-                    return;
-                }
-
-                let state = {};
-                try {
-                    state = JSON.parse(exportStateFn() || '{}');
-                } catch (e) {
-                    state = {};
-                }
-
-                const currentStacks = Array.isArray(state.stacks) ? [...state.stacks] : [];
-                const toNorm = (ids) => (Array.isArray(ids) ? ids.map((id) => String(id).replace(/^wadouri:/, '')) : []);
-                const targetNorm = toNorm(target.imageIds);
-
-                let targetIdx = currentStacks.findIndex((stack) => {
-                    const ids = Array.isArray(stack?.i) ? stack.i : [];
-                    const norm = toNorm(ids);
-                    return norm.length === targetNorm.length && norm.every((id, i) => id === targetNorm[i]);
-                });
-
-                if (targetIdx < 0) {
-                    currentStacks.push({ i: target.imageIds, u: target.studyId || undefined });
-                    targetIdx = currentStacks.length - 1;
-                }
-
-                const grid = state.grid && Number.isFinite(state.grid.rows) && Number.isFinite(state.grid.cols)
-                    ? { rows: Math.max(1, Number(state.grid.rows)), cols: Math.max(1, Number(state.grid.cols)) }
-                    : { rows: 1, cols: 1 };
-
-                if ((grid.rows * grid.cols) < 2) {
-                    grid.cols = 2;
-                }
-
-                const numActive = Math.max(2, grid.rows * grid.cols);
-                const stackIdx = Array.isArray(state.stackIdx) ? [...state.stackIdx] : [];
-                const modes = Array.isArray(state.modes) ? [...state.modes] : [];
-                while (stackIdx.length < numActive) {
-                    stackIdx.push(0);
-                }
-                while (modes.length < numActive) {
-                    modes.push('stack');
-                }
-                stackIdx[1] = targetIdx;
-                modes[0] = 'stack';
-                modes[1] = 'stack';
-
-                const nextState = {
-                    ...state,
-                    grid,
-                    stacks: currentStacks,
-                    stackIdx,
-                    modes,
-                };
-
-                importStateFn(JSON.stringify(nextState));
-            }
-
-            document.querySelectorAll('.series-open-primary-btn').forEach((btn) => {
-                btn.addEventListener('click', async function (e) {
-                    e.preventDefault();
-                    const seriesId = this.getAttribute('data-series-id');
-                    const seriesName = this.getAttribute('data-series-name') || '';
-                    if (!seriesId) {
+                        const loadAdditionalStackFn = getViewerApi('loadAdditionalStack');
+                        if (loadAdditionalStackFn) {
+                            await loadAdditionalStackFn(target.imageIds, target.studyId);
+                        }
                         return;
                     }
-                    await openSeriesInPrimary(seriesId, seriesName);
-                });
-            });
 
-            document.querySelectorAll('.series-open-new-viewport-btn').forEach((btn) => {
-                btn.addEventListener('click', async function (e) {
-                    e.preventDefault();
-                    const seriesId = this.getAttribute('data-series-id');
-                    const seriesName = this.getAttribute('data-series-name') || '';
-                    if (!seriesId) {
-                        return;
+                    let state = {};
+                    try {
+                        state = JSON.parse(exportStateFn() || '{}');
+                    } catch (e) {
+                        state = {};
                     }
-                    await openSeriesInNewViewport(seriesId, seriesName);
+
+                    const currentStacks = Array.isArray(state.stacks) ? [...state.stacks] : [];
+                    const toNorm = (ids) => (Array.isArray(ids) ? ids.map((id) => String(id).replace(/^wadouri:/, '')) : []);
+                    const targetNorm = toNorm(target.imageIds);
+
+                    let targetIdx = currentStacks.findIndex((stack) => {
+                        const ids = Array.isArray(stack?.i) ? stack.i : [];
+                        const norm = toNorm(ids);
+                        return norm.length === targetNorm.length && norm.every((id, i) => id === targetNorm[i]);
+                    });
+
+                    if (targetIdx < 0) {
+                        currentStacks.push({ i: target.imageIds, u: target.studyId || undefined });
+                        targetIdx = currentStacks.length - 1;
+                    }
+
+                    const grid = state.grid && Number.isFinite(state.grid.rows) && Number.isFinite(state.grid.cols)
+                        ? { rows: Math.max(1, Number(state.grid.rows)), cols: Math.max(1, Number(state.grid.cols)) }
+                        : { rows: 1, cols: 1 };
+
+                    if ((grid.rows * grid.cols) < 2) {
+                        grid.cols = 2;
+                    }
+
+                    const numActive = Math.max(2, grid.rows * grid.cols);
+                    const stackIdx = Array.isArray(state.stackIdx) ? [...state.stackIdx] : [];
+                    const modes = Array.isArray(state.modes) ? [...state.modes] : [];
+                    while (stackIdx.length < numActive) {
+                        stackIdx.push(0);
+                    }
+                    while (modes.length < numActive) {
+                        modes.push('stack');
+                    }
+                    stackIdx[1] = targetIdx;
+                    modes[0] = 'stack';
+                    modes[1] = 'stack';
+
+                    const nextState = {
+                        ...state,
+                        grid,
+                        stacks: currentStacks,
+                        stackIdx,
+                        modes,
+                    };
+
+                    importStateFn(JSON.stringify(nextState));
+                }
+
+                document.querySelectorAll('.series-open-primary-btn').forEach((btn) => {
+                    btn.addEventListener('click', async function (e) {
+                        e.preventDefault();
+                        const seriesId = this.getAttribute('data-series-id');
+                        const seriesName = this.getAttribute('data-series-name') || '';
+                        if (!seriesId) {
+                            return;
+                        }
+                        await openSeriesInPrimary(seriesId, seriesName);
+                    });
                 });
-            });
-        })();
 
-    });
+                document.querySelectorAll('.series-open-new-viewport-btn').forEach((btn) => {
+                    btn.addEventListener('click', async function (e) {
+                        e.preventDefault();
+                        const seriesId = this.getAttribute('data-series-id');
+                        const seriesName = this.getAttribute('data-series-name') || '';
+                        if (!seriesId) {
+                            return;
+                        }
+                        await openSeriesInNewViewport(seriesId, seriesName);
+                    });
+                });
+            })();
+
+        });
 
 
-</script>
+    </script>
 
-<style>
+    <style>
     /* Highlight style for the series-block (subtle Bootstrap-like accent) */
-    .highlight-series {
-        background-color: rgba(13,110,253,0.04);
-        border: 1px solid rgba(13,110,253,0.12);
-        transition: box-shadow 0.18s ease, transform 0.12s ease;
-        box-shadow: 0 4px 12px rgba(13,110,253,0.04);
-    }
-    #series-reorder-list .dragging {
-        opacity: 0.5;
-    }
-    #series-reorder-list .drag-over {
-        border-top: 2px solid #0d6efd;
-    }
-    .series-panel {
-        border: 1px solid rgba(13,110,253,0.2);
-        border-radius: 0.75rem;
-        background: rgba(255,255,255,0.02);
-        padding: 0.5rem 0.75rem;
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        max-width: 100%;
-    }
-    .series-panel-summary {
-        list-style: none;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1rem;
-        padding: 0.5rem 0;
-        cursor: pointer;
-    }
-    .series-panel-summary::-webkit-details-marker { display: none; }
-    .series-panel-title {
-        font-size: 0.95rem;
-        font-weight: 700;
-    }
-    .series-panel-badge {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 5.5rem;
-        padding: .35rem .75rem;
-        border-radius: 999px;
-        background: rgba(13,110,253,0.12);
-        color: #9ec5fe;
-        font-size: .8rem;
-        font-weight: 600;
-    }
-    .series-panel-body {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-        padding: 0.5rem 0;
-    }
-    .series-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        gap: .75rem;
-    }
-    .series-toolbar-btn {
-        min-width: 160px;
-    }
-    .series-card-grid {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.75rem;
-        align-items: flex-start;
-    }
-    .series-block {
-        flex: 0 1 auto;
-        min-width: 260px;
-        max-width: 320px;
-    }
-    .series-card-shell {
-        display: flex;
-        flex-direction: column;
-        gap: 0.4rem;
-        padding: 0.7rem;
-        border: 1px solid rgba(255,255,255,0.1);
-        border-radius: 0.6rem;
-        background: rgba(15,23,42,0.3);
-        height: 100%;
-    }
-    .series-card-main {
-        display: flex;
-        align-items: flex-start;
-        gap: 0.5rem;
-        width: 100%;
-        border: 0;
-        background: transparent;
-        padding: 0;
-        text-align: left;
-        color: inherit;
-        cursor: pointer;
-        flex-shrink: 0;
-    }
-    .series-card-main:hover .series-card-description,
-    .series-card-main:focus-visible .series-card-description {
-        color: #fff;
-    }
-    .series-card-main:focus-visible {
-        outline: 2px solid rgba(13,110,253,0.6);
-        outline-offset: 2px;
-    }
-    .series-card-thumb-wrap {
-        flex-shrink: 0;
-        width: 64px;
-        min-width: 64px;
-        height: 64px;
-        line-height: 0;
-    }
-    .series-card-thumb {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 0.4rem;
-        border: 1px solid rgba(255,255,255,0.1);
-        display: block;
-        background: rgba(255,255,255,0.04);
-    }
-    .series-card-thumb-generated,
-    .series-card-thumb-generated span {
-        width: 100%;
-        height: 100%;
-        display: block;
-        border-radius: 0.4rem;
-        overflow: hidden;
-        border: 1px solid rgba(255,255,255,0.1);
-        background: rgba(255,255,255,0.04);
-    }
-    .series-card-thumb-generated img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
-    }
-    .series-card-thumb-placeholder {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #6c757d;
-        font-size: 1rem;
-        background: rgba(255,255,255,0.04);
-        border: 1px solid rgba(255,255,255,0.1);
-        border-radius: 0.4rem;
-    }
-    .series-card-content {
-        flex: 1;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: 0.15rem;
-    }
-    .series-card-heading {
-        font-size: 0.85rem;
-        font-weight: 600;
-        line-height: 1.15;
-    }
-    .series-card-series-number {
-        font-weight: 700;
-    }
-    .series-card-image-count {
-        font-size: 0.75rem;
-        color: #adb5bd;
-    }
-    .series-card-description {
-        font-size: 0.8rem;
-        line-height: 1.2;
-        color: #d4d8dd;
-        display: -webkit-box;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-    }
-    .series-card-controls {
-        display: flex;
-        gap: 0.4rem;
-        margin-top: auto;
-    }
-    .series-card-controls .btn {
-        flex: 1;
-        min-width: 0;
-        padding: 0.3rem 0.4rem;
-        font-size: 0.75rem;
-    }
-    .series-block.highlight-series .series-card-shell,
-    .series-block:hover .series-card-shell {
-        border-color: rgba(13,110,253,0.5);
-        background: rgba(13,110,253,0.08);
-    }
-    .series-actions[open] {
-        border: 2px solid #0d6efd;
-        border-radius: .85rem;
-        padding: .85rem;
-    }
-    .series-actions {
-        flex: 1 1 auto;
-        min-width: 0;
-        display: flex;
-        flex-direction: column;
-        gap: .5rem;
-        border: 1px solid rgba(0,0,0,0.06);
-        border-radius: .85rem;
-        padding: .5rem;
-        background: rgba(255,255,255,0.02);
-    }
-    .series-actions-summary { list-style: none; }
-    .series-actions-summary::-webkit-details-marker { display:none; }
-    .series-actions-body {
-        display: flex;
-        flex-direction: column;
-        gap: .5rem;
-    }
-    .series-selection-toolbar {
-        border-top: 1px solid rgba(0,0,0,0.08);
-        border-bottom: 1px solid rgba(0,0,0,0.08);
-        padding: .5rem 0;
-    }
-    .series-actions-grid .btn,
-    .series-actions-body > a.btn,
-    .series-move-panel .btn {
-        width: 100%;
-    }
-    .series-move-panel {
-        background: rgba(255,255,255,0.03);
-    }
-    .series-move-panel .case-details {
-        margin-bottom: .5rem;
-    }
-    .series-actions .btn {
-        vertical-align: middle;
-        text-align: left;
-    }
-    #series-delete-indicator {
-        display: none;
-    }
-    #series-delete-indicator.htmx-request {
-        display: inline-flex;
-        align-items: center;
-    }
-    .case-detail-section {
-        border: 1px solid rgba(255,255,255,0.08);
-        background: rgba(255,255,255,0.02);
-    }
-    .case-detail-section .card-header {
-        background: rgba(255,255,255,0.03);
-        border-bottom: 1px solid rgba(255,255,255,0.08);
-    }
-    .case-detail-section .card-body {
-        overflow-x: auto;
-    }
-    .case-detail-section .list-group-item {
-        background: transparent;
-        border-color: rgba(255,255,255,0.08);
-    }
-    .case-detail-section table {
-        width: 100%;
-    }
-    @media (max-width: 991.98px) {
-        .series-toolbar {
-            flex-direction: column;
+        .highlight-series {
+            background-color: rgba(13,110,253,0.04);
+            border: 1px solid rgba(13,110,253,0.12);
+            transition: box-shadow 0.18s ease, transform 0.12s ease;
+            box-shadow: 0 4px 12px rgba(13,110,253,0.04);
         }
-        .series-toolbar-btn {
-            width: 100%;
+        #series-reorder-list .dragging {
+            opacity: 0.5;
         }
-        .case-detail-section .card-header {
-            padding: .65rem .85rem;
+        #series-reorder-list .drag-over {
+            border-top: 2px solid #0d6efd;
         }
-        .case-detail-section .card-body {
-            padding: .75rem .85rem;
-        }
-    }
-    @media (max-width: 575.98px) {
-        .series-block {
-            min-width: 100%;
+        .series-panel {
+            border: 1px solid rgba(13,110,253,0.2);
+            border-radius: 0.75rem;
+            background: rgba(255,255,255,0.02);
+            padding: 0.5rem 0.75rem;
+            margin-top: 1rem;
+            margin-bottom: 1rem;
             max-width: 100%;
         }
-        .series-card-thumb-wrap {
-            width: 56px;
-            height: 56px;
+        .series-panel-summary {
+            list-style: none;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 1rem;
+            padding: 0.5rem 0;
+            cursor: pointer;
         }
-    }
-    @media (prefers-color-scheme: dark) {
-        .series-actions { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
-    }
-    .link-buttons {
-        float: right;
-    }
-    .normal-block {
-        float: right;
-    }
-</style>
\ No newline at end of file
+        .series-panel-summary::-webkit-details-marker { display: none; }
+        .series-panel-title {
+            font-size: 0.95rem;
+            font-weight: 700;
+        }
+        .series-panel-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 5.5rem;
+            padding: .35rem .75rem;
+            border-radius: 999px;
+            background: rgba(13,110,253,0.12);
+            color: #9ec5fe;
+            font-size: .8rem;
+            font-weight: 600;
+        }
+        .series-panel-body {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            padding: 0.5rem 0;
+        }
+        .series-toolbar {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .75rem;
+        }
+        .series-toolbar-btn {
+            min-width: 160px;
+        }
+        .series-card-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            align-items: flex-start;
+        }
+        .series-block {
+            flex: 0 1 auto;
+            min-width: 260px;
+            max-width: 320px;
+        }
+        .series-card-shell {
+            display: flex;
+            flex-direction: column;
+            gap: 0.4rem;
+            padding: 0.7rem;
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 0.6rem;
+            background: rgba(15,23,42,0.3);
+            height: 100%;
+        }
+        .series-card-main {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.5rem;
+            width: 100%;
+            border: 0;
+            background: transparent;
+            padding: 0;
+            text-align: left;
+            color: inherit;
+            cursor: pointer;
+            flex-shrink: 0;
+        }
+        .series-card-main:hover .series-card-description,
+        .series-card-main:focus-visible .series-card-description {
+            color: #fff;
+        }
+        .series-card-main:focus-visible {
+            outline: 2px solid rgba(13,110,253,0.6);
+            outline-offset: 2px;
+        }
+        .series-card-thumb-wrap {
+            flex-shrink: 0;
+            width: 64px;
+            min-width: 64px;
+            height: 64px;
+            line-height: 0;
+        }
+        .series-card-thumb {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: 0.4rem;
+            border: 1px solid rgba(255,255,255,0.1);
+            display: block;
+            background: rgba(255,255,255,0.04);
+        }
+        .series-card-thumb-generated,
+        .series-card-thumb-generated span {
+            width: 100%;
+            height: 100%;
+            display: block;
+            border-radius: 0.4rem;
+            overflow: hidden;
+            border: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.04);
+        }
+        .series-card-thumb-generated img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+        }
+        .series-card-thumb-placeholder {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #6c757d;
+            font-size: 1rem;
+            background: rgba(255,255,255,0.04);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 0.4rem;
+        }
+        .series-card-content {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 0.15rem;
+        }
+        .series-card-heading {
+            font-size: 0.85rem;
+            font-weight: 600;
+            line-height: 1.15;
+        }
+        .series-card-series-number {
+            font-weight: 700;
+        }
+        .series-card-image-count {
+            font-size: 0.75rem;
+            color: #adb5bd;
+        }
+        .series-card-description {
+            font-size: 0.8rem;
+            line-height: 1.2;
+            color: #d4d8dd;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        .series-card-controls {
+            display: flex;
+            gap: 0.4rem;
+            margin-top: auto;
+        }
+        .series-card-controls .btn {
+            flex: 1;
+            min-width: 0;
+            padding: 0.3rem 0.4rem;
+            font-size: 0.75rem;
+        }
+        .series-block.highlight-series .series-card-shell,
+        .series-block:hover .series-card-shell {
+            border-color: rgba(13,110,253,0.5);
+            background: rgba(13,110,253,0.08);
+        }
+        .series-actions[open] {
+            border: 2px solid #0d6efd;
+            border-radius: .85rem;
+            padding: .85rem;
+        }
+        .series-actions {
+            flex: 1 1 auto;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: .5rem;
+            border: 1px solid rgba(0,0,0,0.06);
+            border-radius: .85rem;
+            padding: .5rem;
+            background: rgba(255,255,255,0.02);
+        }
+        .series-actions-summary { list-style: none; }
+        .series-actions-summary::-webkit-details-marker { display:none; }
+        .series-actions-body {
+            display: flex;
+            flex-direction: column;
+            gap: .5rem;
+        }
+        .series-selection-toolbar {
+            border-top: 1px solid rgba(0,0,0,0.08);
+            border-bottom: 1px solid rgba(0,0,0,0.08);
+            padding: .5rem 0;
+        }
+        .series-actions-grid .btn,
+        .series-actions-body > a.btn,
+        .series-move-panel .btn {
+            width: 100%;
+        }
+        .series-move-panel {
+            background: rgba(255,255,255,0.03);
+        }
+        .series-move-panel .case-details {
+            margin-bottom: .5rem;
+        }
+        .series-actions .btn {
+            vertical-align: middle;
+            text-align: left;
+        }
+        #series-delete-indicator {
+            display: none;
+        }
+        #series-delete-indicator.htmx-request {
+            display: inline-flex;
+            align-items: center;
+        }
+        .case-detail-section {
+            border: 1px solid rgba(255,255,255,0.08);
+            background: rgba(255,255,255,0.02);
+        }
+        .case-detail-section .card-header {
+            background: rgba(255,255,255,0.03);
+            border-bottom: 1px solid rgba(255,255,255,0.08);
+        }
+        .case-detail-section .card-body {
+            overflow-x: auto;
+        }
+        .case-detail-section .list-group-item {
+            background: transparent;
+            border-color: rgba(255,255,255,0.08);
+        }
+        .case-detail-section table {
+            width: 100%;
+        }
+        @media (max-width: 991.98px) {
+            .series-toolbar {
+                flex-direction: column;
+            }
+            .series-toolbar-btn {
+                width: 100%;
+            }
+            .case-detail-section .card-header {
+                padding: .65rem .85rem;
+            }
+            .case-detail-section .card-body {
+                padding: .75rem .85rem;
+            }
+        }
+        @media (max-width: 575.98px) {
+            .series-block {
+                min-width: 100%;
+                max-width: 100%;
+            }
+            .series-card-thumb-wrap {
+                width: 56px;
+                height: 56px;
+            }
+        }
+        @media (prefers-color-scheme: dark) {
+            .series-actions { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
+        }
+        .link-buttons {
+            float: right;
+        }
+        .normal-block {
+            float: right;
+        }
+    </style>
\ No newline at end of file