/* =============================================================================
   Phylax theme — design tokens mapped onto Bootstrap 5.3 CSS variables.

   Loaded after bootstrap.min.css and before site.css. Bootstrap stays the
   component library; this file only restyles it:
   - calm, dense, neutral greys with a slight green bias
   - one accent (deep teal-green), status colours are the only strong colours
   - 14px base font (IBM Plex Sans / Mono, self-hosted), tighter tables,
     6–8px radii, subtle borders instead of shadows
   Light is the default; dark is selected via <html data-bs-theme="dark">
   (server-side from the phylax-theme cookie, "system" resolved by js/theme.js).

   Token naming: --px-*. Use the tokens (or the Bootstrap variables they feed)
   in new CSS; never hard-code colours in components or inline styles.
   ============================================================================= */

/* ---------- Light (default) ---------- */
:root,
[data-bs-theme=light] {
    /* Surfaces & text */
    --px-bg: #f4f6f5;
    --px-surface: #ffffff;
    --px-surface-2: #f0f2f1;
    --px-surface-3: #e4e8e6;
    --px-border: #dde2df;
    --px-border-strong: #c5ccc8;
    --px-text: #1d2320;
    --px-text-rgb: 29, 35, 32;
    --px-text-muted: #59625e;
    --px-text-subtle: #848d89;

    /* Accent (deep teal-green) */
    --px-accent: #1f6f5c;
    --px-accent-rgb: 31, 111, 92;
    --px-accent-hover: #185a4a;
    --px-accent-active: #144d40;
    --px-accent-contrast: #ffffff;
    --px-accent-subtle: #e1efea;
    --px-accent-border-subtle: #b3d4c8;
    --px-accent-emphasis: #0f3d32;

    /* Status colours */
    --px-critical: #c2362b;
    --px-critical-rgb: 194, 54, 43;
    --px-critical-subtle: #fbe9e7;
    --px-critical-border-subtle: #f0bdb7;
    --px-critical-emphasis: #8f241c;

    --px-warning: #b7791f;
    --px-warning-rgb: 183, 121, 31;
    --px-warning-subtle: #fbf1e1;
    --px-warning-border-subtle: #ecd1a4;
    --px-warning-emphasis: #7a4f10;

    --px-ok: #2f855a;
    --px-ok-rgb: 47, 133, 90;
    --px-ok-subtle: #e4f3ea;
    --px-ok-border-subtle: #b5dbc5;
    --px-ok-emphasis: #1e5a3c;

    --px-info: #2b6cb0;
    --px-info-rgb: 43, 108, 176;
    --px-info-subtle: #e5eef8;
    --px-info-border-subtle: #b7cfe9;
    --px-info-emphasis: #1c4a7a;

    --px-unknown: #6b7370;
    --px-unknown-rgb: 107, 115, 112;
    --px-unknown-subtle: #eceeed;
    --px-unknown-border-subtle: #d0d5d2;
    --px-unknown-emphasis: #464d4a;

    /* Top bar of the main column */
    --px-nav-bg: #ffffff;
    --px-nav-border: var(--px-border);
    --px-nav-color: #4a534f;
    --px-nav-hover-color: var(--px-text);
    --px-nav-active-color: var(--px-accent);
    --px-nav-active-bg: var(--px-accent-subtle);
    --px-topbar-height: 52px;

    /* Sidebar: dark neutral in both themes (dark values below are only slightly deeper) */
    --px-sidebar-width: 232px;
    --px-sidebar-width-collapsed: 56px;
    --px-sidebar-bg: #18201d;
    --px-sidebar-bg-elevated: #222b27;
    --px-sidebar-border: #2a3430;
    --px-sidebar-text: #c3ccc7;
    --px-sidebar-text-muted: #87928d;
    --px-sidebar-text-strong: #f2f6f4;
    --px-sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --px-sidebar-active-bg: rgba(92, 192, 162, 0.16);
    --px-sidebar-active-text: #eaf6f1;
    --px-sidebar-active-indicator: #5cc0a2;
    --px-sidebar-focus-ring: rgba(92, 192, 162, 0.45);
    --px-sidebar-input-bg: #111714;

    /* Typography, radii, spacing */
    --px-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --px-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --px-radius-sm: 4px;
    --px-radius: 6px;
    --px-radius-lg: 8px;
    --px-scrollbar: #c5ccc8;
    --px-scrollbar-hover: #a3aca7;

    /* ---- Bootstrap mapping ---- */
    --bs-font-sans-serif: var(--px-font-sans);
    --bs-font-monospace: var(--px-font-mono);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.45;

    --bs-body-color: var(--px-text);
    --bs-body-color-rgb: var(--px-text-rgb);
    --bs-body-bg: var(--px-surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #0e1311;
    --bs-emphasis-color-rgb: 14, 19, 17;
    --bs-secondary-color: var(--px-text-muted);
    --bs-secondary-color-rgb: 89, 98, 94;
    --bs-secondary-bg: var(--px-surface-3);
    --bs-secondary-bg-rgb: 228, 232, 230;
    --bs-tertiary-color: var(--px-text-subtle);
    --bs-tertiary-color-rgb: 132, 141, 137;
    --bs-tertiary-bg: var(--px-surface-2);
    --bs-tertiary-bg-rgb: 240, 242, 241;

    --bs-primary: var(--px-accent);
    --bs-primary-rgb: var(--px-accent-rgb);
    --bs-primary-text-emphasis: var(--px-accent-emphasis);
    --bs-primary-bg-subtle: var(--px-accent-subtle);
    --bs-primary-border-subtle: var(--px-accent-border-subtle);

    --bs-secondary: var(--px-unknown);
    --bs-secondary-rgb: var(--px-unknown-rgb);
    --bs-secondary-text-emphasis: var(--px-unknown-emphasis);
    --bs-secondary-bg-subtle: var(--px-unknown-subtle);
    --bs-secondary-border-subtle: var(--px-unknown-border-subtle);

    --bs-success: var(--px-ok);
    --bs-success-rgb: var(--px-ok-rgb);
    --bs-success-text-emphasis: var(--px-ok-emphasis);
    --bs-success-bg-subtle: var(--px-ok-subtle);
    --bs-success-border-subtle: var(--px-ok-border-subtle);

    --bs-info: var(--px-info);
    --bs-info-rgb: var(--px-info-rgb);
    --bs-info-text-emphasis: var(--px-info-emphasis);
    --bs-info-bg-subtle: var(--px-info-subtle);
    --bs-info-border-subtle: var(--px-info-border-subtle);

    --bs-warning: var(--px-warning);
    --bs-warning-rgb: var(--px-warning-rgb);
    --bs-warning-text-emphasis: var(--px-warning-emphasis);
    --bs-warning-bg-subtle: var(--px-warning-subtle);
    --bs-warning-border-subtle: var(--px-warning-border-subtle);

    --bs-danger: var(--px-critical);
    --bs-danger-rgb: var(--px-critical-rgb);
    --bs-danger-text-emphasis: var(--px-critical-emphasis);
    --bs-danger-bg-subtle: var(--px-critical-subtle);
    --bs-danger-border-subtle: var(--px-critical-border-subtle);

    --bs-light: var(--px-surface-2);
    --bs-light-rgb: 240, 242, 241;
    --bs-dark: #1d2320;
    --bs-dark-rgb: 29, 35, 32;

    --bs-link-color: var(--px-accent);
    --bs-link-color-rgb: var(--px-accent-rgb);
    --bs-link-hover-color: var(--px-accent-hover);
    --bs-link-hover-color-rgb: 24, 90, 74;
    --bs-link-decoration: none;
    --bs-code-color: #8a3f6b;
    --bs-highlight-bg: var(--px-warning-subtle);

    --bs-border-color: var(--px-border);
    --bs-border-color-translucent: rgba(29, 35, 32, 0.12);
    --bs-border-radius: var(--px-radius);
    --bs-border-radius-sm: var(--px-radius-sm);
    --bs-border-radius-lg: var(--px-radius-lg);
    --bs-border-radius-xl: 10px;
    --bs-border-radius-xxl: 12px;

    --bs-box-shadow: 0 2px 6px rgba(29, 35, 32, 0.08);
    --bs-box-shadow-sm: 0 1px 2px rgba(29, 35, 32, 0.06);
    --bs-box-shadow-lg: 0 6px 20px rgba(29, 35, 32, 0.12);
    --bs-focus-ring-color: rgba(var(--px-accent-rgb), 0.25);

    --bs-form-valid-color: var(--px-ok);
    --bs-form-valid-border-color: var(--px-ok);
    --bs-form-invalid-color: var(--px-critical);
    --bs-form-invalid-border-color: var(--px-critical);
}

/* ---------- Dark ---------- */
[data-bs-theme=dark] {
    --px-bg: #111614;
    --px-surface: #171d1a;
    --px-surface-2: #1d2421;
    --px-surface-3: #262e2a;
    --px-border: #2c3531;
    --px-border-strong: #3c4641;
    --px-text: #dde4e0;
    --px-text-rgb: 221, 228, 224;
    --px-text-muted: #9aa49f;
    --px-text-subtle: #737d78;

    --px-accent: #5cc0a2;
    --px-accent-rgb: 92, 192, 162;
    --px-accent-hover: #77cdb3;
    --px-accent-active: #8fd6c0;
    --px-accent-contrast: #0b1f19;
    --px-accent-subtle: #15302a;
    --px-accent-border-subtle: #22564a;
    --px-accent-emphasis: #9fdcc8;

    /* Status colours: slightly lifted so they keep contrast on dark surfaces. */
    --px-critical: #d9534a;
    --px-critical-rgb: 217, 83, 74;
    --px-critical-subtle: #351a17;
    --px-critical-border-subtle: #6a2a24;
    --px-critical-emphasis: #f0a39c;

    --px-warning: #c98a2e;
    --px-warning-rgb: 201, 138, 46;
    --px-warning-subtle: #33270f;
    --px-warning-border-subtle: #6a4f1f;
    --px-warning-emphasis: #f0cc8a;

    --px-ok: #3f9d6c;
    --px-ok-rgb: 63, 157, 108;
    --px-ok-subtle: #142c20;
    --px-ok-border-subtle: #255a3e;
    --px-ok-emphasis: #93d4b0;

    --px-info: #4a88cc;
    --px-info-rgb: 74, 136, 204;
    --px-info-subtle: #15253a;
    --px-info-border-subtle: #274a73;
    --px-info-emphasis: #a3c6ee;

    --px-unknown: #7f8984;
    --px-unknown-rgb: 127, 137, 132;
    --px-unknown-subtle: #232a27;
    --px-unknown-border-subtle: #3c4641;
    --px-unknown-emphasis: #c2c9c5;

    --px-nav-bg: #141a17;
    --px-nav-border: var(--px-border);
    --px-nav-color: #aab3ae;
    --px-nav-hover-color: #e8eeeb;
    --px-nav-active-color: var(--px-accent);
    --px-nav-active-bg: var(--px-accent-subtle);

    --px-sidebar-bg: #0e1311;
    --px-sidebar-bg-elevated: #19201d;
    --px-sidebar-border: #232b27;
    --px-sidebar-input-bg: #0a0e0c;

    --px-scrollbar: #3c4641;
    --px-scrollbar-hover: #55605a;

    --bs-body-color: var(--px-text);
    --bs-body-color-rgb: var(--px-text-rgb);
    --bs-body-bg: var(--px-surface);
    --bs-body-bg-rgb: 23, 29, 26;
    --bs-emphasis-color: #f3f7f5;
    --bs-emphasis-color-rgb: 243, 247, 245;
    --bs-secondary-color: var(--px-text-muted);
    --bs-secondary-color-rgb: 154, 164, 159;
    --bs-secondary-bg: var(--px-surface-3);
    --bs-secondary-bg-rgb: 38, 46, 42;
    --bs-tertiary-color: var(--px-text-subtle);
    --bs-tertiary-color-rgb: 115, 125, 120;
    --bs-tertiary-bg: var(--px-surface-2);
    --bs-tertiary-bg-rgb: 29, 36, 33;

    --bs-primary: var(--px-accent);
    --bs-primary-rgb: var(--px-accent-rgb);
    --bs-primary-text-emphasis: var(--px-accent-emphasis);
    --bs-primary-bg-subtle: var(--px-accent-subtle);
    --bs-primary-border-subtle: var(--px-accent-border-subtle);

    --bs-secondary: var(--px-unknown);
    --bs-secondary-rgb: var(--px-unknown-rgb);
    --bs-secondary-text-emphasis: var(--px-unknown-emphasis);
    --bs-secondary-bg-subtle: var(--px-unknown-subtle);
    --bs-secondary-border-subtle: var(--px-unknown-border-subtle);

    --bs-success: var(--px-ok);
    --bs-success-rgb: var(--px-ok-rgb);
    --bs-success-text-emphasis: var(--px-ok-emphasis);
    --bs-success-bg-subtle: var(--px-ok-subtle);
    --bs-success-border-subtle: var(--px-ok-border-subtle);

    --bs-info: var(--px-info);
    --bs-info-rgb: var(--px-info-rgb);
    --bs-info-text-emphasis: var(--px-info-emphasis);
    --bs-info-bg-subtle: var(--px-info-subtle);
    --bs-info-border-subtle: var(--px-info-border-subtle);

    --bs-warning: var(--px-warning);
    --bs-warning-rgb: var(--px-warning-rgb);
    --bs-warning-text-emphasis: var(--px-warning-emphasis);
    --bs-warning-bg-subtle: var(--px-warning-subtle);
    --bs-warning-border-subtle: var(--px-warning-border-subtle);

    --bs-danger: var(--px-critical);
    --bs-danger-rgb: var(--px-critical-rgb);
    --bs-danger-text-emphasis: var(--px-critical-emphasis);
    --bs-danger-bg-subtle: var(--px-critical-subtle);
    --bs-danger-border-subtle: var(--px-critical-border-subtle);

    /* --bs-light/--bs-dark keep their meaning (text-light stays light); legacy
       bg-light / bg-white / text-dark usages are remapped further below. */
    --bs-light: #e4e8e6;
    --bs-light-rgb: 228, 232, 230;
    --bs-dark: #0b0f0d;
    --bs-dark-rgb: 11, 15, 13;

    --bs-link-color: var(--px-accent);
    --bs-link-color-rgb: var(--px-accent-rgb);
    --bs-link-hover-color: var(--px-accent-hover);
    --bs-link-hover-color-rgb: 119, 205, 179;
    --bs-code-color: #e3a0c8;
    --bs-highlight-color: var(--px-text);
    --bs-highlight-bg: var(--px-warning-subtle);

    --bs-border-color: var(--px-border);
    --bs-border-color-translucent: rgba(221, 228, 224, 0.12);

    --bs-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --bs-box-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.45);
    --bs-focus-ring-color: rgba(var(--px-accent-rgb), 0.3);

    --bs-form-valid-color: var(--px-ok);
    --bs-form-valid-border-color: var(--px-ok);
    --bs-form-invalid-color: var(--px-critical);
    --bs-form-invalid-border-color: var(--px-critical);
}

