/*
 * BIXAero portal - Fluent 2 design.
 * Colour, type, radius, shadow and motion values are Microsoft's Fluent 2 web tokens (webLightTheme / webDarkTheme
 * from @fluentui/tokens); icons are Fluent System Icons rendered inline. Bootstrap is kept only for its grid and
 * spacing utilities - every visible control is restyled here. No inline styles anywhere (strict CSP).
 */
:root {
    color-scheme: light dark;

    /* Neutrals */
    --fg1: #242424; --fg2: #424242; --fg3: #616161; --fg4: #707070; --fg-disabled: #bdbdbd; --fg-on-brand: #ffffff;
    --bg1: #ffffff; --bg1-hover: #f5f5f5; --bg1-pressed: #e0e0e0; --bg1-selected: #ebebeb;
    --bg2: #fafafa; --bg3: #f5f5f5; --bg4: #f0f0f0; --bg-disabled: #f0f0f0;
    --subtle-hover: #f5f5f5; --subtle-pressed: #e0e0e0;
    --stroke1: #d1d1d1; --stroke1-hover: #c7c7c7; --stroke2: #e0e0e0; --stroke3: #f0f0f0;
    --stroke-accessible: #616161; --stroke-accessible-hover: #575757; --stroke-focus: #000000; --stroke-disabled: #e0e0e0;

    /* Brand (Fluent "communication blue") */
    --brand-bg: #0f6cbd; --brand-bg-hover: #115ea3; --brand-bg-pressed: #0c3b5e; --brand-bg2: #ebf3fc;
    --brand-fg1: #0f6cbd; --brand-fg2: #115ea3; --brand-link: #115ea3; --brand-link-hover: #0f548c;
    --brand-stroke1: #0f6cbd; --brand-stroke2: #b4d6fa;

    /* Status */
    --success-fg: #0e700e; --success-bg: #f1faf1; --success-border: #9fd89f;
    --warning-fg: #bc4b09; --warning-bg: #fff9f5; --warning-border: #fdcfb4;
    --danger-fg: #b10e1c; --danger-bg: #fdf3f4; --danger-border: #eeacb2;

    /* Shape, depth, motion */
    --radius-s: 2px; --radius-m: 4px; --radius-l: 6px; --radius-xl: 8px; --radius-circle: 10000px;
    --shadow2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
    --shadow4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
    --shadow8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
    --shadow16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
    --duration-fast: 150ms; --duration-normal: 200ms; --ease: cubic-bezier(.33,0,.67,1);

    /* Type */
    --font-base: "Segoe UI Variable Text", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

    /* Names used by older rules and by js/network.js (diagram export) */
    --am-muted: var(--fg3); --am-line: var(--stroke2); --am-amber: #eaa300; --am-bg: var(--bg2); --am-ink: var(--fg1);
    --diagram-text: var(--fg1); --diagram-surface: var(--bg1);

    /* Bootstrap variables, for the few Bootstrap pieces that remain */
    --bs-body-font-family: var(--font-base); --bs-body-font-size: 14px; --bs-body-line-height: 20px;
    --bs-body-color: var(--fg1); --bs-body-bg: var(--bg2); --bs-border-color: var(--stroke2);
    --bs-link-color: var(--brand-link); --bs-link-hover-color: var(--brand-link-hover);
    --bs-link-color-rgb: 17, 94, 163; --bs-link-hover-color-rgb: 15, 84, 140;
    --bs-secondary-color: var(--fg3); --bs-emphasis-color: var(--fg1); --bs-tertiary-bg: var(--bg3);
}

/* Fluent webDarkTheme: follows the operating system's setting. */
@media (prefers-color-scheme: dark) {
    :root {
        --fg1: #ffffff; --fg2: #d6d6d6; --fg3: #adadad; --fg4: #999999; --fg-disabled: #5c5c5c;
        --bg1: #292929; --bg1-hover: #3d3d3d; --bg1-pressed: #1f1f1f; --bg1-selected: #383838;
        --bg2: #1f1f1f; --bg3: #141414; --bg4: #0a0a0a; --bg-disabled: #141414;
        --subtle-hover: #383838; --subtle-pressed: #2e2e2e;
        --stroke1: #666666; --stroke1-hover: #757575; --stroke2: #525252; --stroke3: #3d3d3d;
        --stroke-accessible: #adadad; --stroke-accessible-hover: #bdbdbd; --stroke-focus: #ffffff; --stroke-disabled: #424242;
        --brand-bg: #115ea3; --brand-bg-hover: #0f6cbd; --brand-bg-pressed: #0c3b5e; --brand-bg2: #082338;
        --brand-fg1: #479ef5; --brand-fg2: #62abf5; --brand-link: #479ef5; --brand-link-hover: #62abf5;
        --brand-stroke1: #479ef5; --brand-stroke2: #0e4775;
        --success-fg: #54b054; --success-bg: #052505; --success-border: #107c10;
        --warning-fg: #faa06b; --warning-bg: #4a1e04; --warning-border: #f7630c;
        --danger-fg: #dc626d; --danger-bg: #3b0509; --danger-border: #c50f1f;
        --shadow2: 0 0 2px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.28);
        --shadow4: 0 0 2px rgba(0,0,0,.24), 0 2px 4px rgba(0,0,0,.28);
        --shadow8: 0 0 2px rgba(0,0,0,.24), 0 4px 8px rgba(0,0,0,.28);
        --shadow16: 0 0 2px rgba(0,0,0,.24), 0 8px 16px rgba(0,0,0,.28);
        --bs-link-color-rgb: 71, 158, 245; --bs-link-hover-color-rgb: 98, 171, 245;
    }
    .btn-close { filter: invert(1) grayscale(1) brightness(2); }
}

