:root,
[data-bs-theme] {
    --bs-body-font-family: Verdana, Geneva, Tahoma, sans-serif;
}

:root:not([data-bs-theme="dark"]),
[data-bs-theme="light"] {
    --bs-primary: #536b73;
    --bs-primary-rgb: 83, 107, 115;
    --bs-secondary: #7f999f;
    --bs-secondary-rgb: 127, 153, 159;
    --bs-dark: #34474e;
    --bs-dark-rgb: 52, 71, 78;
    --bs-light: #edf2f3;
    --bs-light-rgb: 237, 242, 243;
    --bs-body-color: #26383e;
    --bs-body-color-rgb: 38, 56, 62;
    --bs-secondary-color: #60747a;
    --bs-secondary-color-rgb: 96, 116, 122;
    --bs-secondary-bg: #e5ecee;
    --bs-secondary-bg-rgb: 229, 236, 238;
    --bs-tertiary-bg: #f2f5f5;
    --bs-tertiary-bg-rgb: 242, 245, 245;
    --bs-primary-text-emphasis: #30464d;
    --bs-primary-bg-subtle: #e1e9eb;
    --bs-primary-border-subtle: #aebfc3;
    --bs-border-color: #d2dcde;
    --bs-link-color: #455f67;
    --bs-link-color-rgb: 69, 95, 103;
    --bs-link-hover-color: #34474e;
    --bs-link-hover-color-rgb: 52, 71, 78;
    --bs-focus-ring-color: rgba(83, 107, 115, .25);
}

body {
    font-family: var(--bs-body-font-family);
}

.app-tab-taskbar {
    --app-tab-taskbar-bg: var(--bs-body-bg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: 0;
    margin-bottom: .375rem;
    padding: 0 .5rem .25rem;
    background-color: var(--app-tab-taskbar-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

[data-bs-theme="dark"] .app-tab-taskbar {
    --app-tab-taskbar-bg: #1a1a1a;
}

.app-tab-selectors {
    margin-bottom: 0;
}

.app-parent-taskbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: 0 0 .25rem;
    margin-bottom: .375rem;
    background: transparent;
    flex-shrink: 0;
}

.app-parent-taskbar:not(:has(> :not([hidden]))) {
    display: none;
}

.app-tab-panel {
    padding: .5rem;
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.app-tab-panel > .app-tab-taskbar,
.app-tab-panel > #user-sync-overview > .app-tab-taskbar {
    margin: -.5rem -.5rem .375rem;
    border: 0;
    border-radius: 0;
}

.app-form-collection {
    min-width: 0;
    margin: .5rem 0 1rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .app-form-collection {
    background-color: var(--bs-body-bg);
}

#users-shell-editor:has(> #users-view:not([hidden])) {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#users-shell-editor > .app-tab-selectors {
    flex-shrink: 0;
}

#users-view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
}

#users-view:not([hidden]),
#users-workspace,
#users-workspace .app-table-card,
#users-workspace [data-table-content]:not([hidden]) {
    display: flex;
    flex-direction: column;
}

#users-view > :not(#users-workspace),
#users-workspace > :not(.app-table-card) {
    flex-shrink: 0;
}

#users-workspace,
#users-workspace .app-table-card,
#users-workspace [data-table-content] {
    flex: 1 1 auto;
    min-height: 0;
}

#users-workspace .app-table-card {
    min-height: 8rem;
}

#users-workspace {
    flex-shrink: 0;
    flex-basis: 20rem;
}

#users-workspace .table-responsive {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.app-tab-taskbar[hidden],
.app-tab-taskbar [hidden],
#access-control-actions[hidden] {
    display: none !important;
}

.app-waiting-overlay {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 2rem;
    text-align: center;
    max-width: min(30rem, calc(100vw - 2rem));
}

