/* ── Ctrl+drag rubber-band selection box ─────────────────────────── */
.rhwo-drag-rect {
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    border: 1.5px solid #4dabf7;
    background: rgba(77, 171, 247, 0.12);
    border-radius: 3px;
    display: none;
}

/* ── Drag-select row counter badge ───────────────────────────────── */
.rhwo-sel-count {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    background: #005eb8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .30);
    user-select: none;
    line-height: 1;
    white-space: nowrap;
    transform-origin: 50% 50%;
}

.rhwo-sel-count.is-bump {
    animation: rhwoeelCountBump 170ms cubic-bezier(.22, 1, .36, 1);
}

@keyframes rhwoeelCountBump {
    0% {
        transform: translate3d(0, 0, 0) scale(.9);
        box-shadow: 0 0 0 rgba(0, 94, 184, 0);
        filter: brightness(1.06);
    }

    55% {
        transform: translate3d(0, -1px, 0) scale(1.06);
        box-shadow: 0 0 0 4px rgba(0, 94, 184, .08), 0 4px 10px rgba(0, 0, 0, .18);
        filter: brightness(1.03);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .30);
        filter: brightness(1);
    }
}

/* ===== eequence List table column widths ===== */

:root {
    --seq-key: 150px;
    --seq-id: clamp(120px, 9vw, 160px);
    --seq-parent: clamp(120px, 9vw, 160px);
    --seq-product: clamp(150px, 11vw, 220px);
    --seq-bdtype: clamp(44px, 3.2vw, 64px);
    --seq-brand: clamp(44px, 3.2vw, 64px);
    --seq-type: clamp(130px, 9vw, 180px);
    --seq-status: clamp(152px, 10.588vw, 212px);
    --seq-enduser: clamp(120px, 8vw, 180px);
    --seq-account: clamp(140px, 10vw, 220px);
    --seq-rma: clamp(110px, 8vw, 170px);
    --seq-owner: clamp(120px, 9vw, 180px);
    --seq-prio: clamp(100px, 7vw, 140px);
    --seq-qty: clamp(90px, 6vw, 120px);
    --seq-delivery: clamp(100px, 7vw, 130px);
    --seq-reqdelivery: clamp(100px, 7vw, 130px);
    --seq-arrival: clamp(100px, 7vw, 130px);
    --seq-readyshipment: clamp(140px, 10vw, 180px);
    --seq-step: 72px;
    --seq-matdesc: clamp(130px, 9vw, 200px);
    --seq-boxdesc: clamp(208px, 14.4vw, 320px);
    --seq-palletloc: clamp(180px, 12vw, 280px);
    --seq-servicelevel: clamp(120px, 8vw, 180px);
    --seq-factory: clamp(160px, 11vw, 240px);
    --seq-shippeddate: clamp(110px, 8vw, 150px);
    --seq-prepared: 96px;
    --seq-comments: clamp(160px, 11vw, 260px);
    --seq-subsupplier: clamp(100px, 7vw, 140px);
}

.seq-page {
    --seq-id: var(--seq-key);
    --seq-parent: var(--seq-key);
    --seq-rma: var(--seq-key);
}

.seq-loading {
    position: relative;
    min-height: calc(100dvh - var(--rh-appbar-h) - 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.seq-loading-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    pointer-events: none;
}

.seq-sync-warning {
    margin: 8px 10px 0;
    padding: 8px 10px;
    border: 1px solid rgba(180, 83, 9, .26);
    border-radius: 8px;
    background: #fff7ed;
    color: #7c2d12;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(124, 45, 18, .08);
    animation: seqeyncoarningIn 160ms cubic-bezier(.16, 1, .3, 1);
}

.seq-sync-warning button {
    border: 0;
    background: rgba(124, 45, 18, .10);
    color: inherit;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.fsp-error,
.psp-error,
.plp-error {
    border: 1px solid rgba(180, 83, 9, .24);
    background: #fff7ed;
    color: #7c2d12;
    box-shadow: 0 8px 22px rgba(124, 45, 18, .08);
}

.plp-error {
    margin-right: auto;
}

@keyframes seqeyncoarningIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.seq-loading-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .08em;
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: .28em;
    color: rgba(15, 88, 214, 0.84);
    text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 0 14px rgba(15, 88, 214, 0.14);
}

.seq-loading-letter {
    display: inline-block;
    transform-origin: center bottom;
    animation: seq-loading-letter-hop 1.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

.seq-loading-letter:nth-child(1) { animation-delay: 0s; }
.seq-loading-letter:nth-child(2) { animation-delay: .06s; }
.seq-loading-letter:nth-child(3) { animation-delay: .12s; }
.seq-loading-letter:nth-child(4) { animation-delay: .18s; }
.seq-loading-letter:nth-child(5) { animation-delay: .24s; }
.seq-loading-letter:nth-child(6) { animation-delay: .30s; }
.seq-loading-letter:nth-child(7) { animation-delay: .36s; }

.seq-loading-status {
    font-size: 12px;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.68);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.seq-loading-progress {
    position: relative;
    width: min(236px, 44vw);
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(15, 88, 214, 0.12) 0%, rgba(15, 88, 214, 0.07) 100%);
    box-shadow: inset 0 0 0 1px rgba(15, 88, 214, 0.12), 0 6px 16px rgba(15, 88, 214, 0.08);
}

.seq-loading-progress::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,.24);
    pointer-events: none;
}

.seq-loading-progress-bar {
    display: block;
    position: relative;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #0f58d6;
    box-shadow: 0 0 18px rgba(15, 88, 214, 0.26);
    transition: width 90ms cubic-bezier(.16, 1, .3, 1);
}

.seq-loading-progress-bar::after {
    content: none;
}

.seq-loading-percent {
    font-size: 13px;
    font-weight: 800;
    color: rgba(15, 88, 214, 0.88);
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

@keyframes seq-loading-letter-hop {
    0%, 18%, 100% {
        transform: translateY(0) scale(1) skewX(0deg);
    }

    26% {
        transform: translateY(2px) scale(.94) skewX(6deg);
    }

    38% {
        transform: translateY(-12px) scale(1.06) skewX(-8deg);
    }

    52% {
        transform: translateY(0) scale(1) skewX(0deg);
    }
}

@keyframes seq-loading-progress-scan {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 36px 0;
    }
}

/* Force horizontal scroll on narrow viewports */
@media (max-width: 1600px) {
    .seq-table {
        min-width: 1800px;
    }
}

/* ecrollable card with virtualized rows */
.seq-card-scroll {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.seq-card-scroll.seq-is-scrolling .seq-table {
    pointer-events: none;
}

.seq-card-scroll .seq-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ehared compact table density used by eequenceList and ExportList */
.rhwo-tableCompact {
    --rhwo-head1: 23px;
    font-size: 10px;
    font-family: var(--font-sans);
}

.rhwo-tableCompact col {
    transition: width 220ms cubic-bezier(.22, 1, .36, 1);
}

.rhwo-tableCompact thead tr.rhwo-headrow th,
.rhwo-tableCompact thead tr.rhwo-filterrow th,
.rhwo-tableCompact tbody td {
    transition: width 220ms cubic-bezier(.22, 1, .36, 1),
                max-width 220ms cubic-bezier(.22, 1, .36, 1),
                padding 220ms cubic-bezier(.22, 1, .36, 1),
                opacity 160ms ease,
                transform 220ms cubic-bezier(.22, 1, .36, 1),
                border-color 220ms ease;
}

.rhwo-tableCompact thead tr.rhwo-headrow th {
    padding: 4px 5px;
    font-size: 9px;
}

.rhwo-tableCompact thead tr.rhwo-filterrow th {
    padding: 0 5px 2px;
    border-top: 0;
}

.rhwo-tableCompact tbody td {
    padding: 1px 2px;
    font-size: 10px;
    height: 24px; /* slightly taller for comfortable touch targets */
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0; /* forces td to respect col width for truncation */
}

.seq-row-enter {
    animation: seq-filter-row-in 220ms cubic-bezier(.16, 1, .3, 1) both;
    transform-origin: left center;
}

@keyframes seq-filter-row-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.988);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -1px, 0) scale(1.002);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seq-row-enter {
        animation: none !important;
    }
}

/* eoft fade-in used when Virtualize mounts new rows during scroll.
   Kept separate from .seq-row-enter so filter/sort still get the
   stronger slide+scale entrance. */
.seq-row-fade-in {
    animation: seq-row-fade 180ms ease-out both;
}

@keyframes seq-row-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .seq-row-fade-in {
        animation: none !important;
    }
}

/* Box picker cell: lock to row height and prevent internal control from changing it */
.seq-table tbody td.seq-boxpicker-cell {
    height: 24px;
    padding: 1px 2px;
    vertical-align: middle;
}

.seq-table tbody td.seq-boxpicker-cell .bp {
    display: block;
    height: 100%;
}

.seq-table tbody td.seq-boxpicker-cell .bp-trigger {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font: inherit;
    line-height: normal;
    background: transparent;
}

.seq-table tbody td.seq-boxpicker-cell .bp-trigger.has-value.has-status {
    display: grid;
    grid-template-rows: 9px 1fr;
    align-items: start;
    align-content: start;
    gap: 1px;
    overflow: hidden;
}

.seq-table tbody td.seq-boxpicker-cell .bp-trigger.has-value.has-status .bp-status-header {
    align-self: start;
    line-height: 1;
}

.seq-table tbody td.seq-boxpicker-cell .bp-trigger.has-value.has-status .bp-status-text {
    font-size: 9px;
    color: #6b7280;
    white-space: nowrap;
}

