@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/Poppins-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/Poppins-Black.ttf") format("truetype");
}

:root {
    --bg: #d7dce2;
    --chrome: #202a33;
    --chrome-2: #2f3943;
    --surface: #f6f8fa;
    --panel: #e9edf2;
    --panel-2: #dfe5ec;
    --field: #ffffff;
    --line: #9aa6b2;
    --line-strong: #6f7c8a;
    --ink: #111827;
    --muted: #52616f;
    --label-ink: #263342;
    --control-ink: #172334;
    --grid-head-ink: #172334;
    --chrome-ink: #dbe4ec;
    --chrome-muted: #aab5c0;
    --sort-badge-ink: #0f2536;
    --disabled-ink: #7a8490;
    --scroll-track: #dfe5ec;
    --scroll-thumb: #7f8b98;
    --scroll-thumb-hover: #5f6d7b;
    --accent: #0067b1;
    --accent-dark: #004a80;
    --accent-soft: #d8e8f6;
    --ok: #b8e6b2;
    --warn: #f2b44a;
    --stop: #ff725c;
    --dispatch: #c8f3f7;
    --header-height: 48px;
    --app-font: 13px;
    --title-font: clamp(28px, 4vw, 34px);
    --control-height: 28px;
    --filter-panel-height: 144px;
    --grid-font: 12px;
    --field-pad-y: 3px;
    --field-pad-x: 7px;
    --button-pad-y: 4px;
    --button-pad-x: 12px;
    --control-radius: 6px;
    --button-radius: 7px;
    --tab-pad-y: 8px;
    --tab-pad-x: 12px;
    --cell-pad-y: 5px;
    --cell-pad-x: 7px;
    --panel-pad: 10px;
    --compact-pad: 8px;
    --ui-gap: 8px;
    --window-title-pad-y: 10px;
    --window-title-pad-x: 14px;
    --title-control-height: 28px;
}

html[data-ui-tone="dark"] {
    --bg: #0b121a;
    --chrome: #111c27;
    --chrome-2: #1b2a38;
    --surface: #111923;
    --panel: #182433;
    --panel-2: #202d3b;
    --field: #0f1722;
    --line: #344657;
    --line-strong: #4e6578;
    --ink: #e7eef7;
    --muted: #a8b7c8;
    --label-ink: #e7eef7;
    --control-ink: #e7eef7;
    --grid-head-ink: #ffffff;
    --chrome-ink: #e7eef7;
    --chrome-muted: #91a4b7;
    --sort-badge-ink: #d7ecff;
    --disabled-ink: #8497aa;
    --scroll-track: #0f1722;
    --scroll-thumb: #4e6578;
    --scroll-thumb-hover: #78a0bd;
    --accent: #1f8fd1;
    --accent-dark: #0f6da6;
    --accent-soft: #183f5f;
    --ok: #2f6f58;
    --warn: #8f6725;
    --stop: #9b4639;
    --dispatch: #17495c;
}

html[data-ui-theme="floral"] {
    --bg: #eef2df;
    --chrome: #526b57;
    --chrome-2: #6f8162;
    --surface: #fffaf1;
    --panel: #f3ead8;
    --panel-2: #e8dfc5;
    --field: #fffdf7;
    --line: #b8b88e;
    --line-strong: #8b9871;
    --ink: #25342b;
    --muted: #66715f;
    --label-ink: #344235;
    --control-ink: #2e3d31;
    --grid-head-ink: #fefcf5;
    --chrome-ink: #fff8ef;
    --chrome-muted: #e9dbc8;
    --sort-badge-ink: #3c4e37;
    --disabled-ink: #8f9386;
    --scroll-track: #eadfc7;
    --scroll-thumb: #b98ea2;
    --scroll-thumb-hover: #8f6f8a;
    --accent: #b96f8a;
    --accent-dark: #83536f;
    --accent-soft: #f2dbe4;
    --ok: #bcd9a8;
    --warn: #f1cd7c;
    --stop: #e79384;
    --dispatch: #cbe8de;
}

html[data-ui-theme="space"] {
    --bg: #050914;
    --chrome: #0a1021;
    --chrome-2: #151d35;
    --surface: #0b1224;
    --panel: #101a2f;
    --panel-2: #17233d;
    --field: #070d1b;
    --line: #30415f;
    --line-strong: #586889;
    --ink: #edf3ff;
    --muted: #a6b5d8;
    --label-ink: #edf3ff;
    --control-ink: #edf3ff;
    --grid-head-ink: #ffffff;
    --chrome-ink: #f2f6ff;
    --chrome-muted: #99a8cc;
    --sort-badge-ink: #dcd6ff;
    --disabled-ink: #8291b6;
    --scroll-track: #070d1b;
    --scroll-thumb: #6b5fba;
    --scroll-thumb-hover: #9a8cff;
    --accent: #7f6df2;
    --accent-dark: #4b62d1;
    --accent-soft: #27244f;
    --ok: #1d6b65;
    --warn: #8e6b25;
    --stop: #8d3b62;
    --dispatch: #163c63;
}

html[data-ui-theme="space"] .app-header {
    border-bottom-color: #9a8cff;
    box-shadow: inset 0 -1px 0 rgba(199, 190, 255, 0.28);
}

html[data-ui-theme="space"] .window-title .kicker,
html[data-ui-theme="space"] .orders-title-order {
    color: #bcb5ff;
}

html[data-ui-theme="floral"] .app-header {
    border-bottom-color: #d69ab0;
}

html[data-ui-theme="floral"] .button {
    color: #fffaf6;
}

html[data-ui-scale="xs"] {
    --app-font: 11px;
    --title-font: 24px;
    --control-height: 22px;
    --filter-panel-height: 116px;
    --grid-font: 10px;
    --field-pad-y: 1px;
    --field-pad-x: 5px;
    --button-pad-y: 2px;
    --button-pad-x: 8px;
    --tab-pad-y: 5px;
    --tab-pad-x: 8px;
    --cell-pad-y: 3px;
    --cell-pad-x: 5px;
    --panel-pad: 6px;
    --compact-pad: 5px;
    --ui-gap: 5px;
    --window-title-pad-y: 6px;
    --window-title-pad-x: 10px;
    --title-control-height: 24px;
}

html[data-ui-scale="s"] {
    --app-font: 12px;
    --title-font: 26px;
    --control-height: 25px;
    --filter-panel-height: 128px;
    --grid-font: 11px;
    --field-pad-y: 2px;
    --field-pad-x: 6px;
    --button-pad-y: 3px;
    --button-pad-x: 10px;
    --tab-pad-y: 6px;
    --tab-pad-x: 10px;
    --cell-pad-y: 4px;
    --cell-pad-x: 6px;
    --panel-pad: 8px;
    --compact-pad: 6px;
    --ui-gap: 6px;
    --window-title-pad-y: 8px;
    --window-title-pad-x: 12px;
    --title-control-height: 26px;
}

html[data-ui-scale="l"] {
    --app-font: 15px;
    --title-font: 38px;
    --control-height: 34px;
    --filter-panel-height: 168px;
    --grid-font: 14px;
    --field-pad-y: 5px;
    --field-pad-x: 9px;
    --button-pad-y: 6px;
    --button-pad-x: 14px;
    --tab-pad-y: 10px;
    --tab-pad-x: 14px;
    --cell-pad-y: 7px;
    --cell-pad-x: 9px;
    --panel-pad: 12px;
    --compact-pad: 10px;
    --ui-gap: 10px;
    --window-title-pad-y: 12px;
    --window-title-pad-x: 16px;
    --title-control-height: 32px;
}

* {
    box-sizing: border-box;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-width: thin;
}

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

*::-webkit-scrollbar-track {
    background: var(--scroll-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border: 2px solid var(--scroll-track);
    border-radius: 0;
}

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

*::-webkit-scrollbar-corner {
    background: var(--scroll-track);
}

html {
    min-width: 360px;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
    font-size: var(--app-font);
}

main {
    min-height: calc(100vh - var(--header-height));
}

.app-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--header-height);
    height: auto;
    padding: 4px 12px;
    color: #ffffff;
    background: var(--chrome);
    border-bottom: 3px solid var(--accent);
    overflow: visible;
}

.brand,
.app-header a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 15px;
    white-space: nowrap;
}

    .brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        left: 64px;
        position: absolute;
    }

.brand-mark {
    width: 52px;
    height: 52px;
    position: absolute;
    top: 2px;
    left:2px;
    z-index: 25;
}

.app-header nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 7px;
    min-width: 0;
}

.nav-group {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding-left: 7px;
    border-left: 1px solid color-mix(in srgb, var(--chrome-muted) 34%, transparent);
}

.nav-group:first-child {
    border-left: 0;
    padding-left: 0;
}

.nav-module-label {
    flex: 0 0 auto;
    color: var(--chrome-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-header nav a {
    flex: 0 1 auto;
    min-width: 0;
    padding: 6px 8px;
    background: var(--chrome-2);
    border: 1px solid #46525e;
    font-size: calc(var(--app-font) - 1px);
    line-height: 1.1;
    white-space: nowrap;
    border-radius: 5px;
}

.user-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    max-width: 260px;
    color: var(--chrome-muted);
    font-size: 11px;
    font-weight: 700;
}

.legal-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
}

.legal-chip a,
.user-chip a {
    color: var(--chrome-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legal-chip a:hover,
.legal-chip a:focus-visible,
.user-chip a:hover,
.user-chip a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.user-chip form {
    margin: 0;
}

.user-chip button {
    padding: 4px 7px;
    color: #ffffff;
    background: color-mix(in srgb, var(--chrome-2) 72%, transparent);
    border: 1px solid #46525e;
    border-radius: var(--button-radius);
    font: inherit;
    cursor: pointer;
}

.auth-body {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(4, 20, 38, 0.78), rgba(4, 20, 38, 0.38)),
        url("../img/b4nx-wallpaper.png") center center / cover no-repeat;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-panel {
    width: min(440px, calc(100vw - 32px));
    padding: 22px;
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.3);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.auth-brand img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.auth-brand span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.auth-brand h1 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
}

.auth-form {
    display: grid;
    gap: 12px;
}

.auth-form label {
    display: grid;
    gap: 4px;
}

.auth-form input {
    width: 100%;
}

.auth-legal-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
}

.auth-legal-links a {
    color: var(--chrome-ink);
}

.auth-legal-links a:hover,
.auth-legal-links a:focus-visible {
    color: #ffffff;
}

.check-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

.check-inline input {
    width: auto;
}

.nx-admin-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    gap: 12px;
    padding: 10px;
}

.nx-admin-layout > .fieldset-panel:last-child {
    grid-column: 1 / -1;
}

.nx-user-create fieldset,
.fieldset-panel fieldset {
    min-width: 0;
}

.nx-role-list,
.nx-inline-role-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.nx-inline-role-form {
    min-width: 360px;
}

.nx-role-list label,
.nx-inline-role-form label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.nx-admin-layout .compact-grid tbody tr {
    cursor: pointer;
}

.nx-admin-layout .compact-grid tbody tr.selected-row td {
    background: var(--selected);
    color: var(--ink);
    font-weight: 700;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(320px, 720px);
    gap: var(--ui-gap);
    padding: var(--panel-pad);
}

.profile-card {
    max-width: 720px;
}

.profile-password {
    margin-top: var(--ui-gap);
}

.profile-hint {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: calc(var(--app-font) - 1px);
}

.legal-title {
    border-bottom: 1px solid var(--line-strong);
}

.legal-page {
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 34px);
    color: var(--ink);
    line-height: 1.55;
}

.legal-page section {
    margin: 0 0 22px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
}

.legal-page h2 {
    margin: 0 0 10px;
    font-size: 18px;
}

.legal-page p {
    margin: 0 0 10px;
}

.legal-page p:last-child {
    margin-bottom: 0;
}

.legal-page ul {
    margin: 0;
    padding-left: 22px;
}

.legal-page a {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 980px) {
    .nx-admin-layout {
        grid-template-columns: 1fr;
    }
}

.home-shell {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    max-height: calc(100vh - var(--header-height));
    padding: clamp(42px, calc(4vw + 18px), 74px) clamp(24px, 4vw, 56px) clamp(24px, 4vw, 56px);
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(4, 20, 38, 0.72) 0%, rgba(4, 20, 38, 0.42) 34%, rgba(4, 20, 38, 0.08) 72%),
        linear-gradient(180deg, rgba(4, 20, 38, 0.25) 0%, rgba(4, 20, 38, 0.02) 48%, rgba(4, 20, 38, 0.45) 100%),
        url("../img/b4nx-wallpaper.png") center center / cover no-repeat;
}

.home-water-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: normal;
    opacity: 1;
}

.home-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01) 42%, rgba(16, 85, 130, 0.1)),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.08), transparent 22%),
        radial-gradient(circle at 86% 72%, rgba(120, 204, 255, 0.06), transparent 24%);
    mix-blend-mode: soft-light;
}

@media (max-width: 1240px) {
    .app-header {
        gap: 8px;
        padding-inline: 8px;
    }

    .brand {
        gap: 7px;
        font-size: 13px;
    }

    .brand-mark {
        width: 28px;
        height: 28px;
    }

    .app-header nav {
        gap: 4px 5px;
    }

    .nav-group {
        gap: 3px;
        padding-left: 5px;
    }

    .nav-module-label {
        font-size: 9px;
    }

    .app-header nav a {
        padding: 5px 6px;
        font-size: 11px;
    }
}

.home-brand-panel {
    display: grid;
    gap: 6px;
    align-content: start;
    width: min(520px, 100%);
    z-index: 2;
}

