/* Warm woodland and deep-water palettes, with original vector details.
   Illustrations belong to chrome and control edges; data remains unpatterned. */
html[data-ui-theme="autumn"] {
    color-scheme: light;
    --bg: #f0e7d8;
    --chrome: #443222;
    --chrome-2: #5b412b;
    --surface: #fffaf0;
    --panel: #f7eddd;
    --panel-2: #ebdcc6;
    --field: #fffdf7;
    --line: #c8b498;
    --line-strong: #9b7b55;
    --ink: #3d2d23;
    --muted: #75614c;
    --label-ink: #59422e;
    --control-ink: #3d2d23;
    --grid-head-ink: #fff6e6;
    --chrome-ink: #fff6e6;
    --chrome-muted: #e3ccb2;
    --sort-badge-ink: #61401f;
    --disabled-ink: #8c7b67;
    --scroll-track: #eee2cf;
    --scroll-thumb: #b99b73;
    --scroll-thumb-hover: #8e6d45;
    --accent: #964923;
    --accent-dark: #74351b;
    --accent-soft: #f4dec2;
    --ok: #c3d3a4;
    --warn: #edcc83;
    --stop: #ecc0ac;
    --dispatch: #c2d5cc;
    --tab-hover-bg: #efddc3;
    --tab-selected-bg: #e7c99f;
    --tab-selected-hover-bg: #dfba88;
    --tab-marker: #8b4828;
    --nature-glint: #d5a15d;
    --nature-ornament: url("../img/themes/autumn-leaf-acorn.svg");
    --nature-texture: url("../img/themes/autumn-branches.svg");
    --nature-texture-size: 180px 60px;
    --nature-checkbox: url("../img/themes/autumn-check.svg");
    --nature-checkbox-checked: url("../img/themes/autumn-check-selected.svg");
    --nature-launch-start: #674a30;
    --nature-launch-end: #3b2e23;
    --nature-launch-hover-start: #765235;
    --nature-launch-hover-end: #503a29;
    --nature-launch-icon: #f3d49c;
    --nature-launch-muted: #f1dfc7;
}