.seq-table tbody td.seq-boxpicker-cell .bp-trigger.has-value .bp-trigger-text {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.seq-table tbody td.seq-boxpicker-cell .bp-trigger.has-value:not(.has-status) {
    display: flex;
    align-items: center;
}

.seq-table tbody td.seq-shippeddate-cell {
    text-align: center;
    white-space: nowrap;
}

/* Pallet location picker cell: same layout pattern as box picker */
.seq-table tbody td.seq-palletpicker-cell {
    height: 24px;
    padding: 1px 2px;
    vertical-align: middle;
}

.seq-table tbody td.seq-palletpicker-cell .plp {
    display: block;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.seq-table tbody td.seq-palletpicker-cell .plp-trigger {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 4px;
    border: 0;
    box-sizing: border-box;
    font: inherit;
    background: transparent;
    text-align: left;
    overflow: hidden;
}

.seq-table tbody td.seq-palletpicker-cell .plp-trigger.has-value {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.seq-table tbody td.seq-palletpicker-cell .plp-trigger.plp-empty {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 20px;
    color: inherit;
}

.seq-table tbody td.seq-palletpicker-cell .plp-cell-main,
.seq-table tbody td.seq-palletpicker-cell .plp-cell-sub,
.seq-table tbody td.seq-palletpicker-cell .plp-loc-line {
    display: block;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seq-table tbody td.seq-palletpicker-cell .plp-cell-main {
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
    color: inherit;
}

.seq-table tbody td.seq-palletpicker-cell .plp-cell-sub {
    font-size: 9px;
    line-height: 10px;
    font-weight: 400;
    color: inherit;
}

/* Factory state picker cell: same layout pattern as pallet location picker */
.seq-table tbody td.seq-factorypicker-cell {
    height: 24px;
    padding: 1px 2px;
    vertical-align: middle;
}

.seq-table tbody td.seq-factorypicker-cell .fsp {
    display: block;
    height: 100%;
}

.seq-table tbody td.seq-factorypicker-cell .fsp-trigger {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font: inherit;
    line-height: normal;
    background: transparent;
}

/* Make status pills match the compact row density in eequenceList */
.seq-table td .rhwo-pill {
    display: block;
    width: 100%;
    font-size: 10px; /* match row text */
    line-height: 20px; /* vertically center within row */
    padding: 0 8px;
    height: 20px;
    border-radius: 8px;
    font-weight: 600;
    box-sizing: border-box;
    margin: 0;
}

.seq-table td .rhwo-pill.ok,
.seq-table td .rhwo-pill.scrap,
.seq-table td .rhwo-pill.warn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Center status pills horizontally and vertically in the etatus column.
   Keyed by data-col-key so it follows the column when reordered. */
.seq-table tbody td[data-col-key="status"] {
    /* center status cell content without using flexbox to avoid layout shifts */
    text-align: center;
    vertical-align: middle;
    padding: 0 4px;
}

.rhwo-tableCompact .rhwo-input {
        height: 24px;
        font-size: 12px;
        padding: 0 8px;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,.14);
        background: rgba(255,255,255,.95);
        box-sizing: border-box;
}

/* Compact multi-select dropdown buttons inside the in-table filter row only.
   Toolbar "Columns" picker keeps default .ms-btn sizing so it visually matches
   sibling toolbar buttons (Clear filters / Reset widths / Refresh). */
.rhwo-tableCompact thead tr.rhwo-filterrow th .ms-btn {
    height: 24px;
    padding: 0 7px 0 3px;
    gap: 0;
    font-size: 11px;
    border-radius: 8px;
    position: relative;
    justify-content: center;
    color: #111;
}

.rhwo-tableCompact thead tr.rhwo-filterrow th .ms-label {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    color: #111;
}

.rhwo-tableCompact thead tr.rhwo-filterrow th .ms-caret {
    position: absolute;
    right: 2px;
    top: 50%;
    width: 6px;
    font-size: 10px;
    line-height: 1;
    color: rgba(0, 0, 0, .72);
    transform: translateY(-50%);
    pointer-events: none;
}

.rhwo-tableCompact thead tr.rhwo-filterrow th .ms.is-open .ms-caret {
    transform: translateY(-50%) rotate(180deg);
}

/* Compact date picker buttons inside sequence list filter row */
.seq-table thead tr.rhwo-filterrow th .rhwo-dual .dp-btn,
.seq-table thead tr.rhwo-filterrow th .rhwo-dual button.dp-btn {
    height: 24px;
    padding: 0 6px;
    gap: 4px;
    font-size: 11px;
    border-radius: 8px;
}

.seq-table .dp-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-table .dp-caret {
    font-size: 10px;
    flex-shrink: 0;
}

.seq-table tbody td.seq-comments-cell {
    padding: 1px 2px;
    vertical-align: top;
    cursor: text;
}

/* Display mode: single-line truncated; full text shown via hover tooltip */
.seq-comment-display {
    padding: 2px 4px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    border-radius: 4px;
    transition: background 0.12s;
}

.seq-comment-display:hover {
    background: rgba(15, 88, 214, 0.06);
}

/* Tooltip – mouse-following card (shared by comment + material description) */
.seq-comment-tooltip,
.seq-matdesc-tooltip,
.seq-prepared-tooltip,
.seq-process-tooltip {
    position: fixed;
    z-index: 300000;
    display: none;
    opacity: 0;
    pointer-events: none;
    background: #005eb8;
    border: 1px solid rgba(0, 94, 184, 0.35);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .30);
    width: min(420px, calc(100vw - 32px));
    max-width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 11px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #fff;
    transition: opacity 100ms ease;
    transform-origin: 14px 0;
    will-change: transform, opacity;
}

.seq-comment-tooltip.is-in,
.seq-matdesc-tooltip.is-in,
.seq-prepared-tooltip.is-in,
.seq-process-tooltip.is-in {
    animation: rhwo-tooltip-snap-in 220ms cubic-bezier(.22, 1, .36, 1) both;
}

.seq-process-tooltip {
    width: max-content;
    min-width: 185px;
    max-width: min(280px, calc(100vw - 32px));
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
    font-size: 10.5px;
    line-height: 1.35;
    white-space: normal;
}

.seq-process-tooltip-plain {
    font-weight: 750;
}

.seq-process-tooltip-section + .seq-process-tooltip-section {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.seq-process-tooltip-title {
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 5px;
}

.seq-process-tooltip-row {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 8px;
    align-items: baseline;
}

.seq-process-tooltip-label {
    color: rgba(255, 255, 255, .76);
    font-weight: 700;
}

.seq-process-tooltip-value {
    min-width: 0;
}

.seq-process-live-counter {
    display: inline-flex;
    align-items: center;
    min-width: 52px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.seq-odo {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    white-space: nowrap;
}

.seq-odo-digit {
    position: relative;
    display: inline-block;
    width: .64em;
    height: 1.18em;
    overflow: hidden;
    vertical-align: -.12em;
}

.seq-odo-digit-roller {
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);
}

.seq-odo-digit.is-changing .seq-odo-digit-roller {
    animation: seq-odo-roll 280ms cubic-bezier(.22, 1, .36, 1) both;
}

.seq-odo-digit-old,
.seq-odo-digit-new,
.seq-odo-digit-static {
    display: block;
    height: 1.18em;
    line-height: 1.18em;
    text-align: center;
}

.seq-odo-token {
    display: inline-block;
}

@keyframes seq-odo-roll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

.seq-comment-display.is-empty::before {
    content: "Click to add…";
    color: #bbb;
    font-style: italic;
}

/* Edit mode: textarea matches display layout */
.seq-comments-wrap {
    display: flex;
    align-items: flex-start;
    gap: 3px;
}

textarea.seq-comment-input {
    flex: 1;
    min-width: 0;
    field-sizing: content;
    min-height: 22px;
    max-height: 160px;
    resize: none;
    overflow-y: auto;
    padding: 2px 4px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    display: block;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    border: 1px solid #0f58d6;
    border-radius: 4px;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 88, 214, 0.15);
    box-sizing: border-box;
}

.seq-comments-save {
    flex-shrink: 0;
    height: 22px;
    width: 42px;
    border: none;
    border-radius: 6px;
    background: #0f58d6;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    margin-top: 1px;
}

.seq-comments-save:hover {
    background: #0a45b0;
}

/* Material description cell – single-line truncated with hover tooltip */
.seq-table tbody td.seq-matdesc-cell {
    padding: 1px 2px;
    overflow: hidden;
}

.seq-matdesc-display {
    padding: 2px 4px;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    border-radius: 4px;
    transition: background 0.12s;
}

.seq-matdesc-display.has-value:hover {
    background: rgba(15, 88, 214, 0.06);
}

.seq-table thead tr.rhwo-filterrow th .dp-btn {
    height: 24px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 12px;
}

.seq-step-head {
    font-size: 9px;
}

.seq-step-cell {
    font-size: 11px;
}

/* ─── Process step indicator cells ──────────────── */

.seq-step-head {
    text-align: center;
    font-size: 11px;
}

.seq-step-cell {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    position: relative;
}

.seq-process-cell-action {
    cursor: pointer;
}

.seq-process-cell-action::before {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: 1;
    pointer-events: none;
    border-radius: 4px;
    background: rgba(0, 94, 184, .06);
    box-shadow: inset 0 0 0 1px rgba(0, 94, 184, .30), 0 0 0 0 rgba(0, 94, 184, 0);
    opacity: 0;
    transform: scale(.88);
    transition: opacity 120ms ease-out, transform 150ms cubic-bezier(.22, 1, .36, 1), box-shadow 150ms ease-out;
}

.seq-process-cell-action:hover::before {
    opacity: 1;
    transform: scale(1);
    box-shadow: inset 0 0 0 1px rgba(0, 94, 184, .30), 0 0 0 3px rgba(0, 94, 184, .08);
}

.seq-process-cell-action:focus-visible {
    outline: 2px solid #005eb8;
    outline-offset: -2px;
}

.seq-process-cell-disabled {
    cursor: not-allowed;
}

.seq-step-cell.seq-done {
    background: #d4edda;
    color: #1b6d2f;
}

.seq-step-cell.seq-pending {
    background: #fff3cd;
    color: #856404;
}

.seq-step-cell.seq-scrapped {
    background: #f8d7da;
    color: #842029;
}

.seq-raw-process-cell {
    padding-inline: 6px;
    font-size: 11px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-step-dash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 8px;
    vertical-align: middle;
}

.seq-step-dash::before {
    content: "";
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    opacity: .82;
}

.seq-step-x {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    opacity: .86;
}

.seq-step-x::before,
.seq-step-x::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

.seq-step-x::before {
    transform: rotate(45deg);
}

.seq-step-x::after {
    transform: rotate(-45deg);
}

.seq-step-cell.seq-blasting-split-cell {
    padding: 0;
    background: transparent;
    color: inherit;
}

.seq-blasting-split-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    min-height: 24px;
}

.seq-blasting-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
}

.seq-blasting-segment + .seq-blasting-segment {
    border-left: 1px solid rgba(15, 23, 42, .22);
}

.seq-blasting-segment.seq-done {
    background: #d4edda;
    color: #1b6d2f;
}

.seq-blasting-segment.seq-pending {
    background: #fff3cd;
    color: #856404;
}

.seq-blasting-segment.seq-scrapped {
    background: #f8d7da;
    color: #842029;
}

.seq-process-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease-out, visibility 0s linear 120ms;
}

.seq-process-backdrop.is-in {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 120ms ease-out;
}

.seq-process-pop {
    --seq-s: var(--rh-pop-scale, 1);
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 200001;
    width: min(calc(780px * var(--seq-s)), calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    box-sizing: border-box;
    background: rgba(255, 255, 255, .99);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: calc(14px * var(--seq-s));
    box-shadow: 0 16px 40px rgba(16, 24, 40, .14);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform-origin: 12px 0;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity 140ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-pop.is-in {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    will-change: opacity;
}

.seq-process-pop.is-out {
    opacity: 0;
    transform: translateY(-4px) scale(.99);
    pointer-events: none;
}

.seq-process-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(10px * var(--seq-s));
    padding: calc(12px * var(--seq-s)) calc(14px * var(--seq-s)) calc(8px * var(--seq-s));
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    border-radius: calc(14px * var(--seq-s)) calc(14px * var(--seq-s)) 0 0;
    flex-shrink: 0;
}

.seq-process-header-copy {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--seq-s));
    min-width: 0;
}

.seq-process-title {
    font-weight: 700;
    font-size: max(10px, calc(13px * var(--seq-s)));
    color: #1f2937;
    letter-spacing: 0;
}

.seq-process-subtitle {
    font-size: max(9px, calc(11px * var(--seq-s)));
    line-height: 1.3;
    color: #667085;
}

.seq-process-close {
    width: max(28px, calc(26px * var(--seq-s)));
    height: max(28px, calc(26px * var(--seq-s)));
    border: none;
    background: rgba(0, 0, 0, .06);
    border-radius: calc(8px * var(--seq-s));
    cursor: pointer;
    font-size: max(10px, calc(13px * var(--seq-s)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6b7a;
    transition: background 120ms, color 120ms;
}

.seq-process-close:hover {
    background: rgba(0, 0, 0, .10);
    color: #1f2937;
}

.seq-process-content {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: calc(330px * var(--seq-s)) minmax(0, 1fr);
    background: linear-gradient(180deg, rgba(15, 88, 214, .03), rgba(255, 255, 255, 0) 46px);
}

.seq-process-map-pane {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(10px * var(--seq-s)) calc(12px * var(--seq-s)) calc(12px * var(--seq-s)) calc(14px * var(--seq-s));
    border-right: 1px solid rgba(15, 23, 42, .08);
}

.seq-process-map-pane::-webkit-scrollbar {
    width: 8px;
}

.seq-process-map-pane::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .22);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
}

.seq-process-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--seq-s));
    padding: calc(10px * var(--seq-s)) calc(14px * var(--seq-s)) calc(12px * var(--seq-s));
    background: transparent;
}

.seq-location-map {
    --seq-s: var(--rh-pop-scale, 1);
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--seq-s));
}