.company-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.company-mark img {
    width: min(250px, 62vw);
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.home-logo {
    display: block;
    width: min(520px, 100%);
    height: auto;
    margin: 4px 0 4px;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: var(--title-font);
    line-height: 1.2;
    text-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
}

.home-copy {
    max-width: 440px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.launch-stack {
    display: grid;
    gap: 10px;
    width: min(780px, 100%);
    z-index: 2;
}

.module-launch-stack {
    align-self: flex-end;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    bottom: var(--header-height);
    position: relative;
}

.launch-module {
    display: grid;
    gap: 8px;
    padding: 10px;
    background: rgba(6, 23, 40, 0.42);
    border: 1px solid rgba(124, 203, 255, 0.28);
    border-radius: var(--button-radius);
    backdrop-filter: blur(6px);
}

.launch-module h2 {
    margin: 0;
    color: rgba(226, 244, 255, 0.86);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.launch-module-grid {
    display: grid;
    gap: 8px;
}

.launch-tile {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 6px 12px;
    align-items: center;
    width: 100%;
    padding: 16px;
    color: #ffffff;
    text-decoration: none;
    background: rgba(6, 23, 40, 0.72);
    border: 1px solid rgba(124, 203, 255, 0.58);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(8px);
}

.launch-icon {
    grid-row: span 2;
    width: 48px;
    height: 48px;

}

.launch-tile:hover {
    border-color: rgba(183, 231, 255, 0.9);
    background: rgba(4, 38, 68, 0.82);
}

.launch-tile span {
    font-size: 18px;
    font-weight: 700;
}

.launch-tile small {
    grid-column: 2;
    color: rgba(226, 244, 255, 0.78);
}

.stock-window {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.window-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--window-title-pad-y) var(--window-title-pad-x);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.window-title-actions {
    display: flex;
    align-items: center;
    gap: var(--ui-gap);
    flex: 0 0 auto;
}

.ui-title-control,
.ui-scale-control {
    display: inline-grid;
    grid-template-columns: auto minmax(58px, auto);
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ui-title-control select,
.ui-scale-control select {
    min-height: var(--title-control-height);
    padding: 1px 22px 1px 7px;
    font-size: 0.82rem;
    font-weight: 700;
}

.ui-theme-control {
    grid-template-columns: auto minmax(78px, auto);
}

.orders-window {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.orders-panel {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    background: var(--panel);
}

.orders-title-left {
    min-width: 0;
}

.orders-window-title.has-order {
    display: grid;
    grid-template-columns: minmax(170px, auto) minmax(540px, 1fr) auto;
    align-items: end;
    gap: 8px 10px;
    padding-top: max(4px, calc(var(--window-title-pad-y) - 4px));
    padding-bottom: max(4px, calc(var(--window-title-pad-y) - 4px));
}

.orders-title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.orders-title-line h1 {
    margin: 0;
}

.orders-window-title.has-order .orders-title-line h1 {
    font-size: clamp(1.35rem, calc(var(--title-font) * 0.52), 1.85rem);
    line-height: 1;
}

.orders-title-order {
    color: var(--accent-dark);
    font-size: 0.92rem;
    font-weight: 800;
}

.orders-title-type {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.orders-title-ref,
.orders-title-hint {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.orders-title-state {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(126px, 160px) minmax(140px, 180px) 126px minmax(150px, 220px);
    align-items: end;
    gap: 4px 6px;
    min-width: 0;
}

.orders-title-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    max-width: max-content;
}

.orders-title-field {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.orders-title-field > span:first-child {
    font-size: 0.68rem;
    text-transform: none;
    font-weight: 800;
}

.orders-title-field select {
    min-height: var(--title-control-height);
    padding-block: 1px;
    font-size: 0.82rem;
}

.orders-title-field .input-button-row {
    grid-template-columns: minmax(0, 1fr) var(--title-control-height);
}

.orders-title-field .icon-button {
    width: var(--title-control-height);
    min-width: var(--title-control-height);
    min-height: var(--title-control-height);
}

.orders-confirm-button {
    width: 126px;
    min-height: var(--title-control-height);
    padding: 2px 6px;
    white-space: normal;
    line-height: 1.12;
}

.orders-title-requirements {
    align-self: end;
    max-width: none;
    background: #ffffff;
}

.orders-title-requirements.orders-requirements.compact {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    grid-template-rows: auto;
    justify-content: start;
    gap: 1px 18px;
    min-width: 0;
    padding: 2px 8px 4px;
    border-color: var(--line-strong);
}

.orders-no-location-confirm {
    align-self: center;
    gap: 5px;
    min-width: 0;
    max-width: 220px;
    font-size: 0.72rem;
    line-height: 1.18;
}

@media (max-width: 1500px) {
    .orders-window-title.has-order {
        grid-template-columns: minmax(150px, auto) 1fr;
    }

    .orders-window-title.has-order .orders-title-actions {
        grid-column: 2;
        justify-self: end;
    }

    .orders-title-state {
        grid-template-columns: minmax(340px, 1fr) minmax(125px, 150px) minmax(140px, 165px) 120px;
    }

    .orders-no-location-confirm {
        grid-column: 1 / -1;
    }
}

.orders-tab-strip {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    background: var(--chrome-2);
    border-bottom: 1px solid var(--line-strong);
    overflow-x: auto;
}

.orders-tab-strip .tab,
.orders-subtab-strip .tab {
    color: var(--chrome-ink);
    background: var(--chrome-2);
    border: 0;
    border-right: 1px solid var(--line-strong);
    border-radius: 0;
    appearance: none;
}

.orders-tab-strip .tab.active,
.orders-subtab-strip .tab.active {
    color: var(--ink);
    background: var(--panel);
}

.orders-tab-strip .tab:not(.active):not(.disabled):hover,
.orders-subtab-strip .tab:not(.active):not(.disabled):not(:disabled):hover {
    background: color-mix(in srgb, var(--chrome-2) 82%, var(--accent) 18%);
}

.orders-tab-panel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
}

.orders-tab-panel.active {
    display: flex;
}

.orders-layout {
    display: grid;
    grid-template-columns: 244px minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.orders-filter-rail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    padding: 4px;
    background: var(--panel-2);
    border-right: 1px solid var(--line-strong);
    overflow: auto;
}

.orders-filter-title {
    padding: 4px 8px;
    color: #ffffff;
    background: var(--chrome-2);
    border: 1px solid var(--line-strong);
    font-weight: 700;
}

.orders-new-order {
    display: grid;
    gap: 4px;
    padding: 0;
    background: var(--surface);
    border: 0;
}

.orders-requirements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    min-height: auto;
    padding: 4px;
}

.orders-filter-buttons {
    display: grid;
    gap: 4px;
}

.orders-find-box {
    display: grid;
    gap: 4px;
    padding: 0;
    background: var(--surface);
    border: 0;
}

.orders-filter-rail .filter-field {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-column: auto;
    align-items: center;
    gap: 4px;
}

.orders-filter-rail .filter-field > span {
    text-align: right;
    font-size: 11px;
    font-weight: 500;
}

.orders-filter-rail select,
.orders-filter-rail input {
    min-height: 22px;
    padding: 2px 5px;
    font-size: 11px;
}

.orders-filter-rail .button {
    min-height: 22px;
    padding-block: 2px;
    font-size: 11px;
}

.orders-date-mode,
.orders-find-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    align-items: start;
}

.orders-find-options {
    padding: 3px 4px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.orders-filter-rail .check {
    min-height: 18px;
    gap: 4px;
    font-size: 11px;
    line-height: 1.15;
}

.orders-filter-rail .check input {
    width: 13px;
    min-height: 13px;
}

.orders-find-current {
    margin-top: 3px;
    color: var(--chrome);
    font-size: 11px;
    font-weight: 600;
}

.orders-find-row,
.orders-search-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 4px;
}

.orders-search-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}

.orders-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.orders-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ui-gap);
    min-height: 42px;
    padding: calc(var(--panel-pad) - 3px) var(--panel-pad);
    background: #edf1f5;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
}

.orders-grid-shell {
    flex: 1 1 auto;
    min-height: 0;
    background: #ffffff;
    overflow: hidden;
}

.orders-top-scroll {
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f4f6f8;
    border-bottom: 1px solid var(--line);
}

.orders-top-scroll > div {
    height: 1px;
}

.orders-grid-scroll {
    height: calc(100% - 16px);
    overflow: auto;
}

.orders-grid {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--grid-font);
}

.orders-grid th,
.orders-grid td {
    max-width: 260px;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border-right: 1px solid #c8d0da;
    border-bottom: 1px solid #d5dce4;
    white-space: nowrap;
}

.orders-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #ffffff;
    background: var(--chrome-2);
    font-weight: 700;
    text-align: left;
}

.orders-grid tfoot td,
.compact-grid tfoot td,
.stock-grid tfoot td,
.worklist-grid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    min-height: var(--row-height);
    color: var(--ink-strong);
    background: #edf3f9;
    border-top: 2px solid var(--line-strong);
    font-weight: 800;
    cursor: context-menu;
}

.orders-grid tfoot td:empty,
.compact-grid tfoot td:empty,
.stock-grid tfoot td:empty,
.worklist-grid tfoot td:empty {
    cursor: context-menu;
}

.orders-grid tbody tr:nth-child(even) {
    background: #f6f8fb;
}

.orders-grid tbody tr:hover {
    background: #dfeeff;
}

.orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td {
    background: rgb(var(--order-status-rgb) / 0.14);
}

.orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected):nth-child(even) td {
    background: rgb(var(--order-status-rgb) / 0.2);
}

.orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td:first-child {
    box-shadow: inset 4px 0 0 rgb(var(--order-status-rgb) / 0.88);
}

.orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected):hover td {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)),
        rgb(var(--order-status-rgb) / 0.28);
}

.orders-grid td.order-type-cell[style*="order-type-rgb"] {
    color: #142233;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)),
        rgb(var(--order-type-rgb) / 0.38);
    font-weight: 700;
}

.orders-grid tbody tr.order-dead-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td {
    color: #7f1d1d;
    font-weight: 600;
}

.orders-grid tbody tr.order-dead-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td:first-child {
    box-shadow: inset 4px 0 0 #dc2626;
}

.orders-grid tbody tr.order-dead-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td.order-status-cell {
    color: #ffffff;
    background: #b91c1c;
    font-weight: 800;
    text-transform: uppercase;
}

.orders-grid .requirement-cell {
    min-width: 74px;
    text-align: center;
    font-weight: 800;
}

.grid-top-scroll {
    flex: 0 0 auto;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f4f6f8;
    border-bottom: 1px solid var(--line);
}

.grid-top-scroll > div {
    height: 1px;
}

.grid-summary-menu,
.grid-column-menu {
    position: fixed;
    z-index: 10000;
    min-width: 132px;
    padding: 4px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 30px rgba(10, 25, 45, 0.18);
}

.grid-summary-menu-title {
    padding: 4px 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.grid-summary-menu button,
.grid-column-menu button {
    display: block;
    width: 100%;
    min-height: 24px;
    padding: 3px 8px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: calc(var(--control-radius) - 2px);
    text-align: left;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.grid-summary-menu button:hover,
.grid-column-menu button:hover {
    color: #ffffff;
    background: var(--accent);
}

.grid-draggable-header {
    cursor: grab;
    user-select: none;
}

.grid-dragging-column .grid-draggable-header {
    cursor: grabbing;
}

.grid-client-sorted {
    box-shadow: inset 0 -3px 0 var(--accent);
}

.grid-sort-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 4px;
    color: var(--sort-badge-ink);
    background: #dceaf6;
    font-size: 10px;
    font-weight: 800;
}

.grid-column-hidden {
    display: none;
}

.sort-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 20px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.sort-header small {
    padding: 1px 4px;
    color: var(--sort-badge-ink);
    background: #dceaf6;
    font-size: 10px;
    font-weight: 800;
}

.orders-placeholder-panel {
    align-items: stretch;
    padding: var(--panel-pad);
    background: var(--panel);
}

.orders-placeholder {
    width: 100%;
    padding: calc(var(--panel-pad) + 6px);
    background: var(--surface);
    border: 1px solid var(--line);
}

.orders-placeholder h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.orders-info-panel {
    min-height: 0;
    background: var(--panel);
}

.orders-info-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    width: 100%;
}

.orders-requirements.compact {

    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-content: center;
    gap: 2px 10px;
    min-height: 0;
    padding: 4px 7px 5px;
    font-size: 0.72rem;
    grid-template-rows: auto;
    max-width: fit-content;
}

.orders-requirements.compact legend {
    font-size: 0.7rem;
}

.orders-requirements.compact .check {
    gap: 3px;
}

.orders-requirements.compact .check input {
    width: 12px!important;
    min-height: 12px;
}

.orders-subtab-strip {
    display: flex;
    flex: 0 0 auto;
    background: var(--chrome-2);
    border-bottom: 1px solid var(--line-strong);
    overflow-x: auto;
}

.orders-subtab-strip.mini {
    border: 1px solid var(--line-strong);
    border-bottom: 0;
}

.orders-subtab-strip.vertical {
    flex-direction: column;
    min-width: 128px;
    border-right: 1px solid var(--line-strong);
    border-bottom: 0;
}

.orders-tab-strip .tab.disabled,
.orders-subtab-strip .tab.disabled,
.orders-subtab-strip .tab:disabled {
    opacity: 1;
    cursor: not-allowed;
    color: color-mix(in srgb, var(--chrome-ink) 52%, var(--disabled-ink));
    background: color-mix(in srgb, var(--chrome-2) 72%, var(--panel) 28%);
}

.orders-tab-strip .tab.disabled:hover,
.orders-subtab-strip .tab.disabled:hover,
.orders-subtab-strip .tab:disabled:hover {
    background: color-mix(in srgb, var(--chrome-2) 72%, var(--panel) 28%);
}

.orders-info-subpanel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--panel-pad);
    overflow: auto;
}

.orders-info-subpanel.active {
    display: block;
}

.orders-company-layout {
    display: grid;
    grid-template-columns: 260px minmax(280px, 420px) minmax(220px, 340px);
    gap: var(--ui-gap);
    align-items: start;
}

.orders-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--ui-gap);
    align-items: end;
}

.orders-form-grid.compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.orders-main-form-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    align-items: start;
}

.orders-form-grid.product-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(68px, 1fr));
    gap: 6px;
    align-items: end;
}

