/* Application styles on the design tokens (tokens.css). Layout = CSS grid with named areas
   (AppLayout: top navigation, side navigation drawer, content, help drawer); component rules are
   keyed by custom element tag or a `b-` class. Logical properties throughout. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/OpenSans-400.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/OpenSans-400-Italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/OpenSans-700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/fonts/OpenSans-700-Italic.woff2") format("woff2"); }

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

html { line-height: 1.15; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    container-type: inline-size;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-m);
    line-height: var(--line-height-body-m);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-body-default);
    background: var(--color-background-layout-main);
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-areas: "top" "layout";
}

/* ---------- typography, links, focus ---------- */
h1, h2, h3, h4 { margin: 0; color: var(--color-text-heading-default); font-weight: var(--font-weight-heading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1 { font-size: var(--font-size-heading-xl); line-height: var(--line-height-heading-xl); letter-spacing: var(--letter-spacing-heading-xl); }
h2 { font-size: var(--font-size-heading-l); line-height: var(--line-height-heading-l); letter-spacing: var(--letter-spacing-heading-l); }
h3 { font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); letter-spacing: var(--letter-spacing-heading-m); }
h4 { font-size: var(--font-size-heading-s); line-height: var(--line-height-heading-s); letter-spacing: var(--letter-spacing-heading-s); }
p { margin: 0; }

a, .b-link {
    color: var(--color-text-link-default);
    text-decoration-line: none;
    text-decoration-color: transparent;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
    transition: color var(--motion-duration-expressive), text-decoration-color var(--motion-duration-expressive);
}
a:hover, a:focus-visible, a:active, .b-link:hover { color: var(--color-text-link-hover); text-decoration-line: underline; text-decoration-color: currentColor; }
a[target="_blank"] .b-icon { margin-inline-start: var(--space-xxs); }

:focus-visible {
    outline: 2px solid var(--color-border-item-focused);
    outline-offset: 2px;
    border-radius: var(--border-radius-control-focus-ring);
}

.b-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.b-icon { display: inline-block; inline-size: var(--size-icon-normal); block-size: var(--size-icon-normal); vertical-align: -0.2em; }
.b-icon svg { display: block; inline-size: 100%; block-size: 100%; fill: none; stroke: currentColor; stroke-width: 2px; }
.b-icon svg .filled { fill: currentColor; stroke: none; }
.b-icon--medium { inline-size: var(--size-icon-medium); block-size: var(--size-icon-medium); }

/* ---------- buttons ---------- */
.b-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xxs);
    min-block-size: var(--size-vertical-input);
    padding-block: var(--space-xxs); padding-inline: var(--space-button-horizontal);
    border: var(--border-width-button) solid var(--color-border-button-normal-default);
    border-radius: var(--border-radius-button);
    background: var(--color-background-button-normal-default);
    color: var(--color-text-button-normal-default);
    font: inherit; font-weight: var(--font-weight-button); letter-spacing: var(--font-button-letter-spacing);
    line-height: var(--line-height-body-m);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color var(--motion-duration-responsive), color var(--motion-duration-responsive), border-color var(--motion-duration-responsive);
}
.b-button:hover { background: var(--color-background-button-normal-hover); color: var(--color-text-button-normal-hover); border-color: var(--color-border-button-normal-hover); text-decoration: none; }
.b-button:active { background: var(--color-background-button-normal-active); }
.b-button:disabled, .b-button[aria-disabled="true"] { background: var(--color-background-button-normal-default); border-color: var(--color-border-button-normal-disabled); color: var(--color-text-interactive-disabled); cursor: default; pointer-events: none; }
.b-button--primary { background: var(--color-background-button-primary-default); border-color: var(--color-background-button-primary-default); color: var(--color-text-button-primary-default); }
.b-button--primary:hover { background: var(--color-background-button-primary-hover); border-color: var(--color-background-button-primary-hover); color: var(--color-text-button-primary-default); }
.b-button--primary:disabled { background: var(--color-background-button-primary-disabled); border-color: var(--color-background-button-primary-disabled); color: var(--color-text-interactive-disabled); }
.b-button--link { background: transparent; border-color: transparent; }
.b-button--link:hover { background: var(--color-background-button-link-hover); border-color: var(--color-background-button-link-hover); }
.b-button--icon { background: transparent; border-color: transparent; color: var(--color-text-interactive-default); padding-inline: var(--space-button-icon-only-horizontal); }
.b-button--icon:hover { background: transparent; border-color: transparent; color: var(--color-text-interactive-hover); }
.b-button--inline-link { display: inline; min-block-size: 0; padding: 0; border: 0; background: none; color: var(--color-text-link-default); font-weight: var(--font-weight-normal); letter-spacing: 0; }
.b-button--inline-link:hover { background: none; color: var(--color-text-link-hover); text-decoration: underline; }
.b-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