/* ---------- Base ---------- */
html {
    font-size: 14px;
}

body {
    background-color: var(--px-bg);
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.4rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.1rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.9rem; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Links: accent colour, underline only on hover (Bootstrap's reboot underlines every link). */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav-link:hover,
.dropdown-item:hover,
.btn:hover,
.navbar-brand:hover,
.page-link:hover,
.list-group-item-action:hover {
    text-decoration: none;
}

/* Monospace utility: IPs, versions, hashes, numbers. Tabular figures keep columns aligned. */
.mono,
.font-monospace,
code, kbd, pre, samp {
    font-family: var(--px-font-mono);
}

.mono {
    font-size: 0.925em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.min-w-0 {
    min-width: 0;
}

.px-pre-line {
    white-space: pre-line;
}

/* ---------- Components: buttons ---------- */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 0.8rem;
    --bs-btn-padding-y: 0.35rem;
}

.btn-sm {
    --bs-btn-padding-x: 0.55rem;
    --bs-btn-padding-y: 0.2rem;
    --bs-btn-font-size: 0.875rem;
}

.btn-primary {
    --bs-btn-color: var(--px-accent-contrast);
    --bs-btn-bg: var(--px-accent);
    --bs-btn-border-color: var(--px-accent);
    --bs-btn-hover-color: var(--px-accent-contrast);
    --bs-btn-hover-bg: var(--px-accent-hover);
    --bs-btn-hover-border-color: var(--px-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--px-accent-rgb);
    --bs-btn-active-color: var(--px-accent-contrast);
    --bs-btn-active-bg: var(--px-accent-active);
    --bs-btn-active-border-color: var(--px-accent-active);
    --bs-btn-disabled-color: var(--px-accent-contrast);
    --bs-btn-disabled-bg: var(--px-accent);
    --bs-btn-disabled-border-color: var(--px-accent);
}

.btn-outline-primary {
    --bs-btn-color: var(--px-accent);
    --bs-btn-border-color: var(--px-accent-border-subtle);
    --bs-btn-hover-color: var(--px-accent-contrast);
    --bs-btn-hover-bg: var(--px-accent);
    --bs-btn-hover-border-color: var(--px-accent);
    --bs-btn-focus-shadow-rgb: var(--px-accent-rgb);
    --bs-btn-active-color: var(--px-accent-contrast);
    --bs-btn-active-bg: var(--px-accent-active);
    --bs-btn-active-border-color: var(--px-accent-active);
    --bs-btn-disabled-color: var(--px-accent);
    --bs-btn-disabled-border-color: var(--px-accent-border-subtle);
}

.btn-secondary {
    --bs-btn-color: var(--px-text);
    --bs-btn-bg: var(--px-surface-3);
    --bs-btn-border-color: var(--px-border-strong);
    --bs-btn-hover-color: var(--px-text);
    --bs-btn-hover-bg: var(--px-border);
    --bs-btn-hover-border-color: var(--px-border-strong);
    --bs-btn-focus-shadow-rgb: var(--px-unknown-rgb);
    --bs-btn-active-color: var(--px-text);
    --bs-btn-active-bg: var(--px-border-strong);
    --bs-btn-active-border-color: var(--px-border-strong);
    --bs-btn-disabled-color: var(--px-text-muted);
    --bs-btn-disabled-bg: var(--px-surface-3);
    --bs-btn-disabled-border-color: var(--px-border);
}

.btn-outline-secondary {
    --bs-btn-color: var(--px-text);
    --bs-btn-border-color: var(--px-border-strong);
    --bs-btn-hover-color: var(--px-text);
    --bs-btn-hover-bg: var(--px-surface-3);
    --bs-btn-hover-border-color: var(--px-border-strong);
    --bs-btn-focus-shadow-rgb: var(--px-unknown-rgb);
    --bs-btn-active-color: var(--px-text);
    --bs-btn-active-bg: var(--px-border);
    --bs-btn-active-border-color: var(--px-border-strong);
    --bs-btn-disabled-color: var(--px-text-subtle);
    --bs-btn-disabled-border-color: var(--px-border);
}

.btn-success {
    --bs-btn-bg: var(--px-ok);
    --bs-btn-border-color: var(--px-ok);
    --bs-btn-hover-bg: var(--px-ok-emphasis);
    --bs-btn-hover-border-color: var(--px-ok-emphasis);
    --bs-btn-active-bg: var(--px-ok-emphasis);
    --bs-btn-active-border-color: var(--px-ok-emphasis);
    --bs-btn-disabled-bg: var(--px-ok);
    --bs-btn-disabled-border-color: var(--px-ok);
    --bs-btn-focus-shadow-rgb: var(--px-ok-rgb);
}

.btn-outline-success {
    --bs-btn-color: var(--px-ok);
    --bs-btn-border-color: var(--px-ok);
    --bs-btn-hover-bg: var(--px-ok);
    --bs-btn-hover-border-color: var(--px-ok);
    --bs-btn-active-bg: var(--px-ok);
    --bs-btn-active-border-color: var(--px-ok);
    --bs-btn-disabled-color: var(--px-ok);
    --bs-btn-disabled-border-color: var(--px-ok);
    --bs-btn-focus-shadow-rgb: var(--px-ok-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--px-critical);
    --bs-btn-border-color: var(--px-critical);
    --bs-btn-hover-bg: var(--px-critical-emphasis);
    --bs-btn-hover-border-color: var(--px-critical-emphasis);
    --bs-btn-active-bg: var(--px-critical-emphasis);
    --bs-btn-active-border-color: var(--px-critical-emphasis);
    --bs-btn-disabled-bg: var(--px-critical);
    --bs-btn-disabled-border-color: var(--px-critical);
    --bs-btn-focus-shadow-rgb: var(--px-critical-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--px-critical);
    --bs-btn-border-color: var(--px-critical);
    --bs-btn-hover-bg: var(--px-critical);
    --bs-btn-hover-border-color: var(--px-critical);
    --bs-btn-active-bg: var(--px-critical);
    --bs-btn-active-border-color: var(--px-critical);
    --bs-btn-disabled-color: var(--px-critical);
    --bs-btn-disabled-border-color: var(--px-critical);
    --bs-btn-focus-shadow-rgb: var(--px-critical-rgb);
}

.btn-warning {
    --bs-btn-color: #1d1408;
    --bs-btn-bg: var(--px-warning);
    --bs-btn-border-color: var(--px-warning);
    --bs-btn-hover-color: #1d1408;
    --bs-btn-hover-bg: var(--px-warning);
    --bs-btn-hover-border-color: var(--px-warning-emphasis);
    --bs-btn-active-color: #1d1408;
    --bs-btn-active-bg: var(--px-warning);
    --bs-btn-active-border-color: var(--px-warning-emphasis);
    --bs-btn-disabled-color: #1d1408;
    --bs-btn-disabled-bg: var(--px-warning);
    --bs-btn-disabled-border-color: var(--px-warning);
    --bs-btn-focus-shadow-rgb: var(--px-warning-rgb);
}

.btn-outline-warning {
    --bs-btn-color: var(--px-warning);
    --bs-btn-border-color: var(--px-warning);
    --bs-btn-hover-color: #1d1408;
    --bs-btn-hover-bg: var(--px-warning);
    --bs-btn-hover-border-color: var(--px-warning);
    --bs-btn-active-color: #1d1408;
    --bs-btn-active-bg: var(--px-warning);
    --bs-btn-active-border-color: var(--px-warning);
    --bs-btn-disabled-color: var(--px-warning);
    --bs-btn-disabled-border-color: var(--px-warning);
    --bs-btn-focus-shadow-rgb: var(--px-warning-rgb);
}

.btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--px-info);
    --bs-btn-border-color: var(--px-info);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--px-info-emphasis);
    --bs-btn-hover-border-color: var(--px-info-emphasis);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--px-info-emphasis);
    --bs-btn-active-border-color: var(--px-info-emphasis);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--px-info);
    --bs-btn-disabled-border-color: var(--px-info);
    --bs-btn-focus-shadow-rgb: var(--px-info-rgb);
}