.orders-form-grid label,
.orders-form-grid .orders-transport-methods,
.orders-address-box,
.orders-notes-box {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.orders-form-grid .field-label {
    color: var(--label-ink);
    font-size: 12px;
    font-weight: 700;
}

.orders-form-grid.product-main > label {
    width: auto;
    min-width: 0;
}

.orders-form-grid.product-main .field-code {
    grid-column: span 2;
}

.orders-form-grid.product-main .field-text,
.orders-form-grid.product-main .field-ref {
    grid-column: span 2;
}

.orders-form-grid.product-main .field-number {
    grid-column: span 1;
}

.orders-form-grid.product-main .field-select {
    grid-column: span 1;
}

.orders-form-grid.product-main .compact-button {
    grid-column: span 1;
    align-self: end;
    height: var(--control-height);
}

.orders-form-grid.product-main input,
.orders-form-grid.product-main select {
    width: 100%;
}

.orders-form-grid.product-main > label > span:first-child,
.orders-form-grid.product-main .orders-product-mini-group > span,
.orders-form-grid.product-main .orders-product-options-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.orders-form-grid .field-narrow {
    max-width: 150px;
}

.orders-form-grid .field-measure {
    max-width: 170px;
}

.orders-form-grid .field-narrow input,
.orders-form-grid .field-narrow select,
.orders-form-grid .field-measure input {
    width: 100%;
}

.orders-form-grid input[type="number"] {
    text-align: right;
}

.orders-main-form-grid .orders-transport-methods {
    grid-row: span 2;
}

.orders-check-list {
    display: grid;
    gap: 2px;
    min-height: 58px;
    padding: 3px 5px;
    border: 1px solid var(--line-strong);
    background: var(--field);
    align-content: start;
    grid-auto-flow: column;
}

.orders-check-list .check {
    min-height: 16px;
    gap: 5px;
    line-height: 1.1;
}

.orders-check-list input[type="checkbox"],
.orders-allow-all-ops input[type="checkbox"] {
    width: 14px;
    min-height: 14px;
}

.orders-allow-all-ops {
    align-self: center;
    max-width: 190px;
    line-height: 1.15;
}

.orders-copy-panel fieldset,
.orders-requirement-list,
.orders-notify-parties,
.orders-company-bol-options {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.orders-address-box textarea,
.orders-notes-box textarea {
    min-height: 0;
    resize: vertical;
}

.orders-copy-panel,
.orders-main-info-layout,
.orders-transport-card {
    display: grid;
    gap: var(--ui-gap);
}

.orders-company-results select {
    min-height: 92px;
}

.orders-additional-business-units {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 3px 8px;
}

.orders-field-with-button .input-button-row,
.input-button-row {
    display: grid;
    grid-template-columns: 1fr 32px;
    gap: calc(var(--ui-gap) / 2);
}

.port-lookup-grid {
    align-items: start;
}

.port-lookup-field {
    align-content: start;
}

.port-lookup-name {
    min-height: 1.25em;
    color: var(--muted);
    font-size: 0.86em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.port-lookup-popup {
    position: fixed;
    z-index: 1000;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.port-lookup-popup-header,
.port-lookup-empty {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.86em;
    font-weight: 700;
}

.port-lookup-empty {
    border-bottom: 0;
    font-weight: 500;
}

.port-lookup-result {
    display: grid;
    grid-template-columns: 76px 1fr;
    width: 100%;
    min-height: var(--control-height);
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    text-align: left;
    gap: 8px;
}

.port-lookup-result:hover,
.port-lookup-result:focus {
    background: #e9f2fb;
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

.icon-button {
    height: var(--control-height);
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--control-radius);
    background: #e8edf2;
    color: var(--ink);
    font-weight: 700;
}

.orders-date-action {
    grid-template-columns: 1fr auto;
}

.orders-date-action span {
    grid-column: 1 / -1;
}

.orders-date-action button {
    height: var(--control-height);
    padding: 0 var(--button-pad-x);
    border: 1px solid var(--line-strong);
    border-radius: var(--button-radius);
    color: var(--control-ink);
    background: var(--field);
}

.orders-main-info-layout {
    grid-template-columns: minmax(520px, 1fr) 190px 220px;
    align-items: start;
}

.orders-transport-card,
.orders-notes-box {
    grid-column: 1 / -1;
}

.orders-update-info-button {
    justify-self: end;
    width: min(100%, 190px);
    min-width: 140px;
}

.orders-transport-panel[data-orders-transport-panel="sea"] {
    gap: var(--ui-gap);
}

.orders-sea-panel {
    display: none;
    padding: var(--compact-pad);
    border: 1px solid var(--line-strong);
    border-top: 0;
    color: var(--ink);
    background: var(--panel-2);
}

.orders-sea-panel.active {
    display: block;
}

.orders-sea-specific-grid,
.orders-sea-generic-grid,
.orders-sea-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    align-items: end;
}

.orders-sea-specific-grid {
    max-width: 1040px;
}

.orders-sea-generic-grid {
    max-width: 720px;
}

.orders-sea-check-grid {
    max-width: 980px;
}

.orders-sea-specific-grid label,
.orders-sea-generic-grid label,
.orders-sea-check-grid label,
.orders-sea-check-box {
    display: grid;
    flex: 0 0 auto;
    width: min(100%, var(--sea-field-width, 18ch));
    gap: 3px;
    min-width: 0;
}

.orders-sea-specific-grid .field-code,
.orders-sea-check-grid .field-code {
    --sea-field-width: 14ch;
}

.orders-sea-specific-grid .field-text,
.orders-sea-generic-grid .field-text,
.orders-sea-check-grid .field-text {
    --sea-field-width: 28ch;
}

.orders-sea-specific-grid .field-port,
.orders-sea-specific-grid .field-select {
    --sea-field-width: 22ch;
}

.orders-sea-generic-grid .field-number {
    --sea-field-width: 10ch;
}

.orders-sea-generic-grid .field-notes {
    --sea-field-width: 28ch;
}

.orders-sea-check-box {
    --sea-field-width: 30ch;
}

.orders-sea-specific-grid span,
.orders-sea-generic-grid span,
.orders-sea-check-grid span {
    color: var(--label-ink);
    font-size: 11px;
    font-weight: 600;
}

.orders-sea-specific-grid input,
.orders-sea-specific-grid select,
.orders-sea-generic-grid input,
.orders-sea-generic-grid select,
.orders-sea-generic-grid textarea,
.orders-sea-check-grid input,
.orders-sea-check-grid textarea {
    min-height: 22px;
    padding: 2px 5px;
    color: var(--control-ink);
    background: var(--field);
    border-color: var(--line-strong);
    font-size: 11px;
}

.orders-sea-generic-grid textarea,
.orders-sea-check-grid textarea {
    resize: vertical;
}

.orders-sea-specific-grid .compact-button,
.orders-sea-check-grid .compact-button {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 8px;
    font-size: 11px;
}

.sea-vessel-name,
.sea-voyage-no {
    --sea-field-width: 28ch;
}

.sea-clear-vessel,
.sea-clear-voyage {
    width: 24px;
    min-width: 24px;
    padding-inline: 0;
}

.sea-copy-products {
    width: 142px;
}

.sea-call-check-button {
    align-self: end;
    width: 128px;
}

.sea-undo {
    width: 118px;
}

.button.danger {
    border-color: #a33b3b;
    color: #9b1c1c;
    background: #f4dede;
}

.orders-port-ops {
    display: grid;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(300px, 38vh) minmax(260px, 1fr);
    gap: var(--space-2);
    padding: var(--space-2);
    --port-ops-left: clamp(320px, 30vw, 560px);
}

.orders-port-top,
.orders-port-bottom {
    display: grid;
    gap: var(--space-2);
    align-items: stretch;
    min-width: 0;
    min-height: 0;
}

.orders-port-top {
    grid-template-columns: minmax(280px, var(--port-ops-left)) 8px minmax(520px, 1fr);
}

.orders-port-bottom {
    grid-template-columns: minmax(260px, 0.32fr) minmax(680px, 1fr);
}

.legacy-port-bottom {
    grid-template-columns: minmax(104px, 8vw) minmax(0, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    background: var(--panel-bg);
}

.orders-port-available,
.orders-port-products,
.orders-port-added,
.orders-port-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--line);
    background: var(--panel-bg);
}

.orders-port-splitter {
    min-width: 8px;
    width: 8px;
    cursor: col-resize;
    background:
        linear-gradient(90deg, transparent 0 2px, var(--line-strong) 2px 3px, transparent 3px 5px, var(--line-strong) 5px 6px, transparent 6px);
    opacity: 0.72;
    touch-action: none;
}

.orders-port-splitter:hover,
.orders-port-splitter.active {
    opacity: 1;
    background:
        linear-gradient(90deg, transparent 0 2px, var(--accent) 2px 3px, transparent 3px 5px, var(--accent) 5px 6px, transparent 6px);
}

.b4-panel-splitter {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: calc(var(--control-radius) + 1px);
    opacity: 0.72;
    touch-action: none;
}

.b4-panel-splitter.vertical {
    min-width: 8px;
    width: 8px;
    cursor: col-resize;
    background:
        linear-gradient(90deg, transparent 0 2px, var(--line-strong) 2px 3px, transparent 3px 5px, var(--line-strong) 5px 6px, transparent 6px);
}

.b4-panel-splitter.horizontal {
    min-height: 8px;
    height: 8px;
    cursor: row-resize;
    background:
        linear-gradient(0deg, transparent 0 2px, var(--line-strong) 2px 3px, transparent 3px 5px, var(--line-strong) 5px 6px, transparent 6px);
}

.b4-panel-splitter:hover,
.b4-panel-splitter.active {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    opacity: 1;
}

.b4-panel-splitter.vertical:hover,
.b4-panel-splitter.vertical.active {
    background:
        linear-gradient(90deg, transparent 0 2px, var(--accent) 2px 3px, transparent 3px 5px, var(--accent) 5px 6px, transparent 6px);
}

.b4-panel-splitter.horizontal:hover,
.b4-panel-splitter.horizontal.active {
    background:
        linear-gradient(0deg, transparent 0 2px, var(--accent) 2px 3px, transparent 3px 5px, var(--accent) 5px 6px, transparent 6px);
}

.legacy-port-bottom .orders-port-added,
.legacy-port-bottom .orders-port-details {
    border: 0;
    border-left: 1px solid var(--line);
}

.orders-port-view-tabs {
    display: grid;
    align-content: start;
    background: var(--tab-bg);
    border-right: 1px solid var(--line);
}

.orders-port-view-tabs button {
    width: 100%;
    min-height: calc(var(--control-height) + 4px);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-weight: 700;
    text-align: left;
    padding: 0 var(--space-2);
}

.orders-port-view-tabs button.active {
    background: var(--panel-bg);
    color: var(--accent);
}

.lookup-field .lookup-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--control-height);
    align-items: stretch;
    gap: 2px;
}

.lookup-field .lookup-input-row input {
    min-width: 0;
}

.lookup-button,
.lookup-close {
    min-width: var(--control-height);
    min-height: var(--control-height);
    border: 1px solid var(--line-strong);
    border-radius: var(--control-radius);
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.lookup-button:hover,
.lookup-close:hover {
    background: var(--accent-dark);
}

.lookup-popover {
    position: fixed;
    z-index: 1200;
    width: min(620px, calc(100vw - 16px));
    max-height: min(340px, calc(100vh - 16px));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.lookup-popover[hidden] {
    display: none;
}

.lookup-popover-title,
.lookup-popover-search {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lookup-popover-title {
    justify-content: space-between;
}

.lookup-popover-search input {
    flex: 1 1 auto;
    min-width: 0;
}

.lookup-table-wrap {
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
}

.lookup-result-row {
    cursor: pointer;
}

.lookup-result-row:hover,
.lookup-result-row:focus {
    outline: 1px solid var(--accent);
    background: var(--accent-soft);
}

.orders-port-view-panel {
    display: none;
    min-width: 0;
}

.orders-port-view-panel.active {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.orders-port-detail-layout {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(168px, 12vw) minmax(0, 1fr);
    min-height: 0;
}

.orders-port-detail-tools {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-2);
    border-right: 1px solid var(--line);
    background: var(--panel-2);
}

.orders-port-detail-tools .filter-field,
.orders-port-detail-tools .filter-field input {
    width: 100%;
}

.orders-port-detail-tools .tiny-field input {
    width: 78px;
}

.port-product-assigned {
    background: var(--accent-soft);
}

.orders-port-ops .orders-grid {
    font-size: calc(var(--grid-font) - 1px);
}

.orders-port-ops .orders-grid.compact-grid th,
.orders-port-ops .orders-grid.compact-grid td {
    height: 22px;
    padding: 2px 4px;
    line-height: 1.15;
}

.orders-port-ops .orders-grid input[type="checkbox"],
.orders-port-ops .orders-grid input[type="radio"] {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.orders-port-ops .orders-grid td:first-child,
.orders-port-ops .orders-grid th:first-child {
    text-align: center;
}

.orders-port-product-bar,
.orders-port-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    min-height: var(--control-height);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--line);
}

.orders-port-controls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(74px, 94px));
    justify-content: start;
    gap: var(--space-1);
    align-items: end;
    padding: var(--space-1) var(--space-2);
    border-top: 1px solid var(--line);
}

.orders-port-controls .filter-field {
    grid-column: span 1;
    width: 100%;
    min-width: 0;
}

.orders-port-controls .filter-field span,
.orders-port-controls .check {
    line-height: 1.05;
}

.orders-port-controls .check {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    grid-column: span 2;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 170px;
    white-space: normal;
}

.orders-port-controls .check input {
    align-self: start;
    margin-top: 1px;
}

.orders-port-controls .small-field input,
.orders-port-controls .small-field select {
    width: 100%;
}

.orders-port-controls .tiny-field input {
    width: 100%;
}

.orders-port-controls .date-field {
    grid-column: span 2;
}

.orders-port-controls .date-field input {
    width: 100%;
}

.orders-port-controls .text-field {
    grid-column: span 2;
}

.orders-port-controls .text-field input,
.orders-port-controls .text-field select {
    width: 100%;
}

.orders-port-controls .warehouse-location-field {
    grid-column: span 3;
}

.orders-port-controls .main-area-field {
    grid-column: span 3;
}

.orders-port-controls .is-disabled {
    opacity: 0.58;
}

.orders-port-controls .is-disabled input,
.orders-port-controls .is-disabled select,
.orders-port-controls .is-disabled button {
    cursor: not-allowed;
}

.orders-port-controls .button {
    min-width: 104px;
    width: 104px;
}

.port-check {
    min-height: var(--control-height);
    padding: var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--line);
}

.orders-port-top .port-grid {
    flex: 1 1 auto;
    max-height: none;
    overflow: auto;
}

.orders-port-bottom .port-grid {
    flex: 1 1 auto;
    max-height: none;
    overflow: auto;
}

.warn-cell {
    background: #b42318;
    color: #fff;
}

.ok-cell {
    background: #7fd37f;
    color: #061208;
}

@media (max-width: 1100px) {
    .orders-port-top,
    .orders-port-bottom {
        grid-template-columns: 1fr;
    }

    .orders-port-splitter {
        display: none;
    }

    .orders-port-detail-layout {
        grid-template-columns: 1fr;
    }

    .orders-port-detail-tools {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

.sea-lookup-result {
    grid-template-columns: 130px minmax(0, 1fr);
}

.orders-transport-panel,
.orders-sea-panel,
.orders-product-mode-panel,
.orders-product-subpanel,
.orders-product-company-panel {
    display: none;
}

.orders-transport-panel.active,
.orders-sea-panel.active,
.orders-product-mode-panel.active,
.orders-product-subpanel.active,
.orders-product-company-panel.active {
    display: grid;
}

.orders-product-info,
.orders-product-tabs-shell {
    min-height: 0;
}

.orders-product-tabs-shell {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    border: 1px solid var(--line-strong);
    background: #ffffff;
}

.orders-product-mode-panel {
    min-width: 0;
    padding: var(--compact-pad);
    gap: var(--ui-gap);
}

.orders-product-subpanel {
    min-height: 0;
    padding: var(--compact-pad);
    border: 1px solid var(--line-strong);
    border-top: 0;
    background: #f8fafc;
}

.orders-product-companies-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(250px, 330px);
    gap: var(--ui-gap);
    align-items: start;
}

.orders-company-tabs {
    display: grid;
    gap: var(--ui-gap);
    min-width: 0;
}

.orders-product-company-panel {
    padding: var(--compact-pad);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-top: 0;
}

.orders-form-grid.product-company-grid {
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    align-items: end;
}

.orders-form-grid.product-company-grid .orders-field-with-button {
    grid-column: span 2;
}

.orders-company-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap);
    margin-top: var(--ui-gap);
}

.orders-notify-parties {
    display: grid;
    gap: calc(var(--ui-gap) / 2);
    align-content: start;
}

.orders-notify-parties > .button {
    margin-top: calc(var(--ui-gap) / 2);
    white-space: normal;
}

.orders-company-bol-options {
    display: grid;
    gap: calc(var(--ui-gap) / 2);
}

.orders-company-bol-options .check,
.orders-notify-parties .check {
    white-space: normal;
}

.orders-product-options {
    grid-column: span 5;
    width: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 3px 7px 5px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 0.72rem;
    align-self: end;
}

.orders-product-options-title {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    line-height: 1;
    font-weight: 700;
}

.orders-product-option-groups {
    display: grid;
    grid-template-columns: minmax(200px, 1.35fr) minmax(140px, 0.8fr) minmax(150px, 0.9fr);
    gap: 10px;
    align-items: start;
}

.orders-product-option-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(78px, 1fr));
    gap: 4px 6px;
    min-width: 0;
}

    .orders-product-option-group:not(:has(> label:nth-of-type(3))) {
        grid-template-columns: repeat(1, minmax(78px, 1fr));
    }



.orders-product-option-group > span {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.orders-product-option-group.status {
    grid-template-columns: 1fr;
}

.orders-product-options .check {
    display: inline-flex;
    gap: 4px;
    line-height: 1.12;
    min-width: 0;
    white-space: normal;
    align-items: flex-start;
    overflow-wrap: anywhere;
}

.orders-product-options .check input {
    flex: 0 0 auto;
    width: 12px!important;
    min-height: 12px;
    margin-top: 1px;
}

.orders-product-options .check:has(input:disabled) {
    color: var(--muted);
}

.orders-product-status-text {
    min-height: 1.1rem;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.product-main-check,
.orders-product-mini-group {
    grid-column: span 1!important;
    width: auto;
}

.orders-product-mini-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 3px 6px;
    padding: 4px 6px;
    border: 1px solid var(--line);
    background: #eef3f8;
    align-self: end;
}

.orders-product-mini-group > span {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.orders-product-mini-group .check,
.product-main-check {
    display: inline-flex;
    gap: 4px;
    align-items: flex-start;
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.orders-product-mini-group .check input,
.product-main-check input {
    flex: 0 0 auto;
    margin-top: 1px;
}

@media (max-width: 1500px) {
    .orders-form-grid.product-main {
        grid-template-columns: repeat(10, minmax(68px, 1fr));
    }

    .orders-product-options {
        grid-column: span 6;
    }
}

@media (max-width: 1180px) {
    .orders-form-grid.product-main {
        grid-template-columns: repeat(6, minmax(70px, 1fr));
    }

    .orders-form-grid.product-main .field-code,
    .orders-form-grid.product-main .field-text,
    .orders-form-grid.product-main .field-ref,
    .orders-form-grid.product-main .field-select,
    .product-main-check,
    .orders-product-mini-group {
        grid-column: span 2;
    }

    .orders-product-options {
        grid-column: 1 / -1;
    }

    .orders-product-option-groups {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.orders-notes-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: var(--ui-gap);
}

.orders-notes-grid label {
    display: grid;
    gap: 4px;
}

.orders-product-notes-panel {
    display: grid;
    gap: var(--ui-gap);
}

.orders-product-copy-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap);
    align-items: center;
    padding: 5px 7px;
    border: 1px solid var(--line);
    background: #e4edf6;
    font-size: 0.78rem;
}

.orders-product-copy-bar > span {
    font-weight: 700;
    color: var(--muted);
}

.orders-product-other-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: var(--ui-gap);
    align-items: start;
}

.orders-form-grid.product-other-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
}