/* ---------- top navigation (dark context) ---------- */
header.b-ctx-top-nav {
    grid-area: top;
    position: sticky; inset-block-start: 0; z-index: 1002;
    background: var(--color-background-container-content);
    border-block-end: 1px solid var(--color-border-divider-default);
    color: var(--color-text-body-default);
}
b-shell-topnav { display: block; }
.b-topnav {
    display: flex; align-items: center; gap: var(--space-m);
    block-size: var(--size-top-navigation);
    padding-inline: var(--space-xxl) var(--space-l);
}
.b-topnav__identity { display: flex; align-items: center; gap: var(--space-s); color: var(--color-text-top-navigation-title); text-decoration: none; }
.b-topnav__identity:hover { color: var(--color-text-accent); text-decoration: none; }
.b-topnav__logo { block-size: 32px; inline-size: auto; }
.b-topnav__title { font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); font-weight: var(--font-weight-heading); letter-spacing: var(--letter-spacing-heading-m); }
.b-topnav__utilities { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-xs); }
.b-topnav .b-button--icon { color: var(--color-text-interactive-default); }
.b-topnav .b-button--icon:hover { color: var(--color-text-interactive-hover); }

/* user menu */
b-auth-user-menu { position: relative; display: block; }
.b-user-menu__trigger { display: inline-flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-s); }
.b-user-menu__trigger .b-icon--caret { transition: transform var(--motion-duration-rotate-180) var(--motion-easing-rotate-180); }
.b-user-menu__trigger[aria-expanded="true"] .b-icon--caret { transform: rotate(180deg); }
.b-user-menu__list {
    position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-xxs)); z-index: 2000;
    min-inline-size: 240px; margin: 0; padding: var(--space-xxs); list-style: none;
    background: var(--color-background-dropdown-item-default, #fff);
    color: var(--color-text-dropdown-item-default, var(--color-text-body-default));
    border: var(--border-width-button) solid var(--color-border-dropdown-container);
    border-radius: var(--border-radius-dropdown);
    box-shadow: var(--shadow-dropdown);
}
.b-user-menu__list li { padding-block: var(--space-xxs); padding-inline: var(--space-s); }
.b-user-menu__identity { border-block-end: 1px solid var(--color-border-divider-default); padding-block-end: var(--space-xs); margin-block-end: var(--space-xxs); }
.b-user-menu__identity strong { display: block; }
.b-user-menu__identity small { color: var(--color-text-interactive-default); font-size: var(--font-size-body-s); }
.b-user-menu__item { inline-size: 100%; text-align: start; padding-block: var(--space-xxs); padding-inline: var(--space-xs); border: 0; border-radius: var(--border-radius-item); background: none; color: inherit; font: inherit; cursor: pointer; }
.b-user-menu__item:hover { background: var(--color-background-dropdown-item-hover); color: var(--color-text-accent); }

/* ---------- app layout: nav | main | help ---------- */
.b-layout {
    grid-area: layout;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "nav main help";
    align-items: start;
    min-block-size: calc(100dvh - var(--size-top-navigation));
}
b-shell-nav { grid-area: nav; display: block; }
b-shell-help { grid-area: help; display: block; }
main {
    grid-area: main;
    padding-inline: var(--space-layout-content-horizontal);
    padding-block: var(--space-m) var(--space-layout-content-bottom);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    row-gap: var(--space-m);
}
.view { display: block; min-inline-size: 0; }