.btn-outline-info {
    --bs-btn-color: var(--px-info);
    --bs-btn-border-color: var(--px-info);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--px-info);
    --bs-btn-hover-border-color: var(--px-info);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--px-info);
    --bs-btn-active-border-color: var(--px-info);
    --bs-btn-disabled-color: var(--px-info);
    --bs-btn-disabled-border-color: var(--px-info);
    --bs-btn-focus-shadow-rgb: var(--px-info-rgb);
}

.btn-light {
    --bs-btn-color: var(--px-text);
    --bs-btn-bg: var(--px-surface-2);
    --bs-btn-border-color: var(--px-border);
    --bs-btn-hover-color: var(--px-text);
    --bs-btn-hover-bg: var(--px-surface-3);
    --bs-btn-hover-border-color: var(--px-border-strong);
    --bs-btn-active-color: var(--px-text);
    --bs-btn-active-bg: var(--px-surface-3);
    --bs-btn-active-border-color: var(--px-border-strong);
    --bs-btn-disabled-color: var(--px-text-muted);
    --bs-btn-disabled-bg: var(--px-surface-2);
    --bs-btn-disabled-border-color: var(--px-border);
}

.btn-link {
    --bs-btn-color: var(--px-accent);
    --bs-btn-hover-color: var(--px-accent-hover);
    --bs-btn-active-color: var(--px-accent-active);
}