/* ---- Base ---- */
html, body { background: var(--bg2); color: var(--fg1); }
body { font-family: var(--font-base); font-size: 14px; line-height: 20px; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-link); text-decoration: none; }
a:hover { color: var(--brand-link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--stroke-focus); outline-offset: 2px; border-radius: var(--radius-m); }
code, .font-monospace, pre { font-family: var(--font-mono); }
code { color: var(--fg1); background: var(--bg3); border-radius: var(--radius-s); padding: 0 .25rem; font-size: 13px; }
hr { border-color: var(--stroke2); opacity: 1; }
.small, small { font-size: 12px; line-height: 16px; }
.muted, .text-muted { color: var(--fg3) !important; }
.text-danger { color: var(--danger-fg) !important; }
.text-warning-emphasis { color: var(--warning-fg) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Fluent type ramp: Title 2 (page), Subtitle 1 (section), Subtitle 2 (group), Body 1. */
h1 { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 12px; }
h3, .h6 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 8px; }
.lead { font-size: 16px; line-height: 22px; }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fg3); margin-bottom: 4px; }
.eyebrow a { color: var(--fg3); }
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: var(--radius-circle); background: var(--bg4); color: var(--fg2); font-size: 12px; line-height: 16px; font-weight: 600; vertical-align: 3px; }

.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--bg1); color: var(--fg1); padding: 6px 12px; border-radius: var(--radius-m); box-shadow: var(--shadow8); }
.skip-link:focus { top: 8px; }

.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }

/* ---- App shell: app bar + navigation drawer ---- */
.app-bar { height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--bg1); border-bottom: 1px solid var(--stroke2); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg1); font-weight: 600; font-size: 16px; line-height: 22px; }
.brand:hover { color: var(--fg1); text-decoration: none; }
/* Logo: suitcase in the brand colour with the plane cut out in the bar's surface colour. */
.brand-image { display: block; height: 40px; width: auto; }
@media (prefers-color-scheme: dark) {
    /* The product logo's navy lettering needs a light background. */
    .brand-image { background: #fff; border-radius: var(--radius-m, 4px); padding: 2px 6px; height: 40px; box-sizing: border-box; }
}
.brand-logo { width: 28px; height: 28px; flex: none; }
.brand-logo-handle { fill: none; stroke: var(--brand-fg1); stroke-width: 1.8; stroke-linecap: round; }
.brand-logo-case { fill: var(--brand-fg1); }
.brand-logo-plane { fill: var(--bg1); }
.app-bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-bar-end form { margin: 0; }
.persona { display: flex; align-items: center; gap: 8px; color: var(--fg1); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-circle); background: var(--brand-bg2); color: var(--brand-fg2); font-size: 12px; font-weight: 600; }
.app-body { flex: 1; display: flex; min-height: 0; }