/* drawers */
.b-drawer {
    position: sticky; inset-block-start: var(--size-top-navigation);
    block-size: calc(100dvh - var(--size-top-navigation));
    overflow-y: auto;
    background: var(--color-background-container-content);
}
.b-drawer--nav { inline-size: var(--size-nav-width); border-inline-end: 1px solid var(--color-border-layout); }
.b-drawer--help { inline-size: var(--size-tools-width); border-inline-start: 1px solid var(--color-border-layout); }
.b-drawer__close { position: absolute; inset-block-start: var(--space-m); inset-inline-end: var(--space-m); z-index: 1; }
.b-layout-toggle {
    position: sticky; inset-block-start: calc(var(--size-top-navigation) + var(--space-layout-toggle-padding));
    margin: var(--space-layout-toggle-padding);
    inline-size: var(--space-layout-toggle-diameter); block-size: var(--space-layout-toggle-diameter);
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: var(--color-background-layout-toggle-default); color: var(--color-text-inverted);
    cursor: pointer; box-shadow: var(--shadow-panel-toggle);
}
.b-layout-toggle:hover { background: var(--color-background-layout-toggle-hover); }

/* side navigation */
.b-sidenav { padding-block: var(--space-panel-header-vertical); padding-inline: var(--space-panel-nav-left) var(--space-panel-side-right); }
.b-sidenav__header { display: block; margin-block-end: var(--space-xl); padding-inline-end: var(--space-xxl); font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); font-weight: var(--font-weight-heading); letter-spacing: var(--letter-spacing-heading-m); color: var(--color-text-heading-default); }
.b-sidenav__header:hover { text-decoration: none; color: var(--color-text-accent); }
.b-sidenav ul { list-style: none; margin: 0; padding: 0; }
.b-sidenav ul ul { padding-inline-start: var(--space-l); }
.b-sidenav li { margin-block: var(--space-xs); }
.b-sidenav a { color: var(--color-text-interactive-default); text-decoration: none; }
.b-sidenav a:hover { color: var(--color-text-accent); text-decoration: none; }
.b-sidenav a[aria-current="page"] { color: var(--color-text-accent); font-weight: var(--font-weight-heading); -webkit-font-smoothing: antialiased; }
.b-sidenav hr { margin-block: var(--space-xl); margin-inline: calc(-1 * var(--space-xs)); border: 0; border-block-start: 1px solid var(--color-border-divider-default); }

/* breadcrumbs */
b-shell-breadcrumbs { display: block; }
.b-breadcrumbs { padding-block: var(--space-xxs); }
.b-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.b-breadcrumbs li { display: inline-flex; align-items: center; white-space: nowrap; }
.b-breadcrumbs li + li::before { content: ""; display: inline-block; inline-size: var(--size-icon-normal); block-size: var(--size-icon-normal); margin-inline: var(--space-xs); color: var(--color-text-breadcrumb-icon); background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m5 2 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m5 2 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/></svg>") center / contain no-repeat; }
.b-breadcrumbs [aria-current="page"] { color: var(--color-text-breadcrumb-current); font-weight: var(--font-weight-heading); }

/* help panel */
.b-help { position: relative; padding-block: var(--space-panel-content-top) var(--space-layout-content-bottom); padding-inline: var(--space-panel-nav-left) var(--space-panel-side-right); }
.b-help h2 { margin-inline-end: var(--space-xxl); font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); }
.b-help h3 { margin-block-start: var(--space-xl); }
.b-help p, .b-help dl { margin-block: var(--space-s); }
.b-help ul, .b-help ol { margin-block: var(--space-s); padding-inline-start: var(--space-l); }
.b-help li { margin-block: var(--space-xxs); }
.b-help__table { inline-size: 100%; border-collapse: collapse; font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); }
.b-help__table th, .b-help__table td { text-align: start; padding-block: var(--space-xxs); padding-inline: var(--space-xxs); border-block-end: 1px solid var(--color-border-divider-secondary); vertical-align: top; }
.b-help__table th { color: var(--color-text-column-header); }
.b-help hr { margin-block: var(--space-xl); margin-inline: calc(-1 * var(--space-xs)); border: 0; border-block-start: 1px solid var(--color-border-divider-default); }