.orders-mini-grid {
    display: grid;
    grid-template-columns: 28px minmax(190px, 1fr);
    grid-auto-rows: min-content;
    gap: 4px;
    align-items: start;
}

.orders-mini-grid .compact-button {
    min-width: 28px;
    padding: 0;
}

.orders-mini-grid .mini-table {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-width: 190px;
}

.orders-product-apply-panel,
.orders-product-port-actions fieldset,
.orders-product-swap {
    display: grid;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    background: #eef3f8;
}

.orders-product-apply-panel .button,
.orders-product-port-actions .button,
.orders-product-swap .button {
    white-space: normal;
}

.orders-product-port-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap);
    align-items: start;
}

.orders-product-port-actions fieldset {
    grid-template-columns: repeat(3, minmax(150px, auto));
}

.orders-product-haz-layout {
    display: grid;
    grid-template-columns: 130px 170px minmax(260px, 360px);
    gap: var(--ui-gap);
    align-items: start;
}

.product-reefer-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
}

.product-reefer-grid .reefer-vent {
    width: min(100%, 280px);
}

.product-oog-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, max-content));
}

.orders-product-creation-layout {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(180px, 220px) minmax(300px, 360px);
    gap: var(--ui-gap);
    align-items: start;
}

.orders-product-swap {
    grid-template-columns: 1fr 1fr;
}

.orders-product-swap legend,
.orders-product-port-actions legend {
    font-weight: 700;
    color: var(--muted);
}

.orders-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap);
    align-items: center;
}

.orders-product-bottom {
    display: grid;
    grid-template-rows: minmax(140px, 1fr) minmax(150px, 1fr);
    gap: var(--ui-gap);
    min-height: 330px;
}

.orders-product-child-grids {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--ui-gap);
}

.orders-product-child-grids section {
    min-width: 0;
}

.orders-product-child-grids h3 {
    margin: 0 0 4px;
    font-size: 0.82rem;
}

.orders-grid.compact-grid th,
.orders-grid.compact-grid td {
    padding: max(2px, calc(var(--cell-pad-y) - 1px)) max(4px, calc(var(--cell-pad-x) - 1px));
    white-space: nowrap;
}

.orders-grid tbody tr.selected td {
    background: #dcecff;
    outline: 1px solid #7aa7dc;
    outline-offset: -1px;
}

.orders-grid-shell.small {
    max-height: 180px;
}

.notice.inline {
    margin-top: 0;
    margin-bottom: 8px;
}

.orders-requirement-list {
    display: grid;
    gap: 4px;
    min-height: auto;
}

.orders-requirement-order {
    display: grid;
    gap: 3px;
}

.orders-requirement-order .check {
    padding: 3px 6px;
    border: 1px solid transparent;
}

.orders-requirement-order .check.selected {
    border-color: var(--accent);
    background: var(--selected-bg);
}

.orders-requirement-list span:not(.muted-text) {
    display: block;
    padding: 3px 6px;
    background: #ffffff;
    border: 1px solid var(--line);
}

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

.notice {
    position: relative;
    margin: 10px 12px;
    padding: 10px 36px 10px 12px;
    background: #fff5cf;
    border: 1px solid #c59e22;
}

.notice-close {
    position: absolute;
    top: 5px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    color: #5f4a08;
    background: transparent;
    border: 1px solid transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.notice-close:hover,
.notice-close:focus-visible {
    background: #ffe8a2;
    border-color: #c59e22;
    outline: none;
}

.legacy-panel {
    background: var(--panel);
    border-bottom: 1px solid var(--line-strong);
    flex: 0 0 auto;
}

.tab-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--chrome-2);
    border-bottom: 1px solid var(--line-strong);
    overflow-x: auto;
}

.tab {
    min-width: 128px;
    padding: var(--tab-pad-y) var(--tab-pad-x);
    color: var(--chrome-ink);
    background: var(--chrome-2);
    border: 0;
    border-right: 1px solid var(--line-strong);
    border-radius: 0;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.tab.active {
    color: var(--ink);
    background: var(--panel);
    font-weight: 700;
}

.tab.muted {
    color: var(--chrome-muted);
}

.tab:hover {
    background: color-mix(in srgb, var(--chrome-2) 82%, var(--accent) 18%);
}

.tab.active:hover {
    background: var(--panel);
}

.header-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: max-content;
    margin-left: auto;
    padding: 0 var(--tab-pad-x);
    color: var(--chrome-ink);
    background: #26323d;
    border-left: 1px solid #46525e;
    font-weight: 700;
    white-space: nowrap;
}

.header-toggle input {
    width: 14px;
    min-height: 14px;
}

.legacy-panel.header-collapsed .tab-panels {
    display: none;
}

.tab-panels {
    background: var(--panel);
    border-top: 1px solid #f9fbfc;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: grid;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ui-gap);
    align-items: stretch;
    padding: var(--panel-pad);
    background: var(--panel);
}

.filter-grid.tab-panel:not(.active) {
    display: none;
}

.filter-grid.tab-panel.active {
    display: grid;
}

label,
.filter-field {
    min-width: 0;
}

.filter-field {
    display: grid;
    grid-column: span 2;
    gap: 4px;
}

.filter-field-sm {
    grid-column: span 2;
}

label span,
legend {
    color: var(--label-ink);
    font-size: 12px;
    font-weight: 700;
}

select,
input,
textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--line-strong);
    border-radius: var(--control-radius);
    font: inherit;
}

select:focus,
input:focus,
textarea:focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent-soft);
    outline-offset: 1px;
}

textarea {
    display: block;
    resize: vertical;
}

fieldset {
    height: 100%;
    min-height: 0;
    min-width: 0;
    margin: 0;
    padding: calc(var(--compact-pad) - 1px) var(--compact-pad) var(--compact-pad);
    border: 1px solid var(--line);
    background: var(--surface);
}

fieldset legend {
    padding: 0 4px;
}

.stock-mode {
    grid-column: span 3;
}

.stock-options {
    grid-column: span 3;
}

.stock-mode,
.stock-options,
.linked-types {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 5px 10px;
}

.check {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
}

.check input {
    flex: 0 0 auto;
    width: 14px!important;
    min-height: 14px;
    margin-top: 1px;
}

label:has(input[type="checkbox"]) {
    max-width: 140px !important;
    display: flex;
    align-content: center;
    align-items: center;
}

.date-box {
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(2, minmax(128px, 1fr));
    gap: 7px;
    min-height: var(--filter-panel-height);
}

.date-box legend,
.search-box legend {
    grid-column: 1 / -1;
}

.date-box .filter-field,
.search-box .filter-field {
    grid-column: auto;
}

.linked-types {
    grid-column: span 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(84px, 1fr));
    grid-auto-rows: minmax(20px, auto);
    align-content: start;
    gap: 3px 6px;
    min-height: var(--filter-panel-height);
    overflow: auto;
}

.linked-types legend {
    grid-column: 1 / -1;
}

.linked-types .check {
    align-items: flex-start;
    min-height: 20px;
    padding: 1px 2px;
    font-size: 12px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    white-space: normal;
}

.linked-types .check input {
    margin-top: 1px;
}

.search-box {
    grid-column: span 3;
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(170px, 1fr);
    gap: 7px;
    min-height: var(--filter-panel-height);
}

.search-box .search-multiple {
    grid-column: 1 / -1;
}

.search-box textarea {
    min-height: 58px;
    max-width: 100%;
}

.legend-details {
    grid-column: span 12;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--line);
}

.legend-details summary {
    min-height: var(--control-height);
    padding: var(--button-pad-y) var(--compact-pad);
    color: var(--label-ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.legend-box {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: var(--ui-gap);
    padding: 0 var(--compact-pad) var(--compact-pad);
}

.legend {
    display: block;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    text-align: center;
}

.legend.stop,
.cell-stop {
    background: var(--stop);
}

.legend.warn,
.cell-warning {
    background: var(--warn);
}

.legend.ok,
.cell-ok {
    background: var(--ok);
}

.legend.dispatch,
.row-dispatch td {
    background: var(--dispatch);
}

.row-dispatch td.cell-stop {
    background: var(--stop);
}

.row-dispatch td.cell-warning {
    background: var(--warn);
}

.row-dispatch td.cell-ok {
    background: var(--ok);
}

.order-creation-box {
    grid-column: span 12;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(4, minmax(150px, auto)) auto;
    gap: var(--ui-gap) calc(var(--ui-gap) + 4px);
    align-items: center;
}

.order-template-field {
    grid-column: auto;
}

.legacy-action-map {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    gap: var(--ui-gap);
}

.legacy-action-map legend {
    grid-column: 1 / -1;
}

.legacy-action-group {
    display: grid;
    align-content: start;
    gap: calc(var(--ui-gap) - 3px);
    min-width: 0;
    padding: var(--compact-pad);
    background: #f9fbfc;
    border: 1px solid var(--line);
}

.legacy-action-group h3 {
    margin: 0 0 2px;
    color: var(--control-ink);
    font-size: 12px;
    line-height: 1.2;
}

.placeholder-action {
    justify-content: flex-start;
    min-height: var(--control-height);
    padding: var(--field-pad-y) var(--field-pad-x);
    font-size: 12px;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
}

.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ui-gap);
    padding: var(--compact-pad) var(--panel-pad);
    background: var(--panel-2);
    border-top: 1px solid var(--line);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: var(--button-pad-y) var(--button-pad-x);
    color: #ffffff;
    background: var(--accent);
    border: 1px solid var(--accent-dark);
    border-radius: var(--button-radius);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

.button:hover {
    background: var(--accent-dark);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.button:active {
    transform: translateY(1px);
}

.button.ghost {
    color: var(--control-ink);
    background: #ffffff;
    border-color: var(--line-strong);
}

.button.ghost:hover {
    background: var(--accent-soft);
}

.button.create {
    background: #256b4f;
    border-color: #174c38;
}

.button.create:hover {
    background: #174c38;
}

.button:disabled {
    color: var(--disabled-ink);
    background: #d0d6de;
    border-color: #aab4bf;
    cursor: default;
}

form[data-enhanced-form-busy="true"] {
    cursor: progress;
}

.enhanced-submit-busy {
    opacity: 0.72;
    cursor: progress;
}

.b4-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: none;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--surface) 34%, transparent);
    pointer-events: all;
}

html.b4-busy .b4-busy-overlay {
    display: grid;
}

.b4-busy-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 11px 18px;
    color: var(--ink);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 18px 48px rgba(10, 25, 45, 0.24);
    font-size: var(--app-font);
    font-weight: 800;
}

.b4-busy-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-top-color: var(--accent);
    border-right-color: var(--accent-dark);
    border-radius: 50%;
    animation: b4-busy-spin 0.72s linear infinite;
}

.b4-busy-text {
    white-space: nowrap;
}

@keyframes b4-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

.row-action-menu {
    position: fixed;
    z-index: 50;
    min-width: 238px;
    max-width: 320px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    box-shadow: 0 12px 24px rgba(16, 25, 36, 0.18);
}

.row-action-menu-title {
    padding: 5px 7px;
    color: var(--control-ink);
    background: #eef3f7;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
}

.row-action-menu button {
    display: block;
    width: 100%;
    min-height: 26px;
    padding: 4px 7px;
    color: var(--control-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid #edf1f4;
    border-radius: calc(var(--control-radius) - 2px);
    font: inherit;
    font-size: 12px;
    text-align: left;
}

.row-action-menu button:not(:disabled):hover {
    background: var(--accent-soft);
}

.row-action-menu button:disabled {
    color: var(--disabled-ink);
    cursor: default;
}

.legacy-panel.is-creating-order {
    pointer-events: none;
    opacity: 0.82;
}

.create-progress {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 120px minmax(180px, 1fr);
    align-items: center;
    gap: 10px;
    min-height: var(--control-height);
    padding: 6px 8px;
    color: #133327;
    background: #dff2eb;
    border: 1px solid #68a88f;
    font-weight: 700;
}

.create-progress[hidden] {
    display: none;
}

.developer-feedback {
    grid-column: 1 / -1;
    margin-top: 0.65rem;
    border: 1px solid var(--line);
    background: rgba(18, 24, 38, 0.04);
    padding: 0.6rem 0.75rem;
}

.developer-feedback summary {
    cursor: pointer;
    font-weight: 700;
}

.developer-feedback ol {
    margin: 0.55rem 0 0;
    padding-left: 1.3rem;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.55;
}

.busy-bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #68a88f;
}

.busy-bar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: #256b4f;
    animation: busy-slide 1s linear infinite;
}

@keyframes busy-slide {
    from {
        left: -40%;
    }

    to {
        left: 100%;
    }
}

.rows-per-page {
    display: grid;
    grid-template-columns: auto 84px;
    align-items: center;
    gap: 6px;
}

.rows-per-page span,
.page-status {
    white-space: nowrap;
}

.pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pager-button {
    min-width: 70px;
}

.record-count {
    margin-left: auto;
    font-weight: 700;
    white-space: nowrap;
}

.selection-status {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--compact-pad);
    background: #ffffff;
    border: 1px solid var(--line);
    font-weight: 700;
    white-space: nowrap;
}

.grid-search-strip {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    gap: var(--ui-gap);
    align-items: end;
    padding: var(--compact-pad) var(--panel-pad);
    background: #edf1f5;
    border-top: 1px solid var(--line);
}

.grid-search-field {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr);
    align-items: center;
    gap: var(--ui-gap);
    min-width: 0;
}

.grid-search-field span {
    white-space: nowrap;
}

.order-preflight,
.order-create-result,
.operation-result {
    flex: 0 0 auto;
    display: grid;
    gap: var(--ui-gap);
    padding: var(--compact-pad) var(--panel-pad);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
}

.order-preflight.ready,
.order-create-result.ready,
.operation-result.ready {
    background: #e5f5df;
}

.order-preflight.needs-confirmation {
    background: #fff5cf;
}

.order-preflight.blocked,
.order-create-result.blocked,
.operation-result.blocked {
    background: #fff0c2;
}

.confirm-warning {
    grid-column: span 2;
    min-height: var(--control-height);
    padding: var(--field-pad-y) var(--field-pad-x);
    color: #4c3700;
    background: #fff5cf;
    border: 1px solid #c59e22;
    font-weight: 700;
}

.confirmation-required {
    padding: var(--compact-pad);
    color: #4c3700;
    background: #fff9e4;
    border: 1px solid #c59e22;
}

.order-preflight div,
.order-create-result div,
.operation-result div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-gap) calc(var(--ui-gap) * 2);
}

.order-preflight ul,
.order-create-result ul,
.operation-result ul {
    margin: 0;
    padding-left: 18px;
}

.completion-prompt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
    gap: var(--ui-gap);
    padding: var(--compact-pad);
    background: #fff9e4;
    border: 1px solid #c59e22;
}

.completion-prompt > div {
    display: grid;
    gap: 2px;
}

.operations-panel {
    flex: 0 0 auto;
    display: grid;
    gap: var(--ui-gap);
    max-height: min(46vh, 420px);
    min-height: 0;
    padding: var(--compact-pad) var(--panel-pad);
    background: #f7f9fb;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
    overflow: auto;
}

.operations-panel-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.operations-panel h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
}

.operations-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
}

.operations-meta span {
    padding: 3px 7px;
    background: #ffffff;
    border: 1px solid var(--line);
}

.operations-grid-wrap {
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--line);
    background: #ffffff;
}

