/* NextGen Platform UI - Scania-inspired dual theme */
:root {
    color-scheme: light;
    --font-sans: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --color-brand: #0c2340;
    --color-brand-strong: #041733;
    --color-accent: #1f3d7a;
    --color-accent-strong: #2e5c9a;
    --color-accent-soft: #e3e8f2;
    --color-highlight: #385488;
    

    --color-surface-0: #f5f7fb;
    --color-surface-1: #ffffff;
    --color-surface-2: #ebeff5;
    --color-surface-translucent: rgba(255, 255, 255, 0.9);
    --color-border: #c8d0e0;
    --color-divider: rgba(12, 35, 64, 0.08);
    --color-heading: #1a2644;
    --color-text: #273353;
    --color-text-muted: #5f6b87;
    --color-link: #1f4f91;
    --color-success: #1BA97F;
    --color-danger: #D64550;
    --color-warning: #F2C94C;

    --sidebar-width: 280px;
    --sidebar-collapsed-width: 88px;

    --sidebar-surface-top: #041e42;
    --sidebar-surface-bottom: #092659;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #f4f7fc;
    --sidebar-text-muted: rgba(235, 240, 250, 0.7);
    --sidebar-active: #2e5c9a;
    --sidebar-icon-bg: rgba(255, 255, 255, 0.12);

    --shadow-xs: 0 2px 6px rgba(12, 35, 64, 0.08);
    --shadow-sm: 0 8px 22px rgba(12, 35, 64, 0.12);
    --shadow-md: 0 18px 45px rgba(12, 35, 64, 0.16);

    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* The header bar is 72px; --header-height is what the page must clear below it (the bar,
       plus the station-chip row on station pages below 992px). */
    --header-bar-height: 72px;
    --header-height: var(--header-bar-height);

    /* Shell density tokens (Responsive Audit Phase 1).
       Every shell padding flows through these so density can be retuned per breakpoint
       from one place instead of restating `padding` shorthands in each media query.
       Because browser zoom shrinks the *effective* viewport width, the width-based
       overrides below also make the chrome compact as the user zooms in — which is the
       opposite of the previous behaviour, where zoom inflated chrome and content alike. */
    --shell-pad-x: 3rem;        /* .main-content left/right */
    --shell-pad-y: 2.5rem;      /* .main-content gap below the fixed header */
    --shell-pad-bottom: 1.5rem; /* .main-content bottom; the status line sits in it */
    --wrapper-pad: 2.5rem;      /* .content-wrapper */

    /* Sidebar internal density. The width steps below trim this padding in step with the
       sidebar width so the label track stays roughly constant. Station links carry short
       labels ("Pack Assembly") because the code sits in its own badge beside them. */
    --sidebar-pad-x: 1.1rem;
    --nav-link-pad-x: 0.6rem;
    --nav-icon-col: 46px;
    /* Must stay <= --nav-icon-col: each .nav-link is its own grid, so the icon track has
       to be a fixed width for icons/badges to line up across rows, and a badge wider than
       the track spills into the label gap. The widest code, PB010, needs ~43px. */
    --station-badge-min: 2.6rem;

    --focus-ring: 0 0 0 3px rgba(47, 77, 126, 0.28);
    --transition-base: 0.25s ease;

    /* legacy tokens */
    --page-bg: var(--color-surface-0);
    --content-bg: var(--color-surface-1);
    --border-color: var(--color-border);
    --accent-color: var(--color-accent);
    --text-color: var(--color-text);
    --text-dark: var(--color-heading);
    --text-muted: var(--color-text-muted);
    --sidebar-bg: var(--sidebar-surface-top);

    --bs-body-bg: var(--content-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-secondary-color: var(--color-text-muted);
    --bs-card-bg: var(--content-bg);
    --bs-card-color: var(--color-text);
    --bs-heading-color: var(--color-heading);
}

html[data-theme='dark'] {
    color-scheme: dark;
    --color-brand: #07162d;
    --color-brand-strong: #0d2546;
    --color-accent: #3a69a9;
    --color-accent-strong: #4f7fbd;
    --color-accent-soft: rgba(58, 105, 169, 0.2);
    --color-surface-0: #050b16;
    --color-surface-1: #0c1529;
    --color-surface-2: #15213a;
    --color-surface-translucent: rgba(10, 18, 34, 0.92);
    --color-border: rgba(90, 116, 158, 0.4);
    --color-divider: rgba(79, 114, 165, 0.25);
    --color-heading: #f0f4ff;
    --color-text: #d6ddf2;
    --color-text-muted: #96a6c5;
    --color-link: #6f9ad6;
    --color-success: #37d29d;
    --color-danger: #ff6b81;
    --color-warning: #f6d365;

    --sidebar-surface-top: #030a1d;
    --sidebar-surface-bottom: #061634;
    --sidebar-border: rgba(86, 118, 168, 0.25);
    --sidebar-text: #e8eefc;
    --sidebar-text-muted: rgba(172, 189, 227, 0.7);
    --sidebar-active: #3a69a9;
    --sidebar-icon-bg: rgba(255, 255, 255, 0.08);

    --shadow-xs: 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 18px 36px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 30px 70px rgba(0, 0, 0, 0.55);

    --focus-ring: 0 0 0 3px rgba(63, 102, 162, 0.45);

    /* legacy tokens */
    --page-bg: var(--color-surface-0);
    --content-bg: var(--color-surface-1);
    --border-color: var(--color-border);
    --accent-color: var(--color-accent);
    --text-color: var(--color-text);
    --text-dark: var(--color-heading);
    --text-muted: var(--color-text-muted);
    --sidebar-bg: var(--sidebar-surface-top);

    --bs-body-bg: var(--content-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-secondary-color: var(--color-text-muted);
    --bs-card-bg: var(--content-bg);
    --bs-card-color: var(--color-text);
    --bs-heading-color: var(--color-heading);
}

/* Bootstrap's combined colour helpers. The app ships Bootstrap 5.1.0, which has no text-bg-*
   classes (they arrived in 5.2), but about thirty badges use them: without these rules such a
   badge has no background and keeps the badge's white text, so it reads white on white. Same
   colours as 5.1's bg-* helpers, with the text colour 5.2 pairs with each. */
.text-bg-primary {
    color: #ffffff !important;
    background-color: #0d6efd !important;
}

.text-bg-secondary {
    color: #ffffff !important;
    background-color: #6c757d !important;
}

.text-bg-success {
    color: #ffffff !important;
    background-color: #198754 !important;
}

.text-bg-danger {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

.text-bg-warning {
    color: #000000 !important;
    background-color: #ffc107 !important;
}

.text-bg-info {
    color: #000000 !important;
    background-color: #0dcaf0 !important;
}

.text-bg-light {
    color: #000000 !important;
    background-color: #f8f9fa !important;
}

.text-bg-dark {
    color: #ffffff !important;
    background-color: #212529 !important;
}

/* A "light" badge on a dark page is a quiet chip, the same way .bg-light is treated below. */
html[data-theme='dark'] .text-bg-light {
    color: var(--color-text) !important;
    background-color: var(--color-surface-2) !important;
    border-color: rgba(99, 134, 195, 0.35) !important;
}

html[data-theme='dark'] .card-header.bg-white {
    background-color: var(--color-surface-1) !important;
}

html[data-theme='dark'] .card-header.bg-white .text-muted {
    color: var(--color-text-muted) !important;
}

html[data-theme='dark'] .bg-light {
    background-color: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-color: rgba(99, 134, 195, 0.35) !important;
}

html[data-theme='dark'] .bg-light .text-muted {
    color: var(--color-text-muted) !important;
}

/* Bootstrap's tabs and collapsible lists are white boxes by default; on a dark page they take
   the page's own surfaces (Process Parameters, ERP Dashboard, Pack Nutrunner Rules). */
html[data-theme='dark'] .nav-tabs {
    border-bottom-color: var(--color-border);
}

html[data-theme='dark'] .nav-tabs .nav-link {
    color: var(--color-link);
}

html[data-theme='dark'] .nav-tabs .nav-link:hover,
html[data-theme='dark'] .nav-tabs .nav-link:focus {
    border-color: var(--color-border);
}

html[data-theme='dark'] .nav-tabs .nav-link.active {
    background-color: var(--color-surface-2);
    border-color: var(--color-border) var(--color-border) var(--color-surface-2);
    color: var(--color-heading);
}

html[data-theme='dark'] .accordion-item {
    background-color: var(--color-surface-1);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* The report cards' own buttons (.details-accordion-button) already follow the theme. */
html[data-theme='dark'] .accordion-button:not(.details-accordion-button) {
    background-color: var(--color-surface-1);
    color: var(--color-heading);
}

html[data-theme='dark'] .accordion-button:not(.details-accordion-button):not(.collapsed) {
    background-color: var(--color-surface-2);
    color: var(--color-heading);
    box-shadow: inset 0 -1px 0 var(--color-border);
}

html[data-theme='dark'] .list-group-item {
    background-color: var(--color-surface-1);
    color: var(--color-text);
    border-color: rgba(99, 134, 195, 0.25);
}

html[data-theme='dark'] .list-group-item:hover,
html[data-theme='dark'] .list-group-item:focus {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

html[data-theme='dark'] .list-group-item.active,
html[data-theme='dark'] .list-group-item.active:focus,
html[data-theme='dark'] .list-group-item.active:hover {
    background-color: rgba(63, 102, 162, 0.35);
    color: var(--color-heading);
    border-color: rgba(63, 102, 162, 0.6);
}

html[data-theme='dark'] .list-group-item .text-muted {
    color: var(--color-text-muted) !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* An in-page link (#section) must not land under the fixed header. */
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    font-family: var(--font-sans);
    background: var(--page-bg);
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding-left: var(--sidebar-width);
    transition: background-color var(--transition-base), color var(--transition-base), padding-left var(--transition-base);
}

body.sidebar-minimized {
    padding-left: 0;
}

body.sidebar-open {
    overflow: hidden;
}

.dropdown-selection-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    flex: 0 0 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    line-height: 1;
}

.dropdown-selection-icon-btn .bi {
    font-size: 1rem;
    line-height: 1;
}

.dropdown-selection-bulk-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
}

.qr-photo-scan-group {
    flex-wrap: nowrap;
    min-width: 0;
}

.qr-photo-scan-group > .form-control {
    min-width: 0;
}

.qr-photo-scan-button {
    min-width: 44px;
    width: 44px;
    flex: 0 0 44px;
    padding-inline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qr-photo-scan-button .bi {
    font-size: 1rem;
    line-height: 1;
}

.qr-photo-scan-button.is-decoding {
    opacity: 0.72;
}

.qr-photo-scan-file-input {
    display: none;
}

.qr-photo-scan-message {
    min-height: 1.2rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    line-height: 1.3;
}

.qr-live-scan-modal .modal-dialog {
    max-width: min(96vw, 540px);
}

.qr-live-scan-video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #101828;
    object-fit: cover;
}

.qr-live-scan-status {
    min-height: 1.2rem;
    margin-top: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.3;
}

.qr-live-scan-photo-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

p {
    color: var(--color-text);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-accent-strong);
    text-decoration: none;
}

hr {
    border-top: 1px solid var(--color-divider);
    opacity: 1;
    margin: 2rem 0;
}

::selection {
    background: rgba(47, 77, 126, 0.28);
    color: #fff;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

button, input, select, textarea {
    font-family: inherit;
}

button:focus-visible,
[role='button']:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(6, 24, 58, 0.25) transparent;
}

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

*::-webkit-scrollbar-thumb {
    background: rgba(6, 24, 58, 0.25);
    border-radius: 999px;
}

html[data-theme='dark'] * {
    scrollbar-color: rgba(99, 134, 195, 0.7) rgba(8, 16, 32, 0.85);
}

html[data-theme='dark'] *::-webkit-scrollbar-track {
    background: rgba(8, 16, 32, 0.85);
}

html[data-theme='dark'] *::-webkit-scrollbar-thumb {
    background: rgba(99, 134, 195, 0.65);
}

/* Sidebar */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    transform: translateX(0);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem var(--sidebar-pad-x) 1rem;
    background: linear-gradient(180deg, var(--sidebar-surface-top) 0%, var(--sidebar-surface-bottom) 100%);
    color: var(--sidebar-text);
    box-shadow: inset -1px 0 0 var(--sidebar-border);
    z-index: 1040;
    /* The brand stays on top and the user card at the foot; only the links scroll. */
    overflow: hidden;
    transition: transform var(--transition-base), width var(--transition-base), padding var(--transition-base);
}

/* The one brand mark in the shell. */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.sidebar-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0.15rem 0.35rem;
    color: var(--sidebar-text);
    text-decoration: none;
}

.sidebar-header .navbar-brand:hover,
.sidebar-header .navbar-brand:focus-visible {
    color: #fff;
}

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.brand-logomark {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.15;
}

.brand-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand-subtitle {
    font-size: 0.78rem;
    color: var(--sidebar-text-muted);
}

/* Shown only when the sidebar is the slide-in drawer (below 992px). */
.sidebar-close {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--sidebar-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.sidebar-close:hover,
.sidebar-close:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.sidebar-nav .nav-item {
    width: 100%;
}

/* A section heading is a row like the links - icon tile, name, chevron - in a heading's weight,
   and a real button, so the keyboard reaches it. The pages of an open section are indented beside
   a thin line (.nav-submenu below), so the list reads: section, then its pages. A long name
   wraps onto a second line rather than being cut off; the chevron keeps its own slot. */
.sidebar-nav .nav-section {
    margin-top: 0.2rem;
}

.nav-section-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding: 0.25rem var(--nav-link-pad-x);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--sidebar-text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.nav-section-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--sidebar-icon-bg);
    font-size: 1rem;
    transition: background-color var(--transition-base);
}

.nav-section-toggle__label {
    flex: 1 1 auto;
    min-width: 0;
}

/* The quarantine count sits on the corner of the section's icon, so the name keeps its room. */
.nav-section-toggle .nav-section-toggle__badge {
    position: absolute;
    top: 0;
    left: calc(var(--nav-link-pad-x) + 14px);
    min-width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: 0 0.28rem;
    font-size: 0.64rem;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px var(--sidebar-surface-top);
}

.nav-section-toggle__chevron {
    flex: 0 0 auto;
    width: 0.95rem;
    height: 0.95rem;
    color: var(--sidebar-text-muted);
    transition: transform var(--transition-base);
}

.nav-section-toggle[aria-expanded='true'] .nav-section-toggle__chevron {
    transform: rotate(90deg);
}

/* The section holding the current page keeps a marked icon, even after it has been closed. */
.nav-section-toggle.is-current .nav-section-toggle__icon {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.nav-section-toggle:hover,
.nav-section-toggle:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.nav-section-toggle:hover .nav-section-toggle__icon,
.nav-section-toggle:focus-visible .nav-section-toggle__icon {
    background: rgba(255, 255, 255, 0.18);
}

.nav-section-toggle:focus-visible,
.sidebar-nav .nav-link:focus-visible,
.sidebar-user__signout-button:focus-visible,
.sidebar-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 1px;
}

.nav-item--admin-hub {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sidebar-nav .nav-link {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 0.6rem;
    min-height: 2.5rem;
    padding: 0.25rem var(--nav-link-pad-x);
    border-radius: var(--radius-sm);
    color: var(--sidebar-text-muted);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.sidebar-nav .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 9px;
    background: var(--sidebar-icon-bg);
    font-size: 1rem;
    color: inherit;
    transition: background-color var(--transition-base), color var(--transition-base);
}

/* A station link shows its code badge in place of an icon tile. */
.sidebar-nav .nav-icon--code {
    width: auto;
    background: none;
}

.station-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Consolas", "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    border-radius: 10px;
    white-space: nowrap;
}

.station-code-badge--nav {
    min-width: var(--station-badge-min);
    height: 1.5rem;
    padding: 0 0.3rem;
    border-radius: 7px;
    font-size: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: #f6f9ff;
    background: rgba(4, 30, 66, 0.35);
}