.seq-location-map-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(8px * var(--seq-s));
}

.seq-location-map-title {
    display: block;
    font-size: max(9px, calc(10px * var(--seq-s)));
    font-weight: 800;
    color: #667085;
}

.seq-location-map-subtitle {
    display: block;
    margin-top: calc(1px * var(--seq-s));
    font-size: max(9px, calc(9px * var(--seq-s)));
    font-weight: 700;
    color: #98a2b3;
}

.seq-location-map-selected {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: calc(132px * var(--seq-s));
    min-height: max(28px, calc(23px * var(--seq-s)));
    padding: calc(5px * var(--seq-s)) calc(8px * var(--seq-s));
    border-radius: calc(8px * var(--seq-s));
    border: 1px solid rgba(15, 88, 214, .16);
    background: rgba(15, 88, 214, .06);
    color: #1f2937;
    font-size: max(10px, calc(10px * var(--seq-s)));
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-location-map.is-required .seq-location-map-selected {
    border-color: rgba(0, 94, 184, .28);
    background: rgba(0, 94, 184, .09);
}

.seq-location-map.is-disabled {
    opacity: .68;
}

.seq-location-map-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 275.69583 / 298.71457;
    border: 1px solid rgba(15, 88, 214, .14);
    border-radius: calc(10px * var(--seq-s));
    background: #f8fafc;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.seq-location-map-stage svg {
    width: 100%;
    height: 100%;
    display: block;
}

.seq-map-bg {
    fill: #f8fafc;
}

.seq-location-map-shape text {
    fill: #0f172a !important;
    pointer-events: none;
    font-family: Inter, Arial, sans-serif;
}

.seq-location-map-shape .seq-map-shortcut {
    font-size: 14px;
    font-weight: 800;
}

.seq-location-map-shape .seq-map-name {
    font-size: 10px;
    font-weight: 650;
}

.seq-location-map-shape {
    cursor: pointer;
    fill: rgba(0, 94, 184, .44) !important;
    stroke: rgba(255, 255, 255, .92) !important;
    stroke-width: 1.2px !important;
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 120ms ease, stroke 120ms ease, filter 140ms ease, transform 120ms ease, opacity 120ms ease;
}

.seq-location-map-shape:hover,
.seq-location-map-shape:focus-visible {
    fill: rgba(0, 94, 184, .72) !important;
    stroke: rgba(255, 255, 255, .98) !important;
    filter: drop-shadow(0 3px 5px rgba(0, 94, 184, .28));
    outline: none;
    transform: scale(1.05);
}

.seq-location-map-shape.is-selected {
    fill: #005eb8 !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 4px 7px rgba(0, 94, 184, .34));
    transform: scale(1.08);
}

.seq-location-map-shape.is-disabled {
    cursor: default;
    opacity: .62;
    transform: none;
}

.seq-location-map-fallback {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--seq-s));
    min-height: max(28px, calc(32px * var(--seq-s)));
    padding: calc(6px * var(--seq-s));
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: calc(9px * var(--seq-s));
    background: rgba(248, 250, 252, .84);
}

.seq-location-map-fallback > span {
    color: #667085;
    font-size: max(9px, calc(9px * var(--seq-s)));
    font-weight: 800;
}

.seq-location-fallback-btn {
    height: max(28px, calc(22px * var(--seq-s)));
    padding: 0 calc(8px * var(--seq-s));
    border: 1px solid rgba(15, 88, 214, .16);
    border-radius: calc(7px * var(--seq-s));
    background: #fff;
    color: #334155;
    font-size: max(10px, calc(10px * var(--seq-s)));
    font-weight: 800;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.seq-location-fallback-btn:hover:not(:disabled) {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .32);
    transform: translateY(-1px);
}

.seq-location-fallback-btn.is-selected {
    background: #005eb8;
    border-color: #005eb8;
    color: #fff;
}

.seq-location-fallback-btn:disabled {
    cursor: default;
    opacity: .7;
}

.seq-location-map-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #991b1b;
    font-size: max(10px, calc(11px * var(--seq-s)));
    font-weight: 700;
}

.seq-process-body::-webkit-scrollbar {
    width: 8px;
}

.seq-process-body::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .22);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
}

.seq-process-body::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .34);
}

.seq-process-section {
    display: flex;
    flex-direction: column;
    gap: calc(6px * var(--seq-s));
}

.seq-process-section-title {
    padding-left: 1px;
    font-size: max(9px, calc(10px * var(--seq-s)));
    font-weight: 700;
    color: #667085;
    letter-spacing: 0;
}

.seq-process-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(5px * var(--seq-s));
}

.seq-process-action-btn {
    height: max(28px, calc(30px * var(--seq-s)));
    border: 1px solid rgba(15, 88, 214, .16);
    border-radius: calc(8px * var(--seq-s));
    background: rgba(255, 255, 255, .95);
    color: #334155;
    font-size: max(10px, calc(11px * var(--seq-s)));
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms, transform 120ms;
}

.seq-process-action-btn:hover:not(:disabled) {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .34);
}

.seq-process-action-btn.is-active {
    background: #005eb8;
    border-color: #005eb8;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 94, 184, .18);
}

.seq-process-action-btn.is-active:hover:not(:disabled) {
    background: #004f9f;
    border-color: #004f9f;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 94, 184, .22);
    transform: translateY(-1px);
}

.seq-process-action-btn:disabled {
    cursor: not-allowed;
    opacity: .46;
}

.seq-process-blaster-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(6px * var(--seq-s));
}

.seq-process-blaster-btn {
    min-height: max(34px, calc(42px * var(--seq-s)));
    border: 1px solid rgba(15, 88, 214, .14);
    border-radius: calc(8px * var(--seq-s));
    background: rgba(255, 255, 255, .96);
    color: #334155;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: calc(2px * var(--seq-s));
    padding: calc(6px * var(--seq-s)) calc(8px * var(--seq-s));
    text-align: left;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.seq-process-blaster-btn span {
    font-size: max(10px, calc(11px * var(--seq-s)));
    font-weight: 750;
    line-height: 1.15;
}

.seq-process-blaster-btn small {
    color: #7b8797;
    font-size: max(9px, calc(9px * var(--seq-s)));
    font-weight: 700;
    line-height: 1.1;
    transition: color 120ms ease;
}

.seq-process-blaster-btn:hover:not(:disabled) {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .34);
    box-shadow: 0 6px 16px rgba(15, 88, 214, .08);
    transform: translateY(-1px);
}

.seq-process-blaster-btn.is-active {
    background: #005eb8;
    border-color: #005eb8;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 94, 184, .18);
}

.seq-process-blaster-btn.is-active:hover:not(:disabled) {
    background: #004f9f;
    border-color: #004f9f;
    color: #fff;
}

.seq-process-blaster-btn.is-active small {
    color: rgba(255, 255, 255, .78);
}

.seq-process-blaster-btn:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.seq-process-deviation-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(6px * var(--seq-s));
}

.seq-process-deviation-btn {
    min-height: max(28px, calc(34px * var(--seq-s)));
    border: 1px solid rgba(15, 88, 214, .14);
    border-radius: calc(8px * var(--seq-s));
    background: rgba(255, 255, 255, .96);
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(6px * var(--seq-s)) calc(8px * var(--seq-s));
    text-align: center;
    font-family: inherit;
    font-size: max(10px, calc(11px * var(--seq-s)));
    font-weight: 750;
    line-height: 1.15;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.seq-process-deviation-btn:hover:not(:disabled) {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .34);
    box-shadow: 0 6px 16px rgba(15, 88, 214, .08);
    transform: translateY(-1px);
}

.seq-process-deviation-btn.is-active {
    background: #005eb8;
    border-color: #005eb8;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 94, 184, .18);
}

.seq-process-deviation-btn.is-active:hover:not(:disabled) {
    background: #004f9f;
    border-color: #004f9f;
}

.seq-process-deviation-btn:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.seq-process-buffer-section {
    animation: seqProcessBufferIn 180ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-buffer-picker {
    display: flex;
    flex-direction: column;
    gap: calc(7px * var(--seq-s));
    padding: calc(8px * var(--seq-s));
    border: 1px solid rgba(15, 88, 214, .13);
    border-radius: calc(10px * var(--seq-s));
    background: linear-gradient(180deg, rgba(15, 88, 214, .045), rgba(255, 255, 255, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.seq-process-buffer-selected {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: calc(7px * var(--seq-s));
    min-height: max(24px, calc(24px * var(--seq-s)));
}

.seq-process-buffer-selected-label {
    padding-top: calc(4px * var(--seq-s));
    color: #7b8797;
    font-size: max(9px, calc(9px * var(--seq-s)));
    font-weight: 800;
}

.seq-process-buffer-empty {
    align-self: center;
    min-width: 0;
    color: #8b95a5;
    font-size: max(10px, calc(10px * var(--seq-s)));
    font-weight: 700;
    line-height: 1.25;
}

.seq-process-buffer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(5px * var(--seq-s));
    min-width: 0;
    max-height: calc(58px * var(--seq-s));
    overflow-y: auto;
    padding: calc(1px * var(--seq-s)) calc(2px * var(--seq-s)) calc(1px * var(--seq-s)) 0;
}

.seq-process-buffer-chips::-webkit-scrollbar,
.seq-process-buffer-options::-webkit-scrollbar {
    width: 7px;
}

.seq-process-buffer-chips::-webkit-scrollbar-thumb,
.seq-process-buffer-options::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .20);
    border: 2px solid rgba(255, 255, 255, .88);
    border-radius: 999px;
}

.seq-process-buffer-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(5px * var(--seq-s));
    max-width: 100%;
    min-height: max(24px, calc(23px * var(--seq-s)));
    padding: 0 calc(4px * var(--seq-s)) 0 calc(8px * var(--seq-s));
    border: 1px solid rgba(0, 94, 184, .18);
    border-radius: 999px;
    background: rgba(0, 94, 184, .09);
    color: #17456f;
    font-size: max(10px, calc(10px * var(--seq-s)));
    font-weight: 800;
    line-height: 1;
    animation: seqProcessBufferChipIn 150ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-buffer-chip button {
    width: calc(16px * var(--seq-s));
    height: calc(16px * var(--seq-s));
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    color: #526070;
    cursor: pointer;
    font-size: max(9px, calc(10px * var(--seq-s)));
    font-weight: 900;
    line-height: calc(16px * var(--seq-s));
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.seq-process-buffer-chip button:hover:not(:disabled) {
    background: rgba(15, 23, 42, .16);
    color: #1f2937;
    transform: scale(1.06);
}

.seq-process-buffer-chip button:disabled {
    cursor: default;
    opacity: .58;
}

.seq-process-buffer-filter {
    height: max(28px, calc(30px * var(--seq-s)));
    width: 100%;
    min-width: 0;
    padding: 0 calc(10px * var(--seq-s));
    border: 1px solid rgba(15, 88, 214, .14);
    border-radius: calc(8px * var(--seq-s));
    background: rgba(255, 255, 255, .96);
    color: #1f2937;
    font-family: inherit;
    font-size: max(10px, calc(11px * var(--seq-s)));
    font-weight: 650;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
}

.seq-process-buffer-filter::placeholder {
    color: #98a2b3;
}

.seq-process-buffer-filter:hover:not(:disabled) {
    border-color: rgba(0, 94, 184, .32);
    box-shadow: 0 6px 16px rgba(15, 88, 214, .08);
}

.seq-process-buffer-filter:focus {
    border-color: rgba(0, 94, 184, .58);
    box-shadow: 0 0 0 3px rgba(0, 94, 184, .11), 0 8px 18px rgba(15, 88, 214, .09);
    transform: translateY(-1px);
}

.seq-process-buffer-filter:disabled {
    cursor: default;
    background: rgba(246, 248, 251, .94);
    color: #7b8797;
}

.seq-process-buffer-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(82px * var(--seq-s)), 1fr));
    gap: calc(5px * var(--seq-s));
    max-height: calc(118px * var(--seq-s));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(1px * var(--seq-s)) calc(2px * var(--seq-s)) calc(1px * var(--seq-s)) 0;
}