/* In dark mode, solid accent buttons carry dark text (light accent background). */
[data-bs-theme=dark] .btn-warning,
[data-bs-theme=dark] .btn-outline-warning:hover {
    --bs-btn-color: #1d1408;
}

/* ---------- Badges (solid) ---------- */
.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-padding-x: 0.5em;
    --bs-badge-padding-y: 0.3em;
    --bs-badge-border-radius: var(--px-radius-sm);
    letter-spacing: 0.01em;
}

/* Legacy "bg-warning text-dark" / "bg-info text-dark" pairs: amber keeps dark text, the
   (now darker) info blue needs light text in both themes. */
.badge.bg-warning.text-dark,
.text-bg-warning {
    color: #1d1408 !important;
}

.bg-info.text-dark,
.text-bg-info {
    color: #ffffff !important;
}

/* The dark-mode accent is light: text on solid accent surfaces turns dark. */
[data-bs-theme=dark] .badge.bg-primary,
[data-bs-theme=dark] .bg-primary.text-white,
[data-bs-theme=dark] .text-bg-primary {
    color: var(--px-accent-contrast) !important;
}

/* Safety net for legacy fixed-colour utilities in dark mode (new code uses
   bg-body-tertiary / bg-body / text-body instead). */
[data-bs-theme=dark] .bg-light {
    background-color: var(--px-surface-2) !important;
}

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

