/* ===== oork Orders (aligned table+filters system) ===== */

.rhwo-page {
    max-width: none;
    margin: 0 auto;
}

/* ExportList: full-height viewport under appbar */
.export-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;
}

.export-page .export-card {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.export-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

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

.export-page .rhwo-footer {
    flex: 0 0 auto;
    padding-top: 4px;
    padding-bottom: 2px;
}

.export-card .rhwo-meta {
    padding-top: 6px;
}

.export-top {
    padding-top: 6px;
    padding-bottom: 4px;
}

.export-top .rhwo-actions {
    flex-wrap: nowrap;
}

@keyframes rhwo-fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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



.rhwo-card {
    animation: rhwo-fadeIn 220ms ease-out;
}

/* Card/wrapper that scrolls horizontally if needed */
.rhwo-card {
    max-width:none;
    background: var(--rhwo-surface);
    border: 1px solid var(--rhwo-border);
    border-radius: 14px;
    overflow: auto; /* single source of horizontal scroll */
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 164px);
}

/* Meta line */
.rhwo-meta {
    padding: 10px 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rhwo-text-muted);
    opacity: .9;
}

    .rhwo-meta .sep {
        opacity: .45;
    }

/* Topbar */
.rhwo-top {
    padding: 10px 12px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rhwo-search {
    flex: 1 1 420px;
    min-width: 240px;
    max-width: 620px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.14);
    background: rgba(255,255,255,.95);
    outline: none;
    font-size: 14px;
}

    .rhwo-search:focus {
        border-color: rgba(15,88,214,.45);
        box-shadow: 0 0 0 3px var(--rhwo-accent-weak);
    }

.rhwo-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.rhwo-btn {
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--rhwo-accent);
    border: 1px solid rgba(15,88,214,.35);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rhwo-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: rhwo-spin .6s linear infinite;
}

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

    .rhwo-btn:hover {
        filter: brightness(0.98);
    }


    .rhwo-btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

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

    .rhwo-btnLite:hover {
        background: rgba(255,255,255,1);
    }

.rhwo-btnActive {
    background: var(--rhwo-accent, #0d6efd);
    border: 1px solid var(--rhwo-accent, #0d6efd);
    color: #fff;
}

    .rhwo-btnActive:hover {
        opacity: .88;
    }

.seq-view-toggle {
    width: 170px;
    justify-content: center;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .14s ease, box-shadow .16s ease;
    box-shadow: 0 0 0 rgba(13,110,253,0);
}

    .seq-view-toggle:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15,23,42,.08);
    }

    .seq-view-toggle:active:not(:disabled) {
        transform: translateY(0) scale(.985);
        box-shadow: 0 1px 4px rgba(15,23,42,.08);
    }


@media
    .rhwo-top {
        flex-direction: column;
        align-items: stretch;
    }

    .rhwo-search {
        max-width: none;
        width: 100%;
    }

    .rhwo-actions {
        justify-content: space-between;
    }
}

@media (max-width: 1100px) {
    .rhwo-card {
        overflow-x: auto;
    }
    /* allow scroll when truly needed */
    .rhwo-table {
        min-width: 1100px;
    }
    /* your old behavior, but only on small screens */
}


/* ===== Table (headers + filters share same colgroup) ===== */

:root {
    /* height of first header row so filter row can stick beneath it */
    --rhwo-head1: 36px;
}

.rhwo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    min-width: 0; /* keep, based on your total columns */
    min-height: calc(100vh - 160px);
    line-height: 1;

    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.01em;
}

    .rhwo-table thead th:not(:last-child) {
        border-right: 1px solid var(--rhwo-border-soft);
    }

    .rhwo-table tbody td:not(:last-child) {
        border-right: 1px solid var(--rhwo-border-soft);
    }

    /* keep last column clean */
    .rhwo-table thead th:last-child,
    .rhwo-table tbody td:last-child {
        border-right: none;
    }
    .rhwo-table tbody td:hover {
        background: rgba(15,88,214,.05);
    }


    /* Sticky header row 1 */
    .rhwo-table thead tr.rhwo-headrow th {
        position: sticky;
        top: 0;
        z-index: 6;
        background: #fff;
        border-bottom: 1px solid var(--rhwo-border);
        padding: 8px 8px;
        text-align: left;
        font-size: 11px;
        white-space: nowrap;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--rhwo-text-muted);
    }

    /* Sticky filter row (row 2) */
    .rhwo-table thead tr.rhwo-filterrow th {
        position: sticky;
        top: var(--rhwo-head1);
        z-index: 5;
        background: #fff;
        border-bottom: 1px solid var(--rhwo-border);
        color: var(--rhwo-text-muted);
        padding: 6px 10px 8px;
        vertical-align: top;
        overflow: visible;
    }