.nav-drawer { width: 260px; flex: none; background: var(--bg4); padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: var(--radius-m); color: var(--fg2); font-size: 14px; }
.nav-item:hover { background: var(--subtle-hover); color: var(--fg1); text-decoration: none; }
.nav-item:active { background: var(--subtle-pressed); }
.nav-item .icon-filled { display: none; }
.nav-item.active { color: var(--fg1); font-weight: 600; background: var(--bg1-selected); }
.nav-item.active .icon-regular { display: none; }
.nav-item.active .icon-filled { display: block; color: var(--brand-fg1); }
/* Fluent selection indicator: a short brand-coloured bar on the leading edge. */
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; margin-top: -10px; border-radius: var(--radius-circle); background: var(--brand-stroke1); }
.nav-divider { height: 1px; background: var(--stroke2); margin: 8px 6px; }
/* Product logo at the top of the menu (on a light card in dark mode, so its navy lettering keeps its contrast). */
.nav-brand { display: block; padding: 8px 10px 14px; margin: 0 0 6px; border-bottom: 1px solid var(--stroke2); }
.nav-brand img { display: block; width: 100%; max-width: 220px; height: auto; }
.nav-brand:hover { text-decoration: none; }
@media (prefers-color-scheme: dark) {
    .nav-brand img { background: #fff; border-radius: var(--radius-m, 4px); padding: 6px 8px; box-sizing: border-box; }
}
/* With the menu beside the page, the top bar does not repeat the logo. */
@media (min-width: 901px) {
    .brand-when-narrow { display: none; }
}

/* Company logo at the bottom of the menu (on a light card in dark mode, so its colours keep their contrast). */
.nav-logo { padding: 12px 10px 6px; border-top: 1px solid var(--stroke2); }
.nav-logo img { display: block; width: 100%; max-width: 160px; height: auto; }
@media (prefers-color-scheme: dark) {
    .nav-logo img { background: #fff; border-radius: var(--radius-m, 4px); padding: 6px 8px; box-sizing: border-box; }
}
.nav-foot { margin: auto 10px 8px; color: var(--fg3); font-size: 12px; line-height: 16px; }

.content { flex: 1; min-width: 0; width: 100%; max-width: 1320px; padding: 28px 32px 48px; }

@media (max-width: 900px) {
    .app-body { flex-direction: column; }
    .nav-drawer { position: static; width: auto; height: auto; flex-direction: row; overflow-x: auto; padding: 4px 8px; gap: 4px; border-bottom: 1px solid var(--stroke2); }
    .nav-item { flex: none; height: 36px; }
    .nav-item.active::before { left: 50%; top: auto; bottom: 0; width: 20px; height: 3px; margin: 0 0 0 -10px; }
    .nav-divider, .nav-foot, .nav-logo, .nav-brand { display: none; }
    .content { padding: 20px 16px 40px; }
    .persona-name, .btn-subtle span { display: none; }
}

/* ---- Page structure ---- */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header p.muted { max-width: 46rem; margin: 4px 0 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Fluent card */
.panel { background: var(--bg1); border-radius: var(--radius-xl); box-shadow: var(--shadow4); padding: 20px 24px; margin-bottom: 20px; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.form-panel { max-width: 900px; }
.form-panel fieldset legend { font-size: 16px; line-height: 22px; font-weight: 600; margin-bottom: 8px; }
.phone-cc { max-width: 5.5rem; }

/* Signed-out home */
.hero { background: var(--bg1); border-radius: var(--radius-xl); box-shadow: var(--shadow8); padding: 48px; max-width: 760px; margin-top: 24px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid var(--brand-bg2); pointer-events: none; }
.hero h1 { font-size: 40px; line-height: 52px; position: relative; }
.hero .lead { color: var(--fg2); max-width: 36rem; margin: 12px 0 28px; position: relative; }

/* ---- Buttons (Fluent: primary, secondary, subtle, transparent) ---- */
.btn { --bs-btn-padding-y: 5px; --bs-btn-padding-x: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 12px; font-family: var(--font-base); font-size: 14px; line-height: 20px; font-weight: 600; border-radius: var(--radius-m); border: 1px solid var(--stroke1); background: var(--bg1); color: var(--fg1); box-shadow: none; transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); }
.btn:hover { background: var(--bg1-hover); border-color: var(--stroke1-hover); color: var(--fg1); text-decoration: none; }
.btn:active { background: var(--bg1-pressed); }
.btn:focus-visible { outline: 2px solid var(--stroke-focus); outline-offset: 1px; box-shadow: none; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn { background: var(--bg-disabled); border-color: var(--stroke-disabled); color: var(--fg-disabled); opacity: 1; }
.btn-primary, .btn-success { background: var(--brand-bg); border-color: transparent; color: var(--fg-on-brand); }
.btn-primary:hover, .btn-success:hover { background: var(--brand-bg-hover); border-color: transparent; color: var(--fg-on-brand); }
.btn-primary:active, .btn-success:active { background: var(--brand-bg-pressed); color: var(--fg-on-brand); }
.btn-success { background: var(--success-fg); }
.btn-danger { background: #c50f1f; border-color: transparent; color: #fff; }
.btn-danger:hover { background: #a80d1a; border-color: transparent; color: #fff; }
.btn-danger:active { background: #8a0a15; color: #fff; }
.btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-outline-light { background: var(--bg1); border-color: var(--stroke1); color: var(--fg1); }
.btn-outline-danger { background: var(--bg1); border-color: var(--stroke1); color: var(--danger-fg); }
.btn-outline-danger:hover { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.btn-subtle { background: transparent; border-color: transparent; color: var(--fg2); font-weight: 400; }
.btn-subtle:hover { background: var(--subtle-hover); border-color: transparent; color: var(--fg1); }
.btn-link { background: transparent; border-color: transparent; color: var(--brand-link); font-weight: 400; padding-left: 4px; padding-right: 4px; }
.btn-link:hover { background: transparent; border-color: transparent; color: var(--brand-link-hover); text-decoration: underline; }
.btn-sm, .btn-group-sm > .btn { min-height: 24px; padding: 1px 8px; font-size: 12px; line-height: 16px; border-radius: var(--radius-m); }
.btn-lg { min-height: 40px; padding: 8px 16px; font-size: 16px; line-height: 22px; }
.btn-group > .btn:not(:first-child) { margin-left: -1px; }
.btn-close { width: 16px; height: 16px; opacity: .7; }

/* ---- Inputs (Fluent outline appearance with the accessible bottom stroke) ---- */
.form-label { font-weight: 600; color: var(--fg1); margin-bottom: 4px; }
.form-text { color: var(--fg3); font-size: 12px; line-height: 16px; margin-top: 4px; }
.form-control, .form-select { min-height: 32px; padding: 5px 10px; font-size: 14px; line-height: 20px; color: var(--fg1); background-color: var(--bg1); border: 1px solid var(--stroke1); border-bottom-color: var(--stroke-accessible); border-radius: var(--radius-m); box-shadow: none; transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.form-control::placeholder { color: var(--fg4); }
.form-control:hover, .form-select:hover { border-color: var(--stroke1-hover); border-bottom-color: var(--stroke-accessible-hover); }
.form-control:focus, .form-select:focus { color: var(--fg1); background-color: var(--bg1); border-color: var(--stroke1); border-bottom-color: var(--brand-stroke1); box-shadow: inset 0 -1px 0 var(--brand-stroke1); outline: none; }
.form-control:disabled, .form-select:disabled, fieldset:disabled .form-control { background: var(--bg-disabled); border-color: var(--stroke-disabled); color: var(--fg-disabled); }
.form-control-sm { min-height: 24px; padding: 2px 8px; font-size: 12px; line-height: 16px; }
textarea.form-control { min-height: 64px; }
.input-group > .form-control, .input-group > .form-select { border-radius: var(--radius-m); }
.input-group { gap: 4px; flex-wrap: nowrap; }
.input-group > :not(:first-child):not(.dropdown-menu) { margin-left: 0 !important; border-top-left-radius: var(--radius-m) !important; border-bottom-left-radius: var(--radius-m) !important; }
.input-group > :not(:last-child) { border-top-right-radius: var(--radius-m) !important; border-bottom-right-radius: var(--radius-m) !important; }
.form-select { background-position: right 8px center; padding-right: 32px; }
@media (prefers-color-scheme: dark) {
    .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adadad' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
}

/* Checkbox, radio and switch */
.form-check { padding-left: 26px; min-height: 20px; margin-bottom: 4px; }
.form-check .form-check-input { margin-left: -26px; }
.form-check-input { width: 16px; height: 16px; margin-top: 2px; background-color: var(--bg1); border: 1px solid var(--stroke-accessible); box-shadow: none; }
.form-check-input[type=checkbox] { border-radius: var(--radius-s); }
.form-check-input:hover { border-color: var(--stroke-accessible-hover); }
.form-check-input:checked { background-color: var(--brand-bg); border-color: var(--brand-bg); }
.form-check-input:focus { box-shadow: none; border-color: var(--stroke-accessible); }
.form-check-input:focus-visible { outline: 2px solid var(--stroke-focus); outline-offset: 2px; }
.form-check-input:disabled { opacity: 1; background-color: var(--bg-disabled); border-color: var(--stroke-disabled); }
.form-check-input:disabled ~ .form-check-label { opacity: 1; color: var(--fg-disabled); }
.form-switch { padding-left: 50px; }
.form-switch .form-check-input { width: 40px; height: 20px; margin-left: -50px; margin-top: 0; border-radius: var(--radius-circle); background-color: var(--bg1); border-color: var(--stroke-accessible);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.6' fill='%23616161'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.6' fill='%23616161'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--brand-bg); border-color: var(--brand-bg);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.6' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-label { line-height: 20px; }

/* Validation */
.validation-message { color: var(--danger-fg); font-size: 12px; line-height: 16px; margin-top: 4px; }
.invalid, .form-control.invalid { border-color: var(--danger-border); border-bottom-color: var(--danger-fg); }

/* ---- Message bars (Bootstrap .alert) ---- */
.alert { display: block; padding: 8px 12px 8px 40px; position: relative; border-radius: var(--radius-m); border: 1px solid var(--stroke2); background: var(--bg1); color: var(--fg1); font-size: 14px; line-height: 20px; margin-bottom: 16px; }
.alert::before { content: ""; position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-fg1); }
.alert-info { background: var(--bg3); border-color: var(--stroke2); }
.alert-info::before { background: var(--brand-fg1); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); }
.alert-success::before { background: var(--success-fg); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); }
.alert-warning::before { background: var(--warning-fg); }
.alert-danger { background: var(--danger-bg); border-color: var(--danger-border); }
.alert-danger::before { background: var(--danger-fg); }

/* ---- Tag for organisation codes ---- */
.iata { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; background: var(--brand-bg2); color: var(--brand-fg2); border: 1px solid var(--brand-stroke2); border-radius: var(--radius-m); vertical-align: 1px; }
h1 .iata, h2 .iata { height: 24px; font-size: 14px; vertical-align: 3px; }

/* ---- Badges (Fluent tint appearance) ---- */
.status { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-size: 12px; line-height: 16px; font-weight: 600; border-radius: var(--radius-m); border: 1px solid var(--stroke2); background: var(--bg3); color: var(--fg2); white-space: nowrap; }
.status-active, .status-approved, .status-running, .status-completed, .status-connected, .status-ready { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.status-pending, .status-provisioning, .status-notstarted, .status-waiting, .status-connecting { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.status-denied, .status-failed, .status-suspended, .status-failing { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); }
.status-stopped, .status-revoked, .status-disabled, .status-cancelled { background: var(--bg3); border-color: var(--stroke2); color: var(--fg3); }

/* ---- Data grid ---- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--fg1); --bs-table-border-color: var(--stroke2); --bs-table-hover-bg: var(--bg1-hover); color: var(--fg1); }
.data-table { margin-bottom: 0; }
.data-table th { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fg1); padding: 10px 12px; border-bottom: 1px solid var(--stroke1); white-space: nowrap; background: transparent; }
.data-table td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--stroke2); background: transparent; }
.data-table tbody tr { transition: background var(--duration-fast) var(--ease); }
.data-table tbody tr:hover > td, .data-table tbody tr:hover > th { background: var(--bg1-hover); }
.truncate { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { color: var(--fg3); padding: 8px 0 0; margin: 0; }

.filter { display: flex; gap: 8px; max-width: 28rem; margin-bottom: 16px; }

/* Definition lists */
.details { display: grid; grid-template-columns: 11rem 1fr; gap: 10px 20px; margin: 0; }
.details dt { color: var(--fg3); font-weight: 400; }
.details dd { margin: 0; }
.prewrap { white-space: pre-wrap; }

/* Decision on a data request */
.decision { border-left: 3px solid var(--brand-stroke1); }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; }
.decision-grid form { margin: 0; }
.confirm-step { margin-top: 12px; padding: 12px 16px; border: 1px solid var(--warning-border); border-left: 4px solid var(--warning-fg); border-radius: var(--radius-m); background: var(--warning-bg); }
.confirm-step.confirm-danger { border-color: var(--danger-border); border-left-color: var(--danger-fg); background: var(--danger-bg); }
.confirm-title { font-weight: 600; margin: 0 0 4px; }
.confirm-step p { margin-bottom: 8px; }
.confirm-step ul { margin: 0 0 8px; padding-left: 20px; }
.confirm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.status-withdrawn { background: var(--bg3); border-color: var(--stroke2); color: var(--fg3); }
.status-removed { background: var(--bg3); border-color: var(--stroke2); color: var(--fg3); text-decoration: line-through; }
.row-muted td { color: var(--fg3); }
.status-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 12px; }
.status-actions form { margin: 0; }

details > summary { cursor: pointer; font-weight: 600; color: var(--fg1); }
details > summary:hover { color: var(--brand-fg1); }

@media (max-width: 768px) {
    .decision-grid { grid-template-columns: 1fr; }
    .details { grid-template-columns: 1fr; }
    .hero { padding: 28px 20px; }
    .hero h1 { font-size: 28px; line-height: 36px; }
    .panel { padding: 16px; }
}

/* ---- Messages page ---- */
.message { border-top: 1px solid var(--stroke2); padding: 14px 0; }
.message:first-of-type { border-top: none; padding-top: 0; }
.message-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.message-meta .muted { font-size: 12px; }
.message-payload { background: var(--bg3); border: 1px solid var(--stroke2); border-radius: var(--radius-m); padding: 10px 12px; margin: 0; max-height: 16rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 13px; color: var(--fg1); }
.format-tag { display: inline-flex; align-items: center; height: 20px; font-size: 12px; font-weight: 600; border-radius: var(--radius-m); padding: 0 6px; background: var(--bg3); border: 1px solid var(--stroke2); color: var(--fg2); }
.message-summary { font-size: 14px; margin-bottom: 6px; }
.type-list code { margin-right: 6px; }

/* ---- Data pipe ---- */
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--stroke2); }
.choice:first-child { border-top: none; padding-top: 0; }
.choice input { margin-top: 3px; accent-color: var(--brand-bg); }
.choice label { cursor: pointer; }
.secret-box { margin: 8px 0; padding: 8px 12px; background: var(--bg1); border: 1px dashed var(--warning-fg); border-radius: var(--radius-m); font-size: 16px; word-break: break-all; }

/* Connector form: only the fields of the chosen messaging system are shown (pure CSS, no script). */
.connector-form .only-ibmmq, .connector-form .only-kafka, .connector-form .only-rabbitmq, .connector-form .only-amqp10 { display: none; }
.connector-form:has(#protocol option[value="IbmMq"]:checked) .only-ibmmq,
.connector-form:has(#protocol option[value="Kafka"]:checked) .only-kafka,
.connector-form:has(#protocol option[value="RabbitMq"]:checked) .only-rabbitmq,
.connector-form:has(#protocol option[value="Amqp10"]:checked) .only-amqp10 { display: block; }
.connector-form:has(#protocol option[value="IbmMq"]:checked) .not-ibmmq { display: none; }
.connector-form .only-webhook { display: none; }
.connector-form:has(#protocol option[value="Webhook"]:checked) .only-webhook { display: block; }
.connector-form:has(#protocol option[value="Webhook"]:checked) .not-webhook { display: none; }
.signature-example { white-space: pre-wrap; word-break: break-all; }

/* Network diagram */
.net-panel { overflow: visible; }
.net-wrap { position: relative; }
.net-diagram { max-width: 100%; height: auto; display: block; margin: 0 auto; background: var(--bg1); border-radius: var(--radius-l); }
.net-column { font-size: 12px; font-weight: 600; fill: var(--fg3); }
/* Line thickness comes from each path's stroke-width attribute (message traffic), so CSS must not set it. */
.net-link { fill: none; stroke-linecap: round; transition: opacity .15s, stroke .15s; }
.net-link.active { stroke: var(--brand-fg1); }
.net-link.scheduled { stroke: var(--fg4); stroke-dasharray: 6 5; }
.net-link.active.hl { stroke: var(--brand-bg-pressed); }
.net-link.scheduled.hl { stroke: var(--fg2); }
.net-link.dim { opacity: .15; }
.arrow.active { fill: var(--brand-fg1); }
.arrow.scheduled { fill: var(--fg4); }
.net-node { cursor: pointer; outline: none; }
.net-node > circle { stroke: var(--diagram-surface); stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,.14)) drop-shadow(0 0 2px rgba(0,0,0,.12)); transition: r .15s; }
.net-node.type-airline > circle { fill: #0f548c; }
.net-node.type-airport > circle { fill: #038387; }
.net-node.type-groundhandler > circle { fill: #a74109; }
.net-node.type-vendor > circle { fill: #5c2e91; }
.net-node.viewer > circle { stroke: var(--am-amber); stroke-width: 5; }
.net-node:hover > circle, .net-node:focus-visible > circle, .net-node.selected > circle { stroke: var(--am-amber); stroke-width: 5; }
.net-code { fill: #fff; font-weight: 700; font-size: 12px; font-family: var(--font-mono); pointer-events: none; }
.net-name { fill: var(--diagram-text); font-size: 12px; pointer-events: none; }
.net-code.long { font-size: 8.5px; letter-spacing: -.02em; }
.net-pipe { fill: var(--diagram-surface); stroke: var(--diagram-text); stroke-width: 1.5; }
.net-pipe-label { font-size: 10px; font-weight: 700; fill: var(--diagram-text); pointer-events: none; }

.net-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: .8rem; color: var(--am-muted); margin-bottom: .75rem; }
.net-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.net-legend .dot { width: .8rem; height: .8rem; border-radius: 50%; display: inline-block; }
.net-legend .dot.type-airline { background: #0f548c; }
.net-legend .dot.type-airport { background: #038387; }
.net-legend .dot.type-groundhandler { background: #a74109; }
.net-legend .dot.type-vendor { background: #5c2e91; }
.net-legend .line { width: 1.6rem; display: inline-block; border-top: 2px solid var(--brand-fg1); }
.net-legend .line.scheduled { border-top: 2px dashed var(--fg4); }
.net-legend .line.thick { border-top-width: 6px; border-radius: 3px; }
.net-legend .pipe { font-style: normal; font-weight: 700; font-size: .7rem; border: 1.5px solid var(--fg1); border-radius: 50%; width: 1.1rem; height: 1.1rem; display: inline-grid; place-items: center; color: var(--fg1); }

/* Without script the cards are listed below the diagram; with it they pop up beside the selected node. */
.net-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.net-card { background: var(--bg1); border: 1px solid var(--stroke3); border-radius: var(--radius-xl); padding: 14px 16px; font-size: 13px; line-height: 18px; box-shadow: var(--shadow16); color: var(--fg1); }
.net-wrap.js .net-cards { display: block; margin: 0; }
.net-wrap.js .net-card { display: none; position: absolute; width: 19rem; z-index: 5; }
.net-wrap.js .net-card.open { display: block; }
.net-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; margin-bottom: .5rem; }
.net-card-details { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem .75rem; margin: 0 0 .5rem; }
.net-card-details dt { color: var(--am-muted); font-weight: 500; }
.net-card-details dd { margin: 0; word-break: break-word; }
.net-contact { border-top: 1px solid var(--am-line); padding-top: .45rem; margin-top: .45rem; }
.net-contact .eyebrow { font-size: .65rem; }
.filter.net-filter { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.net-filter > div { min-width: 12rem; }
.net-filter .form-label { margin-bottom: .2rem; color: var(--am-muted); }
.net-filter-actions { min-width: 0 !important; display: flex; gap: .25rem; }
.net-summary { margin: 0 0 .5rem; }
.net-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.net-toolbar[hidden] { display: none; }
.net-search { display: flex; align-items: center; gap: .5rem; }
.net-search input { width: 16rem; max-width: 60vw; }
.net-zoom .btn { min-width: 2.25rem; }
.net-hint { margin-left: auto; }
.net-wrap.js .net-diagram { cursor: grab; touch-action: pinch-zoom; user-select: none; }
.net-wrap.panning .net-diagram { cursor: grabbing; }
.net-wrap.zoomed .net-diagram { outline: 1px dashed var(--am-line); }
.net-node.context { opacity: .45; }
.net-node.context:hover, .net-node.context:focus-visible, .net-node.context.selected { opacity: 1; }
.net-wrap.searching .net-node.unmatched { opacity: .2; }
.net-wrap.searching .net-link { opacity: .25; }
.net-wrap.searching .net-link.hl { opacity: 1; }
.net-node.match > circle { stroke: var(--am-amber); stroke-width: 6; }
.net-link-hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: pointer; }
.net-wrap.js .net-flow-card { width: 34rem; max-width: calc(100vw - 2rem); }
.net-flow-card .net-card-close { position: absolute; top: .6rem; right: .6rem; font-size: .7rem; }
.net-flow-card[hidden] { display: none !important; }
.flow-history-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 1.5rem .6rem 0; }
.flow-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .5rem; }
.flow-stats div { background: var(--bg3); border-radius: var(--radius-m); padding: .35rem .55rem; }
.flow-stats dt { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--fg3); }
.flow-stats dd { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-stats .waiting dd { color: var(--warning-fg); }
.flow-chart { width: 100%; height: auto; display: block; }
.flow-bar { fill: var(--brand-fg1); }
.flow-bar.current { fill: var(--brand-stroke2); }
.flow-hit { fill: transparent; }
.flow-hit:hover { fill: var(--brand-bg2); }
.flow-grid { stroke: var(--stroke3); stroke-width: 1; }
.flow-axis { stroke: var(--stroke-accessible); stroke-width: 1; }
.flow-tick, .flow-day text { font-size: 10px; fill: var(--am-muted); font-variant-numeric: tabular-nums; }
.flow-day line { stroke: var(--stroke1); stroke-width: 1; stroke-dasharray: 2 2; }
.flow-foot { margin: .35rem 0 .25rem; }
.flow-foot span { margin-right: .4rem; }
.flow-history:not(.compact) .flow-stats dd { font-size: 1.4rem; }
.net-flow-arrow { fill: #fff; pointer-events: none; transition: opacity .15s; }
.net-flow-arrow.dim { opacity: .15; }
.net-wrap.searching .net-flow-arrow { opacity: .25; }
.net-wrap.searching .net-flow-arrow.hl { opacity: 1; }
.net-traffic { display: none; }
.net-traffic-labels.all .net-traffic, .net-traffic.hl { display: inline; }
.net-traffic text { font-size: 11px; font-weight: 700; fill: var(--brand-fg2); paint-order: stroke; stroke: var(--diagram-surface); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.net-traffic.waiting text { fill: var(--warning-fg); }
.net-traffic.dim { opacity: .2; }
.net-wrap.searching .net-traffic { opacity: .25; }
.net-wrap.searching .net-traffic.hl { opacity: 1; }
.net-export { margin-left: .25rem; }
.net-exporting * { transition: none !important; }
.net-flows > summary { cursor: pointer; margin-bottom: .5rem; }
@media (max-width: 720px) { .net-hint { display: none; } .net-filter > div { min-width: 100%; } }

/* Alerts page: each rule reads as a sentence with a number box in it. */
.alert-rule { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.alert-rule .form-control { width: 9rem; }
fieldset:disabled .alert-rule .form-control { background: var(--bg-disabled); }
.alert-kinds .form-check { margin-bottom: .45rem; }
.alert-now th { font-weight: 500; }
.alert-now td, .alert-now th { vertical-align: middle; }

/* ---- Live messages ---- */
.filter.tx-filter { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 20px; }
.tx-filter > div { min-width: 10rem; }
.tx-filter > div:first-child { min-width: 15rem; }
.tx-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin-bottom: 12px; }
.tx-live { align-items: center; }
.tx-live[hidden] { display: none; }
.tx-live-state { display: inline-flex; align-items: center; gap: 8px; color: var(--success-fg); font-weight: 600; }
.tx-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--success-fg); box-shadow: 0 0 0 0 var(--success-border); animation: tx-pulse 2s var(--ease) infinite; }
.tx-paused .tx-live-state { color: var(--fg3); }
.tx-paused .tx-pulse { background: var(--fg4); animation: none; }
.tx-offline .tx-live-state { color: var(--warning-fg); }
.tx-offline .tx-pulse { background: var(--warning-fg); animation: none; }
@keyframes tx-pulse { 0% { box-shadow: 0 0 0 0 var(--success-border); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.table-scroll { overflow-x: auto; }
.tx-table .tx-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.tx-table .tx-id code { display: inline-block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.tx-sort { color: var(--fg1); display: inline-flex; align-items: center; gap: 4px; }
.tx-sort:hover { color: var(--brand-fg1); text-decoration: none; }
.tx-sort.current { color: var(--brand-fg1); }
.tx-sort-arrow { font-size: 12px; }
/* A message that arrived since the last refresh: a brief brand-tinted highlight that fades. */
.tx-table tr.tx-new > td { animation: tx-arrive 3s var(--ease); }
@keyframes tx-arrive { 0%, 30% { background: var(--brand-bg2); } 100% { background: transparent; } }

/* ---- Bag and flight data (each organisation has a separate service and broker per domain) ---- */
:root { --flight-fg: #03787c; --flight-bg2: #e6f5f6; --flight-stroke2: #9fd6d8; }
@media (prefers-color-scheme: dark) {
    :root { --flight-fg: #4bc5c9; --flight-bg2: #052b2d; --flight-stroke2: #0f5c5f; }
}
.domain-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--stroke2); }
.domain-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; color: var(--fg2); font-weight: 400; border-radius: var(--radius-m) var(--radius-m) 0 0; }
.domain-tab:hover { color: var(--fg1); background: var(--subtle-hover); text-decoration: none; }
.domain-tab .icon { width: 20px; height: 20px; fill: currentColor; }
.domain-tab.is-selected { color: var(--fg1); font-weight: 600; }
.domain-tab.is-selected::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: var(--radius-circle); background: var(--brand-stroke1); }
.domain-tab-flight.is-selected::after { background: var(--flight-fg); }
.domain-tab-bag.is-selected .icon { color: var(--brand-fg1); }
.domain-tab-flight.is-selected .icon { color: var(--flight-fg); }
.domain-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px 0 4px; font-size: 12px; font-weight: 600; border-radius: var(--radius-m); border: 1px solid var(--brand-stroke2); background: var(--brand-bg2); color: var(--brand-fg2); white-space: nowrap; vertical-align: 1px; }
.domain-badge .icon { width: 14px; height: 14px; fill: currentColor; }
.domain-badge-flight { border-color: var(--flight-stroke2); background: var(--flight-bg2); color: var(--flight-fg); }
.domain-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.domain-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 8px; margin-top: 4px; }
.domain-choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--stroke1); border-radius: var(--radius-l); background: var(--bg1); cursor: pointer; transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
.domain-choice:hover { border-color: var(--stroke1-hover); background: var(--bg1-hover); }
.domain-choice:has(input:checked) { border-color: var(--brand-stroke1); background: var(--brand-bg2); }
.domain-choice-flight:has(input:checked) { border-color: var(--flight-fg); background: var(--flight-bg2); }
.domain-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.domain-choice input { margin-top: 3px; accent-color: var(--brand-bg); }
.domain-choice-flight input { accent-color: var(--flight-fg); }
.domain-choice .icon { width: 20px; height: 20px; flex: none; fill: var(--brand-fg1); margin-top: 1px; }
.domain-choice-flight .icon { fill: var(--flight-fg); }
.domain-choice strong { display: block; }
.domain-choice small { color: var(--fg3); }
.service-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.service-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.service-list code { font-size: 12px; }

/* Request form: only the chosen data's message standards are shown (pure CSS, no script). */
.request-form .standards-bag, .request-form .standards-flight { display: none; clear: both; } /* clear: Bootstrap floats legends */
.request-form:has(input[name="Model.Domain"][value="Bag"]:checked) .standards-bag,
.request-form:has(input[name="Model.Domain"][value="Flight"]:checked) .standards-flight { display: grid; }
.request-form:has(input[name="Model.Domain"]:checked) .standards-hint { display: none; }
.request-form .convert-version { display: none; max-width: 32rem; }
.request-form:has(input[name="Model.Domain"][value="Bag"]:checked):has(#convert:checked) .convert-version { display: block; }
.domain-choice input[type="checkbox"] { margin-top: 3px; accent-color: var(--brand-bg); }
.domain-choice-flight input[type="checkbox"] { accent-color: var(--flight-fg); }

/* IATA 1755 versions (administration) */
.version-form { max-width: 36rem; margin-top: 24px; }
.version-form h2 { font-size: 16px; margin-bottom: 12px; }
.version-form .form-control[readonly] { background: var(--bg3); color: var(--fg2); }
.versions-table td .format-tag { vertical-align: 1px; }

/* Bag data scope: airlines and airports, one tab each (pure CSS). */
.request-form .bag-only { display: none; }
.request-form:has(input[name="Model.Domain"][value="Bag"]:checked) .bag-only { display: block; }
.scope-editor legend { clear: both; }
.scope-limits { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 8px; }
.scope-limits .form-check-inline { margin: 0; }
.scope-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--stroke2); border-radius: var(--radius-l, 8px); background: var(--bg1); }
.scope-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.scope-tab { padding: 8px 16px; cursor: pointer; font-weight: 600; color: var(--fg2); border-bottom: 2px solid transparent; }
.scope-tab-input:checked + .scope-tab { color: var(--fg1); border-bottom-color: var(--brand-fg1, #0f6cbd); }
.scope-tab-input:focus-visible + .scope-tab { outline: 2px solid var(--brand-fg1, #0f6cbd); outline-offset: -2px; }
.scope-panel { display: none; flex-basis: 100%; padding: 12px 16px; border-top: 1px solid var(--stroke2); }
#scope-tab-airlines:checked ~ .scope-panel-airlines, #scope-tab-airports:checked ~ .scope-panel-airports { display: block; }
.scope-panel .scope-on { display: none; }
.scope-editor:has(#limit-airlines:checked) .scope-panel-airlines .scope-on,
.scope-editor:has(#limit-airports:checked) .scope-panel-airports .scope-on { display: block; }
.scope-editor:has(#limit-airlines:checked) .scope-panel-airlines .scope-off,
.scope-editor:has(#limit-airports:checked) .scope-panel-airports .scope-off { display: none; }
.scope-editor:has(#limit-airlines:checked) .scope-tab-airlines::after,
.scope-editor:has(#limit-airports:checked) .scope-tab-airports::after { content: " · limited"; font-weight: 400; color: var(--fg3); }
.font-mono { font-family: var(--font-mono); }
.scope-codes { font-family: var(--font-mono); }


/* ---- IATA 1755 element filter table ------------------------------------------------------------------------------ */
.element-filter > summary { cursor: pointer; padding: 8px 0; }
.element-table-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--stroke2); border-radius: var(--radius-l, 8px); background: var(--bg1); }
.element-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.element-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg3); text-align: left; font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--stroke2); }
.element-table td { padding: 4px 10px; vertical-align: top; border-bottom: 1px solid var(--stroke3); }
.element-table .element-sent { width: 72px; }
.element-table .element-kinds { width: 120px; }
.element-table .element-group { border-top: 2px solid var(--stroke2); }
.element-table .element-parent td { background: var(--bg2); }
.element-table .element-parent .element-name code { font-weight: 600; }
.element-table .element-child .element-name { padding-left: 32px; }
.element-table .element-name label { cursor: pointer; margin: 0; }
.element-table .element-required { margin-left: 6px; font-size: 12px; color: var(--fg3); border: 1px solid var(--stroke1); border-radius: 4px; padding: 0 4px; }
.element-table .element-off td { color: var(--fg3); }
.element-table .element-off .element-name code { text-decoration: line-through; }
/* A first-level element left out takes everything in it: its second-level rows fade (no script needed). */
.element-group:has(.element-parent input[name]:not(:checked)) .element-child td { opacity: .45; }
.element-group:has(.element-parent input[name]:not(:checked)) .element-child .element-name code { text-decoration: line-through; }
.element-state { font-size: 12px; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.element-state.is-sent { color: var(--success-fg); background: var(--success-bg); border: 1px solid var(--success-border); }
.element-state.is-off { color: var(--danger-fg); background: var(--danger-bg); border: 1px solid var(--danger-border); }
.element-table-wrap { container-type: inline-size; }
@container (max-width: 640px) {
    .element-table .element-kinds { display: none; }
    .element-table .element-child .element-name { padding-left: 20px; }
}

/* ---- Message replay ---- */
.replay-running { border-left: 3px solid var(--brand-stroke1); }
.replay-running h2 .status { vertical-align: 3px; margin-left: 6px; }
.replay-form input[type="datetime-local"] { font-family: var(--font-mono); }
.replay-cancel { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.replay-table td { white-space: nowrap; }
.replay-table td:last-child { white-space: normal; min-width: 160px; }

/* ---- Organisation switch (a managing organisation's technical contact) ---- */
.org-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.org-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--stroke1, #d1d1d1); border-radius: 999px; color: inherit; text-decoration: none; font-size: 14px; }
.org-pill:hover { background: var(--brand-bg2); }
.org-pill.active { border-color: var(--brand-stroke2); background: var(--brand-bg2); font-weight: 600; }
.managed-for { color: var(--fg3, #616161); margin-top: 2px; }
.secret-box code { word-break: break-all; }
.webhook-secret code { word-break: break-all; }
.rejections td:nth-child(3) .muted { word-break: break-all; }

/* ---- Delivery status ---- */
.view-tabs { display: flex; gap: 4px; margin: -4px 0 16px; border-bottom: 1px solid var(--stroke2); }
.view-tab { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; color: var(--fg2); }
.view-tab:hover { color: var(--fg1); background: var(--subtle-hover); text-decoration: none; }
.view-tab.is-selected { color: var(--fg1); font-weight: 600; }
.view-tab.is-selected::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: var(--radius-circle); background: var(--brand-stroke1); }
.msg-id { font-family: var(--font-mono); font-size: 12px; color: var(--fg3); max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priority { display: inline-flex; align-items: center; height: 18px; margin-left: 4px; padding: 0 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; border-radius: var(--radius-s); border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); vertical-align: 1px; }
.recipient-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.recipient-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; border-radius: var(--radius-m); border: 1px solid var(--warning-border); background: var(--warning-bg); color: var(--warning-fg); }
.recipient-delivered, .recipient-handedover { border-color: var(--success-border); background: var(--success-bg); color: var(--success-fg); }
.recipient-setaside { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }
.delivery-detail h2 { margin-bottom: 12px; }
.pager { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* ---- API clients ---- */
.api-clients tr.is-inactive td { color: var(--fg3); }
.api-clients .btn + .btn { margin-left: 4px; }
.code-sample { margin: 0 0 12px; padding: 12px; background: var(--bg3); border: 1px solid var(--stroke2); border-radius: var(--radius-m); font-family: var(--font-mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; word-break: break-all; }

/* Service status and service reports */
.status-overall { border-left: 4px solid var(--success-border); }
.status-overall h2 { margin-bottom: 2px; }
.status-overall-degraded, .status-overall-maintenance { border-left-color: var(--warning-border); }
.status-overall-outage { border-left-color: var(--danger-border); }
.incident + .incident { border-top: 1px solid var(--stroke2); padding-top: 12px; }
.incident-updates { list-style: none; padding-left: 0; margin: 0; }
.incident-updates li { padding: 4px 0; }
.pre-line { white-space: pre-line; }
.report-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
.report-card { margin: 0; border-top: 3px solid var(--stroke2); }
.report-card.met { border-top-color: var(--success-border); }
.report-card.missed { border-top-color: var(--danger-border); }
.report-figure { font-size: 28px; font-weight: 600; line-height: 36px; }