[data-bs-theme=dark] .text-dark:not(.bg-warning):not(.bg-info):not(.text-bg-warning):not(.text-bg-info) {
    color: var(--px-text) !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-color: var(--px-border-strong);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--px-accent);
    box-shadow: 0 0 0 0.2rem rgba(var(--px-accent-rgb), 0.2);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--px-accent);
    border-color: var(--px-accent);
}

.form-range::-webkit-slider-thumb { background-color: var(--px-accent); }
.form-range::-moz-range-thumb { background-color: var(--px-accent); }

.form-label {
    font-weight: 500;
    margin-bottom: 0.3rem;
}

.form-text {
    color: var(--px-text-muted);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--px-accent-rgb), 0.25);
}

/* ---------- Cards ---------- */
.card {
    --bs-card-border-color: var(--px-border);
    --bs-card-border-radius: var(--px-radius-lg);
    --bs-card-inner-border-radius: calc(var(--px-radius-lg) - 1px);
    --bs-card-cap-bg: var(--px-surface-2);
    --bs-card-cap-padding-y: 0.55rem;
    --bs-card-cap-padding-x: 0.9rem;
    --bs-card-spacer-y: 0.9rem;
    --bs-card-spacer-x: 0.9rem;
    --bs-card-bg: var(--px-surface);
    box-shadow: none;
}

.card.shadow,
.card.shadow-sm {
    box-shadow: none !important;
}

/* ---------- Tables ---------- */
.table {
    --bs-table-color: var(--px-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--px-border);
    --bs-table-striped-color: var(--px-text);
    --bs-table-striped-bg: rgba(var(--px-text-rgb), 0.025);
    --bs-table-hover-color: var(--px-text);
    --bs-table-hover-bg: rgba(var(--px-accent-rgb), 0.06);
    --bs-table-active-color: var(--px-text);
    --bs-table-active-bg: rgba(var(--px-accent-rgb), 0.1);
    margin-bottom: 0.75rem;
}

.table > :not(caption) > * > * {
    padding: 0.4rem 0.6rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.25rem 0.45rem;
}

.table > thead > tr > th,
.table > thead > tr > td {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--px-text-muted);
    background-color: var(--px-surface-2);
    border-bottom: 1px solid var(--px-border-strong);
    white-space: nowrap;
}

/* Legacy table header/row variants follow the theme instead of fixed light/dark colours. */
.table-light,
.table-dark {
    --bs-table-color: var(--px-text);
    --bs-table-bg: var(--px-surface-2);
    --bs-table-border-color: var(--px-border);
    --bs-table-striped-bg: var(--px-surface-3);
    --bs-table-striped-color: var(--px-text);
    --bs-table-active-bg: var(--px-surface-3);
    --bs-table-active-color: var(--px-text);
    --bs-table-hover-bg: var(--px-surface-3);
    --bs-table-hover-color: var(--px-text);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

.table-success { --bs-table-bg: var(--px-ok-subtle); --bs-table-color: var(--px-text); --bs-table-border-color: var(--px-ok-border-subtle); }
.table-warning { --bs-table-bg: var(--px-warning-subtle); --bs-table-color: var(--px-text); --bs-table-border-color: var(--px-warning-border-subtle); }
.table-danger { --bs-table-bg: var(--px-critical-subtle); --bs-table-color: var(--px-text); --bs-table-border-color: var(--px-critical-border-subtle); }
.table-info { --bs-table-bg: var(--px-info-subtle); --bs-table-color: var(--px-text); --bs-table-border-color: var(--px-info-border-subtle); }
.table-primary { --bs-table-bg: var(--px-accent-subtle); --bs-table-color: var(--px-text); --bs-table-border-color: var(--px-accent-border-subtle); }
.table-secondary { --bs-table-bg: var(--px-surface-3); --bs-table-color: var(--px-text); --bs-table-border-color: var(--px-border-strong); }

/* ---------- Navigation, dropdowns, misc. ---------- */
.dropdown-menu {
    --bs-dropdown-font-size: 0.95rem;
    --bs-dropdown-border-color: var(--px-border);
    --bs-dropdown-border-radius: var(--px-radius-lg);
    --bs-dropdown-box-shadow: var(--bs-box-shadow);
    --bs-dropdown-link-active-color: var(--px-accent-emphasis);
    --bs-dropdown-link-active-bg: var(--px-accent-subtle);
    --bs-dropdown-link-hover-bg: var(--px-surface-2);
    --bs-dropdown-item-padding-y: 0.35rem;
    --bs-dropdown-header-color: var(--px-text-subtle);
    --bs-dropdown-divider-bg: var(--px-border);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.nav-pills {
    --bs-nav-pills-link-active-color: var(--px-accent-contrast);
    --bs-nav-pills-link-active-bg: var(--px-accent);
}

.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--px-text);
    --bs-nav-tabs-link-active-bg: var(--px-surface);
    --bs-nav-tabs-border-color: var(--px-border);
    --bs-nav-tabs-link-active-border-color: var(--px-border) var(--px-border) var(--px-surface);
}

.nav {
    --bs-nav-link-color: var(--px-text-muted);
    --bs-nav-link-hover-color: var(--px-text);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    font-weight: 500;
}

.pagination {
    --bs-pagination-active-bg: var(--px-accent);
    --bs-pagination-active-border-color: var(--px-accent);
    --bs-pagination-active-color: var(--px-accent-contrast);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--px-accent-rgb), 0.25);
}

.list-group {
    --bs-list-group-active-bg: var(--px-accent);
    --bs-list-group-active-border-color: var(--px-accent);
    --bs-list-group-active-color: var(--px-accent-contrast);
    --bs-list-group-action-hover-bg: var(--px-surface-2);
}

.progress,
.progress-stacked {
    --bs-progress-bg: var(--px-surface-3);
    --bs-progress-bar-bg: var(--px-accent);
    --bs-progress-height: 0.75rem;
    --bs-progress-border-radius: var(--px-radius-sm);
}

.alert {
    --bs-alert-border-radius: var(--px-radius-lg);
    --bs-alert-padding-y: 0.7rem;
    --bs-alert-padding-x: 0.9rem;
}

.modal {
    --bs-modal-border-color: var(--px-border);
    --bs-modal-border-radius: var(--px-radius-lg);
    --bs-modal-header-border-color: var(--px-border);
    --bs-modal-footer-border-color: var(--px-border);
    --bs-modal-header-padding: 0.8rem 1rem;
    --bs-modal-padding: 1rem;
}