.seq-process-buffer-option {
    min-width: 0;
    min-height: max(28px, calc(28px * var(--seq-s)));
    padding: calc(4px * var(--seq-s)) calc(8px * var(--seq-s));
    border: 1px solid rgba(15, 88, 214, .14);
    border-radius: calc(8px * var(--seq-s));
    background: rgba(255, 255, 255, .96);
    color: #334155;
    cursor: pointer;
    font-family: inherit;
    font-size: max(10px, calc(10px * var(--seq-s)));
    font-weight: 800;
    line-height: 1.12;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.seq-process-buffer-option:hover:not(:disabled) {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .34);
    box-shadow: 0 6px 16px rgba(15, 88, 214, .08);
    transform: translateY(-1px);
}

.seq-process-buffer-option.is-active {
    background: #005eb8;
    border-color: #005eb8;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 94, 184, .18);
}

.seq-process-buffer-option.is-active:hover:not(:disabled) {
    background: #004f9f;
    border-color: #004f9f;
}

.seq-process-buffer-option:disabled {
    cursor: not-allowed;
    opacity: .58;
}

.seq-process-buffer-no-results {
    min-height: max(28px, calc(28px * var(--seq-s)));
    display: flex;
    align-items: center;
    padding: 0 calc(8px * var(--seq-s));
    border: 1px dashed rgba(100, 116, 139, .24);
    border-radius: calc(8px * var(--seq-s));
    color: #7b8797;
    font-size: 10px;
    font-weight: 700;
}

.seq-process-date-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(10px * var(--seq-s));
}

.seq-process-date-field {
    position: relative;
    transition: opacity 150ms ease, transform 170ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-date-field.is-active {
    animation: seqProcessFieldIn 180ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-date-field.is-disabled {
    opacity: .68;
}

.seq-process-date-field label {
    display: block;
    margin-bottom: calc(4px * var(--seq-s));
    padding-left: 1px;
    font-size: max(9px, calc(9px * var(--seq-s)));
    font-weight: 700;
    color: #7b8797;
    text-transform: none;
    letter-spacing: 0;
    transition: color 140ms ease;
}

.seq-process-date-field.is-active label {
    color: #3f4d63;
}

.seq-process-date-field.is-disabled label {
    color: #a5afbd;
}

.seq-process-date-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) calc(96px * var(--seq-s));
    gap: calc(8px * var(--seq-s));
}

.seq-process-time-picker {
    display: block;
    min-width: 0;
}

.seq-process-date-controls .dp-btn,
.seq-process-time {
    height: max(28px, calc(30px * var(--seq-s)));
    min-height: max(28px, calc(30px * var(--seq-s)));
    border-radius: calc(8px * var(--seq-s));
    font-size: max(10px, calc(12px * var(--seq-s)));
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

.seq-process-date-controls .dp-btn {
    border-color: rgba(15, 88, 214, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.seq-process-date-field.is-active .dp-btn:hover:not(:disabled) {
    border-color: rgba(0, 94, 184, .35);
    box-shadow: 0 6px 16px rgba(15, 88, 214, .08);
    transform: translateY(-1px);
}

.seq-process-time {
    width: 100%;
    border: 1px solid rgba(15, 88, 214, .14);
    padding: 0 calc(10px * var(--seq-s));
    background: rgba(255, 255, 255, .95);
    color: #111827;
    box-sizing: border-box;
    outline: none;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--seq-s));
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.seq-process-time:hover:not(:disabled) {
    border-color: rgba(0, 94, 184, .34);
    box-shadow: 0 6px 16px rgba(15, 88, 214, .08);
    transform: translateY(-1px);
}

.seq-process-time:focus {
    border-color: rgba(0, 94, 184, .58);
    box-shadow: 0 0 0 3px rgba(0, 94, 184, .12), 0 8px 18px rgba(15, 88, 214, .10);
    transform: translateY(-1px);
}

.seq-process-time:disabled {
    cursor: not-allowed;
    border-color: rgba(148, 163, 184, .24);
    background: rgba(246, 248, 251, .94);
    color: #7b8797;
    box-shadow: none;
    transform: none;
}

.seq-process-time::placeholder {
    color: #94a3b8;
    opacity: .8;
}

.seq-process-time-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-process-time-icon {
    position: relative;
    width: calc(16px * var(--seq-s));
    height: calc(16px * var(--seq-s));
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 999px;
    opacity: .72;
    transform: scale(.94);
    transition: opacity 140ms ease, transform 140ms ease;
}

.seq-process-time-icon::before,
.seq-process-time-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: 50% 0;
}

.seq-process-time-icon::before {
    height: 5px;
    transform: translate(-50%, -1px);
}

.seq-process-time-icon::after {
    height: 4px;
    transform: translate(-50%, -1px) rotate(90deg);
}

.seq-process-time:hover:not(:disabled) .seq-process-time-icon,
.seq-process-time:focus .seq-process-time-icon,
.seq-process-time-picker.is-open .seq-process-time-icon {
    opacity: .9;
    transform: scale(1);
}

.seq-process-time-pop {
    --seq-tp-s: var(--rh-pop-scale, 1);
    position: fixed;
    z-index: 200020;
    width: min(calc(212px * var(--seq-tp-s)), calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    overflow: hidden;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(15, 88, 214, .16);
    border-radius: calc(12px * var(--seq-tp-s));
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .16);
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: 100% 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 160ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-time-pop.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.seq-process-time-pop.is-out {
    opacity: 0;
    transform: translateY(-4px) scale(.99);
    pointer-events: none;
}

.seq-process-time-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--seq-tp-s));
    padding: calc(9px * var(--seq-tp-s)) calc(10px * var(--seq-tp-s)) calc(7px * var(--seq-tp-s));
    border-bottom: 1px solid rgba(15, 88, 214, .10);
    background: linear-gradient(180deg, rgba(15, 88, 214, .06), rgba(255, 255, 255, .98));
    color: #3f4d63;
    font-size: max(9px, calc(10px * var(--seq-tp-s)));
    font-weight: 700;
    flex-shrink: 0;
}

.seq-process-time-pop-head strong {
    color: #005eb8;
    font-size: max(10px, calc(12px * var(--seq-tp-s)));
    font-variant-numeric: tabular-nums;
}

.seq-process-time-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(8px * var(--seq-tp-s));
    padding: calc(8px * var(--seq-tp-s));
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.seq-process-time-column {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.seq-process-time-column-title {
    margin-bottom: calc(5px * var(--seq-tp-s));
    padding-left: calc(3px * var(--seq-tp-s));
    color: #7b8797;
    font-size: max(9px, calc(9px * var(--seq-tp-s)));
    font-weight: 700;
}

.seq-process-time-scroll {
    display: grid;
    gap: calc(4px * var(--seq-tp-s));
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: calc(2px * var(--seq-tp-s));
    scroll-snap-type: y proximity;
}

.seq-process-time-scroll::-webkit-scrollbar {
    width: 7px;
}

.seq-process-time-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .20);
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 999px;
}

.seq-process-time-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .34);
}

.seq-process-time-option {
    height: max(28px, calc(30px * var(--seq-tp-s)));
    border: 1px solid transparent;
    border-radius: calc(8px * var(--seq-tp-s));
    background: transparent;
    color: #162033;
    cursor: pointer;
    font-family: inherit;
    font-size: max(10px, calc(12px * var(--seq-tp-s)));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    scroll-snap-align: center;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.seq-process-time-option:hover {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .18);
    transform: translateY(-1px);
}

.seq-process-time-option.is-selected {
    background: #005eb8;
    border-color: #005eb8;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 94, 184, .18);
}

.seq-process-time-option.is-selected:hover {
    background: #004f9f;
    border-color: #004f9f;
    color: #fff;
}

.seq-process-time-foot {
    display: flex;
    justify-content: flex-end;
    gap: calc(6px * var(--seq-tp-s));
    padding: calc(8px * var(--seq-tp-s));
    border-top: 1px solid rgba(15, 88, 214, .10);
    background: rgba(248, 250, 252, .82);
    flex-shrink: 0;
}

.seq-process-time-mini {
    height: max(28px, calc(26px * var(--seq-tp-s)));
    padding: 0 calc(9px * var(--seq-tp-s));
    border: 1px solid rgba(15, 88, 214, .16);
    border-radius: calc(8px * var(--seq-tp-s));
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-size: max(10px, calc(11px * var(--seq-tp-s)));
    font-weight: 700;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.seq-process-time-mini:hover {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .34);
    transform: translateY(-1px);
}

.seq-process-readonly-value {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: rgba(248, 250, 252, .92);
    color: #5f6b7a;
    font-weight: 600;
}