/* flashbar */
b-shell-flashbar { display: block; }
b-shell-flashbar:empty, b-shell-breadcrumbs:empty { display: none; }
.b-flashbar { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xxxs); }
.b-flash {
    display: flex; align-items: flex-start; gap: var(--space-s);
    padding-block: var(--space-flashbar-vertical); padding-inline: var(--space-flashbar-horizontal);
    border-radius: var(--border-radius-flashbar);
    color: var(--color-text-notification-default);
    box-shadow: var(--shadow-flash-sticky);
}
.b-flash--error { background: var(--color-background-notification-red); }
.b-flash--success { background: var(--color-background-notification-green); }
.b-flash--info { background: var(--color-background-notification-blue); }
.b-flash--warning { background: var(--color-background-notification-yellow); color: var(--color-text-body-default); }
.b-flash__icon { flex: none; padding-block-start: var(--space-xxxs); }
.b-flash__body { flex: 1; min-inline-size: 0; }
.b-flash__header { font-weight: var(--font-weight-heading); }
.b-flash__dismiss { flex: none; color: inherit; }
.b-flash__dismiss:hover { color: inherit; opacity: 0.85; }

/* ---------- content blocks ---------- */
.b-content-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-xs) var(--space-m); }
.b-content-header h1 .b-counter { margin-inline-start: var(--space-xs); color: var(--color-text-counter); font-weight: var(--font-weight-normal); }
.b-content-header__description { flex-basis: 100%; color: var(--color-text-body-secondary); }
.b-container {
    background: var(--color-background-container-content);
    border: 1px solid var(--color-border-divider-default);
    border-radius: var(--border-radius-container);
}
.b-container__header { padding-block: var(--space-container-header-top) var(--space-container-header-bottom); padding-inline: var(--space-container-horizontal); }
.b-container__header h2 { font-size: var(--font-size-heading-l); line-height: var(--line-height-heading-l); }
.b-container__header .b-counter { margin-inline-start: var(--space-xs); color: var(--color-text-counter); font-weight: var(--font-weight-normal); }
.b-container__content { padding: var(--space-container-horizontal); }
.b-container__header + .b-container__content { padding-block-start: var(--space-container-content-top); }
.b-container__footer { padding-block: var(--space-container-header-top); padding-inline: var(--space-container-horizontal); border-block-start: 1px solid var(--color-border-divider-default); }
.b-stack { display: grid; gap: var(--space-l); }
.b-key-value { display: grid; gap: var(--space-xxs); align-content: start; }
.b-key-value dt { font-weight: var(--font-weight-heading); color: var(--color-text-label); }
.b-key-value dd { margin: 0; }
.b-text-grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.b-text-grid > * + * { border-inline-start: 1px solid var(--color-border-divider-default); padding-inline-start: var(--space-l); }
.b-empty { text-align: center; color: var(--color-text-empty); padding-block: var(--space-l); }
.b-empty strong { display: block; color: var(--color-text-body-default); }
.b-hint { color: var(--color-text-form-secondary); }