.sidebar-nav .nav-link:hover .station-code-badge--nav,
.sidebar-nav .nav-link:focus-visible .station-code-badge--nav,
.sidebar-nav .nav-link.active .station-code-badge--nav,
.station-code-badge--nav.is-active {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.sidebar-nav .nav-label {
    color: var(--sidebar-text);
    font-size: 0.92rem;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-nav .nav-link:hover .nav-icon,
.sidebar-nav .nav-link:focus-visible .nav-icon {
    background: rgba(255, 255, 255, 0.18);
}

.sidebar-nav .nav-link:hover .nav-icon--code,
.sidebar-nav .nav-link:focus-visible .nav-icon--code {
    background: none;
}

.sidebar-nav .nav-link.active {
    color: #fff;
    background: var(--sidebar-active);
    box-shadow: none;
}

.sidebar-nav .nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.sidebar-nav .nav-link.active .nav-icon--code {
    background: none;
}

/* A section with station codes widens the first column so code badges and icons line up. */
.nav-submenu.nav-submenu--codes .nav-link {
    grid-template-columns: var(--nav-icon-col) minmax(0, 1fr);
}

.nav-submenu {
    margin: 0.1rem 0 0.4rem calc(var(--nav-link-pad-x) + 14px);
    padding-left: 0.3rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.nav-submenu .nav-link {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 0.5rem;
    min-height: 2.25rem;
    padding-left: 0.4rem;
    font-weight: 500;
}

.nav-submenu .nav-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: none;
    font-size: 0.95rem;
}

/* A station code badge keeps its own width; the column is widened below. */
.nav-submenu .nav-icon.nav-icon--code {
    width: auto;
    height: auto;
}

.nav-submenu .nav-label {
    font-size: 0.875rem;
}

.sidebar-nav .nav-submenu .nav-link:hover .nav-icon,
.sidebar-nav .nav-submenu .nav-link:focus-visible .nav-icon,
.sidebar-nav .nav-submenu .nav-link.active .nav-icon {
    background: none;
}

/* Who is signed in, at the foot of the sidebar - replaces the old marketing tagline. */
.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: auto;
    padding: 0.55rem 0.4rem 0.55rem 0.65rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.07);
}

.sidebar-user__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sidebar-active);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

.sidebar-user__text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}

.sidebar-user__name,
.sidebar-user__role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user__name {
    font-size: 0.88rem;
    font-weight: 700;
}

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

.sidebar-user__signout {
    flex: 0 0 auto;
    margin: 0;
}

.sidebar-user__signout-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--sidebar-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
}

.sidebar-user__signout-button:hover,
.sidebar-user__signout-button:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-overlay {
    display: none;
}

.is-hidden {
    display: none !important;
}

.collapse {
    transition: height 0.2s ease;
}

body.sidebar-minimized .sidebar {
    transform: translateX(calc(-1 * var(--sidebar-width)));
    pointer-events: none;
    visibility: hidden;
}

/* Header: Menu, "Section / Page", station chips (station pages), the jump box, then the
   alert bubbles, the live dot, Help and the account menu. Solid, no backdrop blur. */
.app-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background: var(--color-surface-1);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(12, 35, 64, 0.06);
    z-index: 1025;
    transition: left var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
}

.app-header .bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 0 1.5rem;
}

.header-trigger {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-1);
    color: var(--color-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.header-trigger--navigation {
    position: relative;
    width: auto;
    min-width: 44px;
    gap: 0.55rem;
    padding: 0 0.95rem;
}

.header-trigger-label {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.header-trigger:hover,
.header-trigger:focus-visible {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
}

.header-trigger-icon {
    width: 1.3rem;
    height: 1.3rem;
}

/* Signed out only: there is no sidebar, so the one brand mark sits here. */
.header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    color: var(--color-heading);
    font-weight: 700;
    text-decoration: none;
}

.header-brand:hover {
    color: var(--color-heading);
}

/* The page's one title: "Section / Page". */
.header-context {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.header-context__section {
    /* Shortens before the page title does (the same rule as the search box, one level in):
       with equal factors the two shared every missing pixel and the title lost letters while
       the section name beside it was still whole. */
    flex: 0 1000 auto;
    min-width: 0;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
}

a.header-context__section:hover,
a.header-context__section:focus-visible {
    color: var(--color-link);
    text-decoration: underline;
}

.header-context__separator {
    flex: 0 0 auto;
    color: var(--color-border);
    font-size: 0.95rem;
}

.header-context__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Station mode: one chip per station page. */
.header-stations {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 0;
    /* Room for at least the current station and "+N more". */
    min-width: 13rem;
}

/* With the chips showing, the jump box takes a modest width and leaves the rest to them. */
body.has-station-chips.sidebar-minimized .shell-jump--header {
    flex: 0 1000 15.5rem;
    min-width: 9rem;
    margin-left: 0;
}

.header-stations__track {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
}

.header-station-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    height: 2.25rem;
    padding: 0 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-1);
    color: var(--color-heading);
    font-family: "Consolas", "Liberation Mono", "Courier New", monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.header-station-chip--named,
.header-station-chip--more {
    font-family: inherit;
    letter-spacing: 0;
}

.header-station-chip:hover,
.header-station-chip:focus-visible {
    border-color: var(--color-accent-strong);
    color: var(--color-link);
}

.header-station-chip.is-current {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #ffffff;
}

.header-stations__more {
    flex: 0 0 auto;
}

.header-stations__menu {
    max-height: 70dvh;
    overflow-y: auto;
}

.header-stations__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.header-stations__menu-code {
    min-width: 3.4rem;
    font-family: "Consolas", "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
}

/* The jump box: tools by name or station code, a full ID straight to its reports, MTS-Q last. */
.shell-jump {
    position: relative;
}

.shell-jump--header {
    /* Gives up its room before the page title loses a letter. Shrinking is shared out by
       factor times width, so a factor of 10 still took an eighth of every missing pixel from
       the title; 1000 leaves the title whole until this box is down to its minimum width. */
    flex: 1 1000 18rem;
    min-width: 10rem;
    max-width: 32rem;
    margin-left: auto;
}

.shell-jump__icon {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    pointer-events: none;
}

.shell-jump__input {
    width: 100%;
    height: 2.5rem;
    padding: 0 4.5rem 0 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-0);
    color: var(--color-text);
    font-size: 0.9rem;
}

.shell-jump__input::placeholder {
    color: var(--color-text-muted);
}

.shell-jump__input:focus {
    outline: none;
    border-color: var(--color-accent-strong);
    background: var(--color-surface-1);
    box-shadow: var(--focus-ring);
}

.shell-jump__hint {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    display: inline-flex;
    gap: 0.2rem;
    pointer-events: none;
}

.shell-jump__input:focus ~ .shell-jump__hint {
    display: none;
}

.shell-jump__hint kbd,
.shell-shortcuts kbd,
.shell-jump__footer kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--color-surface-1);
    color: var(--color-text-muted);
    font-family: "Consolas", "Liberation Mono", "Courier New", monospace;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: none;
}

.shell-jump__results {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    min-width: 20rem;
    max-height: min(26rem, 70dvh);
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-md);
    z-index: 1060;
}

.shell-jump__group {
    padding: 0.5rem 0.6rem 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shell-jump__option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.5rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.shell-jump__option:hover,
.shell-jump__option.is-active {
    background: var(--color-accent-soft);
    color: var(--color-heading);
}

.shell-jump__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 7px;
    background: var(--color-accent);
    color: #ffffff;
    font-family: "Consolas", "Liberation Mono", "Courier New", monospace;
    font-size: 0.72rem;
    font-weight: 700;
}

.shell-jump__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    color: var(--color-text-muted);
    font-size: 1rem;
}

.shell-jump__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-jump__where {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.shell-jump__empty {
    padding: 0.55rem 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

.shell-jump__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin-top: 0.3rem;
    padding: 0.45rem 0.6rem 0.15rem;
    border-top: 1px solid var(--color-divider);
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

/* The drawer's copy of the jump box (below 992px), on the sidebar's dark surface. */
.shell-jump--drawer {
    display: none;
}

.shell-jump--drawer .shell-jump__icon {
    color: var(--sidebar-text-muted);
}

.shell-jump--drawer .shell-jump__input {
    height: 2.75rem;
    padding-right: 1rem;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: var(--sidebar-text);
}

.shell-jump--drawer .shell-jump__input::placeholder {
    color: var(--sidebar-text-muted);
}

.shell-jump--drawer .shell-jump__input:focus {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.35);
}

.shell-jump--drawer .shell-jump__results {
    min-width: 0;
}

.shell-jump--drawer .shell-jump__where {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex: 0 0 auto;
    min-width: 0;
    margin-left: auto;
}

.shell-jump--header + .header-actions {
    margin-left: 0;
}

/* Phase 5: opt-in glove-friendly sizing for operator toolbars/action rows. Applied to
   specific flagged containers (downtime quick-filters/footer, OpenTbs filter toolbar) so
   dense admin/reporting tables keep their density. 44px min per Apple HIG / Material. */
.touch-comfortable .btn,
.touch-comfortable button:not(.btn-close),
.touch-comfortable [role='button'],
.touch-comfortable .btn-group-sm > .btn,
.touch-comfortable .btn-sm {
    min-height: 44px;
}

.touch-comfortable .btn.user-action-button,
.touch-comfortable button.user-action-button,
.touch-comfortable .btn-icon {
    min-height: 44px;
    min-width: 44px;
}

/* Help, account and (signed out) preferences buttons. */
.header-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-1);
    color: var(--color-heading);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.header-pill:hover,
.header-pill:focus-visible,
.header-pill[aria-expanded='true'] {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-heading);
}

.header-pill--account {
    padding-left: 0.3rem;
}

/* Ask MTS-Q from any page (Ctrl Q): beside the search, never hidden on tablets. A rounded button with the
   shortcut inside, as on the approved design (not one of the round pills). */
.header-ask {
    position: relative;
    flex: 0 0 auto;
}

.header-ask__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-1);
    color: var(--color-brand);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.header-ask__button:hover,
.header-ask__button:focus-visible,
.header-ask__button.is-current {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-brand);
}

html[data-theme='dark'] .header-ask__button,
html[data-theme='dark'] .header-ask__button:hover,
html[data-theme='dark'] .header-ask__button:focus-visible,
html[data-theme='dark'] .header-ask__button.is-current {
    color: var(--color-heading);
}

.header-ask__hint {
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    color: var(--color-text-muted);
    font-size: 0.69rem;
    font-weight: 600;
}

/* "New" on Ask MTS-Q: in the menu and on the first-visit note, in the app's quarantine yellow. */
.nav-new-tag,
.mtsq-new-tag {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 1.35rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: #D6A300;
    color: #3d2e00;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

html[data-theme='dark'] .nav-new-tag,
html[data-theme='dark'] .mtsq-new-tag {
    background: #FACC15;
    color: #2a1f00;
}

/* ---- Ask MTS-Q side panel ------------------------------------------------------------------
   Opened by the header's Ask button and Ctrl Q on most pages (_Layout, site.js): Ask MTS-Q over the right of the
   page, below the header, the page itself left as it is (not dimmed), as on the approved design board. */
.mtsq-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: min(460px, 100vw);
    border-left: 1px solid var(--color-border);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-md);
}

.mtsq-panel[hidden] {
    display: none;
}

.mtsq-panel__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 60px;
    padding: 0 14px 0 16px;
    border-bottom: 1px solid var(--color-border);
}

.mtsq-panel__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-brand);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
}

html[data-theme='dark'] .mtsq-panel__mark {
    background: var(--color-accent);
}

.mtsq-panel__title {
    margin: 0;
    color: var(--color-heading);
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.mtsq-panel__full {
    margin-left: auto;
    color: var(--color-accent);
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: underline;
}

html[data-theme='dark'] .mtsq-panel__full {
    color: var(--color-heading);
}

.mtsq-panel__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: transparent;
    color: var(--color-heading);
}

.mtsq-panel__close:hover,
.mtsq-panel__close:focus-visible {
    background: var(--color-surface-0);
}

.mtsq-panel__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.mtsq-panel__frame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--color-surface-1);
}

/* While the panel is open the header button shows it, as when Ask MTS-Q is the current page. */
.header-ask__button[aria-expanded='true'] {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-brand);
}

html[data-theme='dark'] .header-ask__button[aria-expanded='true'] {
    color: var(--color-heading);
}

@keyframes mtsq-panel-in {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mtsq-panel:not([hidden]) {
        animation: mtsq-panel-in 160ms ease-out;
    }
}

/* The same tag inside a button or a menu item. */
.mtsq-new-tag--sm {
    height: 1.1rem;
    padding: 0 0.4rem;
    font-size: 0.6rem;
}

/* The header button while the "New" period runs: a yellow dot on the icon, and the word New from 1600px wide. Up to
   1760px the word takes the Ctrl Q chip's place (about the same width), so a long page title such as "Operation
   Tools / Open TBS Report Status" is never cut because of it; from 1760px both show. The dot pulses a few times when
   the page opens. */
.header-ask__icon {
    position: relative;
    display: inline-flex;
}

.header-ask__new-dot {
    position: absolute;
    top: -0.2rem;
    right: -0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #D6A300;
    box-shadow: 0 0 0 1.5px var(--color-surface-1);
    animation: mtsq-new-pulse 1.6s ease-out 3;
}

html[data-theme='dark'] .header-ask__new-dot {
    background: #FACC15;
}

.header-ask__new-tag {
    display: none;
}

@media (min-width: 1600px) {
    .header-ask__new-tag {
        display: inline-flex;
    }

    .header-ask__new-dot {
        display: none;
    }
}

@media (min-width: 1600px) and (max-width: 1759.98px) {
    .header-ask__new-tag + .header-ask__hint {
        display: none;
    }
}