@keyframes seqProcessFieldIn {
    from {
        opacity: .72;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes seqProcessBufferIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes seqProcessBufferChipIn {
    from {
        opacity: 0;
        transform: translateY(2px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seq-process-date-field,
    .seq-process-date-field.is-active,
    .seq-process-blaster-btn,
    .seq-process-deviation-btn,
    .seq-process-buffer-section,
    .seq-process-buffer-chip,
    .seq-process-buffer-chip button,
    .seq-process-buffer-filter,
    .seq-process-buffer-option,
    .seq-process-date-controls .dp-btn,
    .seq-process-time,
    .seq-process-time-icon,
    .seq-process-time-pop,
    .seq-process-time-option,
    .seq-process-time-mini,
    .seq-process-clear-confirm,
    .seq-process-clear-btn,
    .seq-process-clear-yes,
    .seq-process-clear-no,
    .seq-location-map-shape,
    .seq-location-fallback-btn {
        animation: none;
        transition: none;
    }
}

@media (max-height: 560px) {
    .seq-process-header {
        padding: 10px 12px 7px;
    }

    .seq-process-body {
        gap: 8px;
        padding: 8px 12px 10px;
    }

    .seq-process-map-pane {
        padding: 8px 10px 10px 12px;
    }

    .seq-process-section {
        gap: 5px;
    }

    .seq-process-date-grid {
        gap: 8px;
    }

    .seq-process-footer {
        padding: 8px 12px 10px;
    }
}

@media (max-width: 760px) {
    .seq-process-pop {
        width: min(430px, calc(100vw - 12px));
    }

    .seq-process-content {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .seq-process-map-pane {
        flex: 0 0 auto;
        overflow: visible;
        padding: 9px 12px 0;
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    .seq-process-body {
        flex: 0 0 auto;
        overflow: visible;
    }

    .seq-location-map-stage {
        max-height: 260px;
    }
}

@media (max-width: 420px) {
    .seq-process-pop {
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        border-radius: 12px;
    }

    .seq-process-header {
        padding: 11px 12px 8px;
        border-radius: 12px 12px 0 0;
    }

    .seq-process-body {
        padding: 9px 12px 11px;
    }

    .seq-process-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .seq-process-blaster-options {
        grid-template-columns: 1fr;
    }

    .seq-process-deviation-options {
        grid-template-columns: 1fr;
    }

    .seq-process-buffer-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 100px;
    }

    .seq-process-buffer-selected {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .seq-process-buffer-selected-label {
        padding-top: 0;
    }

    .seq-process-date-controls {
        grid-template-columns: minmax(0, 1fr) 88px;
        gap: 6px;
    }

    .seq-process-footer {
        padding: 9px 12px 11px;
        border-radius: 0 0 12px 12px;
    }
}

.seq-process-error {
    padding: calc(8px * var(--seq-s)) calc(10px * var(--seq-s));
    border: 1px solid rgba(185, 28, 28, .24);
    border-radius: calc(8px * var(--seq-s));
    background: #fef2f2;
    color: #991b1b;
    font-size: max(10px, calc(12px * var(--seq-s)));
    font-weight: 600;
}

.seq-process-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--seq-s));
    padding: calc(10px * var(--seq-s)) calc(14px * var(--seq-s)) calc(12px * var(--seq-s));
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
    border-radius: 0 0 calc(14px * var(--seq-s)) calc(14px * var(--seq-s));
}

.seq-process-clear-slot {
    width: calc(122px * var(--seq-s));
    min-width: calc(122px * var(--seq-s));
    height: max(30px, calc(30px * var(--seq-s)));
    display: flex;
    align-items: stretch;
}

.seq-process-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: calc(8px * var(--seq-s));
    min-width: 0;
}

.seq-process-cancel-btn,
.seq-process-save-btn,
.seq-process-clear-btn,
.seq-process-clear-yes,
.seq-process-clear-no {
    height: max(30px, calc(30px * var(--seq-s)));
    border-radius: calc(8px * var(--seq-s));
    padding: 0 calc(12px * var(--seq-s));
    cursor: pointer;
    font-size: max(10px, calc(12px * var(--seq-s)));
    font-weight: 700;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.seq-process-clear-btn {
    width: 100%;
    border: 1px solid rgba(185, 28, 28, .18);
    background: #fff;
    color: #b42318;
}

.seq-process-clear-btn:hover:not(:disabled) {
    background: #fef2f2;
    border-color: rgba(185, 28, 28, .36);
    box-shadow: 0 6px 16px rgba(185, 28, 28, .08);
    transform: translateY(-1px);
}

.seq-process-clear-confirm {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(6px * var(--seq-s));
    animation: seqProcessConfirmIn 140ms cubic-bezier(.16, 1, .3, 1);
}

.seq-process-clear-yes {
    border: 1px solid #b42318;
    background: #b42318;
    color: #fff;
}

.seq-process-clear-yes:hover:not(:disabled) {
    background: #97180f;
    border-color: #97180f;
    box-shadow: 0 6px 16px rgba(185, 28, 28, .12);
    transform: translateY(-1px);
}

.seq-process-clear-no {
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    color: #5f6b7a;
}

.seq-process-clear-no:hover:not(:disabled) {
    background: rgba(0, 0, 0, .04);
    transform: translateY(-1px);
}

.seq-process-cancel-btn {
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    color: #5f6b7a;
}

.seq-process-cancel-btn:hover:not(:disabled) {
    background: rgba(0, 0, 0, .04);
}

.seq-process-save-btn {
    min-width: calc(84px * var(--seq-s));
    border: 1px solid #005eb8;
    background: #005eb8;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--seq-s));
}

.seq-process-save-btn:hover:not(:disabled) {
    background: #004f9f;
    border-color: #004f9f;
}

.seq-process-cancel-btn:disabled,
.seq-process-save-btn:disabled,
.seq-process-clear-btn:disabled,
.seq-process-clear-yes:disabled,
.seq-process-clear-no:disabled {
    cursor: not-allowed;
    opacity: .55;
}

@keyframes seqProcessConfirmIn {
    from {
        opacity: 0;
        transform: translateY(2px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.seq-shipped-head {
    text-align: center;
    font-size: 11px;
}

.seq-subsupplier-cell {
    text-align: center;
    vertical-align: middle;
    padding: 0 2px;
}

.seq-subsupplier-cell .rhwo-pill {
    font-size: 9px;
    line-height: 18px;
    height: 18px;
    padding: 0 6px;
}

/* eequenceList fullscreen layout (no outer vertical scrollbar) */
.seq-page {
    height: calc(100dvh - var(--rh-appbar-h));
    max-height: calc(100dvh - var(--rh-appbar-h));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.seq-card {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
}

.seq-page .rhwo-table {
    min-height: 0;
}

/* Pinned (clicked) row highlight. */
.seq-table tbody tr.rhwo-row.is-pinned {
    background-color: rgba(15, 88, 214, 0.14);
}

/* ohile the circular reveal overlay animates, hide the row's own background
   so the expanding/collapsing circle is the only blue layer visible. oithout
   this, two semi-transparent blue layers (row + overlay) stack and the row
   appears noticeably darker than .is-pinned. The rule does NOT require
   .is-pinned: during unmark, Blazor re-renders mid-animation and removes
   .is-pinned, but the overlay is still shrinking and would otherwise stack
   over the row's hover/zebra background. The class is removed in the same
   frame the overlay is removed. */
.seq-table tbody tr.rhwo-row.is-pin-expanding {
    background-color: transparent !important;
}

/* eame color as .is-pinned, revealed by a real circle expanding from the press point. */
.seq-row-pin-fill-fx {
    position: fixed;
    pointer-events: none;
    z-index: 45;
    overflow: hidden;
    opacity: 0;
    transition: opacity .08s ease-out;
    will-change: opacity;
    contain: layout paint style;
}

.seq-row-pin-fill-fx::before,
.seq-row-pin-fill-fx::after {
    content: "";
    position: absolute;
    left: var(--pin-cx, 0);
    top: var(--pin-cy, 0);
    width: var(--pin-d, 2800px);
    height: var(--pin-d, 2800px);
    border-radius: 50%;
    transform: scale(var(--pin-seed-scale, .01));
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

.seq-row-pin-fill-fx::before {
    background: rgba(15, 88, 214, 0.14);
    transition: transform .26s cubic-bezier(.7, 0, .3, 1);
}

.seq-row-pin-fill-fx::after {
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 0;
    transition: transform .26s cubic-bezier(.7, 0, .3, 1), opacity .20s ease-out;
}

/* Press-down seed: starts tiny, then grows while the mouse is held. */
.seq-row-pin-fill-fx.is-seed {
    opacity: 1;
}

.seq-row-pin-fill-fx.is-seed::before {
    transform: scale(var(--pin-hold-scale, .03));
    background: rgba(15, 88, 214, 0.14);
    transition-duration: .34s;
    transition-timing-function: cubic-bezier(.16, .9, .22, 1);
}

.seq-row-pin-fill-fx.is-seed::after {
    transform: scale(var(--pin-hold-scale, .03));
    opacity: 0;
    transition-duration: .36s;
    transition-timing-function: cubic-bezier(.16, .9, .22, 1);
}

/* Release: the actual circle grows until it covers the visible row. */
.seq-row-pin-fill-fx.is-expanding {
    opacity: 1;
}

.seq-row-pin-fill-fx.is-expanding::before {
    transform: scale(1);
    animation: none;
}

.seq-row-pin-fill-fx.is-expanding::after {
    transform: scale(1);
    opacity: 0;
    animation: none;
}

/* Reverse of the press-release: keep the wrapper fully opaque while the
   ::before circle shrinks back to its seed scale. oithout holding opacity
   at 1, the .12s wrapper-opacity transition would fade the whole overlay
   out before the .38s transform transition could play, making the shrink
   invisible. */
.seq-row-pin-fill-fx.is-collapsing {
    opacity: 1;
}

.seq-row-pin-fill-fx.is-collapsing::before {
    transform: scale(var(--pin-seed-scale, .01));
    animation: none;
}

.seq-row-pin-fill-fx.is-collapsing::after {
    transform: scale(var(--pin-seed-scale, .01));
    opacity: 0;
    animation: none;
}

/* Color-shifting breathe/ring keyframes removed so the animation reads as
   the exact same flat color as the pinned row (rgba(15, 88, 214, 0.14)). */

@media (prefers-reduced-motion: reduce) {
    .seq-table tbody tr.rhwo-row.is-pinned {
        animation: none;
        background-image: none;
    }

    .seq-row-pin-fill-fx {
        display: none;
    }
}

.seq-bar {
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,250,255,.96) 100%);
    border: 1px solid var(--rhwo-border-soft);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 10px 24px rgba(17,24,39,.06);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 7px 10px;
    gap: 8px 10px;
    position: relative;
    z-index: 51;
    margin-bottom: 0;
}

.seq-toolbar-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.seq-toolbar-actions .seq-view-seg {
    order: -2;
    flex: 0 0 auto;
    min-width: 0;
}

/* Place "Clear filters" immediately after the All/Ongoing/Closed segmented
   control. Layout becomes: [view-seg] [Clear filters] ←auto-margin→ [rest]. */
.seq-toolbar-actions .seq-btn-clearfilters {
    order: -1;
    margin-right: auto;
}

.seq-toolbar-actions .rhwo-btn,
.seq-toolbar-actions .seq-notif-wrap,
.seq-toolbar-actions .seq-selection-toolbar,
.seq-toolbar-hint {
    flex: 0 1 auto;
    min-width: 0;
}

.seq-toolbar-actions .rhwo-btn,
.seq-selection-toolbar,
.seq-sel-btn,
.seq-view-seg-btn {
    min-width: 0;
    overflow: hidden;
}

.seq-toolbar-hint {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(17,24,39,.55);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
}

.seq-toolbar-hint kbd {
    display: inline-block;
    min-width: 1.8em;
    padding: 2px 7px;
    margin: 0 2px;
    border: 1px solid rgba(17,24,39,.14);
    border-bottom-color: rgba(17,24,39,.22);
    border-radius: 8px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(17,24,39,.06);
    color: rgba(17,24,39,.72);
    font: inherit;
    font-weight: 700;
    text-align: center;
}

.seq-toolbar-actions .rhwo-btn {
    flex: 0 1 auto;
    min-height: 36px;
    border-radius: 11px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(17,24,39,.06);
    transition: transform 160ms cubic-bezier(.22, 1, .36, 1), box-shadow 180ms ease, border-color 180ms ease;
}

.seq-toolbar-actions .rhwo-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-toolbar-actions .rhwo-btnLite {
    border: 1px solid var(--rhwo-border-soft);
    background: rgba(255,255,255,.96);
    color: var(--rhwo-text);
}

.seq-toolbar-actions .rhwo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(17,24,39,.10);
}

.seq-toolbar-actions .rhwo-btn:active {
    transform: translateY(0) scale(.98);
}

.seq-page .rhwo-footer {
    flex: 0 0 auto;
    padding-top: 8px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.seq-page .rhwo-lastrefresh {
    font-size: 12px;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* ── Toolbar responsive scaling ─────────────────────────── */

/* Medium: tighten spacing but keep all controls */
@media (max-width: 1280px) {
    .seq-bar {
        padding: 5px 8px;
        gap: 5px 6px;
    }

    .seq-toolbar-actions {
        gap: 5px;
    }

    .seq-toolbar-actions .rhwo-btn {
        min-height: 32px;
        padding: 0 9px;
        font-size: 12px;
        border-radius: 9px;
    }

    .seq-view-seg {
        height: 32px;
    }

    .seq-view-seg-btn {
        padding: 0 9px;
        font-size: 12px;
    }
}

/* Narrow: hide hint, reduce further */
@media (max-width: 980px) {
    .seq-bar {
        padding: 5px 8px;
    }

    .seq-toolbar-actions {
        gap: 4px;
    }

    .seq-toolbar-hint {
        display: none;
    }

    .seq-toolbar-actions .seq-view-seg {
        margin-right: 0;
    }

    .seq-toolbar-actions .rhwo-btn {
        padding: 0 8px;
        font-size: 11.5px;
    }
}

/* Compact: hide "Reset widths", shrink seg labels */
@media (max-width: 780px) {
    .seq-btn-resetwidths {
        display: none;
    }

    .seq-view-seg-btn {
        padding: 0 7px;
        font-size: 11.5px;
    }
}

/* Very compact: compress everything to stay on one row */
@media (max-width: 600px) {
    .seq-bar {
        gap: 3px 4px;
        padding: 4px 6px;
    }

    .seq-toolbar-actions {
        gap: 3px;
    }

    .seq-toolbar-actions .rhwo-btn {
        padding: 0 6px;
        font-size: 11px;
        min-height: 28px;
        border-radius: 8px;
    }

    .seq-view-seg {
        height: 28px;
    }

    .seq-view-seg-btn {
        padding: 0 5px;
        font-size: 11px;
    }
}

/* ─── Prepared toggle cell ─────────────────────────── */

.seq-prepared-cell {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    padding: 0 4px;
    transition: background 140ms;
}

/* Compact mode: hide the picker — clicking the cell does an instant prepared toggle. */
.seq-table tbody td.seq-prepared-cell.prep-compact .psp {
    display: none;
    pointer-events: none;
}

/* Compact mode: cell has a custom (non-default) status — block interaction */
.seq-table tbody td.seq-prepared-cell.prep-compact.prep-locked {
    cursor: not-allowed;
}

/* Trigger wrapper — fills the cell so the whole area activates the hover tooltip */
.seq-prepared-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.seq-table tbody td.seq-prepared-cell .psp-empty-label {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font: inherit;
    line-height: 22px;
    text-align: center;
    color: #6b7280;
}

.seq-prepared-cell.is-prepared {
    background: #2b8a3e;
}

.seq-prepared-cell:not(.is-prepared):hover {
    background: rgba(43, 138, 62, .12);
}

.seq-prepared-cell.is-prepared:hover {
    background: #237032;
}

.seq-table tbody td.seq-prepared-cell .psp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.seq-table tbody td.seq-prepared-cell .psp-trigger {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    font: inherit;
    line-height: 22px;
    background: transparent;
    justify-content: center;
    padding: 0;
    font-size: inherit;
    text-align: center;
}

.seq-table tbody td.seq-prepared-cell .psp-trigger.has-status,
.seq-table tbody td.seq-prepared-cell .psp-trigger.has-prepared {
    gap: 0;
}

.seq-table tbody td.seq-prepared-cell .psp-trigger.has-status .psp-dot,
.seq-table tbody td.seq-prepared-cell .psp-trigger.has-prepared .psp-dot {
    display: none;
}

.seq-table tbody td.seq-prepared-cell .psp-label {
    color: inherit;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.seq-table tbody td.seq-prepared-cell .psp-empty-label {
    font-size: inherit;
    font-weight: inherit;
    line-height: 22px;
    color: #6b7280;
}

.seq-prepared-filter-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    height: 24px;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .14);
    background: rgba(255, 255, 255, .95);
    white-space: nowrap;
    transition: background 120ms, border-color 120ms;
}

/* "None" toggle button shown next to date range pickers in the filter row.
   ohen active, only rows whose date is null are shown. */
.seq-date-none-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    height: 24px;
    font-size: 10px;
    font-weight: 600;
    padding: 0 7px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, .14);
    background: rgba(255, 255, 255, .95);
    color: rgba(17, 24, 39, .72);
    white-space: nowrap;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.seq-date-none-btn:hover {
    background: rgba(15, 88, 214, .06);
    border-color: rgba(15, 88, 214, .35);
}

.seq-date-none-btn.filter-active {
    background: #0f58d6;
    border-color: #0f58d6;
    color: #fff;
}

.seq-prepared-filter-btn:hover {
    background: rgba(43, 138, 62, .08);
    border-color: rgba(43, 138, 62, .35);
}

.seq-prepared-filter-btn.filter-active {
    background: rgba(43, 138, 62, .12);
    border-color: rgba(43, 138, 62, .40);
    color: #1b6d2f;
    font-weight: 600;
}

/* ─── Active filter indicator ───────────────────────── */
.seq-table thead tr.rhwo-filterrow th.filter-active {
    background: rgba(15, 88, 214, 0.04);
    box-shadow: inset 0 -2px 0 #0f58d6;
}

/* ─── Column resize handles ────────────────────────── */
.seq-table thead tr.rhwo-headrow th {
    position: relative;
}

.col-resize-handle {
    position: absolute;
    top: 0;
    right: -8px;
    width: 16px;
    height: 100%;
    cursor: col-resize;
    z-index: 14;
    background: transparent;
    transition: background 120ms;
    touch-action: none;
}

.col-resize-handle:hover,
.col-resize-handle:active {
    background: linear-gradient(
        90deg,
        transparent 0,
        transparent 6px,
        rgba(15, 88, 214, 0.30) 6px,
        rgba(15, 88, 214, 0.30) 10px,
        transparent 10px
    );
}

/* ─── Cell change glow (1-minute visual indicator after save) ─── */
.seq-table tbody td.seq-cell-glow {
    position: relative;
    overflow: visible;
}

.seq-table tbody td.seq-cell-glow::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 4px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.95),
                0 0 8px rgba(34, 197, 94, 0.45),
                0 0 16px rgba(34, 197, 94, 0.28);
    animation: seq-cell-glow-pulse 1.6s ease-in-out infinite;
}

@keyframes seq-cell-glow-pulse {
    0%, 100% {
        box-shadow: inset 0 0 0 1px rgba(134, 239, 172, 0.85),
                    0 0 6px rgba(34, 197, 94, 0.32),
                    0 0 12px rgba(34, 197, 94, 0.18);
    }

    50% {
        box-shadow: inset 0 0 0 1px rgba(187, 247, 208, 1),
                    0 0 12px rgba(74, 222, 128, 0.58),
                    0 0 24px rgba(74, 222, 128, 0.34);
    }
}

/* ─── Prepared header colors toggle ─────────────────── */
.seq-prepared-head {
    white-space: nowrap;
}

.seq-prepared-head-inner {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.seq-prepared-colors-btn {
    all: unset;
    cursor: pointer;
    font-size: 11px;
    width: 14px;
    height: 14px;
    line-height: 1;
    text-align: center;
    padding: 0;
    border-radius: 4px;
    opacity: 0.5;
    transition: opacity 120ms;
    flex: 0 0 auto;
}

.seq-prepared-colors-btn:hover {
    opacity: 0.85;
}

.seq-prepared-colors-btn.is-active {
    opacity: 1;
    background: rgba(43, 138, 62, 0.12);
}

/* ─── PreparedetatusPicker ──────────────────────────── */
.psp {
    width: 100%;
    height: 100%;
    position: relative;
}

.psp-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    background: transparent;
}

.psp-trigger.has-status .psp-dot,
.psp-trigger.has-prepared .psp-dot {
    flex-shrink: 0;
}

.psp-trigger.psp-empty {
    justify-content: center;
    color: #6b7280;
}

.psp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.psp-label {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 600;
    font-size: max(10px, calc(10px * var(--seq-s)));
}

.psp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.psp-pop {
    --psp-s: var(--rh-pop-scale, 1);
    position: fixed;
    top: -9999px;
    left: -9999px;
    z-index: 1000;
    width: min(calc(320px * var(--psp-s)), calc(100vw - 16px));
    background: #fff;
    border: 1px solid #e3e7ef;
    border-radius: calc(12px * var(--psp-s));
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    max-height: min(calc(780px * var(--psp-s)), calc(100dvh - 16px));
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
    transition: opacity 140ms ease-out, transform 160ms cubic-bezier(.16, 1, .3, 1);
    transform-origin: 12px 0;
}

.psp-pop.is-out {
    opacity: 0;
    transform: translateY(-4px) scale(.99);
    pointer-events: none;
}

.psp-pop.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

@keyframes pspFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.psp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: calc(10px * var(--psp-s));
    padding: calc(12px * var(--psp-s)) calc(14px * var(--psp-s)) calc(8px * var(--psp-s));
    border-bottom: 1px solid #eef1f5;
    background: #fff;
    flex-shrink: 0;
}

.psp-header-copy {
    display: flex;
    flex-direction: column;
    gap: calc(2px * var(--psp-s));
}

.psp-title {
    font-weight: 700;
    font-size: max(10px, calc(13px * var(--psp-s)));
    color: #162033;
}

.psp-subtitle {
    font-size: max(9px, calc(11px * var(--psp-s)));
    line-height: 1.3;
    color: #667085;
}

.psp-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: max(28px, calc(24px * var(--psp-s)));
    height: max(28px, calc(24px * var(--psp-s)));
    font-size: max(10px, calc(13px * var(--psp-s)));
    color: #667085;
    border-radius: calc(6px * var(--psp-s));
    border: 1px solid transparent;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.psp-close:hover {
    background: #f8fafc;
    border-color: #dbe3ef;
    color: #162033;
}

.psp-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: calc(10px * var(--psp-s));
    padding: calc(10px * var(--psp-s)) calc(12px * var(--psp-s)) calc(12px * var(--psp-s));
}

.psp-section,
.psp-create-section {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.psp-section-title {
    padding: 0 calc(2px * var(--psp-s)) calc(4px * var(--psp-s));
    font-size: max(9px, calc(10px * var(--psp-s)));
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    color: #667085;
}

.psp-list {
    min-height: 0;
    overflow-y: auto;
    max-height: none;
    padding: 0;
}

.psp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(6px * var(--psp-s));
    min-height: max(28px, calc(32px * var(--psp-s)));
    padding: calc(5px * var(--psp-s)) calc(8px * var(--psp-s));
    cursor: pointer;
    border-radius: calc(6px * var(--psp-s));
    border: 1px solid transparent;
    transition: background 120ms, border-color 120ms;
    font-size: max(10px, calc(11px * var(--psp-s)));
}

.psp-row:hover {
    background: #f8fafc;
    border-color: #edf1f6;
}

.psp-row-selected {
    background: rgba(43, 138, 62, 0.06);
    border-color: rgba(43, 138, 62, 0.18);
}

.psp-row-main {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--psp-s));
    min-width: 0;
    flex: 1;
}