.operations-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.operations-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    color: var(--grid-head-ink);
    background: #e8eef4;
    border: 1px solid #b6c0ca;
    text-align: left;
    white-space: nowrap;
}

.operations-grid td {
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border: 1px solid #d4dbe3;
    vertical-align: top;
}

.operations-grid small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.operation-complete td {
    color: var(--muted);
    background: #eef2f5;
}

.operation-blocked td {
    background: #fff8df;
}

.operation-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.operation-pill.ok {
    color: #143f28;
    background: #dff2df;
    border-color: #8ab98a;
}

.operation-pill.ready {
    color: #08345c;
    background: #dbefff;
    border-color: #83bce6;
}

.operation-pill.blocked {
    color: #5d4300;
    background: #ffe7a3;
    border-color: #d3a52c;
}

.operation-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ui-gap);
}

.operation-actions span {
    color: var(--muted);
    font-size: 12px;
}

.gate-journey-panel {
    background: #ffffff;
    border: 1px solid var(--line);
}

.gate-journey-panel summary {
    min-height: var(--control-height);
    padding: var(--button-pad-y) var(--compact-pad);
    color: var(--label-ink);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.gate-grid {
    border-top: 1px solid var(--line);
}

.grid-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border-top: 1px solid var(--line);
    overscroll-behavior: contain;
}

.stock-top-scroll {
    flex: 0 0 auto;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f5f7fa;
    border-bottom: 1px solid var(--line);
}

.stock-top-scroll > div {
    height: 1px;
}

.stock-grid-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.worklist-window {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    min-height: calc(100vh - var(--header-height));
    overflow: hidden;
}

.worklist-panel {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    background: var(--panel);
}

.worklist-filter-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--ui-gap);
    align-items: start;
    padding: var(--panel-pad);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.worklist-filter-grid .filter-field {
    grid-column: span 2;
}

.worklist-filter-grid .filter-field-sm {
    grid-column: span 1;
}

.worklist-filter-grid .worklist-search {
    grid-column: span 3;
}

.worklist-search-multiple {
    grid-column: span 4;
}

.worklist-search-multiple textarea {
    min-height: var(--control-height);
    max-height: 72px;
    resize: vertical;
}

.worklist-checks {
    grid-column: span 8;
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: var(--ui-gap);
    align-self: stretch;
}

.worklist-checks .check {
    min-height: var(--control-height);
    padding: var(--button-pad-y) var(--compact-pad);
    background: #ffffff;
    border: 1px solid var(--line);
    font-weight: 700;
}

.worklist-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 360px) minmax(110px, 140px) auto auto auto;
    gap: var(--ui-gap);
    align-items: end;
    padding: var(--panel-pad);
    background: var(--panel);
    border-bottom: 1px solid var(--line-strong);
}

.worklist-search {
    grid-column: auto;
}

.worklist-outstanding {
    min-height: var(--control-height);
    padding: var(--button-pad-y) var(--compact-pad);
    background: #ffffff;
    border: 1px solid var(--line);
    font-weight: 700;
}

.worklist-statusbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ui-gap);
    padding: var(--compact-pad) var(--panel-pad);
    background: var(--panel-2);
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}

.worklist-statusbar span {
    white-space: nowrap;
}

.worklist-grid-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border-top: 1px solid var(--line);
}

.worklist-top-scroll {
    flex: 0 0 auto;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #f5f7fa;
    border-bottom: 1px solid var(--line);
}

.worklist-top-scroll > div {
    height: 1px;
}

.worklist-grid-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.worklist-grid {
    width: 100%;
    min-width: 1180px;
    border-collapse: collapse;
    font-size: var(--grid-font);
}

.worklist-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    color: var(--grid-head-ink);
    background: #e8eef4;
    border: 1px solid #a7b2bd;
    text-align: left;
    white-space: nowrap;
}

.worklist-grid td {
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border: 1px solid #ccd4dd;
    vertical-align: top;
}

.worklist-grid small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.row-action {
    display: grid;
    grid-template-columns: minmax(58px, 76px) auto;
    gap: calc(var(--ui-gap) / 2);
    align-items: center;
}

.row-action select {
    min-height: max(22px, calc(var(--control-height) - 2px));
    padding: var(--field-pad-y) var(--field-pad-x);
    font-size: var(--grid-font);
}

.row-action .row-action-button {
    min-height: max(22px, calc(var(--control-height) - 2px));
    padding: var(--button-pad-y) var(--field-pad-x);
    font-size: var(--grid-font);
}

.row-action small {
    grid-column: 1 / -1;
}

.empty-grid {
    padding: 18px;
    color: var(--muted);
}

.stock-grid {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--grid-font);
}

.stock-grid th {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0;
    color: var(--grid-head-ink);
    background: #edf2f6;
    border: 1px solid #a7b2bd;
    text-align: left;
    white-space: nowrap;
}

.stock-grid th.sorted {
    background: #dcebf8;
}

.select-col {
    width: 54px;
    min-width: 54px;
    max-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.grid-select-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--ui-gap) / 2);
    min-height: var(--control-height);
    width: 100%;
    padding: var(--field-pad-y) var(--field-pad-x);
    font-weight: 700;
}

.grid-select-all input,
.select-col input {
    width: 14px;
    min-height: 14px;
}

.sort-header,
.sort-static {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ui-gap) / 2);
    min-height: var(--control-height);
    width: 100%;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    color: inherit;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.sort-header {
    cursor: pointer;
}

.sort-header:hover {
    background: rgba(0, 103, 177, 0.13);
}

.sort-indicator {
    color: var(--accent-dark);
    font-size: 10px;
}

.sort-position {
    display: inline-grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    color: #ffffff;
    background: var(--accent);
    border-radius: 999px;
    font-size: 10px;
}

.stock-grid td {
    max-width: 260px;
    padding: var(--cell-pad-y) var(--cell-pad-x);
    border: 1px solid #ccd4dd;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-grid td.cell-search-hit {
    box-shadow: inset 0 0 0 2px #f1c400;
}

.stock-grid td.cell-search-summary {
    max-width: 360px;
    color: #4b3b00;
    background: #fff3a3;
    font-weight: 700;
}

.stock-grid tr.row-selected td {
    background: #dcecff;
    box-shadow: inset 0 1px 0 #6ca7df, inset 0 -1px 0 #6ca7df;
}

.stock-grid tr.row-selected td.select-col {
    background: #b8d7f5;
    box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 #6ca7df, inset 0 -1px 0 #6ca7df;
}

.stock-grid tr.row-selected td.cell-stop {
    background: var(--stop);
}

.stock-grid tr.row-selected td.cell-warning {
    background: var(--warn);
}

.stock-grid tr.row-selected td.cell-ok {
    background: var(--ok);
}

.stock-grid tr:hover td {
    background: #cfe4f7;
}

.stock-grid tr:hover td.cell-stop {
    background: var(--stop);
}

.stock-grid tr:hover td.cell-warning {
    background: var(--warn);
}

.stock-grid tr:hover td.cell-ok {
    background: var(--ok);
}

.stock-grid tr:hover td.cell-search-hit {
    box-shadow: inset 0 0 0 2px #f1c400;
}

.stock-grid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--panel);
    font-weight: 700;
}