.app-waiting-overlay[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.app-waiting-overlay::backdrop {
    background: rgba(0, 0, 0, .55);
}

/* The logo as a faint watermark, drawn in one grey per theme just off the page background. /branding/ serves the
   built-in M (images/watermark-*.svg) or a faded copy of an uploaded logo; --app-watermark-light/-dark let the Branding
   settings show a new upload without reloading. */
:root,
[data-bs-theme="light"] {
    --app-watermark: var(--app-watermark-light, url("../../branding/watermark-light"));
}

[data-bs-theme="dark"] {
    --app-watermark: var(--app-watermark-dark, url("../../branding/watermark-dark"));
}

.app-watermark,
.app-page-column {
    background-image: var(--app-watermark);
    background-position: center;
    background-repeat: no-repeat;
    background-size: min(90%, 90vh) auto;
}

/* Sign-in, password and first-run setup pages: a centered card with a watermark at the bottom-right. */
.app-auth .card-body > h1 {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.app-auth .card-body > h1::before {
    content: "";
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    background: url("../../branding/logo") center / contain no-repeat;
}

.app-auth main {
    position: relative;
    z-index: 1;
}

.app-auth footer {
    z-index: 1;
}

.app-auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--app-watermark) right 1rem bottom 2.5rem / min(48vw, 48vh) auto no-repeat;
}

/* An uploaded sign-in background replaces the built-in watermark. */
.app-auth-backdrop.app-auth-backdrop-image {
    background: url("../../branding/background") center / cover no-repeat;
}

.app-header-logo img {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.app-branding-preview {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bs-tertiary-bg);
}

.app-branding-preview-logo {
    width: 4.5rem;
    height: 4.5rem;
    padding: .5rem;
}

.app-branding-preview-background {
    width: 8rem;
    height: 4.5rem;
    text-align: center;
}

.app-branding-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-branding-preview-background img {
    object-fit: cover;
}

/* Icons that stand for a thing (page, module, device, tags...) get one soft colour each, the same everywhere in the app,
   so they are easy to recognise. Action icons (search, add, edit, delete, arrows, close) keep the text colour. */
:root,
[data-bs-theme="light"] {
    --app-icon-blue: #3a72b0;
    --app-icon-teal: #1f8a83;
    --app-icon-green: #458a3f;
    --app-icon-amber: #a87612;
    --app-icon-orange: #b8622e;
    --app-icon-red: #b84a45;
    --app-icon-purple: #7656ad;
    --app-icon-pink: #a8517f;
    --app-icon-slate: #5d717c;
}

[data-bs-theme="dark"] {
    --app-icon-blue: #86b2e3;
    --app-icon-teal: #6ccbc2;
    --app-icon-green: #93c98d;
    --app-icon-amber: #dfbd6e;
    --app-icon-orange: #e8a27a;
    --app-icon-red: #e8918b;
    --app-icon-purple: #b8a0e0;
    --app-icon-pink: #e09fc2;
    --app-icon-slate: #a9b8c0;
}

:is(.fa-house, .fa-network-wired, .fa-link, .fa-desktop, .fa-ethernet, .fa-cloud, .fa-cloud-arrow-down, .fa-envelope, .fa-envelope-circle-check) { color: var(--app-icon-blue); }
:is(.fa-tags, .fa-tag, .fa-list-check, .fa-list-ol, .fa-plug) { color: var(--app-icon-teal); }
:is(.fa-chart-line, .fa-chart-area, .fa-chart-bar, .fa-chart-column, .fa-chart-pie) { color: var(--app-icon-green); }
:is(.fa-folder, .fa-folder-open, .fa-bolt, .fa-stopwatch, .fa-clock, .fa-clock-rotate-left, .fa-database, .fa-box-archive) { color: var(--app-icon-amber); }
:is(.fa-microchip, .fa-boxes-stacked, .fa-gamepad) { color: var(--app-icon-orange); }
:is(.fa-bell, .fa-heart-pulse, .fa-video) { color: var(--app-icon-red); }
:is(.fa-puzzle-piece, .fa-sitemap, .fa-scale-balanced, .fa-layer-group, .fa-diagram-project, .fa-exchange-alt, .fa-right-left, .fa-eye, .fa-id-badge, .fa-window-restore) { color: var(--app-icon-purple); }
:is(.fa-satellite-dish, .fa-tower-broadcast, .fa-users, .fa-user, .fa-users-gear, .fa-user-tag, .fa-palette) { color: var(--app-icon-pink); }
:is(.fa-cube, .fa-gear, .fa-sliders, .fa-list, .fa-server, .fa-screwdriver-wrench) { color: var(--app-icon-slate); }