/* status indicator */
.b-status { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.b-status--error { color: var(--color-text-status-error); }
.b-status--success { color: var(--color-text-status-success); }
.b-status--warning { color: var(--color-text-status-warning); }
.b-status--info { color: var(--color-text-status-info); }
.b-status--pending, .b-status--stopped { color: var(--color-text-status-inactive); }

/* spinner */
.b-spinner { display: inline-block; inline-size: var(--size-icon-normal); block-size: var(--size-icon-normal); border: 2px solid transparent; border-block-start-color: currentColor; border-inline-end-color: currentColor; border-radius: 50%; animation: b-rotate 0.7s linear infinite; vertical-align: middle; }
.b-spinner--big { inline-size: var(--size-icon-big); block-size: var(--size-icon-big); border-width: 3px; }
@keyframes b-rotate { to { transform: rotate(360deg); } }

/* not found / no access */
.b-message-page { display: grid; gap: var(--space-m); max-inline-size: 60ch; }
/* access (E21): a denied page is replaced by the alert; a denied account sees only the message page */
main:has(b-shell-access-alert[active]) > .view { display: none; }
body[data-access="denied"] b-shell-nav, body[data-access="denied"] .b-layout-toggle, body[data-access="denied"] b-shell-help, body[data-access="denied"] b-shell-breadcrumbs { display: none; }

/* ---------- responsive: drawers collapse below the container width Cloudscape uses ---------- */
@container (max-width: 1120px) {
    /* mobile toolbar: the two toggles share one row above the content (menu left, help right); an open drawer overlays the page */
    .b-layout { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav toolbar help" "main main main"; align-items: start; }
    .b-layout-toggle { position: static; margin: var(--space-xs) var(--space-s); }
    b-shell-nav[open], b-shell-help[open] { position: fixed; inset-block: var(--size-top-navigation) 0; z-index: 1000; inline-size: min(100vw, var(--size-nav-width)); }
    b-shell-nav[open] { inset-inline-start: 0; }
    b-shell-help[open] { inset-inline-end: 0; }
    .b-drawer { position: static; block-size: 100%; }
    main { padding-inline: var(--space-l); padding-block-start: var(--space-xs); }
}
@container (max-width: 688px) {
    .b-topnav { padding-inline: var(--space-l); }
    .b-drawer--nav, .b-drawer--help { inline-size: min(100vw, var(--size-nav-width)); }
}

/* ---------- inputs, select, form field ---------- */
.b-input {
    box-sizing: border-box; min-block-size: var(--size-vertical-input);
    padding-block: var(--space-xxs); padding-inline: var(--space-field-horizontal);
    border: var(--border-width-field) solid var(--color-border-input-default); border-radius: var(--border-radius-input);
    background: var(--color-background-input-default); color: var(--color-text-body-default);
    font: inherit;
}
.b-input::placeholder { color: var(--color-text-input-placeholder); font-style: italic; }
.b-input:focus-visible { outline: none; border-color: var(--color-border-input-focused); box-shadow: 0 0 0 1px var(--color-border-input-focused); }
.b-input:disabled { background: var(--color-border-divider-secondary); border-color: var(--color-border-divider-secondary); color: var(--color-text-disabled); }
.b-input:user-invalid { border-color: var(--color-border-status-error); }
select.b-input { padding-inline-end: calc(var(--space-field-horizontal) * 3); appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 5h8l-4 6z' fill='%23006ce0'/></svg>"); background-repeat: no-repeat; background-position: right var(--space-field-horizontal) center; background-size: 16px; }
.b-form-field { display: grid; gap: var(--space-xxs); }
.b-form-field__label { font-weight: var(--font-weight-heading); color: var(--color-text-label); }
.b-form-field__description, .b-form-field__constraint { color: var(--color-text-form-secondary); font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); }
.b-form-field__error { color: var(--color-text-status-error); font-size: var(--font-size-body-s); }
.b-form-field--invalid .b-input { border-color: var(--color-border-status-error); }
.b-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.b-fieldset legend { font-weight: var(--font-weight-heading); margin-block-end: var(--space-xs); padding: 0; }
.b-radio, .b-checkbox { display: flex; align-items: center; gap: var(--space-xs); padding-block: var(--space-xxs); border-block-end: 1px solid var(--color-border-divider-secondary); }
.b-radio:last-child, .b-checkbox:last-child { border-block-end: 0; }
input[type="checkbox"], input[type="radio"] { inline-size: var(--size-control); block-size: var(--size-control); margin: 0; accent-color: var(--color-background-button-primary-default); }

/* ---------- collection table ---------- */
b-collection-table { display: block; }
.b-table { display: grid; }
.b-table__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-m); padding-block-end: var(--space-xs); }
.b-table__header--sticky { position: sticky; inset-block-start: var(--size-top-navigation); z-index: 5; background: var(--color-background-layout-main); }
.b-table__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-m); padding-block: var(--space-xs); }
.b-table__tools-right { display: flex; align-items: center; margin-inline-start: auto; }
.b-table__preferences { border-inline-start: 1px solid var(--color-border-divider-default); border-radius: 0; margin-inline-start: var(--space-xs); padding-inline-start: var(--space-xs); }
.b-text-filter { display: flex; align-items: center; gap: var(--space-s); flex: 1 1 auto; max-inline-size: 648px; position: relative; }
.b-text-filter .b-input { inline-size: 100%; padding-inline-start: calc(var(--space-field-horizontal) * 2 + var(--size-icon-normal)); }
.b-text-filter__icon { position: absolute; inset-inline-start: var(--space-field-horizontal); color: var(--color-text-interactive-default); pointer-events: none; }
.b-text-filter__results { white-space: nowrap; color: var(--color-text-body-default); }
.b-table__wrapper { overflow-x: auto; border-block-start: 1px solid var(--color-border-divider-default); }
.b-table--container .b-table__wrapper { padding-inline: var(--space-table-horizontal); padding-block-end: var(--space-xxs); border-block-start: 0; }
.b-table__table { inline-size: 100%; border-collapse: separate; border-spacing: 0; }
.b-table__th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--color-background-table-header); color: var(--color-text-column-header); font-weight: var(--font-weight-heading); -webkit-font-smoothing: antialiased; text-align: start; padding-block: var(--space-xxs); padding-inline: var(--space-xs); border-block-end: 1px solid var(--color-border-divider-default); white-space: nowrap; }
.b-table__th:first-child, .b-table__td:first-child { padding-inline-start: var(--space-l); }
.b-table__sort { display: inline-flex; align-items: center; gap: var(--space-xxs); padding: var(--space-xxs) 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.b-table__sort-icon { color: var(--color-text-column-header); visibility: hidden; }
.b-table__th--sortable:hover .b-table__sort-icon, .b-table__th--active .b-table__sort-icon { visibility: visible; }
.b-table__td { padding: 0; border-block-end: 1px solid var(--color-border-divider-secondary); border-block-start: var(--border-item-width) solid transparent; border-inline: 0 solid transparent; vertical-align: middle; }
.b-table__cell { padding-block: calc(var(--space-xs) - 1px); padding-inline: calc(var(--space-l) - var(--border-item-width) - 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 40ch; }
.b-table__selection { inline-size: var(--size-table-selection-horizontal); padding-inline: var(--space-s) 0; text-align: center; border-block-end: 1px solid var(--color-border-divider-secondary); }
thead .b-table__selection { border-block-end-color: var(--color-border-divider-default); }
.b-table__row--selectable { cursor: pointer; }
.b-table__row--selectable:hover td { background: var(--color-background-item-hover); }
.b-table__row--selected td { background: var(--color-background-item-selected) !important; border-block-color: var(--color-border-item-selected); }
.b-table__row--selected td:first-child { box-shadow: inset var(--border-item-width) 0 0 var(--color-border-item-selected); }
.b-table__row--selected td:last-child { box-shadow: inset calc(-1 * var(--border-item-width)) 0 0 var(--color-border-item-selected); }
.b-table__state { padding-block: var(--space-l); text-align: center; color: var(--color-text-empty); }
.b-table__td .b-status, .b-table__td a { white-space: nowrap; }

/* pagination */
.b-pagination ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.b-pagination__button { min-inline-size: 20px; margin: var(--space-xxs); padding: 0 var(--space-xxs); border: 2px solid transparent; border-radius: var(--border-radius-control-focus-ring); background: transparent; color: var(--color-text-interactive-default); font: inherit; cursor: pointer; }
.b-pagination__button:hover { color: var(--color-text-interactive-hover); }
.b-pagination__button:disabled { color: var(--color-text-interactive-disabled); cursor: default; }
.b-pagination__button--current { font-weight: var(--font-weight-heading); color: var(--color-text-body-default); }
.b-pagination__arrow { display: inline-flex; align-items: center; }

/* ---------- dialog ---------- */
.b-dialog { padding: 0; border: 0; border-radius: var(--border-radius-container); background: var(--color-background-container-content); color: var(--color-text-body-default); box-shadow: var(--shadow-modal); inline-size: calc(100vw - var(--space-xl)); }
.b-dialog--small { max-inline-size: 320px; }
.b-dialog--medium { max-inline-size: 600px; }
.b-dialog--large { max-inline-size: 820px; }
.b-dialog::backdrop { background: var(--color-background-modal-overlay); }
.b-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-container-header-top) var(--space-container-header-bottom); padding-inline: var(--space-modal-horizontal); }
.b-dialog__header h2 { font-size: var(--font-size-heading-l); line-height: var(--line-height-heading-l); }
.b-dialog__content { padding-block: var(--space-xxs) var(--space-m); padding-inline: var(--space-modal-horizontal); }
.b-dialog__footer { justify-content: flex-end; padding-block: var(--space-container-header-top); padding-inline: var(--space-modal-horizontal); border-block-start: 1px solid var(--color-border-divider-default); }