.psp-row-main .psp-edit-btn {
    margin-left: auto;
}

.psp-row-swatch {
    width: calc(10px * var(--psp-s));
    height: calc(10px * var(--psp-s));
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
    flex: 0 0 auto;
}

.psp-row-texts {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--psp-s));
    min-width: 0;
}

.psp-badge {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: #667085;
    font-size: max(9px, calc(10px * var(--psp-s)));
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.psp-row-actions {
    display: flex;
    align-items: center;
    gap: calc(4px * var(--psp-s));
    flex: 0 0 auto;
}

.psp-check {
    font-size: max(10px, calc(12px * var(--psp-s)));
    font-weight: 700;
    width: calc(14px * var(--psp-s));
    text-align: center;
    flex-shrink: 0;
    color: #2b8a3e;
}

.psp-cell-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #162033;
    font-size: max(10px, calc(11px * var(--psp-s)));
    font-weight: 600;
}

.psp-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: calc(18px * var(--psp-s));
    height: calc(18px * var(--psp-s));
    font-size: max(9px, calc(10px * var(--psp-s)));
    color: #98a2b3;
    border-radius: calc(4px * var(--psp-s));
    opacity: 0;
    transition: opacity 120ms, background 120ms, color 120ms;
}

.psp-row:hover .psp-delete-btn {
    opacity: 1;
}

.psp-delete-btn:hover {
    color: #d92d20;
    background: rgba(217, 45, 32, 0.08);
}

/* ─── Edit-mode row (inline rename) ─────────────────── */
.psp-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: calc(18px * var(--psp-s));
    height: calc(18px * var(--psp-s));
    font-size: max(9px, calc(10px * var(--psp-s)));
    color: #98a2b3;
    border-radius: calc(4px * var(--psp-s));
    opacity: 0;
    transition: opacity 120ms, background 120ms, color 120ms;
    border: none;
    background: transparent;
    padding: 0;
}

.psp-row:hover .psp-edit-btn {
    opacity: 1;
}

.psp-edit-btn:hover {
    color: #0f58d6;
    background: rgba(15, 88, 214, 0.08);
}

.psp-row-editing {
    display: flex;
    align-items: center;
    gap: calc(6px * var(--psp-s));
    min-height: max(28px, calc(32px * var(--psp-s)));
    padding: calc(4px * var(--psp-s)) calc(8px * var(--psp-s));
    border-radius: calc(6px * var(--psp-s));
    border: 1px solid rgba(15, 88, 214, 0.25);
    background: rgba(15, 88, 214, 0.03);
}