@keyframes mtsq-new-pulse {
    0% {
        box-shadow: 0 0 0 1.5px var(--color-surface-1), 0 0 0 0 rgba(214, 163, 0, 0.55);
    }

    70% {
        box-shadow: 0 0 0 1.5px var(--color-surface-1), 0 0 0 0.45rem rgba(214, 163, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 1.5px var(--color-surface-1), 0 0 0 0 rgba(214, 163, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-ask__new-dot {
        animation: none;
    }
}

/* Shown once per person until they ask; it points at the button. */
.header-ask__intro {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 1060;
    display: grid;
    gap: 0.6rem;
    width: min(22.5rem, calc(100vw - 2rem));
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface-1);
    box-shadow: 0 18px 45px rgba(12, 35, 64, 0.22);
    color: var(--color-text);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: normal;
}

html[data-theme='dark'] .header-ask__intro {
    box-shadow: var(--shadow-sm);
}

.header-ask__intro-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-ask__intro[hidden] {
    display: none;
}

.header-ask__intro::before {
    content: "";
    position: absolute;
    top: -0.45rem;
    right: 1.4rem;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    background: var(--color-surface-1);
    transform: rotate(45deg);
}

.header-ask__intro strong {
    color: var(--color-heading);
    font-size: 1rem;
}

.header-ask__intro-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.header-ask__intro-later,
.header-ask__intro-try {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.header-ask__intro-later {
    border: 1px solid var(--color-border);
    background: var(--color-surface-1);
    color: var(--color-text);
}

.header-ask__intro-later:hover,
.header-ask__intro-later:focus-visible {
    border-color: var(--color-accent-strong);
    color: var(--color-heading);
}

.header-ask__intro-try {
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: #ffffff;
}

.header-ask__intro-try:hover,
.header-ask__intro-try:focus-visible {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-strong);
    color: #ffffff;
}

/* "Ask MTS-Q" links on other pages, as on the approved design: an outlined button with the chat icon; a square
   icon button on table rows and station bars (--compact where a row must stay low); a bold link inside a message
   box. */
.mtsq-ask-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.375rem;
    padding: 0 0.75rem;
    border: 1.5px solid var(--color-accent);
    border-radius: 10px;
    background: var(--color-surface-1);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

.mtsq-ask-link i {
    font-size: 1rem;
    line-height: 1;
}

.mtsq-ask-link:hover,
.mtsq-ask-link:focus-visible {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
}

html[data-theme='dark'] .mtsq-ask-link {
    border-color: var(--color-link);
    color: var(--color-link);
}

html[data-theme='dark'] .mtsq-ask-link:hover,
html[data-theme='dark'] .mtsq-ask-link:focus-visible {
    color: var(--color-heading);
}

/* Unit IDs and station codes that open the Ask MTS-Q menu (Views/Shared/_AskMtsQTrigger, window.mtsqMenuTrigger):
   the text as it was, with a faint dotted underline that turns the accent colour on hover. A real button, so it is
   reachable with Tab; it keeps the line's height (the Line Queue's bars must stay 39px), also on phones, where every
   other button is at least 44px tall. */
.mtsq-menu-trigger,
button.mtsq-menu-trigger:not(.btn-close) {
    display: inline;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-decoration: underline dotted 1.5px;
    text-decoration-color: var(--color-text-muted);
    text-underline-offset: 3px;
    cursor: pointer;
}

.mtsq-menu-trigger:hover,
.mtsq-menu-trigger.is-open {
    color: var(--color-accent);
    text-decoration-color: currentColor;
}

.mtsq-menu-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The menu: one element, placed under the ID it belongs to (site.js). */
.mtsq-menu {
    position: absolute;
    z-index: 1070;
    min-width: 17rem;
    max-width: 24rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-1);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    color: var(--color-heading);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
}

.mtsq-menu[hidden] {
    display: none;
}

.mtsq-menu__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.1rem 0.75rem;
    margin-bottom: 0.25rem;
    padding: 0.35rem 0.55rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.mtsq-menu__title {
    font-weight: 700;
    overflow-wrap: anywhere;
}

.mtsq-menu__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mtsq-menu__sub {
    grid-column: 1 / -1;
    color: var(--color-text-muted);
    font-size: 0.76rem;
}

.mtsq-menu__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    color: var(--color-heading);
    text-decoration: none;
}

.mtsq-menu__item i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--color-accent);
    font-size: 0.95rem;
}

.mtsq-menu__item:hover,
.mtsq-menu__item:focus-visible {
    background: var(--color-accent-soft);
    color: var(--color-heading);
    outline: none;
}

.mtsq-menu__nowrap {
    white-space: nowrap;
}

.mtsq-menu__sep {
    height: 1px;
    margin: 0.25rem 0.2rem;
    background: var(--color-border);
}

.mtsq-menu__note {
    margin: 0;
    padding: 0.45rem 0.55rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

@media (prefers-reduced-motion: no-preference) {
    .mtsq-menu {
        animation: mtsq-menu-in 120ms ease-out;
    }
}

@keyframes mtsq-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* A text link carries the New tag beside its words. */
.mtsq-ask-link .mtsq-new-tag {
    margin-left: 0.1rem;
}

.mtsq-ask-link--inline {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-accent);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: normal;
}

.mtsq-ask-link--inline:hover,
.mtsq-ask-link--inline:focus-visible {
    background: none;
    color: var(--color-accent-strong);
}

html[data-theme='dark'] .mtsq-ask-link--inline,
html[data-theme='dark'] .mtsq-ask-link--inline:hover,
html[data-theme='dark'] .mtsq-ask-link--inline:focus-visible {
    color: var(--color-link);
}

/* Bootstrap's message boxes stay light in the dark theme too, so a link inside one keeps the design's navy. */
.alert .mtsq-ask-link--inline,
html[data-theme='dark'] .alert .mtsq-ask-link--inline {
    color: #1f3d7a;
}

.alert .mtsq-ask-link--inline:hover,
.alert .mtsq-ask-link--inline:focus-visible,
html[data-theme='dark'] .alert .mtsq-ask-link--inline:hover,
html[data-theme='dark'] .alert .mtsq-ask-link--inline:focus-visible {
    color: #0c2340;
}

.header-account__name {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: var(--color-accent-strong);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 800;
}

.header-avatar--large {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1rem;
}