/* ---------- tabs ---------- */
.b-tabs__list { display: flex; gap: 0; border-block-end: 1px solid var(--color-border-divider-default); }
.b-tabs__tab { position: relative; padding-block: var(--space-xs) calc(var(--space-xs) + 2px); padding-inline: var(--space-m); border: 0; background: none; color: var(--color-text-interactive-default); font: inherit; font-size: var(--font-size-heading-s); line-height: var(--line-height-heading-s); font-weight: var(--font-weight-heading); cursor: pointer; }
.b-tabs__tab:hover { color: var(--color-text-accent); }
.b-tabs__tab:disabled { color: var(--color-text-interactive-disabled); cursor: default; }
.b-tabs__tab--active { color: var(--color-text-accent); }
.b-tabs__tab--active::after { content: ""; position: absolute; inset-inline: var(--space-xs); inset-block-end: -1px; block-size: var(--border-active-width); border-radius: var(--border-radius-button); background: var(--color-border-tabs-underline); }
.b-tabs__panel { padding-block: var(--space-m); }

/* ---------- popover, badge, alert ---------- */
b-ui-popover { display: inline; }
.b-popover__trigger { border-block-end: 1px dashed currentColor; cursor: pointer; }
.b-popover { margin: 0; padding: var(--space-s) var(--space-m); border: var(--border-width-button) solid var(--color-border-dropdown-container); border-radius: var(--border-radius-popover); background: var(--color-background-container-content); color: var(--color-text-body-default); box-shadow: var(--shadow-dropdown); max-inline-size: 320px; inset: auto; position: fixed; }
.b-badge { display: inline-block; padding-inline: var(--space-xs); border-radius: var(--border-radius-badge); font-size: var(--font-size-body-s); line-height: 18px; color: var(--color-text-inverted); background: var(--color-text-column-header); }
.b-badge--blue { background: var(--color-background-notification-blue); }
.b-badge--green { background: var(--color-background-notification-green); }
.b-badge--red { background: var(--color-background-notification-red); }
.b-alert { display: flex; gap: var(--space-s); align-items: flex-start; padding-block: var(--space-alert-vertical); padding-inline: var(--space-alert-horizontal); border: var(--border-width-alert) solid; border-radius: var(--border-radius-alert); }
.b-alert--error { border-color: var(--color-border-status-error); background: var(--color-background-status-error); }
.b-alert--error .b-alert__icon { color: var(--color-text-status-error); }
.b-alert--success { border-color: var(--color-border-status-success); background: var(--color-background-status-success); }
.b-alert--success .b-alert__icon { color: var(--color-text-status-success); }
.b-alert--warning { border-color: var(--color-border-status-warning); background: var(--color-background-status-warning); }
.b-alert--warning .b-alert__icon { color: var(--color-text-status-warning); }
.b-alert--info { border-color: var(--color-border-status-info); background: var(--color-background-status-info); }
.b-alert--info .b-alert__icon { color: var(--color-text-status-info); }
.b-alert__body { flex: 1; }
.b-alert__header { font-weight: var(--font-weight-heading); }
.b-date-range { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-s); }
.b-date-range label { display: grid; gap: var(--space-xxs); }