/* Filled buttons and the dark header keep plain icons, so the colours never fight with a solid background. */
.btn:not([class*="btn-outline"], .btn-link) [class*="fa-"],
#app-header [class*="fa-"] {
    color: inherit;
}

#app-notifications { position: fixed; top: .5rem; right: .5rem; width: min(380px, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; z-index: 1090; pointer-events: none; }
#app-notifications > * { pointer-events: auto; flex-shrink: 0; }
#app-notifications > .alert { position: relative; margin: 0 !important; padding: .75rem 2.25rem .75rem .85rem; overflow-wrap: anywhere; box-shadow: 0 3px 12px #0003; }
.app-notification-dismissed { display: none !important; }
.app-dismissible-message { position: relative; padding-right: 2.25rem; }
.app-notification-close { position: absolute; top: .25rem; right: .25rem; border: 0; background: transparent; color: inherit; padding: .25rem .5rem; font-size: .8rem; font-weight: 700; }
.app-notification-close:hover { background: #0001; }
.app-notification-close::before { content: '\00d7'; font-size: 1.1rem; }
#app-notifications > #app-unsaved-notice { position: relative; top: auto !important; right: auto; width: 100%; max-width: none; pointer-events: none; }
#app-unsaved-notice button { pointer-events: auto; }

.app-user-avatar-button {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-user-avatar-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

:root:not([data-bs-theme="dark"]) .btn-primary {
    --bs-btn-bg: #536b73;
    --bs-btn-border-color: #536b73;
    --bs-btn-hover-bg: #435c64;
    --bs-btn-hover-border-color: #405860;
    --bs-btn-active-bg: #3c555d;
    --bs-btn-active-border-color: #394f56;
    --bs-btn-disabled-bg: #536b73;
    --bs-btn-disabled-border-color: #536b73;
}

:root:not([data-bs-theme="dark"]) .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #687f86;
    --bs-btn-border-color: #687f86;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #586f76;
    --bs-btn-hover-border-color: #536a71;
    --bs-btn-active-bg: #526970;
    --bs-btn-active-border-color: #4e646b;
    --bs-btn-disabled-bg: #687f86;
    --bs-btn-disabled-border-color: #687f86;
}

:root:not([data-bs-theme="dark"]) .btn-outline-primary {
    --bs-btn-color: #455f67;
    --bs-btn-border-color: #718991;
    --bs-btn-hover-bg: #536b73;
    --bs-btn-hover-border-color: #536b73;
    --bs-btn-active-bg: #435c64;
    --bs-btn-active-border-color: #435c64;
}

:root:not([data-bs-theme="dark"]) .btn-outline-secondary {
    --bs-btn-color: #536b73;
    --bs-btn-border-color: #9aadb2;
    --bs-btn-hover-bg: #536b73;
    --bs-btn-hover-border-color: #536b73;
    --bs-btn-active-bg: #435c64;
    --bs-btn-active-border-color: #435c64;
}

:root:not([data-bs-theme="dark"]) .table:where(:not(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark)) {
    --bs-table-bg: #f5f7f7;
    --bs-table-striped-bg: #eff2f2;
    --bs-table-hover-bg: #e6eaea;
}

:root:not([data-bs-theme="dark"]) .table-light {
    --bs-table-bg: #eaf0f1;
    --bs-table-color: #34474e;
}

:root:not([data-bs-theme="dark"]) .app-table .user-disabled-row {
    --bs-table-bg: #fff5d6;
    --bs-table-striped-bg: #fff5d6;
    --bs-table-hover-bg: #f8edc8;
}

/* Dark theme: neutral black and grey surfaces with high-contrast text (WCAG AA or better). */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-primary: #e0e0e0;
    --bs-primary-rgb: 224, 224, 224;
    --bs-secondary: #a8a8a8;
    --bs-secondary-rgb: 168, 168, 168;
    --bs-dark: #000;
    --bs-dark-rgb: 0, 0, 0;
    --bs-light: #161616;
    --bs-light-rgb: 22, 22, 22;
    --bs-body-color: #ececec;
    --bs-body-color-rgb: 236, 236, 236;
    --bs-body-bg: #1a1a1a;
    --bs-body-bg-rgb: 26, 26, 26;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #f5f5f5;
    --bs-secondary-color: #b8b8b8;
    --bs-secondary-color-rgb: 184, 184, 184;
    --bs-secondary-bg: #262626;
    --bs-secondary-bg-rgb: 38, 38, 38;
    --bs-tertiary-color: #a0a0a0;
    --bs-tertiary-color-rgb: 160, 160, 160;
    --bs-tertiary-bg: #0e0e0e;
    --bs-tertiary-bg-rgb: 14, 14, 14;
    --bs-primary-text-emphasis: #fff;
    --bs-primary-bg-subtle: #2e2e2e;
    --bs-primary-border-subtle: #5a5a5a;
    --bs-secondary-text-emphasis: #e0e0e0;
    --bs-secondary-bg-subtle: #242424;
    --bs-secondary-border-subtle: #4a4a4a;
    --bs-border-color: #3a3a3a;
    --bs-border-color-translucent: rgba(255, 255, 255, .14);
    --bs-link-color: #8ab4f8;
    --bs-link-color-rgb: 138, 180, 248;
    --bs-link-hover-color: #b3cefb;
    --bs-link-hover-color-rgb: 179, 206, 251;
    --bs-code-color: #f48fb1;
    --bs-focus-ring-color: rgba(138, 180, 248, .4);
}