@media (max-width: 1400px) {
    .filter-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .filter-field,
    .filter-field-sm {
        grid-column: span 2;
    }

    .stock-mode,
    .stock-options {
        grid-column: span 4;
    }

    .date-box,
    .linked-types {
        grid-column: span 3;
    }

    .search-box {
        grid-column: span 2;
        grid-template-columns: minmax(88px, 104px) minmax(150px, 1fr);
    }

    .linked-types {
        grid-template-columns: repeat(3, minmax(76px, 1fr));
    }

    .legend-details {
        grid-column: span 8;
    }

    .legend-box {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .order-creation-box {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .legacy-action-map {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .order-template-field {
        grid-column: 1 / -1;
    }

    .worklist-filter-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .worklist-filter-grid .filter-field,
    .worklist-filter-grid .filter-field-sm {
        grid-column: span 2;
    }

    .worklist-filter-grid .worklist-search,
    .worklist-search-multiple,
    .worklist-checks {
        grid-column: 1 / -1;
    }

    .worklist-checks {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .worklist-toolbar {
        grid-template-columns: 1fr 120px repeat(3, auto);
    }
}

@media (max-width: 900px) {
    .home-shell,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .filter-field,
    .filter-field-sm,
    .stock-mode,
    .stock-options,
    .date-box,
    .linked-types,
    .search-box,
    .legend-details {
        grid-column: 1 / -1;
    }

    .date-box,
    .search-box,
    .linked-types,
    .legend-box,
    .order-creation-box,
    .legacy-action-map {
        grid-template-columns: 1fr;
    }

    .order-template-field {
        grid-column: auto;
    }

    .toolbar {
        align-items: stretch;
    }

    .rows-per-page,
    .pager,
    .record-count,
    .grid-search-strip {
        width: 100%;
    }

    .grid-search-strip {
        grid-template-columns: 1fr;
    }

    .grid-search-field {
        grid-template-columns: 1fr;
    }

    .pager {
        flex-wrap: wrap;
    }

    .record-count {
        margin-left: 0;
    }

    .worklist-filter-grid,
    .worklist-toolbar {
        grid-template-columns: 1fr;
    }

    .worklist-filter-grid .filter-field,
    .worklist-filter-grid .filter-field-sm,
    .worklist-filter-grid .worklist-search,
    .worklist-search-multiple,
    .worklist-checks {
        grid-column: 1 / -1;
    }

    .worklist-checks {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .app-header,
    .window-title {
        align-items: flex-start;
        flex-direction: column;
        height: auto;
        padding: 10px 12px;
    }

    main,
    .stock-window {
        height: auto;
        min-height: auto;
        overflow: visible;
    }

    .grid-shell {
        max-height: 70vh;
        min-height: 320px;
    }

    .pager-button {
        flex: 1 1 110px;
    }

    .brand {
        font-size: 14px;
    }

    .app-header nav {
        justify-content: flex-start;
    }

    .nav-group {
        flex-wrap: wrap;
        padding-left: 0;
        border-left: 0;
    }
}

html[data-ui-tone="dark"] .home-shell::before {
    background: linear-gradient(90deg, rgba(5, 10, 17, 0.92), rgba(5, 10, 17, 0.5) 48%, rgba(5, 10, 17, 0.18));
}

html[data-ui-tone="dark"] .app-header nav a {
    border-color: #31465a;
}

html[data-ui-tone="dark"] select,
html[data-ui-tone="dark"] input,
html[data-ui-tone="dark"] textarea {
    color-scheme: dark;
}

html[data-ui-tone="dark"] .button.ghost,
html[data-ui-tone="dark"] .row-action-menu,
html[data-ui-tone="dark"] .port-lookup-popup,
html[data-ui-tone="dark"] .product-lookup-popup {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
}

html[data-ui-tone="dark"] .button.ghost:hover,
html[data-ui-tone="dark"] .row-action-menu button:not(:disabled):hover,
html[data-ui-tone="dark"] .orders-grid tbody tr:hover,
html[data-ui-tone="dark"] .stock-grid tr:hover td {
    background: #1b3b55;
}

html[data-ui-tone="dark"] .orders-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .stock-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .compact-grid tbody tr:nth-child(even) {
    background: #151f2b;
}

html[data-ui-tone="dark"] .orders-grid tbody tr.selected td,
html[data-ui-tone="dark"] .stock-grid tr.row-selected td,
html[data-ui-tone="dark"] .vcm-grid tr.selected td {
    background: #183b5a;
    outline-color: #3b82bd;
    box-shadow: inset 0 0 0 1px #3b82bd;
}

html[data-ui-tone="dark"] .orders-toolbar,
html[data-ui-tone="dark"] .toolbar,
html[data-ui-tone="dark"] .worklist-toolbar,
html[data-ui-tone="dark"] .grid-search-strip,
html[data-ui-tone="dark"] .order-preflight,
html[data-ui-tone="dark"] .order-preflight.ready {
    background: var(--panel-2);
}

html[data-ui-tone="dark"] .orders-filter-title,
html[data-ui-tone="dark"] .row-action-menu-title,
html[data-ui-tone="dark"] .port-lookup-popup-header,
html[data-ui-tone="dark"] .port-lookup-empty {
    color: var(--ink);
    background: var(--panel-2);
}

html[data-ui-tone="dark"] .row-action-menu button {
    color: var(--ink);
    border-bottom-color: var(--line);
}

html[data-ui-tone="dark"] .notice {
    color: #f8e8b1;
    background: #3a2e12;
    border-color: #8f6725;
}

html[data-ui-tone="dark"] .notice-close {
    color: #f8e8b1;
    background: #4b3b16;
    border-color: #8f6725;
}

html[data-ui-tone="dark"] .notice-close:hover,
html[data-ui-tone="dark"] .notice-close:focus-visible {
    background: #5d481a;
    border-color: #bf8e2b;
}

html[data-ui-tone="dark"] .orders-placeholder,
html[data-ui-tone="dark"] .orders-card,
html[data-ui-tone="dark"] .vcm-image-placeholder {
    background: var(--surface);
}

html[data-ui-tone="dark"] .window-title,
html[data-ui-tone="dark"] .orders-window,
html[data-ui-tone="dark"] .orders-panel,
html[data-ui-tone="dark"] .stock-window,
html[data-ui-tone="dark"] .worklist-window,
html[data-ui-tone="dark"] .worklist-panel,
html[data-ui-tone="dark"] .vcm-window,
html[data-ui-tone="dark"] .legacy-panel,
html[data-ui-tone="dark"] .tab-panels,
html[data-ui-tone="dark"] .tab-panel,
html[data-ui-tone="dark"] fieldset,
html[data-ui-tone="dark"] details,
html[data-ui-tone="dark"] .filter-grid,
html[data-ui-tone="dark"] .orders-filter-rail,
html[data-ui-tone="dark"] .orders-new-order,
html[data-ui-tone="dark"] .orders-requirements,
html[data-ui-tone="dark"] .orders-title-requirements,
html[data-ui-tone="dark"] .orders-title-field,
html[data-ui-tone="dark"] .orders-title-state,
html[data-ui-tone="dark"] .orders-info-panel,
html[data-ui-tone="dark"] .orders-info-subpanel,
html[data-ui-tone="dark"] .orders-placeholder-panel,
html[data-ui-tone="dark"] .orders-grid-shell,
html[data-ui-tone="dark"] .orders-grid-scroll,
html[data-ui-tone="dark"] .orders-top-scroll,
html[data-ui-tone="dark"] .orders-product-tabs-shell,
html[data-ui-tone="dark"] .orders-product-subpanel,
html[data-ui-tone="dark"] .orders-product-company-panel,
html[data-ui-tone="dark"] .orders-product-mode-panel,
html[data-ui-tone="dark"] .orders-product-options,
html[data-ui-tone="dark"] .orders-product-notes-panel,
html[data-ui-tone="dark"] .orders-product-bottom,
html[data-ui-tone="dark"] .orders-product-child-grids,
html[data-ui-tone="dark"] .orders-product-child-grids section,
html[data-ui-tone="dark"] .orders-product-copy-bar,
html[data-ui-tone="dark"] .orders-product-apply-panel,
html[data-ui-tone="dark"] .orders-product-port-actions fieldset,
html[data-ui-tone="dark"] .orders-product-swap,
html[data-ui-tone="dark"] .orders-product-mini-group,
html[data-ui-tone="dark"] .orders-check-list,
html[data-ui-tone="dark"] .orders-transport-card,
html[data-ui-tone="dark"] .orders-card,
html[data-ui-tone="dark"] .vcm-card,
html[data-ui-tone="dark"] .vcm-form-grid,
html[data-ui-tone="dark"] .vcm-filter-group,
html[data-ui-tone="dark"] .vcm-view-summary,
html[data-ui-tone="dark"] .vcm-grid-wrap,
html[data-ui-tone="dark"] .vcm-overview-wrap,
html[data-ui-tone="dark"] .x-scroll-top,
html[data-ui-tone="dark"] .worklist-filter-grid,
html[data-ui-tone="dark"] .worklist-search-panel,
html[data-ui-tone="dark"] .worklist-statusbar,
html[data-ui-tone="dark"] .worklist-grid-shell,
html[data-ui-tone="dark"] .worklist-grid-scroll,
html[data-ui-tone="dark"] .worklist-checks .check,
html[data-ui-tone="dark"] .worklist-outstanding,
html[data-ui-tone="dark"] .operations-panel,
html[data-ui-tone="dark"] .operations-grid-wrap,
html[data-ui-tone="dark"] .gate-journey-panel,
html[data-ui-tone="dark"] .grid-shell,
html[data-ui-tone="dark"] .grid-scroll,
html[data-ui-tone="dark"] .stock-grid-scroll,
html[data-ui-tone="dark"] .grid-search-strip,
html[data-ui-tone="dark"] .selection-status,
html[data-ui-tone="dark"] .create-progress,
html[data-ui-tone="dark"] .order-preflight,
html[data-ui-tone="dark"] .order-preflight.ready,
html[data-ui-tone="dark"] .preflight-step,
html[data-ui-tone="dark"] .order-template-field,
html[data-ui-tone="dark"] .lookup-panel,
html[data-ui-tone="dark"] .lookup-results,
html[data-ui-tone="dark"] .detail-panel,
html[data-ui-tone="dark"] .legend-box {
    color: var(--ink);
    background: var(--panel);
    border-color: var(--line);
}

html[data-ui-tone="dark"] legend,
html[data-ui-tone="dark"] summary,
html[data-ui-tone="dark"] .orders-title-field > span:first-child,
html[data-ui-tone="dark"] .orders-title-type,
html[data-ui-tone="dark"] .orders-title-order,
html[data-ui-tone="dark"] .orders-requirements.compact legend,
html[data-ui-tone="dark"] .orders-filter-title,
html[data-ui-tone="dark"] .vcm-filter-heading {
    color: var(--ink);
}

html[data-ui-tone="dark"] .orders-title-order,
html[data-ui-tone="dark"] .window-title .kicker {
    color: #72c7ff;
}

html[data-ui-tone="dark"] .orders-grid-shell,
html[data-ui-tone="dark"] .orders-grid-scroll,
html[data-ui-tone="dark"] .grid-shell,
html[data-ui-tone="dark"] .grid-scroll,
html[data-ui-tone="dark"] .stock-grid-scroll,
html[data-ui-tone="dark"] .worklist-grid-shell,
html[data-ui-tone="dark"] .worklist-grid-scroll,
html[data-ui-tone="dark"] .vcm-grid-wrap,
html[data-ui-tone="dark"] .vcm-overview-wrap,
html[data-ui-tone="dark"] .lookup-results,
html[data-ui-tone="dark"] .operations-grid-wrap {
    background: var(--surface);
}

html[data-ui-tone="dark"] .orders-top-scroll,
html[data-ui-tone="dark"] .x-scroll-top,
html[data-ui-tone="dark"] .grid-top-scroll,
html[data-ui-tone="dark"] .stock-top-scroll,
html[data-ui-tone="dark"] .worklist-top-scroll,
html[data-ui-tone="dark"] .toolbar,
html[data-ui-tone="dark"] .worklist-toolbar,
html[data-ui-tone="dark"] .worklist-statusbar,
html[data-ui-tone="dark"] .orders-toolbar,
html[data-ui-tone="dark"] .orders-product-copy-bar,
html[data-ui-tone="dark"] .grid-search-strip,
html[data-ui-tone="dark"] .selection-status,
html[data-ui-tone="dark"] .preflight-step,
html[data-ui-tone="dark"] .order-template-field {
    background: var(--panel-2);
}

html[data-ui-tone="dark"] .orders-grid,
html[data-ui-tone="dark"] .stock-grid,
html[data-ui-tone="dark"] .worklist-grid,
html[data-ui-tone="dark"] .vcm-grid,
html[data-ui-tone="dark"] .compact-grid,
html[data-ui-tone="dark"] .operations-grid {
    color: var(--ink);
    background: var(--surface);
}

html[data-ui-tone="dark"] .orders-grid td,
html[data-ui-tone="dark"] .orders-grid th,
html[data-ui-tone="dark"] .stock-grid td,
html[data-ui-tone="dark"] .stock-grid th,
html[data-ui-tone="dark"] .worklist-grid td,
html[data-ui-tone="dark"] .worklist-grid th,
html[data-ui-tone="dark"] .vcm-grid td,
html[data-ui-tone="dark"] .vcm-grid th,
html[data-ui-tone="dark"] .compact-grid td,
html[data-ui-tone="dark"] .compact-grid th,
html[data-ui-tone="dark"] .operations-grid td,
html[data-ui-tone="dark"] .operations-grid th {
    border-color: var(--line);
}

html[data-ui-tone="dark"] .orders-grid th,
html[data-ui-tone="dark"] .stock-grid th,
html[data-ui-tone="dark"] .worklist-grid th,
html[data-ui-tone="dark"] .vcm-grid th,
html[data-ui-tone="dark"] .compact-grid th,
html[data-ui-tone="dark"] .operations-grid th {
    color: #ffffff;
    background: var(--chrome-2);
}

html[data-ui-tone="dark"] .orders-grid tfoot td,
html[data-ui-tone="dark"] .compact-grid tfoot td,
html[data-ui-tone="dark"] .stock-grid tfoot td,
html[data-ui-tone="dark"] .worklist-grid tfoot td,
html[data-ui-tone="dark"] .grid-summary-menu,
html[data-ui-tone="dark"] .grid-column-menu {
    color: var(--ink);
    background: var(--panel-2);
    border-color: var(--line);
}

html[data-ui-tone="dark"] .grid-summary-menu-title {
    color: var(--muted);
}

html[data-ui-tone="dark"] .grid-sort-badge {
    color: #d7edff;
    background: #164f75;
}

html[data-ui-tone="dark"] .orders-grid tbody tr,
html[data-ui-tone="dark"] .stock-grid tbody tr,
html[data-ui-tone="dark"] .worklist-grid tbody tr,
html[data-ui-tone="dark"] .vcm-grid tbody tr,
html[data-ui-tone="dark"] .compact-grid tbody tr,
html[data-ui-tone="dark"] .operations-grid tbody tr {
    color: var(--ink);
    background: var(--surface);
}

html[data-ui-tone="dark"] .orders-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .stock-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .worklist-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .vcm-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .compact-grid tbody tr:nth-child(even),
html[data-ui-tone="dark"] .operations-grid tbody tr:nth-child(even) {
    background: #151f2b;
}

html[data-ui-tone="dark"] .orders-grid tbody tr.selected td,
html[data-ui-tone="dark"] .orders-grid tbody tr.row-selected td,
html[data-ui-tone="dark"] .stock-grid tr.row-selected td,
html[data-ui-tone="dark"] .worklist-grid tr.selected td,
html[data-ui-tone="dark"] .vcm-grid tr.selected td,
html[data-ui-tone="dark"] .compact-grid tr.selected td {
    color: #f5fbff;
    background: #183b5a;
    outline-color: #3b82bd;
    box-shadow: inset 0 0 0 1px #3b82bd;
}

html[data-ui-tone="dark"] .orders-grid tbody tr:hover,
html[data-ui-tone="dark"] .stock-grid tr:hover td,
html[data-ui-tone="dark"] .worklist-grid tbody tr:hover,
html[data-ui-tone="dark"] .vcm-grid tbody tr:hover,
html[data-ui-tone="dark"] .compact-grid tbody tr:hover,
html[data-ui-tone="dark"] .operations-grid tbody tr:hover {
    color: #f5fbff;
    background: #1b3b55;
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td {
    color: var(--ink);
    background: linear-gradient(0deg, rgba(10, 18, 28, 0.68), rgba(10, 18, 28, 0.68)),
        rgb(var(--order-status-rgb) / 0.38);
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected):nth-child(even) td {
    background: linear-gradient(0deg, rgba(10, 18, 28, 0.58), rgba(10, 18, 28, 0.58)),
        rgb(var(--order-status-rgb) / 0.42);
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td:first-child {
    box-shadow: inset 4px 0 0 rgb(var(--order-status-rgb) / 0.95);
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-status-row[style*="order-status-rgb"]:not(.selected):not(.row-selected):hover td {
    color: #f5fbff;
    background: linear-gradient(0deg, rgba(38, 62, 82, 0.45), rgba(38, 62, 82, 0.45)),
        rgb(var(--order-status-rgb) / 0.46);
}

html[data-ui-tone="dark"] .orders-grid td.order-type-cell[style*="order-type-rgb"] {
    color: #f7fbff;
    background: linear-gradient(0deg, rgba(12, 20, 30, 0.42), rgba(12, 20, 30, 0.42)),
        rgb(var(--order-type-rgb) / 0.5);
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-dead-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td {
    color: #fecaca;
    font-weight: 600;
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-dead-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td:first-child {
    box-shadow: inset 4px 0 0 #f87171;
}

html[data-ui-tone="dark"] .orders-grid tbody tr.order-dead-row[style*="order-status-rgb"]:not(.selected):not(.row-selected) td.order-status-cell {
    color: #ffffff;
    background: #991b1b;
    font-weight: 800;
    text-transform: uppercase;
}

html[data-ui-tone="dark"] .tab.active,
html[data-ui-tone="dark"] .orders-subtab-strip .tab.active,
html[data-ui-tone="dark"] .orders-mode-rail .tab.active {
    color: var(--ink);
    background: var(--panel);
}

html[data-ui-tone="dark"] .tab.muted,
html[data-ui-tone="dark"] .tab:disabled,
html[data-ui-tone="dark"] .orders-product-options .check:has(input:disabled),
html[data-ui-tone="dark"] label:has(input:disabled),
html[data-ui-tone="dark"] .orders-product-status-text,
html[data-ui-tone="dark"] .header-toggle span,
html[data-ui-tone="dark"] .rows-per-page span,
html[data-ui-tone="dark"] .page-status,
html[data-ui-tone="dark"] .grid-search-field span,
html[data-ui-tone="dark"] .filter-field > span,
html[data-ui-tone="dark"] .orders-filter-rail .filter-field > span,
html[data-ui-tone="dark"] .field-label,
html[data-ui-tone="dark"] .orders-form-grid .field-label,
html[data-ui-tone="dark"] .placeholder-action,
html[data-ui-tone="dark"] .orders-find-current,
html[data-ui-tone="dark"] .port-lookup-name,
html[data-ui-tone="dark"] .vcm-form-grid label span,
html[data-ui-tone="dark"] .orders-product-child-grids h3 {
    color: var(--muted);
}

html[data-ui-tone="dark"] .orders-form-grid label,
html[data-ui-tone="dark"] .orders-product-child-grids,
html[data-ui-tone="dark"] .orders-product-copy-bar > span,
html[data-ui-tone="dark"] .orders-product-swap legend,
html[data-ui-tone="dark"] .orders-product-port-actions legend,
html[data-ui-tone="dark"] .orders-product-options-title,
html[data-ui-tone="dark"] .orders-product-option-group > span,
html[data-ui-tone="dark"] .orders-product-mini-group > span,
html[data-ui-tone="dark"] .operations-panel h2,
html[data-ui-tone="dark"] .operation-actions span {
    color: var(--ink);
}

html[data-ui-tone="dark"] select,
html[data-ui-tone="dark"] input,
html[data-ui-tone="dark"] textarea,
html[data-ui-tone="dark"] .icon-button,
html[data-ui-tone="dark"] .orders-date-action button,
html[data-ui-tone="dark"] .input-button-row button {
    color: var(--ink);
    background: var(--field);
    border-color: var(--line-strong);
}

html[data-ui-tone="dark"] select:disabled,
html[data-ui-tone="dark"] input:disabled,
html[data-ui-tone="dark"] textarea:disabled,
html[data-ui-tone="dark"] button:disabled,
html[data-ui-tone="dark"] .button:disabled {
    color: #8497aa;
    background: #172231;
    border-color: #3a4d5f;
    opacity: 1;
}

html[data-ui-tone="dark"] input[type="checkbox"],
html[data-ui-tone="dark"] input[type="radio"] {
    accent-color: var(--accent);
}

html[data-ui-tone="dark"] .button,
html[data-ui-tone="dark"] .placeholder-action.active {
    color: #ffffff;
}

html[data-ui-tone="dark"] .button.ghost {
    color: var(--ink);
    background: var(--field);
    border-color: var(--line-strong);
}

html[data-ui-tone="dark"] .b4-busy-overlay {
    background: color-mix(in srgb, #000 34%, transparent);
}

html[data-ui-theme="space"] .b4-busy-overlay {
    background: color-mix(in srgb, #020613 38%, transparent);
}

html[data-ui-theme="floral"] .b4-busy-overlay {
    background: color-mix(in srgb, #fff8ef 30%, transparent);
}

html[data-ui-tone="dark"] .b4-busy-card {
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.44);
}

html[data-ui-tone="dark"] .sort-header small {
    color: #d7ecff;
    background: #183f5f;
}

html[data-ui-tone="dark"] .busy-bar {
    background: var(--field);
    border-color: #2d8062;
}

html[data-ui-tone="dark"] .developer-feedback {
    color: var(--ink);
    background: #101824;
    border-color: var(--line);
}

html[data-ui-tone="dark"] .orders-requirement-list span:not(.muted-text),
html[data-ui-tone="dark"] .operations-meta span {
    color: var(--ink);
    background: var(--field);
    border-color: var(--line);
}

html[data-ui-tone="dark"] .confirm-warning,
html[data-ui-tone="dark"] .confirmation-required,
html[data-ui-tone="dark"] .completion-prompt,
html[data-ui-tone="dark"] .order-preflight.needs-confirmation,
html[data-ui-tone="dark"] .order-preflight.blocked,
html[data-ui-tone="dark"] .order-create-result.blocked,
html[data-ui-tone="dark"] .operation-result.blocked,
html[data-ui-tone="dark"] .operation-blocked td {
    color: #f8e8b1;
    background: #3a2e12;
    border-color: #8f6725;
}

html[data-ui-tone="dark"] .order-create-result.ready,
html[data-ui-tone="dark"] .operation-result.ready,
html[data-ui-tone="dark"] .operation-complete td {
    color: #dff8ec;
    background: #153d32;
    border-color: #2d8062;
}

html[data-ui-tone="dark"] .operation-pill.ok {
    color: #dff8ec;
    background: #153d32;
    border-color: #2d8062;
}

html[data-ui-tone="dark"] .operation-pill.ready {
    color: #d7ecff;
    background: #14324c;
    border-color: #2b75a8;
}

html[data-ui-tone="dark"] .operation-pill.blocked {
    color: #f8e8b1;
    background: #3a2e12;
    border-color: #8f6725;
}

html[data-ui-tone="dark"] .button.create,
html[data-ui-tone="dark"] .create-progress.ready {
    color: #dff8ec;
    background: #174c38;
    border-color: #2d8062;
}

html[data-ui-tone="dark"] .order-preflight.ready,
html[data-ui-tone="dark"] .preflight-step.done {
    color: #dff8ec;
    background: #153d32;
    border-color: #2d8062;
}

html[data-ui-tone="dark"] .order-preflight.warning,
html[data-ui-tone="dark"] .preflight-step.warning,
html[data-ui-tone="dark"] .order-preflight.needs-input {
    color: #f8e8b1;
    background: #3a2e12;
    border-color: #8f6725;
}

html[data-ui-tone="dark"] .status-pill.ok {
    color: #dff8ec;
    background: #153d32;
    border-color: #2d8062;
}

html[data-ui-tone="dark"] .status-pill.info {
    color: #d7ecff;
    background: #14324c;
    border-color: #2b75a8;
}

html[data-ui-tone="dark"] .status-pill.warn,
html[data-ui-tone="dark"] .required-field-missing {
    color: #f8e8b1;
    background: #3a2e12;
    border-color: #8f6725;
}

html[data-ui-tone="dark"] .cell-stop,
html[data-ui-tone="dark"] .stock-grid tr.row-selected td.cell-stop {
    color: #fff5f1;
    background: #83392e;
}

html[data-ui-tone="dark"] .cell-warning,
html[data-ui-tone="dark"] .stock-grid tr.row-selected td.cell-warning {
    color: #fff6d7;
    background: #75521d;
}

html[data-ui-tone="dark"] .cell-ok,
html[data-ui-tone="dark"] .stock-grid tr.row-selected td.cell-ok {
    color: #e9fff2;
    background: #285f49;
}

html[data-ui-tone="dark"] .cell-dispatch,
html[data-ui-tone="dark"] .stock-grid tr.row-selected td.cell-dispatch {
    color: #dff8ff;
    background: #17495c;
}

html[data-ui-tone="dark"] .grid-search-match {
    color: #fff8c5;
    background: #5f4c13;
    box-shadow: inset 0 0 0 2px #d8b52c;
}

/* Vessel Calls has a dense maintenance header; keep these filters compact. */
body .vcm-filter-bar {
    grid-template-columns: minmax(560px, 0.75fr) minmax(760px, 1.15fr) auto;
    gap: 6px;
}

body .vcm-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 4px 6px;
}

body .vcm-filter-heading {
    align-self: stretch;
    display: grid;
    place-items: center;
    min-width: 58px;
    padding: 0 8px;
    color: #fff;
    background: var(--chrome);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
}

body .vcm-filter-bar .filter-field,
body .vcm-filter-bar .filter-field.compact {
    grid-column: auto;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 3px;
    width: 136px;
}

body .vcm-filter-bar .filter-field.date {
    grid-template-columns: 28px minmax(0, 1fr);
    width: 124px;
}

body .vcm-filter-bar .filter-field > span {
    font-size: 0.7rem;
    line-height: 1;
    text-align: right;
}

body .vcm-filter-bar input,
body .vcm-filter-bar select {
    height: 23px;
    padding-top: 1px;
    padding-bottom: 1px;
}

body .vcm-filter-bar input[type="date"] {
    width: 100%;
}

body .vcm-filter-bar .check {
    flex: 0 0 auto;
    max-width: none;
    min-height: 22px;
    font-size: 0.74rem;
    line-height: 1.12;
    align-items: center;
    white-space: nowrap;
}

body .vcm-filter-bar .check:has([name="Filters.UseCallDates"]) {
    flex-basis: auto;
    max-width: none;
}

/* Keep Vessel Calls edit panels bounded inside their cards. */
body .vcm-card {
    overflow: hidden;
}

body .vcm-form-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px 6px;
    min-width: 0;
    overflow: hidden;
    padding: 6px;
}

body .vcm-form-grid label {
    grid-column: span 2;
    min-width: 0;
    width: auto;
}

body .vcm-form-grid label span {
    min-width: 0;
    font-size: 0.74rem;
    line-height: 1.1;
}

body .vcm-form-grid .short {
    grid-column: span 1;
    width: auto;
}

body .vcm-form-grid .notes {
    grid-column: span 5;
    width: auto;
    max-width: 100%;
}

body .vcm-form-grid.vessel-main,
body .vcm-form-grid.call-main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

body .vcm-form-grid.vessel-main label:not(.short):not(.notes),
body .vcm-form-grid.call-main label:not(.check),
body .vcm-form-grid.call-main label:has(input[type="datetime-local"]) {
    width: auto;
}

body .vcm-form-grid.call-main .check {
    grid-column: span 1;
    width: auto;
}

body .vcm-form-grid .input-button-row {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 3px;
    min-width: 0;
}

body .vcm-form-grid .icon-button {
    width: 24px;
    min-width: 24px;
    height: max(22px, calc(var(--control-height) - 5px));
    padding: 0;
}

/* Check-In-Out */
.checkin-window {
    min-height: calc(100vh - var(--header-height));
    color: var(--ink);
    background: var(--bg);
}

.checkin-title-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 10px;
    font-size: 0.84rem;
}

.checkin-title-state span {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}

.checkin-title-state strong {
    color: var(--accent-dark);
}

.checkin-shell {
    display: grid;
    gap: 6px;
    padding: 6px;
}

.checkin-command-bar,
.checkin-details-grid,
.checkin-main-grid,
.checkin-lower-grid {
    display: grid;
    gap: 6px;
}

.checkin-command-bar {
    grid-template-columns: minmax(170px, auto) minmax(220px, auto) minmax(360px, 1fr) auto;
    align-items: stretch;
}

.checkin-mode-card,
.checkin-template-card,
.checkin-actions-card,
.checkin-details-grid fieldset,
.checkin-panel {
    border: 1px solid var(--line);
    background: var(--panel);
}

.checkin-mode-card,
.checkin-template-card,
.checkin-actions-card {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 6px;
}

.checkin-actions-card {
    justify-content: flex-end;
}

.checkin-section-title {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.checkin-radio-tile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--control-height);
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--field);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.checkin-template-card .filter-field {
    flex: 1 1 320px;
    min-width: 240px;
}

.checkin-context-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 6px;
    flex: 1 1 340px;
    min-width: 280px;
}

.checkin-context-grid .filter-field {
    min-width: 0;
    flex-basis: auto;
}

.checkin-template-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    color: var(--muted);
    font-size: 0.72rem;
}

.checkin-template-flags span {
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: var(--panel-2);
    white-space: nowrap;
}

.checkin-template-flags span.is-on {
    color: #063c26;
    background: #b8e6b2;
    border-color: #45a06f;
    font-weight: 800;
}

.checkin-template-flags span.is-off {
    color: var(--muted);
    background: var(--field);
}

.checkin-details-grid {
    grid-template-columns: minmax(420px, 1.1fr) minmax(620px, 1.55fr) minmax(360px, 0.9fr) minmax(260px, 0.65fr);
}

.checkin-details-grid fieldset {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 5px 8px;
    min-width: 0;
    margin: 0;
    padding: 6px 8px 8px;
}

.checkin-details-grid legend {
    padding: 0 4px;
    color: var(--ink);
}

.checkin-details-grid .filter-field {
    width: 132px;
}

.checkin-details-grid .wide-field {
    width: 250px;
}

.checkin-details-grid .text-field {
    width: 190px;
}

.checkin-details-grid .small-field {
    width: 118px;
}

.checkin-details-grid .tiny-field {
    width: 80px;
}

.checkin-details-grid .notes {
    width: 100%;
}

.checkin-details-grid .check {
    min-height: var(--control-height);
    max-width: 170px;
    white-space: normal;
}

.checkin-main-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
}

.checkin-main-grid[data-b4-split-layout] {
    grid-template-columns: minmax(0, var(--b4-split-first, 1.4fr)) 8px minmax(0, 1fr);
    align-items: stretch;
}

.checkin-lower-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.checkin-lower-grid[data-b4-split-layout] {
    grid-template-columns: minmax(0, var(--b4-split-first, 1fr)) 8px minmax(520px, 0.75fr);
    align-items: stretch;
}

.checkin-panel {
    min-width: 0;
    overflow: hidden;
}

.checkin-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

.checkin-grid-shell {
    border: 0;
}

.checkin-grid-scroll {
    max-height: 260px;
}

.checkin-grid-scroll.search {
    max-height: 300px;
}

.checkin-grid-scroll.added {
    max-height: 300px;
}

.checkin-grid th,
.checkin-grid td {
    height: calc(var(--control-height) - 3px);
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: nowrap;
}

.checkin-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.muted-grid-message {
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.checkin-form-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 5px 7px;
    padding: 7px;
}

.checkin-form-grid label {
    display: grid;
    grid-column: span 2;
    gap: 2px;
    min-width: 0;
}

.checkin-form-grid label > span:first-child {
    font-size: 0.74rem;
    font-weight: 700;
}

.checkin-form-grid .tiny-field {
    grid-column: span 1;
}

.checkin-form-grid .small-field {
    grid-column: span 1;
}

.checkin-form-grid .notes {
    grid-column: span 4;
}

.checkin-product-record .orders-subtab-strip {
    border-bottom: 1px solid var(--line);
}

html[data-ui-tone="dark"] .checkin-window {
    background: var(--bg);
}

html[data-ui-tone="dark"] .checkin-mode-card,
html[data-ui-tone="dark"] .checkin-template-card,
html[data-ui-tone="dark"] .checkin-actions-card,
html[data-ui-tone="dark"] .checkin-details-grid fieldset,
html[data-ui-tone="dark"] .checkin-panel {
    border-color: var(--line);
    background: var(--panel);
}

html[data-ui-tone="dark"] .checkin-radio-tile,
html[data-ui-tone="dark"] .checkin-template-flags span {
    border-color: var(--line);
    background: var(--field);
}

html[data-ui-tone="dark"] .checkin-template-flags span.is-on {
    color: #dff8ec;
    background: #174c38;
    border-color: #2d8062;
}

.checkin-lookup-popup {
    position: fixed;
    z-index: 5000;
    width: min(420px, calc(100vw - 16px));
    max-height: 360px;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: var(--control-radius);
    background: var(--surface);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
}

.checkin-lookup-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px;
    padding: 6px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
}

.checkin-lookup-results {
    max-height: 300px;
    overflow: auto;
    padding: 4px;
}

.checkin-lookup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: calc(var(--control-radius) - 2px);
    color: var(--ink);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.checkin-lookup-row:hover {
    background: var(--accent-soft);
}

.checkin-lookup-row span {
    color: var(--muted);
}

.input-button-row input.lookup-unresolved,
input.lookup-unresolved {
    border-color: #c34040;
    background: color-mix(in srgb, #c34040 14%, var(--field));
    box-shadow: inset 3px 0 0 #c34040;
}

.input-button-row input.lookup-resolved,
input.lookup-resolved {
    border-color: color-mix(in srgb, var(--ok) 70%, var(--line-strong));
    background: color-mix(in srgb, var(--ok) 18%, var(--field));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ok) 72%, var(--accent));
}

@media (max-width: 1300px) {
    .checkin-command-bar,
    .checkin-details-grid,
    .checkin-main-grid,
    .checkin-lower-grid {
        grid-template-columns: 1fr;
    }

    .checkin-actions-card {
        justify-content: flex-start;
    }
}

/* Gates screen. Ported UX from BellMobileCore/Pages/Gate, styled with Bellerophon Maritime NX theme variables. */
.gates-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    min-height: 0;
    overflow: hidden;
}

.gate-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.title-inline {
    display: inline-flex;
    margin-left: 10px;
    color: var(--accent);
    font-weight: 800;
    vertical-align: baseline;
}

.gate-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--ui-gap);
    padding: var(--compact-pad);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.gate-toolbar fieldset,
.gate-action-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, max-content));
    align-items: end;
    gap: 6px 10px;
    margin: 0;
    padding: 8px 10px 10px;
    border: 1px solid var(--line);
    border-radius: var(--control-radius);
    background: color-mix(in srgb, var(--surface) 76%, var(--panel));
}