/* ==================== business components (merged from the modules' css fragments) ==================== */
/* ---------- batch module ---------- */
b-batch, b-batch-create, b-batch-detail, b-batch-compare, b-batch-detail-header, b-batch-detail-measurements, b-batch-detail-bags { display: block; }
b-batch-detail-measurements { display: grid; gap: var(--space-l); }

/* create form */
.b-batch-create { display: grid; gap: var(--space-l); }
.b-batch-create .b-input { inline-size: 100%; max-inline-size: 480px; }
.b-batch-create__actions { justify-content: flex-end; }

/* detail page: measurement and bag tables in a container */
.b-batch-detail__table .b-table__header { padding-block: var(--space-container-header-top) var(--space-container-header-bottom); padding-inline: var(--space-container-horizontal); }
.b-batch-detail__table .b-table__tools { padding-inline: var(--space-container-horizontal); }
.b-batch-bags__toggle { inline-size: var(--size-table-selection-horizontal); padding-inline: var(--space-s) 0; text-align: center; }
.b-batch-bags__toggle .b-icon { transition: transform var(--motion-duration-rotate-180) var(--motion-easing-rotate-180); }
.b-batch-bags__toggle [aria-expanded="true"] .b-icon { transform: rotate(90deg); }
.b-batch-bags__child .b-table__td { background: var(--color-background-cell-shaded); }
.b-batch-bags__child .b-table__td:nth-child(2) .b-table__cell { padding-inline-start: var(--space-xl); }