.rhwo-filterrow {
    font-size: 12px;
}

.rhwo-row td {
    font-weight: 400;
    color: #1f2937;
}

/* filter cell + inputs */
.rhwo-filtercell {
    min-width: 0; /* critical: prevents grid/controls from overflowing */
}

.rhwo-input {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--rhwo-border);
    background: rgba(255,255,255,.96);
    color: var(--rhwo-text);
    outline: none;
    font-size: 12px;
    min-width: 0;
}
/* default: try to fit */
.rhwo-table {
    min-width: 0;
}

/* if viewport is too narrow, allow horizontal scroll */
@media (max-width: 1500px) {
    .rhwo-card {
        overflow-x: auto;
    }

    .rhwo-table {
        min-width: 1500px;
    }
}


.rhwo-input:focus {
    border-color: rgba(15,88,214,.45);
    box-shadow: 0 0 0 3px var(--rhwo-accent-weak);
}

/* Two controls inside one column (Date range, Qty min/max) */
.rhwo-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    min-width: 0;
}

/* Dual filter layout: small & tight */
.rhwo-table thead tr.rhwo-filterrow th .rhwo-dual {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

    /* Make the controls compact inside dual */
    .rhwo-table thead tr.rhwo-filterrow th .rhwo-dual > * {
        min-width: 0;
    }

    /* DatePicker button compact in filter row */
    .rhwo-table thead tr.rhwo-filterrow th .rhwo-dual .dp-btn,
    .rhwo-table thead tr.rhwo-filterrow th .rhwo-dual button {
        height: 30px;
        padding: 0 8px;
        justify-content: space-between;
    }

    /* If it has a caret/icon, keep it visible */
    .rhwo-table thead tr.rhwo-filterrow th .rhwo-dual .dp-caret {
        margin-left: 6px;
    }


/* Sort header styles (works with your SortableTh helper) */
.rhwo-sort {
    cursor: pointer;
    user-select: none;
}

    .rhwo-sort.is-active {
        color: var(--rhwo-accent);
    }

    .rhwo-sort .rhwo-arrow {
        margin-left: 6px;
        font-size: 12px;
        opacity: .85;
    }

/* Body cells */
.rhwo-table tbody td {
    padding: 2px 4px;
    border-bottom: 1px solid var(--rhwo-border-soft);
    color: var(--rhwo-text);
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    height: 28px;
}

/* zebra + hover */
.rhwo-table tbody tr:nth-child(even) {
    background: var(--rhwo-surface-zebra);
}

.rhwo-table tbody tr:hover {
    background: var(--rhwo-surface-hover);
}

/* text helpers */
.rhwo-mono {
    font-family: 'Inter', 'Consolas', 'SFMono-eegular', monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    letter-spacing: .3px;
}

.rhwo-strong {
    font-weight: 600;
}

/* pill */
.rhwo-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,.10);
    background: rgba(17,24,39,.04);
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
}

    .rhwo-pill.ok,
    .rhwo-pill.received {
        background: rgba(16,185,129,.10);
        border-color: rgba(16,185,129,.25);
        color: #065f46;
    }

    .rhwo-pill.scrap,
    .rhwo-pill.scrapped {
        background: rgba(239,68,68,.10);
        border-color: rgba(239,68,68,.25);
        color: #7f1d1d;
    }

    .rhwo-pill.warn,
    .rhwo-pill.delayed {
        background: rgba(245,158,11,.14);
        border-color: rgba(245,158,11,.30);
        color: #7c2d12;
    }



/* empty row */
.rhwo-empty {
    padding: 16px 12px;
    text-align: center;
    color: rgba(0,0,0,.55);
}

/* Footer / pager */
.rhwo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 6px;
    gap: 12px;
}