.accordion {
    --bs-accordion-border-color: var(--px-border);
    --bs-accordion-active-color: var(--px-accent-emphasis);
    --bs-accordion-active-bg: var(--px-accent-subtle);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(var(--px-accent-rgb), 0.2);
    --bs-accordion-btn-padding-y: 0.7rem;
    --bs-accordion-body-padding-y: 0.8rem;
}

.toast {
    --bs-toast-border-color: var(--px-border);
    --bs-toast-header-bg: var(--px-surface-2);
}

.popover {
    --bs-popover-border-color: var(--px-border);
}

/* ---------- App shell: fixed sidebar + main column (MainLayout) ---------- */
/* Sidebar state is a class on <html> (js/shell.js): px-sidebar-collapsed (desktop icon rail,
   remembered in localStorage) and px-sidebar-open (mobile off-canvas). */
.px-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    width: var(--px-sidebar-width);
    background-color: var(--px-sidebar-bg);
    color: var(--px-sidebar-text);
    border-right: 1px solid var(--px-sidebar-border);
    transition: width 0.15s ease, transform 0.2s ease;
}

.px-sidebar:focus {
    outline: none;
}

.px-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--px-sidebar-width);
    transition: margin-left 0.15s ease;
}

.px-content {
    flex: 1 1 auto;
    min-width: 0;
}

.px-sidebar-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    height: var(--px-topbar-height);
    padding: 0 0.5rem 0 1rem;
    border-bottom: 1px solid var(--px-sidebar-border);
}

.px-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    color: var(--px-sidebar-text-strong);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.px-sidebar-brand:hover {
    color: var(--px-sidebar-text-strong);
    text-decoration: none;
}

.px-sidebar-brand .bi {
    color: var(--px-sidebar-active-indicator);
    font-size: 1.2rem;
}

.px-sidebar-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--px-radius);
    background: transparent;
    color: var(--px-sidebar-text-muted);
}

.px-sidebar-iconbtn:hover {
    background: var(--px-sidebar-hover-bg);
    color: var(--px-sidebar-text-strong);
}

.px-sidebar-iconbtn:focus-visible,
.px-nav-link:focus-visible,
.px-nav-group-toggle:focus-visible,
.px-cs-button:focus-visible {
    outline: 2px solid var(--px-sidebar-focus-ring);
    outline-offset: -2px;
}

.px-sidebar-nav {
    flex: 1 1 auto;
    padding: 0.5rem 0.5rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--px-sidebar-border) transparent;
}

.px-nav-section + .px-nav-section {
    margin-top: 0.75rem;
}

.px-nav-heading,
.px-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    margin: 0 0 0.15rem;
    padding: 0.3rem 0.6rem;
    border: 0;
    border-radius: var(--px-radius-sm);
    background: transparent;
    color: var(--px-sidebar-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.px-nav-group-toggle:hover {
    background: var(--px-sidebar-hover-bg);
    color: var(--px-sidebar-text);
}

.px-nav-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.px-nav-group.is-collapsed .px-nav-chevron {
    transform: rotate(-90deg);
}

.px-nav-group.is-collapsed .px-nav-list {
    display: none;
}

.px-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.px-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1px;
    padding: 0.42rem 0.6rem;
    border-radius: var(--px-radius);
    color: var(--px-sidebar-text);
    font-weight: 500;
    white-space: nowrap;
}

.px-nav-link > .bi {
    flex-shrink: 0;
    width: 1.25rem;
    color: var(--px-sidebar-text-muted);
    font-size: 1.05rem;
    text-align: center;
}

.px-nav-link:hover {
    background: var(--px-sidebar-hover-bg);
    color: var(--px-sidebar-text-strong);
    text-decoration: none;
}

.px-nav-link:hover > .bi {
    color: var(--px-sidebar-text-strong);
}

.px-nav-link.active {
    background: var(--px-sidebar-active-bg);
    color: var(--px-sidebar-active-text);
}

.px-nav-link.active > .bi {
    color: var(--px-sidebar-active-indicator);
}

.px-nav-link.active::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: -0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--px-sidebar-active-indicator);
}

.px-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.px-nav-badge {
    display: inline-flex;
    margin-left: auto;
}

.px-nav-badge .badge {
    margin-left: 0 !important;
}

.px-sidebar-footer {
    flex-shrink: 0;
    padding: 0.5rem 1rem 0.65rem;
    overflow: hidden;
    border-top: 1px solid var(--px-sidebar-border);
    color: var(--px-sidebar-text-muted);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-sidebar-backdrop {
    display: none;
}

/* Desktop: collapsible to an icon rail */
@media (min-width: 992px) {
    .px-sidebar-collapsed .px-sidebar {
        width: var(--px-sidebar-width-collapsed);
    }

    .px-sidebar-collapsed .px-main {
        margin-left: var(--px-sidebar-width-collapsed);
    }

    .px-sidebar-collapsed .px-sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .px-sidebar-collapsed .px-sidebar-brand,
    .px-sidebar-collapsed .px-nav-label,
    .px-sidebar-collapsed .px-nav-heading,
    .px-sidebar-collapsed .px-nav-group-toggle,
    .px-sidebar-collapsed .px-cs-label,
    .px-sidebar-collapsed .px-cs-caret,
    .px-sidebar-collapsed .px-sidebar-footer {
        display: none;
    }

    .px-sidebar-collapsed .px-sidebar-iconbtn {
        margin-left: 0;
    }

    .px-sidebar-collapsed .px-nav-section + .px-nav-section {
        padding-top: 0.5rem;
        border-top: 1px solid var(--px-sidebar-border);
    }

    .px-sidebar-collapsed .px-nav-group.is-collapsed .px-nav-list {
        display: block;
    }

    .px-sidebar-collapsed .px-nav-link {
        justify-content: center;
        padding: 0.5rem 0;
    }

    .px-sidebar-collapsed .px-nav-badge {
        position: absolute;
        top: 0.05rem;
        right: 0.1rem;
    }

    .px-sidebar-collapsed .px-nav-badge .badge {
        padding: 0.2em 0.4em;
        font-size: 0.6rem;
    }

    .px-sidebar-collapsed .px-cs-button,
    .px-sidebar-collapsed .px-cs-static {
        justify-content: center;
        padding: 0.45rem 0;
    }

    .px-sidebar-collapsed .px-cs-panel {
        top: 0.6rem;
        left: calc(100% - 0.25rem);
    }
}

/* Mobile: off-canvas sidebar toggled from the top bar */
@media (max-width: 991.98px) {
    .px-sidebar {
        width: min(280px, 85vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .px-sidebar-open .px-sidebar {
        transform: none;
        visibility: visible;
        box-shadow: var(--bs-box-shadow-lg);
        transition: transform 0.2s ease;
    }

    .px-main {
        margin-left: 0;
    }

    .px-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1034;
        display: block;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .px-sidebar-open .px-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Top bar of the main column: page-owned title lives in PageHeader; search + user menu here */
.px-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--px-topbar-height);
    padding: 0 1rem;
    background-color: var(--px-nav-bg);
    border-bottom: 1px solid var(--px-nav-border);
}

.px-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--px-text);
    font-weight: 600;
}