[data-bs-theme="dark"] body {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] #app-header {
    min-height: 2.875rem;
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    /* Same header colour as light mode. */
    background-color: #34474e !important;
    border-bottom: 1px solid #303030;
}

[data-bs-theme="dark"] #root-sidebar {
    border-color: #303030 !important;
}

[data-bs-theme="dark"] .app-sidebar {
    scrollbar-color: #555 #161616;
}

[data-bs-theme="dark"] .app-nav-item,
[data-bs-theme="dark"] .app-nav-aux {
    font-size: .875rem;
}

@media (min-width: 768px) {
    .app-sidebar {
        flex: 0 0 clamp(15rem, 16.5vw, 19rem);
        width: clamp(15rem, 16.5vw, 19rem);
        max-width: clamp(15rem, 16.5vw, 19rem);
    }
}

/* Main actions stay dark like the other buttons; the brighter border marks them as the primary action. */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2a2a2a;
    --bs-btn-border-color: #bdbdbd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3a3a3a;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #454545;
    --bs-btn-active-border-color: #fff;
    --bs-btn-disabled-color: #8a8a8a;
    --bs-btn-disabled-bg: #222;
    --bs-btn-disabled-border-color: #4a4a4a;
}

[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-color: #f5f5f5;
    --bs-btn-bg: #3a3a3a;
    --bs-btn-border-color: #4a4a4a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4a4a4a;
    --bs-btn-hover-border-color: #5a5a5a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #555;
    --bs-btn-active-border-color: #666;
    --bs-btn-disabled-color: #aaa;
    --bs-btn-disabled-bg: #2a2a2a;
    --bs-btn-disabled-border-color: #3a3a3a;
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #e0e0e0;
    --bs-btn-border-color: #5c5c5c;
    --bs-btn-hover-color: #111;
    --bs-btn-hover-bg: #e0e0e0;
    --bs-btn-hover-border-color: #e0e0e0;
    --bs-btn-active-color: #111;
    --bs-btn-active-bg: #f0f0f0;
    --bs-btn-active-border-color: #f0f0f0;
    --bs-btn-disabled-color: #8a8a8a;
    --bs-btn-disabled-border-color: #3a3a3a;
}

[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: #ececec;
    --bs-btn-bg: #222;
    --bs-btn-border-color: #333;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2e2e2e;
    --bs-btn-hover-border-color: #444;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #383838;
    --bs-btn-active-border-color: #4a4a4a;
}

[data-bs-theme="dark"] .btn-outline-light {
    --bs-btn-color: #f5f5f5;
    --bs-btn-border-color: #6a6a6a;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f5f5f5;
    --bs-btn-hover-border-color: #f5f5f5;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .card {
    --bs-card-bg: #1a1a1a;
    --bs-card-cap-bg: #222;
    --bs-card-border-color: #333;
}

