refactor(ui/shared): scroll-lock, escape, aria-live, responsive sidebar

ConfirmDialog locks body scroll via IJSRuntime + Bootstrap's
modal-open class on show, restores on hide. Escape key now closes
the dialog; default ConfirmButtonClass flipped from btn-danger to
btn-primary so non-destructive confirms aren't red. Destructive
callsites (Delete, Discard) get explicit ConfirmButtonClass="btn-danger".

ToastNotification adds aria-live="polite" + aria-atomic="true" on the
container and an optional autoDismissMs parameter on every Show* method.

LoadingSpinner text-muted -> text-secondary for contrast.

DataTable gains a clear (x) button on the search input and applies
disabled / aria-disabled directly to the pagination buttons.

NewFolderDialog splits backdrop and modal markup to match ConfirmDialog.

NavMenu wraps the nav list in an overflow-y scroll container so the
username/sign-out footer stays anchored, and section headers convert
from <li> to <div role="presentation">.

MainLayout adds a hamburger toggle for <lg viewports; sidebar collapses
via Bootstrap collapse data attributes.

App.razor extracts inline <style> block to a shared site.css; adds a
left-border accent on the active nav link; switches the reconnect
modal to modal-dialog-centered.

Login uses d-flex / min-vh-100 centering. NotAuthorizedView gets the
same centered layout plus the ScadaLink brand heading.

Sites.razor: only the new ConfirmButtonClass="btn-danger" follow-up.

src/ScadaLink.CentralUI/wwwroot/css/site.css

@@ -0,0 +1,75 @@
+/* ScadaLink Central UI – global styles. Loaded from Host App.razor as
+   `_content/ScadaLink.CentralUI/css/site.css`. */
+
+.sidebar {
+    min-width: 220px;
+    max-width: 220px;
+    min-height: 100vh;
+    background-color: #212529;
+}
+
+.sidebar .nav-link {
+    color: #adb5bd;
+    padding: 0.4rem 1rem;
+    font-size: 0.9rem;
+}
+
+.sidebar .nav-link:hover {
+    color: #fff;
+    background-color: #343a40;
+}
+
+.sidebar .nav-link.active {
+    color: #fff;
+    background-color: #0d6efd;
+    /* Left accent so active state isn't carried by color alone. */
+    border-left: 3px solid #0d6efd;
+    padding-left: calc(1rem - 3px);
+}
+
+.sidebar .nav-section-header {
+    color: #6c757d;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.75rem 1rem 0.25rem;
+    margin-top: 0.5rem;
+}
+
+.sidebar .brand {
+    color: #fff;
+    font-size: 1.1rem;
+    font-weight: 600;
+    padding: 1rem;
+    border-bottom: 1px solid #343a40;
+}
+
+/* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
+   container removes the fixed width; restore full width on mobile. */
+@media (max-width: 991.98px) {
+    .sidebar {
+        min-width: 100%;
+        max-width: 100%;
+        min-height: auto;
+    }
+}
+
+#reconnect-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#reconnect-modal .modal-content {
+    max-width: 400px;
+    padding: 2rem;
+    text-align: center;
+    background: #fff;
+    border-radius: 0.5rem;
+}