.px-topbar-brand:hover {
    color: var(--px-text);
    text-decoration: none;
}

.px-topbar-brand .bi {
    color: var(--px-accent);
}

.px-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.px-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--px-radius);
    background: transparent;
    color: var(--px-nav-color);
}

.px-topbar-btn:hover,
.px-topbar-btn.show {
    background: var(--px-surface-2);
    color: var(--px-nav-hover-color);
}

.px-topbar-btn:focus-visible {
    outline: 2px solid rgba(var(--px-accent-rgb), 0.45);
    outline-offset: 1px;
}

.px-user-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-user-menu .dropdown-item.active {
    background-color: var(--px-accent-subtle);
    color: var(--px-accent-emphasis);
}

/* Global search (top bar) */
.px-search {
    position: relative;
    flex: 0 1 26rem;
    min-width: 0;
}

.px-search-icon {
    position: absolute;
    top: 50%;
    left: 0.65rem;
    color: var(--px-text-subtle);
    pointer-events: none;
    transform: translateY(-50%);
}

.px-search-input.form-control {
    padding-right: 3.6rem;
    padding-left: 2rem;
    background-color: var(--px-surface-2);
    border-color: transparent;
}

.px-search-input.form-control:focus {
    background-color: var(--px-surface);
    border-color: var(--px-accent-border-subtle);
}

.px-search-input::-webkit-search-cancel-button {
    display: none;
}

.px-search-kbd {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-sm);
    background: var(--px-surface);
    color: var(--px-text-subtle);
    font-family: var(--px-font-mono);
    font-size: 0.7rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.px-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1060;
    min-width: 22rem;
    max-height: 70vh;
    padding: 0.35rem 0;
    overflow-y: auto;
    background: var(--px-surface);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
}

.px-search-group,
.px-cs-section {
    padding: 0.4rem 0.75rem 0.15rem;
    color: var(--px-text-subtle);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.px-search-hit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.75rem;
    color: var(--px-text);
}

.px-search-hit:hover,
.px-search-hit.is-active {
    background: var(--px-accent-subtle);
    color: var(--px-accent-emphasis);
    text-decoration: none;
}

.px-search-hit > .bi {
    flex-shrink: 0;
    color: var(--px-text-muted);
}

.px-search-hit-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.px-search-hit-title,
.px-search-hit-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-search-hit-sub {
    color: var(--px-text-muted);
    font-size: 0.8rem;
}

.px-search-empty {
    padding: 0.6rem 0.75rem;
    color: var(--px-text-muted);
    font-size: 0.875rem;
}

@media (max-width: 575.98px) {
    .px-search-kbd {
        display: none;
    }

    .px-search-input.form-control {
        padding-right: 0.75rem;
    }

    .px-search-results {
        position: fixed;
        top: calc(var(--px-topbar-height) + 4px);
        left: 0.5rem;
        right: 0.5rem;
        min-width: 0;
    }
}

/* Customer switcher (top of the sidebar) */
.px-cs {
    position: relative;
    flex-shrink: 0;
    padding: 0.6rem 0.5rem 0.25rem;
}

.px-cs-button {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--px-sidebar-border);
    border-radius: var(--px-radius);
    background: var(--px-sidebar-bg-elevated);
    color: var(--px-sidebar-text-strong);
    font-weight: 500;
    text-align: left;
}

.px-cs-button:hover {
    border-color: var(--px-sidebar-text-muted);
}

.px-cs-button > .bi,
.px-cs-static > .bi {
    color: var(--px-sidebar-text-muted);
}

.px-cs-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-cs-caption {
    display: block;
    color: var(--px-sidebar-text-muted);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.px-cs-caret {
    color: var(--px-sidebar-text-muted);
    font-size: 0.75rem;
}

.px-cs-static {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.6rem;
    color: var(--px-sidebar-text-strong);
    font-weight: 500;
}

.px-cs-static:hover {
    color: var(--px-sidebar-text-strong);
}

.px-cs-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1055;
}

.px-cs-panel {
    position: absolute;
    top: calc(100% - 0.1rem);
    left: 0.5rem;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    width: 20rem;
    max-width: calc(100vw - 1rem);
    max-height: min(28rem, 75vh);
    background: var(--px-surface);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-lg);
    box-shadow: var(--bs-box-shadow-lg);
    color: var(--px-text);
}

.px-cs-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--px-border);
}

.px-cs-list {
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    list-style: none;
}

.px-cs-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.75rem;
    cursor: pointer;
}

.px-cs-option:hover,
.px-cs-option.is-active {
    background: var(--px-surface-2);
}

.px-cs-option.is-selected {
    color: var(--px-accent-emphasis);
    font-weight: 600;
}

.px-cs-option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-cs-alerts {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--px-text-subtle);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.px-cs-alerts.has-alerts {
    color: var(--px-warning-emphasis);
}

/* Health dot: worst status of a customer; unknown = dashed grey ring */
.px-health-dot {
    display: inline-block;
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--px-surface-3);
}

.px-health-dot.is-ok { background: var(--px-ok); }
.px-health-dot.is-warning { background: var(--px-warning); }
.px-health-dot.is-critical { background: var(--px-critical); }

.px-health-dot.is-unknown {
    background: transparent;
    border: 1.5px dashed var(--px-unknown);
}

/* Customer page tabs (CustomerPage) */
.px-tabs {
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.px-tabs .nav-link {
    white-space: nowrap;
}

/* ---------- Shared UI components (Components/Shared/Ui) ---------- */
.px-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.px-page-header .breadcrumb {
    --bs-breadcrumb-font-size: 0.8125rem;
    --bs-breadcrumb-margin-bottom: 0.15rem;
    --bs-breadcrumb-divider-color: var(--px-text-subtle);
    --bs-breadcrumb-item-active-color: var(--px-text-muted);
}

.px-page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.px-page-title > .bi {
    color: var(--px-text-muted);
    font-size: 1.2rem;
}

.px-page-subtitle {
    margin: 0.15rem 0 0;
    color: var(--px-text-muted);
    font-size: 0.925rem;
}

.px-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.px-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    background-color: var(--px-surface);
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-lg);
}

