html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    overscroll-behavior-x: none;
}

/* ── Global scrollbar styling ─────────────────────────────────────
   Thin, rounded thumbs that sit quietly against the page background.
   Firefox: scrollbar-width/color.
   Chromium/Safari: ::-webkit-scrollbar-* pseudo-elements.
   ──────────────────────────────────────────────────────────────── */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .28) transparent;
}

/* Chromium & Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .26);
    border-radius: 999px;
    /* 2px inset ring so the thumb floats above the track — same trick used
       by internal pane scrollbars in sequencelist.css / boxpicker.css.       */
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, .44);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: rgba(15, 88, 214, .48);  /* primary blue on drag */
    background-clip: padding-box;
}

/* ── Mouse-following tooltip ─────────────────────────────────────── */
.rh-tip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    width: auto;
    max-width: 280px;
    padding: 5px 10px;
    background: #005eb8;
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    user-select: none;
    display: none;
    opacity: 0;
    will-change: transform;
    transition: opacity 80ms ease;
}

.rh-tip.is-in {
    opacity: 1;
}

.rh-popup-drag-handle {
    cursor: grab;
    user-select: none;
}

.rh-popup-drag-handle button,
.rh-popup-drag-handle input,
.rh-popup-drag-handle select,
.rh-popup-drag-handle textarea,
.rh-popup-drag-handle a,
.rh-popup-drag-handle [role="button"] {
    cursor: revert;
}

.rh-popup-dragging,
.rh-popup-dragging .rh-popup-drag-handle {
    cursor: grabbing;
}

@keyframes rhwo-tooltip-snap-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.94) skewX(-4deg);
    }

    62% {
        opacity: 1;
        transform: translate3d(0, -1px, 0) scale(1.01) skewX(-1deg);
    }

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

a, .btn-link {
    color: #006bb7;
}

h1:focus {
    outline: none;
}

:root {
    --primary: #0f58d6;
    --secondary: #6c757d;
    --appbar-text: #fff;
    --bg: #f6f7f9;
    --surface: #fff;
    --text: #111;
    --border: rgba(0,0,0,.12);
    --muted-text: #5f6b7a;
    --soft-blue: rgba(15, 88, 214, 0.10);
    --soft-blue-2: rgba(15, 88, 214, 0.18);
    --soft-panel: #f9fbff;
    --shadow-sm: 0 6px 18px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 10px 28px rgba(16, 24, 40, 0.10);
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --drawer-w: 280px;
    --appbar-h: 56px;
    --c-parent: 160px;
    --c-wo: 160px;
    --c-delivery: 190px;
    --c-status: 150px;
    --c-orderstatus: 170px;
    --c-accountcustomer: 180px;
    --c-qty: 150px;
    --c-type: 220px;
    --c-rma: 170px;
    --c-typeofbearing: 170px;
    --c-billingaccountname: 170px;
    --c-endusertext: 170px;
    --rh-drawer-w: 280px;
    --rh-appbar-h: 48px;
    --rhwo-parent: clamp(120px, 9vw, 160px);
    --rhwo-wo: clamp(130px, 10vw, 170px);
    --rhwo-delivery: clamp(120px, 8vw, 150px);
    --rhwo-status: clamp(130px, 9vw, 170px);
    --rhwo-orderstatus: clamp(150px, 10vw, 190px);
    --rhwo-qty: clamp(110px, 7vw, 140px);
    --rhwo-type: clamp(200px, 20vw, 420px);
    --rhwo-rma: clamp(130px, 9vw, 170px);
    --rhwo-typeofbearing: clamp(120px, 7vw, 160px);
    --rhwo-od: clamp(110px, 7vw, 140px);
    --rhwo-billingaccountname: clamp(140px, 9vw, 200px);
    --rhwo-endusertext: clamp(140px, 9vw, 220px);
    --rwho-lastmodifieddate: clamp(120px, 8vw, 150px);
    --rwho-quotesubmitteddate: clamp(120px, 8vw, 150px);
    --rhwo-owner: clamp(140px, 9vw, 220px);
    --rhwo-quotewaitingdays: clamp(140px, 9vw, 220px);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Brand / accent */
    --rhwo-accent: #0f58d6;
    --rhwo-accent-weak: rgba(15,88,214,.10);
    --rhwo-accent-hover: rgba(15,88,214,.14);
    /* Surfaces */
    --rhwo-surface: rgba(255,255,255,.92);
    --rhwo-surface-2: rgba(250,250,252,.98);
    --rhwo-surface-hover: rgba(15,88,214,.06);
    --rhwo-surface-zebra: rgba(15,88,214,.035);
    /* Borders & shadows */
    --rhwo-border: rgba(17,24,39,.12); /* softer than pure black */
    --rhwo-border-soft: rgba(17,24,39,.08);
    --rhwo-shadow: 0 10px 28px rgba(17,24,39,.08);
    /* Text */
    --rhwo-text: #111827; /* slate-900 */
    --rhwo-text-muted: #6b7280; /* gray-500 */
    --rhwo-text-faint: #9ca3af; /* gray-400 */
    /* Focus ring */
    --rhwo-ring: rgba(15,88,214,.35);
    /* height of first header row so filter row can stick beneath it */
    --rhwo-head1: 36px;
}



@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}






.hub2 {
    position: relative;
    padding: 38px 32px 34px;
    max-width: 1400px;
    margin: 0 auto;
    opacity: 0;
    animation: hubFadeIn 0.3s ease-out forwards;
}

@keyframes hubFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px); /* optional subtle lift */
    }

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





/* ===========================
       Not Implemented Yet Template
       =========================== */

.nyi-wrap {
    min-height: 60vh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
}

.nyi-card {
    max-width: 520px;
    width: 100%;
    padding: 40px 32px;
    border-radius: 18px;
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    text-align: center;
    animation: nyiFadeIn 280ms ease-out both;
}

.nyi-icon {
    font-size: 42px;
    margin-bottom: 14px;
}

.nyi-title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
}

.nyi-text {
    margin: 0;
    font-size: 14px;
    opacity: 0.75;
    line-height: 1.5;
}

.nyi-btn {
    margin-top: 22px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    cursor: pointer;
    font-weight: 600;
    transition: background 140ms ease;
}

    .nyi-btn:hover {
        background: rgba(0,0,0,0.05);
    }

@keyframes nyiFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Dark theme support */
.theme-dark .nyi-card {
    background: rgba(30,30,30,0.9);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.theme-dark .nyi-text {
    opacity: 0.7;
}

.nyi-svg {
    width: 44px;
    height: 44px;
    opacity: .75;
}