.rhwo-pager {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rhwo-pageinfo {
    font-size: 12px;
    opacity: .85;
}

.rhwo-count {
    font-size: 12px;
    opacity: .75;
}

/* Make all filter controls behave nicely inside table header cells */
.rhwo-filterrow th,
.rhwo-filtercell {
    min-width: 0;
}

/* Inputs already fine, but ensure they can shrink */
.rhwo-input {
    box-sizing: border-box;
    min-width: 0;
    height: 28px;
}

/* Common “button-like dropdown” fix (many Blazor dropdowns render a <button>) */
.rhwo-filterrow th button,
.rhwo-filterrow th .dropdown-toggle,
.rhwo-filterrow th .select-btn {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    /* prevents ugly hard clipping */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* If your dropdown has an inner text span (recommended target) */
    .rhwo-filterrow th button > span,
    .rhwo-filterrow th .dropdown-toggle > span,
    .rhwo-filterrow th .select-btn > span,
    .rhwo-filterrow th .label,
    .rhwo-filterrow th .text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* If dropdown button uses flex (text + caret), this is the key */
.rhwo-filterrow th button,
.rhwo-filterrow th .dropdown-toggle,
.rhwo-filterrow th .select-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .rhwo-filterrow th button > span,
    .rhwo-filterrow th .dropdown-toggle > span,
    .rhwo-filterrow th .select-btn > span {
        flex: 1 1 auto;
        min-width: 0; /* THIS is what usually fixes the cut end */
    }

    /* caret/icon area */
    .rhwo-filterrow th button > .caret,
    .rhwo-filterrow th .dropdown-toggle > .caret,
    .rhwo-filterrow th .select-btn > .caret {
        flex: 0 0 auto;
    }

    /* Multi-select dropdown: restore correct flex layout inside filter row */
    .rhwo-filterrow th .ms-btn {
        justify-content: space-between;
    }

    .rhwo-filterrow th .ms-btn > .ms-label {
        flex: 1 1 auto;
        min-width: 0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rhwo-filterrow th .ms-btn > .ms-caret {
        flex: 0 0 auto;
        display: inline;
        overflow: visible;
        text-overflow: clip;
    }



/* Make sortable headers obviously interactive */
.rhwo-table thead th.rhwo-sort {
    cursor: pointer;
    user-select: none;
    /* bigger hit area + button feel */
    padding: 12px 12px;
    transition: background-color .12s ease, color .12s ease;
}

    /* subtle "this is clickable" affordance on hover.
       Layered over solid white so the sticky header doesn't reveal
       the rows scrolling beneath through the translucent tint. */
    .rhwo-table thead th.rhwo-sort:hover {
        background-color: #fff;
        background-image: linear-gradient(var(--rhwo-accent-weak), var(--rhwo-accent-weak));
    }

    /* keyboard focus (if you add tabindex) */
    .rhwo-table thead th.rhwo-sort:focus-visible {
        outline: 2px solid rgba(15, 88, 214, .45);
        outline-offset: -2px;
        border-radius: 8px;
    }

    /* Active sorted column */
    .rhwo-table thead th.rhwo-sort.is-active {
        background: #eef4ff;
    }

/* Layout inside the header: label left, arrow right */
.rhwo-sortInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Always show a faint sort indicator even when not active */
.rhwo-sortIcon {
    font-size: 12px;
    opacity: .45;
    transform: translateY(-.5px);
}

/* On hover: stronger indicator */
.rhwo-table thead th.rhwo-sort:hover .rhwo-sortIcon {
    opacity: .85;
}

/* Active: fully visible */
.rhwo-table thead th.rhwo-sort.is-active .rhwo-sortIcon {
    opacity: 1;
}

/* Active filter indicator */
.rhwo-table thead tr.rhwo-filterrow th.filter-active {
    background: rgba(15, 88, 214, 0.04);
    box-shadow: inset 0 -2px 0 #0f58d6;
}
.rhwo-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--rhwo-text-muted);
    user-select: none;
}

    .rhwo-check input {
        width: 16px;
        height: 16px;
    }



.rhwo-quoteOk {
    opacity: .9;
}


.rhwo-quoteOver {
    font-weight: 800;
    color: #b00020;
}


@keyframes rhwoTBodyNext {
    from {
        opacity: .92;
        transform: translateX(14px);
    }

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

@keyframes rhwoTBodyPrev {
    from {
        opacity: .92;
        transform: translateX(-14px);
    }

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



/* Animate tbody as a unit */
.rhwo-table tbody.rhwo-tbodyAnimNext {
    animation: rhwoTBodyNext 160ms cubic-bezier(.16,1,.3,1) both;
}

.rhwo-table tbody.rhwo-tbodyAnimPrev {
    animation: rhwoTBodyPrev 160ms cubic-bezier(.16,1,.3,1) both;
}

@media (prefers-reduced-motion: reduce) {
    .rhwo-table tbody.rhwo-tbodyAnimNext,
    .rhwo-table tbody.rhwo-tbodyAnimPrev {
        animation: none !important;
    }
}


/* Prevent white flash during page slide animation */
.rhwo-table tbody.rhwo-tbodyAnimNext,
.rhwo-table tbody.rhwo-tbodyAnimPrev {
    background: var(--rhwo-surface); /* same as table background */
}