.gate-toolbar label,
.gate-action-fields label {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.gate-toolbar label.wide,
.gate-action-fields label.wide {
    min-width: min(340px, 100%);
}

.gate-toolbar .check {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 5px;
    white-space: normal;
}

.gate-toolbar-actions,
.gate-action-stack {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 6px;
}

.gate-toolbar-actions {
    justify-content: flex-end;
}

.gate-board {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(300px, 0.92fr) minmax(680px, 2fr) minmax(300px, 0.78fr);
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
}

.gate-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--line);
    background: var(--panel);
}

.gate-actions-panel {
    border-right: 0;
}

.gate-panel-head,
.gate-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    background: var(--chrome);
    color: var(--chrome-ink);
}

.gate-panel-head h2,
.gate-section-head h3 {
    margin: 0;
    color: inherit;
    font-size: calc(var(--app-font) + 1px);
}

.gate-panel-head span,
.gate-section-head span {
    color: var(--chrome-muted);
    font-size: calc(var(--app-font) - 1px);
    font-weight: 700;
}

.gate-tile-list {
    display: grid;
    gap: 7px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px;
}

.gate-order-list {
    align-content: start;
    grid-auto-rows: minmax(118px, auto);
    overscroll-behavior: contain;
}

.gate-tile {
    display: grid;
    min-width: 0;
    gap: 5px;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--field) 56%, transparent);
}

button.gate-tile {
    cursor: pointer;
    padding: 9px 10px;
}

button.gate-tile:hover,
.gate-cargo:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.gate-tile.selected {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
}

.gate-tile.waiting {
    border-left: 5px solid var(--warn);
}

.gate-tile.done {
    border-left: 5px solid var(--ok);
    background: color-mix(in srgb, var(--ok) 56%, var(--surface));
}

.gate-tile.partial {
    border-left: 5px solid #6ab8e8;
    background: color-mix(in srgb, #bfe8ff 56%, var(--surface));
}

.gate-tile.problem {
    border-left: 5px solid #e87086;
    background: color-mix(in srgb, #ffc4cf 62%, var(--surface));
}

html[data-ui-tone="dark"] .gate-tile.done {
    background: color-mix(in srgb, var(--ok) 44%, var(--surface));
}

html[data-ui-tone="dark"] .gate-tile.partial {
    background: color-mix(in srgb, #295b78 58%, var(--surface));
}

html[data-ui-tone="dark"] .gate-tile.problem {
    background: color-mix(in srgb, #7d3340 58%, var(--surface));
}

.gate-tile-main,
.gate-progress,
.gate-tile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.gate-tile-main strong,
.gate-tile-main span,
.gate-tile-sub,
.gate-tile-meta span,
.gate-cargo-guid {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gate-tile-main strong {
    color: var(--accent);
    font-size: calc(var(--app-font) + 2px);
}

.gate-tile-main span,
.gate-progress {
    color: var(--muted);
    font-weight: 700;
}

.gate-tile-sub {
    color: var(--ink);
}

.gate-tile-meta {
    color: var(--muted);
    font-size: calc(var(--app-font) - 1px);
}

.gate-cargo-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 260px;
}

.gate-cargo-columns > section {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--line);
}

.gate-cargo-columns > section:last-child {
    border-right: 0;
}

.gate-cargo-list {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    min-height: 0;
}

.gate-cargo {
    position: relative;
    display: grid !important;
    flex: 0 0 220px;
    align-content: start;
    align-items: start !important;
    gap: 4px;
    width: 220px;
    min-width: 220px;
    max-width: 220px !important;
    min-height: 178px;
    padding: 10px 10px 10px 34px;
    font-size: calc(var(--app-font) - 1px);
    line-height: 1.15;
    word-break: normal;
}

label.gate-cargo:has(input[type="checkbox"]) {
    display: grid !important;
    max-width: 220px !important;
    align-content: start !important;
    align-items: start !important;
}

.gate-cargo > input[type="checkbox"] {
    position: absolute;
    top: 10px;
    left: 9px;
    width: 18px;
    min-height: 18px;
}

.gate-cargo-guid {
    font-family: Consolas, "Courier New", monospace;
    color: var(--control-ink);
}

.gate-cargo .gate-tile-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    justify-items: center;
    text-align: center;
}

.gate-cargo .gate-tile-main strong,
.gate-cargo .gate-tile-main span,
.gate-cargo .gate-tile-sub,
.gate-cargo .gate-tile-meta span,
.gate-cargo .gate-cargo-guid {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.gate-cargo .gate-tile-main strong {
    color: var(--ink);
    font-size: calc(var(--app-font) + 1px);
    line-height: 1.08;
}

.gate-cargo .gate-tile-main span,
.gate-cargo-line strong {
    color: var(--accent);
}

.gate-cargo .gate-tile-sub {
    color: var(--muted);
    font-size: calc(var(--app-font) - 2px);
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
}

.gate-cargo-line {
    display: block;
    color: var(--ink);
    text-align: center;
    overflow-wrap: break-word;
    word-break: normal;
}

.gate-cargo .gate-tile-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    justify-items: center;
    color: var(--muted);
}

.gate-note-flag {
    position: absolute;
    right: 7px;
    bottom: 7px;
    padding: 2px 7px;
    border: 1px solid #b36d00;
    border-radius: 999px;
    color: #1d1400;
    background: #ffbf52;
    font-size: 10px;
    font-weight: 800;
}

.gate-empty-strip,
.gate-warning-strip {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--button-radius);
    font-weight: 800;
    text-align: center;
}

.gate-empty-strip {
    color: var(--muted);
    background: var(--surface);
}

.gate-warning-strip {
    color: #fff16a;
    background: #050505;
    border-color: var(--accent);
}

.gate-journeys {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    border-top: 1px solid var(--line);
}

.gate-journeys .table-scroll {
    flex: 1;
    min-height: 120px;
}

.gate-actions-panel {
    gap: 8px;
    overflow: auto;
    padding-bottom: 8px;
    min-width: 0;
}

.gate-actions-panel .gate-panel-head {
    margin-bottom: 0;
}

.gate-action-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 8px 8px 0;
    min-width: 0;
}