html[data-ui-theme="ocean"] {
    color-scheme: dark;
    --bg: #071b28;
    --chrome: #09212f;
    --chrome-2: #153c4b;
    --surface: #0d2935;
    --panel: #123442;
    --panel-2: #1b4250;
    --field: #0a2431;
    --line: #335965;
    --line-strong: #6b939c;
    --ink: #e9f7f6;
    --muted: #acccd1;
    --label-ink: #d3eceb;
    --control-ink: #e9f7f6;
    --grid-head-ink: #eafaf7;
    --chrome-ink: #eafaf7;
    --chrome-muted: #b3d7d9;
    --sort-badge-ink: #b0ebe0;
    --disabled-ink: #7f9fa8;
    --scroll-track: #0b2532;
    --scroll-thumb: #3e737d;
    --scroll-thumb-hover: #62a5ac;
    --accent: #126b74;
    --accent-dark: #0c515b;
    --accent-soft: #1c4652;
    --ok: #305b4c;
    --warn: #756139;
    --stop: #794e4e;
    --dispatch: #31566b;
    --tab-hover-bg: #245563;
    --tab-selected-bg: #226673;
    --tab-selected-hover-bg: #2d7480;
    --tab-marker: #9ddfce;
    --nature-glint: #86cfc3;
    --nature-ornament: url("../img/themes/ocean-shell-coral.svg");
    --nature-texture: url("../img/themes/ocean-waves.svg");
    --nature-texture-size: 210px 64px;
    --nature-checkbox: url("../img/themes/ocean-check.svg");
    --nature-checkbox-checked: url("../img/themes/ocean-check-selected.svg");
    --nature-launch-start: #164b5a;
    --nature-launch-end: #0b2c3d;
    --nature-launch-hover-start: #215d68;
    --nature-launch-hover-end: #123c4b;
    --nature-launch-icon: #ade4d9;
    --nature-launch-muted: #c5e3e3;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.app-header, .window-title) {
    background-image: var(--nature-texture);
    background-size: var(--nature-texture-size);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .app-header {
    border-bottom-color: var(--nature-glint);
}

/* The header already owns a stacking context. These backgrounds sit above its
   paint and below its controls, staying inside their own box so menus can open
   beyond the header. Only the artwork moves, never the header or hit areas. */
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .app-header::before,
html[data-ui-theme="ocean"] .app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

html[data-ui-theme="autumn"] .app-header::before {
    background-image: url("../img/themes/autumn-falling-leaves.svg"), url("../img/themes/autumn-falling-leaves.svg");
    background-size: 270px 234px, 405px 351px;
    background-position: 0 -18px, 137px -117px;
    background-repeat: repeat;
    opacity: .72;
    animation: nature-autumn-header-fall 42s linear -17s infinite;
}

@keyframes nature-autumn-header-fall {
    0% { background-position: 0 -18px, 137px -117px; }
    50% { background-position: 9px 99px, 126px 58.5px; }
    100% { background-position: 0 216px, 137px 234px; }
}

html[data-ui-theme="ocean"] .app-header::before {
    background-image:
        linear-gradient(110deg, transparent 18%, #c7fff21f 25%, transparent 34%),
        linear-gradient(105deg, transparent 43%, #9fefe81a 48%, transparent 57%);
    background-size: 420px 100%, 700px 100%;
    background-position: 0 0, 80px 0;
    background-repeat: repeat-x;
    opacity: .45;
    animation: nature-ocean-header-light 17s ease-in-out -6s infinite alternate;
}

html[data-ui-theme="ocean"] .app-header::after {
    background-image: url("../img/themes/ocean-bubbles.svg"), url("../img/themes/ocean-bubbles.svg");
    background-size: 280px 304px, 420px 456px;
    background-position: 0 24px, 139px -173px;
    background-repeat: repeat;
    opacity: .75;
    animation: nature-ocean-header-rise 34s linear -11s infinite;
}

@keyframes nature-ocean-header-light {
    from { background-position: 0 0, 80px 0; opacity: .35; }
    to { background-position: 36px 0, 54px 0; opacity: .6; }
}

@keyframes nature-ocean-header-rise {
    0% { background-position: 0 24px, 139px -173px; }
    50% { background-position: 7px -128px, 130px -401px; }
    100% { background-position: 0 -280px, 139px -629px; }
}

/* Ornament dimensions match the existing theme family and do not resize
   labels, button hit areas or dense table rows. */
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button:not(.ghost):not(.danger):not(.warning) {
    position: relative;
    isolation: isolate;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button:not(.ghost):not(.danger):not(.warning)::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -4px;
    width: 19px;
    height: 19px;
    background: var(--nature-ornament) center / contain no-repeat;
    pointer-events: none;
    transition: transform 180ms ease;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button:not(.ghost):not(.danger):not(.warning):not(:disabled):not([aria-disabled="true"]):not(.disabled):hover::after {
    transform: translateY(-1px) rotate(6deg);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button:not(.ghost):not(.danger):not(.warning):not(:disabled):hover {
    box-shadow: inset 0 0 0 1px var(--nature-glint), 0 2px 5px rgb(0 0 0 / 16%);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button:is(:disabled, [aria-disabled="true"], .disabled)::after {
    opacity: .35;
    transform: none;
    transition: none;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button.ghost {
    color: var(--ink);
    background-color: var(--field);
    border-color: var(--line-strong);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button.ghost:not(:disabled):hover {
    background-color: var(--accent-soft);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(button, .button, input:not([type="checkbox"]), select, textarea):disabled {
    color: var(--disabled-ink);
    background-color: var(--panel-2);
    border-color: var(--line);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .launch-module-symbol {
    position: relative;
    overflow: visible;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .launch-module-symbol::after {
    content: "";
    position: absolute;
    width: 23px;
    height: 23px;
    right: -7px;
    bottom: -5px;
    background: var(--nature-ornament) center / contain no-repeat;
    pointer-events: none;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-module-trigger {
    color: #ffffff;
    background: linear-gradient(125deg, var(--nature-launch-start), var(--nature-launch-end));
    border-color: color-mix(in srgb, var(--nature-launch-icon) 45%, transparent);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-module-trigger:hover,
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-module[open] > .launch-module-trigger {
    background: linear-gradient(125deg, var(--nature-launch-hover-start), var(--nature-launch-hover-end));
    border-color: var(--nature-glint);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-module-symbol {
    color: var(--nature-launch-icon);
    background: rgb(255 255 255 / 8%);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-module-copy small {
    color: var(--nature-launch-muted);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-module-trigger:focus-visible {
    outline-color: var(--nature-launch-icon);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation .launch-tile {
    border-inline-start-color: var(--nature-glint);
}

/* Ocean keeps a dark teal action fill for white button labels. Text links,
   highlighted values and small functional icons use a brighter sea-glass tone. */
html[data-ui-theme="ocean"] :is(
    .legal-page a,
    .orders-port-view-tabs button.active,
    .title-inline,
    .checkin-title-state strong,
    .gate-tile-main strong,
    .gate-cargo .gate-tile-main span,
    .gate-cargo-line strong,
    .order-uploads-hints summary,
    .nx-work-card b,
    .system-options .so-grid a,
    .system-options .so-required,
    .system-options .so-product-summary strong,
    .system-options .so-muted a,
    .vp-powered a:is(:hover, :focus-visible)
) {
    color: var(--nature-glint);
}

html[data-ui-theme="ocean"] .app-header[data-app-header] .nav-menu .b4-icon,
html[data-ui-theme="ocean"] .home-navigation .launch-tile .launch-icon {
    color: var(--nature-glint);
}

/* The tabindex branch also covers custom controls, and gives this theme
   precedence over page-specific focus rules using the darker action color. */
html[data-ui-theme="ocean"] :is(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
    outline-color: var(--line-strong);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.fieldset-panel > legend, .window-title .kicker)::after {
    content: "";
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-inline-start: 7px;
    vertical-align: middle;
    background: var(--nature-ornament) center / contain no-repeat;
    pointer-events: none;
}

/* The decorative acorn/shell never substitutes for a selection state:
   selected controls have a filled body and an explicit high-contrast tick. */
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input[type="checkbox"]:not([role="switch"]) {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-height: 14px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent var(--nature-checkbox) center / contain no-repeat;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input[type="checkbox"]:not([role="switch"]):checked {
    background-image: var(--nature-checkbox-checked);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input[type="checkbox"]:not([role="switch"]):indeterminate {
    border: 1px solid var(--line-strong);
    background-color: var(--accent);
    background-image: linear-gradient(#ffffff, #ffffff);
    background-size: 9px 2px;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--line-strong);
    outline-offset: 3px;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input[type="checkbox"]:disabled {
    background-color: transparent;
    opacity: .5;
    cursor: not-allowed;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input:is([type="radio"], [role="switch"]) {
    accent-color: var(--accent);
}

/* Only colors apply to tabular data: no texture or animation in cells. */
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.orders-grid, .stock-grid, .worklist-grid, .vcm-grid, .compact-grid, .operations-grid) th {
    color: var(--chrome-ink);
    background-color: var(--chrome-2);
    border-color: var(--line-strong);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.orders-grid, .stock-grid, .worklist-grid, .vcm-grid, .compact-grid, .operations-grid) th.sorted {
    background-color: color-mix(in srgb, var(--chrome-2) 80%, var(--accent));
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.orders-grid, .stock-grid, .worklist-grid, .vcm-grid, .compact-grid, .operations-grid) tbody tr:nth-child(even) {
    background-color: var(--panel);
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.orders-grid, .stock-grid, .worklist-grid, .vcm-grid, .compact-grid, .operations-grid) tbody tr:hover {
    color: var(--ink);
    background-color: color-mix(in srgb, var(--accent-soft) 65%, var(--panel));
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .stock-grid tbody tr:hover td {
    color: var(--ink);
    background-color: color-mix(in srgb, var(--accent-soft) 65%, var(--panel));
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.orders-grid, .stock-grid, .worklist-grid, .vcm-grid, .compact-grid, .operations-grid) tbody tr:is(.selected, .row-selected) td {
    color: var(--ink);
    background-color: var(--accent-soft);
    outline-color: var(--line-strong);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* All moving artwork is clipped inside the existing wallpaper, underneath
   the launcher and sign-in panel. User photographs are never replaced. */
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .app-wallpaper > .theme-atmosphere {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
}

html[data-ui-theme="autumn"] .theme-atmosphere {
    background: radial-gradient(ellipse at 80% 12%, #e9b66716, transparent 65%);
}

html[data-ui-theme="autumn"] .theme-atmosphere-layer {
    --nature-fall-height: 580px;
    --nature-fall-drift: 14px;
    position: absolute;
    inset: calc(-1 * var(--nature-fall-height)) -45px 0;
    background: url("../img/themes/autumn-falling-leaves.svg") 0 0 / 660px var(--nature-fall-height) repeat;
    opacity: .4;
    pointer-events: none;
    animation: nature-autumn-fall 88s linear -51s infinite;
}

html[data-ui-theme="autumn"] .theme-atmosphere-layer:nth-child(2) {
    --nature-fall-height: 780px;
    --nature-fall-drift: -24px;
    background-size: 900px var(--nature-fall-height);
    background-position: 213px 0;
    opacity: .61;
    animation-duration: 68s;
    animation-delay: -22s;
}

html[data-ui-theme="autumn"] .theme-atmosphere-layer:nth-child(3) {
    --nature-fall-height: 960px;
    --nature-fall-drift: 34px;
    background-size: 1140px var(--nature-fall-height);
    background-position: 487px 0;
    opacity: .8;
    animation-duration: 52s;
    animation-delay: -37s;
}

@keyframes nature-autumn-fall {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(var(--nature-fall-drift), calc(var(--nature-fall-height) * .5), 0); }
    100% { transform: translate3d(0, var(--nature-fall-height), 0); }
}

html[data-ui-theme="ocean"] .theme-atmosphere {
    background: linear-gradient(160deg, #5bc7c515, #092e3d15 62%, transparent);
}

/* Broad, soft light shafts move independently of the two bubble depths. */
html[data-ui-theme="ocean"] .theme-atmosphere-layer:first-child {
    position: absolute;
    inset: -12%;
    background:
        linear-gradient(112deg, transparent 18%, #c7fff20d 22%, #c7fff229 25%, transparent 31%),
        linear-gradient(105deg, transparent 43%, #9fefe81f 48%, transparent 56%),
        radial-gradient(ellipse at 58% 0, #9aece622, transparent 62%);
    opacity: .55;
    pointer-events: none;
    animation: nature-ocean-light 21s ease-in-out -8s infinite alternate;
}

html[data-ui-theme="ocean"] .theme-atmosphere-layer:nth-child(n + 2) {
    --nature-rise-height: 760px;
    --nature-rise-drift: 12px;
    position: absolute;
    inset: 0 -40px calc(-1 * var(--nature-rise-height));
    background: url("../img/themes/ocean-bubbles.svg") 71px 0 / 700px var(--nature-rise-height) repeat;
    opacity: .37;
    pointer-events: none;
    animation: nature-ocean-rise 64s linear -41s infinite;
}

html[data-ui-theme="ocean"] .theme-atmosphere-layer:nth-child(3) {
    --nature-rise-height: 1040px;
    --nature-rise-drift: -19px;
    background-size: 960px var(--nature-rise-height);
    background-position: 389px 0;
    opacity: .55;
    animation-duration: 46s;
    animation-delay: -17s;
}

@keyframes nature-ocean-light {
    from { transform: translate3d(-2%, 0, 0) rotate(-1deg); opacity: .35; }
    to { transform: translate3d(2%, 0, 0) rotate(1deg); opacity: .65; }
}

@keyframes nature-ocean-rise {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(var(--nature-rise-drift), calc(var(--nature-rise-height) * -.5), 0); }
    100% { transform: translate3d(0, calc(-1 * var(--nature-rise-height)), 0); }
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .has-personal-wallpaper > .theme-atmosphere {
    background: none;
    opacity: .5;
}

/* The motion preference controls decoration, never the usable control itself. */
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"])[data-theme-motion="off"] .theme-atmosphere-layer,
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"])[data-theme-motion="off"] .app-header::before,
html[data-ui-theme="ocean"][data-theme-motion="off"] .app-header::after {
    animation: none !important;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"])[data-theme-motion="paused"] .theme-atmosphere-layer,
html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"])[data-theme-motion="paused"] .app-header::before,
html[data-ui-theme="ocean"][data-theme-motion="paused"] .app-header::after {
    animation-play-state: paused !important;
}

html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]):is([data-theme-motion="off"], [data-theme-motion="paused"]) .button::after {
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .theme-atmosphere-layer,
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .app-header::before,
    html[data-ui-theme="ocean"] .app-header::after {
        animation: none !important;
    }
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .button::after {
        transform: none !important;
        transition: none !important;
    }
}

@media (forced-colors: active), print {
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .theme-atmosphere,
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .app-header::before,
    html[data-ui-theme="ocean"] .app-header::after,
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.button, .launch-module-symbol, .fieldset-panel > legend, .window-title .kicker)::after {
        display: none !important;
        animation: none !important;
    }
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.app-header, .window-title) {
        background-image: none !important;
    }
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) input[type="checkbox"]:not([role="switch"]) {
        appearance: auto;
        -webkit-appearance: auto;
        background: none !important;
        opacity: 1;
    }
}

@media (forced-colors: active) {
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(.app-header, .window-title, .home-navigation .launch-module-trigger) {
        color: CanvasText;
        background: Canvas !important;
        border-color: ButtonText;
    }
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) .home-navigation :is(.launch-module-symbol, .launch-module-copy small) {
        color: CanvasText;
    }
    html:is([data-ui-theme="autumn"], [data-ui-theme="ocean"]) :is(input, .home-navigation .launch-module-trigger):focus-visible {
        outline-color: Highlight;
    }
}