/* Original chart-room details: parchment, dark timber, navy and aged brass.
   Decorative ships stay behind content; business data remains unpatterned. */
html[data-ui-theme="pirate"] {
    color-scheme: light;
    --bg: #eee6d3;
    --chrome: #142e3c;
    --chrome-2: #4b3b2a;
    --surface: #fff9ec;
    --panel: #f5ecd9;
    --panel-2: #e7dbc1;
    --field: #fffdf5;
    --line: #c3b497;
    --line-strong: #927954;
    --ink: #342d24;
    --muted: #6d5e48;
    --label-ink: #51422f;
    --control-ink: #342d24;
    --grid-head-ink: #fff5dd;
    --chrome-ink: #fff5dd;
    --chrome-muted: #d7cfb6;
    --sort-badge-ink: #514126;
    --disabled-ink: #8d806b;
    --scroll-track: #eee3cd;
    --scroll-thumb: #a68c60;
    --scroll-thumb-hover: #77613f;
    --accent: #3b5662;
    --accent-dark: #283f4b;
    --accent-soft: #e9dfc6;
    --ok: #c1d0ad;
    --warn: #ebcd89;
    --stop: #e5b6a8;
    --dispatch: #bed0d0;
    --tab-hover-bg: #eee0c0;
    --tab-selected-bg: #decda6;
    --tab-selected-hover-bg: #d4bd8c;
    --tab-marker: #735d35;
    --pirate-brass: #c2a46a;
    --pirate-ornament: url("../img/themes/pirate-compass-flag.svg");
    --pirate-ship: url("../img/themes/pirate-tallship.svg");
    --pirate-wave: url("../img/themes/pirate-waves.svg");
}

/* The Pirate badge follows the active theme immediately, including first paint.
   Keep the original image source as the fallback for every other theme. */
html[data-ui-theme="pirate"] :is(.app-header .brand-mark, .auth-brand > img) {
    content: url("../img/themes/pirate-brand-mark.png");
    border-radius: 0;
}

html[data-ui-theme="pirate"] :is(.app-header, .window-title) {
    background-image: url("../img/themes/pirate-chart-rope.svg");
    background-size: 240px 64px;
}

html[data-ui-theme="pirate"] .app-header { border-bottom-color: var(--pirate-brass); }

/* The header's existing z:20 forms a local stacking context. These negative
   layers sit above its paint but behind controls, without clipping its menus. */
html[data-ui-theme="pirate"] .app-header::before,
html[data-ui-theme="pirate"] .app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

html[data-ui-theme="pirate"] .app-header::before {
    background-image: var(--pirate-ship), var(--pirate-ship);
    background-size: 52px 43px, 43px 36px;
    background-position: 63% 100%, 89% 100%;
    background-repeat: no-repeat;
    opacity: .23;
    animation: pirate-header-sail 43s ease-in-out -17s infinite alternate;
}

html[data-ui-theme="pirate"] .app-header::after {
    background: var(--pirate-wave) 0 100% / 320px 40px repeat-x;
    opacity: .28;
    animation: pirate-header-tide 26s linear -11s infinite;
}

@keyframes pirate-header-sail {
    from { background-position: 63% 100%, 89% 100%; }
    to { background-position: 71% 100%, 95% 100%; }
}

@keyframes pirate-header-tide {
    from { background-position: 0 100%; }
    to { background-position: 320px 100%; }
}

/* Brass compass and a small pennant occupy the same corner as other themes. */
html[data-ui-theme="pirate"] .button:not(.ghost):not(.danger):not(.warning) {
    position: relative;
    isolation: isolate;
}

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

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

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

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

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

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

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

html[data-ui-theme="pirate"] .launch-module-symbol { position: relative; overflow: visible; }

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