.gate-action-fields textarea {
    min-height: 82px;
    width: 100%;
    resize: vertical;
}

.gate-action-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 8px 8px 0;
    min-width: 0;
}

.gate-action-stack .button {
    min-width: 0;
    width: 100%;
    padding-inline: 8px;
    white-space: normal;
}

.gate-action-fields label {
    min-width: 0;
}

.gate-action-fields label.wide,
.gate-action-fields label:has(textarea) {
    grid-column: 1 / -1;
    min-width: 0;
}

.gate-action-fields input,
.gate-action-fields select,
.gate-action-fields textarea {
    min-width: 0;
    max-width: 100%;
}

.gate-action-fields .button,
.gate-action-fields button {
    max-width: 100%;
}

.empty-state {
    margin: 0;
    padding: 12px;
    color: var(--muted);
}

@media (max-width: 1250px) {
    .gate-board {
        grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.8fr);
    }

    .gate-actions-panel {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 820px) {
    .gate-toolbar,
    .gate-board,
    .gate-cargo-columns {
        grid-template-columns: 1fr;
    }

    .gate-toolbar-actions {
        justify-content: flex-start;
    }

    .gate-panel {
        min-height: 280px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}

/* Marine Gate. Ported from Module - Marine Terminal/frmMarineGate with guarded write actions. */
.marine-gate-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    background: var(--workspace);
}

.marine-gate-filter-shell {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--panel);
}

.marine-gate-filter-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1.6fr) minmax(420px, 1fr);
    gap: 8px;
}

.marine-gate-filter-grid fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, max-content));
    align-items: end;
    gap: 6px 8px;
    min-width: 0;
}

.marine-gate-filter-grid .filter-field {
    width: min(220px, 100%);
}

.marine-gate-filter-grid .filter-field.compact,
.marine-gate-filter-grid .filter-field.date {
    width: 148px;
}

.marine-gate-filter-grid .filter-field input,
.marine-gate-filter-grid .filter-field select {
    width: 100%;
}

.marine-gate-filter-actions {
    display: flex;
    align-items: end;
    gap: 6px;
}

.marine-gate-status-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr);
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-strong);
    background: var(--surface);
}

.marine-gate-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
    gap: 5px 8px;
    align-items: end;
}

.marine-gate-status-grid label {
    width: 148px;
    min-width: 0;
}

.marine-gate-status-grid input,
.marine-gate-status-band textarea {
    width: 100%;
}

.marine-gate-status-band textarea {
    min-height: 68px;
    resize: vertical;
}

.marine-gate-action-bar,
.marine-gate-repair-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 78%, var(--surface));
}

.button.warning {
    color: #fff;
    background: color-mix(in srgb, var(--warn) 76%, #000);
    border-color: color-mix(in srgb, var(--warn) 64%, #000);
}

.marine-gate-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 0.45fr) minmax(520px, 1.55fr);
    flex: 1;
    min-height: 0;
}

.marine-gate-orders-pane,
.marine-gate-stock-pane {
    min-width: 0;
    min-height: 0;
    border-right: 1px solid var(--line-strong);
    overflow: hidden;
}

.marine-gate-stock-pane {
    display: flex;
    flex-direction: column;
    border-right: 0;
}

.marine-gate-grid-shell {
    height: 100%;
    min-height: 0;
}

.marine-gate-grid-scroll {
    max-height: 100%;
    min-height: 0;
}

.marine-gate-orders-pane .marine-gate-grid-shell {
    height: 100%;
}

.marine-gate-orders-pane .marine-gate-grid-scroll {
    height: calc(100% - 28px);
}

.marine-gate-grid th,
.marine-gate-grid td {
    height: var(--grid-row-height);
    line-height: 1.15;
    white-space: nowrap;
}

.marine-gate-tabs {
    flex: 0 0 auto;
}

.marine-gate-tab-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.marine-gate-tab-panel.active {
    display: flex;
    flex-direction: column;
}

.marine-gate-help-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    min-height: 0;
}

.marine-gate-help-panel h2 {
    margin: 0;
    font-size: calc(var(--app-font) + 2px);
}

.marine-gate-help-panel textarea {
    flex: 1;
    min-height: 260px;
    width: 100%;
    resize: none;
}

.marine-gate-repair-panel {
    align-items: end;
    border-bottom: 0;
}

.marine-gate-repair-panel .filter-field {
    width: 150px;
}

.marine-gate-type-discharged td,
.marine-gate-type-discharged {
    background: color-mix(in srgb, #4cb985 22%, var(--field));
}

.marine-gate-type-loading td,
.marine-gate-type-loading {
    background: color-mix(in srgb, #37a6e8 20%, var(--field));
}

.marine-gate-type-to-discharge td,
.marine-gate-type-to-discharge {
    background: color-mix(in srgb, #f2d166 24%, var(--field));
}

.marine-gate-type-loaded td,
.marine-gate-type-loaded {
    background: color-mix(in srgb, #91a7ff 20%, var(--field));
}

.marine-gate-type-to-restow td,
.marine-gate-type-to-restow {
    background: color-mix(in srgb, #f0a35f 24%, var(--field));
}

.marine-gate-type-restowed td,
.marine-gate-type-restowed {
    background: color-mix(in srgb, #d990ff 22%, var(--field));
}

.marine-gate-type-rob td,
.marine-gate-type-rob {
    background: color-mix(in srgb, var(--accent) 16%, var(--field));
}

@media (max-width: 1120px) {
    .marine-gate-filter-grid,
    .marine-gate-status-band,
    .marine-gate-workspace {
        grid-template-columns: 1fr;
    }

    .marine-gate-orders-pane {
        min-height: 240px;
        border-right: 0;
        border-bottom: 1px solid var(--line-strong);
    }
}

/* Marine Gate v2 layout: old-form tabbed controls plus a call browser grid. */
.marine-gate-control-tabs {
    border: 1px solid var(--line-strong);
    border-bottom: 0;
}

.marine-gate-control-tabs .tab {
    min-width: 116px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.marine-gate-control-panel {
    display: none;
    border: 1px solid var(--line-strong);
    background: var(--panel);
}

.marine-gate-control-panel.active {
    display: block;
}

.marine-gate-control-panel fieldset {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.marine-gate-filter-grid,
.marine-gate-extra-grid,
.marine-gate-display-grid,
.marine-gate-finalize-grid,
.marine-gate-repair-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, max-content));
    align-items: end;
    gap: 5px 8px;
    min-height: 52px;
    padding: 6px;
}

.marine-gate-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(126px, max-content));
}

.marine-gate-filter-grid .filter-field,
.marine-gate-display-grid .filter-field,
.marine-gate-extra-grid .filter-field,
.marine-gate-repair-grid .filter-field {
    width: 168px;
}

.marine-gate-filter-grid .filter-field.lookup {
    width: 220px;
}

.marine-gate-filter-grid .filter-field.tiny,
.marine-gate-display-grid .filter-field.tiny {
    width: 92px;
}

.marine-gate-filter-grid .filter-field.date {
    width: 128px;
}

.marine-gate-extra-grid .check,
.marine-gate-display-grid .check,
.marine-gate-repair-grid .check {
    max-width: 210px;
    min-height: var(--control-height);
    white-space: normal;
}

.marine-gate-finalize-grid {
    grid-template-columns: auto auto minmax(420px, 1fr);
}

.marine-gate-finalize-grid textarea {
    width: 100%;
    min-height: 36px;
    max-height: 78px;
    resize: vertical;
}

.marine-gate-call-browser {
    flex: 0 0 auto;
    min-height: 0;
    max-height: 190px;
    overflow: hidden;
    border-bottom: 1px solid var(--line-strong);
}

.marine-gate-call-grid-shell {
    height: 100%;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.marine-gate-call-grid-scroll {
    max-height: 150px;
}

.marine-gate-call-grid tr[data-marine-call-id] {
    cursor: pointer;
}

.marine-gate-call-grid tr[data-marine-call-id]:hover td {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--field));
}

.marine-gate-status-band {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.28fr);
    padding: 5px 8px;
}

.marine-gate-status-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 5px 8px;
    min-width: 0;
}

.marine-gate-status-grid label {
    flex: 0 0 136px;
    min-width: 0;
}

.marine-gate-status-grid label.wide {
    flex-basis: 172px;
}

.marine-gate-status-grid label.code,
.marine-gate-status-grid label.status {
    flex-basis: 104px;
}

.marine-gate-status-grid label.date {
    flex-basis: 130px;
}

.marine-gate-status-grid label.tiny {
    flex-basis: 70px;
}

.marine-gate-status-grid label > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marine-gate-status-grid input {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marine-gate-status-band textarea {
    min-height: 48px;
    max-height: 76px;
    min-width: 260px;
}

.marine-gate-workspace {
    min-height: 360px;
}

.marine-gate-lookup-popup {
    z-index: 7000;
}

/* Marine Gate refinement: compact filter strip, vertical order/product split. */
.marine-gate-control-panel legend {
    display: none;
}

.marine-gate-filter-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 10px;
    min-height: 0;
    padding: 7px 8px;
}

.marine-gate-filter-grid .filter-field {
    width: 140px;
}

.marine-gate-filter-grid .filter-field.lookup {
    width: 180px;
}

.marine-gate-filter-grid .filter-field.tiny {
    width: 82px;
}

.marine-gate-filter-grid .filter-field.date {
    width: 112px;
}

.marine-gate-filter-grid .check {
    min-height: var(--control-height);
    align-items: center;
}

.marine-gate-filter-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 5px;
}

.marine-gate-filter-actions .button {
    min-height: var(--control-height);
    min-width: 66px;
    padding-inline: 8px;
    white-space: nowrap;
}

.marine-gate-filter-grid .lookup-unresolved {
    background: color-mix(in srgb, var(--danger) 11%, var(--field));
    border-color: color-mix(in srgb, var(--danger) 62%, var(--line-strong));
}

.marine-gate-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(92px, var(--b4-split-first, 150px)) 8px minmax(280px, 1fr);
    min-height: calc(100vh - 390px);
    align-items: stretch;
}

.marine-gate-orders-pane,
.marine-gate-stock-pane {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 0;
}

.marine-gate-orders-pane {
    border-bottom: 0;
}

.marine-gate-orders-pane .b4-grid,
.marine-gate-stock-pane .b4-grid {
    min-height: 0;
}

.marine-gate-orders-pane .b4-grid-scroll {
    max-height: none;
    height: 100%;
}

.marine-gate-stock-pane {
    display: flex;
    flex-direction: column;
}

.marine-gate-tabs {
    flex: 0 0 auto;
}

.marine-gate-tab-panel .b4-grid,
.marine-gate-tab-panel .b4-grid-shell,
.marine-gate-tab-panel .b4-grid-scroll {
    min-height: 0;
}

.marine-gate-tab-panel .b4-grid-scroll {
    max-height: none;
    flex: 1;
}

.marine-gate-workspace .b4-panel-splitter.horizontal {
    margin: 0;
    border-radius: 0;
}

@media (min-width: 1500px) {
    .marine-gate-filter-grid .filter-field {
        width: 168px;
    }

    .marine-gate-filter-grid .filter-field.lookup {
        width: 250px;
    }

    .marine-gate-filter-grid .filter-field.tiny {
        width: 96px;
    }

    .marine-gate-filter-grid .filter-field.date {
        width: 128px;
    }
}

/* Marine Gate vessel detail band mirrors frmMarineGate's grouped vessel panel. */
.marine-gate-status-band {
    display: block;
    padding: 3px 4px;
    background: var(--panel);
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}

.marine-gate-vessel-details {
    display: grid;
    grid-template-columns:
        minmax(210px, 230px)
        minmax(230px, 250px)
        minmax(210px, 240px)
        90px
        minmax(170px, 180px)
        minmax(240px, 1fr);
    align-items: start;
    gap: 5px 7px;
    margin: 0;
    padding: 4px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: color-mix(in srgb, var(--panel) 86%, var(--surface));
}

.marine-gate-vessel-details legend {
    display: block;
    padding-inline: 5px;
    color: var(--label-ink);
    font-size: calc(var(--app-font) - 1px);
    font-weight: 700;
}

.marine-gate-vessel-identity,
.marine-gate-vessel-numbers,
.marine-gate-vessel-status,
.marine-gate-vessel-call-status {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.marine-gate-vessel-identity label,
.marine-gate-vessel-numbers label,
.marine-gate-vessel-status label,
.marine-gate-vessel-call-status label {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.marine-gate-vessel-numbers label {
    grid-template-columns: 70px minmax(44px, 1fr);
}

.marine-gate-vessel-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 6px;
}

.marine-gate-vessel-numbers label:first-child {
    grid-column: 1 / -1;
    grid-template-columns: 90px minmax(0, 1fr);
}

.marine-gate-vessel-status label,
.marine-gate-vessel-call-status label {
    grid-template-columns: 86px minmax(0, 1fr);
}

.marine-gate-vessel-call-status label:last-child {
    align-items: start;
}

.marine-gate-vessel-details label > span:first-child,
.marine-gate-vessel-details .check {
    min-width: 0;
    color: var(--label-ink);
    font-size: calc(var(--app-font) - 1px);
    font-weight: 600;
    line-height: 1.05;
    text-align: right;
    white-space: nowrap;
}

.marine-gate-vessel-details input,
.marine-gate-vessel-details textarea {
    width: 100%;
    min-width: 0;
    min-height: 22px;
    padding: 2px 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marine-gate-vessel-details textarea {
    min-height: 44px;
    max-height: 58px;
    resize: none;
}

.marine-gate-vessel-actions {
    display: grid;
    gap: 5px;
}

.marine-gate-vessel-actions .button {
    min-height: 42px;
    width: 100%;
    padding: 3px 5px;
    white-space: normal;
}

.marine-gate-vessel-details .check {
    grid-template-columns: 16px minmax(0, 1fr);
    justify-content: start;
    text-align: left;
}

.marine-gate-vessel-details .check.muted {
    color: var(--disabled-ink);
}

@media (max-width: 1420px) {
    .marine-gate-vessel-details {
        grid-template-columns:
            minmax(210px, 1fr)
            minmax(230px, 1fr)
            minmax(210px, 0.9fr)
            90px
            minmax(170px, 0.8fr);
    }

    .marine-gate-vessel-call-status {
        grid-column: 1 / -1;
        grid-template-columns: minmax(220px, 0.35fr) minmax(220px, 0.35fr) minmax(320px, 1fr);
    }
}

@media (max-width: 980px) {
    .marine-gate-vessel-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .marine-gate-vessel-call-status {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1180px) {
    .marine-gate-finalize-grid {
        grid-template-columns: 1fr;
    }

    .marine-gate-call-browser {
        max-height: 240px;
    }

    .marine-gate-call-grid-scroll {
        max-height: 196px;
    }
}