[data-bs-theme="dark"] .modal {
    --bs-modal-bg: #1c1c1c;
    --bs-modal-border-color: #3a3a3a;
    --bs-modal-header-border-color: #333;
    --bs-modal-footer-border-color: #333;
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: #1e1e1e;
    --bs-dropdown-border-color: #3a3a3a;
    --bs-dropdown-link-color: #ececec;
    --bs-dropdown-link-hover-bg: #2e2e2e;
    --bs-dropdown-link-hover-color: #fff;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #111;
    border-color: #484848;
    color: #f0f0f0;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
    background-color: #222;
    color: #b8b8b8;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #8c8c8c;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .form-check-input:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #262626;
    border-color: #484848;
    color: #d8d8d8;
}

[data-bs-theme="dark"] .form-check-input {
    background-color: #111;
    border-color: #6a6a6a;
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #3b7ddd;
    border-color: #3b7ddd;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: #1a1a1a;
    --bs-table-color: #ececec;
    --bs-table-border-color: #333;
    --bs-table-striped-bg: #1e1e1e;
    --bs-table-striped-color: #ececec;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #242424;
    --bs-table-color: #f5f5f5;
    --bs-table-border-color: #3a3a3a;
}

[data-bs-theme="dark"] .table-hover {
    --bs-table-hover-bg: #2a2a2a;
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: #1a1a1a;
    --bs-list-group-border-color: #333;
    --bs-list-group-action-hover-bg: #262626;
}

[data-bs-theme="dark"] .nav-tabs {
    --bs-nav-tabs-border-color: #3a3a3a;
    --bs-nav-tabs-link-active-bg: #1a1a1a;
    --bs-nav-tabs-link-active-color: #fff;
    --bs-nav-tabs-link-active-border-color: #3a3a3a #3a3a3a #1a1a1a;
}

[data-bs-theme="dark"] .text-bg-primary {
    color: #111 !important;
}

[data-bs-theme="dark"] .text-danger {
    color: #ff7b86 !important;
}

[data-bs-theme="dark"] .text-success {
    color: #5dd39e !important;
}

[data-bs-theme="dark"] .text-warning {
    color: #ffd04d !important;
}

[data-bs-theme="dark"] .text-info {
    color: #5ddcf5 !important;
}

[data-bs-theme="dark"] .text-bg-secondary {
    background-color: #4a4a4a !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .text-bg-light {
    background-color: #2e2e2e !important;
    color: #f0f0f0 !important;
}

/* Black "dark" accents (Critical severity) would vanish on black, so invert them to white. */
[data-bs-theme="dark"] .text-bg-dark {
    background-color: #f5f5f5 !important;
    color: #000 !important;
}

[data-bs-theme="dark"] .btn-dark {
    --bs-btn-color: #000;
    --bs-btn-bg: #f5f5f5;
    --bs-btn-border-color: #f5f5f5;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e0e0e0;
    --bs-btn-active-border-color: #e0e0e0;
}

[data-bs-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #f5f5f5;
    --bs-btn-border-color: #8a8a8a;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #f5f5f5;
    --bs-btn-hover-border-color: #f5f5f5;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e0e0e0;
    --bs-btn-active-border-color: #e0e0e0;
}