/* compare page: transposed tables */
.b-batch-compare__table .b-table__wrapper { border-block-start: 0; padding: 0; }
.b-batch-compare__label { font-weight: var(--font-weight-normal); text-align: start; }
.b-batch-compare__meta { font-size: var(--font-size-body-s); line-height: var(--line-height-body-s); color: var(--color-text-status-info); }
.b-batch-compare__stats { white-space: pre-line; }
.b-batch-compare__value { text-align: end; }

@media (prefers-reduced-motion: reduce) {
    .b-batch-bags__toggle .b-icon { transition: none; }
}

/* batchanalysis: the product-spec cards (/prodspec), the Missing/OOS popover and the SDX12 range
   of the "Generate Document" dialog. Merged into style.css by the integrator. */
b-batchanalysis, b-batchanalysis-tasks, b-batchanalysis-generate { display: block; }
.b-batchanalysis-cards { display: grid; }
.b-batchanalysis-cards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-l); margin: 0; padding: 0; list-style: none; }
.b-batchanalysis-cards__state { padding-block: var(--space-l); text-align: center; color: var(--color-text-empty); }
.b-batchanalysis-card {
    display: grid; gap: var(--space-m);
    padding: var(--space-l);
    background: var(--color-background-container-content);
    border: 1px solid var(--color-border-divider-default);
    border-radius: var(--border-radius-container);
    box-shadow: 0 0 0 var(--border-item-width) transparent;
    cursor: pointer;
    transition: background-color var(--motion-duration-responsive), box-shadow var(--motion-duration-responsive);
}
.b-batchanalysis-card:hover { background: var(--color-background-item-hover); }
.b-batchanalysis-card--selected { background: var(--color-background-item-selected); border-color: var(--color-border-item-selected); box-shadow: 0 0 0 1px var(--color-border-item-selected); }
.b-batchanalysis-card--selected:hover { background: var(--color-background-item-selected); }
.b-batchanalysis-card__header { display: flex; align-items: center; gap: var(--space-s); }
.b-batchanalysis-card__header h2 { font-size: var(--font-size-heading-m); line-height: var(--line-height-heading-m); letter-spacing: var(--letter-spacing-heading-m); }
.b-batchanalysis-card__title { padding-inline: var(--space-xs); font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.b-batchanalysis-card__sections { gap: var(--space-s); }
.b-batchanalysis-card__sections dt { color: var(--color-text-column-header); }
.b-batchanalysis-dimensions { gap: var(--space-s); }
.b-batchanalysis-dimensions .b-key-value { gap: var(--space-xs); }
.b-batchanalysis-range { display: flex; align-items: center; gap: var(--space-xs); }
.b-batchanalysis-range .b-input { inline-size: 100%; min-inline-size: 0; }

/* ---------- measurement: the list and detail elements, POR tag badges side by side, the source file name with its download button ---------- */
b-measurement, b-measurement-detail { display: block; }
.b-measurement-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-xxs); }
.b-measurement-source { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.b-measurement-source .b-button--icon { min-block-size: 0; padding-block: 0; }
/* key/value columns keep their pairs at the top instead of spreading over the tallest column */
b-measurement-detail .b-key-value { align-content: start; }

/* ---------- shipment ---------- */
b-shipment, b-shipment-bags { display: block; }
.b-shipment-products { display: inline-flex; align-items: center; gap: var(--space-xxs); }
.b-shipment-bags__wrapper { border-block-start: 0; }

/* ---------- trends: the four chart pages (b-trends) ---------- */
b-trends { display: block; }
.b-trends-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-l); }
.b-trends-controls .b-input { min-inline-size: 240px; }
.b-trends-stats { border-block-start: 0; }
.b-trends-chart { inline-size: 100%; min-block-size: 450px; }

/* ---------- depositstats: the deposition chart of the dashboard (b-depositstats-chart) ---------- */
b-depositstats-chart { display: block; }
.b-depositstats-chart { inline-size: 100%; min-block-size: 400px; }

/* wsreport — /batch-analysis: the download buttons stacked vertically (SpaceBetween size s). */
.b-wsreport-files { display: flex; flex-direction: column; align-items: start; gap: var(--space-s); }