.psp-edit-color {
    width: max(28px, calc(28px * var(--psp-s))) !important;
    height: max(28px, calc(28px * var(--psp-s))) !important;
    flex-shrink: 0;
}

.psp-edit-text {
    flex: 1;
    height: max(28px, calc(28px * var(--psp-s))) !important;
    min-width: 0;
}

.psp-edit-save-btn,
.psp-edit-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: max(28px, calc(24px * var(--psp-s)));
    height: max(28px, calc(24px * var(--psp-s)));
    font-size: max(10px, calc(12px * var(--psp-s)));
    font-weight: 700;
    border-radius: calc(5px * var(--psp-s));
    border: 1px solid transparent;
    flex-shrink: 0;
    transition: background 120ms, border-color 120ms, color 120ms;
    padding: 0;
}

.psp-edit-save-btn {
    background: #0f58d6;
    color: #fff;
}

.psp-edit-save-btn:hover:not(:disabled) {
    background: #0d4db8;
}

.psp-edit-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.psp-edit-cancel-btn {
    background: transparent;
    color: #667085;
    border-color: #dbe3ef;
}

.psp-edit-cancel-btn:hover {
    background: #f8fafc;
    color: #162033;
}

.psp-empty-msg {
    padding: calc(12px * var(--psp-s)) calc(6px * var(--psp-s)) calc(8px * var(--psp-s));
    text-align: center;
    color: #667085;
    font-size: max(10px, calc(11px * var(--psp-s)));
    line-height: 1.4;
}

.psp-create-section {
    padding: 0;
}

.psp-create-row {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--psp-s));
    padding: 0;
}

.psp-create-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(8px * var(--psp-s));
    margin-top: calc(8px * var(--psp-s));
}

.psp-color-input {
    width: max(28px, calc(36px * var(--psp-s)));
    height: max(28px, calc(36px * var(--psp-s)));
    padding: 0;
    border: 1px solid #dbe3ef;
    border-radius: calc(8px * var(--psp-s));
    cursor: pointer;
    background: #fff;
    flex-shrink: 0;
}

.psp-text-input {
    flex: 1;
    height: max(28px, calc(36px * var(--psp-s)));
    padding: 0 calc(10px * var(--psp-s));
    font-size: max(10px, calc(12px * var(--psp-s)));
    border: 1px solid #d0d5dd;
    border-radius: calc(8px * var(--psp-s));
    outline: none;
    background: #fff;
    color: #162033;
    transition: border-color 120ms, box-shadow 120ms;
}

.psp-text-input:focus {
    border-color: #0f58d6;
    box-shadow: 0 0 0 4px rgba(15, 88, 214, 0.12);
}

.psp-create-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    min-height: max(30px, calc(32px * var(--psp-s)));
    padding: 0 calc(12px * var(--psp-s));
    font-size: max(10px, calc(12px * var(--psp-s)));
    font-weight: 700;
    border-radius: calc(8px * var(--psp-s));
    background: #0f58d6;
    color: #fff;
    white-space: nowrap;
    transition: background 120ms, transform 120ms, box-shadow 120ms;
}

.psp-create-btn:hover:not(:disabled) {
    background: #0d4db8;
    box-shadow: none;
}

.psp-create-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.psp-clear-btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    font-size: max(10px, calc(12px * var(--psp-s)));
    min-height: max(30px, calc(32px * var(--psp-s)));
    padding: calc(5px * var(--psp-s)) calc(12px * var(--psp-s));
    border-radius: calc(8px * var(--psp-s));
    border: 1px solid #ccc;
    color: #666;
    white-space: nowrap;
}

.psp-clear-btn:hover {
    background: #f5f5f5;
}

.psp-save-btn {
    all: unset;
    cursor: pointer;
    font-size: max(10px, calc(12px * var(--psp-s)));
    font-weight: 600;
    min-height: max(30px, calc(30px * var(--psp-s)));
    padding: calc(5px * var(--psp-s)) calc(14px * var(--psp-s));
    border-radius: calc(4px * var(--psp-s));
    background: #2b8a3e;
    color: #fff;
}

.psp-save-btn:hover:not(:disabled) {
    background: #237032;
}

.psp-save-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Order-view segmented control ─────────────────────────── */