.header-menu__panel {
    min-width: 17rem;
    padding: 0.4rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.header-menu__heading {
    padding: 0.4rem 0.65rem 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-menu__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.header-menu__item i {
    width: 1.1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.header-menu__item--danger,
.header-menu__item--danger i {
    color: var(--color-danger);
}

.header-menu__hint {
    margin-left: auto;
    padding-left: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.header-menu__group {
    padding: 0.35rem 0.65rem 0.55rem;
}

.header-menu__label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Theme and language as segmented buttons. */
.shell-segmented {
    display: flex;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
}

.shell-segmented__option,
[data-theme-preference-option] {
    flex: 1 1 0;
    min-height: 2.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--color-text);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.shell-segmented__option:hover,
.shell-segmented__option:focus-visible {
    background: var(--color-surface-1);
    color: var(--color-heading);
}

.shell-segmented__option[aria-pressed='true'],
.shell-segmented__option.is-active-theme,
.shell-segmented__option.is-active-language {
    background: var(--color-accent);
    color: #ffffff;
}

.header-account__identity {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem 0.6rem;
}

.header-account__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.header-account__who-name {
    overflow: hidden;
    color: var(--color-heading);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-account__who-role {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.header-account__signout {
    margin: 0;
}

.header-account__build {
    padding: 0.45rem 0.65rem 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* The live dot: is this page connected to the server right now? */
.header-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    height: 2.25rem;
    padding: 0 0.75rem 0 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-0);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: default;
}

.header-live__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
}

.header-live[data-state='live'] {
    border-color: #bfe3d3;
    background: #eefaf4;
    color: #166c50;
}

.header-live[data-state='live'] .header-live__dot {
    background: #1BA97F;
    box-shadow: 0 0 0 3px rgba(27, 169, 127, 0.2);
}

.header-live[data-state='reconnecting'] {
    border-color: rgba(214, 163, 0, 0.55);
    background: rgba(214, 163, 0, 0.12);
    color: #6b4f00;
}

.header-live[data-state='reconnecting'] .header-live__dot {
    background: #D6A300;
    animation: header-live-pulse 1.2s ease-in-out infinite;
}

.header-live[data-state='offline'] {
    border-color: rgba(214, 69, 80, 0.45);
    background: color-mix(in srgb, #d64550, white 90%);
    color: #a3323b;
}

.header-live[data-state='offline'] .header-live__dot {
    background: #d64550;
}

@keyframes header-live-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.header-storage-alert {
    position: relative;
    display: inline-flex;
    min-height: 2.4rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(214, 69, 80, 0.45);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-danger), white 88%);
    color: #8e1f2b;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}

.header-storage-alert:hover {
    color: #741822;
    border-color: rgba(214, 69, 80, 0.65);
    background: color-mix(in srgb, var(--color-danger), white 82%);
    text-decoration: none;
}

.header-storage-alert--warning {
    border-color: rgba(178, 119, 0, 0.45);
    background: color-mix(in srgb, var(--color-warning), white 78%);
    color: #684500;
}

.header-storage-alert i {
    font-size: 1rem;
}

.header-storage-alert__label {
    max-width: 8.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme='dark'] .header-storage-alert {
    background: rgba(214, 69, 80, 0.16);
    border-color: rgba(255, 107, 129, 0.45);
    color: #ffb9c3;
}

html[data-theme='dark'] .header-storage-alert--warning {
    background: rgba(246, 211, 101, 0.14);
    border-color: rgba(246, 211, 101, 0.45);
    color: #ffe49c;
}

/* Open quarantine report count. Rendered inside .nav-label (sidebar) and the section/tile
   headings (home) - never as a sibling of .nav-label, because .sidebar-nav .nav-link is a
   two-column grid and a third child would wrap onto a second row. */
.open-quarantine-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    /* Quarantine yellow, matching the quarantine report cards and status badges in Production
       Flow and the test reports: reporting.css uses rgba(214, 163, 0, ...) = #D6A300 for
       .production-flow-card.is-quarantine-report and .flow-status-badge.is-quarantine-report,
       and #FACC15 in dark. Dark text, because white on this yellow is unreadable. */
    background: #D6A300;
    color: #3d2e00;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    flex: 0 0 auto;
}

html[data-theme='dark'] .open-quarantine-badge {
    background: #FACC15;
    color: #2a1f00;
}

/* Header notification bubbles (open quarantine reports, open downtime reports).
   Always rendered for a signed-in user - grey at zero, coloured when there is something to act
   on - and never inside anything hidden on small screens, so they survive the mobile breakpoint. */
.header-notifications {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.5rem;
}

.header-notification-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem 0.3rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border, #d8dee6);
    background: var(--color-surface-muted, #f1f3f6);
    color: var(--color-text-muted, #6b7280);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

a.header-notification-bubble:hover,
a.header-notification-bubble:focus-visible {
    border-color: var(--color-accent, #2e5c9a);
    color: var(--color-accent, #2e5c9a);
}

/* The static variant is rendered for users who may see the count but cannot open the page.
   It carries the same information, so the only affordance difference is the cursor. */
span.header-notification-bubble {
    cursor: default;
}

.header-notification-bubble i {
    font-size: 0.95rem;
}

.header-notification-bubble__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--color-border, #d8dee6);
    color: var(--color-text, #1f2937);
    font-size: 0.7rem;
    font-weight: 800;
}

/* Two alert tones, matching how the app already colours these domains. Quarantine uses the same
   yellow as the quarantine report cards and status badges in Production Flow and the test reports
   (reporting.css: .production-flow-card.is-quarantine-report / .flow-status-badge.is-quarantine-report
   = rgba(214, 163, 0, ...) = #D6A300, and #FACC15 in dark). Downtime stays red - an active
   stoppage, distinct from a quality hold. */
.header-notification-bubble--alert-warning {
    border-color: rgba(214, 163, 0, 0.55);
    background: rgba(214, 163, 0, 0.16);
    color: #6b4f00;
}

a.header-notification-bubble--alert-warning:hover,
a.header-notification-bubble--alert-warning:focus-visible {
    border-color: #D6A300;
    color: #4a3400;
}

.header-notification-bubble--alert-warning .header-notification-bubble__count {
    background: #D6A300;
    color: #3d2e00;
}

.header-notification-bubble--alert-danger {
    border-color: rgba(214, 69, 80, 0.45);
    background: color-mix(in srgb, #d64550, white 88%);
    color: #a3323b;
}

a.header-notification-bubble--alert-danger:hover,
a.header-notification-bubble--alert-danger:focus-visible {
    border-color: #d64550;
    color: #8f2b33;
}

.header-notification-bubble--alert-danger .header-notification-bubble__count {
    background: #d64550;
    color: #fff;
}

html[data-theme='dark'] .header-notification-bubble {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #9ca3af;
}

html[data-theme='dark'] .header-notification-bubble__count {
    background: rgba(255, 255, 255, 0.16);
    color: #e5e7eb;
}

html[data-theme='dark'] .header-notification-bubble--alert-warning {
    border-color: rgba(250, 204, 21, 0.65);
    background: rgba(250, 204, 21, 0.24);
    color: #fff2c2;
}

html[data-theme='dark'] .header-notification-bubble--alert-warning .header-notification-bubble__count {
    background: #FACC15;
    color: #2a1f00;
}

html[data-theme='dark'] .header-notification-bubble--alert-danger {
    border-color: rgba(255, 107, 129, 0.45);
    background: rgba(214, 69, 80, 0.16);
    color: #ffb9c3;
}

html[data-theme='dark'] .header-notification-bubble--alert-danger .header-notification-bubble__count {
    background: #ff6b81;
    color: #2a0d11;
}

/* Keeps a badged nav label on one line at every sidebar width (280/260/240px): the text
   ellipsises instead of pushing the badge onto a second row. Scoped to badged labels only -
   the plain .nav-label rule is shared by every nav link and must not become a flex row. */
.nav-label--badged {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nav-label--badged .nav-label__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "New" beside Ask MTS-Q in the sidebar, until the person has asked once (colours with .mtsq-new-tag). */
.nav-new-tag {
    margin-left: 0.45rem;
}

/* The count bubbles line up with the pills beside them. */
.header-notifications .header-notification-bubble {
    min-height: 2.25rem;
}

body.sidebar-minimized .app-header {
    left: 0;
}

html[data-theme='dark'] .app-header {
    background: var(--color-surface-1);
    border-bottom-color: rgba(90, 122, 178, 0.32);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

html[data-theme='dark'] .header-trigger,
html[data-theme='dark'] .header-pill,
html[data-theme='dark'] .header-station-chip {
    background: rgba(16, 26, 50, 0.95);
    border-color: rgba(99, 134, 195, 0.35);
    color: var(--color-text);
}

html[data-theme='dark'] .header-trigger:hover,
html[data-theme='dark'] .header-pill:hover,
html[data-theme='dark'] .header-pill[aria-expanded='true'] {
    background: rgba(58, 105, 169, 0.28);
    color: var(--color-heading);
}

html[data-theme='dark'] .header-station-chip.is-current {
    border-color: #4f7fbd;
    background: #3a69a9;
    color: #ffffff;
}

html[data-theme='dark'] .header-context__title {
    color: var(--color-heading);
}

html[data-theme='dark'] .shell-jump--header .shell-jump__input {
    background: rgba(16, 26, 50, 0.95);
    border-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .shell-jump__results,
html[data-theme='dark'] .header-menu__panel {
    background: rgba(16, 26, 50, 0.98);
    border-color: rgba(90, 122, 178, 0.35);
}

html[data-theme='dark'] .header-menu__panel .dropdown-item {
    color: var(--color-text);
}

html[data-theme='dark'] .header-menu__panel .dropdown-item:hover,
html[data-theme='dark'] .header-menu__panel .dropdown-item:focus {
    background: rgba(58, 105, 169, 0.22);
    color: var(--color-heading);
}

html[data-theme='dark'] .header-menu__item--danger,
html[data-theme='dark'] .header-menu__item--danger i {
    color: var(--color-danger);
}

html[data-theme='dark'] .shell-jump__option:hover,
html[data-theme='dark'] .shell-jump__option.is-active {
    background: rgba(58, 105, 169, 0.28);
}

html[data-theme='dark'] .shell-segmented {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme='dark'] .shell-segmented__option,
html[data-theme='dark'] [data-theme-preference-option] {
    color: var(--color-text);
}

html[data-theme='dark'] .shell-segmented__option:hover {
    background: rgba(255, 255, 255, 0.08);
}

html[data-theme='dark'] .shell-segmented__option[aria-pressed='true'],
html[data-theme='dark'] .shell-segmented__option.is-active-theme,
html[data-theme='dark'] .shell-segmented__option.is-active-language {
    background: #3a69a9;
    color: #ffffff;
}

html[data-theme='dark'] .shell-jump__hint kbd,
html[data-theme='dark'] .shell-shortcuts kbd,
html[data-theme='dark'] .shell-jump__footer kbd {
    background: rgba(16, 26, 50, 0.95);
    border-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .header-live {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme='dark'] .header-live[data-state='live'] {
    background: rgba(55, 210, 157, 0.12);
    border-color: rgba(55, 210, 157, 0.45);
    color: #8ff0c9;
}

html[data-theme='dark'] .header-live[data-state='reconnecting'] {
    background: rgba(250, 204, 21, 0.14);
    border-color: rgba(250, 204, 21, 0.55);
    color: #fff2c2;
}

html[data-theme='dark'] .header-live[data-state='offline'] {
    background: rgba(214, 69, 80, 0.16);
    border-color: rgba(255, 107, 129, 0.45);
    color: #ffb9c3;
}

/* Toasts stack below the header, newest on top. */
.toast-stack {
    position: fixed;
    top: calc(var(--header-height) + 0.75rem);
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

.toast-stack .toast {
    width: 100%;
    pointer-events: auto;
}

.shell-toast .toast-body {
    font-weight: 600;
    line-height: 1.35;
}

.shell-toast__dismiss {
    flex: 0 0 auto;
    margin: 0.35rem 0.5rem 0.35rem 0;
    padding: 0.2rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    font-weight: 700;
}

.shell-shortcuts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem 1rem;
    margin: 0;
}

.shell-shortcuts dt {
    font-weight: 600;
    white-space: nowrap;
}

.shell-shortcuts dd {
    margin: 0;
    color: var(--color-text-muted);
}

/* Main content */
.main-content {
    padding: calc(var(--header-height) + var(--shell-pad-y)) var(--shell-pad-x) var(--shell-pad-bottom);
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(140% 140% at 15% 10%, rgba(47, 77, 126, 0.12) 0%, rgba(4, 30, 66, 0.02) 55%, transparent 100%), var(--page-bg);
    transition: padding var(--transition-base), background-color var(--transition-base);
}

.content-wrapper {
    background: var(--content-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: var(--wrapper-pad);
    box-shadow: var(--shadow-sm);
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Phase 1 #2: keep the box-shadow hover cue but drop the 2px translateY transform.
   A non-none transform made .content-wrapper a containing block, which broke
   position:fixed descendants (e.g. the CuringBuffer confirm overlay). */
.content-wrapper:hover {
    box-shadow: var(--shadow-md);
}

body.home-page .content-wrapper {
    width: 100%;
    padding: var(--wrapper-pad) var(--wrapper-pad) calc(var(--wrapper-pad) + 0.5rem);
}

html[data-theme='dark'] .content-wrapper {
    background: rgba(16, 26, 50, 0.92);
    border-color: rgba(99, 134, 195, 0.35);
}

.page-title {
    /* Responsive Audit Phase 4: fluid display size. A flat 2rem title plus the
       .page-header-block padding cost ~131px of vertical budget on every page regardless
       of how little room there was. Scales down to 1.35rem on narrow viewports and still
       caps at the original 2rem on wide ones, so the desktop look is unchanged.
       NOTE: no `1.1rem + 0.8vw` arithmetic here — BuildBundlerMinifier 3.2.449 cannot parse
       bare addition inside clamp() and fails the bundle. reporting.css does use that form,
       but it is served raw and never passes through the minifier. Keep site.css clamps in
       the simple clamp(min, Nvw, max) shape. */
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-heading);
}

/* The status line: build, environment, server time and support, at the end of the content.
   Static - it never covers the page and is never hidden. Replaces the fixed footer. */
.shell-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.1rem;
    margin-top: 0.85rem;
    padding: 0 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.shell-status__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.shell-status__item + .shell-status__item::before {
    content: '';
    width: 3px;
    height: 3px;
    margin-right: 0.8rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

.shell-status a {
    display: inline-flex;
    align-items: center;
    /* 2.75rem (44px) touch target, as the footer links had. */
    min-height: 2.75rem;
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
}

.shell-status a:hover,
.shell-status a:focus-visible {
    text-decoration: underline;
}

.shell-status time {
    font-variant-numeric: tabular-nums;
}

/* Buttons & forms */
.btn {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.55rem 1.45rem;
    border-width: 1px;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--color-brand);
    border: 1px solid var(--color-brand-strong);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--color-brand-strong);
}

.btn-secondary {
    background: var(--color-surface-2);
    color: var(--color-heading);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--content-bg);
}

.btn-utility {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-brand-strong);
    box-shadow: none;
}

.btn-utility:hover {
    background: var(--color-surface-1);
    color: var(--color-brand);
}

.btn-info {
    background: var(--color-accent);
    border: 1px solid var(--color-accent-strong);
    color: #fff;
}

.btn-info:hover {
    background: var(--color-accent-strong);
}

.btn-outline-primary {
    border-color: var(--color-accent);
    color: var(--color-accent-strong);
    background: transparent;
}

.btn-outline-primary:hover {
    background: rgba(47, 77, 126, 0.1);
    color: var(--color-accent-strong);
}

.btn-success {
    background: var(--color-success);
    border: none;
}

.btn-warning {
    background: var(--color-warning);
    border: none;
}

.btn-danger {
    background: var(--color-danger);
    border: none;
}

html[data-theme='dark'] .btn-secondary {
    background: rgba(20, 32, 55, 0.85);
    color: var(--color-text);
    border-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .btn-utility {
    background: rgba(26, 40, 68, 0.9);
    border-color: rgba(118, 148, 202, 0.45);
    color: var(--color-text);
    box-shadow: none;
}

.form-control,
.form-select {
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    color: var(--color-text);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent);
    background: var(--content-bg);
    box-shadow: var(--focus-ring);
    color: var(--color-text);
}

.form-control::placeholder {
    color: rgba(93, 102, 136, 0.6);
}

.form-check-input.large-checkbox {
    width: 1.5em;
    height: 1.5em;
    border-radius: 0.4rem;
}

.form-check-label.large-checkbox-label {
    font-size: 1.05rem;
    color: var(--color-text);
}

.nutrunner-rule-number-input {
    min-width: 5rem;
}

html[data-theme='dark'] .form-control,
html[data-theme='dark'] .form-select {
    background: rgba(16, 26, 50, 0.95);
    border-color: rgba(99, 134, 195, 0.35);
    color: var(--color-text);
}

html[data-theme='dark'] .form-control::placeholder {
    color: rgba(196, 208, 238, 0.6);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(47, 77, 126, 0.06);
    --bs-table-hover-bg: rgba(47, 77, 126, 0.1);
    --bs-table-color: var(--color-text);
    --bs-table-striped-color: var(--color-text);
    --bs-table-hover-color: var(--color-text);
    color: var(--color-text);
    border-color: var(--border-color);
}

.table > :not(caption) > * > * {
    background-color: var(--content-bg);
    border-bottom-color: var(--border-color);
}

.table thead th {
    background: var(--color-brand);
    color: #fff;
    border-bottom: none;
}

.table-hover .clickable-row:hover {
    background: rgba(47, 77, 126, 0.12);
    cursor: pointer;
}

.mbom-table-header {
    background: var(--color-brand);
    color: #fff;
}

.status-pill {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
}

.status-passed {
    background: rgba(34, 197, 94, 0.18);
    color: #166534;
}

.status-failed {
    background: rgba(220, 38, 38, 0.2);
    color: #7f1d1d;
}

.status-pending {
    background: rgba(148, 163, 184, 0.25);
    color: #334155;
}

html[data-theme='dark'] .table > :not(caption) > * > * {
    background-color: rgba(16, 26, 50, 0.85);
    border-bottom-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(58, 105, 169, 0.16);
    --bs-table-hover-bg: rgba(58, 105, 169, 0.24);
    --bs-table-color: var(--color-text);
    --bs-table-striped-color: var(--color-text);
    --bs-table-hover-color: var(--color-text);
}

html[data-theme='dark'] .table-light {
    color: var(--color-heading);
    background-color: rgba(58, 105, 169, 0.18) !important;
    border-color: rgba(99, 134, 195, 0.35) !important;
}

html[data-theme='dark'] .table-light th,
html[data-theme='dark'] .table-light td {
    color: var(--color-heading);
}

html[data-theme='dark'] .table thead th {
    background: rgba(19, 41, 76, 0.95);
    color: #f8fbff;
}

html[data-theme='dark'] .table-hover .clickable-row:hover {
    background: rgba(58, 105, 169, 0.22);
}

html[data-theme='dark'] .table-hover tbody tr:hover {
    color: var(--color-text);
    background-color: rgba(58, 105, 169, 0.22);
}

html[data-theme='dark'] .table-hover tbody tr:hover td {
    color: inherit;
}

html[data-theme='dark'] .status-passed {
    background: rgba(55, 210, 157, 0.22);
    color: #d7fef0;
}

html[data-theme='dark'] .status-failed {
    background: rgba(255, 107, 129, 0.22);
    color: #ffe2e7;
}

html[data-theme='dark'] .status-pending {
    background: rgba(99, 134, 195, 0.22);
    color: #dde6ff;
}

.table .collapse td {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

html[data-theme='dark'] .table .collapse td {
    background-color: rgba(16, 26, 50, 0.85);
    color: var(--color-text);
    border-color: rgba(99, 134, 195, 0.35);
}

.mobile-operator-panel {
    display: none;
}

.mobile-operator-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.mobile-operator-panel__title {
    margin: 0;
    color: var(--color-heading);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
}

.mobile-operator-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.mobile-operator-link {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-1);
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.mobile-operator-link:hover,
.mobile-operator-link:focus {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-heading);
    text-decoration: none;
}

.mobile-operator-link:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.mobile-operator-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
}

.mobile-operator-link__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-code-badge--mobile-operator {
    min-width: 2.35rem;
    height: 1.65rem;
    padding: 0 0.38rem;
    border: 1px solid rgba(12, 35, 64, 0.34);
    background: rgba(12, 35, 64, 0.08);
    color: var(--color-heading);
    font-size: 0.72rem;
}

html[data-theme='dark'] .mobile-operator-panel,
html[data-theme='dark'] .mobile-operator-link {
    background: rgba(16, 26, 50, 0.92);
    border-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .mobile-operator-link:hover,
html[data-theme='dark'] .mobile-operator-link:focus {
    border-color: rgba(137, 181, 238, 0.52);
    background: rgba(46, 92, 154, 0.24);
    color: var(--color-heading);
}

html[data-theme='dark'] .station-code-badge--mobile-operator {
    border-color: rgba(186, 210, 248, 0.54);
    background: rgba(122, 166, 226, 0.22);
    color: var(--color-heading);
}

/* SCADA & reporting cards */
.scada-container {
    width: 100%;
    background: var(--content-bg);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
}

.scada-container h3 {
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.process-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.scada-card {
    flex: 0 1 240px;
    min-height: 260px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--color-surface-1);
    color: var(--color-text);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.scada-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
}

html[data-theme='dark'] .scada-container {
    background: rgba(16, 26, 50, 0.92);
    border-color: rgba(99, 134, 195, 0.35);
    box-shadow: var(--shadow-sm);
}

html[data-theme='dark'] .scada-card {
    background: rgba(16, 26, 50, 0.85);
    border-color: rgba(99, 134, 195, 0.35);
    box-shadow: var(--shadow-xs);
}

.scada-card .status-icon {
    font-size: 2rem;
    text-align: right;
}

.scada-card .process-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

.scada-card .process-code {
    font-size: 0.85rem;
    opacity: 0.65;
    margin-top: 0.25rem;
}

.scada-card .status-text {
    margin-top: auto;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.scada-card.status-Passed {
    border-left: 6px solid #22c55e;
}

.scada-card.status-Passed .status-text,
.scada-card.status-Passed .status-icon {
    color: #22c55e;
}

.scada-card.status-Failed {
    border-left: 6px solid #ef4444;
}

.scada-card.status-Failed .status-text,
.scada-card.status-Failed .status-icon {
    color: #ef4444;
}

.scada-card.status-Not-Processed {
    border-left: 6px solid rgba(255, 255, 255, 0.35);
}

/* Report cards & accordions */
.report-card {
    border-width: 2px !important;
    border-radius: var(--radius-md);
}

.report-card .card-header {
    border-bottom: none;
    background: transparent;
}

.report-card .accordion-button {
    font-weight: 600 !important;
    gap: 0.75rem;
    border-radius: var(--radius-md);
}

.accordion-button:focus {
    box-shadow: var(--focus-ring);
}

.accordion-button::after {
    display: none;
}

.details-accordion-button {
    font-weight: 600;
    background: var(--color-surface-2);
    border-top: 1px solid var(--color-border);
}

.details-accordion-button:not(.collapsed) {
    background: rgba(47, 77, 126, 0.18);
    color: var(--color-accent-strong);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.details-accordion-button:hover {
    background: rgba(47, 77, 126, 0.24);
}

.status-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    margin-right: 0.5rem;
}

.chevron-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.accordion-button:not(.collapsed) .chevron-icon {
    transform: rotate(90deg);
}

.step-item {
    border-left: 2px solid var(--color-border);
    padding-left: 1rem;
    margin-top: 0.9rem;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.step-header:hover {
    background: var(--color-surface-2);
}

/* TCA page */
.tca-input-group {
    margin-bottom: 1.5rem;
}

.tca-input-field {
    border-radius: var(--radius-md);
}

.tca-display-field {
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    border: 1px dashed var(--border-color);
    font-weight: 600;
    font-size: 1.1rem;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

.timer-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-heading);
    background: var(--content-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.weight-diff-container {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
}

.weight-diff-display,
.tca-display-field {
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    padding: 0.65rem;
    margin-top: 0.5rem;
    text-align: center;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.camera-view {
    width: 100%;
    max-width: 520px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--color-surface-2);
}

.tca-camera-container {
    background: var(--content-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
}

html[data-theme='dark'] .weight-diff-container,
html[data-theme='dark'] .tca-camera-container {
    background: rgba(16, 26, 50, 0.9);
    border-color: rgba(99, 134, 195, 0.35);
}

/* Pack assembly */

.pack-assembly-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}

.pack-assembly-grid.small-gap {
    gap: 1.25rem;
}

.module-grid-container {
    flex: 1 1 360px;
    max-width: 380px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    align-content: start;
}

.module-grid-container.two-cols {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.module-grid-cell {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: linear-gradient(135deg, var(--color-brand-strong), var(--color-brand));
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.module-grid-cell.bg-success {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), rgba(16, 122, 57, 0.95));
    border-color: rgba(34, 197, 94, 0.45);
}

.module-grid-cell.bg-secondary {
    background: linear-gradient(135deg, rgba(4, 30, 66, 0.4), rgba(15, 48, 96, 0.8));
    border-color: rgba(99, 134, 195, 0.25);
}

.module-grid-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(4, 30, 66, 0.25);
}

.module-grid-cell:focus-visible,
.component-list .list-group-item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.module-grid-cell.placeholder {
    background: transparent;
    border-style: dashed;
    cursor: default;
    box-shadow: none;
}

.component-list {
    flex: 0 0 260px;
    max-width: 320px;
}

.pack-assembly-layout {
    width: 100%;
}

@media (min-width: 992px) {
    .pack-assembly-layout {
        align-items: stretch;
    }

    .pack-assembly-layout .pack-form-column,
    .pack-assembly-layout .pack-assembly-column {
        flex: 1 1 0;
        max-width: none;
        width: auto;
    }

    .pack-assembly-layout .pack-form-column {
        flex: 2.5 1 0;
    }

    .pack-assembly-layout .pack-assembly-column {
        flex: 1 1 0;
    }
}

.component-list .list-group-item {
    background: transparent;
    border: none;
    font-weight: 500;
    padding-left: 0;
    color: var(--color-text);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}

.component-list .list-group-item:hover {
    transform: translateX(4px);
    color: var(--color-accent-strong);
}

.component-list .status-indicator {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 0.6rem;
}

.component-list .status-indicator.bg-secondary {
    background: rgba(148, 163, 184, 0.4) !important;
}

html[data-theme='dark'] .component-list .status-indicator.bg-secondary {
    background: rgba(99, 134, 195, 0.5) !important;
}

.assembly-container {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--content-bg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: var(--shadow-xs);
}

.pack-id-box {
    background: rgba(47, 77, 126, 0.12);
    border: 1px solid rgba(47, 77, 126, 0.3);
    color: var(--color-brand-strong);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-weight: 600;
}

input.voltpack-box.form-control {
    background: #000 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Misc */
.card {
    border-radius: var(--radius-md);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xs);
}

html[data-theme='dark'] .card {
    background: rgba(16, 26, 50, 0.9);
    border-color: rgba(99, 134, 195, 0.35);
    color: var(--color-text);
}

.alert {
    border-radius: var(--radius-md);
}

.database-storage-page {
    display: grid;
    gap: 1rem;
}

.database-storage-toolbar,
.database-storage-alert,
.database-storage-empty,
.database-storage-card__header,
.database-storage-meter-row,
.database-storage-section-heading,
.database-storage-meta {
    display: flex;
    align-items: center;
}

.database-storage-toolbar {
    justify-content: space-between;
    gap: 1rem;
}

.database-storage-title {
    margin: 0.2rem 0 0.25rem;
    font-size: 1.1rem;
}

.database-storage-alert,
.database-storage-empty {
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-2);
}

.database-storage-alert {
    align-items: flex-start;
    border-color: color-mix(in srgb, var(--color-danger), white 55%);
    background: color-mix(in srgb, var(--color-danger), white 90%);
    color: #7d1d27;
}

.database-storage-alert--warning {
    border-color: color-mix(in srgb, var(--color-warning), #9a6700 25%);
    background: color-mix(in srgb, var(--color-warning), white 78%);
    color: #5f4300;
}

.database-storage-alert > div,
.database-storage-empty > div {
    display: grid;
    gap: 0.12rem;
}

.database-storage-alert strong,
.database-storage-empty strong {
    color: inherit;
}

.database-storage-alert span,
.database-storage-empty span {
    color: inherit;
}

.database-storage-grid {
    display: grid;
    gap: 1rem;
}

.database-storage-card {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success);
    border-radius: 8px;
    background: var(--color-surface-1);
    box-shadow: var(--shadow-xs);
}

.database-storage-card--warning {
    border-left-color: #b7791f;
}

.database-storage-card--critical {
    border-left-color: var(--color-danger);
}

.database-storage-card--unknown {
    border-left-color: var(--color-text-muted);
}

.database-storage-card__header {
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.database-storage-card__header h4 {
    margin: 0.15rem 0 0.15rem;
    font-size: 1.05rem;
}

.database-storage-card__header p,
.database-storage-card__header small {
    display: block;
    margin: 0;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.database-storage-card__eyebrow {
    color: var(--color-accent-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.database-storage-status {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success), white 82%);
    color: #0d684f;
    font-size: 0.76rem;
    font-weight: 800;
}

.database-storage-status--warning {
    background: color-mix(in srgb, var(--color-warning), white 70%);
    color: #604200;
}

.database-storage-status--critical {
    background: color-mix(in srgb, var(--color-danger), white 86%);
    color: #821d28;
}

.database-storage-status--unknown {
    background: var(--color-surface-2);
    color: var(--color-text-muted);
}

.database-storage-write-summary {
    display: grid;
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--color-success), var(--color-border) 58%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-success), white 93%);
}

.database-storage-write-summary--warning {
    border-color: color-mix(in srgb, var(--color-warning), var(--color-border) 45%);
    background: color-mix(in srgb, var(--color-warning), white 88%);
}

.database-storage-write-summary--critical {
    border-color: color-mix(in srgb, var(--color-danger), var(--color-border) 45%);
    background: color-mix(in srgb, var(--color-danger), white 92%);
}

.database-storage-write-summary--unknown {
    border-color: var(--color-border);
    background: var(--color-surface-2);
}

.database-storage-write-summary__main,
.database-storage-write-summary__meter {
    display: grid;
    gap: 0.35rem;
    align-content: center;
}

.database-storage-write-summary__main strong {
    color: var(--color-heading);
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    line-height: 1;
}

.database-storage-write-summary__main small {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.database-storage-meter-row {
    justify-content: space-between;
    gap: 1rem;
}

.database-storage-meter-row strong {
    color: var(--color-heading);
    font-size: 1.1rem;
}

.database-storage-limit-row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.4fr) minmax(12rem, 1fr) minmax(7rem, 0.4fr);
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-2), white 30%);
}

.database-storage-limit-row span,
.database-storage-write-summary__main span,
.database-storage-meter-row span,
.database-storage-metrics dt,
.database-storage-diagnostic-grid dt,
.database-storage-section-heading span {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.database-storage-limit-row strong {
    display: block;
    margin-top: 0.12rem;
    color: var(--color-heading);
    font-size: 1.1rem;
}

.database-storage-meter {
    position: relative;
    height: 0.65rem;
    align-self: center;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-surface-1);
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.database-storage-meter span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--color-success);
}

.database-storage-meter--ok span {
    background: var(--color-success);
}

.database-storage-meter--warning span {
    background: #b7791f;
}

.database-storage-meter--critical span {
    background: var(--color-danger);
}

.database-storage-meter--unknown span {
    background: var(--color-text-muted);
}

.database-storage-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.database-storage-metrics div {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-1);
}

.database-storage-metrics dd {
    margin: 0.16rem 0 0;
    color: var(--color-heading);
    font-size: 1rem;
    font-weight: 800;
}

.database-storage-diagnostics {
    display: grid;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-surface-2), white 22%);
}

.database-storage-diagnostic-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.database-storage-diagnostic-grid div {
    min-width: 0;
}

.database-storage-diagnostic-grid dd {
    margin: 0.12rem 0 0;
    color: var(--color-heading);
    font-size: 0.95rem;
    font-weight: 800;
}

.database-storage-diagnostics p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
}

.database-storage-meta {
    flex-wrap: wrap;
    gap: 0.45rem;
}

.database-storage-meta span {
    display: inline-flex;
    min-height: 1.7rem;
    align-items: center;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.database-storage-tables {
    display: grid;
    gap: 0.65rem;
}

.database-storage-section-heading {
    justify-content: space-between;
    gap: 1rem;
}

.database-storage-section-heading h5 {
    margin: 0;
    font-size: 0.98rem;
}

.database-storage-table {
    margin-bottom: 0;
}

.database-storage-table th {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.database-storage-table td:first-child {
    max-width: 26rem;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.database-storage-inline-error {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--color-warning), var(--color-border) 50%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-warning), white 84%);
    color: #604200;
    font-weight: 700;
}

html[data-theme='dark'] .database-storage-card,
html[data-theme='dark'] .database-storage-metrics div {
    background: rgba(12, 21, 41, 0.96);
}

html[data-theme='dark'] .database-storage-write-summary {
    border-color: rgba(55, 210, 157, 0.35);
    background: rgba(55, 210, 157, 0.12);
}

html[data-theme='dark'] .database-storage-write-summary--warning {
    border-color: rgba(246, 211, 101, 0.35);
    background: rgba(246, 211, 101, 0.14);
}

html[data-theme='dark'] .database-storage-write-summary--critical {
    border-color: rgba(255, 107, 129, 0.38);
    background: rgba(214, 69, 80, 0.14);
}

html[data-theme='dark'] .database-storage-alert {
    background: rgba(214, 69, 80, 0.14);
    border-color: rgba(255, 107, 129, 0.38);
    color: #ffc0c9;
}

html[data-theme='dark'] .database-storage-alert--warning,
html[data-theme='dark'] .database-storage-inline-error {
    background: rgba(246, 211, 101, 0.12);
    border-color: rgba(246, 211, 101, 0.35);
    color: #ffe49c;
}

html[data-theme='dark'] .database-storage-limit-row,
html[data-theme='dark'] .database-storage-diagnostics,
html[data-theme='dark'] .database-storage-meta span,
html[data-theme='dark'] .database-storage-empty {
    background: rgba(21, 33, 58, 0.92);
}

/* Responsive */

/* Responsive Audit Phase 1: width-driven shell density.
   Previously --sidebar-width and the shell paddings were never overridden by ANY width
   query between 992px and 1600px, so the 992-1600 band (factory laptops, and every
   zoomed-in session on a large monitor) paid the full 458px desktop chrome bill.
   These steps must stay ordered widest-first so the narrower query wins on overlap. */
@media (max-width: 1599.98px) {
    :root {
        /* 280 -> 260 with the sidebar padding trimmed so the label track barely moves. */
        --sidebar-width: 260px;
        --sidebar-pad-x: 0.9rem;
        --nav-link-pad-x: 0.5rem;
        --nav-icon-col: 44px;
        --station-badge-min: 2.5rem;

        --shell-pad-x: 2rem;
        --wrapper-pad: 1.75rem;
    }

    .content-wrapper {
        width: 100%;
    }

    /* Header: the account button drops to its avatar first. */
    .header-account__name {
        display: none;
    }

    /* And the Ask button its "Ctrl Q" chip: the page title needs the room at 1440px. The button's tooltip and the
       shortcuts dialog still give the shortcut. */
    .header-ask__hint {
        display: none;
    }

    .header-pill--account {
        padding-right: 0.55rem;
    }

    /* In station mode the chips say where you are, so the section name steps aside. */
    body.has-station-chips.sidebar-minimized .header-context__section,
    body.has-station-chips.sidebar-minimized .header-context__separator {
        display: none;
    }
}

@media (max-width: 1399.98px) {
    :root {
        /* 260 -> 240; a long label now wraps onto a second line rather than squeezing. */
        --sidebar-width: 240px;
        --sidebar-pad-x: 0.75rem;
        --nav-link-pad-x: 0.45rem;
        --nav-icon-col: 44px;
        --station-badge-min: 2.5rem;

        --shell-pad-x: 1.5rem;
        --shell-pad-y: 1.5rem;
        --wrapper-pad: 1.25rem;
    }

    /* Then Help and the live dot show their icon only, and the bar tightens. */
    .app-header .bar {
        gap: 0.75rem;
        padding: 0 1.25rem;
    }

    .header-help .header-pill__label,
    .header-live__label,
    .shell-jump__hint {
        display: none;
    }

    .shell-jump__input {
        padding-right: 1rem;
    }

    .header-live {
        width: 2.25rem;
        justify-content: center;
        padding: 0;
    }
}

/* Phase 6: cap prose/form pages to a readable measure on ultrawide screens; dashboards and
   wide tools (scada, home grid, admin-hub audit, ask-mtsq, embedded shells) opt out below. */
@media (min-width: 1600px) {
    .main-content > .content-wrapper {
        max-width: 1560px;
        margin-left: auto;
        margin-right: auto;
    }

    body.scada-body .main-content > .content-wrapper,
    body.home-page .main-content > .content-wrapper,
    body.admin-hub-audit-page .main-content > .content-wrapper,
    body.ask-mtsq-page .main-content > .content-wrapper,
    body.embedded-shell .main-content > .content-wrapper {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/* A laptop-sized screen with the sidebar open: the section name gives way to the page title
   (the open sidebar shows the section anyway). Same band as the menu's closed-by-default rule. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    body:not(.sidebar-minimized) .header-context__section,
    body:not(.sidebar-minimized) .header-context__separator {
        display: none;
    }
}

/* Station mode on a desktop: with the sidebar open, its own station list does the job, so the
   chips step aside and leave the header its full width. */
@media (min-width: 992px) {
    body.has-station-chips:not(.sidebar-minimized) .header-stations {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .app-header .bar {
        gap: 0.6rem;
        padding: 0 1rem;
    }

    /* The section name goes; the page title, the counts and the live dot stay. */
    .header-context__section,
    .header-context__separator {
        display: none;
    }

    .shell-jump--header {
        flex-basis: 12rem;
        min-width: 8rem;
    }

    :root {
        --shell-pad-x: 1.25rem;
        --shell-pad-y: 1.25rem;
        --wrapper-pad: 1.25rem;
    }
}

@media (max-width: 991.98px) {
    /* Below 992px the sidebar is off-canvas and the footer goes static, so the shell
       can drop to its tightest density. These values preserve exactly what the old
       hardcoded `.main-content`/`.content-wrapper` padding shorthands produced here. */
    :root {
        --shell-pad-x: 1.25rem;
        --shell-pad-y: 1.75rem;
        --shell-pad-bottom: 1.5rem;
        --wrapper-pad: 1.75rem;
    }

    body {
        padding-left: 0;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        width: min(300px, 86vw);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .sidebar-close {
        display: inline-flex;
    }

    /* The drawer is used with fingers: 44px rows. */
    .sidebar-nav .nav-link,
    .nav-section-toggle {
        min-height: 2.75rem;
    }

    .header-trigger--navigation {
        width: 46px;
        padding: 0;
    }

    .header-trigger-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .sidebar-overlay {
        display: none;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(4, 18, 38, 0.55);
        z-index: 1015;
    }

    .app-header {
        left: 0;
        width: 100%;
    }

    .app-header .bar {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .header-context__title {
        font-size: 1.05rem;
    }

    /* The jump box moves into the drawer; the header keeps the title and the counts. */
    .shell-jump--header {
        display: none;
    }

    .shell-jump--drawer {
        display: block;
    }

    /* Without the search the Ask button sits just after the title, near the left edge, so its first-visit note
       opens to the right instead of off the screen. */
    .header-ask__intro {
        right: auto;
        left: 0;
    }

    .header-ask__intro::before {
        right: auto;
        left: 0.95rem;
    }

    .header-pill {
        height: 2.75rem;
        min-width: 2.75rem;
        justify-content: center;
    }

    .header-pill__label {
        display: none;
    }

    /* The Ask button becomes an icon, a touch target like the pills beside it. */
    .header-ask__button {
        height: 2.75rem;
        min-width: 2.75rem;
        justify-content: center;
        padding: 0 0.6rem;
    }

    .header-ask__label {
        display: none;
    }

    .header-pill--account {
        padding: 0 0.3rem;
    }

    .header-notifications .header-notification-bubble {
        min-height: 2.75rem;
    }

    /* Menus are used with fingers here too. */
    .header-menu__item,
    .shell-jump__option {
        min-height: 2.75rem;
    }

    /* Station mode below 992px: the chips get a row of their own under the bar and scroll
       sideways, so a tablet user changes station with one tap from anywhere on the page. */
    body.has-station-chips {
        --header-height: calc(var(--header-bar-height) + 3rem);
    }

    body.has-station-chips .app-header .bar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: var(--header-bar-height) 3rem;
        grid-template-areas:
            "menu context actions"
            "stations stations stations";
        align-items: center;
        row-gap: 0;
    }

    body.has-station-chips .header-trigger {
        grid-area: menu;
    }

    body.has-station-chips .header-context {
        grid-area: context;
    }

    body.has-station-chips .header-actions {
        grid-area: actions;
    }

    body.has-station-chips .header-stations {
        grid-area: stations;
        align-self: start;
        padding-bottom: 0.4rem;
    }

    .header-stations__track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .header-station-chip {
        height: 2.5rem;
    }

    .main-content {
        width: 100%;
    }

    .content-wrapper {
        box-sizing: border-box;
        max-width: 100%;
        margin-inline: 0;
        overflow-x: auto;
        padding: var(--wrapper-pad);
        width: 100%;
    }

    .mobile-operator-panel {
        display: grid;
        gap: 0.75rem;
        margin-bottom: 1rem;
        padding: 0.85rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-surface-1);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .database-storage-toolbar,
    .database-storage-card__header,
    .database-storage-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .database-storage-write-summary,
    .database-storage-limit-row,
    .database-storage-metrics,
    .database-storage-diagnostic-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pack-assembly-grid {
        flex-direction: column;
    }

    .component-list {
        flex: 1 1 auto;
        max-width: none;
    }

    body.sidebar-minimized {
        padding-left: 0;
    }

}

@media (max-width: 575.98px) {
    .main-content {
        padding: calc(var(--header-height) + 1.25rem) 0.95rem 1.25rem;
    }

    .content-wrapper {
        padding: 1.5rem;
    }

    .mobile-operator-panel__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-operator-panel__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-operator-link {
        font-size: 0.84rem;
    }

    .app-header .bar {
        padding: 0 0.6rem;
        gap: 0.35rem;
    }

    /* No room for it on a phone: the page title would break into letters, and the first-visit note that hangs off
       it would run off the screen. Ask MTS-Q stays one tap away in the menu (under Home) and on the Home page. */
    .header-ask {
        display: none;
    }

    /* The Ask MTS-Q menu of a unit ID or station code keeps 8px from both edges of a phone. */
    .mtsq-menu {
        min-width: 0;
        max-width: calc(100vw - 16px);
    }

    .header-context__title {
        font-size: 0.98rem;
    }

    .header-notifications {
        gap: 0.25rem;
        margin-right: 0;
    }

    .header-notification-bubble i {
        display: none;
    }

    .header-live {
        width: 1.5rem;
        border: 0;
        background: none;
    }

    .header-pill.dropdown-toggle::after {
        display: none;
    }

    .header-pill,
    .header-pill--account {
        padding: 0;
    }

    .header-context {
        white-space: normal;
    }

    .header-context__title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }

    .shell-status {
        gap: 0 0.9rem;
    }

    .shell-status__item + .shell-status__item::before {
        display: none;
    }

    /* Phase 1 #6: let scan fields wrap on phones so the long "Scan X" button drops
       below a full-width input instead of crushing the ID field to a sliver.
       Uses .input-group.scan-input-group to beat the .qr-photo-scan-group nowrap rule
       that qr-photo-scan.js adds at runtime. */
    .input-group.scan-input-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .input-group.scan-input-group > .form-control {
        flex: 1 1 100%;
        border-radius: 0.5rem !important;
    }

    .input-group.scan-input-group > .btn {
        flex: 0 1 auto;
        border-radius: 0.5rem !important;
    }

    .header-account .fw-semibold {
        max-width: 72px;
    }
}


/* NOK Sorter page styling */
.page-header-block {
    background: var(--color-surface-1);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-xs);
}
.page-header-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.25rem;
    background: var(--color-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.nok-sorter-layout .card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.nok-sorter-layout .card + .card {
    margin-top: 1.5rem;
}

.nok-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.nok-section-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: var(--color-accent-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.nok-section-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-heading);
}

.nok-input-group .form-control {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-color: var(--color-border);
}

.nok-input-group .btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding-inline: 1.75rem;
}

.nok-field {
    display: flex;
    flex-direction: column;
}

.nok-field .form-label {
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
}

.nok-field .form-control {
    background-color: var(--color-surface-1);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    height: 48px;
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.nok-field .form-control[readonly] {
    color: var(--color-heading);
}

.nok-field.status-passed .form-control {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.nok-field.status-failed .form-control {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

div.nok-field.status-passed,
div.nok-field.status-failed {
    background: none;
    color: inherit;
}

.nok-dim-table th {
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}

.nok-dim-table td {
    padding: 0.75rem 0.5rem;
}

.nok-dim-table .nok-field .form-control {
    text-align: center;
}

.nok-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 0.6rem;
    display: inline-block;
}

.legend-pass {
    background: var(--color-success);
}

.legend-fail {
    background: var(--color-danger);
}

.target-box {
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    min-height: 400px;
    background: var(--color-surface-2);
    color: var(--color-heading);
    font-size: 3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.target-box.target-danger {
    background: var(--color-danger);
    color: #fff;
}

.target-box.target-warning {
    background: var(--color-warning);
    color: var(--color-heading);
}

.target-box.target-info {
    background: var(--color-accent);
    color: #fff;
}

.target-box.target-neutral {
    background: var(--color-surface-2);
    color: var(--color-heading);
}

@media (max-width: 991.98px) {
    .page-header-block {
        padding: 1.25rem 1.5rem;
    }

    .nok-input-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .nok-input-group .form-control,
    .nok-input-group .btn {
        border-radius: var(--radius-md);
        width: 100%;
    }

    .nok-input-group .btn {
        padding-inline: 1rem;
    }
}


/* Module Builder styles */
.module-builder-layout .card {
    border-radius: var(--radius-lg);
}

.module-builder-info-field {
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--color-heading);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

html[data-theme='dark'] .module-builder-info-field {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.module-builder-grid-wrapper {
    background: var(--color-surface-2);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
}

.module-builder-grid {
    --module-builder-cols: 14;
    --module-circle-size: 28px;
    --module-circle-gap: 0.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--module-circle-gap);
    width: 100%;
}

.module-builder-row {
    display: flex;
    gap: var(--module-circle-gap);
    position: relative;
    left: calc(var(--module-circle-size) / -4);
}

.module-builder-row-offset {
    left: calc(var(--module-circle-size) / 4);
    margin-left: calc(-1.05 * var(--module-circle-size));
}

.module-circle {
    width: var(--module-circle-size);
    height: var(--module-circle-size);
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.12);
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d7dbe4 70%, #aeb6c9 100%);
    box-shadow: 0 4px 6px rgba(12, 35, 64, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex: 0 0 var(--module-circle-size);
}

.module-circle.filled {
    border-color: rgba(27, 169, 127, 0.65);
    background: radial-gradient(circle at 30% 30%, #d9f5e9 0%, #52c898 70%, #1b8f6a 100%);
    box-shadow: 0 6px 12px rgba(27, 169, 127, 0.35);
}

.module-circle-legend {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.12);
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #d7dbe4 70%, #aeb6c9 100%);
}

.module-circle-legend.filled {
    border-color: rgba(27, 169, 127, 0.65);
    background: radial-gradient(circle at 30% 30%, #d9f5e9 0%, #52c898 70%, #1b8f6a 100%);
}
.header-badge-img {
    height: 28px; /* match your header height */
    width: auto;
    display: block; /* aligns nicely with the text block */
    object-fit: contain;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    margin-right: .5rem;
}

    .nav-icon svg {
        width: 1em;
        height: 1em;
        vertical-align: middle;
    }

/* Make SVG act like a big glyph */
.display-3 > svg {
    width: 1em; /* scales with display-3 font-size */
    height: 1em;
    fill: currentColor; /* inherits text color */
    vertical-align: -0.125em; /* optional: optical centering */
}



.clamshell-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    border: 1px solid rgba(12, 35, 64, 0.06);
    box-shadow: var(--shadow-xs);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.clamshell-card .clamshell-icon {
    font-size: 1.75rem;
}

.clamshell-card.clamshell-complete {
    background: rgba(27, 169, 127, 0.12);
    border-color: rgba(27, 169, 127, 0.35);
    box-shadow: 0 10px 24px rgba(27, 169, 127, 0.3);
}

.clamshell-card.clamshell-complete .clamshell-status {
    color: var(--color-success) !important;
    font-weight: 600;
}

.module-builder-legend .module-circle {
    box-shadow: none;
    border-width: 1px;
}

.module-builder-legend .module-circle.filled {
    box-shadow: none;
}

@media (max-width: 991.98px) {
    .module-builder-grid-wrapper {
        padding: 1rem;
    }

    .module-builder-grid {
        gap: 0.5rem;
    }
}

/* Connection Welding Pluck Test */
.pluck-grid-stage {
    --pluck-cell-size: 3.65rem;
    --pluck-row-gap: 0.65rem;
    --pluck-busbar-width: 4.15rem;
    --pluck-busbar-height: calc((var(--pluck-cell-size) * 3) + (var(--pluck-row-gap) * 2));
    --pluck-busbar-zone-height: calc((var(--pluck-cell-size) * 6) + (var(--pluck-row-gap) * 5));
    --pluck-busbar-zone-offset: calc((var(--pluck-busbar-zone-height) - var(--pluck-busbar-height)) / 2);
    --pluck-busbar-bottom-zone-top: calc((var(--pluck-cell-size) * 6) + (var(--pluck-row-gap) * 6));
    --pluck-grid-height: calc((var(--pluck-cell-size) * 12) + (var(--pluck-row-gap) * 11));
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    transform-origin: top left;
    width: max-content;
}

.pluck-grid {
    display: grid;
    gap: var(--pluck-row-gap);
    justify-content: center;
    padding: 0.25rem;
    padding-bottom: 0.5rem;
    width: max-content;
}

.pluck-grid-viewport {
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.65rem;
    min-height: 30rem;
    touch-action: none;
    cursor: grab;
}

.pluck-grid-viewport.is-panning {
    cursor: grabbing;
}

.pluck-grid-controls {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pluck-grid-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.pluck-grid-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.pluck-legend-symbol {
    display: inline-block;
    border-radius: 50%;
}

.pluck-legend-symbol.outer {
    width: 1.1rem;
    height: 1.1rem;
    border: 0.24rem solid #d14d57;
}

.pluck-legend-symbol.inner {
    width: 0.7rem;
    height: 0.7rem;
    background-color: #d14d57;
}

.pluck-grid-row {
    display: flex;
    gap: var(--pluck-row-gap);
    justify-content: center;
    width: max-content;
    margin: 0 auto;
}

.pluck-grid-row-offset {
    transform: translateX(1.25rem);
}

.pluck-cell-wrapper {
    position: relative;
    width: var(--pluck-cell-size);
    height: var(--pluck-cell-size);
}

.pluck-busbar-column {
    position: relative;
    flex: 0 0 var(--pluck-busbar-width);
    width: var(--pluck-busbar-width);
    height: var(--pluck-grid-height);
    margin-top: 0.25rem;
}

.pluck-busbar {
    position: absolute;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pluck-busbar-width);
    height: var(--pluck-busbar-height);
    border: 2px solid rgba(0, 0, 0, 0.16);
    border-radius: 0.45rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    padding: 0;
    box-shadow: 0 0.35rem 0.8rem rgba(12, 35, 64, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease;
}

#positiveBusbarButton {
    top: var(--pluck-busbar-zone-offset);
}

#negativeBusbarButton {
    top: calc(var(--pluck-busbar-bottom-zone-top) + var(--pluck-busbar-zone-offset));
}

.pluck-busbar:enabled:hover,
.pluck-busbar:enabled:focus-visible {
    transform: scale(1.03);
    box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.25), 0 0.45rem 0.9rem rgba(12, 35, 64, 0.18);
    outline: none;
}

.pluck-busbar.passed {
    background-color: #1c9c5a;
    border-color: #17804a;
}

.pluck-busbar.failed {
    background-color: #d14d57;
    border-color: #b63b45;
}

.pluck-cell-terminal {
    border-radius: 50%;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, border-color .2s ease;
}

.pluck-cell-terminal.negative {
    position: absolute;
    inset: 0;
    border: 0.5rem solid transparent;
    background-color: transparent;
}

.pluck-cell-terminal.positive {
    position: absolute;
    width: 2.1rem;
    height: 2.1rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid transparent;
    font-size: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.pluck-cell-terminal:enabled:hover,
.pluck-cell-terminal:enabled:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(13, 110, 253, 0.25);
    outline: none;
}

.pluck-cell-terminal.positive:enabled:hover,
.pluck-cell-terminal.positive:enabled:focus-visible {
    transform: translate(-50%, -50%) scale(1.04);
}

.pluck-cell-terminal.negative:enabled:hover,
.pluck-cell-terminal.negative:enabled:focus-visible {
    transform: scale(1.03);
}

.pluck-cell-terminal.passed.positive {
    background-color: #1c9c5a;
    border-color: #17804a;
    color: #f8fff8;
}

.pluck-cell-terminal.failed.positive {
    background-color: #d14d57;
    border-color: #b63b45;
    color: #fff;
}

.pluck-cell-terminal.passed.negative {
    border-color: #1c9c5a;
}

.pluck-cell-terminal.failed.negative {
    border-color: #d14d57;
}

.pluck-cell-terminal.skipped.positive {
    background-color: #b8c0cc;
    border-color: #9ea7b3;
    color: #2f3742;
    cursor: not-allowed;
    opacity: .8;
}

/* M150 Top lid preparation attention row */
.top-lid-prep-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 2px solid rgba(242, 201, 76, 0.7);
    border-radius: var(--radius-md);
    background: rgba(242, 201, 76, 0.12);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
    outline: none;
}

.top-lid-prep-row:focus-visible {
    box-shadow: var(--focus-ring);
}

.top-lid-prep-row.is-complete {
    border-color: rgba(27, 169, 127, 0.7);
    background: rgba(27, 169, 127, 0.12);
}

.top-lid-prep-row.is-missing {
    border-color: rgba(214, 69, 80, 0.75);
    background: rgba(214, 69, 80, 0.12);
    box-shadow: 0 0 0 0.2rem rgba(214, 69, 80, 0.18);
}

.top-lid-prep-icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: rgba(242, 201, 76, 0.28);
    color: #8a6400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: 0 0 auto;
}

.top-lid-prep-row.is-complete .top-lid-prep-icon {
    background: rgba(27, 169, 127, 0.3);
    color: #0b6c51;
}

.top-lid-prep-row.is-missing .top-lid-prep-icon {
    background: rgba(214, 69, 80, 0.24);
    color: #8f1f2d;
}

.top-lid-prep-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.top-lid-prep-title {
    font-weight: 700;
    color: var(--color-heading);
}

.top-lid-prep-hint,
.top-lid-prep-status {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.top-lid-prep-status {
    font-weight: 600;
}

.top-lid-prep-check {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.top-lid-prep-checkbox.form-check-input {
    width: 1.55rem;
    height: 1.55rem;
    margin-top: 0;
    cursor: pointer;
}

.top-lid-prep-check-label {
    font-weight: 700;
    color: var(--color-heading);
    cursor: pointer;
    margin-bottom: 0;
}

html[data-theme='dark'] .top-lid-prep-row {
    border-color: rgba(246, 211, 101, 0.65);
    background: rgba(246, 211, 101, 0.16);
}

html[data-theme='dark'] .top-lid-prep-row.is-complete {
    border-color: rgba(55, 210, 157, 0.65);
    background: rgba(55, 210, 157, 0.16);
}

html[data-theme='dark'] .top-lid-prep-row.is-missing {
    border-color: rgba(255, 107, 129, 0.7);
    background: rgba(255, 107, 129, 0.16);
    box-shadow: 0 0 0 0.2rem rgba(255, 107, 129, 0.22);
}

html[data-theme='dark'] .top-lid-prep-icon {
    color: #f6d365;
    background: rgba(246, 211, 101, 0.2);
}

html[data-theme='dark'] .top-lid-prep-row.is-complete .top-lid-prep-icon {
    color: #37d29d;
    background: rgba(55, 210, 157, 0.2);
}

html[data-theme='dark'] .top-lid-prep-row.is-missing .top-lid-prep-icon {
    color: #ff6b81;
    background: rgba(255, 107, 129, 0.2);
}

@media (max-width: 991.98px) {
    .top-lid-prep-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .top-lid-prep-check {
        margin-left: 0;
    }
}

.pluck-cell-terminal.skipped.negative {
    border-color: #9ea7b3;
    cursor: not-allowed;
    opacity: .8;
}

html[data-theme='dark'] .pluck-cell-terminal.passed.positive {
    background-color: #1f8f57;
    border-color: #39b97a;
    color: #f2fff6;
}

html[data-theme='dark'] .pluck-cell-terminal.failed.positive {
    background-color: #b84552;
    border-color: #d86a76;
    color: #fff;
}

html[data-theme='dark'] .pluck-cell-terminal.passed.negative {
    border-color: #39b97a;
}

html[data-theme='dark'] .pluck-cell-terminal.failed.negative {
    border-color: #d86a76;
}

html[data-theme='dark'] .pluck-cell-terminal.skipped.positive {
    background-color: #4f5a69;
    border-color: #6a7687;
    color: #e2e7ee;
}

html[data-theme='dark'] .pluck-cell-terminal.skipped.negative {
    border-color: #6a7687;
}

html[data-theme='dark'] .pluck-busbar.passed {
    background-color: #1f8f57;
    border-color: #39b97a;
}

html[data-theme='dark'] .pluck-busbar.failed {
    background-color: #b84552;
    border-color: #d86a76;
}

html[data-theme='dark'] .pluck-grid-viewport {
    border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme='dark'] .pluck-legend-symbol.outer {
    border-color: #d86a76;
}

html[data-theme='dark'] .pluck-legend-symbol.inner {
    background-color: #d86a76;
}

@media (max-width: 992px) {
    .pluck-grid-stage {
        --pluck-cell-size: 3.05rem;
        --pluck-busbar-width: 3.65rem;
        gap: 0.85rem;
    }

    .pluck-grid-viewport {
        min-height: 24rem;
    }

    .pluck-grid-row-offset {
        transform: none;
    }

    .pluck-cell-wrapper {
        width: var(--pluck-cell-size);
        height: var(--pluck-cell-size);
    }

    .pluck-busbar {
        font-size: 1.65rem;
    }

    .pluck-cell-terminal.positive {
        width: 1.82rem;
        height: 1.82rem;
        font-size: 0.56rem;
    }

    .pluck-cell-terminal.negative {
        border-width: 0.45rem;
    }

}

/* Shared predecessor station cards */
.predecessor-slot-card {
    border: 1px solid var(--color-border, rgba(12, 35, 64, 0.12));
    border-radius: var(--radius-md, 12px);
    background: var(--color-surface-1, #fff);
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.65rem;
    box-shadow: var(--shadow-xs, 0 2px 6px rgba(12, 35, 64, 0.08));
}

.predecessor-slot-card__meta {
    color: var(--color-text-muted, #6c757d);
    margin-bottom: 0.2rem;
}

.predecessor-slot-card__title {
    color: var(--color-heading, var(--color-text, #212529));
}

.predecessor-slot-card__timestamp {
    color: var(--color-text-muted, #6c757d);
}

.predecessor-slot-card__message {
    margin-top: 0.35rem;
    color: #8a6400;
    font-weight: 600;
}

.predecessor-slot-card--passed {
    border-color: rgba(27, 169, 127, 0.55);
    background: rgba(27, 169, 127, 0.12);
}

.predecessor-slot-card--failed {
    border-color: rgba(214, 69, 80, 0.55);
    background: rgba(214, 69, 80, 0.12);
}

.predecessor-slot-card--missing {
    border-color: rgba(242, 201, 76, 0.95);
    background: rgba(242, 201, 76, 0.18);
}

.predecessor-slot-card--quarantine {
    border-color: rgba(242, 201, 76, 0.95);
    background: rgba(242, 201, 76, 0.22);
}

.predecessor-slot-card--neutral {
    border-color: rgba(108, 117, 125, 0.45);
    background: rgba(108, 117, 125, 0.1);
}

html[data-theme='dark'] .predecessor-slot-card {
    border-color: rgba(99, 134, 195, 0.45);
    background: rgba(16, 26, 50, 0.92);
}

html[data-theme='dark'] .predecessor-slot-card--passed {
    border-color: rgba(55, 210, 157, 0.7);
    background: rgba(55, 210, 157, 0.16);
}

html[data-theme='dark'] .predecessor-slot-card--failed {
    border-color: rgba(255, 107, 129, 0.72);
    background: rgba(255, 107, 129, 0.16);
}

html[data-theme='dark'] .predecessor-slot-card--missing {
    border-color: rgba(246, 211, 101, 0.72);
    background: rgba(246, 211, 101, 0.2);
}

html[data-theme='dark'] .predecessor-slot-card--quarantine {
    border-color: rgba(246, 211, 101, 0.72);
    background: rgba(246, 211, 101, 0.24);
}

html[data-theme='dark'] .predecessor-slot-card--neutral {
    border-color: rgba(155, 167, 184, 0.58);
    background: rgba(155, 167, 184, 0.14);
}

html[data-theme='dark'] .predecessor-slot-card__message {
    color: #f6d365;
}

.help-field-hint {
    color: var(--color-text-muted);
    font-size: 0.84rem;
}

.mts-kvik-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.01em;
    color: #0f2c5f;
    font-weight: 820;
    letter-spacing: 0.01em;
    line-height: 1;
}

.mts-kvik-wordmark__k {
    color: rgb(217, 0, 51);
    font-weight: 930;
    text-shadow: 0 0 14px rgba(217, 0, 51, 0.2);
}

.mts-kvik-wordmark--compact {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.mts-kvik-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.72rem;
    padding: 0.22rem 0.56rem;
    border: 1px solid rgba(155, 178, 216, 0.72);
    border-radius: 999px;
    background: #edf3ff;
    color: #173a74;
}

.mts-kvik-badge--pill {
    margin-bottom: 0.18rem;
}

.mts-kvik-badge--floating {
    min-height: 1.5rem;
    padding: 0.17rem 0.5rem;
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.mts-kvik-badge--floating .mts-kvik-wordmark {
    color: #ffffff;
}

html[data-theme='dark'] .mts-kvik-badge {
    border-color: rgba(151, 182, 230, 0.38);
    background: rgba(22, 47, 88, 0.5);
    color: #d6e7ff;
}

html[data-theme='dark'] .mts-kvik-wordmark {
    color: #d6e7ff;
}

html[data-theme='dark'] .mts-kvik-badge--floating {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.help-index-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.help-index-kicker {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.help-index-language {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.help-index-search {
    max-width: 760px;
}

.documentation-hub,
.doc-reader {
    display: grid;
    gap: 1.25rem;
    color: var(--color-text);
}

.documentation-hub__header,
.doc-reader__header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.documentation-hub__header h2,
.doc-reader__header h2 {
    margin: 0 0 0.35rem;
    color: var(--color-heading);
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    letter-spacing: 0;
}

.documentation-hub__header p,
.doc-reader__header p {
    max-width: 760px;
    margin: 0;
    color: var(--color-text-muted);
}

.documentation-hub__eyebrow,
.doc-reader__eyebrow {
    margin-bottom: 0.35rem !important;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.documentation-hub__meta,
.doc-reader__meta {
    display: grid;
    gap: 0.45rem;
    min-width: 220px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.doc-reader__meta {
    margin: 0;
}

.doc-reader__meta div {
    display: grid;
    gap: 0.15rem;
}

.doc-reader__meta dt {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.doc-reader__meta dd {
    margin: 0;
}

.documentation-hub-tabs {
    position: sticky;
    top: calc(var(--header-height) + 0.5rem);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    box-shadow: var(--shadow-xs);
}

.documentation-hub-tab {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.42rem 0.9rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 700;
    text-decoration: none;
}

.documentation-hub-tab:hover {
    color: var(--color-heading);
    background: var(--color-surface-2);
}

.documentation-hub-tab.is-active {
    color: #fff;
    background: var(--color-accent);
}

.documentation-panel,
.doc-reader__content {
    display: grid;
    gap: 1.25rem;
}

.doc-reader__layout {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.doc-reader__toc {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
}

.doc-reader__toc a {
    padding: 0.42rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.doc-reader__toc a:hover {
    color: var(--color-heading);
    background: var(--color-surface-2);
}

.doc-section {
    padding: 1rem 0 0;
}

.doc-section + .doc-section {
    border-top: 1px solid var(--color-border);
}

.doc-section h2 {
    margin: 0 0 0.7rem;
    color: var(--color-heading);
    font-size: 1.35rem;
}

.doc-section h3 {
    margin: 1rem 0 0.5rem;
    color: var(--color-heading);
    font-size: 1.05rem;
}

.doc-section h4 {
    margin: 0.75rem 0 0.35rem;
    color: var(--color-heading);
    font-size: 0.92rem;
}

.doc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.85rem;
}

.doc-card-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.doc-card,
.doc-page-row {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    padding: 1rem;
}

.doc-card h3,
.doc-page-row h3 {
    margin-top: 0;
}

.doc-card__code {
    display: inline-flex;
    margin-bottom: 0.5rem;
    padding: 0.22rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    font-weight: 800;
}

.doc-page-list {
    display: grid;
    gap: 0.65rem;
}

.doc-page-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, max-content);
    gap: 1rem;
    align-items: start;
}

.doc-page-row p {
    margin-bottom: 0.35rem;
}

.doc-page-row__detail {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.doc-page-row__meta {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.doc-table th {
    color: var(--color-heading);
    background: var(--color-surface-2);
}

.doc-code {
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-heading);
    overflow-x: auto;
    white-space: pre-wrap;
}

.doc-related-list {
    columns: 2;
}

.mtskeem-review-badge {
    border: 1px solid transparent;
    font-weight: 800;
}

.mtskeem-review-badge--danger {
    border-color: rgba(206, 16, 62, 0.3);
    background: #fde8ee;
    color: #7a1631;
}

.mtskeem-review-badge--warning {
    border-color: rgba(226, 174, 36, 0.38);
    background: #fff4cf;
    color: #5d4200;
}

.mtskeem-review-badge--neutral {
    border-color: rgba(79, 91, 110, 0.24);
    background: #eef2f6;
    color: #26394f;
}

.mtskeem-review-badge--info {
    border-color: rgba(46, 92, 154, 0.26);
    background: #e8f1fb;
    color: #173d70;
}

.mtskeem-review-badge--success {
    border-color: rgba(27, 169, 127, 0.28);
    background: #ddf7ee;
    color: #0c5b43;
}

html[data-theme='dark'] .mtskeem-review-badge--danger {
    border-color: rgba(255, 126, 154, 0.38);
    background: rgba(206, 16, 62, 0.22);
    color: #ffd2dc;
}

html[data-theme='dark'] .mtskeem-review-badge--warning {
    border-color: rgba(255, 213, 97, 0.42);
    background: rgba(226, 174, 36, 0.2);
    color: #ffe8a8;
}

html[data-theme='dark'] .mtskeem-review-badge--neutral {
    border-color: rgba(190, 203, 220, 0.3);
    background: rgba(190, 203, 220, 0.14);
    color: #d7e2ef;
}

html[data-theme='dark'] .mtskeem-review-badge--info {
    border-color: rgba(137, 181, 238, 0.34);
    background: rgba(46, 92, 154, 0.24);
    color: #cce1ff;
}

html[data-theme='dark'] .mtskeem-review-badge--success {
    border-color: rgba(111, 232, 194, 0.34);
    background: rgba(27, 169, 127, 0.2);
    color: #c6f7e9;
}

.mtskeem-learning-workbench {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.mtskeem-learning-turn-list,
.mtskeem-learning-inspector {
    min-width: 0;
}

.mtskeem-learning-turn-list {
    position: sticky;
    top: calc(var(--header-height) + 1rem);
    display: grid;
    gap: 0.85rem;
    max-height: calc(100dvh - var(--header-height) - 3rem);
    overflow: auto;
    padding-right: 0.25rem;
}

.mtskeem-learning-session {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-1);
}

.mtskeem-learning-session h3 {
    margin: 0;
    color: var(--color-heading);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0;
}

.mtskeem-learning-session p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.mtskeem-learning-turn {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text);
    text-decoration: none;
}

.mtskeem-learning-turn:hover,
.mtskeem-learning-turn:focus,
.mtskeem-learning-turn.is-selected {
    border-color: rgba(13, 110, 253, 0.42);
    background: rgba(13, 110, 253, 0.08);
    color: var(--color-heading);
    text-decoration: none;
}

.mtskeem-learning-turn:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.mtskeem-learning-turn__meta,
.mtskeem-learning-kicker {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mtskeem-learning-turn__question {
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.32;
}

.mtskeem-learning-turn__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.mtskeem-learning-inspector {
    display: grid;
    gap: 0.9rem;
}

.mtskeem-learning-inspector__header,
.mtskeem-learning-section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-1);
    padding: 1rem;
}

.mtskeem-learning-inspector__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mtskeem-learning-inspector__header h3,
.mtskeem-learning-section h4 {
    margin: 0;
    color: var(--color-heading);
    font-weight: 800;
    letter-spacing: 0;
}

.mtskeem-learning-inspector__header h3 {
    font-size: 1.25rem;
}

.mtskeem-learning-inspector__header p {
    margin: 0.2rem 0 0;
    color: var(--color-text-muted);
}

.mtskeem-learning-inspector__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.mtskeem-learning-inspector__stats span {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.mtskeem-learning-section {
    display: grid;
    gap: 0.65rem;
}

.mtskeem-learning-section h4 {
    font-size: 1rem;
}

.mtskeem-learning-form {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(240px, 1fr) minmax(140px, 180px);
    gap: 0.75rem;
    align-items: end;
}

.mtskeem-learning-form--stacked {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.mtskeem-learning-form__wide {
    grid-column: span 3;
}

.mtskeem-learning-form__action {
    align-self: end;
}

.mtskeem-learning-preview pre {
    max-height: 18rem;
    margin: 0;
    padding: 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-heading);
    overflow: auto;
    white-space: pre-wrap;
}

.mtskeem-learning-apply-form {
    display: flex;
    justify-content: flex-end;
}

html[data-theme='dark'] .mtskeem-learning-turn:hover,
html[data-theme='dark'] .mtskeem-learning-turn:focus,
html[data-theme='dark'] .mtskeem-learning-turn.is-selected {
    border-color: rgba(137, 181, 238, 0.42);
    background: rgba(46, 92, 154, 0.2);
}

/* Phase 2: collapse the MTS-Q history two-pane below 1200px (was 992) — it overflowed
   ~159px at 1180. Single column there; two-pane returns at >=1200px. */
@media (max-width: 1199.98px) {
    .mtskeem-learning-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    .mtskeem-learning-turn-list {
        position: static;
        max-height: none;
        padding-right: 0;
    }

    .mtskeem-learning-inspector__header {
        display: grid;
    }

    .mtskeem-learning-inspector__stats {
        justify-content: flex-start;
    }

    .mtskeem-learning-form,
    .mtskeem-learning-form--stacked {
        grid-template-columns: minmax(0, 1fr);
    }

    .mtskeem-learning-form__wide {
        grid-column: auto;
    }
}

@media (max-width: 767.98px) {
    .table-responsive,
    .scada-table-wrapper,
    .reporting-exporter__table-scroll,
    .admin-table-scroll,
    .settings-table-scroll,
    .component-lifecycle-table-scroll,
    .process-change-log-table-wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .btn,
    button:not(.btn-close),
    .form-control,
    .form-select,
    [role='button'] {
        min-height: 44px;
    }

    .btn-close {
        min-height: 0;
    }

    .btn-group,
    .input-group,
    .form-actions,
    .settings-actions,
    .scada-filters__actions,
    .dt-quick-filters,
    .reporting-exporter__actions {
        flex-wrap: wrap;
    }

    .qr-photo-scan-group {
        flex-wrap: nowrap;
    }

    .qr-photo-scan-button {
        flex: 0 0 44px;
    }

    .qr-live-scan-video {
        max-height: min(58dvh, 440px);
    }

    .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }

    .nav-tabs,
    .dashboard-mode-tabs,
    .documentation-hub-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link,
    .dashboard-mode-tabs > *,
    .documentation-hub-tab {
        white-space: nowrap;
    }

    code,
    pre,
    .text-break,
    .admin-technical-value,
    .admin-endpoint-value {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    #runner-layout-row,
    .pack-assembly-layout,
    .powerbox-layout,
    .powerbox-detail-grid,
    .subassembly-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    #runner-layout-row {
        margin-inline: 0;
    }

    #runner-main-col,
    #runner-side-col,
    .pack-form-column,
    .pack-assembly-column,
    #station-step-form,
    #assembly-controls,
    #runner-side-stack,
    .predecessor-slot-card,
    .quarantine-open-report-card {
        max-width: 100%;
        min-width: 0;
    }

    #station-step-form .d-flex,
    #assembly-controls .d-flex,
    .predecessor-slot-card .d-flex,
    .quarantine-open-report-card__head {
        flex-wrap: wrap;
    }

    .camera-view,
    .tca-camera-container,
    #report-camera-panel,
    #report-camera-stream,
    #report-captured-images-preview {
        max-width: 100%;
    }

    #report-camera-panel {
        overflow: hidden;
    }

    .admin-hub-layout,
    .admin-hub-shell,
    .admin-hub-panel,
    .admin-hub-content-frame,
    .users-access-workspace,
    .recovery-center-workspace,
    .recovery-list-workspace {
        max-width: 100%;
        min-width: 0;
    }

    .admin-hub-content-frame {
        overflow-x: auto;
        padding: 0.75rem;
    }

    .admin-task-tabs {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .admin-sticky-actions {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    .admin-sticky-actions .btn,
    .user-directory-card .user-action-button {
        width: 100%;
    }

    .create-user-toggle-row .form-check,
    .user-quality-check {
        min-height: 44px;
        align-items: center;
    }

    .settings-mobile-card-table,
    .settings-mobile-card-table thead,
    .settings-mobile-card-table tbody,
    .settings-mobile-card-table tr,
    .settings-mobile-card-table th,
    .settings-mobile-card-table td {
        display: block;
        width: 100%;
    }

    .settings-mobile-card-table thead {
        display: none;
    }

    .settings-mobile-card-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .settings-mobile-card-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
        padding: 0.75rem;
        border: 1px solid var(--color-border, #d9e2ec);
        border-radius: 8px;
        background: var(--color-surface-1, #fff);
    }

    .settings-mobile-card-table td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
        gap: 0.5rem;
        align-items: center;
        border: 0;
        padding: 0;
        min-width: 0;
    }

    .settings-mobile-card-table td::before {
        content: attr(data-label);
        color: var(--color-text-muted, #5b677a);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.15;
        text-transform: uppercase;
    }

    .settings-mobile-card-table td > .form-control,
    .settings-mobile-card-table td > .form-select,
    .settings-mobile-card-table td > .input-group,
    .settings-mobile-card-table td > form,
    .settings-mobile-card-table td > code {
        min-width: 0;
        width: 100%;
    }

    .settings-rule-enabled,
    .admin-access-toggle {
        min-height: 44px;
        justify-items: end;
    }

    .form-check-input,
    .settings-rule-enabled .form-check-input,
    .admin-access-toggle .form-check-input,
    .admin-hub-content-frame .form-check-input,
    .user-directory-card .form-check-input,
    .create-user-toggle-row .form-check-input {
        width: 2.75rem;
        height: 2.75rem;
        margin-top: 0;
    }

    .settings-rule-actions,
    .recovery-action-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .settings-rule-actions .btn,
    .recovery-action-form .btn {
        width: 100%;
    }

    .mbom-component-rules-scroll {
        overflow-x: visible;
    }

    .mbom-component-rules-grid {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .mbom-component-rules-grid.ds-table-header {
        display: none;
    }

    .mbom-component-rules-grid.ds-table-row {
        display: grid;
        gap: 0.75rem;
        padding: 0.75rem;
        border: 1px solid var(--color-border, #d9e2ec);
        border-radius: 8px;
        background: var(--color-surface-1, #fff);
    }

    .mbom-component-rules-grid > [data-label] {
        display: grid;
        grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr);
        gap: 0.5rem;
        min-width: 0;
    }

    .mbom-component-rules-grid > [data-label]::before {
        content: attr(data-label);
        color: var(--color-text-muted, #5b677a);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        line-height: 1.15;
        text-transform: uppercase;
    }

    .mbom-component-rules-grid .input-group,
    .mbom-component-rules-grid .tag-input,
    .mbom-component-rules-grid input,
    .mbom-component-rules-grid select {
        min-width: 0;
    }

    .mbom-flow-stages-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .help-index-header,
    .documentation-hub__header,
    .doc-reader__header,
    .doc-reader__layout,
    .doc-page-row {
        display: grid;
    }

    .help-index-language {
        white-space: normal;
    }

    .documentation-hub__meta,
    .doc-reader__meta {
        min-width: 0;
    }

    .doc-reader__toc {
        position: static;
    }

    .doc-page-row__meta {
        justify-items: start;
    }

    .doc-related-list {
        columns: 1;
    }
}

/* Phase 2: compact shell on short viewports (e.g. 1366x768 factory laptops) — reclaim
   vertical budget so tools/scan fields appear above the fold. Gated by max-height so tall
   monitors are unaffected. Shrinking --header-height auto-tightens the header AND the
   main-content top calc.

   Responsive Audit: threshold raised 820px -> 900px. At 820px this query missed 1080p at
   125% zoom (effective height 864px), so the full 88px header came back exactly when the
   user was zooming in to gain reading space. Horizontal padding is handled by the
   width-based token steps, which this block deliberately leaves alone.

   This block must remain LAST among the shell-density queries so its token values win
   over the width-based steps on short-and-narrow viewports. */
@media (max-height: 900px) {
    :root {
        --header-bar-height: 64px;
        --shell-pad-y: 1.25rem;
        --shell-pad-bottom: 1rem;
        --wrapper-pad: 1.5rem;
    }

    /* Responsive Audit Phase 4: the page header block was never compacted on short
       viewports — only below 992px width — so a 1366x768 laptop paid the full
       1.5rem/2rem padding, 3.5rem icon and 1rem title margin on every station page. */
    .page-header-block {
        padding: 0.9rem 1.25rem;
    }

    .page-header-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.9rem;
        font-size: 1.35rem;
    }

    .page-title {
        margin-bottom: 0.35rem;
    }
}

/* Home page: what needs attention and the pages this user opened last, side by side, then every
   tool as a compact list - one card per section, each tool with its code or icon, its name and
   one line of what it does (the link's tooltip holds the rest). Nothing moves under the pointer:
   no hover lift. */
/* Ask MTS-Q on the home page, as on the approved design: the title, a full-width question box with its Ask
   button, then "Try:" and three questions from the line right now. */
.home-ask {
    --home-ask-line: #9fb0cf;
    --home-ask-chip: #eef2f9;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.5rem;
    padding: 1.375rem 1.5rem;
    border: 1.5px solid var(--home-ask-line);
    border-radius: var(--radius-lg);
    background: var(--content-bg);
    box-shadow: 0 8px 22px rgba(12, 35, 64, 0.08);
}

html[data-theme='dark'] .home-ask {
    --home-ask-line: #3a4f74;
    --home-ask-chip: rgba(58, 105, 169, 0.16);
    box-shadow: var(--shadow-xs);
}

.home-ask__intro {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.home-ask__mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--color-brand);
    color: #ffffff;
    font-size: 1.15rem;
}

html[data-theme='dark'] .home-ask__mark {
    background: var(--color-accent);
}

.home-ask__heading {
    min-width: 0;
}

.home-ask__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--color-heading);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}

.home-ask__lead {
    margin: 0.15rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.home-ask__form {
    display: flex;
    gap: 0.625rem;
    min-width: 0;
}

.home-ask__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3rem;
    padding: 0 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background: var(--color-surface-1);
    color: var(--color-heading);
    font-size: 1rem;
}

.home-ask__input:focus-visible {
    border-color: var(--color-accent-strong);
    outline: 3px solid var(--color-accent-soft);
}

.home-ask__submit {
    flex: 0 0 auto;
    height: 3rem;
    padding: 0 1.375rem;
    border: 0;
    border-radius: 0.75rem;
    background: var(--color-accent);
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 600;
}

.home-ask__submit:hover,
.home-ask__submit:focus-visible {
    background: var(--color-accent-strong);
}

.home-ask__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.home-ask__try {
    margin-right: 0.15rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.home-ask__suggestion {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--home-ask-line);
    border-radius: 1.25rem;
    background: var(--home-ask-chip);
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

html[data-theme='dark'] .home-ask__suggestion {
    color: var(--color-link);
}

.home-ask__suggestion:hover,
.home-ask__suggestion:focus-visible {
    border-color: var(--color-accent-strong);
    color: var(--color-accent-strong);
}

html[data-theme='dark'] .home-ask__suggestion:hover,
html[data-theme='dark'] .home-ask__suggestion:focus-visible {
    color: var(--color-heading);
}

/* The question of the day: one example a day, the same for everyone, asked straight away when clicked. */
.home-ask__daily {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--home-ask-chip);
}

.home-ask__daily-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.home-ask__daily-label .bi {
    color: #b88a00;
    font-size: 1rem;
}

html[data-theme='dark'] .home-ask__daily-label .bi {
    color: #facc15;
}

.home-ask__daily-question {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    min-height: 2.25rem;
    color: var(--color-accent);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.home-ask__daily-question:hover,
.home-ask__daily-question:focus-visible {
    color: var(--color-accent-strong);
    text-decoration: underline;
}

html[data-theme='dark'] .home-ask__daily-question {
    color: var(--color-link);
}

html[data-theme='dark'] .home-ask__daily-question:hover,
html[data-theme='dark'] .home-ask__daily-question:focus-visible {
    color: var(--color-heading);
}

.home-top {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.home-panel {
    min-width: 0;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--content-bg);
    box-shadow: var(--shadow-xs);
}

.home-panel__title {
    margin: 0 0 0.85rem;
    color: var(--color-heading);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.home-attention__counts,
.home-attention__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.home-attention__links {
    margin-top: 0.75rem;
}

/* The count tiles take the height the row gives the panel - Recent beside it is often taller -
   so the numbers get the room instead of an empty band under the links. */
.home-attention {
    display: flex;
    flex-direction: column;
}

.home-attention__counts {
    flex: 1 1 auto;
}

/* An operator who cannot close quarantine reports gets the downtime tile alone, full width. */
.home-attention__counts--single {
    grid-template-columns: minmax(0, 1fr);
}

.home-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    align-items: center;
    min-width: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-stat__icon {
    grid-row: 1 / span 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(12, 35, 64, 0.07);
    color: var(--color-text-muted);
    font-size: 1.25rem;
}

.home-stat__value {
    color: var(--color-heading);
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.home-stat__label {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.25;
}

.home-stat__action,
.home-stat__note {
    margin-top: 0.3rem;
    font-size: 0.8rem;
}

.home-stat__action {
    color: var(--color-accent-strong);
    font-weight: 700;
}

.home-stat__note {
    color: var(--color-text-muted);
}

a.home-stat:hover,
a.home-stat:focus-visible {
    border-color: var(--color-accent-strong);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    text-decoration: none;
}

a.home-stat:focus-visible,
.home-line-link:focus-visible,
.home-recent__link:focus-visible,
.home-dir-tool:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

/* Amber, like every quarantine mark in the app; red for a downtime, which is an active stoppage.
   A zero stays grey, so the tiles are always there and a number never jumps in from nowhere. */
.home-stat--warning {
    border-color: rgba(214, 163, 0, 0.55);
    background: rgba(214, 163, 0, 0.1);
}

.home-stat--warning .home-stat__icon {
    background: #D6A300;
    color: #3d2e00;
}

.home-stat--warning .home-stat__value {
    color: #6b4f00;
}

.home-stat--danger {
    border-color: rgba(214, 69, 80, 0.45);
    background: rgba(214, 69, 80, 0.08);
}

.home-stat--danger .home-stat__icon {
    background: #d64550;
    color: #ffffff;
}

.home-stat--danger .home-stat__value {
    color: #b3261e;
}

.home-line-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-line-link:hover,
.home-line-link:focus-visible {
    border-color: var(--color-accent-strong);
    color: var(--color-text);
    text-decoration: none;
}

.home-line-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: 1.1rem;
}

.home-line-link__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-line-link__name {
    color: var(--color-heading);
    font-size: 0.92rem;
    font-weight: 700;
}

.home-line-link__hint {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-line-link__go {
    color: var(--color-text-muted);
}

.home-recent__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-recent__link {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
}

.home-recent__link:hover,
.home-recent__link:focus-visible {
    background: var(--color-accent-soft);
    color: var(--color-heading);
    text-decoration: none;
}

.home-recent__mark,
.home-dir-tool__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-strong);
    font-size: 1.05rem;
}

.home-recent__name {
    overflow: hidden;
    color: var(--color-heading);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-recent__section {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    white-space: nowrap;
}

.home-recent__empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.home-directory__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.home-directory__head .home-panel__title {
    margin: 0;
}

.home-directory__hint {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.home-directory__hint kbd {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
}

/* Masonry by columns: each card stays whole; there is nothing to open or close. */
.home-directory__groups {
    columns: 20rem 4;
    column-gap: 1rem;
}

.home-dir-group {
    break-inside: avoid;
    margin: 0 0 1rem;
    padding: 0.85rem 0.9rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--content-bg);
    box-shadow: var(--shadow-xs);
    /* The header's section name links here; the fixed header must not cover the card's title. */
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.home-dir-group__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.45rem;
    color: var(--color-heading);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0;
}

.home-dir-group__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
    font-size: 1rem;
}

.home-dir-group__name {
    flex: 1 1 auto;
    min-width: 0;
}

.home-dir-group__list {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-dir-tool {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    padding: 0.45rem 0.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
}

.home-dir-group__list--codes .home-dir-tool {
    grid-template-columns: 3.4rem minmax(0, 1fr);
}

.home-dir-tool:hover,
.home-dir-tool:focus-visible {
    background: var(--color-accent-soft);
    color: var(--color-text);
    text-decoration: none;
}

.home-dir-tool__mark {
    min-height: 1.4rem;
}

.home-dir-tool__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.home-dir-tool__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    color: var(--color-heading);
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.3;
}

.home-dir-tool__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-dir-tool__desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.station-code-badge--home {
    min-width: 3.1rem;
    height: 1.5rem;
    padding: 0 0.35rem;
    border: 1px solid rgba(12, 35, 64, 0.34);
    border-radius: 7px;
    background: rgba(12, 35, 64, 0.06);
    color: var(--color-heading);
    font-size: 0.72rem;
}

/* Operators: their stations come first and stay on every screen size. */
.mobile-operator-panel--pinned {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--content-bg);
    box-shadow: var(--shadow-xs);
}

.mobile-operator-panel--pinned .mobile-operator-panel__grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

html[data-theme='dark'] .home-panel,
html[data-theme='dark'] .home-dir-group {
    background: rgba(16, 26, 50, 0.92);
    border-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .home-stat,
html[data-theme='dark'] .home-line-link {
    background: rgba(22, 38, 70, 0.92);
    border-color: rgba(99, 134, 195, 0.35);
}

html[data-theme='dark'] .home-stat__icon {
    background: rgba(122, 166, 226, 0.16);
}

html[data-theme='dark'] .home-stat--warning {
    border-color: rgba(250, 204, 21, 0.45);
    background: rgba(250, 204, 21, 0.1);
}

html[data-theme='dark'] .home-stat--warning .home-stat__icon {
    background: #FACC15;
    color: #2a1f00;
}

html[data-theme='dark'] .home-stat--warning .home-stat__value {
    color: #FACC15;
}

html[data-theme='dark'] .home-stat--danger {
    border-color: rgba(255, 107, 129, 0.45);
    background: rgba(214, 69, 80, 0.16);
}

html[data-theme='dark'] .home-stat--danger .home-stat__icon {
    background: #ff6b81;
    color: #2a0d11;
}

html[data-theme='dark'] .home-stat--danger .home-stat__value {
    color: #ffb9c3;
}

html[data-theme='dark'] .home-line-link__icon,
html[data-theme='dark'] .home-dir-group__icon {
    background: rgba(63, 102, 162, 0.28);
    color: rgba(223, 232, 255, 0.92);
}

html[data-theme='dark'] .home-recent__mark,
html[data-theme='dark'] .home-dir-tool__mark {
    color: rgba(186, 210, 248, 0.92);
}

html[data-theme='dark'] .home-recent__link:hover,
html[data-theme='dark'] .home-recent__link:focus-visible,
html[data-theme='dark'] .home-dir-tool:hover,
html[data-theme='dark'] .home-dir-tool:focus-visible {
    background: rgba(46, 92, 154, 0.24);
}

html[data-theme='dark'] .station-code-badge--home {
    border-color: rgba(186, 210, 248, 0.54);
    background: rgba(122, 166, 226, 0.22);
    color: var(--color-heading);
}

@media (max-width: 1199.98px) {
    .home-top {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    /* No keyboard shortcut on a tablet; the search is in the menu drawer. */
    .home-directory__hint {
        display: none;
    }

    .home-ask {
        padding: 1.1rem 1.15rem;
    }
}

@media (max-width: 575.98px) {
    .home-attention__counts,
    .home-attention__links {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-stat__value {
        font-size: 1.6rem;
    }

    .home-recent__section {
        display: none;
    }

    .home-recent__link {
        grid-template-columns: 3.4rem minmax(0, 1fr);
    }
}