html[data-ui-theme="pirate"] .home-navigation .launch-module-trigger {
    color: #fff8e9;
    background: linear-gradient(125deg, #284352, #172b36);
    border-color: #bfa26b80;
}

html[data-ui-theme="pirate"] .home-navigation .launch-module-trigger:hover,
html[data-ui-theme="pirate"] .home-navigation .launch-module[open] > .launch-module-trigger {
    background: linear-gradient(125deg, #385363, #223a46);
    border-color: var(--pirate-brass);
}

html[data-ui-theme="pirate"] .home-navigation .launch-module-symbol {
    color: #ecd5a1;
    background: rgb(255 239 195 / 9%);
}

html[data-ui-theme="pirate"] .home-navigation .launch-module-copy small { color: #e4d9bf; }
html[data-ui-theme="pirate"] .home-navigation .launch-module-trigger:focus-visible { outline-color: #ecd5a1; }
html[data-ui-theme="pirate"] .home-navigation .launch-tile { border-inline-start-color: var(--pirate-brass); }

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

/* A filled chest and explicit white tick distinguish selected checkboxes.
   Mixed selection remains a simple dash; radios and switches stay native. */
html[data-ui-theme="pirate"] 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 url("../img/themes/pirate-chest-check.svg") center / contain no-repeat;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
}

html[data-ui-theme="pirate"] input[type="checkbox"]:not([role="switch"]):checked {
    background-image: url("../img/themes/pirate-chest-check-selected.svg");
}

html[data-ui-theme="pirate"] 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[data-ui-theme="pirate"] input[type="checkbox"]:disabled {
    background-color: transparent;
    opacity: .5;
    cursor: not-allowed;
}

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

html[data-ui-theme="pirate"] :is(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
    outline-color: var(--accent);
}

html[data-ui-theme="pirate"] input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Plain grid colors keep status cells, selections and dense rows readable. */
html[data-ui-theme="pirate"] :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[data-ui-theme="pirate"] :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[data-ui-theme="pirate"] :is(.orders-grid, .stock-grid, .worklist-grid, .vcm-grid, .compact-grid, .operations-grid) tbody tr:nth-child(even) {
    background-color: var(--panel);
}

html[data-ui-theme="pirate"] :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[data-ui-theme="pirate"] .stock-grid tbody tr:hover td {
    color: var(--ink);
    background-color: color-mix(in srgb, var(--accent-soft) 65%, var(--panel));
}

html[data-ui-theme="pirate"] :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);
}

/* A distant fleet sails only through the lower water region. No wallpaper is
   replaced, and the ships cannot intercept pointer events or cover content. */
html[data-ui-theme="pirate"] .app-wallpaper > .theme-atmosphere {
    display: block;
    position: absolute;
    inset: 58% 0 0;
    z-index: 2;
    overflow: hidden;
    contain: strict;
    pointer-events: none;
    background: none;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 85%, transparent);
    mask-image: linear-gradient(transparent, #000 18%, #000 85%, transparent);
}

html[data-ui-theme="pirate"] .theme-atmosphere-layer {
    --pirate-drift: 75px;
    --pirate-ship-opacity: .16;
    position: absolute;
    inset: -15px -90px;
    background: var(--pirate-ship) 14% 55% / clamp(108px, 12vw, 205px) auto no-repeat;
    opacity: .1;
    pointer-events: none;
    animation: pirate-distant-sail 88s linear -26s infinite;
}

html[data-ui-theme="pirate"] .theme-atmosphere-layer:nth-child(2) {
    --pirate-drift: 54px;
    --pirate-ship-opacity: .11;
    background-position: 53% 29%;
    background-size: clamp(80px, 9vw, 150px) auto;
    animation-duration: 112s;
    animation-delay: -65s;
}

html[data-ui-theme="pirate"] .theme-atmosphere-layer:nth-child(3) {
    --pirate-drift: 92px;
    --pirate-ship-opacity: .14;
    background-position: 82% 69%;
    background-size: clamp(100px, 11vw, 185px) auto;
    animation-duration: 101s;
    animation-delay: -14s;
}

@keyframes pirate-distant-sail {
    0% { opacity: 0; transform: translate3d(0, 0, 0); }
    18%, 78% { opacity: var(--pirate-ship-opacity); }
    50% { transform: translate3d(calc(var(--pirate-drift) * .5), -3px, 0); }
    100% { opacity: 0; transform: translate3d(var(--pirate-drift), 0, 0); }
}

html[data-ui-theme="pirate"] .has-personal-wallpaper > .theme-atmosphere { opacity: .45; }

html[data-ui-theme="pirate"][data-theme-motion="off"] .theme-atmosphere-layer,
html[data-ui-theme="pirate"][data-theme-motion="off"] .app-header::before,
html[data-ui-theme="pirate"][data-theme-motion="off"] .app-header::after { animation: none !important; }

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

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

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

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

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