.seq-view-seg {
    display: inline-flex;
    align-items: stretch;
    height: 34px;
    border: 1px solid var(--rhwo-border);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.seq-view-seg-disabled {
    opacity: .5;
    pointer-events: none;
}

.seq-view-seg-btn {
    all: unset;
    cursor: pointer;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rhwo-text-muted, #6b7280);
    white-space: nowrap;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
}

.seq-view-seg-btn:hover {
    background: rgba(13,110,253,.07);
    color: var(--rhwo-text, #1f2937);
}

.seq-view-seg-btn.is-active {
    background: var(--rhwo-accent, #0d6efd);
    color: #fff;
}

.seq-view-seg-sep {
    width: 1px;
    background: var(--rhwo-border);
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Column hide rules (key-based; works regardless of column order) ─── */

.seq-table.seq-hide-parent        [data-col-key="parent"],
.seq-table.seq-hide-rma           [data-col-key="rma"],
.seq-table.seq-hide-enduser       [data-col-key="enduser"],
.seq-table.seq-hide-bdtype        [data-col-key="bdtype"],
.seq-table.seq-hide-brand         [data-col-key="brand"],
.seq-table.seq-hide-product       [data-col-key="product"],
.seq-table.seq-hide-type          [data-col-key="type"],
.seq-table.seq-hide-arrival       [data-col-key="arrival"],
.seq-table.seq-hide-status        [data-col-key="status"],
.seq-table.seq-hide-qty           [data-col-key="qty"],
.seq-table.seq-hide-account       [data-col-key="account"],
.seq-table.seq-hide-palletloc     [data-col-key="palletloc"],
.seq-table.seq-hide-servicelevel  [data-col-key="servicelevel"],
.seq-table.seq-hide-id            [data-col-key="id"],
.seq-table.seq-hide-prio          [data-col-key="prio"],
.seq-table.seq-hide-reqdelivery   [data-col-key="reqdelivery"],
.seq-table.seq-hide-wash          [data-col-key="wash"],
.seq-table.seq-hide-disasm        [data-col-key="disasm"],
.seq-table.seq-hide-analysis      [data-col-key="analysis"],
.seq-table.seq-hide-quote         [data-col-key="quote"],
.seq-table.seq-hide-report        [data-col-key="report"],
.seq-table.seq-hide-prepared      [data-col-key="prepared"],
.seq-table.seq-hide-surftr        [data-col-key="surftr"],
.seq-table.seq-hide-surfor        [data-col-key="surfor"],
.seq-table.seq-hide-surfir        [data-col-key="surfir"],
.seq-table.seq-hide-blasting      [data-col-key="blasting"],
.seq-table.seq-hide-subsupplier   [data-col-key="subsupplier"],
.seq-table.seq-hide-asmpkg        [data-col-key="asmpkg"],
.seq-table.seq-hide-readyshipment [data-col-key="readyshipment"],
.seq-table.seq-hide-deviation     [data-col-key="deviation"],
.seq-table.seq-hide-comments      [data-col-key="comments"],
.seq-table.seq-hide-matdesc       [data-col-key="matdesc"],
.seq-table.seq-hide-boxdesc       [data-col-key="boxdesc"],
.seq-table.seq-hide-factory       [data-col-key="factory"],
.seq-table.seq-hide-shippeddate   [data-col-key="shippeddate"],
.seq-table.seq-hide-owner         [data-col-key="owner"] {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    opacity: 0;
    transform: translateX(-3px) scale(.988);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

/* ─── Column drag-to-reorder ─────────────────────────────────── */

.seq-table tr.rhwo-headrow > th {
    cursor: grab;
}
.seq-table tr.rhwo-headrow > th:active {
    cursor: grabbing;
}
.seq-table tr.rhwo-headrow > th .col-resize-handle,
.seq-table tr.rhwo-headrow > th button,
.seq-table tr.rhwo-headrow > th input {
    cursor: auto;
}

.seq-table tr.rhwo-headrow > th .col-resize-handle {
    cursor: col-resize;
}

/* Keep the source header fully readable while dragging. */
.seq-col-dragging-source {
    opacity: 1;
}

@property --seq-col-scale {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --seq-col-lift-y {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* Cells of the column being dragged: lift them visually so the user can
   see the entire column moving with the cursor. Applied via Je to every
   visible element with the matching data-col-key in the table. */

.seq-table [data-col-key].seq-col-dragging {
    --seq-col-lift-y: -2px;
    --seq-col-scale: 1.01;
    transform-origin: center;
    filter: saturate(1.08);
}

.seq-table thead tr.rhwo-headrow > th.seq-col-dragging,
.seq-table thead tr.rhwo-filterrow > th.seq-col-dragging {
    background:
        linear-gradient(90deg, rgba(15, 88, 214, .10), rgba(56, 189, 248, .14), rgba(15, 88, 214, .08)),
        #fff;
}

.seq-table tbody td.seq-col-dragging {
    background:
        linear-gradient(90deg, rgba(15, 88, 214, .055), rgba(56, 189, 248, .08), rgba(15, 88, 214, .04)),
        #fff;
}

.seq-table [data-col-key].seq-col-pop-out {
    animation:
        seqColPopOut 165ms cubic-bezier(.16, 1.35, .34, 1) both,
        seqColRowFlash 230ms cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: var(--seq-col-stagger, 0ms), var(--seq-col-stagger, 0ms);
}

.seq-table [data-col-key].seq-col-pop-in {
    animation: seqColPopIn 210ms cubic-bezier(.16, 1.35, .28, 1) both;
    animation-delay: var(--seq-col-stagger, 0ms);
}

.seq-table [data-col-key].seq-col-slot-snap {
    animation: seqColelotenap 190ms cubic-bezier(.18, 1.35, .28, 1) both;
    animation-delay: var(--seq-col-stagger, 0ms);
}

/* Body cells: stack above sibling tbody cells but stay BELOo the sticky
   thead (which sits at z-index 5/6) so the dragged body cells slide
   under the header on scroll instead of painting over it. */
.seq-table tbody td.seq-col-following {
    position: relative;
    z-index: 1;
    background-color: #fff;
    box-shadow:
        -6px 0 14px -8px rgba(15, 23, 42, .25),
         6px 0 14px -8px rgba(15, 23, 42, .25);
}

/* Header / filter cells stay sticky (do NOT override position) and need
   a higher z-index than the other sticky headers (z-index: 5/6) so the
   dragged column doesn't slide *under* its neighbors. */
.seq-table thead tr.rhwo-headrow > th.seq-col-following,
.seq-table thead tr.rhwo-filterrow > th.seq-col-following {
    z-index: 50;
    background-color: #fff;
    box-shadow:
        -8px 0 16px -8px rgba(15, 23, 42, .30),
         8px 0 16px -8px rgba(15, 23, 42, .30);
}

.seq-table thead tr.rhwo-headrow > th.seq-col-dragging.seq-col-following,
.seq-table thead tr.rhwo-filterrow > th.seq-col-dragging.seq-col-following {
    box-shadow:
        inset 0 0 0 1px rgba(56, 189, 248, .55),
        -10px 0 20px -10px rgba(15, 88, 214, .34),
         10px 0 20px -10px rgba(56, 189, 248, .32),
         0 8px 20px rgba(15, 23, 42, .12);
}

.seq-col-pop-lines {
    position: fixed;
    pointer-events: none;
    z-index: 300100;
    overflow: visible;
    contain: layout style;
}

.seq-col-pop-line {
    position: absolute;
    top: var(--seq-line-y);
    width: var(--seq-line-len);
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .74), rgba(15, 23, 42, .48));
    box-shadow: 0 0 1px rgba(15, 23, 42, .10);
    animation-duration: 420ms;
    animation-timing-function: cubic-bezier(.12, .86, .18, 1);
    animation-fill-mode: both;
    animation-delay: var(--seq-line-delay);
}

.seq-col-pop-line.is-left {
    left: calc(var(--seq-col-left-edge, 0px) - var(--seq-line-len));
    transform-origin: right center;
    animation-name: seqColPopLineLeft;
}

.seq-col-pop-line.is-right {
    left: var(--seq-col-right-edge, 0px);
    transform-origin: left center;
    animation-name: seqColPopLineRight;
}

.seq-col-contact-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    opacity: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0), rgba(15, 23, 42, .7), rgba(15, 23, 42, 0));
    transform-origin: center;
    animation: seqColContactFlash 230ms cubic-bezier(.12, .86, .18, 1) both;
}

.seq-col-contact-edge.is-left {
    left: var(--seq-col-left-edge, 0px);
}

.seq-col-contact-edge.is-right {
    left: var(--seq-col-right-edge, 0px);
}

@keyframes seqColPopOut {
    0% {
        --seq-col-scale: 1;
        --seq-col-lift-y: 0px;
        clip-path: inset(0 0 0 0);
        filter: saturate(1) brightness(1);
    }
    42% {
        --seq-col-scale: 1.018;
        --seq-col-lift-y: -3px;
        clip-path: inset(0 4px 0 4px);
        filter: saturate(1.18) brightness(1.035);
    }
    100% {
        --seq-col-scale: 1.01;
        --seq-col-lift-y: -2px;
        clip-path: inset(0 0 0 0);
        filter: saturate(1.08) brightness(1);
    }
}

@keyframes seqColPopIn {
    0% {
        filter: saturate(1.16) brightness(1.04);
        box-shadow:
            inset 0 0 0 1px rgba(56, 189, 248, .54),
            0 0 0 1px rgba(15, 88, 214, .18),
            0 10px 18px rgba(15, 23, 42, .10);
    }
    100% {
        filter: saturate(1) brightness(1);
        box-shadow: none;
    }
}

@keyframes seqColRowFlash {
    0% {
        background-size: 0% 100%;
    }
    45% {
        background-size: 160% 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

@keyframes seqColelotenap {
    0% {
        filter: brightness(1);
        box-shadow: none;
    }
    42% {
        filter: brightness(1.035) saturate(1.12);
        box-shadow: inset 0 0 0 1px rgba(15, 88, 214, .18);
    }
    100% {
        filter: brightness(1);
        box-shadow: none;
    }
}

@keyframes seqColContactFlash {
    0% {
        opacity: 0;
        transform: translateY(0) scaleY(.22);
        filter: blur(.4px);
    }
    18% {
        opacity: .88;
        transform: translateY(0) scaleY(1.04);
        filter: blur(0);
    }
    48% {
        opacity: .44;
        transform: translateY(0) scaleY(.82);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scaleY(.18);
        filter: blur(.6px);
    }
}

@keyframes seqColPopLineLeft {
    0% {
        opacity: 0;
        transform: translate3d(2px, -50%, 0) rotate(0deg) scaleX(.16);
    }
    16% {
        opacity: .78;
        transform: translate3d(0, -50%, 0) rotate(var(--seq-line-tilt)) scaleX(1.14);
    }
    38% {
        opacity: .66;
        transform: translate3d(calc(-1 * var(--seq-line-x-pop)), calc(-50% + var(--seq-line-y-pop)), 0) rotate(var(--seq-line-tilt)) scaleX(.88);
    }
    72% {
        opacity: .28;
        transform: translate3d(calc(-1 * var(--seq-line-x-drift)), calc(-50% + var(--seq-line-y-drift)), 0) rotate(var(--seq-line-tilt)) scaleX(.34);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-1 * var(--seq-line-x-travel)), calc(-50% + var(--seq-line-y-travel)), 0) rotate(var(--seq-line-tilt)) scaleX(.04);
    }
}

@keyframes seqColPopLineRight {
    0% {
        opacity: 0;
        transform: translate3d(-2px, -50%, 0) rotate(0deg) scaleX(.16);
    }
    16% {
        opacity: .78;
        transform: translate3d(0, -50%, 0) rotate(var(--seq-line-tilt)) scaleX(1.14);
    }
    38% {
        opacity: .66;
        transform: translate3d(var(--seq-line-x-pop), calc(-50% + var(--seq-line-y-pop)), 0) rotate(var(--seq-line-tilt)) scaleX(.88);
    }
    72% {
        opacity: .28;
        transform: translate3d(var(--seq-line-x-drift), calc(-50% + var(--seq-line-y-drift)), 0) rotate(var(--seq-line-tilt)) scaleX(.34);
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--seq-line-x-travel), calc(-50% + var(--seq-line-y-travel)), 0) rotate(var(--seq-line-tilt)) scaleX(.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seq-table [data-col-key].seq-col-dragging,
    .seq-table [data-col-key].seq-col-pop-out,
    .seq-table [data-col-key].seq-col-pop-in,
    .seq-table [data-col-key].seq-col-slot-snap,
    .seq-col-contact-edge,
    .seq-col-pop-line {
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }

    .seq-col-pop-lines {
        display: none !important;
    }
}

/* Floating ghost showing the dragged column's label */
.seq-col-drag-ghost {
    background: var(--rhwo-card, #fff);
    color: var(--rhwo-text, #111);
    border: 1px solid var(--rhwo-border, #cbd5e1);
    border-radius: 6px;
    padding: 6px 10px;
    font: 600 12px/1.2 system-ui, -apple-system, "eegoe UI", Roboto, sans-serif;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .22), 0 2px 4px rgba(15, 23, 42, .12);
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform;
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .96;
}

/* Vertical bar showing where the column will land on drop */
.seq-col-drop-indicator {
    position: fixed;
    width: 3px;
    background: linear-gradient(180deg, #0f58d6 0%, #38bdf8 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(15, 88, 214, .55);
    pointer-events: none;
    z-index: 9999;
    display: none !important;
    animation: seqColIndicatorIn 120ms ease-out;
}

@keyframes seqColIndicatorIn {
    from { opacity: 0; transform: scaleY(.6); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* ─── eelection toolbar ──────────────────────────────────────── */

.seq-selection-toolbar {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--rhwo-text);
    font-size: 12px;
    animation: seqeelToolbarIn 140ms ease-out;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

@keyframes seqeelToolbarIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.seq-sel-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    letter-spacing: .01em;
    flex-shrink: 0;
    color: rgba(17,24,39,.72);
    white-space: nowrap;
}

.seq-sel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: #0f58d6;
    color: #fff;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 700;
    padding: 0 4px;
}

.seq-sel-count.is-bump {
    animation: rhwoeelCountBump 170ms cubic-bezier(.22, 1, .36, 1);
}

.seq-sel-actions {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: nowrap;
}

.seq-sel-tip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.seq-sel-btn {
    gap: .3rem;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.seq-sel-btn:hover {
    background: rgba(240,247,255,.98);
    border-color: rgba(15,88,214,.26);
}

.seq-sel-btn.is-active {
    background: #0f58d6;
    border-color: #0f58d6;
    color: #fff;
    box-shadow: 0 6px 14px rgba(15,88,214,.16);
}

.seq-sel-btn.is-active:hover {
    background: #0d4fbf;
}

.seq-sel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #8a94a6;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms, color 120ms, border-color 120ms;
}

.seq-sel-close:hover {
    background: rgba(248,250,252,.96);
    border-color: var(--rhwo-border-soft);
    color: var(--rhwo-text);
}

/* ─── Tracked rows ───────────────────────────────────────────── */

.seq-table tbody tr.is-tracked td:first-child {
    border-left: 3px solid #0f58d6;
}

.seq-track-pin {
    font-size: .65rem;
    margin-right: .2rem;
    opacity: .7;
    vertical-align: middle;
    line-height: 1;
}

/* etack a tiny notification bell above the pin without growing the row.
   The wrap is inline so it sits inline with the parent oO text; the bell is
   absolutely positioned above it so it adds no vertical space. */
.seq-track-pin-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}

.seq-track-bell {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 30%);
    font-size: .55rem;
    line-height: 1;
    opacity: .85;
    pointer-events: none;
    white-space: nowrap;
}

/* ─── Notification bell (in toolbar) ────────────────────────── */

.seq-notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.seq-notif-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .32rem .6rem;
}

.seq-notif-icon {
    font-size: .95rem;
    line-height: 1;
}

.seq-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #e53e3e;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    border-radius: 8px;
    line-height: 1;
    pointer-events: none;
}

.seq-notif-btn.has-unread {
    animation: seqNotifehake 600ms ease-in-out;
}

@keyframes seqNotifehake {
    0%,100% { transform: rotate(0deg); }
    20%      { transform: rotate(-12deg); }
    40%      { transform: rotate(10deg); }
    60%      { transform: rotate(-8deg); }
    80%      { transform: rotate(6deg); }
}

/* ─── Notification panel ─────────────────────────────────────── */

.seq-notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.seq-notif-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 950;
    width: min(460px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 96px));
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(15,23,42,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pspFadeIn 120ms ease-out;
}

.seq-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .75rem;
    font-weight: 600;
    font-size: .8rem;
    color: #162033;
    border-bottom: 1px solid #eef1f5;
    background: #f8fafc;
    flex-shrink: 0;
}

.seq-notif-clear {
    font-size: .72rem;
    color: #0f58d6;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-weight: 500;
}

.seq-notif-clear:hover { text-decoration: underline; }

.seq-notif-empty {
    padding: 1.2rem .75rem;
    color: #8896a7;
    font-size: .8rem;
    text-align: center;
}

.seq-notif-list {
    overflow-y: auto;
    flex: 1;
}

.seq-notif-item {
    display: flex;
    flex-direction: column;
    gap: .42rem;
    padding: .7rem .8rem .75rem;
    border-bottom: 1px solid #f0f4f8;
    font-size: .78rem;
    transition: background 100ms;
}

.seq-notif-item:last-child { border-bottom: none; }

.seq-notif-item.is-clickable {
    cursor: pointer;
}

.seq-notif-item.is-clickable:hover {
    background: #e9f0fb;
}

.seq-notif-item.is-clickable.is-unread:hover {
    background: #dde8fa;
}

.seq-notif-item.is-clickable:focus-visible {
    outline: 2px solid #2f6bd6;
    outline-offset: -2px;
}

.seq-notif-item.is-unread {
    background: #eef4ff;
}

.seq-notif-item-top {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.seq-notif-wo {
    font-weight: 600;
    color: #162033;
    font-family: var(--rhwo-mono, monospace);
    font-size: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seq-notif-field {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15,88,214,.10);
    color: #0f58d6;
    font-size: .68rem;
    font-weight: 700;
}

.seq-notif-time {
    font-size: .68rem;
    color: #8896a7;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.seq-notif-dismiss {
    background: none;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 100ms, background 100ms;
}

.seq-notif-dismiss:hover {
    color: #e53e3e;
    background: #fff5f5;
}

.seq-notif-msg {
    color: #1f2937;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
}

.seq-notif-changes {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.seq-notif-change {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.seq-notif-change-field {
    color: #64748b;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.seq-notif-diff {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: .45rem;
}

.seq-notif-value {
    min-width: 0;
    padding: .42rem .5rem;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.seq-notif-value.before {
    background: #fff7ed;
    border-color: #fed7aa;
}

.seq-notif-value.after {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.seq-notif-value-label {
    display: block;
    margin-bottom: .18rem;
    color: #64748b;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.seq-notif-value-text {
    display: block;
    color: #0f172a;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.seq-notif-arrow {
    align-self: center;
    color: #64748b;
    font-size: .9rem;
    font-weight: 800;
}

@media (max-width: 520px) {
    .seq-notif-diff {
        grid-template-columns: 1fr;
        gap: .28rem;
    }

    .seq-notif-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}