/* Status chip: tinted background, emphasis text, small icon. Calmer than solid badges. */
.px-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.55em;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid var(--px-chip-border);
    border-radius: var(--px-radius-sm);
    color: var(--px-chip-color);
    background-color: var(--px-chip-bg);
}

.px-chip > .bi {
    font-size: 0.9em;
    color: var(--px-chip-icon);
}

.px-chip-lg {
    font-size: 0.95rem;
    padding: 0.3em 0.75em;
}

.px-chip-critical { --px-chip-color: var(--px-critical-emphasis); --px-chip-bg: var(--px-critical-subtle); --px-chip-border: var(--px-critical-border-subtle); --px-chip-icon: var(--px-critical); }
.px-chip-warning  { --px-chip-color: var(--px-warning-emphasis);  --px-chip-bg: var(--px-warning-subtle);  --px-chip-border: var(--px-warning-border-subtle);  --px-chip-icon: var(--px-warning); }
.px-chip-ok       { --px-chip-color: var(--px-ok-emphasis);       --px-chip-bg: var(--px-ok-subtle);       --px-chip-border: var(--px-ok-border-subtle);       --px-chip-icon: var(--px-ok); }
.px-chip-info     { --px-chip-color: var(--px-info-emphasis);     --px-chip-bg: var(--px-info-subtle);     --px-chip-border: var(--px-info-border-subtle);     --px-chip-icon: var(--px-info); }
.px-chip-unknown  { --px-chip-color: var(--px-unknown-emphasis);  --px-chip-bg: var(--px-unknown-subtle);  --px-chip-border: var(--px-unknown-border-subtle);  --px-chip-icon: var(--px-unknown); }
.px-chip-accent   { --px-chip-color: var(--px-accent-emphasis);   --px-chip-bg: var(--px-accent-subtle);   --px-chip-border: var(--px-accent-border-subtle);   --px-chip-icon: var(--px-accent); }

.px-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    color: var(--px-text-muted);
}

.px-empty-state > .bi {
    font-size: 2rem;
    color: var(--px-text-subtle);
    margin-bottom: 0.25rem;
}

.px-empty-state-title {
    font-weight: 600;
    color: var(--px-text);
}

.px-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.5rem 1rem;
    color: var(--px-text-muted);
}

.px-loading-state .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 0.15em;
    color: var(--px-accent);
}

.px-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Blazor-rendered modal (ConfirmDialog): no Bootstrap JS involved. */
/* Stacks above page-level modals so a confirmation from inside a dialog stays on top. */
.px-modal-open {
    display: block;
    z-index: 1075;
}

.px-modal-backdrop {
    opacity: 0.5;
    z-index: 1070;
}

/* ---------- Health dot: acknowledged-only ("known") ---------- */
/* Filled dot with a hollow centre: the status is caused by acknowledged alerts only. */
.px-health-dot.is-known {
    background: transparent;
    border: 2.5px solid var(--px-unknown);
}
.px-health-dot.is-known.is-critical { border-color: var(--px-critical); }
.px-health-dot.is-known.is-warning { border-color: var(--px-warning); }

/* ---------- Alert row (cockpit, customer overview, device issues) ---------- */
.px-alert-list {
    display: flex;
    flex-direction: column;
}

.px-alert-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem 0.55rem 0.85rem;
    border-left: 3px solid var(--px-unknown);
    border-bottom: 1px solid var(--px-border);
    background: var(--px-surface);
}

.px-alert-row:last-child {
    border-bottom: 0;
}

.px-alert-row:hover {
    background: var(--px-surface-2);
}

.px-alert-row.is-critical { border-left-color: var(--px-critical); }
.px-alert-row.is-warning { border-left-color: var(--px-warning); }
.px-alert-row.is-info { border-left-color: var(--px-info); }

.px-alert-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.px-alert-row-title {
    font-weight: 600;
    color: var(--px-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.px-alert-row-title:hover {
    color: var(--px-accent);
}

.px-alert-row-meta {
    font-size: 0.8125rem;
    color: var(--px-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-alert-row-meta a {
    color: inherit;
}

.px-alert-row-meta a:hover {
    color: var(--px-accent);
}

.px-alert-row-side {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    color: var(--px-text-muted);
    text-align: right;
}

.px-alert-row-actions {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.35rem;
}

.px-alert-row.has-actions {
    flex-wrap: wrap;
}

/* ---------- KPI tiles (cockpit) ---------- */
.px-kpi {
    display: block;
    height: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-lg);
    background: var(--px-surface);
    color: var(--px-text);
    text-decoration: none;
}

a.px-kpi:hover {
    border-color: var(--px-border-strong);
    color: var(--px-text);
}

.px-kpi-label {
    font-size: 0.8125rem;
    color: var(--px-text-muted);
}

.px-kpi-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.px-kpi.is-critical .px-kpi-value { color: var(--px-critical); }
.px-kpi.is-warning .px-kpi-value { color: var(--px-warning); }
.px-kpi.is-ok .px-kpi-value { color: var(--px-ok); }

/* ---------- Customer matrix (cockpit) ---------- */
.px-matrix {
    margin-bottom: 0;
}

.px-matrix th.px-matrix-col,
.px-matrix td.px-matrix-cell {
    width: 3.25rem;
    text-align: center;
}

.px-matrix tbody tr {
    cursor: pointer;
}

.px-matrix-cell a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.px-matrix-cell a:hover,
.px-matrix-cell a:focus-visible {
    background: var(--px-surface-3);
}

.px-matrix-cell .px-health-dot {
    width: 0.8rem;
    height: 0.8rem;
}

.px-matrix-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.px-matrix-name a {
    color: var(--px-text);
    text-decoration: none;
    font-weight: 600;
}

.px-matrix-name a:hover {
    color: var(--px-accent);
}

/* ---------- Status lines (customer overview "Zustand") ---------- */
.px-status-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--px-border);
}

.px-status-line:last-child {
    border-bottom: 0;
}

.px-status-line-label {
    min-width: 0;
}

.px-status-line-value {
    font-size: 0.8125rem;
    color: var(--px-text-muted);
}

/* Small neutral tag (server role, device type) */
.px-tag {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
    border: 1px solid var(--px-border);
    border-radius: var(--px-radius-sm);
    background: var(--px-surface-2);
    color: var(--px-text-muted);
    white-space: nowrap;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--px-scrollbar);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--px-scrollbar-hover);
}