/* Bootstrap keeps pastel contextual rows in dark mode; use deep tints with light text instead. */
[data-bs-theme="dark"] .table-danger {
    --bs-table-color: #ffe5e5;
    --bs-table-bg: #4a1418;
    --bs-table-border-color: #6e2229;
    --bs-table-striped-bg: #521a1e;
    --bs-table-striped-color: #ffe5e5;
    --bs-table-active-bg: #5e1d23;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #5e1d23;
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .table-warning {
    --bs-table-color: #fff3cd;
    --bs-table-bg: #43360a;
    --bs-table-border-color: #66530f;
    --bs-table-striped-bg: #4b3d0d;
    --bs-table-striped-color: #fff3cd;
    --bs-table-active-bg: #554512;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #554512;
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .table-success {
    --bs-table-color: #d9f7e6;
    --bs-table-bg: #12361f;
    --bs-table-border-color: #1d5532;
    --bs-table-striped-bg: #163d24;
    --bs-table-striped-color: #d9f7e6;
    --bs-table-active-bg: #1b4a2c;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #1b4a2c;
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .table-info {
    --bs-table-color: #d6f6fc;
    --bs-table-bg: #0d3640;
    --bs-table-border-color: #16525f;
    --bs-table-striped-bg: #113d48;
    --bs-table-striped-color: #d6f6fc;
    --bs-table-active-bg: #154753;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #154753;
    --bs-table-hover-color: #fff;
}

[data-bs-theme="dark"] .table-secondary {
    --bs-table-color: #b8b8b8;
    --bs-table-bg: #202020;
    --bs-table-border-color: #333;
    --bs-table-striped-bg: #242424;
    --bs-table-striped-color: #b8b8b8;
    --bs-table-active-bg: #2a2a2a;
    --bs-table-active-color: #e0e0e0;
    --bs-table-hover-bg: #2a2a2a;
    --bs-table-hover-color: #e0e0e0;
}

/* Outline buttons: Bootstrap's base hues are too dim as text on near-black. */
[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #5dd39e;
    --bs-btn-border-color: #2f9e6a;
    --bs-btn-disabled-color: #3f8a66;
    --bs-btn-disabled-border-color: #2a5c44;
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #ff7b86;
    --bs-btn-border-color: #d94452;
    --bs-btn-disabled-color: #a8505a;
    --bs-btn-disabled-border-color: #6e2c33;
}

[data-bs-theme="dark"] .btn-outline-warning {
    --bs-btn-color: #ffd04d;
    --bs-btn-border-color: #d9a400;
}

[data-bs-theme="dark"] .btn-outline-info {
    --bs-btn-color: #5ddcf5;
    --bs-btn-border-color: #1fb3d1;
}

[data-bs-theme="dark"] .btn-outline-primary:disabled,
[data-bs-theme="dark"] .btn-outline-secondary:disabled {
    --bs-btn-disabled-color: #7a7a7a;
}

/* Sidebar: every item shares the sidebar background; only hover and the current page are tinted. */
.app-nav-row {
    display: flex;
    align-items: center;
    gap: .125rem;
    border-radius: var(--bs-border-radius);
}

.app-nav-item,
.app-nav-aux {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .5rem;
    border: 0;
    border-radius: var(--bs-border-radius);
    background: transparent;
    color: var(--bs-body-color);
    font-size: .9375rem;
    line-height: 1.4;
    text-align: start;
    text-decoration: none;
}

.app-nav-item {
    flex: 1 1 auto;
    min-width: 0;
}

.app-nav-aux {
    flex: 0 0 auto;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
}

.app-nav-item:hover,
.app-nav-aux:hover,
.app-nav-item:focus-visible,
.app-nav-aux:focus-visible {
    background: rgba(var(--bs-emphasis-color-rgb), .07);
    color: var(--bs-emphasis-color);
}

.app-nav-item:focus-visible,
.app-nav-aux:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.app-nav-item.active {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}

.app-nav-item .fa-chevron-down,
.app-nav-aux .fa-chevron-down {
    font-size: .75rem;
    transition: transform .15s ease;
}

.app-nav-item[aria-expanded="false"] .fa-chevron-down,
.app-nav-aux[aria-expanded="false"] .fa-chevron-down {
    transform: rotate(-90deg);
}

.app-nav-children {
    margin-left: .875rem;
    padding-left: .5rem;
    border-left: 1px solid var(--bs-border-color);
}

/* The new-window shortcut appears on hover or keyboard focus; touch screens always show it. */
.app-nav-new-window {
    opacity: 0;
}

.app-nav-row:hover .app-nav-new-window,
.app-nav-new-window:focus-visible {
    opacity: 1;
}

@media (hover: none) {
    .app-nav-new-window {
        opacity: 1;
    }
}

/* Tabbed and sectioned editor popups (sockets, Modbus, MQTT). */
.modal-tabs {
    margin-bottom: 1rem;
}

.modal-tabbed .modal-body {
    min-height: 26rem;
}

.modal-section {
    margin-top: 1.25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.modal-section > legend {
    float: none;
    width: auto;
    margin-bottom: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.modal-help {
    margin-bottom: .75rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.modal-help > summary {
    cursor: pointer;
    width: fit-content;
}


.modal-help > p,
.modal-help > ul {
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    border-left: .2rem solid var(--bs-info-border-subtle);
    background: var(--bs-tertiary-bg);
    border-radius: .25rem;
}

.modal-help > ul {
    padding-left: 2rem;
}

/* The broker popup keeps its feedback area above the editor; drop the gap when only the editor shows. */
.modal-body:has(> #mqtt-brokers-overview[hidden]) {
    padding-bottom: 0;
}

/* Network discovery: floating preview of the last message from the hovered row. */
.network-message-panel {
    position: fixed;
    z-index: 1080;
    width: min(36rem, calc(100vw - 1rem));
    pointer-events: none;
}
.network-message-panel pre {
    max-height: 14rem;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: .75rem;
    background: var(--bs-tertiary-bg);
    border-radius: .25rem;
    padding: .35rem .5rem;
}
.network-message-panel .network-message-hex {
    white-space: pre;
    word-break: normal;
}
#network-rows tr, #devices-rows tr {
    cursor: default;
}

/* Unsaved changes: floating notice under the header and highlighted save buttons (scripts/unsaved-changes.js). */
.app-unsaved-notice {
    position: fixed;
    right: 1rem;
    z-index: 1040;
    width: min(22rem, calc(100vw - 2rem));
    border: 1px solid var(--bs-warning);
    border-left-width: .35rem;
    animation: app-unsaved-in .2s ease-out;
}
.app-unsaved-notice .card-body, .app-unsaved-notice {
    padding: .5rem .75rem;
}
.app-unsaved-notice {
    padding-right: 2.25rem;
}
.app-unsaved-notice .app-unsaved-title {
    font-weight: 600;
    margin-bottom: .35rem;
}
.app-unsaved-notice .app-unsaved-title i {
    color: var(--bs-warning);
}
.app-unsaved-notice li + li {
    margin-top: .25rem;
}
.btn.app-save-pending {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-warning);
    animation: app-save-pulse 1.6s ease-in-out infinite;
}
@keyframes app-save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .75); }
    50% { box-shadow: 0 0 0 .45rem rgba(255, 193, 7, 0); }
}
@keyframes app-unsaved-in {
    from { opacity: 0; transform: translateY(-.5rem); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .btn.app-save-pending, .app-unsaved-notice { animation: none; }
}

.trend-time-input {
    width: 12.5em;
    font-variant-numeric: tabular-nums;
}

/* Focus mode (focus-mode.js): only the page content. The arrow tab at the top brings the menus back. */
body.app-focus #app-header,
body.app-focus #root-sidebar,
body.app-focus [data-focus-hide] {
    display: none !important;
}

/* App HMI mode (app-shell.js): no header or main menu; the HMI page hides its own tree, location bar and toolbars. */
body.app-hmi-mode #app-header,
body.app-hmi-mode #root-sidebar,
body.app-hmi-mode .app-unfocus {
    display: none !important;
}

.app-unfocus {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 1040;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 1.1rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    border-radius: 0 0 .5rem .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    font-size: .7rem;
    line-height: 1;
    opacity: .6;
}

.app-unfocus:hover,
.app-unfocus:focus-visible {
    opacity: 1;
    color: var(--bs-body-color);
}

/* Header alarm bell (app-shell.js): blinking red = unacknowledged, red = standing, dimmed = no alarms. */
.app-alarm-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
}
.app-alarm-bell[hidden] {
    display: none;
}
.app-alarm-bell:hover, .app-alarm-bell:focus-visible {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.app-alarm-bell.is-quiet {
    opacity: .35;
}
.app-alarm-bell.is-standing, .app-alarm-bell.is-unacknowledged {
    color: #ff4d4f;
}
.app-alarm-bell.is-unacknowledged svg {
    animation: app-alarm-blink 1s steps(1, end) infinite;
}
@keyframes app-alarm-blink {
    50% { opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
    .app-alarm-bell.is-unacknowledged svg { animation-duration: 2s; }
}